旅游网网页制作
目 录
一 、引言 1
(一) 设计目的： 1
(二) 设计内容： 1
(三) 开发技术： 1
(四)开发工具： 1
二 .网站内容规划 1
(一) 网站的栏目和网站结构 1
(二) 主要页面的布局策划 2
1. 网站首页布局 2
2. 网站二级页面布局 2
2.1二级页面布局--旅游景点 2
2.2二级页面布局--酒店推荐 3
2.3二级页面布局--淮安地图 4
2.4二级页面布局--留言板 4
3. 网站三级页面布局 5
三 .网站设计 5
(一) 网站设计流程： 5
(二) 网站色调定位色彩搭配： 6
(三) 网站的logo设计： 6
（四）网站的首页设计： 6
(五) 网站的子页设计： 7
5.1 子页设计--旅游景点 7
5.2子页设计二--酒店推荐 7
5.3子页设计三--淮安地图 8
5.4子页设计四--留言板的页面设计 9
5.5子页设计五--景点介绍详情 9
5.6子页设计六--旅游景点的页面实现 10
5.7子页设计七--酒店推荐介绍 11
四 、网站特效的实现 13
（一）网站主体背景的实现： 13
(二) 网站导航功能的实现： 13
(三) 网站的菜单的悬浮效果的实现： 14
(四) 图片切换的的实现 15
(五) 图片文字的滚动实现 17
(六) 图片淮安地图放 *好棒文|www.hbsrm.com +Q: ^3^5^1^9^1^6^0^7^2^*
大的实现 18
五 、 遇到的问题与解决方案 20
致 谢 22
参考文献 23
一 、引言
设计目的：
淮安旅游网站为大家推荐了旅游景点，特色美食介绍，酒店推荐，以及行车路线，和用户留言板的信息，可以让没来过淮安的人，基本的对这座城市有个大概的了解和选择，不至于刚来这座城因为不熟悉而被不良商家坑。
设计内容：
淮安旅游网网站设计的内容模块包括了旅游景点推荐、美食介绍、酒店推荐、淮安地图、留言这些主要的介绍内容。首页的内容主要是景点推荐，和淮安的地方简介，让大家一看来就可以看到淮安的特色景点和历史来源，淮安简介的文字部分了采取了js的无缝滚动特效，可以不间断的向上无缝滚动，旅游景点部分主要写景点推荐。美食介绍的部分主要推荐当地的美食,酒店推荐的部分主要推荐当地实惠的酒店，淮安地图，这个主要写淮安的地摊，带地图悬浮放大的js特效，留言板部分主要是一个留言界面。
开发技术：
网站首页和别的子页的布局都用了div+css来布局，留言板的部分表单那块用了表格，文字滚动和图片切换以及地图的部分采取了javascript来编写。
(四)开发工具：
1. Dreamweaver 8简介
MacromediaDreamweaver 8这是一款简单易学的网页制作工具，可以让初学者短时间做出来一个很简单的网页，因为软件界面里设置了插入图片，插入视频，插入超链接等智能化的操作，也可以用这款软件快速的生成个页面框架布局，用起来很方便，同时也能用这款软件来检测自己的代码写得是否有错误。
2. Adobe Photoshop CS4 简介
Adobe Photoshop CS4 是一款闻名世界的处理图像的软件，它是由Adobe公司研发出来的，可以快速的处理图片，比如去水印，修复图片，软件里面有对应的修复和去水印工具，简单易学，只要耐心去学，可以很快的让初学者上手。
二 .网站内容规划
(一) 网站的栏目和网站结构
淮安旅游网网站设计，网站主要从网站首页、旅游景点、美食介绍、酒店推荐、淮安地图、留言板等模块介绍网站的主要内容。结构示意图如图2-1所示：
图2-1 网站结构示意图
(二) 主要页面的布局策划
1. 网站首页布局
首页的最上面是网站的logo，是一行简单的文字，下面的是菜单导航部分，然后是淮安这座城市的简介，简介部分采取了js无缝滚动的特效，再下面是淮安重点旅游景点和美食和酒店的部分推荐。最下面的是版权部分。
首页示意图如图2-2所示：
图2-2 网站首页面布局图
网站二级页面布局
网站的旅游景点的网页风格和首页差不多，主要修改了中间的部分内容，底部都头部都是直接复制首页写好的，中间的部分内容主要写淮安旅游网站的推荐排版布局用div+css来写的。内容分为了两列的介绍，一列放一个图片文字，推荐的景点有周恩来、铁山寺、明祖陵等知名景点推荐。
2.1二级页面布局--旅游景点
旅游景点这个页面的布局和首页差不多，主要复制了首页的内容，然后头部和底部不动，主要修改中间的部分，都是图文结合，一排写两个景点介绍，都是左边图右边文字，这块布局排版都是用div+css来写的
网站二级旅游景点页面布局如图2-3所示：
图2-3 网站二级页面布局
2.2二级页面布局--酒店推荐
酒店推荐的这个页面主要复制了美食介绍的这个页面，菜单和底部都是直接拿来用的，然后中间的部分都是左图右字，主要推荐
网站酒店推荐如图2-4所示：
图2-4 网站二级页面布局
2.3二级页面布局--淮安地图
淮安地图这个页面，复制了酒店推荐的这个页面，头部和底部的代码，中间的部分全部删除，然后用一个大的div层包裹，直接放一张地图的大图，之后再用js来实现鼠标悬浮放大的效果
如图2-5所示：
图2-5 网站二级页面布局
2.4二级页面布局--留言板
这个页面是复制淮安地图的那个页面来写的,头部和底部的也是不动，主要还是修改中间的部分，之前的那块大地图删除，用div层浮动的属性，左右两边分别加一个div层，左侧是用表格写的留言板，右边直接放了一个图片
网站二级留言板布局如图2-6所示：
图2-6 网站二级页面布局
3. 网站三级页面布局
网站的三级页面的布局都一样，三级页面的内容主要是酒店的详细介绍和美食的详细介绍页面，排版很简单。
网站三级页面布局如图2-4所示：
图2-4 网站三级页面布局
三 .网站设计
网站设计流程：
最后的页面效果图如下所示：
图3-10 淮安宾馆页面截图
四 、网站特效的实现
一 、引言 1
(一) 设计目的： 1
(二) 设计内容： 1
(三) 开发技术： 1
(四)开发工具： 1
二 .网站内容规划 1
(一) 网站的栏目和网站结构 1
(二) 主要页面的布局策划 2
1. 网站首页布局 2
2. 网站二级页面布局 2
2.1二级页面布局--旅游景点 2
2.2二级页面布局--酒店推荐 3
2.3二级页面布局--淮安地图 4
2.4二级页面布局--留言板 4
3. 网站三级页面布局 5
三 .网站设计 5
(一) 网站设计流程： 5
(二) 网站色调定位色彩搭配： 6
(三) 网站的logo设计： 6
（四）网站的首页设计： 6
(五) 网站的子页设计： 7
5.1 子页设计--旅游景点 7
5.2子页设计二--酒店推荐 7
5.3子页设计三--淮安地图 8
5.4子页设计四--留言板的页面设计 9
5.5子页设计五--景点介绍详情 9
5.6子页设计六--旅游景点的页面实现 10
5.7子页设计七--酒店推荐介绍 11
四 、网站特效的实现 13
（一）网站主体背景的实现： 13
(二) 网站导航功能的实现： 13
(三) 网站的菜单的悬浮效果的实现： 14
(四) 图片切换的的实现 15
(五) 图片文字的滚动实现 17
(六) 图片淮安地图放 *好棒文|www.hbsrm.com +Q: ^3^5^1^9^1^6^0^7^2^*
大的实现 18
五 、 遇到的问题与解决方案 20
致 谢 22
参考文献 23
一 、引言
设计目的：
淮安旅游网站为大家推荐了旅游景点，特色美食介绍，酒店推荐，以及行车路线，和用户留言板的信息，可以让没来过淮安的人，基本的对这座城市有个大概的了解和选择，不至于刚来这座城因为不熟悉而被不良商家坑。
设计内容：
淮安旅游网网站设计的内容模块包括了旅游景点推荐、美食介绍、酒店推荐、淮安地图、留言这些主要的介绍内容。首页的内容主要是景点推荐，和淮安的地方简介，让大家一看来就可以看到淮安的特色景点和历史来源，淮安简介的文字部分了采取了js的无缝滚动特效，可以不间断的向上无缝滚动，旅游景点部分主要写景点推荐。美食介绍的部分主要推荐当地的美食,酒店推荐的部分主要推荐当地实惠的酒店，淮安地图，这个主要写淮安的地摊，带地图悬浮放大的js特效，留言板部分主要是一个留言界面。
开发技术：
网站首页和别的子页的布局都用了div+css来布局，留言板的部分表单那块用了表格，文字滚动和图片切换以及地图的部分采取了javascript来编写。
(四)开发工具：
1. Dreamweaver 8简介
MacromediaDreamweaver 8这是一款简单易学的网页制作工具，可以让初学者短时间做出来一个很简单的网页，因为软件界面里设置了插入图片，插入视频，插入超链接等智能化的操作，也可以用这款软件快速的生成个页面框架布局，用起来很方便，同时也能用这款软件来检测自己的代码写得是否有错误。
2. Adobe Photoshop CS4 简介
Adobe Photoshop CS4 是一款闻名世界的处理图像的软件，它是由Adobe公司研发出来的，可以快速的处理图片，比如去水印，修复图片，软件里面有对应的修复和去水印工具，简单易学，只要耐心去学，可以很快的让初学者上手。
二 .网站内容规划
(一) 网站的栏目和网站结构
淮安旅游网网站设计，网站主要从网站首页、旅游景点、美食介绍、酒店推荐、淮安地图、留言板等模块介绍网站的主要内容。结构示意图如图2-1所示：
图2-1 网站结构示意图
(二) 主要页面的布局策划
1. 网站首页布局
首页的最上面是网站的logo，是一行简单的文字，下面的是菜单导航部分，然后是淮安这座城市的简介，简介部分采取了js无缝滚动的特效，再下面是淮安重点旅游景点和美食和酒店的部分推荐。最下面的是版权部分。
首页示意图如图2-2所示：
图2-2 网站首页面布局图
网站二级页面布局
网站的旅游景点的网页风格和首页差不多，主要修改了中间的部分内容，底部都头部都是直接复制首页写好的，中间的部分内容主要写淮安旅游网站的推荐排版布局用div+css来写的。内容分为了两列的介绍，一列放一个图片文字，推荐的景点有周恩来、铁山寺、明祖陵等知名景点推荐。
2.1二级页面布局--旅游景点
旅游景点这个页面的布局和首页差不多，主要复制了首页的内容，然后头部和底部不动，主要修改中间的部分，都是图文结合，一排写两个景点介绍，都是左边图右边文字，这块布局排版都是用div+css来写的
网站二级旅游景点页面布局如图2-3所示：
图2-3 网站二级页面布局
2.2二级页面布局--酒店推荐
酒店推荐的这个页面主要复制了美食介绍的这个页面，菜单和底部都是直接拿来用的，然后中间的部分都是左图右字，主要推荐
网站酒店推荐如图2-4所示：
图2-4 网站二级页面布局
2.3二级页面布局--淮安地图
淮安地图这个页面，复制了酒店推荐的这个页面，头部和底部的代码，中间的部分全部删除，然后用一个大的div层包裹，直接放一张地图的大图，之后再用js来实现鼠标悬浮放大的效果
如图2-5所示：
图2-5 网站二级页面布局
2.4二级页面布局--留言板
这个页面是复制淮安地图的那个页面来写的,头部和底部的也是不动，主要还是修改中间的部分，之前的那块大地图删除，用div层浮动的属性，左右两边分别加一个div层，左侧是用表格写的留言板，右边直接放了一个图片
网站二级留言板布局如图2-6所示：
图2-6 网站二级页面布局
3. 网站三级页面布局
网站的三级页面的布局都一样，三级页面的内容主要是酒店的详细介绍和美食的详细介绍页面，排版很简单。
网站三级页面布局如图2-4所示：
图2-4 网站三级页面布局
三 .网站设计
网站设计流程：
最后的页面效果图如下所示：
图3-10 淮安宾馆页面截图
四 、网站特效的实现
版权保护: 本文由 hbsrm.com编辑，转载请保留链接: www.hbsrm.com/jsj/rjgc/1817.html
