TC 310 The Computer in Technical Communication Dr. Jennifer Turns Week 6, Day 2 (11/6)

Looking backward and forward Where we’ve been Activated UW Web Publishing Gained designing, debugging experience with HTML Practiced publishing HTML files with FTP Moved from web pages to web sites Learned to define a site in Dreamweaver Explored basic web design with Dreamweaver Where we’re going Using tables for sophisticated page design Image maps as a fun opportunity Moving from conceptual ideas to implemented ideas

Looking backward and forward Two key aspects Defining a site in Dreamweaver Read “Creating your site files” on page 3-5 of Adomeit’s “Basic Website Design” tutorial Questions? Publishing the site created by Dreamweaver How do you publish a website created by Dreamweaver?

Day 10 By the end of class, students should be able to: Approach assignment 6 with confidence Create sophisticated web page designs using Dreamweaver’s table, layout, and tracing image functionality Describe the concept, uses, and process of creating an image map What we’ll do… Discuss using tables to create sophisticated layouts Practice using table, layout and tracing image functionality to create a copy of a design Explore the image map tutorial Sketch basic ideas for assignment 6

Tables and Imagemaps Tables Image map Tables are valuable for page layout. Dreamweaver makes it easy to use tables, as well as tables within tables. Image map An imagemap is an interactive image. The image has “hotspots”, or clickable regions that serve as links. An imagemap is a useful for transforming a graphic image into a navigation device. Dreamweaver makes it easy to create imagemaps. Dreamweaver has tutorials for both of these.

Tables – Exercise 1 Goal: Learning to see the table underlying web page designs. Steps: Navigate to your organization’s main page Analyze the page to determine the underlying table design Report back to class.

Tables – Exercise 2 Goal: For students to gain experience laying out a basic website design. Follow steps on pages 6-10 of Adomeit’s Tutorial on “Basic Website Design” Ask questions along the way

Tables – Exercise 3 Building blocks Your task Page property – “Tracing Image”: Permits you to design on top of a graphic representing the page Layout tab – Standard View: Gives you toolbar functionality for creating/modifying tables directly Layout tab – Layout View: Allows you to specify a complex design by simply drawing rectangles. Dreamweaver converts the layout into a table for you. Insert – Image Placeholder: Allows you to insert a blank image, and the get the size right, before you show the image… (use with Layout view) Your task Locate a jpg/gif image of a design you wish to imitate. Create a page in Dreamweaver and set its “tracing image” to that graphic. Use the standard/layout tab functionality to design the page. Use the image placeholder function to create a place for an image (and then insert an image).

Page design - Hints Aim for a simple design… reasons include Elegance/simplicity are good for web design Save time Test early – test often Preview often Publish current version and preview

Image Map Example: http://faculty.washington.edu/jturns/bodyParts Basic concept Define hotspot area: Use drawing tools Define link destination. Fill in “link” field In Dreamweaver See it – demonstration… Try it – take an image and make two areas active Thoughts In practice: Best for redundant navigation since options may not be visible to the use Quick Prototype: Create a graphic in photoshop, then turn the graphic into a image map.

Preparing for the Assignment Sketch out a design for your site. Write down the set of steps you would need to go through in order to create a two page website in Dreamweaver and publish that site to the Internet.

Looking Ahead Due Dates Next Class Assignment 6 Includes: Monday (5/2) By class Includes: Solution Key Features Design Rationale Learning Reflection Next Class Debrief assignment 6 Introduce page layout / InDesign