Transcript Dreamweaver Homework Project 1

Macromedia
Studio 8 Step-by-Step
MACROMEDIA DREAMWEAVER 8
Project 1: Personal Web Site
Project Objectives
Define a new Web site in
Dreamweaver
Create a new Web page and set its
document properties
Create and format text
Use heading styles and lists
Create a new style sheet
Macromedia Studio Step-by-Step
Project 1
2
Project Objectives
(continued)
Add images to a Web page and set
the image properties
Edit an image from within
Dreamweaver
Create an image map
Use hyperlinks to connect documents
Macromedia Studio Step-by-Step
Project 1
3
Overview
Web site: displays media elements
Web sites vary by size, function, use
The Web: a medium for self-publication
Macromedia Studio Step-by-Step
Project 1
4
Assignment
Implement Dangerous Frogs Web site
Site focus: frogs’ use of poison
Organization of Web site
– Homepage providing overview
– Four pages detailing particular species
Specifications for site already provided
Macromedia Studio Step-by-Step
Project 1
5
FIGURE 1
Macromedia Studio Step-by-Step
Dangerous Frogs Web Site
Project 1
6
Web Site Design Document
Good plans produce good Web sites
Design document derived from plan
Uses for the design document
– Determining the structure of your site
– Setting document properties for pages
– Importing necessary graphics and text
– Formatting the text with appropriate styles
Macromedia Studio Step-by-Step
Project 1
7
Web Site Flowchart
Shows relationships among pages
Guides navigation through site
Indicates content of pages
Dangerous Frogs flowchart
– Immediately shows five pages
– Reveals that site is dedicated to frogs
Macromedia Studio Step-by-Step
Project 1
8
Web Site Storyboards
Lay out Web page information
– Sketches for layout of page
– Colors that should be used
– Ideas about content and organization
Represent common elements
– Site navigation
– Footers, such as contact information
Dangerous Frogs has five storyboards
Macromedia Studio Step-by-Step
Project 1
9
Project 1 Lessons
Lesson 1: Setting up a Web Site
Lesson 2: Adding And Modifying Text
On A Web Site
Lesson 3: Working with Images
Lesson 4: Working with Links
Macromedia Studio Step-by-Step
Project 1
10
Lesson 1 Objectives
Create a site definition in
Dreamweaver
Create a new Web page
Set document properties for a Web
page
Macromedia Studio Step-by-Step
Project 1
11
Lesson 1 Introduction
Requirements specify Web site
Requirements for Dangerous Frogs
– Design document
– Flowchart
– Storyboards
Beginning construction of Web site
– Identify document properties; e.g., titles
– Implement properties with Dreamweaver
Macromedia Studio Step-by-Step
Project 1
12
FIGURE 2 Design document and flowchart for the
Dangerous Frogs Web site
Macromedia Studio Step-by-Step
Project 1
13
Defining a Local Site
Create a root folder on your hard drive
– Choose name, such as dangerous_frogs
– Store all site files in your root folder
– Create subfolders within root as needed
The root folder is your local site
Local site mirrors Web site on server
Develop and test pages at local site
Macromedia Studio Step-by-Step
Project 1
14
Creating Pages
After defining site, create pages
Refer to site flowchart
– One home page
– Four content pages
Pages are linked after they are
generated
Macromedia Studio Step-by-Step
Project 1
15
FIGURE 1-3 Site flowchart for the Dangerous Frogs Web site
Macromedia Studio Step-by-Step
Project 1
16
Giving Your Page a Title
Every HTML document should be titled
A title identifies a document
– Example: “Dangerous Frogs”
Where a title is displayed
– In a browser’s title bar
– As a bookmark name
Creating a title
– Title length is arbitrary
– Short titles preferred
Macromedia Studio Step-by-Step
Project 1
17
Specifying a Background Color
Web-safe color palette
– 256 color values based on 8-bit system
– Located in Page Properties dialog box
How to set a color
– Access Web-safe color palette
– Enter hexadecimal value or click icon
Dangerous Frogs Web site colors
– Values specified in storyboard
– Example: homepage is dark green
Macromedia Studio Step-by-Step
Project 1
18
FIGURE 1-4 Properties defined for the Dangerous Frogs home page
Macromedia Studio Step-by-Step
Project 1
19
Specifying the Default Font
Color
Background color correlates to text color
– Example 1: black text reads well on white
– Example 2: black text reads poorly on green
Implication of changing background color
– Usually means text color should change
Exception for Dangerous Frogs Web site
– Separate colored coordinated background
– No color clash, no need to change text color
Macromedia Studio Step-by-Step
Project 1
20
Specifying Link Colors
Four link color types
– Links: The initial color of a link
• Normal default browser color is blue
– Visited links: Color after user click
• Normal default color is purple
– Rollover links: Color after pointer passes over
• Will not change if color is not selected
– Active links: Color while mouse held down
• Normal default color is red
Change text links in Dangerous Frogs site
Macromedia Studio Step-by-Step
Project 1
21
Lesson 2 Objectives
Add content to a Web page
Understand Web page structure
Format text on a Web page
Macromedia Studio Step-by-Step
Project 1
22
Lesson 2 Objectives
(continued)
Create unordered and ordered lists
Insert special characters and other page
elements
Use CSS external style sheets
Macromedia Studio Step-by-Step
Project 1
23
Lesson 2 Introduction
Learn how to structure and enhance text
– Bring in text from outside documents
– Use preset headings
– Position text
– Make lists
– Add a date
– Insert special characters
– Format the font face and color
– Learn to use cascading style sheets
Macromedia Studio Step-by-Step
Project 1
24
Structuring and Adding
Content to a Page
Add prepared content to Dangerous Frogs
– Use Dreamweaver to format content
– Specifications located in design documents
Two ways to add your own text
– Type the text
– Copy and paste text from another source
Add nontext elements using Insert bar
Edit elements using Property inspector
Macromedia Studio Step-by-Step
Project 1
25
Applying Headings to Text
Heading styles specified in design
document
"Dangerous Frogs: Pretty Poisons“
– Title appearing at top of home page
– Should be set to Heading 1 style
Subsection titles on home page
– Should be formatted using Heading 2 style
Macromedia Studio Step-by-Step
Project 1
26
FIGURE 2-5: Headings indicated on the design document for the Dangerous
Frogs Web site
Macromedia Studio Step-by-Step
Project 1
27
Viewing Design View and Code
View Simultaneously
Design view: visual editing mode
Code view: shows code; e.g., HTML tags
Spilt view: Design and Code view together
– See Dreamweaver implement your design
Macromedia Studio Step-by-Step
Project 1
28
FIGURE 2-7: Document window is split view
Macromedia Studio Step-by-Step
Project 1
29
Understanding How Web Pages
are Structured
The early Web consisted of text only
Text still critical at high and low level
HTML code structures your Web pages
– Dreamweaver writes HTML code for you
– Hidden code implements your design
Learning HTML improves understanding
of Web site design
Macromedia Studio Step-by-Step
Project 1
30
Understanding Page Structure
Dreamweaver codes as user acts
– Example: Open green.htm to see auto code
Interpreting HTML in green.htm
– Line 1: DOCTYPE declaration
• Indicates the type of HTML your document complies with
– Line 2: <html> tag
• Indicates that page display as an HTML document
• Most page information between <html> and </html>
– Line 3: <head> tag
• Contains standard information, such as title and CSS
Macromedia Studio Step-by-Step
Project 1
31
FIGURE 2-8: Code that Dreamweaver creates in a new
page
Macromedia Studio Step-by-Step
Project 1
32
Understanding Page Structure
(continued)
Interpreting HTML in green.htm (continued)
– Line 4: The <meta> tag
• Provides additional information, such as content type
• Does not require a separate closing tag
– Line 5: The <title> tag
• Indicates the title of the page
• Text appears in title bar of browser window
– Lines 8 and 9:
• All displayed data lies between <body> and </body>
Macromedia Studio Step-by-Step
Project 1
33
Formatting Text
Follow specifications in design document
Formatting tool: Property inspector
Indent paragraphs in Coloration section
– Use Text Indent and Text Outdent icons
Apply boldface to terms with Bold button
Add footer for page links and copyright
– Separate lines with a line break
– Center the text using Align Center button
Macromedia Studio Step-by-Step
Project 1
34
FIGURE 2-9: Text formatting indicated on the design
document for the Dangerous Frogs Web site
Macromedia Studio Step-by-Step
Project 1
35
Making Lists
Lists help organize information
Three kinds of preformatted lists
– Ordered: numbers or letters
– Unordered: bulleted
– Definition lists: a term and its definition
Two lists in Dangerous Frogs home page
– Ordered list for survival strategies
– Brief outline of content on other pages
Apply list properties with Property inspector
Macromedia Studio Step-by-Step
Project 1
36
Changing Font Properties
Font properties: type (font), face, size, color
– Apply to text element using Font menu items
– Vary properties to show relative importance
Font choices may not exist on user device
Choices for Dangerous Frogs home page
– Verdana, Arial, Helvetica, sans serif
All site colors listed on Assets panel
– Apply colors to text from the Assets panel
– Colors may be added to Asset Panel
Macromedia Studio Step-by-Step
Project 1
37
Inserting Special Characters
and Elements
Add copyright symbol (special character ©)
– Set Insert bar to Text category
– Add symbol from Characters menu
Add e-mail links for information sharing
– Set Insert bar to Common Category
– Open Email Link dialog box, add address
Add an automatically modified date
– Use date dialog box from Common Category
Macromedia Studio Step-by-Step
Project 1
38
Using Cascading Style Sheets
Apply stylistic rules across Web site
Two kinds of cascading style sheets (CSS)
– Internal: added by Dreamweaver or user
• Apply (and rename) rule using Style dialog box
• Add and save rule using new CSS Rule dialog box (frogs.css)
– External: rules exported to separate file
Using external style sheets
– Attach External Style Sheet links/imports CSS
– Apply external rule using Style dialog box
Macromedia Studio Step-by-Step
Project 1
39
FIGURE 2-25: New CSS Rule Dialog Box
Macromedia Studio Step-by-Step
Project 1
40
FIGURE 2-27: Attach External Sheet Dialog Box
Macromedia Studio Step-by-Step
Project 1
41
Lesson 3 Objectives
Add graphics to a Web page
Provide alternative text for images
Crop and optimize images in Dreamweaver
Macromedia Studio Step-by-Step
Project 1
42
Lesson 3 Objectives
(continued)
Open Fireworks from within Dreamweaver
to modify an image
Align an image on a Web page
Create site navigation using an image map
Macromedia Studio Step-by-Step
Project 1
43
Lesson 3 Introduction
The role of images in Dangerous Frogs
– Add visual dimension to document
– Break up text for easier reading
Image related tasks
– Insert images on a page
– Size and optimize the images
– Align the images
– Position the images on the page
– Create image maps
Macromedia Studio Step-by-Step
Project 1
44
Placing Graphics on the Page
Reference image one of two ways:
– Document-relative reference
• Path to graphics file relative to HTML document
– Site-root- relative reference
• Path to graphics file relative to site root
Rule: use document-relative links and paths
– Migration less troublesome
Save file before inserting an image
Ornate Horned Frog
– Image for Dangerous Frogs home page
– Add ornate_horned.jpg using Insert bar
– Use document-relative reference
Macromedia Studio Step-by-Step
Project 1
45
Providing Alternative Text for
Images
The Alt (Alternate) attribute
– Used when graphics cannot be presented
– Useful in many circumstances
• Example: aids visually impaired individuals
Dreamweaver and Alt
– Prompts user to add Alt attribute
– Property inspector controls alt text for image
Macromedia Studio Step-by-Step
Project 1
46
Editing Images from Within
Dreamweaver
Use Property inspector to manage images
– Reduce image file size (via Fireworks)
– Adjust image brightness or contrast
– Sharpen image or crop it
Image tasks related to Dangerous Frogs
– Ornate Horned Frog
• Crop the image according to design specifications
• Reduce image file size in Fireworks
– New frog inserted in green.htm
• Adjust brightness and contrast via Property inspector
Macromedia Studio Step-by-Step
Project 1
47
FIGURE 3-6 Fireworks Optimize Images dialog box
Macromedia Studio Step-by-Step
Project 1
48
Sizing Images
Add Golden Poison Dart Frog to third page
– Image must be resized
Two ways to resize an image
– Select image and drag control handles
• Disadvantage: user’s browser must scale image
– Use image-editing application (Fireworks)
• Scales image to precisely specified proportions
• Scales image file to desired size
Macromedia Studio Step-by-Step
Project 1
49
Wrapping Text Around Images
Required for images in Dangerous Frogs
– Home page has the image on right side
– green.htm and gold.htm have images on left
Use Align to wrap text around frog images
– Multiline text can wrap left or right only
– Use Left or Right options in Dangerous Frogs
Text wraps too tightly when Align is used
– Adjust margin using Property inspector
Macromedia Studio Step-by-Step
Project 1
50
Creating Image Maps
Hotspot: region with clickable hyperlink
Image map: image containing hotspot(s)
Create image map with Property inspector
Image maps in Dangerous Frogs
– Navigation bar (series of frog images at top)
– Hotspots for Navigation bar are rectangular
Add image map to all pages
– Use copy and paste techniques
Macromedia Studio Step-by-Step
Project 1
51
FIGURE 3-13 Home hotspot on the frognav Image map
Macromedia Studio Step-by-Step
Project 1
52
Lesson 4 Objectives
Create a hyperlink to another page in your
site
Create a hyperlink to another site
Use a hyperlink to open content in a new
browser window
Create a hyperlink to a named anchor
Macromedia Studio Step-by-Step
Project 1
53
Lesson 4 Introduction
A link in HTML has two parts
– Path to the target file (or URL)
– Text or graphic that serves as a clickable link
Events following user click of a link
– Browser uses path to jump to linked document
– Link path may display in status area of browser
Main lesson tasks: creating text links
– Some links will move visitors to new pages
– Some links will move visitor to position in page
Macromedia Studio Step-by-Step
Project 1
54
Creating Hyperlinks
Hyperlink: jumps user to other documents
– Documents may be internal or external to site
Correct path must be supplied to browser
Three types of paths can be used
– Site-root-relative paths
– Absolute paths
– Document-relative paths
Dangerous Frogs task: add link to footer
Macromedia Studio Step-by-Step
Project 1
55
FIGURE 4-1 Property inspector, showing an URL
link
Macromedia Studio Step-by-Step
Project 1
56
Displaying Linked Content in a
New Browser Window
Two ways to load new page via link
– Linked page replaces current page (default)
– Linked page opens in new window
Reason for opening page in new window
– User not led out of your pages
Dangerous Frogs task
– Link to external site will be set to new window
Macromedia Studio Step-by-Step
Project 1
57
Linking to Named Anchors
Named anchor: jump-to point on page
Linking to anchors saves scrolling time
Dangerous Frogs task
– Create links from top to coloration sections
Named anchors are case-sensitive
Use Point to File icon to avoid naming
errors
Macromedia Studio Step-by-Step
Project 1
58
Summarizing Project 1
A Web site with five pages was defined
Text and images were added to pages
Text was formatted, images mo4dified
Hyperlinks were added to pages
Three out of five pages were
completed
Macromedia Studio Step-by-Step
Project 1
59