网页制作基础教程

网页制作基础教程

一、什么是HTML

HTML（超文本标记语言）是网页中使用的语言，他能被网页浏览器（IE或Netscape）解释，从而显示出丰富多彩的信息（图片、文字、声音、影象、动画等）。

制作网页前首先要弄懂什么是HTML。

在IE中点击"查看"→"源文档"，就能看到该网页的HTML代码。下面是个网页文档（model.htm）的HTML代码：

第一段文字。

第二段文字。

【操作】请在记事本中输入以上代码，命名为test1.htm，存于D盘，然后双击打开看看。

标记一般是成对出现的，#FFFFFF表示使用的颜色是白色。

...

...

之间是该网页的标题

charset=gb2312表示语言字符集信息是中文简体，如big5则是中文繁体。

...之间是网页的正文内容

表示网页的背景色是白色，默认的文字颜色是白色。

...

之间是h1号标题字

...

之间是h2号标题字

...之间的文字为红色

HTML是一套国际标准，其标记有几百种，您并无需全部了解他们，只要记住其中常用的十几种，就能够做出很漂亮的网页来。

常用的标记举例：

【操作】复制一个jpg格式的图片文档，取名为pic，保存到D盘，在记事本中输入下列语句，命名为test2.htm，存于D盘。

第二个网页

---

链接到校园网

链接到我的图片

链接到

test1

---

下面是个带边框的表格

Food	Drink	Sweet
A	B	C

二、准备工作

制作网页前重要的工作是规划好网页的架构，一般开设images、common、temp三个子目录，根据需要再开设media子目录，images目录中放不同栏目的页面都要用到的公共图片，例如网站的标志、banner条、菜单、按钮等；common 子目录中放css、js、php、include 等公共文档；temp子目录放各种临时备用的文档；media子目录中放flash、avi、quick time等多媒体文档。

在根目录中原则上按照首页的栏目结构，给每一个栏目开设一个目录，根据需要在每一个栏目的目录中开设一个images和media的子目录用以放置此栏目专有的图片和多媒体文档，假如这个栏目的内容特别多，又分出很多下级栏目，能够相应的再开设其他目录。

除非有特别情况，目录、文档的名称全部用小写英文字母、数字、下划线的

组合，其中不得包含汉字、空格和特别字符；目录的命名请尽量以英文为指导，不到万不得已不要以拼音作为目录名称，经验证实，用拼音命名的目录往往一个月后连自己都看不懂。

网站的首页文档一般取名：index.htm

放置在页面顶部的广告、装饰图案等长方形的图片取名：banner

标志性的图片取名：logo

在页面上位置不固定并且带有链接的小图片取名：button

在页面上某一个位置连续出现，性质相同的链接栏目的图片取名：menu

装饰用的照片取名：pic

不带链接表示标题的图片取名：title

三、制作软件介绍

下面介绍3个做网页的辅助软件，有了软件并不一定能够把网页做好，关键还得看懂HTML代码具体表示什么意思。

四、Dreamweaver初步（见演示）

1．工具栏

2．属性栏

3．定义本地站点