Dreamweaver网页课设做家乡网站
存档资料 成绩：
目录
1.1课程设计的要求 1.利用网页制作软件Dreamweaver制作出一个家乡网站 2.家乡网站设计至少含有三个子网页 3.每个子网页中都应包含导航栏，版权信息等 4.美食网站中应存在站内搜索，和登录窗口 2
1.2 课程设计的目的 2
第二章 网站系统分析 4
2.1首页分析 4
2.2子网页分析 5
井冈山简介 5
行政区划 5
自然资源 5
地理气候 5
第三章 网页模块结构设计 10
1.导航栏模块： 10
2.站内搜索模块: 14
3.登录界面模块： 17
4.项目列表模块： 21
5.片展示模块： 26
第四章 网页实现设计 30
1.首页设计代码及预览效果: 30
2.家乡简介子网页设计代码: 32
3.革命历史子网页设计代码: 36
4.旅游在线子网页设计代码： 37
第五章 课程设计心得 37
第六章 参考文献（资料） 37
致 谢 38
第一章 课程设计要求及目的
1.1课程设计的要求
1.利用网页制作软件Dreamweaver制作出一个家乡网站 2.家乡网站设计至少含有三个子网页 3.每个子网页中都应包含导航栏，版权信息等 4.美食网站中应存在站内搜索，和登录窗口
1.2 课程设计的目的
1．通过综合实训进一步巩固、深化和扩展学生的理论知识。
（1） 掌握规划网站的内容结构、目录结构、链接结构的方法。
（2） 熟练掌握网页制作软件Dreamweaver的基本操作；
2．训练和培养学生获取信息和处理信息的能力，充分培养和提高学生的动手能力，学会通过网站、书籍、素材光盘等方式收集所需的文字资料、图像资料、flash动画和网页特效等。
3．培养学生运用所学的理论知识和技能解决网站开发过程中所遇到的实际问题的能力及其基本工作素质。
4．培养学生理论联系实际的工作作风、严肃认真的科学态度以及独立工作的能力
第二章 网站系统分析
2.1首页分析
从上述结构图中可出：主页是非常丰富的，内容比较多。在主页也有二级导栏，总体以红色背景为主，符合家乡的特点。
同时，它有两大部分组成。一、页头页脚的设计；主要完成页面的结构分析，搭建框架切割效果图以及页头页脚的制作。然后整出了页面整体的效果。二、导航栏侧边栏设计，主要是在第一步的基础上，然后继续完成网站导航栏侧边栏的设计。并且增加了一个JS文件。值得注意的一个细节是，许多板块之间基本上是无缝对接。还有一个比较普遍的一个思想是鼠标划过和停留超链接的时候，它的样式是发生了改变。
2.2子网页分析
（一）井冈山简介子网页
从上述结构图中可出：井冈山简介样式也不是过于简单，它有二级纵向导航栏，背景图片，背景色的改变以及版权信息等。
从总体上来看，模版的结构还是很清晰的。
（二）革命历史子网页
从上述结构图中可出：它有二级纵向导航栏，背景图片，背景色的改变以及版权信息等。
二级纵向导航栏，背景色和背景图片之间的融合度较高。
（三）旅游在线子网页
从上述结构图中可出：它有二级纵向导航栏，表格，按钮，下拉列表，特殊符号，超链接,背景图片，背景色的改变以及版权信息等。
它有一部分是参考了井冈山市人民政府网，形式也是非常的丰富。其中用CSS3美化的表格很有特点
(四)网站登录子网页
从上述结构图中可出：它有图片,按钮,边框，背景图片，背景色的改变以及版权信息等。
自然而简单,朴素而真实。
第三章 网页模块结构设计
3.1.导航栏模块：
运用第五章所学知识，为文字添加超链接标签,将文字用
其中的HTML如下：
其中CSS的如下：
预览效果：
3.2.站内搜索模块:
参照课本第九章所学知识，插入搜索文本框。由于表单部分通常是需要和服务器端进行交互，因此在此使用表单元素,在此依次输入“站内搜索”插入一个文本字段和一个 “图像按钮”表单元素，并设置相应属性。然后css美化！
其中的HTML如下：
其中CSS代码如下：
预览效果：
3.3.登录界面模块：
参照课本第九章所学知识，插入搜索文本框。由于表单部分通常是需要和服务器端进行交互，因此在此使用表单元素,在此依次输入“站内搜索”插入一个文本字段和一个 “图像按钮”表单元素，并设置相应属性。然后css美化！
其中的HTML如下：
其中CSS代码如下：
CSS代码续上：
效果预览：
3.4.项目列表模块：
运用第三章所学知识先插入
- 项目列表，在其中插入若干个
- 标签对，输入文字，每个列表项后的日期文字需要单独设置，使用标签对括起来，最后利用CSS美化。
其中的HTML如下：
其中CSS代码如下：
CSS代码续上：
效果预览：
3.5.片展示模块：
在
其中的HTML如下：
其中CSS代码如下：
预览效果：
第四章 网页实现设计
4.1.首页设计代码及预览效果:
其中的HTML如下:
其中CSS代码如下：
预览效果：
4.2.家乡简介子网页设计代码:
其中的HTML如下:
其中CSS代码如下：
预览效果：
4.3.革命历史子网页设计代码:
其中的HTML如下:
其中CSS代码如下：
预览效果：
4.4.旅游在线子网页设计代码：
其中的HTML如下:
第五章 课程设计心得
我在本次网页设计中，收获颇多。我在这次实践中，同时也是一次学习的机会，写上了人生中的第一份网页课程设计报告。
首先，我会先建好一个主页的模板，然后做好主体。在整个过程中，我在不断地修改，不断地完善。我觉得细节决定成败，在各个模块中，注意细节，到具体的每一步。脚踏实地！然后，在这过程中，难免会遇到困难，自己深思熟虑了之后，还是不知道的话，要不耻下问，多问问老师，同学，多交流，共进步！另外，网上资源也很多，可以参考一下。最后，也要注重实用性，特别是外观，外观美会给人带来更好的感觉！
总体来说，我在本次网页课程设计中，得到的经验是不少的，在以后的学习中，更加注重于实践！
第六章 参考文献（资料）
[1] 宜亮.DIV+CSS网页样式与布局实战详解（配光盘）[M].北京：清华大学出版社，2013.
[2] 明日科技.HTML5从入门到精通[M].北京：清华大学出版社，2012.
[3] 前沿科技.精通CSS+DIV网页样式布局[M].北京：人民邮电出版社，2007.
[4] 陆凌牛.html5+css3权威指南[M].北京:电子机械出版社,2013.
[5]宋灵香.21天学通html5+css3[M].北京:电子工业出版社,2016.
[6]http://www.runoob.com,菜鸟教程.
[7]http://www.w3school.com, w3school.
[8] http://www.jgs.gov.cn/.
欢迎您关注我的微信公众号：学习微站（studysth）
