html+css完成家乡泰州网站
目录
一、 引言 2
二、 开发工具选择 2
三、 主体设计 2
（一）网站开发流程 2
1. 功能结构图绘制 2
2. 界面设计 3
3. DIV+CSS布局 4
4. 首页div结构和层样式 4
5. 子页div结构和层样式 7
（二）网站基本功能 10
1. 首页 10
2. 泰州概况 11
3. 自然地理 11
4. 泰州出行 12
5. 泰州名人 13
6. 联系我们 13
（三）JavaScript特效实现 14
四、 总结 15
谢辞 16
参考文献 16
一、 引言
使用Html+ DIV+CSS布局的网站很符合网站的标准，由于易维护，方便改版，从而成为目前流行的网站布局方法。因此选用Html+ DIV+CSS的布局实现了一个小型网站的构造。
现在的社会越来越发达，网络在人们的生活中已经成为不可缺少的一部分，对于家乡泰州也是发展的飞速，然而并不是每个人都很了解泰州，知道它的成长史，发展史，知道它的故事。所以设计了泰州的网站，通过简单的介绍，有趣生动的图片，从而使人们对泰州有进一步的了解，对泰州有更深层次的印象。
网络已经走在社会的前端，足不出户人们都可以知道外面发生的事情。对于家乡泰州，并不是大部分的都熟悉这个城市，所以决定做泰州的网站设计，从而让更多的人了解泰州，知道泰州这个城市有很多的故事，很多的小吃，很多好玩的旅游景点，也出过很多的名人。是个值得一去的好地方。
开发工具选择
泰州网站中，介绍了泰州的美食，文化，历史，发展，特色，人口等模块的功能，让大家了解到泰州现在的发展形势，感受到泰州是个有着悠久历史的文化的古城。在经过这么多年的发展，泰州已经茁壮成长，泰州药城已成为全国最大的药城之一。由于以上的原因，特此设计了泰州的静态网站。
对于一个网站来说开发工具很重要。我设计的网站中用到了Dreamweaver、Flash、Photoshop等。因为Dreamweaver很
*好棒文|www.hbsrm.com +Q: 3_5_1_9_1_6_0_7_2
绍了泰州的美食，文化，历史，发展，特色，人口等模块的功能，让大家了解到泰州现在的发展形势，感受到泰州是个有着悠久历史的文化的古城。在经过这么多年的发展，泰州已经茁壮成长，泰州药城已成为全国最大的药城之一。由于以上的原因，特此设计了泰州的静态网站。
对于一个网站来说开发工具很重要。我设计的网站中用到了Dreamweaver、Flash、Photoshop等。因为Dreamweaver很便利，所以选择它来设计家乡的网站，利用Photoshop来处理修剪图片从而美化网站，简单的使用JavaScript的特效，使得整个页面都生动活泼起来。
主体设计
网站开发流程
功能结构图绘制
首页是一个网站的眼睛，是大家第一个看到的网页，所以首页应该给人一种清新，醒目的感觉。在首页挑选了几张具有泰州特色的图片放在首页供大家欣赏，感受其当中的文化，还提供了每天泰州的天气预报，了解今天的天气，从而注意保暖防寒。还可以通过导航条来选择自己喜欢的模块，从而进行浏览。对于首页还提供了泰州生活、泰州发展、泰州论坛、泰州好吃、泰州好玩、泰州出行六个模块，在泰州论坛中大家可以自由发挥，写出自己生活中的点点滴滴，也可以通过联系我们这个模块把想对我们说的话或对网站的意见发送给我们，让我们更好地管理完善网站。
本网站共分为首页、泰州概况、自然地理、市政规划、新闻中心、人口民族、泰州特产、城市荣誉、泰州生活、泰州发展、泰州论坛、泰州好吃、泰州好玩、泰州出行。等30个网页。每个网页都认真仔细的进行排版。不仅仅是单调的文字说明，并且放入了大量的图片供大家欣赏，从而更深入的了解泰州。详细结构图如图3-1所示。
图3-1网站结构图
界面设计
运用DIV+CSS布局，再加入HTML代码可以把设计出来的网站的整个框架展现出来。利用Photoshop进行构思和基本的框架设计。首页的具体框架图如图3-2所示。
首页框架图
天气介绍
导航条
相关特色链接
相关内容介绍
图片介绍
关于我们
图3-2网站首页框架图
首页主要是以清新为主，给人以一目了然的感觉。
（2）子页框架 如图3-3所示
天气介绍
导航条
相关特色链接
图片介绍
导航条
关于我们
3-3子页布局框架
子页的没有设计复杂的布局，只是通过文字和图片的效果，从而使大家看上去感觉到简洁大方。
DIV+CSS布局
搜集到前期需要的素材和做好前期准备工作之后，下面就开始进入网站的制作。在dreamweaver中首先使用div层来对整个网页进行大体的布局，同时使用div+css层样式表对div布局进行美化，div+css布局可以得到许多效果比如文字大小、颜色、粗细、下划线、背景等等的效果，使网站的样式更加丰富，并且div+css的布局样式可以重复使用，这样就可以使代码不重复、不复杂便于代码的修改。
div+css的布局使网页的内容和形式分开，内容在网页的前台显示，形式上的美工由css来实现，这样html的文件代码便变得简单，可以更快的打开，这就是div+css布局的特点，完全脱离了传统网页技术的范围，当要实现表格套表格的美工时只需使用div层套div层就可以实现，使用div+css样式可以让生成的网页文件更加的精简。
使用一个div层以后，就需要使用css样式来改变它的属性，css样式可以改变div的绝对定位变为相对定位，保证div层的位置在不同的浏览器的位置不会改变，同时可以改变div层的大小和浮动的位置，使用记事本来编写css代码，再在Dreamweaver中使用外联样式，这种简便得方式可以减少网站工作者的工作量。
首页div结构和层样式
div结构布局如图3-4所示：
图3-
一、 引言 2
二、 开发工具选择 2
三、 主体设计 2
（一）网站开发流程 2
1. 功能结构图绘制 2
2. 界面设计 3
3. DIV+CSS布局 4
4. 首页div结构和层样式 4
5. 子页div结构和层样式 7
（二）网站基本功能 10
1. 首页 10
2. 泰州概况 11
3. 自然地理 11
4. 泰州出行 12
5. 泰州名人 13
6. 联系我们 13
（三）JavaScript特效实现 14
四、 总结 15
谢辞 16
参考文献 16
一、 引言
使用Html+ DIV+CSS布局的网站很符合网站的标准，由于易维护，方便改版，从而成为目前流行的网站布局方法。因此选用Html+ DIV+CSS的布局实现了一个小型网站的构造。
现在的社会越来越发达，网络在人们的生活中已经成为不可缺少的一部分，对于家乡泰州也是发展的飞速，然而并不是每个人都很了解泰州，知道它的成长史，发展史，知道它的故事。所以设计了泰州的网站，通过简单的介绍，有趣生动的图片，从而使人们对泰州有进一步的了解，对泰州有更深层次的印象。
网络已经走在社会的前端，足不出户人们都可以知道外面发生的事情。对于家乡泰州，并不是大部分的都熟悉这个城市，所以决定做泰州的网站设计，从而让更多的人了解泰州，知道泰州这个城市有很多的故事，很多的小吃，很多好玩的旅游景点，也出过很多的名人。是个值得一去的好地方。
开发工具选择
泰州网站中，介绍了泰州的美食，文化，历史，发展，特色，人口等模块的功能，让大家了解到泰州现在的发展形势，感受到泰州是个有着悠久历史的文化的古城。在经过这么多年的发展，泰州已经茁壮成长，泰州药城已成为全国最大的药城之一。由于以上的原因，特此设计了泰州的静态网站。
对于一个网站来说开发工具很重要。我设计的网站中用到了Dreamweaver、Flash、Photoshop等。因为Dreamweaver很
*好棒文|www.hbsrm.com +Q: 3_5_1_9_1_6_0_7_2
绍了泰州的美食，文化，历史，发展，特色，人口等模块的功能，让大家了解到泰州现在的发展形势，感受到泰州是个有着悠久历史的文化的古城。在经过这么多年的发展，泰州已经茁壮成长，泰州药城已成为全国最大的药城之一。由于以上的原因，特此设计了泰州的静态网站。
对于一个网站来说开发工具很重要。我设计的网站中用到了Dreamweaver、Flash、Photoshop等。因为Dreamweaver很便利，所以选择它来设计家乡的网站，利用Photoshop来处理修剪图片从而美化网站，简单的使用JavaScript的特效，使得整个页面都生动活泼起来。
主体设计
网站开发流程
功能结构图绘制
首页是一个网站的眼睛，是大家第一个看到的网页，所以首页应该给人一种清新，醒目的感觉。在首页挑选了几张具有泰州特色的图片放在首页供大家欣赏，感受其当中的文化，还提供了每天泰州的天气预报，了解今天的天气，从而注意保暖防寒。还可以通过导航条来选择自己喜欢的模块，从而进行浏览。对于首页还提供了泰州生活、泰州发展、泰州论坛、泰州好吃、泰州好玩、泰州出行六个模块，在泰州论坛中大家可以自由发挥，写出自己生活中的点点滴滴，也可以通过联系我们这个模块把想对我们说的话或对网站的意见发送给我们，让我们更好地管理完善网站。
本网站共分为首页、泰州概况、自然地理、市政规划、新闻中心、人口民族、泰州特产、城市荣誉、泰州生活、泰州发展、泰州论坛、泰州好吃、泰州好玩、泰州出行。等30个网页。每个网页都认真仔细的进行排版。不仅仅是单调的文字说明，并且放入了大量的图片供大家欣赏，从而更深入的了解泰州。详细结构图如图3-1所示。
图3-1网站结构图
界面设计
运用DIV+CSS布局，再加入HTML代码可以把设计出来的网站的整个框架展现出来。利用Photoshop进行构思和基本的框架设计。首页的具体框架图如图3-2所示。
首页框架图
天气介绍
导航条
相关特色链接
相关内容介绍
图片介绍
关于我们
图3-2网站首页框架图
首页主要是以清新为主，给人以一目了然的感觉。
（2）子页框架 如图3-3所示
天气介绍
导航条
相关特色链接
图片介绍
导航条
关于我们
3-3子页布局框架
子页的没有设计复杂的布局，只是通过文字和图片的效果，从而使大家看上去感觉到简洁大方。
DIV+CSS布局
搜集到前期需要的素材和做好前期准备工作之后，下面就开始进入网站的制作。在dreamweaver中首先使用div层来对整个网页进行大体的布局，同时使用div+css层样式表对div布局进行美化，div+css布局可以得到许多效果比如文字大小、颜色、粗细、下划线、背景等等的效果，使网站的样式更加丰富，并且div+css的布局样式可以重复使用，这样就可以使代码不重复、不复杂便于代码的修改。
div+css的布局使网页的内容和形式分开，内容在网页的前台显示，形式上的美工由css来实现，这样html的文件代码便变得简单，可以更快的打开，这就是div+css布局的特点，完全脱离了传统网页技术的范围，当要实现表格套表格的美工时只需使用div层套div层就可以实现，使用div+css样式可以让生成的网页文件更加的精简。
使用一个div层以后，就需要使用css样式来改变它的属性，css样式可以改变div的绝对定位变为相对定位，保证div层的位置在不同的浏览器的位置不会改变，同时可以改变div层的大小和浮动的位置，使用记事本来编写css代码，再在Dreamweaver中使用外联样式，这种简便得方式可以减少网站工作者的工作量。
首页div结构和层样式
div结构布局如图3-4所示：
图3-
版权保护: 本文由 hbsrm.com编辑，转载请保留链接: www.hbsrm.com/jsj/rjgc/1499.html
