Intro to Dreamweaver

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.

Javascript controls motion, animation and actions in the HTML page. Just as with CSS, Javascript can fit within the HTML document or can be linked to as an external document.

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…

Welcome Screen
The Welcome Screen is where you make your initial choices based on what you are going to do.

Dreamweaver Welcome Screen

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.

Code, Split and Design options for screen view

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.
Properties setup

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.
basic settings
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.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s