《CSS样式的创建和运用方法讲义》由会员分享，可在线阅读，更多相关《CSS样式的创建和运用方法讲义（45页珍藏版）》请在金锄头文库上搜索。
1、DreamwaverCS4DreamwaverCS4CSS样式样式链接链接框架网页框架网页多媒体多媒体1回顾q创建本地站点和创建网页q创建表格和编辑表格q网页中添加文本q网页中添加图片q创建网页存放的位置q表格单元格大小调整q注意：先将所有内容(文字、图片)插入表格中，如果有需要再调整单元格q水平线颜色设置2教学内容q掌握CSS样式的创建和运用方法q掌握各种链接的创建方法q掌握框架网页的制作方法q掌握利用框架网页来组织由多个网页组成的画面q掌握框架网页中链接设置q网页中多媒体设置与应用3管理站点q打开站点q打开“站点”菜单，选择“管理站点”中“新建/站点”，在“本地根文件夹”中选择站点q删除站
2、点q通过“文件/站点”，选择“管理站点”中选择要删除的站点，点击“删除”4CSS样式的概念qCSS是一种用来进行网页风格设计的样式表技术，使用CSS样式可以对页面的布局、字体、颜色、背景和其他图文效果实现更加精确地控制，并且同一个样式可以应用于多个不同的对象，提高制作效率。qCSS样式是Cascading Style Sheets(层叠样式单)的简称，也可以称为“级联样式表”，它是一种网页制作的新技术，利用它可以对网页中的文本进行精确的格式化控制。q要管理一个系统的网站，使用CSS样式，可以快速格式化整个站点或多个文档中的字体、图像等网页元素的格式。并且，CSS样式可以实现多种不能用HTML样
3、式实现的功能。5CSS样式的功能qCSS是用来控制一个网页文档中的某文本区域外观的一组格式属性。q使用CSS能够简化网页代码，加快下载速度，减少上传的代码数量，从而可以避免重复操作。qCSS样式表是对HTML语法的一次革新，它位于文档的区，作用范围由CLASS或其他任何符合CSS规范的文本来设置。q对于其他现有的文档，只要其中的CSS样式符合规范，Dreamweaver就能识别它们。6新建CSS样式方法q通过CSS样式面板q点击“新建CSS规则”按钮，打开“新建CSS规则”对话框q通过属性面板q点击“CSS”按钮，“目标规则”选择“新CSS规则”，点击“编辑规则”按钮q选择“格式/CSS样式/
4、新建”菜单命令7新建CSS规则q设置选择器类型q选择器名称(以点开始)q规则定义范围8CSS规则定义qCSS规则分类q类型：主要用于设置文字格式q背景：主要用于设置文字、表格等背景q方框：主要用于设置图形、表格等大小q边框：主要用于设置表格边框q列表：主要用于设置项目符号q定位：确定对象位置q扩展：主要用于设置特殊光标9应用CSS样式规则q新建CSS规则样式后，就可以利用该样式快速设置页面上的网页元素样式，使网站具有统一的风格了。q应用CSS样式规则方法q在“属性”面板进行设定q通过快捷菜单设定10编辑CSS样式q对于创建的CSS样式，可以进行编辑操作，主要包括修改CSS样式属性、设置CSS样
5、式首选参数以及链接和导入CSS样式等。q编辑CSS样式规则方法q在“属性”面板中进行修改q在“CSS样式”面板中进行修改11示例1_CSS规则定义与应用q打开 “tk.html”网页q在网页顶端插入1行4列表格，表格宽450像素，边框为0，居中对齐q在表格中插入图片(图片在SC2文件夹中)，图片居中对齐q创建CSS规则“.ys1”(边框)q样式：groove；宽度：medium；颜色：#ccffccq将该CSS规则运用到表格中的图片上q创建CSS规则“.ys2”(类型)q字体：华文新魏；大小：36像素；粗体；颜色：#003300；居中对齐q将该CSS规则运用到正文标题上q创建CSS规则“.ys
6、3”(列表)q项目符号图像：zp.gif(SC2文件夹中)；位置：外q将该CSS规则运用到“成员行为”中编号上12示例1_样张13超链接的基础知识q超链接是网页中最重要的组成部分。超链接的应用范围很广，利用它不仅可以链接到其他网页，还可以链接到其他图像文件、多媒体文件及下载程序，也可以利用它在网页内部进行链接或是发送E-mail等。q在Dreamweaver CS4中，可以将文档中的任何文字及任意位置的图片设置为超链接。14创建超链接的常用方法q在Dreamweaver CS4中，可以随时随地在所需的位置创建各种超级链接，并且可以通过多种方法来创建超链接q可以在“属性”面板中创建q使用“插入”
7、菜单创建q使用“常用”工具栏中“超级链接”来创建q超级链接的分类q文本超链接q图像超链接q锚记链接qE-mail链接q图形热点链接15创建文本和图像链接q创建文本和图像链接方法q选择需要创建链接的对象q按右键选择“创建链接”(或者在属性面板上设置)q打开“选择文件”对话框，选择链接对象q注意：链接对象可以是网页、应用程序、各种媒体16创建电子邮件链接q创建电子邮件的方法q选择需要创建电子邮件链接的对象q打开“插入”菜单，选择 “电子邮件链接”q打开“电子邮件链接”对话框，输入邮件地址q或者在“属性”的“链接”文本框中输入“mailto :邮件地址”17示例2_创建链接q打开站点Mysite，在
8、网页main.html中创建链接q建立下部导航栏中“隐私条例”的文本链接，链接到tk.html网页q建立下部导航栏中“联系我们”的文本链接，链接到自己的邮箱18锚记设置q确定插入点位置q命名锚记q打开“插入”菜单，选择“命名锚记”q打开“命名锚记”对话框，输入“*” q创建锚记链接q选择需要创建锚记链接的对象q在“属性”面板，“链接”栏输入“#*”19示例3_创建锚记链接q打开网页“tk.html”q在标题前插入锚记，名称为“fanhui”q在网页末尾文字“返回页首”，创建锚记链接20图形热点链接q图像地图也是一种超链接，适用于较大的图像。q创建图像地图，可以在图像上创建不规则区域的链接或某个
9、部分区域的链接。q图像地图是将图片分为几个区域，这些区域又称为热点，单击不同的热点可以打开不同的链接，这样的链接就称为图形热点链接。21创建图像的热点链接q创建图像某个区域的超级链接，使之能链接到相应对象q选中网页中的图像地图q点击“属性”面板上的“热点工具”，在图像上确定“热点”区域q指定链接对象(网页、图像等)22示例4_创建热点链接q创建main.html网页图片中文字“快速网上冲印服务”的热点链接，链接到“wscy.html”网页23框架和框架集的概念q框架的概念q框架把浏览器窗口分成几个部分q每个部分显示不同的网页q使浏览器窗口同时包含多个网页q框架集的概念q框架集是HTML文件，定
10、义一组框架的布局和属性q包括框架的数目、大小、位置和每个框架中初始显示页面的URLq框架集不包含要在浏览器中显示的HTML内容24创建框架网页q创建框架网页步骤q打开“文件”菜单，选择“新建 ”q打开“新建文档”对话框q选择“示例中的页”q在“示例文件夹”中选择“框架页”q选择框架类型25保存框架网页q选择“文件/保存全部”菜单命令，依次保存框架集和框架q打开“保存为”对话框q按提示依次保存框架集和每个框架q框架集和框架都是以网页形式保存的框架集框架集框架集框架集框框框框架架架架26示例5_创建和保存框架网页q在站点中新建框架网页，框架集样式“上方固定”q在上方框架网页中输入文字“框架网页创建
11、示例”q在下方框架网页中插入图片“logo.jpg”q依次保存框架集和每个框架q框架集保存为kjj.htmlq上方框架网页保存为kj-top.htmlq下方框架网页保存为kj-under.html27框架中打开网页q将插入点放置在框架网页中q打开“文件”菜单，选择“在框架中打开”q打开“选择HTML文件”对话框q选择要在该框架中打开的网页28示例6_框架中打开网页q打开“Mysite”站点q在站点中新建框架网页，框架集样式“上方固定”q在上方框架中打开网页“Top.html”网页q在下方框架中打开Main.html网页q保存框架集为“Index.html”29框架的编辑q通过“框架”面板选择框
12、架集和框架q“窗口”菜单/“框架”，打开框架面板q鼠标点击选择q调整框架大小q通过鼠标拖动框架边框q在“框架”属性面板上可以设置精确设置q注意：q在编辑框架时，如果框架边框不可见q选择“查看/可视化助理/框架边框”，使框架边框可见30框架中的链接设置q框架中的链接q在一个框架中使用链接在另一个框架中打开网页q链接设置方法q选择文本或对象q在“属性”面板的“链接”中，点击文件夹图标q打开“选择文件”对话框，选择链接到的文件q在“属性”面板的“目标”下拉菜单中，选择显示方式q注意：框架中的链接必须在框架集中设置，否则无法选择显注意：框架中的链接必须在框架集中设置，否则无法选择显示方式示方式31示例
13、7_框架中的链接设置q设置上方框架中的链接q设置“首页”链接到“main.html” q“网上冲印”链接到“wscy.html”q“数码商城” 链接到“smsc.html”q设置链接网页显示方式q在“属性”面板的“目标”下拉菜单中，选择“mainFrame”显示方式32网页中的媒体q插入媒体类型q插入FLASH文件q插入插件(音频、视频)q插入ActiveX控件q插入媒体方法q选择“插入/媒体”菜单命令q或(选择“常用”工具栏上“媒体”按钮)33在网页中插入FLASH动画qFlash动画是网页上最流行的动画格式。q在Dreamweaver CS4中，Flash动画也是最常用的多媒体插件之一，它
14、将声音、图像和动画等内容加入到一个文件中并能制作较好的动画效果，同时使用了优化的算法将多媒体数据进行压缩，是文件变得很小，因此，非常适合在网上传播。34插入FLASH动画方法q将光标移至所需插入Flash动画的位置q打开“插入”菜单，选择“媒体”中的“SWF”q打开“选择文件对话框q选择所需插入的Flash动画q也可以通过“常用”工具栏中的“媒体”中“SWF”插入Flash动画35设置FLASH动画属性q在网页文档中插入Flash动画文件后，选中Flash动画q在“属性”面板中设置属性36网页中的声音格式q在Dreamweaver CS4中，可以向网页文档添加多种不同类型的声音文件和格式，例如
15、.wav、.midi和.mp3。q根据要添加声音的目的、文件大小、声音品质等要素，来确定插入哪种格式和方法。37插入声音文件方法q将光标移至所需插入声音文件的位置q打开“插入”菜单，选择“媒体”中的“插件”q打开“选择文件对话框q选择所需插入的声音文件q也可以通过“常用”工具栏中的“媒体”中“插件”插入声音文件38设置声音属性q在网页文档中插入声音文件后，选中插件符号q在“属性”面板中设置音频属性q通过“编辑标签”设置音频属性q选择插件符号，按右键，选择“编辑标签”，打开“标签编辑器”对话框q可以设置音频“自动播放”、“循环”、“隐藏”39插入视频文件方法q将光标移至所需插入视频文件的位置q打
16、开“插入”菜单，选择“媒体”中的“插件”q打开“选择文件对话框q选择所需插入的文件q也可以通过“常用”工具栏中的“媒体”中“插件”插入视频文件40设置视频属性q在网页文档中插入视频文件后，选中插件符号q在“属性”面板中设置属性41示例8_网页中添加多媒体对象q在main.html网页的右下方插入视屏film.wmv(文件在sc2文件夹中)，宽170，高200q先将该单元格拆分成2行q在smsc.html网页中插入Flash文件，flash.swf(文件在sc2文件夹中)，宽585，高140q在smsc.html网页中插入音频文件，(文件在sc2文件夹中任选)，隐藏插件符号，能循环自动播放。42课堂练习q完成示例18q在完成示例18基础上，完成下列操作q设置main.html网页图片的热点链接，链接到SC2文件夹中Flash.swfq设置wscy.html网页图片中文字“冲印我的相册”的图片热点链接，链接到cyxc.htmlq网页属性设置q将框架网页index.html标题设置为“E派网上冲印店”q将top.html网页中“链接颜色”、“已访问过的链接颜色”均设为#FFFFFF，链接始终无下划线43课后练习q实验指导qP187：实验28，范例(4)、(5)、(6)qP192：实验29，范例(4)、(5)44下周教学内容q网页中的特殊效果q表单45
