网页制作实验报告

1、学 号： 3网页制作与开发作品设计报告网站名称湖北理工学院文学社教 学 院计算机学院专 业13网络工程班 级1班姓 名李潇指导教师刘 凯2014年12月30日一、网站简介（介绍网站的主体内容、设计思路、开发工具等）1.网站内容及意义（正文用仿宋字体，小四号字，行间距为固定值25磅，一级目录内容必须单独另起一页，撰写报告时请将本提示删除。）我所制作的的是湖北理工学院文学社的网站，网站包含了文学社的介绍、社员的作品成就、社团新闻等，其中有文字以及图片介绍，包含了原创的文学社logo。网站导航栏包括了社团概况、社团活动、社员成就、文学链接、经费分配、入社要求和资源下载以便读者更便利地找到所需要的内容

2、。网站向社员及理工学子全面展示了文学社的概况，更新了文学社的时事新闻以便读者最快掌握社团的情款，同时介绍了入社要求及社员成就，使更多学子对文学社感兴趣并且加入文学社，在多重层面上都具有重要意义。2.网站开发工具制作网站使用了Dreamweaver编辑图片使用了Photoshop二、网站设计过程（介绍网站制作的流程及具体实现过程）1.网站设计流程规划好首页需要放置的主要栏目，做好布局草图，通过DIV+CSS进行布局。 （1）新建站点，创建首页文件及其他文件夹。图2 新建站点和文件（2）打开首页，新建样式表文件mystyle.css，并在文件中设置body标记CSS样式如下：body font-f

3、amily: 宋体;font-size: 12px;color: #000;（3）在网页中插入布局对象div，设置其id=”box” ,width:1000px,height:800px, margin:0 auto ,如图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:

4、#CCCCCC;#nav margin: 0px;height: 55px;width: 100%; background-color: #;#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所示

5、：图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

6、, 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;

7、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时需要一张

8、纸扇图，如图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

9、图层中3.网站首页设计（介绍首页的制作过程，含首页截图）1、导航菜单的设计设计一个如图14所示的横向下拉导航菜单。图14（1） 在nav层中插入一个无序列表，列表含8个列表项，其中除网站首页外，其他7个列表项里，均嵌套一个子无序列表，具体代码如下：网站首页社团概况社团简介现社会长社团成员社团活动 社员成就文学作品奖状证书文学链接小说诗歌剧本入社要求入社作品经费分配发表经费活动经费资源下载名家名作网络文学理工作品(2)设置nav的背景颜色，上下边框均为1个像素，边框颜色为白色，设置nav的位置属性为相对定位，具体CSS样式如下：#nav background-color:#10585C;heig

10、ht:55px;width:100%;text-align:center;position:relative;border-top:1px solid #fff;border-bottom:1px solid #fff;（3）设置nav中的ul的list-style-type属性为none,设置nav中的li左浮动，定位属性为相对定位，具体CSS样式如下#nav ul list-style-type: none; #nav ul li float:left; position: relative; （4）将ul li 中的a元素设置为块级元素，并设置其高度和宽度，设置其文本样式为居中对齐，无下

11、划线，设置其右边框为1px solid #e9e9e9。设置嵌套的ul的显示属性为none（不显示），具体CSS代码如下，完成后如图19所示。#nav ul li a display:block; width:115px;height:22px;text-align: center; border-right:1px solid #e9e9e9; text-decoration:none; color:#dddddd; padding-top:8px;font-weight:bold; #nav ul li ul display: none; 图15 设置二级目录的显示属性为none后效果（5

12、）设置一级目录超链接鼠标经过状态样式，改变其背景颜色为：#06A28E，具体CSS样式如下#nav ul li a:hoverbackground:#06A28E; color:#fff; （6）设置鼠标经过一级目录时，二级目录的显示属性为block，设置其位置属性为绝对定位，左偏移为-40px，具体CSS样式如下#nav ul li:hover ul display: block; position: absolute; left:-40px;（7）设置二级目录中超链接的显示属性为block，设置其下边框为1个像素，去掉其右边框。设置其宽度为115px，具体CSS样式如下，完成效果如图16所

13、示：#nav ul li:hover ul li a display:block; background:#10585C;color:#ffffff; width:115px; text-align: center; border-bottom: 1px solid #f2f2f2; border-right: none; font-weight:normal;图16 设置二级目录超链接CSS样式后效果（8）设置鼠标经过二级目录超链接样式效果，具体CSS样式如下：#nav ul li:hover ul li a:hover background:#06A28E; color:#fff; （9）

14、为nav中无序列表第一个li 创建一个类，设置其左边框为1px solid #e9e9e9，具体CSS样式如下：#nav ul li.firstborder-left:1px solid #e9e9e9; 4其他部分内容设计（1）设置banner_right层的右边框为1个像素的实线，并将其宽度更改为239px,文本居中对齐（2）在banner_right层中插入搜索图片search.jpg, 并插入表单，包含输入文本框和搜索按钮（3）在left_1层中插入一个3行1列的表格，表格的高度和宽度均设置为100%，边框设置为0。（4）在第一行中输入文字“图片新闻”，在第二行中插入图片tpxw.jp

15、g，并设置图片的高度为190px，宽度为330px，在第三行输入新闻标题。（5）创建两个类th_style1和td_style1, 主要用来设置单元格的边框、背景、字符颜色和内容填充距离等（6）将上述表格中第一行样式设置为.th_style1，二三行的样式设置为.td_style1,具体代码如下（7）在left_2层中插入一个3行1列的表格，表格的高度和宽度均设置为100%，边框设置为0。（8）在第一行中输入文字“服务之窗”，在第二行和第三行中依次插入图片s1.jpgs6.jpg，并设置图片的高度为25px，宽度为80px。（9）将第一行样式设置为.th_style1，二三行的样式设置为.td

16、_style1 （10）在main层中插入一个11行1列的表格，表格的高度设置为100%，宽度设置为99%，右对齐，边框设置为0。（8）在第一行中输入文字“学院新闻”，在其他各行中依次插入图片icon2.gif，新闻标题，新闻日期，并将新闻日期考右对齐。（9）设置新闻行单元格onMouseOut与onMouseOver属性，使鼠标经过时改变单元格背景颜色。（10）设置新闻标题链接的样式如下：#main a color:#333; text-decoration:none;（11）将第一行样式设置为.th_style1 （12）在right_1层中插入一个2行1列的表格，表格的高度设置为100%

17、，宽度设置为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行中输入文字“精品课程”，在第27行中插入精品课程超链接。（18）将第1行样式设置为.th_style2，第27行的样式设置为.td_sty

18、le1（19）在footer层中输入版权信息， 并设置footer的边框、背景颜色及文本样式（20）保存整个文档，预览网页效果，对细节部分进行适当微调，至此网站首页设计完成。最终效果如图17所示。图17 网站首页制作完成后效果5.四个他页面设计（介绍其他页面制作过程，含截图）-1-文学链接（1）首先插入两个3行1列的表格（2）再将以下四幅图进行修改得到一个人页面，如图18图18-2-入社注册（1）插入一个表格，代码如下： 文学社新成员申请表 姓名： 性别： 男 女 学院： 专业： 电话： QQ： 微信： 邮箱： 你对文学的了解： 很了解 了解 基本了解 一般 差 很差 你对本社团的评价： 优秀 良好 中等 差 你对哪类文学感兴趣？ 古风古韵 悬疑侦探 玄幻修真 纯爱言情 外国精品 名家名著 你为什么想加入文学社？        （2） 插入背景，最终得到图19所示图19-3-古风魅力（1）首先建一个两行两列的大表，在表中插入三个小表（2）用PS制作“歌曲链接”，如图20所示图20（3） 排版后得到图21图21 三、网站设计总结（网站制作的收获及心得体会、遇到的问题和困难、待改进的地方）1. 心得体会在这次的网页设计中用到大量的布局，所以怎么样建立布局是关键。Dreamweavercs3是大多数