• Save
Developing a Web Page
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • 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
    Your message goes here
No Downloads

Views

Total Views
3,918
On Slideshare
3,917
From Embeds
1
Number of Embeds
1

Actions

Shares
Downloads
0
Comments
1
Likes
4

Embeds 1

http://www.slideshare.net 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Adobe Dreamweaver CS3 Revealed CHAPTER TWO: DEVELOPING A WEB PAGE
  • 2.
    • 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 2 Lessons
  • 3. Introduction
    • Craft head content
    • Choose colors for page background and text
    • Add page content, format, and link to other pages
    • Test links regularly
  • 4.
    • Use white space effectively
    • Limit multimedia elements
    • Keep it simple
    • Use an intuitive navigation structure
    • Apply a consistent theme
    Understanding Page Layout
  • 5. 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
  • 6. Create Head Content
    • Title
      • Browser title bar
    • Keywords
      • Search
    • Description
      • Search results
  • 7. Setting Web Page Properties
    • Background color
    • Font color
    • Link colors (unvisited, visited)
      • Default:
        • Unvisited  blue
        • Visited  purple
  • 8. 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
  • 9. 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
  • 10. Viewing the Head Content Title text box on Document toolbar Title icon Meta icon Head content section
  • 11. Entering Keywords & Descriptions
    • Anticipate search terms
    • Keep them short and concise
    • List the most important keywords first
    • Consider the use of focus groups
  • 12. Fig. 4: Insert Bar Displaying HTML Category Common tab Head list arrow Keywords command
  • 13. Fig. 7: Head Content in Code View Opening HTML tag Head tag Description tags Description Keyword tags
  • 14. Fig. 8: Page Properties Dialog Box Background color box Transparent color button Hexadecimal number for white White
  • 15. 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
  • 16. Formatting Text with Property Inspector
    • Make text attractive and easy to read
    • Change font, size, and color
    • Use Property Inspector to apply formatting attributes
  • 17. 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.
  • 18. 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
  • 19. 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>
  • 20. Using HTML Tags or Using CSS
    • Cascading Style Sheets (CSS)
      • Standard practice to handle formatting and placement of objects
    • Disable this preference temporarily
  • 21. Fig. 10: Formatting Address on Striped Umbrella Home Page Selected address text Font list arrow Size list arrow Italic button
  • 22. Web Filenames
    • Do not use
      • Spaces
      • Special characters
      • Punctuation
      • Uppercase letters
      • Number for the first character
      • Assume case-sensitive
  • 23. 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
  • 24. Fig. 12: Clean up Word HTML Clean up HTML from list arrow Settings
  • 25. 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.
  • 26. 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
  • 27. Broken Links
    • Typos
    • Pages move
    • Sites move
    • Sites expire
  • 28. Navigation Bars
    • Contain links to the main pages
    • Usually located at top of side of page
    • Backbone of the site’s navigation structure
  • 29. Fig. 15: Coca-Cola Web Site
  • 30. Fig. 16: Coca-Cola Web Site New Navigation bar
  • 31. Fig. 17: Formatting the Navigation Bar New navigation bar Format list arrow Font list arrow Size list arrow Asterisk: page not saved
  • 32. Fig. 18: Selecting the Home Link Selected text Browse for file icon Link text box
  • 33. Fig. 21: E-mail Link Dialog Box Link information Text for e-mail link on the page
  • 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. Use the History panel
    • History panel properties:
      • Each task is called a step
      • 50 steps
      • Preferences adds more
      • Be careful…increasing steps uses memory
  • 36. History Panel Functions
    • Undo
    • Redo
    • Replay
    FIGURE 24 The History panel Slider Click in the gray bar next to a step to undo to that step
  • 37. View HTML Code in Code Inspector
    • View Code
      • Code View
      • Code and Design View
      • Code Inspector
    • Add advanced features
      • JavaScript
      • Rollover function
  • 38. Fig. 25: Code Inspector View options menu Code displayed in the Code Inspector Page displayed in design view behind Code Inspector
  • 39. Fig. 29: View Options Menu View options list arrow Code for horizontal rule View options menu
  • 40. Fig. 31: View the Reference Panel Information on HR tag
  • 41. Fig. 32: Insert Date Dialog Box Update automatically on save check box Date formats
  • 42. Fig. 33: View Date Object in Code View Code for date object
  • 43. Modify and Test Web Pages
    • Proofread
    • Preview in a browser window
    • Test links
  • 44. Testing Pages
    • Monitors
      • Size and resolution
    • Platforms
      • UNIX, Mac, PC
    • Browsers
      • Explorer, Netscape, Firefox
  • 45. 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
  • 46. Default Window Screen Sizes
  • 47. Fig. 34: Window Screen Sizes Size choices for viewing a page
  • 48. “Under Construction”
    • Don’t do it!
    • Only causes frustration to the end user
  • 49. 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