一、安装dreamweaver
一、建立站点文件夹
在电脑硬盘上e:新建一个文件夹作为网站的根目录，里面包含四个文件夹 ，分别为images（放图片），flash（放flash），css（样式表），js（javascript）。
打开dreamweaver，设置站点
站点—新建站点—选择高级
点 确定，这样站点就建立好了
四、新建HTML文档，保存首页为index.htm
五、HTML基础知识
1、文档类型
当我们用dreamweaver新建一下html格式文档时，查看源代码，会发现代码最上部有如下这句话：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://xintu.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
这句话标明本文档是过渡类型，另外还有框架和严格类型，目前一般都采用过渡类型，因为浏览器对XHTML的解析比较宽松，允许使用HTML4.01中的标签，但必须符合XHTML的语法。许多朋友在制作页面时，往往喜欢把这句删除掉，在这里建议大家一定要保留这句话，删除它后可能引起某些样式表失效或其它意想不到的问题。
2、语言编码
接下来我们还会发现这样一句话：
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
它标示文档的语言编码。就像我们平时所说的汉语、英语一样。这里的gb2312告诉浏览器，本文档采用简体中文编码；还有一种常用的编码是UTF-8编码，它是国际通用的编码。不管我们采用哪种编码，有一点就是包含的css样式表和其它文件也必须和本文档的编码一样，要不就会出现乱码。
3、html标签
html标签在页面中都必须结束。成对的标签以“/标签名”结束，有些单一的标签在本身的结尾打上/来结束，这是xhtml代码编写的规范
成对的标签：
<head>{...}</head>
<body>{...}</body>
<div>{...}</div>
<span>{...}</span>
<p>{...}</p>
......
单一的标签：
<img src="" />
<br />
.......
3.1 分段 <p>…… </p>
<p>黄石文化宫</p>
<p>起源培训学校 </p>
3.2 换行 <br />
黄石文化宫起<br />
源培训学校
3.3 标题
标题1：<h1>黄石文化宫起源培训学校</h1>
标题2：<h2>黄石文化宫起源培训学校</h2>
标题3：<h3>黄石文化宫起源培训学校</h3>
标题4：<h4>黄石文化宫起源培训学校</h4>
标题5：<h5>黄石文化宫起源培训学校</h5>
标题6：<h6>黄石文化宫起源培训学校</h6>
3.4 span标签
<html xmlns="http://xintu.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
<!--
.STYLE1 {
font-family: Verdana, Arial, Helvetica, sans-serif; //字体
font-size: 14px; //字体大小
color: #FF0000; //字体颜色
font-weight: bold; //字体加粗
font-style: italic; //字体倾斜
}
-->
</style>
</head>
<body>
<div><span>黄石文化宫起源培训学校</span> // align 字体对齐（left center right）
</div>
</body>
</html>
3.5 DIV标签
<div align="left"><span>黄石文化宫起源培训学校</span></div>
3.6 项目列表 UL和LI
<div>
<ul>
<li><span>黄石文化宫起源培训学校</span></li>
<li><span>黄石文化宫起源培训学校</span></li>
<li><span>黄石文化宫起源培训学校</span></li>
<li><span>黄石文化宫起源培训学校</span></li>
<li><span>黄石文化宫起源培训学校</span></li>
<li><span>黄石文化宫起源培训学校</span></li>
</ul>
</div>
3.7 编号列表 OL 和 LI
<div>
<ol>
<li><span>黄石文化宫起源培训学校</span></li>
<li><span>黄石文化宫起源培训学校</span></li>
<li><span>黄石文化宫起源培训学校</span></li>
<li><span>黄石文化宫起源培训学校</span></li>
<li><span>黄石文化宫起源培训学校</span></li>
<li><span>黄石文化宫起源培训学校</span></li>
</ol>
</div>
3.8 链接
<a href="HTTP://WWW.PX0714.COM/CJ/CJ.HTML" target="_parent" >黄石文化宫起源培训学校</a></span></li>
链接<a> …… </a>
Herf=“链接的网址”
Target="_blank” 这里可以是blank 新打开一个空白页
Target="_parent” 这里可以是parent 直接在当前页面打开
3.9 图片 <img src="images/11.gif" width="242" height="250" />
<div><a href="#"><img src="images/11.gif" alt="黄石平面设计培训" width="242" height="250" border="0" /></a></div>
3.10 表格
<table width="600" border="0" cellpadding="0" cellspacing="0" bordercolor="#FF0000" background="images/11.gif" bgcolor="#FFFF00">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
3.11 单元格
<td width="200" height="40" valign="middle" bordercolor="#3399FF" background="images/11.gif" bgcolor="#FF6600">黄石起源培训 </td>
六、CSS内部样式
这里要知道什么是内容，什么是填充 什么是边框 什么是边界
<div id="header">此处显示 id "header" 的内容</div>
#header {
height: 300px;
width: 400px;
padding: 20px; //填充
border: 5px solid #FF0000; //边框宽度为5，solid是实线，#FF0000边框的颜色
margin: 20px; //边界
}
