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

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

本的排版作用，选择快捷工具栏的“ HTML”项，单击 HTML 栏的第一个按钮 ，即可向网页 23 做一做 中插入水平线。 选中插入的这条水平线，可以在属性面板对它的属性进行设置。 插入时间，在文档编辑窗口中，将鼠标光标移动到要插入日期的位置，单击常用插入栏的“日期”按钮，在弹出的“插入日期”对话框中选择相应的格式即可。 试完成下列文字的输入： 1）最好只使用系统自带的四种字体，常用 宋体。 2）字体大小。 通常我们用 12px 大小的。 3）字体的修饰，包括正常和 斜体。 4）字体的行间距， 一般 行距为字体大小的 倍。 5）：设置对象中文本的装饰，分别有 下划线 、上划线、 删除线 、闪烁。 6） 字 体 颜 色。 评价内容 自评 互评 师评 评一评 同学们，本节课你的表现怎样呢。 快来评一评吧。 24 第五课 插入图像 合作探究 知识掌握 学习态度 发现思考 学习效果 注： 评价时用 “☆ ”表示，优是 3 个 “☆ ”，良是 2 个 “☆ ”，达标是 1 个 “☆ ” 看一看 25 目前互联网上支持的图像格式主要有 GIF、 JPEG 和 PNG。 其中使用最为广泛的是 GIF 和 JPEG。 那么我们 如何给网站加上图片让网站看起来更漂亮呢，我们一起来做吧。 插入图像 在制作网页时，先构想好网页布局，在图像处理软件中将需要插入的图片进行处理，然后存放在站点根目录下的文件夹里。 插图图像时，将光标放置在文档窗口需要插入图像的位置，然后鼠标单击常用插入栏的 “ 图像 ” 按钮。 弹出的 “ 选择图像源文件 ” 对话框，选择 img/，单击 “ 确定 ” 按钮就把图像 插入到了网页中。 学习目标 第二章 知识目标：会插入图片。 第三章 技能目标：了解图片格式，知道如何插入在网站文件夹内的图片和不在网站文件夹内 的图片。 第四章 情感、态度和价值观目标：培养学生的审美能力和操作能力。 26 注意：如果我们在插入图片的时候，没有将图片保存在站点根目录下，会弹出下图所示的对话框，提醒我 们要把图片保存在站点内部，这时单击 “ 是 ” 按钮， 然后选择本地站点的路径将图片 27 保存，图像也可以被插入到网页中。 在你的站点内找到一张图片插入 在计算机内找到一张照片插入 做一做 28 评价内容 自评 互评 师评 合作探究 知识掌握 学习态度 发现思考 学习效果 注： 评价时用 “ ☆ ” 表示，优是 3 个 “ ☆ ” ，良是 2 个 “ ☆ ” ，达标是 1 个 “ ☆ ” 评一评 同学们，本节课你的表现怎样呢。 快来评一评吧。 29 第六课 (2) 当我们往一个网页里插入了图片之后我们要调整图片的一些属性，图片有哪些属性，我们该如何调整呢。 另外我们插入的一些图片很大，分辨率较高，读网页的时候会很慢，有没有方法能让网页快速打开呢。 下面同学们跟我一起来解决这个问题。 设置图像属性 选中图像后，在属性面板中显示出了图像的属性，如下如所示。 看一看 学习目标 1. 知识目标 ：会 设置图像属性 ,会插入图像占位符。 2. 技能目标： 会 设置图像属性 ,会插入图像占位符 ,知道图像占位符在网页中的作用和意义。 3. 情感、态度和价值观目标 ： 培养学生对网站制作的兴趣 30 在属性面板的左上角，显示当前图像的缩略图，同时显示图像的大小。 在缩略图右侧有一个文本框，在其中可以输入图像标记的名称。 图像的大小是可以改变的，但是在 DW 里更改是极不好的习惯，如果我们的 电脑安装了 FW 软件，单击属性面板的“编辑”旁边的 ，即可启动 FW 对图像进行缩放等处理。 当图像的大小改变时，属性栏中“宽”和“高”的数值会以粗体显示，并在旁边出现一个弧形箭头，单击它可以恢复图像的原始大小。 “水平边距”和“垂直边距”文本框用来设置图像左右和上下与其它页面元素的距离。 “边框”文本框时用来设置图像边框的宽度，默认的边框宽度为 0。 “替代”文本框用来设置图像的替代文本，可以输入一段文字，当图像无法显示时，将显示这段文字。 单击属性面板中的 对齐按钮，可以分别将图像设置成浏览器居左对齐、居中对齐、居右对齐。 在属性面板中，“对齐”下拉列表框时设置图像与文本的相互对齐方式，共有10 个选项。 通过它我们可以将文字对齐到图像的上端、下端、左边和右边等，从而可以灵活的实现文字与图片的混排效果。 31 插入其它图像元素 在我们单击常用插入栏的“图像”按钮时，可以看到，除了第 1 项“图像”外，还有“图像占位符”、“鼠标经过图像”、“导航条”等项目。 插入图像占位符，在我们布局页面时，如果要在网页中插入一张图片，可以先不制作图片，而是使用占位符来代替图片位置。 单击下拉列表中的“图像占位符”，打开“图像占位符” 对话框。 按设计需要设置图片的宽度和高度，输入插入图像的名称，即可。 32 鼠标经过图像，鼠标经过图像实际上由两个图像组成，主图像（当首次载入页时显示的图像）和次图像（当鼠标指针移过主图像时显示的图像）。 这两张图片要大小相等，如果不相等， DW自动调整次图片的大小跟主图像大小一致。 图片与文本一样，是网页中最常用到的内容，其变化相对较少，要想排出精致美观的网页，下一节课的内容可是必不可少的哦，继续努力吧 ^_^ 插入两张图片，并设置第一张图片为右对齐，第二张图片为居中对齐。 设置图片 的占位符。 做一做 33 评价内容 自评 互评 师评 合作探究 知识掌握 学习态度 发现思考 学习效果 注： 评价时用 “ ☆ ” 表示，优是 3 个 “ ☆ ” ，良是 2 个 “ ☆ ” ，达标是 1 个 “ ☆ ” 评一评 同学们，本节课你的表现怎样呢。 快来评一评吧。 34 第七课 表格是网页设计制作不可缺少的元素，它以简洁明了和高效快捷的方式将图片、文本、数据和表单的元素有序的显示在页面上，让我们可以设计出漂亮的页面，使用表格排版的页面在不同平台、不同分辨率的浏览 器里都能保持其原有的布局，而在不同的浏览器平台有较好的兼容性，所以表格是网页中最常用的排版方式之一。 一、插入并编辑表格 插入表格 在文档窗口中，将光标放在需要创建表格的位置，单击“常用”快捷栏中的表格按钮弹出的“表格”对话框，指定表格的属性后，在文档窗口中插入设置的表格。 看一看 学习目标 1 知识目标：学会插入表格 2 技能目标：学会插入表格并且能够调整表格格式 3 情感、 态度和价值观目标：培养学生的集体荣誉感及合作精神。 35 “行数”文本框用来设置表格的行数。 “列数”文本框用来设置表格的列数。 “表格宽度”文本框用来设置表格的宽度，可以填入数值，紧随其后的下拉列表框用来设置宽 度的单位，有两个选项 —— 百分比和像素。 当宽度的单位选择百分比时，表格的宽度会随浏览器窗口的大小而改变。 “单元格边距”文本框用来设置单元格的内部空白的大小。 “单元格间距”文本框用来设置单元格与单元格之间的距离。 “边框粗细”用来设置表格的边框的宽度。 “页眉”定义页眉样式，可以在四种样式中选择一种。 “标题” 定义表格的标题。 36 “对其标题”定义表格标题的对齐方式。 “摘要” 可以在这里对表格进行注释。 选择单元格对象 对于表格、行、列、单元格属性的设置是以选择这些对象为前提的。 选择整个表格的方法是把 鼠标放在表格边框的任意处，当出现 这样的标志时单击即可选中整个表格；或在单元格任意处单击，点鼠标右键在弹出菜单菜单中选择“表格 —— 选择表格” 要选中某一单元格，按住 Ctrl 键，鼠标在需要选中的单元格单击即可 要选中连续的单元格，按住鼠标左键从一个单元格的左上方开始向要连续选择单元格的方向拖动。 要选中不连续的几个单元格，可以按住 Ctrl 键，单击要选择的所有单元格即可。 要选择某一行或某一列，将光标移动到行左侧或列上方，鼠标指针变为向右或向下的箭头图标时，单击即可。 插入一个四列三行的表格，设置 自己喜欢的间距、边距和边框。 做一做 评一评 37 评价内容 自评 互评 师评 合作探究 知识掌握 学习态度 发现思考 学习效果 注： 评价时用 “ ☆ ” 表示，优是 3 个 “ ☆ ” ，良是 2 个 “ ☆ ” ，达标是 1 个 “ ☆ ” 同学们，本节课你的表现怎样呢。 快来评一评吧。 38 第八课 插入并编辑表格 (2) 通过前面的学习我们已经会自己制作一个表格了，但是这样的表格并不能满足我们的需要，例如颜色单调、样式单一。 那么我们如何制作适合我们的漂亮的表格呢，好这节课就跟我一起来制 作个性化的表格吧。 设置表格属性 选中一个表格后，可以通过属性面板更改表格属性。 看一看 学习目标 知识目标：利用表格属性设置表格 利用表格属性对表格整体和单元格进行设置 技能目标：情感、态度和价值观目标：培养学生的自学能力和审美能力。 39 “填充”文本框用来设置单元格边距，“间距”文本框用来设置单元格间距。 “对齐”下拉列表框用来设置表格的对齐方式，默认的对齐方式一般为左对齐。 “边框”文本框用来设置表格边框的宽度。 “背景颜色”文本。