If you have any questions or comments about this tutorial, please post them here.
THIRD PART SECTION - Coding The Sliced Banner For Your Website
Go and upload all of the sliced images, I suggest you make a folder and name it images to put them in and then in an html editor open up your html document that Imageready made for you.
Once you are in there, you can change the urls and targets if need be. Also, I decided to use mine with Iframes and targeted some links to open in my Iframes. (HINT - When using Iframes not that not all browsers are going to be able to show the frames properly.) I also added my banner and my Iframe in one huge table, an example code of that is below:
<HTML>
<HEAD>
<TITLE>example09</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
</HEAD>
<BODY BGCOLOR=#C0C0C0 LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
<div align="center">
<TABLE WIDTH=740 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<tr>
<td bgcolor="#8C94A4" style="border-top:1px #000000 solid;border-bottom:1px #000000 solid;border-right:1px #000000 solid;border-left:1px #000000 solid;">
<!-- ImageReady Slices (example09.jpg) -->
<TABLE WIDTH=750 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
<TD COLSPAN=13>
<IMG SRC="b2limages/example09_01.gif" WIDTH=750 HEIGHT=137 ALT=""></TD>
<TD>
<IMG SRC="b2limages/spacer.gif" WIDTH=1 HEIGHT=137 ALT=""></TD>
</TR>
<TR>
<TD ROWSPAN=5>
<IMG SRC="b2limages/example09_02.gif" WIDTH=388 HEIGHT=13 ALT=""></TD>
<TD ROWSPAN=5>
<A HREF="http://buildtutorials.com/" TARGET="_self">
<IMG SRC="b2limages/example09_03.gif" WIDTH=41 HEIGHT=13 BORDER=0 ALT=""></A></TD>
<TD COLSPAN=9>
<IMG SRC="b2limages/example09_04.gif" WIDTH=269 HEIGHT=1 ALT=""></TD>
<TD ROWSPAN=4>
<A HREF="http://buildtutorials.com/" TARGET="viewer">
<IMG SRC="b2limages/example09_05.gif" WIDTH=47 HEIGHT=12 BORDER=0 ALT=""></A></TD>
<TD ROWSPAN=5>
<IMG SRC="b2limages/example09_06.gif" WIDTH=5 HEIGHT=13 ALT=""></TD>
<TD>
<IMG SRC="b2limages/spacer.gif" WIDTH=1 HEIGHT=1 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=5>
<IMG SRC="b2limages/example09_07.gif" WIDTH=139 HEIGHT=1 ALT=""></TD>
<TD ROWSPAN=3>
<A HREF="http://buildtutorials.com/" TARGET="viewer">
<IMG SRC="b2limages/example09_08.gif" WIDTH=54 HEIGHT=11 BORDER=0 ALT=""></A></TD>
<TD COLSPAN=3>
<IMG SRC="b2limages/example09_09.gif" WIDTH=76 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="b2limages/spacer.gif" WIDTH=1 HEIGHT=1 ALT=""></TD>
</TR>
<TR>
<TD ROWSPAN=3>
<IMG SRC="b2limages/example09_10.gif" WIDTH=12 HEIGHT=11 ALT=""></TD>
<TD>
<A HREF="http://buildtutorials.com/" TARGET="viewer">
<IMG SRC="b2limages/example09_11.gif" WIDTH=52 HEIGHT=9 BORDER=0 ALT=""></A></TD>
<TD ROWSPAN=3>
<IMG SRC="b2limages/example09_12.gif" WIDTH=11 HEIGHT=11 ALT=""></TD>
<TD>
<A HREF="http://buildtutorials.com/" TARGET="_blank">
<IMG SRC="b2limages/example09_13.gif" WIDTH=52 HEIGHT=9 BORDER=0 ALT=""></A></TD>
<TD ROWSPAN=3>
<IMG SRC="b2limages/example09_14.gif" WIDTH=12 HEIGHT=11 ALT=""></TD>
<TD ROWSPAN=3>
<IMG SRC="b2limages/example09_15.gif" WIDTH=14 HEIGHT=11 ALT=""></TD>
<TD ROWSPAN=2>
<A HREF="http://buildtolearn.com/?key=free+webhosting+hosting+webmaster+resource" TARGET="_blank">
<IMG SRC="b2limages/example09_16.gif" WIDTH=50 HEIGHT=10 BORDER=0 ALT=""></A></TD>
<TD ROWSPAN=3>
<IMG SRC="b2limages/example09_17.gif" WIDTH=12 HEIGHT=11 ALT=""></TD>
<TD>
</TD>
</TR>
<TR>
<TD ROWSPAN=2>
<IMG SRC="b2limages/example09_18.gif" WIDTH=52 HEIGHT=2 ALT=""></TD>
<TD ROWSPAN=2>
<IMG SRC="b2limages/example09_19.gif" WIDTH=52 HEIGHT=2 ALT=""></TD>
<TD>
<IMG SRC="b2limages/spacer.gif" WIDTH=1 HEIGHT=1 ALT=""></TD>
</TR>
<TR>
<TD>
<IMG SRC="b2limages/example09_20.gif" WIDTH=54 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="b2limages/example09_21.gif" WIDTH=50 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="b2limages/example09_22.gif" WIDTH=47 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="b2limages/spacer.gif" WIDTH=1 HEIGHT=1 ALT=""></TD>
</TR>
</TABLE>
<!-- End ImageReady Slices -->
</td>
</tr>
<tr>
<td VALIGN="top" ALIGN="center">
<iframe src="http://webpages.charter.net/versatilcreations/middlesection.html" scrolling="yes" style="border-top:1px #FAFAFA solid;border-bottom:1px #000000 solid;border-right:1px #000000 solid;border-left:1px #000000 solid;" class="text" bgcolor="#FAFAFA" frameborder="0" width="750" height="400" name="viewer"></iframe>
</td>
</tr>
</table>
</div>
</BODY>
</HTML>
There are changes within this code that needs to be changed, such as where it says < !-- ImageReady Slices (example09.jpg) -- > you will want to insert your Imageready Code in there and delete mine out. Then after < !-- End ImageReady Slices -- > There was the Iframe code, you need to edit the frameborder color and sizes and the frame address. I named the frame Viewer so any link that you want to target to open in the Iframe needs to be named Viewer. You can change this name if you prefer.
The end product looks like this: Click to see here! Remember, you do not have to add your sliced banner like this to your website, this is just one example that I have provided for you. Experiment and see what all you can come up with!
Website Designed in Photoshop - Part 3
| Back To Step 2 |
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment