DREAMWEAVER 80 网页制作教案（二）.docVIP

DREAMWEAVER 8.0 网页制作教案（二） 邝翠珊 cskuang@ 826 上课地点：实验三号楼611 复习： 网页制作的一些常用功能：定义站点、数据表格的制作（学习表格的插入、合并拆分与嵌套）、利用表格布局网页、图片插入、鼠标经过交换图相的制作、、flash动画插入 、插入水平线、制作滚动的公告文字 练习1、练习上节课的内容：建立站点（包括站点文件）、用表格布局网页、图片、文字、flash动画、水平线的插入等 插入文本 在Dreamweaver中粘贴文本时，可以使用“粘贴”或“选择性粘贴”命令。“选择性粘贴”命令允许您以不同的方式指定所粘贴的文本的格式。 word和excel/teaching/htmlbook/ 练习2、试在练习1中建立的网页文件index.html中进行插入文本和word和excel链接是页面与页面之间一个单向的关联关系。通过点击链接，我们可以从一个页面跳到另一个页面。我们可以在文字、图片建立链接。可以为它设定不同的热点区域，当在网页图片上的不同位置按下鼠标左键，此时就会连接至不同的网页_seft为本窗口；_top为上级窗口（使用多级框架时）_blank为打开新窗口；_parent为父窗口（使用框架时）；在编辑网页之前，先对页面属性进行设置，便于保证网页风格的统一，当然，页面属性的设置是随时可以进行的。CSS就是Cascading Style Sheets，中文翻译为“层叠样式表”，简称样式表，网页设计最初是用HTML标记来定义页面文档及格式， 2. 创建自定义样式 单击新建样式，弹出新建对话框，在新建样式对话框里，样式表类型选：类，这里我们建立内部样式表，然后在上面的名称下拉框里输入你定义的样式名称，我们输入“.css1”按OK，如下图： 在弹出样式定义对话框中，定义你需要的样式，如在Category（类别）里选Type，然后设置颜色为红色，Weight为bold，字体：方正舒体，字体大小：12px;，行高：1５px;样式：正常，按确定。我们可以看到原代码部分在head区多了下列样式表代码： .css1 { font-family: 方正舒体; font-size: 12px; font-style: normal; line-height: 15px; font-weight: bold; color: #993333; } 3. 创建动态链接样式表 创建一组链接在不同状态下的样式，单击新建样式，弹出新建对话框，在新建样式对话框里，样式表类型选：高级， a:active 选中超级链接状态 l a:hover 光标移上超级链接状态 l a:link 超级链接的正常状态，没有任何动作的时候 l a:visited 访问过的超级链接状态 ４. 外部样式表 建立外部样式表和建立内部样式表差不多，只是在新建的时候选择基本页→css，并保存为一个扩展名为.css的样式表文件。 此外，还可以导入外部样式表。 练习5、打开dreamweaver专题学习网站站点的index.htm文件，试设置页面属性。新建一个css样式文件，并用index.htm文件链接到该样式文件，在网页中套用不同的样式。 行为的简单运用： （一）利用行为创建弹出式菜单 制作“弹出式菜单”的步骤如下： （1）在网页上选择要附加该行为的对象（导航栏按钮、链接文本、图片等）并打开“行为”面板。 （2）单击加号 (+) 按钮并从“动作”弹出式菜单中选择“显示弹出式菜单”，弹出设置对话框，如图14-13所示。 图14-13 设置弹出式菜单 （3） 在出现的“显示弹出式菜单”对话框中，使用以下标签来设置弹出式菜单的选项： ????????? 内容：设置、更改单个菜单项的名称、结构、URL 和框架目标。 ????????? 外观：设置菜单一般状态和滑过状态的外观以及设置菜单项文本的字体选择。 ???????? 高级：设置菜单单元格的属性。例如，可以设置单元格的宽度和高度、单元格颜色和边框宽度、文本缩进以及在用户将鼠标指针移到触发器上后菜单出现之前的延迟时间长度。 ????????? 位置：设置菜单相对于触发图像或链接的放置位置。 （4）单击“确定”，关闭对话框。 （5）检查默认事件是否是所需的事件。该行为的事件一般为“onMouseover”，即鼠标滑过时显示菜单。 （二）弹出消息框。 （三）打开浏览窗口 （1）选择网页中需要点击的内容，在属性面板上的链接栏上填上 # ，如下图： （2）打开「行为」面板，点击（+）按钮并从「动作」弹出式菜单中选择「打开浏览器窗口」； （3）在打开的浏览器窗口中点击「浏览」选取需要链接的文件，或者输入您需要显示的URL地址。 （4） 设置下列选项：