dreamweaver全套教案

《dreamweaver全套教案》由会员分享，可在线阅读，更多相关《dreamweaver全套教案（39页珍藏版）》请在金锄头文库上搜索。

1、课题课题 认识认识 Dreamweaver一、学习目的一、学习目的 了解 Dreamweaver，学会利用 Dreamweaver 制作网页。 二、学习内容二、学习内容 Dreamweaver 的基本知识。 【学习步骤学习步骤】 1、 Dreamweaver 的功能 Dreamweaver 可以像普通的字处理软件一样编辑 Internet 上以 HTML 格式保 存的所有文件， 也就是网页；它支持动态 HTML，可以在网页中产生动画；还可以在网页中插 入各种插件，以产生特殊效果。 Dreamweaver 可用于管理站点，它像文件夹一样创建和打开站点，用不同 的方式查看站点中各个网页之间的关系，

2、调整站点的组织结构，使整个站点条 理清晰。 2、 Dreamweaver 的窗口 （1） 标题栏 （2） 菜单栏 （3） 工具栏 （4） 视图栏 （5） 文件夹列表 (6)工作区 3.网页工作区的三个视图方式选项 它们分别是“普通” 、 “HTML” “预览” ，它们之间的相互切换十分容易实现 的。 普通视图方式是 Dreamweaver 对网页所见即所得编辑方式的最佳体现，在 此方式下，可以 像在 Word 中那样直接进行各种编辑操作，实现网页编辑的所有功能。 HTML 视图实际上是一个文本编辑器，其中给出了普通视图方式下所件网 页的 HTML 代码。在这里可以用菜单命令进行复制、粘贴、删除

3、、查找等操作。 对于 HTML 语言中的不同成分均用不同的颜色显示，这样比较容易区分各种语 法成分。 为了在制作网页过程中能够随时查看网页的实际效果，Dreamweaver 提供 了预览视图方式。 4.安装 dreameaver 的方法安装及注册 5.关闭 dreameaver 6.保存网页的方法3、小结、小结课题课题 建立一个简单的站点建立一个简单的站点一、学习目的一、学习目的 了解 Dreamweaver，学会利用 Dreamweaver 制作网页。 二、学习内容二、学习内容 Dreamweaver 的基本知识；建立一个简单的站点；进行简单的网页编辑。【学习步骤学习步骤】 1、创建空白站点

4、。 执行菜单命令“文件”“新建”“站点” ，就会出现 8 中站点向导。出于简 单，可 选择“空站点”按钮，并在“指定新站点的位置”框中填入站点的位置。在指 定新站点的位置后，单击“确定”即建成一个空站点。 2、建立一个简单的文字网页 建立了一个站点之后，就应该在站点中加入网页了。 创建空白网页执行菜单命令“文件”“新建”“网页” ，就会出现一对话框，选择 “普通网页” 模板并单击“确定”即建立了一个新的空白页面。 网页工作区的三个视图方式选项它们分别是“普通” 、 “HTML” “预览” ，它们之间的相互切换十分容易实现 的。 普通视图方式是 Dreamweaver 对网页所见即所得编辑方式的

5、最佳体现，在 此方式下，可以 像在 Word 中那样直接进行各种编辑操作，实现网页编辑的所有功能。 HTML 视图实际上是一个文本编辑器，其中给出了普通视图方式下所件网 页的 HTML 代码。在这里可以用菜单命令进行复制、粘贴、删除、查找等操作。 对于 HTML 语言中的不同成分均用不同的颜色显示，这样比较容易区分各种语 法成分。 为了在制作网页过程中能够随时查看网页的实际效果，Dreamweaver 提供 了预览视图方式。 输入文本网页中最基本的也是最重要的部分就是网页中由文本构成的内容，因此制 作网页首先要 从文本输入开始。 3、设置网页中文字的字体、颜色、大小和效果 在文本开始处按下鼠标

6、左键，不放手拖到结束处，选择要设置的文本块。 执行菜单命令“格式字体” 。 在“字体”对话框中，单击“字体”选项卡。 在字体选择窗口中，选定所需要的字体，再确定文本的字型、大小、颜色、效果等。 按“确定”即可。4、 网页编辑 （1） 将图片插入网页 （2） 将剪贴画插入网页 （3） 加入 GIF 动画 （4） 保存嵌入式图形文件 （5） 使用图片工具栏 （6） 设置图片属性 （7） 设置网页背景 （8） 设置超链接 （9） 应用框架 （10） 表单的使用5、小结、小结课题课题 设计限时自动关闭的网页设计限时自动关闭的网页一、学习目的一、学习目的 了解 Dreamweaver，学会利用 Drea

7、mweaver 制作网页。 二、学习内容二、学习内容 Dreamweaver 的基本知识；用 Dreamweaver 设计限时自动关闭的网页。 【学习步骤学习步骤】 设计页面时，经常会从一个页面打开一个子窗口以供浏览者查看。通常，这 种子窗口中的内容一经浏览者看过，对于浏览者而言就不再需要，而他们常常 会忘记关掉这些小窗口，致使许多的浏览器窗口打开着，耗用大量的资源。因 此我们可以将子窗口设计成经过一段时间后可以自动关闭的形式。 1. 在本地站点中生成一个 Smlple 文件夹。 2. 在 Smlple 文件夹中，生成名为 Index.html 以及名为 firstpage.html 的 文件

8、。3. 双击 Index.html，打开该文档，进入到文档的设计视图窗口中。4. 单击菜单 View/Head Content，显示文档的头部区域。5. 单击设计视图窗口中的文档头部窗格。选择菜单 Insert/Invisible Tags/Script，打开 Inset Script 对话框。如图所示，在 Language 下拉列表框中选择 javascript 选项，并在 Coctento 文本框中输入“setTimeout(“self.close()“，15000)”。单击 OK 按钮，完成在文档头部插入 15 秒后自动关闭子窗口的脚本。在代码中，15000 表示 15000 毫秒，也即

9、 15秒，也可以根据需要将之修改为自己需要的时间毫秒数。设置时间6. 在文档窗口中输入“关闭”字样，在属性面板上的 Link 文本框中输入“#”，将其设置为一个空链接。5 5、小结、小结课题课题 设计限时自动关闭的网页设计限时自动关闭的网页一、学习目的一、学习目的 了解 Dreamweaver，学会利用 Dreamweaver 制作网页。 二、学习内容二、学习内容 Dreamweaver 的基本知识；用 Dreamweaver 设计限时自动关闭的网页。 【学习步骤学习步骤】7. 在状态栏左端的快速标记编辑器上，单击标记按钮。选中“关闭”链接，然后按下 Ctrl+T 组合键，打开快速标记编辑器，

10、进入到快速标记编辑器的编辑标记模式。然后在“”前输入“onclick=“selfclose()“”。 如图所示，设置完毕，单击 OK 按钮，确认操作。这样在 Index.html 被作为子窗口打开后，单击该链接就可以立刻关闭该子窗口。8. 保存 Index.html 文件，并退出 index.html 的 Dremweaver 窗口。9. 现在开始设计 fristpage.html 页面。在本地站点的 Smlple 文件夹中，双击 fristpage.html，打开该文档，进入到文档的设计视图窗口中。10. 在文档中输入“单击这里打开会自动关闭的子窗口”字样。然后在属性面板上的 Link 文本

11、框中输入“#”，将之设置为空链接。11. 可以通过为该链接应用 Open Browser Window 行为来设置单击链接时打开 Index.html 窗口，不过更方便的方法是利用快速标识编辑器。方法是首先将插入点放置到链接中，然后在状态栏左端的标识选择器上，单击标识按钮，选中整个链接。然后按下 Ctrl+T 组合键，打开快速标记编辑器，进入到快速标记编辑器的 编辑标识模式。再在“”前输入“onclick=“window.open(index.html,null,width=200px，height=200px)“”（如图所示）。设置完毕，按下回车键，确认操作。设置单击链接时打开12.上述操作

12、就完成了本例的设置。可以单击菜单用 File/save，保存所做的工作。然后按下 F12 键，在浏览器中预览页面效果。1313、小结、小结课题课题 用用 DreamweaverDreamweaver 做会移动的文字做会移动的文字一、学习目的一、学习目的 了解 Dreamweaver，学会利用 Dreamweaver 制作网页。 二、学习内容二、学习内容 Dreamweaver 的基本知识；用 Dreamweaver 做会移动的文字。 【学习步骤学习步骤】 一、基本语法一、基本语法 . 啦啦啦，我会移动耶！ 文字移动属性的设置：方向方向 #=left, right 啦啦啦，我从右向左移！ 啦啦啦

13、，我从左向右移！ 方式方式 #=scroll, slide, alternate 啦啦啦，我一圈一圈绕着走！ 啦啦啦，我只走一次就歇了！ 啦啦啦，我来回走耶！ 循环循环 #=次数；若未指定则循环不止(infinite) 啦啦啦，我只走 3 趟哟！ 啦啦啦，我只走 3 趟哟！啦啦啦，我只走 3 趟哟！ 速度速度 啦啦啦，我走得好快哟！ 对齐方式对齐方式(Align)(Align) #=top, middle, bottom 啦啦啦，我会移动耶！对齐上沿、中间、下沿。2 2、小结、小结课题课题 用用 DreamweaverDreamweaver 创建导航条创建导航条一、学习目的一、学习目的 了解

14、Dreamweaver，学会利用 Dreamweaver 制作网页。 二、学习内容二、学习内容 Dreamweaver 的基本知识；用 Dreamweaver 创建导航条。 【学习步骤学习步骤】 一个网站的不同页面使用了同一导航条。通过统一导航条的方法，我们可以 实现网站风格的统一，同时也方便了浏览者在不同页面间的跳转。用 Dreamweaver 3 可作出各种比较复杂的导航条。网页上的导航条可由一个或几个 部分组成，每个部分均由各种图像构成，可以链接到不同的网页页面。在 Dreamweaver 中每部分中最多可设四个状态下的图像。一开始是一个初始图像， 当鼠标移动到导航条部位上时则显示另一个

15、图像，还可以设置当鼠标点击后的 初始图像，以及鼠标点击后当鼠标再次移动到这个部位上的图像。一般地，每 部位只设一到两种状态的图像。因为图像太多了，会影响网页页面的访问、浏 览的速度。导航条制作方法：移动光标到需要导航条的地方，单击主菜单栏的“InsertNavigation Bar”子命令，或直接单击 Objects 面板上的图标，弹出“Insert Navigation Bar”对话框(图 1)，此时我们可以进行各种设置来实现上述功能： 图 1在“Element Name”项后的文本框填入这个部位的命名，也可以不填，这时 Dreamweaver 3 将自动给它命名。在 Dreamweaver

16、 中每部分中最多可设四个状态下的图像：“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 文件夹中，以便调用。2 2、小结、小结课题课题 用用 DreamweaverDream