Summer 2004 Web Design Class
Day 1, Code View and Dreamweaver, Notes
The first week, I'll give an introduction to HTML coding. We'll see how code works and make a sample web page using code only. The purpose of this is twofold: you'll learn code so you can diagnose any problems that might arise and you'll learn to use code view in Dreamweaver. Code view is essentially the same on any simple text editor, so what you learn today will be easily applicable to ASWE.
Today we'll learn how to open DW; title a file; save the file to I drive; add text, spacing, color, emphasis and other text markup; add links; and add images. This may seem like a lot, but it's all very simple and Dreamweaver just makes it simpler. If you come to class on Day 1, Day 2 will be covering all of the same things, but it will cover them within the Dreamweaver interface instead of through code.
Points Covered
- Basic HTML Skeleton
- Types of tags: opening and closing, formatting, content
- Formatting tags: paragraph, line break, horizontal rule, font, headers
- Content tags: images, quicktime, etc
- Link tags: mail links and page links: relative and absolute URLs (how to read an image tag to make sure it's right)
- Attributes: body tag changes
- Code corrections with Dreamweaver
- Saving a file, publishing the file.
Today we'll open Fireworks and start a new document. We'll cover the basic tools and learn how to draw simple shapes using the shape tools. We'll add text using the text tool, make hotspots and export image maps, and we'll learn to make rollovers and export them. Fireworks is a great program for manipulating images and rollovers, which are super cool, but are difficult to make without a program like Fireworks.
We will definitely cover:
- Starting a new document
- Introduction to the basic tools
- Drawing simple shapes with the shape tools
- Adding text
- Making hotspots
- Exporting Image Maps
- Making rollovers and exporting them
- Changing canvas size and color
If we have time, we'll also cover some basic tricks like:
- attaching text to a path using the pen tool and text-->attach to path.
- Creating a linear gradient fill (done by using fill and choosing linear and then the color options for each portion of the shape)
- Creating a rectangle with rounded corners (done by selecting the rounded corner rectangle object and then choosing a corner radius from 0-100%).
- Make a drop shadow by selecting and object, going to effects, then selecting shadow and glow --> drop shadow. Move the distance slider to change the width and placement of the shadow.
Day 3, Composite Fireworks and Dreamweaver, Notes
Today we'll review how to make rollovers with Dreamweaver. We'll make a menu. We'll also cover how to exporting slices and other bits to our web folders and then we'll practice using Dreamweaver to integrate those bits into our pages.