《Dreamweaver CC网页设计与制作教程》课件-第6章 CSS设计器

第6章CSS设计器本章主要内容是CSS的创建和应用，并就如何编辑CSS中的布局、文字、边框和背景作详细的讲解。通过本章的学习和练习，能够掌握运用CSS来对网页进行设计和制作。6.1案例1：用CSS美化页面【案例目的】美化页面文本与图片的排版,效果如图6-1所示。【核心知识】熟悉使用CSS设计器。图6-1制作简单网站效果图6.1.1初识“CSS设计器”“CSS设计器”面板属于CSS属性检查器，通过它可以“可视化”地创建CSS样式和规则，并设置属性和媒体查询。如图所示，全新的“CSS设计器”面板包括四个窗格。6.1.2在CSS设计器中定义CSS选择器在“CSS设计器”中，选择“源”窗格中的某个CSS源或“@媒体”窗格中的某个媒体查询后，即可在选择器窗口寻找相关选择器。如果是新建的CSS文件，在文档中选择元素，在“选择器”窗格中，单击，CSS设计器智能确定并提示使用相关选择器（最多三条规则，例如#wrapper#mainp。）；也可以单击选中某选择器，输入所需的名称来为其重新命名。6.2设置编辑CSS属性在CSS设计器的属性窗格中分为布局、文本、边框、背景和其他（“仅文本”属性而非具有可视控件的属性的列表）几个类别，并由“属性”窗格顶部的不同图标表示。6.2设置编辑CSS属性6.2.1文本属性CSS设计器中除了字体的大小和颜色外，还可以设置字体的类型、字体变量、字体粗细，行高，文本对齐方式、修饰方式和文本首行缩进；并且可以设置文本的阴影效果和文本的变形、字符和字之间的空格、垂直对齐方式等。6.2设置编辑CSS属性6.2.2背景属性CSS允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果。背景色可以在颜色选择器中选择，也可以通过直接输入颜色模型的数值进行颜色设置。通过添加背景图片还可以为表格添加自己选定的背景图片，并对背景图片进行位置、大小、是否重复等进行设置。6.2设置编辑CSS属性6.2.3边框属性CSS边框属性可以创建出效果出色的边框，并且可以应用于任何元素。元素外边距内就是元素的的边框(border)，元素的边框就是围绕元素内容和内边据的一条或多条线。6.2设置编辑CSS属性6.2.4布局属性CSS设计器中的布局属性包含边距margin、填充padding和位置position等。边框border是指内容的边界大小；边距是指外边距，填充是内边距，设置边距，指所设置内容所在边框外面的大小，设置填充，则所设置内容在边框里面的大小，如图所示。图6-26边距、填充和内容的关系6.2设置编辑CSS属性6.2.5超链接在CSS设计器中可以为超链接定义以下属性规则：（1）链接字体：指定链接文本使用的默认字体系列。默认情况下，Dreamweaver

使用为整个页面指定的字体系列。（2）大小：指定链接文本使用的默认字体大小。（3）链接颜色：指定应用于链接文本的颜色。（4）已访问链接：指定应用于已访问链接的颜色。（5）变换图像链接：指定当鼠标（或指针）位于链接上时应用的颜色。（6）活动链接：指定当鼠标（或指针）在链接上单击时应用的颜色（7）下划线样式：指定应用于链接的下划线样式6.3案例2:外部CSS文件【案例目的】利用外部CSS文件将图6-43的图a）设置为图b）格式。【核心知识】熟悉创建CSS文件。图6-43a

应用外部CSS文件前

图6-43b应用外部CSS文件后6.3.1创建新CSS文件在DreamweaverCC中有两种创建新的CSS文件方法。1.打开“CSS设计器”，在“源”窗格中添加单击按钮，选择“创建新的CSS文件”，弹出“创建新的CSS文件”对话框。2.在菜单“文件”中选择“新建”命令，在页面类型栏选择“CSS”，创建一个新的空白CSS文件。打开一个新的未命名的CSS文件，在此可以为新文件添加选择器，并设置其各个属性。6.3.2附加现有CSS文件在CSS设计器中，除了可以“在页面中定义”，“创建新的CSS文件”，还可以“附加现有的CSS文件”。6.4上机实训实训项目：创建新CSS文件，并附加到新html文档中内容要求：重新制作案例1“用CSS