Graphic Design Exercises
Illustrator & Dreamweaver: Personal Projects Page
Objective
|
|
To learn Illustrator layout techniques by example. To review basic XHTML and CSS skills by building a personal projects 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 production.
Once the pixel elements have been exported, we can then use Dreamweaver to write the XHTML and CSS code for web publishing.
The best way to learn XHTML 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.
|
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
- download starter files (location: class/jsmith/projects_html)
- launch Illustrator
- file > new: profile=web, size=1024x768; save as "projects.ai"
- file > document setup: size=1024x768
- file > place "blank_browser_ie7.png"
- rename "layer 1" as "browser"; lock layer
- new layer "bars"; restack layers
- rectangle tool: draw rectangles, fill with color
- type tool: "Jane Smith Projects", change color
- spec font, scale (cmd+shift+< or >), track (opt+left/right arrows)
- view > ruler (cmd+R): draw guides for slicing
- object > slice > create from guides
- select > deselect (cmd+shoft+A)
- slice select tool: select slice
- object > slice > slice options: name="logo", "tile"
- hide "browser" layer
- file > save for web (preset=JPEG high or GIF no dither; images only, selected slices; location="projects_html")
Setting up your content
- launch Dreamweaver
- site > new site (advanced) "jsmith projects"
(define local root folder: location=class/jsmith/projects_html)
- window > files: RMB local root folder > new file "index.html"; open file
- view > head content (cmd+shift+H)
- view > visual aids > show all (cmd+shift+I)
- view > code and design
- insert > named anchor "top" (cmd+opt+A)
- insert > image "logo.gif"; deselect (arrow right)
- insert > layout objects > AP Div; rename id="content"
- copy and paste text from "projects.txt" into <div> (aka "layer")
- format text: add <ul>, <h1>
- change "jane smith" to your name (all occurances)
- replace automatic date stamp: insert > date
- file > preview in browser (opt+F12 and cmd+F12)
Adding links
- browse to the sample projects page: copy and paste links into appropriate text (RMB > copy link location to clipboard)
- link to sample images (use target=_blank)
- add other external links (tip: browse to web site, copy and paste URL, use target=_blank)
- select "back to top", add link "#top"
- add email link to your name (i.e. "mailto:jsmith@stu.parkland.edu")
- file > preview in browser (opt+F12 and cmd+F12), test links
Adding CSS
- select layer: id="content"
- window > CSS: edit #content (double-click)
>
type: Verdana, 11/18px
> position: width=70%, height=(blank)
- window > CSS: add CSS style to this document only (+):
> tag=<body>: box: margins=0 (all); bg: "tile.gif" (repeat-x)
> tag=<h1>: type: Georgia, 24/30, weight=normal
> tag=<a>: type: decoration=none, color=? (point to color)
> selector="a:hover": decoration=underline
> class=".small": type: 9/14
- select <p>: apply style ".small"
- view > code: note formatting in header
- file > preview in browser (opt+F12 and cmd+F12)
Finishing the HTML file
- change title to something like "Jane Smith's Projects Page"
- insert > HTML > head tags > keywords
- insert > HTML > head tags > description
- window > snippets: meta > no cache (insert in code view)
- add alt tags
- commands > clean up XHTML
- file > check page...
Grading
- publish page (see separate lesson)
- link your published projects and assignments to this page
|
BACK TO TOP
Version 1.0 • Last updated:
8/28/09
• Webmaster: Paul
Young
