网页图像动画与脚本编程 主讲：熊丽华.

Presentation on theme: "网页图像动画与脚本编程 主讲：熊丽华."— Presentation transcript:

1 网页图像动画与脚本编程 主讲：熊丽华

2 第五章 网页的基本编辑 情境1：书法家庄辉个人介绍页面的制作 1. 项目展示与项目目标 2. 项目资讯 3. 项目计划与决策 4. 项目实施
5. 项目检查与评估 6. 强化拓展实训:制作鼠标滑过效果 基于工作过程的 网页设计与制作教程

3 项目展示与项目目标 1项目展示与项目目标 掌握Dreamweaver的基础知识
掌握Dreamweaver插入Flash动画的方法 掌握Dreamweaver插入Flash透明动画的技巧方法

4 2. 项目资讯 网页编辑基础知识 静态网页:是纯粹HTML格式的网页 l    静态网页上的页面不能互动交流，只供客户端浏览，不能即时更改文字及图片资料。不能实现客户端和服务器端的直接信息交流。 l     静态网页上的内容维护人员必须手动修改。 l   开发静态网站的费用极低，但如果每月或每周修改网站的话，维护成本会变高。

5 2. 项目资讯 网页编辑基础知识 动态网页 :采用动态技术生成的网页      “交互性”，即网页会根据网页用户的要求和选择而动态改变和响应。    “自动更新”，即无须手动地更新HTML文档，便会自动生成新的页面，可以大大节省维护工作量。     “因时因人而变”，即当不同的时间、不同的任务访问同一网址时会产生不同的效果。     使用动态页面，一般后台会链接数据库，每当数据库或其他数据源数据发生变化时，网站内容就会发生相应的变化。

6 2. 项目资讯 网页编辑基础知识 本地站点 本地站点是指存储Web文件和文档的文件夹。定义站点就是在 Dreamweaver中设计网站的第一步，此时设计人员将指定根文件夹的位置。 本地站点包含网站的文件，这些文件存储在本地磁盘上。每当需要更新网站的文件时，就可以编辑本地站点中的相应页面，然后上传到远程服务器上进行更新。 必须为每个网站都定义一个本地站点。

7 2. 项目资讯 网页编辑基础知识 远程站点 远程站点也就是网站服务器。 在建立远程站点之前，必须先创建一个本地站点（本地站点将与远程站点关联） 。 建立远程站点之后，即可根据需要上传文件和将文件下载到本地站点中。 根文件夹 l     存储所有网站文件的本地文件夹。 l     站点的本地根文件夹应该是专门为该站点创建的。

8 2. 项目资讯 关键知识点一：Dreamweaver CS3的基本知识 Dreaweaver CS3是Macromedia公司被Adobe公司收购后，推出的新一代所见即所得的网页编辑器，它的功能更为强大，界面更为友好，同时集网页制作和动态网站管理于一身。Dreaweaver CS3作为针对专业网页设计师开发的可视化网页制作工具，通过它可以轻而易举地制作出跨平台和跨浏览器的动感网页。

9 关键知识点一：Dreamweaver CS3的基本知识
2. 项目资讯 关键知识点一：Dreamweaver CS3的基本知识 菜单 插入栏 文档窗口 文档工具栏 面板组 属性检查器 9

10 Dreamweaver的界面-属性检查器
2. 项目资讯 关键知识点一：Dreamweaver CS3的基本知识 Dreamweaver的界面-插入栏 Dreamweaver的界面-属性检查器

11 Dreamweaver的界面-面板组 2. 项目资讯 关键知识点一：Dreamweaver CS3的基本知识
a）“文件”面板 b）“资源”面板

12 关键知识点一：Dreamweaver CS3的基本知识
2. 项目资讯 关键知识点一：Dreamweaver CS3的基本知识 在学习Dreamweaver CS3软件的功能之前，需要先了解它的一些基本操作，Dreamweaver CS3的基本操作包括文档的基本操作，历史记录面板的操作以及网页头部元素的操作等。 创建文档 保存文档 打开文档 设置文档属性 单击菜单栏中的【修改】|【页面属性】命令。 在编辑区空白位置单击鼠标右键，在弹出菜单中选择【页面属性】命令。 在编辑区空白位置单击鼠标左键，然后在属性面板中单击【页面属性】按钮。 12

13 2. 项目资讯 关键知识点一：Dreamweaver CS3的基本知识 “页面属性”对话框包括页面的颜色、页面标题和背景图像等的设置选项，点击如图“分类栏”中的各个选项，可作如下设置（以外观分类为例）。 图中设置了文字大小为12pixels，文本的颜色为白色（#ffffff），背景颜色为深褐色（#6d4418），网页的上边距、下边距、左边距、右边距都设置为0pixels。

14 2. 项目资讯 关键知识点一：Dreamweaver CS3的基本知识 图中设置了文字大小为12pixels，超级链接的链接文本颜色与已经访问的文本颜色为白色，变换图像链接时的颜色为浅黄色（#FFCC00），下划线样式设置为：仅在变换图像时显示下划线。

15 2. 项目资讯 关键知识点一：Dreamweaver CS3的基本知识 编码为简体中文GB2312

16 关键知识点一：Dreamweaver CS3的基本知识
2. 项目资讯 关键知识点一：Dreamweaver CS3的基本知识 编辑网页头部元素 HTML网页文件通常分为头部与主体两部分，主体是显示在浏览器中的部分，即用户在浏览器中看到的网页，而头部中只有标题可以显示在网页浏览器的标题栏中，其他部分都不能显示在浏览器中。 Meta 用于记录当前网页信息的头部元素，如网页的解码方式、作者、版权信息等，也可以向服务器提供信息，如更新日期等。 关键字 关键字是许多搜索引擎搜索网页时的重要依据。 16

17 关键知识点一：Dreamweaver CS3的基本知识
2. 项目资讯 关键知识点一：Dreamweaver CS3的基本知识 编辑网页头部元素 说明 说明元素的作用是在网页头部<Meta>中加入对网页说明性的文字。许多搜索引擎在进行搜素是都会读取<Meta>标记中这些说明性的信息。 刷新 使用刷新元素不仅可以控制浏览器自动刷新网页的时间，还可以控制网页从一个URL地址跳转到另一个地址。 基础 基础元素用于设置网页中相对于所有文档相对路径的基础URL地址。 链接 链接元素用于在当前网页与另一个网页文件之间创建链接关系。 网页标题 在浏览器标题栏中显示的文字信息。 17

18 关键知识点一：Dreamweaver CS3的基本知识
2. 项目资讯 关键知识点一：Dreamweaver CS3的基本知识 创建站点 网页制作不仅是单个页面的制作，而且是一个网站站点的制作。在一个站点中通常由一组有着明确的主题、一致的设计、相互链接的页面所组成，我们将站点中的页面称作网页，而由这些网页及其相关文件所构成的站点称作网站。 站点窗口 用户在制作网站时很少有制作一个页面的情况，而是制作多个页面，并且将这些页面按照一定的目录结构链接起来，这就需要创建出一个站点。 站点选择栏 视图选择栏 工具栏 站点文件视图区 18

19 创建站点的方法 2. 项目资讯 关键知识点一：Dreamweaver CS3的基本知识 使用站点定义向导建立站点 使用【高级】设置建立站点
站点名称：用于设置网站的名称 本地根文件夹：用于设置本地站点的文件在本地计算机中存储的文件路径。 默认图像文件夹：用于设置本地站点中使用到得图像文件默认的存放文件路径 链接相当于：用于指定站点内的文件链接是相对于文档之间的链接还是相对于站点根目录的链接。 19

20 创建站点的方法 2. 项目资讯 关键知识点一：Dreamweaver CS3的基本知识 使用【高级】设置建立站点
HTTP地址：用于输入网站在Internet上的绝对URL地址。 区分大小写的链接：勾选此选项，在检查网页链接时区分大小写。 缓存：勾选此选项后，重新编辑文件的链接后，站点内相关的文件都会更新相对此文件的链接。 20

21 站点文件的管理 站点文件的操作 2. 项目资讯 关键知识点一：Dreamweaver CS3的基本知识 建立树形文件夹目录保存文档
合理存储文档中的各种资源 合理为文件命名 站点文件的操作 新建、删除站点文件与文件夹 复制文件 移动站点文件 21

22 2. 项目资讯 关键知识点二：Dreamweaver编辑网页文本 编辑文本是最基本的网页制作技能，文字是人类文明的结晶，是网页传递信息的最基本的方式。编辑和设置内容丰富、格式美观的文本，既可以传达网站大量的信息，又可以激发浏览者的阅读兴趣。在Dreamweaver中可以输入普通文字，也可以输入特殊字符，设置字体大小，改变文本颜色等。 1）文本的输入 2）复制和粘贴文本 3）从Word文档中导入HTML，粘贴到所需位置即可

23 2. 项目资讯 关键知识点二：Dreamweaver编辑网页文本 在Dreamweaver CS3中编辑网页文本和Word一样方便实用，可以为文本设置各种标题样式，还可以对文本进行段落划分与分行。 插入标题文字 一个网站的首页或一篇独立的文章，通常有一个醒目的标题，表示该网站的名称或文章的主题。网页中的标题文字样式共有六种。从标题1~标题6。 划分段落与分行 网页中的段落是指一段格式上统一的文本，同一个段落中的文字具有相同的段落属性，段落的HTML标记为<p>,网页中的行包含在段落中，行的HTML标记为<br>。 注意：按下Enter键为划分段落，按下Shift+Enter为换行操作。

24 2. 项目资讯 关键知识点二：Dreamweaver编辑网页文本 插入空格符 在Dreamweaver中按空格键只能插入一个空格，要插入多个空格必须按【插入栏】中【文本】标签中【字符】按钮下的【不换行空格】或按下Ctrl+Shift+空格。 插入日期 插入水平线 设置文本格式 设置文本格式包括设置文字的字体、文本的颜色、字号大小等，从而使文字产生丰富变化的效果。 1）文字字体的设置 2）文字字号的设置 3）文字颜色的设置 4）粗体和斜体

25 2. 项目资讯 关键知识点二：Dreamweaver编辑网页文本 设置段落格式 在【属性】面板中除了可以对文本的字符进行属性设置外，还可以对文本的段落属性进行控制，如设置文本的对齐方式、段落的缩进方式等。 1）段落的对齐方式 2）设置段落缩进方式 项目列表与编号列表 项目列表和编号列表是制作网页时经常使用的操作，通过它们可以使网页内容层次分明，让浏览者在浏览网页时更加轻松。使用项目列表可以让信息以无序的方式排列，使用编号列表可以让信息以有序的编号方式排列。

26 2. 项目资讯 关键知识点三：Dreamweaver插入网页图像 网页图像使网页更加直观、生动，而且会增加用户对主题的理解和欣赏，此外还能增加艺术的吸引力。 插入网页图像 网页中显示的图像并不是嵌入到网页的一部分，而是被链接到网页中，然后通过浏览器显示在网页中，图像的链接通过<IMG>标记实现。 执行“插入”→“图像”命令，完成插入图像。

27 2. 项目资讯 关键知识点三：Dreamweaver插入网页图像 插入鼠标经过图像 插入背景图像 图像占位符 图像占位符是图像添加到网页之前使用的单色图形，网页图像编辑好后，可将该占位符替换掉，通过它可以起到预先编辑页面的作用。 设置网页图像属性 1)设置图像的大小 2)设置图像的段落属性 3)设置图像与文字的对齐属性 4)添加边框 5)设置水平、垂直间距 6)设置替代文本 设置网页背景图像

28 2. 项目资讯 关键知识点四：Dreamweaver插入超级链接 所谓超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一幅图片、一个电子邮件地址、一个文件、甚至是一个应用程序等。 绝对路径 绝对路径用于建立站点的外部链接，它是用户网页上的主页路径或在硬盘目录上真正的路径。 相对路径 相对路径用于网站中的内部链接，它是指一个文件相对于一个确定的文件的路径。在Dreamweaver CS3中相对路径分为两种：一种是相对于网站中其他文档的路径，另外一种是相对于站点根目录的路径。

29 2. 项目资讯 关键知识点四：Dreamweaver插入超级链接 创建页面链接 创建 链接 创建下载链接 创建图像热点链接 创建锚点链接 超级链接目标的四种属性 _blank：在新的浏览器窗口中打开链接的文档，同时保持当前窗口不变。 _parent：在显示链接的框架的父框架集中打开链接的文档，同时替换整个框架集。 _self：在当前窗口中打开链接，同时替换该框架中的内容。 _top：在当前浏览器窗口中打开链接的文档，同时替换所有框架。

30 2. 项目资讯 关键知识点四：Dreamweaver插入超级链接

31 2. 项目资讯 关键知识点五：Dreamweaver插入表格

32 2. 项目资讯 关键知识点五：Dreamweaver插入表格 “表格”的属性 表格单元格的属性

33 2. 项目资讯 关键知识点六：Dreamweaver插入Flash元素 Flash动画是一种基于矢量格式的多媒体动画文件，它可以进行高品质的声音、动画甚至视频的播放，并且可以建立网页之间的超链接，以及实现用户之间的交互。 插入Flash动画 设置Flash动画属性 执行“插入”→“媒体”→“Flash”命令

34 2）在网页中插入一行一列的表格，设置表格的宽高、填充、间距、边框、背景颜色等。参数如图6-19所示，设置后的效果如图6-20所示。
2. 项目资讯 关键知识点六：Dreamweaver插入Flash元素 插入透明Flash动画 1）启动Dreamweaver软件，创建一个空网页并与“flash”文件夹保存在同一目录中命名为“transparentflash.html”，设置页面属性设置标题为“透明动画测试”，设置“页面背景”上下左右边距为0。 2）在网页中插入一行一列的表格，设置表格的宽高、填充、间距、边框、背景颜色等。参数如图6-19所示，设置后的效果如图6-20所示。

35 2. 项目资讯 关键知识点六：Dreamweaver插入Flash元素 插入透明Flash动画 3）将光标置于表格中，然后执行“插入”→“媒体”→“Flash”命令，在弹出的“选择文件”对话框中选择flash文件夹中的“banner.swf”（第五章5.2.1节中制作的动画如图5-12）动画。

36 2. 项目资讯 关键知识点六：Dreamweaver插入Flash元素 插入透明Flash动画 4）选择动画在“属性”面板中点击“参数”按钮，设置“参数”选项为wmode，值为transparent，具体如图6-21所示。

37 2. 项目资讯 关键知识点六：Dreamweaver插入Flash元素 插入透明Flash动画 5）执行“文件”→“在浏览器中预览”→“iexplore”命令（快捷键<F12>）预览网页如图6-18所示（本例与上例效果相同）。 如果在第3步中，选中“bird.swf”文件的话，效果如图6-22所示。

38 2. 项目资讯 关键知识点七：Dreamweaver插入特殊字符 “插入”→“HTML”→“特殊字符”→“其他字符”命令

39 3. 项目计划与决策 书法家庄辉个人介绍页面主要是在书法家庄辉个人网站效果图切片后导出的图片的基础上实现新的网页编辑。遵循最初网站设计的思路，适当的做出调整。本页面的表格结构如图6-24所示： 网站logo.jpg 大小996像素×65像素 Banner动画 大小996像素×185像素 网站导航 个人照片 个人文字介绍 版权信息（文字白色）（背景褐色）高100 px

40 4. 项目实施 1）新建一个文件夹，命名为“庄辉个人简介网页”，然后打开文件夹，分别创建“flash”（存放动画）、“images”（存放网页基本文件）、“pic”（存放作者的书法作品）3个文件夹。然后将素材文件夹中的所需的素材分类存放到各自文件夹中。 2）启动Dreamweaver软件，执行 “文件”→“新建”命令或按快捷键<Ctrl+N>，弹出“新建文档”对话框。从“类别”列表中选择“基本页”，然后从右侧的列表中选择“HTML”再单击“创建”按钮创建一个新的HTML网页，执行“文件”→“另存为”命令，保存网页到“庄辉个人简介网页”文件夹中，命名为“grjj.html”。 3) 按<Ctl+J>组合键调出“页面属性”对话框，设置“外观”分类为：字体大小12pixels，文本颜色FFFFFF，背景颜色6d4418，上、下、左、右边距都为0pixels。

41 4. 项目实施 4）设置“页面属性”对话框中的“链接”分类，参数为：字体大小12pixels，链接颜色#FFFFFF，变换图像链接时的颜色为浅黄色（#FFCC00），下划线样式设置为：仅在变换图像时显示下划线，详细如图6-8所示。同时设置“标题”分类，网页的标题为：庄辉个人简介页面，编码为简体中文GB2312。 5）执行“插入”→“表格”命令，在弹出的“表格”对话框中，设置行数为4，列数为2，宽为996像素，边框粗细：0像素，单元格边距0像素，单元格间距1像素，详细的参数也可以通过表格的参数设置来完成，表格的背景色为#edd15e，设置完成后选中所有单元格设置单元格的背景色为6D4418（网页的背景色。

42 4. 项目实施 6）使用鼠标选中第1行的两个单元格，然后执行“修改”→“表格”→“合并单元格”命令（也可以点击属性栏中的“合并单元格”按钮），将其合并，同样的方法合并第2行，第4行，合并后效果如图所示。 7）使用鼠标选择第1行的单元格，然后设置单元格高为：65像素，选择“插入”工具栏中的“常用”分类，然后点击“图像”按钮，插入“images”文件夹中的“logo.gif”图片。如图所示。

43 4. 项目实施 8）使用鼠标选择第2行的单元格，然后设置单元格高为：185像素，选择“插入”工具栏中的“常用”分类，然后点击“媒体：flash”按钮，插入“flash”文件夹中的“banner4.swf”动画。如上图所示。点击“属性”栏中的“播放”按钮，效果如下图所示。

44 4. 项目实施 9）设置第3行的左侧单元格宽为160像素，右侧单元格为833像素（ =996像素，总宽度等于水平显示的各个元素宽之和，要保证网页界面精细就要减少误差），同时设置两个单元格的垂直对齐方式为：顶端，然后在左侧单元格中插入一个宽120像素，11行，2列，居中对齐，填充、间距、边框都为0像素的表格，详细参数如6-30所示。

45 4. 项目实施 10）选中插入的22个单元格，点击“居中对齐”按钮设置单元格为居中对齐，然后选择左侧11个单元格，设置宽为30像素，选中右侧的11个单元格，设置宽为90像素。最后分别给左侧从第2行开始的10个单元格中插入“dot.jpg”图片，分别在右侧的第2行开始的10个单元格中插入“网站首页”、“个人简介”、“书法作品”、“国画作品”、“楷书作品”、“篆书作品”等文本。插入后效果如图6-31所示。

46 4. 项目实施 11）在右侧的表格中插入1个表格6行，2列，宽为95%，居中对齐。然后合并第1、2、3行的表格，设置第2行高为30像素，在第2行中嵌套1个表格1行3列，居中对齐，填充、间距、边框都为0像素，3列宽度分别为1%，3%，96%，第1列的背景颜色为#FF3300，在第3列中输入“个人介绍”（颜色为：#FFFF00），效果如图所示。 12）鼠标选中第3行，然后设置背景色为#FFFF00，插入“images”文件夹中的“space.gif”图片，最后设置行高为1像素，可以得到一条高为1像素的红线，如图所示。

47 4. 项目实施 13）鼠标选中第4行的2个单元格，设置两个单元格的垂直对齐方式为：顶端，然后修改左侧的单元格宽为360像素，插入“grjj.jpg”图片插入到左侧单元格中，打开“素材”文件夹中的“庄辉介绍.txt”文件，将其中的内容复制到第4行右侧的单元格中，对文本进行段落调整，如果觉得文本过于密集，可以利用<Shift+Enter>键进行调整。 14）鼠标选中最后1行，然后设置单元格属性为高100像素，水平居中对齐，最后在表格中输入“版权所有：淮安书画院书法家庄辉”、“建议分辨率：800×600以上分辨率 IE4.0以上版本浏览器”、“联系人:庄辉 电话: ”等文本，最后通过整体调整，按键盘上的<F12>键进行预览，如图6-34所示。

48 4. 项目实施 15）同样的方式制作“书法作品”的网页sfzp.html，然后分别给两个页面的导航栏设置超级链接，个人简介链接grjj.html，书法作品链接sfzp.html。如图所示。

49 4. 项目实施 16）采用同样的方式制作其他的网页，如主页、草书作品、行草作品等 。

50 5.项目检查与评估 学习目标 评价项目 掌握Dreamweaver的基础知识 能理解静态网页、动态网页、本地站点、远程站点的概念
能认识认识Dreamweaver CS3的工作界面以及Dreamweaver CS3各个面板的功能 掌握Dreamweaver的页面属性的设置 能使设置常规、链接、标题的页面属性设置 掌握Dreamweaver插入文本、图像、表格、超级链接的方法与技巧 能熟练使用Dreamweaver插入文本并设置属性 能熟练使用Dreamweaver插入图像并设置属性 能熟练使用Dreamweaver插入表格并设置属性 能熟练使用Dreamweaver插入超级链接并设置属性 掌握Dreamweaver插入flash动画 能插入flash动画，以及设置透明的flash动画 掌握制作简单的网页能制作简单的网页

51 图 6-43 鼠标经过图像（服务指南模块）的导航效果
6.强化拓展实训：掌握制作简单的网页能制作简单的网页 图 原始状态下（服务指南模块）的导航效果 图 鼠标经过图像（服务指南模块）的导航效果

52 第六章 网页的基本编辑 课程小结 1. 项目展示与项目目标 2. 项目资讯 3. 项目计划与决策 4. 项目实施 5. 项目检查与评估
6. 强化拓展实训:制作鼠标滑过效果 基于工作过程的 网页设计与制作教程

53 谢谢大家