第3章CSS设计实践

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,CSS,网页设计标准教程,第,1,部分,CSS,核心原理,第,3,章,CSS,设计实践,手工方式编写页面,3.1,使用,Dreamweaver,进行,CSS,设置,3.2,上一章介绍了,CSS,的基本思想和基本使用方法。,在继续深入讲解各种,CSS,属性之前，在本章先进行一些实际的操作，实际编写一个比较完整的使用,CSS,的网页，为后面继续深入学习,HTML,和,CSS,打下基础。,本章将分别介绍如何使用手工代码方式，以及使用,Dreamweaver,软件可视化的方式分别完成同一个页面。,3.1,手工方式编写页面,图,3.1,体验,CSS,3.1.1,构建页面框架,考虑到单纯的文字显得贫乏，因此加入一幅图片作为简单的插图。,图片所在的位置与正文一样，使用,HTML,语言中的,标记，此时，,部分修改后的代码如下，源文件参见实例文件“,03-02.html”,。,部分代码省略,互联网发展的起源,1969,年，为了保障通信联络，美国国防部高级研究计划署,ARPA,资助建立了世界上第一个分组交换试验网,ARPANET,，连接美国四个大学。,ARPANET,的建成和不断发展标志着计算机网络发展的新纪元。,部分代码省略,图,3.3,加入图片,3.1.2,设置标题,体验,CSS,h1,color:white,; /*,文字颜色*,/,background-color:#0000FF; /*,背景色 *,/,text-,align:center,; /*,居中 *,/,padding:15px; /*,边距 *,/,省略,图,3.4,修改标题样式,3.1.3,控制图片,img,float:left,;,border:1px #9999CC dashed;,margin:5px;,图,3.5,图文混排,3.1.4,设置正文,p,font-size:12px;,text-indent:2em;,line-height:1.5;,padding:5px;,图,3.6,修改正文样式,3.1.5,设置整体页面,body,margin:0px;,background-,color:#CCCCFF,;,图,3.7,设置页面的整体效果,3.1.6,对段落进行分别设置,上面设置,CSS,样式使用的都是标记选择器，为了验证一下其他的选择器的用法，这里为两个文本段落分别设置不同的效果。,首先，分别给两个段落的,标记设置一个,id,属性，代码如下：,1969,年，为了保障通信联络，美国国防部高级研究计划署,ARPA,资助建立了世界上第一个分组交换试验网,ARPANET,，连接美国四个大学。,ARPANET,的建成和不断发展标志着计算机网络发展的新纪元。, 20,世纪,70,年代末到,80,年代初，计算机网络蓬勃发展，各种各样的计算机网络应运而生，如,MILNET,、,USENET,、,BITNET,、,CSNET,等，在网络的规模和数量上都得到了很大的发展。,一系列网络的建设，产生了不同网络之间互联的需求，并最终导致了,TCP/IP,协议的诞生。,然后在,CSS,部分设置如下,CSS,规则。,#p1,border-right:3px red double ;,#p2,border-right:3px orange double ;,图,3.8,对段落进行不同的设置,3.2,使用,Dreamweaver,进行,CSS,设置,3.2.1,创建页面,图,3.9,在,Dreamweaver,中输入文本段落,3.2.2,新建,CSS,规则,3.2.3,编辑,CSS,规则,3.2.4,为图像创建,CSS,规则,