Web页面制作基础

相关主题

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

• 【例3-8】建立内部链接。
图3-9 建立内部链接
3.3.3 建立外部链接
• 外部链接指的是跳转到当前网站外部，与其他网站中的页面或者其他元素之间的链接关系。这种链接在一般情况下需要书写绝对的链接地址。
• 建立外部链接时，通常使用URL来定位万维网信息。这种方式可以简洁、明了、准确地描述信息所在的地点。下面看一下通过“http://”和“mailto:”如何实现链接到外部网站和向外部网站发送邮件的。
（3）title属性（4）name属性
3.3.2 建立内部链接
• 内部链接指的是在同一个网站内部，不同的HTML页面之间的链接关系。即链接指向的是站点文件夹之内的文件。
• 语法：
• <a href="链接文件的路径">链接内容 </a>
• 其中，链接文件的路径使用的是相对文件路径，链接内容可以是文字或者图像等。
• 在网页中使用多媒体，不但可以使网页更美观，还可以增加网站的访问量。多媒体是指利用计算机技术，把多种媒体综合在一起，使之建立起逻辑上的联系，并能对其进行各种处理的一种方法。
• 多种媒体主要包括文字、声音、图像、动画等各种形式。本节介绍如何在网页中插入图片，播放音乐、视频和Flash动画，播放背景音乐以及实现文字或图片的滚动效果。
3.1.2 HTML文件结构
• 使用HTML语言编写的超文本文件称为 HTML文件。可以在Windows下的文本编辑器中手工直接编写HTML文件，也可以使用 FrontPage、Dreamweaver等可视化编辑软件编写HTML文件。
• HTML通过在文本中嵌入各种标记，使普通文本具有超文本的功能。
描述
src
多媒体文件路径
width
播放多媒体文件区域的宽度
heigth 播放多媒体文件区域的高度
hidden
控制播放面板的显示和隐藏，取值为“True”代表隐藏面板，取值为“No”代表显示面板
autostart
控制多媒体内容是否自动播放，取值为“True”代表自动播放，取值为“False”代表不自动播放
• 【例3-11】播放MPEG电影。
图3-14 播放MPEG电影
（2）播放AVI视频
• AVI（Audio Video Interlaced）是一种不需要专门硬件参与就可以实现大量视频压缩的数字视频压缩格式，是文件音频数据和视频数据的混合，即音频数据和视频数据交错存放在同一个文件中。
• 【例3-12】播放AVI视频。
图3-3 主体标记<BODY>
3.2 设置文字风格
• 文字是网页的基础部分，突出的文字内容、合理的文字排版能够确切地传达出页面的主要信息。本节介绍字体标记 、标题字标记<H>、段落标记、换行标记 以及注释标记和 <COMMENT>。
3.2.1 定义文字字体
1．头部标记<HEAD>
• <HEAD>标记是页面的第二层标记，用于提供与Web页面有关的各种信息。
• 【例3-1】在<HEAD>标记内设置页面信息。
图3-2 头部标记<HEAD>
•
页面标题
2．主体标记<BODY>
• 在<BODY>和</BODY>中放置的是页面展示的所有内容。作为网页的主体部分， <BODY>标记有很多的内置属性，通过这些属性可以设定网页的总体风格。例如，定义页面的背景图案、背景颜色、文字颜色、超文本链接颜色等。
• 【例3-6】换行显示文字。
图3-6 使用标记对文字进行排版
图3-7 换行显示文字
3.2.3 注释标记
• 在页面中可以使用注释语句来标注一行源代码或一段源代码的用途，这样便于源代码编写者对代码的检查与维护，还可以使用注释语句添加版权说明等。值得注意的是，注释语句不会显示在浏览器窗口中。在HTML文件中，使用注释标记 • 或者 • <COMMENT></COMMENT> • 上述两种表示方法的功能是一样的，
都可以为页面添加注释语句。
• 【例3-7】添加注释。
图3-8 添加注释
3.3 建立超链接
• 超链接是网页中最重要的元素之一。一个网站是由多个页面组成的，页面之间根据链接确定相互的导航关系。单击网页上的链接文字或者图像后，就可以跳转到另一个网页。每一个网页都有唯一的地址，称作统一资源定位符（Uniform Resource Locator，URL）。
3.1.1 什么是HTML
• 超文本标记语言（Hypertext Markup Language，HTML）是Web页面的描述性语言，是在标准通用化标记语言（Standard Generalized Markup Language，SGML）的基础上建立起来的。
• 根据其语法规则建立起来的文本可以运行在不同的操作系统平台和浏览器上，是所有网页制作技术的核心与基础。无论是在Web上发布信息，还是编写可供交互的程序，都离不开HTML语言。
1．段落标记
• 段落是指一段格式统一的文本。使用段落标记，将在段落之间间隔一空白行。
• 语法： • …
• 【例3-5】使用标记对文字进行排版。
2．换行标记 
• 标记相当于一个换行符，它可以使内容换行显示。与标记不同，使用 标记后两行之间是没有明显间隔的；而使用标记是开始一个新的段落，段落与段落之间间隔一空白行。
• 【例3-4】使用标题字标记<H>。
图3-4 字体标记
图3-5 使用标题字标记<H>
3.2.2 文字的排版
• 一个清晰、排版整齐的Web页面更能反映其所包含的内容，让读者一目了然。使用文字的排版标记可以使文字按照定义的规则显示。下面介绍常用的段落标记和换行标记 。
1．“http://”链接到外部网站
• 语法： • <a href="http://">链接内容</a> • http://后面写网站地址。
2．“mailto:”发送邮件
• 在HTML页面中可以建立E-mail链接，当浏览者单击E-mail链接后，系统会启动默认的电子邮件软件进行E-mail的发送。
表3-2 参数说明
参数 A@B.C SUBJECT CC BCC
描述代表邮件地址电子邮件主题抄送收件人暗送收件人
• 【例3-9】发送E-mail。
图3-10 建立发送E-mail的超链接
图3-11 单击“给作者的信1”链接的结果
wk.baidu.com
图3-12 单击“给作者的信2”链接的结果
3.4 多媒体效果
主要内容
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的基础上进行的。
3.4.1 插入图片
• 在纯文本的HTML页面中加入图片，可以给原来单调乏味的页面添加生气。HTML 语言中使用<IMG>标记插入图片，这个标记没有终止标记。<IMG>标记的常用属性如下。
（1）src属性（2）width、height属性（3）hspace、vspace属性（4）border属性（5）align属性（6）alt属性（7）lowsrc属性