1. Macromedia Studio 8 Step-by-Step MACROMEDIA DREAMWEAVER 8 Project 1: Personal Web Site

2. Project 1 2 Macromedia 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

3. Project 1 3 Macromedia 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)

4. Project 1 4 Macromedia Studio Step-by-Step Web site: displays media elements Web sites vary by size, function, use The Web: a medium for self-publication Overview

5. Project 1 5 Macromedia 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

6. Project 1 6 Macromedia Studio Step-by-Step FIGURE 1 Dangerous Frogs Web Site

7. Project 1 7 Macromedia 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

8. Project 1 8 Macromedia 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

9. Project 1 9 Macromedia 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

10. Project 1 10 Macromedia 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

11. Project 1 11 Macromedia 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

12. Project 1 12 Macromedia Studio Step-by-Step 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

13. Project 1 13 Macromedia Studio Step-by-Step FIGURE 2 Design document and flowchart for the Dangerous Frogs Web site

14. Project 1 14 Macromedia 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

15. Project 1 15 Macromedia 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

16. Project 1 16 Macromedia Studio Step-by-Step FIGURE 1-3 Site flowchart for the Dangerous Frogs Web site

17. Project 1 17 Macromedia Studio Step-by-Step 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

18. Project 1 18 Macromedia 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

19. Project 1 19 Macromedia Studio Step-by-Step FIGURE 1-4 Properties defined for the Dangerous Frogs home page

20. Project 1 20 Macromedia 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

21. Project 1 21 Macromedia 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

22. Project 1 22 Macromedia Studio Step-by-Step Lesson 2 Objectives Add content to a Web page Understand Web page structure Format text on a Web page

23. Project 1 23 Macromedia 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

24. Project 1 24 Macromedia 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

25. Project 1 25 Macromedia 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 bar Edit elements using Property inspector

26. Project 1 26 Macromedia 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

27. Project 1 27 Macromedia Studio Step-by-Step FIGURE 2-5: Headings indicated on the design document for the Dangerous Frogs Web site

28. Project 1 28 Macromedia 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

29. Project 1 29 Macromedia Studio Step-by-Step FIGURE 2-7: Document window is split view

30. Project 1 30 Macromedia 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

31. Project 1 31 Macromedia Studio Step-by-Step 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 withIndicates the type of HTML your document complies with –Line 2: tag Indicates that page display as an HTML documentIndicates that page display as an HTML document Most page information between and Most page information between and –Line 3: tag Contains standard information, such as title and CSSContains standard information, such as title and CSS

32. Project 1 32 Macromedia Studio Step-by-Step FIGURE 2-8: Code that Dreamweaver creates in a new page

33. Project 1 33 Macromedia Studio Step-by-Step Understanding Page Structure (continued) Interpreting HTML in green.htm (continued) –Line 4: The tag Provides additional information, such as content typeProvides additional information, such as content type Does not require a separate closing tagDoes not require a separate closing tag –Line 5: The 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 and All displayed data lies between and

34. Project 1 34 Macromedia Studio Step-by-Step 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

35. Project 1 35 Macromedia Studio Step-by-Step FIGURE 2-9: Text formatting indicated on the design document for the Dangerous Frogs Web site

36. Project 1 36 Macromedia Studio Step-by-Step 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

37. Project 1 37 Macromedia 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

38. Project 1 38 Macromedia 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

39. Project 1 39 Macromedia Studio Step-by-Step 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 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

40. Project 1 40 Macromedia Studio Step-by-Step FIGURE 2-25: New CSS Rule Dialog Box

41. Project 1 41 Macromedia Studio Step-by-Step FIGURE 2-27: Attach External Sheet Dialog Box

42. Project 1 42 Macromedia Studio Step-by-Step Lesson 3 Objectives Add graphics to a Web page Provide alternative text for images Crop and optimize images in Dreamweaver

43. Project 1 43 Macromedia 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

44. Project 1 44 Macromedia 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

45. Project 1 45 Macromedia Studio Step-by-Step Placing Graphics on the Page Reference image one of two ways: –Document-relative reference Path to graphics file relative to HTML documentPath 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

46. Project 1 46 Macromedia 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 individualsExample: aids visually impaired individuals Dreamweaver and Alt –Prompts user to add Alt attribute –Property inspector controls alt text for image

47. Project 1 47 Macromedia 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 inspectorAdjust brightness and contrast via Property inspector

48. Project 1 48 Macromedia Studio Step-by-Step FIGURE 3-6 Fireworks Optimize Images dialog box

49. Project 1 49 Macromedia 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 sizeScales image file to desired size

50. Project 1 50 Macromedia 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

51. Project 1 51 Macromedia Studio Step-by-Step 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

52. Project 1 52 Macromedia Studio Step-by-Step FIGURE 3-13 Home hotspot on the frognav Image map

53. Project 1 53 Macromedia 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

54. Project 1 54 Macromedia 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

55. Project 1 55 Macromedia 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 browser Three types of paths can be used –Site-root-relative paths –Absolute paths –Document-relative paths Dangerous Frogs task: add link to footer

56. Project 1 56 Macromedia Studio Step-by-Step FIGURE 4-1 Property inspector, showing an URL link

57. Project 1 57 Macromedia 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

58. Project 1 58 Macromedia Studio Step-by-Step 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

59. Project 1 59 Macromedia 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