Dreamweaver网页制作教案
认识Dreamweaver
一、学习目的
了解Dreamweaver，学会利用Dreamweaver制作网页。
二、学习内容
Dreamweaver的基本知识。
【学习步骤】
1、Dreamweaver的功能
Dreamweaver可以像普通的字处理软件一样编辑Internet上以HTML格式保存的所有文件，
也就是网页；它支持动态HTML，可以在网页中产生动画；还可以在网页中插入各种插件，以产生特殊效果。
Dreamweaver可用于管理站点，它像文件夹一样创建和打开站点，用不同的方式查看站点中各个网页之间的关系，调整站点的组织结构，使整个站点条理清晰。
2、Dreamweaver的窗口
（1）标题栏
（2）菜单栏
（3）工具栏
（4）视图栏
（5）文件夹列表
（6）工作区
3.网页工作区的三个视图方式选项
它们分别是“普通”、“HTML”“预览”，它们之间的相互切换十分容易实现的。
普通视图方式是Dreamweaver对网页所见即所得编辑方式的最佳体现，在此方式下，可以
像在Word中那样直接进行各种编辑操作，实现网页编辑的所有功能。
HTML视图实际上是一个文本编辑器，其中给出了普通视图方式下所件网页的HTML代码。在这里可以用菜单命令进行复制、粘贴、删除、查找等操作。对于HTML语言中的不同成分均用不同的颜色显示，这样比较容易区分各种语法成分。
为了在制作网页过程中能够随时查看网页的实际效果，Dreamweaver提供了预览视图方式。
4.安装dreameaver的方法
安装及注册
5.关闭dreameaver
6.保存网页的方法
三、小结
Dreamweaver的基本知识
建立一个简单的站点
一、学习目的
了解Dreamweaver，学会利用Dreamweaver制作网页。
二、学习内容
Dreamweaver的基本知识；建立一个简单的站点；进行简单的网页编辑。【学习步骤】
1、创建空白站点。
执行菜单命令“文件”—“新建”—“站点”，就会出现8中站点向导。出于简单，可
选择“空站点”按钮，并在“指定新站点的位置”框中填入站点的位置。在指定新站点的位置后，单击“确定”即建成一个空站点。
2、建立一个简单的文字网页
建立了一个站点之后，就应该在站点中加入网页了。
①创建空白网页
执行菜单命令“文件”—“新建”—“网页”，就会出现一对话框，选择“普通网页”
模板并单击“确定”即建立了一个新的空白页面。
②网页工作区的三个视图方式选项
它们分别是“普通”、“HTML”“预览”，它们之间的相互切换十分容易实现的。
普通视图方式是Dreamweaver对网页所见即所得编辑方式的最佳体现，在此方式下，可以像在Word中那样直接进行各种编辑操作，实现网页编辑的所有功能。
HTML视图实际上是一个文本编辑器，其中给出了普通视图方式下所件网页的HTML代码。在这里可以用菜单命令进行复制、粘贴、删除、查找等操作。对于HTML语言中的不同成分均用不同的颜色显示，这样比较容易区分各种语法成分。
为了在制作网页过程中能够随时查看网页的实际效果，Dreamweaver提供了预览视图方式。
③输入文本
网页中最基本的也是最重要的部分就是网页中由文本构成的内容，因此制作网页首先要从文本输入开始。
3、设置网页中文字的字体、颜色、大小和效果
①在文本开始处按下鼠标左键，不放手拖到结束处，选择要设置的文
本块。
②执行菜单命令“格式—字体”。
③在“字体”对话框中，单击“字体”选项卡。
④在字体选择窗口中，选定所需要的字体，再确定文本的字型、大小、
颜色、效果等。
⑤按“确定”即可。
4、网页编辑
（1）将图片插入网页
（2）将剪贴画插入网页
（3）加入GIF动画
（4）保存嵌入式图形文件
（5）使用图片工具栏
（6）设置图片属性
（7）设置网页背景
（8）设置超链接
（9）应用框架
（10）表单的使用
5、小结
简单站点的建立过程
设计限时自动关闭的网页
一、学习目的
了解Dreamweaver，学会利用Dreamweaver制作网页。
二、学习内容
Dreamweaver的基本知识；用Dreamweaver设计限时自动关闭的网页。
【学习步骤】
设计页面时，经常会从一个页面打开一个子窗口以供浏览者查看。通常，这种子窗口中的内容一经浏览者看过，对于浏览者而言就不再需要，而他们常常会忘记关掉这些小窗口，致使许多的浏览器窗口打开着，耗用大量的资源。因此我们可以将子窗口设计成经过一段时间后可以自动关闭的形式。
1. 在本地站点中生成一个Smlple文件夹。
2. 在Smlple文件夹中，生成名为以及名为的文件。
3. 双击，打开该文档，进入到文档的设计视图窗口中。
4. 单击菜单View/Head Content，显示文档的头部区域。
5. 单击设计视图窗口中的文档头部窗格。选择菜单Insert/Invisible Tags/Script，打开Inset Script对话框。如图所示，在Language下拉列表框中选择javascript选项，并在Coctento文本框中输入“setTimeout("()"，15000)”。单击OK按钮，完成在文档头部插入15秒后自动关闭子窗口的脚本。在代码中，15000表示15000毫秒，也即15秒，也可以根据需要将之修改为自己需要的时间毫秒数。
设置时间
6. 在文档窗口中输入“关闭”字样，在属性面板上的Link文本框中输入“###”，将其设置为一个空链接。
7. 在状态栏左端的快速标记编辑器上，单击标记按钮。选中“关闭”链接，
然后按下Ctrl+T组合键，打开快速标记编辑器，进入到快速标记编辑器的编辑标记模式。然后在“>”前输入“onclick="selfclose()"”。如图所示，设置完毕，单击OK按钮，确认操作。这样在被作为子窗口打开后，单击该链接就可以立刻关闭该子窗口。
8. 保存文件，并退出的Dremweaver窗口。
9. 现在开始设计页面。在本地站点的Smlple文件夹中，双击，打开该文档，进入到文档的设计视图窗口中。
10. 在文档中输入“单击这里打开会自动关闭的子窗口”字样。然后在属性面板上的 Link文本框中输入“###”，将之设置为空链接。
11. 可以通过为该链接应用Open Browser Window行为来设置单击链接时打开窗口，不过更方便的方法是利用快速标识编辑器。方法是首先将插入点放置到链接中，然后在状态栏左端的标识选择器上，单击标识按钮，选中整个链接。然后按下Ctrl+T组合键，打开快速标记编辑器，进入到快速标记编辑器的编辑标识模式。再在“>”前输入“onclick="('',null','width=200px，
height=200px')"”（如图所示）。设置完毕，按下回车键，确认操作。
设置单击链接时打开
12.上述操作就完成了本例的设置。可以单击菜单用File/save，保存所做的工作。然后按下F12键，在浏览器中预览页面效果。
三、小结
用Dreamweaver设计限时自动关闭的网页
用Dreamweaver做会移动的文字
一、学习目的
了解Dreamweaver，学会利用Dreamweaver制作网页。
二、学习内容
Dreamweaver的基本知识；用Dreamweaver做会移动的文字。
【学习步骤】
一、基本语法
文字移动属性的设置：方向 方式 behavior=scroll>啦啦啦，我一圈一圈绕着走！ 循环 速度 对齐方式(Align) 对齐上沿、中间、下沿。 二、小结用Dreamweaver做会移动的文字 用Dreamweaver创建导航条 一、学习目的 了解Dreamweaver，学会利用Dreamweaver制作网页。 二、学习内容 Dreamweaver的基本知识；用Dreamweaver创建导航条。 【学习步骤】 一个网站的不同页面使用了同一导航条。通过统一导航条的方法，我们可以实现网站风格的统一，同时也方便了浏览者在不同页面间的跳转。用Dreamweaver可作出各种比较复杂的导航条。网页上的导航条可由一个或几个部分组成，每个部分均由各种图像构成，可以链接到不同的网页页面。在Dreamweaver中每部分中最多可设四个状态下的图像。一开始是一个初始图像， 当鼠标移动到导航条部位上时则显示另一个图像，还可以设置当鼠标点击后的初始图像，以及鼠标点击后当鼠标再次移动到这个部位上的图像。一般地，每部位只设一到两种状态的图像。因为图像太多了，会影响网页页面的访问、浏览的速度。 导航条制作方法：移动光标到需要导航条的地方，单击主菜单栏的“Insert\Navigation Bar”子命令，或直接单击Objects面板上的图标，弹出“Insert Navigation Bar”对话框，如下图，此时我们可以进行各种设置来实现上述功能： 在“Element Name”项后的文本框填入这个部位的命名，也可以不填，这时Dreamweaver 3将自动给它命名。在Dreamweaver中每部分中最多可设四个状态下的图像：“Up Image”项是该部位的初始图像，在其后文本框填入已准备好的图像的地址，或点击右边Browse按钮来选择。每个部位可只设置Up Image 项，其下的“Over Image”、“Down Image”和“Over While Down Image”三项可以不设置。其中，“Over Image”项是鼠标移动到这个部位上时显示的图像(本例中选择)；“Down Image”项是鼠标点击该部位后显示的初始图像；“Over While Down Image”项是鼠标点击后当鼠标再次移动到这个部位上时显示的图像。注意：Element Name项和 Up Image项是必需的，所有的调用图像都会在系统的提示下保存在Dreamweaver 3文件夹中，以便调用。 三、小结 用Dreamweaver创建导航条 用Dreamweaver创建导航条 一、学习目的 了解Dreamweaver，学会利用Dreamweaver制作网页。 二、学习内容 Dreamweaver的基本知识；用Dreamweaver创建导航条。 【学习步骤】 当然，还可给该部位设置超级链接：在下面的“When Clicked Go To URL”项后文本框填入链接到的文件的地址，或单击Browse按钮选择，当鼠标移动到这个部位上时，在状态栏中可以看到链接到的地址。When Clicked Go To URL 项后有一个下拉选框，这是设置超级链接的目标。 接着是“Options”项，若选中“Preload Images”选框，则浏览者浏览页面时，所有图像将在页面下载的同时全部下载，整个页面打开的速度会慢些，但图像间转换会没有延迟，选中它。反之，不选Preload Images选框，则页面下载的同时只下载初始图像，其它图像按顺序下载，整个页面打开的速度较快，但图像间转换会有延迟。若选中“Show “Down Image”Initially”选框，则将Down Image设为初始图像。此时，Over While Down Image项改为鼠标移动到这个部位上时显示的图像，Up Image项改为鼠标点击该部位后显示的初始图 像，Over image项改为鼠标点击后当鼠标再次移动到这个部位上时显示的图像。 最下面是“ Insert”项，选框中有Horizontally(水平)和Vertically(垂直)两个选项。选中Horizontally为导航条水平展开，选中Vertically 为导航条垂直展开。 Use Table 项，选中后，Dreamweaver自动生成HTML代码将导航条各部位用表格隔开。 当一个部位设置完成后，要添加其他部位，可点击对话框上方的“＋”按钮，可按上面的步骤进行新部位的设置。要删去某一个部位，在“Nav Bar Elements”选框中先选中，再点击对话框上方的“－”按钮即可。 另外，使用设置导航条图像中的高级功能，可改变文档中基于当前按钮下的其他的图像。在默认下,单击导航条中的元素时,所有导航条中元素都会自动地返回原来默认的状态。若想设置被选中图像的上浮或是下沉的不同效果时，可用导航条中的高级功能：在“Behaviors”面板中的“Actions”标签页，单击其上面的“＋”号按钮，在弹出的菜单中选择“Set Nav Bar Image”命令，弹出Set Nav Bar Image 对话框中(见图2)，选择“Advanced”标签页，对高级属性进行设置。其中，若选择“Over Image or over while Down Image”项，则当鼠标划过图片时显示其上面的图片，有上浮或是下沉的效果，并在“Also Set Image”文本框中选择要显示的图片，同时在其下面的“If Down To Image File”中选择当鼠标按下时要显示的图片路径；若选择“Down Image”项，则当浏览者单击所选图像后,显示另外的图片。 图2 存盘后，按F12键测试所作导航条。 三、小结 用Dreamweaver创建导航条 用Dreamweaver创建状态栏 一、学习目的 了解Dreamweaver，学会利用Dreamweaver制作网页。 二、学习内容 Dreamweaver的基本知识；用Dreamweaver创建状态栏。 【学习步骤】 状态栏制作方法： 设置浏览器状态栏中的文本信息,这一功能可在浏览网页面时,在浏览器窗口底下状态栏中显示相关信息。其方法:选择“Behaviors”面板中的Actions 标签页的“Set Text of Status Bar”命令,在弹出的Set Text of Status Bar 对话框中如图3,在“Message”的文本框中输入所在状态栏中显示的文档,按“OK”按钮完成。再用按F12快捷键来测试,可看到其运行的效果。 当然可用JavaScript语言在Message文本框中加入些函数,让文本显示功态的效果。 三、小结 用Dreamweaver创建状态栏 用Dreamweaver的模板创建网页 一、学习目的 了解Dreamweaver，学会利用Dreamweaver制作网页。 二、学习内容 Dreamweaver的基本知识；用Dreamweaver的模板创建网页。 【学习步骤】 1、创建模板页面 最简单的办法是将一个网页另存为模板文件，通过执行命令：File→Save as Template，DreamWeaver会在网站根目录中建立一个模板文件夹——Templates 来保存该模板。 当然，也可以新建一个模板：Window→Templates，会出现的Templates面板，单击右下角的New Template按钮，输入文件名，就建立了一个空模板；再单击Open Template按钮打开该模板，保存后自动存放于网站模板文Templates 中。 新建、打开的模板页面和普通的网页没什么两样，同样可以加入表格、层、图片、动画、脚本，设置页面属性等。 举例：这里以制作一个模板为例来说明。在该页面中，我们希望左侧的网站标识图和底部的导航图出现在每个页面中。其中标识图由两幅图片叠加而成，导航图上的文字“最近更新”、“在线阅读”、“打包下载”等划分成几个热区分别链接到不同的文件，它们在每个页面中都不变。右上部的主页面区和左下角弹出式选单按钮下面的页面说明则各不相同。为了保持页面整洁，我们用表格来布置这些元素。 准确地说它只是一个没有可编辑区域的“准模板”，下面再设定可编辑区域。 2、设定可编辑区域 设定模板可编辑区域，一般来说有两种方法。 新建可编辑区域：选择命令：Modify→Template→New Editable Region。在某一空白区域中单击后执行该命令即可将该区域变为可编辑区域。 标记某一区域为可编辑区域：选择命令：Modify→Template→Mark Selectin as Editable Region。如果某区域已经有一些文字，并且希望在以后新建的超文本文件中部分保留其内容，先选中该区域再执行标记命令即可。 取消可编辑状态：选择命令：Modify→Template→Unmark Editable Region。执行该命令后会弹出一个对话框，其中有当前已有的可编辑区域列表，选中要取消的区域名称，确认即可。 举例：在大片空白区中随便单击一下，执行Modify→Template→New Editable Region命令，在弹出对话框中输入名称：Main；选中左下角本页说明下面的文字，执行Modify→Template→Mark Selectin as Editable Region命令，输入名称：exp。可以看到可编辑区显示为浅蓝色，保存即完成模板制作。 三、小结 用Dreamweaver的模板创建网页 使用模板 一、学习目的 了解Dreamweaver，学会利用Dreamweaver制作网页。 二、学习内容 Dreamweaver的基本知识；用Dreamweaver的模板创建网页。 【学习步骤】 1、根据模板新建页面 命令：File→New From Template。弹出对话框，从模板列表中选取模板，出现的新页面中除可编辑区外均有淡黄色背景，是不能进行修改的部分。空白的Main编辑区可直接进行插入表格、文字、图片等操作，Exp编辑区保留有原来的文字，修改或重新编辑均可。 2、对一个已经有内容的页面应用模板 命令：Modify→Template→Apply Template to Page。选择模板后还会弹出一个对话框，让您选择现有的孤立内容保存到哪个可编辑区域（Choose Editable Region for Orphaned Content）。要是不想保留则可以选择“（none）”。 举例：我们先新建一个普通页面，输入：“CIW电脑工作室”，执行Modify→Template→Apply Template to Page命令，选择模板test，现有内容保存区域选择Main，确认后可看到页面自动变成了模板页的形式，而“CIW电脑工作室”这一行字就出现在主编辑窗口中。 3、更新模板以全面更新站点 基于某一模板建立了一些页面后，对模板进行修改后保存时，就会自动弹出一个对话框，列出所有使用了该模板的页面，询问是否要更新。 另外一种方法是执行Modify→Template→Update Pages命令。从Update Pages对话框中选择一个站点或站点的某一种模板（同一站点中可以使用多个模板），单击右侧的Start按钮，软件会自动搜索与模板相关联的网页并进行更新。非常方便！ 举例：Test模板左侧图形中的“读书破万站”图片是用一个图层叠加在另一幅图片之上的，现在不想要它，同时还想将所有页面中的该图片均删除。就可以打开模板，删除该图层，保存模板，单击右侧的“Update”按钮即可。 注意：新建和使用模板前需定义站点。方法是，执行命令：Site→Define Sites；指定站点名称和本地根目录（Local Root）。模板使用的是相对路径，如果没有指定网站在本地的位置，软件就不能准确找到并保存模板文件；并且应用模板新建和更新页面时，页面中的超链接也不能随页面文件保存位置的不同而相应变化。 三、小结 用Dreamweaver的模板创建网页 用Dreamweaver 中插入背景音乐 一、学习目的 了解Dreamweaver，学会利用Dreamweaver制作网页。 二、学习内容 Dreamweaver的基本知识；用Dreamweaver 中插入背景音乐。 【学习步骤】 一、直接插入法 1.打开一张需要插入背景音乐的网页，在菜单中找到这样的命令： Windows - > Behaviors，调出“Behaviors”行为面板，如下图所示(Dreamweaver MX 的面板)： 2.点击“+”号按钮，选择“play sound”命令，如下图： 如果此命令呈反白色，不可用，请在此命令下拉列表中选择“Show Even For”命令，在此子菜单里选择“ IE 4.0 ”以上的版本，因为IE 以上的版本才支持此种格式的音乐插入方法。 3.此时弹出插入文件窗口，按“Browser”按钮选择音乐文件，当然是要浏览器支持的音乐文件格式(如mid、wav、AIFF、AU) 4.插入之后网页里会显示一个“plugin”插件图标，但我们还需要作进一步的调整。因为 Dreamweaver 自动插入了一段控制代码，方便我们定制激活背景音乐。但此功能不需要用到，那么就要把它删除。代码有两段，分别如下：代码一： 代码二： 5.完成插入，此时的背景音乐还不能自动播放，点选插件图标，按“ctrl + F3”快捷键，调出属性面板，点击右下角的“Parameters”按钮，在弹出的窗口中进行修改，把参数“AutoStart”后面的“Value”缺省值“false”改成“true”（如下图所示），这样就达到打开页面背景音乐就响起的效果。 我们知道，音乐的播放是有时间长短的，如果希望它重复播放，可以把上图中的“Loop”参数值改成“true”。 在 Dreamweaver 中插入背景音乐的几种方法 多次收到喜欢太平洋网络学院的网友的信件，信中提问如何在Dreamweaver 中插入背景音乐，现在让我一次性向大家介绍几种背景音乐的插入方法，让更多的人去掌握它。 6.之前打开删除代码时我们看到了插入音乐的 HTML 标记为 < EMBED > ，为了让大家对它有更加深入的了解，接下来引用一段太平洋网络学院 - > 设计教室 - > HTML 部分中的“HTML语言剖析”中的一段，介绍一下< EMBED >标记的参数： 三、小结 用Dreamweaver 中插入背景音乐 用Dreamweaver 中插入背景音乐 一、学习目的 了解Dreamweaver，学会利用Dreamweaver制作网页。 二、学习内容 Dreamweaver的基本知识；用Dreamweaver 中插入背景音乐。 【学习步骤】 < EMBED > 是用来插入各种多媒体，格式可以是 Midi、Wav、AIFF、AU 等等，Netscape 及新版的 IE 都支持。其参数设定较多。如下： < EMBED src="" autostart="true" loop="true" hidden="true" > src=""设定 midi 档案及路径，可以是相对或绝对。autostart=true是否在音乐档下载完之后就自动播放。true 是，false 否 (内定值)。 loop="true"是否自动反复播放。LOOP=2 表示重复两次，true 是， false 否。HIDDEN="true"是否完全隐藏控制画面，true 为是，no 为否 (内定)。STARTTIME="分:秒"设定歌曲开始播放的时间。如 STARTTIME="00:30" 表示从第30秒处开始播放。VOLUME="0-100"设定音量的大小，数值是0到100之间。内定则为使用系统本身的设定。WIDTH="整数" 和 HIGH="整数"设定控制面板的高度和宽度。(若HIDDEN="no") ALIGN="center"设定控制面板和旁边文字的对齐方式，其值可以是 top、bottom、center、baseline、 left、right、texttop、middle、absmiddle、absbottom CONTROLS="smallconsole"设定控制面板的外观。预设值是 console。 console 一般正常面板 smallconsole 较小的面板 playbutton 只显示播放按钮 pausecutton 只显示暂停按钮 stopbutton 只显示停止按钮 volumelever 只显示音量调节按钮 二、代码法 < BGSOUND >： < BGSOUND > 是用来插入背景音乐，但只适用于 IE，其参数设定不多。 < BGSOUND src="" autostart=true loop=infinite > src="" 《网页制作》教学设计 法、说学法、说教学过程、说板书设计。 一、说教材： (一)教材分析：本节内容是省编《信息技术》全一册第六章 网络与INTERNET基础知识第五节的内容(2000年版为第八章第四节内容，2001、2002版教材第六章第五节内容)。虽然在这一节内容在新版教材变更为拓展模块，但针对现在网络快速发展，广大的学生接触，使用INTERNET的机会也大大增加，学生在使用网络获取信息时，更多的是通过浏览网页这一方式，我认为上好这节课是非常必要的，这对学生进一步认识、使用INTERNET更有益处，同时通过网页制作这一过程也利于学生对计算机常用素材的类型有更深入的了解，在一定程度上也起着培养学生运用综合知识能力作用，所以我认为这节课是非常值得我们去研究上好的，考虑这节课的内容及教法、学法的需要，我把这节分为两课时，第一时：学生自学，自练Word制作网页的基本方法；第二课：让学生自己构思创意一个内容丰富，页面美观的网页。 (二)教学目标：根据对教材的分析及学生实际情况，制定如 下的教学目标： (1)知识目标：1、有关网页文件的说明 2、熟悉用Word制作网页的基本方法 3、超级链接是网页实现互相链接的基本方法 (2)能力目标：1、培养学生的自学能力 2、创意构思能力 3、能制作出具有多重链接、多种素材、内容 丰富的网页。 (3)情感目标：1、教育学生正确认识和理解信息技术相关文 化，伦理和社会问题，负责地使用信息技术。 (三)教学的重、难点：根据对教材的分析及网页制作过程中的 实际情况，我认为要出制作内容丰富的网页，关键是要知 道网页间互相链接的方法，所以我把超级链接做为本节的 Dreamweaver 8 基础代码 HTML基本结构（每个网页都是在基本结构的基础上添加内容的） ---------网页文件开始标签 认识Dreamweaver 一、学习目的 了解Dreamweaver，学会利用Dreamweaver制作网页。 二、学习内容 Dreamweaver的基本知识。 【学习步骤】 1、 Dreamweaver的功能 Dreamweaver可以像普通的字处理软件一样编辑Internet上以HTML格式保存的所有文件， 也就是网页；它支持动态HTML，可以在网页中产生动画；还可以在网页中插入各种插件，以产生特殊效果。 Dreamweaver可用于管理站点，它像文件夹一样创建和打开站点，用不同的方式查看站点中各个网页之间的关系，调整站点的组织结构，使整个站点条理清晰。 2、 Dreamweaver的窗口 （1）标题栏 （2）菜单栏 （3）工具栏 （4）视图栏 （5）文件夹列表 （6）工作区 3.网页工作区的三个视图方式选项 它们分别是“普通”、“HTML”“预览”，它们之间的相互切换十分容易实现的。 普通视图方式是Dreamweaver对网页所见即所得编辑方式的最佳体现，在此方式下，可以 像在Word中那样直接进行各种编辑操作，实现网页编辑的所有功能。 HTML视图实际上是一个文本编辑器，其中给出了普通视图方式下所件网页的HTML代码。在这里可以用菜单命令进行复制、粘贴、删除、查找等操作。对于HTML语言中的不同成分均用不同的颜色显示，这样比较容易区分各种语法成分。 为了在制作网页过程中能够随时查看网页的实际效果，Dreamweaver提供了预览视图方式。 4.安装dreameaver的方法 安装及注册 5.关闭dreameaver 6.保存网页的方法 三、小结 Dreamweaver的基本知识 第一讲网页设计概述 使学生对网站及网页有一定的认识，激发学生学习网页设计的兴趣。 【教学内容】 讲解网页设计的相关术语及网站制作的基本流程。 【教学重点】 网页设计中的若干术语。 【教学难点】 理解网页设计中的若干术语。 【教学方式】 讲授式、讨论式、案例分析式。 【教学参考】 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.3 网页中所使用的技术 1.3.1 HTML语言和XML语言 1、HTML语言 ?HTML只使用SGML中很小一部分标记 ?HTML语言（Hyper Text Markup Language 超文本标记语言） ?HTML是纯文本的语言，其源代码可以用各种文本编辑工具进行编辑，常用的网页制作软件如FrontPage、Dreamweaver等实际上是自动生成HTML源代码的工具 2、XML语言 XML（eXtensible Markup Language） 1.3.2 动态网页 1.3.3 多媒体技术的应用 1.3.4 Web服务器端程序 1.4 制作网页的基本方法 1.4.1 制作网页的基本步骤 1、确定网页的内容 2、设计网页的组织结构 3、资料的收集与整理 4、选择网页的设计方法 1.4.2 制作网页时要注意的问题 1、网页的标题要简洁，明确。 2、在文本中要使用水平线，以分割不同部分。 3、对重点段落要强调显示。 4、网页中插入的图片要尽量的小。 本次课基本信息 教学设计页 教学内容页 8.5练习案例：装修公司 案例操作要点： 1．创建文件名称为index.html的新文档，并将所有样式存放在decoration样式文档中。插入ID名称为container的 课堂任务快速建站技术—模板的应用 课程名称：利用模板快速建站 课时数：4 教学目标： 知识与技能：了解模板的定义，模板的可编辑区域的定义。 过程与方法：掌握在网页中创建模板的三种方法； 掌握模板的可编辑区域的定义、建立和取消； 掌握模板的应用和取消； 掌握如何将模板从网页中分离出来； 掌握使用模板快速建站； 情感与价值观：培养学生主动思考问题的习惯和自主学习的能力。 教学重点： 在DreamWeaver8中创建模板和应用模板。 教学难点： 学会模板的可编辑区域的定义、建立和取消。 教法： 任务驱动法 学法： 记录关键步骤，积极动手练习。 课前准备： 第三章第三节素材和实例，视频教程：快速建站技术－模板的应用.WMV，快速建站技术－模板的应用(快速更新).WMV。 教学过程设计： （一）导入设计： 我们制作一个网站时，会发现许多网页的版面和元素都是相同的，在设计一个新页面时，我们还可以用复制原来做过页面来减轻工作量。但是如果一个网站有几十、上百张页面都基本相同，这时修改或更新网页的共同元素如网站标志时，会发现工作量实在太大！而使用Dreamweaver 软件中的模板功能来创建新网页，可以大大提高更新和修改的工作效率，网站的维护工作会轻松很多。本节主要内容如下。（二）新课讲解设计： （1）请学生带着以下问题阅读P110～115知识预读，问题如下： A、模板的定义？ B、模板创建的三种方式？了解资源面板的使用方式。 C、学会模板的可编辑区域的定义、建立和取消； D、学会模板的应用和取消； E、学会如何将模板从网页中分离出来； （2）教师提问，请学生一一回答以上问题。期间对回答问题的同学要多多表扬，如“你真棒”。增强学生对教师的亲和力。 （3）教师在学生回答问题的同时，总结评价并补充相关要点。 （4）教师展示完成后的模板网站作品，与学生共同讨论分析该网站制作过程。 （5）教师演示建立模板,创建可编辑区域,应用模板等部分操作（详见教材任务一）。 网页制作的教学设计 一、教学目标 1 、知道站点、主页的概念，能在指定位置建立只有一个网页的站点； 2 、认识FRONTPAGE 的界面； 3 、掌握在主页中插入文字、图片、水平线； 4 、掌握页面文件与图片的保存。 二、教学重点 1 、能在指定位置建立只有一个网页的站点（难点） 2 、能在页面中插入文字、图片、水平线 3 、掌握页面文件与图片的保存（难点） 三、学情分析 学生已经学习了WORD 、POWERPOINT 与上网浏览信息，对计算机的基本操作（WORD 中文档的编辑，网页的浏览等）比较熟练。这使得学生主动探索、自主学习成为可能。每位学生必须完成基本任务，有能力的学生还可以完成提高篇的学习，以充分发挥学生的积极性与自主性。 四、教学方法 在教学中，一方面采用比较教学的方法，促进学生知识的迁移；另一方面，提供学生一个导学课件，让学生根据这个网络环境下的课件自己探索学习，以满足不同层次学生的需求。 五、教学过程设计 教师活动：1 、引入课题：（激发兴趣，活跃气氛） 同学们喜不喜欢上网？经常上新浪、西祠胡同等，有没有同学知道新浪、西祠胡同称做什么？（网站） 浏览新浪网站，浏览的第一个页面称为什么？（主页） 我们还可以浏览其它的页面，点击超链接浏览，当鼠标变成手指的形状时有超链接。 问题1 ：网站是不是就是网页？用自己的语言描述一下网站的概念（网站包含多个网页， 通过超链接把不同的页面链接起来） 问题 2 ：网页是不是就是主页？( 第一个页面称为主页, 网站设计者可以确定哪一个是主页, 主页的文件名一般为：index.htm, 主页也是网页) 设计网站一般必须经过两个步骤，首先是在计算机里做好，然后发布在internet 上，让所有的人访问浏览。 今天我们学习用Frontpage 建立站点，制作一个主页。 先来研究一下没有发布的网站, 打开教师做的网站 问：同学们看到了什么？（文件夹） 总结： 可以这样理解网站：在资源管理器里，网站表现为一个文件夹，里面存放的是所有与网站相关的文件。 打开主页，浏览页面，这是老师做的一个导学课件，将帮助大家完成学习任务。 请学生浏览教师课件，了解学习任务 2 、新建站点 FP 的启动 问：与word 比较，有什么不同？ （增加了视图区，编辑区有三个窗口） 总结： 视图区：多种视图模式是为了方便网站的管理。制作网页时，必须在网页视图中编辑页面 普通窗口：鼠标在闪动，可编辑、修改页面，所见即所得的方式 预览窗口：浏览器中出现的效果，与PowerPoint 中的“放映幻灯片”类似。 Html 窗口：编写HTML （超文本标记语言，它是描述网页内容和外观的标准。） 打开导学软件，根据步骤，示范建立只有一个网页的站点，强调新站点的位置、路径的正确输入，站点的名称。 《电子商务网页制作》教学计划 15秋电商这已是学生的第三个学期，对网页制作已有一定了解，然因此课程教科书内容所介绍的软件已不再使用，因而我决定教学生简单、实用、流行的入门网页制作语言——HTML,选择基本的语言让学生学习。同时也利用书上理论知识，传授给学生，并应学生要求，进一步讲解dreamwaver。 教学目标: 1、本学期这一课程是为了让学生学会用html和dreamwaver制作网页。 2、学习关于网页设计的一些基本知识。 重点工作： 1、用html、dreamwaver制作网页。 2、学习网页设计的一些基本知识 教学策略： 1、突出上机操作，精讲多练。 2、将网页设计与学生的生活知识联系起来，其它学科的学习结合起来，与学生思想道德教育结合起来，与课改实验结合起来。 3、作业布置适量，难易适中，有针对性，及时反馈，做好总结。 教学安排： 1、实行上机、上课相结合的模式; 3、坚持考勤，做好学习情况、作业情况的记录。 4、坚持做反思。 教学内容概览： 理论： 1、初识电子商务网页 2、电子商务网站导航设计原则 3、网页布局原则 4、表单的概述 5、课程设计指南 操作： Html: 1、Html基本结构 2、页面主体标记的设置 3、设计网页文本内容 4、无序列表和有序列表 5、文字、图片链接 6、锚点 7、添加图片及设置 8、表格的应用 9、多媒体文件 10、Div标签 11、Iframe 12、让学生设计一个简易的个人网页Dreamweaver: 1、建立所有文件夹 2、建立首页 3、建立站点 4、设置页面属性 . 5、输入文本及其设置 6、插入图片及其设置 7、插入表格及其设置 8、创建网页链接 9、利用表单创建留言板 10、学生设计一个简易网站 班级:15秋电子商务班 任课教师：李美云 项目二 网页制作基础 【项目描述】 中文版Dreamweaver8是目前比较流行的网页制作工具。本项目主要介绍中文版Dreamweaver8的工作窗口及使用方法，以及HTML的基本结构。 【教学目标】 1.安装Dreamweaver8，介绍其工作窗口及使用方法。 2.学会定义本地站点，并讲解规划站点结构的原则，在站点中搭建模拟结构。 3.Html代码的基本结构。 【项目分配】 任务一认识Dreamweaver8。（1课时） 任务二创建本地站点，搭建模拟结构。（2课时） 任务三html代码的基本结构。（2课时） 任务一：认识Dreamweaver8（1课时） 一、教材分析： 中文版dreamweaver8是目前比较流行的网页制作工具。主要介绍中文版dreamweaver8的工作窗口以及其使用方法 二、学情分析： 本班学生都是刚接触到dreamweaver8，对于本节课知识兴趣浓厚，学习积极性高。三、教学目标： 知识目标：初步了解中文版dreamweaver8的工作窗口、工具栏、文档窗口、浮动面板、菜单和辅助设计工具。 情感目标：通过本节课的学习使学生掌握知识的同时，提高他们的自学能力。 能力目标：通过本节课的学习培养学生动手操作能力。 四、教学重点 掌握中文版dreamweaver8的8的工作窗口、工具栏、文档窗口、浮动面板、菜单和辅助设计工具、属性面板和浮动面板显示及使用。 五、教学难点 快捷工具栏的显示及组成、使用，浮动面板的显示与隐藏菜单和辅助设计工具的作用教学方法与过程： （一）导入新课：提问学生对网站的了解，internet网与我们生活的联系及重要性。引发学生思考，带着颖问进入教学课题。 （二）揭示课题：网站大部分都是由Dreamweaver8 制作出来的这节课我们就来“认识Dreamweaver8” （三）教师演示： 1.启动Dreamweaver8从开始菜单启动，出现工作区设置对话框，选择设计器工作区。设计器是标准的工作区。 2.Dreamweaver8工作界面认识Dreamweaver8工作界面，对掌握和提高制作效率是关键的一步。（1）标题栏：左侧有网页标题，所在位置及文件名称，右侧有最小化，最大化 网页设计基础知识 一、认识网页 1.网页分类：静态网页、动态网页 ◆静态网页：是标准的HTML文件，它是采用HTML（超文本标记语言）编写 的，是通过HTTP（超文本传输协议）在服务端和客户端之间传输的纯文本文 件，其扩展名为.html或htm ◆动态网页：在多方面与静态网页是一致的，它们都是无格式的ASCII码文件， 都包含HTML代码，都可以包含用脚本语言（比如JavaScript或VBScript）编 写的程序代码，都存放在Web服务器上，收到客户请求后都会把响应信息发 送给Web浏览器，根据采用Web应用技术不同，动态网页文件的扩展名不同， 如ASP（使用Active Server Pages）技术，其中扩展名为.asp；使用JSP（Java Server Pages）技术时的扩展名为.jsp等等。 2.URL（统一资源定位器，简称网址）：其格式是【协议名://主机名/目录/....../文件名】， 如https://www.wendangku.net/doc/3f15550294.html,；由于网址是最常用的协议是http是默认的协议，所以可当 刮简写为https://www.wendangku.net/doc/3f15550294.html,；ftp://123.52.3.20；， 3.网页（Web Page）：打开网站所看到的网页，一个网站可以有成千上万个网页。 4.主页（Home Page）：打开网站时看到的第一个网页，简称首页。它默认的文件名 通常是index.htm、index.html、default.htm、default.html、default.sap、index.asp等 等 二、网页设计基本原则 1.明确建立网站的目标和用户需求 2.总体设计方案主题鲜明 3.网站的版式设计 4.网页形式与内容相统一 5.三维空间的构成 6.多媒体功能的使用 7.网站测试和改进 8.合理运用新技术 三、网站制作流程 1.选择网站主题 2.规则网站目和目录结构 ◆对收集的资料进行分类，并为其建立专门的栏目，各栏目的主题围绕网站主题 展开，栏目名称具有概括性，各栏目的名称字数最好相同。规划网站栏目的过 程实际上是对网站内容细化，一个栏目有可能就是一个专栏网页。 ◆在创建网站的目录结构时，不要将所有文件都存放一根目录下，需要应该按栏 目为建立文件夹 ◆目录文件命名时，要使用简短的斯文形式，文件名小于8个字符，一律以小写 字母，另外大量的同一类型文件应该是数字序号加以区分，以利于查找。 3.设计网页布局 4.整合网页内容 《网页制作》教学设计（优质课比赛优秀设计）《网页制作》教学设计 一、教材或教学内容分析 本章内容在本教材中的位置处于第五章，是在文字处理(Word2000)和网络基础及因特网应用两章之后。学生所学的文字处理软件Word和将要学习的网页制作软件Frontpage同是Microsoft公司的产品，在软件的使用上有很多的共通之处，所以在学习frontpage的时候，很多内容可以让学生自学，而不必面面俱到地在课上讲授。而第四章网络基础及因特网的应用又为学生对网页的理解奠定了基础，学生对网页中的基本元素——文字、图片、动画、声音等都有所了解，而网页的制作就是将这些元素重新组合到网页上，学生要学的就是这种组合的方法。所以说，虽然大多数学生以前都未接触过网页的制作，但有了以上这些基础，学起来就轻松多了。 本章内容按照学生已有的基础，我对教学内容分了一下类，也为教学的组织工作打下一点基础。本章内容主要由网页基础知识、网站的建立和管理、网页的制作、创建超链接、图片的处理、网页框架。 重点是网页的制作和创建超链接，学会了这些就可以开始简单的网页制作了。 难点是网页框架，这部分相互之间关系比较复杂，必要时，老师在对各组个别辅导时，可以给予分别讲解。 这个分类可以为组长安排各个组员的任务提供参考，使分工更加合理。 二、教学对象的分析 第 1 页共 6 页 信息技术课虽然已经成为初中的必修科目，但是城乡学生之间掌握情况的差异却相当大，条件好一点的初中学生不仅已经熟练掌握了课本上的内容，还对一些常 用软件有所了解;而差一点的可以说是从高中开始才正式接触到信息技术知识的学习，他们需要多锻炼、多指导，所以协作学习对学生的学习帮助很大。 三、教学策略的选择及媒体的使用 在教学策略的选择上，我使用的是任务驱动和协作学习相结合的方法。 任务驱动就是要求本章内容学习完之后，每个小组都要完成自己班级网站的制作，并在全班进行评比，选择最好的作为班级主页挂到学校主页上去，这有助于激发学生参与学习的积极性。 协作学习则是让学生在学习过程中互帮互助，用较短的时间、教少的精力学到更多的东西，完成一个集体项目，让他们在学习之后获得成就感。因此在媒体的选择上，我们使用的是TOP2000系统。TOP2000系统有利于教师进行分组教学和学生作品的点评及成果的展示。教学过程开始之前，教师把学生按座位分成四组，每个组都按学生对计算机的掌握程度平均分配，保证每个组都有计算机操作方面比较突出的，也有相对比较差的，使其形成能够互帮互助的学习小组。并由他们自己选出组长各一名，然后由组长根据组员的情况，确定在班级主页制作过程中主要完成什么任务，也就是说起到一个组织者的作用。做过网页的人都知道，做网页是一项比较费时的工作，而要学生在较短的时间内制作出像样的网页是比较困难的，而在这个过程中，网页的设计占去了相当多的一部分时间，组长把任务分到各组员头上以后，组员就可根据自己要完成的任务相对集中的做某方面的工作，做完以后，组员之间进行经验交流，告诉组员自己的网页是如何制作出来的，在完成自己的网页后，再重复一遍制作过程花费的时间的不多的。这样，其他组员就可在较短的时间之内 第 2 页共 6 页 掌握比较先进的网页制作方法，而不必再花那么多时间去探索。因为每位组员都必 《网页设计与制作》课程教案 一、课程定位 本课程是计算机应用技术专业的一门专业基础课程，该课程的学习能够提升他们对网页制作的兴趣，让他们学习网页制作的基本技能，为后继课程打下基础，同时扩展其就业面，为就业做好准备。 本课程的目的和任务是让学生学会Dreameaver CS6、Flash和Fireworks 的使用方法，并能够使用这3款软件制作出美观实用的网页。 二、课程总目标 掌握网页制作的基本方法和技能，掌握网站建设的流程，能够运用所学知识建设常用的网页和网站，同时能够美化网页，设计人性化、艺术化的网站静态页面部分。 （一）知识目标： 1.熟悉网页制作的基本元素； 2.掌握Dreamweaver CS6软件的基本操作方法； 3.掌握在网页中插入文字、图片、声音、flash等的方法； 4.掌握常见的网页布局方法，学会使用CSS美化网页； 5.掌握在网页中使用表单和制作网页特效的方法； 6.掌握简单图形图像的处理，能够制作符合网页主题的图片和简单动画 并巧妙地和网页中内容搭配起来。 7.掌握建设一个功能相对完善的网站的方法并能制作常用的网站的静 态页面部分。 （二）职业能力培养目标 1. 能够根据网站开发需求，去寻找网页设计和网站开发所需要的文字、 图片、动画、声音、视频等素材并作美化处理； 2．能够制作出符合主题色彩的网页，网页要求美化、被绝大多数浏览 者接受和喜爱； 3.能够设计企业网站、政府门户网站、学校网站等常见网站的基本静态 页面。 （三）素质目标 1.具有勤奋学习的态度，严谨求实、创新的学习精神； 2.具有良好的心理素质和职业道德素质； 3.具有高度责任心和良好的团队合作精神； 4.具有运用理论知识发现问题、分析问题并解决问题的能力，同时能够 不断学习，不断创新，让自己的设计越来越完善，有止于至善的精神。（四）职业技能证书考核要求： 可以根据自身情况考取“全国计算机信息高新技术资格证”，“网页设计制作员”，“网页设计师”等职业技能证书。 三、重点、难点章节及内容 1.重点章节： 1.2 网页、网站相关术语简介 1.6 网站建设的基本流程 2.3 Dreamweaver CS6的工作环境 3.2 创建本地站点 3.4 使用站点 3.5 网页设计中的规范 4.1 网页文件的基本操作 4.3 插入文本 4.4 插入水平线 4.5 插入其他基本元素 4.6 创建列表 5.1 超级链接概述 5.2 创建超级链接 5.3 使用dw制作各种超级链接 实用标准文案 电子教案 课程：第1章网页制作基础 课时内容网页制作基础授课时间学时数2 教学目标了解 HTML 的组成和语法 了解网页制作的常用软件 掌握网页制作软件的启动和退出方法 教学重点网页制作的一些基本知识 教学难点HTML的组成和语法 教学设计1、教学思路：首先，让同学们说说他们对网页的一个认识。然后进行系统地介绍网页 是什么，由哪些部分组成，还有网页制作时所需掌握的一些基础知识和制作网页时 常用到的一些软件。最后学习网页制作软件的启动和退出方法。 2、教学方法：先登录一些常用的网站，让同学们看一些网页，然后让同学们说下他们 度网页的认识，最后才开始讲解本周内容。 3、教学手段：利用多媒体并结合网络进行教学。 4、教学资料及要求：课前要求学生先大致浏览本书内容，对本书所要讲解的内容有个 基本的了解。 教学内容 讨论问题： 1、什么是网页？ 2、网页的基本组成部分是哪些？ 3、网页有什么作用？ 第 1 章网页制作基础# 1.1网页制作基础知识 1.1.1网页简介 1.1.2什么是HTML 1.1.3 HTML 的组成结构及语法 1.1.4应用举例——使用记事本编写网页 1.2网页制作的常用软件 1.2.1图形图像处理软件 1.2.2动画制作软件 1.2.3网页布局软件 1.2.4软件配合及制作流程 1.2.5应用举例——实战网页制作流程 1.3网页制作软件的启动与退出 1.3.1网页制作软件的启动 1.3.2文件的打开 1.3.3网页制作软件的退出 1.3.4应用举例——启动并退出 Photoshop CS3 1.4上机及项目实训 1.4.1Flash CS3 的启动与退出 1.4.2制作“蓝莲花”网页 《简单网页制作》教学设计 一、设计意图： 目前网络对学生的吸引力很大，学生上网都会浏览网页内容，对网页的制作也有很大的兴趣，想知道一个网页是怎样制作成功的。但是网页的制作相对复杂，对于一些的代码的编辑学生也较难理解，因此本课选择了FrontPage网页制作工具，引导学生简单的了解网页制作的过程，采用了所见即所得的形式避开代码的繁琐，调动学生自行设计的积极性，对网页制作有一个简单的入门了解。 二、教学目标 1、知识目标 （1）理解网页制作的简单步骤。 （2）学会用FrontPage的制作简单网页。 2、技能目标 （1）掌握的FrontPage的背景添加的操作。 （2）掌握FrontPage的文字编辑、艺术字、图片的插入的操作。 （3）知道HTML的简单编码。 3、情感目标 （1）培养学生的口头表达能力、操作和分析概括能力。 （2）培养学生展示自我、表现自我的能力。 （3）培养学生独立思考问题、解决问题的能力和团结协作精神。 （4）在网页制作的过程中，提高学生对FrontPage的认识。三、重难点、问题预测及对策 1、重难点 （1）重点：FrontPage的基本操作。 （2）难点：HTML的理解。 2、问题预测 本节课是网页制作的第一节内容，需要学生掌握的技能并不困难。由于在学习网页制作的过程中，需要培养学生的制作网页的积极性，才能引发学生对网页制作的兴趣，实现自主学习，自主开发。 3、对策 以制作班级自己的主页引起学生注意，引发学生的兴趣。让学生运用FrontPage的插入、背景修改等工具，通过作品展示激发学生的动力。 在教学过程的设计上，通过自主设计自己的个人主页来达到解决一个个知识点的目的，同时通过学生自己创作，引导学生正确的审美情趣和创作激情。 四、课前准备 精美网站、优秀班级主页、素材图片等。 五、教学流程 1、情感导入：通过优秀班级主页欣赏，引发学生兴趣，跃跃欲试。 2、自主学习：引导学生做自己班级的主页。 3、示范教学：学生归纳总结，老师帮助、提醒，使学生掌握正确的操作步骤。 [章节名称]：网页设计入门基础 [课堂类型]：理论■实训□练习■测试□ [学时安排]：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开发工具，记事本编辑网页的源程序，介绍网页站点的创建及注意事项。 环节二：讲解html语言的结构，特点，设置网页页面的背景音乐，图片，字体1. 设置背景颜色 网页制作教案 IMB standardization office【IMB 5AB- IMBK 08- IMB 2C】 课堂任务快速建站技术—模板的应用 课程名称：利用模板快速建站 课时数：4 教学目标： 知识与技能：了解模板的定义，模板的可编辑区域的定义。 过程与方法：掌握在网页中创建模板的三种方法； 掌握模板的可编辑区域的定义、建立和取消； 掌握模板的应用和取消； 掌握如何将模板从网页中分离出来； 掌握使用模板快速建站； 情感与价值观：培养学生主动思考问题的习惯和自主学习的能力。 教学重点： 在DreamWeaver8中创建模板和应用模板。 教学难点： 学会模板的可编辑区域的定义、建立和取消。 教法： 任务驱动法 学法： 记录关键步骤，积极动手练习。 课前准备： 第三章第三节素材和实例，视频教程：快速建站技术－模板的应用.WMV，快速建站技术－模板的应用(快速更新).WMV。 教学过程设计： （一）导入设计： 我们制作一个网站时，会发现许多网页的版面和元素都是相同的，在设计一个新页面时，我们还可以用复制原来做过页面来减轻工作量。但是如果一个网站有几十、上百张页面都基本相同，这时修改或更新网页的共同元素如网站标志时，会发现工作量实在太大！而使用Dreamweaver 软件中的模板功能来创建新网页，可以大大提高更新和修改的工作效率，网站的维护工作会轻松很多。本节主要内容如下。 （二）新课讲解设计： （1）请学生带着以下问题阅读P110～115知识预读，问题如下： A、模板的定义？ B、模板创建的三种方式？了解资源面板的使用方式。 C、学会模板的可编辑区域的定义、建立和取消； D、学会模板的应用和取消； E、学会如何将模板从网页中分离出来； （2）教师提问，请学生一一回答以上问题。期间对回答问题的同学要多多表扬，如“你真棒”。增强学生对教师的亲和力。 （3）教师在学生回答问题的同时，总结评价并补充相关要点。 （4）教师展示完成后的模板网站作品，与学生共同讨论分析该网站制作过程。（5）教师演示建立模板,创建可编辑区域,应用模板等部分操作（详见教材任务一）。（6）请一位学生上台操作，其他学生完成相同操作。可以参考视频快速建站技术－模板的应用.wmv。教师巡视指导。 （7）教师总结评价学生完成情况。 第13章创建表单网页 一、填空题 1、文本域等表单对象都必须插入到（）中，这样浏览器才能正确处理其中的数据。 正确答案：表单 2、按钮的【属性】面板提供了按钮的3种动作，即（）、重置表单和无。 正确答案：提交表单 3、（）用于在表单中插入一幅图像，代替标准按钮的工作。 正确答案：图像域 4、Dreamweaver CS3新增功能中的Spry框架提供了4个验证表单构件：（）、Spry验证文本区域、Spry验证复选框和Spry验证选择。 正确答案：Spry验证文本域 5、在Dreamweaver CS3中可以使用【（）】行为对表单进行基本的验证。 正确答案：检查表单 二、选择题 1、选择主菜单中的【插入记录】/【表单】/【表单】将在文档中插入一个表单域，下面关于表单域的描述正确的是（）。 A、表单域的大小可以手工设置 B、表单域的大小是固定的 C、表单域会自动调整大小以容纳表单域中的元素 D、表单域的红色边框线会显示在页面上 正确答案：C 2、关于文本域的说法错误的是（）。 A、在【属性】面板中可以设置文本域的字符宽度 B、在【属性】面板中可以设置文本域的字符高度 C、在【属性】面板中可以设置文本域所能接受的最多字符数 D、在【属性】面板中可以设置文本域的初始值 正确答案：B 3、在表单对象中，（）在网页中一般不显现。 A、隐藏域 B、文本域 C、文件域 D、文本区域 正确答案：A 4、使用（）可以在页面中显示一个圆角矩形框，将一些相关的表单元素放在一起。 A、文本域 B、表单 C、文本区域 D、字段集 正确答案：D 5、下面不能用于输入文本的表单对象是（）。 A、文本域 B、文本区域 C、密码域 D、文件域 正确答案：D 三、问答题 1、列举常规表单对象和Spry验证表单对象有哪些？ 答：常规表单对象主要有表单、文本域、文本区域、单选按钮、复选框、列表／菜单、跳转菜单、图像域、文件域、隐藏域、字段集、标签、按钮等，Spry验证表单对象主要有Spry 验证文本域、Spry验证文本区域、Spry验证复选框和Spry验证选择。 第2章规划、创建和管理站点 一、填空题 1、【站点定义】对话框包括【基本】和【（）】两种状态。 正确答案：高级 2、通过【站点】／【（）】命令可打开【管理站点】对话框对站点进行编辑。 正确答案：管理站点 3、在Dreamweaver中，可以通过设置【（）】来定义Dreamweaver的使用规则。 正确答案：首选参数 4、新建文档默认的扩展名可以通过【首选参数】对话框的【（）】分类来设置。 正确答案：新建文档 二、选择题 1、下列关于网站规划的说法错误的是（）。 A、网站必须有一个明确的主题 B、网站栏目设置要合理 C、网站推广一定发生在网站发布之后 D、网站必须有自己的风格 正确答案：C 2、新建网页文档的快捷键是（）。 A B C D 正确答案：B 3、是否允许使用 的（ A、常规 B、不可见元素 C、复制/粘贴 D、新建文档 正确答案：A 4、关于【首选参数】对话框的说法，错误的是（）。 A、可以设置是否显示欢迎屏幕 B、可以设置是否允许输入多个连续的空格 C、可以设置是否使用CSS而不是HTML标签 D、可以设置默认文档名 正确答案：D 三、问答题 1、常见的网页布局类型有哪些？ 常见的网页布局类型有“国”字型、“匡”字型、“三”字型、“川”字型、标题文本型、框架型、封面型和Flash型等。 2、举例说明通过【首选参数】对话框可以设置Dreamweaver的哪些使用规则。 答：在Dreamweaver中可以通过设置【首选参数】来定义Dreamweaver的使用规则。例如，在Dreamweaver CS3启动时是否显示欢迎屏幕，在文本处理中是否允许输入多个连续的空格，在定义文本或其他元素外观时是使用CSS标签还是使用HTML标签，不可见元素是否显示，新建文档默认的扩展名是什么等。 四、操作题 网页设计和发布流程 第一步是对站点进行规划 第二步是创建站点的基本结构 第三步即可开始具体的网页创作过程 最后一步是站点的发布 第一节站点的规划与创建 【教学目的与要求】 一、规划站点 二、创建一个站点 【教学方法与手段】 多媒体教学：借助多媒体手段，进行课堂理论教学； 启发式教学：教学活动关注的重点从结果转向过程。激发思维，师生互动，增强学生学习的主动性、积极性和创造性； 【教学重点与难点】： 基础知识：规划站点 重点知识：创建一个站点 2课时 【教学组织过程】2课时 1．上讲回顾 2．教授新知 【授课内容】 一、规划站点 Web站点是一组具有共享属性（如相关主题、类似的设计或共同目的等）的链接文档。 本地站点：是本地硬盘中存放远程网站所有文档的地方（文件夹）。 建立网站的通常做法是：在要地硬盘中建立一个文件夹用来存放网站的所有文件，往后就在该文件夹中创建和编辑文档。待网页设计和测试好之后，再把它们拷贝到网站上供浏览者浏览。 1、规划站点结构 注：规划站点的结构之前应先用笔绘出站点的结构图（如下图所示是一个典型的学校站点的结构图） 2、规划站点的浏览机制 一般可采用以下的方法： ●创建返回主页的链接 ●显示网站专题目录 ●显示当前位置 ●搜索和索引 ●反馈（将网页创作者或网站管理员公布在网页上，或创建一个E-MAIL超级链接，以使用户能快速地将信息反馈到网站中） 二、创建一个站点 步骤： 1、单击“文件”---“新建”---“站点”命令（或单击常用工具栏中“新建网页”按钮的下拉箭头，从打开的下拉菜单中选择“站点”命令） 2、选择一种站点模板或向导 3、单击“确定”按钮 三、站点的基本操作 1、打开站点：“文件”---“打开站点” 2、删除站点： 方法一：在Windows资源管理器中删除一个站点 方法二：在FrontPage中删除站点，在“文件夹”视图或“网页”视图的“文件夹列表”中，右击站点所对应的目录，在快捷菜单中单击“删除”命令 3、站点的设置 “工具”----“站点设置”，有“常规”、“参数”、“高级”、“语言”、“导航”、“数据库”六个选项卡 【课程小结】 【作业】 1．5 课后练习书本课后练习作业 高中信息技术教案：网页制作第1章计算机网络基础 总累计第1课时 课课题题 第1节 计算机网络基础知识 课课题型 综合课 教学目的 、了解计算机网络的分类及其系统构成；2、懂得计算机网络的基本应用；3、掌握Internet的基础知识。 教学重点 、计算机网络系统构成；2、网络地址及域名形式。 教学难点 、TcP/IP网络协议；2、统一资源定位器（URL） 教学用具 多媒体电脑 教学方法 讲述法、多媒体教学法、练习法 课时安排 共2课时第1课时 教学过程I、引言：我们生活在一个信息社会里，时刻需要获取和交换信息。例如，各商业银行的总行要收集各业务点每天的资金情况，铁道部门要及时了解每一辆火车的运行状况等，这些数量极为庞大的信息怎样才能方便、快捷地传输呢？而计算机网络技术能很好地解决这个难题。那么，究竟什么是计算机网络，计算机网络又有什么用呢？ II、讲授新课一、计算机网络及其分类1、计算机网络基础?1)概念：凡是将分布在不同地理位置上的具有独立功能的多台计算机系统，用通信设备和通信线路连接起来，再配有相应的支撑软件，以实现计算机之间的相互通信、资源共享的系统，称为计算机网络。作用：①资源共享②集中管理和分布处理③远程通信2、计算机网络分类（按通信距离分）：①局域网②城域网③广域网④互联网二、计算机网络系统构成1、硬件系统：①服务器②工作站③网卡④调制解调器（卡④）⑤集线器⑥交换机⑦传输介质e2、软件系统?1)网络系统软件：windowsXX indowsN、、Uni网络应用软件：电子邮件软件、浏览器软件、网络教学软件3、网络信息：在计算机上存储、传输的信息称为网络信息，是计算机网络中最重要的资源。 III、练习、作业、预习①什么是计算机网络？它主要分为哪几类？②计算机网络软件系统包括哪些？③预习：Internet网络基础。《网页制作教学设计》教案
dw网页制作基础代码
加粗：... 倾斜：... 滚动字幕: 滚动标签：marquee 最简表达： 滚动的属性： Direction--表示滚动的方向，值可以是left，right，up，down，默认为left Behavior--表示滚动的方式，值可以是scroll（连续滚动）slide（滑动一次）alternate（来回滚动）Dreamweaver网页制作教案
网页设计——网页设计概述教案
《电子商务网站设计与制作》教案28
网页制作教案
网页制作的教学设计
电子商务网页制作 教学计划
网页制作电子教案项目备课
Dreamweaver网页设计基础知识
《网页制作》教学设计(优质课比赛优秀设计)
《网页设计与制作》课程教案设计
网页设计与制作电子教案
简单网页制作教学设计
网页设计与制作教案46186
网页制作教案
Dreamweaver CS3网页制作基础教程第13章习题答案
Dreamweaver CS3网页制作基础教程第2章习题答案
网页设计与制作教案免费学技术改变生活
高中信息技术教案：网页制作