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

《Dreamweaver CS3网页设计与制作教程 第2版 教学课件 作者申莉莉教案10章.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第10章CSS样式本章主要内容是CSS样式的创建方法和它的应用，并就如何编辑CSS样式中的文字格式、背景格式、文本块格式、方框格式、边框格式、列表格式、定位格式、扩展格式等作了详细的讲解，以实例说明了如何应用CSS样式对网页进行编辑。通过本章的学习习，能够掌握运用CSS样式对网页进行设计和制作技巧。第10章CSS样式10.1案例：利用CSS样式制作个人主页【案例目的】用CSS制作个人主页，效果如图10-1所示。【核心知识】将Div层根据相应的结构关系插入到页面中，分别设置各Div层相应的CSS样式，再给Div层添加相应的内容。第10章CSS样式

2、图10-1个人主页效果图第10章CSS样式10.1.1CSS样式CSS是层叠样式表（CascadingStyleSheets）的简称，利用它可以对网页中的文本内容进行精确的格式化控制。CSS样式不仅能够控制一篇文档中的文本样式，而且通过采用外部链接的方式，还可以控制多篇文档的文本格式。对CSS样式的定义进行修改时，文档中所有应用该样式的文本格式也会自动发生改变。使用CSS，可以将样式和结构分离；能以前所未有的能力控制页面的布局；可以制作体积更小下载更快的网页；可以更快更容易地维护及更新大量的网页；还可以使浏览器成为更友好的界面。第10章CSS样

3、式10.1.2创建CSS样式CSS样式最大的优点是它具有自动更新功能，当应用了CSS格式之后，如果不满意，仅需要修改CSS样式就可以更新所有的应用，而不用像设置HTML样式那样一个一个地修改。(1）启动界面打开后，如果没有CSS样式窗口，则在菜单窗口中选中CSS样式，使得CSS样式显示。CSS样式面板如图10-2所示。第10章CSS样式图10-2CSS样式面板第10章CSS样式(2)CSS样式面板显示在设计浮动面板组，单击面板组右上角的“显示菜单”按钮，弹出下拉菜单如图10-3所示。图10-3CSS样式的下拉菜单第10章CSS样式(3)从其中选

4、择“新建”选项卡。或者单击CSS样式面板右下角的“新建CSS样式”按钮，打开如图10-4所示的新建样式对话框。在名称处输入要创建的样式的名称colour.图10-4新建样式对话框第10章CSS样式（4)选择CSS样式类型：“类（可应用于任何标签）”，可以生成一个新的样式表，制作完毕后可以在样式面板中看到制作完成的样式。在应用的时候，首先在页面选中对象，然后选择样式即可。该类型样式名称必须以英文句点“.”开头，如果没有输入句点，Dreamweaver会自动添加在“名称”文本框中。它是唯一可以被应用于文档中任何文本的样式类型，而不用考虑控制文本的标

5、签。所以可用于类样式的名称都将显示在样式工具栏中。“标签（重新定义特定标签的外观）”，可以将现有的标签赋上样式，制作完毕以后不需要选中对象就可以直接应用到页面上去。“高级（TD、伪类选择器等）”，需要在“选择器”后的下拉列表框中选择一个选择器的类型，也可以在“选择器”后的下拉列表框中输入一个选择器类型。第10章CSS样式（5)定义一个外部连接的CSS还是定义一个仅应用于当前文档的CSS。“自定义”：定义一个外部连接的CSS。“仅仅对该文档”：定义的CSS样式只能在当前文档中使用。（6)单击“确定”按钮，出现“保存样式表文件为”对话框，如图10-

6、5所示。第10章CSS样式图10-5保存样式表第10章CSS样式（7)选择样式表所保存的位置，单击“保存”按钮，出现CSS设置对话框如图10-6所示。图10-6CSS设置对话框第10章CSS样式设置相应的属性，如选择红色，单击“确定”，一个新的CSS样式创建成功。如图10-7所示。图10-7CSS样式面板第10章CSS样式10.2设置CSS样式格式在Dreamweaver中，通过CSS样式定义对话框可以对CSS样式格式进行精确定制，在CSS面板上新建CSS样式时可以进行设置，点击CSS样式面板中的图标可以对一个新样式进行定义，选定名称后，点击“

7、确定”按钮，出现如图10-5所示界面，从中可以看出，CSS共有8个选项，可以分别对这8个选项进行设置。第10章CSS样式10.2.1编辑文字格式在CSS样式定义对话框中单击左边的“类型”，右边区域显示可以设置的有关文字格式方面的CSS样式。如图10-8所示。字体：可以在下拉菜单中设置当前样式所用的字体。如果列表中没有需要的字体，则可以通过编辑字体列表加以选择，如图10-8所示。第10章CSS样式10.2.1编辑文字格式图10-8编辑CSS样式字体第10章CSS样式10.2.2编辑背景格式在CSS样式定义对话框中单击左边的“背景”，右边区域显示可

8、以设置CSS样式的背景格式，如图10-9所示。重复：可以设置是否允许背景图像被重复。“不重复”只在应用样式的元素开始部分显示一次图像；“重复”在应用样