《Web前端开发》课程教学大纲（本科）

1、Web前端开发（Front-end development of Web）课程代码：19410036学分：2学时：32（其中：课堂教学学时：16实验学时：上机学时：16课程实践学时：）先修课程：图形图像处理技术适用专业：教育技术教材：Dreamweaver CC网页设计实战从入门到精通2017年01月 刘玉红、侯永岗清华大学出版社一、课程性质与课程目标（-）课程性质（需说明课程对人才培养方面的贡献）Web前端开发是教育技术专业的一门必修专业课。本课程从HTML文件的基本结构是什么，到使 用HTML标签制作简单的网页，一直到最后使用DIV+CSS制作精美的商业网站，以这样一个循序渐进 的讲解过程

2、，帮助大家完成不会一会一熟练一精通网页制作的蜕变。学习完本门课程后，能够掌握 网页制作的精髓，快速而熟练地制作网页，为日后从事信息技术课程教学打下基础，同时为制作和 维护学校网站打下基础。（二）课程目标（根据课程特点和对毕业要求的贡献，确定课程FI标。应包括知识目标和能力目标。） （-）知识目标.掌握 html、html5 css、css3 的基本语法；.掌握html5的canvas绘图;.熟练应用div+css实现页面布局.掌握JavaScript基本语法.掌握D0M的基本用法.掌握jQuery的基本用法；.熟悉w3c规范，了解各大主流浏览器的兼容性；.熟悉bootstrap框架.通过本课程

3、的学习要求学生掌握div+css实现页面的布局，实现静态页面;.通过JavaScript实现简单的交互功能；.通过jQuec，简化js的原生代码，减少代码量；.通过bootstrap框架，实现页面快速布局.能解决各大浏览器的兼容性问题二、课程内容与教学要求（按章撰写）第1章 网页设计与制作基础（一）课程内容1认识网页和网站网页的相关概念网页的HTML构成HTML常用标签（二）教学要求掌握网页、网站的基础概念，了解网站的种类和特点了解因特网与万维网、浏览器与HTML、URL、域名与IP地址、上传和下载认识文档标签、头部标签、主体标签第2章认识 Dreamweaver CC（一）课程内容1 走进

4、DreamwoaverCC2 Dreamweaver CC 的工作环境3体验DreamweaverCC的新增功能管理站点操作站点文件及文件夹（二）教学要求学会安装 DreamweaverCC 启动 DreamweaverCC认识Dreamweaver CC的工作界面、熟悉【插入】面板组认识站点，学会创建站点（本地站点、远程站点）学会站点的基本操作（打开站点、编辑站点、删除站点、复制站点）学会创建文件夹、创建文件、文件或文件夹的移动和复制、删除文件或文件夹第3章创建网页中的文本（一）课程内容1网页设计的基本操作设置页面属性用文字充实网页特殊文本的操作（二）教学要求学会新建网页、保存网页、打开网页

5、、预览网页学会设置页面属性学会插入文字、设置字体、设置字号、设置字体颜色、设置字体样式、编辑段落、检查拼写、 创建项目列表学会插入换行符、插入水平线、插入日期、插入特殊字符、插入注释第4章使用图像和多媒体（一）课程内容选择适合网页中图像的格式用图像美化网页在网页中插入多媒体（二）教学要求学会插入图像、设置图像属性、图像的对齐方式、学会插入鼠标经过图像、插入图像占位符学会插入背景音乐、插入Flash动画、插入FLV、插入IITML5音频、插入IITML5视频HTML5新增元素与属性速览（一）课程内容新增的主体结构元素新增的非主体结构元素新增其他常用元素新增的全局属性新增的其他属性与废除的属性（二

6、）教学要求掌握section元素、article元素、aside元素、nav元素、time元素掌握header元素、hgroup元素、footer元素、figure元素、address元素认识 mark 元素、rp、rt 与 ruby 元素、progress 元素、command 元素、embed 元素、details 与 summary 元素、datalist 元素认识 contentEditable 属性、spellcheck 属性、tabindex 属性第6章设计网页超链接（一）课程内容1链接与路径6.2添加网页超链接（二）教学要求了解链接的概念、认识链接的路径及链接的类型学会添加文本链

7、接、添加图像链接、创建外部链接、创建锚记链接、创建图像热点链接学会创建电子邮件链接、创建下载文件的链接、创建空链接、创建脚本链接第7章表格的应用（一）课程内容1插入表格2选择表格表格属性操作表格操作表格数据（二）教学要求学会选择完整的表格、选择行和列、选择单元格学会设置单元格属性、设置整个表格属性学会安排表格大小、增加行、歹4、删除行、歹U、剪切、复制和粘贴单元格、合并和拆分单元格学会向表格中输入文本、向表格中插入图像、表格数据的排序学会导入表格数据、导出表格数据、使用表格布局网页第8章 使用网页表单和行为（一）课程内容认识表单在网页中插入表单元素在网页中插入复选框和单选按钮制作网页菜单和列表

8、在网页中插入按钮插入文件上传域添加网页行为常用行为的应用（二）教学要求学会插入表单域、插入文本域、插入密码域学会插入复选框、插入单选按钮学会插入下拉菜单、插入滚动列表学会插入按钮、插入图像按钮学会使用【行为】面板、添加行为学会交换图像、弹出信息、打开浏览器窗口、检查表单行为、设置状态栏文本第9章使用模板和库（一）课程内容1创建模板管理模板库概述库的创建、管理与应用（二）教学要求学会在空白文档中创建模板、在【资源】面板中创建模板、从现有文档创建模板、创建可编辑 区域学会从模板中分离文档、更新模板及基于模板的网页学会创建库项目、库项目的应用、编辑库项目学会创建基于模板的页面章 使用CSS样式表美化

9、网页（一）课程内容1 初识 css2使用CSS的方法10.3使用CSS样式美化网页（二）教学要求认识CSS、了解CSS的作用，掌握基本CSS语法学会使用DreamwcaverCC编写CSS掌握行内样式、内嵌样式、链接样式，学会导入样式掌握样式优先级问题学会使用字体样式美化文字、使用文本样式美化文本、使用背景样式美化背景、使用链接样式 美化链接、使用列表样式美化列表、使用区块样式美化区块、使用宽高样式设定宽高、使用边框样 式美化边框第H章 架构师的大比拼一一网页布局典型范例（一）课程内容1使用css排版11.2固定宽度网页剖析与布局11.3自动缩放网页1-2-1型布局模式11.4自动缩放网页1-

10、37型布局模式（二）教学要求学会将页面用DIV分块、设置各块位置、用CSS定位掌握网页单列布局模式、网页1-2-1型布局模式、网页1-3T型布局模式学会等比例变宽布局、单列变宽布局学会三列宽度等比例布局、单侧列宽度固定的变宽布局、中间列 宽度固定的变宽布局、“1-3-1”双侧列宽度固定的变宽布局、中列和侧列宽度固定的变 宽布局第12章 在网页中编写JavaScript（一）课程内容1 认识 JavaScript12.2 JavaScript 在 HTML 中的使用3 JavaScript的基本语法4 JavaScript的数据结构6 JavaScript的常用事件（二）教学要求认识 J a v

11、aScr i p t, 了解 JavaSc r i p t 的特点学会在HTML网页头中嵌入、在HTML网页中嵌入JavaScript代码、在HTML网页的元素事件中 嵌入JavaScript代码、在HTML中调用已经存在的JavaScript文件、通过JavaScript伪URL引入 avaScript脚本代码了解执行顺序、区分大小写、分号与空格、对代码行进行折行、注释掌握标识符、关键字、保留字、常量、变量、使用函数掌握页面事件、鼠标事件、键盘事件、表单处理事件第13章网站的发布（一）课程内容1上传网站前的准备工作2测试网站3上传网站（二）教学要求学会注册域名、申请空间学会测试站点范围的链接

12、、改变站点范围的链接、查找和替换、清理文档学会使用DreamweciverCC上传网站、使用FTP工具上传网站四、学时分配及教学方法章（按序填写）教学形式及学时分配主要教学方法支撑的课程目标课堂教学实 验上机课程实践小 计第一章112讲授法、演示法1、5第二章112讲授法、演示法1、5第三章112讲授法、演示法1、5第四章112讲授法、演示法1、5第五章224讲授法、演示法1、5第六章112讲授法、演示法1、5第七章112讲授法、演示法1、5第八章224讲授法、演示法1、5第九章112讲授法、演示法1、5第十章112讲授法、演示法2、3、9第十一章112演示法、基于项目的 研究型教学方法2、3

13、、9第十二章112演示法、基于项目的 研究型教学方法4、 8、 10、 12第十三章224演示法、基于项目的 研究型教学方法6、 7、 11、 13合计161632注：1.课程实践学时按相关专业培养计划列入表格；.主要教学方法包括讲授法、讨论法、演示法、研究型教学方法（基于问题、项目、案例 等教学方法）等。五、课程考核考核形式考核要求考核权重备注课堂表现积极参加课堂讨论5%平时作业认真完成课堂案例15%期末考试闭卷60%大作业项目设计20%注：1.分学期设置和考核的课程应按学期分别填写上表。.考核形式主要包括课堂表现、平时作业、阶段测试、期中考试、期末考试、大作业、小 论文、项目设计和作品等。.考核要求包括作业次数、考试方式（开卷、闭卷）、项目设计要求等。.考核权重指该考核方式或途径在总成绩中所占比重。六、参考书目及学习资料（书名，主编，出版社，出版时间及版次）Dreamweaver CC 2017中文版入门与提高实例教程杨雪静