Farnham Street Neighbourhood Learning Centre 28 Farnham Street Flemington Victoria 3031 Australia Tel: 9376 9088 Fax: 9376 7739 Email: info@fsnlc.org Web: www.fsnlc.org ABN: 30 202 169 571 computer class tutorial notes Multimedia Level 2 Adobe Macromedia Dreamweaver 8 Tutorial: Using CSS with Dreamweaver 8 Important: Before starting this tutorial you should have some experience with Dreamweaver 8 and CSS. You should have completed the Setting up your site in Dreamweaver 8 and Using CSS with HTML tutorials Dreamweaver, CSS and the W3C rules Dreamweaver (DW) 8 automatically creates CSS. This is because DW 8 writes HTML that is W3C compliant, that is it follows the rules set by the World Wide Web Consortium (W3C). DW 8 also highlights errors in your documents. These errors are browser specific. That means that the error messages will tell you if your page will have problems displaying in Internet Explorer, Netscape, Firefox or Opera. It is important to remember that browsers don t follow all the rules set by W3C. In addition to this W3C rules are changed often. Companies that release browsers are very competitive and browsers are updated very often. It is best to try to test your page in the most common and also in the latest versions of the most popular browsers, rather than trying to follow all W3C rules. Adobe Macromedia Dreamweaver 8 Tutorial: Using CSS with Dreamweaver 8 Page 1 of 6
The CSS hierarchy CSS have a hierarchy. This means that some methods of including CSS code in your document are more powerful than others. If you include CSS in your website you need to understand this, or your code may not work. This is the CSS hierarchy from weakest to strongest: Browser default This just means that you have no CSS code for a section of your web page; maybe because your website is old, or it was built with an old HTML editor, or maybe you have left out CSS deliberately. The browser will display your web page using the browser defaults for text size, colour and so on. External CSS Style Sheet This is the best way to include CSS if you want to build a large website that needs to be standardised and easily updated. The CSS reference has to be inserted in the <head> section of each webpage. The CSS code is saved as a.css file inside your web folder. This tutorial will show you how to insert a external CSS Style Sheet in your website. Internal CSS This is a good way of including CSS in your document if you are building just a few web pages, or if you want to ignore part of a CSS style sheet inside a large web site. The CSS code is written inside the <head> section of your document. Inline CSS This is not a good way to include CSS. Inline CSS quickly becomes very confusing and you have to update your document line by line. However this is the default way that DW 8 will include CSS in your document if you simply apply styles in your document. It also resembles HTML more than the other methods of inserting CSS so it may superficially appear a good way to write code. Inline CSS will cause your internal CSS and your CSS style sheet to be ignored. If your internal CSS and your CSS style sheet are not working it is probably because you have accidentally inserted inline CSS. Adobe Macromedia Dreamweaver 8 Tutorial: Using CSS with Dreamweaver 8 Page 2 of 6
External CSS Style Sheet using DW 8 1. Create a web folder 2. Start DW 8 3. Set up your web site 4. Start a new CSS sheet 5. Write your CSS code: body { background-color: #0000FF; color: #FFFF00; } h1 { h2 { p { text-align: center; font: x-large; color: #FF0000; } font-size: large; color: #FFFFFF;} text-align: left;} Adobe Macromedia Dreamweaver 8 Tutorial: Using CSS with Dreamweaver 8 Page 3 of 6
6. Save the document as.css file Click File Save as Select your web folder Write the name of your file: my_style_sheet.css Close the CSS sheet 7. Start a new web page 8. Write your document (Remember: don t use any styles) Hello [Enter] This is my web page [Enter] The CSS code is in my Style Sheet [Enter] 9. Save your webpage Click File Save as Select your web folder Write the name of your file: index.html 10. Attach the CSS Style Sheet Click Style Click Attach Style Sheet Click Browse Select and click your style sheet Click OK Your document will now be formatted according to your style sheet. Adobe Macromedia Dreamweaver 8 Tutorial: Using CSS with Dreamweaver 8 Page 4 of 6
11. Apply the CCS code to your web page Select the first sentence Hello Click Format Select Heading 1 Select the second sentence This is my web page Click Format Select Heading 2 Select the third sentence The CSS code is in my Style Sheet Click Format Paragraph 12. Save your document Click File Save Close your web page 13. Create a new web page Open a new HTML document Write your text Attach the your style sheet to the page Apply the CSS code to your web page Save your document as page2.html 14. Test your web page Press F12 Press Ctrl-F12 Close your browsers Close your web page Adobe Macromedia Dreamweaver 8 Tutorial: Using CSS with Dreamweaver 8 Page 5 of 6
15. Edit your CSS Style Sheet Open my_style_sheet.css Edit the CSS code: body { background-color: #000000; color: #FFFFFF; } h1 { h2 { p { text-align: center; font: xx-large; color: #00FFFF; } font-size: large; color: #FFFF66;} text-align: left;} Save the file and close 16. Test your web pages Open index.html and page2.html Press F12 and Ctrl-F12 Consider the way your documents now look Edit your documents Edit your CSS Stye sheet if necessary Save your documents Save your CSS Style Sheet Save your web folder. Your project is complete. Adobe Macromedia Dreamweaver 8 Tutorial: Using CSS with Dreamweaver 8 Page 6 of 6