毕业论文排版

1、 XX学院（ 2014 届）本科毕业论文（设计）题目： 楠溪江民宿网的设计与实现 学院： 数理与信息工程学院 专业： 计算机科学与技术 班级： 计科101 学号： 201053295211 姓名： 谢 慧 指导教师： 贾小军 完成日期: 2014年5月20日 教务处制楠溪江民宿网的设计与实现谢慧（XX学院数理与信息工程学院）摘要：近年来生态、环保、乡土关怀、及深度旅游等议题成为世界潮流，随着我国旅游行业的不断发展和完善，人民群众生活水平的不断提高，民宿等休闲农业将成为游客住宿的新选择。楠溪江拥有丰富的自然景观与人文风貌，具有发展深度观光的条件。本课题结合楠溪江旅游现状和需求，利用Dreamwe

2、aver CS6的网页制作，Photoshop的强大的美工功能和SQL Server 2005后台数据库，设计了楠溪江民宿网站，以提高楠溪江旅游住宿的便利性，吸引更多观光游客，将楠溪江的历史风貌，人文景观和村寨文化、耕读文化更好的展现给大家。关键词：民宿；深度观光；民宿网Design and Implementation of the Nanxi River B&B WebsiteXie Hui(School of Mathematics and Information Engineering ,Jiaxing University)Abstract: In recent years,

3、 ecology, environmental protection, local care, the depth of tourism and other issues have become the trend of the world. With the continuous development and improvement of China's tourism industry and people's living standards, leisure agricultures, such as Bed and Breakfast, will become a

4、new choice for tourist accommodation. The Nanxi River has rich natural and cultural landscape, and has a development of depth sightseeing. This subject is combined with the present status and the demand of the Nanxi River tourism using Dreamweaver CS6, Photoshop, a powerful web beautify tool and the

5、 backend database named SQL Server 2005,design the Nanxi River B&B Website. To improve the accommodation of Nanxi River, to attract more tourists, show the historic features, the cultural landscape and village culture, farming cultural to more people.Keywords: Bed and Breakfast; Deep tourism; Be

6、d and Breakfast Website1绪 论1.1课题的研究背景1.1.1民宿定义介绍民宿1（Pension），是指利用自用住宅空闲房间，结合当地人文、自然景观、生态、环境资源及农林渔牧生产活动，以家庭副业方式经营，提供旅客乡野生活之住宿处所。此定义完全诠释了民宿有别于旅馆或饭店的特质，民宿不同于传统的饭店旅馆，也许没有高级奢华的设施，但它能让人体验当地风情、感受民宿主人的热情与服务、并体验有别于以往的生活，因此蔚为流行。这股民宿旅游风潮（流行风），从一片原属于低度发展的行业中，创造出另一片欣欣向荣的景象，改写了旅游的型态。1.1.2民宿旅游的背景自实施长假制度以来，旅游需求的集中性

7、导致了许多旅游热点地区出现住宿难的问题，然而旅游的体验本质，又促使人们追求更多样化、个性化的住宿设施。此背景下，全国各地民宿的出现，不仅成为旅游地住宿设施的一种很好的补充，并且本身也成为一种新型的旅游吸引物。民宿是从过去旅游旺季时，因为游客的激增，造成旅馆客房供不应求，部分游客只好投宿到附近的民居而逐渐演变而来的2。对于游客而言，民宿是探索当地传统文化、风俗人情及生活方式的一个途径。对于当地居民而言，民宿可以提高经济收入、促进当地的经济繁荣。因此，从只是简单地接待一两个游客到规模较大的家庭旅馆，民宿渐渐成为一种新兴的旅游形式。民宿主要出现在拥有丰富自然资源和人文资源的地方，比如我国云南大理和丽

8、江，广西阳朔、龙脊梯田，湖南凤凰等地，同时也包括一些大城市，比如北京、上海、三亚、厦门等。Stringer(1981)指出，民宿不仅是商业交易也是社会与文化关联的形式之一。由于民宿不仅能满足游客的住宿需求，还能让游客在旅游过程中有更多机会与当地人接触，体验新的历史文化和风土人情，获得新的体验和认识，形成新的人际关系。因此，在今天追求更高层次的旅游需求中，这种特殊的住宿方式不光成为解决大众旅游住宿需求，更成为一种新的旅游吸引物。1.1.3楠溪江旅游现状楠溪江3风景区是以清、弯、秀、美的楠溪江为主体，其主要特色是水秀、岩奇、瀑多、村古、滩林美，山水风光与田园情趣相融，是供游览观光、休养度假的理想境

9、地。楠溪江作为一个成熟型的旅游景点，给游客的印象是一幅优美的江南水墨画。但一直以来，楠溪江仍以纯观光旅游为主，在激烈的市场竞争中正逐渐丧失原有的优势地位，静态的观光活动已不能适应旅游者日趋倾向于参与型、休闲度假型等旅游产品的需求。1.1.4民宿旅游的前景随着国民所得提高、渡假机会增加、农村景观的多样性、及休闲旅游风潮之兴起，农村除了可以利用自用住宅空闲的房间，或将闲置的农业设施（如谷仓、牛舍、猪舍）再利用，作为提供住宿及体验之设施等，更可结合休闲农业的发展提供都市人闲暇时调剂身心与休闲游憩的去处，实属一举两得。另一方面，民宿是除了旅馆与饭店之外，提供游客住宿时的另一个选择，而人情味浓厚且有家的

10、温馨感则是民宿和一般旅馆与饭店最大的不同处，同时也吸引了想更深入体验当地风土民情的人们另一种贴近当地生活的机会4。据世界旅游组织预测，旅游业将成为当今世界第一大产业。饭店业是旅游业发展的三大支柱之一，而民宿酒店则是我国饭店业的新发展趋势5。1.2 课题研究的目的与意义由于楠溪江白天游客众多，许多著名的风景点只能走马观花地匆匆流过，如果晚上住宿在风景区内的家庭旅馆中，一方面可以使游客在清晨、傍晚和晚上从多个角度来欣赏楠溪江的风景，另一方面也可以让游客享受到楠溪江人热情周到、象家人一样的住宿服务， 从而巩固游客对楠溪江这个旅游目的地的忠诚度，影响游客对旅游目的地的再游意愿。同时，在电子商务领域中，

11、旅游电子商务正在迅速发展，众多的旅游专业网站提供多样化的旅游服务，现已初步形成类型与功能比较齐全，涵盖旅游业各个方面的网上旅游产业体系，旅游商品和服务的在线销售正在影响着越来越多的家庭旅游者、商务旅游者和旅游服务提供商。而作为休闲旅游网站的一大分支，民宿网站6在一点点的摸索着前进。本课题旨在通过设计好民宿网站，以吸引更多观光游客，将楠溪江的历史风貌，人文景观和村寨文化、耕读文化更好的展现给大家。1.3课题的研究内容本课题研究的主要内容是设计一个符合实际需求的民宿网站。根据对现有的民宿网站管理系统的分析，主要实现了两个方面的功能：一是探求网站特色，潜在客户需求的功能；二是将总结出的结果应用到楠溪

12、江民宿网网站个性化服务上的应用功能5。其中具体模块实现的功能如下：(1) 介绍。根据实际情况，介绍民宿的特色以便游客可以方便的了解民宿。制作一个可以展示民宿美景的相簿，也用flash动画的形式，让顾客可以身临其境的感受民宿的美景。(2) 客房介绍。介绍民宿的客房情况，包括：房间名称、房间介绍、住宿需知、基本价格、基本定价、房间图片，等等。(3) 最新消息。呈现当日的最新消息，包括特殊优惠，增值服务，当地特色节日之类的。(4) 访客留言。提供一个交流平台，让大家对民宿的服务感知更具体，也可以在留言发问。(5) 线上订房。要制作一个在线订房的系统，是透过月历点选日期，步骤一 输入资料=> 步

13、骤二选择日期 => 步骤三完成订单。(6) 管理登入。制作一个登陆管理系统，提供访客注册登陆进行预订的功能，以及管理员查看发布消息处理信息的功能7-10。1.4 论文的内容组织论文共由六章组成。第1章绪论，主要介绍网站的研究背景、研究目的和意义、研究内容以及研究方法；第2章民宿网设计基础，主要介绍网站设计过程中会用到的相关技术，主要有网页开发工具Dreamweaver、网页美化工具Photoshop以及JavaScript脚本语言跟数据库技术；第3章网站的基本框架，主要是对网站总体框架的搭建作一个说明，包括前期的草图绘制，通过网页制作软件Dreamweaver的实现，说明各个模块的内容；

14、第4章网站数据库设计，简单介绍后台系统的实现，包括界面设计、功能实现等；第5章网站的具体设计，主要介绍网站的后期美化工作，使得网页更加具有观赏性，更具有商业价值；第6章总结与展望，主要阐述了本课题所完成的研究工作和存在的不足，以及希望在今后可以完善的地方。2 民宿网设计基础2.1Dreamweaver CS6简介Dreamweaver CS61112:adobe推出的一套拥有可视化编辑界面，用于制作并编辑网站和移动应用程序的网页设计软件。由于它支持代码、拆分、设计、实时视图等多种方式来创作、编写和修改网页，对于初级人员，你可以无需编写任何代码就能快速创建web页面。软件优点：（1）可响应的自适

15、应网格版面。使用响应迅速的CSS3自适应网格版面，来创建跨平台和跨浏览器的兼容网页设计。提高工作效率。直观地创建复杂网页设计和页面版面，无需忙于编写代码。（2）改善的FTP性能。利用重新改良的多线程 FTP 传输工具节省上传大型文件的时间。更快速高效地上传网站文件，缩短制作时间。（3）Adobe Business Catalyst集成。使用Dreamweaver中集成的Business Catalyst 面板连接并编辑您利用Adobe Business Catalyst（需另外购买）建立的网站。利用托管解决方案建立电子商务网站。（4）增强型jQuery Mobile支持。使用更新的 jQuer

16、y 移动框架支持为iOS和Android平台建立本地应用程序。建立触及移动受众的应用程序，同时简化移动开发工作流程。（5）更新的 PhoneGap 支持。更新的 Adobe Phone Gap 支持可轻松为 Android 和 iOS 建立和封装本地应用程序。通过改编现有的 HTML 代码来创建移动应用程序。使用Phone Gap模拟器检查设计。（6）更新的实时视图。使用更新的“实时视图”功能在发布前测试页面。“实时视图”现已使用最新版的Web Kit转换引擎，能够提供绝佳的HTML5支持。2.2 Photoshop CS5技术Adobe Photoshop，简称“PS”，是一个由Adobe

17、Systems开发和发行的图像处理软件。Photoshop主要处理以像素所构成的数字图像。使用其众多的编修与绘图工具，可以更有效的进行图片编辑工作。而Adobe Photoshop CS5作为Adobe的核心产品，历来最受关注，其特色有：l 从功能上，可分为图像编辑、图像合成、校色调色以及特效制作部分等。l 图像编辑，是图像处理的基础，可对图像做各种变换；l 图像合成，则是将几幅图像通过图层操作、工具应用合成完整、传达明确意义的图像；l 校色调色，是该软件深具威力的功能之一，可方便快捷地对图像的颜色进行明暗、色偏的调整和校正，也可以在不同颜色进行切换，以满足图像在不同领域如网页设计、印刷、多媒

18、体等方面应用。2.3 JavaScript技术JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。同时也是一种广泛用于客户端Web开发的脚本语言，常用来给HTML网页添加动态功能，比如响应用户的各种操作。一个完整的 JavaScript 实现是由以下3个不同部分组成的：核心（ECMAScript）、文档对象模型（Document Object Model，简称DOM）、浏览器对象模型（Browser Object Model，简称BOM），其优点有：l 实现网页和用户之间的实时性的、动态的、交互性的关系，可以丰富网页的表现力。l 短小精悍，在客户机上执行，大大提高网页

19、的浏览速度和交互能力。 同时它又是专门为制作Web网页而量身定做的一种简单的编程语言。l 增加网页互动性。JavaScript 使有规律地重复的HTML文段简化，减少下载时间。JavaScript 能及时响应用户的操作，对提交表单做即时的检查，无需浪费时间交由CGI 验证。l 不需服务器的支持而可以独立运行。l 跨平台、容易上手。2.4 数据库技术所谓数据库（Database）1314，顾名思义，是指按数据结构来存放数据的仓库。它于距今五十年前产生，随着信息技术和市场的发展，特别是二十世纪九十年代后，数据管理不再仅是存储和管理数据，而转变成为用户所需要的各种数据管理的方式。数据库有多种类型，从

20、最简单的存储各种数据的表格，到能够进行海量数据存储的大型数据库系统，都在各个方面得到了广泛的应用。开发一个系统前，首先要完成的就是数据库的设计。数据库设计是指对于一个给定的应用环境，构造最优的数据库模式，建立数据库及其应用系统，使之能够有效地存储数据。如何在给定的应用环境下，构造最优的数据库模型至关重要，它将影响整个系统的运作。下面对数据库的设计做下简单的介绍。2.4.1 数据库设计的基本步骤（1）需求分析阶段。该阶段的任务是准确了解和分析用户的需求，包括数据与处理。是整个设计过程的基础，也是最困难、最耗费时间的一步。（2）概念结构设计阶段。该阶段是通过对用户需求进行综合、归纳与抽象，形成一个

21、独立于具体DBMS的概念模型，即设计数据库的E-R模型图，是整个数据库设计的关键。（3）逻辑结构设计阶段。该阶段是将概念结构转换为某个DBMS所支持的数据模型。例如将E-R如转换为多张表。（4）数据库物理设计阶段。该阶段要为逻辑数据模型选取一个最适合应用环境的物理结构，包括存储结构和存取方法。（5）数据库实施阶段。这个阶段是运用DBMS提供的数据语言、工具及宿主语言，根据逻辑设计和物理设计的结果建立数据库，编制与调试应用程序，组织数据入库，并进行试运行。（6）数据库运行和维护阶段。数据库应用系统经过试运行后，即可投入正式运行，但在系统运行过程中，必须不断地对其进行评价、调整与修改。在设计过程中

22、，要把数据库的设计和对数据库中数据处理的设计紧密结合起来，将这两个方面的需求分析、抽象、设计、实现在各个阶段同时进行，相互参照，相互补充，以完善两方面的设计。2.4.2 数据库设计的原则在数据库设计过程中，往往会出现一些问题，比如数据冗余、更新异常或是表与表之间的范式问题，要想减少错误的产生，避免不必要的麻烦，必须遵循数据库设计的基本原则。具体原则如下：（1）正确反映数据与数据(信息与信息)之间的层次逻辑关系；（2）对进入到数据库中的数据有一个有效性检查；（3）对数据库中的数据进行非逻辑操作进行相应的错误处理；（4）满足系统对性能上的要求。3 网站的基本框架3.1 网页的框架着手设计网站的第一

23、步，先做好网站的前期准备。包括：网站的策划、定位网站的主题、确定网站的栏目和结构、准备网站的素材、创建本地站点、制作网站、精加工。按照对楠溪江民宿网的最初构想，并且鉴于民宿网通常不需要官网那样传统规矩，而且目的在于鲜明的特色。便开始从特色的名字开始构思，以楠溪江为背景，最后确定“楠人一下吧”为民宿网站名称，便于确定民宿的主题风格。然后便开始勾画草图。包括首页跟框架页如下图所示。民宿logo欢迎语民宿联系信息导航栏致辞：宣传logo图片民宿美景图册展示温馨的一段话加图片民宿联系信息包括地址信息等友情链接是不是框架页框架3.2用Dreamweaver网页设计工具实现导航栏设计代码：<div

24、id="header"><div class="header-contents"><div id="site-logo"><a href="home.htm"></a><img src="./home_files/未标题.jpg" width="484" height="117"></div><div id="header-menu"><ul

25、 id="menu"><li class="header-menu-webdesign sub STYLE2"><a href="home.htm">首页<br><span>Home</span></a><ul><a href="home.htm"></a><li><a href="home.htm"></a></a><li>

26、;<a a=""></a></a></a></li></ul></li><li class="header-menu-webdesign sub STYLE2"><a href="nan'says.htm">楠人说<br><span>Nan says</span></a><ul style="display: none; "><a hr

27、ef="nan'says.htm"></a><li><a href="nan'says.htm"></a></a></li><a a=""></a><li><a a=""></a></a></li></ul></li><li class="header-menu-partner sub"&g

28、t;<span class="STYLE2"></span></a><a href="nan'facilities.htm">楠人的窝<br>Nan facilities</a> <ul><li><a </a></li></a><li></a><a href="nan'facilities.htm"></a></a><

29、/li></ul></li><li class="header-menu-client"><a href="nan'news.htm">楠人我最大<br><span>Nan News</span></a></li><li class="header-menu-about"><a href="nan'msg.htm">楠楠私语<br><span&g

30、t;Nan'msg</span></a> </li><li class="header-menu-contact sub"><a href="nan'line.htm">小楠在线<br><span>Nan line</span></a> <ul><li><a </a></li><a</a><li><a </a><a </

31、a></li></ul></li></ul></div><div id="header-service-info"><div class="service-contents"><span>这里没有老板，只有朋友！<br>No boss, only friends here!</span></div><div class="service-number "><span>tel：

32lt;/span></div><div class="service-number "><span>QQ：1230000</span></div></div><!-<div class="vision"><a href="/">中文版</a> - <a href="/en/">English</a></div>-></di

33、v></div>首页页中：<div class="main"></a><div class="left"><div class="home-title"><span class="STYLE3">楠人一下吧</span><h1>在这里 只有朋友 没有陌生 no stranger ，only friends！ 山间别墅，芳香四溢的桂花树，摇椅旁几只懒懒的猫猫狗狗、五湖四海的朋友，最in的旅游攻略大全。一切你可能需要的

34、，我们都已经为你做好了。 喝茶、聊天、发呆、恋爱、听听音乐、聊聊人生、沿着楠溪江江寻找梦中的世外桃源。人生就在美好中渡过！ 这就是你的家 </h1></div><div class="home-content-title"><img src="./home_files/楠人high.jpg" width="401" height="203"></div></a><div class="content-news">

35、</a><div class="home-news"></a><h2><span>2013/02/25</span></a><a href="nan'news.htm47.html">2013楠溪江杨梅节</a></h2><div>2013杨梅免费吃，周六去楠溪江杨梅节当“大胃王”，惟有爱与美食不可辜负，春暖花开，好好犒赏你的嘴. <a href="nan'news.htm47.html&qu

36、ot;>详细</a> </div></div><div class="home-news"><h2><span>2012/12/29</span><a href="nan'news.htm46.html">Hot!即日起，8人同行即可享受1人免单，好机会别错过，赶紧揪团走起</a></h2><div>很煽情很小清新的一句话：每个楠人都曾有个梦，走在不服输的路上。的确，楠人开吧以来，从最简单的. <a hr

37、ef="nan'news.htm46.html">详细</a> </div></div></div><div class="weibo"><img src="./home_files/30_2322_f0caedaa99b1467.jpg" width="400" height="255" hspace="10" vspace="10"></div></

38、div><!-end left-><div class="right"><div class="tool_pan"><div style="BACKGROUND: #fff7ee" class="weather"><iframe height="90" src="./home_files/weather.htm" frameborder="0" width="200" allo

39、wtransparency="" scrolling="no"></iframe></div><div class="toolss"><a href=" target="_blank">地图查询<br>Map Query</a><a href=" target="_blank">机票查询<br>Air Ticket Inquiry</a><a href=&q

40、uot; target="_blank">火车时刻<br>Train Timetable</a><a href=" target="_blank">汽车时刻<br>Auto Time Query</a><a href=" target="_blank">公交查询<br>Bus Inquiry</a><a href=" target="_blank">租车服务<br&g

41、t;Car For Rent</a><a href=" target="_blank">代驾车查询<br>Generation Driving Inquires</a><a href=" target="_blank">汇率查询<br>Exchange Rate Query</a></div></div><div class="slider-container"><div id="

42、slider"><div id="slider-contents" style="width: 536px; height: 226px; overflow-x: hidden; overflow-y: hidden; "><ul style="width: 3216px; margin-left: -1608px; "><li style="margin-left: -536px; float: left; "> <img src="./home

43、_files/s-9.jpg" width="536" height="262"> </li><li style="float: left; "><img src="./home_files/s-5.jpg" width="536" height="226"></li><li style="float: left; "><img src="./home_files/

44、s-6.jpg" width="536" height="252"></li><li style="float: left; "><img src="./home_files/s-7.jpg" width="536" height="262"></li><li style="float: left; "><img src="./home_files/s-8.jpg&

45、quot; width="536" height="262"></li><li style="float: left; "> <img src="./home_files/s-9.jpg" width="536" height="262"> </li><li style="float: left; "><img src="./home_files/s-5.jpg"

46、width="536" height="226"></li></ul></div> <span id="prevBtn"><a href="javascript:void(0);" onFocus="this.blur();">Previous</a></span> <span id="nextBtn"><a href="javascript:void(0);

47、" onFocus="this.blur();">Next</a></span></div></div><ul class="home-content-links"><li><a href="nan'facilities.htm"><img alt="" src="./home_files/home_contents_link_newmedia.png"></a>&

48、lt;/li><li><a href="nan'msg.htm"><img alt="" src="./home_files/home_contents_link_mediapurchase.png"></a></li></ul><div id="solution-slider"><div id="solution-slider-contents"><ul><!- &l

49、t;li> <img alt="" src="images/home_solution_slider_web.png" /></li>-><li><img alt="" src="./home_files/home_solution_slider_mediapurchase.png"></li></ul></div></div></div><!-end right-></div&

50、gt;页尾设计代码：<div id="footer"><div class="footer-container"><div class="copyright-info"><br>地址：楠溪江桃花源巷7号楠人一下吧 电话</div><div class="footer-nav-links"><div class="footer-nav-links-title">友情链接 | Frend

51、s Link</div><div class="footer-nav-links-list"><ul><li><a href=" target="_blank">游多多旅行网</a> </li> <li><a href=" target="_blank">远方网</a> </li><li><a href=" target="_blank"

52、>磨坊</a> </li><li><a href=" target="_blank">到到网</a></li></ul></div></div></div></div>4 网站数据库设计4.1系统的实现4.1.1 需求分析由于本课题偏重于前台的设计，对于后台功能只做基本的实现。通过之前的网站设计，需要实现系统的在线预订功能。下面是功能性需求描述：l 顾客可以利用此系统在线订房。l 顾客可以利用网站浏览民宿的房间详细信息，浏览房间

53、详细信息后可以选择预约订房。l 预约订房会显示一个月历，让顾客直接点选日期预约房间；如果按钮为黑色则表示可以预订房间，若该日期的房间已被预约，则该按钮改成灰色。l 顾客可以输入姓名和手机号码，即可进行订房。l 管理员在接到预订信息时，给予预订手机回复具体情况。l 管理员必须先登入系统才能执行操作。管理员可以修改房间详细信息、查询预约纪录与取消预约。具体包括：（1）房型设置：系统应具有输入民宿初始信息的功能，操作员需要通过这些信息来完成民宿的日常营业工作。（2）管理员管理：该模块主要实现增加或删除操作员并对用户权限加以控制，起到保护民宿信息安全作用。（3）客户登记：该模块是系统的核心。要求能够依

54、靠用户查询房态来确定入住房间，然后通过输入客户的信息，完成登记过程，同时更改房态。4 1.2 概要设计系统包含一个数据库，名为hotel book。其中有3张数据表：客房类型表（房间类型），客户预定信息表（预定单），客户预定历史信息表（预定单历史）。4.1.3 E-R图设计E-R图是实体-联系图，提供了表示实体、属性和联系的方法，下面列出了各表和表与表之间E-R图。客房类型表（房间类型）E-R图如下图所示。房间类型类型名称类型编号房间类型客房基本信息表（客房设置）E-R图如下图所示。备注房间编码类型编号房型介绍 房间价格房间状态房间描述客房设置客户预定信息表（预定单）E-R图如下图所示 预订单

55、类型编号 姓名退房日期手机号入住日期房间号码备注房间类型房间价格预订单4.2 数据表的逻辑结构设计结合实际，各实体对应的关系表、表属性、数据类型的设计如下。房间类型表结构如下表所示。表1房间类型表列名数据类型字段说明允许NULL备注类型编号int类型编号主键类型名称varchar(20)类型名称允许客户设置表如下表所示。表2客房设置表列名数据类型字段说明允许NULL备注房间号码varchar(12)房间号码主键类型编号int类型编号允许房态varchar（20）房态允许客房价格money客房价格允许客房描述varchar(60)客房描述允许备注varchar(60)备注允许预定单表如下表所示。

56、表3预定单表列名数据类型字段说明允许NULL备注预定单号varchar（60）入住单号主键姓名varchar（20）姓名允许联系电话varchar（20）联系电话允许入住日期smalldatetime入住日期允许退房日期smalldatetime退房日期允许房间号码varchar（12）房间号码允许类型编号int类型编号允许客房价格money客房价格允许备注varchar（510）备注允许5网站的具体设计5.1 设计流程各个阶段的原则5.1.1研究阶段明确网站要传达的核心理念：首页：关于民宿网站的介绍，带领使用者进入网站的其他区域。楠人说：展示民宿美景，具体介绍民宿。楠人的窝：介绍民宿房型以及

57、价目表，并展示房间图片，以及提供的设施，说明各种房型的内容差异，需要协助时候的联络信息。楠人我最大：发布民宿新闻。包括当地一些特色活动、特产伴手礼，以及民宿特色优惠活动和福利。楠楠私语：提供给使用者发布留言信息的平台，方便对民宿或者其他情况更详细的了解，也让驴友们有一个可以互帮互助的平台。小楠在线：提供在线服务，交通指南，介绍景点分布，提供特色行程等。其他：客栈预订界面，合作的旅游社群的友情链接，微信微博QQ群的信息协助等。5.1.2 架构阶段首先绘制一张网站地图，它包含了网站上所有的网页，是解释各个网页如何相互连接的说明。在开始设计之前，绘制一张网站地图，可以让你先了解这个网站将要如何实际运

58、作。然后就是所谓示意图，考虑各元件要怎样安排在网页上最妥当，哪几个元件该摆在最明显的位置，以及他们的关联性怎样。在描绘一些可能的版面设计之前，把希望出现在网页上的元件都列出来。包括：网站logo、民宿名称、联络信息、导览元件、民宿展示、其他一些温馨帮助信息，等等。5.1.3 互动阶段在一个网站上会产生许多形式的互动，从导览列上按下一个导览元件来找到你要的信息，在许多网页中来回穿梭，到填写表单，以及其中种种的互动。为了要留住使用者待在我们的网站上，必须能吸引住他才行。要完成这个目标，我们可以提供他们一种正面的使用经验，让他们又快又容易地找到他们所要的信息。并且避免障碍物阻挡了他们的去路。一个轻松

59、的网站使用者就是一个快乐的使用者。让网站尽可能地容易使用。5.1.4 美感阶段在截稿日期逼近的庞大压力以及技术困难普遍的情况下，在美感阶段打打马虎眼就混过去是很容易出现的情形。而好的设计和伟大的设计，差异其实只在一念之差。人们会对好的设计留下好印象，但是伟大的设计则会让他们兴奋：他们会喜爱所看到的，并且会想回来看更多。本网站虽然专注于设计部分，但是也不能忽略代码撰写的便利性。这个阶段要考虑的东西很多，包括黄金比列，三分法原则，架构的固定非固定，调整的自由性，艺术层面的情境与氛围，色彩的搭配，图像的处理，字体的设计等。在设计楠溪江民宿网的时候，我在色彩的选择上做了比较多的工作。色彩是影响外观设计

60、的最主要的因素之一，我们可以利用色彩来触发感觉，协助建立网站的品牌感，并作为一个引导原则来带领某个主题跨越整个网站及任何相关的材料。我选择了浅橙色作为整个版面的基调色，给人一种温馨的家的感觉，然后是黑白配的基本色调，虽然是保守色，却因为强烈对比，给人一种视觉冲击，很具有感染力。面临在惯例与创新之间寻求平衡的挑战时，我们很可能掉入惯例的温柔摇篮中使用最安全的选择，但这次我希望将惯例作为一个基础，然后在其上建立一些新颖的版面设计、字型或颜色，力求建立出一个对于使用者来说比较有趣的使用经验。借着兼顾惯例和创新两个方面的需求，使得网站不仅看起来可靠，更足以取得专业人士的注意力与保证；同时，也提供了一些前卫的思想与美丽的设计观念，来吸引使用者。接着就是保持设计上一致性的外观和知觉15。使得整个网站给人一种浑然天成的感觉。5.1.5 产出阶段最后通过Photoshop和Dreamweaver等工具，将网站完整的展示出来。5.2