手工编写与借助工具.ppt

1、第8章 手工编写与借助工具,8.1 手工方式编写页面 8.2 使用Dreamweaver进行CSS设置,第8章 手工编写与借助工具,上一章介绍了CSS的基本思想和基本使用方法。 在继续深入讲解各种CSS属性之前，在本章先进行一些实际的操作，实际编写一个比较完整的使用CSS的网页，为后面继续深入学习HTML和CSS打下基础。 本章将分别介绍如何使用手工代码方式，以及使用Dreamweaver软件可视化的方式分别完成同一个页面。,8.1 手工方式编写页面,图3.1 体验CSS,8.1.1 构建页面框架,考虑到单纯的文字显得贫乏，因此加入一幅图片作为简单的插图。 图片所在的位置与正文一样，使用HTM

2、L语言中的标记，此时，部分修改后的代码如下，源文件参见实例文件“03-02.html”。, 部分代码省略 互联网发展的起源 1969年，为了保障通信联络，美国国防部高级研究计划署ARPA资助建立了世界上第一个分组交换试验网ARPANET，连接美国四个大学。ARPANET的建成和不断发展标志着计算机网络发展的新纪元。 部分代码省略 ,图3.3 加入图片,8.1.2 设置标题, 体验CSS h1,color:white; /* 文字颜色*/ background-color:#0000FF; /* 背景色 */ text-align:center; /* 居中 */ padding:15px; /

3、* 边距 */ 省略,图3.4 修改标题样式,8.1.3 控制图片,img float:left; border:1px #9999CC dashed; margin:5px; ,图3.5 图文混排,8.1.4 设置正文,p font-size:12px; text-indent:2em; line-height:1.5; padding:5px; ,图3.6 修改正文样式,8.1.5 设置整体页面,body margin:0px; background-color:#CCCCFF; ,图3.7 设置页面的整体效果,8.1.6 对段落进行分别设置,上面设置CSS样式使用的都是标记选择器，为了验

4、证一下其他的选择器的用法，这里为两个文本段落分别设置不同的效果。 首先，分别给两个段落的标记设置一个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 对段落进行不同的设置,8.2 使用Dreamweaver进行CSS设置,8.2.1 创建页面,