DreamweaverCS3网页设计与制作教程第2版课件作者申莉莉教案10章节.ppt

第10章 CSS样式 本章主要内容是CSS样式的创建方法和它的应用，并就如何编辑CSS样式中的文字格式、背景格式、文本块格式、方框格式、边框格式、列表格式、定位格式、扩展格式等作了详细的讲解，以实例说明了如何应用CSS样式对网页进行编辑。 通过本章的学习习，能够掌握运用CSS样式对网页进行设计和制作技巧。 第10章 CSS样式 10.1 案例：利用CSS样式制作个人主页 【案例目的】用CSS制作个人主页，效果如图10-1所示。 第10章 CSS样式 第10章 CSS样式 10.1.1 CSS样式 CSS是层叠样式表（Cascading Style Sheets）的简称，利用它可以对网页中的文本内容进行精确的格式化控制。CSS样式不仅能够控制一篇文档中的文本样式，而且通过采用外部链接的方式，还可以控制多篇文档的文本格式。对CSS样式的定义进行修改时，文档中所有应用该样式的文本格式也会自动发生改变。 使用CSS，可以将样式和结构分离；能以前所未有的能力控制页面的布局；可以制作体积更小下载更快的网页；可以更快更容易地维护及更新大量的网页；还可以使浏览器成为更友好的界面。 第10章 CSS样式 10.1.2 创建CSS样式 CSS样式最大的优点是它具有自动更新功能，当应用了CSS格式之后，如果不满意，仅需要修改CSS样式就可以更新所有的应用，而不用像设置HTML样式那样一个一个地修改。 (1）启动界面打开后，如果没有CSS样式窗口，则在菜单窗口中选中CSS样式，使得CSS样式显示。CSS样式面板如图10-2所示。 第10章 CSS样式 第10章 CSS样式 (2) CSS样式面板显示在设计浮动面板组，单击面板组右上角的“显示菜单”按钮，弹出下拉菜单如图10-3所示。 第10章 CSS样式 (3) 从其中选择“新建”选项卡。或者单击CSS样式面板右下角的“新建CSS样式”按钮，打开如图10-4所示的新建样式对话框。在名称处输入要创建的样式的名称colour. 第10章 CSS样式 （4) 选择CSS样式类型： “类（可应用于任何标签）”，可以生成一个新的样式表，制作完毕后可以在样式面板中看到制作完成的样式。在应用的时候，首先在页面选中对象，然后选择样式即可。该类型样式名称必须以英文句点“.”开头，如果没有输入句点，Dreamweaver会自动添加在“名称”文本框中。它是唯一可以被应用于文档中任何文本的样式类型，而不用考虑控制文本的标签。所以可用于类样式的名称都将显示在样式工具栏中。 “标签（重新定义特定标签的外观）”，可以将现有的标签赋上样式，制作完毕以后不需要选中对象就可以直接应用到页面上去。 “高级（TD、伪类选择器等）”，需要在“选择器”后的下拉列表框中选择一个选择器的类型，也可以在“选择器”后的下拉列表框中输入一个选择器类型。 第10章 CSS样式 （5) 定义一个外部连接的CSS还是定义一个仅应用于当前文档的CSS。 “自定义”：定义一个外部连接的CSS。 “仅仅对该文档”：定义的CSS样式只能在当前文档中使用。 （6) 单击“确定”按钮，出现“保存样式表文件为”对话框，如图10-5所示。 第10章 CSS样式 第10章 CSS样式 （7) 选择样式表所保存的位置，单击“保存”按钮，出现CSS设置对话框如图10-6所示。 第10章 CSS样式 设置相应的属性，如选择红色，单击“确定”，一个新的CSS样式创建成功。如图10-7所示。 第10章 CSS样式 10.2 设置CSS样式格式 在Dreamweaver中，通过CSS样式定义对话框可以对CSS样式格式进行精确定制，在CSS面板上新建CSS样式时可以进行设置，点击CSS样式面板中的图标 可以对一个新样式进行定义，选定名称后，点击“确定”按钮，出现如图10-5所示界面，从中可以看出，CSS共有8个选项，可以分别对这8个选项进行设置。 第10章 CSS样式 10.2.1 编辑文字格式 在CSS样式定义对话框中单击左边的“类型”，右边区域显示可以设置的有关文字格式方面的CSS样式。如图10-8所示。 第10章 CSS样式 10.2.1 编辑文字格式 第10章 CSS样式 10.2.2 编辑背景格式 在CSS样式定义对话框中单击左边的“背景”，右边区域显示可以设置CSS样式的背景格式，如图10-9所示。 重复：可以设置是否允许背景图像被重复。“不重复”只在应用样式的元素开始部分显示一次图像；“重复”在应用样式的元素背景上纵向和横向重复显示该图像；“横向重复”相应的显示图像的横向重复延伸；“纵向重复”相应的显示图像的纵向重复延伸。 附件：设定当拖动浏览器滚动条浏览滚动页面时，背景图像是固定在它的原始