第10章旅游网站框架网页设计()

Web网页设计报告2012 年 12 月01 日目录一引言 (2)1.1网站建设概述 (2)1.2规划思路 (3)二网站总体分析与设计 (3)2.1系统的功能结构 (3)2.2 系统的功能特点 (4)2.3 页面设计 (4)三各个功能模块的实现 (4)3.1 信息记录 (4)3.2 信息浏览功能 (5)3.3具体实现 (6)四总结 (8)一引言新的世纪，互联网进入一个崭新的阶段，信息化的发展带动其它产业的发展，各行业都将与它进行更深入的融合和渗透。

，互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、经济、生活等各个方面发挥着重要的作用。

为了适应知识经济社会的需要，促进学习与交流。

网上交流和协作的功能比较普遍；技术管理和资源管理受到重视。

随着互联网的普及和发展，必将有越来越多的企业及个人在英特网上拥有自己的网站。

网站建设成为企业形象宣传、产品展示推广、客户沟通的最新最快捷的桥梁；成为个人展示自我，与世界交流的重要平台。

越来越多的人已开始从对互联网的认知阶段进入到认同和行动阶段。

Internet上发布信息主要是通过网站来实现的，获取信息也是要在Internet“海洋”中按照一定的检索方式将所需要的信息从网站上下载下来。

因此网站建设在Internet应用上的地位显而易见，它已成为政府、企事业单位信息化建设中的重要组成部分，从而倍受人们的重视。

为了更好的协作，更多的与外界交流新的信息，和他人共享信息，特构建旅游网站。

1.1网站建设概述此次设计的项目是构建一个九寨沟旅游网站，有个人信息记录系统,网站主要实现旅游信息查询系统部分,使访问者可查询旅游有关的信息。

1.2规划思路网站的基本风格是简洁明快的界面、实用的旅游讯息和个性化的社区。

网页设计的构思是：(1)主页上有标志物，能让浏览者一眼就知道是主页。

(2)用到CSS模板制作网页，这样子的网页比较有一致性。

(3) 各个页面上都有漂浮物，运用JavaScript实现动态效果。

旅游网站策划方案一、客户需求分析：互联网正在慢慢地改变生活，这已经不仅仅是概念的演绎，在生活工作的各个方面，都留下了互联网的印记。

旅游业也不例外，据统计，网上旅游业销售额已经占到全球电子商务销售额的20%以上。

随着假日旅游、自助旅游、各种主题旅游的兴起，旅游网站也焕发着春天般的气息，一个好的网站对旅游资源的宣传和游客出行计划都有着积极的意义，让游客们有备而来、尽兴而归。

通过网站开展相关旅游资源的电子商务整合和旅游资源的管理都将会是旅游业不可回避的现实。

二、网站功能和内容：1、网站功能：前台实现功能（1）新用户注册（2）密码修改功能（3）分类信息搜索后台实现功能（1）用户注册信息管理（2）分类信息管理1）旅游企业的旅游产品能够通过互联网得到广泛的、全面的宣传，让尽可能多的旅游企业、旅游者了解和熟知旅游企业的产品以及产品特色，旅游企业服务。

2）能够通过互联网寻到新的合作伙伴，拓宽市场销售渠道。

3）能够通过网站和客户之间达成直接交流，收集客户意见。

4）能够为企业的旅游产品提供直接销售的空间，旅游企业通过互联网宣传企业产品的过程中能够直接接收到网上的游客订单。

5）能够关心旅游企业在具体业务过程中提供便利、快捷、实惠的信息；互联网能够充分体现网络优势，关心企业实现散客网上成团，即使散客不成团企业需要独立操作时。

2.栏目架构三、系统功能：本公司开发人员拥有丰富的大型网站开发经验，在网站建设方面拥有丰厚的底蕴和积累，在旅游综合信息建设、旅游电子商务预订、旅游B2B电子商务平台建设方面均有自己独特完整的解决方案。

该系统主要包括：新闻发布系统、旅游线路发布及预订系统、游客出游意向询价系统、在线散客拼团系统、电子杂志订阅分发系统、电子邮件营销系统、在线市场调查系统、统计系统、动态栏目更新、专业旅游论坛系统、后台管理及权限分配等。

系统采用Browse/Server模式，既用户端采用浏览器方式。

下面简单介绍各子系统功能：1、新闻发布系统多栏目：可依据需要建立数个新闻栏目。

旅游网站设计与建立——鑫鑫旅行网系别：专业：年级：姓名：指导教师：摘要本文就旅游网站的设计与建立，以软件工程的方法对全过程进行了分析与研究，本文的主要工作集中在：1.对WEB页进行概述，主要是对旅游网站的历史和发展作了回顾，并对WEB 页的定义和特性进行阐述，并对网站设计过程中使用的工具和技术简单的介绍.2.对网站建设中提及的术语进行简单解释，并对网站的由来和发展进行讨论。

3.对自己设计的网站从设计理念到制作的过程进行详细分析.4.使用Dreamweaver+Flash+photoshop 等软件的设计方式进行解析。

5.就网站的设计与制作提出自己的观点以及建议。

关键词：网站；设计工具；设计方案；创意；风格引言随着Internet的蓬勃发展，人类已经意识到了网络的巨大用途。

网络的实时性、无区域性成为吸引全世界人类的巨大诱惑力。

如今Internet国际互联网已在我国普及，越来越多的社会团体、企事业单位，在互联网上建立自己的网站。

社会的发展和科学的进步，上网成为越来越多人们的选择。

随着国民经济的发展,旅游业也迅速的发展起来,它增进了中国人民同世界各国人民交往的友谊,而且促进了中国的对外开放,开辟了新的就业门路,对于提高民族素质等都有积极作用。

因此我们应大力发展旅游行业,更应该利用网络这个传播工具来扩展它的影响力和传播速度及范围,来共享资源。

网络发展前景无限，及早与网络结合，与信息时代同步，与高科技汇合，定会给社会各行各业的发展注入新鲜的活力。

站在网络时代的前夜，我们清晰地听到了网络时代的宣言：谁掌握了网络，谁就掌握了未来。

第1章绪论1.1系统开发背景目前，随着科技的发展，时代的进步。

传统的地图与广告已经远远不能满足人们的信息需求，在当今这个年代，人们更愿意的是从网络获得信息，快速而庞大的信息量是其他途径所不能媲美的，而现代旅游网站的产生必定能给人们带来无限的便捷，它是现代旅游人士所迫切需求的。

自互联网Internet成为一种革命性的大众媒体以来，其发展速度之快令人惊叹。

web旅游网站课程设计一、课程目标知识目标：1. 学生能理解并掌握Web旅游网站的基本结构及其功能模块。

2. 学生能掌握HTML、CSS等网页设计基础知识，并运用到旅游网站的制作中。

3. 学生了解旅游网站设计中的用户体验和界面设计原则。

技能目标：1. 学生能够独立进行旅游网站的需求分析，编写网站设计方案。

2. 学生能够运用网页设计工具，完成旅游网站静态页面的设计与制作。

3. 学生能够运用适当的编程语言实现旅游网站的动态功能，如搜索、预订等。

情感态度价值观目标：1. 学生培养对旅游网站设计工作的兴趣和热情，增强对网络信息技术的认识和应用。

2. 学生在团队协作中学会沟通、分享和合作，培养良好的团队精神。

3. 学生通过学习旅游网站设计，提高对国家旅游资源的关注和保护意识。

课程性质：本课程为信息技术课程，结合了网页设计、编程和旅游相关知识，注重实践性和应用性。

学生特点：学生为八年级学生，具备一定的信息技术基础，对网络应用有较高的兴趣，喜欢探索新事物。

教学要求：课程要求学生在掌握基本理论知识的基础上，注重实践操作，通过团队协作完成一个具有实际应用价值的Web旅游网站项目。

教师需关注学生的学习进度，提供个性化指导，确保学生达到预期学习成果。

二、教学内容1. 网页设计基础知识：HTML、CSS基本语法，网页结构及布局。

- 教材章节：第一章 网页设计与制作基础- 内容列举：HTML标签、属性，CSS选择器、盒模型，响应式布局。

2. 旅游网站结构及功能模块分析：网站导航、景点介绍、在线预订、用户评论等模块。

- 教材章节：第二章 网站结构及功能模块- 内容列举：旅游网站常见功能模块及其实现方法，用户体验设计原则。

3. 网页设计工具使用：如Dreamweaver、Photoshop等。

- 教材章节：第三章 网页设计工具- 内容列举：工具的基本操作、快捷键，简单网页效果制作。

4. 网站编程基础：JavaScript、PHP等编程语言实现网站动态功能。

旅游网站的网页设计网页设计,旅游网站华东交通大学理工学院课程设计报告书所属课程名称网页设计与制作课程设计题目网站首页分院电信分院专业班级学号学生姓名指导教师程志平xx年 1月 4日目录第一章绪论 ........................................................ .. 11、网站设计的目 . (1)2、网站的主题 (1)3、网站规划 (1)第二章网页整体设计 (2)1、创建HTML (2)2、创建CSS 文件 (2)第三章网页详细设计 (3)1、头部的和导航栏设计 . (3)2、布局页面——左边栏 . (4)3、布局页面——中间 . (6)4、布局页面——右边 . (8)5、布局页面——下部 . (11)第四章课程设计心得 (13)1、充分发挥动手能力 . (13)2、在设计过程中不断提高网页设计水平 (13)3、不足之处 (13)第五章__ (14)第一章绪论1、网站设计的目本学期通过对《网页设计与制作》的学习，让我了解到了如何让设计网页，以及一些基础的网页设计的知识和对Dreamweaver 软件的基础应用，学习到了运用一些基本的网页设计工具和原则来制作和美观网页。

比如PS ，背景图片，文字，超链接，布局，框架，多媒体等等。

通过这次设计，进一步的提高了我的网站设计能力和动手能力，更加全面的巩固了我在课堂上学到的知识，掌握了网站设计的一些方法和步骤，了解了网站的基本结构，熟悉了规范和标准。

2、网站的主题主题：某企业网站首页3、网站规划我设计网页的布局，整体上我借鉴了一些公企业网站，我才用了其中的一些布局，分块。

而我主要采用了布局模式，div+css来设计，背景图片，然后再插入超链接，图片等等，这样就形成了整个网页的布局设第二章网页整体设计1、创建HTML首先打开DW 软件建立一个站点，我取名为未命名站点2，如下图2-1图2-1将网站建好后把网页源代码，css 文件，图片等放在相应的目录下。

关于旅⾏社⽹站项⽬⽹页布局的设计思路⽤HTML5和CSS3构建Web页⾯创建项⽬1.创建index.html⽂件 添加html5基本格式2.创建img和css两个⽬录3.创建css⽂件存放在css⽬录中，并在html5⽂件中加⼊css⽹站结构参考⼀些同类型的⽹站，了解⼀下⼤致结构，这次要做的⽹站是⼀个旅⾏社的⽹站，经过参考，⾸页上选择了3个模块 <header>header</header> 头部 包括Logo+导航 <nav> 标签定义导航链接的部分<section>section</section> 主体<footer>footer</footer> 尾部第⼀个页⾯：主页头部logo 采⽤的是h1标签 ⼀般为了让搜索引擎更好的抓取关键字，我们建议⼀个页⾯只有⼀个h1 ⽽且是最重要的关键词放在⾥⾯，在⾸页上，最重要的关键词就是旅⾏社的名称，当然如果其他页⾯，⽐如新闻⽹站的单个新闻最重要的应该是新闻标题 ⽹站的名称就其次了css隐藏⽂字的⽅法 text-indext:-9999在建站的过程中 ⼀般⼈喜欢把⽹站名称⽤h1来表⽰ 但是从美观的考虑，要⽤logo图⽚来替代h1这种情况下需要隐藏h1内的这段⽂字，但⼜不能对搜索引擎不友好，否则就失去了定义h1标签的意义<!-- 头部导航 --><header id="header"><div class="center"><h1 class="logo">瓢城旅⾏社</h1><nav class="link"><ul><h2 class="none">⽹站导航</h2><li class="active"><a href="飘城旅⾏社门户.html">⾸页</a></li><li><a href="旅游咨询.html">旅游资讯</a></li><li><a href="机票订购.html">机票订购</a></li><li><a href="风景欣赏.html">风景欣赏</a></li><li><a href="公司简介.html">公司简介</a></li></ul></nav></div></header>@charset "utf-8";body,h1,ul {margin: 0;padding: 0;}ul {list-style: outside none none;}a {text-decoration: none;}#nav {width: 100%;height: 70px;background-color: #333;}#nav .center {width: 1263px;height: 70px;margin: 0 auto;}#nav .logo {width: 240px;height: 70px;background-image: url(../img/logo.png);text-indent: -9999px;float: left;}#nav .link {width: 650px;height: 70px;line-height: 70px;color: #eee;float: right;}#nav .link li {width: 120px;text-align: center;float: left;}#nav .link a {color: #eee;display: block;}#nav .link a:hover,#nav .active a {background-color: #000;}搜索区在header的下⾯ 设计⼀块搜索区，从表⾯上来分析，就是插⼊⼀张背景⼤图，然后居中⼀个搜索条<!-- 搜索框 --><div id="search"><div class="center"></div><input type="text" class="search" placeholder="请输⼊旅游景点或城市"><button class="button">搜索</button></div>#search{width: 100%;min-width: 1263px;height: 600px;background: url(../img/search.jpg) no-repeat center;position: relative;}#search .center{width: 600px;height:60px;background-color: #000;position:absolute;top: 50%;left: 50%;margin: -30px 0 0 -300px;opacity: 0.6;border-radius: 10px;}#search .search{width: 446px;height: 52px;background-color: #eee;position: absolute;top: 50%;left: 50%;margin: -27px 0 0 -296px;color: #666;border: 1px solid #666;border-radius: 10px;font-size: 24px;padding: 0 10px;outline: none;}#search .button{width: 120px;height: 54px;background-color: #eee;position: absolute;top: 50%;left: 50%;margin: -27px 0 0 175px;color: #666;border: 1px solid #666;border-radius: 10px;font-size: 24px;outline: none;cursor: pointer;font-weight: bold;}主体内容⾸页最核⼼的部分，旅游区这块内容由两个部分组成，⼀个是⼤标题，表⽰热门旅游区域，其次就是旅游项⽬的图⽚展⽰区域可以⽤<figcaption> 标签定义 figure 元素的标题，为放⼊的图⽚添加⽂字内容⼀共有九个图⽚，每个图⽚的html设计都是⼀样的，所以下⾯的代码中我只放了三张图⽚的内容，后⾯复制6次修改⼀下对应的内容就⾏了<!-- 热门旅游 --><div id="tour"><section class="center"><h2>热门旅游</h2><p>国内旅游、国外旅游、⾃助旅游、⾃驾旅游、油轮签证、主题旅游等各种最新热门旅游推荐</p></section><figure><img src="img/tour1.jpg" alt=""><figcaption><strong class="title">&lt;曼⾕-芭提雅6⽇游&gt;</strong> 包团特惠，超丰富景点，升级1晚国五，⽆⾃费，更赠送600元/成⼈⾃费券 <div class="info"><em class="sat">满意度 77%</em><span class="price">￥ <strong>2864</strong> 起</span></div><div class="type">国内长线</div></figcaption></figure><figure><img src="img/tour2.jpg" alt="马尔代夫双鱼岛Olhuveli4晚6⽇⾃助游"><figcaption><strong class="title">&lt;马尔代夫双鱼岛Olhuveli4晚6⽇⾃助游&gt;</strong> 上海出发，机+酒包含:早晚餐+快艇<div class="info"><em class="sat">满意度 97%</em><span class="price">¥ <strong>8039</strong> 起</span></div><div class="type">出境长线</div></figcaption></figure><figure><img src="img/tour3.jpg" alt="海南双飞5⽇游"><figcaption><strong class="title">&lt;海南双飞5⽇游&gt;</strong> 含盐城接送，全程挂牌四星酒店，⼀价全含，零⾃费“⾃费项⽬”免费送<div class="info"><em class="sat">满意度 90%</em><span class="price">¥ <strong>2709</strong> 起</span></div><div class="type">⾃助旅游</div></figcaption></figure></div>#tour {width: 1263px;height: 1200px;/*background-color: #ccc;*/margin: 30px auto;text-align: center;}#tour .center h2 {font-size: 45px;letter-spacing: 2px;color: #666;margin: 10px 0;}#tour .center p {color: #666;margin: 10px 0;}#tour figure {border: 1px solid #ddd;display: inline-block;padding: 4px;border-radius: 4px;border-radius: 4px;margin: 15px 12px;width: 380px;text-align: left;position: relative;}#tour figure img {vertical-align: middle;}#tour figcaption {color: #777;line-height: 1.5;letter-spacing: 1px;font-size: 14px;padding: 7px 0 5px 0;}#tour .title {color: #333;font-weight: normal;}#tour .sat {float: right;font-size: 13px;color: #999;font-style: normal;position: relative;top: 5px;right: 5px;}#tour .price {color: #f60;font-size: 14px;}#tour .price strong {font-size: 20px;letter-spacing: 1px;}#tour .type {width: 90px;height: 25px;line-height: 25px;font-size: 14px;text-align: center;color: #fff;background-color: #59b200;position: absolute;top: 4px;left: 4px;}底部这部分区域由两个部分组成，⼀个是说明内容，有：合作伙伴、旅游FAQ和联系⽅式，最下⾯的是版权声明等整个底部为<footer id="footer">，整个底部⼜分为上⾯部分<div class="top"> 和 下⾯部分<div class="bottom"> 两个div，上⾯部分⼜分为左边部分<div class="block left"> 、中间部分<div class="block center"> 和 右边部分<div class="block right"> 三个div<footer id="footer"><div class="top"><div class="block left"><h2>合作伙伴</h2><hr><ul><li>途⽜旅游⽹</li><li>驴妈妈旅游⽹</li><li>携程旅游</li><li>中国青年旅⾏社</li></ul></div><div class="block center"><h2>旅游FAQ</h2><hr><ul><li>旅游合同签订⽅式？</li><li>⼉童价是基于什么制定的？</li><li>旅游的线路品质怎么界定的？</li><li>单房差是什么？</li><li>旅游保险有那些种类？</li></ul></div><div class="block right"><h2>联系⽅式</h2><hr><ul><li>微博：/ycku</li><li>邮件：ycku@</li><li>地址：江苏盐城⽆名路123 号</li></ul></div></div><div class="bottom">Copyright © YCKU 瓢城旅⾏社| 苏ICP 备120110119 号| 旅⾏社经营许可证：L-YC-BK12345</div> </footer>height: 360px;background-color:#222;}#footer .top{width: 1263px;height:281px;margin:0 auto;text-align: center;}#footer .block{width: 410px;height: 280px;display: inline-block;text-align: left;color: #ccc;vertical-align: top;}#footer h2 {font-size: 24px;font-weight: normal;padding: 20px 0 0 20px;}#footer hr {width: 90%;border: 1px dashed #333;}#footer ul {font-size: 18px;color: #777;text-indent: 20px;line-height: 2;}#footer .bottom {height: 80px;line-height: 80px;text-align: center;color: #777;background-color: #000;border-top: 1px solid #444;}第⼆个页⾯：旅游咨询后⾯的页⾯与主页在某些部分是重复的，如何把⾸页重复的部分移植到新的页⾯⽽减少冗余，最恰当的⽅法就是:将CSS部分中重复⽤的部分分离出来，单独创建⼀个CSS，以便后续的页⾯重复调⽤分离CSS 引⼊到新的页⾯后，还要为⼦栏⽬创建⼀个标头，不能使⽤⾸页的search那么⼤的了，只能重新做⼀个⼩的，放在标头部分创建⼀个basic.css把头部和底部的css样式放⼊其中，style.css中留下搜索和⼤图部分的css样式，旅游咨询的部分放⼊column.css头部和底部跟主页的是⼀样的头部下⾯的背景图<div id="headline"><div class="center"><hgroup><h2>旅游资讯</h2><h3>介绍各种最新旅游信息、资讯要闻、景点攻略等</h3></hgroup></div></div>主体内容中间部分中间的九个图⽚html是⼀样的，所以下⾯放了两个图的代码，后⾯的复制然后修改对应的内容就⾏了<div class="list"><div class="infor"><ul class="left"><li><a href="###">限时特价</a></li><li><a href="###">热门推荐</a></li></ul><ul class="right"><li><a href="###" class="selected">推荐</a></li><li><a href="###">折扣</a></li><li><a href="###">价格</a></li></ul></div><figure class="tour"><img src="img/tour1.jpg" alt="曼⾕-芭提雅6⽇游"><figcaption><article><header><hgroup><h2>曼⾕-芭提雅6⽇游</h2><h3>包团特惠，超丰富景点，升级1 晚国五，⽆⾃费，赠送600元成⼈券...</h3> </hgroup></header><ol><li><mark>交通</mark>：春秋航空,杭州出发,⽆需转机</li><li><mark>团期</mark>：11/01、11/03、11/08...</li></ol><div class="buy"><div class="price">￥<strong>2864</strong> <s>¥3980</s></div><div class="reserve"><a href="###">⽴即抢购</a></div></div><div class="type">国内长线</div><div class="disc"><span>4.7折</span></div><footer>本团游由瓢城旅⾏社赞助提供，截⽌于<time>2015-10-10</time></footer> </article></figcaption></figure><figure class="tour"><img src="img/tour2.jpg" alt="马尔代夫6⽇⾃助游"><figcaption><article><header><hgroup><h2>马尔代夫6⽇⾃助游</h2><h3>双鱼岛Olhuveli4晚，上海出发，机+酒包含:早晚餐+快艇...</h3></hgroup></header><ol><li><mark>交通</mark> 春秋航空,杭州出发,⽆需转机</li><li><mark>团期</mark> 11/01、11/03、11/08...</li></ol><div class="buy"><div class="price">¥<strong>8039</strong> <s>¥9980</s></div><div class="reserve"><a href="###">⽴即抢购</a></div></div><div class="type">出境长线</div><div class="disc"><span>7.7折</span></div><footer>本团游由瓢城旅⾏社赞助提供，截⽌于<time>2015-10-10</time></footer> </article></figcaption></figure><div class="more">加载更多...</div></div>右边部分<aside class="sidebar"><div class="sidebox recommend"><h2>景点推荐</h2><div class="tag"><ul><li><a href="###">曼⾕(12)</a></li><li><a href="###">东京(5)</a></li><li><a href="###">西双版纳(8)</a></li><li><a href="###">漓江(16)</a></li><li><a href="###">呼伦贝尔(4)</a></li></ul></div></div><div class="sidebox hot"><h2>热门旅游</h2><div class="figure"><figure><img src="img/hot1.jpg" alt="曼⾕-芭提雅6⽇游"> <figcaption>曼⾕-芭提雅6⽇游</figcaption></figure><figure><img src="img/hot2.jpg" alt="马尔代夫双鱼6⽇游"> <figcaption>马尔代夫双鱼6⽇游</figcaption></figure><figure><img src="img/hot3.jpg" alt="海南双飞5⽇游"><figcaption>海南双飞5⽇游</figcaption></figure><figure><img src="img/hot4.jpg" alt="富⼭⼤阪东京8⽇游"> <figcaption>富⼭⼤阪东京8⽇游</figcaption></figure></div></div><div class="sidebox treasure"><h2>旅游百宝箱</h2><div class="box"><a href="###" class="trea1">天⽓预报</a><a href="###" class="trea2">⽕车票查询</a><a href="###" class="trea3">航空查询</a><a href="###" class="trea4">地铁线路查询</a> </div></div></aside>column.css@charset "utf-8";#headline {width: 100%;min-width: 1263px;height: 300px;background: linear-gradient(to right bottom, rgba(0,0,0,0.7), rgba(0,0,0,0)), url(../img/headline.jpg) no-repeat center; }#headline .center {width: 1263px;height: 300px;margin: 0 auto;}#headline hgroup {padding: 100px 0 0 50px;}#headline h2 {color: #eee;font-size: 36px;letter-spacing: 1px;}#headline h3 {color: #eee;font-size: 20px;letter-spacing: 1px;}#container {width: 1263px;height: 1200px;margin: 30px auto;}#container .sidebar {width: 320px;height: 1200px;background-color: #eee;float: left;}#container .list {width: 920px;height: 1200px;background-color: #ccc;float: right;}后⾯的⼏个页⾯都有相同的部分，布局都差不多，把不同的部分写出来就⾏了。

旅游网站课程设计一、课程目标知识目标：1. 学生理解旅游网站的基本结构，掌握网站的导航、搜索、预订等核心功能；2. 学生掌握旅游网站中常见的旅游产品、目的地介绍、用户评论等信息的呈现方式；3. 学生了解旅游网站设计中需遵循的法律法规及网络安全知识。

技能目标：1. 学生能够运用HTML、CSS等编程语言，设计并实现一个简单旅游网站的页面布局；2. 学生能够使用数据库技术，实现旅游网站中旅游产品、用户评论等信息的存储与展示；3. 学生具备分析用户需求，优化旅游网站界面和功能的能力。

情感态度价值观目标：1. 学生培养对旅游网站设计工作的兴趣，激发创新意识和团队协作精神；2. 学生认识到旅游网站在旅游产业发展中的重要性，树立为旅游业发展贡献力量的意识；3. 学生在学习过程中，遵循网络道德规范，尊重他人知识产权，养成合法合规使用网络资源的良好习惯。

课程性质：本课程为信息技术课程，旨在通过实践操作，让学生掌握旅游网站设计与开发的基本技能。

学生特点：本课程针对初中生，他们对新鲜事物充满好奇，动手能力强，但可能缺乏系统性的编程知识。

教学要求：结合学生特点，课程要求教师采用案例教学、任务驱动等教学方法，注重理论与实践相结合，引导学生主动探索、动手实践，提高学生的实际操作能力。

同时，注重培养学生的团队协作意识和创新精神，使学生在掌握旅游网站设计与开发技能的同时，树立正确的价值观。

通过分解课程目标为具体的学习成果，便于后续教学设计和评估。

二、教学内容1. 旅游网站概述- 旅游网站的定义与分类- 旅游网站的发展现状与趋势2. 旅游网站功能模块- 导航栏设计与实现- 搜索引擎优化- 旅游产品展示与预订- 用户评论与互动3. 旅游网站页面布局与设计- HTML、CSS基础- 页面布局与响应式设计- 旅游网站视觉设计原则4. 数据库技术在旅游网站中的应用- 数据库基础知识- 旅游网站数据库设计- 旅游产品、用户评论等信息的存储与展示5. 旅游网站安全与法律法规- 网络安全基础知识- 旅游网站常见安全问题及防护措施- 旅游网站法律法规及合规要求6. 旅游网站项目实践- 项目需求分析与规划- 网站功能模块设计与开发- 网站测试与优化教学内容安排与进度：第一周：旅游网站概述、功能模块介绍第二周：HTML、CSS基础及页面布局第三周：旅游网站视觉设计原则、数据库基础知识第四周：旅游网站数据库设计、网站安全与法律法规第五周：项目实践（一）：项目需求分析与规划第六周：项目实践（二）：网站功能模块设计与开发第七周：项目实践（三）：网站测试与优化教学内容与教材关联性：以上教学内容紧密结合教材，按照教材章节进行系统性地组织，确保学生在学习过程中能够掌握旅游网站设计与开发的核心知识和技能。

旅游网站设计策划书1、旅游网站设计策划书设计概念(6个点):1)、首要了解网站改提供给顾客什么信息，顾客的需求还有消费水平。

2)、提供苏州旅游景点和旅馆饭店的路线以及分布图。

3)、介绍各类旅游景点的优惠信息等等。

4)、提供当地的文化信息已经民生风格。

5)、预定服务信息。

6)、苏州的饮食文化等等。

网络市场分析(4个点):1)、对旅游市场分析。

2)、对餐饮市场分析。

3)、对景点旅店、宾馆分布的市场分析。

4)、对旅游产品市场分析。

网站栏目架构(品牌展示模块、在线服务模块、在线交流模块):3)在线交流模块(论坛互动交流系统)论坛互动交流系统主要是开放给客户们交流的平台，可以发表旅游主题见闻,让大家一起来探讨,也可以提出一个问题,大家一起来解决等,实现人与人语言文化共享的平台，使我们能够与顾客保持实时性、互动性。

网站版面设计(5个点):1)、优化视图，实时实用，简约明了，让顾客一目了然。

2)、动画效果，增加生动效果，更加吸引顾客。

3)、网站设计图文并茂、排版合理、有苏州地方旅游特色的风格、条目清晰、不单调。

4)、以服务顾客为核心，顾客是上帝。

5)、关注行业资讯动态，及时更新网站信息。

1)品牌展示模块(旅游信息发布系统、景区景点展示系统、景点导航演示系统、诗词游记管理系统、风景图片展示系统、精彩视频展示系统):旅游信息发布系统景区动态、景区公告、行业信息、政策法规等多种分类信息发布，可自定义分类或无限级别设置，支持文本、图片、动画、视频等多种表现形式，各类信息内容可体现在任意网站频道或页面，前台发布十分简易，并灵活设置审核、发布模式。

如需批量信息录入或大量的信息转载时，该系统更拥有批量文本导入添加和远程信息全智能化采集功能。

景区景点展示系统按照景区的划分或推荐的旅游线路详细展示景区内各景点的风景特色、历史渊源以及文学典故等，支持文本、图片、动画、视频等多种表现形式，不拘一格。

景区、景点展示不是一味的平铺直叙，还可以与景区公告、相关游记、风景图片、经典视频甚至门票预定、特产购买实现同步互动，为游客提供最便捷的浏览操作和最具体的景点印象。

《现代教育技术》实验指导Frontpage2003 框架网页制作框架网页是一种特殊的 HTML 网页，它可将浏览器窗口分成称为框架的不同区域，每个区域都可以显示不同的网页。

例如，使用“横幅和目录”框架网页模板创建的框架网页包含三个框架：横幅、目录和主框架。

框架网页本身并不包含可见内容，它只用来指定要显示的其他网页及其显示方式。

单击框架中显示的网页上的超链接时，该超链接指向的网页通常显示在另一个框架，即目标框架中。

框架网页通常用于目录、文章或信息列表、或任何其他的网页上，在一个框架中单击超链接会在另一个框架中显示相应网页。

使用框架网页是因为框架网页能够包含内置导航并显示一致的用户界面（即框架的结构和布局）。

例如，在基于“横幅和目录”框架网页模板创建的框架网页中，可以使用横幅框架在其 Web 站点上显示网站的LOGO标志及主要导航菜单（一级菜单）。

一、创建框架网页1. 在“文件”菜单上，选择“新建”，在右侧面板中选择“其他网页模版”。

2. 在弹出的“网页模版”中选择“框架网页”选项卡。

3. 单击要使用的框架网页模板，如“自顶向下的层次结构”，然后单击“确定”。

4. 设置要显示在每个框架中的初始网页：单击要设置初始网页的框架，然后执行下列操作之一：单击框架中的“设置初始网页”，选择一个已经建立好的网页作为框架初始页面。

方法为:从当前工作文件夹的已创建网页列表中选择网页；或者在“查找范围”框中，查找要打开的网页；或者通过单击浏览到要使用的网页；或者在“地址”框中，键入网页的URL。

在要为其设置初始网页的框架中单击“新建网页”。

FrontPage 将在该框架中创建一个新网页，这个新网页会自动设成初始网页，然后在这个窗口中与正常制作网页一样插入内容或进行编辑。

二、编辑框架中的内容如果正在“网页”视图的“设计”视图中编辑框架网页，则可以通过单击选择想要编辑的网页；如果框架的尺寸太小编辑起来不方便，那么可以在一个新的全屏窗口中打开要编辑的网页。

旅游网站制作课程设计一、课程目标知识目标：1. 学生能理解旅游网站的功能模块及其设计原理，掌握基础的网页设计知识；2. 学生能运用HTML和CSS进行网页布局和样式设置，了解JavaScript在网页中的应用；3. 学生掌握如何运用网络素材和原创资源丰富旅游网站内容，提高网站的吸引力。

技能目标：1. 学生能独立进行旅游网站的规划与设计，包括网站结构、导航栏、内容布局等；2. 学生能够运用网页制作软件或代码编写工具，实现旅游网站页面的设计与制作；3. 学生通过实际操作，提高解决问题的能力，培养团队协作和沟通技巧。

情感态度价值观目标：1. 学生培养对旅游网站制作的兴趣，激发创新意识和探索精神；2. 学生认识到网络技术在旅游业中的重要性，增强信息时代的社会责任感；3. 学生在学习过程中，遵循网络安全和版权法规，培养诚信、尊重他人成果的价值观。

课程性质分析：本课程为信息技术课程，以实践操作为主，理论讲授为辅。

针对学生特点，注重培养学生的学习兴趣和实际操作能力。

学生特点分析：学生为初中生，对新鲜事物充满好奇，具备一定的计算机操作基础，但需要进一步引导和培养创新思维和实际应用能力。

教学要求：结合学生实际情况，采用任务驱动和项目教学的方法，使学生在实践中掌握旅游网站制作的知识和技能。

通过课程学习，分解目标为具体的学习成果，便于教学设计和评估。

二、教学内容1. 旅游网站概述- 网站功能模块介绍- 网页设计基本原理2. 网页设计与制作技术- HTML基础语法- CSS样式设置与布局- JavaScript基础应用3. 旅游网站规划与设计- 网站结构设计- 导航栏与菜单设计- 内容布局与版面设计4. 网页制作实践- 网页制作软件使用- 代码编写与调试- 网络素材与原创资源应用5. 网站测试与发布- 网站兼容性测试- 网站优化与上传- 网站宣传与推广教学大纲安排：第一周：旅游网站概述及功能模块介绍第二周：HTML基础语法学习第三周：CSS样式设置与布局第四周：JavaScript基础应用第五周：网站结构设计与内容规划第六周：导航栏与菜单设计第七周：内容布局与版面设计第八周：网页制作实践第九周：网站测试、优化与发布第十周：课程总结与评价教学内容关联教材章节：- 《信息技术》教材第七章：网页设计与制作- 《信息技术》教材第八章：网站建设与管理教学内容注重科学性和系统性，结合课程目标，有序安排教学进度，确保学生能够逐步掌握旅游网站制作的相关知识和技能。

Web网页设计报告2012 年12 月01 日目录一引言 (3)1.1网站建设概述 (3)1.2规划思路 (3)二网站总体分析与设计 (4)2.1系统的功能结构 (4)2.2 系统的功能特点 (4)2.3 页面设计 (5)三各个功能模块的实现 (5)3.1 信息记录 (5)3.2 信息浏览功能 (6)3.3具体实现 (7)四总结 (8)一引言新的世纪，互联网进入一个崭新的阶段，信息化的发展带动其它产业的发展，各行业都将与它进行更深入的融合和渗透。

，互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、经济、生活等各个方面发挥着重要的作用。

为了适应知识经济社会的需要，促进学习与交流。

网上交流和协作的功能比较普遍；技术管理和资源管理受到重视。

随着互联网的普及和发展，必将有越来越多的企业及个人在英特网上拥有自己的网站。

网站建设成为企业形象宣传、产品展示推广、客户沟通的最新最快捷的桥梁；成为个人展示自我，与世界交流的重要平台。

越来越多的人已开始从对互联网的认知阶段进入到认同和行动阶段。

Internet上发布信息主要是通过网站来实现的，获取信息也是要在Internet“海洋”中按照一定的检索方式将所需要的信息从网站上下载下来。

因此网站建设在Internet应用上的地位显而易见，它已成为政府、企事业单位信息化建设中的重要组成部分，从而倍受人们的重视。

为了更好的协作，更多的与外界交流新的信息，和他人共享信息，特构建旅游网站。

1.1网站建设概述此次设计的项目是构建一个九寨沟旅游网站，有个人信息记录系统,网站主要实现旅游信息查询系统部分,使访问者可查询旅游有关的信息。

1.2规划思路网站的基本风格是简洁明快的界面、实用的旅游讯息和个性化的社区。

网页设计的构思是：(1)主页上有标志物，能让浏览者一眼就知道是主页。

(2)用到CSS模板制作网页，这样子的网页比较有一致性。

(3) 各个页面上都有漂浮物，运用JavaScript实现动态效果。

旅游主题web课课程设计一、教学目标本课程旨在通过学习旅游主题的设计与制作，使学生掌握设计的基本原理和方法，培养学生运用网络技术进行信息搜集、处理和传播的能力。

知识目标：学生能够理解并掌握旅游主题的基本设计原理，了解制作的基本流程。

技能目标：学生能够运用HTML、CSS等网页设计技术，独立完成一个旅游主题的设计与制作。

情感态度价值观目标：通过本课程的学习，学生能够增强对旅游文化的认识，提高对网络技术的应用能力，培养创新精神和团队协作意识。

二、教学内容本课程的教学内容主要包括旅游主题的设计原理、制作技术以及发布与维护。

1.旅游主题的设计原理：介绍设计的基本原则，如页面布局、色彩搭配、字体选择等。

2.制作技术：教授HTML、CSS等网页设计技术，让学生能够实际操作并制作出符合设计原理的旅游主题。

3.发布与维护：介绍的发布流程，如域名注册、上传等，并讲解的日常维护知识。

三、教学方法为了提高教学效果，本课程将采用多种教学方法相结合的方式进行教学。

1.讲授法：讲解旅游主题的设计原理和制作技术。

2.案例分析法：分析优秀的旅游主题案例，使学生更好地理解并掌握设计原理。

3.实验法：学生在实验室进行制作实践，提高实际操作能力。

4.小组讨论法：学生分组进行设计，通过小组讨论、协作完成制作。

四、教学资源为了保证教学质量，本课程将提供丰富的教学资源。

1.教材：选用权威、实用的教材，为学生提供系统、全面的学习资料。

2.参考书：提供相关的参考书籍，丰富学生的知识储备。

3.多媒体资料：制作精美的PPT、视频等多媒体资料，提高学生的学习兴趣。

4.实验设备：提供充足的实验室设备，确保学生能够进行充分的实践操作。

五、教学评估为了全面、客观地评价学生的学习成果，本课程将采用多种评估方式。

1.平时表现：评估学生在课堂上的参与度、提问回答等情况，占总评的20%。

2.作业：评估学生完成的设计作业，主要包括页面布局、色彩搭配、字体选择等方面，占总评的30%。

旅游web课课程设计一、教学目标本课程旨在通过学习旅游Web的相关知识，让学生掌握设计与开发的基本技能，能够运用HTML、CSS、JavaScript等技术构建一个功能简单的旅游Web。

在知识目标方面，学生需要了解Web的基本结构，掌握HTML标签的使用、CSS样式的设计以及JavaScript脚本的编写。

在技能目标方面，学生需要能够独立设计并开发一个旅游Web，提升其实践操作能力。

在情感态度价值观目标方面，学生通过本课程的学习，能够增强对信息技术在旅游行业中应用的认识，培养对旅游行业的热爱和敬业精神。

二、教学内容本课程的教学内容主要包括HTML、CSS和JavaScript三个部分。

首先，学生需要学习HTML的基本标签及其使用方法，包括标题、段落、图片、链接等。

其次，学生需要掌握CSS的基本语法和用法，能够独立设计的布局和样式。

最后，学生需要了解JavaScript的基本语法和功能，能够编写简单的交互式脚本。

在教学过程中，我们将结合实际案例，让学生在动手实践中掌握相关知识。

三、教学方法为了提高学生的学习兴趣和主动性，本课程将采用多种教学方法。

首先，通过讲授法，向学生传授基本概念和理论知识。

其次，利用案例分析法，让学生通过分析实际案例，加深对知识点的理解和运用。

此外，通过讨论法，鼓励学生积极参与课堂讨论，培养其团队协作和沟通能力。

最后，通过实验法，让学生动手实践，提高其实际操作能力。

四、教学资源为了支持教学内容和教学方法的实施，我们将选择和准备适当的教学资源。

教材方面，将选用权威、实用的旅游Web设计与开发教材。

参考书方面，将推荐学生阅读一些与旅游Web设计与开发相关的书籍。

多媒体资料方面，将收集一些旅游Web的设计案例，供学生分析和参考。

实验设备方面，确保学生能够 access 到充足的计算机设备，以便进行实践操作。

五、教学评估本课程的教学评估将采用多元化评价方式，全面客观地评价学生的学习成果。