目录
在每个项目的开始，我们最先做的事情一般就是页面布局（高风险实验除外），因为一个好的页面不仅仅能最大限度的吸引用户的眼球。还能帮助我们对自己的产品有一个直观的认识，帮助我们发现需求。
设计之初不妨用笔在纸上先勾勒一个草图，这可以尽量节约我们的时间。
图1
我们要实现的布局主要为4部分。
页头：页面logo、广告、菜单及用户登录信息。
页尾：版权说明及其它描述信息
左边栏：用户定义信息、网站推荐等
主题：分类查询、热门商品、热门商户等
比较明显的，页头及页尾是各个页面的公有部分，我们通过模板来实现。
打开visual studio 2008使用快捷键Ctrl+Shift+N打开新建项目窗口如图2，选择web，选择Asp.Net Web Application。选择Framework版本，visual studio 2008 将为我们筛选出适用与该版本的项目类型，这里我们选择3.5。输入Name、Location、Solution信息点击确认。
图2
将项目中自动添加的Default.aspx删除。
创建模板：
选中项目名称使用快捷键Ctrl+Shift+A添加新的文件。选择Master Page,输入名称Main.Master确定。
图3
生成代码如下：<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site2.master.cs" Inherits="WebApplication2.Site2" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> <title>Untitled Page</title> <asp:ContentPlaceHolder ID="head" runat="server"> </asp:ContentPlaceHolder></head><body> <form id="form1" runat="server"> <div> <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"> </asp:ContentPlaceHolder> </div> </form></body></html> IDE为我们生成了两个ContentPlaceHolder控件。应用该模板的页面将仅能在ContentPlaceHolder内操作。
（小提示：使用菜单可以在设计器上显示标尺帮助我们设计，如图4.）
图4
将<title>Untitled Page</title>移动到id为head的ContentPlaceHolder内
<asp:ContentPlaceHolder ID="head" runat="server"> <title>Untitled Page</title> </asp:ContentPlaceHolder> 这将使我们应用该模板的页面可以定义页面title.
在ContentPlaceHolder1上面添加一个div"<div id="pageHeader"></div>"。
在ContentPlaceHolder1下面添加一个div"<div id="pageFooter"></div>"。
Ctrl+Shift+A 选择Web Content From 输入Name:MainForm.aspx确定,选择Main.Master模板。
生成代码：
<%@ Page Language="C#" MasterPageFile="~/Main.Master" AutoEventWireup="true" CodeBehind="MainForm.aspx.cs" Inherits="WebApplication2.WebForm1" Title="Untitled Page" %> <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"> </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server"> </asp:Content>在Content2中添加两个div
<div id="sideleft"> <div> <p>left side</p> </div> </div> <div id="sideright"> <p>right side</p> </div> 右键点击MainForm.aspx，选择“View in Browser”预览界面。很明显，现在并未达到我们的要求。因为我们并为向页面添加样式。
Ctrl+Shift+A 选择Web选择Style Sheet输入Name"Main.css"确定。
使用菜单打开Manage Stytles面板。
图5
打开Main.Master
在Manage Stytles面板上点击"Attach Style Sheet"选择Main.css。
在Manage Stytles面板上右键点击Main.css>New Styles创建新样式,生成如下代码
.page
{
top: 0px; right: 0px; bottom: 0px; left: 0px; position: fixed;
} 点击设计器下方的Split按钮将设计器改为拆分窗口，如图6。在代码窗口内将光标定位在form段，在Manage Stytles中右键点击page>Apply Style.应用样式
代码：<form id="form1" runat="server" class="page">（Apply Styles面板同样具有此功能，并可预览Style），另外也可以手写应用Style，Visual Studio 2008已经对CSS有了很好的智能感知。
图6
将模板最外面的DIV 的id设置为“wrap”，为ID为wrap的div定义样式
#wrap { BORDER-RIGHT: black 0px solid; BORDER-TOP: black 0px solid; MARGIN: 0px auto; OVERFLOW: hidden; BORDER-LEFT: black 0px solid; WIDTH: 1000px; BORDER-BOTTOM: black 0px solid}以#开头的样式将根据页面元素的ID，自动应用。
对header应用样式
.header_div { CLEAR: both; MARGIN: auto; WIDTH: 1000px; HEIGHT: 90px}对footer应用样式
.footer{ FLOAT: left; WIDTH: 100%; text-align: right; PADDING-RIGHT: 2px; PADDING-LEFT: 2px; FONT-SIZE: 14px; PADDING-BOTTOM: 1px! important; PADDING-TOP: 3px! important; border-top: #787888 1px solid; border-top-color: #CCFFCC;}
对于CSS的定义网上已经有大量的资料，这就不多说了。
完整示例代码：
Main.Master
Code
CodeMain.css
Code