《HTML+CSS+JavaScript网页制作案例教程》课程教学大纲

Size: px

Start display at page:

Download "《HTML+CSS+JavaScript网页制作案例教程》课程教学大纲"

夸昝
5 years ago
Views:

1 HTML+CSS+JavaScript 网页制作案例教程课程教学大纲 ( 课程英文名称 ) 课程编号 : 学分 :5 学分学时 : 64 学时 ( 其中 : 讲课学时 :45 上机学时 : 19 ) 先修课程 : 计算机基础计算机网络计算机应用后续课程 :UI 设计 JavaScript 网页特效适用专业 : 信息及其计算机相关专业开课部门 : 计算机系一课程的性质与目标 HTML+CSS+JavaScript 网页制作案例教程 ) 是面向计算机相关专业的一门专业基础课, 涉及网页基础 HTML 标记 CSS 样式网页布局 JavaScript 编程基础与事件处理等内容通过本课程的学习, 学生能够了解 HTML CSS 及 JavaScript 语言的发展历史及未来方向, 熟悉网页制作流程掌握常见的网页布局效果学会制作各种企业门户电商类网站二课程的主要内容及基本要求第一章网页那点事 (2 学时 ) [ 知识点 ] 认识网页常见的互联网专业术语 Web 标准 HTML 简介 CSS 简介 JavaScript 简介常用浏览器介绍 Dreamweaver 工具的使用

2 使用 Dreamweaver 创建第一个页面 [ 重点 ] Web 标准 Dreamweaver 工具的使用 [ 难点 ] Web 标准 Dreamweaver 工具创建第一个页面 [ 基本要求 ] 了解 Web 标准, 明确 HTML CSS 及 JavaScript 在其中的作用熟悉 Dreamweaver 工具的基本操作, 能使用 Dreamweaver 创建简单的网页第二章从零开始构建 HTML 页面 (4 学时 ) [ 相关案例 ] 案例 1 简单的网页 : 案例 2 新闻页面 : 案例 3 图文混排 : [ 知识点 ] HTML 文档基本格式

3 单标记与双标记标题与段落标记 HTML 文档头部相关标记 font 标记标记的属性文本格式化标记图像标记相对路径与绝对路径常用图像格式特殊字符标记 [ 重点 ] HTML 文档基本格式标记的属性图像标记相对路径与绝对路径 [ 难点 ] 相对路径与绝对路径 [ 学习目标 ] 掌握 HTML 文档基本格式, 能够书写规范的 HTML 网页掌握标题段落及文字标记, 可以合理地使用它们定义网页元素掌握图像标记, 学会制作图文混排页面第三章使用 CSS 技术美化网页 (8 学时 ) [ 相关案例 ] 案例 4 文字 Logo: 案例 5 专题栏目 :

4 案例 6 搜索页面 : [ 知识点 ] CSS 样式规则引入 CSS 样式表 CSS 基础选择器 CSS 字体样式属性 CSS 文本外观属性 CSS 复合选择器 CSS 层叠性与继承性 CSS 优先级 [ 重点 ] CSS 样式规则引入 CSS 样式表 CSS 复合选择器 CSS 层叠性与继承性 CSS 优先级 [ 难点 ] CSS 复合选择器 CSS 优先级 [ 基本要求 ] 掌握 CSS 样式规则, 能够书写规范的 CSS 样式代码掌握 CSS 字体样式及文本外观属性, 能够控制页面中的文本样式

5 掌握 CSS 复合选择器, 可以快捷选择页面中的元素理解 CSS 层叠性继承性与优先级, 学会高效控制网页元素第四章 CSS 盒子模型 (8 学时 ) [ 相关案例 ] 案例 7 音乐盒 : 案例 8 用户中心 : 案例 9 咖啡店 banner:

6 案例 10 图标导航栏 : [ 知识点 ] 认识盒子模型 div 标记边框属性内边距属性外边距属性背景属性元素的类型 span 标记元素的转换 [ 重点 ] div 标记边框属性内边距属性外边距属性背景属性元素的转换 [ 难点 ] 背景属性元素的类型元素的转换 [ 基本要求 ] 掌握盒子模型相关属性, 能够使用它们熟练地控制网页元素理解块元素与行内元素的区别, 能够对它们进行转换

7 第五章列表与超链接 (6 学时 ) [ 相关案例 ] 案例 11 精美电商悬浮框 : 案例 12 二维码名片 : 案例 13 电商团购悬浮框 :

8 案例 14 唱吧导航栏 : 唱吧导航栏默认效果鼠标移上歌曲分类时 [ 知识点 ] 无序列表有序列表定义列表定义列表实现图文混排列表嵌套 list-style 复合属性背景图像定义列表项目符号超链接标记 <a> 清除超链接图像的边框链接伪类锚点链接

9 [ 重点 ] 无序列表定义列表背景图像定义列表项目符号超链接标记 <a> 链接伪类 [ 难点 ] 背景图像定义列表项目符号链接伪类 [ 基本要求 ] 掌握无序有序及定义列表的使用, 可以制作常见的网页列表模块掌握超链接标记的使用, 能够使用超链接定义网页元素掌握 CSS 伪类, 会使用 CSS 伪类实现超链接特效第六章 HTML 表单 (6 学时 ) [ 相关案例 ] 案例 15 用户登录界面 : 案例 16 趣味选择题 :

10 案例 17 空间日志 : 案例 18 学员档案 :

11 [ 知识点 ] 认识表单创建表单 input 控件 textarea 控件 select 控件 CSS 控制表单样式 [ 重点 ] input 控件 textarea 控件 select 控件 CSS 控制表单样式 [ 难点 ] input 控件 CSS 控制表单样式 [ 基本要求 ] 理解表单的构成, 可以快速创建表单掌握表单相关标记, 能够创建具有相应功能的表单控件掌握表单样式的控制, 能够美化表单界面第七章浮动与定位 (6 学时 )

12 [ 相关案例 ] 案例 19 世界杯梦幻阵容 : 案例 20 商品专栏 : 案例 21 移动端电商界面 :

13 案例 22 违停查询 : 违停查询界面默认效果

14 鼠标经过第一个违停坐标效果 [ 知识点 ] 元素的浮动属性 float clear 属性清除浮动 overflow 属性清除浮动 after 伪对象清除浮动 overflow 属性元素的定位属性静态定位相对定位绝对定位固定定位 z-index 层叠等级属性 [ 重点 ] 元素的浮动属性 float clear 属性清除浮动 overflow 属性清除浮动相对定位绝对定位 [ 难点 ] overflow 属性清除浮动相对定位绝对定位 [ 基本要求 ] 理解元素的浮动, 能够使用浮动对网页进行布局熟悉清除浮动的方法, 能够清除浮动的影响掌握常见的几种定位模式, 能够对元素进行精确定位第八章 JavaScript 编程基础 (8 学时 ) [ 相关案例 ] 案例 23 动态获取用户密码 :

15 案例 24 传智商城下拉菜单 : 传智商城效果展示案例 25 计算器 : 下拉菜单效果展示 [ 知识点 ] JavaScript 的引入关键字变量 prompt() 函数 alert() 函数 console.log() 函数函数 Array 数组对象 DOM 节点树节点的访问元素对象常用操作元素属性与内容操作元素样式操作数据类型运算符

运算符优先级表达式条件语句 eval() 函数 [ 重点 ] 变量函数 Array 数组对象 DOM 节点树节点的访问元素对象常用操作元素属性与内容操作元素样式操作条件语句 [ 难点 ] DOM 节点树节点的访问元素对象常用操作元素属性与内容操作元素样式操作 [ 基本要求 ] 掌握 JavaScript 语法规则, 能够书写规范的

16 运算符优先级表达式条件语句 eval() 函数 [ 重点 ] 变量函数 Array 数组对象 DOM 节点树节点的访问元素对象常用操作元素属性与内容操作元素样式操作条件语句 [ 难点 ] DOM 节点树节点的访问元素对象常用操作元素属性与内容操作元素样式操作 [ 基本要求 ] 掌握 JavaScript 语法规则, 能够书写规范的 JavaScript 代码掌握数组的概念, 能够熟练使用数组的常用属性和方法掌握节点的访问, 能够准确访问指定元素和相关元素掌握 if 语句及 switch 语句, 能够灵活运用条件控制语句第九章 JavaScript 事件处理 (10 学时 ) [ 相关案例 ] 案例 26 电商网站限时秒杀 : 限时秒杀秒杀结束案例 27 Tab 栏切换效果 :

17 Tab 栏切换前案例 28 台球移动游戏 : Tab 栏鼠标悬浮状态台球初始位置案例 29 用户登陆验证 : 台球移动后的位置

18 用户登陆验证未输入密码提示密码输入不一致提示 [ 知识点 ] JavaScript 事件事件处理程序的调用 BOM 操作 Date 对象数据类型转换循环控制语句跳转语句鼠标事件键盘事件页面事件事件对象表单事件 String 对象

19 [ 重点 ] BOM 操作 Date 对象循环控制语句跳转语句鼠标事件键盘事件页面事件事件对象表单事件 [ 难点 ] 鼠标事件键盘事件页面事件事件对象表单事件 [ 基本要求 ] 了解什么是 JavaScript 事件, 能够对事件处理程序进行调用掌握 JavaScript 常用事件, 如鼠标事件表单事件键盘事件以及页面事件等掌握 BOM 操作, 能够使用 BOM 与浏览器窗口进行交互掌握 Data 对象的常用方法, 能够应用 Data 对象获取当前区域的日期时间字符串第十章实战开发传智播客设计学院首页面 (6 学时 ) [ 案例展示 ]

20 [ 知识点 ] 建立站点站点初始化设置切片效果图分析页面布局定义公共样式制作头部和导航制作 banner 和通告制作主体内容区域制作底部版权区域 [ 重点 ] 建立站点切片效果图分析

21 定义公共样式制作头部和导航制作 banner 和通告制作主体内容区域制作底部版权区域 [ 难点 ] 切片制作头部和导航制作 banner 和通告制作主体内容区域 [ 基本要求 ] 掌握站点的建立, 能够建立规范的站点了解切图工具, 能够运用切片裁切效果图完成首页面的制作, 并能够实现简单的 JavaScript 特效三学时分配章目讲课实验上机合计第一章网页那点事 2 学时 0 学时 2 学时第二章从零开始构建 HTML 页面 3 学时 1 学时 4 学时第三章使用 CSS 技术美化网页 6 学时 2 学时 8 学时第四章 CSS 盒子模型 6 学时 2 学时 8 学时第五章列表与超链接 4 学时 2 学时 6 学时第六章 HTML 表单 4 学时 2 学时 6 学时第七章浮动与定位 4 学时 2 学时 6 学时第八章 JavaScript 编程基础 6 学时 2 学时 8 学时第九章 JavaScript 事件处理 6 学时 4 学时 10 学时第十章学院首页面实战开发传智播客设计 4 学时 2 学时 6 学时合计 45 学时 19 学时 64 学时四考核模式与成绩评定办法本课程为考试课程, 期末考试采用百分制的闭卷考试模式学生的考试成绩由平时成绩 (30%) 和期末考试 (70%) 组成, 其中, 平时成绩包括出勤 (5%)

22 作业 (5%) 实验和上机成绩 (20%) 五选用教材和主要参考书本大纲是根据教材 HTML+CSS+JavaScript 网页制作案例教程所设计的六大纲说明本课程的授课模式为 : 课堂授课 + 上机, 其中, 课堂主要采用多媒体的方式进行授课, 并且会通过测试题阶段测试学生的掌握程度 ; 上机主要是制作网页模块, 要求学生根据效果图编写网页前台代码撰写人 : 审定人 : 批准人 : 执行时间 :

开发工具 :Dreamweaver CS6 四课程的主要内容及基本要求第一章初识 HTML5 学习单元初识 HTML5 学时 6 学时 1. 了解 HTML5 发展历程学习目标学习内容 2. 理解 HTML5 浏览器支持情况 3. 熟悉 HTML5 基本语法, 掌握 HTML5 语法新特性

开发工具 :Dreamweaver CS6 四课程的主要内容及基本要求第一章初识 HTML5 学习单元初识 HTML5 学时 6 学时 1. 了解 HTML5 发展历程学习目标学习内容 2. 理解 HTML5 浏览器支持情况 3. 熟悉 HTML5 基本语法, 掌握 HTML5 语法新特性 HTML5+CSS3 网站设计基础教程课程教学大纲 ( 课程英文名称 ) 课程编号 :201601210011 学分 :5 学分学时 :63 学时 ( 其中 : 讲课学时 :40 学时上机学时 :23 学时 ) 先修课程 : 计算机基础计算机网络计算机应用后续课程 :UI 设计 JavaScript 网页特效适用专业 : 信息技术及其计算机相关专业开课部门 : 计算机系一课程的性质与目标