Dreamweaver Class Notes, Day 3…Building with Fireworks and Photoshop .psd

December 5, 2008 at 5:43 pm Leave a comment

If you design your web page in Photoshop first, fireworks is ideal to use to slice your design to ready it to go to the web.

First, open your .psd in Fireworks, and show the layers you are wanting to see on a particular web page.

Drag in your guides. (Zoom in “cmd +” zoom out “cmd -” on the mac) Zoom in to be sure that your guides are in the exact spots.

Make frames and rollover buttons
– Select frame one, and duplicate, (drag to the icon next to the trashcan)
– Frame 2 is the rollover frame, pick your color for the rollovers and change the words to that color
– In frame 2, select and delete everything that isn’t necessary for this rollover.

– have frame one visible
– go to the slice tool
– always remember to name your slices
– make sure your “web layer” toggle is pointing down, this is where your slices will appear as you make them. (really, it should be named “slice layers” …but this is just one more irritating thing about programmer language vs. designer language)

– first, start from the upper left and work across (germanic!)
– remember when you name these slices, no spaces, no caps
– start slicing and naming
– make sure everything is sliced

Making rollover buttons
– after you make slices
– click on the button that will be a rollover
– click on the white dot
– “add simple rollover behavior”
– if the a button has multiple pages that are in that category:
– either “add menu” or add “pop up”
– warning – do not use a drop down over a flash
– under advanced tab – timing for rollovers – 250ms seems to be a good amount of time

Export Wizard
– Go to export wizard and save as a java script
– since this is a whole slice and diced web page, export as jpg (due to the photos), but it could have been rebuilt in parts and saved in either gif or jpgs (gifs are faster and better for solid colors)
– rename this page as index.html and select html and images,
– click on “options button”
– html style : dreamweaver xhtml
– extension: html
– click on lowercase
– click on use css…
– click on write css…
– file creator > dreamweaver

Go to your production folder that is housing all of the images (DO THIS AT THE VERY END, THERE WILL BE A LOT OF JUNK)
– get rid of all of the f2 (stands for frame 2) EXCEPT the files that are rollovers for the buttons (in my case, there are 3 f2 files remaining for products, services and contact us)
– then double click on your index.html to view in the browser.
– if you see something to change, (ex. the color didn’t change on the rollover for products)
– go back to fireworks
– click on the white button to make your changes
– do the export wizard again
– go back in and delete all of the f2 files that are not rollover buttons (see above)
– i see that this can become irritating

Do this for the rest of your pages – toggle open your next layer/page (layers)
– turn off the web layer so you get to the graphics (gets rid of the green)
– to fix your home button so it becomes a rollover (white) this part might be confusing, but it depends on how you set it up – but click on the word and change the color to the “regular” color (white)
– click on frame 2 (frames) to check
– turn the web layers back on
– since on my example everything is basically the same, except the main image, only change the name of the main image to “contact”
– export wizard
– change name to contactus.html

changing page layouts
– turn on the new layer
– save as and change the name of the file
– add new guides and draw new slices, naming them
– export wizard, java script, change name, save

Go clean your folder and get ready to go to Dreamweaver


Entry filed under: dreamweaver class notes, photoshop.

Dreamweaver Class Notes, Day 3…Finishing in Dreamweaver Dreamweaver Class Notes, Day 3…Finishing in Dreamweaver

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

Trackback this post  |  Subscribe to the comments via RSS Feed

December 2008
« Nov   Jan »


flickr photos


blog stats

  • 16,584 hits

%d bloggers like this: