Fall 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, Applied Fireworks and Dreamweaver, Notes
Today we'll review what we've learned by applying it to a project, like getting your website started or putting up a class website with the syllabus, peer review notes, and links to other resources.
Day 4, Play or Setting up Your Site, Notes
Free play simply reserves lab space for you to come in and work on your website. The lab is rarely overly crowded, but this also reserves time for me to be able to focus on helping you with your website and questions instead of doing other work.
For setting up your site, we'll create a basic framework for your pages that is consistent so that your site seems cohesive and uncluttered. This will include a consistent color scheme and font. Then, we'll build your homepage, and we can build several other pages. Suggested pages include:
- A writing/research page about your writing/research
- A CV page linked from your research page
- A teaching page about your teaching
- A links page with links to sites that you are interested in, or find useful as resources
- a contact page with your departmental contact information