Creating a Page in Fireworks
Creating a page in Fireworks is easier if you have a creative side. You can control exactly how the page will look from the start including detailed graphics and backgrounds. You can design rollovers and intricate buttons, and all of it is easily expoorted into Dreamweaver as a template.
Designing a site in a graphics programs gives you a great deal of creative liberty. You can break out from the old mold of vertical and horizontal alignment and into much more organic forms. It is also the preferred media for artists who want to show their work. All quality graphics programs allow you to create not only pages but navigation bars, rollover buttons, and other special effects that Dreamweaver cannot. For simplicity sake we will use Firefox in this class, but any graphics program will have export-to-HTML functions. Once you export the page you can easily edit it in
Limitations
It is important to point out limitations of designing this way. Because graphics create pages that are more visually complicated with pieces that fit into one another, text frequently becomes the secondary portion of the page. When a portion of text that is larger than the inital space is inserted the graphic layout 'explodes' leaving large gaps between pieces. Careful slicing and layout will help minimize these problems.
Creating the page
First you will need to make some decisions about your site.
- What color scheme are you going to use. Remember, that text and background should be opposite. So, light text requires a dark back ground and vice-versa.
- What layout will you have? Will the banner be at the top and you links down the side (Hockey stick)? Will the logo and links both be across the top (banner style)? Or will you go for the really creative stuff and try for an amorphous design?
- Will your links be text or graphics? Text allows you to change them easily and have a large number of links, but graphics ensure you have exactly the same look on every computer and can have cool roll-over effects.
The site above uses red and gold as the two main colors with black as an accent. The layout is hockey stick and the links will be rollovers.
Step 1 - DesigningOpen Fireworks and create a new page the size you want to fit the screen (900x600 is a nice easy size) Choose the main background color and then start placing you main elements. This site has some fun tutorials to help you get started with creating your logo and backgrounds. As you design remember to keep the background very simple to allow the text to show easily. |
Step 2 - Creating Link Buttons If your site will use regular text links you can skip this step and start slicing. If you want rollover links that change as you move your cursor over them. We will create one button and then copy it. First, create any background needed for your link. Second, type your link text.Then, using the shift key, click on all the elements to highlight them. Last, hit the F8 key, name it button, and choose the button option below. Hit OK. The button will be created and a green slice. |
Step 3 - Creating Roll-overs Double click the button. A window will open (seen here) with five tabs. Each tab represents a different state. Up is what the button looks like untouched; over is when the cursor moves over the button, down is clicked; and over-while-down is the visited state. Use the copy button in the lower right to copy the button onto each tab. Then, you can change any property on any tab. Try changing the backgrounds, text colors, and/or adding shadows. Choose done when you are finished. |
Step 4 - Copying the Button First, use the alt key and click and hold the button you made. Then drag it to the postion of the second button. A new button will drag out and drop wherever you release the mouse. If you click on a mouse you can change the text and the page it links to in the inspector at the bottom. The link is the saved name of the page including the .html on the end. Drag out as many links as you need for all your pages. Remember the file names you chose for your links you will need them to make the pages later. |
Step 5 - Slicing. Slicing is a way of dividing your image into the pieces that your browser can use. You want to make it so that your page can dynamically change. slicing allows you to create smaller images that can be used to fill in the page as the content grows. This is a quick example of slicing. We will cover slicing in class in great detail. There is no need to reslice the buttons since the program made them for you. |
Step 6 - Exporting. Create a file that will hold your site if you have not already done so. In Fireworks go to File>Export. Title the page as index.html. Choose Export - HTML and images, HTML - Export HTML File, and Slices - Export slices. Thenk click save.
Open Dreamweaver and then open your new index.html file. Make sure everything exported ok. Then, under File>save save it as your second page. (Remember in step 4 I told you to remember the file names you chose? This is where you need them. Save it again as the third page, fourth page, etc. using the link file names you chose in step 4. Your site is ready for content. |
On
to next lesson 