After you set up your site, the following window will appear:

Creating Your Page

Now you're ready to begin! There are two ways to get started with Dreamweaver: Either select a new HTML file or open a new document by going to File --> New, and select HTML, and click Create.

Let's take a look at the Dreamweaver interface:   several key toolbars - the properties window, the insert toolbar, and the file management window - offer quick access to many of Dreamweaver's functionalities:

Page Views

Dreamweaver offers three viewing options for working on and creating your page:

  1. Code - This view presents the user with only the HTML code.

  2. Design - This view presents the user with a GUI interface, similar to a word processing program, allowing for the creation of professional quality pages with little or no knowledge of code.  

  3. Code and Design - The view splits the screen, providing the user with both the code (on top) and GUI (on the bottom). Highlighting text in the bottom, GUI portion, will highlight the code on top.   This offers the user a unique opportunity to learn code in a "subtitle" fashion.

Preview Your Work in a Browser

While working on your web page, you may want to see how it will look when it's posted or in a browser. There are two ways to achieve this goal.

  1. From the main toolbar select File --> Preview in Browser. You may then select the default (Internet Explorer) or choose a new one (e.g., Mozilla, Netscape, Opera, Safari).

  2. When you feel more comfortable with Dreamweaver, you can use the hotkey, F12, to preview your work.

Inserting Images

In Dreamweaver, there are many ways to accomplish any given task.   For instance, there are two ways to insert an image.   You could click on the image button in the insert content bar at the top:

Or, you could click on "Insert" at the top and scroll down to "Image:"

It is important to remember that Dreamweaver is an html editor, not an image editor. Make all adjustments to your image in Fireworks, before inserting it into your Dreamweaver document.   This includes resizing the image, as you risk losing quality and correct proportions.

There are certain features of your image that you can edit from the Properties window.   You can align an image, create a border around the image, add alternative text, allot horizontal and vertical space to pad your image, create an image map, and more:

Inserting Tables

In HTML, tables offer a number of layout options. If you choose a border, the user will see the tabular structure. If you choose no border, the user only sees aligned text or images.

You can insert a table in two ways:

  1. The table icon on the Insert Window

  2. File --> Insert --> Table

Both options will yield a window with options for # of rows, # of columns, cell spacing, cell padding, width, and border:

Choose the dimensions and qualifications for your table and press OK. You have a table!

Links

There are two types of links in this world: absolute and relative.   You should already be familiar with absolute links - these are links that are full URL addresses. Here's one example:

     http://www.graphic-design.ca

Absolute links are used to direct a reader of your webpage to a place outside your webpage.  

Relative links point to a specific file within your webpage - the file's relation to the current directory or root directory.   For example, if you have two files in your pages directory, homepage.html and school.html, to link from one to the other you only need to insert the filename into Dreamweaver's link feature. When you have files within folders within your pages folder, things become a little more complicated.   Let's say you want to insert links on your homepage.html page to an image that is located in a folder named "images." You need to tell browsers to look in the "images" directory to find your images. Therefore, any links from homepage.html to files in your image folder would be like this example: "images/gnomes.jpg."   The name of the folder is reflected within the file name.

As is the case with many of Dreamweaver's functions, there are many paths to the same end. My preferred method for inserting links is through the Properties window:

  • Highlight the text you would like to link.

  • Click in the "link" field in the Properties window. Enter the URL of the page you would like to link to.

  • If you are linking to a page within your site, you need only enter the filename.

Page Properties

An important new feature of Dreamweaver MX 2004 is the expanded Page Properties Menu.   From this menu, you can modify the text font, size, and color, as well as the background color of the entire page:

Additionally, you can modify how links appear on your webpage by clicking on "Links" in the left window: