To convert a full page design from Fireworks or Photoshop into HTML, follow these general steps:
- Look at your image in terms of rows and columns as well as layers (background & foreground for page and for divs)
- isolate and export background layer (you may have to slice this to make it work for different page heights)
- slice and export the rest of the image (name slices!)
- title
- buttons
- other content
- text can be designated as html text or filled in later
- In Dreamweaver, create new page
using CSS layout for structure - 5. Insert your images and html text
Videos
NOTE: These are huge files - you'll need high bandwidth Internet access
- Overview (3 minutes)
- Example 1: Fireworks, 1 column layout with background
image
- structure (3 minutes)
- slicing & exporting images (8 minutes)
- Dreamweaver (9 minutes)
- Example 2: Photoshop: 2 column layout with header & footer & background image
- structure (2 minutes)
- exporting background (5.5 minutes)
- slicing exporting content (4 minutes)
- Dreamweaver (12 minutes)
Transcripts (note: students may contact me for captioned versions or wmv format)