macromedia studio 8 step-by-step macromedia dreamweaver 8 project 1: personal web site
TRANSCRIPT
Macromedia Studio 8 Step-by-Step
MACROMEDIA DREAMWEAVER 8 Project 1: Personal Web Site
Project 1 2Macromedia Studio Step-by-Step
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
Project Objectives
Project 1 3Macromedia Studio Step-by-Step
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
Project Objectives (continued)
Project 1 4Macromedia Studio Step-by-Step
Web site: displays media elements
Web sites vary by size, function, use
The Web: a medium for self-publication
Overview
Project 1 5Macromedia Studio Step-by-Step
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
Assignment
Project 1 6Macromedia Studio Step-by-Step
FIGURE 1 Dangerous Frogs Web Site
Project 1 7Macromedia Studio Step-by-Step
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
Web Site Design Document
Project 1 8Macromedia Studio Step-by-Step
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
Project 1 9Macromedia Studio Step-by-Step
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
Web Site Storyboards
Project 1 10Macromedia Studio Step-by-Step
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
Project 1 Lessons
Project 1 11Macromedia Studio Step-by-Step
Lesson 1 Objectives
Create a site definition in Dreamweaver
Create a new Web page
Set document properties for a Web page
Project 1 12Macromedia Studio Step-by-Step
Lesson 1 Introduction
Requirements specify Web siteRequirements for Dangerous Frogs – Design document– Flowchart– Storyboards
Beginning construction of Web site– Identify document properties; e.g., titles– Implement properties with Dreamweaver
Project 1 13Macromedia Studio Step-by-Step
FIGURE 2 Design document and flowchart for the Dangerous Frogs Web site
Project 1 14Macromedia Studio Step-by-Step
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
Project 1 15Macromedia Studio Step-by-Step
Creating Pages
After defining site, create pages
Refer to site flowchart– One home page– Four content pages
Pages are linked after they are generated
Project 1 16Macromedia Studio Step-by-Step
FIGURE 1-3 Site flowchart for the Dangerous Frogs Web site
Project 1 17Macromedia Studio Step-by-Step
Giving Your Page a TitleEvery HTML document should be titledA 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
Project 1 18Macromedia Studio Step-by-Step
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
Project 1 19Macromedia Studio Step-by-Step
FIGURE 1-4 Properties defined for the Dangerous Frogs home page
Project 1 20Macromedia Studio Step-by-Step
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
Project 1 21Macromedia Studio Step-by-Step
Specifying Link Colors
Four link color types– Links: The initial color of a link
• Normal default browser color is blueNormal default browser color is blue
– Visited links: Color after user click• Normal default color is purpleNormal default color is purple
– Rollover links: Color after pointer passes over• Will not change if color is not selectedWill not change if color is not selected
– Active links: Color while mouse held down• Normal default color is redNormal default color is red
Change text links in Dangerous Frogs site
Project 1 22Macromedia Studio Step-by-Step
Lesson 2 Objectives
Add content to a Web page
Understand Web page structure
Format text on a Web page
Project 1 23Macromedia Studio Step-by-Step
Lesson 2 Objectives (continued)
Create unordered and ordered lists
Insert special characters and other page elements
Use CSS external style sheets
Project 1 24Macromedia Studio Step-by-Step
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
Project 1 25Macromedia Studio Step-by-Step
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 barEdit elements using Property inspector
Project 1 26Macromedia Studio Step-by-Step
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
Project 1 27Macromedia Studio Step-by-Step
FIGURE 2-5: Headings indicated on the design document for the Dangerous Frogs Web site
Project 1 28Macromedia Studio Step-by-Step
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
Project 1 29Macromedia Studio Step-by-Step
FIGURE 2-7: Document window is split view
Project 1 30Macromedia Studio Step-by-Step
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
Project 1 31Macromedia Studio Step-by-Step
Understanding Page StructureDreamweaver 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 withIndicates the type of HTML your document complies with
– Line 2: <html> tag • Indicates that page display as an HTML documentIndicates that page display as an HTML document• Most page information between <html> and </html>Most page information between <html> and </html>
– Line 3: <head> tag • Contains standard information, such as title and CSSContains standard information, such as title and CSS
Project 1 32Macromedia Studio Step-by-Step
FIGURE 2-8: Code that Dreamweaver creates in a new page
Project 1 33Macromedia Studio Step-by-Step
Understanding Page Structure (continued)
Interpreting HTML in green.htm (continued)– Line 4: The <meta> tag
• Provides additional information, such as content type Provides additional information, such as content type • Does not require a separate closing tagDoes not require a separate closing tag
– Line 5: The <title> tag • Indicates the title of the pageIndicates the title of the page• Text appears in title bar of browser windowText appears in title bar of browser window
– Lines 8 and 9: • All displayed data lies between <body> and </body>All displayed data lies between <body> and </body>
Project 1 34Macromedia Studio Step-by-Step
Formatting Text
Follow specifications in design documentFormatting tool: Property inspectorIndent paragraphs in Coloration section– Use Text Indent and Text Outdent icons
Apply boldface to terms with Bold buttonAdd footer for page links and copyright – Separate lines with a line break– Center the text using Align Center button
Project 1 35Macromedia Studio Step-by-Step
FIGURE 2-9: Text formatting indicated on the design document for the Dangerous Frogs Web site
Project 1 36Macromedia Studio Step-by-Step
Making ListsLists help organize informationThree 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
Project 1 37Macromedia Studio Step-by-Step
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
Project 1 38Macromedia Studio Step-by-Step
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
Project 1 39Macromedia Studio Step-by-Step
Using Cascading Style Sheets
Apply stylistic rules across Web siteTwo kinds of cascading style sheets (CSS)– Internal: added by Dreamweaver or user
• Apply (and rename) rule using Style dialog boxApply (and rename) rule using Style dialog box• Add and save rule using new CSS Rule dialog box (frogs.css)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
Project 1 40Macromedia Studio Step-by-Step
FIGURE 2-25: New CSS Rule Dialog Box
Project 1 41Macromedia Studio Step-by-Step
FIGURE 2-27: Attach External Sheet Dialog Box
Project 1 42Macromedia Studio Step-by-Step
Lesson 3 Objectives
Add graphics to a Web page
Provide alternative text for images
Crop and optimize images in Dreamweaver
Project 1 43Macromedia Studio Step-by-Step
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
Project 1 44Macromedia Studio Step-by-Step
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
Project 1 45Macromedia Studio Step-by-Step
Placing Graphics on the PageReference image one of two ways:
– Document-relative reference• Path to graphics file relative to HTML document Path to graphics file relative to HTML document
– Site-root- relative reference• Path to graphics file relative to site rootPath 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
Project 1 46Macromedia Studio Step-by-Step
Providing Alternative Text for Images
The Alt (Alternate) attribute – Used when graphics cannot be presented– Useful in many circumstances
• Example: aids visually impaired individuals Example: aids visually impaired individuals
Dreamweaver and Alt– Prompts user to add Alt attribute – Property inspector controls alt text for image
Project 1 47Macromedia Studio Step-by-Step
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 specificationsCrop the image according to design specifications• Reduce image file size in FireworksReduce image file size in Fireworks
– New frog inserted in green.htm• Adjust brightness and contrast via Property inspector Adjust brightness and contrast via Property inspector
Project 1 48Macromedia Studio Step-by-Step
FIGURE 3-6 Fireworks Optimize Images dialog box
Project 1 49Macromedia Studio Step-by-Step
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 imageDisadvantage: user’s browser must scale image
– Use image-editing application (Fireworks)• Scales image to precisely specified proportionsScales image to precisely specified proportions• Scales image file to desired size Scales image file to desired size
Project 1 50Macromedia Studio Step-by-Step
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
Project 1 51Macromedia Studio Step-by-Step
Creating Image Maps
Hotspot: region with clickable hyperlink Image map: image containing hotspot(s)Create image map with Property inspectorImage 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
Project 1 52Macromedia Studio Step-by-Step
FIGURE 3-13 Home hotspot on the frognav Image map
Project 1 53Macromedia Studio Step-by-Step
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
Project 1 54Macromedia Studio Step-by-Step
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
Project 1 55Macromedia Studio Step-by-Step
Creating Hyperlinks
Hyperlink: jumps user to other documents– Documents may be internal or external to site
Correct path must be supplied to browserThree types of paths can be used– Site-root-relative paths– Absolute paths – Document-relative paths
Dangerous Frogs task: add link to footer
Project 1 56Macromedia Studio Step-by-Step
FIGURE 4-1 Property inspector, showing an URL link
Project 1 57Macromedia Studio Step-by-Step
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
Project 1 58Macromedia Studio Step-by-Step
Linking to Named Anchors
Named anchor: jump-to point on pageLinking to anchors saves scrolling timeDangerous Frogs task– Create links from top to coloration sections
Named anchors are case-sensitiveUse Point to File icon to avoid naming errors
Project 1 59Macromedia Studio Step-by-Step
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