web前端框架应用-课程设计报告

1、武汉软件工程职业学院WEB前端框架应用课程设计报告题目：张家界景点的介绍.姓名：吴刚.班级：软件 17121712. .系部：计算机学院.指导教师：鄢军霞.日期：20182018年7 7月5 5日如17-20117-201学年度第学期1、网站的目的和功能22、网站的主要内容22.1页面的风格22.2页面布局规划22.3主要的页面介绍33、主要组件的使用35栅格系统的使用及截图35表单的使用及截图85表格的使用及截图105按钮的使用及截图115图像的使用及截图125图标的使用及截图125导航的使用及截图135缩略图的使用及截图135媒体对象的使用及截图145字体图标的使用及截图155进度条的使用

2、及截图.165巨幕的使用及截图.175面板的使用及截图.175徽章的使用及截图.184、JS插件的使用19模态框插件的使用及截图19轮播插件的使用及截图20下拉菜单插件的使用及截图21按钮插件的使用及截图225、运行情况及总结23网站目的及功能概述网页为旅游宣传网站，主要是宣传湖南省张家界市三个（天门山、国家森林公园、大峡谷）著名的旅游景点。网页宣传网站的功能主要涉及网站首页的张家界市的介绍、景点介绍（天门山、国家森林公园、大峡谷）、等。为了让广大旅客能更加详细的了解张家界市各个景区的历史文化，旅客可以选择注册会员。本网站主打让旅客为来张家界旅游提供信息，不支持在线购票功能。网站的主要内容页面

3、的风格网站采用不同的色彩搭配，每个子页面都采用不同风格的背景图片及背景颜色，也使用不同字号及颜色的字体， 给字体加上背景使其整个子页面充满活力， 本网站采用了轮播图和导航栏，特别是网站首页表格，巨幕，缩列图和进度条以及滚动条的使用，使网站更加形象逼真，页面布局采用栅格栏系统分成左右两个部分，网站介绍了张家界旅游景区的一些比较有名的景点，整体上体现出了张家界各个景区的美景。页面布局规划页面首先用了一个轮播图，轮播图充实了整个页面，使其网页美观，子页面和主页面的轮播图是固定不变的，其次采用一个导航栏，通过选项卡的使用把导航栏分成了5个子页面和搜素栏组件，首页采用面板，图片，表格，表单等。介绍了张家

4、界的一些基本情况，子页面采用了适当的缩略图，滚动条以及下拉菜单来介绍了景区各个景点的一些情况主要页面的介绍首页面简单介绍了张家界的位置信息，旅游景区人数占比，风景展示，旅游指南，体现出了张家界各个旅游景点独特之美。3 3、主要组件使用3.13.1栅格栏系统的使用参考代码张家界简介张家界地址：湖南省张家界市三个景区人数与全市景区的人数占比天门山30%20%activestyle=width:80%;大峡谷30%森林公园progress-bar-infoprogress-bar-striped上述景区占全市的景区人数divclass=progress-barprogress-bar-warning

5、progress-bar-striped80%张家界5A级景区旅游人数增力口张家界旅游。据了解，张家界旅游业稳定发展。在刚刚过去的5月，张家界各景点共接待旅游者299.61万人次，同比增长21.55%;实现旅游收入18.87亿元，同比增长27.05%。1至5月，全市各景点共接待旅游者1046.48万人次，同比增长11.4%;接待过夜游客707.82万人次，同比增长10.90%,其中接待境外游客65.58万人次，同比增长17.89%;实现旅游收入65.93亿元，同比增长14.5%,其中旅游外汇收入1.46亿美元，同比增长24.15%.张家界是湖南省辖地级市，原名大庸市，辖2个市辖区（永定区、武陵

6、源区）、2个县（慈利县、桑植县）。位于湖南西北部，澧水中上游，属武陵山区腹地。张家界因旅游建市， 是中国最重要的旅游城市之一， 是湘鄂渝黔革命根据地的发源地和中心区域。1982年9月，张家界国家森林公园成为中国第一个国家森林公园。1988年8月，武陵源风景名胜区列入第二批国家重点风景名胜区；1992年，由张家界国家森林公园等三大景区构成的武陵源自然风景区被联合国教科文组织列入世界自然遗产名录；2004年2月，被列为中国首批世界地质公园；2007年，被列入中国首批5A级景区。景区照片展示Time2018年6月25日天门山大峡谷/森林公园栅格栏系统运行效果图守务整品封卿阴仲融砂 E喇也4WI国训载

7、盛阴蛀间和：EOIXI院知I*T.隆Ml加慎热巾加版金HTHIE3.3.2 2表单的使用参考文献本网站会员登陆l杂M MfUfUu ui iu u如睡京 ft!3 33131U UM M田3 34tdzSW4tdzSW超值同扪XlSEEtEXlSEEtE lKEEElKEEEMTUIMTUItop;background-size:100%100%;账号：密码：回class=btnbtn-primary忘记密码class=btnbtn-success登陆pull-rightpull-right返style=width:style=width:61730空间承载量22.3设施承载量19.6最佳舒适

8、承载量24.63.3表格的使用参考文献张家界市主要景区游客最大承载量测算结果单位：万人次/日类型武陵源瞬时承载量（人）表格运行效果图始釉糕即才沿后靛飘融靴：5嫦日iJii普辅锚潮大解知山物才鞋幡I121即曲湖5tk18金3 3，3晔加HJ644443.4按钮的使用参考文献下载图片1查看图片1按钮运行效果图图像的使用参考文献玻璃栈道图像事由效果图天口山璘天门山或琬枚1一距0ME。天口山翱枝道图标的使用参考文献输入成功图标使用的运行效果图缩略图的使用参考文献3.7导航的使用参考文献首 页天门山国家森林公园大峡谷注册/登陆搜索导航使用的运行效果图/div缩略图使用的运行效果图媒体对象的使用参考文献大

9、峡谷玻璃桥玻璃桥大峡谷玻璃桥玻璃桥张家界大峡谷玻璃桥名云天渡，位于湖南省张家界大峡谷景区栗树娅和吴王坡区域内，是一座景观桥梁，这在世界桥梁建设史上极为少见。媒体对象使用的运行效果图戏微髓球薪城腌麟制就北的输nnnn域成鲤雕跟毯则丸卜萼患依上防俄机箴、雕、玲、曲甜董.涮蛛一朗野.时图网i i筋k k片曜褥解福胜浏丸质镶耳通直艇区， 料,隹廓行雇粕都蹈麒书相第相下螂翩辟籁浦微心用昨掷鬻曹判耨”温的泊便僦脚,fcSWt.fcSWt.1 1幽HIHI好揖洲糊1 1阻馥膜堆即朦夸践?解?R力Q?F1 1镰聊塌蝶期， 般I I潮遒露鞋坳霜崛哪期献雌款卿螂公爵茯撒赛删,触加械辄稠啾t tRtMfeFWkw.

10、RtMfeFWkw.蹄题t tH H以棘.画牖二廊髓S S（肌工般标上鸣1 1竭树.相的口赫,方脑上触f f博*就短的,钟辨H H眦枷好,由建艇卜.稿城版怖成地网.；：-途m m熊；.七交向味气：&工门-字体图标的使用参考文献字体图标使用的运行效果图进度条的使用参考文献30%大峡谷20%进度条使用的运行效果图参考文献张家界是湖南省辖地级市，原名大庸市，辖2个市辖区（永定区、武陵源区）、2个县（慈利县、桑植县）。位于湖南西北部，澧水中上游，属武陵山区腹地。张家界因旅游建市，是中国最重要的旅游城市之一，是湘鄂渝黔革命根据地的发源地和中心区域。1982年9月，张家界国家森林公园成为中国第一个

11、国家森林公园。1988年8月，武陵源风景名胜区列入第二批国家重点风景名胜区；1992年，由张家巨幕使用的运行效果图赫祐肺御嬲韩热IJ.徽小惟区出水、僦邮、2 2 悭（都去建般）,也刊睛醮孤m品，F鼬跚也耨相螭就,是帼最舞瞰嬲祓相聘畿崎辘地的发函制中如19821982 判比条案界国家鼾捺国就肿闰蹲一个国家 4 4 林公瓦 1919 邮用月，忒段泓凤提名性 I I 例人第二#国家十点网景名胜印联 2 2 年 r r 修家相韩楸对把大部触帧麴自颍翱费黔幽科趣融伙泄界自嬲产名小； 弭债陋中柏批 （f ft t界械版 h h2W2W 阵翻入帼前嬲躯.3.13面板的使用参考文献力口张家界旅游。据了解，张家

12、界旅游业稳定发展。在刚刚过去的5月，张家界各景点共接待旅游者299.61万人次，面板使用的运行效果图弓氏筑VtPAVtPA”tH-1tH-1-沉匕薪*人琏坤？ln3.12巨幕的使用张家界5A级景区旅游人数增比蒙旅游。师厂角举*张春方占淤业市言定应辰江网UkJUiUkJUiCKr5CKr5月强手界告景点共接寺旅游吉之99.8199.81方人；欠，F 上匕厘长21.55%21.55%；去上见原;脂UMUM入1818石7f7f乙元.回匕匕0 02705/2705/o o1 1至5 5月 n 全市齐母点大按传依法学考j j。464a464a% %人；欠.回上匕上曾长11.4%11.4%；土妾传过f f

13、攵法？左7 7。了一&2 27 7亍人:攵 n 同匕匕/瞥氏3 3。一9 9。-日中接待更夕卜济宇S5.58万人次，|司匕七4 4伯氏17.89/17.89/二女王见方/跖半U U女入65.965.93 3彳乙无+|司上匕上曾长14.5%14.5%* *H H中旅游夕卜子厂U U欠入1 1.46E.46E7 7：美元3 3同L L匕增长之4 4J J5%.5%.3.14徽章的使用参考文献查看图片1下载图片1徽章使用的运行效果图*叫w眦港膈螂隔出IBJS插件的使用模态框插件的使用参考文献buttontype=buttonclass=closedata-dismiss=modal”&

14、;times;对不起，你的电脑没有联网！请联网后再重试！关闭保存模态框插件使用的运行效果图轮播插件的使用参考文献天门山350px;imgsrc=img/天门山/007.jpgalt=2slidestyle=height:天门山玻璃栈道$(#mycarousel).carousel(interval:1500,wrap:true)轮播使用的运行效果图下拉菜单插件的使用参考文献图片系歹U风景li玻璃栈道li天门山liclass=divider美食li小笼包li花生米/ul4.4按钮插件的使用参考文献发送$(function()$(data-toggle=tooltip).tooltip(););按

15、钮使用的运行效果图5 5、运行情况及设计总结情况：页面运行良好，但不同电脑显示略有差别，总体情况还好!总结1、做了哪些工作，有什么特色？收集资料，搜集张家界各个景区的景点特点，从而更好的去介绍旅游景点，设计模板位置，给人以优雅、形象、大方、.求知感。网页设计过程中栅格系统、表格、表单、按钮、图像、图标js插件、导航、缩略图、媒体对象、字体图标、进度条、巨幕、面板、徽章等的灵活应用。让页面更加清晰、排版更具优美，简单明了，吸引浏览者眼球。2、期间遇到了什么问题？是否解决？如解决是怎么解决的？轮播图片一开始设置不了满屏，和主页与子页面之间不能链接，所有子页面和主页面都显示在同一个页面中，位置错杂，

16、通过向同学，特别是有向室友请教，加上自己聪敏的脑壳，终于找到了错误之处，发现原来是div、2在有些地方用多或者用少，通过给轮播图设置相对于的属性和增加（删减）多余的div、/div0终于设计属性才可以达到我想的效果。3、个人感想在学习网页的制作过程， 我深深体会到一点“有付出， 就终有回报”， 付出与回报终究是成正比的。经过了多少漫漫长路，经过了多少忘我的投入，经过了多少波折，我的网页与众人见面了。我会好好学习这门课程，去不断的学习，去不断的收货；同时去不断的充实，去不断的完善属于我自己的网页。WebWeb 前端框架应用课程设计评分表姓名吴刚班级17121712序号2121张家界景区的介绍项目子项目评分标准分分 实际得分策划书（课程设计报告）15分确定网站的目的和功能，并根据需要对网站设计的技术、内容、立面的布局等进行规划15页面风格20分页面主题明确、题材新颖、构思独特，