《《旅游》个人网站 网页设计毕业论文.docx》由会员分享，可在线阅读，更多相关《《旅游》个人网站 网页设计毕业论文.docx（25页珍藏版）》请在三一文库上搜索。
1、毕 业 论 文（设 计）中文题目：网站的制作旅游个人网站姓 名： 学 号： 专业班级：10计算机教育（2）班指导教师： 提交日期： 中文论文摘要 随着互联网技术的飞速发展，互联网技术逐渐被应用到各行各业中，成为信息化研究开发的焦点。与此同时，越来越多的人希望建立和管理自己的个人网站，本文主要阐述的是如何建设一个个人旅游网站以及在建设中使用到的各种技术和软件。 关键词：网站设计 Dreamweaver 旅游 英文论文摘要 With the high-speed development of electronic computer science and web technology, the i
2、nternet technology has been used gradually in many fields, which has been a focus of researching and exploitation of information industry. At the same time, more and more people hope to build their own web stations, which they must be able to manage by themselves. The below will explain how to build
3、 a personal web station on travel, and introduce some techniques and some kinds of software used in the building process. 关键词：Web building Dreamweaver travel目 录引 言.4一、网站规划相关技术综述 . 4 1.1、社会可行性研究 . .4 1.1.1、本课题的研究意义 . .4 1.1.2、本课题要达到的设计目标 . .5 1.2、网站开发工具的介绍及选择 . 5 1.2.1、网站开发工具Dreamweaver cs3 介绍 . 5 1.
4、2.2 、CSS+DIV 介绍 . 6 1.2.3、 HTML 简介 . .7二、 网站总体设计与规划 . .8 2.1 网站的整体布局及结构 . .8 2.1.1 确定建设网站的主题与规划网站 . .8 2.1.2 网页的整体布局和导航 . .9 2.2 网站画面风格的设计及素材处理 . .9 2.2.1 网页画面风格设计 . .9 2.2.2 网页素材处理技术 . .9 2.2.3 网站栏目介绍及功能简介 . 10三、 网站的详细设计与制作 . 10 3.1 站点 . 10 3.1.1 创建和设计站点 . 10 3.2 网页制作 . 12 3.2.1 创建文件夹 . 12 3.2.2 创建
5、文件 . 12 3.2.3 创建首页. 12 3.2.4 创建主页. 13 3.2.5 创建子页面 . 15四、 网站的调试. 21 4.1 网站系统测试 . 21五、总结 . 21六、参考文献 . 21引 言 随着时代的发展,网站建设越来越接近于一门艺术而不仅仅是一项技术。网页的艺术设计,日益被网站建设者所注重。在目前国内对此领域研究甚少的情况下,作者将网页艺术设计与其他艺术设计形式进行比较,尝试从网页艺术设计的内容、原则和特点等三个方面,对这个新的艺术设计领域进行初步的归纳总结和理论探讨。作者认为网页艺术设计是艺术与技术的高度统一,指出网页艺术设计包含视听元素与版式设计两项内容,以主题鲜明
6、、形式与内容相统一、强调整体为设计原则,具有交互性与持续性、多维性、综合性、版式的不可控性、艺术与技术结合的紧密性等五个特点。在明确了网页艺术设计与网站主题的关系的基础上,提出了“美”和“功能”都是为了更好地表达网站主题这一观点。 网页艺术设计是伴随着计算机互联网络的产生而形成的视听设计新课题,是网页设计者以所处时代所能获取的技术和艺术经验为基础,依照设计目的和要求自觉地对网页的构成元素进行艺术规划的创造性思维活动,必然要成为设计艺术的重要组成部分,并随着网络技术的发展而发展。表面上看,它不过是关于网页版式编排的技巧与方法,而实际上,它不仅是一种技能,更是艺术与技术的高度统一。 网站数量的激增
7、,意味着网络深远的影响力已经越来越多地为人们所共识,网络已经实实在在地为人们带来了财富和知名度。于是,很多单位和个人都开始准备建立自己的网站。不论出于什么目的,所有人都希望自己建立的网站信息量丰富,功能尽可能强大。 自己选择的这个个人的网站设计,首先,能丰富自己的文化知识,在建设网站的过程中能学到实际的网络知识,其次,对与即将毕业的学生,个人网站是一个很好的网络身份证明,可以让别人对自己有更好的了解。最后,有这么一个自己设计和制作的网站,可以证明用有了一定的计算机水平,这样比简单空白的文本式建立要更有说服力。一、网站规划相关技术综述1.1、社会可行性研究1.1.1、本课题的研究意义 个人网站的
8、发展对应了全球范围内知识社会来临的背景。对于中国,这样一个组织机构信息化仍处于初级阶段的国家, 个人网站这种充分发挥个人主导性和积极性的非正式知识管理工具和其深度沟通交流的功能,对于我们国家的知识传播、知识扩散和有效提升组织的学习和创新能力,具有更特殊的意义,随着Internet 在中国的迅速发展,人们日常生活中越来越多地使用这项新的技术来为自己的工作和学习服务。由于,WEB 页面能把文本、图像、声音、动画、视像等多媒体信息集于一体,不但使信息的显示更加生动,而且使信息的浏览更为方便,同时动态的网页能实现网上交易平台、把个人信息反馈方便了朋友与网友之间信息交流,因此许多网友纷纷建设具有自己独特
9、风格的网站以展示自己的个性。也可以让我们更加深刻的了解网页设计这门课,也可以通过设计网页,通过实践老让我们更贴近社会,了解社会的需要,需要什么样的网页,需要什么样的人才,在今后迈向社会奠定了基础。1.1.2、本课题要达到的设计目标 本设计是在学生完成了两年半的课程之后进行的一项综合检验学生学习成果的一次综合的训练，同时也是学生就业前的一次练兵机会，主要的目的有几下方面： 1、加深、巩固学生所学的专业课程的基本理论知识，理论联系实际，进一步培养学生综合分析问题和解决问题的能力。 2、学到一些网页制作的资料收集整合等一系列的实践训练，使学生掌握基本理论知识及其实际业务能力，从而达到提高学生专业的最
10、终目的。 3、利用所学的知识，查阅相关信息，发挥创造力掌握运用等其它应用软件的综合性相关设计的技能，培养其独立设计的综合能力。1.2、网站开发工具的介绍及选择1.2.1、网站开发工具Dreamweaver cs3 介绍 Dreamweaver 是美国Adobe(原Macromedi，2005 年被Adobe 收购)公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。它不仅是优秀的WYSIWYG 编辑器，更是优秀的代码编辑器，有代码加亮，代码提示等丰富功能，提
11、供各种示例代码，并支持Javascript,PHP,ASP,JSP 等多种脚本语言。 Dreamweaver 可以用最快速的方式将Fireworks，FreeHand，或Photoshop 等档案移至网页上。使用检色吸管工具选择荧幕上的颜色可设定最接近的网页安全色。对于选单，快捷键与格式控制，都只要一个简单步骤便可完成。Dreamweaver 能与您喜爱的设计工具，如Playback Flash，Shockwave 和外挂模组等搭配，不需离开Dreamweaver 便可完成，整体运用流程自然顺畅。除此之外，只要单击便可使Dreamweaver 自动开启Firework 或Photoshop 来
12、进行编辑与设定图档的最佳化。 Dreamweaver 是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite 和BBEdit 等主流文字编辑器。帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。甚至可以排序或格式化表格群组，Dreamweaver 支援精准定位，利用可轻易转换成表格的图层以拖拉置放的方式进行版面配置。所见即所得 Dreamweaver 成功整合动态式出版视觉编辑及电子商务功能，提供超强的支援能力给Third-party 厂商，包含ASP， Apache，BroadVisi
13、on，Cold Fusion，iCAT， Tango 与自行发展的应用软体。当您正使用Dreamweaver 在设计动态网页时，所见即所得的功能，让您不需要透过浏览器就能预览网页。梦幻样版和XMLDreamweaver 将内容与设计分开,应用于快速网页更新和团队合作网页编辑。建立网页外观的样版，指定可编辑或不可编辑的部份，内容提供者可直接编辑以样式为主的内容却不会不小心改变既定之样式。您也可以使用样版正确地输入或输出XML 内容。 全方位的呈现利用Dreamweaver 设计的网页，可以全方位的呈现在任何平台的热门浏览器上。对于cascading style sheets 的动态HTML 支援
14、和鼠标换图效果，声音和动画的DHTML 效果资料库可Netscape 和Microsoft 浏览器上执行。使用不同浏览器检示功能，Dreamweaver可以告知您在不同浏览器上执行的成效如何。当有新的浏览器上市时，只要Dreamweaver的网站在下载它的描述档，便可得知详尽的成效报告。 主要功能： 1.业界领先的工具 利用世界级的 Web 设计工具的所有灵活性和强大功能。在“设计”视图中进行像素完美型设计, 在“代码”视图中制作复杂的代码, 或专功一方面的研究。使用您的最佳工作方式工作。 2.集成的工作流 在 Dreamweaver CS3 内设计、开发和维护内容, 同时利用与其他 Adob
15、e 工具 (包括Adobe Flash CS3 Professional、Fireworks CS3、Photoshop CS3、Contribute CS3 及用于创建移动设备内容的全新 Adobe Device Central CS3) 的智能集成。 3.完整的 CSS 支持 发现可视 CSS 工具的优势, 使用这些工具可以轻松地在文件内或文件之间查看、编辑和移动样式, 以及查明您的更改将如何影响设计。借助全新的 CSS 布局加速您的工作流, 并借助全新的浏览器兼容性检查测试您的设计。 4.集成的编码环境 借助代码折叠、颜色编码、行号及带有注释/取消注释和代码片断的编码工具栏, 组织并加速
16、您的编码。应用适用于 HTML 和服务器语言的代码提示。 5.支持领先的技术 利用对领先 Web 开发技术 (包括 HTML、XHTML、CSS、XML、Javas cript、Ajax、PHP、Adobe ColdFusion、ASP、ASP.NET 和 JSP) 的支持。 6.轻松的 XML 使用 XSL 或适合于 Ajax 的 Spry 框架, 快速集成 XML 内容。指向 XML 文件或XML feed URL, Dreamweaver CS3 将显示其内容, 这使您能够将适当的字段拖放到您的页面上。 7.FLV 支持 无需任何 Flash 知识, 只需五次点击, 即可轻松地将 FLV
17、 文件添加到您的 Web 页中。自定义视频环境以匹配您的网站。 8.学习资源 在您使用全面的教程、参考内容和指导性模板的同时进行学习, 这样可轻松扩展您的技能集并采用最新的技术。 9.扩展的 Dreamweaver 社区享受庞大的 Dreamweaver 社区的所有益处, 包括在线 Adobe 设计中心和Adobe 开发人员中心、培训和研讨会、开发人员认证计划、用户论坛以及Dreamweaver Exchange 中提供的超过 1,000 个可下载的扩展。 10.跨平台支持 挑选您的平台: Dreamweaver CS3 可用于基于 Intel 或 PowerPC 的Macintosh 计算机
18、, 也可用于 Windows XP 和 Windows Vista 系统。在您的首选平台中设计, 然后跨平台交付更加可靠、一致和高性能的结果。1.2.2 、CSS+DIV 介绍 CSS（Cascading Style Sheet，可译为“层叠样式表”或“级联样式表”）是一组格式设置规则，用于控制Web 页面的外观。通过使用CSS 样式设置页面的格式，可将页面的内容与表现形式分离。页面内容存放在HTML 文档中，而用于定义表现形式的CSS 规则则存放在另一个文件中或HTML 文档的某一部分，通常为文件头部分。将内容与表现形式分离，不仅可使维护站点的外观更加容易，而且还可以使HTML 文档代码更加
19、简练，缩短浏览器的加载时间。 在网页上使用样式表有三种方法可以在站点网页上使用样式表：u 将网页链接到外部样式表。u 在网页上创建嵌入的样式表。u 应用内嵌样式到各个网页元素。u 每一种方法均有其优缺点： 当要在站点上所有或部份的网页上一致地应用相同样式时，可使用外部样式表。在一个或多个外部样式表中定义样式，并将它们链接到所有网页，便能确保所有网页外观的一致性。如果人们决定更改样式，只需在外部样式表 中作一次更改 而该更改会反映到所有与该样式表相链接的网页上。通常外部样式表以 .css 做为文件扩展名，例如Mystyles.css。当人们只是要定义当前网页的样式，可使用嵌入的样式表。嵌入的样式
20、表是一种级联样式表，“嵌”在网页的 标记符内。嵌入的样式表中的样式只能在同一网页上使用。使用内嵌样式以应用级联样式表属性到网页元素上。如果网页链接到外部样式表，为网页所创建的内嵌的或嵌入式样式将扩充或覆盖外部样式表中的指定属性。 当创建或修改网页样式时，可使用位于 “格式” 菜单的 “样式” 命，Dreamweaver会自动创建嵌入的样式表（如果原先不存在），并在嵌入的样式表内将此样式保存为类选择器。 可以使用 “样式” 对话框来创建新类选择器，修改或删除现有类选择器，或将 CSS格式设置属性应用到标准 HTML 标记符上例如 。当单击 “确定” 关闭对话框时，Dreamweaver 会将格式
21、设置特征写回到使用正确语法的外部或嵌入的样式表中。或者，可以用正确 CSS 语法键入样式信息。要键入嵌入的样式表的样式信息，请单击网页视图模式下的 “HTML” 选项卡。 如果对应用到站点的主题选择 “应用 CSS ” 复选框，Dreamweaver 将在站点的根目录下创建名为 Theme 1 .css 的文件，其中 Theme 是主题的名称。如果修改主题，Dreamweaver 自动将更改写回主题 CSS 里。也可以通过直接编辑主题 CSS 来修改主题。 DIV 元素是用来为HTML 文档内大块(block-level)的内容提供结构和背景的元素。DIV 的起始标签和结束标签之间的所有内容都
22、是用来构成这个块的，其中所包含元素的特性由DIV 标签的属性来控制或者是通过使用样式表格式化这个块来进行控制。DIV 标签称为区隔标记。作用设定字、画、表格等的摆放位置。当你把文字图象或其他的放在 DIV 中，它可称作为“DIV block”,或“DIV element”或“CSS-layer,或干脆叫“layer”。而中文我们把它称作“层次”。1.2.3、 HTML 简介 HTML（HyperText Mark-up Language）即超文本标记语言或超文本链接标示语言，是目前网络上应用最为广泛的语言,也是构成网页文档的主要语言。 HTML 文本是由HTML 命令组成的描述性文本,HTML
23、 命令可以说明文字、图形、动画、声音、表格、链接等。HTML 的结构包括头部(Head)、主体(Body)两大部分,其中头部描述浏览器所需的信息而主体则包含所要说明的具体内容。 HTML 文档制作不是很复杂,且功能强大,支持不同数据格式的文件镶入,这也是WWW盛行的原因之一,HTML 语言的特点如下: 1、简易性,HTML 版本升级采用超集方式,从而更加灵活方便。 2、可扩展性,HTML 语言的广泛应用带来了加强功能,增加标识符等要求,HTML 采取子类元素的方式,为系统扩展带来保证。 3、平台无关性。虽然PC 机大行其道,但使用MAC 等其他机器的大有人在,HTML 可以使用在广泛的平台上,
24、这也是WWW 盛行的另一个原因。 HTML 的本质是文本,需要浏览器的解释,HTML 的编辑器大体可以分为三种: 1、基本编辑软件，使用WINDOWS 自带的记事本或写字版都可以编写，当然，如果你用WPS 来编写也可以。不过存盘时请使用.htm 或.html 作为扩展名，这样浏览器就可以解释执行了。 2、半所见即所得软件，这种软件能大大提高开发效率，它可以使你在很短的时间内做出Homepage，且可以学习HTML，这种类型的软件主要有HOTDOG，还有国产的软件网页作坊。 3、所见即所得软件，使用最广泛的编辑器，完全可以一点不懂HTML 的知识就可以做出网页，这类软件主要有Frontpage，
25、DREAMWEAVER、Delphi、Eclipse、UltraEdit。 一个HTML 文件由一个HTML 元素组成，即文件以开始。以结束，文档中其他元素及其属性的声明都是HTML 的元素体。 HTML 元素的元素体和元素体由两大部分组成，即头元素和体元素。头元素和体元素的元素体又由其他元素、文本和注释等组成。 HTML 是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对
26、书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果。 HTML 之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。所谓超级链接，就是一种URL 指针，通过激活（点击）它，可使浏览器方便地获取新的网页。这也是HTML 获得广泛应用的最重要的原因之一。 由此可见，网页的本质就是HTML，通过结合使用其他的Web 技术（如：脚本语言、CGI、组件等），可以创造出功能强大的网页。因而，HTML 是Web 编程的基础，也就是说万维网是建立在超
27、文本基础之上的。 每种HTML 标记符在使用中可带有不同的属性项，用于描述该标记符说明的内容显示不同的效果。正文标记符中提供以下属性来改变文本的颜色及页面背景。二、 网站总体设计与规划2.1 网站的整体布局及结构2.1.1 确定建设网站的主题与规划网站 现在的WEB 页面能把文本、图像、声音、动画、视像等多媒体信息集于一体，不但使,信息的显示更加生动，而且使信息的浏览更为方便，同时动态的网页能实现网上交易平台、把个人信息反馈方便了朋友与网友之间信息交流。所以我这次所设计的网站为个人个人网站网站，即能提高自己的网站设计的技术，丰富自己的文化知识，在建设网站的过程中能学到实际的网络知识，其次，对与
28、即将毕业的学生，个人网站是一个很好的网络身份证明，可以让别人对自己有更好的了解。最后，有这么一个自己设计和制作的网站，可以证明用有了一定的计算机水平，对于以后的应聘中能有个很好的筹码，本人比较喜欢中国的古典文化，所以我所设计的网站页面设计中 有很浓厚的中国水墨风格。每个标题下都设有链接，方便访问者访问其他页面。 先建立自己的网站站点，在站点中我建立了几个文件夹用于保存网站设计所需要的各种素材和网页存根s，其中文件夹包括images、css、等。2.1.2 网页的整体布局和导航 1、网页的布局其实就是一个网页的排版过程，只有你布局布的合理让人一看就能明白你要表达的意思，这才是最重要的。成功的网页
29、中，一个共同的特点就是网页的整体架构十分的清晰明了，便于用户浏览。 我的个人网页布局采用的是“三”字型的设计，就是最上方是体现个人网站风格图片和导航图片，中间是各个网页的主题的主打内容。总体布局来看比较整齐简洁和美观。 2、导航栏能让我们在浏览时会很容易的到达不同的网页，是网页元素中非常重要的部分，所以导航栏一定要清晰醒目，一般来讲，导航栏要在“第一屏”能显示出来，但是有时第一屏可能会小于435px，基于这点考虑，那种横向放置的导航栏要优于纵向的导航栏。 我的导航栏基于以上想法制作的是横向的导航栏，借用PS 软件制作出导航。2.2 网站画面风格的设计及素材处理2.2.1 网页画面风格设计 首先
30、要明确网站的目标，网站要有明确的主题，体现自己的风格，特别是对于个人网站，不可能像大型网站那样做得内容全面，所以必须要找准一个自己感兴趣内容，做深、做透，办出自己的特色，这样才能给浏览者留下深刻的印象。 至于网站的内容则没有限制自己喜欢什么就弄什么，但是要主题鲜明，切合自己网站的名字。 一个网站设计得是否成功，很大程度上决定于设计前的规划。网站规划包含的内容很多，如网站的结构、栏目的设置、网站的风格、颜色搭配、版面布局、文字图片的运用等，只有在制作网页之前把这些方面都考虑到了，才能在制作时驾轻就熟，胸有成竹。也只有如此制作出来的网页才能有个性、有特色，具有吸引力。 网站的整体色调以黑白色为主，
31、然后点缀其他不同的图片进行搭配，突出主题，颜色没有过多，过杂，以免给人一种杂乱的感觉。版面设计十分灵活，根据各部分的内容决定字体风格，相同的风格多次调用的是用CSS 设定的样式，以保证随时，准确的调用。 网站中共分为10 个页面，包括了首页，和留言板等页面，最上方是风格图片和导航图片，中间是个网页的主题内容，。总体布局来看比较整齐简洁和美观。2.2.2 网页素材处理技术 1、网页的排版与制作使用的是Adobe Dreamweaver cs3，是一款在网页设计与制作中比较简单好用的软件. 2、用Photoshop 制作和处理网页中相关的图片。 例如： 网页中的开场动画效果为：2.2.3 网站栏目
32、介绍及功能简介 本网站前台包括首页、日记、照片、留言板等栏目，下面是对个栏目的简介： 1.首页：开始是一个动画，采用自动跳转动作，自动跳转到包含个人资料、日记等栏目的页面。 2.主页：主要是导航，以及日记和日志，照片，最新动态等。 3.日志：主要是作者的平时转载的日记，及各种相关的知识存储。 4.相册：是作者相关的图像资料。 5.个人资料：简单的罗列了主人个人资料的相关介绍。 6.个人影展：是作者以前做过的flash、photograph 作品的展示。三、网站的详细设计与制作3.1 站点3.1.1 创建和设计站点 1、启用Dreamweaver CS3，点击Dreamweaver 站点管理，建
33、立一个站点。如图： 2、在“站点定义”对话框的“高级”选项卡的“分类”栏中选择“本地信息”，设置站点名称，将“本地根文件夹”设置为“D:/Backup/我的文档/101404216赖文锋/” ，本地信息设置结果如图所示： 3、选择“测试服务器”,将服务器类模型设置为ASP JavaScript，如图所示： 4、设置完毕，单击“确认”按钮返回到编辑站点对话框。 5、在编辑站点对话框中，点击“完成”按钮。3.2 网页制作3.2.1 创建文件夹 在网站文件夹里面建立一些文件夹，包括“image” （存储图片）、“JS”（存储JS文件)、“style”(存储css文件)。3.2.2 创建文件 选择建立
34、的站点文件夹，右键单击该文件夹，在弹出的快捷菜单栏中选择新建文件开场动画名为default. Html；主页名为index.html；日记网页名为detail.html主要是我的一些个人日记；档案文件名为detail2.html是我的一些个人资料；兴趣爱好网页为detail3.html；个人影展网页名为detail5.html是我的个人相片。3.2.3 创建首页 1、打开default. Html文件，单击快捷工具栏中的ap-div 标签绘制一个可调节大小的标签框，在其中插入单元格，上网下载一个JS插件，并把用Photoshop 制作的首页图片插入进来，如图所示：3.2.4 创建主页面 1、首
35、先打开index.html，把整个网站的框架做出来 2、框架内容制作如图： 1）用css把背景改为灰色，是整个网站底色变成灰色，如图 2）创建一个表格，把网站总标题的图片放上去，如图： 3）创建一个表格，把网站目录做出来，如图： 4）创建一个表格，把子网站所要显示的主要内容放上去； 5）创建一个表格，把子目录栏做出来； 6）创建一个表格，上网下载一个JS的插件，做成动态图，将插件放到页面上，如图： 通过这几步就把网站的框架做出来了，剩下的就是把每个目录上的内容填充上去就可以了。 注：在首页目录内中，创建与主页的超链接，在主页也创建与首页的超链接。3.2.5创建子页面创建日志页面 1.打开det
36、ail.html，在目录中的主页创建一个超链接，与主页链在一起； 2.然后在子目录中的“日志”也创建一个超链接与这个新建的网页链接起来； 3.以主页为模板，创建一个表格，把子目录栏做出来，如图，并将此图作为 模板，供其他网页使用： 图一 4.创建一个表格，把子目录栏做出来，如图：创建相册页面 1.打开list.html，在目录中的主页创建一个超链接，与主页链在一起； 2.然后在子目录中的“相册”也创建一个超链接与这个新建的网页链接起来； 3.取主页的为模板，将页面做成如下图： 4.上网下载一个JS的插件，做成动态图，将插件放到页面上，如图：创建“更多”页面 打开主页，在子目录中的“更多”也创建
37、一个超链接与中国旅游网http:/ 1. 以创建日志页面时的图一作模板，创建“detail2.html”（个人资料）、“detail3.html”（兴趣爱好）、“ detail5.html”（个人影展）三个页面。 2.分别在日志页面目录中“个人资料“”兴趣爱好“个人影展”“创建一个超链接，与三个页面链在一起 3.分别在三个页面中输入和排版好所需要的文字，做成如下页面：（个人资料）（兴趣爱好）（个人影展）创建“美图欣赏”页面 打开日志页面，在子目录中的“美图欣赏”创建一个超链接与“list.html”（相册页面）相连创建日志页面中“五篇旅行日记”页面 1. 以创建日志页面时的图一作模板，创建“d
38、etail4.html”（情侣路，是珠海人特酿的一泓温馨）、“xiamen.html”（厦门是一座简约、精致、秀美的城市）、“zhouzhuang.html”（在我的想象里，周庄该是古朴的）“fenghuang.html”（文中的凤凰，乃湘渝之界）“ yangshuo.html”（山是眉峰聚，水是眼波横）五个页面。 2.分别在日志页面目录中“情侣路，是珠海人特酿的一泓温馨“”厦门是一座简约、精致、秀美的城市“在我的想象里，周庄该是古朴的”“ 文中的凤凰，乃湘渝之界“”山是眉峰聚，水是眼波横“创建一个超链接，与五个页面链在一起 3.分别在五个页面中输入和排版好所需要的文字，做成如下页面：情侣路，
39、是珠海人特酿的一泓温馨厦门是一座简约、精致、秀美的城市在我的想象里，周庄该是古朴的文中的凤凰，乃湘渝之界山是眉峰聚，水是眼波横四、 网站的调试4.1 对本系统的测试主要包括以下几个方面： 1.连接测试 一个好的系统应该不包含中断链接，花费时间检查链接可以避免错误信息的发生率。链接测试可以分为三个方面：首先，测试所有链接是否按指示的那样确实链接到了该链接的页面；其次，测试所链接的页面是否存在；最后，保证Web 应用系统尚没有孤立的页面。经过系统连接测试，已经把系统中存在的所有错误链接都修改正确了。用户可以放心使用。 2.检查布局的一致性 对于一个好的系统，布局的一致性也是十分重要的。我们在设计系
40、统时，常常会因为追求单个页面的美观而忽略了系统的整体效果。这就需要对系统进行整体浏览，检查布局和图像的一致性。通过对系统的整体浏览调试，已经可以保证系统整体布局的一致性，相信能够为用户提供简洁美观的页面。五、总结 这次的毕业设计经过老师的耐心细致的指导，及同学之间的相互交流，同时翻阅了大量的资料经一段时间的努力，个人网站的设计制作告一段落。总结这个个人网站的开发制作过程，我综合使用了目前interest 上比较流行的各种静态网页制作及交互式动态网站的设计手段，并完成了利用后台数据库与动态网页的生成。同时也学会了对网页的处理风格，色彩搭配，页面导航有了一定的经验。网页作为一种新的视觉表现形式，它
41、的发展虽然没有多长时间，它兼容了传统平面设计的特征，又具备其所没有的优势，成为今后信息交流的一个非常有影响的途径。网页设计是一种综合性的设计，它所涉及的范围非常的广泛， 包括消费者心理学、视觉设计美学、人机工程、哲学等诸多方面，当然也离不开一定的科学技术发展。在本文中只从视觉传达的角度进行了一些阐述与分析。好的网页设计除首先应考虑其内容上的精益求精外，其次就是对内容合理有效的视觉编排。美是任何网页所必需具备的基本因素，网页信息不仅是为了满足使用者的需求，更重要的是创造一种愉悦的视觉环境，技术与艺术的紧密结合在网页艺术设计中体现得尤为突出。这次的毕业设计非常感谢老师给了我很多的帮助，从开始设计到设计的完成，没走一步对于我来说都是新的尝试和挑战，我独立的完成网站设计的全过程，把设计中散乱的网页链接成框架体系，我学到了很多知识和感受，通过学习和探索，查看相关资料和书籍，让我的头脑中的知识逐渐清晰，使设计逐步完善，每一次的改进都是我受益匪浅，感谢老师的指导，虽然我的设计还不是很成熟，但是在老师的帮助下知道了自己的不足，也进行了改进，希望这次经历能让我在以后的学习中激励我继续进步。六、参考文献1 徐国平.网页设计与制作M.北京机械工业出版社.2008 年.2 胡珊.个人网页设计