南京信息工程大学滨江学院

《网页制作》课程设计报告

设计题目： 专 业： 学生姓名： 学 号 日期：年月日 指导教师：

计算机系制

20xx年12月

目 录

一 设计目的 .....................................................3

二、设计内容 ...................................................3

三、课程步骤 ...................................................3

四、需求分析 ...................................................4

五、技术分析 ...................................................5

六、制作过程及要点 .......................................7

七、 ....................................................................9

八、参考资料 .................................................12

九、设计总结 .................................................12

一 设计目的

1、了解网页设计制作过程；

2、了解和熟悉网页设计的基础知识和实现技巧；

3、通过实践，经历Dreamweaver cs3开发的全过程和受到一次综合训练， 以便能较全面地理解、掌握和综合运用所学的知识；

4、通过设计达到掌握网页设计、制作的技巧；

5、结合具体的开发案例，理解并初步掌握运用Dreamweaver cs3可视化开 发工具进行网页开发的方法；

6、根据题目的要求，给出网页设计方案，可以按要求，利用合适图文素材 设计制作符合要求的网页设计作品；

7、熟练掌握Photoshop cs3、Dreamweaver cs3等软件的的操作和应用；

8、增强动手实践能力，进一步加强自身综合素质；

9、学会和团队配合，逐渐培养做一个完整项目的能力。

二、设计内容

用dreamweaver，photoshop，flash等软件设计一个网页。

三．设计步骤

1．资料的搜集。

2．熟悉制作软件。

3．构建站点框架。

打开Dremweaver后第一步便是新建站点

4．设计主页。

5．实现网页间的链接，链接的过程其实很简单，主要是把要链接的文字选择 在选择工具栏的链接按钮最后选择自己要链接的网页单击确定便可以了。

6．向静太网页插入动态效果。

（一）页面的设计方面

网页设计跟学习别的东西一样，也需要兴趣，所谓的兴趣也不是三分钟热度，是一种执著。学习网页设计需要耐心，如果没有耐心，就学不好网页设计，应为当你碰到一个问题时，如果不能立刻得到问题的答案，你可能需要很长时间去解决，我就碰到过一个问题，用了很长时间才解决。学习网页设计需要坚持，坚持不断的学习，因为设计网页的软件在不断的更新，因此我们要不断的学习。并且学习网页设计不要掉入技术的陷阱，如果你的网页设计技术一流，并且对软件的掌握程度已经达到一定水平，但是你设计的网页确不堪目睹，这是因为网页设计是介于平面设计和编程技术两者之间的"边缘科学."不仅涉及到美学,心理学,平面构成,色彩搭配等平面设计的方面的知识,还涉及到html,javascript,css,asp,php等编程语言技术方面的知识.只有综合运用多种知识,才能设计出视听特效,动感十足,富于个性的web页面,才能全面展现互联网这一新型媒体的独特魅力和多维空间的超强功能.并且我认为网页设计应该注重实用性，因为它是让人浏览的，是用户可以抚摸，可以评论，可以交互的。因此我提倡简单的美。

（二）网页视觉效果

视觉形象识别即我们通常所说的VI（VisualIdentity），与BI一起用于深化表现企业理念，同时也受到BI的影响。所谓视觉形象识别，就是指能够被目标客户通过视觉来认知与企业相关的一切事物，从最基础的企业标志、吉祥物、标准色到企业日常业务中的信纸、服装、名片等等，在将其系统化以后就形成了企业的视觉形象识别系统。视觉形象识别系统在整套CIS中处于最表层的位置，其中所有的设计都将与目标客户发生直接的接触。

（三）网页的整体布局和导航

网页的布局通常指的是网页的整体架构，说的通俗一点就是排版。如何突出最重要的内容，即让用户眼就看到这个网页所想要传达的信息。这一点至关重要。在大多数做的比较成功的网页中，一个共同的特点就是网页的整体架构十分的清晰明了，便于用户浏览，网页布局大致可分为“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、Flash型、变化型

网页布局是主要考虑以下几点：

1、首先要考虑整个网页的长和宽，以及长度和宽度之间的比例。

2、其次就应该考虑导航条的设置了。

3、正文的框架设置（横向因素和纵向因素交错）

（四）网页中文字、图像

图象我利用网上搜索和自己所学过的banner进行处理,这样做起来节约了很多时间。

四、需求分析

选定主题，确定题目之后，在做整个网站之前对网站进行需求分析。首先，做好需求调研。调研方式主要是上网查阅资料，在图书馆里翻阅相关书籍。调研内容如下：

1、 网站当前以及日后可能出现的功能需求。

2、

3、

4、

5、 客户对网站的性能（如访问速度）的要求和可靠性的要求。 确定网站维护的要求。 网站的实际运行环境。 网站页面总体风格以及美工效果。

6、 主页面和次级页面数量等。

7、 内容管理及录入任务的分配。

8、 各种页面特殊效果及其数量（如flash等）。

9、 项目完成时间及进度。

然后，调研结束之后对整个网站进行功能描述，并对网站进行总体规划，接着逐步细化。

五、技术分析

(一)建立布局

在这次的网页设计中用到大量的布局，所以怎么样建立布局是关键。Dreamweaver cs3是大多数人设计网页的称手兵器，也是众多入门者的捷径。特别是其在布局方面的出色表现，更受青睐。大家都知道，没有表格的帮助，很难组织出一个协调合理的页面。

1.点击“ALT+F6”键，进入布局模式，插入布局表格。建立一个大概的布局。

2.使用背景图片：选中该项，按浏览可以插入一幅准备好的图片作为表格的背景，因为图片是以平铺的形式作为表格背景，所以表格大小和图片尺寸都要控制好。

（二）网页中的图像

图像传输是WWW的真正魅力所在，它与文字相比具有显著的优点：一是直观，人眼观看图像时接受信息的速度远远超过观看文字时接受信息的速度；二是能更清楚地表达细节内容。正是由于这些优点，所以在进行网页设计时图像很受欢迎。如果网页做得像一幅风景画，浏览者一定会流连忘返（如果图片很大，效果会适得其反）。 图像文件的格式有几十种，如GIF、JPEG、BMP、EPS、PCX、PNG、FAS、TGA、TIFF、WMF等，现在Internet Explorer和Netscape支持的、最常用的图像格式是GIF、JPEG和BMP。

（1）在网页中插入图像

利用Dreamweaver cs3可以方便地在网页中插入图像，还可以设置图像边框、大小、和位置，并且可以直接对图像进行编辑。在网页中加入图像的操作非常简单：

1.新建一个空白网页，把光标定位在网页的开始位置。

2.打开“工具”菜单，选择“图片”菜单项，在子菜单中选择“来自文件”菜单项，或者单击工具栏中的图片工具图标，弹出一个“图片”对话框。

3.在此对话框中单击“浏览”按钮，出现一个“选择文件”对话框。

4.在“选择文件”对话框的文件列表中选择某个图像文件，然后单击“确定”

按钮，或直接双击该图像文件，该图像即被加入到网页中。在网页中插入图像后我们就可以对图像的各种属性进行设置了。

（2）图像的各种属性设置

1.选中所插入的图片，单击鼠标右键，弹出一个快捷菜单，在菜单中选择“图片属性”菜单项，出现一个“图片属性”对话框.

2.打开“外观”选项卡。

(1)设定图像边框粗细：在“外观”选项卡的“布局”栏里可以根据需要定义图像的边框，也可以定义边框值为“0”，即无边框。

(2)设置图像环绕方式：一般情况下一幅图像只能与一行文字处在同一高度，但有时需要将图像和文字分开，且两者互不影响。比如在网页左边插入一幅图像，要求右边的文字就像没有图像时可以多行输入，这就要通过设置图像的环绕方式来实现。在网页中图像的环绕方式有两种：

①左环绕：图像在左边，文本在图像的右边进行环绕。

②右环绕：图像在右边，文本在图像的左边进行环绕。

在“外观”选项卡的“布局”栏中打开“对齐方式”下拉列表框，选择“左”选项，并单击“确定”按钮，图像就被设置为左环绕方式，同样，如果选“右”，图像就被设置为右环绕方式。

(3)编辑图像大小：在Dreamweaver cs3中，当在网页中加入一幅图像后，图像大小默认设置为其原来的大小，如果加入的图像太大或太小，或有其他特别需要，就得调整图像的大小。调整图像大小非常简单灵活，只要你选中加入的图像，用鼠标左键拖动图像边框，可任意调整图像的宽度和高度直到达到你满意的尺寸。

(4)设置图像缩放比例：网页设计的一个重要原则就是网页的兼容性，对于不同的浏览器或者不同的分辨率，不管是800×600的窗口，还是1024×768的窗口，网页都要能正常的显示。设置图像缩放比例就是将图像设置为大小可以按比例变化，与浏览器的大小成一固定比例，这样在不同大小的浏览器窗口里图像都能正常的显示外观。设置图像缩放比例的步骤如下：

1.选中网页中的图像，单击鼠标右键，在弹出的快捷菜单里，选择“图像属性”菜单项，弹出一个“图像属性”对话框.

2.在“大小”栏中选中“指定大小”复选框，同时选中“宽度”和“高度”下面的“百分比”单选按钮，然后在“宽度”和“高度”栏里输入想显示的比例，单击“确定”完成设置。外还可以在“外观”选项卡的“水平间距”和“垂直间距”栏里进行设置，水平间距是指图像与周围元素在水平方向的间距，以象素为单位；垂直间距指图像与周围元素在垂直方向的间距。

（3）怎样编辑网页中的图像

在Dreamweaver cs3中，可以使用“图片”工具栏中的各种工具对网页中的图像进行编辑，编辑功能主要有：图像旋转和翻转、剪裁、图像淡化、凹凸效果等等。

另外，为了使图片更符合要求，我们还在photoshop cs3中队所用的图片进行了处理，使得图片看起来更加精细美观，符合我们的主题要求。

（4）使用背景图像

使用背景图像与使用背景色不同，使用背景色只将网页的背景用某种颜色填充，而使用背景图像则是将网页的背景用图像平铺。这样做可以使制作的网页更美观好看。网页中使用背景图像的具体步骤如下：

1.新建一个空白网页。

2.单击鼠标右键，弹出的快捷菜单里选“网页属性”，弹出“网页属性”对话框.

3.开“背景”选项卡。

4.在“背景”选项卡的“格式”栏中选中“背景图片”复选框，然后单击下面的“浏览”按钮，出现一个“选择背景图片”对话框。

5.在“选择背景图像”对话框中单击“浏览文件”按钮，出现一个“选择文件”对话框。

6.在“选择文件”对话框的文件列表中选择图像文件，单击“确定”按钮。 这样，所选图片将作为整个网页的背景，如果在第4步时同时选中“水印”复选框，背景图片将显示为特殊的水印效果，当网页滚动时，背景不动，只有网页内容滚动，产生一种透明层的效果，非常吸引人。

（5）插入flash动画

关于 Flash 视频 使用 Dreamweaver 中的“插入 Flash 视频”命令，可将 Flash 视频内容插入 Web 页面，而无需使用 Flash 创作工具。该命令可以插入 Flash 组件；当您在浏览器中查看它时，它显示所选择的 Flash 视频内容以及一组播放控件。

（6）设置鼠标经过图片，进行图片交互

再插入图片的下拉菜单中有一项是“鼠标经过”，点击这一项，会弹出一个对话框，在对话框中可以设置鼠标经过前的图片和经过时的图片，选择“确定”即可。

（7）设置链接

选中图片或者文字，在下面的链接属性中输入所要连接到的地址，同时，下方的目标属性被激活，输入blank设置成在新窗口中打开网页。我们设置了链接本站点的网页页面，同时也连接了外网，使得大家访问页面时能够查询更多详细的信息，方便用户查询。

（8）设置图片滚动，使图片在页面连续滚动出现

六、制作过程及要点

八、参考资料

《网页设计技术教材》 童爱红 清华大学出版社 20xx年1月 《网页设计与制作（CS4中文版）》 唐有明 清华大学出版社 20xx年4月 《网页设计与制作》 蔡伯峰 清华大学出版社 20xx年5月

《网页设计技术》 顾晓燕 清华大学出版社 20009年12月

九、设计总结

通过这次网页课程设计激发学习兴趣，调动学习的自觉性，自己动脑、动手，动口，运用网络资源，结合教材及老师的指导，通过自身的实践，创作出积聚个人风格、个性的个人网页。总体来说，整个学期的学习过程，我学会了很多知识，

在设计网页的这几天里，我充分利用了这次设计的机会，全心全意投入到网页世界，去不断的学习，去不断的探索；同时去不断的充实，去不断的完善自我，在网络的天空下逐渐的美化自己的人生！

做好页面，并不是一件容易的事，它包括个人主页的选题、内容采集整理、图片的处理、页面的排版设置、背景及其整套网页的色调等很多东西。本次课程设计不是很好，页面过于简单，创新意识反面薄弱，这是我需要提高的地方。需要学的地方还有很多，需要有耐心、坚持，不断的学习，综合运用多种知识，才能设计出好的web页面。

总体来说，通过这次的对网页课程设计，有收获也有遗憾、不足的地方，但我想，我已经迈入了网页设计的大门，只要我再认真努力的去学习，去提高，凭借我对网页设计的热情和执着，我将来设计出的网页会更加专业，更完善。感谢老师、同学在这次课程设计中给我的帮助、指导。

第二篇：网页设计实验报告要求

实验一、认识HTML

一、实验目的：了解HHTML中涉及的技术。

HTML语言的组成及特点，学会利用HTML语言编辑网页。

了解CSS。

了解网站开发的流程。

二、实验内容

1.参考书1.2.1节，利用记事本实现唐诗实例。

2.利用CSS对唐诗进行修饰。

3.请写出以下效果的HTML代码（包括分行及分段效果）

4.上网浏览网站，并选择其中一个网站为目标，撰写网站开发报告，要求有以下内容：

• 此网站URL是什么
• 此网站的目标是什么，网站设计者是如何来实现的
• 此网站的首页是如何设计的，你有没有改进意见
• 此网站的导航如何设计，你有何改进意见

请完成以上内容，并将结果写入实验报告。

实验二、Dreamweavor应用

一、实验目的：掌握如何在Dreamweaver中进行网页编辑；

掌握Dreamweaver中站点的设置；

掌握网站空间的申请及网页的上传。

二、实验内容

1.将实验1中的内容，利用DreamWeavor完成，并注意在拆分视图下，观察它是如何将格式操作变成HTML代码的。

2.按书中要求，制作唐诗宋词网站的首页。

3.在Dreamweaver中设置站点，并为唐诗宋词网站规划网站文件夹结构。

4.上网搜索免费个人网站空间，并将所制作的网页上传，并测试网是否能够正常访问。

请完成以上内容，并将结果写入实验报告。

实验三、文本修饰与超链接

一、实验目的：掌握常用的文本与段落修饰标记;

掌握超级链接标记及其设置；

二、实验内容（参见P68）

1.制作完成唐诗宋词精选网站，至少完成3个页面。

2.为已经完成的页面设置格式及超链接。

请完成以上内容，并将结果写入实验报告。

实验四、CSS应用

一、实验目的：掌握CSS四种选择器；

掌握内部样式表与外部样式表的应用；

掌握利用外联式样式表统一网站风格；

掌握利用Dreamweaver建立与编辑CSS样式。

二、实验内容

1.将上次实验课中完成的网站，利用CSS进行相应的修饰。注意4种样式选择器如何分别应用到网页中。

2.利用外部样式表对网站的风格进行统一。

请完成以上内容，并将结果写入实验报告。

实验五、在网页中使用图像

一、实验目的：掌握网页制作中常的三种图像格式；

掌握图像的格式设置；

掌握利用图像处理软件（FireWorks）进行图像的基本处理。

二、实验内容

1.上一些常网站，了解网站上使用了哪些格式的图像文件，并比较它们的特点。

2.完善“唐诗宋词网精选”网站，要求必须使用鼠标经过图像，网站相册，图像映射等效果。

3.使用FireWorks对图像进行一些常用的操作，这些操作必须包括：改变图像 的大小，像图裁剪，以不同格式将图像优化并导出， 羽化，按路径排列文本，GIF动画。

思考题

网页制作中常用的图像格式有哪些，它们各有何优缺点。

请完成以上内容，并将结果写入实验报告。

实验六、在网页中使用多媒体

一、实验目的：掌握网页制作中常见的多媒体类型及特点；

掌握插入媒体的标签及相应属性设置；

掌握能够利用网上的软件进行媒体格式的转换。

二、实验内容

1.上一些常网站，了解网站上使用了哪些格式的多媒文件，并比较它们的特点。

2.完善“唐诗宋词网精选”网站，要求有声音、视频。

3.参考书上的步骤制作Flas按钮，并在网站导航栏中应用。

4.在网上搜索视频转换软件，将网上下载的AVI视频转换成Flash格式，插入到网页中，并比较 转换后的文件大小是否发生了变化 。

（可以在百度中搜索： “AVI2Flash　转换”其中2表示to的意思，然后在搜索结果中看是否有相应的转换软件，并下载使用。）

思考题

网页制作中常用的多媒体格式有哪些，它们各有何优缺点。

请完成以上内容，并将结果写入实验报告。

实验七、页面布局

一、实验目的：掌握网页制作中页面的而已技术 ：表格布局，CSS布局，框架布局。

二、实验内容

1.参考P152内容，分别利用表格及CSS技术完成书上的的布局方式。

2.在百度中搜索网页模板，查看已经做好了的经典模板，并进行评价。

3.利用前面学到的知识，完成“个人主页”网站的首页。

4.个人主页完成后请上传到服务器上，以便检查。并请利用1个月的时间，将主页的其余内容完成。

思考题

网页制作中常用的布局方式有哪些，请比较它们的异同。

请完成以上内容，并将结果写入实验报告。

实验八、表单的应用

一、实验目的：掌握网页制作中页最常用的交互工具：表单元素的使用

二、实验内容

1.参考P172页中图8.32，完成问卷调查页面的设计。

2.继续将个人主页的内容完成。

思考题

网页制作中常用表单对象有哪些，它们各有何不同？

请完成以上内容，并将结果写入实验报告。