It’s important to remember that Dreamweaver doesn’t behave like Illustrator, Photoshop or InDesign. Dreamweaver isn’t native to Adobe like the others so it’s actions and such respond differently. Aside from a few basic Command keys, there aren’t many things Dreamweaver has in common with the Big 3.
It’s also important to recognize that web design is very different than print design. While with print design what you see is what you get, in web design there are a ton of backend features to take into consideration.
When you first open Dreamweaver you are given several options of the type of document to work with. If you have no previous experience then we need to go over the purposes of a few of these file types.
HTML stands for Hyper Text Markup Language. This is your basic layout file type, the base for your web pages will begin here.
CSS are Cascading Style Sheets. These control everything from the colors used within your page to the fonts and in more extreme cases, the positions, sizes and content of many elements. CSS can be used in the HTML document itself or it can be it’s own page that the HTML page links to.
We’ll begin by focusing strictly on the HTML document, learn how to add images and text, how to format them, and some basic code…
The Welcome Screen is where you make your initial choices based on what you are going to do.
Go ahead and open a new HTML document. The first three buttons in the upper left control your view. We’re going to be working with the Split screen so we can see how the code makes everything work.
If you look at the Properties panel when you first open your document, you’ll notice there is a Page Properties button. Click it and you will see the basis of CSS editing within the document. There are two Appearance panels you can choose from, one controls things using CSS, the other uses in-page HTML. Both do slightly different things and you should familiarize yourself with what you see within them.
For starters lets look at the Appearance (CSS) panel. Select a font from the dropdown menu, set your regular type size, color, etc. to what you would like. This is how mine looks.
When you hit ok, you can see the changes made in the section of your code. All of these pagewide properties will be set by default within the head of your HTML page.
I’ll cover the three basic sections of an HTML document, what your CSS says and how to start laying out your webpage in the next post.