New page layout for critique

tomdkat · 13-Jun-2006, 05:05 PM #1

Ok, every now and then I help someone with an issue they have with their website. More often than not, they're using ancient HTML coding techniques which result in erratic behavior depending on which browser is used to view the page. When I make tweaks to sites like this to help address issues they have, I tend to "start fresh" with a "framework", if you will, that aims to use standards compliant HTML to best address cross browser rendering issues.

So, here is the HTML I sometimes start out with. The idea is to have the page display in a box that results in no scrolling on a 800x600 display. This isn't a hard requirement, just something I shoot for. The more important thing is I'm wanting to migrate away from using HTML tables for page layout. I've seen many sites that talk about transitioning from HTML tables to CSS for page layout, but those sites are static and when I have questions, I tend to get stuck.

So, hopefully we can start with my template and update it to evolve into something useful and in such a way that I can learn what the hell is going on.

Here is the HTML:

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">
<head>
  <meta content="text/html; charset=UTF-8"
 http-equiv="content-type" />
  <title>Page Template</title>
  <style type="text/css">
  .pagecontent { display: block;
    width: 775px;
    height: 590px;
    margin-left: auto;
    margin-right: auto;
    }

  .header {  }

  .contentbody {  }

  .footer {  }


  </style>
</head>
<body>
<div style="border-style: solid;" class="pagecontent">
<div style="border-style: dotted; border-color: rgb(255, 0, 0);"
 class="header">Header</div>
<div style="border-style: dashed;" class="contentbody">Content</div>
<div style="border-style: dotted; border-color: rgb(51, 255, 51);"
 class="footer">Footer</div>
</div>
</body>
</html>

I put borders around the various DIVs to illustrate what will go where, etc. This should be centered in IE, Mozilla, and Opera (don't have access to Safari or KDEs browser).

First question, any issues with how I'm starting out?

Peace...

deepdiver01 · 14-Jun-2006, 06:35 AM #2

Hi tomdcat.

Well, it's a start.

You are going to have probs when you try to put columns in there.

How many pages are you expecting to be on this site. It is going to be a pain in the butt to make new pages.

I would suggest that you go for CSS layouts instead, as it will be infinitely easier to make a new page and to alter the existing pages.

There are plenty of 2 column and 3 column liquid layouts (will resize for the browser window) that are tried and tested.

I would also suggest that you look at using php or a similar server side language, even if only to load your footer, header, column, content files, etc. There will be a small amount of php knowledge required to get it going, and in the content, header, etc files, you basically use html anyway.

If you need any help, just let me know.

tomdkat · 14-Jun-2006, 10:24 AM #3

Quote:

Originally Posted by deepdiver01

You are going to have probs when you try to put columns in there.

Why is that? If I wanted a menu on the left side, couldn't I put it inside the "contentbody" DIV?

Quote:

How many pages are you expecting to be on this site. It is going to be a pain in the butt to make new pages.

This template isn't for any particular site so I have no idea how many pages there would be. Why would it be a pain in the butt to make new pages?

Quote:

I would suggest that you go for CSS layouts instead, as it will be infinitely easier to make a new page and to alter the existing pages.

The HTML above doesn't implement a CSS layout? Sorry for all the questions, but that's why I posted the HTML snipet.. to get feedback and find out what is wrong with it.

Quote:

There are plenty of 2 column and 3 column liquid layouts (will resize for the browser window) that are tried and tested.

I've seen those but I guess I wanted to try a different kind of layout since the 2-3 column layout is so common these days.

Quote:

I would also suggest that you look at using php or a similar server side language, even if only to load your footer, header, column, content files, etc. There will be a small amount of php knowledge required to get it going, and in the content, header, etc files, you basically use html anyway.

Why use PHP over static HTML if dealing with static content?

Thanks for your feedback!

Peace...

deepdiver01 · 15-Jun-2006, 06:58 AM #4

Quote:

Originally Posted by tomdkat

Why is that? If I wanted a menu on the left side, couldn't I put it inside the "contentbody" DIV?

You most certainly can. I was just thinking down the track when you want to make changes and adjustments. It is a lot of recoding all the pages. It would be easier to recode one file and have it take effect throughout the site.

Quote:

Why use PHP over static HTML if dealing with static content?

Again, it for the ease of altering the content of the site later on down the track.

Say for instance that you wish to add some detail into the header of the site. Instead of having to change every page on the site, all you would have to do is to alter the file that holds the header data and it will change every page on the site.

I am including a couple of files that I bashed up for you to have a look at. Muck around with say the header file and watch how it changes when you view the index file.

It really is that easy. You put anything you want in the header, footer, etc file as if they were html files.

Quote:

The HTML above doesn't implement a CSS layout?

My aploogies. It does utilise CSS. Again, if most of the CSS is going to be the same throughout the site, it would be better to have an external stylesheet and then you can call that sheet at the top of each page instead of having to insert the CSS code into each page.

Quote:

Sorry for all the questions, but that's why I posted the HTML snipet.. to get feedback and find out what is wrong with it.

Questions are always good. That is what we go to TSG for.

Quote:

I've seen those but I guess I wanted to try a different kind of layout since the 2-3 column layout is so common these days.

Yep, they sure are. You will need to put some navigation in there somewhere. Plus, you may want to add advertising, spot news, etc.

You can put the menu bar in the content section, but won't that make it look like a column layout with header and footer anyway?

There are so many ways to alter the columns to individualise your site.

Plus, most of the readily available columns have made adjustments to rectify most cross browser problems.

Hope this helps a little.

tomdkat · 15-Jun-2006, 10:58 AM #5

Quote:

Originally Posted by deepdiver01

You most certainly can. I was just thinking down the track when you want to make changes and adjustments. It is a lot of recoding all the pages. It would be easier to recode one file and have it take effect throughout the site.

Gotcha, I'm tracking.

The other 2 and 3 column CSS layouts I've seen would appear to have the same or similar problem, since they're still static HTML w/ CSS styling.

I can definitely see how a dynamically generated pages can be easier to maintain when content needs to change but at the cost of knowing the scripting language being used to be able to make the updates, etc. I've come across one site that's written in PHP and the person who created the site is long gone and the site owner can't make changes since she doesn't know PHP.

Quote:

Say for instance that you wish to add some detail into the header of the site. Instead of having to change every page on the site, all you would have to do is to alter the file that holds the header data and it will change every page on the site.

Yep, I get the idea but I've never actually done it (at least not yet). A server-side include sounds like it might be a better solution than a scripting language, if the header and footer info remains fairly constant. I would imagine one would update the file on the server that is being included and voila, it's reflected throughout the site. What are the pros/cons of server-side includes over a server-side scripting language?

Quote:

I am including a couple of files that I bashed up for you to have a look at. Muck around with say the header file and watch how it changes when you view the index file.

Will do.

Quote:

My aploogies. It does utilise CSS. Again, if most of the CSS is going to be the same throughout the site, it would be better to have an external stylesheet and then you can call that sheet at the top of each page instead of having to insert the CSS code into each page.

Yep, I was planning on going with external style sheets but used an internal one in the above example mainly for convenience.

Quote:

You can put the menu bar in the content section, but won't that make it look like a column layout with header and footer anyway?

It could but that would depend on the kind of menu used. I'll work up another iteration of the above HTML with some menu ideas that interest me.

Quote:

Plus, most of the readily available columns have made adjustments to rectify most cross browser problems.

But those adjustments should be at the CSS level (if CSS is being used for the stylying), correct? Meaning if I get the CSS right, I shouldn't have cross-browser issues unless you're saying there's something inherent to the columnar layout itself which addresses cross-browser rendering more effectively than a "top down" kind of layout. Now that I've posted that, I'm wondering why a columnar layout is so prevalent (outside of there simply being many examples of that kind of layout).

Quote:

Hope this helps a little.

Yep, helps a lot!

Peace...

deepdiver01 · 16-Jun-2006, 03:08 AM #6

Php can be as simple or as intricate as you want it to be.

If you are looking at a simple iformation site, basically all you need to know is what is on those pages.

Say for instance you wanted to make a new page with some sort of info.

All you would have to do is to give the page the layout, pop in the <?php require ?> for the header, footer, columns, etc and you can either type out the content there or you can have the text file elsewhere and call it with another require.

All you would need to know about php is the require call basically. Everything else is in html.

Mind you, once you do get into serverside languages and realise their power, you will be using them more extensively.

Have fun.

tomdkat · 16-Jun-2006, 01:49 PM #7

Quote:

Originally Posted by deepdiver01

Php can be as simple or as intricate as you want it to be.

Yep, I fully understand that. The problem is, those who aren't programmers or even computer people (really) are in a position to perform maintenance of their sites. PHP, at any level, will be greek to them. In the case I cited above, the person who developed that site did it in PHP and that person is no longer able to be reached. The site owner wants to make updates and can't because they don't know PHP. Of course, they would want to be able to make minor mods to their site and not have to pay someone to do that but right now they're stuck.

Obviously, this is attributed to how that particular site was developed and isn't a problem inherent to PHP itself but it's a reality that does exist and needs to be dealt with by those encountering this kind of thing. If there is dynamic content or interactive content on the site, scripting languages are a great way to go. For static content, I'm not sure what pros there would be to a scripting language over server-side includes. What pros would there be?

Peace...

Search
Search in:
Show Threads Show Posts
Advanced Search

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)