1. Adobe Dreamweaver CS3 Developing a Web Page

2. Planning the Page Layout Use White SpaceUse White Space Limit media objectsLimit media objects KISSKISS Use a logical navigational structureUse a logical navigational structure Home – About Us – Spa – Bios Consistent ThemeConsistent Theme CSS and TablesCSS and Tables Accessibility IssuesAccessibility Issues Adobe Dreamweaver CS3 - Illustrated

3. Creating the Head Content Web pages consistent of 2 sections: 1.Body 1.Body: contains text, graphics, and links 2.Head Section 2.Head Section: contains head content or the title page and meta tags (HTML codes that include keywords and description of the web site) Adobe Dreamweaver CS3 - Illustrated

4. Creating the Head Content (Title Page) Adobe Dreamweaver CS3 - Illustrated

5. Creating the Meta Tags Adobe Dreamweaver CS3 - Illustrated

6. Setting Web Page Properties Background Color – contrast background color and textBackground Color – contrast background color and text Hexadecimal Values represent colors #000000, #FFFFFF, #66CCFFHexadecimal Values represent colors #000000, #FFFFFF, #66CCFF Represents the amount of red, green and blue in a colorRepresents the amount of red, green and blue in a color Based on16: 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, FBased on16: 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F Adobe Dreamweaver CS3 - Illustrated

7. Setting Web Page Properties Adobe Dreamweaver CS3 - Illustrated

8. Creating and Formatting Text Click Edit, click Preferences, click the General category if necessary; under editing options, uncheck the option Use CSS instead of HTML tags, then click OKClick Edit, click Preferences, click the General category if necessary; under editing options, uncheck the option Use CSS instead of HTML tags, then click OK Make sure to do the step above or the size figures for the fonts will not show up properly.Make sure to do the step above or the size figures for the fonts will not show up properly. Adobe Dreamweaver CS3 - Illustrated

9. Creating and Formatting Text Adobe Dreamweaver CS3 - Illustrated

10. Adding Links to Web Pages You will be creating hyperlinks from the index page to the various web pages. You will link to the web pages located in your root folder NOT the student data files.You will be creating hyperlinks from the index page to the various web pages. You will link to the web pages located in your root folder NOT the student data files. You will also be creating an email hyperlink.You will also be creating an email hyperlink. Adobe Dreamweaver CS3 - Illustrated

11. Adding Links to Web Pages Adobe Dreamweaver CS3 - Illustrated

12. Adding Links to Web Pages Adobe Dreamweaver CS3 - Illustrated

13. Using the History Panel The history panel shows the steps that you have performed while editing and formatting a particular document in Dreamweaver.The history panel shows the steps that you have performed while editing and formatting a particular document in Dreamweaver. In Unit C, they will reference a “horizontal rule” which is a line that is horizontal.In Unit C, they will reference a “horizontal rule” which is a line that is horizontal. Adobe Dreamweaver CS3 - Illustrated

14. Using the History Panel Adobe Dreamweaver CS3 - Illustrated

15. Viewing HTML Code Click Window on the menu bar, click Reference, choose the O’REILLY HTML Reference in the Book list if necessary, click the Tag list arrow, then scroll to and click HR in the Tag text boxClick Window on the menu bar, click Reference, choose the O’REILLY HTML Reference in the Book list if necessary, click the Tag list arrow, then scroll to and click HR in the Tag text box Automatically updates the date of the last time you saved your web site.Automatically updates the date of the last time you saved your web site. Adobe Dreamweaver CS3 - Illustrated

16. Viewing HTML Code Adobe Dreamweaver CS3 - Illustrated

17. Viewing HTML Code Adobe Dreamweaver CS3 - Illustrated

18. Testing and Modifying Web Pages Links will not work until you check the web site in the browser, Internet Explorer.Links will not work until you check the web site in the browser, Internet Explorer. Shortcut: F12Shortcut: F12 Adobe Dreamweaver CS3 - Illustrated

19. Testing and Modifying Web Pages Adobe Dreamweaver CS3 - Illustrated