完整word版Web前端技术实训报告书.docx
《完整word版Web前端技术实训报告书.docx》由会员分享，可在线阅读，更多相关《完整word版Web前端技术实训报告书.docx（17页珍藏版）》请在冰点文库上搜索。
完整word版Web前端技术实训报告书
《Web前端技术实训》任务书
一、实训课题名称
1、教育类网站的设计与制作
2、商业类网站的设计与制作
3、旅游休闲类网站的设计与制作
4、体育健身类网站的设计与制作
二、课题设计目的
通过实训，应使学生巩固所学知识，把所学的理论知识运用到网站制作实践中。
培养学生动手能力，将PS制作效果图、HTML、CSS+DIV网页布局、JavaScript等Web前端开发技术结合起来，在实训环节中进行运用。
为以后学习动态网站打下基础。
三、任务要求：
用PhotoShop、DreamWeaver等开发工具制作一个由静态网页构成的简单网站，要求包括一个首页、至少三个子网页，按照网站开发流程，先做网页效果图，然后制作网页素材、构建网站文件结构、规划网页布局、制作网页动画、实现网页功能，尔后进行网站测试，并编制出各阶段必要的文档。
在编写文档时，必须严格遵照要求，最后提交文档。
功能要求：
该网站首页必须包括网站logo、导航条（带有鼠标事件变化效果）、banner（简单flash动画）、图片、多媒体运用、文字等主要信息展示；子网页包括用户注册（带有表单输入项本地验证功能）、登录（用户名和密码非空验证）、子网页相关栏目。
各页面之间通过超链接切换。
最后要求提交详细的课程设计报告及网页效果图（.psd）和网站运行文件，现场运行验收开发的系统。
四、课题设计报告书要求：
1、课题设计报告书第一页为封面，封面上写清楚标题、班级、姓名、指导老师、完成日期。
2、课题设计报告书第二页为本任务书。
3、课题设计报告书第三页为教师评语。
4、课题设计报告书第四页为目录。
5、课题设计报告书第五页开始为具体内容：
（1）开发背景
（2）网站分析设计部分
1）客户需求分析
2）网站风格定位
3）网站建设方案
●网页风格创意设计
●网站栏目划分
●栏目内容介绍
●网站拓扑图
4）网站效果图
（3）网站制作部分
1）效果图制作
2）网页素材及网站架构制作
3）首页制作页面设计
4）子页面制作
6、课题设计报告书最后一页是本次课程设计的小结和参考文献。
7、字数要求不少于3000字。
8、打印纸张使用B5纸，页边距设为上、下、左2厘米，右1.5厘米，
五、如有雷同，将作不及格处理。
六、完成时间：
2012.1.5
教师评语
评分项
分值
得分
网站
设计
实现
部分
（60分）
1.实现.能力（50分）
效果图
5
Logo
5
Banner
5
导航条
5
页面布局与美化
5
注册验证、登录
10
图片多媒体运用
5
程序复杂度
5
运行效果
5
2.创新能力
5
3.学生答辩
5
小计
60
设计
报告
部分
（30分）
1.结构完整，条理清晰（封面、任务书、教师评语、目录、正文内容、小结、参考文献）
10
2.独立完成
5
3.描述工具使用恰当：
网站拓扑图
5
4.制作步骤描述清晰
5
5.报告内容充实
5
小计
30
学习态度部分（10分）
考勤
5
认真完成，勤于思考，积极提问
5
小计
10
总计
100
成绩
教师：
2012.1．5.
一前言
1.1客户需求分析
客户需求，是指学校创建门户网站的目的和对网站提出的特定要求。
了解客户需求，是建好学校门户网站的前提。
宁海职业技术学校对其拟建的门户网站提出的主要要求有以下几点。
（1）宣传学校办学理念，展示办学设施、教师队伍、专业设置、就业情况，提高学校的社会知名度；
（2）适时发布学校管理、教学、招生等相关信息，为求学者提供相关咨询服务；
（3）获取社会各界对学校教育教学情况的评价和意见、建议；
（4）建立与兄弟院校进行交流学习的平台；
（5）向社会各界推荐毕业生，为毕业生提供就业信息。
1.2网站风格定位
校园网站就是学校的网上形象，每一所学校都有自己的特色，每一个院系或班级都会有自己的强项。
对于本项目介绍的校园网站以抚州职业技术学校为例，从以下三个方面来学习该网站的风格定位。
1．色彩：
本项目中采用一种色彩，先选定主色调为橙色，这是令人激奋的色彩，具有明亮、健康、热烈、温暖、欢乐、辉煌、庄严，以及尊贵的色感，然后通过调整透明度或者饱和度，就是色彩进行变淡、加深或渐变的处理，产生新的橙色的近似色彩，使网页看起来色彩统一，富有层次感。
在页面中借助浅灰色的背景图像，采用了留白艺术给人一个遐想的空间，让人感觉心情舒适、畅快。
同时，也对于协调页面的均衡起到相当大的作用。
2．排版
本项目就是采用骨骼型排版形式，网页版式的骨骼型是一种规范的、理性的分割方法，类似于报刊的版式。
常见的骨骼有竖向通栏、双栏、三栏、四栏和横向的通栏、双栏、三栏和四栏等。
一般以竖向分栏为多。
这种版式给人以和谐、理性的美。
几种分栏方式结合使用，既理性、条理，又活泼而富有弹性。
3．特效
在本网站中有两种动画效果：
一是采用Flash软件制作了网站的广告；二是采用JavaScript脚本制作了滚动图片。
二网站设计前期准备
本项目以教育类网站为范例，系统介绍宁海职业技术学院网站的设计制作基本方法。
2.1网站风格定位
为了充分发挥校园网站的作用，就需要对网站的内容进行系统的规划。
1．页面风格创意设计
网站的页面颜色初步拟定采用橙色为基础色，在此色调的基础上进行颜色渐变的展开，通过色彩的运用突出本网站要传达的求知、务实、健康、热烈、庄严等元素，使网站收到良好的创意效果。
2．网站栏目划分
根据我们对用户的了解，特建立以下栏目。
●学校概况●专业设置●新闻中心●教学管理●多彩校园●职教动态●校报校刊
●给我留言●视频新闻●校园快讯●校园文化●专业简介●校园生活●学生风采
3.特效
网页特效就是让网页看起来生动活泼的各种应用Flash、
JavaScript、VBScript等。
本网站采用Flash制作网页动画、
photoshop设计平面效果图、Dreamweaver进行页面排版、DIV技术
优化页面效果.
三、网站拓扑图
首页
四、网站效果图
（1）网站主页效果图如图7-1示
图7-1
（2）网站子叶效果图如图7-2-1和图7-2-2所示
图7-2-1
图7-2-2
五、中期网站制作
（一）网站首页制作
利用photoshop制作网站首页导航栏，效果如下图所示：
1、首页logo效果：
2、站内公告效果：
3、站内新闻效果图：
4、登陆效果图：
5、新闻效果图：
6、教务管理果图：
7、登陆界面效果图：
8、注册页面效果图：
（二）网站搭建过程
步骤一网站首页的制作
一、创建站点并设置页面属性
1．启动Dreamweaver程序后，创建站点，站点包括三个文件夹：
files、images、other
和一个主页文件：
shouye.htm，然后编辑shouye.htm网页，如图下图所示。
小提示：
创建站点时必须注意文件夹及主页的标准格式，否则对以后网站的管理与维护不利。
2．在编辑窗口中单击“页面属性”按钮，打开“页面属性”对话框。
选择“分类”区
的“外观”选项，设置字体大小为9pt；选择“标题/编码”选项，输入“宁海职业技术学院！
”，
编码为“简体中文（GB2312）”选项；设置背景图像；在上、下、左、右边距文本框中均输
入“0”像素，单击“确定”，返回网页编辑窗口，如图下图所示。
二、设置CSS样式
设置CSS样式可以在制作网页前进行，也可以边制作网页边进行设置，但通常推荐的方
法是制作网页前设置基本的CSS样式，在制作网页过程中根据需要再随时填加CSS样式。
1．打开“CSS样式”面板，单击新建CSS样式按钮，如图下图所示。
小提示：
CSS样式表可以使操作简便，请注意样式表的创建。
三、制作网站的Logo动画
2．进入“新建CSS规则”对话框，在“标签”下拉列表中选择“td”选项，在“定义
在”中选择“新建样式表文件”。
单击“确定”，打开“CSS规则定义”对话框，在其中设
置字体大小为12像素，行距为130%，如图下图所示。
小提示：
一般主页中文本内容的字号均为12或13像素，否则显示效果就不佳了。
CSS样式定义在新建样式表文件中有利于其它文件通过链接来使用该样式。
3．单击“确定”按钮，在CSS样式面板上可以看到新添加了css.css文件，根据网页预设的效果，重复设置后最终得到CSS样式。
四、制作标题栏和导航
1．插入一个表格，参数如图下图所示。
2．设置表格高度为140像素，并居中对齐，效果如图下图所示。
3．将光标移到单元格内，插入LOGO图像，效果如图
4．在上面表格下方插入1行10列的表格，参数如图
5．分别设置第1、2列单元格属性，并分别填加背景图像，其它单元格的设置同第2列单元格，输入导航文字后效果图略。
五、制作主体内容
网页主体内容大致分为五部分，首先使用表格划分为五个横向区域，然后在每个单元格
内分别插入嵌套表格制作不同区域的内容。
第一部分
1．在上面表格的下方，插入1行2列、776*203像素的表格，背景色为白色。
2．在第1列中插入3行1列的表格，在该表格中分别插入图像、背景图像后效果如图所示。
在图所示的空白区域变换图像的制作：
先插入JavaScript脚本，在空白单元格中插入一个1行1列、大小为175*120像素的表格，在表格的代码视图中插入代码，
3．在第2列中插入3个表格，图略。
第1个表格中添加滚动字幕
第2个表格中插入文本及图片
第3个表格的第1列单元格中插入1行1列的表格，在其中插入图片，图片周围背景图片为宁海背景.jpg；第2列单元格中插入6行3列的表格，填加文本，文本所在行背景图片为宁海1.jpg
第二部分
1.在第一部分表格的下方插入1行1列的表格，如图
2．在上述表格中嵌套1个3行1列的表格，如图
3．在第1行、第3行单元格中分别插入图片，第2行单元格中嵌套1个1行6列的表格，插入图片，效果如图
第三部分
这部分与第一部分大体相同，所以步骤就省略了，效果如图。
第四部分
1．在第三部分表格下插入1个1行1列的表格，如图
2．在上述表格中嵌套1个3行1列的表格，在第1行、第3行单元格中分别插入图片，第2行单元格中添加背景颜“#fd7011”。
在第2行单元格中编辑JavaScript脚本得到图片滚动的效果，如图
第五部分
1．在第四部分表格下插入1行2列的表格，如图
2．在第1列单元格中分别插入3行1列的表格，分别通过表格的嵌套得到效果如图
3．在第2列单元格中，插入1个1行3列的表格，如图
4．在上述表格的下方插入1行1列的表格，在该表格中再嵌套8行6列的表格，如图
5.在上述表格的下方插入FLASH对象，如图
第六部分
在第五部分表格的下方，插入1行1列的表格，在其中嵌套1行5列的表格，插入相应的链接图片，如图
五、制作版权信息
在主体内容表格第六部分的下方插入5行1列的表格，输入文本及图片，如图
步骤二网站子页的制作
本网站的子页在形式上套用了主页的结构，使之在风格上与主页完全统一。
页面特点：
（1）通过表格的嵌套、单元格的拆分与合并来进行网页元素的布局；
（2）表单的制作；
（3）栏目背景图片的制作。
步骤三链接主页与子页
对主页与各子页之间进行链接，并使链接畅通。
七、网站建设心得小结
随着网络技术应用的快速普及,电子商务正以前所未有的速度迅猛发展,由最初的电子零售阶段、电子贸易阶段发展到网上交易市场阶段。
网上交易市场是一个从内向外、内外整合的供应价值链。
进入网上交易市场的企业内部必须先有一套合作的电子化生产管理系统,并且这套系统能与外部信息无缝对接,从而实现企业生产、采购、销售全过程的整合信息化。
在这实训期间内，我的网站建设遇到很多问题，如：
如何进行页面布局，怎样嵌套div，怎样制作网页动画等等一系列问题。
一开始满头雾水，根本不知道该从哪里下手，像无头的苍蝇到处乱窜，摸索了几次后才开始慢慢理出头绪，
首先明确网站层次，一共有几级分类，类别划分的标准是什么，一共有多少类别，每个类下面的二级分类又是什么，首页、各级页面的设计框架图，网站有多少个共同的元素，如何管理。
有着这样的思路建起网站来就容易多了。
在老师的帮助下，我的网站慢慢浮出水面。
在制作网站的过程中，一开始都是按部就班的照着书本抄，结果发现它的知识点根本不够用，只能上网查资料，问老师、问同学，尤其是在继续组装时，div嵌套技术一点都不会，看着一串一串的代码就头晕，只能努力克服，寻找解决办法；再次是在进行主页与子叶的链接是也把我难倒了，寻找多方帮助，才链接成功。
网站制作不是一份简单的工作，要有广博的知识面和很好的耐心，在以后的学习过程，会更加努力，更加细心，不断学习各方面的知识，使自己更加完善。
八、参考文献
1、《网站前台设计项目实战》北京理工大学出版社
徐敏韩宝玉刘改主编
祝海英李东升付晓波副主编
薛红启主审
2、《javascript程序设计基础教程》人民邮电出版社
曾海主编高春艳于一张春副主编
升级会员 