ASPNET网站开发技术第二章-页面的布局及样式课件.ppt

1、 2.1 2.1 学习情境引入学习情境引入 2.2 2.2 基本知识基本知识1 1：HTMLHTML语言语言 2.3 2.3 基本知识基本知识3 3：网页布局标记：网页布局标记 2.4 2.4 基本知识基本知识4 4：级联样式表：级联样式表CSSCSS 2.5 2.5 决策与计划决策与计划 2.6 2.6 实施实施2.1 2.1 学习情境引入学习情境引入 2.1.1 2.1.1 页面布局及样式设计的能需求页面布局及样式设计的能需求 2.1.2 2.1.2 前台页面布局及样式展示前台页面布局及样式展示 2.1.3 2.1.3 前台页面布局及样式设计的技术分解前台页面布局及样式设计的技术分解2.1

2、.1 2.1.1 页面布局及样式设计的能需求页面布局及样式设计的能需求 网上书店管理系统是一个面向消费者的购物网站，所以网站的布局及样式的设计是否合理美观是极为重要的。就前台页面而言，具体需求如下： 1各组成部分 2基本布局要求 3样式风格2.1.2 2.1.2 前台页面布局及样式展示前台页面布局及样式展示本章以网站前台页面的母版设计为基础，掌握网页布局和样式设计的技巧，以完成网上书店管理系统的整体布局。其效果如图 2 1和图 2 2所示 2.1.3 2.1.3 前台页面布局及样式设计的技术分解前台页面布局及样式设计的技术分解页面都是由“内容、结构、表现和行为”这4个方面组成的。“内容”就是页

3、面要传达的信息，包含数据、文档或者图片等；“结构”就是把内容进行结构化，比如加上标题、段落和列表等；“表现”就是用来改变内容外观的东西。例如字体大小，正文的颜色，背景颜色等修饰；“行为”就是对内容的交互及操作，例如，使用JavaScript判断一些表单提交，或者实现菜单的显示和隐藏等。“内容”是基础，然后是附加上去的“结构”和“表现”，最后再对它们加上“行为”。页面的布局和样式设计，也就是“结构、表现”这两个部分，相关的技术主要包括：超文本标记语言HTML（含XHTML）；级联样式表CSS；本章即讲解HTML和CSS样式表的使用方法，用来完成页面的布局和样式的设计，下一章将介绍页面动态行为的实

4、现技术。2.22.2基本知识基本知识1 1：HTMLHTML语言语言 2.2.1 HTML2.2.1 HTML语言简介语言简介 2.2.2 HTML2.2.2 HTML文档文档 2.2.3 2.2.3 超链接标记超链接标记 2.2.4 2.2.4 文本类标记文本类标记 2.2.5 2.2.5 图像标记图像标记 2.2.6 2.2.6 对象标记对象标记 2.2.7 2.2.7 移动对象标记移动对象标记 2.2.8 form2.2.8 form标记标记2.2.1 HTML2.2.1 HTML语言简介语言简介前面章节已经简要概述了HTML语言，XHTML标准是HTML的最新标准。XHTML中的X是可

5、扩展的意思，XHTML就是可扩展的超文本标记语言，它比HTML有更严格的书写标准、更好的跨平台能力。如果说HTML是汉语，那么XHTML就是标准普通话。ASP.NET支持XHTML标准。2.2.2 HTML2.2.2 HTML文档文档 HTML文档即HTML网页。例例 2 1 编写编写HTML网页，用红色、网页，用红色、5级字号显示级字号显示“Hello World！”。网页标题Hello World!在记事本里写完这些代码之后，将文件保存为“Hello.htm”,然后你双击这个文件，系统就会自动用IE打开并显示这个网页。如图 2 2所示： “HTML标记”，其基本结构是：一个开始标记，一个结

6、束标记，中间是显示内容，如下： 显示内容 2.2.2 HTML2.2.2 HTML文档文档1.1.基本术语基本术语 （1）HTML标记标记 所有标记必须要用两个尖括号括起来：，结束标记要有一个/，来表示结束。标记名要用小写字母。开始标记和结束标记及其之间的内容，称为HTML元素，以标记的名称为元素名称。一个包括内容的HTML元素，包含一个开始标记和一个结束标记，显示内容在它们中间。一个不包括内容的HTML元素，开始标记和结束标记可以合并书写。例如：是换行标记，是水平线标记等。大多数HTML元素是可以嵌套的。2.2.2 HTML2.2.2 HTML文档文档1.1.基本术语基本术语（2）HTML标

7、记属性标记属性所有属性都放置在开始标记的尖括号内。一个标记可以拥有多个属性，用空格隔开。属性总是以“名称/值对”的形式出现，属性的值一定要在双引号中。如：font标记的size=5，表示使用第5级字号。大部分属性都有默认值，由浏览器确定。所有的标记都可以有name和id等属性，name表示该标记的名称，id是该标记的唯一标识符，一般在JavaScript中，name和id 都可以像变量名那样指代某个标记。嵌套标记中，父标记的属性会影响所有各级子标记。2.2.2 HTML2.2.2 HTML文档文档2 2 HTMLHTML文档基本结构文档基本结构HTML文档是一种树形层次结构。、标记，及其结束标

8、记，是必有的标记，组成了基本的HTML文档。和标记是文档的根，其他的HTML标记全部包括在 和之内，即是开始标记，是结束标记，它们分别是网页的第一个标记和最后一个标记，其他所有html代码都位于这两个标记之间，html标记告诉浏览器或其他程序：这是一个网页文档，应该按照html语言规则对标记进行解释。和标记表示网页的头部，在首部标记里，可以包含一些定义文档整体信息的标记，如：和标题标记，用于指定网页的标题；和样式标记，用于定义CSS样式表；和脚本标记，用于插入脚本；元数据标记来说明文档信息等。这些文档信息大多是不显示的，只是用于定义整个文档的特性。和是正文标记，表示文档的主体，主体中的内容将显

9、示在客户端的浏览器中。文字、图像、动画、超链接等HTML元素都位于该标记中，例如使用来表示字符的格式。与标记为独立的两个部分，不能相互嵌套。2.2.2 HTML2.2.2 HTML文档文档3. 3. 注释标记注释标记注释标记是一种特殊的HTML标记。在HTML文档中，为了增加代码的可读性，需要对代码添加注释，注释语句需要放在HTML注释标记中。注释语句不会被浏览器执行，但会被浏览器解析。注释语句的基本语法是：例例 2 2 注释语句的使用。注释语句的使用。在记事本中编辑网页如下：网页标题 。 嗨！ Hello World! 2.2.3 2.2.3 超链接标记超链接标记HTML是超链接标记语言，就

10、是因为使用了超链接（HyperLink）而得名，超链接是一个网站的灵魂，一个网站是由多个页面组成的，页面之间依靠链接确定相互的导航关系。网页文件的地址，可以用绝对路径、相对路径、根路径三种方式来表示，初学者经常因路径表达不正确而造成页面链接错误。223223超链接标记超链接标记1.1.绝对路径、相对路径和根路径绝对路径、相对路径和根路径 （1）绝对路径）绝对路径 网页链接地址中的绝对路径是全球范围的，不同于本地系统绝对路径。每一个网页都有唯一的地址，即URL(Uniform Resource Locator：统一资源定位符)，超链接就是通过指定目标网页的URL地址，来确定链接到何处。一个基本的

11、URL包括三个部分：协议代码、主机地址和资源的路径名称。对于网页资源的URL，协议部分一般是http。主机地址可以是域名，也可以是IP地址。资源路径和名称一般是网页文件的路径和名称，对一个网站来说，有默认主页，此时可以省略该部分。绝对路径一般用于网站的外部链接。例如：http:/。绝对路径不易出错，但维护复杂，如网站文件迁移到新的Web服务器时，需修改所有的绝对路径。223223超链接标记超链接标记1.1.绝对路径、相对路径和根路径绝对路径、相对路径和根路径（2）相对路径）相对路径相对路径是相对于当前文件位置的路径，它包含了从当前文件指向目的文件的路径。若要将当前文档与处在同一文件夹中的另一个

12、文档链接，或者将同一站点中不同文件夹下的文档相互链接，都可以使用相对路径，此时可以省去当前文档与目标文档完整URL中的相同部分，只留下不同部分。相对路径书写简洁，网站整个迁移时，无需修改，但网站中文件位置调整时，修改就比较繁琐，如三个不同位置的网页链接到同一个目标页，目标页的位置改变后，三个源页面的相对路径写法均不同。223223超链接标记超链接标记1.1.绝对路径、相对路径和根路径绝对路径、相对路径和根路径（3）根路径）根路径根路径是指从网站根文件夹到被链接文件的路径。网站根文件夹是访问者可见到的顶级文件夹，访问者不知道这个文件夹在Web服务器上的实际物理路径，这样做是为了Web服务器安全。

13、使用这种路径是指定站点内文档链接的较好方式。HTML标准中，根路径的使用以“/”开头，后面紧跟文件路径，如“/Members/BookDetails.htm”。由于多个网站可能以虚拟目录形式处于Web服务器的一个根目录下，在ASP.NET的.aspx页面文件中，使用虚拟根路径来标记资源在本网站中的位置，用“/”表示。2. 2.3 2. 2.3 超链接标记超链接标记2. 2. 超链接标记超链接标记HTML标记表示超链接，格式为：超链接文字a标记的基本属性：href：该属性定义了链接到的资源地址。target：该属性用于告诉浏览器在哪个页面中打开目标资源。target属性的取值及作用为：_self

14、：在同一个页面中打开，则目标文档将取代包含该超链接的文档，此为target属性的默认值，此时可以直接省略target属性；_parent：在父页面中打开，即在包含该超链接的上一级页面中打开；_blank：在新页面打开；_top：在浏览器的整个页面中打开，对于原来包含框架的页面，会覆盖所有框架。name：表示超链接的名称，在设置页面内锚点时有用。title：表示当鼠标在超链接上悬停时，显示的提示性文本。223223超链接标记超链接标记3. 3. 特殊的超链接特殊的超链接虽然超链接主要用于链接文件资源，但也可用于一些特殊用途，如锚点链接、邮件链接。这是从链接目标上来区分的，但如果从URL定义的角度

15、看，这些特殊的超链接和链接到文件资源的超链接并无根本不同。223223超链接标记超链接标记1 1 邮件链接邮件链接在网站中，经常会看到“给我邮件”之类的链接，单击击这个链接，就会启动邮件客户端程序，如Outlook程序，若已经配置好了客户端邮件账号，则会出现新建E-mail的窗口，并将自动填写收件人邮箱、邮件主题、邮件内容等信息。用a标记就可以实现这样的功能。使用a标记创建邮件链接，其href属性的URL，协议部分为电子邮件协议mailto，主机地址部分为收件人电邮地址，资源路径和名称部分省略。另外用“键值对”来传递自动填写的邮件信息，键“cc”、“subject”、“body”的值分别表示抄

16、送、主题、邮件内容，这些键值对和前面部分用“?”分隔，各个键值对间用“&”分隔。实际上，URL定义了“？”后的“查询字符串”（Query）来表示访问资源时的参数，所以邮件链接中URL的用法和普通URL是一致的。223223超链接标记超链接标记2 2 锚点链接锚点链接普通的超链接，将从目标网页的页首开始显示。如果目标网页中内容很多，怎么直接跳转到某个特定位置呢？这可以使用锚点链接实现。一个锚点链接要用到两个a标记。其中一个a标记仅用来声明锚点位置。锚点就代表页面内的一个位置，也用a标记声明，需要给出其name属性。在另一个实现超链接的a标记中，其href属性值的URL，最末部分为锚点名称，与前面

17、的部分用“#”号分隔。实际上，URL定义了“#”号后的“片段”（Fragment）来表示资源内部的某个位置，所以锚点链接中URL的用法和普通URL是一致的。例例2 5 使用锚点链接。使用锚点链接。2.2.4 2.2.4 文本类标记文本类标记HTML网页可以呈现文字、图像、声音、视频等多媒体内容，因此，HTML标准包含多种标记来规定其呈现样式。1.1.字符的格式化字符的格式化2.2.段落的格式化段落的格式化1 1 字符的格式化字符的格式化(1)font标记标记在HTML中，使用字体标记来设置字体的字符格式，可以通过用字体标记的size、color和face属性来分别设置字体的大小、颜色和种类。字

18、体大小使用size属性来设置，浏览器将字号分为17级，因此可用的值为“1”至“7”；字体颜色使用color属性来设置，一般使用颜色名称来设置，如red、blue、green等，也可使用十六进制RGB来设置；字体种类使用face属性来设置，一般使用字体的名称作为参数来设置，如宋体、楷体等。例例 2 6 显示显示“欢迎光临！欢迎光临！”字样，宋体，红色，大小为字样，宋体，红色，大小为5。欢迎光临!2.2.4 2.2.4 文本类标记文本类标记1 1 字符的格式化字符的格式化(2)其他字符格式化其他字符格式化例例 2 7 对字符进行修饰。对字符进行修饰。设置字符修饰的样式加粗的文字斜体的文字带下划线的

19、文字解下面的方程：X2-5X+4=0X1 =1；X2 =42.2.4 2.2.4 文本类标记文本类标记2 2 段落的格式化段落的格式化例例 2 8 设置段落的格式设置段落的格式 设置段落的格式游子吟作者：孟郊慈母手中线，游子身上衣。2.2.4 2.2.4 文本类标记文本类标记2.2.5 2.2.5 图像标记图像标记img标记的常用属性有：src：用来设定图像文件的路径，可以使用绝对路径、相对路径或根路径。alt：用来给出图像的简单文本说明，这段文本在浏览器不能显示图像时显示出来，或图像加载时间过长时先显示出来。width、 height：用来设定图像的宽度和高度，属性值为整数，单位是“px”（

20、像素）或“%”（百分比）。border：用来设定图像的边框宽度，属性值为整数，单位为像素。例例 2 9 img标记的使用标记的使用修改例 2 8网页，在h1标记前加入如下元素：2.2.6 2.2.6 对象标记对象标记object标记，即对象标记，用于在Web页面中嵌入一个对象，最常见的对象是flash对象，可用来播放flash动画，Windows Media Player对象或者Real Player对象也很常见，可用于播放多媒体文件。客户端必须已经安装好对应的播放器插件，对象标记才能正常工作，浏览器仅负责根据对象标记调用相关插件。object标记的特有属性有：标记的特有属性有：classid

21、：包含对象类的唯一标识。codebase：指示到何处下载此对象。不同的播放器插件对象，有不同的控制参数，object标记是一个复合标记，包含param子标记，用来定义特定对象的控制参数，一个param子标记包含一个名值对参数。2.2.6 2.2.6 对象标记对象标记例例2 10 使用使用标记播放标记播放flash动画。动画。 2.2.7 2.2.7 移动对象标记移动对象标记在网页中经常可以看到一些移动的文字或图片，这些移动的文本特别容易吸引人们的注意力，我们有时称这些移动的字符串为“移动字幕”或“跑马灯”，marquee标记即实现此功能。语法格式：移动对象direction：指定对象的移动方向

22、，其取值可以是left、right、down、或up。behavior：指定对象移动的动画类型，其取值可以是scroll、slide或alternate。scroll为滚动方式，对象将按照direction方向从一侧边界移入，且一直移动到移出另一边界，并立即又按照原来的方向移入，如此循环。slide为幻灯片方式，则对象从一侧边界移入并移动到另一侧边界停止；alternate为交替方式，则文本从从一侧边界移动到另一侧边界，并再移动回来，如此交替； loop：指定对象执行behavior动画的次数。默认为无穷大。scrollamount：指定对象每次移动的距离，以像素为单位的整数。此值越大，移动越

23、快。scrolldelay：用于设定两次移动之间的延迟时间，以毫秒为单位的整数。此值越大，移动越慢。2.2.7 2.2.7 移动对象标记移动对象标记例例2 11 移动文本标记的使用移动文本标记的使用 100像素正方区域向上移动对象slide方式：移动到左端就停止移动 alternate方式：从右到左，再从左到右交替进行 控制移动步长和移动延时 2.2.8 form标记标记form标记有两个重要的属性：action属性：属性：定义处理表单数据的服务器网页地址，当点击提交按钮时，立即转向该网页，以处理从“表单”（from）中提交的数据。该地址也可以是要对表单数据进行处理的相关程序地址。默认由当前网

24、页处理表单数据。method属性：属性：定义提交数据的方式，包括两种方式：get和post。使用get方式提交数据时，将表单中的数据按照名值对的形式放在URL中，通常称为查询字符串（QueryString），查询字符串在URL中的协议和资源地址之后，并使用“？”分隔，而各个名值对之间使用“&”连接，每个名值对的名字就是输入控件标记的name属性值。2.3 2.3 基本知识基本知识3 3：网页布局标记：网页布局标记2.3.1 2.3.1 表格标记表格标记2.3.2 2.3.2 层标记层标记2.3.1 2.3.1 表格标记表格标记2.3.1表格标记table标记是复合标记，包括表格标题标记capt

25、ion、行标记tr，行标记tr还可嵌套，包括标题单元格标记th、单元格标记td。表格布局页面图书基本信息书名：我的兄弟叫顺溜作者：朱苏进 定价：29.8元2.3.2 2.3.2 层标记层标记层标记即层标记即div标记标记层和表格可以互相嵌套，与表格相比，层就像一个自由的单元格，两者各有优劣，笔者习惯：页面整体布局用表格，局部布局用层。例 2 14 在VS .NET的设计界面中使用Div控件来定义层。打开VS.NET 2008 IDE，打开默认页面的“设计”视图；在“工具箱”中展开“HTML”选项卡，然后拖拽Div控件到设计页面中适当位置；选中插入的Div，利用出现的8个控制点，拖拽到合适的位置

26、，并缩放为适当大小；在该层内和层外都输入文字；右击设计视图，选择“在浏览器中查看”，观察显示位置效果。 2.4 2.4 基本知识基本知识4 4：级联样式表：级联样式表CSSCSS2.4.1 CSS2.4.1 CSS的基本概念的基本概念2.4.2 CSS2.4.2 CSS的定义的定义2.4.3 CSS2.4.3 CSS的使用的使用2.4.4 CSS2.4.4 CSS有效规则（选学）有效规则（选学）2.4.1 CSS2.4.1 CSS的基本概念的基本概念1.1.什么是什么是CSSCSS2. 2. CSSCSS的功能优势的功能优势2.4.1 CSS2.4.1 CSS的基本概念的基本概念1 1 什么是

27、什么是CSSCSS级联样式表CSS（Cascading Style Sheet）是由W3C（World Wide Web Consortium，万维网联盟）组织创建 。其文件的扩展名为：“.css”。使用CSS样式可以设置传统的文本属性，如字体的格式，段落的格式等，还可以控制如页边距、缩排、颜色、底图等排版属性。CSS样式的出现得到了很多公司的青睐和支持，成为了一种使用灵活、方便的网页设计技术。2.4.1 CSS2.4.1 CSS的基本概念的基本概念 2. CSS 2. CSS的功能优势的功能优势CSS是对HTML功能的扩展，其最大的贡献在于将网页内容和样式进行了分离，这样可以对多个HTML文

28、档的多个HTML元素进行一次性定义，从而避免了在网页中重复定义内容的样式。便于统一网站中各个网页的显示风格，并便于维护。一个CSS样式文件可以用来定义多个HTML文档，只要改变CSS文件，多个HTML文档的显示样式都将随之改变。反过来，同一个HTML文档，用不同的CSS样式表来定义，可以显示不同的风格。弥补了HTML对标记属性控制的不足，如：在HTML中可控制的标题仅有6级，即h1到h6，字体尺寸仅有7级，即size属性值从1到7，而利用CSS可以任意设置字体的大小。可以精确控制网页布局，如行间距、字间距、段落缩进和图片定位等属性。CSS还提供了许多特殊的功能，比如：鼠标属性控制鼠标的形状，滤

29、镜属性控制图片的特效等。2.4.2 CSS2.4.2 CSS的定义的定义定义CSS的语法格式如下：选择器属性：值；属性：值；属性：值；选择器指明此样式应用于哪些HTML元素，如果需要指定多个选择器时，用逗号将各个选择器分开。如果属性的值由多个单词组成，必须给值加上引号。多个属性值定义用分号分开。如：td,p,div color: blue; font-size: 9pt; 该样式定义td、p、div元素中的前景色为蓝色，字体尺寸为9磅。2.4.3 CSS2.4.3 CSS的使用的使用 在HTML网页中CSS的应用形式有三种：外部样式表、内部样式表、内联样式，这三种形式的CSS作用范围依次减小。

30、1.1.外部样式表外部样式表2.2.内部样式表内部样式表3.3.内联样式内联样式2.4.3 CSS2.4.3 CSS的使用的使用1.1.外部样式表外部样式表使用外部样式表，在网页中显示一个段落，背景颜色为红色，字号为40px，字体为宋体，字体颜色为黄色。创建或打开网站，在解决方案管理器中，右击网站根节点，在弹出的菜单中选择“添加新项”；在弹出的对话框中选择“样式表”模板，使用默认文件名StyleSheet.css，单击“添加”按钮，弹出如图 2 10所示的窗口；图 2 14 样式表页面在“CSS大纲”面板或“StyleSheet.css”文档选项卡的空白处，右击，在弹出的菜单中选择“添加样式规

31、则”2.4.3 CSS2.4.3 CSS的使用的使用2 2 内部样式表内部样式表不使用.css文件也可以定义样式表，HTML使用style标记定义文档内部的样式表。当单个文档需要特殊的样式时，就应该使用内部样式表。style标记一般放在head标记内，例如： p font-size:20px; 2.4.3 CSS2.4.3 CSS的使用的使用3 3 内联样式内联样式不使用选择器也可以定义样式表，每个HTML标记都有style属性，style属性定义的称为内联样式表。需要一次性为某个元素定义样式时，应使用内联样式表。由于内联样式表将表现和内容混杂在一起，因此损失掉样式表的许多优势，请慎用这种方法

32、。2.4.4 CSS2.4.4 CSS有效规则（选学）有效规则（选学）所谓级联样式表（CSS），就是因为应用于某个元素的各级样式表，级联为一，层叠合并生效：各样式表中不同属性定义的合并生效；同属性定义冲突的层叠（覆盖）生效，后应用的覆盖先应用的，也就是后应用的定义有效级别更高。加载：多个内部样式表和外部样式表，按照在HTML文档中声明的先后顺序加载。内联样式表最后加载。这使得内联样式表有效级别最高。应用：某个元素单一选择器的情况下，按加载顺序应用；但某个元素定义多种选择器情况下，先应用元素名称选择器，再应用样式类选择器，最后应用元素id选择器。这使得不论加载先后，id选择器在各选择器中有效级别

33、最高。2.4.4 CSS2.4.4 CSS有效规则（选学）有效规则（选学）内联样式表没有选择器，一直具有最高的有效级别。父元素的属性定义将应用于所有子元素。如定义了body元素的样式为“text-align:center”，则所有子元素的文本都会居中，除非单独定义某个子元素的text-align属性为center之外的值。这是因为先加载父元素的样式，所以子元素覆盖父元素的定义。如果所有位置都没有某个属性的样式定义，则浏览器会使用一个默认的样式。另外，在样式定义后添加“!important”记号，可以使得此样式具有最高有效级别。虽然可以用多种方式使用样式表，但其有效性与浏览器有关，建议开发人员在

34、设计时仅使用一两种方式，避免陷入复杂的有效规则泥潭。2.5 2.5 决策与计划决策与计划2.5.1 2.5.1 页面布局及样式设计的决策页面布局及样式设计的决策2.5.2 2.5.2 页面布局及样式设计的计划页面布局及样式设计的计划2.5.1 2.5.1 页面布局及样式设计的决策页面布局及样式设计的决策本章的学习情境是网上书店管理系统网页的布局和样式的设计，目前流行的页面布局方式主要有表格和DIV+CCS两种，它们各有优点。表格：简单，好用，学起来很容易上手，可以清晰得表现数据。DIV+CSS方式：代码冗余小，所以网站打开速度快一些。修改设计时更有效率，只需到CSS里找到相应的id，就可以修改

35、页面的样式。2.5.2 2.5.2 页面布局及样式设计的计划页面布局及样式设计的计划1. 1. 布局布局 整个页面可以设计为一个4行1列的主表格布局，分为顶部行、中部行、分割线行、底部行。所有前台页面的顶部和底部均相同，中部容纳不同页面特有的内容。顶部行再用一个1行2列的嵌套表格，左列为logo图，右列为通用操作部分。2. 2. 样式样式 ASP.NET有特殊文件夹管理功能，针对网站开发过程中的各种存储需要，设置固定名称的文件夹，能够简化程序员的管理工作。 2.6 2.6 实施实施2.6.1 mainTable2.6.1 mainTable设计设计2.6.2 topRightTable2.6.

36、2 topRightTable设计设计2.6.3 commonOperationTable2.6.3 commonOperationTable设计设计2.6.4 basicOperationTable2.6.4 basicOperationTable设计设计2.6.5 cartOperationTable2.6.5 cartOperationTable设计设计 2.6.6 2.6.6 底部设计底部设计2.6.1 2.6.1 mainTablemainTable设计设计最外层布局表格mainTable包含4行2列，分别为顶部行、中部行、分隔线行、底部行，除顶部行外，合并其他行的两个列。将整个页面

37、分为顶、中、底三个区域，其中顶、底部为所有页面共用，顶部左侧放入网站徽标，右侧放入topRightTable。第三行放入工具箱中名为Horizontal Rule的HTML控件。设置属性class=mainTable，mainTable类外部样式包括“margin: 0 auto”样式，即上下留白0像素，左右留白让浏览器控制，可使表格水平居中；还包括“width: 100%”样式，即宽度为100%，可使表格水平填满页面。 2.6.2 topRightTable2.6.2 topRightTable设计设计 topRightTable位于mainTable的顶部右单元格，是2行2列的表格，合并第

38、二行的两列。设置属性class=horizontalFill，horizontalFill类外部样式只包含“width: 100%”样式。设置属性cellpadding=0、cellspacing=0。第一行左单元格放入commonOperationTable表格。右单元格从解决方案管理器“UserControls”文件夹中拖入“UC_AddFavorite_SetHomepage_ShowTime”用户控件，设置此单元格属性class=contentRight，contentRight类外部样式只包含“text-align: center”样式，即单元格中内容居右，使用户控件位于网页右上角。

39、第二行放入basicOperationTable表格。2.6.3 2.6.3 commonOperationTablecommonOperationTable设计设计commonOperationTable位于topRightTable的第一行左单元格，是1行5列的表格。第一单元格放入工具箱“登录”选项卡的LoginView控件。单击LoginView1控件的智能按钮，在任务列表中，选择“视图”下拉框中的“AnonymousTemplate”，即编辑匿名用户（未登录）时显示的界面，在LoginView1控件中直接输入“欢迎光临信院书苑！”字样。再选择“视图”下拉框中的“LoggedInTemp

40、late”，在LoginView1控件中放入一个LoginName控件，接着输入“，您好！”字样。2.6.4 basicOperationTable2.6.4 basicOperationTable设计设计basicOperationTable位于topRightTable的第二行，是1行2列的表格。设置属性class=horizontalFill，实现水平填满。左单元格放入“UC_BookSearch”用户控件，设置单元格属性class=contentCenter，contentCenter类外部样式只包含“text-align: center”样式，即单元格内容居中，是用户控件居中，再设置

41、单元格属性width=550px，使用户控件左右留空。右单元格放入cartOperationTable表格。2.6.5 cartOperationTable2.6.5 cartOperationTable设计设计 cartOperationTable位于basicOperationTable的右单元格，是1行3列的表格。三个单元格都放入ImageButton控件，都设置内联样式style=padding-left: 20px，即单元格内左侧边距20像素，使各单元格内容有间隔、不局促。2.6.6 2.6.6 底部设计底部设计作为练习，底部未采用嵌套表格布局，而采用层布局，包括顺序排列的两个层：bottomDiv1、bottomDiv2。其中bottomDiv1的class属性为“contentCenter”，即其内容居中。层内包含若干文本和一个邮箱链接：邮箱：。bottomDiv2设置了内联样式：style=text-align: center; color: Green; margin-top: 3px; margin-bottom: 4px;，使内容居中，内容的颜色为绿色，顶部留白3像素，底部留白4像素。层内放入一个Label控件，设置ID为“LabelOnlineUsersCounter”，用于配合程序代码，显示在线用户数量。