1. Macromedia Dreamweaver 8 Revealed WEB PAGE DEVELOPING A

2. Chapter 22Macromedia Dreamweaver 8 Revealed 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. Chapter 23Macromedia Dreamweaver 8 Revealed Use white space effectively Limit multimedia elements Keep it simple Use an intuitive navigation structure Apply a consistent theme Understanding Page Layout

4. Chapter 24Macromedia Dreamweaver 8 Revealed Create 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 Contains text, graphics, and links

5. Chapter 25Macromedia Dreamweaver 8 Revealed Create Head Content Title –Browser title bar Keywords –Search Description –Search results

6. Chapter 26Macromedia Dreamweaver 8 Revealed Web Page Properties Background color Font color Link colors (unvisited, visited) –Default: Unvisited  blue Visited  purple

7. Chapter 27Macromedia Dreamweaver 8 Revealed Web-Safe Colors Two palettes –Color Cubes –Continuous Tone 216 colors FIGURE 1 Color picker showing color palettes

8. Chapter 28Macromedia Dreamweaver 8 Revealed FIGURE 2 Viewing the head content Title text box on Document toolbar Title icon Meta icon Head content section

9. Chapter 29Macromedia Dreamweaver 8 Revealed FIGURE 7 Head content displayed in Code view Opening HTML tag Head tag Description tags Description Keyword tags

10. Chapter 210Macromedia Dreamweaver 8 Revealed FIGURE 8 Page Properties dialog box Background color box Strikethrough button Hexadecimal number for white White

11. Chapter 211Macromedia Dreamweaver 8 Revealed Create, Import and Format Text To add text to a Dreamweaver page –Type in Dreamweaver –Copy/paste [Ctrl][C] and [Ctrl][V] (Windows) [C] and [V] (Macintosh) –Import Word document

12. Chapter 212Macromedia Dreamweaver 8 Revealed Web Fonts Browsers use visitor’s fonts Font combinations Serif and sans-serif k K kK Graphic text for unusual fonts

13. Chapter 213Macromedia Dreamweaver 8 Revealed FIGURE 10 Formatting the address on The Striped Umbrella home page Selected address text Font list arrow Size list arrow Italic button

14. Chapter 214Macromedia Dreamweaver 8 Revealed Changing Font Sizes Default base font: 3 Select font in Property inspector –Choose between 1 and 7 –Change font size relative to the default base size

15. Chapter 215Macromedia Dreamweaver 8 Revealed Formatting Paragraphs Format –As text –As different sizes of headings Headings –Heading 1 is the largest –Heading 6 is the smallest – This is a big heading

16. Chapter 216Macromedia Dreamweaver 8 Revealed Using HTML Tags or Using CSS Cascading Style Sheets (CSS) –Standard practice to handle formatting and placement of objects More on this later… Disable this preference temporarily

17. Chapter 217Macromedia Dreamweaver 8 Revealed Web Filenames Do not use –Spaces –Special characters –Punctuation –Uppercase letters

18. Chapter 218Macromedia Dreamweaver 8 Revealed Importing Microsoft Office Documents File  Import  Word Document Select file to be imported into Dreamweaver Commands  Clean Up Word HTML

19. Chapter 219Macromedia Dreamweaver 8 Revealed FIGURE 12 Clean Up Word HTML dialog box Clean up HTML from list arrow Settings

20. Chapter 220Macromedia Dreamweaver 8 Revealed Add Links to Web Pages FIGURE 14 Coca-Cola Web site Links

21. Chapter 221Macromedia Dreamweaver 8 Revealed Link Properties Link names should be informative Point of contact – mailto: link Two types –Hypertext –Graphic Formatting properties should be consistent Address or path: relative or absolute

22. Chapter 222Macromedia Dreamweaver 8 Revealed Broken Links Typos Pages move Sites move Sites expire

23. Chapter 223Macromedia Dreamweaver 8 Revealed Navigation Bars Contain links to the main pages Usually located at top of side of page Backbone of the site’s navigation structure

24. Chapter 224Macromedia Dreamweaver 8 Revealed FIGURE 15 Viewing the navigation bar Navigation bar

25. Chapter 225Macromedia Dreamweaver 8 Revealed FIGURE 17 Selecting the Home link Selected text Browse for file icon Link text box

26. Chapter 226Macromedia Dreamweaver 8 Revealed E-mail Link (mailto:) FIGURE 20 Email Link dialog box Link information Text for e-mail link on the page

27. Chapter 227Macromedia Dreamweaver 8 Revealed FIGURE 22 The Striped Umbrella site map Collapse to show only local or remote site button E-mail link Four pages linked to home page

28. Chapter 228Macromedia Dreamweaver 8 Revealed Use the History panel History panel properties: –Each task is called a step –50 steps –Preferences adds more –Be careful… Increasing steps uses memory

29. Chapter 229Macromedia Dreamweaver 8 Revealed History Panel Functions Undo Redo Replay FIGURE 23 The History panel Slider Click in the gray bar next to a step to undo to that step

30. Chapter 230Macromedia Dreamweaver 8 Revealed FIGURE 28 Viewing the View Options menu in the Code Inspector View options list arrow Code for horizontal rule View options menu

31. Chapter 231Macromedia Dreamweaver 8 Revealed FIGURE 30 Viewing the Reference panel Information on HR tag

32. Chapter 232Macromedia Dreamweaver 8 Revealed FIGURE 31 Insert Date dialog box Update automatically on save check box Date formats

33. Chapter 233Macromedia Dreamweaver 8 Revealed FIGURE 32 Viewing the date object in Code view Code for date object

34. Chapter 234Macromedia Dreamweaver 8 Revealed Modify and Test Web Pages Proofread Choose window size Verify links

35. Chapter 235Macromedia Dreamweaver 8 Revealed FIGURE 33 Window screen sizes

36. Chapter 236Macromedia Dreamweaver 8 Revealed Default Window Screen Sizes

37. Chapter 237Macromedia Dreamweaver 8 Revealed Testing Pages Monitors –Size and resolution Platforms –UNIX, Mac, PC Browsers –Explorer, Netscape, Firefox

38. Chapter 238Macromedia Dreamweaver 8 Revealed “Under Construction” Don’t do it! Only causes frustration to the end user

39. Chapter 239Macromedia Dreamweaver 8 Revealed Chapter 2 Tasks 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