1 / 7

Dreamweaver Checklist for Effective Web Design

Learn essential steps in Dreamweaver design, from proper folder setup to typography and image optimization for a successful website.

tmazzariello
Download Presentation

Dreamweaver Checklist for Effective Web Design

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Exercise 1 Checklist • Dreamweaver - Local Root Folder • Make sure it is properly specified in Dreamweaver  VerifyOtherwise 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 templateand 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. Pointer ToolUse to “reveal” and select objects “Behind tool” selects object that is behind another object Crop Tool Small triangle in lower right corner indicates that it is part of a tool group. Click tool icon and hold down mouse button Fireworks Toolbox - Selection

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

  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 = 14ptand “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 Inspectorto indicate displayed size not equal actual size

More Related