The Home-Page Structure Of Website


The Home-Page Structure of website

The Home-Page Structure

Try to visualize your pages as regions of content, as opposed to rows
and columns, and you’ll find it much easier to develop pages that not
only conform to standards but are also much more flexible—you want
to be able to switch out your style sheets and completely change the
layout of the page.

For Foodbox, we want all the content for our sidebar to be in its own
region, and we want all the content for our main area to be in its own
region. We’re going to do the same thing we did when we created our
mock-up—divide the page up into sections.

You can divide your mock-up into four basic regions:
1. header
2. sidebar
3. main
4. footer

These four regions are easy to identify. However, you can build a flexible
structure that you can manipulate easily if you further divide the page
into subsections. The key to accomplishing this is to look for logical
groupings of content.For example, let’s express the mock-up’s regions in
outline form:
• Page
– Header
– Middle
* Sidebar
· Search Recipes
· Browse Recipes
· Popular Ingredients
* Main
– Footer
In this example, we have an overall region called page. We divide this
region up into a header region, a middle region, and a footer region. The
outer, or parent, region, acts as a point of reference that we can use for
positioning, and we can also control the overall page width by changing
the width of the outer region.

The sidebar and main regions are wrapped in another region called middle.
Like the outer page region, this middle region acts as a reference
point, but it also serves another important purpose: it provides flexibility.
We might not want a sidebar region for some of our pages; for example, we
might want a full-width main region for displaying the content
instead. On those pages, we could omit the sidebar and middle regions
and place the content right in the main region, using CSS to resize it.
This structure is fairly common. It’s the structure for your standard
two-column layout with a header and a footer, one of the most common
website types. The neat thing about standards-based design is that you
can reuse this skeleton for another project if you want to, because your
style sheets will define your column widths, colors, and other visual

Semantic Markup

Semantic markup makes sure your document is structured so that
it can be interpreted by machines, devices, or people. For example,
Google’s web crawler uses tags such as h1 and href attributes on links
to determine the importance of web pages and their content.


Keywords: html,designing


Other related blogs

Steps to connect an HP Officejet pro 9015 printer to a wireless network

By : HP OfficeJet Pro 9000 Series All-in-One Printer

Are you feeling worse because you can't find help connecting your wireless HP Office Jet wireless pr..

HP Computer Online contact hp technical support for common problems

By : Contact US - Help

It is very difficult to imagine even one day without computer system and internet. Call our 24*7 HP ..

Reset an hp laptop by pressing the power button| hp laptop support

By : Contact HP - Help

The Hp help is notable and most commonly used gadget for hp laptop support everywhere around the wor..

Yahoo Mail Password Reset Without Phone Number |+1 805 209 2307|

By : Helpskey

Are you a yahoo account holder and you only use yahoo mail for your work. And now you forget your pa..