第10讲_CSS样式-链接-框架网页-多媒体

1、1 CSS样式样式链接链接框架网页框架网页多媒体多媒体 2 2 q教师：柳青 q电子信箱： L q办公室：信息楼B418 q电话： 67703852 3 q创建本地站点和创建网页 q创建表格和编辑表格 q网页中添加文本 q网页中添加图片 q创建网页存放的位置 q水平线颜色设置 4 q打开站点 q打开“站点”菜单，选择“管理站点”中“新建/站点”，在“本 地根文件夹”中选择站点 q删除站点 q通过“文件/站点”，选择“管理站点”中选择要删除的站点，点 击“删除” 5 q掌握CSS样式的创建和运用方法 q掌握各种链接的创建方法 q掌握框架网页的制作方法 q掌握利用框架网页来组织由多个网页组成的画面

2、 q掌握框架网页中链接设置 q网页中多媒体设置与应用 qCSS是一种用来进行网页风格设计的样式表技术，使用 CSS样式可以对页面的布局、字体、颜色、背景和其他图 文效果实现更加精确地控制，并且同一个样式可以应用于多 个不同的对象，提高制作效率。 qCSS样式是Cascading Style Sheets(层叠样式单)的简称， 也可以称为“级联样式表”，它是一种网页制作的新技术， 利用它可以对网页中的文本进行精确的格式化控制。 q要管理一个系统的网站，使用CSS样式，可以快速格式化 整个站点或多个文档中的字体、图像等网页元素的格式。并 且，CSS样式可以实现多种不能用HTML样式实现的功能。 6

3、 qCSS，是用来控制一个网页文档中的某文本区域外观的一 组格式属性。 q使用CSS能够简化网页代码，加快下载速度，减少上传的 代码数量，从而可以避免重复操作。 qCSS样式表是对HTML语法的一次革新，它位于文档的 区，作用范围由CLASS或其他任何符合CSS规范 的文本来设置。 q对于其他现有的文档，只要其中的CSS样式符合规范， Dreamweaver就能识别它们。 7 q通过CSS样式面板 q点击“新建CSS规则”按钮，打开“新建CSS 规则”对话框 q通过属性面板 q点击“CSS”按钮，“目标规则”选择“新 CSS规则”，点击“编辑规则”按钮 q选择“格式/CSS样式/新建”菜单命令

4、 8 q设置选择器类型 q选择器名称(以点开始) q规则定义范围 9 qCSS规则分类 q类型：主要用于设置文字格式 q背景：主要用于设置文字、表格等背景 q方框：主要用于设置图形、表格等大小 q边框：主要用于设置表格边框 q列表：主要用于设置项目符号 q定位：确定对象位置 q扩展：主要用于设置特殊光标 10 q新建CSS规则样式后，就可以利 用该样式快速设置页面上的网页 元素样式，使网站具有统一的风 格了。 q应用CSS样式规则方法 q在“属性”面板进行设定 q通过快捷菜单设定 11 q对于创建的CSS样式，可以进行编辑操作，主要包括修改 CSS样式属性、设置CSS样式首选参数以及链接和导入

5、 CSS样式等。 q编辑CSS样式规则方法 q在“属性”面板中进行修改 q在“CSS样式”面板中进行修改 12 q打开 “tk.html”网页 q在网页顶端插入1行4列表格，表格宽450像素，边框为0，居中对齐 q在表格中插入图片(图片在SC2文件夹中)，图片居中对齐 q创建CSS规则“.ys1”(边框) q样式：groove；宽度：medium；颜色：#ccffcc q将该CSS规则运用到表格中的图片上 q创建CSS规则“.ys2”(类型) q字体：华文新魏；大小：36像素；粗体；颜色：#003300；居中对齐 q将该CSS规则运用到正文标题上 q创建CSS规则“.ys3”(列表) q项目符

6、号图像：zp.gif(SC2文件夹中)；位置：外 q将该CSS规则运用到“成员行为”中编号上 13 14 q超链接是网页中最重要的组成部分。超链接的应用范围很 广，利用它不仅可以链接到其他网页，还可以链接到其他 图像文件、多媒体文件及下载程序，也可以利用它在网页 内部进行链接或是发送E-mail等。 q在Dreamweaver CS4中，可以将文档中的任何文字及任 意位置的图片设置为超链接。 15 q在Dreamweaver CS4中，可以随时随地在所需的位置创 建各种超级链接，并且可以通过多种方法来创建超链接 q可以在“属性”面板中创建 q使用“插入”菜单创建 q使用“常用”工具栏中“超级链

7、接”来创建 q超级链接的分类 q文本超链接 q图像超链接 q锚记链接 qE-mail链接 q图形热点链接 16 17 q创建文本和图像链接方法 q选择需要创建链接的对象 q按右键选择“创建链接”(或者在属性面板上设置) q打开“选择文件”对话框，选择链接对象 q注意：链接对象可以是网页、应用程序、各种媒体 q创建电子邮件的方法 q选择需要创建电子邮件链接的对象 q打开“插入”菜单，选择 “电子邮件链接” q打开“电子邮件链接”对话框，输入邮件地址 q或者在“属性”的“链接”文本框中输入“mailto :邮件地址” 18 19 q打开站点Mysite，在网页main.html中创建链接 q建立下

8、部导航栏中“隐私条例”的文本链接，链接到tk.html网页 q建立下部导航栏中“联系我们”的文本链接，链接到自己的邮箱 20 q确定插入点位置 q命名锚记 q打开“插入”菜单，选择“命名锚记” q打开“命名锚记”对话框，输入“*” q创建锚记链接 q选择需要创建锚记链接的对象 q在“属性”面板，“链接”栏输入“#*” 21 q打开网页“tk.html” q在标题前插入锚记，名称为“fanhui” q在网页末尾文字“返回页首”，创建锚记链接 q图像地图也是一种超链接，适用于较大的图像。 q创建图像地图，可以在图像上创建不规则区域的链接或某 个部分区域的链接。 q图像地图是将图片分为几个区域，这些

9、区域又称为热点， 单击不同的热点可以打开不同的链接，这样的链接就称为 图形热点链接。 22 23 q创建图像某个区域的超级链接，使之能链接到相应对象 q选中网页中的图像地图 q点击“属性”面板上的“热点工具”，在图像上确定“热点” 区域 q指定链接对象(网页、图像等) 24 q创建main.html网页图片中文字“快速网上冲印服务”的热 点链接，链接到“wscy.html”网页 q在main.html网页中，当鼠标移动到以下图片上时显示“网上 冲印服务” 25 q框架的概念 q框架把浏览器窗口分成几个部分 q每个部分显示不同的网页 q使浏览器窗口同时包含多个网页 q框架集的概念 q框架集是HT

10、ML文件，定义一组框架的布局和属性 q包括框架的数目、大小、位置和每个框架中初始显示页面的URL q框架集不包含要在浏览器中显示的HTML内容 26 q创建框架网页步骤 q打开“文件”菜单，选择“新建 ” q打开“新建文档”对话框 q选择“示例中的页” q在“示例文件夹”中选择“框架页” q选择框架类型 q选择“文件/保存全部”菜单命令，依次 保存框架集和框架 q打开“保存为”对话框 q按提示依次保存框架集和每个框架 q框架集和框架都是以网页形式保存的 27 q在站点中新建框架网页，框架集样式“水平拆分” q在上方框架网页中插入图片“logo.jpg” q在下方框架网页中输入文字“我的框架网页

11、” q依次保存框架集和每个框架 q框架集保存为kjj.html q上方框架网页保存为kj-top.html q下方框架网页保存为kj-under.html 28 29 q将插入点放置在框架网页中 q打开“文件”菜单，选择“在框架中打开” q打开“选择HTML文件”对话框 q选择要在该框架中打开的网页 30 q打开“Mysite”站点 q在站点中新建框架网页，框架集样式“上方固定” q在上方框架中打开网页“Top.html”网页 q在下方框架中打开Main.html网页 q保存框架集为“Index.html” 31 q通过“框架”面板选择框架集和框架 q“窗口”菜单/“框架”，打开框架面板 q鼠

12、标点击选择 q调整框架大小 q通过鼠标拖动框架边框 q在“框架”属性面板上可以设置精确设置 q注意： q在编辑框架时，如果框架边框不可见 q选择“查看/可视化助理/框架边框”，使框架边框可见 32 q框架中的链接 q在一个框架中使用链接在另一个框架中打开网页 q链接设置方法 q选择文本或对象 q在“属性”面板的“链接”中，点击文件夹图标 q打开“选择文件”对话框，选择链接到的文件 q在“属性”面板的“目标”下拉菜单中，选择显示方式 q注意：框架中的链接必须在框架集中设置，否则无法选择显注意：框架中的链接必须在框架集中设置，否则无法选择显 示方式示方式 33 q设置上方框架中的链接 q设置“首页

13、”链接到“main.html” q“网上冲印”链接到“wscy.html” q设置链接网页显示方式 q在“属性”面板的“目标”下拉菜单中，选择“mainFrame”显示 方式 q“数码商城” 链接到“smsc.html”，在新页面中打开 q插入媒体类型 q插入FLASH文件 q插入插件(音频、视频) q插入ActiveX控件 q插入媒体方法 q选择“插入/媒体”菜单命令 q或(选择“常用”工具栏上“媒体” 按钮) 34 qFlash动画是网页上最流行的动画格式。 q在Dreamweaver CS4中，Flash动画也是最常用的多媒体 插件之一，它将声音、图像和动画等内容加入到一个文件 中并能制

14、作较好的动画效果，同时使用了优化的算法将多 媒体数据进行压缩，是文件变得很小，因此，非常适合在 网上传播。 35 q将光标移至所需插入Flash动画的位置 q打开“插入”菜单，选择“媒体”中的“SWF” q打开“选择文件对话框 q选择所需插入的Flash动画 q也可以通过“常用”工具栏中的“媒体”中“SWF”插入 Flash动画 36 q在网页文档中插入Flash动画文件后，选中Flash动画 q在“属性”面板中设置属性 37 q在Dreamweaver CS4中，可以向网页文档添加多种不同 类型的声音文件和格式，例如.wav、.midi和.mp3。 q根据要添加声音的目的、文件大小、声音品质

15、等要素，来 确定插入哪种格式和方法。 38 q将光标移至所需插入声音文件的位置 q打开“插入”菜单，选择“媒体”中的“插件” q打开“选择文件对话框 q选择所需插入的声音文件 q也可以通过“常用”工具栏中的“媒体”中“插件”插入声 音文件 39 q在网页文档中插入声音文件后，选中插件符号 q在“属性”面板中设置音频属性 q通过“编辑标签”设置音频属性 q选择插件符号，按右键，选择“编辑标签”，打开“标签编辑器” 对话框 q可以设置音频“自动播放”、“循环”、“隐藏” 40 q将光标移至所需插入声音文件的位置 q打开“插入”菜单，选择“媒体”中的“插件” q打开“选择文件对话框 q选择所需插入的文件 q也可以通过“常用”工具栏中的“媒体”中“插件”插入视 频文件 41 q在网页文档中插入视频文件后，选中插件符号 q在“属性”面板中设置属性 42 q在main.html网页的右下方插入视频film.wmv(文件在sc2文件 夹中)，宽170，高200 q先将该单元格拆分成2行 q在smsc.html网页中插入Flash文件flash.swf(文件在sc2文件夹 中)，宽585，高140 q在smsc.html网页中插入音频文件sound_01.mp3，(文件在sc2 文件夹中任选)，隐藏插件符号，能循环自动播放。 43 44 q完成示例18 q在完成示例18基础上，完成下列操作 q设