 |
Procedure
|
|
prepping for the exercise
- move downloaded files to appropriate folders
- open "text.doc" in word, save as HTML "temp.html"
(in upload)
- prep photoshop: apple menu > backup preferences > photoshop;
replace image ready's preference file
slicing the mock-up in image ready
- open "inside.psd" in image ready; examine layers
- draw guides for slicing, hide appropriate layers
- slices > create slices from guides, modify
- name slices (i.e. "link1", "p1-tn", "title-portfolio",
etc)
- slice select tool: select > all slices (cmd A); optimize
(view 100%)
- file > save optimized as "inside.html" (images
only, all slices)
- reveal "link over" layer
- file > save optimized as (images only, selected slices);
save in "temp" folder
- reveal "philosophy" layer, rename slice
- file > save optimized as (images only, selected slices)
- repeat with other titles
- in finder, rename files and move to appropriate folders
making the main page in dreamweaver
- prep dreamweaver: apple menu > backup preferences; replace
dreamweaver's preference file
- launch dreamweaver
- site > define sites: new site "jane's e2-piper"
- local root folder: documents > gds114-jane > upload-jane
> e2-piper
- ctrl-click "e2-piper" folder: new file "main.html";
open new file
- view > head content
- make window size 760 x 420 (800 x 600 maximized)
- window > others > frames
- insert > frames > bottom
- in top frame: file > save frame as "portfolio.html"
- in bottom frame: file > save frame as "bottom.html"
- file > save frameset as "main.html" (replace)
- in top frame: insert table (1 row, 2 col, 100%, cell padding=5);
make height=100%
- cell properties: vertical=top (2x)
- in col 1: insert image "title-portfolio.gif"
- in col 2: insert nested table (2 rows, 4 cols, 100%, cell padding=5);
make height=100%
- insert appropriate images in nested table
- cell padding=0 (2x); modify > page properties (margins=0)
- in bottom frame: insert table (1 row, 5 cols, 100%, cellpadding=5)
- insert appropriate images in table
- cell padding=0; modify > page properties (margins=0)
- measure height of bottom image
- in frames panel: click outer border to edit frameset properties
(top row=1 relative; bottom row=130 pixels)
- in frames panel: click top frame to edit main frame properties
(scroll=auto)
- file > save all
- file > preview in browser (F12 and Cmd+F12)
finishing the HTML file
- in frames panel: click outer border to edit frameset properties,
change title to "Gary Piper [graphic designer]"
- insert > head > keywords
- insert > head > description
- add alt tags
- commands > add/remove netscape resize fix
- commands > clean up HTML
- repeat with top frame and bottom frame
creating rollover behaviors & pop-up windows
- in bottom frame: add name to "link1.gif", add hotspot,
add link (target "mainFrame"), repeat with others
- add behavior "swap image" (preload=yes, restore=yes)
- add behavior "go to URL" (i.e. "philosophy2.html");
change mouse action to "onMouseOver" (this creates the
rollover title)
- in top frame : add behavior "openBrowserWindow" (URL=p1.html";
width=640, height=480); change mouse action to "onClick",
repeat
- file > save all
creating the resume page
- window > site (F8)
- open "temp.html"; commands > clean up word HTML
- select all text, font=default, size=none
- dupe "portfolio.html" (Cmd+C, Cmd+V), rename "resume.html",
open
- delete portfolio table
- insert > table (2 rows, 3 cols, width=100%, cell padding=5)
- in row 1/col 1: insert spacer (50w x 50h)
- in row 1/col 3: insert spacer (150w x 50h)
- in row2/col2: paste text from temp file, vertical=top, cell
padding=0
- create new CSS style sheet "style.css" (linked): redefine
<p> as arial, size=12px, line space=18px
- new custom style "indent30": box margin=30px left
- new custom style "indent60": box margin=60px left
- apply styles
- link PDF file
- save, close
creating the other pages
- window > site (F8)
- dupe "resume.html" (Cmd+C, Cmd+V), rename "philosophy.html",
open
- replace resume text with philosophy text
- repeat with contact info
- make title rollover pages: dupe "contact.html", rename
"contact2.html", delete nested table; repeat with other
files
creating portfolio pages
- window > site (F8)
- dupe "contact.html" (Cmd+C, Cmd+V), rename "p1.html",
open
- delete existing table
- insert> table (2 rows, 4 cols, width=100%, cell padding=0)
- make col 1 width=100%
- make bottom row bg color=black
- in row 1/col 1: insert image "p1.gif" (horiz=center)
- in row 1/col 2: insert image "portline.gif"
- in row 1/col 3: paste text from temp file
- in row 2/col 1: insert image "arrow-left.gif"
- in row 2/col 3: insert image "closewindow.gif"
- in row 2/col 4: insert image "arrow-right.gif"
- select table, cell padding=0; style text
- assign links to arrow GIFs
- link for close window: Javascript:onClick=self.close()
- save, close
- dupe "p1.html" 9x, rename
- in each file: replace picture, text, change links
adding tool tips
- open "main.html"
- select first hot spot, view code
- ctrl-click on tag <area shape>, choose edit tag area
- edit style sheet/accessibility: title="Philosophy"
- repeat with other hot spots
- bug: change target back to "mainFrame"
linking up the flash intro
- dupe "contact.html", rename "index.html",
open
- replace "title-contact.gif" with "logo.gif"
- replace text
- insert "get_flashplayer.gif"
- insert > media > flash "sniffer-intro.swf"
- link "here" to "intro.html" (in case the
sniffer fails)
- link "HTML site" to "main.html"
- save, close
- dupe "index.html", rename "intro.html",
open
- delete all, insert > table (1 row, 1 col, width=100%)
- make table height=100%, horiz=center
- insert > media > flash "intro.swf"
- save, preview
publishing in dreamweaver
- site > new sites: "jane's projects"
- local root folder: documents > gds214-jane > upload-jane
- host: virtual.parkland.edu
- directory: jsmith
- login: gds214students
- password: ••••••••••
- open your projects page ("index.html")
- make link to "e2/index.html"
- site > synchronize (entire site)
- disconnect
- browse to your "live" projects page with a browser
- test on a PC
|
