Layout Standards?

Discussion in 'Web Development & Web Hosting' started by tobo, Dec 12, 2008.

  1. tobo

    tobo Bit Poster

    28
    1
    8
    Dec 12, 2008 #1
    Remove Advertisement - Premium Membership
    Hi I am quite new to web design and want to understand some of the standard working practices. any replies or help is welcome.

    firstly I'm curiouse about div areas. is it practical/standard to use many div's within div's as way to layout a page/site? or is this just exessive and could it slow down load time?

    next is about Tables. are they used as much now? I understand there use for layouts depriciated but is there a reason since they seem to me to be quite simple to use?

    What is the issues regarding the use of frames? I often use iframes in sites I have created I find them extremely helpful. Are they acceptible/standard?

    and lastly if I were to design a site for a client and host it? Who would I continue to ern revenue from that client with hosting costs and SEO? how much is acceptible to charge for hosting?

    I hope these questions arent to nieve but I would appreciate some advice and am happy to be told if I have the wrong end of the stick. :oops:

    Many thanks! :D
     
  2. Kitkatninja
    Highly Decorated Member Award 500 Likes Award

    Kitkatninja aka me, myself & I Moderator

    11,143
    559
    383
    Dec 12, 2008 #2
    Remove Advertisement - Premium Membership
    Unfortunately web design is not one of my fields, someone with alot more experience in this field should be along soon, however as you're doing the CIW Managers course, should it have been already covered?

    Or when you say you're doing the course, do you mean you've booked the whole 5 modules at the same time and currently doing the Foundation exam?

    -Ken
     
    Certifications: MSc, PGDip, PGCert, BSc, HNC, LCGI, MBCS CITP, MCP, MCSA, MCSE, MCE, A+, N+, S+, Server+
    WIP: MSc Cyber Security
  3. ThomasMc

    ThomasMc Gigabyte Poster

    1,507
    49
    111
    Dec 13, 2008 #3
    I would expect it to be common practice by now, IMO it makes your code a bit easier to read and manage.

    Nope.

    Can do.


    Here is an example layout using divs

    HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Test Layout</title>
</head>
<body>
	<div style="width: 800px;border: 1px solid #000000;">
		<div style="width: 100%;border-bottom:1px solid #000000;text-align: center;">
			HEADER
		</div>
		<div style="float: left;width: 200px;text-align: center;">
			MENU
		</div>
		<div style="float: right;width: 599px;border-left:1px solid #000000;text-align: center;">
			<br />CONTENT<br /><br />
		</div>
		<div style="clear: both;width: 100%;border-top:1px solid #000000;text-align: center;">
			FOOTER
		</div>
	</div>
</body>
</html>
     
    Certifications: MCDST|FtOCC
    WIP: MCSA(70-270|70-290|70-291)
  4. westernkings

    westernkings Gigabyte Poster

    1,432
    60
    107
    Dec 15, 2008 #4
    Tables are pretty obsolete nowadays with the use of CSS however there are still a few things tables do better than DIVs. I personally NEVER use them though.

    Divs don't slow your site down what so ever, just remember

    HTML
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="container">
  	<div id="header"> 
			<div id="logo"></div>
    		<div id="navbar"></div>
	</div>
        	<div id="tophead"> </div>
    <div id="wrapper">
            <div id="content"></div>
            <div id="sidebar"></div>
     </div>  
</div>

</body>
</html>
    CSS

    Code:
    @charset "utf-8";
/* CSS Document */


body{
margin: 0;
font-family: Arial, Helvetica, Georgia, Sans-serif;
font-size: 12px;
text-align: left;
background: #ffffff;
color: #000000;
}

#container{
	background-color: #E8E8E8;
	width: 900px;
	height: 850px;
	margin: 0 auto 0 auto;
	overflow: hidden;
}

#header{
	width: 900px;
	height: 150px;
	background-color: #666666;
}

#logo {
	background-color: #009999;
	width: 400px;
	float: left;
	height: 150px;
}

#navbar{
	background-color: #33CC66;
	height: 150px;
	width: 485px;
	float: right;
}

#tophead{
	height: 150px;
	width: 900px;
	background-color: #990000;
	margin-top: 15px;
}

#wrapper{
	height: 500px;
	margin-top: 15px;
}

#sidebar{
	float: right;
	height: 500px;
	width: 250px;
	background-color: #00FFFF;
}

#content{
	background-color: #FFFF00;
	float: left;
	width: 625px;
	height: 500px;

}
    ID are boxes that are only used ONCE in the entire site, just as the logo box at the top of the site.

    classes are used more than once for instance if you want paragraphs placed side by side hence you would need more than 1 div but can use one set of CSS rules.

    Hosting is cheap nowadays, you hosting it would be pointless, and as to charging the client, that would have to be agreed on before you started hosting, SEO isn't really chargeable in the long run.

    Above is a really basic wireframe

    PSD to HTML Tutorial HIGH QUALITY

    You may find that tutorial useful, it's a good hour or so of really high quality tips from start to finish.
     
    Certifications: MCITP:VA, MCITP:EA, MCDST, MCTS, MCITP:EST7, MCITP:SA, PRINCE2, ITILv3
  5. MLP

    MLP Kilobyte Poster

    305
    19
    59
    Dec 15, 2008 #5
    Hi

    Most sites I create use Divs, and I use nested divs with no problems.

    Tables should really only be used for tabularised content, E.g. a telephone list. This improves accessibility for non-graphical readers, and 'speaking' readers (used by people with sight dificulties). See here for more info.

    Can't help here, I'm afraid, I've never used them, I've used server-side includes instead.

    Enjoy the course - I've looked at it myself before, and it looks very interesting.
     
    Certifications: HND Computing
  6. supernova

    supernova Gigabyte Poster

    1,422
    21
    80
    Dec 18, 2008 #6
    Yes fine, DIV uses inheritance make use of it. dont embed CSS keep separate. Think of it like this, you should be able to "re-skin" , as it were, a site by just changing the CSS file. I often have two CSS files one is site wide and one for any page specific layout changes.

    Tables are for tables , dont use for columns or page layout.


    I personally don't use them i think they are horrible, used to use in web app frontends but now use AJAX frameworks.
    Includes are good ie site wide menu


    look at hosts that offer affiliate deals, or you could use reseller packages. In old days i would resell, well actually i owned two dedicated servers in the states had hard time moving from reseller hosting, if i were starting out again i would be an affiliate I just dont think its worth the hassle.

    With SEO pm me , i know a great lady who is a fulltime SEO expert since 90's. She pays for client referrals on a monthly bases. She doesn't have anything to do with design or hosting just SEO (be careful there is so much BS on the net about SEO)

    Use code validating services and documentation from W3W to learn. You may also like to learn about CMS systems, blogs and e-commerce store scripts , learn to make templates for them, install/setup and manage.
     
    Certifications: Loads
    WIP: Lots
  7. tobo

    tobo Bit Poster

    28
    1
    8
    Dec 23, 2008 #7
    Thank you for all the replies that answers a lot of questions. I notice however that in the two examples given Westernking has given a seperat stylesheet and ThomasMc has given style attributes within the tag? is either of these better or worse than the other? I suppose the seperate styesheet would be easier to edit accross a site?
     
  8. westernkings

    westernkings Gigabyte Poster

    1,432
    60
    107
    Dec 23, 2008 #8
    Always use a separate style sheet for the MAJORITY of styling. Occasionally it may just be easier to use in-line styling for a few things here and there.
     
    Certifications: MCITP:VA, MCITP:EA, MCDST, MCTS, MCITP:EST7, MCITP:SA, PRINCE2, ITILv3
  9. ThomasMc

    ThomasMc Gigabyte Poster

    1,507
    49
    111
    Dec 28, 2008 #9
    I used in-line to simplify the example, but according to the web using an external stylesheet can speed up you site load by 70% :rolleyes:
     
    Certifications: MCDST|FtOCC
    WIP: MCSA(70-270|70-290|70-291)

Share This Page

Loading...
Remove Advertisement - Premium Membership
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Accept Learn More...