网页设计制作讲课大纲.pptVIP

网页设计制作讲课大纲 薛阿惠 Ahui@ 前言 本课程的目标 本课程的课程安排 如何学习本课程？ 课程安排 15次课（每次课2小时） 第一部分：Fireworks(5次课) 第二部分：flash(4次课) 第三部分：Dream weaver(6次课) 如何学习本课程？ 增强自己的主观能动性。（自己多上网学习、多做课外练习） 多和同学沟通（少走弯路） 自己动手做网站，做完整的网站。（这样会让你有一个非常清晰的思路，同时在做的过程中，你也会碰到很多问题，把问题解决了，你也学会了，如果你已自己独立做了很多网站，那意味着：你离高手不远了。） 本课程学习目标 目标：通过本部分的学习，可以制作出自己的个人网站和一般的企业宣传网站。 要求：在本部分课程结束时，每位同学都能做出（至少一个）属于自己独立完成的网站。 雅森网站 第一部分：Fireworks（5次） Fireworks可以做什么？ 答： Fireworks第一讲 本讲内容： 熟悉了解FW的工作环境 矢量工具的应用（“形”为例） 标志(Logo)的设计 Fireworks第一讲 示例一：形 学习目的： 1、建画布，修改画布属性（作图的第一步） 2、能熟练应用工具箱一些绘图工具、对填充有最初的了解，认识stroke 面板 和Fill面板等。 本例技术要点：动手练习 Fireworks第一讲 示例二：标志 学习目的： 1、掌握网页中Logo的一般尺寸。（150*60） 2、 Logo的常规设计 要求：简洁、一目了然。简单的比复杂的好记，符号的比自然图像的更具有说服力。 Logo就象是网站的商标一样，一般包含网站的名称、英文网址、网站标志、网站理念。 Fireworks第一讲 制作步骤： 1、新建画布，150*60，设背景色为白色。 2、输文字“”进去。 3、选中文字，利用文本菜单中的“转化为路径”的命令，此时文字将由文本格式转化为路径了。 4、可以利用工具箱中的可以转变路径的任意工具来对“i”进行变形处理。 5、用椭圆工具制作红色的眼睛，（眼球输入字母“o”,睫毛用笔刷，设笔刷的属性为：书法竹子6） 6、最后输汉字“新浪网” 注意：几个对象之间的关系。 Fireworks第一讲 小结 本讲中，重点要熟练使用工具箱中学过的工具、和学过的面板，再注意有关网站标志的设计。 作业 用FW的绘图工具做一名为“形”的图（构思不限） 为自己学校设计网页logo，或为自己要准备做的网站设计。 提示：下次课内容：下次讲课重点：位图的处理 Fireworks第二讲 本讲重点 矢量图与位图 位图的处理 Fireworks第二讲 位图的处理 学习目的 1、熟悉掌握FW处理位图的工具和常用方法。 2、进一步了解位图模式和矢量模式。 Fireworks第二讲 位图的处理 技术要点 1、所有的位图处理工具必须在位图的编辑模式下进行。 2、注意羽化效果的应用。 Fireworks第二讲 本例小结 位图处理在我们的实际工作中是用的最多的，所以掌握和应用好这些工具非常重要。 作业： 练习课堂例子熟悉位图处理工具 提示：下次讲课重点：网页按钮和GIF动画的制作。 Fireworks第三讲 本讲重点 网页信息导航的制作 用FW做gif动画 Fireworks第三讲 网页信息导航的制作 1、学习目的： 自己能独立做网页信息导航或网页按钮。 2、制作步骤： 新建大小合适的画布。 在插入菜单选择新建按钮。 在打开的新按钮框设置按钮（按钮对准十字） 设置完几种状态后，关闭新建按钮对话框，在我们的画布上已经有了按钮。 接下来根据需要来复制按钮、更该相关的文字。 Fireworks第三讲 网页信息导航的制作 技术要点： 1、注意在做几种状态的按钮时，一定要先建好画布。 2、注意信息导航的输出。 小结： 有关信息导航的设计一定要和网页的主题色调搭配。 Fireworks第三讲 Gif动画制作 学习目的 1、了解广告条的制作。 2、掌握用FW做GIF动画。 制作步骤： 1、建画布（468*60） 2、建立动画符号 3、设置动画符号 Fireworks第三讲 技术要点： 1、注意帧的使用。 2、 注意GIF动画的输出 小结： 制作简单，且很有用。注意把握动画的速度。 Fireworks第三讲 小结：本讲的内容都很重要。 作业： 为我们学校做一个动画广告条 要求：动画里有文字和图片 提示：下次课重点：图片的优化输出和切割。 Fireworks第四讲 本讲内容： Fireworks第四讲 了解GIF与JPEG与PNG的区别及在网页中的应用。 GIF特点： 采用高效的LZW无损压缩算法 只支持256色 支持透明背景 支持动画 GIF适用于卡通、徽标等色彩比较少的图片。 Firew