Page Authoring
A page in the International Retail Site is a combination of an .aspx page and a codebehind page, either an .aspx.vb page or an .aspx.cs page. The .aspx page contains the user interface, and the codebehind page contains the functionality. The user interface in the .aspx page is defined by a combination of HTML and included Web controls. This separates the design and appearance from the functionality of the site. It also clearly separates the authoring between design and development. A site developer can change the design and functionality of a page by adding or removing controls and modifying the HTML. A site developer can change the appearance by changing images and styles. If no new functionality is required, adding a new page can be simple.
Changing the Appearance of the Site
Site Navigation Framework
Changing the Appearance of the Site
The International Retail Site supports "skins". In other words, the appearance of the site can be changed through a collection of graphics files and a cascading style sheet (.css) file.
The basic structure of the pages in the site is a collection of tables. By using a group of cells to represent a design element it is possible to simulate non-rectangular objects on the screen and still have text in those objects that can be controlled through code.
For example, the following table structure can be used to represent a box with rounded corners.
.gif "Element Table Structure")
The peripheral cells contain the graphic element for a corner or a side of the box, and possibly a background color. The central cell contains the background color and text. Since the text can be from a localized string resource, the graphics do not need to be localized. Also, the text can be changed under programmatic control as needed, and the .css file can control the appearance.
This design principle has been applied to the entire site. For example, the following figure shows a schematic view of the main page for the International Retail Site.
.gif "Main Page Schematic")
With the "skin" applied, it looks like this:
.gif "Retail2002 Main Page With Skin")
Site Navigation Framework
A well-designed site is structured so that a user can easily understand it. As you add features to your site you will need to consider how to make them discoverable and easy to use.
The following figure shows the International Retail Site navigational framework.
.gif "Retail2002 Site Navigation Framework")
Copyright © 2005 Microsoft Corporation.
All rights reserved.