Transcript Web Review PowerPoint

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.
Creating Pages Using a Template
in Dreamweaver
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
Template.dwt
Title
Menu
Content
(Editable)
Footer
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
Text Text Text Text
Text Text Text Text
Text Text Text Text
Text Text Text Text
Footer
First.html
Title
Menu
Content
(Editable)
Footer
My Portfolio
Title
Menu
Template.dwt
Menu
Text Text
Title
Menu
Text
Text
My info
Second.html
Footer
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
My Portfolio
Menu
One
Two
Three
Text Text Text Text
Text Text Text Text
Text Text Text Text
Text Text Text Text
My info
First.html
Template.dwt
My Portfolio
Menu
One
Two
Three
My info
My Portfolio
Menu
One
Two
Three
Text Text
Text
Text
My info
Second.html
Gibberish
Text
(Editable)
My Portfolio
Menu
One
Two
Three
My info
Third.html
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
CSS Regions for a “typical” page
Body (white)
Container (thick line and blue)
header
sidebar1
mainContent
footer
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)
My Portfolio
Menu
One
Two
Three
Text Text Text Text
Text Text Text Text
Text Text Text Text
Text Text Text Text
My info
First.html
Template.dwt
My Portfolio
Menu
Some
Text
(Editable)
One
Two
Three
My info
My Portfolio
Menu
One
Two
Three
Text Text
Text
Text
My info
Second.html
My Portfolio
Menu
One
Two
Three
My info
Third.html
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!
Appendix – Changing the Width of Your Pages
780 pixels
Container (thick line and blue)
200 pixels
Body (white)
header
580 pixels
sidebar1
mainContent
footer
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!