一、安装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" ";>
这句话标明本文档是过渡类型,另外还有框架和严格类型,目前一般都采用过渡类型,因为浏览器对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=";>
<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="image; width="242" height="250" />
<div><a href="#"><img src="image; alt="黄石平面设计培训" width="242" height="250" border="0" /></a></div>
3.10 表格
<table width="600" border="0" cellpadding="0" cellspacing="0" bordercolor="#FF0000" background="image; 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="image; 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; //边界
}