Web实验设计报告.doc

《Web实验设计报告.doc》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、大连民族学院计算机科学与工程学院实验报告实验题目：网页制作课程名称：web技术基础实验类型：□演示性□验证性□操作性□设计性█综合性专业：软件工程班级：093学生姓名：杨曦学号：实验日期：2011年11月23日——2011年12月7日实验地点：多媒体机房（二)实验学时：12实验成绩：指导教师签字：2011年12月12日目录1实验题目32实验要求33运行环境34采用技术35分析设计35.1风格35.2基调35.3模块36实现（js和css）46.1主页46.1.1设置导航栏的字体46.1.2设置连接特

2、效46.2博文56.2.1分页技术56.2.2具体引用76.3相册76.3.1相册显示技术86.2.2相册的css设置96.2.3相册技术html中的运用106.3资料库106.3.1多级菜单javascript实现106.3.2多级菜单中连接的css样式116.3.3多级菜单的实现116.4课程学习126.4.1浮动的模块javascript技术126.4.2技术的利用126.5个人简介126.5.1个人介绍126.5.2留言板137总结151实验题目静态网页制作2实验要求学会用html，css，

3、javascript等制作一个个人博客网站的静态网页。3运行环境IE浏览器（用于javascript脚本语言运行）4采用技术html、css、javascript5分析设计5.1风格精简小版样例，导航栏位于整个页面右边。5.2基调背景为浅黄色或浅黄绿色相交图片。整个博客颜色与深绿色为基调。5.3模块整个博客分为主页，博文，相册，资料库，课程学习，个人简介六个模块。博文：分为博文和分享两个部分。资料库：分为软件，帮助文档，其他学习资料个人简介：分为简介，留言。6实现（js和css）6.1主页采用div

4、划分模块，分成上中左右四个模块，在中间模块在加上三个模块，分别添加图片，个人介绍，以及主页开篇语。在右边添加一个表格，用作导航栏。导航栏的效果通过设置css属性。导航栏css特效：6.1.1设置导航栏的字体.style1{text-decoration:none;font-family:"仿宋_GB2312";//字体font-size:23px;//字体大小color:#;//字体颜色font-weight:bold;//字体为粗体text-align:center;//字体居中padding-l

5、eft:8px;//字体距离左边的距离}然后通过class引用首页6.1.2设置连接特效tabletda:hover{background:url(../imag2/tubiao3.jpg);//当鼠标移到连接字体上时显示当前路径下的图片。}a{text-decoration:none;//去掉连接的下划线}6.2博文采用上中左右布局，在左边模块里添加一个模块存放日历（本系统中未实现），右边模块中添加表格存放导航栏，在中间模块

6、添加一个标题模块，一个图片模块，一个内容模块。内容模块用表格填充，并用javascript控制分页。6.2.1分页技术实现分页技术Javascript里的重要函数和重要变量varrecord=5;//每页显示多少条记录varcount=10;//记录总数varpageTotal=((count+record-1)/record)

7、0;//总页数varpagenum=1;//将要显示的页码functionsetPagenum(){//整理Cookiepagenum=Cookie.Get("pagenu

8、m");//获取要显示的页码if(pagenum==""

9、

10、pagenum<1){//如果将要显示的页码为空或者小于1都置为1pagenum=1;}}setPagenum();//重新整理当前页码，如果页面小于1，则赋值为1，如果大于总页数，则等于总页数coordinatePagenum(pagenum);//根据当前要显示的页码取得当前面里第一条记录的号码varpageBegin=(record*(pagenum-1)+1)

11、0;//根据当前要显示的页码取得当前面里最后一条记录的号码varpage

12、End=record*pagenum;//计算结束页码functionshowhiddenRecord(pagenum){number.innerHTML=pagenum;if(pagenum<=1){theFirstPage.innerHTML="第一页";thePrePage.innerHTML="上一页";}else{theFirstPage.innerHTML="第一页";thePre