英语等级考试专题学习网站网页编辑与动画设计

Presentation on theme: "英语等级考试专题学习网站网页编辑与动画设计"— Presentation transcript:

1 英语等级考试专题学习网站网页编辑与动画设计
基于工作过程的网页设计与网站开发教程 英语等级考试专题学习网站网页编辑与动画设计 主编：张洪斌 刘万辉 机械工业出版社

2 网页编辑与动画设计 网页编辑主要是将使用切片导出的网页进行编辑使其规范易用，同时为了增加网页效果，进行简单的动画制作。所以在此解决两个问题：网页编辑与动画设计。 第一种是直接在切片效果图中进行编辑，进行后期处理，这种方法适用于艺术界面型网页，具体的方法是直接在网页中设置超级链接，添加动画等效果，或者将某些切片删除（或设置为背景），然后添加需要的文字。 第二种是以导出的网页为基础，利用Dreamweaver软件进行合理的布局与优化。这种方法通用性强，很多网页都可采用。

3 表格布局分析 a) 网页表格布局大表格整体布局 b) 网页表格分散布局 二者的最终呈现的网页效果是一样的，但是整体布局a会涉及到较多的表格嵌套，同时在下载网页内容时速度相对较慢，表格的分布布局b浏览的速度相对较快。所以通常大家在进行网页设计时尽量采用表格的分布布局b。

4 后期网页编辑 用Dreamweaver新建一个网页文件并保存到导出的“静态网页”文件夹中，命名为“default.htm”。 设置“页面属性”中“网页标题”为“欢迎英语等级考试专题学习网站！”，背景色为蓝色（# 00aae2），上、下、左、右边距为0像素，设置如图所示。 页面属性设置

5 后期网页编辑 3）在“静态网页”文件夹中创建“style”子文件夹，用Dreamweaver创建新CSS文件，并保存CSS文件到该文件夹中，命名为“style.css”，然后书写通用td的样式，网页栏目标题headtitle，以及通用超级链接的样式， 4）在“CSS样式表”面板，点击附加样式表。 附加样式表

6 后期网页编辑 5）在“插入”工具栏，点击“插入表格”。 插入表格参数 设置插入的表格的属性高为20像素，表格的对齐方式为居中对齐

7 后期网页编辑 6）采用第5步同样的方法插入表格1行2列，设置比表格的背景色为白色（#ffffff），对齐方式为居中对齐，设置行高为23像素，设置左侧单元格宽为669像素，有单元格为271像素宽，然后在第二个单元格插入“index_05.gif”图片，这样就恢复了效果图中设计的原貌。 注意：为了达到更好的的效果，大家可以将内容充实，同时将index_05.gif图片转换成3个小图标和3段文字。

8 后期网页编辑 7）插入表格1行2列，设置导航栏， 网站标头的预览

9 后期网页编辑 9）继续插入单元格1行1列，宽940像素，高153像素，居中对齐，然后插入图片“index_09.gif”， 点击F12键进行预览，效果如图所示。 网站标头的预览

10 后期网页编辑 10）主体栏目的设置。 a) 导出的图片 b) 表格背景图片 c) 表格文字 图片与背景图与文字的置换 a) 背景图 b)背景图2 c)背景图3 背景图片的优化

11 后期网页编辑 11）中间的6格模块，以“考试介绍与动态”为例，置换关系如图所示 背景图片的优化

12 后期网页编辑 12）虚线的实现。 a) 背景图midleftbg.gif(363pix*10pix) b) 背景图midleftbg.gif(357pix*10pix)

13

14 后期网页编辑 13）利用Photoshop将index_28.gif打开，将左边的文字摸去后可得到图1-39保存为index_28bg.gif。 在网页最后添加表格2行1列，宽940像素，高110像素，第1行高90像素，第2行高20像素，设置index_28bg.gif为第1行的背景图片，然后，在第1行中输入“版权所有 淮安信息职业技术学院外语系”、“邮政编码： 电话： 地址：淮安市枚乘东路3号　技术支持：网络中心”3行文字。

15 动画制作 1. 启动SWiSHmax ，如图所示。

16 动画制作 2）点击“开始新建一个空电影”按钮，在场景中创建一个电影，在属性中输入动画的宽为940像素，高为153像素，具体参数如图所示，在网站文件下创建“flash”文件夹并保存文件动画文件。 动画的参数设置界面图 动画的参数设置界面

17 动画制作 3）执行“插入”→“图像”命令，在“打开”对话框中选择“index_09.gif”后点击“打开”按钮，图片就插入到场景中了，设置电影的变形属性标签，将锚点设置为“左上”，具体设置如图1-43所示，图像插入的效果如图所示。

18 动画制作 4）点击工具栏中的按钮（执行“插入”→“文本”命令），然后在文本输入区中输入“改革创新 服务教学”等字，调整文字的位置，如图所示。

19 动画制作 5）在场景中选中“改革创新”文字对象，执行“添加脚本”→“核心效果”→“变形”命令，如图所示。

20 动画制作 6）在控制栏中点击“播放”按钮测试。

21 动画制作 7）执行“文件”→“导出”→“swf”命令，即可弹出“导出为swf”对话框，选择路径，输入文件名即可保存。

22 动画制作 方式二的制作与方式一的不同之处在于，可以不加载背景图片，或者在方式一制作最后删除图片，当然这个动画的大小适中就可以了，例如宽460pix，效果如图所示。 动画预览效果

23 动画的使用 1.打开上一节制作的网页“default.htm”，然后删除图片“index_09.gif”。 2.执行“插入”-“媒体”-“flash”命令，然后选择“flash”文件夹下的“dh.swf”动画，预览动画如图所示。 “插入”工具栏中的“插入媒体”按钮

24 动画的使用 方式二制作的透明动画，主要是将图片作为背景图，然后将动画插入，设置动画参数如图所示即可。