Chapter A - Getting Started with Dreamweaver MX 2004

Chapter A - Getting Started with Dreamweaver MX 2004 OVERVIEW Chapter Lessons 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 Macromedia Dreamweaver 8 Revealed

Understanding Page Layout Chapter A - Getting Started with Dreamweaver MX 2004 INTRODUCTION Understanding Page Layout Use white space effectively Limit multimedia elements Keep it simple Use an intuitive navigation structure Apply a consistent theme Macromedia Dreamweaver 8 Revealed

Chapter A - Getting Started with Dreamweaver MX 2004 LESSON 1 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 Macromedia Dreamweaver 8 Revealed

Chapter A - Getting Started with Dreamweaver MX 2004 LESSON 1 Create Head Content Title Browser title bar Keywords Search Description Search results Macromedia Dreamweaver 8 Revealed

Chapter A - Getting Started with Dreamweaver MX 2004 LESSON 1 Web Page Properties Background color Font color Link colors (unvisited, visited) Default: Unvisited  blue Visited  purple Macromedia Dreamweaver 8 Revealed

Chapter A - Getting Started with Dreamweaver MX 2004 LESSON 1 Web-Safe Colors Two palettes Color Cubes Continuous Tone 216 colors FIGURE 1 Color picker showing color palettes Macromedia Dreamweaver 8 Revealed

Chapter A - Getting Started with Dreamweaver MX 2004 LESSON 1 FIGURE 2 Viewing the head content Head content section Title text box on Document toolbar Title icon Meta icon Macromedia Dreamweaver 8 Revealed

Chapter A - Getting Started with Dreamweaver MX 2004 LESSON 1 FIGURE 7 Head content displayed in Code view Opening HTML tag Head tag Keyword tags Description Description tags Macromedia Dreamweaver 8 Revealed

Chapter A - Getting Started with Dreamweaver MX 2004 LESSON 1 Background color box Strikethrough button White Hexadecimal number for white FIGURE 8 Page Properties dialog box Macromedia Dreamweaver 8 Revealed

Create, Import and Format Text Chapter A - Getting Started with Dreamweaver MX 2004 LESSON 2 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 Macromedia Dreamweaver 8 Revealed

Chapter A - Getting Started with Dreamweaver MX 2004 LESSON 2 Web Fonts Browsers use visitor’s fonts Font combinations Serif and sans-serif k K k K Graphic text for unusual fonts Macromedia Dreamweaver 8 Revealed

Chapter A - Getting Started with Dreamweaver MX 2004 LESSON 2 FIGURE 10 Formatting the address on The Striped Umbrella home page Selected address text Italic button Font list arrow Size list arrow Macromedia Dreamweaver 8 Revealed

Chapter A - Getting Started with Dreamweaver MX 2004 LESSON 2 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 Macromedia Dreamweaver 8 Revealed

Formatting Paragraphs Chapter A - Getting Started with Dreamweaver MX 2004 LESSON 2 Formatting Paragraphs Format As text As different sizes of headings Headings Heading 1 is the largest Heading 6 is the smallest <h1>This is a big heading</h1> Macromedia Dreamweaver 8 Revealed

Using HTML Tags or Using CSS Chapter A - Getting Started with Dreamweaver MX 2004 LESSON 2 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 Macromedia Dreamweaver 8 Revealed

Chapter A - Getting Started with Dreamweaver MX 2004 LESSON 2 Web Filenames Do not use Spaces Special characters Punctuation Uppercase letters Macromedia Dreamweaver 8 Revealed

Importing Microsoft Office Documents Chapter A - Getting Started with Dreamweaver MX 2004 LESSON 2 Importing Microsoft Office Documents File  Import  Word Document Select file to be imported into Dreamweaver Commands  Clean Up Word HTML Macromedia Dreamweaver 8 Revealed

Chapter A - Getting Started with Dreamweaver MX 2004 LESSON 2 Settings Clean up HTML from list arrow FIGURE 12 Clean Up Word HTML dialog box Macromedia Dreamweaver 8 Revealed

Chapter A - Getting Started with Dreamweaver MX 2004 LESSON 3 Add Links to Web Pages Links FIGURE 14 Coca-Cola Web site Macromedia Dreamweaver 8 Revealed

Chapter A - Getting Started with Dreamweaver MX 2004 LESSON 3 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 Macromedia Dreamweaver 8 Revealed

Chapter A - Getting Started with Dreamweaver MX 2004 LESSON 3 Broken Links Typos Pages move Sites move Sites expire Macromedia Dreamweaver 8 Revealed

Chapter A - Getting Started with Dreamweaver MX 2004 LESSON 3 Navigation Bars Contain links to the main pages Usually located at top of side of page Backbone of the site’s navigation structure Macromedia Dreamweaver 8 Revealed

Chapter A - Getting Started with Dreamweaver MX 2004 LESSON 3 FIGURE 15 Viewing the navigation bar Navigation bar Macromedia Dreamweaver 8 Revealed

Chapter A - Getting Started with Dreamweaver MX 2004 LESSON 3 FIGURE 17 Selecting the Home link Selected text Browse for file icon Link text box Macromedia Dreamweaver 8 Revealed

Chapter A - Getting Started with Dreamweaver MX 2004 LESSON 3 E-mail Link (mailto:) Text for e-mail link on the page Link information FIGURE 20 Email Link dialog box Macromedia Dreamweaver 8 Revealed

Chapter A - Getting Started with Dreamweaver MX 2004 LESSON 3 Collapse to show only local or remote site button E-mail link Four pages linked to home page FIGURE 22 The Striped Umbrella site map Macromedia Dreamweaver 8 Revealed

Chapter A - Getting Started with Dreamweaver MX 2004 LESSON 4 Use the History panel History panel properties: Each task is called a step 50 steps Preferences adds more Be careful… Increasing steps uses memory Macromedia Dreamweaver 8 Revealed

History Panel Functions Chapter A - Getting Started with Dreamweaver MX 2004 LESSON 4 History Panel Functions Undo Redo Replay FIGURE 23 The History panel Click in the gray bar next to a step to undo to that step Slider Macromedia Dreamweaver 8 Revealed

Chapter A - Getting Started with Dreamweaver MX 2004 LESSON 4 FIGURE 28 Viewing the View Options menu in the Code Inspector View options list arrow Code for horizontal rule View options menu Macromedia Dreamweaver 8 Revealed

Chapter A - Getting Started with Dreamweaver MX 2004 LESSON 4 FIGURE 30 Viewing the Reference panel Information on HR tag Macromedia Dreamweaver 8 Revealed

Chapter A - Getting Started with Dreamweaver MX 2004 LESSON 4 FIGURE 31 Insert Date dialog box Date formats Update automatically on save check box Macromedia Dreamweaver 8 Revealed

Chapter A - Getting Started with Dreamweaver MX 2004 LESSON 4 FIGURE 32 Viewing the date object in Code view Code for date object Macromedia Dreamweaver 8 Revealed

Modify and Test Web Pages Chapter A - Getting Started with Dreamweaver MX 2004 LESSON 5 Modify and Test Web Pages Proofread Choose window size Verify links Macromedia Dreamweaver 8 Revealed

Chapter A - Getting Started with Dreamweaver MX 2004 LESSON 5 FIGURE 33 Window screen sizes Macromedia Dreamweaver 8 Revealed

Default Window Screen Sizes Chapter A - Getting Started with Dreamweaver MX 2004 LESSON 5 Default Window Screen Sizes Macromedia Dreamweaver 8 Revealed

Chapter A - Getting Started with Dreamweaver MX 2004 LESSON 5 Testing Pages Monitors Size and resolution Platforms UNIX, Mac, PC Browsers Explorer, Netscape, Firefox Macromedia Dreamweaver 8 Revealed

Chapter A - Getting Started with Dreamweaver MX 2004 LESSON 5 “Under Construction” Don’t do it! Only causes frustration to the end user Macromedia Dreamweaver 8 Revealed

Chapter A - Getting Started with Dreamweaver MX 2004 SUMMARY 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 Macromedia Dreamweaver 8 Revealed