1. Exercise 1 Checklist Dreamweaver - Local Root Folder –Make sure it is properly specified in Dreamweaver  Verify Otherwise can cause problems with local hyperlinks Basic –Filename = lowercase, no spaces and “htm” file extension –Every page has a unique Page Name  Page title field Layout –Top and Left Margin  In “Layout View” drag layout cells away from top and left margin  Modify > Page Properties : Margin fields not equal to zero Navigation Structure –Local hyperlinks  Test –Assume all files are in the same folder = “ex1” –Every page has a “you are here” indicator

2. Exercise 1 Checklist (cont.) Typography –Sans serif typeface  Modify > Page Properties : set Page font = Verdana, … –Type size = 10 to 14 points  Select text and in “Property Inspector” specify “Size” = 2 or 3. –Text lines 7 to 10 words  Select layout cell and change its width in “Property Inspector Content –Just enough words  cut unnecessary words –Follow Question / Answer template and display questions in bold typeface –Answer all questions –Answers informative and to the point

3. Exercise 1 Checklist (cont.) Images –Use Fireworks to edit screenshots –You can choose to save “work in progress ” in Fireworks as a Fireworks file using “Save” (saves a file using the “png” file format)  more in Lecture 5 –Remember to export end result out of Fireworks as “GIF” or “JPEG”  “File > Export = “Images Only” in “ex1” folder –Make sure to upload also images to server How to annotate images with shapes and text? –Select website of your choice in Internet Explorer –Capture screenshot using “Print Screen” button –Launch Fireworks –Open new file using “File > New” (if needed) –Paste screenshot

4. Fireworks Toolbox - Selection Small triangle in lower right corner indicates that it is part of a tool group. Click tool icon and hold down mouse button Pointer Tool Use to “reveal” and select objects “Behind tool” selects object that is behind another object Crop Tool

5. Fireworks Toolbox - Vector Write Text - Draw Lines, Shapes

6. Fireworks – Add Text Create Text –Select “Text” tool –Move Cursor & Click Mouse where you want text to start –In Text tool box, select type face and size = 14pt and “smooth” for anti aliasing  Many controls in Text Property Inspector as well as Text Menu

7. Exercise 1 Checklist (cont.) Images (cont.) –Insert images in Dreamweaver  “Insert > Image” –Reduce Size of Image in Dreamweaver –Select image –Select image corner handle, while holding down SHIFT key, and drag to desired size –Image dimensions will displayed in bold in Property Inspector to indicate displayed size not equal actual size