• Save
Dreamweaver chapter 02
Upcoming SlideShare
Loading in...5
×
 

Dreamweaver chapter 02

on

  • 3,686 views

 

Statistics

Views

Total Views
3,686
Views on SlideShare
1,586
Embed Views
2,100

Actions

Likes
0
Downloads
0
Comments
0

2 Embeds 2,100

http://moodle.richmondcc.edu 2096
http://richmondcc.blackboard.com 4

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Dreamweaver chapter 02 Dreamweaver chapter 02 Presentation Transcript

  • Chapter 2 Developing a Web Page
  • Chapter 2 Lessons
    • 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
    © 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
    • Use white space effectively
    • Limit multimedia elements
    • Keep it simple
    • Use an intuitive navigation structure
    • Apply a consistent theme
    Understanding Page Layout © 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 © 2010 Delmar Cengage Learning Head content section Meta icon Title icon CSS icon 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 © 2010 Delmar Cengage Learning Common category Head list arrow Keywords command Your icon may differ
  • 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
  • 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)
  • 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 © 2010 Delmar Cengage Learning Selected address text CSS button HTML button body_text rule 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 © 2010 Delmar Cengage Learning Settings Clean up HTML from list arrow
  • 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 © 2010 Delmar Cengage Learning Additional information appears Navigation bar with text links using JavaScript
  • Fig. 17: Viewing the Navigation Bar © 2010 Delmar Cengage Learning
  • Fig. 18: Inserting a Horizontal Rule © 2010 Delmar Cengage Learning Horizontal rule Horizontal Rule command Asterisk indicates page has not been saved
  • Fig. 19: Selecting Text for the Home Link © 2010 Delmar Cengage Learning Selected text Link text box Browse for File icon
  • 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)
  • Fig. 24: Assets Panel URL Category © 2010 Delmar Cengage Learning Preview of email link URLs button Email link on home page
  • 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 © 2010 Delmar Cengage Learning Drag Slider up to undo steps Click in the bar next to a step to undo that step
  • 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 © 2010 Delmar Cengage Learning Page displayed in Design view behind the Code Inspector Code displayed in the Code Inspector
  • Fig. 30: View Options Menu in the Code Inspector © 2010 Delmar Cengage Learning Code for horizontal rule View Options menu button View Options menu
  • Fig. 32: View the Reference Panel © 2010 Delmar Cengage Learning Results tab group Information on <HR> (horizontal rule tag)
  • Fig. 33: Insert Date Dialog Box © 2010 Delmar Cengage Learning Update automatically on save checkbox Date formats
  • Fig. 34: View Date Object Code © 2010 Delmar Cengage Learning Code for date object
  • 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 © 2010 Delmar Cengage Learning Window size pop-up menu Size choices for viewing the page