由莲山课件提供http://www.xiexiebang.com/ 资源全部免费
【第六章 第二节 网页制作】教案
一、【教学目标】
1、插入表格，利用表格布局页面
2、插入背景图像，插入图象，对比两者的异同。
二、【教学重点】 利用表格布局
三、【难点、关键】 表中表的使用
四、【教学方法】 演示、任务驱动法
五、【课时安排】1课时
六、【教学环境】多媒体教育广播系统，Dreamweaver软件
七、【教学过程】 1．导入新课
①回顾上节课的学习内容
②小组讨论对比两个网页布局有什么不同？（心系奥运，古玩今玩）
2．新课讲述
1．利用表格布局页面（布局表格和普通表格）操作步骤：
①“插入”/“表格”或者在常用插入栏中的“插入表格”按钮
②在表格对话框中设置插入表格的行数，列数，表格宽度，边框粗细，单元格边距等，③单击“确定”按钮完成表格的创建
（如果要边框显示就设置边框的值，如果不要，就将其设置为0）
表格属性的设置（合并单元格，表格（选中整个表格）、文字的对齐方式（选中单元格）
背景色设置）
利用表中表来布局页面的技巧（参考“心系奥运”的布局方法）
任务一:在”心系奥运”首页分别利用表格布局和普通表格两种方法设计导般条.由莲山课件提供http://www.xiexiebang.com/ 资源全部免费 由莲山课件提供http://www.xiexiebang.com/ 资源全部免费
2．插入图片 背景图片
“修改”/“页面属性”命令弹出“页面属性”对话框，在“分类”列表框中有“外观”中设置，注意使用背景图像的一些方法：①使用小图，图片容量小，方便传输，页面美观 ②色彩淡点，有利于后面的页面制作。插入图片 操作步骤：
①将插入点移到要插入图片的位置，“插入（I）”菜单中的“图像（I）”命令，打开“图像源文件”对话框，如果要插入的图片已经保存在当前的网站中，可以直接在图的列表框中选取，然后单击“确定”按钮。否则，单击“浏览”按钮，从“选择文件”对话框中选择所需图片，单击“确定”按钮，将图片插入到网页中。② 拖动图片到页面左侧适当位置。注意要把图片放到站点下 说明两种图像的不同点
任务二：在首页插入四幅图像,每一幅图像代表一个模块,图象大小设置成”249*48”,后面用文字说明模块的概意
在表格中输放文字
文字编辑是制作网页最基本的操作。在网页编辑窗口中，可以像在Word中一样直接输入文字，进行编辑和排版。
任务三: 在插入的四幅图像后加入文字说明，采用默认的字体和字号，颜色为黑色，居中排列。
八、小结本次课内容
总结本堂课的学习内容，还有，确定各小组期末作品的主题。
由莲山课件提供http://www.xiexiebang.com/ 资源全部免费
网页制作与设计教案
第一讲 网页设计概述....................................................................................................................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>......，强调文字，通常用斜体。
< STRONG>......，特别强调的文字，通常用黑体。
......，以等宽体显示西文字符。
......，使文字大小相对于前面的文字增大一级。
......，使文字大小相对于前面的文字减小一级。......，使文字成为前一个字符的上标。......，使文字成为前一个字符的下标。......，使文字显示为闪烁效果。2.2.6
文本修饰 2.2.7
预格式化文本 使用预格式化标记
不再忽略在此之间的空格、制表符与回车符等元素 2.2.8 转义字符与特殊字符
一般转义符都是以“&”开始，以“；”结束，一个转义符之间不能有空格 2.2.9 文本强制换行和不换行 文本强制换行
不换行 2.2.10 插入水平线 使用
标记
属性：Width，Size，Align，Noshade，color 2.2.11 使用列表
1、无序列表
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 在网页中插入表格
表格的基本构成元素：表头，单元格，列，行
| 第一行第一列 | 第一行第二列 |
| 第二行第一列 | 第二行第二列 | FrameSpacing=“2“
BorderColor=”#008000“ >
2.7.3 子窗口属性设置
2.7.4 常见的框架窗口划分方法（1）标题和正文，分为上下两部分（2）层次结构，分为上中下三部分
（3）目录和标题，分为左上、左下、右三部分
（4）标题、目录和正文，分为上、左下、右下三部分（5）嵌套目录，分为左、右上、右下三部分 2.7.5 不支持框架的网页
