Objective

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

Discussion

Illustrator can also be used by web designers as a layout tool to create "mock-ups" of web pages for client approval. Once approved, Illustrator has the same tools as Photoshop to help you optimize the pixel elements for web development.

Once the pixel elements have been exported, we can then use Dreamweaver to help 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 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. Slice the layout and optimize the pixel elements. Import pixel elements into Dreamweaver. Add text and style with CSS. Publish to server. Note: replace bold with personalized info.

Making the Illustrator mock-up

1. download starter files (move files to proper location)
2. download blank vector browser chrome
3. open "web-mockup.pdf" in Illustrator
4. window > artboards: delete pages 2, 3
5. window > layers: delete "note"
6. save as "process.ai"
7. new layer "bars"; restack layers
8. rectangle tool: draw rectangles, fill with color
9. new layer "type"
10. type tool: "Jane Smith Graphic Design II & III", add color
11. personalize your process page by designing a unique treatment for your name

Slicing in Illustrator

1. new layer "guides"
2. view > ruler (cmd+R): draw guides for slicing
3. new layer "slices"
4. slice tool: slice select art
5. hide "non-printing" layers
6. file > export > save for web (preset=JPEG high or GIF no dither; user slices; images only, location="html")
7. inspect files in finder; rename

Setting up the content in Deamweaver

1. launch Dreamweaver
2. site > new site "gds122"
   (define local root folder: location=faa999/gds122/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 "process.txt" into <div#content>
8. format text: add <ul>
9. change "jane smith" to your name (all occurrences)
10. delete asterisk ( * )
11. replace automatic date stamp: insert > html > date

Adding links

1. browse to the sample process page: copy/ paste breadcrumb links links into your document
2. link to sample images (use target=_blank)
3. select "back to top", add link "#"
4. link your preferred email address (i.e. mailto:jsmith@gmail.com)

Adding CSS

1. window > CSS designer: add selectors (source=define in page): 
   • #content: layout: width=70%, position=absolute, top=??, left=?? 
   • #content: text: font-family=Verdana, font-size=12px, line-height=20px 
   • body: layout: margins=0 (all); bg: URL="images/tile.gif" (repeat-x)
   • a: text: color=??, decoration=none
   • a:hover: text: decoration=underline
   • .small: text: font-size=10px, line-height=14px
2. select <p>: apply style ".small"
3. note CSS code formatting in header
4. file > preview in browser (opt+F12 and cmd+F12)

Finishing the HTML file

1. change title to something like "Jane Smith | GDS 122"
2. add alt tags
3. commands > clean up HTML

Grading

1. publish page (see separate lesson)
2. link your published projects and assignments to this page