Using Dreamweaver

Setting up Dreamweaver

Site Access

For access to the U drive we will use Local / Network (on campus) or WebDAV (off campus). For access to the NAS or other servers it is also common to use FTP.

Site Configuration (Site... New)

Dreamweaver likes to know where the whole site is, giving you the power to do site-wide tasks. See screenshots for setting up the configuration for U drive access to the web site. For the class server, see Class Server Dreamweaver settings.

Orientation to the Dreamweaver Panels

1. Menu Bar - File, Edit, Insert, Modify and Text contain most of your commands to change or save the content in area 3. View, Site, Window contain the things you need to do to modify your working area. Note the area under the Menu Bar has another view of frequently-used commands, although most of these can also be found in the menu bar, but here they are grouped differently. Common and Text contain the most basic tools.
2. File and CSS Panels - These can be added or hidden using the Window menu item. The Files view is particularly heavily used while creating and editing pages.
3. Web Pages / Content Editor - Note the tabs along the top. Every time you double-click an item in the Files Panel it opens it in this panel and leaves the previously open documents as tabs so you can go back and forth. Cascading and Tiling of the files so that you can see more than one is done in the Windows Menu bar. Note the Code / Design buttons directly below the File tabs - this enables you to toggle between HTML code and presentation. Finally note that the Title is also set in the text box directly beside the Code / Design view buttons.
4. Context-Sensitive Properties Panel - this area allows you to modify HTML attributes and presents the attributes appropriate to the tag your curser is on in the Content Panel.

Editing Your Pages

Links/Anchors (Insert, Hyperlink / Email link / Anchor)

Images (Insert Image)

Content (type in the Content Panel, use the Properties Panel)

Testing

Spell Check (Text, Check Spelling or Shift-F7)

Validation - this tells you how you have broken coding rules. Once the tool runs it displays any error it finds below the Properties Panel in the Results panel. If you click on the items in the Results panel it takes you to the area where the mistake was made.

CSS

CSS can also be edited in Dreamweaver, but of course there will be no Design View. While you are editing an HTML document, Dreamweaver helps you with CSS in two major ways. First, if you open the CSS Panel (above the Files Panel to the right) and select the Current button you'll see the CSS properties applying to this area of code. Second, in the bottom of the Content window you'll see a linear chart of how deep into the structure of the document you are.

Layout

You can visually create absolute divs (which Dreamweaver calls "Layers") use the Layout tool. Select Layout from the Tool bars under the Menu bar and after selecting Draw AP Div you can draw areas on the web page and Dreamweaver will give you the coordinates for those areas and let you put content in them.

Templates

Dreamweaver is at its most powerful if you use the template feature. By defining a "family" of related layouts and saving each as a Template (File, Save As Template) it makes it very quick to create subsequent pages.