网页设计基础教案

《网页设计基础》教案教案学院(部)：系（教研室）：软件工程系授课教师：职称：课程名称网页设计基础总学分：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.网页的表现形式：浏览器。常见浏览器介绍：InternetExplorer；NetScapeNavigator网景浏览器；火狐(Firefox)浏览器；Opera浏览器；其它IE核心浏览器。3.网页的地址（网址）：URL超文本传输协议统一资源定位符将从因特网获取信息的四个基本元素包括在一个简单的地址中：传送协议；服务器；端口号；路径。4.网站：网页的集合。衡量一个网站的性能通常从网站空间大小、网站位置、网站连接速度、网站服务内容等几方面考虑。5.网站的地址：域名/IP地址。二、网页制作的基本步骤收集和整理资料；制作网页；测试站点；发布站点；站点维护和更新。三、HTML和CSS1.HTML标准的版本历史2.CSS的定义及发展历史3.XHTML与HTML四、开发环境介绍Dreamweaver8和文本编辑器（EditPlus等）思考题、课后作业练习使用Dreamweaver。主要参考资料万维网联盟网站：课后自我总结分析学生对本课程的熟悉程度差距较大，日后的教学安排应更具有针对性。备注教案总学时第3学时—第4学时授课内容网页中的文字CSS网页样式设置教学目的和要求掌握HTML中的文字标记；掌握CSS的三种使用方法；熟悉常用的CSS属性。重点难点HTML中的文字标记；CSS的使用方法；CSS选择器教学安排一、HTML文本标记段落标记：p标题标记：H1-H7换行标记：br列表标记：ol（有序）,ul（无序）,li（列表项）二、CSS的使用方法；1.行内样式pstyle=CSS样式缺点：容易增加网页体积，不推荐使用。优点：使用简单。2.嵌入式样式：嵌入在head与/head之间styletype=text/css!--样式列表；--/style3.链接式：放置在head与/head之间linkhref=1.csstype=text/cssrel=stylesheet4.导入式：放置在style与/style之间@importurl(sheet1.css);三、CSS选择器集体声明；嵌套选择器；思考题、课后作业在文档中使用CSS。主要参考资料万维网联盟网站：中的属性的中英文对照表方便学生学习。备注教案总学时第5学时—第6学时授课内容网页中的图片建立超链接教学目的和要求掌握HTML中的图片标记和超链接标记。重点难点HTML中的图片标记和超链接标记。教学安排一、HTML图片标记1.网页中的图片格式2.插入图片：img3.img属性的使用：src必不可少；alt替换文本。二、HTML超链接标记超链接标记：锚a1.文字超链接2.图片超链接：图片超链接会自动为图片添加边框。3.链接目标：target4.特点目标的链接：#三、与超链接有关的CSS属性a:link:链接样式a:hover:鼠标指向链接时的样式a:active:激活链接的样式a:visited:访问过链接的样式思考题、课后作业使用图片标记插入图片；建立文本超链接。主要参考资料万维网联盟网站：学时—第8学时授课内容表格教学目的和要求掌握HTML中的表格标记的多种使用方法。重点难点复杂表格的创建方法，表格布局方法。教学安排一、使用HTML建立表格tablecaption表格标题/captiontrtd/tdtd/td/trtrtd/tdtd/td/tr/table二、使用CSS建立多种表格样式重点：表格边框的多种样式难点：表格外框与单元格边框之间的关系三、布局单元格和表格使用属性：width,height,rowspan,colspan思考题、课后作业使用表格布局网页。主要参考资料万维网联盟网站：学时—第12学时授课内容网站制作综合实例教学目的和要求掌握网站制作的完整过程。重点难点网站制作的完整过程。教学安排通过为一个虚拟公司创建完整网站，从网站构思到设计，再到页面编码等操作，深入掌握网站制作流程以及一些网页制作中的常用技巧。步骤一：网站策划步骤二：网页整体风格设计步骤三；创建站点步骤四：相关图片设计与绘制步骤五：制作首页并填充内容步骤六：添加CSS样式步骤七：使用模板生成其他页面步骤八；创建链接并添加链接属性步骤九：检查站点思考题、课后作业思考题；如何优化网页以提高访问量？主要参考资料万维网联盟网站：学时—第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学时授课内容JavaScriptDOM基础教学目的和要求了解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.网络相