使用Dreamweaver制作简单网页(ppt).ppt

第3章 使用Dreamweaver制作简单网页 3.3.3 盒模型 + 3.3 初识CSS 【教与练3-6】：盒模型。 body h1盒模型——第一行文字/h1 h2盒模型——第二行文字/h2 /body style type=text/css /*分别向h1和h2增加1像素粗细的红色实心边框*/ h1 { border:1px #F00 solid; } h2 { border:1px #F00 solid; } /style h1 { border:1px #F00 solid; margin-bottom:50px;/*底部增加50像素的外边距*/ } 图3-32 页面效果 图3-33 修改代码后页面效果 第3章 使用Dreamweaver制作简单网页 3.3.4 如何将CSS文档应用到网页中 + 3.3 初识CSS 1．内联样式 内联样式的使用是直接在XHTML标签中加入style参数，而style参数的内容就是CSS的属性和值。 【教与练3-7】：内联样式。 body p style=font-size:20px; border:1px #F00 solid;内联样式是混合在HTML标签中使用的，这种方法可以很简单的对某个元素单独定义样式。/p p内联样式的使用是直接在HTML标签中加入style参数，而style参数的内容就是CSS的属性和值。/p /body 图3-34 内联样式 * 清华大学 第3章 使用Dreamweaver制作简单网页 3.3.4 如何将CSS文档应用到网页中 + 3.3 初识CSS 2．内部样式 直接把样式表放到head区域内，只能控制本页面样式。 * 清华大学 第3章 使用Dreamweaver制作简单网页 3.3.4 如何将CSS文档应用到网页中 + 3.3 初识CSS 3．外部样式 把CSS代码单独写到一个CSS文件中，然后再源代码head区域用link方式链接，可以多个页面共享一个CSS代码文件。 link href=style/div.css rel=stylesheet type=text/css / href：CSS文件位置； rel=“stylesheet”：在页面中使用外部样式表； type=“text/css”：指的是文件类型的样式表； * 清华大学 第3章 使用Dreamweaver制作简单网页 3.4.1 通配符选择符与类型选择符 + 3.4 CSS选择符 1．通配符选择符 通配符选择符用“*”进行表示，用于清理标签的默认样式。作用范围是所有元素 2．类型选择符 类型选择符是指以网页中已有标签类型作为名称的选择符，如body、a和p等。 例子3-8 * 清华大学 第3章 使用Dreamweaver制作简单网页 3.4.2 ID选择符与类选择符 + 3.4 CSS选择符 1．ID选择符?仅用于一个元素 ID选择符是以“#”开头，在一个XHTML文件中id具有唯一性是不可以重复的。 页面中：div id=“abc”/div Css中： #abc{****} 2．类选择符?可用于一类元素 类选择符，通过直接引用元素中类属性的值而产生效果，这个应用前面总是有一个句点“.”，这个句点用来标识一个类选择符，类名可以随意命名。 页面中：div class=“abc” Css中：.abc{*******} 第3章 使用Dreamweaver制作简单网页 3.4.3 包含选择符与群组选择符 + 3.4 CSS选择符 li a {text-decoration:none;} /*此规则作用的对象是li元素所包含的所有a元素*/ 1．包含选择符 当用户想要选取X元素下的子元素Y时，包含选择符就能发挥作用。 2．群组选择符 群组选择符使用逗号对选择符进行分隔，这样书写的优点在于同样的样式只需要书写一次，减少了代码量。 body,ul,li,a,p{margin:0;padding:0;} /*此规则将作用于多个元素上面*/ 第3章 使用Dreamweaver制作简单网页 3.5.1 布局规划 + 3.5 案例精粹——电子竞技活动页面 图3-44 电子竞技活动页面——最终效果 图3-45 布局示意图 第3章 使用Dreamweaver制作简单网页 + 3.6 举一反三——315活动宣传页面 图3-67 页面效果 图3-68 布局示意图 清华大学 清华大学 清华大学 清华大学 清华大学 清华大学 清华大学 清华大学 清华大学 清华大学 清华大学 清华大学 清华大学 网页设计与制作实用教程 吴 丰 主编 清华大学出版社 第3章 使用Dreamweaver制作简单网页 3.1.1 Dreamweav