Procedure |
|
slicing and cropping
- download starter files, examine site map, Illustrator files
- reveal all layers, file > export as PSD files (72 DPI, layers=yes, anti-aliasing=yes)
- duplicate "resume.psd", rename "bullets.psd"
- open "bullets.psd" reveal square and triangle layers
- draw guides and slice per examples
- rename slices "square", "triangleLeft", "triangleRight"
(slice select tool: double-click on slice)
- hide background layer
- file > save for web: select user slices, GIF 16 no dither, matte=black; images only, all user slices
- open "resume.psd" draw guides, crop per example
- slice tool: create slices from guides (click button in options bar)
- hide background layer
- file > save for web: select all slices, GIF 16 no dither, matte=black; "resume.html", HTML & images, all slices
- repeat with "index.html"
- move exported files into new folder "portfolio_html"
coding the front page
- launch Dreamweaver
- site > define sites: new site "portfolio"
- local root folder: choose "portfolio_html" folder
- window > site files (F8): refresh
- open "index.html"
- select <table> tag: align=center
- window > css: add tag "body" (define in "portfolio.css")
- category=type: verdana, 11/18, light gray
- category=background: color=black
- category=box: margin=0 (all)
- select first red box, link to "01.html"
- window > behaviors: add behavior "swap image" (+)
- set source to "portfolio_tn/01.jpg"
- file > preview in browser (opt+F12)
- repeat with other red boxes
finishing the HTML file
- view > head content
- add title "Jane Smith Graphic Designer"
- insert > html > head tags > description
- insert > head > key words
- window > snippets: meta > no cache (insert in code view)
- add alt tags
- commands > clean up HTML
coding the résumé page
- open Photoshop's exported "resume.html"
- select <table>, copy, close
- open "index.html", save as "resume.html" (over write old version)
- select <body> tag, delete
- insert > layout objects > AP div: L=0, T=80px, W=100%, H=(blank)
- paste table inside <div> (aka "layer")
- make table width=100% (select <table> tag)
- select each column: vertical=top (select GIF file, arrow left)
- select column 4: delete GIF file (text), horiz=center
- column 4: insert > table: 1x1, vertical=top, horiz=left, width=375px
- add text from "text.rtf"
- add "spacer.gif" at bottom, make width 375px
- add <h1> and <h2> tags
- window > CSS: select <#apDiv1>: position=relative (fixes Firefox printing problem)
- add new CSS tag <h1>: type size=15; box margin=-3 (top)
- add new CSS tag <h2>: type size=11; box padding=25 (top)
- add new CSS class ".quote": type=georgia italic, 22/26
- apply ".quote" class to quote
- link logo to "index.html"
- file > preview in browser (opt+F12)
coding the navigation
- make logo column horiz=right
- insert > table below logo: 2 col x 6 rows, cell padding=10 (temporary)
- col 1: horiz=right, col 2: horiz=left, all cells: vert=middle
- add navigation text from "copy.txt"
- add spacer in row 6, scale to align type
- link to appropriate HTML files (see site map)
- add new CSS tag <a>: type color=light gray, weight=bold, decoration=none
- add new CSS selector <a:hover>: type color=red, weight=bold, decoration=none
- add new CSS class ".rule": type weight=bold; box padding=7 (top),
8 (bottom); top border style=dash, width=1px, color=dark gray
- apply ".rule" class to <td> in navigation table
- select <table>: cell padding=0
- add square bullet
- file > preview in browser (opt+F12)
finishing the web site
- duplicate "resume.html" to create other pages
- modify pages as needed
- test thoroughly
- publish your finished site as a link from your personal projects page for grading
|
