Not sure how to title this.

vbfrost · #1 (**permalink**) Sep 14th, 2006, 01:42

My frustration is getting the best of me. I'm trying to create a site that looks like this:

http://i101.photobucket.com/albums/m...ketts/mock.jpg

I did it in photoshop, and sliced all the images. When I place it into Dreamweaver however, and view a preview in Firefox (and other browsers) it doesn't look how I want it to.

I would like the blue top and the blue bottom to go all the way across the screen. From the left, to the right.

Anyone think they might be able to steer me in the right direction? Hell you can even call me if you think you could explain it better that way!! I just need a head start and to be headed in the right direction. I'm usually pretty good at figuring things out on my own.

Thanks all,

Matt Ricketts

ukgeoff · #2 (**permalink**) Sep 14th, 2006, 09:13

We need the actuall html code to see what you have so far.

Frankly, the Photoshop approach is ok for doing mockups of how the site will look. You then need to code in a proper structured, cross browser, standards and accessible compliant way.

Leave Dreamweaver and use a text editor. You will understand far more about what is going on and have far finer control over the finished work.

vbfrost · #3 (**permalink**) Sep 14th, 2006, 12:08

ok I'll try to. I'm not very good with coding on my own though... unfortunately.

vbfrost · #4 (**permalink**) Sep 14th, 2006, 12:11

here's the code though, if anyone thinks they can steer me. thanks

<html>
<head>
<title>Split Design</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

</style></head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<div align="center">

<table width="1003" border="0" align="center" cellpadding="0" cellspacing="0" bordercolor="#000000" id="Table_01">
<tr>
<td colspan="3" rowspan="2">
<img src="images/logo.gif" width="402" height="137" alt=""></td>
<td width="98" rowspan="3">
<img src="images/home.gif" width="98" height="138" alt=""></td>
<td width="126" rowspan="3">
<img src="images/buynow.gif" width="126" height="138" alt=""></td>
<td width="121" rowspan="3">
<img src="images/reviews.gif" width="121" height="138" alt=""></td>
<td colspan="2">
<img src="images/faq.gif" width="94" height="58" alt=""></td>
<td width="163" bgcolor="#505090">
<img src="images/shopping.gif" width="159" height="58" alt="">
<label></label></td>
<td width="10">
<img src="images/spacer.gif" width="1" height="58" alt=""></td>
</tr>
<tr>
<td width="93" rowspan="2">
<img src="images/faq-08.gif" width="93" height="80" alt=""></td>
<td colspan="2" rowspan="2">
<img src="images/contact.gif" width="160" height="80" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="79" alt=""></td>
</tr>
<tr>
<td width="289" rowspan="2">
<img src="images/wrizzpic.gif" width="289" height="314" alt=""></td>
<td width="91" rowspan="2">
<img src="images/vrule.gif" width="91" height="314" alt=""></td>
<td width="22" rowspan="3">
<img src="images/body.gif" width="22" height="469" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
</tr>
<tr>
<td colspan="6" rowspan="2" bordercolor="" bgcolor="#000000"> </td>
<td>
<img src="images/spacer.gif" width="1" height="313" alt=""></td>
</tr>
<tr>
<td colspan="2">
<img src="images/underpic.gif" width="380" height="155" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="155" alt=""></td>
</tr>
<tr>
<td colspan="9">
<img src="images/bottom.gif" width="1000" height="54" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="54" alt=""></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="289" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="91" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="22" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="98" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="126" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="121" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="93" height="1" alt=""></td>
<td width="1">
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="159" height="1" alt=""></td>
<td></td>
</tr>
</table>

</div>
</body>
</html>

ukgeoff · #5 (**permalink**) Sep 14th, 2006, 14:21

Actually what I was hoping for was a link to a page so we can see the page inclusive of any graphics.

Just looking through the code you have provided, and assuming this is all there is on the page, there are certain obvious things you need to do:

Choose a DOCTYPE for your code
Get rid of all that table layout and code to standard techniques with <div>'s etc.
Remove all CSS into a seperate file and <link... it into your html pages
Do not use propriatory attributes - standards compliant only

vbfrost · #6 (**permalink**) Sep 14th, 2006, 20:35

yeah I suppose I do have a lot of work to do then seeing as I don't really know what <div> does or how to use it. sigh... can you believe that I was taught to build websites like that in college? we just used tables to layout everything and I never learned how to make a good layout by coding.

moojoo · #7 (**permalink**) Sep 14th, 2006, 20:42

I have yet to see any one learn the correct way in college. A friend of mine was taking web design in college so I showed her how to do it, she got an A despite using nothing they taught her. They teach silly outdated things.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
title?	Aesir	Web Page Design	4	Mar 12th, 2008 15:58
<title>Tennis London : Tennis History</title> how should it read	Oak	Search Engine Optimization (SEO)	5	Feb 6th, 2008 01:31
ALT & TITLE tags?	RZX Developer	Search Engine Optimization (SEO)	5	Dec 18th, 2007 15:10
alt or title	geyids	Web Page Design	4	Aug 20th, 2007 15:56

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Not sure how to title this.