《Web前端框架应用》课程设计报告.docx

PAGE2

武汉软件工程职业学院

《web前端》课程设计报告

2017-2018学年度第二学期

题目：云南大理景点介绍

姓名：吴猛达

班级：1712

系部：计算机学院

指导教师：鄢军霞

日期：2018年7月1日

目录

1、网站的目的和功能…………………3

2、网站的主要内容……………………3

2.1页面的风格……………………3

2.2页面布局规划…………………4

2.3主要的页面介绍………………4

3、主要组件的使用……………………4

3.1栅格系统的使用及截图………4

3.2表单的使用及截图……………5

3.3表格的使用及截图……………5

3.4按钮的使用及截图……………6

3.5图像的使用及截图……………6

3.6图标的使用及截图……………7

3.7导航的使用及截图……………7

3.8缩略图的使用及截图…………8

3.9媒体对象的使用及截图………8

3.10字体图标的使用及截图……9

3.11进度条的使用及截图………9

3.12巨幕的使用及截图…………9

3.13面板的使用及截图…………10

3.14徽章的使用及截图…………10

4、JS插件的使用………11

4.1**插件的使用及截图………11

4.2**插件的使用及截图…………11

4.3**插件的使用及截图…………12

4.4**插件的使用及截图…………12

5、运行情况及总结……………………13

一、网站目的及功能概述

网页为旅游宣传网站，主要是宣传旅游景点。

网页宣传网站的功能模块不是很多，主要涉及网站首页、新闻动态、景区介绍、景区服务、观览景区、历史文化、在线订票等，其中历史文化、观览景区分类别展示其中信息，而其他功能都是单独一个页面来展示。（此为示例）

二、网站的主要内容

2.1页面的风格

网站采用不同的色彩搭配，使用不同型号的字体，使整个充满活力，特别是网站首页动态图的使用，使网站更加形象逼真，页面布局采用栅格栏系统分成左右两个部分，里面介绍了云南大理旅游景点的一些情况，网站首页图片展示了云南地方区域的美景。整体上体现出了云南旅游业的文化及其美景。

2.2页面布局规划

页面首先用了一个轮播图，轮播图充实了整个页面，不管是子页面还是主页面，轮播图是固定不变的，其次采用一个导航栏，通过选项卡的使用把导航栏分成了八个子页面，首页采用面板，图片，旅游攻略，表格，表单，按钮等的使用介绍了云南的一些基本情况，子页面则详细介绍了云南的必威体育精装版动态，旅游景点，景区服务，在线订票等等。

2.3主要页面的介绍

首页面简单介绍了云南的位置信息，旅游景区人数占比，旅游攻略，风景展示，旅游指南及想旅游的联系方式等，新闻动态介绍了云南最近旅游业各方面的信息。景区介绍则介绍了云南主要几个旅游景点的气候特征，地理特征，当地风俗，景区名字由来，景区特色等，景区服务则介绍了当地美食，可在线订单，方便快捷，观览景区则通过许多图片的展示，体现出了云南各旅游地点风景独特之美。

三、主要组件的使用

3.1栅格系统

divclass=row

divclass=col-md-3

spanclass=text-muted大理洱海/span

/div

divclass=col-md-9

divclass=progress

divclass=progress-barprogress-bar-stripedactiveprogress-bar-infostyle=width:85%;

span85%/span

/div

/div

/div

/div

divclass=row

divclass=col-md-3

spanclass=text-muted大理石林/span

/div

divclass=col-md-9

divclass=progress

divclass=pr