Dreamweaver Assignment 3: Getting a Quick Start

Photo credit: Balazs Gemesi, uploaded via Flickr, Creative Commons License

3.1 Starter Layouts

Selecting the File => New menu option brings up the new document dialogue box.  Here, we can select from a number of different layouts for our new document.  For instance, the number of columns, column widths and inclusion or exclusion of headers and footers can be selected.

Note that liquid column width will adjust to the width of the user’s display, whereas fixed column width will display as created by the author.

Also available in this dialogue box is the option to select the document type (the default being XHTML 1.0 Transitional), and the CSS Layout (cascading style sheet).

3.2  Building the Starter Layout Homepage

In this section, we begin our page by from the new document dialogue box.  We selected a new blank HTML document of the two-column fixed-width type with a left sidebar.  We also attached an existing CSS file to the new page.  

Creating our new page

3.3 Creating the Header Area

Switching over to code view on our newly created page, we note the extensive use of comments embedded in the code.  These comments serve to explain the various sections of code, explaining how to use them, and how they affect the page.

Returning to design view, we place the cursor focus in the main content area of our page, and note that the status bar indicates that we are located in the .content area.  Moving to the CSS Styles panel, we highlight the .content item in the rule list, and note that the properties for that item are displayed in the area below the rule list.  We select the option to Add Property, which allows us to choose the background image option, and browse for the image we desire.

We then add the property that limits the image to one instance, as opposed to repeated tiling.

Next we move to our assets panel to select an existing logo for our page.  Our tutor has already defined locations for her assets, but need to visit the files panel, and use the manage sites option to point the application to our asset folder.

Having found our logo on the assets panel, we click insert, and get a dialogue to define some image properties if desired.

We are also instructed to use the title textbox in the view bar area to specify a page title.

3.4 Adding a Navigation Bar

Here we move to our sidebar area, which will serve as our navigation pane.  Setting or focus therein, we move to our properties pane and set our background color.  Interestingly, not only can we select colors from a color panel, but also select areas of the existing document to color-match.  Neat!

Next we modify the navigation links in the sidebar.  We edit the text on our first link to reflect that it points to the Products page.  We also note that the properties panel at the bottom of the screen allows us to specify a target page for that link.  Next to the link combo box, we note a crosshair icon.  We can click and drag an arrow from this icon to an existing page on our files panel, and the mapping is completed auto-magically.  Freakin’ sweet!

We also revisit the CSS styles panel to adjust the font properties of the links in our navagation sidebar.

3.5 Adding Main Content

Moving back to our files panel, we see that we have a file called text.html with our desired text content already created.  We open this file and copy the text in design view.  Switching back to our project page, we paste this text into design view in the main content area.  The cool part here is that the existing CSS rules are automatically applied to our content here, so no additional formatting is required.

3.6 Modifying Link Styles

Here we modify the Font size of the sidebar links with the body rule on the CSS panel.  We change the font size from “100%” to “12px”, or 12 pixels.

3.7 Completing the Homepage

In this section we revisit the assets tab, adding a couple of images and some text to round-out our sidebar.

Having done that, out tutor instructs us to click on the globe icon on the view bar, allowing us to preview the page in our browser.

3.8 Adding the Page Boarder

Here we are introduced to the page container.  All of our content lies within this container, with the area outside being page background.  Too add our container boarder, we select the container item in the CSS styles panel, and add a boarder property.  Unfortunately, there are no options to choose from; our properties must be entered in command-line style.  There is however a tool tip displayed when we hover over the boarder field, advising that we enter “style color width”.  In our case, the syntax is “solid #000 1px”, meaning solid line, black, one pixel wide.

Design view of our starter page