Menu Header

To create a menu header, choose Heading 2 from the Format drop-down menu located in the Properties toolbar. Type out your menu header, and apply a link if needed.

Main Navigation Item

To create a list of main navigation items that will link your users to your main pages, click the Unordered List icon in the Properties toolbar and type out your items as a bulleted list. Apply links to all main navigation items. Your navigation menu must be an Unordered List and a link for it to style correctly.

Sub-Level Navigation Item

If you want to create sub-level indented items in your main navigation, create an Unordered List within one of your main navigation items. This can be done by pressing Return/Enter after a list item, and then pressing the Tab key. Apply links to all sub-level navigation list items. To return to your main navigation list level, press the Return/Enter twice, and to return to the menu header level, press it once more.

Right Column Navigation

The right column, located in the 3-column template, is intended to provide additional navigation and content in your Web site, and works exactly like the left navigation. The right column navigation menu content is contained in the Dreamweaver library item, rightcol.lbi. The above instruction on creating your menu can also be used for the right column navigation.

Save the file(s) and allow the updates to be made. You have now completed editing the content that will appear in your navigation menus.

Horizontal Navigation

The horizontal navigation is a global navigation for your site, and is implemeted through the master template. Use this option sparingly. It is not meant for more than a few menu items.

The horizontal navigation is located in area of the header with the gold background, and contains the text "California Polytechnic State University." To create a horizontal navigation, follow these steps:

1. Open master_template.dwt and delete the text "California Polytechnic State University" and the paragraph tag <p> that contains it.
2. Type out the navigation items using paragraph returns after each item.
3. Apply links to all of the navigation items.
4. Select all of the navigation items and make into an unordered list <ul>.
5. To apply a vertical border to the first navigation item, select the <li> tag of that item, and in the Style drop-down menu, select first. This step is optional, however.
6. Save the file and allow the updates to be made.

Note: you can not have horizontal menu items and the university name simultaneously. This is intentional. For this reason, there is no example of this feature included as sample content in the template.

If you decide to create any other menu/navigation system on the template, ensure that it is Web Accessible. If you need help planning out the structure of your Web site, visit the Planning section in the Web Authoring Resource Center (WARC).

Creating Pages for Your Web Site

You are now ready to begin creating Web pages from the templates. This section describes the variable content you must manually edit on each page you create.

Create a Page in Dreamweaver

Method 1

You can create a page from a template file by going into Assets, select the Templates icon on the left side of the window, right click on a template, and click New from Template.

Method 2

Another method in creating a page is by going to File > New, and in the dialogue box click Page From Template. Make sure you choose your site's name in the Site pane, click on the template you wish to create a page from, and the click Create.

Do not create pages from the master_template.dwt file, and do not duplicate the sample_content.html file as a method of creating Web pages. If any other method than the two mentioned in this section are not used, unpredictable results may occur.

Window Title

In Dreamweaver, editing the window title text can be done by going to Modify > Page Properties..., click on Title/Encoding in the Category pane, then change the text in the Title box to reflect "Page Title - Department - Cal Poly". Another method of editing the window title is to type your text in the Title field in the Document Toolbar. For more information on Window Title, visit the Titles and Headers section in the WARC.

Breadcrumb

A breadcrumb is like a "You Are Here" indicator within your Web site. A breadcrumb reflects the most common click path from your home page to the page currently being edited. This path may be composed of several page links. If your Web site will have multiple paths to the page currently being edited, create a breadcrumb that shows the click path that users will most likely use to get to the page. To use the breadcrumb, follow these instructions:

1. Open the breadcrumb.lbi file, located in the Library folder.
2. In Design view, replace "Department Name" with your college, department, unit name, or simply, "Home," and link it to your homepage. This link will be consistent across your entire Web site.
3. In each Web page you create, add the title of the page to the breadcrumb in the editable region labeled "breadcrumb." This will replace the placeholder text, "Page title." You can put multiple components in this area that constitute the click path of the breadcrumb, and they should each be separated with a “>” symbol, as shown in the picture below. This symbol will make the distinction between the different locations within the click path.
4. Do not link the current page title in the breadcrumb. Link only the page titles of those that constitute the click path leading up to the current page.
   

Note: The breadcrumb is not an automatic feature—you must manually edit the breadcrumb on each page.

Left and Right Column Content Areas

The left and right column content areas are editable regions for providing additional content such as text and images, and are located inside the leftnav and rightcol divs, respectively. These areas are limited to content elements such as h2 headers, h3 headers, paragraphs, unordered lists, and images. Links can be applied to any of these elements within these two divs.

To use the left and right column content areas, simply click inside the navcontent1 or navcontent2 editable regions and type out your text. If you find that your text does not display properly, make sure it is marked up with one of the elements mentioned above. If you want to add graphics to the navcontent1 div, make them no wider than 165 pixels, and if you want to add graphics to the navcontent2 div, make them no wider than 180 pixels. Graphics any wider than these dimensions will break the layout of the page.

Content Area

To migrate content from an existing site to the CP Template, see instructions for Migrating an Existing Site to the Cal Poly Template.

The content area has default text and formatting as placeholder text for the template. Delete this text each time you create a new page, or delete it in the template if you want the content area blank when creating a new page. The content will style automatically when you apply formatting to your text, and it is important to remember that most of the styling depends on the HTML tag assigned to it.

Formatting

The following guidelines regard using the Properties toolbar to assign the correct formatting to your text.

• Use the Format drop-down menu to distinguish your text elements between headers and paragraphs. Heading 1 is to used for page titles, Heading 2 is for section headings, Heading 3 and Heading 4 are for sub-section headings, and Paragraph is for any block of text.
• The Unordered list and Ordered list buttons create HTML markup code that is necessary for a bulleted or numbered list.
• Use the Bold and Italic buttons to strengthen or emphasize certain elements of text.
• Do not use the Font or Size drop-down menus as these will create new styles that will be embedded into the current page. Font styles are pre-assigned in the template based on the HTML tags you use to markup your content.
• The Text Outdent and Text Indent buttons are INACCURATELY labeled. These buttons apply the <blockquote> tag in the HTML. They should only be used for creating blockquotes. Do not use them for indenting text because a style already exists for that purpose.
• Do not use the Text Align buttons as they will create unwanted code.

Styling

Using the styles that have already been created in the template will ensure that you are properly styling your Web site's content. Provided is a list of the styles that you can use in the Content Area of your page, and how to apply them:

• backtotop - styles text that would link users to the top of the page, such as "Back to Top"
• bit – apply this style to small bits of code in a <code> tag to make it stand out more
• center – apply this class to a paragraph <p>, table <table>, or table cell <td> to center the text, or apply it to an image to center it on the page
• contentBox - surrounds text in a grey box with a 1px border
• contentBox_no_outline - surrounds text in a grey box without a border
• contentBox_outline_only – surrounds text in box with a grey border and no background
• explanatory - apply this style to labels to make it appear above its text area in a form
• first – apply this class to the first item in the horizontal navigation to remove the left border
• imageleft - floats an image to the left
• imageright - floats an image to the right
• indent - indents certain text elements (can be applied only to an h3, h4, or paragraph)
• nolinkleft - for tables that represent lists, this style removes underlines from links when presented in a table. Use only for elements that are presented in a list format within a table. Apply this class to the <table> element.
• right – aligns text to the right side of the page or inside a table cell <td>
• shaderow - applies a shaded background color to rows within a table
• split – apply this class to a table with two columns to create a divided section within the page

You may notice other styles in the Style drop-down menu that did not appear on this list. These are linked to other elements in the template, and are not to be applied to elements in the content area. The styles that are to be used can be viewed in the sample_content.html file. The best way to apply a style is to select the item/text that you want to apply a style to, and then select the appropriate style in the Style menu in the Properties toolbar, or right-click (Ctrl-click on Mac) > CSS Styles. If you need custom CSS styles in your content area, please see the section below about customizing your Web content using CSS.

Update Date

Change the update to the current month, day, and year in the format shown below. Do this each time you modify the content of a page.

Validating Your Content

When you have finished adding content to a Web page, make sure it is valid XHTML code by using the XHTML Code Validator. Click the Browse button to browse to the location of your Web page, then click the Check button.

Customizing Your Web Content

CSS

The Cal Poly Web Template is designed to display properly across all browsers and, more importantly, to be Section 508 compliant and fully Web accessible. For this reason, if you must create additional styles, do so only to elements within the content area. Do not add styles that will affect any of the layout elements, such as the header, footer, or navigation.

Two CSS files have been provided in which you can overwrite or add to the existing styles in the template. Adding styles to the screen.css file will change how the page will look the user's computer monitor, while adding styles to the print.css file will change how the page will look when printed.

DO NOT edit the CSS files located in the common folder—this may cause the template to display incorrectly and possibly become inaccessible to persons with disabilities.

Remember - Web sites in which the template has been fundamentally changed will not be linked from the Cal Poly Web site and these changes could cause the site to become inaccessible. After you have added your own custom styles, make sure your CSS files validate against the CSS validator found on the Accessibility Compliance Process Guide.

Images

If you would like to add images in your Web page, make sure they are placed in the images folder, located in the template’s root folder, cp_template_v3.4. Images can be placed only in the department logo area, content area, and left and right column areas of the pages. Do not place images in any other part of the page, edit any of the default graphics, or place images that are too large—the pages will not display properly. Ensure that you use the alt text attribute and the title attribute to properly describe the image.