《Web前端技术——XHTML+CSS+JavaScript》课程总结报告
计算机应用教研室：夏小翔
《Web前端技术——XHTML+CSS+JavaScript》课程是16网站1班和16网站2班的专业核心课程web前端可以自学吗，两个班共有学生90人，大部分学生能把基本知识部分学会，也有像吕陕北、冯飞、尚洪涛、田正豪、余胜怀等一批很有兴趣的学生，基本掌握了前端网站开发的核心技巧，现从五个部分对课程进行总结。
一、教学起点
该课程的前导课程是《计算机基础》《程序设计基础》等专业基础课程。通过这些课程的学习，学生已具备相应知识和能力，具体如下：
(1)计算机基础操作能力，能够利用计算机进行基本的文件管理；
(2)办公软件应用能力，能够使用Microsoft Office等办公软件进行基本的文档处理工作；
(3)文本编辑能力，能够使用工具对文本文件进行基本的编辑和处理。
该门课程主要求学生运用CSS技术对页面进行排版设计，对于学生的综合能力要求较高，因此学生在学习时可能遇到的问题有：
(1)美学基础比较薄弱，对于彩搭配不够协调。
(2)DIV布局的模式难于掌握。
(3)网页元素相对定位和绝对定位的掌握。
(4)容易出现网页布局显示异常的问题。
二、课程目标
《Web前端技术》学习领域对培养学生的编码能力、设计思维能力、创新能力、科学精神以及用专业知识解决实际问题的能力，都具有十分重要的作用。本学习领域强调以学生为主体，知识为技能服务，培养学生的自主学习能力、自我管理能力和团队合作能力，使学生可以快速进入Web开发相关领域，在企业中从事Web前端的实际开发工作。
1.专业能力
培养学生的英语应用能力，掌握基本英语词汇，能够对页面元素、程序变量进行合理、规范命名；
培养学生的计算机基础操作能力，能够利用计算机进行高效的、有条理的工程文件管理，版本控制等；
培养学生的文本编辑能力，能够使用工具对纯文本文件进行高效快捷的编辑和处理；
培养学生的图像处理能力，能够精确分析和处理设计师交付的 PSD 设计稿，切片、编辑、输出网页所需图片；
培养学生的网页制作与调试能力，能够编写简洁、健壮的符合 Web 标准的静态页面代码，能够使用前端调试工具进行调试；
培养学生的网站规划能力，能够合理规划网站结构，保证网站的可扩展性和易维护性。
2.方法能力
自主学习能力：具备信息获取与知识应用能力、反思及总结工作成果能力和再学习能力；
解决问题能力：具备独立思考和解决实际问题的能力；
设计创新能力：能运用已有的知识和技能进行创新的方案设计能力；
3.社会能力
培养学生自我管理和组织能力；
培养学生与人交往与语言、文字表达能力；
培养学生团队协作、沉着应变、爱岗敬业精神，使学生养成良好的职业道德。
三、课程内容与要求
1．教学内容的选取
《Web前端技术》学习领域课程内容选择以就业为导向，以情境性原则为主、以科学性原则为辅，根据行业企业发展需要和完成职业岗位实际工作任务所需要的知识、能力、素质要求来选取教学内容，从而达到培养专业能力、方法能力和社会能力的目标。课程教学内容分析
从WEB前端工程师岗位出发，精选企业中WEB前端工程师的具体工作任务作为课程教学内容的主要来源，从中结晶出学习内容，将这些内容与还处在确定过程中的学习目标进行比较，当现有内容不能满足学习目标描述的要求时，对学习内容加以细化和补充。反之亦然，如果发现工作中的内容不能到达既定的学习目标时，将对学习内容进行补充完善，最终形成课程内容。
2．教学内容的排序
《Web前端技术》在内容排序中通过科学的教学设计，按照不同工作任务特征的技能需求，遵循由简单到复杂，由低级到高级的能力递进规律将学习领域细化成具体的学习情境。整个流程包括五个分项目，一个综合项目，每个项目对应一个学习情境，并按项目从易到难的顺序进行排序。
3．教学内容排序表
内容概要
大纲
学习建议
实训建议
课时数
项目1：CSS初步体验
1、Web前端开发的含义
2、Intenet、Web的概念
3、 搭建Web前端页面环境
4.、Web前端页面基本框架
第一次课目标是提高学生学习兴趣，从学生感兴趣的网站入手。
1.课堂实训：搭建Web前端页面环境
2.课堂实训：一个典型的Web应用
2
项目2：XHTML基础知识
1、XHTML基本框架
2、辅助的<head>标签
3、丰富的<body>标签
1、学习中注意代码书写的规范格式。
2、XHTML的框架代码是核心学习内容，要达到能熟练写出的程度。
1、课堂实训：制作 “Hello World”
2、课堂实训：了解意想不到的<head>效果
3、课堂实训：制作个人家庭网页
6
项目3：CSS初步体验
1、CSS（层叠样式表）基础知识
2、CSS选择器
3、CSS的特性
1、能准确理解CSS选择器并使用
2、利用排错功能加深知识掌握
1、课堂实训：制作Good morning网页
2、课堂实训：制作汽车网页
3、课堂实训：制作校园新闻网页
4
项目4：
CSS核心思想
1、CSS盒模型（Box Model）
2、浮动与定位
3、块元素与内联元素
4、布局方法
1、学习盒子模式时，要认真思考各种参数意义，仔细区别不同的表示方法。
2、可以通过画图方式增强对盒子模式的理解。
1、课堂实训：实现盒子效果
2、课堂实训：实现文字阴影效果
3、课堂实训：制作电子相册
6
项目5：
网页元素设计
1、文字元素
2、图片元素
3、列表元素
4、超链接元素
1、认真学习参考资料，熟悉各种元素的代码表示含义。
2、多做练习，灵活应用各种元素。
3、可以按照小组形式展开项目，学生自拟题目制作网站。
4、注意不同浏览器浏览效果问题。
1、课堂实训：制作多彩的公司Logo字符
2、课堂实训：制作首字下沉效果
3、课堂实训：制作“森林公园”网页
4、课堂实训：利用圆角框设计栏目标题
5、课堂实训：制作“夏威夷海滩”网页
6、课堂实训：制作普通超链接
7、课堂实训：制作按钮式超链接
8、课堂实训：制作水平排列的导航菜单
9、课堂实训：制作垂直导航菜单
10、课堂实训：制作读书网页菜单
12
项目6：
表格与表单
1、表格是组织数据的工具；
2、XHTML中表格相关元素
3、表格样式
4、提高表格的可访问性
5、表单结构
6、表单的构造块
7、典型的表单构建
1、认真阅读参考资料，注意表格的使用环境及优缺点。
2、表格参数设置比较多，在使用中一定要区分各种参数之间的差别。
3、在表单的学习中注意表单信息的传送方式。
1、课堂实训：制作马自达车型优惠情况表   
2、课堂实训：制作斑马纹效果的表格3、课堂实训：制作日历表
4、课堂实训：制作彩下拉列表框
5、课堂实训：制作用户注册页面
8
项目7：
JavaScript的应用
1、JavaScript概念、特点
2、基本语法
3、Javascript事件分析
1、注意强调语言通用性，学会知识的迁移。
2、利用课堂实训掌握事件和语法。
1、课堂实训：制作时钟效果
2、课堂实训：制作变表格
3、课堂实训：播放背景音乐的应用
4、课堂实训：交换图片的设计与制作
6
项目8：
学期项目—手机资讯网站
1、企业网站开发工作流程
2、网站整合与测试
3、XHTML、CSS验证
4、网站上线
5、撰写项目报告
6、撰写项目答辩PPT
1、在网站开发的每一步中，一定要遵守标准的开发流程，保证对标准的流程有一个真实的体验。
2、在网站布局模式的选择上一定要认真思考，努力到最恰当的布局方式。
3、反思项目的开发过程，总结出自己的不足之处。
手机资讯网站
16
考试测评
4
合计
四、课程说明

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。