Jump to: Overview

Dreamweaver MX: Defining Sites and Advanced Design

Table of Contents

About this Document

This document covers Dreamweaver design features that allow you to make well-structured, professional web sites. The first part covers tools for creating and managing a website. The second part cover tools for structuring page content: layouts, tables, layers, and frames. You should already be comfortable creating a web page with Dreamweaver MX. If you are not, please see Dreamweaver MX: Introduction.

Site Layout

Dreamweaver provides a way for you to work on several pages. This feature enables you to create your web structure locally before you upload it. Following this method, all relative links will continue to work. To create a site, select Site > New Site and click the Advanced tab.

In the left column are several options you can set.

Local Info

Site Name : The name you enter appears in the Site > Open Site submenu so you can reopen the entire web to work with it later. It is only for your reference: it will not appear in the browsers.

Local Root Folder : The folder that will hold the contents of your web site. Click on the folder to browse.

Refresh Local File List : You can view a map or a list of your web site's files by selecting Window > Site map or Site files. If you have Refresh Local File List checked, this will be automatically updated. Dreamweaver works faster if you have this unchecked, however, because the program will not have to reupdate your file list constantly

HTTP Address: When you link to files within your web page and use absolute URLs instead of relative URLs, Dreamweaver can make sure your links work if it knows your full web address. When you link by means of a relative URL, you supply only enough information for the browser to find the document from the current document. For example, if http://www.unc.edu/~delores/index.html is in the browser, your link to http://www.unc.edu/~delores/newpage.html can be simply newpage.html because newpage.html and index.html are in the same directory. An absolute URL would contain the full path, http://www.unc.edu/~delores/newpage.html.

Remote Info

Select Remote Info from the Categories list on the left. From the pulldown menu you can select the method of upload. If you are uploading to the UNC Server, select File Transfer Protocol (FTP). The FTP host will be isis.unc.edu, and the Host Directory will be public_html. If you enter your Onyen and password here and have Save selected, you can connect to the server with a single button click (see "Uploading a Site" below). If, however, several different people use your machine, and you do not want others to have access to your Isis directories, then you should deselect Save. You will be able to insert your password later.

When you click OK, your site will be created and the Site Window will open in the File panel. You can think of this as a control panel in which you can survey the entire web site. Use the Expand/Collapse button

to view a map of your site. You can close it at any time if you want to work only on an individual file.

The icons in the upper left allow you to switch views from site files to site map. Follow these steps to begin inserting pages into your site:

1. With your folder selected in the right pane, click on File > New File .

2. Type in a name for the first page. It should be index.html .

3. Make this your home page by:

Selecting Site > Edit Sites .
Making sure the correct site is selected and clicking Edit .
Clicking Site Map Layout on the left.
In the Home Page field, either typing index.html or browsing to it by clicking on the folder icon. (Note: Dreamweaver defaults to index.html .)
Clicking OK > Done .

4. Create a second file by selecting your site folder and clicking on File > New File .

5. Name the new file second.html (or whatever you choose).

6. Double-click on index.html and create a link to the second file by selecting some text and typing second.html in the link field of the Properties Inspector .

7. Return to the Site Window by saving and closing second.html . If necessary, go to Window > Site Map . Notice that there is now an arrow going from index.html to second.html . This is what the site map does: it keeps a graphical representation of your entire site, with arrows representing links.

Uploading a Site

If you filled in all of the fields in the Remote Info window when you were creating the site, uploading is very easy. Simply follow these instructions:

In the Site Window, click on the Connect button:

If a successful connection is made, the black circle on the button will become green, and you should see a list of local files on the right and a list of remote files on the left. To upload files, select them all and click the Put button, which is the upward-pointing blue arrow:

If you want to download a remote file to your local machine (to make corrections, for example), select the remote file and click the Get button, which is the downward-pointing green arrow:

Page Layout

Layouts

It is difficult to arrange objects precisely on a web page because you can never be certain how wide the viewer's browser window is going to be. Positioning objects reliably has traditionally been accomplished either through an invisible table (using a table with the border width set to zero) or through absolute positioning in html Cascading Style Sheets (see Web Authoring with HTML: Advanced Topics).

Designing with Layout View in Dreamweaver makes structuring web pages a lot easier - just click and drag to draw separate layout cells that will hold your objects in place. It's easy to resize, reshape, and move cells to different spots on your page. Layout cells are similar to html table cells, except that you do not have to create an entire table; as you draw single cells, Dreamweaver automatically creates the entire table for you.

To draw layout cells, you have to be in Layout View. (The default view - the one where you do all of your regular editing - is the Standard View .) Change to Layout View by first clicking the Layout tab on the Insert Bar and then clicking the Layout View button.

Clicking the Draw Layout Cell button changes the cursor to a plus sign. Draw a cell by dragging the mouse across the document window. To draw multiple layout cells, hold down the Ctrl key while you drag the mouse. As you draw cells in the document, notice that Dreamweaver automatically creates the tables that will hold these cells. The dotted lines will be invisible in the browser.

The Draw Layout Table button is used to insert a nested layout table into part of your main layout table. Nested tables can be useful for keeping certain design elements stationary while other elements adjust their position according to the browser window.

As a guide when you draw your layout, you can turn on the Dreamweaver grid. You can also have your layout automatically snap to the grid. Select View > Grid > Show Grid to turn on the grid. Select View > Grid > Snap to Grid to have all cells align themselves to the nearest grid line.

Clicking the green triangle in the column heading of a layout table will give you a menu with various options for modifying the width and height of the cell it controls. (You can turn off the Layout Table and column heading labels by choosing View -> Table View -> Show Layout Table Tabs .) These options plus others are available by clicking the Layout Table tab to select the entire layout table.

Width : Set the width of the entire table. Select Autostretch to let the table expand automatically to fit content.

Height : Enter a pixel value for the height of the table.

Bg : Set the background color of the entire table.

CellPad : Cell padding is the amount of space between the content of a cell and its border.

CellSpace : Cell spacing sets the amount of space between cells in the table.

Clear Row Heights : Clicking this button makes all the rows only tall enough to accommodate current content.

Make Cell Widths Consistent : This resets the width of an Autostretch column to be only as wide as its content.

Remove All Spacers : Clicking this button removes any spacer images (single-pixel images used by Dreamweaver when it creates Autostretch tables or columns).

Remove Nesting : This button turns a nested table into rows and columns of the outer table.

You can move a layout cell by selecting it and dragging the border by clicking anywhere except on a handle. Select a cell by holding down the Ctrl key and clicking anywhere inside the cell. Notice also that when the cell is selected, its features show up in the property inspector.

Width : You can manually enter a fixed pixel value or select Autostretch to let the cell expand to fit content automatically.

Height : Enter a pixel value for the height of the cell. The Width and Height parameters automatically adjust when you resize a cell using the mouse.

Bg : Use this to change the background color of the cell.

Horz : Click the drop down arrow to adjust the horizontal alignment of the cell.

Vert : Click the drop down arrow to adjust the horizontal alignment of the cell.

NoWrap : Checking this box keeps text from wrapping to the next line; the cell automatically expands to accommodate content.

To add content to your cells, click inside the cell and either start typing or use the Insert bar to insert images, etc. After you've created your Layout Table, it's useful sometimes to switch back and forth between the Standard and Layout Views to get access to the full set of Dreamweaver's table editing options. These options are described in the next section.

Layers

Layers allow you to have two objects occupying the same browser window space. They are excellent for absolute positioning since you have complete control over where your text or images will be placed on the web page. Imagine layers as sheets of transparent paper. You can write or draw on these sheets, and you can stack them and move them around.

Inserting and Configuring Layers

To draw a layer on the page, first make sure you're in Standard View, click the Common tab and select the Draw Layer icon on the Insert Toolbar, and drag the mouse over the relevant region on your document.

Note : You will sometimes see a small shield-like icon appear on your web page. This is the Layer Anchor Point. You can move it wherever you like without harming your layer. You can also make it appear or disappear by toggling View > Visual Aids > Invisible Elements .

To move or resize the layer, position the mouse over the Selection Handle in the upper left corner.

Although the simplest way to select the layer is by clicking on rectangle in the upper left corner, other options exist for when you have made your layer invisible or it is otherwise inaccessible. In these cases, choose the Layer Anchor Point or open the Layer Window ( Window > Others > Layers ). The layer's Property Inspector will not appear unless you have the entire layer selected; it will not show up if you only select the layer's content.

The Layer Property Inspector

The layer Property Inspector allows you to do the following:

L, T : Specify absolute pixel coordinates for the layer's location from the Left and Top margins.

W, H : Specify the layer's width and height.

Z-Index : A z-index tells the browser which layers go on top of which other layers. For example, if you had three layers stacked on top of each other, the z-index of the lowest layer (closest to the page) would be 1, and the z-index of the highest layer (the one closest to the viewer) would be 3.

Bg Image, Bg Color : Set a background color or image.

Frames

Frames divide a web browser window into sections so you can display several pages at the same time. This is useful if you want to have some elements, such as a logo or a table of contents, stay the same as the user follows links.

Creating the Frameset

The first step in inserting frames is to make the Frames window tools accessible. Click the Frames tab in the Insert Bar.

From the icons, select the frames arrangement that most closely matches what you want your page to look like.

When you click anywhere inside the document window, you should see a gray border between the frames you have placed on the page. You can resize any frame by holding the mouse over the border and dragging it in the appropriate direction.

If you divided your page into two frames, you now have three different documents: two frames, which hold separate content, and a frameset. You need to modify and save all three pages separately.

To save the frameset:

Select all the frames by clicking on a border. You should see a dotted line around all frames.

Select File > Save Frameset .

To save the frames:

To save all (both) frames, select File > Save All Frames .

To save an individual frame, open Window > Others > Frames and select the frame by clicking on it in the frames window.

Select File > Save Frame .

Each frame is a page with its own set of properties - its own title, background, default colors, etc. To edit one frame, click anywhere in the frame and add content.

Frame Properties

Notice that the frameset and the frames have different property inspectors. The frameset property inspector lets you assign border widths and colors. You can also turn off the borders or resize the frames by typing in widths or heights in pixels.

The frames property inspector lets you turn on or off the scrollbars. If you have No Resize selected, the viewer cannot drag the frame borders to resize the frames. You can also turn the borders on or off and assign border colors. Inserting pixel values for Margin Width or Margin Height will leave padding between the frame border and any text or images inside the frame.

The text field under Frame Name on the left allows you to assign a name to the frame. This will be important when you are creating links.

Controlling Frame Content with Links

One of the most powerful applications of frames is updating frame content via links. In the example page above, the viewer can follow any of the four links by clicking on them in the top frame. The new page will be loaded into the bottom frame, but the top frame will remain the same.

Normally, a link loads a new page into the same frame (or window) as the page that contained the link. To make the new page appear in a different frame, you have to specify the other frame as a target. To do this, you have to name the frame.

1. Select the frame and type a name into the text field of the frame's property inspector.

2. Go to a different frame and create a link to a different page.

3. Select the target from the pulldown menu in the link's property inspector. In addition to some default targets, you should see your frame's name on the list.

The link should now load the new page into the target frame.

Other Targets

The default options under the Target pulldown menu give you several options for loading the page into the browser:

_blank : opens the new page in a new browser window and keeps the current window available.

_parent : opens the new page in the parent frameset of the link.

_self : opens the new page in the current frame.

_top : opens the new page in the outermost frameset of the current document, replacing all frames.

For Browsers that Cannot Display Frames

Text-based browsers and older versions of Internet Explorer and Netscape do not know how to display frames. For these browsers, which ignore tags they do not understand, you can include an html tag that loads non-frames content. The code looks like this:

<noframes><body> This is the non-frames content that you create yourself. </body></noframes>

Dreamweaver automatically inserts this code when you do the following:

1. Select Modify > Frameset > Edit NoFrames Content .

2. The frameset is cleared, and you have a blank document with "NoFrames Content" at the top.

3. Add whatever content you want the non-frames browser to see.

4. When you are finished, select Modify > Frameset > Edit NoFrames Content again.

About help.unc.edu