Macromedia Studio 8 Step-by-Step

Transcription

1 Macromedia Studio 8 Step-by-Step MACROMEDIA DREAMWEAVER 8 Project 1: Personal Web Site FIGURE 1 Dangerous Frogs Web Site Project 1 2 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 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 3 Project 1 4 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 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 Project 1 5 Project 1 6 1

2 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 site Requirements for Dangerous Frogs Design document Flowchart Storyboards Beginning construction of Web site Identify document properties; e.g., titles Implement properties with Dreamweaver Project 1 7 Project 1 8 Defining a Local Site FIGURE 2 Design document and flowchart for the Dangerous Frogs Web site Project 1 9 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 10 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 Project 1 11 Project

3 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 Project 1 13 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 14 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 Project 1 15 Project 1 16 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 Lesson 2 Objectives Add content to a Web page Understand Web page structure Format text on a Web page Project 1 17 Project

4 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 Project 1 19 Project 1 20 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 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 21 Project 1 22 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-5: Headings indicated on the design document for the Dangerous Frogs Web site Project 1 23 Project

5 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 Project 1 25 Project 1 26 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 FIGURE 2-8: Code that Dreamweaver creates in a new page Project 1 27 Project 1 28 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> 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 Project 1 29 Project

6 FIGURE 2-9: Text formatting indicated on the design document for the Dangerous Frogs Web site Project 1 31 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 Project 1 32 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 33 Inserting Special Characters and Elements Add copyright symbol (special character ) Set Insert bar to Text category Add symbol from Characters menu Add links for information sharing Set Insert bar to Common Category Open Link dialog box, add address Add an automatically modified date Use date dialog box from Common Category Project 1 34 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 FIGURE 2-25: New CSS Rule Dialog Box Project 1 35 Project

7 Lesson 3 Objectives Add graphics to a Web page Provide alternative text for images Crop and optimize i images in Dreamweaver FIGURE 2-27: Attach External Sheet Dialog Box Project 1 37 Project 1 38 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 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 39 Project 1 40 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 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 Project 1 41 Project

8 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 FIGURE 3-6 Fireworks Optimize Images dialog box Project 1 43 Project 1 44 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 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 45 Project 1 46 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 Project 1 47 FIGURE 3-13 Home hotspot on the frognav Image map Project

9 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 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 49 Project 1 50 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 Project 1 51 FIGURE 4-1 Property inspector, showing an URL link Project 1 52 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 53 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 Project