|
There was been a lot of discussion on the various board out there for what you need to do to create a Mambo template in Dreamweaver. With a small (but extremely helpful) tool, this is a fairly simple process. You will want to download John Lyon's wonderful Dreamweaver Extension from http://www.mambosolutions.com. You then install it via the Macromedia Extension Manager.
The beginning of this process involves creating your web graphics in your favorite editor (mine is Fireworks) and then slicing your image. Make sure not to make your slices too complex as this will make things more difficult down the road.
Once you have your sliced image, export it for the web. (Photoshop: File->Save for web, Fireworks: File->Export Preview) You can optimize your images for the web in either of these screens. Your images will dictate which image type you should use. For blocks of color use .gif. If you have a lot of complexity or fading between colors you may want to use .png.
Now you should have your html file along with your images. A sample html file from Fireworks will look like:
<html>
<head>
<title>017.png</title>
<meta http-equiv="Content-Type" content="text/html;">
<!--Fireworks MX 2004 Dreamweaver MX 2004 target. Created Fri May 07 09:47:57 GMT-0500 (Central Daylight Time) 2004-->
</head>
<body bgcolor="#ffffff">
<table border="0" cellpadding="0" cellspacing="0" width="780">
<!-- fwtable fwsrc="017.png" fwbase="017.png" fwstyle="Dreamweaver" fwdocid = "785058659" fwnested="0" -->
<tr>
<td><img xsrc="images/spacer.gif" width="1" height="1" border="0" alt=""></td>
<td><img xsrc="images/spacer.gif" width="19" height="1" border="0" alt=""></td>
<td><img xsrc="images/spacer.gif" width="172" height="1" border="0" alt=""></td>
<td><img xsrc="images/spacer.gif" width="23" height="1" border="0" alt=""></td>
<td><img xsrc="images/spacer.gif" width="32" height="1" border="0" alt=""></td>
<td><img xsrc="images/spacer.gif" width="497" height="1" border="0" alt=""></td>
<td><img xsrc="images/spacer.gif" width="36" height="1" border="0" alt=""></td>
<td><img xsrc="images/spacer.gif" width="1" height="1" border="0" alt=""></td>
</tr>
<tr>
<td colspan="7"><img name="n017_r1_c1" xsrc="images/017_r1_c1.png" width="780" height="150" border="0" alt=""></td>
<td><img xsrc="images/spacer.gif" width="1" height="150" border="0" alt=""></td>
</tr>
<tr>
<td><img name="n017_r2_c1" xsrc="images/017_r2_c1.png" width="1" height="54" border="0" alt=""></td>
<td colspan="6"><img name="n017_r2_c2" xsrc="images/017_r2_c2.png" width="779" height="54" border="0" alt=""></td>
<td><img xsrc="images/spacer.gif" width="1" height="54" border="0" alt=""></td>
</tr>
<tr>
<td colspan="7"><img name="n017_r3_c1" xsrc="images/017_r3_c1.png" width="780" height="9" border="0" alt=""></td>
<td><img xsrc="images/spacer.gif" width="1" height="9" border="0" alt=""></td>
</tr>
<tr>
<td colspan="2"><img name="n017_r4_c1" xsrc="images/017_r4_c1.png" width="20" height="29" border="0" alt=""></td>
<td><img name="n017_r4_c3" xsrc="images/017_r4_c3.png" width="172" height="29" border="0" alt=""></td>
<td colspan="2"><img name="n017_r4_c4" xsrc="images/017_r4_c4.png" width="55" height="29" border="0" alt=""></td>
<td><img name="n017_r4_c6" xsrc="images/017_r4_c6.png" width="497" height="29" border="0" alt=""></td>
<td><img name="n017_r4_c7" xsrc="images/017_r4_c7.png" width="36" height="29" border="0" alt=""></td>
<td><img xsrc="images/spacer.gif" width="1" height="29" border="0" alt=""></td>
</tr>
<tr>
<td colspan="2"><img name="n017_r5_c1" xsrc="images/017_r5_c1.png" width="20" height="317" border="0" alt=""></td>
<td><img name="n017_r5_c3" xsrc="images/017_r5_c3.png" width="172" height="317" border="0" alt=""></td>
<td colspan="2"><img name="n017_r5_c4" xsrc="images/017_r5_c4.png" width="55" height="317" border="0" alt=""></td>
<td><img name="n017_r5_c6" xsrc="images/017_r5_c6.png" width="497" height="317" border="0" alt=""></td>
<td><img name="n017_r5_c7" xsrc="images/017_r5_c7.png" width="36" height="317" border="0" alt=""></td>
<td><img xsrc="images/spacer.gif" width="1" height="317" border="0" alt=""></td>
</tr>
<tr>
<td colspan="4"><img name="n017_r6_c1" xsrc="images/017_r6_c1.png" width="215" height="46" border="0" alt=""></td>
<td colspan="3"><img name="n017_r6_c5" xsrc="images/017_r6_c5.png" width="565" height="46" border="0" alt=""></td>
<td><img xsrc="images/spacer.gif" width="1" height="46" border="0" alt=""></td>
</tr>
<tr>
<td colspan="7"><img name="n017_r7_c1" xsrc="images/017_r7_c1.png" width="780" height="34" border="0" alt=""></td>
<td><img xsrc="images/spacer.gif" width="1" height="34" border="0" alt=""></td>
</tr>
</table>
</body>
</html>
You can tell this is extremely sloppy code. The first thing you will want to do is get rid of all of the cells with a spacer.gif image in them. This will not be needed, and never should be. You new code should look like this:
<html>
<head>
<title>017.png</title>
<meta http-equiv="Content-Type" content="text/html;">
</head>
<body bgcolor="#ffffff">
<table border="0" cellpadding="0" cellspacing="0" width="780">
<tr>
<td colspan="7"><img name="n017_r1_c1" xsrc="images/017_r1_c1.png" width="780" height="150" border="0" alt=""></td>
</tr>
<tr>
<td><img name="n017_r2_c1" xsrc="images/017_r2_c1.png" width="1" height="54" border="0" alt=""></td>
<td colspan="6"><img name="n017_r2_c2" xsrc="images/017_r2_c2.png" width="779" height="54" border="0" alt=""></td>
</tr>
<tr>
<td colspan="7"><img name="n017_r3_c1" xsrc="images/017_r3_c1.png" width="780" height="9" border="0" alt=""></td>
</tr>
<tr>
<td colspan="2"><img name="n017_r4_c1" xsrc="images/017_r4_c1.png" width="20" height="29" border="0" alt=""></td>
<td><img name="n017_r4_c3" xsrc="images/017_r4_c3.png" width="172" height="29" border="0" alt=""></td>
<td colspan="2"><img name="n017_r4_c4" xsrc="images/017_r4_c4.png" width="55" height="29" border="0" alt=""></td>
<td><img name="n017_r4_c6" xsrc="images/017_r4_c6.png" width="497" height="29" border="0" alt=""></td>
<td><img name="n017_r4_c7" xsrc="images/017_r4_c7.png" width="36" height="29" border="0" alt=""></td>
</tr>
<tr>
<td colspan="2"><img name="n017_r5_c1" xsrc="images/017_r5_c1.png" width="20" height="317" border="0" alt=""></td>
<td><img name="n017_r5_c3" xsrc="images/017_r5_c3.png" width="172" height="317" border="0" alt=""></td>
<td colspan="2"><img name="n017_r5_c4" xsrc="images/017_r5_c4.png" width="55" height="317" border="0" alt=""></td>
<td><img name="n017_r5_c6" xsrc="images/017_r5_c6.png" width="497" height="317" border="0" alt=""></td>
<td><img name="n017_r5_c7" xsrc="images/017_r5_c7.png" width="36" height="317" border="0" alt=""></td>
</tr>
<tr>
<td colspan="4"><img name="n017_r6_c1" xsrc="images/017_r6_c1.png" width="215" height="46" border="0" alt=""></td>
<td colspan="3"><img name="n017_r6_c5" xsrc="images/017_r6_c5.png" width="565" height="46" border="0" alt=""></td>
</tr>
<tr>
<td colspan="7"><img name="n017_r7_c1" xsrc="images/017_r7_c1.png" width="780" height="34" border="0" alt=""></td>
</tr>
</table>
</body>
</html>
If you look at your site now in Dreamweaver, it will look very ugly and unaligned.
After setting cell sizes and background images your code should look like this:
Only registered users can write comments.
Please login or register. Powered by AkoComment 2.0! |
