GRAF 1031 – Week 6
Real Estate page - Gallery in new Browser Window
download files to your desktop
Step 1 > Create the rollovers
Open the sd_design.png in Fireworks.
duplicate the state
change the rectangles fill colour
Step 2 > Slice the design
below you'll see two examples of the slice stucture...complete it as follows:
apply the swap image behaviour to the nav button slices
save
Step 3 > Export the slices
Check that all the slices have been optimized (jpeg 80)
then start exporting.....start with the banner. select the slices in the banner (as shown below), and then File/Export:
then the "Featured Home" - images only
and subsequent bottom images - again, images only:
Step 4 > Build it in Dreamweaver
Define your site to your sandiego folder
create a new html page, save as index.html
attached the following style.css file:
- click the first button at the bottom right (looks like a link)
- browse for the style.css file
insert a table with 1 row 1 column, 802px wide, padding 10
change the cell bg colour to white
nest inside of that table another table with 5 rows, at 802px wide (no padding, borders or spacing)
Then insert in the first row, the FW html "banner"
in the second, the "Featured Home"
then in the third, insert a new nested table:
set the first and last column widths to 222px. leave the center width blank.
in the first row insert a table:
In the first row of the table type "Free Daily Email Updates" - format as heading 1 (in property inspector), and change the cell colour to match the dark blue in the nav
then change the bottom row bg to a light grey
copy this table, and then paste it into the third column. change the text
In the fourth row, again nest a table:
format titles as h2 and set the style of each image to "bot"
add the text into the footer
save
FINISH HERE FOR TODAY
WE'LL CONTINUE WITH THIS SITE AFTER THE BREAK
Step 5 > Disjointed Rollover
Create a new doc in FW, 680px x 610px
Import the images from the photo folder
resize/mask as we did last week
then duplicate the layer, rename it small
resize, align and distribute
should look something like this:
create the 4 additional frames:
"show" by turning the layer visibility on or off, the various large images, ensuring you can see a different image in each frame
now slice it up
and add the rollover behaviour:
and export as html:
Step 7 > Add the Open Browser Window Behaviour
Back in DW, select the "Featured Homes" image
then open the Behaviours Panel
Click the plus sign to add a behaviour, and choose "Open Browser Window":
then in the next dialog box choose the following:
save and test in the browser.
Step 8 > Finish the page
using my example as a guide, finish creating the design (in DW only) for homework