2010 级多媒体网页与制作

2010级多媒体网页与制作 徐学锋

联系方式 • 姓名：徐学锋 • Email：bnuxuxf@163.com • 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 protocol) 域名就是用字母或文字组成的网络地址；IP是网络的数字地址。两者有一一对应关系。 • HTTP (Hypertext Transfer Protocol)和FTP(File Transfer Protocol)两种协议 HTTP协议是浏览器和网络服务器之间的应用层通信协议，简单的说就是浏览网页使用此协议。 FTP协议是文件传输协议，用于本地计算机和远处的服务器之间进行文件的上传和下载。 • 网络浏览器IE（浏览网页的本地工具） • 网页制作工具用于制作网页的软件工具，一般常用的有Dreamweaver和Frontpage • 网页美化工具比如:图片制作工具Photoshop和动画制作工具Flash等

网页的基本组成 • 文本：文本是网页中信息内容的主要形式，可以进行字体、大小、颜色、底纹以及边框等的属性修改。 • 图像：主要是Gif和Jpeg两种格式，可以用作网页背景，表格背景等。 • 超级链接：是网页的灵魂，正是由于网页的超链接作用才形成了信息网络。 • 表格：使用表格排版是网页制作的主要排版形式。可以控制页面元素的位置。

网页的基本组成 • 表单：用来使用户和远程服务器进行信息交互，访问者通过文本框、单选按钮、复选框以及下拉列表等输入数据，通过提交与远程服务器进行交互。 • 导航栏：导航栏是一组超级链接，可以使用户更便捷的浏览站点内容，主要用于网站个部分内容之间的相互连接。使网站的结构清晰。 • 动画：Gif和Flash动画 • 声音和视频：声音和视频文件可以嵌入到网页中。

HTML语言解释 html源文件结构 • 标记：单标记和双标记。例如：<a></a>;<br> • 标记属性的语法结构：<标记名称属性1 属性2……>。例如<table bgcolor=“#ff3333”></table> • 注释语句： • 基本结构： <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.html 根目录 Public_html ch1 image Back.jpg 描述路径的几个符号 • “.”代表目前所在的目录 • “..”代表上一层目录 • “/”用于连接路径中的目录名称 • 路径语法：目录名称/目录名称…/文件名称 / — ch1 — ch1.html image — back.jpg

如果ch1.html要引用图片back.jpg，其相对路径如下：如果ch1.html要引用图片back.jpg，其相对路径如下： ./image/back.jpg,该路径中，“.”代表当前目录ch1，所以“./image”代表目前目录下的image。实际上可以省略”./”。上述路径也可描述为：image/back.jpg • 若使用绝对路径则表示为： /ch1/image/back.jpg。“/”则代表public_html

ch1 Ch1.html 根目录 Public_html ch2 Ch2.html • / — ch1 — ch1.html ch2 — back.jpg 如果要在ch1.html中引用back.jpg则相对路径为：../ch2/back.jpg 绝对路径为: /ch2/back.jpg 路径问题主要体现在超链接上面

建立站点的演示

第二节课主要目标 • 了解制作网页和网站所涉及到的整个系统内容，了解做网页的主要思路。（表格、框架、层、页面修饰、文字、图片、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 color=“red”>或<hr color=“#FF0000”> • Noshade属性，水平线不显示水平阴影。<hr noshade>

文字方面的html标记(签) • 空格符号&nbsp； • 在建立HTML文件的时候，若想通过键盘上的空格键输入多个空格，则不论输入的空格有多少个，都将被视为是一个。因此，如果想要输入多个空格的时候，可以利用空格符号 • 或者使用<pre></pre>标记，这时候再使用键盘空格就管用了。 • 居中对齐标签<center></center>: • 在该标签中包含的内容，将以居中对齐的方式显示在网页中。

文字方面的html标记(签) • 向右缩进标签<blockquote> • 要将html文件中的某段文字以向右缩进方式显示的时候，只需要在要缩进的内容前面加入<blockquote>标签和在内容的后面加上</blockquote> • 标题文字标签<hn> • 标记网页中的标题文字，被表示的文字以粗体的形式显示在网页中。共有六级标题，<h1></h1>;<h2></h2>;<h3></h3>;<h4></h4>;<h5></h5>;<h6></h6>有属性align

文字方面的html标记(签) • 文字格式控制标签<font> • 该标记用于控制文字的字体、大小与颜色。控制方式是利用属性实现。 • 属性： • face，控制文字使用的字体，隶书？楷书？ • Size，控制文字的大小，最大为7级 • Color，控制文字的颜色 • 语法：<font face=隶书 size=6 color=“red”>，如果不适用其中的一个属性的话，可以省略

文字方面的html标记(签) • 特定文字样式标签 • 设置文字以特别的样式显示，一般在IE浏览器中浏览时候会起作用。 • 粗体字<b></b> • 斜体字<i></i> • 下加下划线<u></u> • 删除线<s></s> • 放大<big></big> • 缩小<small></small> • 上标<sup></sup> • 下标<sub></sub>

文字方面的html标记(签) • 特定文字样式标签 • 设置文字以特别的样式显示，一般在IE浏览器中浏览时候会起作用。 • 加强强调字体<strong>，加强强调文字样式 • 强调字体<em>，强调文字样式 • 地址<address>，显示电子邮件和网址(将电子邮件以类似斜体的电子邮件专用的字体显示) • 程序代码<code>，说明程序代码和指令(将文本以计算机代码的字体(等宽字体)显示)

文字方面的html标记(签) • 特定符号表示 • “<“, 用<表示 • “>”,用>表示 • “&”,用&表示 • “ ,用"表示 • 控制<body>标签的属性 • Html将文件的主体定义在<body>标签中，也就是网页的主要内容，并依照各种标签的控制，将内容显示在浏览器的窗口中。设置<body>标签内的属性，可以控制整个页面的显示方式。 • Bgcolor，控制网页背景颜色： • purple紫色，olive橄榄绿，navy深蓝，aqua水蓝，lime青绿，maroon茶色，teal墨绿，fuchsia紫红，yellow黄，blue蓝，green绿色，red红色，silver银灰，gray灰，white白，black黑 • Background，控制网页背景图片 • Text，设置网页文字的颜色

文字方面的html标记(签) • 编号列表<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>

超链接的html标记(签) • <a></a>标签 • 超链接的颜色，由<body>标签中的alink/vlink/link属性进行标记。Link标记还没有链接过（单击）的超链接的文本颜色，vlink是已经链接过的超链接的文本颜色，alink是当鼠标单击后超链接文本颜色。 • 通过协议进行的超链接 • <a href=“http://...”></a> • <a href=“mailto:电子邮件地址”></a> • <a href=“ftp://....”></a>

超链接的html标记(签) • <meta>标签 • meta标签共有两个属性，它们分别是http-equiv属性和name属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。 • meta是html语言head区的一个辅助性标签。几乎所有的网页里，我们可以看到类似下面这段的html代码： • <head> • <meta http-equiv=“content-Type” content=“text/html; charset=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标签可以设置网页到期的时间,也就是说,当你在Internet 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(cache模式) • 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(关键字)要注意以下几点： • 不要用常见词汇。例如www、homepage、net、web等。 • 不要用形容词，副词。例如最好的，最大的等。 • 不要用笼统的词汇，要尽量精确。 • 寻找合适关键词的技巧是：到Google、baidu等著名搜索引擎，搜索与你的网站内容相仿的网站，查看排名前十位的网站的META关键字，将它们用在你的网站上，效果可想而知了。

超链接的html标记(签) • <meta>标签: name属性的description参数 • description(网站内容描述) 说明：description用来告诉搜索引擎你的网站主要内容。举例：<meta name=“description” content=“This page 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标签仅在设置子框架属性的时候使用。Frameset标签不能放在<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……> • 注释语句： • 基本结构：<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的几中应用方法 • 直接定义标记的style属性 • 定义内部样式表 • 嵌入外部样式表 • 连接外部样式表

直接定义标签的style属性 <标记名称 style=“样式属性：属性值；样式属性：属性值…”> 例如： • <p style=“font-family:隶书; color:red”> 上面例子表示本段落的样式直接写入要定义样式的html标签里面这种方法一次只能控制一个网页标签

定义内部样式表 <style type=“text/css”> </style> 注： 是网页注释标签，该标签不被浏览器解释，网页不显示该内容。选择符，可以使用HTML标记的名称，所有的HTML标记都可以作为CSS选择符。其实就是样式名称

2010 级多媒体网页与制作