Macromedia Dreamweaver 8 Revealed WEB PAGE DEVELOPING A

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Chapter 226Macromedia Dreamweaver 8 Revealed Link (mailto:) FIGURE 20 Link dialog box Link information Text for link on the page

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

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

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

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

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

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

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

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

Chapter 235Macromedia Dreamweaver 8 Revealed FIGURE 33 Window screen sizes

Chapter 236Macromedia Dreamweaver 8 Revealed Default Window Screen Sizes

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

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

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