《Web前端综合实战》实训-课程标准

合集下载

实训(Web)课课程标准模板解析

《Web程序设计与框架技术实训》课程标准1、课程信息2、课程性质2.1课程在专业中的地位《Web程序设计与框架技术实训》课程是软件技术专业（Java方向）最核心一门课程，也是整个Web体系的关键课程，是对软件技术专业所学课程的综合实践和锻炼的考核。

也是学生就业前项目实训的一次整体考验，在培养学生实践动手能力、项目开发能力、团队协作能力的一次综合考验。

2.2先修课程与技术《Web程序设计与框架技术》先修课程有：《Java程序设计语言》、《数据结构》、《计算机网络》和《统一建模语言UML》等课程。

《Web程序设计与框架技术》后续课程有：《数据库技术及应用B》、《JavaEE程序设计》、《NetBean工具》和《软件生命周期》等课程。

3、设计思路3.1 设计依据我校软件职业技术学院作为本校的软件人才培养单位，积极结合培训性教学方式和人才培养性模式走出一条新道路，在人才综合能力培养方面迈出了很大的一步。

学院始终本着“为了学生一切、一切为了学生、为了一切学生”的理念，以人为本、因材施教，树立以学生为本的教学观念，采用多种教学手培养学习能力、创新能力和自学能力。

采取以项目驱动的教学模式，培养应用型的人才，实现分层次教学、教考分离。

整合实训教学环节，提高学生动手和实践能力，加强校内实训基地和校外实训基地建设，为学生营造良好的实训氛围。

在实践教学中，以真实项目为主线，在老师的指导下进行专业课程综合运用；项目的开发过程中，以项目组为单位进行团队开发，提高学生的软件开发能力、协作能力和团队精神。

改革实验教学模式，充分利用资源。

加强素质教育，提供学生综合能力。

注重提高学生实践动手能力。

3.2 设计思路为了提高学生综合能力，本课程采用实训室和校外企业相结合的设计思路。

校内实训室主要是通过对应课程的多个项目的练习，校外企业是送学生到企业实训以及企业到学校指导学生实训等多元的结合方式。

4、课程设计4.1 课程目标1）知识目标●通过《Web程序设计与框架技术》课程的学习使学生知道这门学科的性质、地位和独立价值。

web前端开发技术实训大纲

web前端开发技术实训大纲
Web前端开发技术实训大纲
一、实训目标
本实训的目标是培养学生掌握Web前端开发的核心技术，包括HTML、CSS、JavaScript等，并能够独立完成简单的Web页面设计和开发。

二、实训内容
1. HTML基础
HTML文档结构
常用标签及其属性
列表、表格、表单等常见元素的使用
2. CSS基础
CSS选择器
常用样式属性
盒模型、布局、浮动等概念
3. JavaScript基础
JavaScript语法规则
DOM操作、事件处理等概念
常见JavaScript效果实现，如轮播图、下拉菜单等
4. 前端框架与工具
Bootstrap等前端框架的使用
Git等版本控制工具的基本操作
5. Web性能优化与测试
页面加载速度优化方法
前端性能测试工具的使用，如Google PageSpeed Insights等6. 项目实战
完成一个简单的企业官网或个人博客的设计与开发
实战中注重代码规范、可维护性及用户体验等方面的实践经验积累三、实训安排
本实训共计8周，具体安排如下：
第1周：HTML基础（2天）
第2周：CSS基础（3天）
第3周：JavaScript基础（3天）
第4周：前端框架与工具（2天）
第5周：Web性能优化与测试（2天）
第6-7周：项目实战（5天）
第8周：项目答辩与总结（2天）
四、实训要求
1. 熟练掌握HTML、CSS、JavaScript的基本语法和常用技巧；
2. 熟练使用至少一种前端框架和工具；
3. 了解Web性能优化和测试的方法和工具；
4. 能够独立完成一个简单的Web项目；。

《Web前端开发》课程标准(含课程思政)

《Web前端开发》课程标准一、课程基本信息表 1课程信息表表 2课程标准开发团队名单1注1：指参与课程标准制定的主要成员，包括校外专家二、课程定位和课程设计（一）课程性质与作用本课程是计算机应用技术专业的职业核心技术模块课程之一，是基于工作过程系统化的课程，是一门实践性和应用性都很强的课程。

为计算机应用技术专业学生将来从事职场的web前端开发岗位的发展打下良好基础，并为该专业后续网站开发与管理的学习打下网页前端设计基础。

（二）课程基本理念本课程的设计“以能力为本位、以职业实践为主线、以项目引导，以就业为导向”，打破了传统的按照知识体系教授课程的模式，以学生日后在从事Web前端开发行业中所需的实际技能为目标，进行基于工作项目和工作任务的课程开发与设计，既保证满足从事网站前端开发所必须的专业知识、专业技能，又保持原有知识体系的完整性，既培养了学生的职业能力，同时也为学生的可持续发展奠定了基础。

（三）课程设计思路本课程是以“基于工作过程”为指导，通过对Web前端开发所涉及到的岗位群进行工作任务和职业能力分析，以项目引导，以就业为导向，以培养学生的职业技能为目标、以学生为主体、以项目为载体，将知识、理论和实践一体化的课程设计思路。

在宏观教学设计上突破以知识点的层次递进为体系的传统模式，而是将职业工作过程系统化，以工作过程为参照系，按照工作过程来序化知识，培养学生规范、高效率、高质量地应用能力，使学生既学习岗位知识又培养学生职业素质，锻炼学生的方法能力与社会能力。

每个项目的学习以“做”为中心，教和学都围绕着做，在做中学，在学中做，做到“教、学、做”一体化，达到理论与实践的统一，同时注重培养学生的自主学习能力和职业素养的提升。

本课程思政内容及单元的知识、技能按照相应的专项能力在实际职业工作中出现的频度、内容的难度和要求掌握的程度进行排序，如下所示：课程思政内容：1.信息社会责任；2. 树立正确的技能观；3. 软件工匠精神培养。

《Web前端开发项目实训》教学实施方案

《Web前端开发项目实训》教学实施方案
一、课程安排
学时：18学时，9次课
课程性质：理论课
教学地点：网络运维实验室
教学时间：2017年12月15日起，周三7-8节、周五5-6节
授课班级：2015级信息管理与信息系统专业
二、教学安排
1、教学说明
（1）实训题目
共6个实训题目，每人选择1个题目，每组6人，独立完成。

每个项目都包含四个功能：静态网站、ajax读取数据、互联网服务调用、移动端适配。

（2）版本管理服务器
SVN服务器，为每个项目开设SVN项目库。

（3）作品发布服务器
Web服务器，为每个项目提供独立的Web托管服务，面向校内提供访问。

建设项目进度网站，包含学号、姓名、项目名称、统计信息，三个导航（SVN仓库、原型预览、项目作品）。

（4）数据接口服务器
数据接口服务器，针对6个项目题目各提供一组JSON格式的数据接口服务，提供带有授权性质的数据读写服务。

2、课程教学
表：教学计划一览表
3、课程考核
（1）考核分为三个部分：文档（设计、测试、总结）、项目成果（SVN、原型在线、成果在线）、查重（代码查重、文档查重、防作弊机制）。

（2）总成绩（100分）=文档*0.4+项目成果*0.6，查重不通过记0分。

（3）实训考核成绩作为本课程的期末考试成绩，实训成果作为课程设计成果。

WEB前端开发技术实验教学大纲

WEB前端开发技术实验教学大纲
课程名称：WEB前端开发技术
课程编号：0809913121
课程总学时：48
实验学时数：48
课程总学分：3
实验学分：3
开设实验项目数：4
一、实验教学目的
Internet的应用已深入到各个领域，本课程重在网页中的程序设计和B/S结构管理系统的程序设计，为学生以后独立的进行Web编程打下一个良好的基础。

二、实验项目内容、基本要求与学时分配
注：1、实验类型：演示、验证、操作、综合、设计、研究。

2、实验要求：指必做、选做。

三、实验考核方式与标准
成绩考核主要依据实验完成情况及所要求完成的实验报告进行评定，要求实验内容独立正确的完成，实验报告内容正确详实。

实验评分应包括三个方面：
（1）实验预习回答提问占20%；
（2）实验操作能力及实验纪律占40%；
（3）实验报告占40%。

3.评分等级
评分成绩分优、良、中、及格和不及格五个等级。

优：90分以上
良：80-89分
中：70-79分
及格：60-69分
不及格：59分及以下
具体评定标准如下：
优秀：实验纪律、预习、操作技能很好，实验报告书写工整无原则错误；
良好：实验纪律、预习、操作技能较好，实验报告中原则错误不超过一个；中等：实验纪律、预习、操作技能一般，实验报告中原则错误不超过两个；及格：实验纪律、预习、操作技能较差，实验报告中原则错误不超过三个；不及格：实验中严重违章违纪，实验技能均较差，实验报告中数据严重错误。

四、实验教材与参考书。

《Web前端综合实战》实训-课程标准

《Web前端综合实战》实训课程标准一、课程性质与任务本课程是软件技术专业的一门专业实践教学模块课程，为期一周。

是在学生学习了《网页设计与制作技术（HTML+CSS+Javascript）》及《Web前端综合实践》课程以后，通过项目开发的实战训练，要求学生能掌握JavaScript语言的基本编程思想，并能熟练利用JavaScript和JQuery控制WEB页面各级元素，实现WEB前端的验证、动态展示等任务。

课程采用任务驱动，让学生在完成任务的基础上，进一步掌握动态网页设计的基本流程及方法。

二、课程教学目标1.知识目标能制作包含客户端验证、具有常见动态效果、界面美观大方的商业网站，但不包含任何服务器端脚本。

包含的知识点如下：（1） CSS3布局及美化；（2）会使用JavaScript美化网页；（3）会使用jQuery美化网页；（4）实现客户端表单校验。

2.能力目标（1）掌握在网页中添加CSS的方法。

掌握三种添加样式信息的方法，会使用CSS设置网页格式和列表的格式；（2）掌握在网页中嵌入图像的方法，掌握与嵌入图像相关标记的用法；（3）掌握与图像布局和位置相关的标记的概念和用法；（4）熟练掌握表格的使用方法，会用表格布局并设计网页；（5）掌握框架制作网页的方法，会使用框架设计网页；（6）掌握制作表单的方法，会利用表单建立交互式页面；（7）掌握JavaScript语言的语法；（8）掌握在HTML语言代码中嵌入JavaScript代码的方法，能看懂JavaScript特效网页源代码；（9）学会修改JavaScript代码，实现不同的特效网页效果；（10）学会使用JavaScript语言实现网页特效。

（11）会使用JavaScript+JQuery设置网页动画效果；（12）会使用JavaScript+JQuery设置网页验证效果；（13）会使用JavaScript+JQuery设置表单特效。

3.素质目标（1）培养学生的网页设计创意思维、艺术设计素质；（2）培养学生的团队协作精神和创新精神、交流与沟通能力；（3）培养学生科学研究、专业设计和撰写实训报告的基本技能；（4）主动学习的能力、分析问题的能力。

web前端开发技术实验与实践(第3版)储久良编著实训5

web前端开发技术实验与实践(第3版)储久良编著实训5
一、实训目标
通过本实训，学生将掌握Web前端开发的核心技术，包括HTML、CSS、JavaScript等，并能够运用这些技术进行实际的前端开发工作。

学生将通过实践操作，加深对前端开发技术的理解，提高解决实际问题的能力。

二、实训内容
1. HTML基础：学生将学习如何使用HTML标记语言创建基本的网页结构，包括标题、段落、列表、链接等元素。

2. CSS样式：学生将学习如何使用CSS样式表来美化网页，包括背景、颜色、字体、布局等属性的设置。

3. JavaScript编程：学生将学习如何使用JavaScript脚本语言为网页添加交互性，如表单验证、动态内容等。

4. 实战项目：学生将分组完成一个实际的前端开发项目，运用所学知识进行页面设计和功能实现。

三、实训步骤
1. 了解项目需求，制定计划。

2. 学习相关技术，掌握基本概念。

3. 完成个人任务，进行实践操作。

4. 分组讨论，分享经验，解决问题。

5. 完成项目，提交成果。

6. 进行项目总结和评价。

四、注意事项
1. 注意遵守软件开发规范和标准，编写清晰、简洁的代码。

2. 在实践过程中，要注重独立思考和解决问题的能力培养。

3. 积极参与小组讨论和分享，促进相互学习和进步。

4. 注意安全意识，不泄露个人信息和机密数据。

《Web前端综合实战》实训—课程标准

《Web前端综合实战》实训课程标准一、课程性质与任务本课程是软件技术专业的一门专业实践教学模块课程，为期一周。

课程采用任务驱动，让学生在完成任务的基础上，进一步掌握动态网页设计的基本流程及方法。

二、课程教学目标1.知识目标能制作包含客户端验证、具有常见动态效果、界面美观大方的商业网站，但不包含任何服务器端脚本。

包含的知识点如下：（1） CSS3布局及美化；（2）会使用JavaScript美化网页；（3）会使用jQuery美化网页；（4）实现客户端表单校验。

2.能力目标（1）掌握在网页中添加CSS的方法。

（11）会使用JavaScript+JQuery设置网页动画效果；（12）会使用JavaScript+JQuery设置网页验证效果；（13）会使用JavaScript+JQuery设置表单特效。

《Web前端开发技术》课程标准

《Web前端开发技术》课程标准一、课程基本信息二、课程定位《JavaScript》课程是计算机软件技术专业的一门重要的专业课，定位于WEB技术开发工作岗位。

它是WEB前端技术开发的必备课程，在整个课程体系中具有重要的作用。

本课程的前导课程：高级语言程序设计、数据结构、HTML5。

后续课程：动态网站开发、毕业设计等。

通过学习本课程的学习，使学生掌握JavaScript的基本知识与应用，能运用所学知识开发出企事业单位需要的各种形式网站（网上商店、论坛、新闻发布等）的特效。

强化学生项目开发能力（系统分析/设计，编程，测试等）。

培养学生应用动态网站技术进行网页特效开发的能力，并形成良好的编程习惯和团队合作精神；培养学生的自主学习和创新能力，为其成长为一名合格的WEB前端技术开发程序员奠定良好的基础。

三、课程能力标准要求（一）知识要求使学生掌握常用的网页设计工具，熟练运用多种网页设计技术，具备Web网页设计、制作及站点管理的基本知识和基本技能，学生能够独立制作中小型的网站。

1、掌握JavaScript语言的基本语法。

2、掌握JavaScript中的BOM对象操作。

3、掌握JavaScript操作文档对象模型。

4、掌握jQuery选择器。

5、掌握jQuery中的事件与动画特效。

6、掌握jQuery中的DOM操作。

7、掌握表单验证。

8、掌握jQuery中的Ajax。

（二）能力要求1、具有网站功能规划的能力。

2、具有网站布局的能力。

3、具有规范化、专业化的编码能力4、具有规范化、专业化的测试能力；熟悉项目实施过程，如：需求分析、系统设计、编码、测试、提交产品等；（三）素质要求形成一定的学习能力、沟通与团队的协作能力，形成良好的思考问题、分析问题和解决问题的能力，养成良好的职业素养。

遵守国家关于软件与信息技术的相关法律法规，形成关键性的软件开发与应用的能力。

1、自主、开放的学习能力2、诚实、守信、坚韧不拔的性格3、良好自我表现、人际沟通能力、良好的团队合作精神四、知识体系(思维导图、知识要点)见图1知识体系思维导图五、课程主要内容课程教学能力训练项目设计表见表1课程教学能力训练项目设计表图1知识体系思维导图表1课程教学能力训练项目设计表六、课程考核6.1考核方式本课程考核采取形成性考核和终结性考核两种方式进行，两部分的分数比例为：课程考核成绩=形成性考核成绩（60%）+终结性考核成绩（40%）6.1.1形成性考核6.1.1.1形成性考核种类及分数比例本课程形成性考核选择平时成绩和项目任务成绩。

《Web前端开发技术实习》课程标准

《WEB前端开发技术实习》课程标准
一、目的和要求
通过本课程学习掌握VUE的知识体系，模板语法、组件、过渡动画、生命周期等基础内容。

掌握VUE基本概念、VUE实例、VUE模板语法、VUE生命周期、VUE组件及组件间通信、VUE过渡与动画；掌握VUEYLI脚手架、脚手架配置、APP路由、单页面APP创建、APP组件开发、VUEYLI组件间传参、VUEYLI插槽、组件切换过渡动画、编译打包处理。

培养学生web前端开发能力。

同时，通过本课程的学习，提高学生的操作技能，培养学生踏实认真、精益求精、创新的精神，培养良好的职业道德，为学生学习动态网站开发相关课程提供知识和技术支持。

通过项目的实现，让学生具备良好的综合素质和职业道德，能够吃苦耐劳、爱岗敬业、团结合作。

本课程要求在理论实践一体化教室完成，以实现“教、学、做”三位合一。

使用教材：《Vue.js前端开发实战》，中国工信出版集团，人民邮电出版社十三五规划教材，黑马程序员编著2020年出版。

参考书目：
1.《Vue.js从入门到项目实战》，清华大学出版社，刘汉伟，2019.04.01出版.。

《Web前端设计与开发》课程标准

《Web前端设计与开发》课程标准一、课程名称及代码课程名称：Web前端设计与开发二、适用教育层次及专业适用层次：专科适用专业：电子信息大类所有专业三、学分、学时学分数：3.0 学时数：48.0四、课程类型、性质及属性课程性质：专业基础课课程类型：理论课（含实践）课程属性：必修五、先修课程模块名称及代码无六、教学目标本课程以培养前端工程师为目标，立足前端工程师工作岗位所必须具备的素质，以基础知识、应用举例、实战任务相结合的方式，按照认知规律由浅入深详细讲述了HTML元素与CSS（含CSS3）样式的用法，全面覆盖了Web前端设计与开发的基础知识。

1.知识目标1）熟悉HBuilderX开发环境，掌握HTML项目项目的创建方法；2）掌握HTML常用元素的用法；3）掌握CSS选择器的基本语法；4）掌握CSS样式的优先级原则；5）掌握CSS3背景、定位、动画属性的用法；6）掌握网页布局相关属性的用法。

2.能力目标1）能熟练使用HBuilderX开发环境创建HTML项目；2）能熟练使用HTML元素设计网页内容；3）能熟练使用CSS样式设计元素的外观样式。

4）能熟练使用元素框模型属性精确设计元素占用网页空间的尺寸；5）能熟练使用背景属性设计网页背景和生成图像精灵；6）能熟练使用定位属性设计网页的特殊效果；7）能熟练使用动画属性设计网页动画；8）能熟练使用布局属性布局网页。

3. 素质目标1）具有质量意识、安全意识、工匠精神和创新思维；2）具有集体意识和团队合作精神；3）具有界面设计审美和人文素养；4）熟悉软件开发流程和规范，具有良好的编程习惯。

七、课程实践教学内容该课程不单独安排实践教学内容，实践教学内容与理论教学内容在课程讲授中实现理实一体，采用“做中学，学中做”的讲练结合教学方法。

主要有以下实践项目。

表1 实践/实验教学列表八、教学内容及要求表2 教学安排表九、程评价方法1．评价形式平时作业（含考勤、平时作业）、阶段测试（含课堂检测、阶段测试、期中测试、实践/实验评分等）、期末测试。

web实训周课程设计

web实训周课程设计一、课程目标知识目标：1. 理解Web开发的基本概念，掌握HTML、CSS和JavaScript的核心语法；2. 学习网页设计的基本原则和布局方法，能运用所学知识制作符合规范的静态网页；3. 了解Web前端框架，掌握Bootstrap的基本使用方法；4. 掌握基本的网站优化技巧，提高网页加载速度和用户体验。

技能目标：1. 能够运用HTML、CSS和JavaScript独立编写简单的网页，实现网页的基本布局和动态效果；2. 能够使用Bootstrap快速搭建响应式网站，适应不同设备屏幕；3. 学会使用网站优化工具，对网页性能进行评估和优化；4. 培养良好的编程习惯，提高代码质量和可维护性。

情感态度价值观目标：1. 培养学生的创新意识和团队协作精神，提高解决实际问题的能力；2. 增强学生对信息技术学科的兴趣和自信心，激发学习热情；3. 培养学生严谨、细致的工作态度，提高责任感和使命感；4. 通过学习Web技术，使学生认识到信息技术在现代社会中的重要作用，增强社会责任感。

课程性质：本课程为实训课程，以项目驱动为核心，注重实践操作和团队合作。

学生特点：学生具备一定的计算机操作基础，对Web技术有一定了解，但实践经验不足。

教学要求：教师需结合实际项目，引导学生运用所学知识，培养学生的实践能力和团队协作能力。

在教学过程中，注重理论与实践相结合，确保学生能够学以致用。

同时，关注学生的学习进度和情感需求，调整教学策略，提高教学效果。

通过本课程的学习，使学生能够具备基本的Web开发能力，为后续深入学习奠定基础。

二、教学内容1. 网页基础知识：HTML标签、属性和格式化文本；CSS选择器、盒模型和布局；JavaScript基本语法、函数和事件处理。

教材章节：第一章 HTML基础，第二章 CSS样式，第三章 JavaScript入门。

2. 网页布局与设计：使用HTML和CSS进行响应式布局；Flex布局和Grid 布局；网页色彩搭配与排版。

web前端实训报告

web前端实训报告
Web前端实训报告
一、实训目标：
本次实训的目标是让学员能够掌握基本的HTML、CSS和JavaScript知识，并能够利用所学知识进行Web前端开发的实践操作。

二、实训内容：
1. 学习HTML基础知识：
- HTML标签的使用方法；
- HTML元素的属性和值；
- HTML表格、表单、图像等常用标签的使用方法。

2. 学习CSS基础知识：
- CSS选择器的使用方法；
- CSS样式的定义和应用；
- CSS盒模型的理解和应用；
- CSS浮动和定位的使用方法。

3. 学习JavaScript基础知识：
- JavaScript的基本语法和数据类型；
- JavaScript的运算符和控制语句；
- JavaScript的函数和对象。

4. 实践操作：
- 利用HTML和CSS设计一个简单的网页界面；
- 利用JavaScript实现网页的一些交互功能。

三、实训过程：
1. 学习阶段：
在实训开始前，学员需要通过学习相关教材或网络教程，掌握HTML、CSS和JavaScript的基础知识。

2. 练习阶段：
学员在掌握了基础知识后，通过完成一些练习题或实例操作，来巩固所学内容。

3. 项目实践：
学员通过实际操作设计一个简单的网页界面，并使用JavaScript实现网页的一些交互功能。

在实践过程中，学员可以自由发挥来展示自己的设计和编程能力。

四、实训成果：
学员在实训结束后，应能够独立设计和开发简单的Web前端界面，并能够利用所学知识进行相应的功能开发。

前端实训教案模板及范文

一、课程名称：前端实训二、课程目标：1. 理解前端开发的基本概念和流程。

2. 掌握HTML、CSS、JavaScript等前端技术。

3. 熟悉主流前端框架（如Vue.js、React等）的使用。

4. 能够独立完成简单的网页设计和交互功能开发。

三、课程内容：第一周：基础知识入门1. HTML基础- HTML文档结构- 常用标签及属性- 表单元素2. CSS基础- 选择器- 布局技术（如Flexbox、Grid）- 颜色、字体、背景等样式设置3. JavaScript基础- 变量、数据类型、运算符- 控制流程（if、switch、循环）- 函数、对象、数组第二周：进阶技能提升1. 响应式设计- 媒体查询- 响应式布局框架（如Bootstrap）2. JavaScript高级特性- 闭包- 事件处理- 异步编程（Promise、async/await）3. 前端框架基础- Vue.js简介- React简介第三周：项目实战1. 项目背景及需求分析- 确定项目类型（如个人博客、购物网站等） - 分析用户需求2. 前端页面设计- 使用HTML、CSS进行页面布局- 实现响应式设计3. JavaScript交互功能开发- 使用JavaScript实现页面动态效果- 与后端进行数据交互第四周：项目优化与总结1. 性能优化- 代码压缩- 资源优化（如图片、字体等）2. 项目部署与发布- 了解云服务器及域名解析- 将项目部署到服务器3. 实训总结- 分享项目经验- 总结实训过程中的收获与不足四、教学方法：1. 讲授法：讲解前端开发的基本概念和技能。

2. 案例分析法：通过实际案例讲解技术要点。

3. 练习法：布置课后练习，巩固所学知识。

4. 项目驱动法：通过项目实战提升综合能力。

五、教学评估：1. 课后作业：检查学生对知识的掌握程度。

2. 项目实战：评估学生实际操作能力。

3. 课堂表现：观察学生的参与度和积极性。

范文：第一周：HTML基础课程目标：1. 理解HTML文档结构。

完整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、课题设计报告书最后一页是本次课程设计的小结和参考文献。