《网站设计与建设》教案.pdf

安徽大学本科教学课程教案安徽大学本科教学课程教案课程名称：网站设计与建设课程代码：KJ36010开课单位：安徽大学计算机科学与技术学院授课教师：课程名称：网站设计与建设课程代码：KJ36010开课单位：安徽大学计算机科学与技术学院授课教师：职称/学位：馆员/硕士开课时间：二一六至二一七学年第二学期职称/学位：馆员/硕士开课时间：二一六至二一七学年第二学期课程基本情况课程基本情况课课程程编编号号教教学学单单位位课课程程学学分分课课程程类类别别学学时时数数任任课课教教师师使使用用教教材材教教材材 公共基础课 专业必修课（包括专业基础课和专业核心课）专业选修课 人文与科技素质教育课 其他课程总学时：36理论学时：24实验学时：12上机学时：本校教师 外聘教师2 2(2016-2017-2)-KJ36010-09055-1课程课程名称名称网站设计与建设网站设计与建设安徽大学计算机科学与技术学院安徽大学计算机科学与技术学院考核考核方式方式 考试 考查 其他方式：顾伟顾伟职称职称馆员馆员教师教师来源来源 统编教材 自编教材或讲义书名书名网页制作与网站设计（第三版）网站设计与 Web 应用开发技术（第二版）作者作者阳西述吴伟敏人民邮电出版社出版社出版社华中科技大学出版社清华大学出版社传智播客高教产品研发部出版时间出版时间2016年08月2015 年2016 年教教学学参参考考用用书书HTML5+CSS3 网站设计基础教程第第1 1次课程教学方案次课程教学方案周次周次1课时数课时数3教学教学网页设计基础知识及相关辅助设计工具Dreamweaver 的使用章节章节教学教学目标目标和要和要求求通过本次课程的学习，明确网页基础知识、网站开发流程，并学会使用网页制作软件Dreamweaver。教学教学1、网站开发流程重点重点2、Dreamweaver 的使用教学教学Dreamweaver 中表格、框架的使用难点难点主要主要教学教学方式方式使用使用媒体媒体资源资源作业作业或练或练习习 课堂讲授 小组活动 实验演示 难点答疑 提问 作业讲评 实践教学 考试测验 其他活动 文字教材 电子教案 录像材料 录音材料 直播课堂 CAI 课件 IP 课件 其他资源：使用 Dreamweaver，设计一个简单的网页页面。（空白不够可添加附页）板板书书设设计计第第1 1次教学活动设计次教学活动设计教学环节教学环节主要教学内容主要教学内容1.11.1 认识网页设计认识网页设计1.1.1 网页设计背景1.1.2 常见网页的组成元素1.1.3 设计工具及设计方法简介1.1.4 网页布局方式1.1.5 网页色彩要素搭配1.1.6 网站制作的一般步骤1.21.2 认识认识 Dreamweaver CS6Dreamweaver CS6工作界面工作界面1.2.1 工作界面及视图1.2.2 标题栏和菜单栏1.2.3 多文档窗口编辑界面1.2.4 面板组1.2.5“属性”面板1.2.6 不同风格的界面2.12.1 站点管理站点管理2.1.1 为什么要创建站点2.1.2 创建站点2.1.3 编辑站点2.1.4 复制与删除站点2.1.5 导入和导出站点2.22.2 网页操作网页操作2.2.1 创建并保存网页文档2.2.2 设置网页属性2.2.3 预览网页3.13.1 表格的基本操作表格的基本操作3.1.1 插入表格3.1.2 设置表格属性3.1.3 在表格中添加内容3.1.4 操作行或列3.1.5 拆分与合并单元格3.1.6 插入嵌套表格3.1.7 扩展表格模式3.1.8 表格中所使用的属性3.1.9 使用表格进行网页布局3.23.2 框架布局框架布局3.2.1 框架集和框架的概念3.2.2 框架集和框架的基本操作3.2.3 设置框架集和框架的属性3.2.4 内嵌式框架的应用使用 Dreamweaver，设计一个简单的网页页面。学生活动学生活动安排安排导入新课布置作业第第2 2次课程教学方案次课程教学方案周次周次2课时数课时数3教学教学继续讲解网站设计工具 Dreamweaver 的使用章节章节教学教学目标目标和要和要求求通过本次课程的学习，学会并能熟练使用Dreamweaver。教学教学Dreamweaver 的文本、图像、Spry、超链接、表单使用。重点重点教学教学Dreamweaver 的表单的使用难点难点主要主要教学教学方式方式使用使用媒体媒体资源资源作业作业或练或练习习 课堂讲授 小组活动 实验演示 难点答疑 提问 作业讲评 实践教学 考试测验 其他活动 文字教材 电子教案 录像材料 录音材料 直播课堂 CAI 课件 IP 课件 其他资源：使用 Dreamweaver 设计一个简单的能展示多媒体元素的网站。（空白不够可添加附页）板板书书设设计计第第2 2次教学活动设计次教学活动设计教学环节教学环节主要教学内容主要教学内容4.14.1 在网页中添加文本在网页中添加文本4.1.1 文本的基本操作4.1.2 设置文本字体和大小4.1.3 设置文本颜色4.1.4 设置文本样式4.1.5 设置文本对齐方式4.1.6 插入和设置水平线4.1.7 插入特殊符号、时间和注释4.24.2 在网页中添加段落在网页中添加段落4.2.1 将文本设置为段落4.2.2 将文本设置为标题4.2.3 设置空格和段落缩进4.34.3 在网页中添加图像在网页中添加图像4.3.1 了解图像格式并学会插入并设置图像4.3.2 插入并设置图像占位符4.3.3 插入鼠标经过图像4.3.4 添加背景图像5.15.1 认识及应用超级链接认识及应用超级链接5.1.1 认识并添加超级链接5.1.2 为现有文本添加超级链接5.1.3 添加电子邮件超级链接5.1.4 添加锚记、脚本链接和空链接5.1.5 添加图像超级链接5.1.6 热点链接应用5.2 Spry5.2 Spry 菜单菜单5.2.1 插入和编辑菜单栏 Widget5.2.2 更改菜单栏 Widget的方向5.2.3 更改菜单栏 Widget的尺寸6.16.1 在页面中使用在页面中使用 FlashFlash 对象对象6.1.1 插入 SWF 格式的 Flash 文件6.1.2 调整 Flash 文件显示的大小6.1.3 Flash 相关信息设置6.1.4 Flash 播放控制6.1.5 Flash 边距调整6.1.6 对齐方式及背景颜色设置6.1.7 Flash 附加参数设置6.26.2 插入其他多媒体对象插入其他多媒体对象6.2.1 插入并设置 FLV视频文件6.2.2 认识并插入 Shockwave 影片6.2.3 在网页中插入背景音乐使用 Dreamweaver 设计一个简单的能展示多媒体元素的网站。学生活动学生活动安排安排导入新课布置作业第第3 3次课程教学方案次课程教学方案周次周次教学教学讲解 HTML 的使用章节章节教学教学目标目标和要和要求求3课时数课时数3通过本次课程的学习，初步了解 HTML 语言，并能使用简单的 HTML 标记。教学教学HTML 文件结构、head 部分中的常用标记及 body 中的文本格式标记。重点重点教学教学body 中的文本格式标记难点难点主要主要教学教学方式方式使用使用媒体媒体资源资源作业作业或练或练习习 课堂讲授 小组活动 实验演示 难点答疑 提问 作业讲评 实践教学 考试测验 其他活动 文字教材 电子教案 录像材料 录音材料 直播课堂 CAI 课件 IP 课件 其他资源：正确使用 HTML 语言书写网页。（空白不够可添加附页）板板书书设设计计第第3 3次教学活动设计次教学活动设计教学环节教学环节主要教学内容主要教学内容学生活动学生活动安排安排1 1、HTMLHTML 语言的发展过程语言的发展过程2 2、HTMLHTML 语言的概念语言的概念3 3、HTMLHTML 文件结构文件结构4 4、部分的文件标记部分的文件标记（1）标记（2）标记5 5、中的文本格式标记中的文本格式标记导入新课（1）标题标记（2）换行标记（3）段落标记（4）字型标记（5）字符样式标记（6）水平线标记（7）预定义标记（8）特殊符号标记布置作业使用 HTML 设计一个简单的能展示多媒体元素的网站。第第4 4次课程教学方案次课程教学方案周次周次4课时数课时数3教学教学继续讲解 HTML 的使用章节章节教学教学目标目标和要和要求求通过本次课程的学习，熟悉 HTML 语言，并能正确运用 HTML 语言制作简单网页。教学教学列表标记、多媒体元素标记、超链接标记、表格标记、框架标记和表单标记重点重点教学教学多媒体元素标记、表格标记和表单标记难点难点主要主要教学教学方式方式使用使用媒体媒体资源资源作业作业或练或练习习 课堂讲授 小组活动 实验演示 难点答疑 提问 作业讲评 实践教学 考试测验 其他活动 文字教材 电子教案 录像材料 录音材料 直播课堂 CAI 课件 IP 课件 其他资源：正确使用 HTML 语言书写网页。（空白不够可添加附页）板板书书设设计计第第4 4次教学活动设计次教学活动设计教学环节教学环节主要教学内容主要教学内容学生活动学生活动安排安排一、继续学习一、继续学习 HTMLHTML 语言标记的使用语言标记的使用1、列表标记2、多媒体元素标记3、超链接标记4、表格标记5、框架标记6、表单标记导入新课二、通过二、通过 3 3 个实例，分析如何使用个实例，分析如何使用 HTMLHTML 语言制作语言制作实际的复杂网页。实际的复杂网页。布置作业使用 HTML 语言设计一个简单的网站。第第5 5次课程教学方案次课程教学方案周次周次教学教学CSS 样式的使用章节章节教学教学目标目标和要和要求求5课时数课时数3通过本次课程的学习，了解 CSS 基本知识和语法规则，并能正确运用CSS 设置样式。教学教学CSS 样式的设置重点重点教学教学CSS 样式的设置难点难点主要主要教学教学方式方式使用使用媒体媒体资源资源作业作业或练或练习习 课堂讲授 小组活动 实验演示 难点答疑 提问 作业讲评 实践教学 考试测验 其他活动 文字教材 电子教案 录像材料 录音材料 直播课堂 CAI 课件 IP 课件 其他资源：CSS 样式的设置（空白不够可添加附页）板板书书设设计计第第5 5次教学活动设计次教学活动设计教学环节教学环节主要教学内容主要教学内容学生活动学生活动安排安排1 1、简介简介 CSSCSS2 2、CSSCSS 的语法规则的语法规则3 3、CSSCSS 的作用的作用4 4、选择器的定义选择器的定义（1）派生选择器（2）id 选择器（3）类选择器（4）属性选择器5 5、创建创建 CSSCSS（1）外部样式表导入新课（2）内部样式表（3）内联样式表6 6、伪类伪类7 7、滤镜的使用滤镜的使用8 8、CSSCSS 样式样式（1）CSS 背景（2）CSS 文本（3）CSS 字体（4）CSS 链接（5）CSS 列表（6）CSS 表格布置作业使用 CSS 设置样式。第第6 6次课程教学方案次课程教学方案周次周次教学教学讲解 CSS 布局章节章节教学教学目标目标和要和要求求6课时数课时数3通过本次课程的学习，熟悉使用 CSS 对页面进行布局。教学教学框模型、定位重点重点教学教学定位难点难点主要主要教学教学方式方式使用使用媒体媒体资源资源作业作业或练或练习习 课堂讲授 小组活动 实验演示 难点答疑 提问 作业讲评 实践教学 考试测验 其他活动 文字教材 电子教案 录像材料 录音材料 直播课堂 CAI 课件 IP 课件 其他资源：正确使用 HTML 语言书写网页。（空白不够可添加附页）板板书书设设计计第第6 6次教学活动设计次教学活动设计教学环节教学环节主要教学内容主要教学内容学生活动学生活动安排安排1 1、CSSCSS 框模型框模型（1）CSS 框模型概述（2）CSS 内边距（3）CSS 边框（4）CSS 外边距（5）CSS 外边距合并2 2、CSSCSS 定位定位（1）CSS 定位概述（2）CSS 相对定位导入新课（3）CSS 绝对定位（4）CSS 浮动布置作业使用 CSS 对页面进行划分和设计。第第7 7次课程教学方案次课程教学方案周次周次7课时数课时数3教学教学讲解 JAVASCRIPT 基础知识章节章节教学教学目标目标和要和要求求通过本次课程的学习，熟悉JAVASCRIPT语言，并能初步使用JAVASCRIPT语言进行编程。教学教学JAVASCRIPT 的函数和程序设计语句重点重点教学教学JAVASCRIPT 的函数和程序设计语句难点难点主要主要教学教学方式方式使用使用媒体媒体资源资源作业作业或练或练习习 课堂讲授 小组活动 实验演示 难点答疑 提问 作业讲评 实践教学 考试测验 其他活动 文字教材 电子教案 录像材料 录音材料 直播课堂 CAI 课件 IP 课件 其他资源：正确书写 JAVASCRIPT 语句。（空白不够可添加附页）板板书书设设计计第第7 7次教学活动设计次教学活动设计教学环节教学环节主要教学内容主要教学内容学生活动学生活动安排安排1、JAVASCRIPT 简介2、JAVASCRIPT 实现3、JAVASCRIPT 输出4、JAVASCRIPT 语句5、JAVASCRIPT 注释6、JAVASCRIPT 变量7、JAVASCRIPT 数据类型8、JAVASCRIPT 对象导入新课9、JAVASCRIPT 函数10、JAVASCRIPT 运算符11、JAVASCRIPT 比较12、JAVASCRIPT If.Else13、JAVASCRIPT Switch14、JAVASCRIPT For15、JAVASCRIPT While16、JAVASCRIPT Break17、JAVASCRIPT 错误18、JAVASCRIPT 验证布置作业使用 HTML 语言设计一个简单的网站。第第8 8次课程教学方案次课程教学方案周次周次教学教学讲解 JAVASCRIPT HTML DOM、对象和 JS 库章节章节教学教学目标目标和要和要求求8课时数课时数3通过本次课程的学习，熟悉JAVASCRIPT HTML DOM、对象和 JS 库。教学教学DOM、对象的理解重点重点教学教学DOM、对象的理解难点难点主要主要教学教学方式方式使用使用媒体媒体资源资源作业作业或练或练习习 课堂讲授 小组活动 实验演示 难点答疑 提问 作业讲评 实践教学 考试测验 其他活动 文字教材 电子教案 录像材料 录音材料 直播课堂 CAI 课件 IP 课件 其他资源：正确使用 DOM 和 JS 库（空白不够可添加附页）板板书书设设计计第第8 8次教学活动设计次教学活动设计教学环节教学环节主要教学内容主要教学内容学生活动学生活动安排安排1 1、JS HTML DOMJS HTML DOM（1）DOM 简介（2）DOM HTML（3）DOM CSS（4）DOM 事件（5）DOM 节点2 2、JSJS 对象对象（1）JS 对象（2）JS 数字导入新课（3）JS 字符串（4）JS 日期（5）JS 数组（6）JS 逻辑（7）JS 算数（8）JS 正则表达式3 3、JSJS 库库（1）JS 库（2）JS jQuery（3）JS Prototype布置作业正确使用 DOM 和 JS 库第第9 9次课程教学方案次课程教学方案周次周次教学教学XML章节章节教学教学目标目标和要和要求求9课时数课时数3通过本次课程的学习，理解 XML 语言，并能正确使用 XML。教学教学XML 语法、XML 元素、XML 属性、XML 验证、XML 验证器、XML 浏览器重点重点教学教学XML 语法、XML 元素和 XML 属性难点难点主要主要教学教学方式方式使用使用媒体媒体资源资源作业作业或练或练习习 课堂讲授 小组活动 实验演示 难点答疑 提问 作业讲评 实践教学 考试测验 其他活动 文字教材 电子教案 录像材料 录音材料 直播课堂 CAI 课件 IP 课件 其他资源：正确使用 XML。（空白不够可添加附页）板板书书设设计计第第9 9次教学活动设计次教学活动设计教学环节教学环节主要教学内容主要教学内容学生活动学生活动安排安排1 1、XMLXML 基础基础2 2、XMLXML 教程教程3 3、XMLXML 简介简介4 4、XMLXML 用途用途5 5、XMLXML 树结构树结构6 6、XMLXML 语法语法7 7、XMLXML 元素元素8 8、XMLXML 属性属性导入新课9 9、XMLXML 验证验证1010、XMLXML 验证器验证器1111、XMLXML 浏览器浏览器1212、XMLXML 查看查看1313、XML CSSXML CSS1414、XML XSLTXML XSLT布置作业正确使用 XML。第第1010次课程教学方案次课程教学方案周次周次10课时数课时数3教学教学网站的构建、使用和维护章节章节教学教学目标目标和要和要求求通过本次课程的学习，了解网站的构建过程，并能初步掌握网站维护的相关技术。教学教学网站构建、网站维护。重点重点教学教学网站维护难点难点主要主要教学教学方式方式使用使用媒体媒体资源资源作业作业或练或练习习 课堂讲授 小组活动 实验演示 难点答疑 提问 作业讲评 实践教学 考试测验 其他活动 文字教材 电子教案 录像材料 录音材料 直播课堂 CAI 课件 IP 课件 其他资源：无（空白不够可添加附页）板板书书设设计计第第1010次教学活动设计次教学活动设计教学环节教学环节主要教学内容主要教学内容学生活动学生活动安排安排1 1、网站构建、网站构建1.1 网站设计1.2 网络用户1.3 网站标准1.4 网站验证1.5 万维网联盟1.6 网络安全2 2、基本概念、基本概念2.1 域名2.2 主机性能导入新课2.3 电子邮件服务2.4 主机技术2.5 主机数据库2.6 主机类型2.7 图片服务器3、网站的发布与维护3.1 发布网站前的准备3.2 网站的发布3.3 网站的宣传3.4 网站的日常管理和维护布置作业无第第1111次课程教学方案次课程教学方案周次周次11课时数课时数3教学教学实验课（一）：HTML 语言章节章节教学教学目标目标和要和要求求通过本次实验课，使学生熟练掌握 HTML 语言的书写，能制作出具有一定实用性的网页。教学教学掌握各种 HTML 语言的标记。重点重点教学教学正确调试、解决编程中遇到的各种错误。难点难点主要主要教学教学方式方式使用使用媒体媒体资源资源作业作业或练或练习习 课堂讲授 小组活动 实验演示 难点答疑 提问 作业讲评 实践教学 考试测验 其他活动 文字教材 电子教案 录像材料 录音材料 直播课堂 CAI 课件 IP 课件 其他资源：按照要求，制作出三个不同内容的网页。（空白不够可添加附页）板板书书设设计计第第1111次教学活动设计次教学活动设计教学环节教学环节主要教学内容主要教学内容学生活动学生活动安排安排运用所学知识，按照要求，制作出三个网页。运用所学知识，按照要求，制作出三个网页。导入新课布置作业按照要求，制作出三个不同内容的网页。第第1212次课程教学方案次课程教学方案周次周次12课时数课时数3教学教学实验课（二）：CSS、JS 上机实践章节章节教学教学目标目标和要和要求求通过本次实验课，使学生熟练掌握 CSS、JS 语言的书写。教学教学掌握各种 CSS、JS 语言的标记。重点重点教学教学正确调试、解决编程中遇到的各种错误。难点难点主要主要教学教学方式方式使用使用媒体媒体资源资源作业作业或练或练习习 课堂讲授 小组活动 实验演示 难点答疑 提问 作业讲评 实践教学 考试测验 其他活动 文字教材 电子教案 录像材料 录音材料 直播课堂 CAI 课件 IP 课件 其他资源：无（空白不够可添加附页）板板书书设设计计第第1212次教学活动设计次教学活动设计教学环节教学环节主要教学内容主要教学内容学生活动学生活动安排安排运用所学知识，按照要求，制作出三个网页。运用所学知识，按照要求，制作出三个网页。导入新课布置作业无课程教案审核情况课程教案审核情况（新增专业课的教案应由教学系（教研室）主任或课程组负责人签署审核意见）主任/负责人签字：20年月日（新开课教师的教案应报院（系、部）教学委员会审定）院院（系、（系、部）部）教学委员教学委员会审定意会审定意见见教学委员会负责人签字：20年月日（新增专业课和新开课教师的教案均应报教学院长（主任）审批）教学院长（主任）签字：教学单位签章：20年月日教学系教学系（教（教研室）研室）或课或课程组审核程组审核意见意见院院（系、（系、部）部）审批意见审批意见