1. Using Templates and Cascading Style sheets In Dreamweaver CS3 Methods for establishing Consistent House Style

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

4. Editable Region Non Editable Region or Fixed Region

5. Templates

6. Insert Table and reduce Border

7. Modify Table and Add Website Banner

8. Set up according to your Design Plan for House Style

10. Select the required font for the Heading and make it Editable.

12. Here is the final Template. Note the Banner region remains fixed.

13. Page based upon Template as follows

16. Another Template

17. Pages from Template

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.

21. Style sheet one

22. Style sheet two

23. Style sheet three

24. Style sheet four

25. New Style Sheet

27. Replace td and th as h1 and h2

28. Change colour by clicking into each section and selecting background colour and then font-size and color for it.

33. Style sheet Applied

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; }

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}