静态网页的制作资料

第1章静态网页的制作1.1静态网页的概述1.2动态网页的概述1.3静态网页的工作过程1.4静态网页的制作工具1.1静态网页的概述

初期的网站都是由静态网页组成的，网页中只有文字、图形、图像等，用户只能被动地接受这些信息。那时的Web页面的核心是HTML(一种标记语言)，它编写很方便，不要求有特定的语言环境，可以用任何一种编辑器写好，便可以放到浏览器观看结果。现在HTML已经有许多专门的编辑软件，如FrontPage、Hotdog、Dreamweaver等。

最初的Web是完全的静态，仅仅提供大量的信息服务，没有服务器端／客户端的概念。“静态”指的就是网站的网页内容“固定不变”。当用户浏览器通过互联网的HTTP(HypertextTransferProtocol)协议向Web服务器请求提供网页内容时，服务器仅仅是将原已设计好的静态HTML文档传送给用户浏览器。其页面的内容使用的是标准HTML代码，再加上GIF格式的动态图片。

1.2动态网页的概述

所谓动态网页是指网页文件里包含了程序代码，通过后台数据库与Web服务器的信息交互，由后台数据库提供实时数据更新和数据查询服务。这种网页的后缀名称一般根据不同的程序设计语言而不同，如常见的有．asp、jsp、．php、．perl、．cgi等形式。动态网页能够根据不同时间和不同访问者而显示不同内容。

1.3静态网页的工作过程

静态网页制作概括起来，有如下几个部分：

1、网页素材搜集与制作（图像处理与动画制作）

经常需要在网页中应用一些图像与动画，一方面是由于实际内容的需要，一方面是为了增加网页吸引力。在WWW上通常采用jpeg、GIF格式的图片和flash等格式的动画。

2、网页版式设计

规划各元素在网页中的位置关系和表现方法，合理安排图像、文本等元素，使网页布局合理、美观大方。

3、文本编写

自己的网页中需要大量的文字材料，这就要在网页编辑器中用HTML语言中的标签编写。也可以利用网页编辑工具的“所见即所得”功能，直接写入文字。

4、处理网页之间的关联

主要是建立合理、高效的网页导航系统。

5、网页发布

主要是将建设好的网页上传到服务器中供用户浏览。1.4静态网页的制作工具

1、图像处理与动画制作工具：Photoshop、Flash等。

2、网页编辑工具：1）纯文本编辑工具，如Notepad等；2）转换工具，如word等；3）专用工具，如FrontPage、Dreamweaver等。

3、网页上传工具：1)FTP工具，如WS-FTP，CuteFTP等；2)专用网页编辑软件的文件传输功能。

4、网页优化工具：网页减肥茶、网页优化大师等。

HTML基础知识2.1HTML简介2.2HTML编写工具2.3HTML编写的格式2.4标志（tag）的结构特点2.5HTML文件的组成2.6文件标题标志2.7颜色表示方法2.1HTML简介

HTML是HypertextMarkupLanguage(超文本标志语言)的缩写，它是构成Web页面(Page)的主要工具，是用来表示网上信息的符号标志语言。

在网上，如果要向全球范围内出版和发布信息，需要有一种能够被广泛理解的语言，即所有的计算机都能够理解的一种用于出版的"母语"。WWW(WorldWideWeb)所使用的出版语言就是HTML语言。通过HTML，将所需要表达的信息按某种规则写成HTML文件，通过专用的浏览器来识别，并将这些HTML"翻译"成可以识别的信息，就是现在所见到的网页。

2.2HTML编写工具

用HTML编写的文件(文档)的扩展名是．HTML或.HTM。它们是供浏览器解释浏览文件的格式。可以使用记事本、写字板等编辑工具来编写HTML文件。HTML语言使用标志对(标签)的方法来编写文件，既简单又方便。它通常使用<标志名></标志名>来表示标志的开始和结束(例如<HTML></HTML>标志对)，因此在HTML文档中这样的标志对都必须是成对使用的。

在今天，做网页的工具到处都是,只要动几下鼠标，一个精彩的网页就出来了，HTML是否要学呢？答案是肯定的，因为工具就是工具，它们生成的代码是机械的，不够简洁，使网页打开的速度减慢。还有很多新的功能，工具是生成不了的。必需对代码进行编辑。

2.3HTML编写的格式查看网页源文件，可见html文件的格式如下：

<html>

<head>

<title>网页的标题</title>

</head>

<body>

……

</body>

</html>

其中省略号部份是网页的内容,其实每个标记都是一一对应的。每个网页文件都是以<html>开始和以</html>结束。<title>与</title>之间的内容是网页的标题。会显示在浏览器的标题栏上。<body>与</body>之间放的是网页内容。2.4标志（tag）的结构特点1、用<>包围。

2、多数成对出现。

3、结束标记用/。

4、标签是嵌入式的。

5、标签可有多种属性和属性值。

6、标签用西文半角字符，对大小写不敏感。

2.5HTML文件的组成头部和主体标志和普通文本

2.6文件标题标志文件标题标志为<title></title>。使用过浏览器的人可能都会注意到浏览器窗口最上边的蓝色部分显示的文本信息，那些信息一般是网页的"主题"。要将网页的主题显示到浏览器的顶部其实很简单，只要在<title></title>标志对之间加入要显示的文本即可。2.7颜色表示方法

HTML用#RRGGBB字符串代表色彩，成为RGB值。RGB值中的RR、GG和BB分别代表红绿蓝三原色的两位十六进制整数值。每种原色的取值范围在00和FF（即十进制的0和255）之间，即一个字节存储一种原色。每种原色都有256种由浅至深的色彩变化，网页中呈现的色彩都是由这三种原色调配出来的。rgb值可以表示出（256*256*256）种颜色。黑色白色绿色黄色红色蓝色#000000#FFFFFF#00FF00#FFFF00#FF0000#0000FFHTML简单段落<html><body><p>这是第一段。</p><p>这是第二段。</p><p>这是第三段。</p><p>在HTML里，用p来定义段落。</p></body></html>多个段落的编写<html><body><p>这一段在源代码里包含很多分行，但是浏览器忽略这些分行。</p><p>这一段在浏览器里包含很多空格，但是浏览器忽略多余空格。</p><p>你使用的浏览器的窗口大小决定了段落的行数。如果你改编浏览器窗口的大小，段落的行数会因此改变。</p></body></html>段落中的换行标记<html><body><p>要<br>在一段<br>里<br>换行<br>请使用<br>br这个Tag。</p></body></html>6种级别的标题设置<html><body><h1>这是1号标题</h1><h2>这是2号标题</h2><h3>这是3号标题</h3><h4>这是4号标题</h4><h5>这是5号标题</h5><h6>这是6号标题</h6></body></html>标题的居中对齐<html><body><h1align="center">这是标题</h1><p>上面的标题是居中显示的。</p></body></html>段落中横线的添加<html><body><p>用hr这个Tag可以在HTML文件里加一条横线。</p><hr><p>村妇想像皇宫的生活：皇后得用金扁担挑水吧。</p><hr><p>问：谁是世界上最可怜的人？答：炮兵连炊事班战士！问：为什么？答：戴绿帽背黑锅看别人打炮。</p><hr><p>初中某数学老师讲方程式变换，在讲台上袖子一挽大声喝道：同学们注意！我要变形了！……</p></body></html>其他格式标记<html><body><p><b>粗体用b表示。</b></p><p><i>斜体用i表示。</i></p><p><del>芙蓉姐姐</del>这个词当中划线表示删除。</p><p><ins>想唱就唱</ins>这个词下划线插入。</p><p>X₂其中的2是下标</p><p>X²其中的2是上标</p><p><blockquote>好好学习，天天向上。这句话缩进表示引用</blockquote></p><code>callgetOrders</code><p>用code显示计算机代码，code里显示的字符是等宽字符。</p></body></html>字号的设置<html><head><title>字体大小fontsize</title></head><body><p><fontsize="1">这段文字的字体大小值为1。</font></p><p><fontsize="2">这段文字的字体大小值为2。</font></p><p><fontsize="3">这段文字的字体大小值为3。</font></p><p><fontsize="4">这段文字的字体大小值为4。</font></p><p><fontsize="5">这段文字的字体大小值为5。</font></p><p><fontsize="6">这段文字的字体大小值为6。</font></p><p><fontsize="7">这段文字的字体大小值为7。</font></p></body></html>字体大小颜色<html><head><title>字体颜色fontcolor</title></head><body><p>这段文字用的是缺省的字体颜色。</p><p><fontcolor="#FF0000">这段文字的字体颜色为红色。</font></p><p><fontcolor="gray">这段文字的字体颜色为灰色。</font></p><p><fontcolor="#33CC00">这段文字的字体颜色为绿色。</font></p></body></html>字体风格<html><head><title>字体风格fontface</title></head><body><p>以下第一段用的是arial字体，第二段用的是courier字体，第三段用的是verdana字体。</p><p><fontface="arial">arialcourierverdana</font></p><p><fontface="courier">arialcourierverdana</font></p><p><fontface="verdana">arialcourierverdana</font></p></body></html>列表标志1、定义列表

<dl></dl>用来创建一个定义列表，<dt></dt>用来创建列表中的上层项目，<dd></dd>用来创建列表中最下层项目，<dt></dt>和<dd></dd>都必须放在<dl></dl>标志对之间。中国城市 北京 上海 广州美国城市 华盛顿 芝加哥 纽约<HTML>

<head>

<title>一个普通列表</title>

</head>

<body>

<dl>

<dt>中国城市</dt>

<dd>北京</dd>

<dd>上海</dd>

<dd>广州</dd>

<dt>美国城市</dt>

<dd>华盛顿</dd>

<dd>芝加哥</dd>

<dd>纽约</dd>

</dl>

</body>

</HTML>思考定义列表(DefinitionList)：（为标题）野生动物 所有非经人工饲养而生活于自然环境下的各种动物。宠物 指猫、狗以及其它供玩赏、陪伴、领养、饲养的动物，又称作同伴动物。2、有序列表和无序列表

<ol></ol>标志对用来创建一个有序列表；<ul></ul>标志对用来创建一个无序列表；<li></li>标志对只能在<ol></ol>或<ul></ul>标志对之间使用，此标志对用来创建一个列表项。<HTML>

<head>

<title></title>

</head>

<body>

<p>中国城市</p>

<ol>

<li>北京</li>

<li>上海</li>

<li>广州</li>

</ol>

<p>美国城市</p>

<ul>

<li>华盛顿</li>

<li>芝加哥</li><li>纽约</li>

</ul>

</body>

</HTML>中国城市1.北京2.上海3.广州美国城市·华盛顿