第1页 / 共11页
第2页 / 共11页
第3页 / 共11页
第4页 / 共11页
第5页 / 共11页
第6页 / 共11页
第7页 / 共11页
第8页 / 共11页
网页制作与网站建设课程实训报告书.doc
2011-2012 学年 第 一 学期
实训报告书
课程名称： 网页制作与网站建设
系（部）：
信息工程系
专业班级：
计算机 09-5 班
学生姓名：
学生学号：
山东科技大学泰山科技学院
成绩
评语：
指导教师
目录
一、实训目的………………………………………………………………………1
二、实训要求………………………………………………………………………1
三、实训内容………………………………………………………………………1
1、网站设计的必要性…………………………………………………………………………1
2、功能设计……………………………………………………………………………………1
3、系统设计……………………………………………………………………………………1
1) 首页……………………………………………………………………………………2
2) 班级简介页……………………………………………………………………………2
3) 班级新闻页……………………………………………………………………………3
4) 班级风采页……………………………………………………………………………3
5) 学习园地页……………………………………………………………………………4
6) 学校新闻页……………………………………………………………………………4
四、参考文献………………………………………………………………………5
五、附录……………………………………………………………………………6
网页设计实训报告书
一、实训目的：
通过课程实训，每个学生在指导教师的指导下，完成一定的任务，受到一次综合运用所
学知识、独立完成某项技术工作的训练，从而培养和提高其独立工作能力，主要有以下四个
方面的业务能力：
1．综合运用所学专业基本理论，提高查阅文献和资料的能力。
2．培养学生进行方案设计，分析比较和设计、计算的能力。
3．培养学生网站开发，和调试计算机程序的能力。
4．提高学生进行技术总结和撰写说明书的能力。
二、实训要求：
建立一个完整的网站，要做到：网站的目标定位准确；版面的总体设计和栏目设置（布
局合理，使用表格进行布局）；提供的内容，信息准确、及时、信息量大小适度；网页的制
作、页面的结构、色彩、导航合理；网站浏览的速度，交互设计是否合理、方便。在设计中
利用 CSS 样式对字体整体样式进行修饰，要求格调一致。
三、实训内容：
1．网站设计的必要性：本次实训，建立一个班级网站。设计这个班级网站，是向大家
介绍和展示一个班级，包括一个班级的基本介绍、最新新闻、先进事迹等。通过积极健康的
内容体现班级个性特色、校园生活和学习。
2．功能设计：班级网站主要实现的功能是，浏览者打开主页后，通过点击链接可浏览
对于一个班级各方面的介绍。使用记事本和 Dreamweaver 完成设计。布局合理，便于查看，
给浏览者以好的欣赏感受。
首页：整体布局；班级简介：介绍班级基本情况；班级新闻：展示班级最新新闻；班级
风采：展示班级相册；学习园地：课外知识及诗词鉴赏；学校新闻：展示学校最新新闻。
3．系统设计：班级网站主要有 6 个主页面：主要使用记事本和 Dreamweaver 完成布局
设计，美工设计通过内部样式和链接外部 css 样式表完成，班级相册的制作用到 Flash 和
Photoshop 软件。
网站里的每一个网页都有统一的风格，每一个网页的主题色彩都是蓝色和绿色，代表同
学们积极向上的生活和学习态度，以及对未来生活的憧憬和希望。
班级网站系统设计主要模块：
班级网站系统设计
首
页
导
航
班
级
简
介
班
级
新
闻
班
级
风
采
学
习
园
地
学
校
新
闻
1) 首页布局：
导
航
LOGO 标题栏
班级相册首页展示
班级公告
学校最近新闻
学习园地
版权
设计思想：首页主要实现对班级的整体介绍，导航栏可以让浏览者有目的的浏览对班级
的某一项介绍，班级相册首页展示。班级公告文字滚动显示班级动态，学校最近新闻可以让
浏览者及时了解和学校有关动态，最下方模块为版权所有。整体使用表格布局。
设计内容：主页上方标题栏有学校校徽，加上班级图片，整体背景使用浅蓝色，中间部
分使用绿色调，给人清新自然的感觉。主页中还插入了背景音乐，音乐名为“卡农”，这首
音乐为.mp3 音乐，占用内存小，音乐清脆悦耳，愉悦活泼，适合做背景音乐。
功能实现：点击导航中的各项以及点击各个模块都会链接到单个网页，并且是在新窗口
中打开。整体布局使用表格实现。具体展示如下图：
2）班级简介页：
设计思想：班级简介网页用文字及表格形式介绍班级特色，其中包括：班级简介、班级
成员以及班级课程表。
功能实现：左侧的班级简介导航，单击单项标题，会在右侧出现相应信息。如图：
3）班级新闻页：
设计思想：浏览班级最新动态新闻，班级同学可通过此页及时了解到班级最近活动。重
点是条理清晰，方便同学们阅读。
功能实现：当点击导航栏的“班级新闻”，会在新窗口打开班级新闻页，以条例的形式
列出班级最新的 5 条新闻。如图：
4）班级风采页：
设计思想：显示班级集体活动或者个人照片。
功能实现：当点击导航栏的“班级风采”或者首页中间的班级相册照片，会在新窗口打
开班级风采页，浏览同学们的照片。在此页中使用
5）学习园地页：
设计思想：增加一些课外知识的内容，扩展同学们的视野。
功能实现：当点击导航栏的“学习园地”或者首页右下方的学习园地内容链接，会在新
窗口打开学习原地页，同学们可对感兴趣的内容进行浏览。
6）学校新闻页：
设计思想：浏览者可在此页浏览有关学校的最新动态新闻。
功能实现：当点击导航栏的“学校新闻”或者首页左下方的学校新闻内容链接，会在新
窗口打开学校新闻页。点击左侧的新闻标题，可在右侧栏中查看新闻的具体内容。使用的框
架结构实现。如图：
四、参考文献：【1】 作者：郑娅峰 清华大学出版社 2011.3
五、附录：
主要源程序代码：
计算机 09-5 班
