Dreamweaver chapter 02

3,822 views
3,687 views

Published on

Published in: Education, Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
3,822
On SlideShare
0
From Embeds
0
Number of Embeds
2,100
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Dreamweaver chapter 02

  1. 1. Chapter 2 Developing a Web Page
  2. 2. Chapter 2 Lessons <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>© 2010 Delmar Cengage Learning
  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>© 2010 Delmar Cengage Learning
  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 © 2010 Delmar Cengage Learning
  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>© 2010 Delmar Cengage Learning
  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>© 2010 Delmar Cengage Learning
  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>© 2010 Delmar Cengage Learning
  8. 8. Making Pages Accessible to All <ul><li>Techniques you can use to ensure that your website 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>www.adobe.com/accessibility </li></ul></ul>© 2010 Delmar Cengage Learning
  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>© 2010 Delmar Cengage Learning
  10. 10. Fig. 2: Viewing the Head Content © 2010 Delmar Cengage Learning Head content section Meta icon Title icon CSS icon Title text box on Document toolbar
  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>© 2010 Delmar Cengage Learning
  12. 12. Fig. 4: Insert Bar Displaying Common Category © 2010 Delmar Cengage Learning Common category Head list arrow Keywords command Your icon may differ
  13. 13. Fig. 7: Head Content Displayed in Code View © 2010 Delmar Cengage Learning Opening head tag Title tag Your head content line numbers may differ Keywords tag Description tag Closing head tag Description Keywords
  14. 14. Fig. 8: Page Properties Dialog Box © 2010 Delmar Cengage Learning Default Color button White Background color box Hexadecimal shorthand for white (number code is preceded with a # sign)
  15. 15. Create, 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>© 2010 Delmar Cengage Learning
  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>© 2010 Delmar Cengage Learning
  17. 17. Using HTML Tags or Using CSS <ul><li>The standard practice today is to use Cascading Style Sheets (CSS) to handle the formatting and placement of web page elements. </li></ul><ul><li>Default preference in Dreamweaver is to use CSS rather than HTML tags. </li></ul>© 2010 Delmar Cengage Learning
  18. 18. 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>© 2010 Delmar Cengage Learning
  19. 19. Changing Font Sizes <ul><li>There are two ways to change the size of text using the Property inspector. </li></ul><ul><ul><li>When the CSS option is selected, you can select a numerical value for the size from 9 to 36 pixels. </li></ul></ul><ul><ul><li>You can use a size expressed in words from xx-small to larger. </li></ul></ul>© 2010 Delmar Cengage Learning
  20. 20. 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>Browsers display text formatted as headings in bold, setting them off from paragraphs of text </li></ul></ul>© 2010 Delmar Cengage Learning
  21. 21. Fig. 10: Formatting Address on Striped Umbrella Home Page © 2010 Delmar Cengage Learning Selected address text CSS button HTML button body_text rule 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>© 2010 Delmar Cengage Learning
  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>© 2010 Delmar Cengage Learning
  24. 24. Fig. 13: Clean Up Word HTML © 2010 Delmar Cengage Learning Settings Clean up HTML from list arrow
  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>© 2010 Delmar Cengage Learning
  26. 26. Add Links to Web Pages <ul><li>Select the text or image that you want to serve as a link. </li></ul><ul><li>Then specify a path to the page to which you want to link in the Link text box in the Property inspector. </li></ul>© 2010 Delmar Cengage Learning
  27. 27. Add Links to Web Pages <ul><li>Avoid broken links </li></ul><ul><li>Provide point of contact – mailto: link </li></ul>© 2010 Delmar Cengage Learning
  28. 28. Navigation Bars <ul><li>Contain links to the main pages </li></ul><ul><li>Usually located at top or side of page </li></ul><ul><li>Backbone of the site’s navigation structure </li></ul><ul><li>Can be created with text, images, or both </li></ul>© 2010 Delmar Cengage Learning
  29. 29. Fig. 16: CIA Website © 2010 Delmar Cengage Learning Additional information appears Navigation bar with text links using JavaScript
  30. 30. Fig. 17: Viewing the Navigation Bar © 2010 Delmar Cengage Learning
  31. 31. Fig. 18: Inserting a Horizontal Rule © 2010 Delmar Cengage Learning Horizontal rule Horizontal Rule command Asterisk indicates page has not been saved
  32. 32. Fig. 19: Selecting Text for the Home Link © 2010 Delmar Cengage Learning Selected text Link text box Browse for File icon
  33. 33. Fig. 22: E-mail Link Dialog Box © 2010 Delmar Cengage Learning Link information Text for email link on the page (this could also be a person’s name or position or the actual email link)
  34. 34. Fig. 24: Assets Panel URL Category © 2010 Delmar Cengage Learning Preview of email link URLs button Email link on home page
  35. 35. Use the History panel <ul><li>History panel properties: </li></ul><ul><ul><li>Records each editing and formatting task performed </li></ul></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>© 2010 Delmar Cengage Learning
  36. 36. Fig. 25: The History Panel © 2010 Delmar Cengage Learning Drag Slider up to undo steps Click in the bar next to a step to undo 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>© 2010 Delmar Cengage Learning
  38. 38. Fig. 26: The Code Inspector © 2010 Delmar Cengage Learning Page displayed in Design view behind the Code Inspector Code displayed in the Code Inspector
  39. 39. Fig. 30: View Options Menu in the Code Inspector © 2010 Delmar Cengage Learning Code for horizontal rule View Options menu button View Options menu
  40. 40. Fig. 32: View the Reference Panel © 2010 Delmar Cengage Learning Results tab group Information on <HR> (horizontal rule tag)
  41. 41. Fig. 33: Insert Date Dialog Box © 2010 Delmar Cengage Learning Update automatically on save checkbox Date formats
  42. 42. Fig. 34: View Date Object Code © 2010 Delmar Cengage Learning Code for date object
  43. 43. Modify and Test Web Pages <ul><li>Preview in a browser window </li></ul><ul><li>Test links </li></ul><ul><li>Proofread </li></ul>© 2010 Delmar Cengage Learning
  44. 44. “ Under Construction” <ul><li>Don’t do it! </li></ul><ul><li>Only causes frustration to the end user </li></ul>© 2010 Delmar Cengage Learning
  45. 45. 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>© 2010 Delmar Cengage Learning
  46. 46. 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>© 2010 Delmar Cengage Learning
  47. 47. Default Window Screen Sizes © 2010 Delmar Cengage Learning
  48. 48. Fig. 35: Window Screen Sizes © 2010 Delmar Cengage Learning Window size pop-up menu Size choices for viewing the page

×