 |
Procedure
|
|
prepping for the exercise
- move download files to "documents"
- change "jsmith" to your name
- open "projects.doc" in Word; file > save as HTML
"temp-projects.html" (in "upload")
- open "mouse-scan.psd" and "architecture-scan.psd"
in photoshop; optimize each image; save in new folder "source"
inside "upload"
- inspect other download files (your documents folder should now
look like this)
- prep dreamweaver: apple menu > backup preferences; replace
dreamweaver's preference file
- launch dreamweaver
- site > define sites: new site "jane's projects"
- local root folder: documents > gds214-jsmith > upload-jane
(ok to create site cache)
- window > site files: refresh
setting up your projects page
- ctrl-click local root folder: new file "index.html";
open new file
- make window size 760 x 420 (800 x 600 maximized)
- view > head content
- modify > page properties: choose tracing image "tracing.gif"
(25% opacity)
- insert > named anchor "top"
- view > invisible elements (cmd + shift + I)
creating the table structure
- insert > table (row=1, col=2, width=100%, cell padding=5,
others=0)
- cell properties: vertical=top (2x)
- select column 1 (<td>), make column width=100%
- in first column, insert > media > flash "webdesign.swf";
deselect (arrow right)
- insert > table (row=1, col=4, width=600 px, others=0)
- insert > image "spacer.gif", make 20x20 (this must
be done before deselecting)
- copy and paste spacer into other columns
- drag columns until they match tracing image
- delete spacers from column 2 and 4
- open "temp-projects.html", select all, make font "default"
- copy and paste text into "index.html" after table
- cut and paste appropriate text into 1st table
laying out the page
- duplicate 1st table: select table (cmd A), copy (cmd C), arrow
right, paste (cmd V)
- cut and paste appropriate text into 2nd table
- continue until all text is inserted into tables
- in column 2, insert > table (row=2, col=2, cell padding =
5, others=0)
- in row 1/col 2, insert "spacer.gif" make 100x35 (this
must be done before deselecting)
- in row 2/col 1, insert "line.gif"
- in row 2/col 2, paste text for links
- change cell padding = 0
- change "jane smith" to your name
adding links
- browse to the sample
page; copy and paste links into appropriate text (ctrl-click
> copy link to clipboard)
- browse to http://www.krannertcenter.com/;
copy and paste URL as link to "site 1" (target=_blank)
- select "back to top", add link "#top"
- add email link to your name (ie. "mailto:jsmith@hotmail.com")
- file > preview in browser (F12 and Cmd+F12), test links
adding css styles
- text > css style > edit style sheets
- choose NEW: redefine HTML tag "p"
- define font as Georgia, size = 12px, line height = 18px
- duplicate "p", redefine HTML tag "li", "ol",
"ul"
- add new custom style ".small": size = 9px, line height
= 11px
- choose NEW: redefine HTML tag "a", color = #9933CC,
no decoration
- choose NEW: CSS selector "a:hover", decoration = underline
- apply "small" style (select <p> first)
- file > preview in browser (F12 and Cmd+F12)
finishing the HTML file
- change title to something like "Jane Smith's Projects Page"
- insert > head > keywords
- insert > head > description
- add alt tags
- modify > page properties: make margins=0
- commands > add/remove netscape resize fix
- commands > clean up HTML
creating a pop-up window
- window > site files: new file "mouse.html" (ctrl-click
"source" folder); move file into "source"
folder; open new file
- change title to something like "Jane Smith's Sourcefiles"
- insert > table (row=1, col=1, width=100%, cell padding=0)
- select table (cmd A), make height=100%
- cell properties: horiz=center
- insert > image "mouse.jpg" (note size)
- close, save
- window > index.html
- select "photography", add link "#" (note:
you must select from left to right)
- window > behaviors: open browser window (URL="source/mouse.html",
width=700, height=500)
- file > preview in browser (F12 and Cmd+F12), test links
- repeat with "architecure.gif"
connecting to the
server for the first time
- site > define sites, edit web server info: FTP
- host: virtual.parkland.edu
- directory: (blank)
- login: gds214students
- password: ••••••••••
- connect to remote
server (note remote files appear on left)
- create a new folder on remote server "jsmith" (ctrl click
on root folder)
- disconnect
connecting to your personal directory on the server
- site > define sites, edit web server info
- host: virtual.parkland.edu (same)
- directory: jsmith (note change)
- login: gds214students (same)
- password: ••••••••••
(same)
- refresh
- site > synchronize
- disconnect
- browse to your "live" projects page with a browser
|
