Transcript Slides for Day 12 - UW Faculty Web Server

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
1. Defining a site in Dreamweaver
• Read “Creating your site files” on page 3-5 of
Adomeit’s “Basic Website Design” tutorial
• Questions?
2. 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
– 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:
1. Navigate to your organization’s main page
2. Analyze the page to determine the
underlying table design
3. 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
– 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
– Assignment 6
• Monday (5/2)
• By class
– Includes:
•
•
•
•
Solution
Key Features
Design Rationale
Learning Reflection
• Next Class
– Debrief assignment 6
– Introduce page layout /
InDesign