Designers attend
10/8
homework due this week This lesson is devoted to creating a template which can be
used by the content developers to produce the Web site. Designers
will meet with the instructor for 30 minute appointments during
lab time.
Designer Schedule Form
Schedule
of Appointments
Review the existing Schedule
The lecture topics covered will include:
- slicing strategies
- converting the ImageReady code to usable HTML
- nested tables
- answer any question you may have about the templates
- share information so that designers and content developers who are using ImageReady, Dreamweaver, etc
can support each other
during the class.
Designer Tips
Designers often create a mock up which needs to be modified to slice correctly.
Try and make up a design which uses as few images as possible and reuses images whenever you can.
Nudge elements if needed so the slicing is efficient and simple
name all slices so images can be located easily
use alt tags on all images
refer to the storyboard for the link locations
optimize images as gifs or jpegs as needed.
Review this web page which listes the step by step process for moving from
a mock up to a template
Content Developer Tips
Once the designer gives you the mock up it will probably need some modification
put a border around the table which holds the page elements and take a look at there everything goes.
look at the image file names and see if they make sense to you
make a back up copy of the code so as you modify it, if you break it you can return to the original
take out unnecessary tags such as extra rollovers or tags for spacer cells
Nested tables will probably required on all sites. If you have never created
nested tables - I recommend you practice on dummy images ASAP so you can begin
to understand how nr=ested tables work.
nested table overview
creating nested tables in Dreamweaver
example of a website that will crack without nested tables
CSS
file for the site
Creating a stretchy table
Guidelines for creating a template
explanation
Template
Explanation - created
by Linda Hemenway as a sample
examples of former student's template explanations
Joy Olsons Template - HTML, CSS and images
Template
Explanation
Sally Archambault - Template
- HTML, CSS, images, videos
Template Explanation (Word file)
Vickie Garwachki - Betty BioDiesel HTML. CSS, images
Template Explanation (PDF)
Content for these teaching materials were developed by Linda Hemenway.
If you have questions or comments on the material I can be contacted through
lhemenway@santarosa.edu
(707) 527-4855
Web site design by Jessica Hirsch - jessicahirsch@email.msn.com
Funding for these notes provided by Project FIVE and Project
PICTS supervised by Doug Garrison - Dean of the Petaluma Center.
This course is a core requirement for several Web Development Certificates.
Learn more at the Web Certification
site.
The CIS Department offers courses in the following areas: computer basics,
applications, graphics, web development, productivity, networking and programming.
Visit the CIS Web site.
|
