以《酒店预定》为例的网页设计毕 业 论 文（设计）.doc

1、 目 录摘要（3）Abstract（4）第一章 引言（5）1.1 简述（5）1.2 什么是网页设计（5）1.3 课题来源（5）第二章 素材的选择及采集（7） 2.1 设计的选题（7） 2.2 材料的采集（7） 第三章 网页的结构图 （10）第四章 制作前的准备工作 （11） 4.1 定义的方法 （11） 4.2 基本设置 （12）第五章 网页制作过程 （18） 5.1 网页首页框架的制作 （18）5.2 部分子网页展示 （19）5.3 建立超链接 （24）5.4 检查整个网页 （25）第六章 结束语（27）致谢（29） 参考文献（30） 摘 要在信息技术飞速发展的今天，人们获取信息的方式更多是

2、来源于互联网，互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、经济、生活等各个方面发挥着重要的作用。网页设计伴随着网络的快速发展而快速兴起，作为上网的主要依托，由于人们使用网络的频繁而变得非常的重要。网页讲究的是排版布局，其功能主要就是提供一种形式给每个上网者，让他们能够了解网站提供的信息。而吸引浏览用户的则是视觉效果出色、信息量丰富、使用起来便捷的网页，所以网页设计尤为重要。本文从网页设计的角度出发，介绍一些设计中要素和技巧，例如框架、层布局、网页特效的运用等。本文以网页设计为开发过程，合理利用中各种图标的功能进行整个网页的设计，并以北京好订网（酒店预定）为例，将酒店预定功能

3、具体运用到设计中去，另外本文简单介绍了网页设计发展的背景及它们的主要功能。本设计以Dreamweaver为工具，Dreamweaver是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。是唯一提供视觉化编辑与原代码编辑同步的设计工具。关键词：网页设计 Dreamweaver 视觉化编辑 原代码编辑AbstractIn the rapid development of information technology today, the

4、 way people get information from the Internet, the Internet is more becomes people quickly get, release and transmit information important channel, it in people politics, economy, life aspects played an important role. Web design with the rapid development of network and rapid rise, as the main rely

5、 on, because people use the Internet frequent and become very important. Web cultured is typesetting layout, its main function is to provide a form to give each Internet, enabling them to understand the information provided on this site. And attract browsing user is excellent, information-rich visua

6、l effect, use rise convenient page, so web design especially important. This article from the Angle of web page design is introduced, and some design elements and skills, such as frame, layer layout etc. Based on web design for the development process, reasonable use of various icon of function, the

7、 design of the entire page in primary school Chinese text the alamo as an example, the function of the specific application to design, in addition the paper simply introduces the development of web page design background and their major functions. This design to Dreamweaver for tools, Dreamweaver is

8、 the MACROMEDIA company development collection webpage making and management website at a suit wysiwyg page editor, it is the first set of aimed at professional web designer specific development visualization web development tool, using it can easily produce cross platform limit and across browsers

9、limit dynamic web pages. Is the only provide Roundtrip HTML editor, visualizations with the original code editor synchronization design tools. Keywords: web design Dreamweaver visualization edit the original code editor 第一章 引言1.1简述在信息技术飞速发展的今天，人们获取信息的方式更多是来源于互联网。而吸引浏览用户的则是视觉效果出色、信息量丰富、使用起来便捷的网页，所以网页

10、设计尤为重要。互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、经济、生活等各个方面发挥着重要的作用。网页设计伴随着网络的快速发展而快速兴起，作为上网的主要依托，由于人们使用网络的频繁而变得非常的重要。Dreamweaver是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH，专业网页图像设计软件FIREWORKS，并称为“网页三剑客”, 它是在网页设计与制作领域中用户最多、应用最广、功能最强大的软件，它集网页设计、网站开发和站点管理功能于一身，具有可视化、支持多平台和跨浏览器的特性，是目前网站设计、开发、制作的首选工具。1.2 什么是网页设

11、计网页设计就是根据行业不同需求不同，设计客户网站样式，是企业向用户和网民提供信息(包括产品和服务)的一种方式,是企业开展电子商务的基础设施和信息平台，离开网站（或者只是利用第三方网站）去谈电子商务是不可能的。企业的网址被称为“网络商标”，也是企业无形资产的组成部分，而网站是INTERNET上宣传和反映企业形象和文化的重要窗口1.3 课题来源 在信息技术飞速发展的今天互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、经济、生活等各个方面发挥着重要的作用。网页设计伴随着网络的快速发展而快速兴起，作为上网的主要依托，由于人们使用网络的频繁而变得非常的重要。Dreamweaver是唯一提

12、供视觉化编辑与原始码编辑同步的设计工具。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。甚至可以排序或格式化表格群组，Dreamweaver 支援精准定位，利用可轻易转换成表格的图层以拖拉置放的方式进行版面配置。所见即所得 Dreamweaver成功整合动态式出版视觉编辑及电子商务功能，提供超强的支援能力给Third-party厂商，包含ASP， Apache，BroadVision， Cold Fusion，iCAT， Tango与自行发展的应用软体。当您正使用Dreamweaver在设计动态网页时，所见即所得的功能，让您不需要透过浏览器就能预览网页。综合以上Dreamweave

13、r的优点，我以工作过程中所做的北京酒店预定为例，具体运用Dreamweaver的其中一些功能，制作了本毕业设计。第二章 素材的选择及采集 2.1设计的选题选题是十分重要的一个步骤，一个积极向上的课题十分必要，这样在展示了所掌握专业的知识的同时，也同时影响着我们的人生观和价值观。因此我选择了小学五年级的语文课本上的一篇课文白杨，白杨树从来就这么直。哪儿需要它，它就在哪儿很快地生根发芽，长出粗壮的枝干。不管遇到风沙还是雨雪，不管遇到干旱还是洪水，它总是那么直，那么坚强，不软弱，也不动摇。希望在展示作品的同时，能够对人们产生一定的积极影响。2.2 材料的采集上网搜集了制作网页时所需要的白杨树的图片以

14、及戈壁滩的图片，并用图像处理软件加以处理，得到合适的图片素材。白杨总是那么直 这幅图 展示了白杨的直的特点这幅图则显示了白杨生长的戈壁滩恶劣的环境另外运用网页设计的功能，以及设计的需要，我筛选了声音素材，在设计中在代码编辑窗口添加了声音，使得网页声貌俱全。下面是在设计过程中通过代码窗口插入背景音乐。切换至代码窗口，在网页中添加背景音乐第三章 网页的结构图首页课文白杨树5个设计者简介第四章 制作前的准备工作在正式开始制作网页之前，最好先定义一个新网站，这是为了更好地利用站点窗口对站点文件进行管理。4.1 定义的方法方法一：在站点窗口下拉菜单选最后一项管理站点，如下图此时会弹出一个新的对话框，点击

15、“新建”按钮就可以定义一个新网站，如果日后需要对旧网站重新定义，可以在左边的网站列表中选中你需要重新定义的网站，然后点击“编辑”即可。方法二：选择菜单“站点”“新建站点”选项。（如图所示）4.2 基本设置在接着看到的对话框中，要进行以下简单的设置： 网站名称：为你的网站起一个名字，这个名字只起着识别的作用，与网站发布后真实的名字无关，例如这里的名字是：“我的网站”，而实际上我的网站叫“白杨”；如果不需要什么特殊的服务器技术，就选“否”这项。本地根目录：设置网站在本地硬盘的位置，点击后面的文件夹图标可以选择硬盘的任意目录作为存放网站文件的目录； 可以任意选择你想要将文件存储在服务器上的位置，方法

16、同上一步本地根目录的建立相同。选择默认的状态即可。完成后，回到站点窗口，就可以看到如下类似的画面可以看到，“我的网站”的名称已经出现在站点窗口了，因为是新建的一个站点，所在在本地目录看到的一片空白。站点定义完毕之后，就可以正式制作属于你自己的网页了。第五章 网页制作过程5.1 网页首页框架的制作要制作一个完整的网页，不仅要取材到位，还要合理排版。将网页的的所有功能发挥到最佳。网页的大致框架如下图：课文背景是灰色，采用黑色字体，运用色彩的搭配，使得课文清晰呈现总的框架内容包括了课题课文、白杨树图片、戈壁滩、课文重点词句、本课生词、课后巩固、课后作业以及设计者简介。在设计的同时要顾及到课题的实用性

17、，使得欣赏的同时取得积极的影像效果。从这个主页面可以进入其下的各个子网页。5.2 部分子网页展示 kehougonggu.html 在此网页制作中，我运用了特点是其中包含了滚动的文字 鼠标移到文字上，文字停止滚动，鼠标移开，文字继续滚动，此特效在代码窗口即可实现，代码如下图所示： shengci.html 在此网页中制作了沿曲线路径移动的动画制作方法：窗口时间轴 调出时间轴面板，将所要移动的层拖至时间轴面板内，然后点击修改时间轴录制层路径，鼠标拖动层任意移动。 zuoye.html 在此网页中，了表单包括文本域、下拉列表框、复选框，所有都可以通过表单工具栏中的图标实现，如图以单选按钮为例点击表

18、单中 单选按钮图标，弹出单选按钮对话框如图：名称填默认即可，标签属性中填写单选的内容，值属性中填不同的数值，如第一行填0，第二行填1等，点击确定即可，其他表单类似设置。 ziwojianjie.html此网页中制作了个拼图 运用了行为面板的一些行为如拖动层、显示-隐藏层等。在工作区右边标签检查器中行为中设置点击，弹出行为对话框，如下图：选择显示隐藏层，弹出如下图对话框：选中所要隐藏或者显示的层，然后点击隐藏或者显示即可。5.3 建立超链接超级链接（Link），简称链接，是页面与页面之间一个单向的关联关系。通过点击链接，我们可以从一个页面跳到另一个页面。我们可以在文字、图片建立链接。本文主要以文

19、字建立超链接。在页面中选取需要建立链接的文字，如下9图：在属性面板的连接（Link）一项，填写链接地址，当浏览者点击该链接的时候，浏览器就回跳转到该页面，例如这里填写的是baiyangtu.html关于链接的提示1、如果要链接到一个E-mail地址，则在“链接”处填写：“mailto:地址”，例如mailto:dnkt，那么点击该链接的时候，就回打开默认的E-mail程序，例如Outlook，发送E-mail到dnkt这个地址。2、如果链接到浏览器无法打开的文件，例如exe、Zip等文件，那么浏览者在点击这个链接的时候，就会弹出对话框，询问是将文件保存到硬盘的什么地方，这就实现了文件下载的功能

20、5.4 检查整个网页整个网页制作完成后，进行最后的检查，从主页点击进入各个网页，仔细观察并检查是否完善。第六章 结束语制作的整体效果如图所示：在做毕业设计的近几个月时间是我学生生涯中最有价值的一段时光。这里有治学严谨而不失亲切的老师，有互相帮助的同学，更有向上、融洽的学习生活氛围。借此论文之际，我想向所有人表示我的谢意。首先感谢老师。本论文是在老师的指导下修改完成的。在此，要对他们的细心帮助和指导表示由衷的感谢。在这段时间里，我从他们身上不仅学到了许多的专业知识，更感受到了他们工作中的兢兢业业，生活中的平易近人。此外，他们严谨的治学态度和忘我的工作精神值得我去学习。非常感谢我的同学，毕业设计中

21、，他的指导给予了我极大的帮助，使我对整个毕业设计的思路有了总体的把握，并耐心的帮我解决了许多实际问题，使我有了很大收获。感谢我的朋友们，过程中提出了许多建设性意见，并给我解决了一些专业性问题。感谢三年来传授我知识的老师们，更要感谢我的家人对我学业上的支持和鼓励，感谢所有关心帮助过我的人。同时感谢大学，感谢焦作师专。总之，在以后的学习生活中我将以加倍的努力作为对给予我帮助的学校、老师及同学们的回报。致谢最后，感谢在制作这篇论文中所应用到的网络中提供的素材，还有那些帮助我的同学们以及指导老师提供的意见。 参考文献：1Dreamweaver MX2004 完美网页设计（实战技巧篇）孙素华 编著 中国青年出版社2Dreamweaver 网页设计案例教程 沈大林主编 中国铁道出版社