SoM Web 2.0 and Dreamweaver Quick-Start Guide

IRT has launched a new look-and-feel for the SoM Web environment. This quick-start guide will highlight the key differences between our old and new design and will provide instructions for working in the new format.

To use this guide, you will need to have Dreamweaver MX 2004 or newer. You can download a free 30-day trial version from the Adobe Web site. Or you may obtain a license through Campus Wide Agreement.

Before you Begin

This guide is not intended as an introduction to publishing in the SoM Web environment. If you are a new Web Author, it is strongly recommended that you complete our more in-depth training first. You will also need to:

Create a connection to your site with Dreamweaver
Get your site files from the server
Set up your local Templates, so that pages can be displayed correctly in Dreamweaver

Note: The sections in our in-depth training covering page layout and style are now outdated; current information is provided below.

The Basics

Building your site involves editing existing pages, and creating new pages and sub-directories.

Identify which file to edit and Get a fresh copy - If multiple Web Authors are working on a site at the same time, it is important to make sure that edits are made to the latest version of any given page. When making an edit, be sure to "get" the page from the server before working with the page on your computer.



	Click to Enlarge

Edit the page - Now you are ready to edit content. All content should be placed in the editable areas, which include the page title, breadcrumbs, left navigation and main body of the page.

Publish - Once you've added text, images, diagrams and other content, save the page and "put" it to the server.

Validate - Always confirm your changes by switching to the browser and refreshing the page you've just updated.

Publishing Pages

The major difference in the new design is the way page elements are manipulated. You will have a wider selection of styles that can be applied to text, container elements such as highlights boxes. Adding to and removing items from the left navigation menu has also changed slightly.

Editing the Left Navigation

Browse to the page of interest, click once on the left navigation and click the "Edit..." button in the Properties Inspector. This should open the separate left navigation file (navigation.htm) from your "includes" directory.

You should always edit or duplicate existing items in the left navigation, so that styles and spacing are preserved. Primary navigation links are flush left. Subnavigation links are indented. Sub-subnavigation links are further indented.

Changing an existing item:
1. highlight the link text
2. type the new text over the old; do not use the enter key, or type outside the linked text
3. set the target of the link in the "Link" field in the Properties Inspector



	Click to Enlarge

Adding a new item to the left navigation menu:
1. Click anywhere inside of an existing item you would like to copy
2. Click on the <table> tag in the Tag selector (see figure on right) to select the link's table
3. In Dreamweaver's main menu click Edit > Copy
4. Make sure your cursor is outside any existing link table, and within its proper section (primary, subnav, or subsubnav) by using the Tag selector (as in step 2) to select the link table before or after where you want your new link to go; click once on the left or right arrow key on your keyboard to move the cursor before or after the link table.
5. Click Edit > Paste
6. Repeat the steps for changing an existing item to update the link you just pasted
7. Click File > Save, then "put" the file by clicking Site > Put
8. You can click "No" on the Dependent Files prompt
9. Validate your changes by switching to a Web browser and browsing to or refreshing the page you just published

About subnavigation

Subnavigation and subsubnavigation indents are created by placing <div> tags with the ID (not class) "subnavigation" or "subsubnavigation" around selected link tables. Tables and divs must be properly nested to function. Contact Web Help if you need help installing or de-installing subnavigation sections or items.

Editing Breadcrumbs

In the new design, updating the breadcrumbs file can be achieved in the same way as before, with a couple of minor exceptions. The character that separates links has been changed from a forward bracket to a double right angle quote ( » ). To insert such a separator between links, duplicate an existing one by selecting, copying and pasting it at the desired location.

Additionally, breadcrumbs are now named simply "breadcrumbs.html" and do not have a "-home" or "-main" suffix to indicate their location.

Formatting Page Text with New Styles

Major Page Headings - Use the "Format" pull-down selector in the Properties Inspector and select the appropriate H1 – H6 setting. Each page should begin with an H1.

Styling Body Text - Use the "Style" pull-down selector [small screen shot with circle around pull-down] to choose from the SOM pre-defined styles to size, highligh and emphasize sections of text. Styles are grouped intuitively in the list and should be self-explanatory.

Styles can be applied to block-level elements such as table cells (in which case all the text in that cell is styled), paragraphs, headlines or links. They can also be applied to sections of text by first highlighting the text you’d like styled and then choosing the style in the Properties Inspector.

Heading one through six should be used to add different levels of headings.

Please keep the following principles in mind when working with styles:

Always have one Headline 1 headline at the top of the page
Layer blocks of body text, "chapterized" with subheadlines using Headline 2 through Headline 6 as you step down in hierarchical importance of information; headlines help indicate precedence and importance
Avoid using the font, size, and color properties in the Properties Inspector and rely on the pre-defined styles as much as possible

Highlights and Image Boxes



	Click to Enlarge

The set of styles that appear above the text styles enable you to manipulate the appearance of container elements such as highlights and image boxes. You can set the width of boxes, or add rules or margins around them, using these styles.

Feel free to experiment with these box-related styles:

Adding a highlights box:

Open a page
Place the cursor in an empty line
In Dreamweaver's main menu click Insert > Layout Objects > Div Tags
In the resulting window select "At insertion point" for the "Insert" field.
Based on the index of available highlights boxes select a value for the "Class" field
Click "OK" and a box will be inserted at the location of the cursor
To place a headline at the top of the box, type text in the first line and set the "Format" property (in the Property Inspector) to any of the heading values

Changing the box width:

By default, the width of highlights boxes is set to 235 pixels. If an object (e.g. an image) inside of the box is wider than this, it will stick out on the sides. To ensure the width of the box matches that of the object, you can apply a preset width using the "setwidthxxx" style:

Click anywhere inside the box and right-click on the <div.ClassName> tag in the Tag Selector
Select "Quick Tag Editor..." from the menu that pops up
In the resulting "Edit Tag" box you will see a <div> tag with the"class" property set to the class you chose earlier (see figure on right)
Place the cursor at the ending quotation mark and insert a space
You will now insert an additional class that will set a specific width for the highlights box
Type "setwidth" plus the desired width of the box in pixels. This number will have to be one of the following preset widths: 300, 250, 245, 225, 200, 150, 100
Press "Enter" or "Return" on your keyboard
For a highlights box with a class of "boxleft_withboxlabel" and a width of 275 pixels, the "Edit tag" field would read: <div class="boxleft_withboxlabel setwidth275">

Navigation Tabs

The red drop-down menus that appear in the header section of your site represent the major areas of content. This menu is set up at publication and can only be updated by IRT. Changes to this menu should be submitted to us through the Web Help submission form at http://webhelp.stanford.edu/ . Please include the items to be updated and their target URLs.

Tab items are highlighted depending on the location of the current page. This effect is achieved through special code in the breadcrumbs file in the sub-directory that the page is in. To create a new page in a certain sub-directory, make sure you duplicate a stationery file within that sub-directory, so that the highlight effect is preserved.

Creating a New Topic Subdirectory

Instructions for adding a new sub-directory to your site are provided in our existing training. You might want to add a relevant item to your navigation tabs. As mentioned above, WebHelp will be able to help you with this.