 |
Procedure
|
|
prepping for the exercise
- examine finished
site
- move downloaded files to "prep-jane" or "upload-jane"
folder
- examine site map
- open "main.psd" in image ready
- practice photoshop navigation keyboard shortcuts: space = hand;
space + cmd = zoom in; space + cmd + opt = zoom out; cmd + zero
= fit in window
- examine layers
- draw guides for slicing
- slices > create slices from guides
- name important slices
- optimize (slice tool; select > all slices)
- file > save optimized as "main.html" (in "upload"
folder)
- reveal rollover layers, select only slices needed
- file > save optimized as (in "temp" folder) (images
only; selected slices only)
- in finder, rename slices in "temp" folder, move into
"images"
- open "menu.psd" in image ready
- file > save optimized as (images only)
- open "index.psd" in image ready
- file > save optimized as (images only; selected slices only)
creating the main page in dreamweaver
- prep dreamweaver: apple menu > backup preferences; replace
dreamweaver's preference file
- launch dreamweaver
- site > new site: "jane's bacaro"; local: documents
> gds214 > jsmith_upload > upload_bacaro; ok to create
site cache
- window > site files: refresh
- open "main.html"; make window size 760 x 420 (800
x 600 maximized)
- view > invisible elements (cmd + shift + I)
- delete unneeded GIF files
- make email link, add swap image behavior
- name link images for javascript coding
- file > preview in browser F12 and cmd + F12
finishing the HTML file
- change title to "bacaro"
- insert > head > keywords
- insert > head > description
- add alt tags
- modify > page properties: make margins=0; bg image="bg.gif"
- commands > add/remove netscape resize fix
- commands > clean up HTML
- save, close
creating the index page
- duplicate "main.html", rename "index.html"
- open "index.html", select table, delete
- insert > table (1 row x 1 col, w=100%), horiz=centered
- select table, h=100%
- insert > image "bacaro.gif"
- add behavior "open browser window" ("main.html"
w=720, h=390), change behavior to onClick
- repeat with <body> tag, change behavior to onLoad
- modify > page properties, change bg image to "dk_green.gif"
creating the popup pages
- duplicate "main.html", rename "cena.html"
- open "cena.html", select table, delete
- insert > table (6 row x 3 col, cell padding=5, w=255 px)
- select table, h=420 px
- all cols: vertical=top
- row 2, col 2: insert > image "panini.jpg"
- row 4, col 2: copy and paste text from sample
web site
- window > CSS styles: attach style sheet "menu.css"
- new CSS style "menu": verdana, 10px
- new CSS style "head": verdana, 15px; block: letter
spacing=.3 ems
- new CSS style: redefine <a>: type color=orange, no decoration
- new CSS style: CSS selector "a:hover": make type dark
green
- apply styles
- row 5, col 2: add text "close window << | >>";
add 18 non-breaking spaces (cmd + shift + SPACE); vertical=default
- add link: Javascript:onClick=self.close()
- link arrows according to site map
- row 5: bg=white
- row 1, col 1: insert "spacer.gif" (20x20)
- row 4, col 1: copy and paste spacer, make h=194
- copy and paste spacers as needed in other cells
- select table, cell padding=0, w=100%
- change title to "C E N A"
creating the drop-down menus
- open "main.html"
- draw new layer "menu1", insert > image "menu1.gif",
position
- repeat with "menu2"
- draw new layer "imagemap", insert > image "spacer.gif"
(w=300, h=250)
- view > visual aids > invisible elements, fine tune alignment;
restack layers
- draw image maps for all clickable areas
- select image map for "antipasti"
- add behavior "open browser window" ("popups/antipasti.html",
w=255, h=420, scrollbars as needed=yes), change behavior to onClick
- add behavior "show-hide layers" (layer "menu1"=show),
change behavior to onMouseOver
- add behavior "show-hide layers" (layer "menu1"=hide),
change behavior to onMouseOut
- add behavior "swap image" (link1="images.link1-over.gif",
preload=yes, restore=yes), change behavior to onMouseOver
- repeat with others
- show only "imagemap" layer (hide other layers)
- add email link "mailto:bacaro@msn.com"; add "swap
image" behavior
- file > preview in browser F12 and cmd + F12
add javascript code to move window
- browse to http://virtual.parkland.edu/gds/studio/code.html
- read instructions; paste code into "main.html"
- modify code: window.moveTo(screen.width/2-360,screen.height/2-195)
- delete resize code
- select the <body> tag; add a new behavior "call javascript":
resize(), change behavior to onLoad
- file > preview in browser F12 and cmd + F12
- save, close
- open "cena.html"
- repeat except modify code: window.moveTo((screen.width-255)/2-100,(screen.height-420)/2+25)
- open "index.html"
- repeat except modify code: window.moveTo(0,0); window.resizeTo(screen.width,screen.height)
- file > preview in browser F12 and cmd + F12
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 "e5/index.html" (target="_blank")
- site > synchronize (entire site)
- disconnect
- browse to your "live" projects page with a browser
- test on a PC
|
