DreamweaverCC2015中文版案例教程第2版 教学资源课件第3章.ppt

《DreamweaverCC2015中文版案例教程第2版 教学资源课件第3章.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第3章使用CSS美化网页由于HTML语言本身的一些客观特点，导致了其结构与显示不分离的特点，这也是阻碍其发展的一个原因。因此，W3C很快发布了CSS（层叠样式表）来解决这一问题，以便不同的浏览器都能够正常地显示同一页面。本章主要讲解CSS的创建与编辑及CSS语法结构，从而阐明CSS在不同网页中的技术应用。3.1CSS样式表概述层叠样式表（CSS）是为弥补HTML的缺点而开发的一系列格式设置规则，通过CSS可以非常方便地控制Web页内容的外观，对页面布局、字体、颜色、背景和其他图文效果实现更加精确地控制，实现一些原来HTML标签无法实现的效果。3.1CSS样式表概述3.1.1认识CSSCSS

2、是CascadingStyleSheet的缩写，有些书上叫做“层叠样式表”或“级联样式表”，现在已经为大多数的浏览器所支持，成为网页设计必不可少的工具之一。3.1CSS样式表概述3.1.2"CSS设计器面板”面板在DreamweaverCC2015中全面支持最新的CSS3属性设计，规划了“CSS设计器”面板，并且对CSS样式的创建方法和创建流程进行了改进，使得用户在Dreamweaver中创建CSS样式更加方便和快捷。在DreamweaverCC2015中，“CSS设计器”3.1CSS样式表概述3.1.3CSS设计器类型层叠样式表是一系列格式的规则，它们控制网页各元素的定义和外观，在Dre

3、amweaverCC2015的CSS样式中提供了多种类型的CSS选择器，在创建CSS样式时，首先需要了解各种类型选择器的作用，以便选择合适的选择器创建CSS样式。3.1CSS样式表概述3.1.4使用CSS控制指定元素标签选择器可以改变标签的显示外观，IDCSS样式主要用于定义设置特定ID名称的元素，通常在一个页面中，ID名称是不能重复的，所以定义IDCSS样式也是特定指向页面唯一的元素。接下来通过实例练习选择器在网页制作中的使用方法。3.2CSS样式设置通过CSS样式可以定义页面中元素的几乎所有外观效果，包括文本、背景、边框、位置、效果等。在DreamweaverCC2015中为了方便初学

4、者的可视化操作，提供了集成的“CSS设计器”面板，在该面板中设置几乎所有的CSS样式属性，完成CSS样式属性的设DreamweaverCC2015设置后，DreamweaverCC2015会自动生成相应的CSS样式代码。3.2CSS样式设置3.2.1布局样式设置布局样式主要用来定义页面中各元素的位置和属性，如元素的大小和定位方式等，通过padding（填充）和margin(边界)属性还可以设置各元素（如图像）水平和垂直方向上的空白区域。3.2CSS样式设置3.2.2背景样式设置在使用HTML编写的页面中，背景只能使用单一的色彩或利用背景图像水平垂直方向平铺，而通过CSS样式可以更加灵活地对

5、背景进行设置。3.2CSS样式设置3.2.3文本样式设置文本是网页中最基本的重要元素之一，文本的CSS样式设置是经常使用的，也是在网页制作过程中使用频率最高的。3.2CSS样式设置3.2.4边框样式设置通过为网页元素设置边框CSS样式，可以对网页元素的边框颜色、粗细和样式进行设置。3.3案例-制作企业网站页面通过CSS样式可以定义页面中元素的几乎所有外观效果，包括文本、背景、边框、位置、效果等。在DreamweaverCC2015中为了方便初学者的可视化操作，提供了集成的“CSS设计器”面板，在该面板中设置几乎所有的CSS样式属性，完成CSS样式属性的设DreamweaverCC2015设

6、置后，DreamweaverCC2015会自动生成相应的CSS样式代码。3.4知识与技能梳理Dreamweaver是最先通过层叠样式表为使用者提供方便的Web创作工具之一。通过Dreamweaver直观的界面，用户可以访问超过70种不同的CSS设置，这些设置可以影响到页面元素的外观，从文本颜色、间距、表格外观等。Dreamweaver让用户按自己的方式工作：随时创建用户的样式表，然后在准备好的时候链接它，或者像创建用户的Web页一样，一个一个地创建样式。在本章中用户会发现CSS是如何工作的，以及为什么需要它。通过自己的实践，用户将进入到有关于当前CSS命令的详细信息，以及如何将它们应用到自

7、己的Web页面和站点中。重要工具：CSS样式表。核心技术：使CSS样式表对页面的布局、字体、颜色、背景和其他效果能够实现更加精确的控制。实际应用：企业网站、旅游网站、个人主页。