小学信息技术校本教材：dreamweaver80供四年级用

1Dreamweaver8.02前言同学们你们喜欢上网吗？你知道那么多绚丽的网页时怎么做出的吗？你想制作自己的网站吗？那么跟我一起学习 Dreamweaver 吧！Dreamweaver 是美国一家公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。DREAMWEAVER、FLASH 以及在 DREAMWEAVER 之后推出的针对专业网页图像设计的 FIREWORKS，三者被俗称为网页三剑客。随着互联网(Internet) 的家喻户晓，网页技术的不断发展和完善，随之而产生了众多网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器（则原始代码编辑器） ，两者各有千秋。所见则所得网页编辑器的优点就是直观性，使用方便，容易上手，您在所见即所得网页编辑器进行网页制作和在 WORD 中进行文本编辑不会感到有什么区别。Dreamweaver 是在网页设计与制作领域中用户最多、应用最广、功能最强大的软件，随着 Dreamweaver 8 的发布，更坚定 Dreamweaver 在该领域的地位。它集网页设计、网站开发和站点管理功能于一身，具有可视化、支持多平台和跨浏览器的特性，是目前网站设计、开发、制作的首选工具。Dreamweaver 是一种所见即所得的 HTML 编辑器，可实现页面元素的插入和生成。或视化编辑环境大量减少了代码的编写，同时亦保证了其专业性和兼容性，并且可以对内部的 HTML 编辑器和任何第三方的 HTML 编辑器进行实时的访问。无论用户习惯手工输入 HTML 源代码还是使用可视化的编辑界面，Dreamweaver 都能提供便捷的方式使用户设计网页和管理网3站变得更容易。Dreamweaver 可以方便地加入动画、声音图片及其他的媒体。让你的网站丰富多彩，功能强大。4第一课 网络基础知识-5第二课 Dreamweaver 操作环境-9第三课 站点的搭建及管理-14第四课 文本的插入与编辑-20第五课 插入图像-25第六课 插入图像-29第七课 插入并编辑表格-34第八课 插入并编辑表格-38第九课 插入并编辑表格-42第十课 插入 Flash 动画 -46第十一课 插入 Flash 动画 -50第十二课 插入声音-54第十三课 创建链接关系-58第十四课 创建链接关系-62第十五课 创建模板-675第一课 网络基础知识随着网络的普及，越来越多的电脑爱好者开始接触网络，面对一个又一个精彩纷呈的网站，众多的电脑爱好者都按捺不住内心的憧憬开始接触网页设计和制作。而这项工作也不再象它的启蒙阶段那样，需要直接面对枯燥的代码，反复的在程序语言和最终界面之间来回切换。随着一些具有可视化操作界面，所见即所得工作窗口软件的不断出现和升级，让进入网页制作的门槛不再那么高不可及。Dreamweaver 无疑是这些软件当中的佼佼者，可以说它是现在最为普及和成功的一个网页制作软件。通过Macromedia 公司的不断改进和升级，它已经变得日益强大和完善。1、IP 地址与域名地址IP 地址，I nternet 上 的 每 台 主 机 都 有 一 个 唯 一 的 IP 地 址 ，如 00。域 名 地 址 就是网站的网址，域名的目的是让别人能够访问到一个网站,如 。简单举例来说看一看学习目标1. 知识目标：学生初步了解网络的一些基本概念 IP 地址、域名地址、URL 地址等。2. 技能目标：能够查找 URL 地址等3. 情感、态度和价值观目标：培养学生对网站制作的兴趣6ip 地址像是人的身份证，每个人都有自己唯一的身份 证号，而域名地址就像人的名字，我们平时称呼我们的同学都是用他的名字而不是用他的身份证号。2、什么是 HTTP、什么是 WWW？我们在浏览 网站的时候 经常会看到 http，那么什么是 http呢？http 指的是超文本传输协议，所谓超文本顾名思义指的是超出文本包括声音、图片、视频、动画等当然也包括文本。 WWW 是 Word Wide Web 的建成,在域名中是国际域名,像 网站首先前面有 http 说明该网站可以传输图像、视频等，后面国际域名，sina 是网站的名字 ,com 是后缀,我们常见 的后缀还有gov、edu、cn 等，像 gov 指的是政府网站，edu 指的是教育网站,cn指的是中国网站。1 url 地址指的是统一资源定位器，通俗的说就是某个资源（图片，文字，视频等）的详细地址。下面来 查看下某张图片的 url 地址： 第一步，我们首先来打开一个网站7第二步：如图所示把鼠标放在图片上,右键单击图片,在弹出的菜单上选择属性.第三步：打开一个网页1 你能找到你自己电脑的 IP 地址吗？做一做8评一评2、你知道临沂市六小的域名地址吗？3.你知道怎么找文章的 URL 地址吗？同学们，你这节课的表现怎么样呢？快来评一评吧！评价内容 自评 互评 师评合作探究知识掌握学习态度发现思考学习效果注：评价时用“”表示，优是 3 个“”，良是 2 个“”，9第二课 Dreamweaver8 界面从今天开始准备向大家介绍 Dreamweaver 软件 8.0 版的强大功能，本教程希望以规范化的网站制作流程为线索，指导同学们以正确的步骤来逐渐接触和掌握 Dreamweaver 软件的主要功能。我个人认为，作为一个网页制作的爱好者，需要有一个良好的工作习惯，很多朋友在学习时喜欢随心所欲的实验软件的各种功能，而缺乏系统的、正确的工作方式。同时网页制作面对的不是一个达标是 1 个“”看一看10个孤立的页面，而是一组互相关联的某个站点中的文件群，因此本教程将从网站的角度来串讲 Dreamweaver 中的各项主要功能。在首次启动 Dreamweaver8 时会出现一个“工作区设置” 对话框，在对话 框左侧是 Dreamweaver8 的设计视图，右侧是Dreamweave 8 的代码视图 。Dreamweaver8 设计视图布局提供了一个将全部元素置于一个窗口中的集成布局。我们选择面向设计者的设计视图布局。在 Dreamweave 8 中首先将显示一个起始页，可以勾选这个窗口下面的“ 不在显示此对话 框” 来隐藏它。在这个页面中包括“打开最近项目” 、“创建新项目”“ 从范例创建”3 个方便实用的项目，建议大家保留。学习目标1、知识目标：了解网页制作工具dreamweaver8。2、技能目标:了解 dreamweaver8 的工作界面的组成: 标题显示、菜单栏、插入面板组、文档工具栏、标准工具栏、文档窗口、状态栏、属性面板和浮动面板组。3、情感、态度和价值观目标:通过对网页制作工具的认识，培养学生对网页的兴趣和对网页的了解。11新建或打开一个文档，进入 Dreamweaver8 的标准工作界面。Dreamweaver8 的标准工作界面包括：标题显示、菜单栏、插入面板组、文档工具栏、标准工具栏、文档窗口、状态栏、属性面板和浮动面板组。1、标题显示栏 启动 Macromedia Dreamweave 8 后，标题栏将显示文字Macromedia Dreamweave 8.0，新建或打开一个文档后，在后面还会显示该文档所在的位置和文件名称。2、菜单栏12Dreamweave 8 的菜单共有 10 个，即文件、编辑、视图、插入、修改、文本、命令、站点、窗口和帮助。其中，编辑菜 单里提供了对 Dreamweaver 菜单中首选参数的访问。文件：用来管理文件。例如新建，打开，保存，另存为，导入，输出打印等。编辑：用来编辑文本。例如剪切，复制，粘贴，查找，替换和参数设置等。查看：用来切换视图模式以及显示、隐藏标尺、网格线等辅助视图功能。插入：用来插入各种元素，例如图片、多媒体 组件，表格、框架及超级链接等。修改：具有对页面元素修改的功能，例如在表格中插入表格，拆分、合并单元格，对其对象等。文本：用来对文本操作，例如设置文本格式等。命令：所有的附加命令项站点：用来创建和管理站点窗口：用来显示和隐藏控制面板以及切换文档窗口帮助：联机帮助功能。例如按下 F1 键，就会打开电子帮助文本133、插入面板组插入面板集成了所有可以在网页应用的对象包括“插入” 菜单中的选项。插入面板组其实 就是图像化了的插入指令，通过一个个的按钮，可以很容易的加入 图像、声音、多媒体动 画、表格。图层、框架、表单 、Flash 和 ActiveX 等网页元素。4、文档工具栏“文档”工具栏包含各种按 钮，它 们提供各种“文档”窗口视图（如“设计”视图和“代码”视图）的选项、各种查看选项 和一些常用操作（如在浏览器中预览）。5、标准工具栏“标准”工具栏包含来自“文件”和“编辑” 菜单中的一般操作的按钮：“新建”、 “打开” 、“保存 ”、“保存全部”、 “剪切”、 “复制” 、“粘贴”、 “撤消”和“重做”。6、文档窗口当我们打开或创建一个项目，进入文档窗口，我 们可以在文档区域中进行输入文字、插入表格和编辑图片等操作。14“文档”窗口显示当前文档。可以选择下列任一视图：“设计” 视图是一个用于可视化页面布局、可视化编辑和快速应用程序开发的设计环境。在该视图中，Dreamweaver 显示文档的完全可编辑的可视化表示形式，类似于在 浏览器中查看页面时看到的内容。“代码”视图是一个用于编 写和编辑 HTML、JavaScript、服务器语言代码以及任何其他类型代码的手工编码环境。 “代 码和设计”视图使您可以在单个窗口中同时看到同一文档的“代 码” 视图和“设计”视图。7、状态栏“文档”窗口底部的状态栏 提供与你正创建的文档有关的其它信息。标签选择器显示环绕 当前选定内容的标签的层次结构。单击该层次结构中的任何标签以选择该标签及其全部内容。单击 可以 选择文档的整个正文。8、属性面板属性面板并不是将所有的属性加载在面板上，而是根据我们选择的对象来动态显示对象的属性属性面板的状态完全是随当前在文档中选择的对象来确定的。例如，当前选择了一幅 图像，那么15同学们，本节课你的表现怎样呢？快来评一评吧？属性面板上就出现该图像的相关属性；如果选择了表格，那么属性面板会相应的变化成表格的相关属性。9、浮动面板其它面板可以同称为浮动面板，这些面板都浮动于编辑窗口之外。在初次使用 Dreamweave 8 的时候，这些面板根据功能被分成了若干组。在窗口菜单中，选择不同的命令可以打开基本面板组、设计 面板组、代码面板组、应用程序面板组、 资源面板组和其它面板组。终于把 Dreamweave 8 的基本工作界面介绍完了，你是否已经了解它？从现在开始，让我们一起来建造一座小房子。打开 Dreamweave 8 看一看你都知道这个软件的面板都有什么用处吗？做一做评一评16第三课 Dreamweaver8.0 本地站点的搭建与管理评价内容 自评 互评 师评合作探究知识掌握学习态度发现思考学习效果注：评价时用“”表示，优是 3 个“”，良是 2 个“”，达标是 1 个“”看一看17这节课给大家介绍 Dreamweaver 的站点管理功能。我们已经知道网站所面对的不是单独页面的集合，更多的还包含其他诸如图片声音、外部程序等等相关联的内容，因此如何正确的组织他们变得非常重要。很多同学常常遇到如下一些问题：为什么我的网页传上去后看不到图片？为什么我的文件链接是错的？这些问题其实很多都是在开始之前，没有合理的创建好你的站点，良好的规划和准备工作可以减少很多的后续错误。要制作一个能够被大家浏览的网站，首先需要在本地磁盘上制作这个网站，然后把这个网站传到互联网的 web 服务器上。放置在本地磁盘上的网站被称为本地站点，位于互联网 web 服务器里的网站被称为远程站点。 Dreamweaver 8 提供了对本地站点和远程站点强大的管理功。1、规划站点结构网站是多个网页的集合，其包括一个首页和若干个分页，这种集合不是简单的集合。为 了达到最佳效果，在 创建任何 Web 站点页面之前，要对站点的 结构进行设计和规划。决定要创建多学习目标知识目标：学会站点的搭建和管理。技能目标：学会创建站点,掌握在站点内创建文件夹,重命名文件夹的方法,学会规划网站。情感、态度和价值观目标：通过管理和创建站点，了解网站的低端，解开网站神秘的面纱。4.18少页，每页上显示什么内容，页面布局的外观以及各页是如何互相连接起来的。我们可以通过把文件分门别类的放置在各自的文件夹里，使网站的结构清晰明了，便于管理和查找。2、创建站点在 Dreamweave 8 中可以有效的建立并管理多个站点。搭建站点可以有两种方法，一是利用向导完成，二是利用高级设定来完成。在搭建站点前，我们先在自己的电脑硬盘上建一个以英文或数字命名的空文件夹(汉字的也可以,不过容易出错)。选择菜单栏站点管理站点，出现“管 理站点”对话 框。点击“新建”按钮， 选择弹出菜单中的“站点”项。 在打开的窗口上方有19“基本”和“高级”两个标签，可以在站点向 导和高级设置之间切换。下面选择“基本 ”标签。在文本框中，输入一个站点名字以在 Dreamweaver8.0 中标识该站点。 这个名字可以是任何你需要的名字。 单击 “下一步”。出现向导的下一个界面，询问 是否要使用服务器技术。我们现在建立的是一个静态页面，所以选择“否”。 点下一步，在文档框设置本地站点文件夹的地址。20点下一步，进入站点定义，我 们将在站点建 设完成后在与 FTP 链接，这里选择“无”。单击“完成”按钮，结束“站点定义 “对话框的设置。单击“完成”按钮，文件面板显示出刚才建立的站点。21到此，我们完成了站点的创建。3、搭建站点结构站点是文件与文件夹的集合，下面我们根据前面对 xmweb 网站的设计，来新建 xmweb 站点要设置的文件夹和文件。新建文件夹，在文件面板的站点跟目录下单击鼠标右键，从弹出菜单中选择“ 新建文件 夹” 项，22然后给文件夹命名。这里我们创建新建 8 个文件夹，分别命名为：img、med、swf、txt、css、js、moan 和 fy。创建页面，在文件面板的站点跟目录下单击鼠标右键，从弹出菜单中选择“ 新建文件”项，然后 给文件命名。首先要添加首页，我们把首页命名为 index.html，再分别新建01.html、02.html、03.html、04.html 和 05.html。4、文件与文件夹的管理对建立的文件和文件夹，可以进行移动、复制、重命名和 删除等基本的管理操作。单击鼠 标左键选中需要管理的文件或文件夹，然后单击鼠标右键，再弹出菜 单中选“编辑”项，即可进行相关操作。创建一个自己的站点，并在里面加入相关的网页和文件夹做一做评一评评一评同学们，本节课你的表现怎样呢？快来评一评吧？23评价内容 自评 互评 师评合作探究知识掌握学习态度发现思考学习效果注：评价时用“”表示，优是 3 个“”，良是 2 个“”，达标是 1 个“”24第四课 Dreamweaver8.0 文本的插入与编辑文字是一个网站最为直接的载体.只有具有丰富文字内容的网站才具有吸引力。那么我们如何将丰富的文字内容置入Dreamweaver 8 中,并将这些文字呈现得最整齐、最美观。文字是构成网页的重要表达工具，在网页的编写过程中，通常会对编写的文字进行设置和操作。熟悉这些操作，对我们制作网页有很大的帮助。1、插入文本看一看学习目标1、知识目标:学会插入文本并且会编辑文字2、技能目标:会插入文字、编辑文字、添加特殊字符3、情感、态度和价值观目标：培养学生探究问题的能力25要向 Dreamweaver 文档添加文本，可以直接在Dreamweaver“文档” 窗口中 键入文本，也可以剪切并粘贴，还可以从 word 文档 导入文本。用鼠标在文档编辑窗口的空白区域点一下，窗口中出现闪动的光标，提示文字的起始位置，将一段文字素材复制 /粘贴进来。2、编辑文本格式网页的文本分为段落和标题两种格式。在文档编辑窗口中选中一段文本，在属性面板“格式 ”后的下拉列表框中选择“ 段落” 把 选中的文本设置成段落格式。“标题 1”到“标题 6”分别表示各级标题，应用于网页的标题部分。对应 的字体由大到小，同时文字全部加粗。另外，在属性面板中可以定义文字的字号、 颜色、加粗、加斜、水平对齐等内容。3、设置字体组合26Dreamweaver8 预设读的可供选择的字体组合只有 6 项英文字体组合，要想使用中文字体，必须重新编辑新的字体 组合，在“字体”后的下拉列表框中 选择“编辑字体列表”，弹 出“ 编辑字体列表”对话框： 4、文字的其它设置文本换行，按 Enter 键换行的行距较大，按EnterShift 键换行的行间距较小。文本空格，我们选择编辑/ 首选参数，在弹出得对话框中左侧的分类列表中选择“ 常规”项，然后在右边选“允许多个 连续的空格”项，我们 就可以直接按“空格”键给文本添加空格了。27特殊字符，要向网页中插入特殊字符，需要在快捷工具栏选择“文本”，切换到字符插入栏，单击文本插入栏的最后一个按钮，可以向网页中插入相应的特殊符号。插入列表，列表分为两种，有序列表和无序列表，无序列表没有顺序，每一项前边都以同 样的符号显示，有序