《现代教育技术 教学课件 ppt 作者 祝士明现代教育技术10章10-3》由会员分享，可在线阅读，更多相关《现代教育技术 教学课件 ppt 作者 祝士明现代教育技术10章10-3（50页珍藏版）》请在金锄头文库上搜索。
1、10.3 网络课件页面布局技术,完成网络课件的站点设置后，我们就可以进行具体的课件设计与开发工作了。 这一节我们主要讨论安排课件元素技术，也就是网络课件的页面布局技术。Dreamweraver MX 提供了如表格、布局视图、模版、层和框架等布局技术。 只有灵活运用这些技术，我们才能设计出美观大方、布局合理的网络课件。,10.3.1 网页的基本构成,通常，在一个网络课件中可以显示各种元素，如文字、表格、图形图像、音乐、声音、视频、动画、超级链接以及表单等。 这些元素分别构成了网络课件的不同组成部分，如标志、导航栏、主内容区以及页脚版权信息等。,10.3.1 网页的基本构成,1网络课件标志 网络课
2、件标志是一个网络课件的象征，也是一个站点是否正规的标志。通常我们利用具有课程特色的图片作为课件的标志，可以放在网站的左上角或顶部，使访问者一眼就能看到它。,10.3.1 网页的基本构成,2导航 导航栏是网络课件中非常重要的一部分，为了使学习者在使用网络课件的过程中避免出现“迷航”的现象，课件中的每个页面都应该有链接导航。一般说来，导航位置在各个页面中出现的位置是比较固定的，而且风格也较为一致。导航的位置一般有四种：在页面的左侧、右侧、顶部和底部。,10.3.1 网页的基本构成,3主内容区 课件的主内容区是课程主要内容的显示区域。 4页脚版权信息 页脚是放置课件版权信息的地方，可以放置一些联系方
3、式或其他的导航栏目。,10.3.2 利用表格显示内容,在制作网页时，表格不仅仅可以用来列举数据，它可以更多的应用到网页定位上。表格在内容组织、页面元素的位置控制方面有很强的功能。因此，很多页面都利用表格布局。,1表格的基本操作 （1）插入表格：选择菜单中的插入表格命令或选择工具栏中的 ，弹出如下图所示“插入表格”对话框，在这个对话框中可以对表格的属性进行简单设置。,10.3.2 利用表格显示内容,10.3.2 利用表格显示内容,每个选项含义如下： 行数和列数：用来设置表格的行数和列数。 宽度：用来设置表格的宽度。下拉列表框用来设置宽度的单位。有两个选项“百分比”和“像素”，其中百分比是指表格占
4、据整个页面的比例。 边框：表格边框的宽度。 单元格填充：单元格内容和单元格边界之间的像素数。 单元格间距：相邻单元格间的像素数。,（2）表格属性的设置：插入表格后，可以通过表格的“属性”对话框再次修改表格的属性。表格“属性”对话框如下图所示。,10.3.2 利用表格显示内容,属性面板中的个别选项，如：行、列、宽、填充、间距和边框的含义与上页图中所示对话框表示的含义一致,10.3.2 利用表格显示内容,其他选项含义如下： 表格ID：用来设置表格的ID，一般不需填写。 高：用来设置表格的高度，单位是像素或百分比。 对齐：设置表格在页面中的对齐方式。 背景颜色：用户可以通过单击 按钮为表格设置背景色
5、，所选颜色的16进制数值表示显示在右边的对话框中，用户也可以手动修改该数值，使背景颜色设置更加精确。,10.3.2 利用表格显示内容,边框颜色：用户可以通过单击 按钮为表格设置背景色。 背景图像：用户可以通过单击 按钮，为页面选择一张图片作为背景。 其余几个图表分别表示： 清除列宽； 将表格宽度转为像素； 将表格宽度转换为百分比； 清除行高； 将表格高度转为像素； 将表格高度转换为百分比。,10.3.2 利用表格显示内容,2利用表格近进行页面布局实例 （1）选择菜单文件 新建命令，弹出 如右图所示对话框。 在“常规”选项卡中 选择“基本页”选项 中的“HTML”选项， 然后单击创建按钮， 创建
6、空白文档。,10.3.2 利用表格显示内容,（2）选择菜单文件保存命令，保存文件为“index.htm”。 （3）将光标放置页面顶部，插入一个1行2列的表格，表格宽度为750像素，“填充”、“间距”以及“边框”值均为0，“对齐”设置为“居中”，设置表格背景色为绿色（#67a343）。,10.3.2 利用表格显示内容,（4）插入图片和Flash动画，该表格的内容将作为网络课件的标志区。 首先将光标放置左边的单元格中，单击“插入”工具栏中的 图标，插入图片“top-left.gif”，依据图片宽度，调整该单元格宽度为257像素。,10.3.2 利用表格显示内容,然后将光标放置右边单元格中，单击“插
7、入”工具栏中的 命令，插入flash动画文件“logo.swf”，如图所示。,课件标志区,10.3.2 利用表格显示内容,（5）将光标从标志区移至下一行，插入一个1行8列的表格，表格宽度为750像素，高度为20像素，“填充”、“间距”以及“边框”值均为0，“对齐”设置为“居中”。 （6）该表格的内容将作为课件的导航栏。在8个单元格中分别输入文字“学习指南”、 “教育技术教程”、“案例评析”等。选中每个单元格中的文字后，可以在属性面板中设置文字在单元格中水平居中对齐、垂直为中间对齐。如图所示。,10.3.2 利用表格显示内容,课件导航栏,10.3.2 利用表格显示内容,（7）将光标从导航栏移至下
8、一行，插入一个宽度为750像素的1行1列单元格。“填充”、“间距”以及“边框”值均为0。此表格显示的是该页主内容区，因此不设置表格的高度，而是使其随内容的增加自动调整。在表格中输入网页的主要内容，如图所示。,10.3.2 利用表格显示内容,10.3.2 利用表格显示内容,（8）将光标从主内容区移至下一行，插入一个1行1列，宽度为760像素，高度为70像素的表格，“填充”、“间距”以及“边框”值均0，“对齐”设置为“居中”，表格背景色为绿色（#67a343）。在表格中输入版权信息，如图所示。这样，我们通过表格定位技术，基本完成了课件页面的布局。,10.3.2 利用表格显示内容,10.3.3 使用
9、层定位网页,层是一种新的页面元素定位技术，层可以放在页面的任何位置，也可以在层中插入各种页面元素。 1层的基本操作 （1）插入层：把光标置于文档窗口中想要插入层的地方，选择菜单插入层命令，即可插入层。 （2）选中层：鼠标单击层的边框的任一边，即可选中层。,10.3.3 使用层定位网页,2层的属性面板 选中层之后，可在“属性”面板中设置层的属性，如下图所示。,10.3.3 使用层定位网页,层编号：选定层的名称，用来标识层。注意层编号只能使用标准的字母或数字，不能使用空格、斜线及句号等特殊符号。 上和左：相对于页面和父层左上角的位置，单位为像素。 宽和高：定义层的宽度和高度，默认单位为像素。 Z轴
10、：选定层的叠放顺序，其值为数字，可正可负。数值大的层出现在数值小的层的上方。,10.3.3 使用层定位网页,显示：确定层的可见性。单击下拉按钮，可打开下拉列表进行选择。 背景图像和背景颜色：选定层的背景颜色和背景图像，二者值为空时，指定层为透明背景。 标签：选定层在HTML代码中使用的标签。 溢出：当层的内容超过层的大小时，用来设置层的内容的显示方法。 裁剪：上下左右的数值分别指定层内输入的内容与层的内边距，单位为像素。,10.3.3 使用层定位网页,3层面板 选择菜单中的 窗口层命令， 打开层面板， 如右图所示,层面板,10.3.3 使用层定位网页,：用来设置层的显示属性， 表示显示值为显示
11、， 表示显示值为隐藏，若没有标记则表示为默认，这三种状态可通过单击图标进行切换。 名称：显示内容为层编号。 Z：值为数字，与属性面板中Z轴的含义相同且 值一致，可通过单击数字来更改值。 若一个页面中有多个层，可选择“防止重叠”选项，防止层出现重叠现象。,10.3.3 使用层定位网页,4利用层进行页面布局实例 利用层制作下拉菜单，就是当鼠标指针经过某个项目或单击某个项目时，会显示一个下拉菜单，当鼠标移走时，显示的下拉菜单又会隐藏起来。,10.3.3 使用层定位网页,使用层制作下拉菜单的步骤如下: （1）打开素材文件“index.htm”，插入一个层，并设置属性。“左”设置为324像素，“上”设置
12、为150像素，“宽”设置为95像素， “高”设置为 60像素， “Z轴”为1， “显示”为 visiable， 插入层 如图所示。,10.3.3 使用层定位网页,（2）将光标放置在插入的层中，选择菜单中的插入表格命令，插入一个3行1列的表格，边框为0，宽为95像素，高为60像素，背景色为绿色（#67a343）。 （3）在三个单元格中分别输入：“第一章”，“第二章”，“第三章”，设置文字“大小”为2号字，“水平”为居中对齐，“垂直”为中间对齐，如图所示。,10.3.3 使用层定位网页,10.3.3 使用层定位网页,（4）选中文字“教育技术教程”，选择菜单窗口行为命令，打开行为面板。 （5）单击行
13、为面板中的 按钮，在弹出的下拉菜单中选择“显示隐藏层”，弹出“显示隐藏层”对话框，在对话框中选择层“Layer1”，单击显示按钮，如图所示。,10.3.3 使用层定位网页,选择显示按钮,10.3.3 使用层定位网页,（6）单击确定按钮， 将行为面板中的事件 设为onMouseover， 如右图所示。,10.3.3 使用层定位网页,（7）单击行为面板中的 按钮，在弹出的下拉菜单中选择“显示隐藏层”，弹出“显示隐藏层”对话框，在对话框中选择层“Layer1”，单击隐藏按钮，如图所示。,10.3.3 使用层定位网页,（8）单击确定按钮， 行为面板中的事件为 onMouseOut， 如图所示。,10.
14、3.4 利用框架布局页面,框架的作用就是把浏览器窗口划分为若干个区域，每个区域可以分别显示不同的页面。 在开发网络课件时，我们利用框架最常见的情况就是 一个框架显示包含课程内容导航栏的文档 另一个框架显示含有课程内容的文档。,10.3.4 利用框架布局页面,框架由两个主要部分即框架集和单个框架组成。 框架集是在一个文档内定义一组框架结构的网页。框架集定义了一页网页显示的框架数、框架的大小、载入框架的网页源和其他可定义的属性等等。 单个框架是指在网页上定义的一个区域。如果某个页面被划分为两个框架，那么它实际上包含的是三个独立的文件，一个框架集文件和两个框架内容文件。框架内容文件就是显示在页面框架
15、中的内容。,10.3.4 利用框架布局页面,1.创建框架网页 Dreamweaver为用户提供了十几种框架结构，我们可以直接应用这些结构，方便快捷的创建出具有框架结构的网络课件。,10.3.4 利用框架布局页面,（1）选择菜单的 文件新建命令， 弹出“新建文档” 对话框，如右图 所示,10.3.4 利用框架布局页面,（2）在该对话框中的“常规”选项卡中，从“类别”选项中选择框架集，则“框架集”选项中列出了框架集中的可选项，如图所示。用户可以选择一种框架集， 单击创建按钮， 即可创建一种 框架集网页。,10.3.4 利用框架布局页面,2保存框架 由框架的定义知道，保存框架要分别保存框架集和各个单
16、个框架。以“上方固定”框架集为例，保存框架的步骤如下： （1）选择菜单中的文件保存全部命令，弹出“另存为”对话框，此时整个框架集边框会出现一个阴影框，说明此时保存的是框架集，如图所示。,10.3.4 利用框架布局页面,为框架集命名,10.3.4 利用框架布局页面,（2）在“另存为”对话框中输入框架集名称，单击保存按钮，弹出第二个“另存为”对话框，此时底部框架内侧出现阴影，说明此时保存的是底部框架，输入框架名称，单击保存按钮。 （3）最后，弹出第三个“另存为”对话框，此时顶部框架内侧出现阴影，说明此时保存的是顶部框架，输入框架名称，单击保存按钮，完成整个框架的保存。,10.3.4 利用框架布局页面,3框架布局页面实例 （1）创建一个上方固定框架。 （2）调整顶部框架区大小，选中需要调整的框架，在“属性”面板中，清除“不能调整大小”选项。鼠标指向框架的边框，当指针变成时，通过拖动鼠标，即可改变框架大小。 （3）将光标放置顶部框架，插入一个1行2列的表格，宽度为
