《ASP动态网页制作教程 第2版 教学课件 ppt 作者 李军 黄宪通 李慧 第3章-Web页面制作基础》由会员分享，可在线阅读，更多相关《ASP动态网页制作教程 第2版 教学课件 ppt 作者 李军 黄宪通 李慧 第3章-Web页面制作基础（222页珍藏版）》请在金锄头文库上搜索。
1、ASP动态网页制作教程,第3章 Web页面制作基础,本章介绍Web页面制作基础，主要内容包括HTML标记语言概述、常用的HTML标记、CSS样式表以及最新的HTML5新增的结果元素等。通过本章的学习，读者应了解什么是HTML和CSS样式表，并能掌握关于文本、超链接、表格、表单等常用的HTML标记以及如何定义和引用CSS样式表，并且能够应用HTML5新增的主体元素开发Web页面。,主要内容,3.1 HTML标记语言,在Internet上浏览的大部分网页都是用HTML语言编写的。HTML语言是制作网页的基础，可以说Web动态编程都是在HTML的基础上进行的。,3.1.1 什么是HTML 超文本标记
2、语言（Hypertext Markup Language，HTML）是Web页面的描述性语言，是在标准通用化标记语言（Standard Generalized Markup Language，SGML）的基础上建立起来的。,根据其语法规则建立起来的文本可以运行在不同的操作系统平台和浏览器上，是所有网页制作技术的核心与基础。无论是在Web上发布信息，还是编写可供交互的程序，都离不开HTML语言。,3.1.2 HTML文件结构 使用HTML语言编写的超文本文件称为HTML文件。可以在Windows下的文本编辑器中手工直接编写HTML文件，也可以使用FrontPage、Dreamweaver等可视化
3、编辑软件编写HTML文件。,HTML通过在文本中嵌入各种标记，使普通文本具有超文本的功能。,HTML文件的基本结构如下。 头部信息 主体内容 ,： HTML文件的开始和结束，其中包含和标记的内容。 ：HTML文件的头部标记，用于包含文件的基本信息。,：HTML文件的主体标记，在头部标记之后。它定义了HTML文件显示的主要内容和显示格式。 这里需要注意的是，与标记是两个独立的部分，不能互相嵌套。,图3-1 运行HTML文件,3.1.3 HTML头部标记与主体标记 任何HTML文件都包含在和标记之中。一个标准的HTML文件分为头部和主体两大部分。其中，头部标记为，主体标记为。,1头部标记 标记是页
4、面的第二层标记，用于提供与Web页面有关的各种信息。,【例3-1】在标记内设置页面信息。,图3-2 头部标记,2主体标记 在和中放置的是页面展示的所有内容。作为网页的主体部分，标记有很多的内置属性，通过这些属性可以设定网页的总体风格。例如，定义页面的背景图案、背景颜色、文字颜色、超文本链接颜色等。,（1）Background属性光焕发 （2）Bglolor属性 （3）Bgproperties属性 （4）Text属性 （5）Link属性,（6）Alink属性 （7）Vlink属性 （8）Topmargin属性 （9）Leftmargin属性,【例3-2】通过标记定义页面显示风格。,图3-3 主体
5、标记,3.2 设置文字风格,文字是网页的基础部分，突出的文字内容、合理的文字排版能够确切地传达出页面的主要信息。本节介绍字体标记、标题字标记、段落标记、换行标记以及注释标记和。,3.2.1 定义文字字体 1字体标记 标记可以设定文字的字体、大小和颜色。标记的属性包括FACE（字体）、SIZE（字号）和COLOR（颜色）。,（1）FACE属性 （2）SIZE属性 （3）COLOR属性,【例3-3】使用标记定义文字。,2标题字标记 标题文字是指以某几种固定的字号显示文字。标题标记由到，分别表示1级至6级标题，每级标题文字的字体大小依次递减。每个标题标记所标识的文字将独占一行且上下留一空白行。,【例
6、3-4】使用标题字标记。,图3-4 字体标记,图3-5 使用标题字标记,3.2.2 文字的排版 一个清晰、排版整齐的Web页面更能反映其所包含的内容，让读者一目了然。使用文字的排版标记可以使文字按照定义的规则显示。下面介绍常用的段落标记和换行标记。,1段落标记 段落是指一段格式统一的文本。使用段落标记，将在段落之间间隔一空白行。 语法： ,【例3-5】使用标记对文字进行排版。,2换行标记 标记相当于一个换行符，它可以使内容换行显示。与标记不同，使用标记后两行之间是没有明显间隔的；而使用标记是开始一个新的段落，段落与段落之间间隔一空白行。,【例3-6】换行显示文字。,图3-6 使用标记对文字进行
7、排版,图3-7 换行显示文字,3.2.3 注释标记 在页面中可以使用注释语句来标注一行源代码或一段源代码的用途，这样便于源代码编写者对代码的检查与维护，还可以使用注释语句添加版权说明等。值得注意的是，注释语句不会显示在浏览器窗口中。在HTML文件中，使用注释标记和来书写注释语句。,语法： 或者 上述两种表示方法的功能是一样的，都可以为页面添加注释语句。,【例3-7】添加注释。,图3-8 添加注释,3.3 建立超链接,超链接是网页中最重要的元素之一。一个网站是由多个页面组成的，页面之间根据链接确定相互的导航关系。单击网页上的链接文字或者图像后，就可以跳转到另一个网页。每一个网页都有唯一的地址，称
8、作统一资源定位符（Uniform Resource Locator，URL）。,3.3.1 链接标记 在网页中使用标记建立超链接。链接标记的属性如下。 （1）href属性 （2）target属性,表3-1 target属性的取值,（3）title属性 （4）name属性,3.3.2 建立内部链接 内部链接指的是在同一个网站内部，不同的HTML页面之间的链接关系。即链接指向的是站点文件夹之内的文件。,语法： 链接内容 其中，链接文件的路径使用的是相对文件路径，链接内容可以是文字或者图像等。,【例3-8】建立内部链接。,图3-9 建立内部链接,3.3.3 建立外部链接 外部链接指的是跳转到当前网站
9、外部，与其他网站中的页面或者其他元素之间的链接关系。这种链接在一般情况下需要书写绝对的链接地址。,建立外部链接时，通常使用URL来定位万维网信息。这种方式可以简洁、明了、准确地描述信息所在的地点。下面看一下通过“http:/”和“mailto:”如何实现链接到外部网站和向外部网站发送邮件的。,1“http:/”链接到外部网站 语法： 链接内容 http:/后面写网站地址。,2“mailto:”发送邮件 在HTML页面中可以建立E-mail链接，当浏览者单击E-mail链接后，系统会启动默认的电子邮件软件进行E-mail的发送。,语法： 发送E-mail 发送E-mail,发送E-mail 发送
10、E-mail,表3-2 参数说明,【例3-9】发送E-mail。,图3-10 建立发送E-mail的超链接,图3-11 单击“给作者的信1”链接的结果,图3-12 单击“给作者的信2”链接的结果,3.4 多媒体效果,在网页中使用多媒体，不但可以使网页更美观，还可以增加网站的访问量。多媒体是指利用计算机技术，把多种媒体综合在一起，使之建立起逻辑上的联系，并能对其进行各种处理的一种方法。,多种媒体主要包括文字、声音、图像、动画等各种形式。本节介绍如何在网页中插入图片，播放音乐、视频和Flash动画，播放背景音乐以及实现文字或图片的滚动效果。,3.4.1 插入图片 在纯文本的HTML页面中加入图片，
11、可以给原来单调乏味的页面添加生气。HTML语言中使用标记插入图片，这个标记没有终止标记。标记的常用属性如下。,（1）src属性 （2）width、height属性 （3）hspace、vspace属性 （4）border属性 （5）align属性 （6）alt属性 （7）lowsrc属性,【例3-10】在网页中插入图片。,图3-13 在网页中插入图片,3.4.2 播放音乐、视频和Flash动画 在HTML文件中，使用标记可以直接嵌入多媒体文件，如播放音乐、视频和Flash动画。标记的属性如表3-3所示。,表3-3 标记的属性,1播放MP3音乐 在网页中使用标记嵌入MP3音乐文件，并设置在网页打
12、开时自动播放MP3音乐，代码如下。,2播放MPEG电影和AVI视频 （1）播放MPEG电影 动态图像专家组（Moving Pictures Experts Group，MPEG）数字视频格式是运动图像压缩算法的国际标准，采用了有损压缩方法减少运动图像中的冗余信息。,它在数字电视、动态图像、因特网、实时多媒体监控、移动多媒体通信、Internet/Intranet上的视频服务与可视游戏、DVD上的交互多媒体等方面都有应用。,【例3-11】播放MPEG电影。,图3-14 播放MPEG电影,（2）播放AVI视频 AVI（Audio Video Interlaced）是一种不需要专门硬件参与就可以实现
13、大量视频压缩的数字视频压缩格式，是文件音频数据和视频数据的混合，即音频数据和视频数据交错存放在同一个文件中。,【例3-12】播放AVI视频。,图3-15 播放AVI视频,3播放Flash动画 Flash动画是一种矢量动画格式，是用Macromedia公司的Flash软件编辑而成，具有体积小、兼容性好、直观动感、互动性强大、支持MP3音乐等诸多优点，是当今比较流行的Web页面动画格式。在任何一个版本的浏览器上只要安装好插件，就可以观看Flash动画了。,【例3-13】播放Flash动画。,图3-16 播放Flash动画,3.4.3 播放背景音乐 在网页中使用标记可以为页面设置背景音乐。与使用标记
14、不同，标记不但可以实现无限次循环播放音乐文件的功能，而且在网页最小化的时候背景音乐将自动停止。它没有显示效果，是真正的背景音乐标记。,语法： ,通过标记可以嵌入多种格式的音乐文件，常用的是MIDI文件。,3.4.4 滚动效果 在HTML页面中，可以实现文字或者图片的滚动效果。例如，可以使一段文字从浏览器的右边进入，横穿屏幕，从浏览器的左边退出等。在静止的页面中使用动态的效果，可以突出页面中想要强调的内容。在HTML语言中使用标记实现滚动效果。,语法： 滚动内容,标记的常用属性如下。 （1）direction属性 （2）behavior属性 （3）loop属性,（4）scrollamount属性
15、 （5）scrolldelay属性 （6）width属性 （7）height属性 （8）bgcolor属性,【例3-14】实现文字滚动效果。,图3-17 实现文字滚动效果,HTML5页面中的多媒体 在HTML5中，新增了两个元素video元素与audio元素。video元素专门用来播放网络上的视频或电影，而audio元素专门用来播放网络上的音频数据。使用这两个元素，就不再需要使用其他任何插件了，只要使用支持HTML5的浏览器就可以了。,浏览器对两个的支持情况,3.5 制 作 表 格,表格是网站常用的页面元素，是网页排版的最佳手段。在页面中用表格来加强对文本位置的控制和显示数据，直观清晰。而且H
16、TML的表格使用起来非常灵活，非常容易掌握。,3.5.1 表格的基本结构 表格是网页排版的最佳手段，利用表格的丰富属性可以设计出各种复杂的表格。在HTML中，表格主要由3个标记来构成：表格标记、行标记、单元格标记。,表格的基本结构如下。 , ,3.5.2 定义表格的标题和表头 在HTML语言中，可以通过标记为表格添加标题，通过标记定义表格表头。,（1）标记定义表格标题。 语法： ,【例3-15】定义表格的标题。,图3-18 定义表格的标题,（2）标记定义表格表头。 表头是指表格的第一行。通过标记可以定义表格的表头，其中的文字居中对齐并且加粗显示。,语法： , 通过定义表头，可以很容易地将表格第一行文字与其他行文字形成显著对比。,【例3-16】定义表格表头。,图3-19 定义表格表头,3.5.3 设置表格的边框和间隔 标记的b
