搜索
学号：201340420113《网页制作与开发》作品设计报告一、网站简介（介绍网站的主体内容、设计思路、开发工具等）网站名称湖北理工学院文学社教学院计算机学院专业13网络工程班级1班姓名李潇指导教师刘凯2014年12月30日21.网站内容及意义（正文用仿宋字体，小四号字，行间距为固定值25磅，一级目录内容必须单独另起一页，撰写报告时请将本提示删除。）我所制作的的是湖北理工学院文学社的网站，网站包含了文学社的介绍、社员的作品成就、社团新闻等，其中有文字以及图片介绍，包含了原创的文学社logo。网站导航栏包括了社团概况、社团活动、社员成就、文学链接、经费分配、入社要求和资源下载以便读者更便利地找到所需要的内容。网站向社员及理工学子全面展示了文学社的概况，更新了文学社的时事新闻以便读者最快掌握社团的情款，同时介绍了入社要求及社员成就，使更多学子对文学社感兴趣并且加入文学社，在多重层面上都具有重要意义。2.网站开发工具制作网站使用了Dreamweaver编辑图片使用了Photoshop3二、网站设计过程（介绍网站制作的流程及具体实现过程）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:4800px,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;}5#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{6margin: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;7background-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;8height:400px;width:405px;}#right{float:left;height:400px;width:240px;}图5初步布局效果图2（7）在left层中插入两个div,设置其id分别为：left_1,left_2,并设置其CSS样式如下：#left_1{9height: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所示10图6布局完成效果图2.网页LOGO、BANNER的设计（1）设计文学社logo时需要一张纸扇图，如图7所示图7纸扇11（2）然后在图上加入“文学社”三个字，调整字体大小、颜色、形态达到预期效果，然后用橡皮擦将不要的部分涂掉，制作后效果如图8所示图8文学社logo（3）整体logo需要一张背景图，如图9所示图9花鸟图12（4）经过剪切与合成，得到图10图10最终logo（5）制作“折枝”，需要背景图与计算机学院图片，如图11、图12所示图11图12（6）将图11进行裁剪，将图12用磁性套索处理，再加上“理工学院”、“折枝”等字样得到图1313图13（7）将图片另存为banner.jpg。（8）将图片logo.jpg和banner.jpg分别插入首页的header和banner_left图层中3.网站首页设计（介绍首页的制作过程，含首页截图）1、导航菜单的设计设计一个如图14所示的横向下拉导航菜单。图14（1）在nav层中插入一个无序列表，列表含8个列表项，其中除网站首页外，其他7个列表项里，均嵌套一个子无序列表，具体代码如下：divid=navulliclass=firstahref=#网站首页/a/liliahref=#社团概况/a14ulliahref=#社团简介/a/liliahref=#现社会长/a/liliahref=#社团成员/a/li/ul/liliahref=#社团活动/a/liliahref=#社员成就/aulliahref=#文学作品/a/liliahref=#奖状证书/a/li/ul/liliahref=#文学链接/aulliahref=#小说/a/liliahref=#诗歌/a/liliahref=#剧本/a/li15/ul/liliahref=#入社要求/aulliahref=#入社作品/a/li/ul/liliahref=#经费分配/aulliahref=#发表经费/a/liliahref=#活动经费/a/li/ul/liliahref=#资源下载/aulliahref=#名家名作/a/liliahref=#网络文学/a/li16liahref=#理工作品/a/li/ul/li/ul/div(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样式如下17#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;18padding-top:8px;font-weight:bold;}#navulliul{display:none;}图15设置二级目录的显示属性为none后效果（5）设置一级目录超链接鼠标经过状态样式，改变其背景颜色为：#06A28E，具体CSS样式如下#navullia:hover{background:#06A28E;color:#fff;}19（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;20}图16设置二级目录超链接CSS样式后效果（8）设置鼠标经过二级目录超链接样式效果，具体CSS样式如下：#navulli:hoverullia:hover{background:#06A28E;color:#fff;}（9）为nav中无序列表第一个li创建一个类，设置其左边框为1pxsolid#e9e9e9，具体CSS样式如下：#navulli.first{border-left:1pxsolid#e9e9e9;}214．其他部分内容设计（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_style122（10）在main层中插入