第一篇:网页制作教案8.
3.3 课堂任务 快速建站技术—模板的应用 课程名称:利用模板快速建站 课时数:4 教学目标: 知识与技能:了解模板的定义,模板的可编辑区域的定义。过程与方法:掌握在网页中创建模板的三种方法;掌握模板的可编辑区域的定义、建立和取消;掌握模板的应用和取消;掌握如何将模板从网页中分离出来;掌握使用模板快速建站;情感与价值观:培养学生主动思考问题的习惯和自主学习的能力。教学重点: 在 DreamWeaver8中创建模板和应用模板。教学难点: 学会模板的可编辑区域的定义、建立和取消。教法: 任务驱动法 学法: 记录关键步骤,积极动手练习。
课前准备: 第三章第三节素材和实例,视频教程:快速建站技术-模板的应用.WMV ,快速建站技 术-模板的应用(快速更新.WMV。
教学过程设计:(一 导入设计: 我们制作一个网站时,会发现许多网页的版面和元素都是相同的,在设计一个新页面 时, 我们还可以用复制原来做过页面来减轻工作量。但是如果一个网站有几
十、上百张页面 都基本相同, 这时修改或更新网页的共同元素如网站标志时, 会发现工作量实在太大!而使 用 Dreamweaver 8.0软件中的模板功能来创建新网页, 可以大大提高更新和修改的工作效率, 网站的维护工作会轻松很多。本节主要内容如下。
(二新课讲解设计:(1请学生带着以下问题阅读 P110~115知识预读,问题如下: A、模板的定义? B、模板创建的三种方式?了解资源面板的使用方式。C、学会模板的可编辑区域的定义、建立和取消;D、学会模板的应用和取消;E、学会如何将模板从网页中分离出来;(2教师提问,请学生一一回答以上问题。期间对回答问题的同学要多多表扬,如“你真 棒”。增强学生对教师的亲和力。
(3教师在学生回答问题的同时,总结评价并补充相关要点。
(4教师展示完成后的模板网站作品,与学生共同讨论分析该网站制作过程。(5教师演示建立模板 , 创建可编辑区域 , 应用模板等部分操作(详见教材任务一。
(6请一位学生上台操作,其他学生完成相同操作。可以参考视频快速建站技术-模板的 应用.wmv。教师巡视指导。
(7教师总结评价学生完成情况。
(8课堂比一比:将学生分组,根据已学知识,美化已完成的网站 , 学习使用模板快速更新 网站的技术。可以参考视频快速建站技术-模板的应用(快速更新.wmv。将作品提交后由学 生评比。(增强学生学习积极性。
(9教师评价各组提交的作品。
(9学生完成任务一对照练习第1、2两题。个别点名回答,检验教学成果。(三小结和作业: 小结:(1 什么是模板?(2 如何创建模板(三种方式
(3 模板的可编辑区域的定义、建立和取消(4 如何应用和取消模板(5 如何将模板从网页中分离出来 作业:(1 填写《任务评价表》并上交
(2 完成任务一第 3题
第二篇:网页制作教案
网页制作与设计教案
第一讲 网页设计概述....................................................................................................................3 1.1WWW和URL.....................................................................................................................3 1.2IE5的使用............................................................................................................................3 1.3 网页中所使用的技术............................................................................................................4 1.4 制作网页的基本方法............................................................................................................4 第二讲 HTML的基本标志与格式标志.......................................................................................4 2.1 HTML文档的基本结构.........................................................................................................5 第三讲 HTML的文本、图片与超级链接标志...........................................................................5 2.2 插入文字................................................................................................................................6 2.3 插入图片................................................................................................................................8 2.4 建立超级链接........................................................................................................................8 第四讲 HTML表格、表单与框架标志.......................................................................................9 2.5 插入表格................................................................................................................................9 2.6 表单的应用..........................................................................................................................10 2.7 框架窗口..............................................................................................................................10 第五讲 HTML标志综合运用案例.............................................................................................11 第六讲 DREAMWEAVER中简单WEB站点建立与管理.....................................................12 3.1 DREAMWEAVER概述............................................................................................................12 第七讲 DREAMWEAVER中静态网页设计.............................................................................13 3.2 在页面中加入文字和图像..................................................................................................14 3.3 超级链接的运用..................................................................................................................14 3.4.表格的应用.........................................................................................................................14 3.5.在网页中创建表单.............................................................................................................15 第八讲 DREAMWEAVER中动态网页设计.............................................................................15 第九讲 DREAMWEAVER综合性网页设计案例.....................................................................16 第十讲 VBSCRIPT概述.............................................................................................................17 4.1 VBSCRIPT语言简介.............................................................................................................17 第十一讲 VBSCRIPT的基本元素与输入输出.........................................................................18 4.2.基本数据类型.......................................................................................................................18 4.2.表达式和运算符.................................................................................................................19 第十二讲 VBSCRIPT的条件语句、循环语句和过程.............................................................20 4.3 VBSCRIPT基本语句.............................................................................................................20
第一讲 网页设计概述
【教学内容】
讲解网页设计的相关术语及网站制作的基本流程。【教学目的】
使学生对网站及网页有一定的认识,激发学生学习网页设计的兴趣。【教学重点】
网页设计中的若干术语。【教学难点】
理解网页设计中的若干术语。【教学方式】
讲授式、讨论式、案例分析式。【教学参考】
1、《网页设计与制作》杨尚森 曲宏山 贾文峰等著 电子工业出版社。
2、《Internet 网页工场》Wittime工作室 重庆出版社。
3、《WEB网站设计》Joel Sklar著 高等教育出版社。
4、《HTML网页制作教程》材义语编著 铁道出版社。【新课内容】
1.1 WWW和URL 1.1.1 Web的起源
Web是World Wide Web的简称,一般也称之为WWW或3W 1.1.2 Web的特点和结构
Web最大的特点是使用了超文本(Hypertext)WWW采用C/S(客户机/服务器)工作模式
在浏览器和服务器之间应用HTTP(Hyper Text Transfer Protocol,超文本传输协议)作为网络应用层通信协议 1.1.3 URL URL的完整格式
协议://主机名或IP地址:端口号/路径名/文件名
1.2 IE5的使用
Web浏览器是浏览Internet资源的客户端软件
在Windows环境下使用的浏览器主要有Internet Explorer、Netscape Navigator、Mosaic等
1.2.1 IE5的界面 1.2.2 IE5的使用
列表标志的使用。【教学方式】
讨论式、案例分析式、练习式。【教学参考】
1、《网页设计与制作》杨尚森 曲宏山 贾文峰等著 电子工业出版社。
2、《WEB网站设计》Joel Sklar著 高等教育出版社。
3、《HTML网页制作教程》材义语编著 铁道出版社。【新课内容】
2.1 HTML文档的基本结构
2.1.1 HTML语法
1、双标记
语法:
<标记>内容标记>
2、单标记 语法:<标记> 最常用的单标记是
3、标记属性 语法
<标记
属性1 属性2 属性3 … > 例子
4、注释语句 格式
例子
2.1.2 HTML文档的基本结构 【课后小结】
通过本次课的学习,要求能熟练掌握网页面的基本标志与格式标志,并能灵活运用 列表,有序列表,无序列表标志及属性。
第三讲 HTML的文本、图片与超级链接标志
【教学内容】
讲解HTML标准中的文本、图片与超级链接标志 【教学目的】
* 使学生了解标题元素,掌握字体,上下标,及特殊字符的标志。
< EM>...... EM>,强调文字,通常用斜体。
< STRONG>...... STRONG >,特别强调的文字,通常用黑体。
......,以等宽体显示西文字符。
......,使文字大小相对于前面的文字增大一级。
......,使文字大小相对于前面的文字减小一级。......,使文字成为前一个字符的上标。......,使文字成为前一个字符的下标。
文本修饰 2.2.7
预格式化文本 使用预格式化标记
不再忽略在此之间的空格、制表符与回车符等元素 2.2.8 转义字符与特殊字符
一般转义符都是以“&”开始,以“;”结束,一个转义符之间不能有空格 2.2.9 文本强制换行和不换行 文本强制换行
不换行
标记
属性:Width,Size,Align,Noshade,color 2.2.11 使用列表
1、无序列表
- 列表条目1
- 列表条目2......
2、有序列表
- 列表条目1
- 列表条目2......
3、定义列表
- 列表条目1
- 条目1的说明
- 列表条目2
- 条目2的说明 ……
...... 2.4.4 图像地图 【课后小结】
本节介绍了在网页中加入文本、图片和超级链接的标志与相应属性,熟练运用这些标志是制作多媒体网页的基础。超级链接标志中,书签链接是一类特殊的链接方式,理解和使用书签链接学习HTML中超级链接标志的难点。
第四讲 HTML表格、表单与框架标志
【教学内容】
讲解HTML中制作表格、表单与框架的标志。【教学目的】
使学生掌握简单表格、表单与框架的制作。【教学重点】
* 表格中单元格的合并以及表格嵌套和叠加操作。* 框架的嵌套使用。* 表单元素标志与属性。【教学难点】
* 理解表格属性rowspan与colspan的含义以及表格嵌套实现的基本思想。* 理解框架属性name、target的意义。
* 理解表单中相应元素对应标志及属性的含义。【教学方式】
案例分析式、项目教学 【教学参考】
1、《网页设计与制作》杨尚森 曲宏山 贾文峰等著 电子工业出版社。
2、《WEB网站设计》Joel Sklar著 高等教育出版社。
3、《HTML网页制作教程》材义语编著 铁道出版社。【新课内容】
2.5 插入表格
2.5.1 在网页中插入表格
表格的基本构成元素:表头,单元格,列,行
第一行第一列 | 第一行第二列 |
第二行第一列 | 第二行第二列 |