Ch. 5 Web Page Design – Templates and Style Sheets

Mr. Ursone

Templateso 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 Templateo Use the file

menu new command and select HTML template in the New Document Dialog box

Saving a Templateo 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 Benefitso The ability to update multiple

pages at onceo 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 Templateo 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 Menuo 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 template-based page

Creating an Editable Regiono Highlight the

section that you want editable - Common Tab on the Insert Bar – Click the Templates pop-up menu – click editable region and give it a name

Commands on the Templates Pop-Up Menu

HTML Styleso 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 Sheetso 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 contento 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 styleoEx. h2 (the

tag)o Declaration –

Defines the style elementoEx. 24 pt.

Courier – defining the font size & type to apply to the h2 tag

3 Types of Selectorso 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 effecto Ex. When mouse move over a

link, the link changes color

The CSS Styles Panelo To develop a

style sheet, start with the CSS Styles Panel

Attach Style Sheet

New CSS Rule

Edit Style Sheet

Delete CSS Rule

Style Sheets and Linkso When you are defining the

style for links, 4 attributes are available:o a:link – defines the style of an

unvisited linko 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 Pageo Create and Save a

Templateo 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 Knowo 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 Knowo To develop a style sheet, you

start with the CSS Styles panel. o When you detach a page from a

template, the page becomes a regular document, and locked regions become editable.

o Using the Assets panel, you can edit, rename, or delete a template.

o An editable tag attribute lets the content developer unlock a tag attribute in a template and edit the tag in a template-based page.