1 / 23

Macromedia Academy

Learn essential web design principles, terminology, and tools like Dreamweaver, Fireworks, and Flash. Optimize images, create navigation buttons, banners, and more.

knightn
Télécharger la présentation

Macromedia Academy

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. Macromedia Academy Dreamweaver Fireworks Flash

  2. URL IP Address HTML structure tag browser refresh (F5) server upload / publish FTP editor hyperlinking extension JPEG GIF plug-in WebDAV* Introduction & Terminology

  3. A Forward Regarding Design! • Design For Your Audience • test with inexperienced Web users • Keep Location Evident • “breadcrumbs”, links correlate destination • Maintain Consistency • natural colors, footers and headers • Build Simplicity Into the Design • balance, readable, contrast, “chunk” text

  4. Bad or “Dorky” Features • default gray color for background • busy backgrounds • poor color combinations • text is too small or too big • centered type over flush left body copy • paragraphs in bold, italic, all caps • underlined text that is not a link • large graphics, blinking text, under construction signs

  5. Good Design Features • background does not interrupt text • the hierarchy of information is clear • navigation is consistent • links are underlined so they are clear to visitor that they are links • pages download quickly • no lateral scrolling in browser • pages download quickly • good use of graphical elements (photos, subheads, quotes) to break up large areas of text

  6. Recommended Resources • Web Style Guide: Basic Design Principles for Creating Web Sites • Lynch & Horton • The Non-Designer’s Web Book • Williams & Tollett

  7. Day Two Fireworks

  8. Day One Review • Terminology & Design • Create “website” folder • index.html, images folder, naming files • Dreamweaver Workspace • “Property Inspector”

  9. Day One Review (cont.) • Page Properties • titles, background, links • Finding and Inserting Images • CTRL + click (or right-click) • “Save Image As…” into website folder, extension! • Inserting Hyperlinks • “absolute” vs. “relative” • target: _blank

  10. Day One Review (cont.) • Preview Page in Browser • Using Tables For Layout • fixed vs. dynamic widths • border = 0 • merge or split cells • Additional Pages • “Save As…” • “Web Friendly” Documents

  11. Day One Review (cont.) • Background Pictures • CSS Styles (no-repeat)

  12. Day One Review (cont.) • Drawing Layers or “Containers” • insert menu

  13. Day One Review (cont.) • Publish to eBackpack • Finder • > Go > “Connect to Server…” • Upload to Sites Folder http://eportal.guhsd.net/usr123/website/index.htm

  14. Introduction & Terminology • .PNG or .png • .PSD or .psd • .JPG or .jpg or .jpeg • .GIF or .gif • .TIF or .TIFF or .tif or .tiff • compression (lossy vs. lossless) • resolution 72 ppi (or dpi) • resolution 150 ppi (dpi)

  15. Today’s Objectives • Optimize a photograph(s) • Create “rollover” navigation buttons • Create Web banner(s)

  16. Day Three Flash

  17. Day Two Review • Terminology • compression • optimization at 72 ppi • File > Export Preview…

  18. Day Two Review (cont.) • Creating Buttons • Marquee, Pointer, Paint Bucket, Rectangle, Type, Fill Tools • “Bevel Boss” Filter • Layers

  19. Day Two Review (cont.) • Navigation Bar Feature (Dreameaver)

  20. Day Two Review (cont.) • Web banners • Gradient fills

  21. Day Two Review (cont.) • Web banners • Gradient fills • Polygon Lasso tool

  22. Day Two Review (cont.) • Web banners • Gradient fills • Polygon Lasso tool • Resize using Modify > Transform > Free Transform • Feathered Selections • Masking

  23. .swf .fla stage playhead timeline keyframe layer tweening object symbol fill stroke Introduction & Terminology

More Related