This content has been marked as final. Show 3 replies
The HTML that Fireworks produces isn't designed to be production code. You're attempting to do something you should be doing in Dreamweaver.
Fireworks is a graphics application.
Yes it seems so JoeyD, Well What i did was to create all the text in fireworks, so i'm not suppose to do that, I want to export the images so that when i insert the code in those images the page dont break and get all messy, someone from another forum mentioned something about putting the sliced images into table, but its really confusing, can you post a detailed message on how to insert images into table or give me some related links so i can add text to those images.
I designed the full page using fireworks.
<a href=" http://i272.photobucket.com/albums/jj180/krash_master/index.gif">This</a> is what the html page looks like, i want when i load the .html file in firefox i can highlight the text and links
What should i do and shouldnt do?
Let's just look at the top part first, your header and your navigation bar.
The part of your graphic that has "Hopewell High School, Pioneers for excellence" and your Web address needs to be one graphic. This is your header.
Your navigation bar is the for "Home Chairman Principal Staff Students Sports About Us." You need two graphics for each phrase. One set should be the black on tan you have and the other set should be whatever color combination you want to have when you mouse over them.
The first step is to make the slices. Guide lines make slicing an image much easier. If you turn on the rulers (check Help for how to do that if they aren't on), you can click in the rulers and drag guide lines onto your image. These lines don't become part of your image, though. Drag a horizontal one below your header and another below your navigation bar. Sometimes, it helps to zoom in to get the line in just the right place. Next, drag vertical lines between "Home" and "Chairman," between "Chairman" and "Principal," etc.
Now, select the slicing tool (light green rectangles). Drag a slice rectangle over your whole header. The slice will show up in the Web layer. You can click on the eye to show or hide it. You can select the slice itself and delete or resize it if you need to, just like regular rectangles. Double-click the slice name ("Slice") and change its name to "header." This way, when you export your slices, the resulting file will have the name header.gif or header.jpg (depending on the format you choose).
Similarly, draw slices over each word. The slice tool will snap to the guide lines, making it easier. Rename each slice as you draw it, so you can tell which is which. Zooming in can make this process easier.
At this point, you can export your slices and you have part of your images done.
There is a fancy way to specify normal and roll over states for buttons. If you want to go that route, check the Help. I usually just change my text, rename my slices to add "-ov" to the end and re-export. Now, I have my buttons for the mouse-over state.
You should have 15 images.
Go to Dreamweaver and make a table with two rows and seven columns. In the first row, merge all the columns and put your header graphic in it. In the second row, first column, go to
Insert>Image Objects>Rollover Image
For your original image, you want the "Home" image which is black on tan. For the rollover image, you want the one that has your mouseover effect. A name is nice, but not necessary. Alt text is recommended. Use "Home" for both. Put the URL of your home page (index.html? default.htm? whatever it is). Then click the OK button.
Repeat the process for the other six buttons in your nav bar. Save the file and see how it looks so far.
You really should learn some HTML. It isn't all that difficult. It's less difficult than learning Fireworks and Dreamweaver, I think. I like this book: TextHTML, XHTML, and CSS, Sixth Edition (Visual Quickstart Guide) by Elizabeth Castro (although I have the 5th Edition).
You might also find this online Web Style Guide helpful.
For general design principles, I've found The Non-Designer's Design Book to be full of useful advice. (Interesting! The 3rd edition is out! I think I'll get a new one.)