Programmed all last night and this is what I came up with.
View below or download the PDF. This will help you with the final web assignment.
Typical Website Dimensions
- 1200w x 820h
- 1024w x 768h
- 800w x 600h
Design Stages
- Keep everything in ONE folder!
- Design everything in Photoshop – including navigation bars
- Save as a PSD file (the native file format)
- Open in Fireworks and create rollovers using the designs you made in Photoshop
- Once you have created rollovers and linked all of the pages, export the file by going to File > Export.
- Make sure that HTML and Images is selected. Check to make sure that you are working in that ONE folder. Click Export.
- Open the .HTM pages you have exported from Fireworks into Dreamweaver.
- Add a page title and centre your page (if you want them to be centered)
- Save your file.
- Repeat for each web page.
Creating Rollovers and Links in Fireworks
- Open your PSD file that you designed into Fireworks
- Using the slice tool (under the web section of the toolbar), slice all links and aspects of your webpage – everything should be covered in green
- Now go to States. Right click on State 1 and click on Duplicate State
- State 1 is how the webpage will normally look, where State 2 is what will happen to the webpage when the mouse is rolled-over
- Click on State 1 in the States panel
- Click on the Layers panel and open the Layer folder
- Now, turn on the layer which represents the link of the page you are on. Example: Turn on the Home layer if you are working on the Home page, or turn on the About layer if you are on the About page. This lets users know what page they are on.
- Click on States, and click on State 2
- Go back to Layers and open the Layer folder
- Now turn on the remaining Layers for your links.
- Now right click each link and select Add Simple Rollover Behaviour
- In order to link the pages, you must click on each link and add the file name of each page (.htm) in the Link Box at the bottom of the screen. Ex: Click on the Home link, and type home.htm in the link box
- Once you have finished all of the previous instructions, click on the grey area around your page
- Then go to File > Export
- Make sure that HTML and Images is selected. Check to make sure you are working in that ONE folder. Click Export
- Repeat for each page
- Alternatively, you could make your links in Dreamweaver using the Hotspot tool. They will not be rollovers, though.
A bunch of new photos have been added under Digital.
