Macromedia Dreamweaver MX 2004 Design Professional Web Page DEVELOPING A

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Web Collection: Dreamweaver MX 2004 Chapter B 21Developing a Web Page Link (mailto:) Link Information Text for Link

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

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

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

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

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

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

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

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

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

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

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

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

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