网页设计基础教案

网页设计基础教案教案学院(部)： 系（教研室）： 软件工程系 授课教师： 职 称： 课程名称网页设计基础总学分： 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青软实训，清华大学出版社，20162.Web前端开发实例教程-HTML.CSS. ，占东明，人民邮电出版社，2016其他教学资源：万维网联盟发布的相关标准.（）教案 总学时第 1 学时 第 2 学时授课内容网页制作基础教学目的和要求了解网页制作基本步骤，掌握网页的构成等基本知识，了解HTML和CSS的标准化过程，熟悉网页制作开发环境。重点难点网页制作基本步骤，网页相关的基本知识，HTML和CSS的标准化过程教学安排一、网页相关的基本知识 1. 网页的元素：文本、图像、链接、声音、电影或动态图像。 2. 网页的表现形式：浏览器。常见浏览器介绍：Internet Explorer；NetScape Navigator 网景浏览器；火狐(Firefox)浏览器；Opera浏览器；其它IE核心浏览器。 3. 网页的地址（网址）：URL超文本传输协议统一资源定位符将从因特网获取信息的四个基本元素包括在一个简单的地址中：传送协议； 服务器； 端口号； 路径。 4. 网站：网页的集合。衡量一个网站的性能通常从网站空间大小、网站位置、网站连接速度、网站服务内容等几方面考虑。 5. 网站的地址：域名/IP地址。二、网页制作的基本步骤 收集和整理资料；制作网页；测试站点；发布站点；站点维护和更新。三、HTML和CSS 1. HTML标准的版本历史2. CSS的定义及发展历史 3. XHTML与HTML四、开发环境介绍 Dreamweaver 8和文本编辑器（EditPlus等）思考题、课后作业练习使用Dreamweaver。主要参考资料万维网联盟网站：课后自我总结分析学生对本课程的熟悉程度差距较大，日后的教学安排应更具有针对性。备注教案 总学时第 3 学时 第 4 学时授课内容网页中的文字CSS网页样式设置教学目的和要求掌握HTML中的文字标记；掌握CSS的三种使用方法；熟悉常用的CSS属性。重点难点HTML中的文字标记；CSS的使用方法；CSS选择器教学安排一、HTML文本标记 段落标记： 标题标记：- 换行标记： 列表标记：（有序）,（无序）,（列表项）二、CSS的使用方法； 1. 行内样式 缺点：容易增加网页体积，不推荐使用。优点：使用简单。 2. 嵌入式样式：嵌入在与之间 3. 链接式：放置在与之间 4. 导入式：放置在与之间 import url(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