Spring 2005 Web Design Class
Day 1, Code View and Dreamweaver, Notes
The first day, 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
During the optional time, we'll:
- Design the basic structure for your website
- Set up the page layout for your website
- Make your primary webpages (home, contact, research, teaching, adding in any syllabi, cv)
- After the optional time, you will have a functional and useful webpage.