Website design

1. Website design Feng Zhao College of Educatioin California State University, Northridge

2. Template Why template? Because using template can save hours and hours repetitive works which are also error prone. My site has multiple pages, each of which shares some common elements - Menu, bottom, border, anchor to top, email. With template I can manage these common elements much easier and update all pages efficiently and guarantee a consistant look and feel across my site. .

3. Design page layout and implement header part and bottom part in Fireworks. • 2. In Dreamweaver, new page. Create a table of three rows. Import header part in the first row, bottom part in the third row, leave the second row empty and make it editable. • 3. Save this file as Template name=cover. (File->save as template) • 4. Then create new pages using this template. (File->new -> from template ->choose cover) • 5. Whenever you need to update those ele • ments inside template, just open the template and make changes. After change, save. Dreamweaver will ask to update all pages in the site, select Yes.

4. Simple Rollover Simple rollover brings us some sort of freshness to web pages. Create simple rollover in Fireworks is easy. By saying easy, I mean if you already have two images with identical size, then it is easy to apply the simple rollover action on them. 1. In Fireworks, put first images on frame 1.

5. 2. Slice first images, make sure slice size and position match with images (mouse over image -> right click -> insert slice) 3. Put rollover images in frame 2. Match size and position 4. Click on slice -> action -> simple rollover.

6. Swap ImageLike simple rollover, swap image is a simple but effective method to make a web page interactive. Steps:1. Deside an area used for swap image on your page layout. In the following, the swap area is the bottom square. 2. Slice it.

7. 3. Put individual swap images into different frames (other than frame 1 & 2, because these frames arre used for simple rollover). In this example above, I use frame 3,4,5,6. 4. Select each of slice which used to trigger swap, add action -> swap image, use onMouseOver, specify which frame it should use to swap into. In this example, I have 4 slices, above bottom, to trigger swap.

8. Pop-up menu Pop-up menu a site really look good and nice. But there are several drawbacks and complexities. First since it invovles more embedded scripts in a html page, a site using pop-up menu is much heavier (in file size) than those not using it. Larger file size leads a page slower to download. Second, when we build pop-up menu, there are certain parameters which are sensitive to different browsers. Third, it is necessary to look into html code view in Dreamweave for this piece to ensure script and image locations are correct.Pop-up menu can be done in Both Fireworks and Dreamweaver. I use Fireworks make it, and then import it to Dreamweaver.

9. 1. Make a button for the first item, eg. About. A button has four states, I only use two of them, Up & Over. Change some color or size or font for the Over state, so a user could notice the rollover. 2. Convert button to symbol.3. Use this symbol to create other buttons : Chinese, Physics. They are all sliced.4. Select About, apply action -> pop-up menu. A pop-up-menu configuration window appears as follows:

10. Configure menu item text and associated URL in the content tab, item format in the appearance tab, menu position in the position tab, item length and width in the advanced tab. My two cents tip:In the advanced tab, Netscape is sensitive to the menu delay parameter value. If it is set to too small, Netscape will not show pop-up menu at all. 6. The result view in Fireworks after adding pop-up menu action.

11. Cascading style sheet (CSS) • CSS is another time-saving tool tp manage a web site. It provides consistant font style, link style across the site. For example, the links in my site has a default color of blue, but when mouse hover on the link, it change colors and have underline. • Create an external CSS file. Tip: I don't have to write CSS code myself, just grap it from a good site, save in local folder. Changes the color and font of your choice. 2. Highlight any text, right-click, choose CSS from the pop-up menu, then choose the style you want.

12. a:visited { color : #990000; } a { color: #000099; text-decoration: none;}a:hover { color : #0099FF; text-decoration: underline;}a:active { color : #FF0000; text-decoration: underline;}

13. 1-pixel border You may or may not notice table border is actually thicker than 1 pixel. To make exact 1-pixel border, one needs to apply special technics. Here is one: use two nested tables of same width, with the outer table's column background set to black, and the inner table's column background set to white and cellspace set to 1.

14. Animated GIF You can use Fireworks to make animated GIF image. Steps:1. In frame 1, put backgound and all still items. These settings will not change during any time.2. Duplicate this frame as frame 2. In frame 2, add incremental item.3. Duplicate frame 2 as frame 3. In frame 3, add more incremental items.4. Repeat step 3 as many times until all animations are done.5. Export animated gif. File->Export Preview -> select animated gif in Option-> format field, change size in file->scale.

15. Image map Use Fireworks to produce image map. Steps:1. First prepare a base image, on which image map can be built. I use a real map in the example.2. Select Hotspot tool, draw over suitable place on the map.3. Apply action on this hotspot: Action -> swap image -> choose swaping area and destination frame. In the following image map, the selected hotspot is in blue with a curve linked to the destination area. On the right side, upper window shows hotspot, lower window shows swap image action applied.