1 / 24

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

基于工作过程的网页设计与网站开发教程. 英语等级考试专题学习网站网页编辑与动画设计. 主编：张洪斌 刘万辉. 机械工业出版社. 网页编辑与动画设计. 网页编辑主要是将使用切片导出的网页进行编辑使其规范易用，同时为了增加网页效果，进行简单的动画制作。所以在此解决两个问题：网页编辑与动画设计。 第一种是直接在切片效果图中进行编辑，进行后期处理，这种方法适用于艺术界面型网页，具体的方法是直接在网页中设置超级链接，添加动画等效果，或者将某些切片删除（或设置为背景），然后添加需要的文字。

kaelem
Download Presentation

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

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

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段文字。 具体可以插入1行8列的表格，左侧的两个单元格分别放入“离本次英语等级考试还有100天”和“欢迎访问英语等级考试专题学习网！”，在代码视图中，在“欢迎访问英语等级考试专题学习网！”上加入标签<marquee></marquee>即可以完成他的滚动效果，然后将index_05.gif置换成3格小图片和3个导航文字（学院主页、教务在线、联系我们），设置他们三个的超级链接地址分别为（http://www.hcit.edu.cn/、http://jwpd.hcit.edu.cn/、mailto：lwh@hcit.edu.cn）。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

More Related