Web页面制作基础报告

ASP动态网页制作教程第3章Web页面制作基础•本章介绍Web页面制作基础，主要内容包括HTML标记语言概述、常用的HTML标记、CSS样式表以及最新的HTML5新增的结果元素等。通过本章的学习，读者应了解什么是HTML和CSS样式表，并能掌握关于文本、超链接、表格、表单等常用的HTML标记以及如何定义和引用CSS样式表，并且能够应用HTML5新增的主体元素开发Web页面。主要内容HTML标记语言3.1设置文字风格3.2制作表格3.5多媒体效果3.4建立超链接3.3上机指导3.10小结3.9CSS3.8构建框架3.7建立表单3.63.1HTML标记语言•在Internet上浏览的大部分网页都是用HTML语言编写的。HTML语言是制作网页的基础，可以说Web动态编程都是在HTML的基础上进行的。3.1.1什么是HTML•超文本标记语言（HypertextMarkupLanguage，HTML）是Web页面的描述性语言，是在标准通用化标记语言（StandardGeneralizedMarkupLanguage，SGML）的基础上建立起来的。•根据其语法规则建立起来的文本可以运行在不同的操作系统平台和浏览器上，是所有网页制作技术的核心与基础。无论是在Web上发布信息，还是编写可供交互的程序，都离不开HTML语言。3.1.2HTML文件结构•使用HTML语言编写的超文本文件称为HTML文件。可以在Windows下的文本编辑器中手工直接编写HTML文件，也可以使用FrontPage、Dreamweaver等可视化编辑软件编写HTML文件。•HTML通过在文本中嵌入各种标记，使普通文本具有超文本的功能。•HTML文件的基本结构如下。•HTML•HEAD•头部信息•/HEAD•BODY•主体内容•/BODY•/HTML•HTML…/HTML：HTML文件的开始和结束，其中包含HEAD和BODY标记的内容。•HEAD…/HEAD：HTML文件的头部标记，用于包含文件的基本信息。•BODY…/BODY：HTML文件的主体标记，在头部标记/HEAD之后。它定义了HTML文件显示的主要内容和显示格式。•这里需要注意的是，HEAD与BODY标记是两个独立的部分，不能互相嵌套。图3-1运行HTML文件3.1.3HTML头部标记与主体标记•任何HTML文件都包含在HTML和/HTML标记之中。一个标准的HTML文件分为头部和主体两大部分。其中，头部标记为HEAD，主体标记为BODY。1．头部标记HEAD•HEAD标记是页面的第二层标记，用于提供与Web页面有关的各种信息。•【例3-1】在HEAD标记内设置页面信息。•页面标题图3-2头部标记HEAD2．主体标记BODY•在BODY和/BODY中放置的是页面展示的所有内容。作为网页的主体部分，BODY标记有很多的内置属性，通过这些属性可以设定网页的总体风格。例如，定义页面的背景图案、背景颜色、文字颜色、超文本链接颜色等。（1）Background属性光焕发（2）Bglolor属性（3）Bgproperties属性（4）Text属性（5）Link属性（6）Alink属性（7）Vlink属性（8）Topmargin属性（9）Leftmargin属性•【例3-2】通过BODY标记定义页面显示风格。图3-3主体标记BODY3.2设置文字风格•文字是网页的基础部分，突出的文字内容、合理的文字排版能够确切地传达出页面的主要信息。本节介绍字体标记FONT、标题字标记H、段落标记P、换行标记BR以及注释标记!--…--和COMMENT。3.2.1定义文字字体1．字体标记FONT•FONT标记可以设定文字的字体、大小和颜色。FONT标记的属性包括FACE（字体）、SIZE（字号）和COLOR（颜色）。（1）FACE属性（2）SIZE属性（3）COLOR属性•【例3-3】使用FONT标记定义文字。2．标题字标记H•标题文字是指以某几种固定的字号显示文字。标题标记由H1到H6，分别表示1级至6级标题，每级标题文字的字体大小依次递减。每个标题标记所标识的文字将独占一行且上下留一空白行。•【例3-4】使用标题字标记H。图3-4字体标记FONT图3-5使用标题字标记H3.2.2文字的排版•一个清晰、排版整齐的Web页面更能反映其所包含的内容，让读者一目了然。使用文字的排版标记可以使文字按照定义的规则显示。下面介绍常用的段落标记P和换行标记BR。1．段落标记P•段落是指一段格式统一的文本。使用段落标记P，将在段落之间间隔一空白行。•语法：•PALIGN=对齐方式…/P•【例3-5】使用P标记对文字进行排版。2．换行标记BR•BR标记相当于一个换行符，它可以使内容换行显示。与P标记不同，使用BR标记后两行之间是没有明显间隔的；而使用P标记是开始一个新的段落，段落与段落之间间隔一空白行。•【例3-6】换行显示文字。图3-6使用P标记对文字进行排版图3-7换行显示文字3.2.3注释标记•在页面中可以使用注释语句来标注一行源代码或一段源代码的用途，这样便于源代码编写者对代码的检查与维护，还可以使用注释语句添加版权说明等。值得注意的是，注释语句不会显示在浏览器窗口中。在HTML文件中，使用注释标记!--…--和COMMENT来书写注释语句。•语法：•!----•或者•COMMENT/COMMENT•上述两种表示方法的功能是一样的，都可以为页面添加注释语句。•【例3-7】添加注释。图3-8添加注释3.3建立超链接•超链接是网页中最重要的元素之一。一个网站是由多个页面组成的，页面之间根据链接确定相互的导航关系。单击网页上的链接文字或者图像后，就可以跳转到另一个网页。每一个网页都有唯一的地址，称作统一资源定位符（UniformResourceLocator，URL）。3.3.1链接标记A•在网页中使用A标记建立超链接。链接标记A的属性如下。（1）href属性（2）target属性表3-1target属性的取值属性值描述_parent在上一级窗口中打开。一般使用框架页时使用_blank在新窗口中打开_self在当前窗口中打开_top在浏览器的整个窗口中打开，忽略任何框架（3）title属性（4）name属性3.3.2建立内部链接•内部链接指的是在同一个网站内部，不同的HTML页面之间的链接关系。即链接指向的是站点文件夹之内的文件。•语法：•ahref=链接文件的路径链接内容/a•其中，链接文件的路径使用的是相对文件路径，链接内容可以是文字或者图像等。•【例3-8】建立内部链接。图3-9建立内部链接3.3.3建立外部链接•外部链接指的是跳转到当前网站外部，与其他网站中的页面或者其他元素之间的链接关系。这种链接在一般情况下需要书写绝对的链接地址。•建立外部链接时，通常使用URL来定位万维网信息。这种方式可以简洁、明了、准确地描述信息所在的地点。下面看一下通过“http://”和“mailto:”如何实现链接到外部网站和向外部网站发送邮件的。1．“http://”链接到外部网站•语法：•ahref=http://链接内容/a•http://后面写网站地址。2．“mailto:”发送邮件•在HTML页面中可以建立E-mail链接，当浏览者单击E-mail链接后，系统会启动默认的电子邮件软件进行E-mail的发送。•语法：•AHREF=MAILTO:A@B.C发送E-mail/A•AHREF=MAILTO:A@B.C?SUBJECT=CONTENT发送E-mail/A•AHREF=MAILTO:A@B.C?CC=A@B.C发送E-mail/A•AHREF=MAILTO:A@B.C?BCC=A@B.C发送E-mail/A表3-2参数说明参数描述A@B.C代表邮件地址SUBJECT电子邮件主题CC抄送收件人BCC暗送收件人•【例3-9】发送E-mail。图3-10建立发送E-mail的超链接图3-11单击“给作者的信1”链接的结果图3-12单击“给作者的信2”链接的结果3.4多媒体效果•在网页中使用多媒体，不但可以使网页更美观，还可以增加网站的访问量。多媒体是指利用计算机技术，把多种媒体综合在一起，使之建立起逻辑上的联系，并能对其进行各种处理的一种方法。•多种媒体主要包括文字、声音、图像、动画等各种形式。本节介绍如何在网页中插入图片，播放音乐、视频和Flash动画，播放背景音乐以及实现文字或图片的滚动效果。3.4.1插入图片•在纯文本的HTML页面中加入图片，可以给原来单调乏味的页面添加生气。HTML语言中使用IMG标记插入图片，这个标记没有终止标记。IMG标记的常用属性如下。（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文件中，使用EMBED标记可以直接嵌入多媒体文件，如播放音乐、视频和Flash动画。EMBED标记的属性如表3-3所示。表3-3EMBED标记的属性属性描述src多媒体文件路径width播放多媒体文件区域的宽度heigth播放多媒体文件区域的高度hidden控制播放面板的显示和隐藏，取值为“True”代表隐藏面板，取值为“No”代表显示面板autostart控制多媒体内容是否自动播放，取值为“True”代表自动播放，取值为“False”代表不自动播放loop控制多媒体内容是否循环播放，取值为“True”代表无限次循环播放，取值为“No”代表仅播放一次1．播放MP3音乐•在网页中使用EMBED标记嵌入MP3音乐文件，并设置在网页打开时自动播放MP3音乐，代码如下。•embedsrc=3-01.mp3width=300height=200hidden=noautostart=true/embed2．播放MPEG电影和AVI视频（1）播放MPEG电影•动态图像专家组（MovingPicturesExpertsGroup，MPEG）数字视频格式是运动图像压缩算法的国际标准，采用了有损压缩方法减少运动图像中的冗余信息。•它在数字电视、动态图像、因特网、实时多媒体监控、移动多媒体通信、Internet/Intranet上的视频服务与可视游戏、DVD上的交互多媒体等方面都有应用。•【例3-11】播放MPEG电影。图3-14播放MPEG电影（2）播放AVI视频•AVI（AudioVideoInterlaced）是一种不需要专门硬件参与就可以实现大量视频压缩的数字视频压缩格式，是文件音频数据和视频数据的混合，即音频数据和视频数据交错存放在同一个文件中。•【例3-12】播放AVI视频。图3-15播放AVI视频3．播放Flash动画•Flash动画是一种矢量动画格式，是用Macromedia公司的Flash软件编辑而成，具有体积小、兼容性好、直观动感、互动性强大、支持MP3音乐等诸多优点，是当今比较流行的Web页面动画格式。在任何一个版本的浏览器上只要安装好插件，就可以观看Flash动画了。•【例3-13】播放Flash动画。•图3-16播放Flash动画3.4.3播放背景音乐•在网页中使用BGSOUND标记可以为页面设置背景音乐。与使用EMBED标记不同，BGSOUND标记不但可以实现无限次循环播放音乐文件的功能，而且在网页最小化的时候背景音乐将自动停止。它没有显示效果，是真正的背景音乐标记。•语法：•bgsoundsrc=file_nameloop=loop_va