Developing a Web Page

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

0 comments

Post a comment

    Post a comment
    Embed Video
    Edit your comment Cancel

    3 Favorites

    Developing a Web Page - Presentation Transcript

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

    + fucileffucilef, 10 months ago

    custom

    578 views, 3 favs, 0 embeds more stats

    More info about this document

    © All Rights Reserved

    Go to text version

    • Total Views 578
      • 578 on SlideShare
      • 0 from embeds
    • Comments 0
    • Favorites 3
    • Downloads 0
    Most viewed embeds

    more

    All embeds

    less

    Flagged as inappropriate Flag as inappropriate
    Flag as inappropriate

    Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

    Cancel
    File a copyright complaint
    Having problems? Go to our helpdesk?

    Categories

    Tags