当前位置：文档之家 › 动态网页制作教案

动态网页制作教案

  • 格式：doc
  • 大小：2.16 MB
  • 文档页数：43

- -- . 优质专业. 动态网页制作 教 师 授 课 教 案 12多媒体1 班 动态网页制作课程 使用教材：动态网页设计与制作-HTML+CSS+JavaScript 2014 - 2015 学年第 1 学期第 1 星期3第 3、4节 2014年9 月17日 第 1章 html基础 教案容：一，本次课的教学目标；二，容及课时分配；三，重点，难点及处理法； 四，教学过程（也可另用备课纸）；五，教具，课件及挂图；六，作业及辅导； 七，课后小结。

一、教学目标 1 、了解HTML常见元素包含哪些 2、HTML简介，区分网页与HTML，标签元素和属性 二、容 1、HTML简介2、HTML常见元素 三、重点，难点及处理法 重点：运用HTML常见元素 难点：一些特殊元素的运用

四、教学过程 1、引入

打开网页设计作品，让学生们欣赏评价 同学们，大家觉得刚刚展示的网页设计作品怎么样呢？运用了什么软件制作的呢？采用了哪些技巧呢？可以从哪些面做得更好呢？（学生们随机回答） 2、讲授新课

（1）HTML基础 a．网页与HTML HTML 是Hyper Text Markup Language的缩写， 中文翻译为“超文本标记语言”， 是制作网页的最基本语言。 - -- . 优质专业. b．编写及显示HTML文件 使用任一种文本编辑器来编写，如记事本、 写字板等，也可使用任一种编辑HTML文件 的工具软件，如DW和FrontPage。 c. 标签、元素和属性 HTML标签是由一对尖括号<>和标签名称组成。标签分为“起始标签”和“结束标签”两种，二者的标签名称是相同的，只是结束标签多了一个斜杠“/”。 HTML元素是组成HTML文档的最基本的部件，它是用标签来表现的，一般“起始标签”

表示元素的开始，“结束标签”表示元素的结束。 在元素的起始标签中，还可以包含“属性”来表示元素的其他特性，它的格式是：

(2）HTML常见元素 基本结构元素：{HTML 元素、head元素、body元素} 常用块元素： 1、标题类 2、段落类 ● p（段落）元素 ● pre（原样显示文字）元素 ● div（通用块）元素 3、通用属性 最常用的段落块元素： ● id（元素标识）属性 ●title（提示）属性 ● style（CSS样式）属性 ● class（CSS分类）属性 (3)常用列表元素 ul、ol、li - -- . 优质专业. 3、巩固练习 操练课本1.1-1.3案例 五、教具，课件及挂图 所用的教室为多媒体实验室，因此所要板书的容及使用的工具均在计算机上用

PPT课件进行演示。 六、作业及辅导 完成案例1.1-1.3 七、课后小结：本节比较重要，学生掌握情况良好

2014 - 2015 学年第 1 学期第 1 星期4第 3、4节 2014年9 月18日 第1章 html基础及实训1 教案容：一，本次课的教学目标；二，容及课时分配；三，重点，难点及处理法； 四，教学过程（也可另用备课纸）；五，教具，课件及挂图；六，作业及辅导； 七，课后小结。

一、教学目标 1 、了解常见表格、行、表单、特殊元素等 2、通过基础知识的学习完成实训项目1 二、容 （1）常见表格元素 table、tr、td、th(表头) （2）常用行元素 （3）表单元素 （4）一些特殊元素 三、重点，难点及处理法 重点：表格、行、表单、特殊元素 难点：实训项目1

四、教学过程 - -- . 优质专业. 1、引入 （1）上节课已经学习了表格的一部分元素，相信同学们都掌握啦，这节课我们接着学习常见的元素和一些特殊元素。 2、讲授新课 （1）常见表格元素 table、tr、td、th(表头) （2）常用行元素 ● img（图像）元素 ● a（）元素 ● span（通用行）元素 ● sub（下标） ● sup（上标）元素 ● b（粗体） ● i（斜体） br（换行）元素

行元素总是与其前后其他元素保持在同一行中 （3）表单元素 表单控件元素 用于收集用户输入信息

● input（输入框）元素 ● select（下拉框）元素 ● textarea（多行文本输入框）元素 label（表单控件名称）元素 fieldset（表单控件组）元素 （4）一些特殊元素 - -- . 优质专业. 注释元素 meta（描述网页信息）元素 doctype（文档类型的定义）与HTML文档的检验 特殊字符 3、巩固练习 完成实训1 五、教具，课件及挂图 所用的教室为多媒体实验室，因此所要板书的容及使用的工具均在计算机上用

PPT课件进行演示。 六、作业及辅导 根据实训1的完成情况，课上辅导项目

七、课后小结：本节比较重要，学生掌握情况良好 2014 - 2015 学年第 1 学期第 2 星期3 第 3、4节 2014年9月24日 第 2章 CSS基础 教案容：一，本次课的教学目标；二，容及课时分配；三，重点，难点及处理法； 四，教学过程（也可另用备课纸）；五，教具，课件及挂图；六，作业及辅导； 七，课后小结。

一、教学目标 1、掌握css基本语法 2、了解css 特点

二、容 1.图解CSS 2.CSS定义 3.CSS的特点 4.css基本语法 三、重点，难点及处理法 重点：css基本语法和css基本特点 难点：样式表的应用 五、教学过程 - -- . 优质专业. 1、引入 通过实例导入css应用的好处：

2、新课讲授 （1）CSS的定义 CSS是Cascading Style Sheets的缩写，中文为“层叠样式表”。 （2）CSS的特点 CSS通过“样式”来表示网页的颜色、字体、背景色、边框线及网页容的位置及大小尺寸等属性。 （3）css样式表的类型 部、外部、元素中的样式表三种 在网页的标记中应用“样式”，时采用的是“层叠式”原则。 样式是由成对的属性名和属性值 以冒号“：”相间组成。 一系列的“样式”以分号“；” 相间组成为“样式表”。 （4）CSS中的颜色和长度定义 - -- . 优质专业. CSS中的颜色是由红、蓝、绿3种颜色组合而成的， 每一种颜色用数字0至255表示 。

（5）常见的样式属性 （6）定义样式表 对象1, 对象2 …… { 样式表 } 部样式表 ：是将定义样式表的容放在style元素中，并且设置type属性为text/css。然后将style元素放在HTML文档的head元素中。 外部样式表：放在一个文本文件中，一般都是以.css作为扩展名，然后在HTML文档的head元素中插入link元素，通过下属格式将外部样式表文件连接到HTML文档中。

3、巩固练习 - -- . 优质专业. 练习示例2-1、2-2、2-3 五、教具，课件及挂图 所用的教室为多媒体实验室，因此所要板书的容及使用的工具均在计算机上用

PPT课件进行演示。 六、作业及辅导 根据本次练习，课上答疑和辅导 七、课后小结：本节比较重要，学生掌握情况良好

2014 - 2015 学年第 1 学期第 2 星期4 第 3、4节 2014年9月25日 第2章 CSS基础实训 教案容：一，本次课的教学目标；二，容及课时分配；三，重点，难点及处理法； 四，教学过程（也可另用备课纸）；五，教具，课件及挂图；六，作业及辅导； 七，课后小结。

一、教学目标 1 、根据css基本特点和语法规则，应用css练习 2、通过实训项目2，提升css应用水平 二、容 按照实训项目2的要求完成实训任务 三、重点，难点及处理法 重点：认识HTML语法结构 难点：掌握HTML基本标记的使用法

四、教学过程 1、引入

展示实训项目2的作品，激趣导入。 2、讲授新课 （1）调整页面边距、间距、背景色、颜色 （2）加入图片，并调整图片的尺寸等 3、操练 - -- . 优质专业. 请同学们按照实训2的操作步骤，以及提供的素材，完成网页设计。 五、教具，课件及挂图 所用的教室为多媒体实验室，教师需要演示，学生需要操练。

六、作业及辅导 练习过程中，课上答疑和辅导

七、课后小结：本节课是学生操作课，操作效果还不错！

2014 - 2015 学年第 1 学期第3 星期3第3、4节 2014年10 月1日 第3章 CSS实用技巧 教案容：一，本次课的教学目标；二，容及课时分配；三，重点，难点及处理法； 四，教学过程（也可另用备课纸）；五，教具，课件及挂图；六，作业及辅导； 七，课后小结。

一、教学目标 1 、了解css的常用技巧和设计原则 2、运用css进行网页布局设计 二、容 1、CSS的常用技巧 2、CSS用于网页布局设计 3、CSS用于菜单设计 4、CSS其他设计原则 三、重点，难点及处理法 重点：CSS常用技巧 难点：CSS其他设计原则用于网页布局

四、教学过程 1、引入

通过上节课的学习，同学们掌握了哪些CSS设计技巧呢？（问答） 这节课，我们接着学习CSS常见的实用技巧 2、新课讲授

合集下载

《网页设计与制作》教案

《网页设计与制作》教案

《网页设计与制作》教案第一章：网页设计基础1.1 教学目标让学生了解网页设计的基本概念和原则让学生掌握网页设计的流程和方法1.2 教学内容网页设计的概念和定义网页设计的原则和要素网页设计的流程和方法1.3 教学方法讲授法：讲解网页设计的概念和原则实践法：学生动手实践设计简单的网页1.4 教学评价学生能回答出网页设计的概念和定义学生能理解并运用网页设计的原则和要素学生能独立完成简单的网页设计第二章：HTML与CSS基础2.1 教学目标让学生了解HTML和CSS的基本概念和作用让学生掌握HTML和CSS的基本语法和用法2.2 教学内容HTML的基本概念和语法CSS的基本概念和语法HTML和CSS的综合应用2.3 教学方法讲授法：讲解HTML和CSS的基本概念和语法实践法：学生动手实践编写HTML和CSS代码2.4 教学评价学生能回答出HTML和CSS的基本概念和作用学生能理解并运用HTML和CSS的基本语法和用法学生能独立完成简单的HTML和CSS代码编写第三章：网页布局与排版3.1 教学目标让学生了解网页布局和排版的基本原则和方法让学生掌握使用HTML和CSS进行网页布局和排版的技术3.2 教学内容网页布局的基本原则和方法网页排版的基本原则和方法使用HTML和CSS进行网页布局和排版的技术3.3 教学方法讲授法：讲解网页布局和排版的基本原则和方法实践法：学生动手实践进行网页布局和排版3.4 教学评价学生能回答出网页布局和排版的基本原则和方法学生能理解并运用HTML和CSS进行网页布局和排版的技术学生能独立完成具有良好布局和排版的网页设计第四章：网页动画与交互4.1 教学目标让学生了解网页动画和交互的基本概念和原理让学生掌握使用HTML和CSS实现网页动画和交互的技术4.2 教学内容网页动画的基本概念和原理网页交互的基本概念和原理使用HTML和CSS实现网页动画和交互的技术4.3 教学方法讲授法：讲解网页动画和交互的基本概念和原理实践法：学生动手实践实现网页动画和交互4.4 教学评价学生能回答出网页动画和交互的基本概念和原理学生能理解并运用HTML和CSS实现网页动画和交互的技术学生能独立完成具有动画和交互功能的网页设计第五章：网页优化与推广5.1 教学目标让学生了解网页优化和推广的基本概念和方法让学生掌握使用SEO和网络营销技术进行网页优化和推广的技巧5.2 教学内容网页优化的基本概念和方法网页推广的基本概念和方法使用SEO和网络营销技术进行网页优化和推广的技巧5.3 教学方法讲授法：讲解网页优化和推广的基本概念和方法实践法：学生动手实践进行网页优化和推广5.4 教学评价学生能回答出网页优化和推广的基本概念和方法学生能理解并运用SEO和网络营销技术进行网页优化和推广的技巧学生能独立完成具有优化和推广功能的网页设计第六章：网页图像处理与多媒体应用6.1 教学目标让学生了解网页图像处理的基本概念和工具让学生掌握网页图像处理和多媒体应用的技术6.2 教学内容网页图像处理的基本概念和工具（如Photoshop、Fireworks等）多媒体元素在网页中的应用（如音频、视频等）图像和多媒体的HTML和CSS标记6.3 教学方法讲授法：讲解网页图像处理的基本概念和工具实践法：学生动手实践进行网页图像处理和多媒体应用6.4 教学评价学生能回答出网页图像处理的基本概念和工具学生能理解并运用网页图像处理和多媒体应用的技术学生能独立完成具有图像和多媒体应用的网页设计第七章：网页编程技术7.1 教学目标让学生了解网页编程的基本概念和语言让学生掌握常用的网页编程技术和框架7.2 教学内容网页编程的基本概念和语言（如JavaScript、jQuery等）常用的网页编程技术和框架（如Bootstrap、React等）编程实践和项目案例7.3 教学方法讲授法：讲解网页编程的基本概念和语言实践法：学生动手实践进行网页编程和技术应用7.4 教学评价学生能回答出网页编程的基本概念和语言学生能理解并运用常用的网页编程技术和框架学生能独立完成编程实践和项目案例第八章：移动网页设计与制作8.1 教学目标让学生了解移动网页设计的基本概念和原则让学生掌握移动网页设计与制作的技术和工具8.2 教学内容移动网页设计的基本概念和原则移动网页设计与制作的技术和工具（如Responsive Design、Adobe Edge Mobile等）移动网页设计的实践和案例分析8.3 教学方法讲授法：讲解移动网页设计的基本概念和原则实践法：学生动手实践进行移动网页设计与制作8.4 教学评价学生能回答出移动网页设计的基本概念和原则学生能理解并运用移动网页设计与制作的技术和工具学生能独立完成移动网页设计与制作的项目案例第九章：网页项目实战与团队协作9.1 教学目标让学生了解网页项目实战的基本流程和方法让学生掌握团队协作的基本技巧和工具9.2 教学内容网页项目实战的基本流程和方法团队协作的基本技巧和工具（如Git、Project Management Software等）项目案例分析和实战演练9.3 教学方法讲授法：讲解网页项目实战的基本流程和方法实践法：学生分组进行项目实战和团队协作9.4 教学评价学生能回答出网页项目实战的基本流程和方法学生能理解并运用团队协作的基本技巧和工具学生能独立完成项目实战和团队协作的任务第十章：网页设计与制作的未来趋势10.1 教学目标让学生了解网页设计与制作的未来趋势和发展方向让学生掌握前沿技术和创新思维的方法10.2 教学内容网页设计与制作的未来趋势和发展方向（如VR/AR、等）前沿技术和创新思维的方法（如Blockchn、Design Thinking等）创新项目和案例分析10.3 教学方法讲授法：讲解网页设计与制作的未来趋势和发展方向实践法：学生进行创新项目和思维训练10.4 教学评价学生能回答出网页设计与制作的未来趋势和发展方向学生能理解并运用前沿技术和创新思维的方法学生能独立完成创新项目和案例分析重点和难点解析重点环节一：网页设计的概念和原则重点关注学生对网页设计的基本理解，以及如何运用设计原则进行网页创作。

网页设计与制作教案

网页设计与制作教案

[章节名称]：网页设计入门基础[课堂类型]：理论■实训□练习■测试□[学时安排]：2课时[目的要求]1.了解网络的基本知识，网页设计的基础知识，网页的分类，动态网页的原理及技术2.了解网页的基本构成及最简单的html代码3.了解网页设计的流程[重点]了解网页设计的流程，掌握最基本的网页的构成及最简单的网页html代码[难点]掌握最基本的网页的构成及最简单的网页html代码[教法学法]1.采用教授法进行教学讲解，结合疑难点师生互动交流方式进行。

2. 练习采用学生自主安排，教师给与个别辅导的方式进行。

[参考资料]《Dreamweaver CS5网页设计与制作——DIV+CSS版》吴丰,丁欣主编清华大学出版社《动态网页制作教程》（第二版）刘梅彦徐英慧编着清华大学出版社[教学过程]环节一：结合PPT课件的内容，讲解网络和网页的基本知识。

了解网页的分类，网页运行的原理，介绍网页设计的工具，动态网页的技术。

环节二：介绍网页的构成，并对一个网站进行实例分析说明。

编写最简单的html 代码。

环节三：了解网页设计的流程主要有以下几个步骤：一. 网站规划二. 素材资源收集三. 选择开发工具四. 站点建立与规划五. 分模块进行网页设计六. 网页源代码测试与特效添加七. 申请域名与空间八. 网页源代码上传九. 定期的维护环节四：对本节课的内容进行复习，让学生练习html的代码。

并进行疑难解答[章节名称]：html基础与应用1[课堂类型]：理论■实训□练习■测试□[学时安排]：2课时[目的要求]了解html语言的基础知识，结构，掌握html语言设置网页的背景音乐，背景图片，字体的方法。

[重点]Html语言设置网页的背景音乐，图片，字体[难点]Html语言设置网页的方法[教法学法]1.采用教授法进行教学讲解，结合疑难点师生互动交流方式进行。

2. 练习采用学生自主安排，教师给与个别辅导的方式进行。

[参考资料]《Dreamweaver CS5网页设计与制作——DIV+CSS版》吴丰,丁欣主编清华大学出版社《动态网页制作教程》（第二版）刘梅彦徐英慧编着清华大学出版社[教学过程]环节一：复习网页设计的基础知识，介绍如何利用Dreamweaver开发工具，记事本编辑网页的源程序，介绍网页站点的创建及注意事项。

网页制作第一节教案

网页制作第一节教案

【第六章第一节网页制作】教案一、【教学目标】1、理解网页与网站的概念3、掌握页面文件与图片的保存二、【教学重点】三、【难点、关键】1．建站点的位置2．页面文件与图片的保存四、【教学方法】演示、任务驱动法五、【课时安排】3课时六、【教学环境】多媒体教育广播系统，Dreamweaver软件七、【教学过程】第1课时1．导入新课师：上节课已经讲了信息集成（也就是网站建设）的一般过程包括四个阶段，现在请同学们回顾一下。

生：学生作答。

师：同学们平时都有喜欢上网，那大家知道网站与网页的区别吗？概念：网页：通常我们在WWW上所能看到的每一个页面都称之为网页,它能够形象地比喻成一篇文章.网站：网站是多个网页的集合,即由多个网页通过彼此相连而构成的一个整体,能够形象地比喻成一本杂志或一本书.下面我们来学习如何用Dreamweaver这个软件制作网页。

2．新课讲述在制作个人网站之前，应先确定网站的主题。

2008奥运会即将来临，这是中国政治，经济等综合国力提升到另一台阶的盛事，我们中学生也得供献一分锦力本节课的主题是围绕“心系奥运”，资料（包括文字、图片、动画）等我已经为大家收集好，内容分类，网站的结构也规划好了，利用Dreamweaver这个工具来完成“心系奥运”这个网站的建设一、启动Dreamweaver，理解其工作界面“开始”-“程序”-“Macromedia Dreamweaver 8”Dreamweaver工作界面包括：菜单栏插入栏编辑窗口属性面板浮动面板组1．菜单栏（包括10个菜单项）符号所表示的含意黑色命令：表示该命令当前是可用的灰色命令：表示该命令当前是不可用的，需要满足一定的条件后才能使用。

带有复选标记√的命令：表示该命令是一种可选择命令，若前面出现√标记，表示该命令正在使用；若没有√标记时，表示该命令没有被使用。

带有三角形▼的命令：表示在该命令下还有下一级子菜单命令。

带有省略号的…的命令：表示选择命令后会弹出一个相关的对话框。

网页设计与制作案例教程电子教案

网页设计与制作案例教程电子教案

网页设计与制作案例教程-电子教案第一章：网页设计与制作基础知识1.1 网页设计概述介绍网页设计的概念、目的和重要性讨论网页设计的基本原则和最佳实践1.2 网页制作基础介绍HTML、CSS和JavaScript的基本概念和作用讲解如何使用文本编辑器和网页设计软件进行网页制作第二章：网页布局与排版2.1 网页布局概述介绍常见的网页布局类型和特点讲解布局的基本原则和技巧2.2 排版与字体设计介绍排版的基本概念和原则讲解如何选择合适的字体、字号、行距等属性进行排版第三章：网页配色与图标设计3.1 网页配色基础介绍色彩的基本概念和配色原则讲解如何根据网页内容和主题选择合适的配色方案3.2 图标设计介绍图标设计的基本原则和技巧讲解如何制作和选择合适的图标来提升网页视觉效果第四章：网页动画与交互设计4.1 网页动画基础介绍动画的概念和作用讲解如何使用HTML5和CSS3制作简单的网页动画4.2 交互设计介绍交互设计的基本概念和原则讲解如何使用JavaScript和CSS3实现基本的交互效果和功能第五章：网页设计与制作实践案例5.1 案例一：企业官网首页设计分析企业官网首页的设计需求和目标讲解如何使用HTML、CSS和JavaScript制作企业官网首页5.2 案例二：电子商务网页设计分析电子商务网页的设计需求和目标讲解如何使用HTML、CSS和JavaScript制作电子商务网页5.3 案例三：个人博客网页设计分析个人博客网页的设计需求和目标讲解如何使用HTML、CSS和JavaScript制作个人博客网页第六章：响应式网页设计与制作6.1 响应式网页设计概述介绍响应式网页设计的概念和重要性讲解如何使用媒体查询和弹性布局实现响应式设计6.2 移动端网页设计与制作分析移动端网页的设计需求和目标讲解如何使用HTML、CSS和JavaScript制作移动端网页第七章：前端框架与库的应用7.1 前端框架概述介绍前端框架的概念和作用讲解如何使用Bootstrap、Foundation等前端框架加速网页开发7.2 前端库的应用介绍jQuery、React、Vue等前端库的概念和作用讲解如何使用这些前端库来增强网页的功能和交互性第八章：网页设计与制作高级技巧8.1 CSS预处理器介绍Sass、Less等CSS预处理器的概念和作用讲解如何使用CSS预处理器来优化和简化CSS代码8.2 网页性能优化介绍网页性能优化的概念和重要性讲解如何通过代码压缩、缓存策略等手段提高网页加载速度第九章：网页设计与制作项目管理与团队协作9.1 项目管理基础介绍项目管理的基本概念和工具讲解如何在网页设计与制作项目中进行有效的时间管理和资源分配9.2 团队协作与沟通介绍团队协作的基本原则和技巧讲解如何在团队中进行有效的沟通和协作，确保项目的顺利进行第十章：网页设计与制作案例分析与评价10.1 案例分析分析具体网页设计案例的成功因素和不足之处讲解如何评价和吸取网页设计案例的经验教训10.2 作品展示与评价介绍如何展示和评价网页设计作品讲解如何通过用户反馈和数据分析来评估网页设计的成效和改进空间重点和难点解析重点环节1：网页设计原则和最佳实践网页设计原则包括清晰性、简洁性、一致性、可读性、可用性等。