2.4 实训
——页面布局综合练习

2.4.1 实训目的

进一步理解在Visual Studio环境中创建、编辑和引用CSS样式表文件的基本步骤。理解层元素在页面布局中的重要作用及使用方法。综合运用CSS+DIV布局技术设计出实用的网站主页。

2.4.2 实训要求

新建一个ASP.NET空网站，向网站中添加一个Web窗体页Default.aspx。在Default.aspx中使用CSS+DIV技术设计出如图2-24所示的网站主页效果。要求页面中导航栏和“销售排行”中的内容使用ASP.NET标准控件HyperLink，“商品名称”“用户名”和“密码”栏使用ASP.NET标准控件TextBox，所有按钮使用ASP.NET标准控件Button，“商品种类”栏使用ASP.NET标准控件DropDownList。

2.4.3 实训步骤

1.准备需要的图片文件

任何一个网页的页面设计都会用到一些图片文件，本实训页面设计中需要的图片文件如图2-25所示。

新建一个ASP.NET网站，在站点文件夹中创建一个名为images的子文件夹，将本实训中需要的所有图片文件复制到该文件夹中。如果在解决方案资源管理器中不能看到新建的文件夹，可右击网站名称，在弹出的快捷菜单中选择“刷新文件夹”命令使其显示出来。

2.设计页面布局

如图2-26所示，根据设计效果需要可将页面划分在若干个层中，商品描述信息分别放置在两个表中。

各元素说明如下。

div：整个页面所在区域。

div（#logo）：页面Logo栏（网站标题栏）区域。

div（#navigation）：导航栏区域。

div（#left_top）：“商城通行证”区域。

div（#left_bottom）：“销售排行”区域。

div（#right_content）：页面右侧信息显示区域。

div（#search）：搜索栏区域，包含在div（#right_content）区域中。

div（#tab）：商品信息显示区域，包含在div（#right_content）区域中。

table：商品信息显示区域，两条信息使用两个表格。包含在div（#tab）区域中。

div（#bottom_line）：页面底部分隔线区域。

div（#footer）：页面底部版权栏区域。

页面代码及CSS样式的设置请读者自行完成。 87G0eLWHktHUANdkDFpvDj/aslBoFDn/uPdf6FkCrGLKumtLDhAT/r+pBjx+mr2j