Building a website using "panels"

**rbresnik** · 05-06-2006, 02:30 AM

I am relatively new to building sites, and have done many using tables. I notice some websites load various "panels" that make up an entire site. How is this done? Do they create an Illustrator document with the look of the site then somehow cut it up into smaller graphic files that then populate the page? Can someone give me direction on this? Thanks,

Rob Bresnik

**chrishirst** · 05-06-2006, 02:47 AM

an example of what you mean would help, but I suspect that the sites are simply using borders around different sections or maybe different background colours.

**rbresnik** · 05-06-2006, 11:21 PM

for example, the index.html page consists of these images:

welcome_r1_c1.jpg (row 1, column1 i ssume)
welcome_r2_c1.jpg etc.

and then this code for the page: <body bgcolor="#ffffff" onLoad="MM_preloadImages('wlcome/welcome_r2_c2_f2.jpg','wlcome/welcome_r2_c2_f4.jpg','wlcome/welcome_r2_c2_f3.jpg','wlcome/welcome_r2_c4_f2.jpg','wlcome/welcome_r2_c4_f4.jpg','wlcome/welcome_r2_c4_f3.jpg','wlcome/welcome_r2_c6_f2.jpg','wlcome/welcome_r2_c6_f4.jpg','wlcome/welcome_r2_c6_f3.jpg','wlcome/welcome_r2_c8_f2.jpg','wlcome/welcome_r2_c8_f4.jpg','wlcome/welcome_r2_c8_f3.jpg')" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table border="0" cellpadding="0" cellspacing="0" width="745">

<tr>
<td><img src="wlcome/spacer.gif" width="153" height="1" border="0"></td>
<td><img src="wlcome/spacer.gif" width="79" height="1" border="0"></td>
<td><img src="wlcome/spacer.gif" width="22" height="1" border="0"></td>
<td><img src="wlcome/spacer.gif" width="51" height="1" border="0"></td>
<td><img src="wlcome/spacer.gif" width="22" height="1" border="0"></td>
<td><img src="wlcome/spacer.gif" width="77" height="1" border="0"></td>
<td><img src="wlcome/spacer.gif" width="21" height="1" border="0"></td>
<td><img src="wlcome/spacer.gif" width="46" height="1" border="0"></td>
<td><img src="wlcome/spacer.gif" width="218" height="1" border="0"></td>
<td><img src="wlcome/spacer.gif" width="51" height="1" border="0"></td>
<td><img src="wlcome/spacer.gif" width="5" height="1" border="0"></td>
<td><img src="wlcome/spacer.gif" width="1" height="1" border="0"></td>
</tr>
<tr>
<td colspan="11"><img name="welcome_r1_c1" src="wlcome/welcome_r1_c1.jpg" width="745" height="80" border="0"></td>
<td><img src="wlcome/spacer.gif" width="1" height="80" border="0"></td>
</tr>
<tr>
<td rowspan="5"><img name="welcome_r2_c1" src="wlcome/welcome_r2_c1.jpg" width="153" height="320" border="0"></td>
<td rowspan="4"><a href="bio.htm" onMouseOut="MM_nbGroup('out');" onMouseOver="MM_nbGroup('over','welcome_r2_c2','wl come/welcome_r2_c2_f2.jpg','wlcome/welcome_r2_c2_f4.jpg',1);" onClick="MM_nbGroup('down','navbar1','welcome_r2_c 2','wlcome/welcome_r2_c2_f3.jpg',1);" ><img name="welcome_r2_c2" src="wlcome/welcome_r2_c2.jpg" width="79" height="10" border="0"></a></td>
<td rowspan="5"><img name="welcome_r2_c3" src="wlcome/welcome_r2_c3.jpg" width="22" height="320" border="0"></td>
<td rowspan="2"><a href="services.htm" onMouseOut="MM_nbGroup('out');" onMouseOver="MM_nbGroup('over','welcome_r2_c4','wl come/welcome_r2_c4_f2.jpg','wlcome/welcome_r2_c4_f4.jpg',1);" onClick="MM_nbGroup('down','navbar1','welcome_r2_c 4','wlcome/welcome_r2_c4_f3.jpg',1);" ><img name="welcome_r2_c4" src="wlcome/welcome_r2_c4.jpg" width="51" height="8" border="0"></a></td>
<td rowspan="5"><img name="welcome_r2_c5" src="wlcome/welcome_r2_c5.jpg" width="22" height="320" border="0"></td>
<td rowspan="2"><a href="testimonials.htm" onMouseOut="MM_nbGroup('out');" onMouseOver="MM_nbGroup('over','welcome_r2_c6','wl come/welcome_r2_c6_f2.jpg','wlcome/welcome_r2_c6_f4.jpg',1);" onClick="MM_nbGroup('down','navbar1','welcome_r2_c 6','wlcome/welcome_r2_c6_f3.jpg',1);" ><img name="welcome_r2_c6" src="wlcome/welcome_r2_c6.jpg" width="77" height="8" border="0"></a></td>
<td rowspan="5"><img name="welcome_r2_c7" src="wlcome/welcome_r2_c7.jpg" width="21" height="320" border="0"></td>
<td rowspan="2"><a href="contact.htm" onMouseOut="MM_nbGroup('out');" onMouseOver="MM_nbGroup('over','welcome_r2_c8','wl come/welcome_r2_c8_f2.jpg','wlcome/welcome_r2_c8_f4.jpg',1);" onClick="MM_nbGroup('down','navbar1','welcome_r2_c 8','wlcome/welcome_r2_c8_f3.jpg',1);" ><img name="welcome_r2_c8" src="wlcome/welcome_r2_c8.jpg" width="46" height="8" border="0"></a></td>
<td colspan="3"><img name="welcome_r2_c9" src="wlcome/welcome_r2_c9.jpg" width="274" height="3" border="0"></td>
<td><img src="wlcome/spacer.gif" width="1" height="3" border="0"></td>
</tr>
<tr>
<td rowspan="4"><img name="welcome_r3_c9" src="wlcome/welcome_r3_c9.jpg" width="218" height="317" border="0"></td>
<td rowspan="2"><img name="welcome_r3_c10" src="wlcome/welcome_r3_c10.jpg" width="51" height="6" border="0"></td>
<td rowspan="4"><img name="welcome_r3_c11" src="wlcome/welcome_r3_c11.jpg" width="5" height="317" border="0"></td>
<td><img src="wlcome/spacer.gif" width="1" height="5" border="0"></td>
</tr>
<tr>
<td rowspan="3"><img name="welcome_r4_c4" src="wlcome/welcome_r4_c4.jpg" width="51" height="312" border="0"></td>
<td rowspan="3"><img name="welcome_r4_c6" src="wlcome/welcome_r4_c6.jpg" width="77" height="312" border="0"></td>
<td rowspan="3"><img name="welcome_r4_c8" src="wlcome/welcome_r4_c8.jpg" width="46" height="312" border="0"></td>
<td><img src="wlcome/spacer.gif" width="1" height="1" border="0"></td>
</tr>
<tr>
<td rowspan="2"><img name="welcome_r5_c10" src="wlcome/welcome_r5_c10.jpg" width="51" height="311" border="0"></td>
<td><img src="wlcome/spacer.gif" width="1" height="1" border="0"></td>
</tr>
<tr>
<td><img name="welcome_r6_c2" src="wlcome/welcome_r6_c2.jpg" width="79" height="310" border="0"></td>
<td><img src="wlcome/spacer.gif" width="1" height="310" border="0"></td>
</tr>
</table>
</body>

Can you make any sense of that?

**blue-dreamer** · 05-07-2006, 02:50 AM

I can make sense of it, even though it bloated with excessive images and code

Can't really help you any more because we need to actually "see" what you mean - have you got a url you can post?

**rbresnik** · 05-07-2006, 03:31 AM

Yes, check out www.chessmen.biz

**chrishirst** · 05-07-2006, 05:15 AM

My only advice is DON'T DO IT

The pages are built totally from images, crap for accessibility, utterly useless for search engines and crap for users not on high speed connections.

there are far far better ways of getting the same look without sacrificing usability.

**blue-dreamer** · 12:59 PM

Now I see what you are tring to achieve...

My advice is to first build your page using TEXT ONLY and leave gaps for where the images go. Once you have got the layout you want create the images to fit the gaps!

Or, make your template without copy text, slice up the images for your page - hint: the ones that have text over them will have to be added as background images.

**carterdea** · 05-08-2006, 12:54 AM

yes, use CSS backgrounds and it will be much better.

**rbresnik** · 05-08-2006, 12:57 AM

The advice DONT DO IT was all i needed to hear. One of my new clients wants me to redo their website and www.chessmen.biz is the old site. I just thought maybe the way it was built (with all images) as some fancy way of doing websites. Thanks for the tips.

**DianeD** · 05-08-2006, 11:12 AM

It appears to me that they used sliced images and I agree with everyone to "Not do it" that way for SEO reasons. If you want the same look, create the background as an image to use in the body or the main content div, then use CSS and HTML to format the text to "fit" inside the image.

Good luck,
DianeD

**moondog** · 05-09-2006, 05:32 AM

It is very good way to create web sites for experienced web designers.
First, make layout complete in Adobe Photoshop or Macromedia Fireworks, and then entirely layout must be sliced into smaller parts that makes background for table cells. After that comes coding in Dreamweaver or something else.

Try google and search photoshop tutorials (web layout in photoshop).

I suggest You CSS

**JohnJ** · 05-09-2006, 06:26 AM

I recently 're-engineered' an existing website that was done this way - - Pain in the behind because all the text had to be retyped into a decent layout.

**blue-dreamer** · 05-09-2006, 09:59 AM

People often forget that the web is a text based medium that also happens to support display of images. As a rule of thumb only use an image if it adds value to the page/site.

**ScriptKitten** · 06:46 PM

When you see a website that appears to be chopped into little images that usually means they used an imaging program (MX Fireworks) to create the page. You can create anything for a webpage on Fireworks from rollovers to dropdown menus and then it will generate all the code you need.

The problem with doing it this way (other than loading times for some) is that you just take all those little image files and upload them to the server and the html file that it generates tells it where all the files go. Personally, I used to have a dial-up connection of 24.6 bps and I NEVER had a problem with load times, for me it actually loaded better then some other sites. However its not always the best looking while it loads!

I see that you have decided not to use this means of webdesign but I noticed that it mostly didn't answer the question of HOW it is dont. that it was more so explained NOT to do it! So I thought I would chime in on the subject. I think it depends on the type of site and how much editing to the overall look you need to maintain.

**turtile** · 07-20-2006, 07:42 PM

All it is is cells within a table w/ backgrounds.