 |
Procedure
|
|
prepping for the exercise
- examine finished
site
- examine text
site
- move downloaded files to "prep-jane" or "upload-jane"
folder
- examine site map
- examine excel spreadsheet
- open "inside.ai" in illustrator; export as PSD file
- open other illustrator files, inspect layers
- prep photoshop: apple menu > backup preferences; replace
image ready's preference file
slicing in image ready
- open "inside.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
- fill box layer with white (cmd + shift + DELETE)
- crop
- create rollover art: dupe "navigation" and "home"
layers, make art blue (eyedropper blue; opt + shift + DELETE)
- draw guides for slicing
- create slices (slice tool)
- name important slices
- hide "title", "image" and "side"
layers
- optimize (slice tool; select > all slices)
- file > save optimized as "inside.html" (in "upload"
folder)
- reveal rollover layers, select only slices needed
- file > save optimized as "inside.html" (in "temp"
folder) (images only; selected slices only)
- in finder, rename slices in "temp" folder, move into
"images"
creating the template in dreamweaver
- prep dreamweaver: apple menu > backup preferences; replace
dreamweaver's preference file
- launch dreamweaver
- site > new site: "jane's mirabelle"; local: documents
> gds214 > jsmith_upload > upload_mirabelle; ok to create
site cache
- window > site files: refresh
- open "inside.html"; make window size 760 x 420 (800
x 600 maximized)
- view > invisible elements (cmd + shift + I)
- select blank GIF, delete; vertical=top
- insert > table (1 row x 1 col, cell padding=5)
- in row 1: insert "spacer.gif" (100x7)
- in row 2: insert > image "cake-bavarian.gif" (title
folder)
- insert > table (1 row x 3 col, cell padding=5)
- select row <tr>: make vertical=top
- in col 1: insert > image "spacer.gif" (16x16)
- in col 2: copy and paste text from "cake-bavarian.html"
- in col 3: insert > image "cake-bavarian.jpg" (pix
folder)
- replace text "ORDER" with "order.gif"
- in sublinks area: select name of blank yellow GIF file, copy
name to clipboard, delete GIF file, paste name into cell background
image
- repeat with other cells
- logo cell: vertical=top
- home cell: vertical=bottom
- copy and paste sublinks text from "cake-bavarian.html"
(horiz=center)
- select logo: link to "main.html"
- assign other links (see site map)
- select "link1.gif": add behavior "swap image",
swap "link1-over.gif"
- repeat with other links
- at top of file: insert > table (1 row x 1 col, width=100%),
make height=100%, horiz=centered
- select original table, cut, paste into new table
making CSS styles
- window > CSS styles: edit styles: attach style sheet "style.css",
create
- new CSS style (in style.css): redefine HTML <p>: georgia,
12/18 px, color=#003366
- new CSS style (in style.css): redefine HTML <a>: color=#003366,
decoration=none
- new CSS style (in style.css): CSS selector <a:hover>:
color=#990000
- new CSS style (in style.css): custom ".sublinks":
arial black, 10/18 px, color=#990000
- new CSS style (in style.css): custom ".sublinks2":
arial black, 10/10 px, color=#990000
- new CSS style (in style.css): custom ".small": size=10/14
px
- apply styles
finishing the HTML file
- change title to "Mirabelle Fine Pastries | Urbana IL USA"
- 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
- test page on a PC
creating the product pages
- dupe "inside.html", rename "cake-bavarian.html"
- remove link from "link1.gif", swap image "link1-over.gif"
(double-click)
- save, close, dupe and rename "cake-flourless.html",
open
- swap title GIF file and product JPG; replace text
- repeat with all product pages
creating the category pages
- dupe "inside.html", rename "cake.html"
- delete tables in text area
- insert > table (2 row x 1 col, cell padding=5), horiz=centered
- in row 1: insert > image "cakes.gif" (title folder)
- in row 2: insert > image "cakes.jpg" (pix folder)
- select table: cell padding=0
- save, close, dupe and rename "pastries.html", open
- swap title GIF file and product JPG
- replace text in sublinks area
- repeat with all category pages
- repeat with "contact" and "about" pages
- open "cake.html": remove link from "link1.gif",
swap image "link1-over.gif" (double-click)
- repeat with other category pages
creating the checkout pages
- dupe "inside.html", rename "checkout1.html"
- delete link for "link7.gif", swap with "link7-over.gif"
- delete tables in text area
- insert > table (1 row x 1 col, W=100%, cell padding=15)
- make H=100%
- horiz=centered, vert=middle
- copy and paste text, apply styles
- insert > form (before table); cut and paste table inside
form area
- insert > form object > check box, repeat
- select table, border=1, color="003366", w=450 px
- select text in table: vert=top
- save, close, dupe and rename "checkout2.html", open
- replace text with new text, apply style, repeat with other "checkout"
files
creating the sign-in pages
- dupe "checkout4.html", rename "sign-in1.html"
- delete link for "link8.gif", swap with "link8-over.gif"
- replace "link7.gif" from "inside.html"
- copy and paste text, apply styles
- insert > form; cut and paste table inside form area
- insert > form object > text fields, repeat
- insert > form object > check box
- insert > form object > button "Sign-In"
- make pop-up window for "forgot.html" (600x300)
- new CSS style "button": font=verdana, size=12px, background=yellow
- save, close, dupe and rename "sign-in2.html", open
- replace text with new text, apply style
- insert table (10 rows x 2 cols, cell padding=3)
- copy and paste text into table; col 1: align=right
- repeat with other "sign-in" files
creating the home page
- dupe "inside.html", rename "main.html"
- delete tables in text area
- insert > table (1 row x 1 col, width=100%, cell padding=20),
height=100%, horiz=centered
- copy and paste text
- new custom CSS style ".intro": block: text align=justify
- new custom CSS style ".head": weight=bold, block:
letterspacing=.25 ems, color=#990000
- new custom CSS style ".bullet": 18/18 px, color=#990000
- apply styles
- make initial cap red
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 "e4/index.html"
- site > synchronize (entire site)
- disconnect
- browse to your "live" projects page with a browser
- test on a PC
|
