Web前端技术实训报告书

1、Web前端技术实训任务书一、实训课题名称1 、 教育类网站的设计与制作2 、 商业类网站的设计与制作旅游休闲类网站的设计与制作体育健身类网站的设计与制作课题设计目的通过实训，应使学生巩固所学知识，把所学的理论知识运用到网站制作实践中。培养学生动手能力，将PS制作效果图、HTML CSS+DIV网页布局、JavaScript等Web前端开发技术结合起来，在实训环节中进行运用。为以后学习动态网站打下基础。三、 任务要求：用 PhotoShop、 DreamWeaver 等开发工具制作一个由静态网页构成的简单网站，要求包括一个首页、至少三个子网页，按照网站开发流程，先做网页效果图，然后制作网页素材、

2、 构建网站文件结构、规划网页布局、制作网页动画、实现网页功能，尔后进行网站测试，并 编制出各阶段必要的文档。在编写文档时，必须严格遵照要求，最后提交文档。功能要求：该网站首页必须包括网站 logo 、导航条（带有鼠标事件变化效果） 、 banner flash 动画） 、图片、多媒体运用、文字等主要信息展示；子网页包括用户注册（带有表单输入项本地验证功能） 、登录（用户名和密码非空验证） 、子网页相关栏目。各页面之间通过超链接切换。最后要求提交详细的课程设计报告及网页效果图（.psd）和网站运行文件，现场运行验收开发的系统。课题设计报告书要求：课题设计报告书第一页为封面，封面上写清楚标题、班级

3、、姓名、指导老师、完成日期。课题设计报告书第二页为本任务书。课题设计报告书第三页为教师评语。课题设计报告书第四页为目录。课题设计报告书第五页开始为具体内容：1）开发背景2）网站分析设计部分1）客户需求分析2）网站风格定位3）网站建设方案网页风格创意设计6 、课题设计报告书最后一页是本次课程设计的小结和参考文献。网站栏目划分栏目内容介绍网站拓扑图4）网站效果图（ 3）网站制作部分1 ）效果图制作页是本次课程设计的小结和参考文献o2）网页素材及网站架 构制作3）首页制作页面设计4）子页面制作7 、字数要求不少于3000 字。8、打印纸张使用 B5纸，页边距设为上、下、左 2厘米，右1.5厘米,如有

4、雷同，将作不及格处理。完成时间：2012.1.5教育类网站设计报告书宁海职业技术学院网教师评语评分项分值得分网站 设计 实现 部分（60 分）1.实现.能力（50 分）效果图5Logo5Banner5导航条5贝囿布局与美化5注册验证、登录10图片多媒体运用5程序复杂度5运行效果52.创新能力53.学生答辩5小计60设计 报告 部分（30 分）1.结构完整，条理清晰（封面、任务书、教 师评语、目录、正文内容、小结、参考文献）102.独立完成53.描述工具使用恰当：网站拓扑图54.制作步骤描述清晰55.报告内容充实5小计30学习态 度部分 （10 分）考勤5认真完成，勤于思考，积极提问5小计10总

5、计100成绩教师：2012.1. 5. TOC o 1-5 h z 一前言 -3- HYPERLINK l bookmark2 o Current Document 客户需求分析 -4- HYPERLINK l bookmark4 o Current Document 网站风格定位 -4-1 色彩： -4-2排版 -5-3特效 -5- HYPERLINK l bookmark6 o Current Document 二网站设计前期准备 -5- HYPERLINK l bookmark8 o Current Document 网站风格定位 -5-页面风格创意设计 -6-网站栏目划分 -6-. 特

6、效 -6-三、网站拓扑图 -6-四、网站效果图 -7-五、中期网站制作 -10-（一）网站首页制作 -10-1、首页logo 效果： - 10 -2、站内公告效果： -10-3、站内新闻效果图： -10-4、登陆效果图： - 11 -（二）网站搭建过程 -13-三、制作网站的 Logo 动画 -15 -六、网站建设心得小结 -22-七、参考文献 -24-一 前言教育类网站设计报告书宁海职业技术学院网客户需求分析客户需求， 是指学校创建门户网站的目的和对网站提出的特定要求。了解客户需求，是建好学校门户网站的前提。宁海职业技术学校对其拟建的门户网站提出的主要要求有以下几点。1）宣传学校办学理念，展

7、示办学设施、教师队伍、专业设置、就业情况，提高学校的社会知名度；2）适时发布学校管理、教学、招生等相关信息，为求学者提供相关咨询服务；3）获取社会各界对学校教育教学情况的评价和意见、建议；4）建立与兄弟院校进行交流学习的平台；5）向社会各界推荐毕业生，为毕业生提供就业信息。网站风格定位校园网站就是学校的网上形象，每一所学校都有自己的特色，每一个院系或班级都会有自己的强项。 对于本项目介绍的校园网站以抚州职业技术学校为例，从以下三个方面来学习该网站的风格定位。色彩：本项目中采用一种色彩，先选定主色调为橙色， 这是令人激奋的色彩，具有明亮、健康、热烈、温暖、欢乐、辉煌、庄严，以及尊贵的色感，然后通

8、过调整透明度或者饱和度，就是色彩进行变淡、加深教育类网站设计报告书宁海职业技术学院网或渐变的处理，产生新的橙色的近似色彩，使网页看起来色彩统一，富有层次感。 在页面中借助浅灰色的背景图像， 采用了留白艺术给人一个遐想的空间，让人感觉心情舒适、畅快。同时，也对于协调页面的均衡起到相当大的作用。2排版本项目就是采用骨骼型排版形式， 网页版式的骨骼型是一种规范的、理性的分割方法，类似于报刊的版式。常见的骨骼有竖向通栏、双栏、三栏、四栏和横向的通栏、双栏、三栏和四栏等。一般以竖向分栏为多。 这种版式给人以和谐、 理性的美。 几种分栏方式结合使用，既理性、条理，又活泼而富有弹性。3特效在本网站中有两种动

9、画效果： 一是采用 Flash 软件制作了网站的广告；二是采用 Java Script 脚本制作了滚动图片。二 网站设计前期准备本项目以教育类网站为范例，系统介绍宁海职业技术学院网站的设计制作基本方法。网站风格定位为了充分发挥校园网站的作用， 就需要对网站的内容进行系统教育类网站设计报告书宁海职业技术学院网的规划 1页面风格创意设计网站的页面颜色初步拟定采用橙色为基础色，在此色调的基础上进行颜色渐变的展开，通过色彩的运用突出本网站要传达的求知、 务实、 健康、 热烈、 庄严等元素， 使网站收到良好的创意效果。2网站栏目划分根据我们对用户的了解，特建立以下栏目。学校概况专业设置新闻中心教学管理多

10、彩校园职教动态校报校刊给我留言视频新闻校园快讯校园文化专业简介校园生活学生风采3. 特效网页特效就是让网页看起来生动活泼的各种应用 Flash 、JavaScript 、 VBScript 等。本网站采用 Flash 制作网页动画、photoshop设计平面效果图、Dreamweaver行页面排版、DIV技术优化页面效果 .、网站拓扑图教育类网站设计报告书宁海职业技术学院网网站首页四、网站效果图(1)网站主页效果图如图 7-1示图7-1(2)网站子叶效果图如图7-2-1和图7-2-2所示=三*l=*1tnHnn*.图 7-2-1IlHIJbU I I VML图 7-2-2五、中期网站制作（一）

11、网站首页制作利用photoshop制作网站首页导航栏，效果如下图所示:1、首页logo效果:ning hai2、站内公告效果:3、站内新闻效果图:教育类网站设计报告书一一宁海职业技术学院网-10 -教育动态校刊校检领导关怀1新闻中心1教学管理I多彩校I也盯概阳我得并怀I新恒!嵬要新闻学院举办联谊学校夏令营活动ZE3我校将承办在唱响奥运、共创和谐.广奥运火炬在我市传递我校学生将参加省教委领导专程来我校参观考察教务处召开办公室主任工作座谈会学院200年度科研课题将结束阶段检杳4、登陆效果图:登陆)5、新闻效果图:6、教务管理果图：U噤粒阍党领身寿小新同事向 鼬管理I第彩嗝 教育小I校布蝴I崎工作I

12、雷直桢I您目前的位置：网站首由教学管理教学管理制度课程设冒教师简介教室管理制度学员守则学福岂理工妹教册旧班主任旧商20011-390-1卜愣200-11-06：0Q6-IL-20M ILOG7、登陆界面效果图:登陆系统8、注册页面效果图:tt i - C4 会u Wii ：（二）网站搭建过程步骤一网站首页的制作一、创建站点并设置页面属性1.启动Dreamweaver程序后，创建站点，站点包括三个文件夹：files、 images、other和一个主页文件：shouye.htm,然后编辑shouye.htm网页，如图 下 图所示。I大小I *-1-回国回国Sariptc近而料作业=航天度片亍军.

13、jp&小提示：创建站点时必须注意文件 夹及主页的标准格式，否则对 以后网站的管理与维护不利。教育类网站设计报告书一一宁海职业技术学院网-13 -2.在编辑窗口中单击“页面属性”按钮，打开“页面属性”对话框。选择“分类”区的“外观”选项，设置字体大小为9Pt ;选择“标题/编码”选项，输入“宁海职业技术学院！” ，编码为“简体中文（GB2312 ”选项；设置背景图像；在上、下、 左、右边距文本框中均输入“0”像素，单击“确定”，返回网页编辑窗口，如图 下图 所 示。二、设置csS羊式设置CSS样式可以在制作网页前进行，也可以边制作网页边进行设置，但通常推荐的方法是制作网页前设置基本的 CSS样式

14、，在制作网页过程中根据需要 再随时填加CSS样式。教育类网站设计报告书宁海职业技术学院网-14 -1.所示。打开“CSS样式”面板，单击新建CSS样式按钮，如图 下图小提示：CSS样式表可以使操作简便，请注意样式表的创建。三、制作网站的Logo动画.进入“新建CSS规则”对话框，在“标签”下拉列表中选择“ td” 选项，在“定义在”中选择“新建样式表文件”。单击“确定”，打开“ CSS规则定义”对话框，在其中设置字体大小为12像素，行距为130%,如图下图所示。小提示： 一般主页中文本内容的字号均为 12或13像素，否则显 示效果就不佳了。 CSS样式定义在新建样式表文件中有利于其它文件通过链

15、接来使用该样式。.单击“确定”按钮，在CSS样式面板上可以看到新添加了 css.css 文件，根据网页预设的效果，重复设置后最终得到CSS样式。四、制作标题栏和导航.插入一个表格，参数如图 下图所示。2.设置表格高度为140像素，并居中对齐，效果如图 下图 所不。3.将光标移到单元格内，插入 LOGO图像，效果如图4.在上面表格下方插入1行10列的表格，参数如图行13E 776属摩 堰无口洌齐舌聿用苒”列21 区但塞闻能口 i通工* wane,也iujMkTJi _ j4 皆国 QJG 口5.分别设置第1、2列单元格属性，并分别填加背景图像，其它单元 格的设置同第2列单元格，输入导航文字后效果

16、图略。五、制作主体内容网页主体内容大致分为五部分，首先使用表格划分为五个横向区域，然后在每个单元格内分别插入嵌套表格制作不同区域的内容。第一部分.在上面表格的下方，插入1行2歹h 776*203像素的表 格，背景色为白色。.在第1列中插入3行1列的表格，在该表格中分别插入 图像、背景图像后效果如图所示。在图所示的空白区域变换图像的制作：先插入 JavaScript 脚 本，在空白单元格中插入一个1行1歹I、大小为175*120像素的表 格，在表格的代码视图中插入代码，.在第2列中插入3个表格，图略。第1个表格中添加滚动字幕第2个表格中插入文本及图片第3个表格的第1列单元格中插入1行1列的表格，

17、在其中插入图片，图片周围背景图片为宁海背景.jpg ;第2列单元格中插入6行3列的表格，填加文本，文本所在行背景图片为宁海 1.jpg第二部分.在第一部分表格的下方插入1行1列的表格，如图 R|0士 1 值年n对卉后中利齐 1如A 64 U 3值* D口*信*“性二gIO外也Tl、 耳11* 田 1Q 0.在上述表格中嵌套1个3行1列的表格，如图行1 宽 E|像索 引 埴克对齐 居中逐工列1 诲叵二应二31间距ifflglo I J.在第1行、第3行单元格中分别插入图片，第2行单元格中嵌套1个1行6列的表格，插入图片，效果如图第三部分这部分与第一部分大体相同，所以步骤就省略了，效果如图l彻的懒

18、声场-十，ZJ* c5Rttil-t4Hiurfr4iV 1莅窜宜超工.IP f中0！平机 .f疝f讪E 千11al.二中1 lUr lfc*l时即fl .，J信二石而下 “如彳炉巾，力D1T-一 |;1/毋- F 酎=一兴心.古畤P5b -工彳第四部分在第三部分表格下插入1个1行1列的表格，如图在上述表格中嵌套1个3行1列的表格，在第1行、第3行单元格中分别插入图片，第2行单元格中添加背景颜“#fd7011”。在第2行单元格中编辑JavaScript脚本得到图片滚动的效果，如图WW Ji过表格的嵌套得到效果如图1 iA#在第2列单元格中，插入1个1行3列的表格，如图埴无口32酒葩口在上述表格

19、的下方插入1行1列的表格，在该表格中再嵌套8行 6列的表格，如图fl I塞p像整 7瑞克Q对齐克r3tt 2D1血1 sM d宽30埼充口HE 5对齐1HL边kcn e列6像索 V像案 v在上述表格的下方插入FLASH对象，如图ZI宽加5高顺一文件:三井乳IL Swt口H缩姮.套曲无垂直边赛北平立即对汴丽百一二83O第六部分在第五部分表格的下方，插入1行1列的表格，在其中嵌套1行5列的表格，插入相应的链接图片，如图由鼬 斯以 唱3小四部M小 五、制作版权信息在主体内容表格第六部分的下方插入 5行1列的表格，输入文本及图片，如图Copyright 2006宁海职业技术学院 版权所有通用网址；宁沟

20、职业技术学院网络实名】宁海职业技术学院地址土宁海而由口区普阳街685号邮编：56U01I办公室：1567-6473008 教务处：4567-6473606 学划工作处：4567-6473609 浜般曰加门位访客步骤二网站子页的制作本网站的子页在形式上套用了主页的结构， 使之在风格上与主页完全统一。页面特点：(1)通过表格的嵌套、单元格的拆分与合并来进行网页元素的布局；(2)表单的制作；(3)栏目背景图片的制作。步骤三链接主页与子页对主页与各子页之间进行链接，并使链接畅通。七、网站建设心得小结随着网络技术应用的快速普及，电子商务正以前所未有的速度迅猛发展，由最初的电子零售阶段、电子贸易阶段发展到网上交易市场阶段。网上交易市场是一个从内向外、内外教育类网站设计报告书一一宁海职业技术学院网-2