macromedia studio 8 step-by-step macromedia dreamweaver 8 project 1: personal web site

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


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)


Web site: displays media elements

Web sites vary by size, function, use

The Web: a medium for self-publication

Overview


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


FIGURE 1 Dangerous Frogs Web Site


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


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


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


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


Lesson 1 Objectives

Create a site definition in Dreamweaver

Create a new Web page

Set document properties for a Web page


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


FIGURE 2 Design document and flowchart for the Dangerous Frogs Web site


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


Creating Pages

After defining site, create pages

Refer to site flowchart– One home page– Four content pages

Pages are linked after they are generated


FIGURE 1-3 Site flowchart for the Dangerous Frogs Web site


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


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


FIGURE 1-4 Properties defined for the Dangerous Frogs home page


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


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


Lesson 2 Objectives

Add content to a Web page

Understand Web page structure

Format text on a Web page


Lesson 2 Objectives (continued)

Create unordered and ordered lists

Insert special characters and other page elements

Use CSS external style sheets


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


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


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


FIGURE 2-5: Headings indicated on the design document for the Dangerous Frogs Web site


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


FIGURE 2-7: Document window is split view


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


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


FIGURE 2-8: Code that Dreamweaver creates in a new page


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>


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


FIGURE 2-9: Text formatting indicated on the design document for the Dangerous Frogs Web site


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


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


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


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


FIGURE 2-25: New CSS Rule Dialog Box


FIGURE 2-27: Attach External Sheet Dialog Box


Lesson 3 Objectives

Add graphics to a Web page

Provide alternative text for images

Crop and optimize images in Dreamweaver


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



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


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


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


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


FIGURE 3-6 Fireworks Optimize Images dialog box


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


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


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


FIGURE 3-13 Home hotspot on the frognav Image map


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



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


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


FIGURE 4-1 Property inspector, showing an URL link


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


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


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