DreamweaverCC2015中文版案例教程第2版全套配套课件教学资源第3章.pptVIP

第3章 使用CSS美化网页 由于HTML语言本身的一些客观特点，导致了其结构与显示不分离的特点，这也是阻碍其发展的一个原因。因此，W3C很快发布了CSS（层叠样式表）来解决这一问题，以便不同的浏览器都能够正常地显示同一页面。本章主要讲解CSS的创建与编辑及CSS语法结构，从而阐明CSS在不同网页中的技术应用。 3.1 CSS样式表概述 层叠样式表（CSS）是为弥补HTML的缺点而开发的一系列格式设置规则，通过CSS 可以非常方便地控制Web页内容的外观，对页面布局、字体、颜色、背景和其他图文效果实现更加精确地控制，实现一些原来HTML标签无法实现的效果。 3.1 CSS样式表概述 3.1.1 认识CSS CSS是Cascading Style Sheet的缩写，有些书上叫做“层叠样式表”或“级联样式表”，现在已经为大多数的浏览器所支持，成为网页设计必不可少的工具之一。 3.1 CSS样式表概述 3.1.2 CSS设计器面板”面板 在Dreamweaver CC 2015中全面支持最新的CSS3 属性设计，规划了“CSS设计器”面板，并且对CSS 样式的创建方法和创建流程进行了改进，使得用户在Dreamweaver中创建CSS样式更加方便和快捷。 在Dreamweaver CC 2015中，“CSS设计器” 3.1 CSS样式表概述 3.1.3 CSS设计器类型 层叠样式表是一系列格式的规则，它们控制网页各元素的定义和外观，在Dreamweaver CC 2015的CSS样式中提供了多种类型的CSS选择器，在创建CSS样式时，首先需要了解各种类型选择器的作用，以便选择合适的选择器创建CSS样式。 3.1 CSS样式表概述 3.1.4 使用CSS控制指定元素 标签选择器可以改变标签的显示外观，ID CSS样式主要用于定义设置特定ID名称的元素，通常在一个页面中，ID名称是不能重复的，所以定义ID CSS样式也是特定指向页面唯一的元素。接下来通过实例练习选择器在网页制作中的使用方法。 3.2 CSS样式设置 通过CSS样式可以定义页面中元素的几乎所有外观效果，包括文本、背景、边框、位置、效果等。在Dreamweaver CC 2015中为了方便初学者的可视化操作，提供了集成的“CSS设计器”面板，在该面板中设置几乎所有的CSS样式属性，完成CSS样式属性的设Dreamweaver CC 2015设置后，Dreamweaver CC 2015会自动生成相应的CSS样式代码。 3.2 CSS样式设置 3.2.1 布局样式设置 布局样式主要用来定义页面中各元素的位置和属性，如元素的大小和定位方式等，通过padding（填充）和margin (边界)属性还可以设置各元素（如图像）水平和垂直方向上的空白区域。 3.2 CSS样式设置 3.2.2 背景样式设置 在使用HTML编写的页面中，背景只能使用单一的色彩或利用背景图像水平垂直方向平铺， 而通过CSS样式可以更加灵活地对背景进行设置。 3.2 CSS样式设置 3.2.3 文本样式设置 文本是网页中最基本的重要元素之一，文本的CSS样式设置是经常使用的，也是在网页制作过程中使用频率最高的。 3.2 CSS样式设置 3.2.4 边框样式设置 通过为网页元素设置边框CSS样式，可以对网页元素的边框颜色、粗细和样式进行设置。 3.3 案例-制作企业网站页面 通过CSS样式可以定义页面中元素的几乎所有外观效果，包括文本、背景、边框、位置、效果等。在Dreamweaver CC 2015中为了方便初学者的可视化操作，提供了集成的“CSS设计器”面板，在该面板中设置几乎所有的CSS样式属性，完成CSS样式属性的设Dreamweaver CC 2015设置后，Dreamweaver CC 2015会自动生成相应的CSS样式代码。 3.4 知识与技能梳理 Dreamweaver是最先通过层叠样式表为使用者提供方便的Web创作工具之一。通过Dreamweaver 直观的界面，用户可以访问超过70种不同的CSS设置，这些设置可以影响到页面元素的外观，从文本颜色、间距、表格外观等。Dreamweaver让用户按自己的方式工作：随时创建用户的样式表，然后在准备好的时候链接它，或者像创建用户的Web页一样，一个一个地创建样式。 在本章中用户会发现CSS是如何工作的，以及为什么需要它。通过自己的实践，用户将进入到有关于当前CSS命令的详细信息，以及如何将它们应用到自己的Web页面和站点中。 重要工具：CSS样式表。 核心技术：使CSS样式表对页面的布局、字体、颜色、背景和其他效果能够实现更加精确的控制。 实际应用：企业网站、旅游网站、个人主页。