Ch. 5 Web Page Design – Templates and Style Sheets Mr. Ursone.
-
Upload
korbin-hardwicke -
Category
Documents
-
view
218 -
download
0
Transcript of Ch. 5 Web Page Design – Templates and Style Sheets Mr. Ursone.
![Page 1: Ch. 5 Web Page Design – Templates and Style Sheets Mr. Ursone.](https://reader036.fdocuments.us/reader036/viewer/2022062421/56649cbf5503460f9498524a/html5/thumbnails/1.jpg)
Ch. 5 Web Page Design – Templates and Style Sheets
Mr. Ursone
![Page 2: Ch. 5 Web Page Design – Templates and Style Sheets Mr. Ursone.](https://reader036.fdocuments.us/reader036/viewer/2022062421/56649cbf5503460f9498524a/html5/thumbnails/2.jpg)
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
![Page 3: Ch. 5 Web Page Design – Templates and Style Sheets Mr. Ursone.](https://reader036.fdocuments.us/reader036/viewer/2022062421/56649cbf5503460f9498524a/html5/thumbnails/3.jpg)
Creating a Templateo Use the file
menu new command and select HTML template in the New Document Dialog box
![Page 4: Ch. 5 Web Page Design – Templates and Style Sheets Mr. Ursone.](https://reader036.fdocuments.us/reader036/viewer/2022062421/56649cbf5503460f9498524a/html5/thumbnails/4.jpg)
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
![Page 5: Ch. 5 Web Page Design – Templates and Style Sheets Mr. Ursone.](https://reader036.fdocuments.us/reader036/viewer/2022062421/56649cbf5503460f9498524a/html5/thumbnails/5.jpg)
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
![Page 6: Ch. 5 Web Page Design – Templates and Style Sheets Mr. Ursone.](https://reader036.fdocuments.us/reader036/viewer/2022062421/56649cbf5503460f9498524a/html5/thumbnails/6.jpg)
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.
![Page 7: Ch. 5 Web Page Design – Templates and Style Sheets Mr. Ursone.](https://reader036.fdocuments.us/reader036/viewer/2022062421/56649cbf5503460f9498524a/html5/thumbnails/7.jpg)
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
![Page 8: Ch. 5 Web Page Design – Templates and Style Sheets Mr. Ursone.](https://reader036.fdocuments.us/reader036/viewer/2022062421/56649cbf5503460f9498524a/html5/thumbnails/8.jpg)
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
![Page 9: Ch. 5 Web Page Design – Templates and Style Sheets Mr. Ursone.](https://reader036.fdocuments.us/reader036/viewer/2022062421/56649cbf5503460f9498524a/html5/thumbnails/9.jpg)
Commands on the Templates Pop-Up Menu
![Page 10: Ch. 5 Web Page Design – Templates and Style Sheets Mr. Ursone.](https://reader036.fdocuments.us/reader036/viewer/2022062421/56649cbf5503460f9498524a/html5/thumbnails/10.jpg)
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
![Page 11: Ch. 5 Web Page Design – Templates and Style Sheets Mr. Ursone.](https://reader036.fdocuments.us/reader036/viewer/2022062421/56649cbf5503460f9498524a/html5/thumbnails/11.jpg)
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
![Page 12: Ch. 5 Web Page Design – Templates and Style Sheets Mr. Ursone.](https://reader036.fdocuments.us/reader036/viewer/2022062421/56649cbf5503460f9498524a/html5/thumbnails/12.jpg)
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
![Page 13: Ch. 5 Web Page Design – Templates and Style Sheets Mr. Ursone.](https://reader036.fdocuments.us/reader036/viewer/2022062421/56649cbf5503460f9498524a/html5/thumbnails/13.jpg)
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
![Page 14: Ch. 5 Web Page Design – Templates and Style Sheets Mr. Ursone.](https://reader036.fdocuments.us/reader036/viewer/2022062421/56649cbf5503460f9498524a/html5/thumbnails/14.jpg)
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
![Page 15: Ch. 5 Web Page Design – Templates and Style Sheets Mr. Ursone.](https://reader036.fdocuments.us/reader036/viewer/2022062421/56649cbf5503460f9498524a/html5/thumbnails/15.jpg)
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
![Page 16: Ch. 5 Web Page Design – Templates and Style Sheets Mr. Ursone.](https://reader036.fdocuments.us/reader036/viewer/2022062421/56649cbf5503460f9498524a/html5/thumbnails/16.jpg)
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
![Page 17: Ch. 5 Web Page Design – Templates and Style Sheets Mr. Ursone.](https://reader036.fdocuments.us/reader036/viewer/2022062421/56649cbf5503460f9498524a/html5/thumbnails/17.jpg)
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.
![Page 18: Ch. 5 Web Page Design – Templates and Style Sheets Mr. Ursone.](https://reader036.fdocuments.us/reader036/viewer/2022062421/56649cbf5503460f9498524a/html5/thumbnails/18.jpg)
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.