资源描述
网页制作实验报告.docx
《网页制作实验报告.docx》由会员分享，可在线阅读，更多相关《网页制作实验报告.docx（28页珍藏版）》请在冰豆网上搜索。
网页制作实验报告
学号：
201340420113
《网页制作与开发》
作品设计报告
网站名称
湖北理工学院文学社
教学院
计算机学院
专业
13网络工程
班级
1班
姓名
李潇
指导教师
刘凯
2014
年
12
月
30
日
一、网站简介（介绍网站的主体内容、设计思路、开发工具等）
1.网站内容及意义
（正文用仿宋字体，小四号字，行间距为固定值25磅，一级目录内容必须单独另起一页，撰写报告时请将本提示删除。
）
我所制作的的是湖北理工学院文学社的网站，网站包含了文学社的介绍、社员的作品成就、社团新闻等，其中有文字以及图片介绍，包含了原创的文学社logo。
网站导航栏包括了社团概况、社团活动、社员成就、文学链接、经费分配、入社要求和资源下载以便读者更便利地找到所需要的内容。
网站向社员及理工学子全面展示了文学社的概况，更新了文学社的时事新闻以便读者最快掌握社团的情款，同时介绍了入社要求及社员成就，使更多学子对文学社感兴趣并且加入文学社，在多重层面上都具有重要意义。
2.网站开发工具
制作网站使用了Dreamweaver
编辑图片使用了Photoshop
二、网站设计过程（介绍网站制作的流程及具体实现过程）
1.网站设计流程
规划好首页需要放置的主要栏目，做好布局草图，通过DIV+CSS进行布局。
（1）新建站点，创建首页文件及其他文件夹。
图2新建站点和文件
（2）打开首页，新建样式表文件mystyle.css，并在文件中设置body标记CSS样式如下：
body{
font-family:
"宋体";
font-size:
12px;
color:
#000;
}
（3）在网页中插入布局对象div，设置其id=”box”,width:
1000px,height:
800px,margin:
0auto,如图3所示。
图3插入box层
（4）在box内依次插入5个div，设置其id分别为：
”header”,”nav”,”banner”,”container”,”footer”。
依次设置这5个div的CSS样式，使其按照指定高度垂直排列，CSS样式如下：
#header{
margin:
0px;
height:
110px;
width:
100%;
background-color:
#CCCCCC;
}
#nav{
margin:
0px;
height:
55px;width:
100%;
background-color:
#666600;
}
#container{
margin:
0px;
height:
400px;width:
100%;
background-color:
#CCFF99;
}
#banner{
margin:
0px;padding:
0px;
height:
110px;width:
100%;
}
#footer{
margin:
0px;padding:
0px;
height:
100px;width:
100%;
background-color:
#CCCCCC;
完成后效果如图4所示：
图4初步布局效果图1
（5）在banner层中，插入两个div,设置其id分别为banner_left,banner_right.
将其浮动属性全部设置为左浮动，具体CSS样式设置如下：
#banner_left{
height:
110px;width:
760px;
padding:
0px;
background-color:
#FFC;
float:
left;
}
#banner_right{
margin:
0px;padding:
0px;
height:
110px;width:
240px;
float:
left;
}
（6）在container中插入三个div,设置其id分别为：
left,main,right,并将其浮动属性设置为左漂浮，完成效果如图5所示，具体CSS样式设置如下：
#left{
float:
left;
height:
400px;width:
355px;
}
#main{
background-color:
#FFF;
float:
left;
height:
400px;width:
405px;
}
#right{
float:
left;
height:
400px;width:
240px;
}
图5初步布局效果图2
（7）在left层中插入两个div,设置其id分别为：
left_1,left_2,并设置其CSS样式如下：
#left_1{
height:
280px;width:
355px;
background-color:
#CFF;
}
#left_2{
height:
120px;width:
355px;
}
（8）在right层中插入两个div,设置其id分别为：
right_1,right_2,并设置其CSS样式如下。
#right_1{
height:
160px;width:
240px;
background-color:
#CFF
}
#right_2{
height:
240px;width:
240px;
}
至此，整个DIV+CSS布局工作已基本完成，完成效果如图6所示
图6布局完成效果图
2.网页LOGO、BANNER的设计
（1）设计文学社logo时需要一张纸扇图，如图7所示
图7纸扇
（2）然后在图上加入“文学社”三个字，调整字体大小、颜色、形态达到预期效果，然后用橡皮擦将不要的部分涂掉，制作后效果如图8所示
图8文学社logo
（3）整体logo需要一张背景图，如图9所示
图9花鸟图
（4）经过剪切与合成，得到图10
图10最终logo
（5）制作“折枝”，需要背景图与计算机学院图片，如图11、图12所示
图11
图12
（6）将图11进行裁剪，将图12用磁性套索处理，再加上“理工学院”、“折枝”等字样得到图13
图13
（7）将图片另存为banner.jpg。
（8）将图片logo.jpg和banner.jpg分别插入首页的header和banner_left图层中
3.网站首页设计（介绍首页的制作过程，含首页截图）
1、导航菜单的设计
设计一个如图14所示的横向下拉导航菜单。
图14
（1）在nav层中插入一个无序列表，列表含8个列表项，其中除网站首页外，其他7个列表项里，均嵌套一个子无序列表，具体代码如下：
网站首页
- 社团概况
- 社团活动
- 社员成就
- 文学链接
- 入社要求
- 经费分配
- 资源下载
（2）设置nav的背景颜色，上下边框均为1个像素，边框颜色为白色，设置nav的位置属性为相对定位，具体CSS样式如下：
#nav{
background-color:
#10585C;
height:
55px;
width:
100%;
text-align:
center;
position:
relative;
border-top:
1pxsolid#fff;
border-bottom:
1pxsolid#fff;
}
（3）设置nav中的ul的list-style-type属性为none,设置nav中的li左浮动，定位属性为相对定位，具体CSS样式如下
#navul{
list-style-type:
none;
}
#navulli{
float:
left;
position:
relative;
}
（4）将ulli中的a元素设置为块级元素，并设置其高度和宽度，设置其文本样式为居中对齐，无下划线，设置其右边框为1pxsolid#e9e9e9。
设置嵌套的ul的显示属性为none（不显示），具体CSS代码如下，完成后如图19所示。
#navullia{
display:
block;
width:
115px;
height:
22px;
text-align:
center;
border-right:
1pxsolid#e9e9e9;
text-decoration:
none;
color:
#dddddd;
padding-top:
8px;
font-weight:
bold;
}
#navulliul{
display:
none;
}
图15设置二级目录的显示属性为none后效果
（5）设置一级目录超链接鼠标经过状态样式，改变其背景颜色为：
#06A28E，具体CSS样式如下
#navullia:
hover{
background:
#06A28E;
color:
#fff;
}
（6）设置鼠标经过一级目录时，二级目录的显示属性为block，设置其位置属性为绝对定位，左偏移为-40px，具体CSS样式如下
#navulli:
hoverul{
display:
block;
position:
absolute;
left:
-40px;
}
（7）设置二级目录中超链接的显示属性为block，设置其下边框为1个像素，去掉其右边框。
设置其宽度为115px，具体CSS样式如下，完成效果如图16所示：
#navulli:
hoverullia{
display:
block;
background:
#10585C;
color:
#ffffff;
width:
115px;
text-align:
center;
border-bottom:
1pxsolid#f2f2f2;
border-right:
none;
font-weight:
normal;
}
图16设置二级目录超链接CSS样式后效果
（8）设置鼠标经过二级目录超链接样式效果，具体CSS样式如下：
#navulli:
hoverullia:
hover{
background:
#06A28E;
color:
#fff;
}
（9）为nav中无序列表第一个li创建一个类，设置其左边框为1pxsolid#e9e9e9，具体CSS样式如下：
#navulli.first{
border-left:
1pxsolid#e9e9e9;
}
4．其他部分内容设计
（1）设置banner_right层的右边框为1个像素的实线，并将其宽度更改为239px,文本居中对齐
（2）在banner_right层中插入搜索图片search.jpg,并插入表单，包含输入文本框和搜索按钮
（3）在left_1层中插入一个3行1列的表格，表格的高度和宽度均设置为100%，边框设置为0。
（4）在第一行中输入文字“图片新闻”，在第二行中插入图片tpxw.jpg，并设置图片的高度为190px，宽度为330px，在第三行输入新闻标题。
（5）创建两个类th_style1和td_style1,主要用来设置单元格的边框、背景、字符颜色和内容填充距离等
（6）将上述表格中第一行样式设置为.th_style1，二三行的样式设置为.td_style1,具体代码如下
（7）在left_2层中插入一个3行1列的表格，表格的高度和宽度均设置为100%，边框设置为0。
（8）在第一行中输入文字“服务之窗”，在第二行和第三行中依次插入图片s1.jpg~s6.jpg，并设置图片的高度为25px，宽度为80px。
（9）将第一行样式设置为.th_style1，二三行的样式设置为.td_style1
（10）在main层中插入一个11行1列的表格，表格的高度设置为100%，宽度设置为99%，右对齐，边框设置为0。
（8）在第一行中输入文字“学院新闻”，在其他各行中依次插入图片icon2.gif，新闻标题，新闻日期，并将新闻日期考右对齐。
（9）设置新闻行单元格onMouseOut与onMouseOver属性，使鼠标经过时改变单元格背景颜色。
（10）设置新闻标题链接的样式如下：
#maina{
color:
#333;
text-decoration:
none;
}
（11）将第一行样式设置为.th_style1
（12）在right_1层中插入一个2行1列的表格，表格的高度设置为100%，宽度设置为98%，右对齐，边框设置为0。
（13）在第一行中输入文字“学院专栏”，在第二行中插入图片xyzl.jpg，并设置图片的高度为90px，宽度为210px。
（14）创建新的样式th_style2，用于第一行单元格背景、边框、文字的设置
（15）将第1行样式设置为.th_style2，第2行的样式设置为.td_style1
（16）在right_2层中插入一个7行1列的表格，表格的高度设置为100%，宽度设置为98%，右对齐，边框设置为0。
（17）在第1行中输入文字“精品课程”，在第2~7行中插入精品课程超链接。
（18）将第1行样式设置为.th_style2，第2~7行的样式设置为.td_style1
（19）在footer层中输入版权信息，并设置footer的边框、背景颜色及文本样式
（20）保存整个文档，预览网页效果，对细节部分进行适当微调，至此网站首页设计完成。
最终效果如图17所示。
图17网站首页制作完成后效果
5.四个他页面设计（介绍其他页面制作过程，含截图）
-1-文学链接
（1）首先插入两个3行1列的表格
（2）再将以下四幅图进行修改
得到一个人页面，如图18
图18
-2-入社注册
（1）插入一个表格，代码如下：
文学社新成员申请表
|
姓名：
|
| 性别： |
女
| 学院： |
| 专业： |
| 电话： |
| QQ： |
| 微信： |
| 邮箱： |
| 你对文学的了解： |
了解
基本了解
一般
差
很差
| 你对本社团的评价： |
良好
| 你对哪类文学感兴趣？ | 古风古韵
悬疑侦探
玄幻修真
纯爱言情
外国精品
名家名著
| 你为什么想加入文学社？ |
展开阅读全文
相关搜索
资源标签
|