HTML Layout Help

ps2cho · 05-17-06, 07:01 PM

Hey guys,

My mother has successfully opened her beautytherapy business in England and she wants me to make her a website. Now i have not really dont any website designing before and i need help with layout. What would be the best way to do it ? Tables or frames? Is there any good tutorials on how to create a good looking page? I am concerned about how it will look as it has to be professional. Nothing too elaborate, basically just a main page, services offered and contact information.

Any thoughts?

Thanks, ps2cho

amazon10x · 05-17-06, 08:15 PM

Use CSS for the layout. Definitely do NOT use frames. There are many tutorials on the web if you search google for 'css layout tutorial'. I can probably post some more help later.

Gnufsh · 05-18-06, 12:21 AM

Neither frames nor tables. Frames are just bad, and the W3C says that you are only complient with their standard if you only use tables for tabular data (not layout). CSS layouts tend to have substantially less code and are better in general.

css basics:
http://www.cssbasics.com/

css layout:
http://www.subcide.com/tutorials/csslayout/

Enablingwolf · 05-18-06, 12:44 AM

If your having issues with layout. Here is a good start. There is a bunch of open source layouts to start with, it is a great help getting a boost. Then expand into your own design as your skill comes along. Before you know it, your making a nice page in no time.
http://www.oswd.org/

Then reinforce it with some css of your own choosing. It explains how the css will work and gives you an editor to fiddle with too. Good to start on. If you are sharp you can pick up css in a day or two. Then learn more as the need arises. It is easier to learn css over the html part. Plus it is very powerful in the right hands. It will get you way from tables and frames. Which are an old standard and will make more code to load up and slow up your pages.
http://www.w3schools.com/css/

Using an external sytel sheet will be the best route, since you can add pages and keep everything clean in the code. It will give a slight boost to the page load times to. Since it will only load the code once per stylesheet. So your not loading a heavy 22kb+ html page. I tend to not include the images on the actual html since images are actually optional. It helps later on when you are going to make edits. No shuffling through a bunch of css to get to the html. Plus it makes for nice looking html.

Here is one of my old pages:
http://www.enablingwolf.com/ewtemp/index.html

The HTML for it:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<link rel="shortcut icon" href="Assets/favicon.ico" />
<title>www.enablingwolf.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<link rel="stylesheet" type="text/css" media="screen" href="Assets/styles.css" />
</head>
<body>
<div id="container">
<div id="header"><h1>Enablingwolf</h1><h2>Where we hang out</h2></div>
<div id="leftcol">
<h1>Welcome to Enablingwolf.com</h1>
<p>Glad you could make it. I am hoping you take a look around and enjoy your visit.  </p>
<p><span class="style1">The picture Photos link is passworded.</span> If you need assistance please contact me using the contact form provided on the site. </p>


</div>
<div id="rightcol">
<img src="Assets/pic.jpg" alt="picture" width="170" height="170" class="portrait" title="Your browser or the link is broken."/>
<h1>Navigation</h1>
<ul id="nav">
<li><a href="index.html">Home</a></li>
<li><a href="Fun%20stuff/index.html">Fun stuff </a></li>
<li><a href="Computer/PcPage.html">Computer Projects </a></li>
<li><a href="Pictures/Photos.htm">Photos Login</a></li>
<li><a href="../Dale/BluegrassPage.htm">Dale's Pages </a></li>
<li><a href="Contact/contact.html">Contact</a></li>
</ul>
<h1>Link List:</h1>
<ul>
<li><a href="http://www.pogo.com">Go to Pogo.com</a></li>
<li></li>
</ul>
</div>
</div>
</body>

If you notice, the header/background image tags are not present in the HTML. They are held in the stylesheet. I was lazy and did not include the other image in the rightcol div. Since I change that one alot and it is optional to me. I use it as a spacer and it was an afterthought. I could easily add it to the style later on if I was using the page.

There is only one naviagtion link active on the page. My father in laws pages that I built for him and his love of music( aka Dale's Pages /bluegrass pages). Very simple layout there too. Classic design and done in css. I can change just about all his pages looks in a matter of seconds since i chose an external sheet to handle the layout and other goodies.

anon1 · 05-18-06, 08:11 AM

Well, since you said you don't have much experience with webpage design, you may want to download the Macromedia Dreamweaver Trial Version. It will last for 30 or 31 days, so that is plenty of time for you to create the site with all the other pages, etc. Then, if you need to implement any scripts into it, there are plenty of people here who know PHP, JavaScript, and other various programming and scripting languages.

Malpine Walis · 05-18-06, 09:03 AM

I am going to buck the trend and recommend that you start with frames. My main reason being that the shop is already open and you probably want to get something on the business cards and stationary kind of soon. Once you have any type of presence up, you can set up another site on your local machine for learning purposes and when you have that looking the way that you like, you can always delete the old site and copy the new site over in your FTP program in a few seconds to a couple of minutes. Heck but you can update the site weekly if that floats your boat.

Yes, frames are old school stuff but any of the easy web creator apps can slam together a halfway decent set of frames in no time at all. If you have any version of linux, you should already have Quanta+ pre-installed or for windows, you can grab something like HotDog or HoTMetaL off of any free-ware site.

Just do your initial design on a monitor that is set for 640x480 so that your frames size right, set the frameborder variables to zero and use the same background color on every page and only people who know how to read your code will be any the wiser.

After that, get a couple of good books on the subject. Allow me to recommend the following:

Web Design in a nutshell By O'Reilly Associates is a good quick reference type of book for when you just want to look up a specific code and the context and syntax for making it work for you.

Sams Teach Yourself Web Publishing with HTML & XHTML in 21 Days covers the stuff that you need to know in greater depth. It hardly replaces taking a class somewhere but it will get you up and running as fast as you apply yourself.

Elif Tymes · 05-18-06, 12:52 PM

DO NOT use frames. It makes your site nearly impossible to bookmark properly. I would suggest learning CSS. It's about 10x faster going 0 to CSS than going from 0 to frames.

Simply rushing something out the door will generally hurt your site more than it will help. If absolute need be, make a "coming soon" page, with contact info on it that people can use to get ahold of the business. Rushing a sloppy site out using frames just because of a time crunch is not a good idea at all!

Gnufsh · 05-18-06, 08:47 PM

I disagree about the coming soon page. Those are really annoying. I agree on the do it right first thing.

05-17-06, 07:01 PM	Thread Starter #1
ps2cho Member Join Date: Oct 2004 Location: Socal, no hella here	HTML Layout Help Hey guys, My mother has successfully opened her beautytherapy business in England and she wants me to make her a website. Now i have not really dont any website designing before and i need help with layout. What would be the best way to do it ? Tables or frames? Is there any good tutorials on how to create a good looking page? I am concerned about how it will look as it has to be professional. Nothing too elaborate, basically just a main page, services offered and contact information. Any thoughts? Thanks, ps2cho __________________ Q6600 @ 3.6GHz:.:GA-P35-DS3L:.:4GB DDR2 RAM:.:BFG GTX 260:.:Ultra 120 eXtreme:.:Corsair 520HX X2 3600+ @ 3.1GHz:.:GA-MA78GPM-DS2H:.:1GB DDR2 RAM:.:eVGA 7900GS 256MB:.:Corsair 400CX HTPC: X4 620 0.9v:.:DFI LP JR 790GX:.:2GB DDR2 RAM:.:Asus HD4550 512MB:.:Corsair 450VX:.:32" Vizio 1080p HDTV Laptop: Sony Vaio CW27FX:.:Intel Core i5 @ 2.4GHz:.:GT 330M 512MB:.:4GB DDR3 RAM:.:14" LED AMD CPU List:.:How to HLDS:.:Heatware "The constant assertion of belief is an indication of fear."-Jiddu Krishnamurti
	QUOTE Thanks

05-17-06, 08:15 PM	#2
amazon10x Member Join Date: Feb 2003 Location: College Park, MD	Use CSS for the layout. Definitely do NOT use frames. There are many tutorials on the web if you search google for 'css layout tutorial'. I can probably post some more help later.
	QUOTE Thanks

05-18-06, 12:21 AM	#3
Gnufsh Senior Member Join Date: Dec 2001 Location: June Lake, California	Neither frames nor tables. Frames are just bad, and the W3C says that you are only complient with their standard if you only use tables for tabular data (not layout). CSS layouts tend to have substantially less code and are better in general. css basics: http://www.cssbasics.com/ css layout: http://www.subcide.com/tutorials/csslayout/ __________________ Lost access to the classifieds? Look here. Forum Policies Sig Rules "Men occasionally stumble over the truth, but most of them pick themselves up and hurry off as if nothing ever happened." -Sir Winston Churchill
	QUOTE Thanks

05-18-06, 12:44 AM	#4
Enablingwolf Senior Member overclocking at the speed of plaid Join Date: Jun 2004 Location: Strongsville	If your having issues with layout. Here is a good start. There is a bunch of open source layouts to start with, it is a great help getting a boost. Then expand into your own design as your skill comes along. Before you know it, your making a nice page in no time. http://www.oswd.org/ Then reinforce it with some css of your own choosing. It explains how the css will work and gives you an editor to fiddle with too. Good to start on. If you are sharp you can pick up css in a day or two. Then learn more as the need arises. It is easier to learn css over the html part. Plus it is very powerful in the right hands. It will get you way from tables and frames. Which are an old standard and will make more code to load up and slow up your pages. http://www.w3schools.com/css/ Using an external sytel sheet will be the best route, since you can add pages and keep everything clean in the code. It will give a slight boost to the page load times to. Since it will only load the code once per stylesheet. So your not loading a heavy 22kb+ html page. I tend to not include the images on the actual html since images are actually optional. It helps later on when you are going to make edits. No shuffling through a bunch of css to get to the html. Plus it makes for nice looking html. Here is one of my old pages: http://www.enablingwolf.com/ewtemp/index.html The HTML for it: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <link rel="shortcut icon" href="Assets/favicon.ico" /> <title>www.enablingwolf.com</title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <link rel="stylesheet" type="text/css" media="screen" href="Assets/styles.css" /> </head> <body> <div id="container"> <div id="header"><h1>Enablingwolf</h1><h2>Where we hang out</h2></div> <div id="leftcol"> <h1>Welcome to Enablingwolf.com</h1> <p>Glad you could make it. I am hoping you take a look around and enjoy your visit. </p> <p><span class="style1">The picture Photos link is passworded.</span> If you need assistance please contact me using the contact form provided on the site. </p> </div> <div id="rightcol"> <img src="Assets/pic.jpg" alt="picture" width="170" height="170" class="portrait" title="Your browser or the link is broken."/> <h1>Navigation</h1> <ul id="nav"> <li><a href="index.html">Home</a></li> <li><a href="Fun%20stuff/index.html">Fun stuff </a></li> <li><a href="Computer/PcPage.html">Computer Projects </a></li> <li><a href="Pictures/Photos.htm">Photos Login</a></li> <li><a href="../Dale/BluegrassPage.htm">Dale's Pages </a></li> <li><a href="Contact/contact.html">Contact</a></li> </ul> <h1>Link List:</h1> <ul> <li><a href="http://www.pogo.com">Go to Pogo.com</a></li> <li></li> </ul> </div> </div> </body> If you notice, the header/background image tags are not present in the HTML. They are held in the stylesheet. I was lazy and did not include the other image in the rightcol div. Since I change that one alot and it is optional to me. I use it as a spacer and it was an afterthought. I could easily add it to the style later on if I was using the page. There is only one naviagtion link active on the page. My father in laws pages that I built for him and his love of music( aka Dale's Pages /bluegrass pages). Very simple layout there too. Classic design and done in css. I can change just about all his pages looks in a matter of seconds since i chose an external sheet to handle the layout and other goodies. __________________ No one ever expects Aloysius Snuffleupagus Last edited by Enablingwolf; 05-18-06 at 01:04 AM.
	QUOTE Thanks

05-18-06, 08:11 AM	#5
anon1 Member Join Date: Jun 2005	Well, since you said you don't have much experience with webpage design, you may want to download the Macromedia Dreamweaver Trial Version. It will last for 30 or 31 days, so that is plenty of time for you to create the site with all the other pages, etc. Then, if you need to implement any scripts into it, there are plenty of people here who know PHP, JavaScript, and other various programming and scripting languages.
	QUOTE Thanks

HTML Layout Help

Internet Services

Website Development

Tech Hardware

05-18-06, 09:03 AM	#6
Malpine Walis Disabled Join Date: Nov 2001 Location: Banned Camp	I am going to buck the trend and recommend that you start with frames. My main reason being that the shop is already open and you probably want to get something on the business cards and stationary kind of soon. Once you have any type of presence up, you can set up another site on your local machine for learning purposes and when you have that looking the way that you like, you can always delete the old site and copy the new site over in your FTP program in a few seconds to a couple of minutes. Heck but you can update the site weekly if that floats your boat. Yes, frames are old school stuff but any of the easy web creator apps can slam together a halfway decent set of frames in no time at all. If you have any version of linux, you should already have Quanta+ pre-installed or for windows, you can grab something like HotDog or HoTMetaL off of any free-ware site. Just do your initial design on a monitor that is set for 640x480 so that your frames size right, set the frameborder variables to zero and use the same background color on every page and only people who know how to read your code will be any the wiser. After that, get a couple of good books on the subject. Allow me to recommend the following: Web Design in a nutshell By O'Reilly Associates is a good quick reference type of book for when you just want to look up a specific code and the context and syntax for making it work for you. Sams Teach Yourself Web Publishing with HTML & XHTML in 21 Days covers the stuff that you need to know in greater depth. It hardly replaces taking a class somewhere but it will get you up and running as fast as you apply yourself.
	QUOTE Thanks

05-18-06, 12:52 PM	#7
Elif Tymes Member Join Date: Dec 2004	DO NOT use frames. It makes your site nearly impossible to bookmark properly. I would suggest learning CSS. It's about 10x faster going 0 to CSS than going from 0 to frames. Simply rushing something out the door will generally hurt your site more than it will help. If absolute need be, make a "coming soon" page, with contact info on it that people can use to get ahold of the business. Rushing a sloppy site out using frames just because of a time crunch is not a good idea at all! __________________ Heatware: Trolls: You mess with one of us, you mess with SSS Gamertag: Elif Tymes
	QUOTE Thanks

05-18-06, 08:47 PM	#8
Gnufsh Senior Member Join Date: Dec 2001 Location: June Lake, California	I disagree about the coming soon page. Those are really annoying. I agree on the do it right first thing. __________________ Lost access to the classifieds? Look here. Forum Policies Sig Rules "Men occasionally stumble over the truth, but most of them pick themselves up and hurry off as if nothing ever happened." -Sir Winston Churchill
	QUOTE Thanks

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search