《Web前端开发》课程教学大纲

1、Web前端开发一、课程概况所属专业:软件工程开课单位：数学计算机科学学院课程类型:院系选修课程课程代码:07494060开课学期:4学分：3学时：68（34+34）核心课程:否拟使用教材： HYPERLINK /writer/%E8%81%82%E5%B8%B8%E7%BA%A2_1.html t _blank 聂常红.Web前端开发技术HTML、CSS、JavaScript.人民邮电出版社.2013国内(外)现有教材： HYPERLINK /search?author=%E5%82%A8%E4%B9%85%E8%89%AF 储久良.Web前端开发技术HTML.CSS.JavaScript.

2、HYPERLINK /search?manufacturer=%E6%B8%85%E5%8D%8E%E5%A4%A7%E5%AD%A6%E5%87%BA%E7%89%88%E7%A4%BE t _bland 清华大学出版社.2013 HYPERLINK /author/%CD%F5%B8%D5_1 t _blank 王刚.Web前端开发技术实践指导教程. HYPERLINK /publish/%C8%CB%C3%F1%D3%CA%B5%E7%B3%F6%B0%E6%C9%E7_1 t _blank 人民邮电出版社.2013学习参考资料二、课程描述本门课程是软件工程专业“卓越软件工程师培养方向”

3、中的一门院系选修课程，为学习后续课程以及符合市场需求的实用性软件开发准备必要的WEB开发知识、方法和技术，主要培养学生综合运用HTML语言、CSS技术和 JavaScript编程技术等进行动态网页的设计和开发，引领学生初步具备动态网页的设计与开发能力，课程的主要内容包括HTML语言、静态网页设计、CSS基础知识、CSS+DIV布局网页、JavaScript编程技术等。三、课程目标通过本门课程的理论学习和实验练习，初步达到的课程目标：熟练掌握 html语言制作静态网页；熟练利用Deamweaver CS3进行网页的制作；能熟练应用CSS+DIV 进行网站的制作；能熟练应用JavaScript 进

4、行动态网页设计培养软件工程师所必备的实验技能；掌握本专业所必需的软件功能分析、界面设计、编码实现和程序的调试及分析等技能。能够初步具备设计一个符合市场需求的动态WEB网站能力。四、教学要求授课教师将按照学校本科教学工作有关要求做好课程教学各项工作，严格按照课表规定的时间、地点上课，不迟到、不早退，将根据本要求，认真备课完成教案与讲稿编写等各项课前准备工作；授课过程力求内容充实、概念准确、思路清晰、详略得当、逻辑性强、重难点突出，力戒平铺直叙、照本宣科。通过对我院学生学习能力的了解及分析，结合教材的内容，本课程计划采用理论与实践相结合的教学方式，以实际案例带动课堂学习，并在课下布置任务，着重对学

5、生实操能力的培养。在教学方法上，应发挥教师在教学设计、教学组织中的主导作用，结合现有的教学条件，灵活运用各种教学方法开展教学，注重学生实际动手能力的培养，发挥学生在教学中的主体地位。结合课程目标要求，做好实验设计、实验指导、实验作业评价及期末项目考核内容设计，并严格按照本要求做好出勤率统计、实验作业评价等各项工作。学习是大学生自己的责任和义务，学生应根据课程要求制定本门课程学习计划，加强学业管理，严格自我要求，提升自主学习能力，主动适应课程学习要求。尤其要认真完成本课程各章实验设计与调试等工作，主动与同学开展合作学习，认真完成任课教师布置的实验作业。五、考核方式及要求1、过程性考核（含评分依据

6、），占60%课堂考勤：共5次，每次3分，共15分。正常出勤（包括正常请假）每次得3分，正常请假必须出具由辅导员签字的请假条，迟到或早退每次得1分，旷课每次得0分。作业考核：共5次，每次5分，共25分。根据作业完成情况综合评价，具体为5分、4分、3分、2分、1分共5个等级。期中考核：共1次，共20分。根据作品完成质量综合评价，具体为20分、16分、12分、8分、4分至0分共5个等级。2、期末考核，占40%动态网站（前端）设计：共1次，每次40分。包括信息架构、导航、页面布局、列表、动作、数据显示、链接、外观8个方面，展示后根据项目完成情况综合评价，具体为40分、32分、24分、16分、8分至0分

7、共5个等级。六、课程内容第一单元：HTML基础（第一章 HTML基础，第二章 页面的头部标记）（授课时间：第四学期第一周）教学目标：掌握HTML文件的基本结构、HTML标记和页面的头部标记表示方法等知识；具有编写简单HTML文件的能力。教学重点：HTML文件的基本结构、HTML标记。教学难点：HTML文件的编写方法、页面的头部标记。学 时：课堂教学2学时，实验2学时教学方法：讲授法、演示法主要内容：（1）HTML文件的基本结构； （2）页面的头部标记学习方法：小组讨论、实验操作第二单元：HTML页面主体、文字与段落标记（第3章 页面的主体标记body，第4章 文字与段落标记）（授课时间：第四学

8、期第二周）教学目标：掌握HTML页面文件的HTML页面主体、文字与段落标记方法等知识；能够在 HTML文件中使用页面主体、文字与段落标记。教学重点：文字与段落标记方法。教学难点：段落标记中的预格式化标记pre 的使用。学 时：课堂教学2学时，实验教学2学时教学方法：讲授法、演示法主要内容：（1）页面的主体标记body； （2）文字标记；（3）段落标记；学习方法：小组讨论、实验操作第三单元：列表与图片标记（第5章 列表标记，第6章 图片标记）（授课时间：第四学期第三周）教学目标：掌握三种列表标记的表达方法，能够在网页中插入文件；能够编写图文并茂的HTML文件。教学重点：列表标记的三种形式、图片标

9、记的相关知识。教学难点：HTML文件中图片的位置、大小和边框的表示方法。学 时：课堂教学2学时，实验教学2学时教学方法：讲授法、演示法主要内容：（1）列表标记； （2）图片标记学习方法：小组讨论、实验操作第四单元：多媒体网页（第7章 在网页中嵌入多媒体内容）（授课时间：第四学期第四周）教学目标：掌握HTML文件中插入滚动字幕、音视频文件、Flash动画以及背景音乐的方法。教学重点：插入滚动字幕、Flash动画的方法。教学难点：插入Flash动画的方法。学 时：课堂教学2学时，实验教学2学时教学方法：讲授法、演示法主要内容：（1）设置滚动字幕、嵌入音视频文件； （2）嵌入Flash动画、设置背景

10、音乐学习方法：小组讨论、实验操作第五单元：框架结构网页（第8章 使用框架结构）（授课时间：第四学期第五周）教学目标：掌握在HTML网页文件中使用框架结构的方法。教学重点：框架集标记frameset、框架标记frame、浮动框架标记iframe和框架与超链接。教学难点：浮动框架标记iframe。学 时：课堂教学2学时，实验教学2学时教学方法：讲授法、演示法主要内容：（1）框架集标记frameset； （2）框架标记frame（3）浮动框架标记iframe学习方法：小组讨论、实验操作第六单元：创建超链接（第9章 在网页中创建超链接）（授课时间：第四学期第六周）教学目标：掌握在HTML文件中创建各种

11、超链接的方法。教学重点：创建超链接以及超链接的各种类型。教学难点：内部超链接与外部超链接的区别和应用。学 时：课堂教学2学时，实验教学2学时教学方法：讲授法、演示法主要内容：（1）创建超链接、超链接的链接路径； （2）超链接的类型；学习方法：小组讨论、实验操作第七单元：用表格布局网页（第10章 在网页中使用表格）（授课时间：第四学期第七周）教学目标：掌握在HTML文件中使用表格布局网页的方法。教学重点：使用表格布局网页。教学难点：单元格的跨行和跨列设置。学 时：课堂教学2学时，实验教学2学时教学方法：讲授法、演示法主要内容：（1）表格标记table、tr标记、td和th标记； （2）使用表格布

12、局网页学习方法：小组讨论、实验操作第八单元：HTML标记（第11章 在网页中创建表单）（授课时间：第四学期第八周）教学目标：理解表单概念，掌握使用表单收集个人信息的HTML文件制作方法教学重点：表单中输入、选择列表以及文本标记的使用。教学难点：选择列表标记select的使用。学 时：课堂教学2学时，实验教学2学时教学方法：讲授法、演示法主要内容：（1）表单标记； （2）使用表单收集个人信息学习方法：小组讨论、实验操作第九单元：定义CSS（第12章 CSS基础知识，第13章 定义CSS）（授课时间：第四学期第九周）教学目标：理解CSS概念，掌握应用CSS的步骤、掌握CSS基本和复合选择器的定义方

13、法。教学重点：应用CSS的步骤、CSS复合选择器的定义方法。教学难点：CSS复合选择器的定义方法。学 时：课堂教学2学时，实验教学2学时教学方法：讲授法、演示法主要内容：（1）CSS概念、应用CSS的步骤； （2）CSS基本和复合选择器的定义方法学习方法：小组讨论、实验操作第十单元：在HTML文档中应用CSS（第14章 CSS常用属性，第15章 在HTML文档中应用CSS）（授课时间：第四学期第十周）教学目标：掌握CSS的各种常用属性，具有在HTML文档中应用CSS的能力。教学重点：CSS的各种常用属性、HTML文档中应用CSS的四种方式。教学难点：HTML文档中应用CSS的四种方式。学 时：

14、课堂教学2学时，实验教学2学时教学方法：讲授法、演示法主要内容：（1）CSS的各种常用属性； （2）HTML文档中应用CSS的四种方式学习方法：小组讨论、实验操作第十一单元：CSS+DIV布局（第16章 CSS+DIV布局）（授课时间：第四学期第十一周）教学目标：理解盒子模型、盒子的浮动与定位，掌握用DIV+CSS布局网页的基本方法。教学重点：盒子模型、盒子的浮动与定位、DIV+CSS布局网页的基本方法。教学难点：DIV+CSS布局网页的基本方法。学 时：课堂教学2学时，实验教学2学时教学方法：讲授法、演示法主要内容：（1）盒子模型、盒子的浮动与定位； （2）DIV+CSS布局网页的基本方法学

15、习方法：小组讨论、实验操作第十二单元：HTML标记（第17章 CSS应用综合案例）（授课时间：第四学期第十二周）教学目标：熟练掌握DIV+CSS进行页面布局设计以及页面排版。教学重点：DIV+CSS页面布局设计，页面排版左中右版式。教学难点：DIV+CSS页面布局设计。学 时：课堂教学2学时，实验教学2学时教学方法：讲授法、演示法主要内容：（1）DIV+CSS页面布局设计； （2）页面排版左中右版式学习方法：小组讨论、实验操作第十三单元：JavaScript基础（第18章 JavaScript基础）（授课时间：第四学期第十三周）教学目标：掌握JavaScript与Java的不同特点、JavaS

16、cript语言调试技巧、JavaScript的基本语法。教学重点：JavaScript与Java的不同特点、JavaScript语言调试技巧。教学难点：JavaScript语言调试技巧。学 时：课堂教学2学时，实验教学2学时教学方法：讲授法、演示法主要内容：（1）JavaScript的基本语法、JavaScript与Java的不同特点； （2）JavaScript语言调试技巧学习方法：小组讨论、实验操作第十四单元：HTML网页中嵌入JavaScript脚本（第19章 在HTML网页中嵌入脚本的方式，第20章 事件驱动及事件处理）（授课时间：第四学期第十四周）教学目标：掌握在HTML网页中嵌入脚

17、本的方式、JavaScript事件驱动及事件处理等知识。 教学重点：在HTML网页中嵌入脚本的方式、JavaScript事件驱动及事件处理。教学难点：JavaScript事件驱动及事件处理。学 时：课堂教学2学时，实验教学2学时教学方法：讲授法、演示法主要内容：（1）在HTML网页中嵌入脚本的方式； （2）JavaScript事件驱动及事件处理学习方法：小组讨论、实验操作第十五单元JavaScript脚本函数及对象（第21章 脚本函数，第22章 JavaScript对象）（授课时间：第四学期第十五周）教学目标：掌握JavaScript脚本函数的定义和调用以及JavaScript内置对象、浏览器对象的使用。教学重点：JavaScript内置对象、浏览器对象的使用。教学难点：JavaScript内置对象、浏览器对象的使用。学 时：课堂教学2学时，实验教学2学时教学方法：讲授法、演示法主要内容：（1）JavaScript脚本函数的定义和调用； （2）JavaScript内置对象、浏览器对象的