网页设计基础_实训

<div id="navigation">
<asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/Default.aspx">商城首页
</asp:HyperLink>|
<asp:HyperLink ID="HyperLink2" runat="server" NavigateUrl="~/1.aspx">个人资料
{
background-image: url(images/bg_menu.jpg);
width: 100%;
height: 24px;
text-align: right;
}
#navigation a:link, #navigation a:visited, #navigation a:active
<div style="width: 778px;">
<div id="logo"></div>
<div id="navigation"></div>
<div id="left_top"></div>
<div id="left_bottom"></div>
<div id="right_content">
</asp:TextBox><br />
密&nbsp;&nbsp;码：
<asp:TextBox ID="TextBox2" CssClass="textbox" runat="server" Width="80px"></asp:TextBox>
<br />
<asp:Button ID="Button1" runat="server" CssClass="button" Text="登录" />&nbsp;
图
2.1.3 实训步骤
1.
任何一个网页的页面设计都会用到一些图片文件，一般情况下这些图片文件可根据设计需要，事先使用Photoshop等图片编辑软件制作出来。也可以通过搜索引擎（如、等）从Internet中下载。本实训页面设计中需要的图片文件如图2-2所示。
background-image: url(images/bg_left_top.jpg);
background-repeat: no-repeat;
}
.textbox/*用于设置文本框控件的样式，由控件的CssClass属性调用*/
{
margin-top: 4px;
}
.button/*用于设置命令按钮控件的样式，由控件的CssClass属性调用*/
div (#search)：搜索栏区域，包含在div (#right_content)区域中。
div (#tab)：商品信息显示区域，包含在div (#right_content)区域中。
table：商品信息显示区域，两条信息使用两个表格。包含在div (#tab)区域中。
div (#bottom_line)：页面底部分隔线区域。
{
background-image: url(images/bg_header.jpg);
background-repeat: no-repeat;/*设置背景图像不平铺*/
width: 100%;
height: 144px;
}
(3)
向CSS样式表文件中添加如下用于页面导航栏样式控制代码：
#navigation
新建一个网站，在站点文件夹中创建一个名为“images”的子文件夹，将本实训中需要的所有图片文件复制到该文件夹中。如果在解决方案资源管理器中不能看到新建的文件夹，可右键单击网站名称在弹出的快捷菜单中执行“刷新文件夹”命令使其显示出来。
2.
如图2-3所示，根据设计效果需要可将页面划分在若干个层中，商品描述信息分别放置在两个表中。
{
margin-top: 6px;
margin-bottom: 8px;
}
#left_top a:link, #left_top a:visited, #left_top a:active
{
text-decoration: none;
color: #3399ff;
}
#left_top a:hover
</asp:HyperLink>|
<asp:HyperLink ID="HyperLink3" runat="server" NavigateUrl="~/2.aspx">购物车
</asp:HyperLink>|
<asp:HyperLink ID="HyperLink4" runat="server" NavigateUrl="~/3.aspx">订单信息
div (#footer)：页面底部版权栏区域。
3.
(1)
向页面中添加一个CSS样式表文件，从解决方案资源管理器中将CSS样式表文件拖动到页面的设计视图，创建页面与CSS样式表的关联。
在样式表代码窗口向body样式规则中添加如下样式控制代码，用于定义整个网页中默认的字体及对齐方式。
body
{
font-family:宋体;
(5)
向CSS样式表文件中添加如下用于“销售排行榜”栏的样式控制代码：
#left_bottom
{
width: 192px; height: 168px;
float: left; clear: left;
/*设置背景图片的位置。图片在水平方向居中，图片上方留层高度6%的空白*/
background-position: center 6%;
<ul>
<li><asp:HyperLink ID="HyperLink8" runat="server" Width="96px">Dell笔记本2091
</asp:HyperLink>
</li>
<li><asp:HyperLink ID="HyperLink9" runat="server">联想笔记本X200
line-height:18pt;
padding-top: 50px;/*项目列表第一行距层顶端的距离*/
text-align: left;
}
切换到Default.aspx的源视图，在<div id="left_bottom">标记和配套的</div>标记之间添加如下XHTML代码：
<div id="left_bottom">
{
text-decoration: none;/*不设置文字特效*/
color: #003366;
}
#navigation a:hover/*鼠标指向导航栏中超链接时，以红色、带下划线样式显示热点xt-decoration: underline;
}
说明：上述代码的最后两个选择符中使用了样式规则的层次结构，用于设置导航栏中各种情况下超链接文字的显示效果。
图
各元素说明如下：
div：整个页面所在区域。
div (#logo)：页面Logo栏（网站标题栏）区域。
div (#navigation)：导航栏区域。
div (#left_top)：“商城通行证”区域。
div (#left_bottom)：“销售排行榜”区域。
div (#right_content)：页面右侧信息显示区域。
<div id="search"></div>
<div id="tab"></div>
</div>
<div id="bottom_line"></div>
<div id="footer"></div>
</div>
</form>
……
(2)
向CSS样式表文件中添加如下用于页面Logo栏样式控制代码：
#logo
第2章
2.1
2.1.1 实训目的
进一步理解在Visual Studio环境中创建、编辑和引用CSS样式表文件的基本步骤。理解层元素在页面布局中的重要作用及使用方法。综合运用CSS+DIV布局技术设计出实用的网站主页。
2.1.2 实训要求
新建一个网站，在Default.aspx中使用CSS+DIV技术设计出图2-1所示的网站主页效果。要求页面中导航栏、销售排行榜中内容使用标准控件HyperLink，商品名称、商品种类、用户名、密码栏使用标准控件TextBox，所有按钮使用标准控件Button，商品种类栏使用标准控件DropDownList。
(4)设计“商城通行证栏”
向CSS样式表文件中添加如下用于“商城通行证”栏的样式控制代码：
#left_top