I’ve been asked lately to code Web sites for people who apparently cannot afford my services
Rather than working out a budget with me, they hire another coder (usually for less than what I charge) who screws everything up (and I do mean everything) and then they come back to me asking for help
It’s one thing to go to a public forum (like
digitalpoint com” title=”DigitalPoint Forums”>DigitalPoint
I will be covering just about everything over the next few weeks, but I will do my best to keep the articles short (the browser series I’m working on is a behemoth already, and I just started that)
To kick things off though, I’m going to talk about document structure
After you have built a few Web sites you will notice that (almost) every site follows a surprisingly simple structure: a header, menu (either along the top directly below the header, or along one of the sides as a column), main content area, a sidebar containing additional information (on occasion), and a footer
Maybe it’s just my Western bias kicking in here (reading from left to right), but since I read pages this way, it’s also how I tend to code them (unless circumstances dictate otherwise)
The header most often contains the logo, which may or may not be a link to the home page
Sometimes it’s small, spanning only a few hundred pixels in width (usually around 250 or so)
Other times the header will span the entire width of the Web page
Either way is fine, as long as it fits in with the site’s overall look and feel
Sometimes the menu will appear to be in the header, along with a search form and (possibly) other helpful links, such as a help/FAQ page, an about page, or a contact page
Other times, the menu will appear to be directly below the header, running from side to side, or will even be placed on one of the sides, usually the left, but occasionally on the right
After the menu is the page content
This will of course change from page to page, but the overall size of the container will stay the same
What goes in here will depend on the page; some pages will have forms, others will have regular text (like what you’re struggling to stay awake to read right now)
I’m sure you get the idea
In some cases, you’ll have a sidebar which will contain additional information, or even advertisements (possibly both)
A lot of people think you have to code this before the content, but I’m going to show you how to code the sidebar to come AFTER the content in the HTML source code while having it appear on one of the sides without using absolute positioning
It will involve the use of CSS (Cascading Style Sheets), and thus will be saved for another article
Last, but most definitely not least, we have the footer
In most cases, the footer just contains the copyright notice (or other legal mumbo jumbo gobbledygook) and possibly some “helpful” links, such as the ever-present help/FAQ, contact page and about page
A recent trend, however, has the footer containing other links
April 4th, 2007 at 9:00 pm
I’m unraveling at the seams with anticipation of these articles, Dan. If the quality of posts continues here on Search-This, I might end up visiting it more often than Sitepoints’ (which has been a little slow as of late). Keep up the great work, S-T Team!
– malikyte, Sitepoint forums
April 5th, 2007 at 4:25 am
People always like to go with the lowest bidder – even though that’s not really their first choice.
I look forward to this series.
April 5th, 2007 at 9:37 am
Hey Brendon, thanks for the kudos and I’m glad you’re enjoying the articles. We have some mighty fine
geekspeople writing here at Search-This. It’s nice to see SitePointers over here 🙂April 7th, 2007 at 3:17 pm
Nice to be here. 🙂
@Mark: I think this continues on the known problem that people don’t realize there are web development professionals, and then there are web development hobbyists (who also charge for their work). It’s difficult to know the distinction without some education of their own.