《实战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