To learn Illustrator layout techniques by example. To review basic HTML and CSS skills by building a personal process page.
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.
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
- examine Core Fonts Specimen Sheets
- download starter files (move files to proper location)
- launch Illustrator
- file > new: profile=web (1024x768); save as "gds172.ai"
- file > place "browser.png", rename layer "browser"
- new layer "bg"
- draw box, fill with color
- new layer "type"
- type tool: "Jane Smith", add color
- spec font, scale (cmd+shift+< or >), track (opt+left/right arrows)
- copy/paste type to repeat in a row; refine position
- duplicate "type" layer, rename "type emphasized"
- change color of selected letters for emphasis
- type tool: "Typography II Process Page" (adjust specs, position)
- new layer "bar"
- draw box, fill with color
- new layer "guides"
- view > ruler (cmd+R): draw guides for slicing
- slice tool: slice art for tiling
- reveal appropriate layers (hide "browser" layer)
- file > save for web "tile" (preset=GIF 32 no dither; images only, user slices; location="html")
- show "type emphasized" layer
- file > save for web "logo" (preset=GIF 32 no dither; images only, user slices; location="html")
Setting up the content in Deamweaver
- launch Dreamweaver
- site > new site "gds172"
(define local root folder: location=faa999/gds172/html)
- window > files: RMB local root folder > new file "index.html"; open file
- view > code and design
- insert > image "logo.gif"; deselect (arrow right)
- insert > div: id="content"
- copy and paste text from "gds172.txt" into <div#content>
- format text: add <ul>
- change "jane smith" to your name (2x)
- link to sample images (use target=_blank)
- select "back to top", add link "#"
- insert > html > date: automatically update on save=yes
- link your preferred email address (i.e. mailto:firstname.lastname@example.org)
- file > preview in browser (opt+F12 and cmd+F12), test links
- window > CSS designer: add source: attach existing CSS file "normalize.css" (+)
- window > CSS designer: add source: define in page (+)
- 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=???
- note CSS code formatting in header
- file > preview in browser (opt+F12 and cmd+F12)
Finishing the HTML file
- browse to the sample process page: copy and paste links into appropriate text (RMB > copy link to clipboard)
- select paragraphs: apply class=small
- change title to something like "Jane Smith | GDS 172"
- add alt tags
- publish page (see separate lesson)
- update this page with links to your projects and assignments