Help - Search - Members - Calendar
Full Version: layout program
Forums > Resource Center > Graphics Help > Resolved Topics
homelife82
Feb 23 2007, 05:09 PM
I am using Image Ready to make a layout however I don't think you can make links with this program. Does anyone know of any program to download where you can create links for your layouts? I had Dreamweaver but it was a trial and it ran out already. Thanks.
mona lisa
Feb 23 2007, 05:15 PM
Moved to Graphics Help.

What do you mean by links? If you view the image in a browser straight from Imageready, you're given the codes for it, image and links if you've added them (rollovers/imagemaps).
homelife82
Feb 23 2007, 05:25 PM
I noticed that when I view it in the browser. But I mean like the navigation links. How do you add them to the page. When I had dreamweaver you just copied and pasted them after you sliced the sections you wanted into separate links. I don't know if that makes sense. Like on the left hand side I want it to say, Blog, Pic, Add me, ect. And I need to put the individual links to them.
mona lisa
Feb 23 2007, 05:30 PM
Once you have the codes after viewing it in a browser, simply surround each slice of the navigation with links tags.
E.g.
CODE
<a href="http://www.link.com"><img src="http://www.image.com/file.jpg" border="0" alt=""></a>
You'll probably have to do it manually. ermm.gif
homelife82
Feb 23 2007, 05:33 PM
Okay I get that part. I've never made one with Image ready however. Could this be made into a DIV over lay cause I'm thinking that is the only way this layout will work with the links I am making. This probably isn't making any sense though.

This is the code I have so far:

CODE
<html>
<head>
<title>jimilayout</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (jimilayout.psd) -->
<table id="Table_01" width="1001" height="1001" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td colspan="5">
            <img src="images/jimilayout_01.gif" width="1000" height="82" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="82" alt=""></td>
    </tr>
    <tr>
        <td colspan="3">
            <img src="images/jimilayout_02.gif" width="992" height="320" alt=""></td>
        <td colspan="2" rowspan="5">
            <img src="images/jimilayout_03.gif" width="8" height="586" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="320" alt=""></td>
    </tr>
    <tr>
        <td rowspan="8">
            <img src="images/jimilayout_04.gif" width="198" height="598" alt=""></td>
        <td>
            <img src="images/jimilayout_05.gif" width="156" height="85" alt=""></td>
        <td rowspan="4">
            <img src="images/jimilayout_06.gif" width="638" height="266" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="85" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="images/jimilayout_07.gif" width="156" height="86" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="86" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="images/jimilayout_08.gif" width="156" height="85" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="85" alt=""></td>
    </tr>
    <tr>
        <td rowspan="2">
            <img src="images/jimilayout_09.gif" width="156" height="86" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="10" alt=""></td>
    </tr>
    <tr>
        <td colspan="2" rowspan="4">
            <img src="images/jimilayout_10.gif" width="642" height="332" alt=""></td>
        <td rowspan="4">
            <img src="images/jimilayout_11.gif" width="4" height="332" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="76" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="images/jimilayout_12.gif" width="156" height="85" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="85" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="images/jimilayout_13.gif" width="156" height="86" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="86" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="images/jimilayout_14.gif" width="156" height="85" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="85" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="images/spacer.gif" width="198" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="156" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="638" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="4" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="4" height="1" alt=""></td>
        <td></td>
    </tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>


Where would I add the code you gave me?
mona lisa
Feb 23 2007, 08:01 PM
Pretend the first image is a link. That part should look like the following.
CODE
...extra codes here...
<tr>
        <td colspan="5">
            <a href="http://www.link.com"><img src="images/jimilayout_01.gif" width="1000" height="82" alt=""></a></td>
        <td>
...extra codes here...

You can do the same for any other image you would like to use as a link.
RCKstarh
Feb 23 2007, 09:59 PM
this is a tutorial

http://www.createblog.com/forums/index.php?showtopic=166510
homelife82
Feb 23 2007, 10:33 PM
Thanks guys! I will try these things out and let you know. I have PSP so I'm going to try that tutorial cause I'm more familiar with that program. I had no idea you could do image mapping with it. Shows how much I know.

--

okay I did the psp and image ready tutorial and got the links for my navigation. now how do I pull the entire layout together? if that makes sense. This one will have to be a DIV I believe. I'm going to look and see if I can find a tutorial on how to do those. I've only used premade ones but never made one myself. I need to get the rest of the code for the rest of my layout.


Edited to say I found the DIV tutorial but not sure how to incorporate it with my Image ready codes.

Posts merged.
} Azarel
RCKstarh
Feb 24 2007, 11:11 AM
just add that image ready code in your div code. That's what I did and my layout came out perfectly how i wanted it. The tutorial i gave u tells you what to change if you need to change anything in the code
homelife82
Feb 24 2007, 05:43 PM
I started over and made a new one in PSP. The only way I could get the code was to right click my document and open in notebook after I sliced, and mapped everything. Now I have the code. I put in the url's to each individual navigation link. Not sure if I did that all right or not though. But I did it how Mona Lisa told me to in the beginning of this thread. Now I'm not sure how to incorporate the DIV with it all cause the tutorials are confusing me. I'm not sure what to paste into about me or who i'd like to meet. I think I'll just mess with it a bit but most likely get a premade one. I have no patience lol!
homelife82
Feb 25 2007, 11:46 PM
I got a whole new layout. I was tired of fooling with this one. so i guess this topic can be closed.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.