Transcript Ch. 5 Web Page Design – Templates and Style Sheets

Ch. 5 Web Page Design –
Templates and Style Sheets
Mr. Ursone
Templates
o Template: A predesigned Web
page that contains the definition
of the appearance of the page.
Including:
o Default font, Font size, Logos and
Images, and Backgrounds
o Templates can be a basic
framework for the structured
organization of the entire Web
site
Creating a Template
o Use the file
menu new
command and
select HTML
template in the
New Document
Dialog box
Saving a Template
o File – Save as
Template – Name
the template
o When you use the
save as template
command
Dreamweaver
automatically
creates a
Templates folder in
the Web site local
root folder
o It will save it with a
.dwt extension
Template Benefits
o The ability to update multiple pages at
once
o After a document is created from a
template, the document remains
attached to the template. This allows you
to modify a template and immediately
update the design in all of the
documents based on that template
o Create a consistent and standardized
design
o Can function as a pattern for other
pages
o Can save time
Dreamweaver Template
o Template Instance: A Web page
based on a template, looks
identical to the template
o However, allows the user to
make changes to designated
parts of the template instance
o The parts the user can make
changes to are called editable
regions.
Commands Pop-Up Menu
o Editable Region: The parts
of a template that the
template author (user)
can make changes to
(Edit)
o Repeating Region:
Creates a section of a
template that can be
duplicated as often as
desired in a templatebased page
Creating an Editable Region
o Highlight the
section that you
want editable Common Tab on
the Insert Bar –
Click the
Templates popup menu – click
editable region
and give it a
name
Commands on the Templates Pop-Up
Menu
HTML Styles
o HTML Styles: Allow Web page
developers to apply formatting
options quickly and easily to text
in a web page
o HTML Styles use HTML tags such
as <font> and <b> tags to apply
the formatting
o Once created and saved you
can apply an HTML style to any
document in the Web Site
Style Sheets
o Style Sheet: a file that contains a
collection of rules or styles
specifying how a specific object
is formatted.
o A Style is a rule describing how
an object is formatted
Cascading Style Sheets (CSS)
o CSS are a collection of
formatting rules that
control the appearance
of Web page content
o Styles are created and
controlled through the
CSS styles panel
o Here you create Custom
Styles. They are a style
you create and name
and specify all the
attributes you want the
style to include
o CSS rules
contain 2 parts:
o Selector – The
name of the
style
oEx. h2 (the
tag)
o Declaration –
Defines the style
element
oEx. 24 pt.
Courier –
defining the
font size &
type to apply
to the h2 tag
3 Types of Selectors
o Class: Most flexible way to define
style, can be applied to any text
o Tag: Provides option to make
global changes to existing Web
pages by modifying attributes of
HTML tag
o Advanced: (pseudo-class) often
used for hyperlinks to create a
rollover effect
o Ex. When mouse move over a link,
the link changes color
The CSS Styles Panel
o To develop a
style sheet, start
with the CSS
Styles Panel
New CSS
Rule
Attach
Style
Sheet
Edit Style
Sheet
Delete
CSS
Rule
Style Sheets and Links
o When you are defining the style
for links, 4 attributes are
available:
o a:link – defines the style of an
unvisited link
o a:visited – defines the style of a link
to a Web site you have visited
o a:hover – defines the style of a link
when the mouse pointer moves
over it
o a:active – defines the style of a
clicked link
To Apply a Template to a Page
o Create and Save a
Template
o Remember this is going
to be a template
instance and you need
to open a new blank
page first
o Click the assets panel in
the files group – click
the templates icon in the
assets panel – click the
template you want to
use – click apply
Good To Know
o To apply a template to a document,
you use the assets panel.
o You can add style attributes to a style
sheet through the CSS Rule Definition
dialog box.
o The term cascading refers to the
capability of applying multiple style
sheets to the same Web page.
o A Dreamweaver template is a special
type of HTML document.
Good To Know
o
o
o
o
To develop a style sheet, you start
with the CSS Styles panel.
When you detach a page from a
template, the page becomes a
regular document, and locked
regions become editable.
Using the Assets panel, you can
edit, rename, or delete a template.
An editable tag attribute lets the
content developer unlock a tag
attribute in a template and edit the
tag in a template-based page.