网页制作基础教程文档格式.docx

网页制作基础教程文档格式.docx

《网页制作基础教程文档格式.docx》由会员分享，可在线阅读，更多相关《网页制作基础教程文档格式.docx（22页珍藏版）》请在冰豆网上搜索。

text/html;

charset=gb2312"

>

/head>

bodybgcolor="

#FFFFFF"

text="

#000000"

h1>

<

fontcolor="

#FF0000"

第一段文字。

/font>

/h1>

h2>

#000099"

第二段文字。

/h2>

/body>

/html>

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

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

...<

之间是该网页的标题

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

body>

之间是网页的正文内容

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

之间是h1号标题字

之间是h2号标题字

之间的文字为红色

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

　　常用的标记举例：

标记名称

标记举例

解释

ahref="

URL"

...<

/a>

URL：

链接的地址，如：

　　.163.

标尺线

hr>

划一条横线

换行

br>

人工换行

链入图象

imgsrc="

如：

images/face.gif

文字的对齐

h3align=center>

Hello<

/h3>

元素中间对齐

h3align=right>

元素右对齐

h3align=left>

元素左对齐

表格

table>

/table>

定义表格

tr>

定义表行

th>

定义表头

td>

定义表元（表格的具体数据）

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

#009999"

#00FF00"

第二个网页<

pic.jpg"

alt="

看到上面的文字吗"

　<

h1align=center>

192.168.0.2"

链接到校园网<

h2align=center>

链接到我的图片<

test1.htm"

target="

_blank"

链接到test1<

h4align=center>

下面是个带边框的表格<

/h4>

tableborder>

Food<

/th>

Drink<

Sweet<

A<

/td>

B<

C<

　　二、准备工作

　　制作网页前重要的工作是规划好网页的架构，一般开设images、common、temp三个子目录，根据需要再开设media子目录，images目录中放不同栏目的页面都要用到的公共图片，例如网站的标志、banner条、菜单、按钮等；

common子目录中放css、js、php、include等公共文档；

temp子目录放各种临时备用的文档；

media子目录中放flash、avi、quicktime等多媒体文档。

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

　　除非有特别情况，目录、文档的名称全部用小写英文字母、数字、下划线的组合，其中不得包含汉字、空格和特别字符；

目录的命名请尽量以英文为指导，不到万不得已不要以拼音作为目录名称，经验证实，用拼音命名的目录往往一个月后连自己都看不懂。

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

index.htm

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

banner

　　标志性的图片取名：

logo

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

button

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

menu

　　装饰用的照片取名：

pic

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

title

　　三、制作软件介绍

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

软件名称

描述

长处

缺点

如何获取

MicrosoftFrontPage

微软Office套件之一，网页制作解决方案，适合初、中级用户使用

和Word软件的良好兼容，现成的各种模板

操作、修改繁琐，有冗余代码

Office套件里带有

MacromediaDreamweaver

Macromedia公司的网页制作3剑客之一（另外2个是Flash、Firework），适合专业用户使用

操作灵活，效率高，网页可读性好，解决IE和Netscape的兼容性

几乎没有

需要另外购买或下载

东方网页王5.0企业版

国内交大铭泰软件公司的网页制作解决方案，适合初级用户使用

操作简便，形象直观，模板丰富

扩展度不够，制作不灵活，修改繁琐

　　四、Dreamweaver初步（见演示）

　　1．工具栏

　　2．属性栏

　　3．定义本地站点

　　4．编辑站点主页

　　5．定义背景颜色和图象

　　6．定义页面标题

　　7．创建链接

　　8．编辑表格

五、网页设计配色出色十例

（1）这是个大型的NBA网站。

通常我们经常看到的此类网站以白色为背景，但是这个网站却用灰黑色RGB为（48，48，48/#333333）（以下颜色都用RGB表示），文章标题用色为RGB为（203，201，153/#CCCC99），菜单使用的RGB为（112，119，112/#707770）。

这样的配色能够显示独特的个性，又不失大型网站的风采。

（2）下面是个娱乐类的综合性网站UGO，他的配色方案是背景色为黑色RGB为（0，0，0）中嵌套RGB（0，0，82），字体白色RGB（255,255,255）,菜单为RGB（77,114,159）。

这样的虽以黑蓝为主色调，但是配以漂亮的图片，给人的感觉是生机盎然，充满了互动色彩和青春气息。

（3）下面的这个网站是大名鼎鼎的微软公司网站，微软不但软件做的好，连网页制作也是世界一流。

他的每一个网页都是制作的样板。

从网页我们就能够看出微软公司的风格、作风，连同雄厚的实力。

背景颜色使用蓝色RGB为（0，151，254），菜单为黑色RGB（0，0，11），菜单为灰色RGB（200，200，200），字体为黑色RGB（0，0，0）。

（4）现在介绍的网站相对简单，但是她的用色也别具匠心，现在我们来看一看，整体上使用的是白色RGB（255，255，255），辅助色为RGB（79，88，95），菜单色为RGB（48，64，64）和RGB（0，81，111）字体使用的是RGB（83，86，91）。

虽然简单，但颜色搭配很的科学合理。

（5）下面的网站采用黄色调为主，很体现公司的个性，现在我们就来看一看她的颜色搭配。

主色调为黄色RGB为（255，199，48/#FFC730），辅助色调为RGB（49，102，46）字体为棕色RGB（153，103，0），中间再配以抽象的图片，显得个性十足但又不单调。

（6）橘红色假如运用得当的话是一种很使用于网页上的颜色。

下面的这个网站就是个很著名的例子。

他的主色调为RGB（255，151，0）辅助色调为RGB（255，103，4），菜单RGB为（252，200，0）。

字体使用黑色RGB为（0，0，0）。

此种配色显得主人较为前卫，色彩热烈，给人的震慑力较强。

（7）鲜红色也是一种震撼感很强的颜色，假如搭配不当，也可能使网站没有风格和特点。

下面的这个网站就是使用红色比较好的网站。

我们来看看他的颜色搭配。

他使用的主色调是RGB（200，9，0），配以抽象的图像，文字使用的是RGB（213，229，167）显得美观而不失独特，大气而不逼人。

（8）下面介绍的这种色调是我们制作网页的时候不会经常用到的颜色，假如使用到您的网页中，肯定会给人耳目一新的感觉。

他的主色调为RGB（144，151，97）辅助色调为RGB（173，168，112）边饰为黑色RGB（0，0，0）字体为黑色RGB（0，0，0）。

这样的搭配显得风格独特，颜色和谐而庄重。

（9）下面的设计更加的简单化，但是颜色的使用使网页并不呆板，反而让人感觉到一股浓浓的生活和家庭气氛，使人置身于美丽和爱中。

他的主体是由两种颜色构成，分别是RGB（239，200，161）和RGB（201，254，200）。

如此简单，但是却栩栩如生，跃然网上。

（10）下面举出这个例子是想证实一个道理――只要您有足够的想象力，您就能够设计出漂亮的网页。

现在在网上很流行一句话就是网页的搭配不要超