2010 级多媒体网页与制作

2010 级多媒体网页与制作

徐学锋

联系方式• 姓名：徐学锋• Email ： [email protected]

• Mobile:189-1016-9339

• 辅助网址： http://202.112.91.203/~xuxf

内容和形式内容：• Dreamweaver 网页制作• Flash 动画制作• Photoshop 图片制作

形式• 讲解（课堂笔记记录关键点）——作业——上机

——完善个人主页• 案例——上机——同学讲——辅助• 共 17 周上课时间

说明• 每一位同学有一个帐号，帐号名称• 全勤上课，否则作业不易完成。优秀作业

提交学校存档，其主页帐号课程结束后仍可使用。

• 笔试 60% ，平常 40% （作业和出勤最终作业就是你的个人网站，上面有 Photoshop 和 Flash 的作业。

• 学习目标之一：通过这些技术掌握用网页、flash 和 photoshop 做教学课件的能力。

基本概念补充• URL （ uniform resource location ）统一资源定位器，网上的每一个文件都有一个用 URL 标

识的地址。通俗的理解：网页文件的地址• 网页和网站网页是网站的基本信息单位，由文字、图片、动画、声音

等多种媒体信息和链接组成。网页文件用 HTML 语言编写，扩展名为 htm 或 html 。网站是由多个网页组成的构成一定整体功能的站点，用超链接的方式组成。

• HTML 语言（超文本标记语言， Hypertext Markup Language ）

用来制作网页的计算机语言，使用标记的方式解释网页的内容，可以把文字、图片、声音、视频、动画等信息链接在一起。比如：

<a http://www.bnu.edu.cn> 北京师范大学 </a> ，其中 <a></a> 两个标记符号标记的是超链接。

<table></table> 标记的是表格

基本概念补充• 域名（ DNS,domain name syatem ）和 IP(internet protoco

l) 域名就是用字母或文字组成的网络地址； IP 是网络的数字

地址。两者有一一对应关系。• HTTP (Hypertext Transfer Protocol ) 和 FTP(File Transfer

Protocol ) 两种协议 HTTP 协议是浏览器和网络服务器之间的应用层通信协议，

简单的说就是浏览网页使用此协议。 FTP 协议是文件传输协议，用于本地计算机和远处的服务

器之间进行文件的上传和下载。• 网络浏览器 IE （浏览网页的本地工具）• 网页制作工具用于制作网页的软件工具，一般常用的有 Dreamweaver 和 Fr

ontpage• 网页美化工具比如 : 图片制作工具 Photoshop 和动画制作工具 Flash 等

网页的基本组成• 文本：文本是网页中信息内容的主要形式，

可以进行字体、大小、颜色、底纹以及边框等的属性修改。

• 图像：主要是 Gif 和 Jpeg 两种格式，可以用作网页背景，表格背景等。

• 超级链接：是网页的灵魂，正是由于网页的超链接作用才形成了信息网络。

• 表格：使用表格排版是网页制作的主要排版形式。可以控制页面元素的位置。

网页的基本组成• 表单：用来使用户和远程服务器进行信息交互，

访问者通过文本框、单选按钮、复选框以及下拉列表等输入数据，通过提交与远程服务器进行交互。

• 导航栏：导航栏是一组超级链接，可以使用户更便捷的浏览站点内容，主要用于网站个部分内容之间的相互连接。使网站的结构清晰。

• 动画： Gif 和 Flash 动画• 声音和视频：声音和视频文件可以嵌入到网页

中。

HTML 语言解释html 源文件结构1. 标记：单标记和双标记。例如： <a></a>;<br>2. 标记属性的语法结构： < 标记名称属性 1 属性

2……> 。例如 <table bgcolor=“#ff3333”></table>

3. 注释语句： 4. 基本结构：<html></html> 文件开始和结束标记<head></head> 文件信息标记；<title></title> 文件标题标记；<body></body> 文件主体内容标记。

HTML 语言解释html 源文件结构 :<html><head><title>Welcome to my homepage</title></head><body bgcolor=red> Hi, I am a smart man, not handsome, ☻</body></html>注： have a test in Dreamweaver

相对路径和绝对路径• 相对路径：是以将要引用文件的网页所在位置为参考基础，引用其它文件时而建立的目录路径。不同的网页文件引用同一个相关文件（比如：图片）时，所使用的路径可能不同，所以称为相对路径。

• 绝对路径：是以 web 站点根目录为参考基础的目录路径。这样，不同位置的网页文件引用相同的相关文件时所使用的路径是一样的，所以称为绝对路径。

• 两者的不同点在于：所采用的参考点不同。

描述路径的几个符号• “.”代表目前所在的目录• “..”代表上一层目录• “/” 用于连接路径中的目录名称• 路径语法：目录名称 / 目录名称… / 文件名

称/ — ch1 — ch1.html

image — back.jpg

ch1ch1

imageimage

Ch1.html

Back.jpg

根目录Public_html


• 如果 ch1.html 要引用图片 back.jpg ，其相对路径如下：

./image/back.jpg,该路径中，“ .”代表当前目录 ch1 ，所以“ ./image”代表目前目录下的 image 。实际上可以省略” ./” 。上述路径也可描述为： image/back.jpg

• 若使用绝对路径则表示为：/ch1/image/back.jpg 。“ /” 则代表 public_ht

ml

• / — ch1 — ch1.html

ch2 — back.jpg

如果要在 ch1.html 中引用 back.jpg 则相对路径为： ../ch2/back.jpg

绝对路径为 : /ch2/back.jpg

路径问题主要体现在超链接上面

ch1ch1

ch2ch2

Ch1.html

Ch2.html根目录Public_html


• 建立站点的演示

第二节课主要目标• 了解制作网页和网站所涉及到的整个系统内容，了

解做网页的主要思路。（表格、框架、层、页面修饰、文字、图片、 Css 等）（通过 html 语言了解和掌握 Dreamweaver 的使用）

• Css样式单• Dreamweaver 网站管理• 文字修饰• 表格定位• &nbsp空格符号水平分割线 hr ，特殊字符 <> ，”，

& 等

文字方面的 html 标记 (签 )

• <br>换行标签：每在文字当中（代码界面）加一个 <br> 标签，文字就会换一行显示。在设计页面（所见即所得的编辑页面）按下回车键，形成的并不是换行标签（和 word 一样，形成的是段落符号） <p></p>

• <p></p>段落标签：被标记在这组标签中间的文字形成一个段落。段落之间距离默认比行与行之间的距离要宽，段落之间空一行。段落标记较为常用的属性是 align, 改属性有三个值， left/center/right 。

文字方面的 html 标记 (签 )• <pre></pre> 标签：（保留原始排版方式标签）：要将 HTML 文件中的

排版方式，通过浏览器显示的时候，保留原始的文件排版方式，只需要在该部分文字的前面加上 <pre></pre>( 在代码视图进行操作，不是设计视图 ), 例如显示一首诗的结构。

• <hr>水平分割线标签：使用该标签可以在网页上画出一条横跨网页的水平分割线，分割不同的文字。属性有 size/width/align/color/noshade 。– Size 属性，显示水平线的粗细情况，以像素为单位。 <hr size=10> ，就

是建立粗细为 10pixel 的水平分割线– Width 属性，水平线的宽度情况，可以以像素为单位，也可以以百分比为

单位（两者都是针对屏幕的宽度）。 <hr width=45%> ，就是建立宽度为屏幕宽度 45% 的水平线

– Align 属性，水平分割线的对齐方式，有 left/center/right三种– Color 属性，线条的颜色，可以使用英文名称和 16 进制数设置。 <hr col

or=“red”> 或 <hr color=“#FF0000”>– Noshade 属性，水平线不显示水平阴影。 <hr noshade>


• 空格符号 &nbsp ；– 在建立 HTML 文件的时候，若想通过键盘上的空格键输入多个空格，则不论输入的空格有多少个，都将被视为是一个。因此，如果想要输入多个空格的时候，可以利用空格符号

– 或者使用 <pre></pre> 标记，这时候再使用键盘空格就管用了。

• 居中对齐标签 <center></center>:– 在该标签中包含的内容，将以居中对齐的方式显示在网页中。


• 向右缩进标签 <blockquote>– 要将 html 文件中的某段文字以向右缩进方式显示的时候，只需要在要缩进的内容前面加入 <blockquote> 标签和在内容的后面加上 </blockquote>

• 标题文字标签 <hn>– 标记网页中的标题文字，被表示的文字以粗体

的形式显示在网页中。共有六级标题， <h1></h1>;<h2></h2>;<h3></h3>;<h4></h4>;<h5></h5>;<h6></h6> 有属性 align


• 文字格式控制标签 <font>–该标记用于控制文字的字体、大小与颜色。控

制方式是利用属性实现。– 属性：

• face ，控制文字使用的字体，隶书？楷书？• Size ，控制文字的大小，最大为 7 级• Color ，控制文字的颜色

– 语法： <font face=隶书 size=6 color=“red”> ，如果不适用其中的一个属性的话，可以省略


• 特定文字样式标签– 设置文字以特别的样式显示，一般在 IE 浏览器中浏览

时候会起作用。• 粗体字 <b></b>• 斜体字 <i></i>• 下加下划线 <u></u>• 删除线 <s></s>• 放大 <big></big>• 缩小 <small></small>• 上标 <sup></sup>• 下标 <sub></sub>


• 特定文字样式标签–设置文字以特别的样式显示，一般在 IE 浏览器

中浏览时候会起作用。•加强强调字体 <strong> ，加强强调文字样式•强调字体 <em> ，强调文字样式• 地址 <address> ，显示电子邮件和网址 (将电子邮件以类似斜体的电子邮件专用的字体显示 )

• 程序代码 <code> ，说明程序代码和指令(将文本以计算机代码的字体 ( 等宽字体 )显示)


• 特定符号表示– “<“, 用 < 表示– “>”, 用 > 表示– “&”, 用 & 表示– “ , 用 " 表示

• 控制 <body> 标签的属性– Html将文件的主体定义在 <body> 标签中，也就是网

页的主要内容，并依照各种标签的控制，将内容显示在浏览器的窗口中。设置 <body> 标签内的属性，可以控制整个页面的显示方式。

• Bgcolor ，控制网页背景颜色：– purple紫色， olive橄榄绿， navy深蓝， aqua水蓝， lime青绿，

maroon茶色， teal墨绿， fuchsia紫红， yellow黄， blue蓝，green绿色， red红色， silver银灰， gray灰， white白， black黑

• Background ，控制网页背景图片• Text ，设置网页文字的颜色


• 编号列表 <ol><li>….</ol>– 有 type 和 start 属性， type 说明是使用何种编号方式，是使用数

字还是字母， start 属性是说明第一个编号从哪个序号开始。

• 项目符号列表 <menu><li>…</menu>– 项目符号（如 word 等）

表格的 html 标记 (签 )

• <table>– <tr>

• <td>

– 表格的边框的控制属性• Border ，边框的宽度• Cellpadding ，单元格内的内容与单元格边界的空间宽度• Cellspacing ，单元格与单元格之间的宽度，或单元格到表格

边框之间的距离。• Bordercolor, 边框颜色• Bgcolor, 背景颜色

• 注：行 <tr> 和单元格 <td>也可以设置自己的边框颜色和背景颜色

• 表格里面可以嵌套表格

图片的 html 标记 (签 )

• <img> 标签– 该标签是用于导入图片的标签，使用此标签可以将图片文件（ jpg

/gif ）导入到 html 文件中显示。– 语法：

• <img src=“ 图片的路径和完整名称” >– 标签属性

• Height ，图片高度； width ，图片宽度• Border ，图片边框宽度• Hspace ，图片左右两边水平方向空白区域的宽度• Vspace ，图片上下两边垂直方向空白区域的宽度• Align ，图片相对于文字基准线（文字中线）的对齐方式• Lowsrc ，图像低分辨率属性，由于低分辨率的图片比高分辨率的图

片文件小，所以在网络上的传输速度快，可以为图片设置这个属性值，先显示低分辨率图像，然后显示原始图像。

• Alt ，图片的取代文字，当浏览器不能显示图片的时候可以通过该属性对图片进行文字说明

超链接的 html 标记 (签 )

• <a></a> 标签– 超链接是网页文件的基本特性，使用超链接实现网页的链接访问。建立超链接的标签就是 <a></a>

– 语法：• <a href=“连接文件的位置和完整文件名” > 超链接的元素（文字、图片等） </a>

– 属性：• Href 属性，用来放置超链接的目标，可以使用 url指定，语法：

– 通讯协议 :// 链接地址 / 文件位置 / 文件名称 • Name 属性，实现同一个网页内部的链接，也叫锚点标记。使用方法：

– 先定义锚点 <a name=“ 目标名称” > 目标内容 </a>– 在需要链接该目标的地方， <a href=“# 目标名称” >连接内容 </a>

– 图片的超链接：只需要让超链接标记包围 <img> 标记即可。 <a href=“”><img

src=“”></a>


• <a></a> 标签– 超链接的颜色，由 <body> 标签中的 alink/vlink/link 属

性进行标记。 Link 标记还没有链接过（单击）的超链接的文本颜色， vlink 是已经链接过的超链接的文本颜色， alink 是当鼠标单击后超链接文本颜色。

• 通过协议进行的超链接– <a href=“http://...”></a>– <a href=“mailto:电子邮件地址” ></a>– <a href=“ftp://....”></a>


• <meta> 标签• meta 标签共有两个属性，它们分别是 http-equiv

属性和 name 属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。

• meta 是 html 语言 head区的一个辅助性标签。几乎所有的网页里，我们可以看到类似下面这段的html代码：– <head>– <meta http-equiv=“content-Type” content=“text/html; c

harset=gb2312”>– </head>

超链接的 html 标记 (签 )• <meta> 标签 : http-equiv 属性的 Content-Type 参数• http-equiv顾名思义，相当于 http 的文件头作用，它可以向浏览器传回

一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为 content ， content 中的内容其实就是各个参数的变量值。

• 说明：设定页面使用的字符集 ( 语言 ) ，用以说明主页制作所使用的文字语言，浏览器会根据此来调用相应的字符集显示网页内容。例如： – <head>– 　　 <meta http-equiv="content-Type" content="text/html; charset

= GB2132“>– 　　 </head>

注意：该meta 标签定义了 HTML 页面所使用的字符集为 GB2132 ，就是国标汉字码。如果将其中的“ charset=GB2312”替换成“ BIG5” ，则该页面所用的字符集就是繁体中文 Big5码。当你浏览一些国外的站点时， IE 浏览器会提示你要正确显示该页面需要下载 xx 语支持。这个功能就是通过读取 HTML 页面 Meta 标签的 Content-Type 属性而得知需要使用哪种字符集显示该页面的。如果系统里没有装相应的字符集，则IE 就提示下载。其他的语言也对应不同的 charset ，比如日文的字符集是“ iso-2022-jp ” ，韩文的是“ ks_c_5601” 。

超链接的 html 标记 (签 )• <meta> 标签 : http-equiv 属性 :Refresh(刷新 )– 说明：自动刷新并指向新页面。– 如果你想使您的网页在无人控制的情况下，能自动在指

定的时间内去访问指定的网页，就可以使用 meta 标签的自动刷新网页的功能。

– 用法： <meta http-equiv=“Refresh” content=“5 ； URL=http://www.bnu.edu.cn“>

– 注意：其中的 5 是指停留 5秒钟后自动刷新到 URL 网址。

超链接的 html 标记 (签 )• <meta> 标签 : http-equiv 属性 : expires(缓冲 )– 控制页面缓冲– meta 标签可以设置网页到期的时间 ,也就是说 ,当你在 I

nternet Explorer 浏览器中设置浏览网页时首先查看本地缓冲里的页面 ,那么当浏览某一网页 ,而本地缓冲又有时 ,那么浏览器会自动浏览缓冲区里的页面 ,直到meta中设置的时间到期 , 这时候 , 浏览器才会去取得新页面。例如下面这段代码就表示网页的到期时间是 2010年 4月 10日 18 时 18分 18秒。

– <meta http-equiv=“expires” content=“Friday, 10-Apr-2010 18:18:18 GMT”>

超链接的 html 标记 (签 )• <meta> 标签 : http-equiv 属性 : Pragma(cach

e模式 ) – Pragma(cache模式 ) – 说明：禁止浏览器从本地计算机的缓存中访问页面内容。

– 用法： <meta http-equiv=“Pragma” content=“no-cache”

> – 注意：这样设定，访问者将无法脱机浏览。

超链接的 html 标记 (签 )• <meta> 标签 : name 属性的 Keywords参数• name 属性主要用于描述网页，与之对应的属性值为 content ， content

中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。• 帮助主页被各大搜索引擎登录

– meta 标签的一个很重要的功能就是设置关键字，来帮助你的主页被各大搜索引擎登录，提高网站的访问量。在这个功能中，最重要的就是对 Keywords 和 description 的设置。因为按照搜索引擎的工作原理 ,搜索引擎首先派出机器人自动检索页面中的 keywords 和 decription ，并将其加入到自己的数据库，然后再根据关键词的密度将网站排序。因此，我们必须设置好关键字，来提高页面的搜索点击率。

– Keywords 的用法： <Meta name="Keywords" Content=" 关键词 1, 关键词2 ，关键词 3, 关键词 4,……">

注意：各关键词间用英文逗号“ ,”隔开。 META 这个属性的通常用处是指定搜索引擎用来提高搜索质量的关键词。举例：

• <meta name=“keywords” content=“ 徐学锋 , 辅助教学 ,外语 , 语料库 , 青春小语” >

超链接的 html 标记 (签 )• <meta> 标签 : name 属性的 Keywords参数

– 写好 Keywords( 关键字 ) 要注意以下几点： 1. 不要用常见词汇。例如 www 、 homepage 、 net 、 w

eb 等。 2. 不要用形容词，副词。例如最好的，最大的等。 3. 不要用笼统的词汇，要尽量精确。4. 寻找合适关键词的技巧是：到 Google 、 baidu 等著名搜索引擎，搜索与你的网站内容相仿的网站，查看排名前十位的网站的 META 关键字，将它们用在你的网站上，效果可想而知了。

超链接的 html 标记 (签 )• <meta> 标签 : name 属性的 description参数

– description( 网站内容描述 )

说明： description 用来告诉搜索引擎你的网站主要内容。举例： <meta name=“description” content=“This pa

ge is about somebody, his scientific research, his major, his school life, his career, his students and his family.”>

多媒体的 html 标记 (签 )• 视音频文件的播放

– 可以使用超链接的方式在 <a href=“ 音乐文件”> 链接文字 </a>实现声音文件的播放。视频文件也可以使用这种方式进行链接。当鼠标点击的时候会自动调用电脑中相应的播放器。

• 将视音频嵌入网页 <embed> 标签：– 语法： <embed src=“ 视音频文件完整文件

名” width=“” height=“” aotostart=“true/no” loop=“播放次数” >

• 网页背景音乐的播放 <bgsound> 标签– 语法： <bgsound src=“ 声音文件完整文件路径

和名称” loop=“播放次数” >

窗口框架的 html 标记 (签 )• 窗口框架• 窗口框架可以将窗口分割成多个小窗口，可以再每个小窗口中显示不同的网

页，实现在浏览器中同时浏览不同网页的效果。一般用来分成导航窗口和显示窗口（主窗口）。

• 标签和属性 <frameset><frame></frameset>– Frameset 标签设置一组框架， frame 标签仅在设置子框架属性的时候使用。 Fra

meset 标签不能放在 <body> 标签中使用。– Frameset 有 rows （水平分割）和 cols （垂直分割）两个分割属性– 例如将窗口分割为三个水平框架，其语法为：

• <frameset rows=“20%,40%,*”>• <frame>• <frame>• <frame>• </frameset>• 注， rows里面有几个逗号分割的高度值，就会分割成几个水平窗口，最后一个星号是最

后一个窗口的高度。垂直分割也是如此。• 框架可以嵌套，实现水平和垂直分割。

• Border 属性，框架之间分割线的宽度。• Frameborder 属性，用于控制框架四周是否显示，隐藏框架之间的分割线

窗口框架的 html 标记 (签 )• 子窗口的设置 <frame>

– 属性• Src 属性

– <frame src=“ 网页的路径和地址” > ，子窗口的 src 属性指定要导入的某个子窗口的 html 文件的位置。

• Name 属性，用于定义子框架（窗口）的名称• Scrolling

– 此属性用于控制框架中是否显示滚动条。使用此属性避免在框架中的网页内容过大的时候看不到被框架本身遮住的部分。

• Target 属性，本属性在超链接标签 <a> 中使用，用于在确定在同一个窗口中的哪一个框架中显示链接内容。 <a href=“**.html” target=“子框架名称” > 。

窗口框架的 html 标记 (签 )• Iframe

– Iframe 标记，又叫浮动帧标记，你可以用它将一个 HTML 文档嵌入在一个 HTML 中显示。它不同于 Frame 标记最大的特征即这个标记所引用的 HTML 文件不是与另外的 HTML 文件相互独立显示，而是可以直接嵌入在一个 HTML 文件中，与这个 HTML 文件内容相互融合，成为一个整体，另外，还可以多次在一个页面内显示同一内容，而不必重复写内容，一个形象的比喻即“画中画“电视。

– 用法：在网页代码的 body 中加入 <iframe src=“**.html"></iframe>

窗口框架的 html 标记 (签 )• Iframe

– 同学问题：在框架页里面一个框架单元中的网页上加一个链接到另一个框架单元中的 iframe里面，怎么办？

– 解决方法：在 iframe 的 name 属性设定一个名字，然后在超链接的 target 中添加这个名字就可以了

– <iframe name=“123” src=“*8.html”></iframe>– <a href=“*1.html” target=“123”>sth</a>

Dreamweaver 学习提示• 网页（页面修饰以及页面元素的插入，文字、图

片、声音、视频、 Flash 等，页面导航条）• 网站（站点管理的制作方法）• HTML 语言（基本标签）• 页面布局（表格、框架、层）• 样式单（页面整体修饰，可看作一种语言）• Javascript 语言（ mail.wwxy.bnu.edu.cn ）• PHP 语言

HTML 与样式表html 源文件结构1. 标记：单标记和双标记2. 标记属性的语法结构： < 标记名称属性 1 属性

2……>3. 注释语句： 4. 基本结构： <html></html> 文件开始和结束标记；

<head></head> 文件信息标记（包含文件的标题、编码方式、 URL 等信息，用于提供索引或其他应用） <title></title> 文件标题标记 <body></body> 文件主体标记。

样式表 (CSS)

• CSS 层叠样式表（ Cascading Style Sheet ）

样式其实就是格式，对网页来说，像文字的大小、颜色以及图片的位置等，都是网页显示资料的样式。层叠就是若同时使用的几个样式文件中的样式发生冲突的时候，将依据层次顺序处理（。

定义一组样式后，可以随心所欲的调用其中任意一段或任意使用与其它文件中。

CSS 作用Css 的概念就是将样式的定义与 html 文件分离出来，只要建立一个定义样式的 css 文件，并让所有的html 都调用这个 css 文件定义的样式，以后要更改 html 文件中的某段内容的样式的时候只需要修改 css 文件中的相关部分就可以了。– 比如，管理网站的时候，如果有一天希望将网站中的所有标题的颜色变成红色，当然可以调出所有的网页文件一个一个的修改，很麻烦。如果使用相对独立的CSS样式文件，网页只需要调用这个文件，那么就只需要修改 CSS样式文件就可以了。

CSS 优势• 一组样式可以调用在多个对象上• 语法易学易懂• 丰富的样式效果

• CSS 的几中应用方法1.直接定义标记的 style 属性2.定义内部样式表3.嵌入外部样式表4.连接外部样式表

直接定义标签的 style 属性< 标记名称 style=“样式属性：属性值；样式

属性：属性值…” >例如：• <p style=“font-family:隶书 ; color:red”>上面例子表示本段落的样式直接写入要定义样式的 html 标签里面

这种方法一次只能控制一个网页标签

定义内部样式表<style type=“text/css”></style>注： 是网页注释标签，该标签不被浏览器解释，网页不显示该内容。

选择符，可以使用 HTML 标记的名称，所有的 HTML 标记都可以作为 CSS 选择符。其实就是样式名称

利用 class 选择符定义方式<style type=“text/css”><!– *.a1{样式属性：属性值 ; 样式属性：属性值 ;……} *.a2{样式属性：属性值 ; 样式属性：属性值 ;……} … --></style>注： * 可以使用 HTML 语言的标记代替，也可以省略，此种定义方式在整个 HTML 文件中由 CLASS类选择符引用。

• 使用方法：在 HTML 标记里面的一个属性 class=a1 ，采用这样的使用方式。

利用 class 选择符定义方式举例<html><head><title>test</title><style type=“text/css”></style></head><body><font><p class=a1> 一颗红心，积极准备 </p></font></body></html>

注： css 具有继承性

利用 ID 定义样式单的方式<style type=“text/css”>

<!–

#a1{样式属性：属性值 ; 样式属性：属性值 ;……}

#a2{样式属性：属性值 ; 样式属性：属性值 ;……}

…

--></style>

嵌入和连接外部样式表<style type=“text/css”>



</style>

<link type =“text/css” rel=stylesheet href=“样式单文件名” >

样式的调用顺序如果以上几种方式同时出现直接定义标签的 style 属性调用顺序最高其他方式以后出现者为准，也就是距离修饰

元素最近的为准。

样式的调用顺序CSS 的最近优先原则如果对一个元素定义了多次样式，则以最近的一级优先，最近一级的样式将覆盖其他的样式定义。如：CSS:p{color:red}.blue{color:blue}.yellow{color:yellow}

HTML:<p> 此处显示为红色 </p><p class="blue"> 此处显示为蓝色 </p><p class="blue" style="color:green"> 此处显示为绿色 </p><p class="blue yellow"> 此处显示为黄色 </p>

注意：（ 1 ）注意样式的几个优先顺序 ( 优先级由上至下递减 ) ：-- 元素 style设定 --head区 <style></style> 中的设定 --外部引用 css 文件（ 2 ）优先级不是按访问顺序来设定的，而是又 css 中的声明顺序来设定的。如上例中 <p class="yellow blue"> 此处显示为黄色 </p>也显示为黄色，因为在 css 定义中 .yellow

在 .blue 的后面。

基本 CSS样式介绍（文字与排版）• Font-family 属性，用来设置字体• Font-stile 属性，设置字体效果• Font-variant 属性，文字变体属性• Font-weight 属性，字体粗细属性• Font-size 属性，文字大小属性• Text-decoration 属性，文字效果属性，下划线、删除线等• Text-transform 属性，文字转换属性，大小写转换• Line-height 属性，行高，行与行之间的间距• Text-indent 属性，首行缩进属性• Letter-space 属性，设置字符与子符之间的间距• Text-align 属性，文字段落的水平对齐方式。• Vertical-align 属性，文字段落的垂直对齐方式。

基本 CSS样式介绍（文字与排版）其它• 样式表的文字处理属性中有两个重要的属性： wri

ting-mode 和 text-align 。用法：– 1. writing-mode （设置对象书写方向）– 语法： writing-mode : lr-tb 、 tb-rl– 参数： lr-tb ：从左向右，从上往下　 tb-rl ：从上往下，从右向左

– 示例： div { writing-mode: tb-rl; } – 2. text-align （设置对象中文本的对齐方式）– 语法： text-align : left 、 right 、 center 、 justify – 参数： left ：左对齐　　 right ：右对齐　　 center ：居中　　 justify ：两端对齐

• 　　示例： div { text-align : center; }

基本 CSS样式介绍（背景与颜色）• Background-color 背景颜色属性• Background-image 背景图片属性• background-repeat 背景图片并排属性• Background-attachment固定背景图片属性• Background-position 背景图片位置属性 ( 可使用百分比任意规定图片在网页中显示的位置 )

注：颜色的十六进制表示。 0~9,a,b,c,d,e,f表示方式： #红红绿绿蓝蓝。例如： color ： #ff0000或使用 rgb函数，例如： color:rgb(ff,00,00) 或 color ： rgb

(100%,0,0)

基本 CSS样式介绍（超链接）• A:link 尚未链接过的超链接的样式（ link ）• A:visited 已经链接过的文字的超链接的样

式（ vlink ）• A:hover当鼠标移动到文字上面时，超链接

文字的样式• A:active当鼠标点击超链接后，超链接文字显示的样式（ alink ）

基本 CSS样式介绍（光标属性）

• Cursor ： so many

基本 CSS样式介绍（矩形模块（ Dreamweaver 中的方框）概念）

在 CSS 中，将样式用到每一个元素上，都会假想的将每一个元素当作一个长方形的箱子看待，简单一点说，就是将每个元素当成一个长方形的箱子，利用这个箱子设置各元素与网页之间的空白距离，如：元素的边框宽度、颜色、样式，以及元素内容与边框之间的空白距离

• Margin 属性控制元素边界与文件其他内容的空白距离• Border 属性控制表格四边边框的宽度、颜色等 <table><tr

><td> 都可以修饰• Padding 属性控制表格中的内容或图片与元素内边界之间

的距离。这三种属性通常用于文件段落如 <p><div><span> 、图片 <i

mg> 、表格 <table><tr><td> 网页边界的空白距离，或者设置表格内的边框及空白样式


• 例如 border-style 边框样式的属性• Border-style ： none/dotted( 小点虚线 )/dashed( 大点虚线 )/solid(实线 )/double(双实线 )/groove(3D凹线 )/ridge(3D凸线 )/inset(3D 框入线 )/outset(3D隆起线 )

• .st3{border-width:0.2cm;border-color:#ff0000;border-style:outset}

• 快速设置 border 属性• Border ： <border-width> <border-style <color>,几个参数之间用空格隔开。

• 举例：立体按钮的制作•

基本 CSS样式介绍（区域标签）

• <div> 标签，可用来定义网页上的一个特定区域，在区域范围内可包含文字、图形、表格、窗体等，并用来区分不同的文字段落，所以在 <div> 标记内的所有内容，都将调用此标签所定义出的样式，且区域和区域之间是独立的。

• 要在 html 文件中不同区域使用不同的样式的时候，可以使用 <div>达到这个效果。该标签还可以通过 z-index 属性，达到层次的效果。


• <div> 定义网页中的独立区域• <span> 定义网页中小段的独立区域• 两者区别： <div> 定义的区域内的对象与区域外的上下文会换行（不同区域之间在不同的行），而 <span> 不会换行，而是三个区域在同一行。（图片举例）

• 一般可在 <div> 中包含 <span> ，而不要在<span> 中包含 <div>.


• 区别 div 和 span• div 是一个块级元素，可以包含段落，表格

等内容，用于放置不同的内容。一般我们在网页通过 div 来布局定位网页中的每个区块。

• span 是一个内联元素，没有实际意义，它的存在纯粹是为了应用样式，给一段内容加上 <span></span> 标记可以通过在 span上定义样式来设定其内容的样式。


• 区域位置的定位– 区域的 top 和 left 属性，相当于坐标中的 X坐标和 Y坐标。可以使用长度单位（像素或 cm 等）或百分比单位

– Position 位置属性，三个参数选择– Absolute:区域位置以网页的左上角为基准，采用绝对坐标的方式来设置，通常会搭配 top 和 left 属性一起使用。

– Relative ：区域位置相对于父一级的位置移动 top 和 left 的距离

– static: 不受 top 和 left 的影响


区别 relative 和 absolute– Absolute ， CSS 中的写法是： position:absolute; 他

的意思是绝对定位，他是参照浏览器的左上角，配合 TOP 、 RIGHT 、 BOTTOM 、 LEFT( 下面简称 TRBL)进行定位，在没有设定 TRBL ，默认依据父级的做标原始点为原始点。如果设定 TRBL并且父级没有设定 position 属性，那么当前的 absolute 则以浏览器左上角为原始点进行定位，位置将由 TRBL决定。

– Relative ， CSS 中的写法是： position:relative; 他的意思是绝对相对定位，他是参照父级的原始点为原始点，无父级则以 BODY 的原始点为原始点，配合 TRBL 进行定位，当父级内有 padding 等 CSS 属性时，当前级的原始点则参照父级内容区的原始点进行定位。


• 三维空间的建立• z-index相当于三维空间的 Z坐标，主要用

于设置区域的上下层关系，所以，利用此属性设置的时候可以让区域显示多层次的效果。

• Z-index区域层次，可以设置三维效果以及文字和图片的叠加效果。索引分层

• <div position:absolute;top:4cm;left:4cm z-index:1><img src=></div>


• 例如：设置图片和文字的重叠效果– .z1{position ： absolute; top:4.5cm; left:4.5cm;

z-index:1}– .z2{根据需要设置位置即可 }

• 例如设置文字阴影效果– 如上例设置两个 css 的格式，两者的位置稍微错开即可。

基本 CSS样式介绍（列表项目）

• List-style-type 等

Scrollbar滚动条属性设置• <style type="text/css">• • </style>

Dhtml

• Html仅能建立出静态显示的网页，为了让网页能有动态的变化， IE 提供了 Dynamic HTML 技术，简称Dhtml

• DHTML 主要由三部分组成，分别为 IE 对象模型、 script 语言和 CSS 。就是使网页制作者通过 script 语言对 IE 对象（网页标签）进行动态的控制。所谓的“ IE 对象”就是指的起了名字的 HTML 标签。

• 例如： <p id=“first”>good luck</p> 这时候这个段落就有了名字“ first” ，这个段落就成了一个 IE 对象

Dhtml

• 在 Dhtml 技术中，当用户在网页中的对象（标签）上进行某些特定操作的时候，将会引发对应的事件。– Onmouseover:当鼠标移到标签上所触发的事件– Onmouseout:当鼠标移出标签时触发的事件– Onmousedown ：当用户在标签上，点击鼠标的任何按键所触发

的事件– Onmouseup ：当用户在标签上，放开鼠标的任何按键所触发的事

件– Onmousemove ：当用户在标签上，移动光标所触发的事件– Onclick ：当用户在标签上，点击鼠标的左键所触发的事件– Ondoubleclick ：当用户在标签上，双击鼠标的左键所触发的事件

事件的响应机制• 在 Dhtml 技术的网页中，事件响应机制的建立方式是将事

件函数名称设置给事件属性。语法：– < 标签名称事件名称 =“响应函数” >…</ 标签名称 >– 而响应的函数则写在 <script> 标签中，并放在 html 文件的 <head

> 标签里，当使用 javascript 语言的时候，函数的建立语法如下：• <script language=“JavaScript”>• • </script>

事件的响应机制• 举例：• 当光标移到 <p> 标签上的时候，利用 response函数响应。• <p onmouseover=“response()”>当光标移动到此处调用 response函数 </p>• 下面是 response函数的内容，该函数将调用 alert函数，显示一个“你好，欢迎光临”的文字。

• <script language=“JavaScript”>• • </script>

• 注：当事件很简单的时候可以直接在标签里面设置动作。– 语法： < 标签名称事件名称 =“响应动作；响应动作；…” >…</ 标签名称 >– 如上述例子可以直接写为： <p onmouseover=alert(“ 你好，欢迎光临” ) ； >当光

标移动到此处调用 response函数 </p>

Style 对象的使用（与 css 的结合）

• 在 DHTML 的对象模型中，当为标签指定 id属性后，该标签即可视为一个对象。每个对象的样式，则通过“ style 对象”进行控制，要引用某标签对象的 style 对象的时候，其语法为：对象名称 .style

• 注：当动作直接在标签里面设置给事件名称的时候，可以使用 this代替当前标签。语法为： this.style


• Style 对象控制对象标签的方式，必须通过属性的设置来达到。 Style 对象的属性和 css样式的属性相对应，但命名方式不同， style 属性的命名方式是将 css命名方式中的“ -”去掉，然后 css样式属性名称除了第二个英文单词的第一个字母使用大写以外，其余均用小写。因此 css样式中的 font-size 对应 style 对象属性的 fontSize 。若 css样式中的属性名称只有一个英文单词的时候，则 style 对象属性的名称与其相同，但必须使用小写字母。

• 注： css 中的属性名称大小写不区分，而 style 中的属性名称必须严格按照上述要求写，是区分大小写的。否则不起作用。


举例：<p style=“font-size:12pt” onmouseover=“this.

style.fontSize=’14pt’; this.style.color=‘red’; ” onmouseout=“this.style.fontSize=’12pt’; this.style.color=‘red’;”>实验 style 对象属性</p>

滤镜特效• 滤镜是 css 技术的一种应用，用来给网页元素加上一些效果。分为两种：

– 视觉滤镜：可以达到静态的特效效果。只需要使用 css 的定义的语法，就可以将滤镜效果加到网页中。

转换滤镜：是两个画面进行转换的时候所使用的特效，将产生动态的效果，除了利用 css 的语法以外，还要配合 script 语言。

• 滤镜使用语法：Filter ：滤镜名称 (参数 1 ，参数 2 ，…… )举例：下面的语法将使图片产生圆形透明的渐变效果<img src=“*.jpg” style=“Alpha(style=2)”>也可以同时加上水平翻转效果<img src=“*.jpg” style=“Alpha(style=2)” fliph>注：当调用数个滤镜的时候，滤镜效果的调用顺序，即为滤镜的指定顺序，后面调用的滤镜效果将以前面调用的滤镜效果所产生的结果为依据。

滤镜特效• 并不是所有的 html 标签都可以使用滤镜，以下标签可以使用：• Body ：网页文件的主体元素，包含所有可见范围内的元素。• Button• Div• Img• Input• Marquee• Span• Table• Id• Textarea• Tfoot• Th• Thead• tr

滤镜特效• IE 提供了 14 种滤镜

– Alpha ：透明的渐变效果– Blur ：快速移动的模糊效果（ add 是否显示原来的对象， direction 动态模糊的方向， strength 动态模糊效果的大小）

– Chroma ：特定颜色的透明效果（指定对象中的某种颜色变为透明效果）

– DropShadow ：阴影效果– FlipH ：水平翻转效果– FlipV ：垂直翻转效果– Glow ：边缘光晕效果

滤镜特效• IE 提供了 14 种滤镜

– Gray ：灰度效果– Invert ：将颜色的饱和度以及亮度完全反转，建立底片效果

– Light ：光源投射效果– Mask ：屏蔽效果– Shadow ：渐层阴影效果– Wave ：波浪变形效果– Xray ：加入轮廓效果

滤镜特效 Alpha

• Alpha 属性参数– Opacity:开始的透明度： 0-100 ，值越大越不透明– Finishopacity ：结束时候的透明度。 0-100 ，值越大越不透明

– Style ：渐变的形状。 0 ，均匀； 1 ，直线； 2 ，圆形；3 ，矩形

– Startx ：简便开始的 X坐标，度量单位为图片宽度的百分比

– Starty ：– finishX ：– finishY ：

滤镜特效 blur

• 可以产生快速移动的动态模糊效果。• Alpha 属性参数（不同参数之间用英文逗号分隔开）– Add ：是否显示原来的对象， 0 不显示， 1显示，默认是 1

– direction ：动态模糊效果的方向，总单位为 360° ， 0代表为垂直方向，并以 45° 为一个单位，默认值为 270°

– Strength ：动态模糊效果的大小，表示有多少像素的大小会被影响，以整数来设置，默认值为 5px 。

滤镜特效 chroma

• 可以指定对象中的某个颜色变为透明色。• chroma 属性参数（只有一个参数）

– Color ：指定对象中要变为透明的颜色，以 #rrggll 的格式设置，或用颜色的英文名称。举例：

滤镜特效 chroma

• 可以指定对象中的某个颜色变为透明色。• chroma 属性参数（只有一个参数）

– Color ：指定对象中要变为透明的颜色，以 #rrggll 的格式设置，或用颜色的英文名称。举例：滤镜 .html

滤镜特效 dropshadow

• 使对象产生某种阴影效果。• dropshadow 属性参数

– Color ：设置阴影的颜色，以 #rrggbb 或颜色的英文名称的格式

– Offx ：阴影相对于原始对象的水平位移量。设置数为整数，单位为像素。若水平往右移则为正数；水平往左移为负数

– Offy ：阴影相对于原始对象的垂直位移量。设置数为整数，单位为像素。若垂直往下移则为正数；垂直往上移为负数

– Possitive ：设置阴影的透明度。 0 ，透明； 1 不透明。

滤镜特效 fliph 和 flipv

• 使对象产生垂直和水平翻转效果• 可以放在 img 标签里面使用• 语法： style=“filter:fliph”

滤镜特效 glow

• 使对象产生边缘光晕的模糊效果• 属性参数• Color ：设置边缘光晕的颜色，以 #rrggbb

的形式或颜色英文名称。• Strength ：设置边缘光晕的强度大小，设

置值为 1到 255 的正数。• 语法： style=“filter:glow(color=yellow,stren

gth=10)”

滤镜特效 gray

• 将对象中的颜色除去，以编程黑白的效果。• 属性参数• gray ：• 语法 style=“filter:gray”

滤镜特效 invert

• 将对象中的颜色的饱和度以及亮度值完全翻转，类似底片的效果。

• 语法 style=“filter:invert”

滤镜特效mask

• 设置对象的屏蔽效果，就像印章一样印出模型的模样。

• 属性： color ：设置屏蔽的颜色，以 #rrggbb 的形式或颜色的英文名称的形式。

• 语法 style=“filter:mask(color=#rrggbb)”

滤镜特效 shadow

• 除了具备 dropshadow 的阴影效果外，还多了阴影渐变的效果。

• 属性参数：• color ：设置阴影的颜色，以 #rrggbb 的形式或颜

色的英文名称的形式。• direction ：设置阴影的方向，总单位为 360° ， 0代表垂直向上，并以 45° 为一个单位，预设为 225°

• 语法 style=“filter:shadow(color=#rrggbb ， direction=135)”

滤镜特效 wave

• 设置对象产生垂直的波浪效果。• 属性参数：• add ：是否显示原来的对象， 0 不显示， 1显示。• frep ：设置出现在对象上的波浪数目，以正整数设置。

• Strength ：设置波浪的振幅大小，单位为像素，数值为正整数。

• Lightstrength ：设置波浪上光的照射强度， 0-100• Phase ：设置正选波起始波形位置， 0-100.• 语法 style=“filter:wave(add=1 ， frep=3,strength=

50,lightstrength=50,phase=100)”

滤镜特效 xray

• 设置对象轮廓加亮，有点类似 X光片的效果。

• 属性参数： xray

• 语法 style=“filter:xray”

转换滤镜• 在 IE 中，提供了两种转换滤镜，可以完成

图片或文字在两个画面中以特效方式转换• 融合转换滤镜（ blend transition filter ） :

用于执行淡入或淡出方式的转换• 揭示转换滤镜（ reveal transition filter ） :

提供了 24 种转换方式。• 使用转换滤镜需要使用 script 语言和事件的配合

Dreamweaver

• 界面介绍• 菜单介绍• 站点和文件• 框架和表格• 文字和图像• 层和面板

个人主页相关问题1. Dreamweaver 站点的相关问题：• 公共机房建立站点的注意事项：公共机房具有硬盘保护功能，不能存储设置的信息，加上每次使用的机器不同，所以，每次都需要重新在Dreamweaver 中重新建立本地站点。

• 为什么要建立站点：站点具有统一管理和组织网站内容的功能，使网站制作过程逻辑清楚。所以，所建立的站点中不要存放和本网站没有关系的文件，显得过于杂乱，只存放使用的网页和图片等文件。

个人主页相关问题• 如何使用 Dreamweaver 的直接上传和下

载功能：首先在站点中要设置好 ftp 服务，如图：

在 Dreamweaver 中与服务器建立连接前不填写此项，建立连接后，在远端服务器上建立 public_html 文件夹，然后再“管理站点”，填写此项内容为 public_html ，这样就可以将主页文件上传到主页目录了。

上传建议• 尽量使用浏览器进行上传。• 浏览器上传下载使用方法： ftp://b09**@20

2.112.91.203 ，然后直接拖拽就可以了，上传文件由本地向上拖拽，下载文件由远端向下拽。

• 使用 FTP 上传• 使用 Dreamweaver 上传

Dreamweaver实用原则1. Dreamweaver界面和主要特点：• 菜单项、文档工具栏、编写内容区、属性面板、右侧面板区。

使用原则：① 网页中的所有内容（除文字外）都来自于“插

入”菜单项。② 网页内容的修饰需要先选中要修饰的内容然后到下面的属性面板去修改（正规方法），或点击鼠标右键找相应内容。

③ 网页中的如框架的选择等部分扩展应用都有其面板，打开面板到“窗口”菜单中去找。

复习与总结④ 文档工具栏中有“设计、拆分、代码”三

种视图。⑤ 网页的风格统一需要使用 CSS样式单，

使用 CSS样式单有三个方面的应用方法：第一种是在本页中逐个元素的修饰（直接选中相关内容在属性面板中设置即可）；第二种是在本页中直接修饰某一标签（比如段落），使本页中的所有标签一致；第三种是定义 CSS外部文件，使多个网页使用统一风格。

Dreamweaver 框架框架框架的作用：顾名思义，就是将网页分成几

个框架，每个框架内部放一个网页文件，形成一定的结构。同时生成一个框架网页文件。

框架文件只是起到一个连接各个网页的作用，起到控制各个框架大小的作用，而框架内网页单独编辑制作就可以了。

网页基本概念标签• 标签就是 html 语言源码的标签，让一段

文字移动的标签是“页元素”里面的 marquee

• 背景音乐的标签是 bgsound

图片• 插入图片（图片热区和外部编辑器）• 插入图片导航（鼠标经过图像和导航条）

表格• 规范页面位置（标准模式和布局模式）布局模式：页面布局，在布局表格中插入布局单元格；在布局表格中嵌套布局单元格。

标准模式：直接插入表格表格属性

层和时间轴• 插入层• 时间轴动画

行为• 行为是响应某一事件而作的动作。事件是产生行为的条件。

比如：当鼠标放到图片上的时候显示一段文字；打开一个窗口时播放一段音乐。

用法：选中页面元素，选中事件，设置行为

长度、百分比单位的介绍• 长度单位通常由两个字母缩写组成。长度单位有

两种类型：– 相对类型：是指相对于该属性前一个属性的单位值为

基础，来完成目前的设置。相对类型目前有两个单位。• em相对于字符的高度，设置以目前元素所使用字体的高度为

基础，是目前字符高度的倍数。• Px像素（ piexl ），设置以像素为单位。• 像素是设备显示画面时使用的最小单位。所谓的设备泛指打印

机和屏幕等，在不同的设备上，由于分辨率的不同，像素也不同，这导致同样的属性设置，却显示不同结果。所以，像素是一种相对于设备分辨率的单位。以屏幕来说，当分辨率为 800×600 时，就代表屏幕上的长、宽分别有 800 点和 600 点。

长度、百分比单位的介绍– 绝对类型：绝对类型所使用的单位，将不会随着显示设备的不同而改变。比如屏幕上的显示长度和打印机上的打印长度是一样长的。绝对类型单位有：

• In ：英寸， 1英寸 =2.54cm• Cm ：厘米• Mm ：毫米• Pt ：点数， 1pt=1/72in• Pc:印刷单位， 1pc=12pt

• 百分比单位• 百分比单位是一种常用的相对类型，通常的参考依据是元素的 font-size 属性（指文字、段落和边界）。

滤镜所适用的元素• body 、 button 、 div 、 img 、 input 、 marquee 、

span 、 table 、 td 、 testarea 、 tfoot 、 th 、 tr• Alpha透明效果、 blur模糊效果、 chroma 、特

定颜色的透明效果、 dropshadow阴影效果、 glow 边缘光晕效果、 gray灰度效果、 invert建立底片效果、 light加入光源投射效果、 mask屏蔽效果、 shadow渐层阴影效果、 wave假如波浪变形效果、 Xray加入轮廓效果

2010 级多媒体网页与制作

Documents