ASP网页数据库第2章ppt课件

1、1.1 课前导读1.2 课堂教学 2.2.1 HTML基础 2.2.2 HTML入门简单标记的认识与使用 2.2.3 段落和文字标记 2.2.4 建立超级链接 2.2.5 加入图片1.3 上机练习1.4 课后作业1.1 课前导读 1. 什么是HTML 2. HTML的作用 3. HTML的编辑环境 4. 专用的网页编辑器1. 什么是HTML HTML是Hyper Text Markup Language超文本标记语言的缩写，它是构成Web页面Page的主要工具，是用来表示网上信息的符号标记语言。 HTML是一种用于网页制作的排版语言，是Web最基本的构成元素。HTML并非一种编程语言。用HTM

2、L标记文档或给文档添加标记，使文档可在WWW上发布。用HTML准备的文档包含引用图形和格式标记。用Web浏览器可以查看这些HTML文档。 用HTML的语法规则建立的文档可以运行在不同操作系统的平台上。因而，HTML文档属于纯文本文件它能用任意的文本编写器书写）。2. HTML的作用 HTML语言作为一种网页编辑语言，易学易懂，能制作出精美的网页效果，其作用如下： 格式化文本。如设置标题、字体、字号、颜色；设置文本的段落、对齐方式等。 建立超链接。通过超链接检索在线的信息，只需用鼠标单击，就可以到达任何一处。 创建列表。把信息用一种易读的方式表现出来。 插入图像。使网页图文并茂，还可以设置图像的

3、各种属性，如大小、边框、布局等。 建立表格。表格为浏览者提供了快速找到需要信息的显示方式，还可以用表格来设定整个网页的布局。 加入多媒体。可以在网页中加入音频、视频、动画，还能设定播放的时间和次数。 交互式窗体、计数器等。为获取远程服务而设计窗体，可用于检索信息、定购产品等。 HTML是最基本的网页制作语言，其他的专用网页编辑器如FrontPage，Dreamweaver等都是以HTML为基础的。3. HTML的编辑环境 HTML的编辑环境很简单，任何一台计算机都可以编辑网页。但要看到用户自己设计的网页效果，就需要安装一个浏览器，如Internet Explorer，Netscape Navi

4、gator等。因而，只要计算机能运行某个浏览器，就具备了网页制作的硬件环境。HTML要求的软件环境更为简单，任何文本编辑器都可以用来制作网页，包括记事本、写字板、Word、WPS等编辑程序。不过在保存时，一定要用纯文本方式存盘。 HTML文件的设计制作与一般程序设计语言之间最大的不同在于，HTML具有跨平台的处理能力。也就是说，只要有适当的浏览器，不管使用何种操作系统，都能阅读制作的HTML文件。4. 专用的网页编辑器 HTML作为最基本的网页编辑语言，能实现制作网页的各种效果。但是，它毕竟是一种代码，得记住一些标记。因而，为了使设计网页更加简单方便，有些公司和人员就设计了专用的网页编辑器。专

5、用的网页编辑器主要分为3大类。 完全的所见即所得工具：所谓所见即所得，就是在编辑网页时看到的效果，与使用浏览器时看到的效果基本一致。如果希望建立一个美观而又不复杂的站点，这种工具非常适合，可以很轻松地制作想要的效果，但是必须按照这些软件的要求来设计。典型的工具有Drumbeat、NetobjectFusion。 纯粹的HTML代码编辑工具：用纯粹的HTML代码编辑工具，用户可以对页面进行完全的控制。使用这些工具时，直接编辑原始的HTML代码，在对页面进行加工时，不会破坏原有的代码。 当然，这并不是说用户得从头到尾编写每一种效果的HTML源代码。因为这些工具通常带有许多辅助工具，可以帮助用户创建

6、表格、表单，以及其他复杂的结构，并对创建的页面进行预览。 这些工具最大的不足是必须会HTML语言。当然，要想成为一个好的网页制作人员，HTML还是应当掌握的。 这 类 工 具 中 典 型 的 有 H o m e S i t e 、HotDogProfessional、HTMLedPro、WebEditPro。 混合型工具：介于上面两种工具之间，混合型工具在所见即所得的工作环境下可以完成主要的工作，同时也能切换到一个文本编辑器，对HTML源代码进行直接地调整。 像所见即所得的工具一样，混合型的创作工具通常也不能完全控制HTML页的代码。但Macromedia Dreamweaver在对已有的HT

7、ML页进行编辑时，会严格保持原有代码的格式。典型的混合型工具还有Adobe PageMill、FrontPage、CutePage、QuickSite等。 FrontPage是较好的所见即所得的网页编辑工具，也是常用的网页编辑器。它对一个Web站点有很强的控制能力，可以统一Web站点内页面的外观和风格。它的Web管理功能也很强大，用户可以通过图形的方式观察和调整站点的结构。 Dreamweaver的最佳特性就是它的“往返式RoundtripHTML编辑能力，这种特性使图形编辑工具和代码编辑工具输出同样的HTML代码。Dreamweaver是图形化HTML编辑工具中惟一不干扰原有HTML代码的工

8、具，所以用Dreamweaver编辑后，仍然可以转回到原来的代码中用编辑工具进行修改。用其他工具修改后，Dreamweaver能自动更新相应的页面。它能很方便地产生动画，嵌入JavaApplet、ActiveX控件，以及Netscape插件，并对用户的动作作出反应。此外，Dreamweaver在Internet Explorer和Netscape Navigator两种浏览器之间的兼容性问题上处理得也很好。 2.2 课堂教学2.2.1 HTML基础2.2.2 HTML入门简单标记的认识与使用2.2.3 段落和文字标记2.2.4 建立超级链接2.2.5 加入图片2.2.1 HTML基础 1. H

9、TML文件的组成 2. 标志 3. 标记的属性 4. HTML文件的基本结构 HTML文件是一种纯文本文件，可以通过浏览器读取HTML文件，并用浏览器内含的语法分析器来解读各种特殊标记。1. HTML文件的组成 一个HTML文件可由下列3部分组成。 标志：是HTML的基本元素，可以说一个HTML文件大部分都是由字符信息加上一些标记呈现出来的。也就是说，只要在HTML文件中适当的位置上加上所需标记，就可依照各标记所代表的意义实现各种特殊的功效。基本的标记可分为两种：单一标记只要一个标记就能完成所要表示的功能和成对标记需要两个标记组合才能完成所需功能） 文字与图形资料：是指要提供给浏览信息的人阅读

10、的内容。WWW显示的图形一般都以独立文件的形式存在，如果要显示图形图形文件要用其他程序建立），就必须用特殊的标记指向图形文件。 统一资源定位器URLUniform Resource Locator）：是WWW上文件的参照格式，浏览者在浏览器的地址处输入URL格式的内容，就可获取所指主机的主页。2. 标志 HTML文件由标记和被标记的内容组成。标志tag能产生所需的各种效果。就像一个排版程序，它将网页的内容排成理想的效果。这些标记名称大都为相应的英文单词首字母或缩写，如P表示Paragraph段落）、IMG为Image图像的缩写，很好记忆。各种标记的效果差别很大，但总的表示形式却大同小异，大多数

11、成对出现，格式为： 受标记影响的内容 说明： 每个标记都用“”（大于号围住，如，以表示这是HTML代码而非普通文本。注意，“”与标记名之间不能留有空格或其它字符。 在标记名前加上符号“/”便是其结束标记，表示这种标记内容的结束，如。标记也有不用结尾的，称之为单标记。 标记字母大小写皆可，没有限制。 对同一段要标记的内容，可以用多个标记来共同作用，产生一定的效果。此时，各个标记间的顺序也是任意的。3. 标记的属性 标记只是规定这是什么信息，或是文本，或是图片，但怎样显示或控制这些信息，就需要在标记后面加上相关的属性来表示，每个标记有一系列的属性。标记要通过属性来制作出各种效果。格式为： 受影响的

12、内容 例如字体标记，有属性size和color等。属性size表示文字的大小，属性color表示文字的颜色。表示为： 属性示例 需要注意的是： 并不是所有的标记都有属性，如换行标记就没有。 根据需要可以用该标记的所有属性，也可以只用需要的几个属性，在使用时，属性之间没有顺序。多个属性之间用空格隔开。 属性和标记一样，都不区分大小写。但为了阅读方便，本书用大写字母表示标记，小写字母表示属性。4. HTML文件的基本结构 HTML文件是一种纯文本格式的文件，HTML文件包括头部head和主体body）。文件的基本结构为： 网页的标题 网页的内容 说明： HTML文件以开头，以结尾。 ：表示这是网页

13、的头部，用来说明文件命名和与文件本身的相关信息。可以包括网页的标题部分：。 ：表示网页的主体即正文部分。 HTML语言并不要求在书写时缩进，但为了程序的易读性，建议网页设计制作者使标记的首尾对齐，内部的内容向右缩进几格。【例2-1】简单的HTML文件。 简单的HTML文件 最简单的网页 图2-1 例2-1的显示效果 将文件以2_1.htm为文件名存盘，存放的位置是本机的工作目录：ASP例参见1.2.3）。有以下两种方式可以执行HTML文件2_1.htm： 打开Internet信息服务器窗口，找到虚拟目录myasp，在右边的文件列表中选择文件2_1.htm，然后在“操作菜单中选择“阅读项； 打开

14、浏览器，在地址栏中直接输入虚拟目录名及文件名： /myasp/2_1.htm 在浏览器上的显示效果如图2-1所示。2.2.2 HTML入门 1. HTML文档标记 2. HTML文件头标记 3. HTML文件标题标记 4. HTML文件主体标记 5. 注释标记1. HTML文档标记 HTML文档标记的格式为： HTML文档的内容 HTML文档的标记。处于文档的最前面，表示HTML文档的开始，即浏览器从开始解释，直到遇到为止。每个HTML文件均以开场，以完毕。2. HTML文件头标记 HEAD是英文“头的意思，习惯上将HTML文档分为文件头和文件主体两个部分。文件主体是在Web

15、浏览器窗口的用户区显示的内容，而文件头则用来规定该文档的标题浏览器标题栏中的内容和文档的一些属性。HTML文件头标记的格式为： 头部的内容 说明：HTML文件的头部在文件标记之后，在开始标记和结束标记间定义。其内容可以是标题名，文本文件地址、创作信息等网页信息说 明 。 对 应 于 相 应 的 标 记 ， 有 标 题 标 记等。 标记在HTML文件中不是必须的，如果没有，浏览器也会照常解读文件。3. HTML文件标题标记 HTML文件标题标记的格式为： 标题名 设定HTML文件标题的标记。在文件头部定义的标题内容不在浏览器窗口中显示，而是在浏览器的标题栏中显示。尽管头部定义的信息很多，但能在浏

16、览器标题栏中显示的信息只有标题。4. HTML文件主体标记 HTML文件主体标记的格式为： 文件主体 说明： 主体位于头部之后，以为开始标记，为结束标记。它定义了网页上显示的主要内容与显示格式，是整个网页的核心，网页中要真正显示的内容都包含在本标记中。 有很多属性，这些属性用于设定网页的总体风格，可以定义页面的背景图像、背景颜色、文字颜色、超文本链接的颜色。其中常用的属性见表2-1。 表2-1 标记的属性 表2-1中，涉及颜色的属性，取值可以是英文颜色名，也可以用“#”引导的一个十六进制数代码来表示，见表2-2。如果颜色值用十六进制数代码，则颜色数比表2-2列出的数目多得多。表2-2 颜色代码

17、表【例2-2】使用网页的背景色bgcolor属性，可以设定整个网页的背景颜色；使用网页的文本色text属性，可以设定整个网页文字的颜色。 这是主体之外的文本 试试BODY标记的属性 设置网页的背景色属性为黄绿色, 设置网页的文本色属性为蓝色 显示效果如图2-2所示。图2-2 使用网页的bgcolor属性5. 注释标记 像很多程序语言一样，HTML文件也提供注解功能。浏览器会忽略此标记中的文字可以是很多行而不作显示。通常使用“注释为文中的不同部分加上说明，以方便日后阅读和修改。注释标记的格式为： 注释内容不局限于一行，长度也不受限制。即结束标识符不必与开始标识符在同一行上。2.2.3 段落和文字

18、标记 1. 标题文字标记 2. 文本文字标记 3. 设置字型 4. 强制换行、换段标记 5. 分区显示标记 6. 水平线 7. 特殊符号 在多数网页中，文档是核心内容，所以要经常设置文档的格式。设置文档的标记包括标题和文字的字体、字号、字型、颜色、段落格式、文本的布局等。1. 标题文字标记 这里的标题是指页面中文本的标题，而不是用定义的网页标题，标题格式显示在浏览器窗口内，而不显示在浏览器的标题栏中。 在页面中，标题是一段文字内容的核心，所以总是用加强的效果来表示。网页中的信息可以分为主要点、次要点，可以通过设置不同大小的标题，为文章增加条理。标题文字标记的格式为： 标题文字 说明： 属性n用

19、来指定标题文字的大小。n可以取16的整数值，取1时文字最大，6时文字最小。 属性align用来设置标题在页面中的对齐方式，取值有：left左对齐）、center居中或right右对齐）。 标记缺省显示宋体字。 标记会自动插入一个空行。在一个标题行中无法使用不同大小的字体。【例2-3】使用标题标记设置标题内容的大小与对齐方式。 设置标题 第1级标题H1） 第2级标题H2） 第3级标题H3） 第4级标题H4）（居左） 第5级标题H5）（居中） 第6级标题H6）（居右） 图2-3 设置标题文字大小 浏览器的显示效果如图2-3所示。2. 文本文字标记 在网页中为了增强页面的层次，其中的文字可以用不同的

20、大小、字体、字型、颜色。文本文字标记用来设定文字的字体、字号和颜色。其格式为： 被设置的文字 说明：标记的属性包括：size、face、color。 size属性用来设置文字的大小。数字的取值范围从17，size取1时最小，取7时最大。 face属性用来设置字体。如黑体、宋体、楷体_GB2312、隶书、Times New Roman等。 当文字为汉字时，格式中的“字体名可以为：宋体、幼圆、隶书、楷体_GB2312、黑体、仿宋_GB2312等。当文字为英文时，字体名可以为Times New Roman等约50种字体。其实，这里的字体名字就是在Word的“字体工具栏中显示的字体名。 color属性

21、用来设置文字颜色，其取值见表2-2。【例2-4】使用标记的size属性设置文字的大小；face属性设置字体。color属性设置文字颜色。 使用FONT标记 设置文字的属性 1号字青色 2号字绿色 3号幼圆桔黄色 4号隶书深红色 5号黑体黄绿色 6号方正舒体水蓝色 7号华文彩云淡紫色 在浏览器中的显示效果如图2-4所示。图2-4 设置文本文字属性 说明： 和标记都可以设置文字的大小，二者的区别见表2-3。表2-3 与标记的区别 另外，当中的size取7时，文字比要大。 标记中的text属性和标记中的color属性都可以设置文本的颜色，标记直接作用其后的文字，可在文件中多处设定，使网页中文字的颜色

22、绚丽多彩。 当与标记同时对文字颜色进行定义时，标记优先。3. 设置字型 字型就是文字的风格，如加粗、斜体、带下划线、上标、下标等。字型的控制标记见表2-4。表2-4 设置各种字型的标记【例2-5】使用字型标记设置文字的风格。 设置字型 黑体 斜体 带下划线 标准打印机字体 带删除线 下标 上标 大字体 小字体 在浏览器中的显示效果如图2-5所示。4. 强制换行、换段标记 在HTML文档中，无法用多个回车、空格、Tab键来调整文档段落的格式。要用HTML的标记来强制换行、分段。 强制换行标记放在一行的末尾，可以使后面的文字、图片、表格等显示于下一行，而又不会在行与行之间留下空行，即强制文本换行。

23、由于浏览器会自动忽略原始码中空白和换行的部分，这使成为最常用的标记之一。强制换行标记的格式为：文字 说明：浏览器解释时，从该处换行。换行标记单独使用，可使页面清晰、整齐。 段落标记定义一个新段落的开始。标记不但能使后面的文字换到下一行，还可以使两段之间多一空行。由于一段的结束意味着新一段的开始，所以使用也可省略结束标记。 强制换段标记的格式为： 说明：段落标记的属性align用来设置段落的对齐方式，其取值可以为left、center或right，分别表示居左、居中、居右。缺省时默认为left。 一个强制换段标记可以看作是两个强制换行标记。【例2-6】换行与换段标记的使用。 强制换行、换段标记的

24、使用 学生之家 新    闻          学习窗口 健康信箱 聊 天 室 来信 说明：HTML语言忽略多余的空格，最多只空一个空格。在需要空格的位置，可以用“ ”插入一个空格，或者输入全角中文空格。在浏览器中显示。5. 分区显示标记 分区显示标记可以使文本块或一段文字在网页上：左对齐、居中和右对齐。分区显示标记的格式为： 文本或图像 说明：属性align的取值分别为：left、center和right。【例2-7】分区显示标记的使用。 分区显示标记的应用 分区

25、显示标记的应用 居中center居中center 居左left居左left 居右right居右right 在浏览器中显示6. 水平线 在页面中插入一条水平标尺线，可以使不同功能的文字分隔开，看起来整齐、明了。当浏览器执行HTML文件中的标记时，会在此处换行，并加入一条水平线段。线段的样式由标识的参数决定。水平线标记的格式为： 说明： 属性align设定横线放置的位置，可选择left居左）、right居右或center居中）。 属性size设定线条粗细，以像素为单位，默认为2。 属性width设定线段长度，可以是绝对值以像素为单位或相对值相对于当前窗口的百分比）。所谓绝对值，是指线段的长度是固定

26、的，不随窗口尺寸的改变而改变。所谓相对值，是指长度相对于窗口的宽度而定，窗口的宽度改变时，线段的长度也随之增减，默认值为100%，即始终填满当前窗口。 属性color设定线条颜色，默认为黑色。可以采用颜色的名称。颜色可以用相应英文单词或以“#”引导的一个十六进制数代码来表示，见表2-2。 属性noshade设定线条为平面显示没有三维效果），若缺省则有阴影或立体效果。【例2-8】水平线标记的使用。 水平线段标记的应用 水平线 在浏览器中的显示。浏览时，改变一下窗口的大小，可以看到线段的变化效果。 7. 特殊符号 浏览器解释HTML文件时，是根据“”来识别标记的，然后再确定这两个符号中的内容是否为

27、HTML文件标记，若是则按其规则解读。所以，要在网页中显示“”，就要作为特殊字符。其他常用的特殊字符见表2-5。表2-5 特殊替换字符2.2.4 建立超级链接 1. 热点标记 2. 创建指向其他页面的链接 3. 创建指向本页中的链接 超链接Hyperlink可以看作是一个“热点”，它可以从当前Web页定义的位置跳转到其他位置，包括当前页的某个位置、Internet或本地硬盘或局域网上的其他文件，甚至跳转到声音、图片等多媒体文件。浏览Web页是超链接最普遍的一种应用，通过超链接还可以获得不同形态的服务，如文件传输、资料查询、电子函件、远程访问等。 当Web页包含超链接时，Web页中的外观形式为彩

28、色一般为蓝色且带下划线的文字或图片。单击这些文本或图片，可跳转到相应位置。鼠标指针指向超链接的显示文本或图片时，将变成手形。超文本链接使用热点标记来定义。1. 热点标记 热点由标记定义，它在网页上建立超文本链接。通过单击一个词、句或图片，可从此处转到另一个链接资源目标资源），这个目标资源有唯一的地址URL）。具有以上特点的词、句或图片就称为热点。标记的格式为： 热点 说明： href为超文本引用，它的值为一个URL，是目标资源的有效地址。在书写URL时要注意，如果资源放在自己的服务器上，可以写相对路径。否则，应写绝对路径。href不能与name同时使用。 name指定当前文档内的一个字符串作为

29、链接时可以使用有效的目标资源的地址。 target设定链接被按后结果所要显示的窗口。可选值为：_blank，_parent，_self，_top，框架名称。其说明见表2-6。表2-6 target属性的取值2. 创建指向其他页面的链接 创建指向其他页面的链接，就是在当前页面与其他相关页面间建立超链接。无论目标文件与当前文件的目录关系如何，其格式为： 热点 根据目标文件与当前文件的目录关系，有4种写法： 链接到同一目录内的网页文件，其格式为： 热点 目标文件名是链接所指向的文件。 链接到下一级目录中的网页文件，其格式为： 热点 链接到上一级目录中的网页文件，其格式为： 热点 其中“./”表示退到

30、上一级目录中。 链接到同级目录中的网页文件，其格式为： 热点 表示先退到上一级目录中，然后再进入到目标文件所在的目录。3. 创建指向本页中的链接 要在当前页面内实现超链接，需要定义两个标记：一个为超链接标记，另一个为书签标记。超链接标记的格式为： 热点 单击热点文本，将跳转到“记号名开始的文本。 书签就是用标记对该文本作一个记号。如果有多个链接，不同目标文本要设置不同的书签名，书签名在的name属性中定义。格式为： 目标文本附近的字符串 【例2-9】链接本页中的文本。 学生之家 欢迎来到“学生之家” 新闻     学习园地  &nbs

31、p;  健康信箱     新闻 . 返回 学习园地 . 返回 健康信箱 . 返回 在浏览器中的显示。单击超链接，将跳转到页面的相应位置，2.2.5 加入图片 1. 图片文件的格式 2. 设置网页的背景 3. 图片标记 4. 用图片作为超链接1. 图片文件的格式 加入网页中的图片，通常使用GIF格式和JPEG格式。 GIF格式文件最多只能显示256种颜色，这使得它很少用于存储照片。但是，存放图标、剪贴画和艺术线条等对颜色要求不高的图片，已经足够了。GIF格式图片的优点在于制作透明、隔行和动画效果。 JPEG格式文件可以拥有计算机所能提供的最多种颜

32、色，适合存放高质量的彩色图片、照片。另外，JPEG格式文件采用压缩方式存储文件信息，相同的图片，所占空间比GIF文件小，所以下载时间较短，浏览速度较快。但是，JPEG格式的文件没有GIF格式文件的三种特殊效果。2. 设置网页的背景 网页的背景可以是某种颜色，也可以是图片。无论是图片，还是背景色，都通过标记的相应属性来设置。 (1) 设置背景色 利用色彩作背景，比较容易在颜色上协调，而且下载速度比采用图片作为背景快。网页缺省为白色，的bgcolor属性用于设置网页的背景色。格式为： 其中，“颜色值可以为颜色的英文名或相应十六进制值。 (2) 用图片作为背景 使用标记的background属性，可

33、为网页铺上背景图片。格式为： 其中“图片文件名包括文件存放的路径，可以是相对路径，也可以是绝对路径。图片文件可为GIF格式或JPEG格式的文件。 在浏览器中，作为背景的图片将按原来的大小复制，重复铺满整个网页。作为背景的图片文件，要做的很小，以便加快下载速度。【例2-10】图片背景。 图片背景 用图片作为背景 在浏览器中，作为背景的图片将按原来的大小复制，重复铺满整 个网页。因而，作为背景的图片文件，要做的很小，以便加快下 载速度。 在浏览器中的显示效果。 3. 图片标记 使用图片标记，可以把一幅图片加入到网页中。用图片标记还可以设置图片的替代文本、尺寸、布局等属性。格式为： 说明：标记中的属

34、性说明见表2-7。表2-7 图片标记的属性说明 (1) 图片的尺寸 使用标记的width和height属性可以设置图片的大小，width和height属性的值可取像素数，也可取百分数浏览器窗口）。如果不设定图片的尺寸，图片将按照其本身的大小显示。 【例2-11】设置图片的尺寸。 设定图片的尺寸 设定图片的尺寸 原始大小 宽85，高120 宽40%，高40% 在浏览器中的显示效果。 (2) 图片的布局 所谓布局，就是图片放在网页中的位置，以及图片与文本的排放关系。实现这种功能，可以使用标记的align属性。align属性的取值见表2-8。表2-8 图片标记的属性说明 除此之外，使用标记的align属性或标记也可以实现相应的功能。 当设置文本环绕方式left或right后，将一直有效，如果想取消环绕方式，可使用标记的clear属性，其后的文本将不再环绕图片。格式为：【例2-12】文本环绕图片及其解除。 设定图片的对齐方式 设定图片的对齐