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 template- based page

Creating an Editable Region o 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 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 and 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 o Ex. h2 (the tag) o Declaration – Defines the style element o Ex. 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 Attach Style Sheet New CSS Rule 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 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.