课程的(网站课程第一讲)

一、安装dreamweaver

课程的(网站课程第一讲)(1)

一、建立站点文件夹

在电脑硬盘上e:新建一个文件夹作为网站的根目录,里面包含四个文件夹 ,分别为images(放图片),flash(放flash),css(样式表),js(javascript)。

课程的(网站课程第一讲)(2)

打开dreamweaver,设置站点

站点—新建站点—选择高级

课程的(网站课程第一讲)(3)

课程的(网站课程第一讲)(4)

点 确定,这样站点就建立好了

四、新建HTML文档,保存首页为index.htm

课程的(网站课程第一讲)(5)

五、HTML基础知识

1、文档类型

当我们用dreamweaver新建一下html格式文档时,查看源代码,会发现代码最上部有如下这句话:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.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="http://img.studyofnet.com" />

<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://www.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="http://img.studyofnet.comimages/11.gif" width="242" height="250" />

<div><a href="#"><img src="http://img.studyofnet.comimages/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>&nbsp;</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

</tr>

<tr>

<td>&nbsp;</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

</tr>

<tr>

<td>&nbsp;</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

</tr>

</table>

3.11 单元格

<td width="200" height="40" valign="middle" bordercolor="#3399FF" background="images/11.gif" bgcolor="#FF6600">黄石起源培训 </td>

六、CSS内部样式

课程的(网站课程第一讲)(6)

课程的(网站课程第一讲)(7)

课程的(网站课程第一讲)(8)

课程的(网站课程第一讲)(9)

这里要知道什么是内容,什么是填充 什么是边框 什么是边界

<div id="header">此处显示 id "header" 的内容</div>

#header {

height: 300px;

width: 400px;

padding: 20px; //填充

border: 5px solid #FF0000; //边框宽度为5,solid是实线,#FF0000边框的颜色

margin: 20px; //边界

}

,

免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com

    分享
    投诉
    首页