University Identity

Creating Pages for Your Web Site

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 to create 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.dwt file, and do not duplicate the sample-content_and_styles.html file as a method of creating Web pages. If any other method than the two mentioned in this section is used, unpredictable results may occur.

Never modify the master.dwt template, except to modify the footer.lbi and main-nav.lbi library items.

Creating a Homepage

Create your homepage from the home.dwt template using one of the methods mentioned above. The homepage consists of a navigation, an image banner, and an area for content. The navigation is the same one used on all other pages on the site. Also, content styling is applied using the same styles as for other pages.

Content

The four content regions in the main content area are for a header and three sections of content. The three sections in the template can be used for any purpose, but the middle section is intended for larger pieces of text. See the sample homepages that are provided with the template kit for the different uses of these content areas.

The "quicklinks" menu is intended to be used in the left or right content areas, and one example of it can be viewed in the sample-homepage.html file. Directions for applying the quicklinks style can be found below in the Styling section.

Image Rotator

The image rotator is a complex feature. For full documentation on the process required to edit it, please see our Rotator page.

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 titles, visit the Titles/Headings section on the WARC.

Screenshot of the Window Title location within a web browser

Breadcrumb

A breadcrumb is a "You Are Here" indicator within your Web site. A breadcrumb reflects the most common click path from your home page to the page the user is currently on. This path may be composed of several page links. If your Web site will have multiple paths to the current page, 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 by ">", 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.
    Screenshot of the Breadcrumb editable field on the CP Template

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

Main 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"
  • center - centers images or text in paragraphs, headers, tables, or table cells
  • columns - this class is applied to the containing div for the column layouts. For examples, see the sample_layout.html page that comes with the template.
    • column1 - content area appearing on the left side of the columns container
    • column2 - content area appearing in the middle of the columns container
    • column3 - content area appearing on the right side of the columns container
    • column2-3 - use next to column 1. Column 2-3 spans the middle and right hand columns
    • column1-2 -use next to column 3. Column 1-2 spans the left and middle columns
    • colSplash - allows a splash image to be placed in any of the columns divs without any image scaling issues or overflowing content. To use this properly, add a div inside the desired column and apply the "colSplash" class to the <div>. Then place the image inside of the div that has the "colSplash" class assigned to it.
  • contentBox - surrounds text in a gray box with a 1-pixel border
  • contentBox_no_outline - surrounds text in a gray box without a border
  • contentBox_outline_only - surrounds text in a gray border with no background
  • directory - to be used on tables with directory information, such as staff names and contacts
  • explanatory - apply this style to labels in a form to make move them above their corresponding text areas
  • gold - applies a gold background to the elements within the left and right column content areas
  • imageleft - floats an image to the left
  • imageright - floats an image to the right
  • indent - indents text elements
  • inside - allows ordered and unordered lists to wrap around an image floated left
  • insetBox_left - creates an area on the left side of the page for an image and a caption
  • insetBox_right - creates an area on the right side of the page for an image and a caption
  • nolinklines - 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.
  • quicklinks - This class styles a list of navigation items into a quicklinks menu. Recommended use is on the homepage in the left or right column. Can also be used inside a column created with the columns class. To use this style properly, apply the "quicklinks" class to the <h2> and the <ul> in the menu.
  • right - aligns text to the right
  • shade-row - applies a shaded background color to table rows <tr>
  • split - the split classes must be used together. For examples, see the sample_layout.html page that comes with the template.
    • splitLeft , splitRight - creates two columns in the main content area (with a width of 50% each). Place two divs inside of a div that has the "split" class assigned to it. Assign "splitLeft" to one of the inner divs and "splitRight" to the other inner div .

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.

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.

back to top