大三期末前端页面开发论文

基于HTML5的达旅网站前台的设计与实现

**

（****学院 ****学院，四川 达州 *******）

摘要 ：对于一个网站来说，首先面向客户的就是网站的前台页面，不仅仅需要实现他的功能，更加需要的是给客户一个良好的第一印象。而对我们的旅游网站来说，前台就更加重要，还需要在页面上添加用户想要了解的东西：景点，酒店，小吃等等......而HTML5D搭配CSS就能较好的实现这些，前台的框架布局，颜色搭配，预留的表格表单来添加景点信息，使用户能更加直观明了的了解一些大概信息是我们要做的。

关键词 ：HTML5；CSS；大学生评测；设计与实现

Design and implementation of foreground of tourist website based on HTML5

Su xin（Department of Computer Science, Sichuan University of Intelligent Manufacturing Institute, Dazhou 635000,China）

Abstract :For a website, first of all, the client is the front page of the website, not only need to realize his function, but also need to give the customer a good first impression. To our tourism website, the front desk is more important, you need to add the user on the page to understand what attractions, hotels, snacks and so on... And... HTML5 can better achieve these, front frame layout, color collocation, reservation table to add attractions information, users can use more intuitive clear understanding of some information about what we have to do.

Keywords :HTML5,CSS;University Students' Evaluation;Design and Implementation

0引言

旅游业具有“无烟产业”和“永远的朝阳产业”的美称，他已经与石油，汽车产业并列为世界三大产业；根据WTTC的统计，他每年产出4.7万亿美金的收入，直接或间接地为700万人提供了就业机会，并且支持着数以万计的企业发展。

改革开放以来，我国的旅游业就有了非常迅速的发展，但是比较而言，我国国内的旅游业发展的广度远远不能适应经济发展和人民生活水平提高的需要。随着市场经济的发展和人民收入水平的提高，人们旅游消费的需求将进一步上升，国内旅游业在国民经济中的地位和作用越来越重要。

但是我国旅游产业任然基础薄弱，管理手段滞后，信息化程度低，企业益效差。旅游行政管理部门存在管理方式落后，缺乏信息化管理手段，信息沟通渠道不畅通等问题，面对困难和挑战，我国旅游业必须转换观念，创新思维，以信息化建设为突破口和创新手段，整合各种资源，从而实现整个行业的新跨越。

1相关技术简介

1.1 Ajax技术

Ajax是一种创建交互式网页应用的网站前端开发技术，其核心是JavaScript对象——XmlHttpRequest。Ajax主要提供与服务器异步通信的能力，从而使用户从请求 / 响应的循环中解脱出来。借助于Ajax可以在用户单击按钮时使用JavaScript和DHTML立即更新UI，并向服务器发出异步请求，以执行更新或查询数据库的操作。当请求返回时，就可以使用

JavaScript和CSS来相应地更新UI，而不是刷新整个页面。最重要的是，用户甚至不知道浏览器正在与服务器通信[1]。因而使用Ajax可以构建更为动态和响应更灵敏的Web应用程序，

更能提高系统性能，优化用户界面。

1.2 HTML5技术

标准通用标记语言下的一个应用HTML标准自1999年12月发布的HTML4.01后，后继的HTML5和其它标准被束之高阁，为了推动Web标准化运动的发展，一些公司联合起来，成立了一个叫做 Web Hypertext Application Technology Working Group （Web超文本应用技术工作组 -WHATWG） 的组织。WHATWG 致力于 Web 表单和应用程序，而W3C（World Wide Web Consortium，万维网联盟） 专注于XHTML2.0。在 2006 年，双方决定进行合作，来创建一个新版本的 HTML。

HTML5手机应用的最大优势就是可以在网页上直接调试和修改。原先应用的开发人员可能需要花费非常大的力气才能达到HTML5的效果，不断地重复编码、调试和运行，这是首先得解决的一个问题。因此也有许多手机杂志客户端 是基于HTML5标准，开发人员可以轻松调试修改。

1.3 CSS技术

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

2网页制作

2.1制作步骤

网站是网页的集合，一个网站用的所有网页构成一个完整的网站，网页设计就是指对这个整体页面的外观设计，设计包括：格局，配色，内容，图片等等......网页设计包含的内容非常多，大体分为两个方面：一方面是纯网站本身的设计，比如文字排版，图片制作，平面设计，静态图文和动态声音，影像等等......另一方面就是网站设计的延伸：包括网站主题，浏览群的定位，智能交互，功能实现等等。而我需要做的就是第一部分，网站本身的页面设计。

网页设计的第一步就是设计布局，就像报纸排版一样，将页面分成一个个分区，再将需要的信息慢慢添加到各个分区上。

新页面就是一张白纸，没有约定俗成的东西，可以发挥自己的想象力布局，也可以参考传统网站的布局。

2.2常用参数

由于用户的网络状况各不相同，所以需要考虑到图片的格式加载速度，如果图片加载很慢，用户就会很快对网站失去兴趣，只有充分了解图片质量于下载速度的关系，并了解不同的文件格式，才能更加有效地表达内容。

分辨率可以直接控制文件大小和下载速度，进而影响访问者的人数，创建WEB图片的要求是小，快，好。显示器的分辨率也起决定性的作用，大多数的显示器使用的1024*768的分辨率，应为要通过显示器页面，所以分辨率并不会增加图片质量相反还会降低图片的下载速度。

制作好的效果图可以保存为各种格式，包括GIF,JPGE和PNG格式等个个图片格式之间的区别为：GIF格式图形交换格式；GIF格式的图片只能使用256中颜色，不能是和现实色彩丰富的图像内容。JPGE格式可以显示颜色复杂的图片。PNG兼有二者的优点。

2.3网页布局

常见网页版式布局结构有以下几种：

两栏式结构，即页面顶部为网站标志或广告条，下面分为左右两栏，一般左栏式导航或分类信息，右栏为主要内容，这种布局很容易掌握，但如果在色彩上不加以注意的，很容易给人一种“乏味”的感觉。三栏式结构是一些大型网站常用的布局结构，一般为上面是横幅的广告条，下面分为三竖栏，中间较大，是主要的信息，左右是小条内容或者广告条。三栏式给人一种充实的感觉，但页面拥挤，不够灵活，是网站常用的一种布局形式。“三”型结构，这种结构多用于国外网站或者视频类网站，其特点是分类清晰，展示方便。左右框架型，是企业网站或论坛常用的布局，页面分为左右两部分，左边一般为导航部分，右边是与导航相对应的内容。左右框架型的结果非常清晰，内容一目了然，便于信息的查询。上下框架型与左右框架型类似，其区别仅仅在于形式。页面整体为横向分布，上面为导航，中间的大展式窗口很突出，整个网站显得简洁明亮，这种结构适合于信息量不大，主要靠图片展示内容的网站。Flash型主要采用现在流行的Flash技术，页面表达的内容较为丰富，给人视觉和听觉上很大的冲击，处理得当会达到Web页面难以达到的效果。

这次我的页面采用的是这样的布局

首页

风景区子页面

2.4 网页色彩

网页的色彩搭配起着很重要的作用，不同的色彩给人不同的心理暗示，能够影响我们的情绪。而且色彩搭配的好能给人空间感，层次感，亲切感。

色彩的空间感，具体表现在利用色彩的明度对比层次、形与色的排列转折、大小弯曲等秩序节奏，从而有意识地形成凹凸深远的空间感，甚至利用人的错觉形成假象空间色彩的前进、后退感形成的距离措视原理、在网页中常被用来加强画面的空间层次。

色彩的亲切感是指人对色彩的对比变化所产生的亲近的心理感觉。通常较为明快柔和的色彩都能使人产生亲切感，色彩的纯度对比和明度对比较弱时，也会使整体色调变得柔和、轻快。产生亲切感的网页一般采用同类色、类似色和邻近色。

色彩的亲切感是指人对色彩的对比变化所产生的亲近的心理感觉。通常较为明快柔和的色彩都能使人产生亲切感，色彩的纯度对比和明度对比较弱时，也会使整体色调变得柔和、轻快。产生亲切感的网页一般采用同类色、类似色和邻近色。

2.5 细节把握

页面的成功是否，在一些细节上也有决定性作用，网站中在各个标题的前面适当的加些图标点缀网页，可以使网页效果更加出彩，但是切忌网页图标使用过多，图标的色调也要一致，避免杂乱。

网站中文字的运用，用户在浏览网页时，主要是要看网页当中的文字内容，所以要特别注意文字的处理。一是文字的颜色不要和背景颜色相近，这样用户在浏览文字信息时会非常的吃力；二是不要乱用字体，你使用的字体在本机上可以显示，但是到了别人的电脑上就不一定能显示出来了；三是注意文字之间的行距，通常我们不对文字进行行距的设置时，文字间的行距会非常小；影响页面的美观度，注意文字间的行距，使其不会显得特别挤，做到宽松有序。

使用了图文搭配，左文右图，看起来更加的美观

在有些界面还能适当的使用一些优美的背景音乐，这会使用户的心情舒畅。

只需要添加进一个音乐文件就能实现这个简答又有效的效果

2.6 常用工具介绍

用来制作效果图的软件并没有明确的规定。可以使用各种图形制作软件和处理软件，现在通常使用的软件是PHOTOSHOOP和FIREWORKS。在制作效果图时，使用的软件对最终结果并没有什么影响，用自己精通的即可。 Photoshop是一款非常好用的平面设计软件。由Adobe公司开发设计，其用户界面易懂、功能完善、性能稳定，是比较专业的图像处理软件，它具有强大的滤镜功能。所以，在很多的的广告、出版、软件公司，Photoshop都是首选的平面工具，它有很多的快捷方式，如抓手工具H键，TABLE键切换显示或隐藏所有的控制板，D键、X键迅速切换前景色和背景色等，灵活的运用快捷键，可以使设计的速度大大提高。Fireworks是网页开发图形处理工具，可以做出矢量的图形，主要是和Dreamweaver配合做网页。对处理一般的网页图片比较实用，而且学起来也比Photoshop易上手，是一个入门级的网页设计软件。

3异常处理

HTML 5(text/html)浏览器将在错误语法的处理上更加灵活。HTML 5在设计时保证旧的浏览器能够安全的忽略掉新的HTML 5代码。与HTML 4.01相比，HTML 5给出了解析的详细规则，力图让不同的浏览器即使在发生语法错误时也能返回相同的结果。

4结束语

网页制作主要是利用图形制作软件和处理软件进行网页效果图的制作。我们需要了解一个完整网站的制作过程，并知道网页制作在网站制作中的作用。一方面结合具体的实例，多加练习，培养对于技术的敏感和快速适应性，注意到技术变化带来的各种新的可能性，消除技术所形成的障碍；另一方面要多方面、多角度地感受与掌握电脑设计的时尚语言，扩展对传统设觉设计范畴的认识。

5致谢词

这是我第一次写论文，有很多都不会做，看了很多模板，在网上查了很多论文，才东平西凑的吧这次论文完成，希望老师谅解。

写论文通常是一项非常枯燥的工作，但幸运的是他们使这项工作变成了一种乐趣。还有默默无闻帮过我的朋友，也在此表示对你们诚挚的感谢。

参考文献

[1] 胡崧. HTML 从入门到精通[M].北京：中国青年出版社，2007.

[2]知新文化. HTML 完全手册与速查辞典[M].北京：科学出版社，2007.

[3]杨选辉.网页设计与制作教程[M].北京：清华大学出版社，2009.

[4]李光明，曹蕾，余辉.中文 Dreamweaver 8 网页设计与实训教程[M].北京：冶金工业出版 社，2006.

[5]陈季. Flash 基础与实例教程[M].北京：北京希望电子出版社，2005.

[6]赵祖荫，王云翔，胡耀芳.网页设计与制作教程[M].北京：清华大学出版社，2008.

[7] http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html