HTML and CSS Reference
In-Depth Information
I will be using the Chrome browser for this project as it supports all of the CSS features that I will be
demonstrating. At the time of this writing the other browsers do not support one or more of these features. By the
time you read this other browsers may support these also.
■
i explained how to install the Web Matrix application in Chapter
1
. This is a free download provided by
Microsoft. if you prefer, you can also implement the web site using Visual studio with the MVC4 project template.
After creating the project using the Basic template, add a
Home
folder under the View folder and create a view named
Index
. you'll also need to create a controller named
HomeController
using the Empty MVC controller template.
Follow the instructions in the rest of this chapter using the
Index.cshtml
file (instead of
Default.cshtml
). you can
also download the completed Visual studio project that is included in the source code from
www.apress.com
.
Note
Planning the Page Layout
Before creating a new web page, it's a good idea to sketch out the basic page structure. This will help you visualize
the overall layout and see how the elements are nested together.
The page that you will develop in this chapter will use a
header
and
nav
element at the top and a
footer
element at the bottom. The main area in the middle will use a
div
element and have two side-by-side areas, each
with a series of
article
tags. The larger area will be enclosed with another
div
element and provide the primary
content, which is organized into articles. The smaller area, on the right, will use an
aside
element and will
contain a
section
element. This will contain a series of
article
elements that will present related information.
This is illustrated in Figure
4-2
.
header
nav
div
div
aside
section
section
section
article
article
article
article
article
article
footer
Figure 4-2.
Planning the page layout
