html5-img
1 / 18

Chapter 5

Chapter 5. Templates & Style Sheets. Objectives. Apply Cascading Style Sheet attributes to a template Create a Web page from a template. Describe a template Create a template Describe different types of style sheets Create a Cascading Style Sheet. Understanding Templates. Template

thi
Download Presentation

Chapter 5

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Chapter 5 Templates & Style Sheets

  2. Objectives • Apply Cascading Style Sheet attributes to a template • Create a Web page from a template • Describe a template • Create a template • Describe different types of style sheets • Create a Cascading Style Sheet

  3. Understanding Templates • Template • A predesigned Web page that defines the appearance of the page, including default font, font size, logos, images, & backgrounds. • Provides an alternative to separately creating many similar pages. • Can save time & can help create a consistent & standardized design. • First step is to determine the look of the page.

  4. Creating A Template • 3 methods: • Create template from existing file • Open file > Save as Template command on File menu > define editable regions • Create template from new document Basic page • Use Save as Template command on File menu • Use File menu New command and select HTML template in New Document dialog box

  5. Saving A Template • Dreamweaver automatically creates Templates folder in Web site local root folder. • Template saved with a .dwt extension within Template folder.

  6. Using The Dreamweaver Template • Dreamweaver Template • A special type of HTML document • Template instance • A Web page based on a template, but you can only make changes to designated parts of template instance. • Editable Regions • Can be any part of a page (heading, paragraph, table..) • You designate what regions can be changed. • Templates provide the ability to update multiple pages at once.

  7. Specifying Editable & Noneditable Regions • As author, you define which regions are editable • 4 types of regions • Editable Region • Basic building block of a template & is an unlocked region (can edit). • Repeating Region • A section in a document that is set to repeat. • 2 types • Repeating table, & repeating form.

  8. Optional Region • Lets the content developer show/hide content on a page-by-page basis. • Editable Tag Attribute • Lets the content developer unlock a tag attribute in a template & edit the tag in a template-based page.

  9. Designing The Template • Method • Finalize a single page that includes all elements you want in template. • Save the document as a template & mark all of the editable regions. • Consider following when designing template: • Include as much content as possible. • Use prompts in the editable regions to inform the content developer as to the type of content to be added to a particular region. • Give your editable regions meaningful names. • Use placeholder if possible, particularly for images

  10. Adding Tables For Images & Links • Placeholder • Provides Web page developer with a guide as to what is to be placed in the cell & the required format (left, right, centered)

  11. Adding Editable Regions • How to get there? • Insert Bar > Common Tab > Templates

  12. Introduction to Style Sheets • Style • A rule describing how a specific object is formatted. • Style Sheet • A file that contains a collection of these rules or styles.

  13. HTML Styles • A Dreamweaver feature that a Web page developer can use to apply formatting options quickly and easily to text in a Web page. • If style is changed, changes are not updated automatically. • To use: • Deselect “Use CSS instead of HTML Tags” option in General category of Preferences dialog box.

  14. Cascading Style Sheets • A collection of formatting rules that control the appearance of content in a Web page. • DHTML • An extension to HTML that enables a Web page to respond to user input without sending a request to the Web server • Style Rule contains two parts: • Selector – name of the style • Declaration – defines the style elements

  15. Three different selectors: • Class (custom style) – specify all the attributes you want the style to include. • Tag – Make global changes to existing Web pages by modifying the properties/attributes of HTML tag. • Advanced – Commonly applied to hyperlinks to create a rollover effect.

  16. Conflicting Styles • Cascading • Refers to the capability of applying multiple style sheets to the same Web page. • Order of Preference: • External Style Sheet – a single style sheet that is used to create uniform formatting and contains no HTML code • Internal style sheet (embedded style sheet) – contains styles that apply to a specific page. • A specified element within a page

  17. The CSS Styles Panel • Styles are created and controlled through the CSS Styles panel. • Custom style • A style you can create and name, in which you specify all the attributes you want the style to include.

  18. CSS Styles Panel Buttons • Attach Style Sheet – links to/imports external style sheet into your current document • New CSS Rule – Defines a type of style • Edit Style Sheet – Edit any of the styles in the current document/ in external style sheet • Delete CSS Rule – Removes selected style from panel, & removes formatting from any element to which it was applied

More Related