网页设计基础教案.docx
《网页设计基础教案.docx》由会员分享，可在线阅读，更多相关《网页设计基础教案.docx（19页珍藏版）》请在冰豆网上搜索。
《网页设计基础》教案
教案
学院（部）：
系（教研室）：
软件工程系
授课教师：
职 称：
课程名称
网页设计基础
总学分：
2.0 学分
总学时：
32学时 其中：
讲课 24 学时 实践 8 学时
课程类别
必修课（ ） 选修课（ √ ）
公共课（ ） 学科课（ ） 专业课（ √ ） 实践课（ ） 全校任选课（ ）
授课对象
软件工程
考核方式
考查课程。
总评成绩=平时总成绩（40%）+期末考试成绩×60%
教
学
基
本
目
的
和
要
求
本课程将介绍WEB开发的基础技术，着重介绍HTML/XHTML标记语言、CSS层叠样式表和JAVASCRIPT脚本语言等相关内容。
通过本课程的学习，掌握开发静态网页的基本技术以及网站规划、制作及管理维护等基本技能，了解WEB开发的高级技术，能够独立开发静态网页组成的网站，基本掌握JAVASCRIPT脚本语言及常见网页动态效果的编写方法。
本课程力求通过理论和实践教学，使学生较好地掌握WEB程序设计技术和基本方法，对WEB开发有一个全面的认识和了解，并能够独立自主开发静态网页组成的网络应用程序。
教
学
重
点
和
难
点
教学重点：
HTML标记语法及常用标记，CSS使用方法及常用属性，网页设计与制作过程，网站管理与发布，JavaScript基本语法，浏览器对象模型BOM，DOM，事件处理模型，正则表达式。
教学难点：
CSS使用方法与选择器，网站管理与发布，浏览器对象模型BOM，DOM，事件处理模型，正则表达式
教材、
参考书
教材:
1.《Web前端设计与开发-HTML+CSS++HTML5+jQuery》，QST青软实训，清华大学出版社，2016
2.《Web前端开发实例教程-HTML.CSS. 》，占东明，人民邮电出版社，2016
其他教学资源：
万维网联盟发布的相关标准.（）
教案
总学时第 1 学时 — 第 2 学时
授课内容
网页制作基础
教学目的
和要求
了解网页制作基本步骤，掌握网页的构成等基本知识，了解HTML和CSS的标准化过程，熟悉网页制作开发环境。
重点
难点
网页制作基本步骤，网页相关的基本知识，HTML和CSS的标准化过程
教
学
安
排
一、网页相关的基本知识
1. 网页的元素：
文本、图像、链接、声音、电影或动态图像。
2. 网页的表现形式：
浏览器。
常见浏览器介绍：
InternetExplorer；NetScapeNavigator 网景浏览器；火狐（Firefox）浏览器；Opera浏览器；其它IE核心浏览器。
3. 网页的地址（网址）：
URL
超文本传输协议统一资源定位符将从因特网获取信息的四个基本元素包括在一个简单的地址中：
传送协议； 服务器； 端口号； 路径。
4. 网站：
网页的集合。
衡量一个网站的性能通常从网站空间大小、网站位置、网站连接速度、网站服务内容等几方面考虑。
5. 网站的地址：
域名/IP地址。
二、网页制作的基本步骤
收集和整理资料；制作网页；测试站点；发布站点；站点维护和更新。
三、HTML和CSS
1.HTML标准的版本历史
2.CSS的定义及发展历史
3. XHTML与HTML
四、开发环境介绍
Dreamweaver8和文本编辑器（EditPlus等）
思考题、
课后作业
练习使用Dreamweaver。
主要
参考资料
万维网联盟网站：
课后自我
总结分析
学生对本课程的熟悉程度差距较大，日后的教学安排应更具有针对性。
备注
教案
总学时第 3 学时 — 第 4 学时
授课内容
网页中的文字
CSS网页样式设置
教学目的
和要求
掌握HTML中的文字标记；掌握CSS的三种使用方法；熟悉常用的CSS属性。
重点
难点
HTML中的文字标记；CSS的使用方法；CSS选择器
教
学
安
排
一、HTML文本标记
段落标记：
标题标记：
-换行标记：
列表标记：
（有序）,（无序）,- （列表项）
二、CSS的使用方法；
1. 行内样式
缺点：
容易增加网页体积，不推荐使用。
优点：
使用简单。
2. 嵌入式样式：
嵌入在
与之间
--
样式列表；
-->
3. 链接式：
放置在
与之间
4. 导入式：
放置在之间
@importurl（sheet1.css）;
三、CSS选择器
集体声明；嵌套选择器；
思考题、
课后作业
在文档中使用CSS。
主要
参考资料
万维网联盟网站：
课后自我
总结分析
应提供CSS中的属性的中英文对照表方便学生学习。
备注
教案
总学时第 5 学时 — 第 6 学时
授课内容
网页中的图片
建立超链接
教学目的
和要求
掌握HTML中的图片标记和超链接标记。
重点
难点
HTML中的图片标记和超链接标记。
教
学
安
排
一、HTML图片标记
1. 网页中的图片格式
2. 插入图片：
![]()
3.![]()
属性的使用：
src必不可少；alt替换文本。
二、HTML超链接标记
超链接标记：
锚
1. 文字超链接
2. 图片超链接：
图片超链接会自动为图片添加边框。
3. 链接目标：
target
4. 特点目标的链接：
#
三、与超链接有关的CSS属性
a:
link:
链接样式
a:
hover:
鼠标指向链接时的样式
a:
active:
激活链接的样式
a:
visited:
访问过链接的样式
思考题、
课后作业
使用图片标记插入图片； 建立文本超链接。
主要
参考资料
万维网联盟网站：
课后自我
总结分析
备注
教案
总学时第 7 学时 — 第 8 学时
授课内容
表格
教学目的
和要求
掌握HTML中的表格标记的多种使用方法。
重点
难点
复杂表格的创建方法，表格布局方法。
教
学
安
排
一、使用HTML建立表格
二、使用CSS建立多种表格样式
重点：
表格边框的多种样式
难点：
表格外框与单元格边框之间的关系
三、布局单元格和表格
使用属性：
width,height,rowspan,colspan
思考题、
课后作业
使用表格布局网页。
主要
参考资料
万维网联盟网站：
课后自我
总结分析
备注
教案
总学时第 9 学时 — 第 12 学时
授课内容
网站制作综合实例
教学目的
和要求
掌握网站制作的完整过程。
重点
难点
网站制作的完整过程。
教
学
安
排
通过为一个虚拟公司创建完整网站，从网站构思到设计，再到页面编码等操作，深入掌握网站制作流程以及一些网页制作中的常用技巧。
步骤一：
网站策划
步骤二：
网页整体风格设计
步骤三；创建站点
步骤四：
相关图片设计与绘制
步骤五：
制作首页并填充内容
步骤六：
添加CSS样式
步骤七：
使用模板生成其他页面
步骤八；创建链接并添加链接属性
步骤九：
检查站点
思考题、
课后作业
思考题；如何优化网页以提高访问量？
主要
参考资料
万维网联盟网站：
课后自我
总结分析
备注
教案
总学时第 13 学时 — 第 14学时
授课内容
JavaScript概述
JavaScript基础
JavaScript面向对象编程
教学目的
和要求
了解JavaScript的作用；掌握JavaScript的语法基础；熟悉JavaScript中面向对象编程的语言特性与实现方法。
重点
难点
JavaScript的语法；JavaScript的面向对象的语言特性与实现方法。
教
学
安
排
一、JavaScript概述
1.JavaScript的发展历史。
2.JavaScript可以做什么与不能做什么。
3.JavaScript的开发工具。
二、JavaScript语法基础
1.JavaScript语法基础：
语句，注释，变量，运算符，程序流程控制。
2.JavaScript内置对象
三、JavaScript面向对象编程
1.JavaScript面向对象语言特性
2.JavaScript面向对象编程实现
思考题、
课后作业
课后作业：
P28页 习题2-1，2-2；P39页 习题3-1，3-3
主要
参考资料
课后自我
总结分析
备注
教案
总学时第 15 学时 — 第 16 学时
授课内容
JavaScript正则表达式
教学目的
和要求
了解正则表达式的起源与功能；掌握构建正则表达式的技术；掌握简单模式的正则表达式中的元素；熟悉复杂模式的正则表达式。
重点
难点
构建正则表达式的技术
教
学
安
排
一、正则表达式的简介
二、构建简单的正则表达式
三、JavaScript中的正则表达式的使用（重点）
1. 定义正则表达式
2. 使用String对象
3.RegExp和正则表达式对象
四、简单模式（重点，难点）
1. 元字符
2. 特殊字符
3. 括号表达式
4. 预定义类
5. 限定符
6. 贪婪模式与非贪婪模式
五、复杂模式
1. 选择和分组
2. 非捕获性分组
3. 前瞻
4. 定位符
思考题、
课后作业
JavaScript中的正则表达式的使用
主要
参考资料
课后自我
总结分析
备注
教案
总学时第 17 学时 — 第 18 学时
授课内容
JavaScript字符串处理
教学目的
和要求
了解JavaScript中的字符串处理函数；掌握字符串处理方法。
重点
难点
字符串处理函数；掌握常见的字符串处理技术。
教
学
安
排
一、JavaScript字符串处理函数（重点）
1. 访问字符串函数：
length属性，fromCharCode（），toString（），valueOf（），charAt（），charCodeAt（）。
2. 查找字符串函数：
indexOf（），lastIndexOf（）。
3. 比较字符串函数：
localeCompare（）。
4. 修改字符串函数：
concat（），slice（），substring（），toLowerCase（），toLocaleLowerCase（），toUpperCase（），toLocaleUpperCase（）。
5. 正则表达式匹配与替换：
match（），replace（），search（），split（）。
二、字符串处理应用示例
1. 计算字符串长度
2. 字符串验证
3. 字符串填充
4. 字符串连接
5. 首字母大写
6. 屏蔽非法用词
7. 删除HTML标签
思考题、
课后作业
JavaScript字符串处理函数练习
主要
参考资料
课后自我
总结分析
备注
教案
总学时第 19 学时 — 第 20 学时
授课内容
JavaScript浏览器对象模型
教学目的
和要求
了解浏览器对象；掌握JavaScript中控制浏览器对象的常用技术。
重点
难点
JavaScript中控制浏览器对象的常用技术。
教
学
安
排
一、浏览器对象（重点）
1.window对象：
调整窗口大小，打开新窗口，系统对话框，状态栏控制，定时操作。
（重点）
2.document对象
3.location对象（难点）
4.navigator对象
5.screen对象
6.history对象
二、JavaScript浏览器编程示例
1. 控制浏览器窗口
2. 延时生效按钮
3. 页面间参数传递
4. 检测浏览器及操作系统类型
思考题、
课后作业
浏览器对象模型练习
主要
参考资料
课后自我
总结分析
备注
教案
总学时第 21 学时 — 第 24 学时
授课内容
JavaScript DOM基础
教学目的
和要求
了解DOM标准；熟悉DOM的使用方法；掌握常见的DOM处理技术。
重点
难点
DOM的使用方法。
教
学
安
排
一、DOM标准
1.DOM简介
2.DOM标准接口及使用方法
二、使用DOM（重点、难点）
1. 访问指定节点
2. 访问元素属性
3. 访问相关节点
4. 检查节点类型
5. 创建节点
6. 操作节点
三、DOM应用示例
1. 文本框自动获得焦点
2. 表单输入验证
3. 双向选择列表框
4. 关键词链接
5. 可排序表格
思考题、
课后作业
练习DOM的使用方法
主要
参考资料
课后自我
总结分析
备注
教案
总学时第 25 学时 — 第 26 学时
授课内容
JavaScript 事件处理模型
教学目的
和要求
了解事件流；熟悉事件处理函数和对象；掌握常见的事件处理技术。
重点
难点
事件流；常见的事件处理技术。
教
学
安
排
一、事件流
1.DOM事件流模型：
捕获，目标，冒泡
2.IE事件流模型
二、事件处理函数
1.DOM事件处理函数
2.IE事件处理函数
三、事件对象
DOM标准和IE都提供了事件对象，其中包含的事件信息有：
引发事件的对象，事件发生时鼠标的信息，事件发生时键盘的信息。
1.DOM事件对象：
Event接口、UIeven、MouseEvent。
2.IE事件对象：
windows.event
四、事件处理应用示例
1. 商品评级功能
2. 网络相册
3. 模拟拖放效果
思考题、
课后作业
思考：
从事件流模型的角度比较DOM和IE在事件处理方面的区别，并以实例验证。
主要
参考资料
课后自我
总结分析
备注
教案
总学时第 27 学时 — 第 30 学时
授课内容
JavaScript控制页面样式
教学目的
和要求
掌握JavaScript中的样式编程技术。
重点
难点
JavaScript中的样式编程技术。
教
学
安
排
一、JavaScript样式编程基础（重点）
1. 访问样式：
内联样式，最终样式
2. 访问样式表：
修改CSS规则；切换样式表。
二、JavaScript样式编程示例（难点）
1.网页换肤
通用的样式表切换功能。
使用cookie保存用户选择的样式表。
解决IE中可能出现的样式切换不渲染问题。
2. 图片倒影特效
3. 圆角边框
思考题、
课后作业
练习JavaScript中的样式编程技术
主要
参考资料
课后自我
总结分析
备注
教案
总学时第 31 学时 — 第 32 学时
授课内容
JavaScript与服务器通信
JavaScript与插件
教学目的
和要求
了解传统的无刷新页面实现技术；了解Ajax技术；掌握Javaapplet的创建和使用方法；掌握ActiveX控件的创建和使用方法。
重点
难点
无刷新页面实现技术；Javaapplet的创建和使用方法；ActiveX控件的创建和使用方法。
教
学
安
排
一、传统无刷新页面实现技术
1. 方法一：
隐藏框架
2. 方法二：
远程脚本
二、Ajax技术
1.Ajax技术原理
2.Ajax应用示例
三、Javaapplet
1. 创建applet
2. 使用applet
四、ActiveX控件
1. 创建ActiveX控件
2. 使用ActiveX控件
思考题、
课后作业
思考题：
隐藏框架技术的实现原理。
主要
参考资料
课后自我
总结分析
备注
升级会员 