Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Adobe Dreamweaver CS3 Revealed CHAPTER TWO: DEVELOPING A WEB PAGE Chapter 2 Lessons 1. Create head content and set page properties 2. Create, import, and format text 3. Add links to Web pages 4. Use the History panel and edit code 5. Modify and test Web pages Introduction Craft head content Choose colors for page background and text Add page content, format, and link to other pages Test links regularly Understanding Page Layout Use white space effectively Limit multimedia elements Keep it simple Use an intuitive navigation structure Apply a consistent theme Create Head Content A Web page is composed of two sections: Head content includes page title displayed in title bar of browser meta tags which are not visible to the Web browser Body Contains text, graphics, and links Create Head Content Title Browser title bar Keywords Search Description Search results Setting Web Page Properties Background color Font color Link colors (unvisited, visited) Default: Unvisited blue Visited purple Making Pages Accessible to All Techniques you can use to ensure that your Web site is accessible to individuals with disabilities Alternate text with images Avoid certain colors Supply text as an alternate source for information that is presented in an audio file www.adobe.com/accessibility Using Appropriate Content Who is your audience? What is the age group of your audience? What is the reading level? Formal vs. informal tone Consider font sizes, amount of text and images, and amount of technical expertise needed to navigate Use consistency Viewing the Head Content Head content section Title text box on Document toolbar Title icon Meta icon Entering Keywords & Descriptions Anticipate search terms Keep them short and concise List the most important keywords first Consider the use of focus groups Fig. 4: Insert Bar Displaying HTML Category Common tab Keywords command Head list arrow Fig. 7: Head Content in Code View Opening HTML tag Head tag Keyword tags Description Description tags Fig. 8: Page Properties Dialog Box Background color box Transparent color button White Hexadecimal number for white Creating, Import, and Format Text To add text to a Dreamweaver page Type in Dreamweaver Copy/paste [Ctrl][C] and [Ctrl][V] (Windows) [Command] [C] and [Command] [V] (Macintosh) Import Word Document Formatting Text with Property Inspector Make text attractive and easy to read Change font, size, and color Use Property Inspector to apply formatting attributes Changing Fonts You can format your text with different fonts by choosing a font combination from the Font list in the Property inspector. A font combination is a set of three fonts that specify which fonts a browser should use to display the text of your Web page. Font combinations are used so that if one font is not available, the browser will use the next one specified in the font combination. 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 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> Using HTML Tags or Using CSS Cascading Style Sheets (CSS) Standard practice to handle formatting and placement of objects Disable this preference temporarily Fig. 10: Formatting Address on Striped Umbrella Home Page Selected address text Italic button Font list arrow Size list arrow Web Filenames Do not use Spaces Special characters Punctuation Uppercase letters Number for the first character Assume case-sensitive Importing Microsoft Office Documents File Import Word Document or Excel Document Select file to be imported, then click Formatting list arrow Always use Clean Up Word HTML command Fig. 12: Clean up Word HTML Clean up HTML from list arrow Settings Linking Microsoft Office Documents Drag the Word or Excel document from its current location to the location on the Web page where you would like the link to appear Select the Create a link option button in the Insert Document dialog box Save the file in your root folder so it will be uploaded when you publish your site. If it is not uploaded, the link will be broken. 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 Broken Links Typos Pages move Sites move Sites expire Navigation Bars Contain links to the main pages Usually located at top of side of page Backbone of the site’s navigation structure Fig. 15: Coca-Cola Web Site Fig. 16: Coca-Cola Web Site New Navigation bar Fig. 17: Formatting the Navigation Bar Asterisk: page not saved New navigation bar Format list arrow Font list arrow Size list arrow Fig. 18: Selecting the Home Link Selected text Browse for file icon Link text box Fig. 21: E-mail Link Dialog Box Text for e-mail link on the page Link information Fig. 23: Striped Umbrella Site Map Site Map button Collapse to show only local or remote site button Four pages linked to home page E-mail link Use the History panel History panel properties: Each task is called a step 50 steps Preferences adds more Be careful…increasing steps uses memory History Panel Functions Undo FIGURE 24 Redo Replay Click in the gray bar next to a step to undo to that step Slider The History panel View HTML Code in Code Inspector View Code Code View Code and Design View Code Inspector Add advanced features JavaScript Rollover function Fig. 25: Code Inspector Page displayed in design view behind Code Inspector View options menu Code displayed in the Code Inspector Fig. 29: View Options Menu View options list arrow Code for horizontal rule View options menu Fig. 31: View the Reference Panel Information on HR tag Fig. 32: Insert Date Dialog Box Date formats Update automatically on save check box Fig. 33: View Date Object in Code View Code for date object Modify and Test Web Pages Proofread Preview in a browser window Test links Testing Pages Monitors Size and resolution Platforms UNIX, Mac, PC Browsers Explorer, Netscape, Firefox Different Browsers or Screen Size You should test your pages using different browsers and a wide variety of screen sizes to ensure the best view of your page by the most people possible. Check both Windows and Macintosh platforms Testing a web page rendered in a mobile device Default Window Screen Sizes Fig. 34: Window Screen Sizes Size choices for viewing a page “Under Construction” Don’t do it! Only causes frustration to the end user 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