文档库

最新最全的文档下载
当前位置:文档库 > 网页设计实验报告

网页设计实验报告

《网站设计》课程实验设计报告

专业:数学与应用数学

班级:数08~2班

学号:1060208024043

姓名:张娟娟

一、设计目的

⒈本课程的设计目的是通过实践使同学们经历Dreamweaver cs3 开发的全过程和受到一次综合训练,以便能较全面地理解、掌握和综合运用所学的知识。结合具体的开发案例,理解并初步掌握运用Dreamweaver cs3 可视化开发工具进行网页开发的方法;了解网页设计制作过程

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

⒊了解和熟悉网页设计的基础知识和实现技巧。

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

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

⒍增强动手实践能力,进一步加强自身综合素质。

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

二、课程设计题目

玩转西安

三、需求分析

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

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

⒉客户对网站的性能(如访问速度)的要求和可靠性的要求。

⒊确定网站维护的要求。

⒋网站的实际运行环境。

⒌网站页面总体风格以及美工效果。

⒍主页面和次级页面数量等。

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

⒏各种页面特殊效果及其数量(如flash 等)。

⒐项目完成时间及进度。

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

我们选做的主题是旅游交通,并且选定题目为“玩转西安”,其目的是做一个简单的网站,介绍西安旅游的各个方面,提供一定的资讯信息。

四、技术分析

(一)建立布局

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

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

⒉使用背景图片:选中该项,按浏览可以插入一幅准备好的图片作为表格的

背景,因为图片是以平铺的形式作为表格背景,所以表格大小和图片尺寸都要控制好。

(二)网页中的图像

图像传输是WWW 的真正魅力所在,它与文字相比具有显著的优点:一是

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

⒈在网页中插入图像

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

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

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

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

⑷.在“选择文件”对话框的文件列表中选择某个图像文件,然后单击“确定”按钮,或直接双击该图像文件,该图像即被加入到网页中。在网页中插入图像后我们就可以对图像的各种属性进行设置了。

⒉图像的各种属性设置

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

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

①.设定图像边框粗细:在“外观”选项卡的“布局”栏里可以根据需要定义

图像的边框,也可以定义边框值为“0”,即无边框。

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

绕方式来实现。在网页中图像的环绕方式有两种:

左环绕:图像在左边,文本在图像的右边进行环绕。

右环绕:图像在右边,文本在图像的左边进行环绕。

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

③.编辑图像大小:在Dreamweaver cs3 中,当在网页中加入一幅图像后,图像大小默认设置为其原来的大小,如果加入的图像太大或太小,或有其他特

别需要,就得调整图像的大小。调整图像大小非常简单灵活,只要你选中加入

的图像,用鼠标左键拖动图像边框,可任意调整图像的宽度和高度直到达到你

满意的尺寸。

④.设置图像缩放比例:网页设计的一个重要原则就是网页的兼容性,对于不同的浏览器或者不同的分辨率,不管是800×600 的窗口,还是1024×768

的窗口,网页都要能正常的显示。设置图像缩放比例就是将图像设置为大小可以按比例变化,与浏览器的大小成一固定比例,这样在不同大小的浏览器窗口里图像都能正常的显示外观。设置图像缩放比例的步骤如下:

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

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

⒊怎样编辑网页中的图像

在Dreamweaver cs3 中,可以使用“图片”工具栏中的各种工具对网页中的图像进行编辑,编辑功能主要有:图像旋转和翻转、剪裁、图像淡化、凹凸效果等等。另外,为了使图片更符合要求,我们还在photoshop cs3 中队所用的图片进行了处理,使得图片看起来更加精细美观,符合我们的主题要求。

⒋使用背景图像

使用背景图像与使用背景色不同,使用背景色只将网页的背景用某种颜色

填充,而使用背景图像则是将网页的背景用图像平铺。这样做可以使制作的网页更美观好看。网页中使用背景图像的具体步骤如下:

⑴.新建一个空白网页。

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

⑶.开“背景”选项卡。

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

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

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

⒌插入flash 动画

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

⒍设置鼠标经过图片,进行图片交互

再插入图片的下拉菜单中有一项是“鼠标经过”,点击这一项,会弹出一

个对话框,在对话框中可以设置鼠标经过前的图片和经过时的图片,选择“确定”即可。

⒎设置链接

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

⒏设置图片滚动

使图片在页面连续滚动出现,其中某页代码如下:

style="OVERFLOW: hidden; WIDTH: 998px; COLOR: #ffffff">

 

六、创意分析

西安,古称“长安”,是举世闻名的世界四大文明古都之一,居中国古都之

首,是中国历史上建都时间最长、建都朝代最多、影响力最大的都城,是中华民族的摇篮、中华文明的发祥地、中华文化的代表。西安,独特的古今融合的完美城市。因此设计网站主要为浏览者展现西安魅力。为此,我们将这次网页设计的主体定位在古典上,历史文化和社会风俗采用同一个背景颜色,是肃穆的古木色又结合现代建筑图片,将西安的魅力展现在浏览者面前。

各个页面都有导航条设计、使浏览者在任意页面均可到达他想到达的景点介绍和交通住宿情况页面,增强了页面的友好程度。采用布局模式,对各个方面进行控制网站首页:

景点介绍首页:

美食首页:

七、制作过程及要点

我们组进行了分工合作,每个人制作两个方面的内容。

XX 负责网站首页和风俗文化部分的制作。主要从西安概况、历史沿革、气候环境、经济状况、行政区划五部分进行介绍。

XXX 负责美食和旅行社部分,美食部分主要对西安的十大著名小吃进

行了介绍,比如有羊肉泡馍,灌汤包子、黄桂稠酒、肉夹馍、饺子宴等,

再分页面中分别对其进行了详细的介绍,其中包括做法、特色、历史特色

等方面。另外,还介绍了一些饮食小常识和西安饮食新闻,其中饮食小常

识用的是内部链接,西安饮食新闻用的是外网连接,可以为读者提供更多

的信息。考虑到世界杯的举行,在美食部分还添加了世界杯美食的页面,

选用外网连接,向大家介绍更多的南非美食,让大家一饱眼福。

旅行社部分使用的是框架结构,主要介绍了四个西安旅行社:西安天

马国际旅行社、西安中国国际旅行社、西安凯莱旅行社、中国康辉西安国

际旅行社。分别介绍了他们的基本情况,包括他们的公司运转情况、服务

质量,好评度以及联系方式和地址等情况。

XX 负责风景和交通住宿部分。景点介绍部分对其大唐芙蓉园、大雁塔、华清池、半坡遗址、兵马俑等西安著名景点详细介绍;以及翠华山、高冠

瀑布、临潼历山南五台、秦岭九龙潭、黑河深林公园、野生动物园、终南

山、自然风景区设置为链接外网,进行详细介绍。

交通住宿部分对景点介绍部分中的到达路线及其附近住宿的酒店、

宾馆进行介绍。其中到达路线对公交路线、价格进行介绍,部分页面

增加了更多交通指南链接、温馨提示内容;交通住宿部分增加了在线

预订、更多景点附近介绍链接。

八、参考资料

《网页设计技术教材》童爱红清华大学出版社2005 年1 月

《网页设计与制作(CS4 中文版)》唐有明清华大学出版社2010 年4 月《网页设计与制作》蔡伯峰清华大学出版社2010 年5 月

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

九、设计总结

通过这次网页课程设计激发学习兴趣,调动学习的自觉性,自己动脑、动手,动口,运用网络资源,结合教材及老师的指导,通过自身的实践,创作出积

聚个人风格、个性的个人网页。总体来说,整个学期的学习过程,我学会了很多知识,在设计网页的这几天里,我充分利用了这次设计的机会,全心全意投入到网页世界,去不断的学习,去不断的探索;同时去不断的充实,去不断的完善自我,在网络的天空下逐渐的美化自己的人生!

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

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