《实战Dreamweaver CS5 网页制作教程 第2版 教学课件 ppt 作者 刘天真 第5章 使用CSS样式》由会员分享，可在线阅读，更多相关《实战Dreamweaver CS5 网页制作教程 第2版 教学课件 ppt 作者 刘天真 第5章 使用CSS样式（57页珍藏版）》请在金锄头文库上搜索。
1、学习目标,能够创建、编辑、删除CSS样式 能够创建并灵活运用类样式 能够创建标签样式重新定义HTML标签 能够创建并灵活运用复合内容样式。 能够附加外部样式表文件。,5.1 类样式的创建与应用 5.2 标签样式与复合内容样式的创建与应用,本章内容,5.1 类样式的创建与应用,5.1.1 案例制作：书法背后的人生,通过本案例的操作，你将学会: 1）创建CSS样式的一般方法。 2）如何创建和应用类样式。,5.1 类样式的创建与应用,5.1.1 案例制作：书法背后的人生,操作步骤： （1）规划站点 新建文件夹“shufa_beihou”，将素材文件夹中所有文件和文件夹拷贝到“shufa_beihou
2、”文件夹中。 （2）定义站点 在Dreamweaver CS5中，单击菜单“站点”“新建站点”命令，通过“站点设置对象”对话框定义站点，站点名称为“菁菁家园”，本地站点文件夹设置为shufa_beihou文件夹。打开shufa_rensheng_1.html。 （3）创建并应用类样式CSS样式“.content” 该样式用来修饰文章内容，字体为宋体，大小为9pt，颜色代码为#090，行高140%。 1）选择菜单“窗口”“CSS样式”命令，打开“CSS样式”面板，如果“CSS样式”命令前已打对勾，表示“CSS样式”面板已经打开，无需执行此命令。 2）单击“CSS样式”面板右下角的新建CSS规则按
3、钮 ，打开“新建CSS规则”对话框。,5.1 类样式的创建与应用,5.1.1 案例制作：书法背后的人生,操作步骤： 3）在对话框中“选择器类型”选择“类（可用于任何HTML元素）”，“选择器名称”文本框中输入“.content”，“规则定义”选择“仅限该文档”，如图所示。,5.1 类样式的创建与应用,5.1.1 案例制作：书法背后的人生,操作步骤： 4）单击“确定”按钮，打开“CSS规则定义”对话框，在左侧“分类”列表中选择“类型”，右侧设置字体为宋体，大小为9pt，行高140%，颜色为#090，如图所示。,5.1 类样式的创建与应用,5.1.1 案例制作：书法背后的人生,操作步骤： 5）设置
4、完成后单击“确定”按钮，在“CSS样式”面板中会显示刚才创建的样式。 6）应用样式。选中文章内容，单击“属性”面板中的“类”下拉列表框，选择“content”，应用content样式，如图所示。按F12预览，可以看到效果。（4）创建并应用类样式CSS样式“.title” 该样式用来修饰文章的标题，字体为宋体，大小为12pt，颜色代码为#060。 1）单击“CSS样式”面板右下角的新建CSS规则按钮 ，打开“新建CSS规则”对话框。 2）“选择器类型”选择“类（可用于任何HTML元素）”，“选择器名称”文本框中输入“.title”，“规则定义”选择“仅限该文档”。,5.1 类样式的创建与应用,5
5、.1.1 案例制作：书法背后的人生,操作步骤： 3）单击“确定”按钮，打开“CSS规则定义”对话框，在左侧“分类”列表中选择“类型”，右侧设置字体为宋体，大小为12pt，颜色为#060，如图所示。,5.1 类样式的创建与应用,5.1.1 案例制作：书法背后的人生,操作步骤： 4）设置完成后单击“确定”按钮，在“CSS样式”面板中会显示刚才创建的样式。 5）应用样式。选中文章标题“书法背后的人生”，单击“属性”面板中的“类”下拉列表框，选择“title”，应用title样式，按F12预览，可看到应用样式后的效果。 （5）创建并应用类样式“.banquan” 1）单击“CSS样式”面板右下角的新建
6、CSS规则按钮 ，打开“新建CSS规则”对话框。“选择器类型”选择“类”，“选择器名称”文本框中输入.banquan，“规则定义”选择“仅限该文档”，单击“确定”按钮，打开“CSS规则定义”对话框。 2）在“类型”类别中设置字体为宋休，字体大小为12px，颜色为#FFF，在“区块”类别中设置“文本对齐”为居中，设置完成后单击“确定”按钮。 3）应用样式。选择版权信息“版权所有：浪漫电子工作室 邮箱：”，在“属性面板”中“类”选择应用banquan样式，按F12预览，可看到效果。,5.1 类样式的创建与应用,5.1.1 案例制作：书法背后的人生,操作步骤： （6）创建并应用类样式CSS样式“.b
7、iankuang”，该样式用于对表格边框的修饰。 1）用同样的方法创建一个“.biankuang”的样式，在左侧“分类”列表中选择“边框”，“样式”设置如图所示。,5.1 类样式的创建与应用,5.1.1 案例制作：书法背后的人生,操作步骤： 2）选中图像image/flower.jpg，在状态栏标签选择器中选中图像所在的单元格标签，单击“属性”面板中的“类”下拉列表框，选择“biankuang”样式，按F12预览。 （7）设置网页属性 1）选择主菜单“修改”“页面属性”命令，打开“页面属性”对话框。 2）设置“页面字体”为“宋体”，大小为12像素，设置“左边距”、“右边距”、“上边距”、“下边
8、距”为0像素。按F12预览，可以看到网页效果。,5.1 类样式的创建与应用,1. CSS样式的组织形式 Dreamweaver CS5中CSS样式有三种组织方式分别为：内嵌CSS样式、文档内部CSS样式、外部文件CSS样式。 （1）内嵌CSS样式 内嵌CSS样式非常简单，只需在相应的HTML标签中根据给出的提示写入相应的CSS属性即可。例如在标签中创建一个样式，字体为宋体，大小28px，颜色为绿色。 （2）文档内部CSS样式 文档内部CSS样式，直接生成于网页的标签内，不生成文件，作用范围仅限于本网页。如果用户需要定义只在站点内一个网页内使用的样式，则可以使用文档内部样式， （3）外部文件CS
9、S样式 外部文件CSS样式是将一系列CSS样式存放在一个扩展名为“.css”的外部文件中，通过链接或导入到网页文件中应用。,5.1.2 新知解析,5.1 类样式的创建与应用,2. CSS样式的类型 在Dreamweaver CS5中CSS样式根据作用的不同可以分为以下几种类型。 （1）类样式 类样式又称为自定义样式，由用户命名，以“.”开头，可以应用于任何HTML标签。如类样式.content。代码如下： .content font-size: 9pt; color: #090; text-align: left; ,5.1 类样式的创建与应用,（2）标签样式 标签样式又称重定义HTML标签，
10、它是将原有的HTML标签重新定义，给原有的标签赋予新的样式，如重新定义（标题2）标签，代码如下所示，字体为黑体，大小为14px，颜色为红色，重新定义后，网页中所有应用标题2的文本都由系统默认的样式变为黑体，14px，红色。代码如下： h2 font-family: “黑体“; font-size: 14px; color: #F00; ,5.1 类样式的创建与应用,（3）ID样式 该样式主要应用于与标签或某一特定标签结合时定义的独立样式，以符号“”开头，只能应用于网页中的一个标签，如#main样式，代码如下所示，。 #main height: 600px; width: 776px; （4）复
11、合内容样式 该样式用于重新定义一些特定的标签组合或包含了特定ID属性的标签，例如定义h1 span复合内容样式，代码如下所示，也常用于设置超链接的四种状态。 h1 span font-size: 16px; font-weight: bold; ,5.1 类样式的创建与应用,3. CSS样式面板 CSS样式的各项设置集成于“CSS样式”面板中，通过“CSS样式”面板，可以方便地实现CSS样式的创建、编辑、删除，也可以附加已有的CSS样式。为用户管理和使用CSS样式提供了极大的方便。 （1）打开“CSS样式”面板的方法 按ShiftF11键或选择菜单“窗口”“CSS样式”命令 （2）“CSS样式
12、”面板的结构 Dreamweaver CS5中的“CSS样式”面板较已往的版本有所改进，变得更加方便易用，共分为两个部分，上半部分显示CSS样式，下半部分则显示所选定的CSS样式的属性。,5.1 类样式的创建与应用,4. 创建CSS样式的一般方法 （1）打开新建CSS规则对话框 打开CSS规则对话框的方法是打开“CSS样式”面板，单击面板右下角的新建CSS规则按钮。 （2）定义要创建的CSS样式类型 （3）选择定义CSS样式的位置 （4）设置和应用CSS样式的属性,5.1 类样式的创建与应用,5. 创建类样式 在此创建一个用于修饰文本的类样式，字体为宋体，大小为9pt，颜色代码为#666，行高
13、140%，来介绍类样式的操作方法。操作步骤如下。 1）选择菜单“窗口”“CSS样式”命令，打开“CSS样式”面板。 2）单击“CSS样式”面板右下角的新建CSS规则按钮，打开“新建CSS规则”对话框。 3）“选择器类型”项选择“类”，“选择器名称”文本框中输入“.content”，“规则定义”选择“仅限该文档”。 4）单击“确定”按钮，打开“CSS规则定义”对话框，在“分类”列表中选择“类型”。设置字体为宋体，大小为9pt，行高140%，颜色为#090。 5）设置完成后单击“确定”按钮，在“属性”面板和“CSS样式”面板中会显示新建的样式。 6）选择一段文本，单击“属性”面板中的“类”下拉列表
14、框，选择content即可应用该样式。,5.1 类样式的创建与应用,6. 类样式的编辑 若对已创建的类样式不满意，可以进行编辑。选择某一样式，单击“CSS样式”面板底部的编辑样式表按钮，或直接双击某一样式，打开“CSS规则定义”对话框进行编辑，其它类型的样式也如此编辑。选择某一样式，在“CSS样式”面板显示的样式属性中进行编辑，单击“添加属性”按钮可以添加其他属性。 7. 类样式的应用 如果要应用类样式的网页元素是文本，可以选中该文本，在“属性”面板中的“类”选项选择要应用的样式即可；如果要应用类样式的是其他网页元素，如表单、图像等，则可以选中该元素，在“属性”面板中“类”选项选择要应用的样式
15、即可。,5.1 类样式的创建与应用,8. CSS样式的删除 选择“CSS样式”面板中某一样式，单击面板中“删除CSS规则”按钮，可以删除这一样式，删除样式因样式表存在的形式不同而细微的差别。 1）文档内部CSS样式的删除 如果样式表在文档内部，删除某一样式，会将文档内的样式删除，而应用类样式的代码不会被删除。 2）外部文件CSS样式的删除 外部文件CSS样式在“CSS样式”面板中会显示文件名称和样式。,5.1 类样式的创建与应用,9. CSS样式属性的设置 CSS样式的属性有很多，以上所接触的属性只是一小部分，属性设置主要在“CSS规则定义”对话框中进行。由于目前下载使用的商业模板大量地应用了
16、CSS样式，因此我们将按照类别详细讲述CSS样式的属性设置。 （1）CSS样式“类型”属性 （2）CSS样式“背景”属性 （3）CSS样式“区块”属性 （4）CSS样式“方框”属性 （5）CSS样式“边框”属性 （6）CSS样式“列表”属性 （7）CSS样式“定位”属性 （8）CSS样式“扩展”属性,5.1 类样式的创建与应用,9. CSS样式的编辑 若对已创建的CSS样式不满意，可以进行编辑，操作方法如下： 选择某一样式，单击“CSS样式”面板底部的编辑样式表按钮 直接双击某一样式，打开“CSS规则定义”对话框，进行编辑。 选择某一样式，在“CSS样式”面板显示的样式属性中进行编辑， 单击“添加属性”按钮可以添加其他属性。,5.1 类样式的创建与应用,12. CSS样式属性的设置 CSS样式的属性有很多，以上所接触的属性只是一小部分，属性设置主要在“CSS规则定义”对话框中进行，按照类别将属性设置介绍如下： CSS样式“类型”属性 C
