网页课程设计参考.doc

PAGE 信息工程系 计1231班 网页制作课程设计报告 专 业： 计算机应用技术 系 别： 信息工程系 班 级： 计 1231班 姓 名： 张玉坤 指 导 教 师： 周洁老师 杨静老师 目 录 TOC \o 1-4 \h \z \u 一、课程实训目的 3 二、课程实训要求 3 三、课程实训内容 4 （一）网页设计内容 4 (一) 建立布局 4 （二）网页中的图像 4 （1）在网页中插入图像 5 （2）图像的各种属性设置 5 （3）怎样编辑网页中的图像 6 （4）使用背景图像 6 （三）插入flash动画 7 （四）设置鼠标经过图片，进行图片交互 7 （五）设置链接 8 （二）制作网页所用步骤（图示） 8 （三）对所设计的网页中添加动画 13 四、课程实训心得 14 一、课程实训目的 1、认知起点：通过一学期的学习，已初步掌握Adobe Dreamweaver CS5动画的一些简单使用方法。 2、能力目标：培养我们的实践能力和创新意识，在探索中不断丰富其求异求新的思想和协作创新能力，进一步激发我们的学习热情。 3、情感目标：培养我们善于与他人合作及勇于探索的精神，激发我们的创新意识。 4、通过设计达到掌握网页设计、制作的技巧。了解和熟悉网页设计的基础知识和实现技巧。 5、熟练掌握Photoshop Cs6、Dreamweaver Cs6等软件的的操作和应用。增强动手实践能力，进一步加强自身综合素质。 6、将自己脑里的灵光实现出来。 二、课程实训要求 熟练应用Dreamweaver Cs6软件制作网页和相关链接，并能与其他软件熟练的结合运用，如Photoshop、Adobe Illustrator、Adobe Flash Professional CS5.5等软件。熟悉网页制作过程，识别网页中的各个参数的作用，能自己动手做一个学校的首页，并添加相关自己的创意。熟悉Dreamweaver Cs6软件的网页构成，以及一些技巧的应用和网页中布局的运用。运用Dreamweaver Cs6、Photoshop和Adobe Flash Professional CS5.5的结合运用做出自己所设计的网页，及在Photoshop和Adobe Illustrator中制作所需素材，并在Dreamweaver Cs6中做出相应调整，可以独立制作学院首页及相关链接。 三、课程实训内容 （一）网页设计内容 (一) 建立布局 在这次的网页设计中用到大量的布局，所以怎么样建立布局是关键。Dreamweaver cs6是大多数人设计网页的称手兵器，也是众多入门者的捷径。特别是其在布局方面的出色表现，更受青睐。大家都知道，没有表格的帮助，很难组织出一个协调合理的页面。 1.点击创建按钮，插入标签、ID、符合内容，建立一个大概的布局。 2.使用背景图片：选中该项，按浏览可以插入一幅准备好的图片作为表格的背景，因为图片是以平铺的形式作为表格背景，所以表格大小和图片尺寸都要控制好。 （二）网页中的图像 图像传输是WWW的真正魅力所在，它与文字相比具有显著的优点：一是直观，人眼观看图像时接受信息的速度远远超过观看文字时接受信息的速度；二是能更清楚地表达细节内容。正是由于这些优点，所以在进行网页设计时图像很受欢迎。如果网页做得像一幅风景画，浏览者一定会流连忘返（如果图片很大，效果会适得其反）。 图像文件的格式有几十种，如GIF、JPEG、BMP、EPS、PCX、PNG、FAS、TGA、TIFF、WMF等，现在Internet Explorer和Netscape支持的、最常用的图像格式是GIF、JPEG和BMP。 （1）在网页中插入图像 利用Dreamweaver cs6可以方便地在网页中插入图像，还可以设置图像边框、大小、和位置，并且可以直接对图像进行编辑。在网页中加入图像的操作非常简单： 1.新建一个空白网页，把光标定位在网页的开始位置。 2.打开“工具”菜单，选择“图片”菜单项，在子菜单中选择“来自文件”菜单项，或者单击工具栏中的图片工具图标，弹出一个“图片”对话框。 3.在此对话框中单击“浏览”按钮，出现一个“选择文件”对话框。 4.在“选择文件”对话框的文件列表中选择某个图像文件，然后单击“确定”按钮，或直接双击该图像文件，该图像即被加入到网页中。在网页中插入图像后我们就可以对图像的各种属性进行设置了。 （2）图像的各种属性设置 1.选