《网站前端开发技术》教学大纲

《网站前端开发技术》教学大纲第一部分：使用说明一、课程性质与特点本课程属于专业选修课（考查课）。

主要讲解网站前端开发相关技术。

该课程是一门实践性很强的课程，需要大量的上机实验加强对课程的理解。

二、在专业教学计划中的地位和作用网站前端开发技术是一门非常必要的专业选修课，是学生学习其他Web类课程的基础。

该课程是计算机与信息技术课程体系中Web应用开发类模块中的核心课程之一。

通过对网站前端开发技术的学习，使学生掌握网站开发与建设的HTML、CSS及JAVASCRIPT等基础技术，熟悉以Bootstrap为代表的框架技术，为后续的JAVA WEB编程基础课程打下良好的知识储备。

三、教学目的通过该课程的学习，学生应掌握构建网站所需的HTML、CSS及JAVASCRIPT等静态页面技术，熟悉Bootstrap框架技术，最终能够独立设计并创建自己的站点。

同时为后续JAVA WEB 编程课程做好知识储备。

四、先修课程C语言或Java语言五、学时与学分本课程总计48学时（讲授：32学时，实验：16学时），2.5学分，每周3学时。

六、教学方法课堂讲授，多媒体演示，上机实践。

七、考核方式及成绩评定考核方式：考查，主要采用平时成绩+期末考试结合方式考核。

成绩评定：平时成绩占50%，期末考试占60%。

八、教材及主要参考书目（一）教材HTML+CSS+JavaScript+Bootstap网站开发实用技术（3版）作者：张大为、刘德山，人民邮电出版社，2020（二）参考资料（1）唐四薪. 基于Web标准的网页设计与制作. 北京：清华大学出版社，2014.（2）黑马程序员.响应式Web开发项目教程（HMTL5+CSS3+Bootstrap）. 北京：人民邮电出版社，2019.（3）陆凌牛. HTML5与CSS3权威指南. 3版. 北京：机械工业出版社，2015.第二部分：课程内容第一章网站开发基础知识一、教学目的与要求学生应了解互联网的工作机制，掌握网站建设的常用技术及流程。

二、教学方法课堂讲授。

三、教学重点与难点制作网站的标准和常用技术、网站建设的流程、Dreamweaver CS6四、教学时数：2学时五、主要教学内容第一节互联网的访问过程第二节互联网的工作机制第三节网站设计中的一些基本概念第四节制作网站的标准和常用技术一、 Web标准二、网站开发常用技术第五节常用的开发工具第六节网站建设的流程一、明确网站的定位二、确定网站的主题三、网站的整体规划四、收集资料与素材五、设计制作网页页面六、测试和发布七、网站的维护与推广第七节建立站点一、 Dreamweaver CS6介绍二、 Dreamweaver站点组成三、创建站点四、管理站点第二章静态网页制作—使用HTML技术一、教学目的与要求掌握HTML5的新特征及HTML常用标记的语法规则和使用方法，掌握表单和表格的语法规则及使用方法。

二、教学方法课堂讲授。

三、教学重点与难点页面修饰标记、超级链接标记及表单标记，HTML5新增标记，表单标记、表格标记。

四、教学时数：6学时五、主要教学内容第一节 HTML概述一、 HTML简介二、HTML文档结构与书写规范三、建立HTML文件第二节 HTML的基本标记一、标题标记<hn>二、段落标记<p>和换行标记<br>三、块标记<div>和<span>四、列表标记五、 HTML5增加的结构元素第三节多媒体一、图像标记<img>二、多媒体文件标记<embed>三、 HTML5中新增的视频标记<video>四、 HTML5中新增音频标记<audio>第四节超链接一、超级链接标记<a>二、超级链接类型三、超级链接路径第五节表单一、表单定义标记<form>二、输入标记<input>三、列表框标记<select>四、文本域输入标记<textarea>五、HTML5表单新增属性六、HTML5新增input类型第六节表格一、 HTML的表格标记二、 HTML表格的属性三、表格嵌套（*）第七节内嵌框架（*）第八节应用案例（选讲其中1-2个）一、多层嵌套列表案例（*）二、会员注册表单案例三、旅游网站首页案例四、内嵌框架案例（*）五表格布局应用综合案例第三章美化网页——使用CSS技术一、教学目的与要求要求掌握CSS样式的定义方法和应用的四种方式。

二、教学方法课堂讲授。

三、教学重点CSS样式的定义与应用。

四、教学时数：6学时五、主要教学内容第一节 CSS概述一、 CSS的引入二、 CSS简介第二节 CSS基本选择器一、标记选择器二、类选择器三、 ID选择器第三节在HTML中使用CSS的方法一行内样式二、嵌入样式三、链接样式四、导入样式五、样式的优先级第四节 CSS复合选择器一、交集选择器二、并集选择器三、后代选择器四、子选择器五、相邻选择器六、属性选择器七、伪类选择器八、伪对象选择器第五节用CSS设置文本样式一、字体属性二、文本属性第六节用CSS设置颜色与背景第七节用CSS设置图像效果一、为图片添加边框二、图片缩放三、图文混排第八节应用安全一、用CSS美化表单案例二、用CSS设计网站页面案例第四章规划页面——使用CSS实现精美布局一、教学目的与要求要求掌握如何运用DIV+CSS进行页面精美布局。

二、教学方法课堂讲授。

三、教学重点与难点DIV标记和CSS技术的结合运用进行页面布局。

四、教学时数：4学时五、主要教学内容第一节 CSS盒模型一、内容(content)二、边界(margin)三、填充(padding)四、边框(border)第二节 CSS布局常用属性一、定位属性(position)二、浮动属性(float)第三节 DIV+CSS网页布局一、单列布局二、两列布局三、使用CSS3盒布局的三列布局第四节应用案例一、用DIV+CSS实现图文混排案例二、二级导航菜单制作案例（*）第五章让网页动起来—使用JavaScript技术一、教学目的与要求要求掌握JavaScript运行机制和JavaScript在网页中作用，掌握J avaScript基本语法和控制结构。

二、教学方法课堂讲授。

三、教学重点与难点J avaScript基本语法和控制结构。

四、教学时数：4学时五、主要教学内容第一节JavaScript概述一、JavaScript特点二、第一个JavaScript程序第二节JavaScript语言基础一、JavaScript语法格式二、JavaScript代码书写位置三、JavaScript语句四、JavaScript注释五、数据类型六、变量和常量第三节表达式与运算符一、表达式二、运算符第四节JavaScript控制结构与函数一、JavaScirpt控制结构二、函数第五节应用案例第六章实现用户与界面的交互——JavaScript的对象与事件一、教学目的与要求掌握如何运用JavaScript对象进行页面编程，使用事件处理实现用户与页面之间的交互。

二、教学方法课堂讲授。

三、教学重点与难点J avaScript内置对象、浏览器对象及HTML DOM对象，重点掌握J avaScript鼠标事件、页面事件、表单事件的使用方法。

四、教学时数：6学时五、主要教学内容第一节JavaScript对象概述一、对象二、对象的引用三、对象的操作四、 JavaScript的对象类型第二节 JavaScript内置对象一、 String对象二、 Array对象三、 Date对象四、 Math对象第三节浏览器对象一、 BOM概述二、 Window对象三、 Navigator对象（*）四、 Screen对象（*）五、 Location对象（*）六、 History对象（*）七、文档（Document）对象第四节 HTML DOM对象一、 DOM概述二、 HTML DOM对象三、访问HTML DOM对象第五节事件和事件处理一、事件处理的相关概念二、事件绑定第六节常见事件和事件对象一、常见事件二、事件对象第七节常见事件示例一、鼠标事件二、键盘事件（*）三、表单事件第八节应用案例一、表单验证案例二、网络相册案例（*）三、图片轮播案例第七章 Bootstrap基础一、教学目的与要求掌握Bootstrap框架的特点和结构，能使用框架实现响应式页面开发。

二、教学方法课堂讲授。

三、教学重点与难点Bootstrap框架的引用四、教学时数：4学时五、主要教学内容第一节认识Bootstrap一、 Bootstrap框架的内容二Bootstrap特点三、Bootstrap版本第二节Bootstrap框架结构一、Bootstrap框架的下载二、Bootstrap框架的结构三、在项目中引入Bootstrap框架第三节应用案例第八章 Bootstrap 的全局样式一、教学目的与要求学习使用Bootstrap 的全局样式实现页面开发二、教学方法课堂讲授、上机实践。

三、教学重点与难点Bootstrap的栅格系统四、教学时数：4学时五、主要教学内容第一节栅格系统一、栅格系统的工作原理二、栅格系统的类及相关参数三、用栅格实现的响应式布局第二节页面版式一、标题二、列表三、表格四、按钮五、表单六、图片第三节应用案例第九章 Bootstrap 的组件和插件一、教学目的与要求学习使用Bootstrap 的组件和插件实现页面开发二、教学方法课堂讲授、上机实践。

三、教学重点与难点Bootstrap的导航组件，轮播插件的实现原理四、教学时数：4学时五、主要教学内容第一节 Glyphicons 字体图标第二节下拉菜单第三节导航和头部导航第四节标签与徽章（*）第五节列表组和分页第六节标签页和提示框（*）第七节折叠和轮播第八节应用案例本章小结第十章用HTML5+CSS3实现的在线旅游网站一、教学目的与要求掌握运用HTML5和CSS3技术来创建一个具有现代风格的Web网站，学习使用Bootstrap 框架构建响应式网站的页面。

二、教学方法课程实践。

三、教学重点与难点页面组织、CSS应用四、教学时数：6学时五、主要教学内容第一节用HTML5+CSS3实现的在线旅游网站一、使用HTML5结构元素组织网页二、页头部分的设计三、侧边导航和焦点图的设计四、精品推荐版块的设计（*）五、页脚的设计（*）第二节用Bootstrap实现的网站后台管理页面一、页面结构描述二、导航部分的设计三、主体部分的设计第十一章网站的发布与管理一、教学目的与要求掌握网站测试和web服务器的构建方法。

二、教学方法课堂讲授。

三、教学重点与难点重点掌握web服务器的构建方法。