creating a web site review of concepts. templates templates are special html files that are used to...
TRANSCRIPT
Creating a Web Site
Review of Concepts
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.
• 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.
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
Title
Footer
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
Menu
First.html
My Portfolio
My info
Text Text
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
My Portfolio
My info
Text Text
Text Text
MenuOneTwoThree
My Portfolio
My info
Gibberish Text
(Editable)
Menu
OneTwoThree
Template.dwt
My Portfolio
My info
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
MenuOneTwoThree
First.html Second.html
My Portfolio
My info
MenuOneTwoThree
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
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
Con
tain
er (
thic
k lin
e an
d bl
ue)
header
sidebar1
footer
mainContent
Body (white)
CSS Regions for a “typical” page
My Portfolio
My info
Some Text
(Editable)
Menu
OneTwoThree
Template.dwt
My Portfolio
My info
Text Text
Text Text
MenuOneTwoThree
My Portfolio
My info
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
MenuOneTwoThree
First.html Second.html
My Portfolio
My info
MenuOneTwoThree
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)
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!
header
sidebar1
footer
mainContent
Body (white)780 pixels
200 pixels
580 pixels
Con
tain
er (
thic
k lin
e an
d bl
ue)
Appendix – Changing the Width of Your Pages
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!