Web网页设计实验报告.doc

... ... WEB 系统开发综合实验报告题目红尘客栈网上订房页面专业计算机科学与技术(信息技术及应用) 班级计信 2班学生蒋波涛重庆交通大学 2013 年... ... 目录一、设计目的................................................. 3 二、设计题目................................................. 3 三、结构设计................................................. 3 四、技术分析................................................. 4 五、设计过程................................................. 7 六、实验心得............................................... 10 七、实验总结............................................... 11 ... ... 一、设计目的在 飞速发展的今天,互联网成为人们快速获取、发布和传递信息的重要渠道,它在人们政治、经济、生活等各个方面发挥着重要的作用。因此网站建设在 Interne t 应用上的地位显而易见,它已成为政府、企事业单位信息化建设中的重要组成部分,从而倍受人们的重视。我们当代大学生更是离不开网络给我们带来的好处与便利. 但是, 我们成天浏览的网站网页到底是如何制作的呢? 我想这一点很多同学都没有去深究过. 所以, 这学期我选择了” web 网页设计”这门课,本课程的设计目的是通过实践使同学们经历网页制作的全过程. 通过设计达到掌握网页设计、制作的技巧。了解和熟悉网页设计的基础知识和实现技巧。根据题目的要求,给出网页设计方案,可以按要求,利用合适图文素材设计制作符合要求的网页设计作品。熟练掌握 P hotoshop cs3 、 Dreamweaver cs 等软件的的操作和应用。增强动手实践能力, 进一步加强自身综合素质。学会和团队配合,逐渐培养做一个完整项目的能力。二、设计题目《红尘客栈》三、结构设计选定主题,确定题目之后,在做整个网站之前对网站进行需求分析。首先,做好需求调研。调研方式主要是上网查阅资料,在图书馆里翻阅相关书籍。然后,调研结束之后对整个网站进行功能描述,并对网站进行总体规划,接着逐步细化。我们选做的主题是个人主页,并且选定题目为“红尘客栈”,其目的是做一个简单的网站,介绍酒店概况,提供一定的资讯信息。四、技术分析(一) 建立布局在这次的网页设计中用到大量的布局,所以怎么样建立布局是关键。 Dreamweaver cs3 是大多数人设计网页的称手兵器,也是众多入门者的捷径。特别是其在布局方面的出色表现,更受青睐。大家都知道,没有表格的帮助,很难组织出一个协调合理的页面。 1. 点击“ ALT+F6 ”键,进入布局模式,插入布局表格。建立一个大概的布局。 2. 使用背景图片:选中该项,按浏览可以插入一幅准备好的图片作为表格的背景,因为图片是以平铺的形式作为表格背景,所以表格大小和图片尺寸都要控制好。(二)网页中的图像... ... 图像传输是有显著的优点:一是直观,人眼观看图像时接受信息的速度远远超过观看文字时接受信息的速度;二是能更清楚地表达细节内容。正是由于这些优点,所以在进行网页设计时图像很受欢迎。如果网页做得像一幅风景画,浏览者一定会流连忘返(如果图片很大,效果会适得其反)。图像文件的格式有几十种,如 GIF 、 JPEG 、 BMP 、 EPS 、 PCX 、 PNG 、 FAS 、 TGA 、 TIFF 、 WMF 等,现在 Explorer scape 支持的、最常用的图像格式是 GIF 、 JPEG 和 BMP 。(1 )在网页中插入图像利用 Dreamweaver cs3 可以方便地在网页中插入图像,还可以设置图像边框、大小、和位置,并且可以直接对图像进行编辑。在网页中加入图像的操作非常简单: 1. 新建一个空白网页,把光标定位在网页的开始位置。 2. 打开“工具”菜单,选择“图片”菜单项,在子菜单中选择“来自文件”菜单项,或者单击工具栏中的图片工具图标,弹出一个“图片”对话框。 3. 在此对话框中单击“浏览”按钮,出现一个“选择文件”对话框。 “选择文件”对话框的文件列表中选择某个图像文件,然后单击“确定”按钮,或直接双击该图像文件,该图像即被加入到网页中。在网页中插入图像后我们就可以对图像的各种属性进行设置了。(2 )图像的各种属性设置 1. 选中所插入的图片,单击鼠标右键,弹出一个快捷菜单,在菜单中选择“