1. Macromedia Dreamweaver MX 2004 Design Professional Web Page DEVELOPING A

2. Web Collection: Dreamweaver MX 2004 Chapter B 2Developing a Web Page Create head content and set page properties Create, import, and format text Add links to Web pages Use the History panel and edit code Modify and test Web pages Chapter Lessons

3. Web Collection: Dreamweaver MX 2004 Chapter B 3Developing a Web Page Understanding Page Layout Use White Space Effectively Limit Multimedia Elements Keep it Simple Use an Intuitive Navigation Structure Apply a Consistent Theme Developing a Web page

4. Web Collection: Dreamweaver MX 2004 Chapter B 4Developing a Web Page Creating Head Content A web page is composed of two sections: –Head - includes the page title and meta tags which are not visible to the web browser. –Body

5. Web Collection: Dreamweaver MX 2004 Chapter B 5Developing a Web Page Creating Head Content Title - browser title bar Keywords - search Description - search results

6. Web Collection: Dreamweaver MX 2004 Chapter B 6Developing a Web Page Head Content Title text box on Document Toolbar Meta icon Head Content section Title icon

7. Web Collection: Dreamweaver MX 2004 Chapter B 7Developing a Web Page Create Head Content… TripSmart …..

8. Web Collection: Dreamweaver MX 2004 Chapter B 8Developing a Web Page Web Page Properties Background color Font color Link colors (unvisited, visited, active)

9. Web Collection: Dreamweaver MX 2004 Chapter B 9Developing a Web Page Web-Safe Colors 216 colors RGB Hexidecimal values

10. Web Collection: Dreamweaver MX 2004 Chapter B 10Developing a Web Page Background color Background Color box Hexadecimal Number for white Strikethrough button White

11. Web Collection: Dreamweaver MX 2004 Chapter B 11Developing a Web Page Create, Import and Format Text Adding text to a Dreamweaver page… Type in Dreamweaver Copy/Paste [Ctrl+C] and [Ctrl+V] (Windows) [Cmd+C] and [Cmd+V] (Macintosh) Import Word Document

12. Web Collection: Dreamweaver MX 2004 Chapter B 12Developing a Web Page Web fonts Browsers use visitor’s fonts Font combinations Serif and Sans Serif t T Graphic text for funky fonts

13. Web Collection: Dreamweaver MX 2004 Chapter B 13Developing a Web Page Text Property Inspector Selected address text Font List Size list arrow Style buttons

14. Web Collection: Dreamweaver MX 2004 Chapter B 14Developing a Web Page Font Size “3” - Default browser size “1” through “7”, or “-7” through “+7”

15. Web Collection: Dreamweaver MX 2004 Chapter B 15Developing a Web Page Web filenames Do not use: Spaces Special characters Punctuation Capital letters

16. Web Collection: Dreamweaver MX 2004 Chapter B 16Developing a Web Page Importing Microsoft Office Documents File Menu and select Import Select file to be imported into Dreamweaver Command Menu and select Clean Up Word HTML Select version of Word

17. Web Collection: Dreamweaver MX 2004 Chapter B 17Developing a Web Page Add Links to Web Pages Links

18. Web Collection: Dreamweaver MX 2004 Chapter B 18Developing a Web Page Link properties Link names - informative Mail to links Hyper text - topic Graphic Formatting properties - consistent Address or path - relative vs absolute

19. Web Collection: Dreamweaver MX 2004 Chapter B 19Developing a Web Page Broken Links Typos Pages move Sites move Sites expire

20. Web Collection: Dreamweaver MX 2004 Chapter B 20Developing a Web Page Add a Link Selected text Link text box Browse for File Icon

21. Web Collection: Dreamweaver MX 2004 Chapter B 21Developing a Web Page E-Mail Link (mailto:) Link Information Text for e-mail Link

22. Web Collection: Dreamweaver MX 2004 Chapter B 22Developing a Web Page Site Map with links Expand/Collapse button E-mail link For pages Linked to Home page

23. Web Collection: Dreamweaver MX 2004 Chapter B 23Developing a Web Page History Panel …functions Undo Redo Replay Slider Red X indicates Action cannot Be undone

24. Web Collection: Dreamweaver MX 2004 Chapter B 24Developing a Web Page History Panel …properties 50 steps Preferences adds more Be careful - increasing steps uses memory

25. Web Collection: Dreamweaver MX 2004 Chapter B 25Developing a Web Page Code Inspector Code View in a floating window Line number Of the HTML Code Options

26. Web Collection: Dreamweaver MX 2004 Chapter B 26Developing a Web Page Reference Panel Open from Code Inspector or Reference Panel HTML Tag Tag Description

27. Web Collection: Dreamweaver MX 2004 Chapter B 27Developing a Web Page Date Object Will change the data each time you save the document

28. Web Collection: Dreamweaver MX 2004 Chapter B 28Developing a Web Page Comment and Date HTML Comment Tag

29. Web Collection: Dreamweaver MX 2004 Chapter B 29Developing a Web Page Modify and Test Pages …in Preview Proofreading Window size Links

30. Web Collection: Dreamweaver MX 2004 Chapter B 30Developing a Web Page Test window sizes within Dreamweaver Default Screen sizes

31. Web Collection: Dreamweaver MX 2004 Chapter B 31Developing a Web Page Dreamweaver Default Screen Sizes

32. Web Collection: Dreamweaver MX 2004 Chapter B 32Developing a Web Page Test Pages …in field Monitors size and resolution Platforms unix, mac, pc Browsers explorer, netscape, aol

33. Web Collection: Dreamweaver MX 2004 Chapter B 33Developing a Web Page Under Construction Don’t do it! Only causes frustration to the end user

34. Web Collection: Dreamweaver MX 2004 Chapter B 34Developing a Web Page Chapter B Tasks Create head content Set page properties Import and Format text Add links Use History Panel Use Code Inspector Test Web pages