《前端设计毕业设计.docx》由会员分享，可在线阅读，更多相关《前端设计毕业设计.docx（35页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、摘要21 世纪是信息高速发达的时代，网络作为当今最流行最方便快捷的媒介也越来越被人们接受，并且融入我们的生活。随着旅游类的网站不断推进，网站的作用超越了传统的信息获取，交流它更能体现组织机构的风采，性质。所以旅游类的网站对现在的发展已经势在必行。本论文主要围绕旅游网站为开发主题，最基本也是最必须的三个技能。前端的开发中，在页面的布局时， HTML 将元素进行定义，CSS 对展示的元素进行定位，再通过 JavaScript 实现相应的效果和交互。虽然表面看起来这些很简单， 但这里面需要掌握的东西绝对不会少。在进行开发前，需要对这些概念弄清楚， 弄明白，这样在开发的过程中才会得心应手。分析并解决实
2、现中的若干技术问题；介绍了个性化页面的背景；阐述整个个性化页面生成系统的系统结构及工作原理；分析了系统实现中的特殊性，难点和重点；虽然还没有设计用户注册，用户登录，用户管理，但是我会把自己的网站以一种简单明了的方式向大家展现出旅游的各个方面。分析并解决实现中的若干技术问题；建立完整的旅游网站，进行测试并分析结果。本网站的建立的作用具有一目了然的特性，不仅能让本地区的人们了解更多的旅游资料，更可让世界各地的人了解一些地区的明文风景。该网站中还存在一些不足之处，如网站的留言系统、用户注册、用户登录没建立等等。这些问题和功能有待于进一步学习和添加。关键词：网站设计XHTML、CSS、javaScri
3、pt 和 JQuery12目录目录3第一章 绪论41.1 引言41.2 旅游网站发展现状41.3 本课题目的与意义6第二章 开发工具和开发技术简介72.1 Dreamweaver 简介72.2 PhotoShop 简介82.3 Adobe Flash 简介92.4 HTML 语言简介92.5 CSS 简介10第三章 需求分析123.1 网站系统分析123.2 功能性需求分类123.3 非功能性需求13第四章网站开发过程及实现144.1 创建站点144.2 首页设计154.2.1 首页顶部设计164.2.2 导航栏设计184.2.3 首页主要内容设计204.2.4 首页底部设计254.3 其余页
4、面的制作254.3.1 2 级页面的制作：254.3.2 3 级页面设计284.4 测试30第五章 结论32致谢34第一章 绪论1.1 引言新的世纪，互联网进入一个崭新的阶段，信息化的发展带动其它产业的发展，各行业都将与它进行更深入的融合和渗透。，互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、经济、生活、旅游等各个方面发挥着重要的作用。为了适应知识经济社会的需要，促进学习与交流。网上交流和协作的功能比较普遍；技术管理和资源管理受到重视。随着互联网的普及和发展， 必将有越来越多的企业及个人在英特网上拥有自己的网站。网站建设成为企业 形象宣传、产品展示推广、客户沟通的最新最快捷的
5、桥梁；成为个人展示自我， 与世界交流的重要平台。越来越多的人已开始从对互联网的认知阶段进入到认同和行动阶段。Internet 上发布信息主要是通过网站来实现的，获取信息也是要在 Internet“海洋”中按照一定的检索方式将所需要的信息从网站上下载下来。因此网站建设在 Internet 应用上的地位显而易见，它已成为政府、企事业单位信息化建设中的重要组成部分，从而倍受人们的重视。为了更好的协作，更多的与外界交流新的信息，和他人共享信息，特构建旅游网站。旅游网站也是近十年来在我国逐步兴起和发展的，到现在已经初步形成了类型齐全、涵盖旅游业各个方面的网上旅游产业体系，旅游产品的在线宣传和销售正影响着
6、越来越多的旅游者、旅游服务提供商和旅游管理者。随着我国旅游业的迅猛发展，推进旅游信息化，广泛实现旅游电子政务、电子商务，建立高度发达的网上旅游系统，对于促进我国旅游业的跨越式发展有着重要的作用。1.2 旅游网站发展现状1 我国旅游网站发展概述第一阶段（19972000 年）：我国真正出现基于互联网的旅游网站以 1997年中国旅游资讯网和华夏旅游网的成立为标志。此阶段旅游网站信息很少，网站只由一到数张设计简单、以景点介绍的简单文字为主的网页构成。第二阶段（20002001 年）：2000 年 4 月以网上预订为主的青旅在线诞生，电子商务模式首次引入旅游网站。此阶段旅游网站提供的预订服务一般只包括
7、交通及住宿企业的电话等联系方式，游客的预订仍需绕开网站，直接与相关企业打交道。网站的资讯信息已日益丰富，并由层次分明、包含超级链接的网页组成。第三阶段（20012002 年）：随着 2001 年 2 月金旅雅途网的成立，中国出现一批以网上交易平台服务为主要业务的旅游网站。此时旅游网站已有较强的互动性，且开始提供一些在线服务。网上预订的业务也大大增强，只是从网上预订客房后仍需通过银行等途径汇去所需款项，预订的飞机票等也必须派人上门递送，属于“鼠标加水泥”的模式。第四阶段（2002）：2002 年 4 月中国第一个旅游目的地营销系统“南海目的地营销系统”在广东省南海市建成，南海旅游网成为中国首个运
8、行 DMS 的旅游网站。从此阶段开始，功能强大的数据库系统使游客可以很方便地实现食、住、行、游、娱、购等信息的在线查询，甚至可以借助多媒体工具进行网上虚拟旅游。未来的旅游网站的知识内容将日益丰富，栏目的内容将日益详细，分类将日益科学，单调的、一成不变的旅游行程表将被灵活多变的自助旅游的游程定制所替代，为游客提供个性化的旅游产品等智能服务将成为旅游网站的重要功能。（二）网站分类对于种类繁多的旅游网站可以从不同角度进行分类，如按网站性质的不同可将我国旅游网站分为如下七类：政府旅游部门网站、应用服务供应商网站、旅游企业网站、专业旅游网站、网络内容供应商网站的旅游频道、各类旅游目的地咨讯网和地方性旅游
9、网站、个人旅游网站。此外，旅游网站还可按专业属性、服务类型、提供信息等不同要素进行分类。（三）网站构建中存在的问题目前我国旅游网站数量非常庞大，现在用各种搜索引擎搜索到的旅游网站已达数万家。但是大多数旅游网站的构建无论从网页设计的科学性、有效性，还是从网站的服务内容、服务范围、服务功能来看，都非常不规范，存在不少问题。以政府旅游网站为例，域名的使用就非常混乱， 48%的省级政府旅游网站未使用 的正规域名，网站的信息提供也参差不齐；再以专业旅游网站为例， 从网上选取 50 家较为成功的专业旅游网站进行了测评结果来看，酒店客房和机票的查询预订是专业旅游网站提供的主要功能，在选取的专业旅游网站中，1
10、00% 的网站都提供了此两项功能，但从具体功能来看，尚无一家旅游网站能够提供客房的实时状况，如最近一天的客房销售情况和促销优惠的报价。火车票的查询只有 45%的网站提供，国内火车票的预订尚无一家网站开通，唯一一家开通火车票预订的是再见城市网站，也仅开通了欧洲火车通票预订。能提供出租车预订的网站只占 22.7%。目前，在所选取的网站中尚无一家提供酒店、机票、出租车、门票的组合预订，而提供了门票或导游预订的也只有两家。从预订方式来看，选取的网站都提供了网上预订功能，但提供网上支付功能的网站只占 22.7%。此外， 绝大多数专业网站没有设计旅游投诉的功能。既能体现旅游网站内涵又便于查询记忆的网站域名
11、和网站 LOGO。名和标志 LOGO 的设计既要体现旅游网站的内涵，使游客通过网站的名称就可以对网站的产品及服务有一定的了解，又要具有鲜明特色，便于查询、记忆。如携程旅游、再见城市、信天游、八千里路等旅游网站的中文域名就一目了然且极具个性。美观大方且兼具合理性、系统性、逻辑性的网页。先应充分考虑网页的美观度，其次可运用多媒体技术，在网页中加入FLASH、3D 片头动画、三维实景演示及 MPS、AVI、等音视频播放下载，加强旅游信息展示的生动直观性，此外，也应处理好首页打开速度与网页美观度之间的矛盾。如可将图片以较小尺寸在首页上显示，通过点击放大浏览原图。网站的网页结构设计必须注重科学性。应在首
12、页上设置网站信息的总目录。另外应尽可能将主题内容放在首页，减少游客点击进入下层网页查阅的次数。首页上的内容应定期更换，以提供最新最快的旅游资讯，更换下的内容可放入下层网页。我国主要国际旅游客源地情况制作不同语言版本的网页。我国地大物博、历史悠久，丰富多彩的旅游资源也不断吸引着全世界的寻幽猎奇的旅游者。在开放的网络中，我国的旅游网站所面对的也是全球旅游市场，来自世界各地的游客都可能成为旅游网站的浏览者和客户。目前我国大多数旅游网站只有中文简体一个语言版本，无法满足全球不同地域游客的需要，应根据我国现有的主要国际客源市场，尽量增设其他语言的网页版本，如中文繁体、英文、日文、韩文、法文、德文等，以满
13、足不同语种和区域游客的需要。此外，还可根据需要，单独开设面向不同国家、民族的外语版块，有针对性的提供相关信息。在对各类旅游网站的各种要素进行了综合的测定分析后，笔者对未来中国旅游网站构建要素提出以下设想，以使现有网站更臻完善。1.3 本课题目的与意义建立旅游网站是我个人的爱好，我希望自己的技术可以变为一种提高自我的表现，至于为何选择旅游这个主题进行建设网站，那是因为我个人对此较为了解， 也是看目前形式下此类网站不多，要不就是内容不丰富，没有自己独特的创意才来建站，当然，我不排除有的一些好的旅游网站，只是很少，所以我想自己单独的制作出自己的旅游网站，一遍更多的人了解旅游的各个景点。第二章 开发工
14、具和开发技术简介2.1 Dreamweaver 简介Dreamweaver 是美国 MACROMEDIA 公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。Dreamweaver 是在网页设计与制作领域中用户最多、应用最广、功能最强大的软件，随着Dreamweaver 8 的发布，更坚定Dreamweaver 在该领域的地位。它集网页设计、网站开发和站点管理功能于一身，具有可视化、支持多平台和跨浏览器的特性，是目前网站设计、开发、制作的首选工具。DREAM
15、WEAVER 特点：1、灵活的编写方式Dreamweaver 具有灵活编写网页的特点，不但将世界一流水平的“设计”和“代码”编辑器合二为一，而且在设计窗口中还精化了源代码，能帮助用户按工作需要定制自己的用户界面。2、可视化编辑界面Dreamweaver 是一种所见即所得的 HTML 编辑器，可实现页面元素的插入和生成。可视化编辑环境大量减少了代码的编写，同时亦保证了其专业性和兼容性， 并且可以对内部的 HTML 编辑器和任何第三方的 HTML 编辑器进行实时的访问。无论用户习惯手工输入 HTML 源代码还是使用可视化的编辑界面，Dreamweaver 都能提供便捷的方式使用户设计网页和管理网站
16、变得更容易。3、功能更多的 CSS 支持CSS 可视化设计、CSS 检查工具4、动态跨浏览器验证当保存时系统自动检查当前文档的跨浏览器有效性，可以指定何种浏览器为测试用浏览器，同时系统自动检验以确定页面有没有目标浏览器不支持的 tags 或 CSS 结构。动态跨浏览器有效性检查功能可以自动核对 tags 和 CSS 规则是否适应目前的主浏览器。5、强大的 WEB 站点管理功能6、内建的图形编辑引擎7、Dreamweaver 的集成特性Dreamweaver 8 继承了 Fireworks、Flash 和 Shockwave 的集成特性，可以在这些 Web 创作工具之间自由地切换，轻松地创建美观
17、实用的网页。8、丰富的媒体支持能力可以方便地加入Java、Flash、Shockwave、ActiveX 以及其他媒体。Dreamweaver 具有强大的多媒体处理功能，在设计 DHTML 和 CSS 方面表现得极为出色，它利用 JavaScript 和 DHTML 语言代码轻松地实现网页元素的动作和交互操作。Dreamweaver 还提供行为和时间线两种控件来产生交互式响应和进行动画处理。9、超强的扩展能力Dreamweaver 还支持第三方插件， 任何人都可以根据自己的需要扩Dreamweaver 的功能，并且可以发布这些插件。2.2 PhotoShop 简介Adobe Photoshop
18、 是一个由 Adobe Systems 出品的专业图像处理软件。与该公司的其它软件一样，Photoshop 适用于 Mac OS 及 Microsoft Windows 两个操作系统，同时公司也发布了 Unix 操作系统上的版本。Google 也正在透过 Wine 资助 Linux 版 Photoshop 的研究。Photoshop 最初是由托马斯诺尔（Thomas Knoll）和约翰诺尔（John Knoll）这对兄弟于 1987 年制作的，但直到 1990 年后，这个软件才由 Adobe 公司首次发布。Photoshop 最初用于处理那些在当时价格不菲的扫描仪扫描下来的图像。特性：Phot
19、oshop 主要处理以像素（Pixels）所构成的数字图像。利用其广泛的编修与绘图工具，可以更有效的进行图片编辑工作。独特的历史纪录浮动视窗和可编辑的图层效果功能使用户可以方便的测试效果。对各种滤镜的支持更令使用者能够轻松创造出各种奇幻的效果。目前，Photoshop 也正在被更多的用于处理网络图片。Photoshop 的几个后续版本中捆绑了一个独立的软件 ImageReady，加强了 Photoshop 对网络图像（主要是 GIF 图像文件）的支持功能。而在 CS3 中ImageReady 被 Fireworks 所代替。Photoshop CS3 允许用户更容易升级到最新的硬件平台，支持苹
20、果的 Intel 为内核的系统。Photoshop 被人们认为是最好的图像处理软件，但与著名的 3D Studio Max 一样，昂贵的价格使其难以普及。这也令 Jasc Software 公司的 Paint Shop Pro， GIMP 小组的 GIMP 和友立信息的 Ulead PhotoImpact 占领了相当的市场份额。为了争夺市场，Adobe 发布了一个 Photoshop 的简易版本 Photoshop Elements。虽然它对很多功能都作了限定 ， 但继承 了原软件的 多数优 秀功能，价 格比Photoshop 便宜不少。2.3 Adobe Flash 简介Adobe Flas
21、h，前称 Macromedia Flash，简称 Flash，前身 FutureSplash， 既指 Adobe Flash Professional 多媒体创作程序，也指 Adobe Flash Player。自从 Macromedia 公司于 2005 年 12 月 3 日被 Adobe 公司收购，Flash 也就成为了 Adobe 旗下的软件。1、flash 特性：(1) 被大量应用于因特网网页的矢量动画文件格式。(2) 使用矢量图形（Vector Graphics）的方式，产生出来的影片占用存储空间较小。(3) 使用 Flash 创作出的影片有自己的特殊文件格式（swf）(4) 该公司
22、声称全世界97% 的网络浏览器都内置Flash 播放器（ Flash Player）(5) 是 Adobe 提出的“富因特网应用”（RIA）概念的实现平台(6) Flash6 之后版本纳入面向对象程序概念。与其他语言比较，不论是在数据库、XML、PHP 等各种平台上，都能更进一步的相互结合应用。(7) 从用户体验的角度，是目前最好的前端技术。2、主要文件格式：(1)swf是 Shockwave Flash 的缩写，这是一个完整的影片档，无法被编辑。有时会被念作“swiff”或“swaif”。SWF 在发布时可以选择保护功能，如果没有选择，很容易被别人输入到他的源文件中使用。然而保护功能依然阻挡
23、不了为数众多的破解软件，有不少闪客专门以此来学习别人的代码和设计方式。(2)flaFlash 的源文件，只能用 Adobe Flash 打开编辑。2.4 HTML 语言简介HTML（Hyper Text Markup Language 超文本置标语言）是一种用来制作超文本文档的简单标记语言。用 HTML 编写的超文本文档称为 HTML 文档，它能独立于各种操作系统平台（如 UNIX，WINDOWS 等）。自 1990 年以来 HTML 就一直被用作 World Wide Web 上的信息表示语言，用于描述 Homepage 的格式设计和它与WWW 上其它 Homepage 的连结信息。HTML
24、 文档（即 Homepage 的源文件）是一个放置了标记的 ASCII 文本文件， 通常它带有.html 或.htm 的文件扩展名。生成一个 HTML 文档主要有以下三种途径：1、手工直接编写（例如用你所喜爱的 ASCII 文本编辑器或其它 HTML 的编辑工具）。2、通过某些格式转换工具将现有的其它格式文档（如 WORD 文档）转换成HTML 文档。3、由 Web 服务器（或称 HTTP 服务器）一方实时动态地生成。HTML 语言是通过利用各种标记（ tags）来标识文档的结构以及标识超链（Hyperlink）的信息。虽然 HTML 语言描述了文档的结构格式，但并不能精确地定义文档信息必须如
25、何显示和排列，而只是建议 Web 浏览器（如 Mosiac，Netscape等）应该如何显示和排列这些信息，最终在用户面前的显示结果取决于 Web 浏览器本身的显示风格及其对标记的解释能力。这就是为什么同一文档在不同的浏览器中展示的效果会不一样。目前 HTML 语言的版本是 2.0，它是基于 SGML（Standard Generalized Markup Language）标准广义置标语言，是一套用来描述数字化文档的结构并管理其内容的复杂的规范）中的一个子集演变而来的。虽然下一版本的标准HTML3.0（也称为 HTML+）正在制订之中，但其中某些部分的实验性标准草案已被广泛采用，大多优秀的
26、Web 浏览器（如 Netscape 等）都能解释 HTML3.0 中的部分新标记，因此在本章中介绍的一些 HTML3.0 新标记均已被多数浏览器所接受。2.5 CSS 简介CSS（Cascading Style Sheet，可译为“层叠样式表”或“级联样式表”）是一组格式设置规则，用于控制 Web 页面的外观。通过使用 CSS 样式设置页面的格式，可将页面的内容与表现形式分离。页面内容存放在 HTML 文档中，而用于定义表现形式的 CSS 规则则存放在另一个文件中或 HTML 文档的某一部分，通常为文件头部分。将内容与表现形式分离，不仅可使维护站点的外观更加容易，而且还可以使 HTML 文档
27、代码更加简练，缩短浏览器的加载时间。1. 层叠式表的特点： (1)便于页面的修改。(2)便于页面风格的统一。(3)减少网页的体积。2. 采用 CSS 布局相对于传统的 TABLE 网页布局而具有的优势：(1) 表现和内容相分离：将设计部分剥离出来放在一个独立样式文件中，HTML文件中只存放文本信息。这样的页面对搜索引擎更加友好。(2) 提高页面浏览速度：对于同一个页面视觉效果，采用 CSS 布局的页面容量要比 TABLE 编码的页面文件容量小得多，前者一般只有后者的 1/2 大小。浏览器就不用去编译大量冗长的标签。(3) 易于维护和改版：你只要简单的修改几个 CSS 文件就可以重新设计整个网站
28、的页面。第三章 需求分析3.1 网站系统分析本旅游网站是为以旅游信息发布、旅游资料共享、浏览客户为核心的网站， 宗旨是能及时、准确、完整发布游客需要的旅游信息。浏览客户浏览客户是只在浏览器端浏览网站信息的用户，也是整个网站信息需要面向的用户，其主要实现功能为：(1) 客户可浏览旅游新闻信息(2)客户可浏览旅游线路信息(3)客户可浏览旅游酒店信息(4)客户可浏览旅游图片信息(5)客户可浏览旅游景点信息3.2 功能性需求分类我的网站总体分为 5 个网站栏目，分别是步行天下行首页、牛人专线、旅游线路、旅游攻略、其他资讯和二级页面。1 步行天下行首页首页网页名称是 index，首页是浏览者看到网站的第
29、一个页面。首页可以说是一个精华，他总体的概括了该旅游网站的大致内容，突出了主题。2 牛人专线牛人专线的网页名称是 zhuanxian，它是一级页面，当进入首页之后在导航条上直接选择即可将进入到该页面。牛人转线这个页面主要介绍了各个地方的旅游。3 旅游线路旅游线路网页名称是 xianlu，同样是一级页面。进入首页之后在导航条上即可选择该功能。旅游线路主要介绍旅游的现在路线。4 旅游攻略旅游攻略网页名称是 gonglue，同样是一级页面。进入首页之后在导航条上即可选择该功能。旅游攻略主要可以看看各个景点的图片。5 其他资讯其他资讯网页名称是 zixun，同样是一级页面。进入首页之后在导航条上即可选
30、择该功能。其他资讯主要是介绍现在有关旅游的各个资讯。6 二级页面二级页面主要是对以上四个页面里的链接负责。3.3 非功能性需求1. 用户界面需求用户界面需求主要是风格问题，首先确定了在整个网站页面中标题栏用白色为主色调，使网站产生一种优雅、舒适的气氛，使人可以长时间浏览，也不会觉得视觉疲劳。其次，要要求导航条简洁明了。然后正文要用 14px 宋体，鼠标移动的时候，字体将会变成浅灰色，这样看起来会很舒适很舒适。另外，也可以用一些图片做背景图片加以修饰，也可以加一些图片滚动和图片切换来添加一些动态的效果，从而不显得那么单调，增加一些生机的气息。2. 软硬件环境需求软件需求：操作系统：Windows
31、2000 或 Windows XP；浏览器：IE 6.0 及以上版本或 FireFox 3.0 及以上版本。开发工具：Dreamweaver 8.0（或记事本）+Fireworks 8.0。硬件需求：要求处理器是 Pentien 3 以上，并且内存=512MB 和硬盘=40G。3. 网站质量需求正确性：要保证网站运行的正确性，无链接错误、图片显示错误及其他运行时错误。性能效率：网站设计要合理，代码无冗余，运行速度快。易用性：要导航栏目清晰、合理、简便易用。清晰性：导航栏目清晰，合理可扩展性：兼容性强，用户使用各主浏览器能有一致的用户体验可靠性：信誉度第四章网站开发过程及实现4.1 创建站点（1
32、） 启动 Dreamweaver。（2） 打开“站点”菜单，选择“新建站点”命令。如图 4-1：图 4-1 站点（3） 在弹出的“站点定义”对话框中的“站点名称”文本框中输入“步行天下行”，在下面的“本地根目录文件夹”文本框中输入本地网站预保存的路径，单击“确认”按钮。（4） 随即在组合面板中点弹出“站点”面板，现在可以在其中添加页面了。14（5） 右键单击“站点”面板中的根目录，在弹出菜单中选择“新建文件”命令，把新建文件的名称改为“index.html”（6） 双击 index.html，进入页面编辑状态。4.2 首页设计首页是一个网站的门面，如同公司的形象，特别注重设计和规划。它是用户首
33、先见到的界面，它的好坏直接影响到网站的访问率。为此，我从以下几个方面对主界面进行了设计。1、在色彩搭配上，我用一种较明快的色彩为基调，配以相关的其他色彩， 给用户一种鲜而不艳的美感。2、在字体选用上，大小适当，尽量使用常用字体，适当配用艺术字。3、在网页制作上，采用表格划分区域的手法，方便文字和图片的插入。4、在内容上，主界面内容充实而不繁杂，既体现本站特色，又能满足用户需要。在主页的基础上我把主页中加入了可编辑区域，并另存为了模板。以后的页面都是在模板的基础上进行制作的。使用模板功能有助于用户设计出风格一致的网页。通过模板来创建和更新网页，不仅可以大大提高工作的效率，而且维护网站也会变得更加
34、轻松。步行天下行网首页如下图 4-2：15图 4-2 界面首页4.2.1 首页顶部设计其中的 logo 和 Banner 制作很简单，如下图 4-3，是有一张图片和一个搜索框所制作的。图 4-3 首页顶部而制作这个 logo 和 Banner 的代码：16热门搜索： 合肥景点 北京景点 滁州景点 南京景点其中的 CSS 代码：/*logo 和 banner*/#header width:950px; height:100px; border:1px solid #CCC; margin:5px auto; border:0;/*logo 部分*/.
35、tu1 float:left; width:450px; height:100px; no-repeat/*banner 部分*/.banner float:right; width:500px; height:90px; .qq width:400px; height:40px; margin:0 auto; margin-top:20px; float:right #ww1 height:30px; width:300px; border:1px solid #CCC; color:#999;float:right#ww2height:30px; width:80px; border:1p
36、x solid #666; vertical-align:bottom; position:absolute;17cursor:pointer; background-color:#666; font-size:16px;.wz width:400px; height:35px; margin:0 auto; margin-top:5px; float:right.wz pfont:12px/20px 宋体; font-weight:bold; color:#669.wz a font:12px/20px 黑体; font-weight:bold;.wz a:hover color:#CC3;
37、就这样 logo 和 Banner 就可以制作出来了。4.2.2 导航栏设计当然导航栏的制作就简单多了，如下图 4-5：图 4-5 导航栏导航栏的代码：步行一天下行牛人专线旅游线路旅游攻略其他资讯18+_+出车时间2:00 合肥到滁州2:30 合肥到天长3:00 合肥到安庆6:00 合肥到池州CSS 的代码：#menu width:950px; height:26p
38、x; font-family:宋体; font-size:14px; margin:0 auto;#menu li float:left; width:97px; height:26px; list-style:none; text-align:center; line-height:26px; margin-right:2px; background:url(./image/nav.gif) no-repeat;#menu li acolor:#999; text-decoration:none;#menu li:hover color:#FFF; background:url(./imag
39、e/nav.gif) no-repeat 0-26px;#menu .n1 background:url(./image/nav.gif) no-repeat 0 -52px; #menu .n1 acolor:#999;font-weight:600;#f_select background:url(./image/select.png) no-repeat; width:355px; height:26px; float:left;#f_select h2font-size:14px; color: #33C;font-family:宋体; line-height:26px; float:
40、left;19padding-left:25px;#f_select form float:left; #f_select select width:190px; margin-top:3px; margin-left:20px;4.2.3 首页主要内容设计左边以图片加文字介绍各个景点如图 4-6：图 4-6 首页的左侧左边的代码：安徽宏村宏村，位于安徽省黄山西南麓，距黟县县城 11 公里，是古黟桃花源里一座奇特的牛形古村落，古取宏广发达之意，称为弘村。全村现完好保存明清民居 140 余幢，承志堂“三雕”精湛，富丽堂皇，被誉 为“民间故宫”。著名景点还有：南湖风光、南湖书院、月沼春晓、牛肠水圳
41、、双溪映碧、亭前大树、雷岗夕照、树人堂、明代祠堂乐叙堂等。村周有闻名遐迩的雉山木雕楼、奇墅湖、塔川秋色、木坑竹海、万村明祠“爱敬堂”等景观。20安徽黄山黄山雄踞风景秀丽的安徽南部，是我国最著名的山岳风景区之一。黄山集名山之长：泰山之雄伟，华山之险峻，衡山之烟云，庐山之飞瀑，雁荡山之巧石，峨眉山之清凉。明代旅行家、地理学家， 徐霞客两游黄山，赞叹说：“登黄山天下无山，观止矣！”又留“五岳归来不看山， 黄山归来不看岳”的美誉。更有“天下第一奇山”之称。可以说无峰不石，无石 不松，无松不奇，并以 奇松、怪石、云海、温泉 黄山四绝著称于世。其二湖，三瀑，十六泉，二十四溪相映争辉。春、夏、秋、冬四季景色各异。黄山还兼有“天然动物园和天下植物园”的美称，有植物近 1500 种，动物 500 多种。安徽狼牙山狼牙山坐落在河北省保定市易县西部的太行山东麓，距县城 45 公里，因其奇峰林立，峥嵘.险峻，状若狼牙而得名