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

Godaddy | Domains | Godaddy offers | Coupons | discount

By : An3 Web Solution

Godaddy provides domain names with the best offers. For web hosting Godaddy gives more discounts. To..

What are the IOS App Development Trends for 2020?

By : Cynixit

There is lots of competition in technology that we need to be aware of in the latest trends like iOS..

Tableau Prep Builder know more about it

By : Java

Tableau Prep Builder is a tool in the Tableau product suite designed to make preparing your data eas..

Tableau Prep Builder know more about it

By : Java

Tableau Prep Builder is a tool in the Tableau product suite designed to make preparing your data eas..