Drop Shadow

Dreamweaver Templates

You should already have a site created in Dreamweaver for these steps to work. Our ITS Help Desk (x7900 or help@sandiego.edu) should be able to assist you if you don’t have a site set up.

The available templates

If you are using Dreamweaver or Contribute, you should get these templates automatically. If not, you can get the templates as a zip file. Please note that these files are linked so as to show you what they will look like. Only get them by way of the zip file or within Dreamweaver/Contribute. Otherwise, you will lose all of the dynamic server-side code in these pages, as the server strips it out when it displays the files for you.

subsite_index.php
a template for the main page of your site
subpage_template.php
a template for your subpages--all page except your main page
two full_content templates
for pages that need a wider content area and do not need left navigation link
index.php
generally used for any top-level site that does not need any breadcrumb trail
global.php
a much simpler template that includes very little PHP code and only the top menu bar, suitable for deep pages which have been converted from other formats, such as word processing documents.

Update the web templates

When your site was created on our server, it should have been created with a link to the central templates folder inside of it. Updating your templates in Dreamweaver is a simple matter of synchronizing your local copy of your site to the remote copy by using the “down” arrow button.

Create a new page

Back in Dreamweaver, pull down the “File” menu and choose “New”. Click on the “Templates” tab. You should now see the four USD templates listed. Choose “subsite_index” for your main page, or “subpage_template” for your subpages.

Pull down the “File” menu again and choose “Save As”. Your main page must be saved as “index.php”. (Dreamweaver might add the “.php” for you automatically.) Your subpages need to have a one-word name and end in “.php”.

Your pages should not end in “.dwt.php”. That combination extension is only for the original templates. Once you open a template and save it, you need to use only “.php” as your extension.

When you first create a page from a template, you will see a number of broken images when viewing the page in Dreamweaver. This is because those images are stored on our server. Once you upload the file to USD’s web server, those images will appear correctly.

Edit your page

Main pages

  1. Type the page’s title in the “Title” box at the top of the document.
  2. Type your content into the “MainArea” box of your web page.
  3. If you have a main image, place that in your TitleImage area. (More about title images.)

Subpages

  1. Type the page’s title in the “Title” box at the top of the document.
  2. Type a short title for your page in the “ShortTitle” box. If you need to make the font size smaller for the short title, you may need to trick Dreamweaver into doing so (if you know styles, just redefine the style “overalltitle”). Put an extra character at the beginning and end of your title, so it reads something like “XThe Page TitleX”. Select everything except for the first and last character. Change the font size. Remove the extraneous first and last character.
  3. Type the title again in the “MainTitle” box. You may need to use the backspace or delete key to type in this section.
  4. Edit the breadcrumb trail
    1. Type the short title of your page in the “PageName” box.
    2. Change the text in the “Ancestors” box to match the parent page’s name.
    3. By default, you have one ancestor that automatically points to your parent page. You can also add more levels of ancestors here if you wish by clicking the “+” key in “AncestorList”.
  5. Type your content into the “MainArea” box.

Never link to your main pages as “index.php”. Leave “index.php” out of the link so that the link ends in a slash. For example, link to http://www.sandiego.edu/webdev/ not http://www.sandiego.edu/webdev/index.php.

Edit your navigation links

Using XML

There are two ways to edit your navigation links. If you can work with XML, all you need to do is place a file called “subnav.xml” in your site’s directory. The PHP template will automatically grab your navigation links from that file.

You will of course want to delete the pre-made links in the template if you go with the XML option.

By Hand

If you want to put the links in using HTML, there are already three links provided for you in the templates. You can edit, delete, or copy them. If you need more links, triple-click one of the links and then immediately copy and paste. Another link with the same name will appear on the next line.

You can easily copy your entire navigation area from one page to another page:

  1. Click on the “Navigation Links” tab. Dreamweaver will select the entire navigation links area.
  2. Choose “copy” from the “edit” menu.
  3. Go into the page you want to paste the links into.
  4. Click on the “Navigation Links” tab there. Dreamweaver will select the entire area.
  5. Choose “paste” from the “edit” menu. Dreamweaver will replace the old navigation area with your new one from the previously edited page.