镇江城市宣传网站的设计与实现
目 录
一、引言 1
二、网站整体设计 1
（一）设计立意 1
（二）网站内容规划 1
三、 网站具体设计 1
（一）首页设计 1
1.LOGO的设计 1
2.首页导航的设计 2
3.首页整体设计 2
4.首页效果图 2
（二）其它主要页面的设计 3
1.活动页整体设计 3
2.联系我们页设计 4
四、网页的具体实现 5
（一）首页的实现 5
（二）子页实现 6
1.DIV浮动的实现 6
2.表单的实现 7
（三）网页特效实现 7
1.首页图片轮播的实现 7
2.导航下拉框的实现 7
四、网站测试 8
（一）W3C标准测试 8
（二）浏览器兼容性测试 8
五、存在问题及改进方法 8
总结 9
致谢 10
参考文献 11
附录 12
（一）核心HTML代码 12
（二）核心CSS代码 13
一、引言
本课题设计和制作的网站“镇江爱旅游”网站秉持着“以人为本”的精神，将向生活在镇江的200万人民及每年到镇江旅游的人民介绍镇江的地理环境、文化习俗、饮食习惯、历史背景和旅游景点名胜古迹，带领大家认识镇江，喜欢镇江，爱上镇江。本网站利用Photoshop进行切片设计，然后利用Dreamweaver编写代码将网站实现，加上JavaScript的利用使得网站更加生动活泼，在此期间，解决了三层目录的样式编写，登录页面的设计，DIV *好棒文|www.hbsrm.com +Q: ^3^5^1^9^1^6^0^7^2^*
框架的设计及漂浮的实现，色彩搭配的使人感到赏心悦目。
网站整体设计
设计立意
利用Photoshop设置整体网站页面效果，使用切片工具对效果图进行切图，通过Dreamweaver进行代码编写，利用JavaScript实现网页特效，设计出令人觉得赏心悦目的网站，借此向用户介绍镇江的文化和景点。
网站内容规划
“镇江爱旅游”网站具体分为四个栏目，活动、服务、关于我们和联系我们，网站内容结构图如图2-1所示。
图2-1 网站内容结构图
网站具体设计
首页设计
1.LOGO的设计
Logo的设计由左边的飞机和右边的文字“镇江旅游”组成，绿色的设计与网站的整体立意相符合，突出了网站的核心思想，如图3-2所示。
图3-1 LOGO
2.首页导航的设计
本网站的导航条采用白底黑字的设计，更加一目了然，选中的模块显示为绿色的底，下设的子页也显示出来，这样设计合理，也更加有条理，LOGO的设计是由一个绿色的飞机和“镇江旅游”组成的，这样的组合一下就体现了网站的主题，也符合“以人为本”的中心思想，LOGO和导航的颜色相统一协调，如图3-2所示。
图3-2 logo和导航条
3.首页整体设计
首页设计如下图，采用上中下的结构，上面是Logo和导航条，主题鲜明，条理清晰，中部由用JavaScript制作的图片轮播，展示了主要的游览景区以及它的简介和价格，生动的向游客展示了主要的游览景点，增加了网站的阅读性和趣味性，图片轮播的下边是主要的其他产品的展示，简洁明了，最下边是合作商和版权及其他的相关链接，具体布局示意图如图3-3所示。
Logo
导航条
用JS特效展示
主要产品展示
合作商
版权及相关链接
图3-3 首页布局图
4.首页效果图
整个网站的整体色调以绿色为主，突显了人与自然和谐相处的风格，这样设计使得网站看起来清新可人，更加贴近自然，也符合“以人为本”的宗旨，logo的设计是根据“放飞心灵，接近自然”的理念，以“镇江旅游”及英文加上绿色的飞机设计而成，用到Photoshop进行处理，插入首页，导航栏漂浮在空中，为了方便大家更好的辨认出使用白底绿字，更加醒目引人注目，再往下是向游客展示的JS特效区，向游客滚动播放景点的照片及相关的简单介绍，吸引游客的注意，再往下是和公司其他旅游产品及项目的展示，配图漂亮，介绍简单，让游客感觉一目了然，更加有来镇江旅游的欲望，如图3-4所示。
图3-4 首页效果图
其它主要页面的设计
1.活动页整体设计
活动页面的页面的设计上部和其他页面一样，中部区分了六个区域，使用div分层再利用CSS设置格式使各个模块各自漂浮在相对应的位置，这样可以合理使用空间，增加网页的利用率，上半部分是一些文字链接，公司活动之类，下半部分是一些推广，广告之类，布局合理，最底部也是一样的。如图3-5所示。
图3-5 活动页
2.联系我们页设计
联系我们这一页在body这一层中使用了分栏的设计其中右半边的表单，可以输入名字、Email、话题和内容和企业达到互动的目的，这样可以增加企业和顾客的互动，如图3-6所示。
图3-6 联系我们页面效果图
四、网页的具体实现
首页的实现
首页分为上中下三个部分，首先是上部，导航使用两个ul标签嵌套起来，这样设计是的网站内容层次分明，主次分明，首页也达到了总括的目的，以“首页”的大目录为例，HTML核心代码如下：
首页
然后是中部，分为两层一层是JavaScript的轮播特效，增加了网页的可读性，下部是一些主要产品的展示，简洁明了，扼要的介绍了产品的信息，加上经典的图片，更加的吸引游客人的注意，以金山寺为例主要代码如下：
一、引言 1
二、网站整体设计 1
（一）设计立意 1
（二）网站内容规划 1
三、 网站具体设计 1
（一）首页设计 1
1.LOGO的设计 1
2.首页导航的设计 2
3.首页整体设计 2
4.首页效果图 2
（二）其它主要页面的设计 3
1.活动页整体设计 3
2.联系我们页设计 4
四、网页的具体实现 5
（一）首页的实现 5
（二）子页实现 6
1.DIV浮动的实现 6
2.表单的实现 7
（三）网页特效实现 7
1.首页图片轮播的实现 7
2.导航下拉框的实现 7
四、网站测试 8
（一）W3C标准测试 8
（二）浏览器兼容性测试 8
五、存在问题及改进方法 8
总结 9
致谢 10
参考文献 11
附录 12
（一）核心HTML代码 12
（二）核心CSS代码 13
一、引言
本课题设计和制作的网站“镇江爱旅游”网站秉持着“以人为本”的精神，将向生活在镇江的200万人民及每年到镇江旅游的人民介绍镇江的地理环境、文化习俗、饮食习惯、历史背景和旅游景点名胜古迹，带领大家认识镇江，喜欢镇江，爱上镇江。本网站利用Photoshop进行切片设计，然后利用Dreamweaver编写代码将网站实现，加上JavaScript的利用使得网站更加生动活泼，在此期间，解决了三层目录的样式编写，登录页面的设计，DIV *好棒文|www.hbsrm.com +Q: ^3^5^1^9^1^6^0^7^2^*
框架的设计及漂浮的实现，色彩搭配的使人感到赏心悦目。
网站整体设计
设计立意
利用Photoshop设置整体网站页面效果，使用切片工具对效果图进行切图，通过Dreamweaver进行代码编写，利用JavaScript实现网页特效，设计出令人觉得赏心悦目的网站，借此向用户介绍镇江的文化和景点。
网站内容规划
“镇江爱旅游”网站具体分为四个栏目，活动、服务、关于我们和联系我们，网站内容结构图如图2-1所示。
图2-1 网站内容结构图
网站具体设计
首页设计
1.LOGO的设计
Logo的设计由左边的飞机和右边的文字“镇江旅游”组成，绿色的设计与网站的整体立意相符合，突出了网站的核心思想，如图3-2所示。
图3-1 LOGO
2.首页导航的设计
本网站的导航条采用白底黑字的设计，更加一目了然，选中的模块显示为绿色的底，下设的子页也显示出来，这样设计合理，也更加有条理，LOGO的设计是由一个绿色的飞机和“镇江旅游”组成的，这样的组合一下就体现了网站的主题，也符合“以人为本”的中心思想，LOGO和导航的颜色相统一协调，如图3-2所示。
图3-2 logo和导航条
3.首页整体设计
首页设计如下图，采用上中下的结构，上面是Logo和导航条，主题鲜明，条理清晰，中部由用JavaScript制作的图片轮播，展示了主要的游览景区以及它的简介和价格，生动的向游客展示了主要的游览景点，增加了网站的阅读性和趣味性，图片轮播的下边是主要的其他产品的展示，简洁明了，最下边是合作商和版权及其他的相关链接，具体布局示意图如图3-3所示。
Logo
导航条
用JS特效展示
主要产品展示
合作商
版权及相关链接
图3-3 首页布局图
4.首页效果图
整个网站的整体色调以绿色为主，突显了人与自然和谐相处的风格，这样设计使得网站看起来清新可人，更加贴近自然，也符合“以人为本”的宗旨，logo的设计是根据“放飞心灵，接近自然”的理念，以“镇江旅游”及英文加上绿色的飞机设计而成，用到Photoshop进行处理，插入首页，导航栏漂浮在空中，为了方便大家更好的辨认出使用白底绿字，更加醒目引人注目，再往下是向游客展示的JS特效区，向游客滚动播放景点的照片及相关的简单介绍，吸引游客的注意，再往下是和公司其他旅游产品及项目的展示，配图漂亮，介绍简单，让游客感觉一目了然，更加有来镇江旅游的欲望，如图3-4所示。
图3-4 首页效果图
其它主要页面的设计
1.活动页整体设计
活动页面的页面的设计上部和其他页面一样，中部区分了六个区域，使用div分层再利用CSS设置格式使各个模块各自漂浮在相对应的位置，这样可以合理使用空间，增加网页的利用率，上半部分是一些文字链接，公司活动之类，下半部分是一些推广，广告之类，布局合理，最底部也是一样的。如图3-5所示。
图3-5 活动页
2.联系我们页设计
联系我们这一页在body这一层中使用了分栏的设计其中右半边的表单，可以输入名字、Email、话题和内容和企业达到互动的目的，这样可以增加企业和顾客的互动，如图3-6所示。
图3-6 联系我们页面效果图
四、网页的具体实现
首页的实现
首页分为上中下三个部分，首先是上部，导航使用两个ul标签嵌套起来，这样设计是的网站内容层次分明，主次分明，首页也达到了总括的目的，以“首页”的大目录为例，HTML核心代码如下：
然后是中部，分为两层一层是JavaScript的轮播特效，增加了网页的可读性，下部是一些主要产品的展示，简洁明了，扼要的介绍了产品的信息，加上经典的图片，更加的吸引游客人的注意，以金山寺为例主要代码如下：
