1. Creating a Web Site Review of Concepts

2. Templates Templates are special HTML files that are used to quickly create pages on a web site. They contain the common structural elements of all the pages (titles, footers, links, etc). When creating a page, you simply make a copy of the template to use as a starting point. Templates contain:  Editable regions - areas which are different on each web page in the site and can be changed on the page  Non-editable regions – areas which are the same on each web page in the site and can only be changed on the template.

3. Templates do not contain content (text and media) that you wish to display on the site as they are never seen by the user. When you make a structural change (ie. change a word, add a link) on a non-editable region of a template, all the connected pages are automatically updated. Note that the format (the look) of a page is changed using CSS, not a template.

4. Step #1 Create a template file which contains the common structural elements of all pages and save it as a template Dreamweaver will automatically give the file the extension.dwt and save it a folder called Templates Creating Pages Using a Template in Dreamweaver Title Footer Content (Editable) Menu Template.dwt

5. Title Footer Text Text Text Text Text Text Text Text Menu First.html My Portfolio My info Text Text Second.html Menu Title Footer Menu Third.html Step #2 Create the pages based on the template Each page will have a unique name and an html extension Each page will have common elements in non-editable regions and different content in the editable regions Title Footer Content (Editable) Menu Template.dwt

6. My Portfolio My info Text Text Menu One Two Three My Portfolio My info Gibberish Text (Editable) Menu One Two Three Template.dwt My Portfolio My info Text Text Text Text Text Text Text Text Menu One Two Three First.html Second.html My Portfolio My info Menu One Two Three Third.html Step #3 Update all the pages quickly by making changes to the template. Use the template to create links and change non-editable regions. Note that only the non-editable regions can be changed using a template

7. Cascading Style Sheets (CSS) CSS is code that is used to format (change the look) of web pages This code can be stored in the web page document or, preferably, in a separate file with the extension.css Dreamweaver allows the user to quickly change the format of a region or specific text and media using “styles” which in computerese are called classes

8. Container (thick line and blue) header sidebar1 footer mainContent Body (white) CSS Regions for a “typical” page

9. My Portfolio My info Some Text (Editable) Menu One Two Three Template.dwt My Portfolio My info Text Text Menu One Two Three My Portfolio My info Text Text Text Text Text Text Text Text Menu One Two Three First.htmlSecond.html My Portfolio My info Menu One Two Three Third.html Changing the format using CSS Update the format of all the pages (including the template) quickly by making changes to the CSS using Dreamweaver. Note that you can have any page open when making these changes (ie. The template does not have to be open)

10. The Most Important Rules to Follow When Using Dreamweaver Create (or confirm) your site using the Site command at the beginning of each period. When creating your site, make sure you use the correct folder - probably ElectronicPortfolio (not Templates, not Images, not anything else!) Don’t be lazy!

11. header sidebar1 footer mainContent Body (white) 780 pixels 200 pixels 580 pixels Container (thick line and blue) Appendix – Changing the Width of Your Pages

12. To change the width of your page (container), open the #container css style and choose the Box Category. Adjust the width (ideally about 1000 px) Remember that all graphics and other media must be sized with Photoshop or Fireworks to fit within your main content area or other sections of your page!