Developing a Web Page


Published on

Published in: Technology, Design
1 Comment
  • Thank you for including me in your sharing.
    Patrice Rasmussen, PhD. student USF
    Curriculum & Instruction/Statistics & Research
    M.Ed., M.Mus.
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Developing a Web Page

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