Prev: Common Library
Next: Mac Intel
From: krash_master on 20 Jan 2008 12:19
Hi, I designed a couple pages using Fireworks however i cannot seem to make the
link change colors when i mouse over them, i really dont understand how to use
the css styles, i mean i know css and html properly, whenever i export css
layers and open this in dreamweaver there are all images

example:
<div id="real%20indexr4c2r2c6" style="position:absolute; left:267px;
top:209px;width:78px; height:20px;z-index:1; visibility:visible"><img
name="Home" src="real%20index_r4_c2_r2_c6.gif" width="78" height="20"
border="0"></div>
<div id="real%20indexr4c2r3c4" style="position:absolute; left:140px;
top:210px;width:89px; height:17px;z-index:2; visibility:visible"><img
name="real20index_r4_c2_r3_c4" src="real%20index_r4_c2_r3_c4.gif" width="89"
height="17" border="0"></div>
<div id="real%20indexr4c2r4c2" style="position:absolute; left:47px;
top:211px;width:55px; height:16px;z-index:3; visibility:visible"><img
name="real20index_r4_c2_r4_c2" src="real%20index_r4_c2_r4_c2.gif" width="55"
height="16" border="0"></div>

Now these are all images, i cannot work with them, if i try to take out the
images complely and use
<a href="aboutus.html">About us</a>

This will mess up the entire page

This is the same issue when i export them as html and images only

I just need to get a mouse over to change the link color

Can someone point me in the correct direction, with links
I dont want css tutorials, i want to know how to get them to change link color
on mouse over without messing up my page

I did the entire site with fireworks, all link and text



From: JoeyD1978 on 20 Jan 2008 13:39
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.
From: krash_master on 23 Jan 2008 11:34
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
http://i272.photobucket.com/albums/jj180/krash_master/index.gif

What should i do and shouldnt do?

From: pixlor on 23 Jan 2008 13:24
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 [i]two[/i] graphics for [i]each[/i] 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:
http://www.amazon.com/XHTML-Sixth-Visual-Quickstart-Guide/dp/0321430840/ref=pd_b
bs_sr_1?ie=UTF8&s=books&qid=1201112151&sr=1-1 by Elizabeth Castro (although I
have the 5th Edition).

You might also find this online http://webstyleguide.com/ helpful.

For general design principles, I've found
http://www.amazon.com/Non-Designers-Design-Book-Robin-Williams/dp/0321534042/ref
=pd_bbs_sr_1?ie=UTF8&s=books&qid=1201112516&sr=1-1 to be full of useful advice.
(Interesting! The 3rd edition is out! I think I'll get a new one.)

Good luck!


 | 
Pages: 1
Prev: Common Library
Next: Mac Intel