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