华东交通大学理工学院
课 程 设 计 报 告 书
所属课程名称 （所学的课程名称）
题 目 DIV+CSS设计企业网站首页
分 院 电 信 分 院
专业班级
学 号
学生姓名
指导教师
2013 年 6 月 25日
目 录
第1章 素材的准备 2
第2章 站点的创建和结构组织 3
建立站点 3
构建框架 4
第3章 网页页头的设计 7
Logo设置 7
Search设置 7
总体设置 7
第4章 导航栏的设计 8
纵向导航栏设置 8
横向导航菜单 9
二级菜单 9
横向导航的背景图片 10
第5章 主体部分的设计 11
顶部幻点和热点新闻 11
中部图片表 11
尾部设置 12
第6章 侧边拦的设计 14
产品导购 14
使用问答 14
联系我们 14
第7章 底部的设计 15
参考文献（资料） 16
致 谢 17
第1章 素材的准备
1、利用photoshop软件剪切所需的图片
第2章 站点的创建和结构组织
建立站点
打开DREAMWEAVER，在标题栏点击站点/新建站点，取名站点名为马燕青， 然后在目录下新建images文件夹、css文件夹等把各类文件分别存放起来。
构建框架
从图中可以看出整个页面分为头部区域、导航区域、主体部分和底部，其中主体部分又分为左右两列。
1.头部设置
1)插入ID为header 的div
2)以同样的方法插入nav 、maincontent、footer;再在maincontent内插入main 和side的div。
3)对各个div建立css样式，使其如下：
#reader {
background-color: #99FFFF;
height: 70px;
margin-bottom: 8px;
width: 900px;
}
#nva {
background-color: #CF6;
height: 30px;
margin-bottom: 8px;
width: 900px;
#maincontent #main {
height: 500px;
width: 6px;
float: left;
background-color: #FFCCFF;
}
#maincontent #side {
background-color: #CFF;
height: 500px;
width: 228px;
float: right;
}
#footer {
background-color: #9FF;
height: 70px;
width: 900px;
}
效果图如下：
第3章 网页页头的设计
Logo设置
1.插入一个div,设置为：#logo{ float:left;margin-top:18px;}
2.在div里插入所需图片企业.jgp " width="180" height="45" />
Search设置
3.插入一个div,设置为：#logo{ float:right;margin-top:30px;}
4.在search里插入一个表单，一个文本框和一个按钮。
总体设置
去掉reader的背景颜色和底部外边距。
效果图：
第4章 导航栏的设计
纵向导航栏设置
1.在nva 里插入ul和li，并输入所需文字。
2.创建css样式为：#nva ul {
l ist-style-type: none;
margin: 0px;
padding: 0px;
}
#nva ul li {
height: 26px;
padding-top: 0px;
padding-right: 8px;
padding-bottom: 0px;
padding-left: 8px;
line-height: 26px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #eee;
float: left;
}
body {
font-family: Verdana, Geneva, sans-serif;
font-size: 20px;
line-height: 1.2;
}
a {
color: #000;
text-decoration: none;
}
a:hover {
color: #F00;
}
横向导航菜单
利用float属性，将纵向导航栏里的li横向排列即可得到横向导航菜单。
效果图：
二级菜单
横向导航的背景图片
在之前建立的nva.a和nva.a.hover的css样式里添加相对应的背景图片。
效果图：
第5章 主体部分的设计
顶部幻点和热点新闻
1.插入一个表格：
2.在1、2、3内插入相关的图片
3.在4中插入以下背景图片并输入相关的内容
4.设置边框、填充、间距为0.
效果图：
中部图片表
1.插入一个1 div,添加背景图片。
2.在1 中插入一个表格并在内插入相关图片和内容：
3.设置相关的细节内容，并设置边框、填充、间距
效果图：
尾部设置
用同样的方法插入表格、背景图片，并输入相关的内容。
效果图：
第6章侧边拦的设计
1、先做一个通用的，插入如下html代码：
此处显示 class "side_con" 的内容
2、定义侧边栏的样式如下：
#side { float:right; width:228px;}
.side_box { margin-bottom:8px;}
.side_box h2 strong { color:#f30;}
效果图：
产品导购
1、用ul、li列表的形式输入相关内容：
2、设置样式：
.product { padding:0px 10px;}
.product ul li { height:58px; padding:14px 0 0 px; border-bottom:1px dashed #dcdcdc; color:#777;}
.product ul li strong { display:block; height:24px; color:#333;}
.product ul li a { color:#777;}
.product ul li a:hover { text-decoration:underline;}
.product ul li.product3 { border-bottom:none;}
使用问答
1、先输入以下内容并复制为5 份：
2、将“最新出的这个产品如何使用？”加粗，设置相关性质：
ask dl { padding:10px 0; border-bottom:1px dashed #dcdcdc;}
.ask dl dt a { color:#666;}
联系我们
在之前做好的相应的class“side_on”里插入图片并调整位置：
.contact { padding:2px;}
第7章 底部的设计
设置背景颜色为灰色，输入所需要的内容，将它们设置水平垂直居中。
效果图：
整体效果图：
参考文献（资料）
[1] 陈强,霍继文,叶兵 《网页制作实用技术 FrontPage 2000》清华大学出版社 2000
[2] 王凯，张家才《跟我学网页制作 网页制作技巧与实例》 冶金工业出版社 1999
致 谢
在这次的课程设计中，我受益匪浅。
这次的学习中，我明白了，也懂得的很多。也学到了许多以前不懂的方法和小技巧。这要感谢老师能给我们自己动手的机会，不然不会有这么大的感悟。与其同时，还有感谢同学的帮忙和老师的细心教导。最为重要的是老师的精彩提示，不然我就没有这么大的能力完成此次任务。下载本文
