Objective

To learn Illustrator layout techniques by example. To review basic HTML and CSS skills by building a personal process page.

Discussion

Photoshop and Illustrator are often used by web designers as a layout tool to create "mock-ups" of web pages for client approval. Once approved, both programs can optimize the pixel elements and export them for web production. Illustrator is sometimes preferred over Photoshop for this process because it is a more versatile layout tool.

Once the pixel elements have been exported, we can then use Dreamweaver to write the HTML and CSS code for web publishing.

The best way to learn HTML and CSS is with Dreamweaver's code view. By observing how Dreamweaver writes code for you behind the scenes, one can easily learn coding by example.

Tip: Do not delete any links that you add to your Process Page. Instead, always add new links when making revisions.

Procedure

Overview: Create a web page layout in Illustrator. Export the pixel elements and import them into Dreamweaver. Add text and style with CSS. Publish to server. Note: replace bold with personalized info.

Making the Illustrator mock-up

1. examine Core Fonts Specimen Sheets
2. download starter files (move files to proper location)
3. launch Illustrator
4. file > new: profile=web (1024x768); save as "gds172.ai"
5. file > place "browser.png", rename layer "browser"
6. new layer "bg"
7. draw box, fill with color
8. new layer "type"
9. type tool: "Jane Smith", add color
10. spec font, scale (cmd+shift+< or >), track (opt+left/right arrows)
11. copy/paste type to repeat in a row; refine position
12. duplicate "type" layer, rename "type emphasized"
13. change color of selected letters for emphasis
14. type tool: "Typography II Process Page" (adjust specs, position)
15. new layer "bar"
16. draw box, fill with color
17. new layer "guides"
18. view > ruler (cmd+R): draw guides for slicing
19. slice tool: slice art for tiling
20. reveal appropriate layers (hide "browser" layer)
21. file > save for web "tile" (preset=GIF 32 no dither; images only, user slices; location="html")
22. show "type emphasized" layer
23. file > save for web "logo" (preset=GIF 32 no dither; images only, user slices; location="html")

Setting up the content in Deamweaver

1. launch Dreamweaver
2. site > new site "gds172"
   (define local root folder: location=faa999/gds172/html)
3. window > files: RMB local root folder > new file "index.html"; open file
4. view > code and design
5. insert > image "logo.gif"; deselect (arrow right)
6. insert > div: id="content"
7. copy and paste text from "gds172.txt" into <div#content>
8. format text: add <ul>
9. change "jane smith" to your name (2x)
10. link to sample images (use target=_blank)
11. select "back to top", add link "#"
12. insert > html > date: automatically update on save=yes
13. link your preferred email address (i.e. mailto:jsmith@gmail.com)
14. file > preview in browser (opt+F12 and cmd+F12), test links

Adding CSS

1. window > CSS designer: add source: attach existing CSS file "normalize.css" (+)
2. window > CSS designer: add source: define in page (+)
3. window > CSS designer: add selectors: 
   • #content: layout: width=50%, position=absolute, top=??, left=??
   • html: text: font-size=85%, line-height=150%
   • a: text: decoration=none, color=??
   • a:hover: decoration=underline
   • .small: text: font-size=85%
   • .body: bg: bg-image="tile.gif" (repeat-x); bg-color=???
4. note CSS code formatting in header
5. file > preview in browser (opt+F12 and cmd+F12)

Finishing the HTML file

1. browse to the sample process page: copy and paste links into appropriate text (RMB > copy link to clipboard)
2. select paragraphs: apply class=small
3. change title to something like "Jane Smith | GDS 172"
4. add alt tags

Grading

1. publish page (see separate lesson)
2. update this page with links to your projects and assignments