网页制作第三章内容.pptx

网页设计与制作刘瑞新吴丰主编机械工业出版社第3章DreamweaverCS5基础入门

引入Dreamweaver是Adobe公司推出的网页制作和网站管理于一身的可视化网页开发工具，使用该软件方便快捷地制作出极具表现力的网页。

一、了解网页制作的基本流程。二、在DW工作环境下制作第一个网页作品。学习完堂课，你应该可以能够：

三、布局分析---分析页面的效果图

页面布局结构页面的高宽度、文字、背景

四、制作步骤---1.准备材料01创建站点02创建空白文档03创建外部CSS文档04链接外部CSS文档

2.搭网页框架126543编写网页的整个结构divid=wrapwrapdivid=headerhearder/divdivid=contentcontent/divdivid=footerfooter/div/div123456

给header、content、footer区域添加上文字。

8、添加通配的、整个的CSS代码*{ margin:0px; padding:0px; border:0px;}body{ background:url(../images/bg.gif)repeat-ytopcenter#eaeaea; color:#3a3a3a; font:12px微软雅黑,宋体,Arial,sans-serif;}选择器声明属性属性值*是通用元素选择符，匹配任何元素body是标签选择符，匹配body元素#header是ID选择符，匹配header元素

添加wrap的CSS代码01#wrap{02background:#FFF;03margin:0auto;04padding:1px5px;05width:760px;06height:850px;07}08

10、添加header的CSS代码#header{ background:url(../images/header.jpg)no-repeat; background-position:center; color:#166090; height:250px; margin:0010px; padding:0;}#headerh1{ font-size:30px; font-weight:400; letter-spacing:-2px; margin:004px15px; padding:15px00;}

11、添加Content的CSS代码#content{ line-height:20px; padding:0; height:550px;}#contenth2{ text-align:center; font-size:25px; font-weight:100; margin:8px010px; padding:0;}#contentp{ text-indent:2em;}

12、添加footer的CSS代码#footer{ background:#fff; border-top:2pxsolid#dadada; clear:both; color:gray; font-size:12px; padding:8px0; text-align:center; width:760px;}