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 .
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 .
Figure 4-2. Planning the page layout
Search WWH ::

Custom Search