文档介绍：学号:3《网页制作与开发》作品设计报告网站名称湖北理工学院文学社教学院计算机学院专业13网络工程班级1班姓名李潇指导教师刘凯2014年12月30日一、网站简介(介绍网站的主体内容、设计思路、开发工具等)(正文用仿宋字体,小四号字,行间距为固定值25磅,一级目录内容必须单独另起一页,撰写报告时请将本提示删除。)我所制作的的是湖北理工学院文学社的网站,网站包含了文学社的介绍、社员的作品成就、社团新闻等,其中有文字以及图片介绍,包含了原创的文学社logo。网站导航栏包括了社团概况、社团活动、社员成就、文学链接、经费分配、入社要求和资源下载以便读者更便利地找到所需要的内容。网站向社员及理工学子全面展示了文学社的概况,更新了文学社的时事新闻以便读者最快掌握社团的情款,同时介绍了入社要求及社员成就,使更多学子对文学社感兴趣并且加入文学社,在多重层面上都具有重要意义。、网站设计过程(介绍网站制作的流程及具体实现过程),做好布局草图,通过DIV+CSS进行布局。(1)新建站点,创建首页文件及其他文件夹。图2新建站点和文件(2)打开首页,,并在文件中设置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:#;}#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:#;完成后效果如图4所示:图4初步布局效果图1(5)在banner层中,插入两个div,设置其id分别为banner_left,,具体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+C