IWeb实验设计报告.doc

大连民族学院 计算机科学与工程学院实验报告 实验题目： 网页制作 课程名称： web技术基础 实验类型：□演示性 □验证性 □操作性 □设计性 █综合性 专业：软件工程 班级：093 学生姓名：杨曦 学号：2009082325 实验日期：2011年 11月23日——2011年12月7日 实验地点：多媒体机房（二) 实验学时：12 实验成绩： 指导教师签字： 2011 年12月12 日 目录 1实验题目 3 2实验要求 3 3运行环境 3 4 采用技术 3 5 分析设计 3 5.1风格 3 5.2基调 3 5.3 模块 3 6 实现（js和css） 4 6.1主页 4 6.1.1设置导航栏的字体 4 6.1.2设置连接特效 4 6.2博文 5 6.2.1分页技术 5 6.2.2具体引用 7 6.3相册 7 6.3.1相册显示技术 8 6.2.2相册的css设置 9 6.2.3相册技术html中的运用 10 6.3资料库 10 6.3.1多级菜单javascript实现 10 6.3.2多级菜单中连接的css样式 11 6.3.3多级菜单的实现 11 6.4课程学习 12 6.4.1浮动的模块javascript技术 12 6.4.2技术的利用 12 6.5个人简介 12 6.5.1个人介绍 12 6.5.2留言板 13 7总结 15 1实验题目 静态网页制作 2实验要求 学会用html，css，javascript等制作一个个人博客网站的静态网页。 3运行环境 IE浏览器（用于javascript脚本语言运行） 4 采用技术 html、css、javascript 5 分析设计 5.1风格 精简小版样例，导航栏位于整个页面右边。 5.2基调 背景为浅黄色或浅黄绿色相交图片。整个博客颜色与深绿色为基调。 5.3 模块 整个博客分为主页，博文，相册，资料库，课程学习，个人简介六个模块。 博文：分为博文和分享两个部分。 资料库：分为软件，帮助文档，其他学习资料 个人简介：分为简介，留言。 6 实现（js和css） 6.1主页 采用div划分模块，分成上中左右四个模块，在中间模块在加上三个模块，分别添加图片，个人介绍，以及主页开篇语。在右边添加一个表格，用作导航栏。导航栏的效果通过设置css属性。 导航栏css特效： 6.1.1设置导航栏的字体 .style1{ text-decoration:none; font-family:仿宋_GB2312;//字体 font-size:23px;//字体大小 color:#000000;//字体颜色 font-weight:bold;//字体为粗体 text-align:center;//字体居中 padding-left:8px;//字体距离左边的距离 } 然后通过class引用a href=home.html class=style1首页/a 6.1.2设置连接特效 table td a:hover{ background:url(../imag2/tubiao3.jpg); //当鼠标移到连接字体上时显示当前路径下的图片。 } a{text-decoration:none;//去掉连接的下划线 } 6.2博文 采用上中左右布局，在左边模块里添加一个模块存放日历（本系统中未实现），右边模块中添加表格存放导航栏，在中间模块添加一个标题模块，一个图片模块，一个内容模块。内容模块用表格填充，并用javascript控制分页。 6.2.1分页技术 实现分页技术Javascript里的重要函数和重要变量 var record = 5;//每页显示多少条记录 var count = 10;//记录总数 var pageTotal = ((count+record-1)/record)|0;//总页数 var pagenum = 1;//将要显示的页码 function setPagenum(){//整理Cookie pagenum = Cookie.Get(pagenum);//获取要显示的页码