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

WLAN Architecture: Cloud-Managed Vs. On-Premises

By : FieldEngineer

The advancement of WLAN architecture plan When enterprise WLANs were at first deployed, each wir..

HP Officejet pro 9025 printer support number to Resolve Your Issues

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

Time is more basic than gold! In this quickly moving tech world, everybody has to an extraordinary d..

Hp support phone number for technical support and troubleshooting

By : Contact US - Help

HP help desk devices are the most used devices in the current era whether they are personnel laptops..


By : Contact Us - Canon Printer Help

Ordinance mx432 printer is one of "Canon Phone Support Number” the stunning printers from arra..