Your SlideShare is downloading. ×
0
Using Templates and Cascading Style sheets  In Dreamweaver CS3 Methods for establishing Consistent House Style
Diagrammatic Representations of what they do. Consider updating loads of pages Both do a similar Job but Templates are eas...
Understanding Dreamweaver templates  <ul><li>A template is a special type of document that you use to design a “fixed” pag...
Editable Region Non Editable Region or Fixed Region
Templates
Insert Table and reduce Border
Modify Table and Add Website Banner
Set up according to your Design Plan for House Style
 
Select the required font for the Heading  and make it Editable.
 
Here is the final Template. Note the Banner region remains fixed.
Page based upon Template as follows
 
 
Another Template
Pages from Template
About Cascading Style Sheets Cascading Style Sheets (CSS) is a collection of formatting rules that control the appearance ...
Cascading Style Sheets <ul><li>Work in a similar way but use an external file rather than a Template. This then calls the ...
Apply your formatting by using style sheets. Make sure these are in users’ folders before you start. <ul><li>Use  View ,  ...
Style sheet one
Style sheet two
Style sheet three
Style sheet four
New Style Sheet
 
Replace td and th as h1 and h2
Change colour by clicking into each section and selecting background colour and then font-size and color for it.
 
 
 
 
Style sheet Applied
BasicStyleSheet Code body { font-family: Arial, Helvetica, sans-serif; background-color: #CCFFFF; } h1 { font-family: Aria...
 
AdvancedStyleSheet Code h1{color:red;font-family: Arial,Helvetioca, sans-serif;font-size: xx-large} h2{color:red;font-fami...
Create a More Advanced CSS sheet <ul><li>See </li></ul><ul><li>http://www.w3schools.com/CSS/css_examples.asp </li></ul>
Upcoming SlideShare
Loading in...5
×

Using Templates And Cascading Style Sheets10

814

Published on

Published in: Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
814
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
12
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Using Templates And Cascading Style Sheets10"

  1. 1. Using Templates and Cascading Style sheets In Dreamweaver CS3 Methods for establishing Consistent House Style
  2. 2. Diagrammatic Representations of what they do. Consider updating loads of pages Both do a similar Job but Templates are easier to set up and use and do not involve adapting any code. CSS results in simpler and cleaner HTML code, which provides shorter browser loading times. Template or CSS Page 1 Page 2 Page 3
  3. 3. Understanding Dreamweaver templates <ul><li>A template is a special type of document that you use to design a “fixed” page layout; you can then create documents based on the template that inherit its page layout. As you design a template, you specify as “editable” which content users can edit in a document based on that template. </li></ul><ul><li>Using templates enables you to update multiple pages at once. A document that is created from a template remains connected to that template (unless you detach the document later). You can modify a template and immediately update the design in all documents based on it. </li></ul><ul><li>Dreamweaver templates are fixed (or uneditable) by default. </li></ul>
  4. 4. Editable Region Non Editable Region or Fixed Region
  5. 5. Templates
  6. 6. Insert Table and reduce Border
  7. 7. Modify Table and Add Website Banner
  8. 8. Set up according to your Design Plan for House Style
  9. 10. Select the required font for the Heading and make it Editable.
  10. 12. Here is the final Template. Note the Banner region remains fixed.
  11. 13. Page based upon Template as follows
  12. 16. Another Template
  13. 17. Pages from Template
  14. 18. About Cascading Style Sheets Cascading Style Sheets (CSS) is a collection of formatting rules that control the appearance of content in a web page. Using CSS styles to format a page separates content from presentation. The content of your page—the HTML code—resides in the HTML file, and the CSS rules defining the presentation of the code reside in another file (an external style sheet) or in another part of the HTML document (usually the head section). Separating content from presentation also results in simpler and cleaner HTML code, which provides shorter browser loading times, and simplifies navigation for people with accessibility issues (for example, those using screen readers). CSS gives you great flexibility and control over the exact appearance of your page.
  15. 19. Cascading Style Sheets <ul><li>Work in a similar way but use an external file rather than a Template. This then calls the style into the HTML through the addition of a line referencing it to the code or attaching a style sheet. </li></ul><ul><li><link rel=“stylesheet” href=“style1.css”> </li></ul><ul><li></head> </li></ul><ul><li>See Example exercise and sample code. </li></ul>
  16. 20. Apply your formatting by using style sheets. Make sure these are in users’ folders before you start. <ul><li>Use View , HTML to view the HTML coding. </li></ul><ul><li>Add the reference to the style sheet in the head section. </li></ul><ul><li>Save and preview. </li></ul><ul><li>Edit the style sheet as appropriate. </li></ul>
  17. 21. Style sheet one
  18. 22. Style sheet two
  19. 23. Style sheet three
  20. 24. Style sheet four
  21. 25. New Style Sheet
  22. 27. Replace td and th as h1 and h2
  23. 28. Change colour by clicking into each section and selecting background colour and then font-size and color for it.
  24. 33. Style sheet Applied
  25. 34. BasicStyleSheet Code body { font-family: Arial, Helvetica, sans-serif; background-color: #CCFFFF; } h1 { font-family: Arial, Helvetica, sans-serif; color: #0000FF; font-size: x-large; } h2 { font-family: Arial, Helvetica, sans-serif; color: #FFFF00; font-size: large; }
  26. 36. AdvancedStyleSheet Code h1{color:red;font-family: Arial,Helvetioca, sans-serif;font-size: xx-large} h2{color:red;font-family: Arial,Helvetioca, sans-serif;font-size: x-large} a{text-decoration:none:font-style:italic-transform:lowercase} a:link(color:red;font-weight;bold} a:visited {color:blue} A:hover {color: green;text-transform:uppercase} a:active{color:green}
  27. 37. Create a More Advanced CSS sheet <ul><li>See </li></ul><ul><li>http://www.w3schools.com/CSS/css_examples.asp </li></ul>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×