Transcript Chapter 02
Chapter 2 Developing a Web Page © 2010 Delmar, Cengage Learning 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 © 2010 Delmar Cengage Learning Introduction • Craft head content • Choose colors for page background and text • Add page content, format, and link to other pages • Test links regularly © 2010 Delmar Cengage Learning Understanding Page Layout • • • • • Use white space effectively Limit multimedia elements Keep it simple Use an intuitive navigation structure Apply a consistent theme © 2010 Delmar Cengage Learning 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 © 2010 Delmar Cengage Learning Create Head Content • Title – Browser title bar • Keywords – Search • Description – Search results © 2010 Delmar Cengage Learning Setting Web Page Properties • Background color • Font color • Link colors (unvisited, visited) – Default: Unvisited blue Visited purple © 2010 Delmar Cengage Learning Making Pages Accessible to All Techniques you can use to ensure that your website 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 © 2010 Delmar Cengage Learning 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 © 2010 Delmar Cengage Learning Fig. 2: Viewing the Head Content Meta icon Title icon CSS icon Head content section © 2010 Delmar Cengage Learning Title text box on Document toolbar Entering Keywords & Descriptions • • • • Anticipate search terms Keep them short and concise List the most important keywords first Consider the use of focus groups © 2010 Delmar Cengage Learning Fig. 4: Insert Bar Displaying Common Category Common category Head list arrow Your icon may differ Keywords command © 2010 Delmar Cengage Learning Fig. 7: Head Content Displayed in Code View Opening head tag Title tag Your head content line numbers may differ Keywords tag Description tag Closing head tag Description Keywords © 2010 Delmar Cengage Learning Fig. 8: Page Properties Dialog Box Default Color button Background color box Hexadecimal shorthand for white (number code is preceded with a # sign) White © 2010 Delmar Cengage Learning Create, 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 © 2010 Delmar Cengage Learning Formatting Text with Property Inspector • Make text attractive and easy to read • Change font, size, and color • Use Property Inspector to apply formatting attributes © 2010 Delmar Cengage Learning Using HTML Tags or Using CSS • The standard practice today is to use Cascading Style Sheets (CSS) to handle the formatting and placement of web page elements. • Default preference in Dreamweaver is to use CSS rather than HTML tags. © 2010 Delmar Cengage Learning 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. © 2010 Delmar Cengage Learning Changing Font Sizes There are two ways to change the size of text using the Property inspector. – When the CSS option is selected, you can select a numerical value for the size from 9 to 36 pixels. – You can use a size expressed in words from xx-small to larger. © 2010 Delmar Cengage Learning Formatting Paragraphs • Format – As text – As different sizes of headings • Headings – Heading 1 is the largest – Heading 6 is the smallest – Browsers display text formatted as headings in bold, setting them off from paragraphs of text © 2010 Delmar Cengage Learning Fig. 10: Formatting Address on Striped Umbrella Home Page Selected address CSS text button HTML button body_text rule © 2010 Delmar Cengage Learning Italic button Web Filenames Do not use – Spaces – Special characters – Punctuation – Uppercase letters – Number for the first character – Assume case-sensitive © 2010 Delmar Cengage Learning 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 © 2010 Delmar Cengage Learning Fig. 13: Clean Up Word HTML Settings Clean up HTML from list arrow © 2010 Delmar Cengage Learning 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. © 2010 Delmar Cengage Learning Add Links to Web Pages • Select the text or image that you want to serve as a link. • Then specify a path to the page to which you want to link in the Link text box in the Property inspector. © 2010 Delmar Cengage Learning Add Links to Web Pages • Avoid broken links • Provide point of contact – mailto: link © 2010 Delmar Cengage Learning Navigation Bars • • • • Contain links to the main pages Usually located at top or side of page Backbone of the site’s navigation structure Can be created with text, images, or both © 2010 Delmar Cengage Learning Fig. 16: CIA Website Additional information appears Navigation bar with text links using JavaScript © 2010 Delmar Cengage Learning Fig. 17: Viewing the Navigation Bar © 2010 Delmar Cengage Learning Fig. 18: Inserting a Horizontal Rule Asterisk indicates page has not been saved Horizontal rule © 2010 Delmar Cengage Learning Horizontal Rule command Fig. 19: Selecting Text for the Home Link Selected Link text box text Browse for File icon © 2010 Delmar Cengage Learning Fig. 22: E-mail Link Dialog Box Text for email link on the page (this could also be a person’s name or position or the actual email link) Link information © 2010 Delmar Cengage Learning Fig. 24: Assets Panel URL Category Preview of email link URLs button Email link on home page © 2010 Delmar Cengage Learning Use the History panel • History panel properties: – Records each editing and formatting task performed – Each task is called a step – 50 steps – Preferences adds more – Be careful…increasing steps uses memory © 2010 Delmar Cengage Learning Fig. 25: The History Panel Drag Slider up to undo steps Click in the bar next to a step to undo that step © 2010 Delmar Cengage Learning View HTML Code in Code Inspector • View Code – Code View – Code and Design View – Code Inspector • Add advanced features – JavaScript – Rollover function © 2010 Delmar Cengage Learning Fig. 26: The Code Inspector Page displayed in Design view behind the Code Inspector Code displayed in the Code Inspector © 2010 Delmar Cengage Learning Fig. 30: View Options Menu in the Code Inspector Code for horizontal rule View Options menu button © 2010 Delmar Cengage Learning View Options menu Fig. 32: View the Reference Panel Results tab group Information on <HR> (horizontal rule tag) © 2010 Delmar Cengage Learning Fig. 33: Insert Date Dialog Box Date formats Update automatically on save checkbox © 2010 Delmar Cengage Learning Fig. 34: View Date Object Code Code for date object © 2010 Delmar Cengage Learning Modify and Test Web Pages • Preview in a browser window • Test links • Proofread © 2010 Delmar Cengage Learning “Under Construction” • Don’t do it! • Only causes frustration to the end user © 2010 Delmar Cengage Learning Testing Pages • Monitors – Size and resolution • Platforms – UNIX, Mac, PC • Browsers – Explorer, Netscape, Firefox © 2010 Delmar Cengage Learning 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 © 2010 Delmar Cengage Learning Default Window Screen Sizes © 2010 Delmar Cengage Learning Fig. 35: Window Screen Sizes Window size pop-up menu Size choices for viewing the page © 2010 Delmar Cengage Learning