网页制作设计实验指导书.docVIP

　　　 《网页设计》实验指导书 《网页设计制作》是网络工程专业的一门重要的专业选修课，是计算机网络技术专业的专业核心课程。通过本课程的学习，使学生了解网页设计技术的起源和发展、常用的网页制作软件及HTML语言和，掌握运用Dreamweaver网页制作软件制作网页、特别是制作动态网页的方法，掌握运用Fireworks图像处理软件进行网页中图形制作和运用flash动画制作软件设计网页中动画的方法，进而掌握将这三个软件互相配合，完成网页设计与制作任务的方法。为今后从事网页设计与制作、网站开发和管理奠定基础。在网页设计的实践中重点培养团队协作、沟通交流能力，培养自主学习能力和探索创新能力。 （1） 熟练掌握运用Dreamweaver网页制作软件制作网页、特别是制作动态网页的方法，掌握运用Fireworks图像处理软件进行网页中图形制作和运用flash动画制作软件设计网页中动画的方法，进而掌握将这三个软件互相配合，完成网页设计与制作任务的方法。 （2） 具备网页设计、图形设计、动画设计的基本能力，能独立设计一个内容完整、图文并茂、技术运用得当的网站；具备初步的网站开发、维护和管理能力；具备独立撰写网站制作说明等科技文件的基本能力；培养分析问题、解决问题的能力；培养协作、交流的能力，培养创新能力和团队意识。  实验一 HTML语言基本知识 一 实验目的： 1. 熟悉HTML语言； 2. 掌握HTML语言的基本语法结构 3.掌握HTML语言的编写方法 二 实验原理： 1.“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。 2.超文本标记语言的结构包括“头”部分（外语：Head）、和“主体”部分（外语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。 三 实验仪器与材料 计算机，windows 7和Dreamweaver软件 四 实验步骤： 1.打开“记事本”或“写字板”输入文本 2、输入 HTML HEAD TITLE 淮南师范学院欢迎你 /TITLE /HEAD BODY !--网页正文区从这里开始-- 这里是淮南师范学院校园网，欢迎您来到淮南师范学院。 /BODY!--网页正文区结束-- /HTML 3.另存为myfirstpage.html 4.在IE浏览器中浏览 五 实验结果与讨论 理论联系实际，写出实验者的见解、体会和收获  实验二 Fireworks基本操作（1） 一 实验目的： 1.了解Fireworks的工作环境。 2. 熟悉Fireworks的操作界面操作。 3. 掌握Fireworks的画布操作。 二 实验原理 1. Adobe Fireworks是Adobe推出的一款网页作图软件，软件可以加速 Web 设计与开发， 是一款创建与优化 Web 图像和快速构建网站与 Web 界面原型的理想工具。 2. Fireworks 不仅具备编辑矢量图形与位图图像的灵活性， 还提供了一个预先构建资源的公用库， 并可与 Adobe Photoshop、Adobe Illustrator、Adobe Dreamweaver和 Adobe Flash软件省时集成。 三 实验仪器与材料 计算机，windows 7、Fireworks和Dreamweaver软件 四 实验步骤： 1.打开FireworksCS4 2.打开界面 3.更改画布大小 打开素材 操作一 修改(画布(画布大小 4.更改画布颜色 5.更改图像大小 6.保存文件 五 实验结果与讨论 理论联系实际，写出实验者的见解、体会和收获  实验三 Fireworks基本操作（2） 一 实验目的： 1.掌握Fireworks的图层操作。 2.掌握Fireworks的选择对象操作。 3.掌握Fireworks的修饰画布。 4.掌握Fireworks制作矢量图形。 5.掌握Fireworks的文本特效及蒙版操作。 二 实验原理 1. Fireworks导入 Photoshop (PSD) 文件，导入时可保持分层的图层、图层效果和混合模式。将 Fireworks (PNG) 文件保存回 Photoshop (PSD) 格式。 2. 导入 Illustrator (AI) 文件，导入时可保持包括图层、组和颜色信息在内的图形完整性。 三 实验仪器与材料 计算机，windows 7、Fireworks和Dreamweaver软件 四 实验步骤： 1.打开FireworksCS4 2. 打开素材 使用层面板 （1）添加层 （2）删除层 （3）复制层和对象 （4）复制对象 3.参照素材“蝴蝶.png” 使用矢量工具绘制蝴蝶 4.保存文件 5.打开素材，为素