ASP.NET网站开发技术项目式教学课件作者李正吉第二章节页面的布局及样式设计

《ASP.NET网站开发技术项目式教学课件作者李正吉第二章节页面的布局及样式设计》由会员分享，可在线阅读，更多相关《ASP.NET网站开发技术项目式教学课件作者李正吉第二章节页面的布局及样式设计（56页珍藏版）》请在金锄头文库上搜索。

1、2.1 学习情境引入 2.2 基本知识1：HTML语言 2.3 基本知识3：网页布局标记 2.4 基本知识4：级联样式表CSS 2.5 决策与计划 2.6 实施,2.1 学习情境引入,2.1.1 页面布局及样式设计的能需求 2.1.2 前台页面布局及样式展示 2.1.3 前台页面布局及样式设计的技术分解,2.1.1 页面布局及样式设计的能需求,网上书店管理系统是一个面向消费者的购物网站，所以网站的布局及样式的设计是否合理美观是极为重要的。就前台页面而言，具体需求如下： 1各组成部分 2基本布局要求 3样式风格,2.1.2 前台页面布局及样式展示,本章以网站前台页面的母版设计为基础，掌握网页布局

2、和样式设计的技巧，以完成网上书店管理系统的整体布局。其效果如图 21和图 22所示,2.1.3 前台页面布局及样式设计的技术分解,页面都是由“内容、结构、表现和行为”这4个方面组成的。“内容”就是页面要传达的信息，包含数据、文档或者图片等；“结构”就是把内容进行结构化，比如加上标题、段落和列表等；“表现”就是用来改变内容外观的东西。例如字体大小，正文的颜色，背景颜色等修饰；“行为”就是对内容的交互及操作，例如，使用JavaScript判断一些表单提交，或者实现菜单的显示和隐藏等。“内容”是基础，然后是附加上去的“结构”和“表现”，最后再对它们加上“行为”。页面的布局和样式设计，也就是“结构、表

3、现”这两个部分，相关的技术主要包括： 超文本标记语言HTML（含XHTML）； 级联样式表CSS； 本章即讲解HTML和CSS样式表的使用方法，用来完成页面的布局和样式的设计，下一章将介绍页面动态行为的实现技术。,2.2基本知识1：HTML语言,2.2.1 HTML语言简介 2.2.2 HTML文档 2.2.3 超链接标记 2.2.4 文本类标记 2.2.5 图像标记 2.2.6 对象标记 2.2.7 移动对象标记 2.2.8 form标记,2.2.1 HTML语言简介,前面章节已经简要概述了HTML语言，XHTML标准是HTML的最新标准。XHTML中的X是可扩展的意思，XHTML就是可扩展

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

5、（1）HTML标记 所有标记必须要用两个尖括号括起来：，结束标记要有一个/，来表示结束。 标记名要用小写字母。 开始标记和结束标记及其之间的内容，称为HTML元素，以标记的名称为元素名称。 一个包括内容的HTML元素，包含一个开始标记和一个结束标记，显示内容在它们中间。 一个不包括内容的HTML元素，开始标记和结束标记可以合并书写。例如：是换行标记，是水平线标记等。 大多数HTML元素是可以嵌套的。,2.2.2 HTML文档,基本术语 （2）HTML标记属性 所有属性都放置在开始标记的尖括号内。一个标记可以拥有多个属性，用空格隔开。 属性总是以“名称/值对”的形式出现，属性的值一定要在双引号中

6、。如：font标记的size=“5“，表示使用第5级字号。 大部分属性都有默认值，由浏览器确定。 所有的标记都可以有name和id等属性，name表示该标记的名称，id是该标记的唯一标识符，一般在JavaScript中，name和id 都可以像变量名那样指代某个标记。 嵌套标记中，父标记的属性会影响所有各级子标记。,2.2.2 HTML文档,2 HTML文档基本结构 HTML文档是一种树形层次结构。、标记，及其结束标记，是必有的标记，组成了基本的HTML文档。 和标记是文档的根，其他的HTML标记全部包括在 和之内，即是开始标记，是结束标记，它们分别是网页的第一个标记和最后一个标记，其他所有h

7、tml代码都位于这两个标记之间，html标记告诉浏览器或其他程序：这是一个网页文档，应该按照html语言规则对标记进行解释。 和标记表示网页的头部，在首部标记里，可以包含一些定义文档整体信息的标记，如：和标题标记，用于指定网页的标题；和样式标记，用于定义CSS样式表；和脚本标记，用于插入脚本；元数据标记来说明文档信息等。这些文档信息大多是不显示的，只是用于定义整个文档的特性。 和是正文标记，表示文档的主体，主体中的内容将显示在客户端的浏览器中。文字、图像、动画、超链接等HTML元素都位于该标记中，例如使用来表示字符的格式。 与标记为独立的两个部分，不能相互嵌套。,2.2.2 HTML文档,3.

8、 注释标记 注释标记是一种特殊的HTML标记。在HTML文档中，为了增加代码的可读性，需要对代码添加注释，注释语句需要放在HTML注释标记中。注释语句不会被浏览器执行，但会被浏览器解析。注释语句的基本语法是： 例 22 注释语句的使用。 在记事本中编辑网页如下： 网页标题 。 嗨！ Hello World! ,2.2.3 超链接标记,HTML是超链接标记语言，就是因为使用了超链接（HyperLink）而得名，超链接是一个网站的灵魂，一个网站是由多个页面组成的，页面之间依靠链接确定相互的导航关系。网页文件的地址，可以用绝对路径、相对路径、根路径三种方式来表示，初学者经常因路径表达不正确而造成页面

9、链接错误。,223超链接标记,绝对路径、相对路径和根路径 （1）绝对路径 网页链接地址中的绝对路径是全球范围的，不同于本地系统绝对路径。每一个网页都有唯一的地址，即URL(Uniform Resource Locator：统一资源定位符)，超链接就是通过指定目标网页的URL地址，来确定链接到何处。一个基本的URL包括三个部分：协议代码、主机地址和资源的路径名称。对于网页资源的URL，协议部分一般是http。主机地址可以是域名，也可以是IP地址。资源路径和名称一般是网页文件的路径和名称，对一个网站来说，有默认主页，此时可以省略该部分。 绝对路径一般用于网站的外部链接。例如：http:/。绝对路径

10、不易出错，但维护复杂，如网站文件迁移到新的Web服务器时，需修改所有的绝对路径。,223超链接标记,绝对路径、相对路径和根路径 （2）相对路径 相对路径是相对于当前文件位置的路径，它包含了从当前文件指向目的文件的路径。若要将当前文档与处在同一文件夹中的另一个文档链接，或者将同一站点中不同文件夹下的文档相互链接，都可以使用相对路径，此时可以省去当前文档与目标文档完整URL中的相同部分，只留下不同部分。 相对路径书写简洁，网站整个迁移时，无需修改，但网站中文件位置调整时，修改就比较繁琐，如三个不同位置的网页链接到同一个目标页，目标页的位置改变后，三个源页面的相对路径写法均不同。,223超链接标记,

11、绝对路径、相对路径和根路径 （3）根路径 根路径是指从网站根文件夹到被链接文件的路径。网站根文件夹是访问者可见到的顶级文件夹，访问者不知道这个文件夹在Web服务器上的实际物理路径，这样做是为了Web服务器安全。使用这种路径是指定站点内文档链接的较好方式。 HTML标准中，根路径的使用以“/”开头，后面紧跟文件路径，如“/Members/BookDetails.htm”。由于多个网站可能以虚拟目录形式处于Web服务器的一个根目录下，在ASP.NET的.aspx页面文件中，使用虚拟根路径来标记资源在本网站中的位置，用“/”表示。,2. 2.3 超链接标记,2. 超链接标记 HTML标记表示超链接，

12、格式为：超链接文字 a标记的基本属性： href：该属性定义了链接到的资源地址。 target：该属性用于告诉浏览器在哪个页面中打开目标资源。target属性的取值及作用为： _self：在同一个页面中打开，则目标文档将取代包含该超链接的文档，此为target属性的默认值，此时可以直接省略target属性； _parent：在父页面中打开，即在包含该超链接的上一级页面中打开； _blank：在新页面打开； _top：在浏览器的整个页面中打开，对于原来包含框架的页面，会覆盖所有框架。 name：表示超链接的名称，在设置页面内锚点时有用。 title：表示当鼠标在超链接上悬停时，显示的提示性文本。

13、,223超链接标记,3. 特殊的超链接 虽然超链接主要用于链接文件资源，但也可用于一些特殊用途，如锚点链接、邮件链接。这是从链接目标上来区分的，但如果从URL定义的角度看，这些特殊的超链接和链接到文件资源的超链接并无根本不同。,223超链接标记,1 邮件链接 在网站中，经常会看到“给我邮件”之类的链接，单击击这个链接，就会启动邮件客户端程序，如Outlook程序，若已经配置好了客户端邮件账号，则会出现新建E-mail的窗口，并将自动填写收件人邮箱、邮件主题、邮件内容等信息。用a标记就可以实现这样的功能。 使用a标记创建邮件链接，其href属性的URL，协议部分为电子邮件协议mailto，主机地

14、址部分为收件人电邮地址，资源路径和名称部分省略。另外用“键值对”来传递自动填写的邮件信息，键“cc”、“subject”、“body”的值分别表示抄送、主题、邮件内容，这些键值对和前面部分用“?”分隔，各个键值对间用“&”分隔。实际上，URL定义了“？”后的“查询字符串”（Query）来表示访问资源时的参数，所以邮件链接中URL的用法和普通URL是一致的。,223超链接标记,2 锚点链接 普通的超链接，将从目标网页的页首开始显示。如果目标网页中内容很多，怎么直接跳转到某个特定位置呢？这可以使用锚点链接实现。一个锚点链接要用到两个a标记。 其中一个a标记仅用来声明锚点位置。锚点就代表页面内的一个

15、位置，也用a标记声明，需要给出其name属性。在另一个实现超链接的a标记中，其href属性值的URL，最末部分为锚点名称，与前面的部分用“#”号分隔。实际上，URL定义了“#”号后的“片段”（Fragment）来表示资源内部的某个位置，所以锚点链接中URL的用法和普通URL是一致的。 例25 使用锚点链接。,2.2.4 文本类标记,HTML网页可以呈现文字、图像、声音、视频等多媒体内容，因此，HTML标准包含多种标记来规定其呈现样式。 字符的格式化 段落的格式化,1 字符的格式化 (1)font标记 在HTML中，使用字体标记来设置字体的字符格式，可以通过用字体标记的size、color和fa

16、ce属性来分别设置字体的大小、颜色和种类。 字体大小使用size属性来设置，浏览器将字号分为17级，因此可用的值为“1”至“7”； 字体颜色使用color属性来设置，一般使用颜色名称来设置，如red、blue、green等，也可使用十六进制RGB来设置； 字体种类使用face属性来设置，一般使用字体的名称作为参数来设置，如宋体、楷体等。 例 26 显示“欢迎光临！”字样，宋体，红色，大小为5。 欢迎光临!,2.2.4 文本类标记,1 字符的格式化 (2)其他字符格式化 例 27 对字符进行修饰。 设置字符修饰的样式 加粗的文字 斜体的文字 带下划线的文字 解下面的方程： X2-5X+4=0 X1 =1；X2 =4 ,2.2.4 文本类标记,2 段落的格式化 例 28 设置段落的格式 设置段落的格式 游子吟 作者：孟郊 慈母手中线， 游子身上衣。 ,2.2.4 文本类标记,2.2.5 图像标记,img标记的常用属性有： src：用来设定图