Web Design 1 Spring 2020

Friday, March 6

The importance of using correct file names in web design

Center for Disease Control CORONAVIRUS

Creating the template

In this class, we're going to create a DreamWeaver template from the index.html page we've already created. We'll use this template to create 15 pages of our catalog.

 

1. Complete your index.html page with logo, product photos and product names. You can leave the "Lorem dolem" body text and "price $000" text on each product.

 

2. Select your completed index.html page in Dreamweaver, and save as template. Name template catalog

 

 

3. Open catalog.dwt (in the Templates folder) and delete the entire carousel from the html page. Read the gray comments and delete according. Start at line 99 and delete through line 142.

 

4. Select lines 100-162, and create editable region. Name editable region products.

This will allow you to add individual products on each page, while having the template create and update the pull-down menus automatically on each page.

Be sure to validate catalog.dwt and correct any errors before you build pages from it!

Using templates to create pages

5. In Dreamweaver, create a folder named pages, and create folders for each category in your catalog. Be sure to use all lower case letters in folder names. Never use the space bar, separate words with hyphens or underscores.

 

 

6. Now, use your template to create pages for each subcategory, inside the correct folder.

For example, I'm creating pages named dslr.html film.html and mirrorless.html inside the cameras folder.

As you save each page, change the headline to read correctly. For example, I'm changing the <h2>from the template to <h2>Classic Cars</h2> .

 

Linking the pages in the template

7. Open your catalog.dwt template and replace the # in the links in the pulldown menu with links to the pages you just created.

You can do this easily by opening the "properties" panel, the "files" panel and the html code.

Highlight the words in the page code, find the "point-and-shoot" icon (it looks like a little riflescope reticle) in the files target, and drag and point at the page you want to link in the files palette. Here's a picture:

When you hit "SAVE" DreamWeaver will ask you "Update all pages based on this template?" and you say YES. DreamWeaver will now rewrite all 15 pages with links to the 15 pages you just created.

This is much faster and easier than handcoding 15x15= 225 links.

Press File > SAVE ALL. You've got a web catalog, except for index.html.

Creating index.html, the home page

8. Open index.html, and replace the #'s in the pull-down menus with the appropriate page links.

Hot tip: Use your code view, files palette and properties palette, just like you did in step 7.

 

If you've followed these steps exactly, you've created a custom catalog website with a professional-level template you handcoded!

 

Click here to see Marty's example catalog