第8章节手工编写与借助工具.pptVIP

第8章 手工编写与借助工具 8.1 手工方式编写页面 8.2 使用Dreamweaver进行CSS设置 第8章 手工编写与借助工具 上一章介绍了CSS的基本思想和基本使用方法。 在继续深入讲解各种CSS属性之前，在本章先进行一些实际的操作，实际编写一个比较完整的使用CSS的网页，为后面继续深入学习HTML和CSS打下基础。 本章将分别介绍如何使用手工代码方式，以及使用Dreamweaver软件可视化的方式分别完成同一个页面。 8.1 手工方式编写页面 8.1.1 构建页面框架 考虑到单纯的文字显得贫乏，因此加入一幅图片作为简单的插图。 图片所在的位置与正文一样，使用HTML语言中的img标记，此时，body部分修改后的代码如下，源文件参见实例文件“03-02.html”。 html ……部分代码省略…… body h1互联网发展的起源/h1 img src=cup.gif width=128 height=128/ p1969年，为了保障通信联络，美国国防部高级研究计划署ARPA资助建立了世界上第一个分组交换试验网ARPANET，连接美国四个大学。ARPANET的建成和不断发展标志着计算机网络发展的新纪元。/p ……部分代码省略…… /body /html 8.1.2 设置标题 html head title体验CSS/title style h1{ color:white; /* 文字颜色*/ background-color:#0000FF; /* 背景色 */ text-align:center; /* 居中 */ padding:15px; /* 边距 */ } /style /head body ……省略…… 8.1.3 控制图片 img{ float:left; border:1px #9999CC dashed; margin:5px; } 8.1.4 设置正文 p{ font-size:12px; text-indent:2em; line-height:1.5; padding:5px; } 8.1.5 设置整体页面 body{ margin:0px; background-color:#CCCCFF; } 8.1.6 对段落进行分别设置 上面设置CSS样式使用的都是标记选择器，为了验证一下其他的选择器的用法，这里为两个文本段落分别设置不同的效果。 首先，分别给两个段落的p标记设置一个id属性，代码如下： p id=“p1”1969年，为了保障通信联络，美国国防部高级研究计划署ARPA资助建立了世界上第一个分组交换试验网ARPANET，连接美国四个大学。 ARPANET的建成和不断发展标志着计算机网络发展的新纪元。/p p id=p2 20世纪70年代末到80年代初，计算机网络蓬勃发展，各种各样的计算机网络应运而生，如MILNET、USENET、BITNET、CSNET等，在网络的规模和数量上都得到了很大的发展。 一系列网络的建设，产生了不同网络之间互联的需求，并最终导致了TCP/IP协议的诞生。/p 然后在CSS部分设置如下CSS规则。 #p1{ border-right:3px red double ; } #p2{ border-right:3px orange double ; } 8.2 使用Dreamweaver进行CSS设置 8.2.1 创建页面  8.2.2 新建CSS规则 8.2.3 编辑CSS规则 8.2.4 为图像创建CSS规则 * * Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0. Copyright 2004-2011 Aspose Pty Ltd. Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0. Copyright 2004-2011 Aspose