网页设计DreamweaverCS3教案华东师范大学Word下载.docx

网页设计DreamweaverCS3教案华东师范大学Word下载.docx

《网页设计DreamweaverCS3教案华东师范大学Word下载.docx》由会员分享，可在线阅读，更多相关《网页设计DreamweaverCS3教案华东师范大学Word下载.docx（18页珍藏版）》请在冰豆网上搜索。

4课时

教学方法：

讲授法、任务驱动法。

教学过程:

一、导入新课

网页布局技术还有一种，叫做框架。

然而框架本质上是一种浏览器窗口的分割技术。

而前面我们学习的表格和层的布局方式则属于页面分割技术，只是对一个网页的页面做了的划分，在页面不同的位置放置不同的内容，但这些内容仍在同一个页面上。

利用框架，我们可以把浏览器窗口分成几个部分，每一部分都相当于浏览器窗口的一个子窗口，都可以用来显示一个完整的网页，从而可以实现多个页面在浏览器中的同时显示，所以说框架应该算作是一种“窗口”的布局技术。

按照布局要求，把浏览器窗口分成若干子窗口，并在各个子窗口中显示具有不同内容的网页，这些网页有机的结合在一起，达到一个完整的布局效果。

二、讲授新课

（一）、框架和框架集的概念

框架是一种窗口分割布局技术，利用框架我们可以把窗口分成规划好的若干子窗口，每一个框架都相当于一个子窗口，我们可以在框架中编辑和显示一个完整的网页。

不同框架中的网页是互不相干，根据我们的整体规划，可以把不同的信息放置在不同框架中页面上，从而实现我们想要的布局效果。

每一个框架都属于某个框架集，我们可以把框架集中的一个框架拆分，来实现更多子窗口的划分，就像我们项目中一样，这其实是通过在框架集中不断的嵌套子框架集来实现的。

（二）、创建框架

　　在创建框架集或使用框架前，通过选择“查看/可视化助理/框架边框”命令，使框架边框在文档窗口的设计视图中可见。

　　1、使用预制框架集

（1）、新建一个HTML文件，在快捷工具栏选择“布局”，单击“框架”按钮，在弹出的下拉菜单中选择“顶部和嵌套的左侧框架”。

（2）、使用鼠标直接从框架的左侧边缘河上边缘向中间拖动，直至合适的位置，这样顶部和嵌套的左侧框架就完成了。

　　2、鼠标拖动创建框架

（1）、新建普通网页，命名后将其打开。

（2）、把鼠标放到框架边框上，出现双箭头光标时拖拽框架边框，可以垂直或水平分割网页。

　　（三）、保存框架

　　每一个框架都有一个框架名称，可以用默认的框架名称，也可以在属性面板修改名称，我们采用系统默认的框架名称topFrame（上方）、leftFrame（左侧）、mainFrame（右侧）。

　　选择菜单栏>

文件>

保存全部，将框架集保存为index.html，上方框架保存为07.html，左侧框架保存为08.html，右侧框架保存为09.html。

　　这个步骤虽然简单，但是很关键，只有将总框架集和各个框架保存在本地站点根目录下，才能保证浏览页面时显示正常。

　　（四）、编辑框架式网页

　　虽然框架式网页把屏幕分割成几个窗口，每个框架（窗口）中放置一个普通的网页，但是编辑框架式网页时，要把整个编辑窗口当作一个网页来编辑，插入的网页元素位于哪个框架，就保存在哪个框架的网页中。

框架的大小可以随意修改。

　　1、改变框架大小

　　用鼠标拖拽框架边框可随意改变框架大小。

　　2、删除框架

　　用鼠标把框架边框拖拽到父框架的边框上，可删除框架。

　　3、设置框架属性

　　设置框架属性时，必须先选中框架。

选择框架方法如下：

窗口>

框架，打开框架面板，单击某个框架，即可选中该框架。

　　在编辑窗口某个框架内按住Alt键并单击鼠标，即可选择该框架。

当一个框架被选择时，它的边框带有点线轮廓

2.设置框架属性

　　选中框架，在属性面板上可以设置框架属性：

框架名称、源文件、空白边距、滚动条、重置大小和边框属性等。

　　需要注意的是：

1、框架是不可以合并的。

2、在创建链接时要用到框架名称，所以我们要很清楚的知道每个框架对应的框架名。

　　（五）、在框架中使用超级链接

　　在框架式网页中制作超级链接时，一定要设置链接的目标属性，为链接的目标文档指定显示窗口。

链接目标较远（其他网站）时，一般放在新窗口，在导航条上创建链接时，一般将目标文档放在另一个框架中显示（当页面较小时）或全屏幕显示（当页面较大时）。

　　“目标”下拉菜单中的选项：

　　*_blank放在新窗口中。

　　*_parent放到父框架集或包含该链接的框架窗口中。

　　*_self放在相同窗口中（默认窗口无须指定）。

　　*_top放到整个浏览器窗口并删除所有框架。

　　在我们保存有框架名为mainFrame、leftFrame、topFrame的框架后，在目标下拉菜单中，还会出现mainFrame、leftFrame、topFrame选项：

　　*mainFrame放到名为mainFrame的框架中。

　　*leftFrame放到名为leftFrame的框架中。

　　*topFrame放到名为topFrame的框架中。

　　（六）、制作框架页面

　　1、选择菜单栏>

框架，打开框架面板，选中整个框架集，如下图所示：

　　在属性面板中，将行的值设置为100，单位为像素，如下图所示：

2、选择菜单栏>

框架，打开框架面板，选中子框架集，如下图所示：

　　在属性面板中，将列的值设置为200，单位为像素，如下图所示：

　　这样，我们就完成了对整个框架的布局。

下面我们来布局各个框架页面。

　　3、鼠标在topFrame框架中的空白处点击一下，我们会看见文档窗口上方的文件名变为了07.html。

在页面属性中将上、下、左。

右边距全部设为0。

　　插入一个1行2列的表格，宽度为100％，高度为100px，左单元格宽度为382px并插入背景图片img/103.jpg，设置表格的背景颜色为103.jpg图片右边缘的绿色（用吸管吸取）。

　　4、鼠标在leftFrame框架中的空白处点击一下，我们会看见文档窗口上方的文件名变为了08.html，在页面属性中将上、下、左。

　　插入一个6行1列的表格，表格宽度为95％，居中对齐。

将第一个单元格的高度设为20px，选中其余单元格将高度设置为50px。

分别输入文字设置导航栏目。

　　分别对各个导航栏目建立链接关系，链接路径指向要链接到的网页，目标选择mainFrame框架。

　　5、鼠标在mainFrame框架中的空白处点击一下，我们会看见文档窗口上方的文件名变为了09.html，在页面属性中将上、下、左。

　　自己设置一个欢迎页面。

　　至此，我们完成了一个框架网站的制作。

第8章插入多媒体元素

1．能正确插入Flash动画

2．能掌握Flash对象的插入方法

3．能学会视频的插入

4．能正确添加背景音乐

正确插入Flash动画、视频、背景音乐

正确插入Flash动画、视频、背景音乐

现在的科技如此发达，每天都有新生事物的诞生，所以我们制作的网页也要跟的上时代的进步，满足浏览者的需求，才能吸引更多的用户，所以要从多感官来打动用户，吸引用户，因此网页中绝对少不了视觉冲击力极强的多媒体，本项目中，我们就要学习如何在网页上使用各种多媒体元素。

（一）、Flash的文件类型

1.Flash源文件（.fla）：

是指在Flash程序中创建的Flash原始文件。

这种类型的文件只能在Flash编辑软件中打开。

2.Flash电影文件（.swf）：

是指Flash（.fla）文件的压缩版本，这种类型的文件可以在浏览器中播放并且可以在Dreamweaver中进行预览，但不能在Flash中进行编辑。

3.Flash库文件（.swt）：

这种文件用于Flash按钮对象，使我们能够用自己的文本或链接修改模板。

4.Flash元素文件（.swc）：

是一种FlashSWF文件。

5.视频文件格式（.flv）：

是一种视频文件。

（二）、网页中的音频文件格式

1..midi或.mid（乐器数字接口）：

这种格式是乐器声音，大多数浏览器都支持这种文件。

2..wav（Waveform扩展名）：

WAV是Microsoft 

Windows本身提供的音频格式，大多数浏览器都支持这种文件。

3..aif（音频交换文件格式，即AIFF）:

这种格式是Apple苹果电脑上面的标准音频格式。

4..mp3：

这种格式是一种压缩格式的声音，但用户使用必须安装相应的插件或播放程序。

5..ra、.ram、.rpm或RealAudio：

这种格式是一种高度压缩后的声音文件格式，可以被快速下载。

（三）、设置Flash对象的属性

我们可以通过属性参数面板来设置Flash对象的各种属性。

操作方法：

选中要编辑的Flash对象，然后编辑、修改Flash对象属性面板的参数。

（四）、设置Flash文本的属性

与Flash对象的属性设置相同。

可以对Flash文本设置字体、大小、样式、颜色、转滚颜色、文本、链接、背景色和另存为属性。

（五）、设置Flash按钮的属性

可以对Flash按钮设置样式、按钮文本、字体、大小、链接、背景色和另存为属性。

（六）、插入插件属性

在Dreamweaver中，音频、视频在插入时都作为插件对待，我们可以通过插件属性参数面板来设置插件的各种属性。

选中要编辑的插件，然后编辑、修改插件属性面板的参数。

第9章建立表单

1．能正确插入表单

2．能合理使用表单中的各种元素

3．能使用表格排版布局表单中的元素

4．理解表单的用途

5．掌握Spry折叠构件、菜单栏构件、验证文本域构件、验证复选框构件与重复区域构件等多种构件的使用方法。

插入表单、使用表单中的各种元素

理解表单的用途

随着网站功能的完善，用户对网页的要求不仅是获取信息，还希望要有互相的交流。

表单作为网页交互的一种元素，应用在网站的各个区域。

其表现的形式有问卷调查、线上交易以及拍卖等活动。

（一）、表单的用途

表单主要用来让用户在网页上输入数据，搜集用户的各种信息。

表单被广泛应用在需要和用户互动的页面中，如注册，留言板，网上调查等场合。

（二）、表单中的各种元素

表单中提供的元素可以以不同的方式实现用户数据的输入，我们可以根据不同的使用场合选择不同的元素。

表单中各个元素都有名称和值这两个基本的属性，并且可以在各元素的属性面板中设置。

表单中的元素主要有

1.文本字段和文本域

2.隐藏域

3.复选框

4.单选按钮和单选按钮组

5.列表/菜单

6.标签

7.文件域

8.按钮

9.图像域

（三）、Spry功能

①Spry验证表单。

（1）插入Spry验证文本域

（2）插入“Spry验证复选框”

（3）插入“Spry验证选择”

（4）插入“Spry验证文本区域”

②Spry构件。

（1）插入Spry菜单栏

（2）插入“Spry