Lesson 4 cs5


Published on

Published in: Technology, Art & Photos
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • The Page Properties dialog box can be opened by either: Clicking on the Page Properties Button on the property inspector Choosing Modify > Page Properties on the Menu Bar.
  • Adobe Fireworks is a professional-level software program you can use to create and modify images and objects for your Web sites. About Bitmap and Vector Images Bitmap images are made up of colored dots called pixels. Digital photographs and images created in paint programs like Windows Paint are bitmap images. When you enlarge bitmap images, the dots become visible, resulting in a jagged quality. Large bitmap images (or large images that have been scaled down to a smaller size) can significantly increase the amount of time it takes your page to download. Vector images are created by mathematical calculations that draw the object on the screen. For example, when you use a vector tool to draw a polygon, the program uses a calculation to produce the shape as you draw it. You can resize vector images without any loss of quality because vector images are scalable.
  • The Rubber Stamp tool is a good tool to take the time and demonstrate to the students. They have a hard time figuring this tool out on their own. Filters are ready-made effects you can add to objects in a Fireworks document.
  • Press and hold Shift while using the Rectangle tool to draw a perfect square. To draw the shape from the center outward, press and hold ALT while drawing. (The Shift key works for constraining most shapes to their “perfect” shape and the ALT key works to draw from the inside out on all shapes.) One important difference between lines drawn using the Line tool and one of the bitmap tools is that you cannot erase any part of a vector-based line using the Eraser tool.
  • Creating a mask is as simple as creating the shape you want, choosing the Edit > Cut menu command to place the shape on the clipboard, and then clicking the layer of the object you want to mask and choosing Modify > Mask > Paste as Mask.
  • GIF (Graphics Interchange Format) A bitmapped image format designed for on-screen viewing of images. JPEG (Joint Photographic Experts Group) A file format particularly suited for Web graphics, such as photos. PNG (Portable Network Graphic) A bitmapped image format designed for easy use of images on the Internet.
  • Click an image and its properties appear in the Property inspector. Notice that a thumbnail-size version of the image appears at the left side of the Property inspector. On pages that have more than one image or where images may be layered, this thumbnail helps you make sure that you are editing properties for the correct image. Next to the thumbnail is the Name text box, which by default is empty. You can supply a name for the image if you need to refer to the image in a script. You can use an image to link to other pages or sites in the same way you use text. Select the image and then type the link address in the Link text box, or use the Point to File icon or Browse for File button to specify the link target. If you don’t supply alternate text when you insert an image, you can use the Alt box on the Property inspector to supply the text or the <empty> value.
  • As you create the template, you must give some thought to editable and non-editable regions. Non-editable regions are locked on any page created using the template. That is, an author will not be able to change anything in a non-editable region. This helps to protect items such as logos, official photographs, and the like from being changed without authorization, no matter who may work on your page. All items on a template are non-editable unless you specify that they be editable.
  • Lesson 4 cs5

    1. 1. Learning Web Design with Adobe CS5 Dreamweaver ® Fireworks ® Flash ®
    2. 2. Work with Graphic Elements and Templates: Lesson 4, Exercise 24 <ul><li>A simple way to add graphic interest to a Web page is to change its background color. By default, the Web pages you create in Dreamweaver have a white background. You don’t have to leave them white, however; you can use any of the colors in the Dreamweaver color palette as a page background color—but Web-safe colors are recommended. </li></ul>Page Properties for Appearance (HTML) Page Properties for Appearance (CSS)
    3. 3. Work with Graphic Elements and Templates: Lesson 4, Exercise 24 <ul><li>Add a horizontal rule to your page by clicking at the beginning or end of a paragraph and choosing Insert > HTML > Horizontal Rule. </li></ul><ul><li>By default, the rule runs the full width of the Web page. Enter a value in the W box in the Property inspector to designate a custom width. </li></ul><ul><li>Use the H box to specify a height for the rule in pixels. </li></ul><ul><li>The Properties panel does not have a feature to change the horizontal rule’s color. However, you can change the color of the horizontal rule by editing the HTML <hr> tag in the Tag inspector’s property sheet or in Code view, as follows: <hr color=“009999”>. </li></ul>
    4. 4. Work with Graphic Elements and Templates: Lesson 4, Exercise 25 Work area Toolbar Property inspector Panels
    5. 5. Work with Graphic Elements and Templates: Lesson 4, Exercise 26 <ul><li>The three bitmap selection tools are the Marquee tool, the Lasso tool, and the Magic Wand. </li></ul><ul><li>Use the Marquee tool when you want to select a rectangular area of a bitmap image. </li></ul><ul><li>Use the Lasso tool when you need to select an irregularly shaped area. You use the Lasso to draw around the edges of the area you want to select. </li></ul><ul><li>Use the Magic Wand tool when you want to select all contiguous pixels in a specific color. For example, in the image shown in the illustration to the right, the Magic Wand tool has been used to select the white color on the petals of the lotus blossom. </li></ul>
    6. 6. Work with Graphic Elements and Templates: Lesson 4, Exercise 27 <ul><li>You can apply filters to bitmap objects, vector objects, or text objects. </li></ul><ul><li>When you apply a filter by using the Filters menu, the filter is destructive, meaning the change is made to the object instantly and you cannot modify the properties of the filter. </li></ul><ul><li>You can also apply live filters by using the Property inspector. When you use a live filter, you can continue to work with and modify the settings of the filter. </li></ul><ul><li>The Burn tool darkens a part of an image; the Dodge tool lightens a part of an image. </li></ul>
    7. 7. Work with Graphic Elements and Templates: Lesson 4, Exercise 28 <ul><li>The Scale tool enables you to quickly change the size of any object regardless of its type. </li></ul><ul><li>You can use the Scale tool to rotate an object. </li></ul><ul><li>You can also use the Skew tool and the Distort tool to change the shape of an object by dragging the handles that appear around the edges of a selected vector object. These tools are called transform tools. </li></ul>Transform Tools Vector Drawing Tools
    8. 8. Work with Graphic Elements and Templates: Lesson 4, Exercise 28 <ul><li>When you draw a vector path with the Pen tool, points are added only at the places you click the mouse button. The tool connects the points smoothly as you draw. </li></ul><ul><li>Handles appear automatically on the vector path you create with the Pen tool. You can drag the handles to control the distance, arc, and direction of the path. </li></ul><ul><li>Move points on a line by choosing the Subselection tool and dragging the points where you want them on the line. </li></ul><ul><li>To delete a point using the Subselection tool, choose the point and press Del. </li></ul><ul><li>To delete a point using the Pen tool, position the tool on a point and click the point to delete it. </li></ul><ul><li>To add a point using the Pen tool, position the tool on the line away from a point and click to add a point. </li></ul>
    9. 9. Work with Graphic Elements and Templates: Lesson 4, Exercise 29 <ul><li>In a Fireworks document, all text is contained in text blocks. You use the Text tool to create text blocks. </li></ul><ul><li>You can edit the text in a text block at any time. </li></ul><ul><li>You can change the properties of text blocks in much the same way you change the properties of vector objects. </li></ul><ul><li>You can, for example, change the fill and stroke colors. You can also apply filters to text blocks to create special effects. </li></ul><ul><li>You can create a text block two ways: </li></ul><ul><ul><li>Click once with the Text tool to create an auto-sizing text block that expands as you type. </li></ul></ul><ul><ul><li>Drag the Text tool to create a fixed-width text block that expands vertically as you type. </li></ul></ul>Fill Options for text Text font samples
    10. 10. Work with Graphic Elements and Templates: Lesson 4, Exercise 30 <ul><li>Each vector or path object you create is automatically placed on its own layer. </li></ul><ul><li>You can add layers to add to the level of control you have over the way objects are organized in your document. </li></ul><ul><li>You can use a mask to change how much of an object is visible in a Fireworks document. </li></ul><ul><li>Masking an object is similar to cropping, but you are not limited to a rectangular area as you are when you crop an image. </li></ul><ul><li>You can use any vector object to create a mask in Fireworks. </li></ul>
    11. 11. Work with Graphic Elements and Templates: Lesson 4, Exercise 31 <ul><li>You can access Adobe Bridge from within Dreamweaver (File > Browse in Bridge) to import your Fireworks images and other media files you plan to use on your Web pages. </li></ul><ul><li>To make sure others will be able to see the images you place on your pages, save the files in one of three formats: JPG, GIF, or PNG. </li></ul>Choose destination folder Previewed image
    12. 12. Work with Graphic Elements and Templates: Lesson 4, Exercise 31 Sizing handle Supply alternate text Name image Change width and height Link the image Image editing tools
    13. 13. Work with Graphic Elements and Templates: Lesson 4, Exercise 32 <ul><li>You can use an image to create an image map, which contains a hotspot that links the current page to another location. </li></ul><ul><li>Image maps are creative ways to add both visual appeal and functionality to your Web site. </li></ul><ul><li>To create image maps, you use the hotspot tools on the expanded portion of the Property inspector to draw an area on the image. </li></ul>Hotspot Alt text box
    14. 14. Work with Graphic Elements and Templates: Lesson 4, Exercise 32 <ul><li>A rollover image is composed of two images that are controlled by JavaScript. The original image loads with the page. When a site visitor hovers the mouse over the image, the original image is replaced by another. </li></ul><ul><li>Rollover images can be used in a number of ways on a Web site. Use them to show two different versions of an image or to display related images. Rollover images can also be used to create navigation buttons. </li></ul>
    15. 15. Work with Graphic Elements and Templates: Lesson 4, Exercise 33 <ul><li>A template is a collection of formats and page elements that you can use to give pages in your Web site a consistent look. </li></ul><ul><li>For example, a template could include a background image or color, images, headings, and text styles and formats. Using a template can save you considerable development time. </li></ul><ul><li>When you create a template, you can specify non-editable and editable regions: </li></ul><ul><ul><li>Non-editable regions contain items that you want to include on each page, such as a copyright notice or a logo. </li></ul></ul><ul><ul><li>Editable regions contain items such as text or headings that can change on a page. </li></ul></ul>
    16. 16. Work with Graphic Elements and Templates: Lesson 4, Exercise 34 <ul><li>The Library feature in the Assets panel is a wonderful tool that saves you time and enables you to use the same elements repeatedly—while still being able to update and change them in every Web page that uses the element in a Web site. This tremendously reduces creation time, especially when you are working with a team that has a variety of skills. </li></ul><ul><li>When you place a library item on a page, Dreamweaver inserts a copy of the HTML source code for that item into the document and adds an HTML comment containing a reference to the original, external item—a link from the page item to the library item. </li></ul><ul><li>You can modify that library item wherever it appears in the Web site by modifying the item in the Library. In this way, a library item differs from an item inserted from the other Assets panels. </li></ul>