静态HTML网页制作Word文档下载推荐.docx
《静态HTML网页制作Word文档下载推荐.docx》由会员分享，可在线阅读，更多相关《静态HTML网页制作Word文档下载推荐.docx（41页珍藏版）》请在冰豆网上搜索。
ftp：
FileTransferProtocol，是一种文件传输协议，用途在于使Internet上的主机可以交换文件数据。
mail：
电子邮件，经由网络系统将文件传送至远程的计算机主机。
2
WWW通讯协议 主机名称
host.domain：
为所联机网络资源的主机名称。
如：
阜阳师范学院网站的地址为：
图2主机名称
3path/filename：
网络资源存放在网站内的路径及文件名称。
如阜阳师范学院文学院的网址为：
:
8080/xiweb/zwx/htdocs/index.asp
通讯协议 主机名称 端口号路径文件名
图3 路径及文件名
［说明］：
通讯协议和主机名称的英文字母可以不分大小写，但路径及文件名称的英文字母的大小写被视为不同的字符。
表1 网域类型代码和地区代码
网域类型的代码说明
地区代码说明
代码
网域类型
地区代码
地区名称
.com
商业组织
.cn
中国大陆
.de
德国
.edu
教育单位及学术研究单位
.us
美国
.nz
新西兰
.net
管理网络的机构
.jp
日本
.uk
英国
.int
国际组织
.hk
香港
.au
澳大利亚
.mil
国防机构
.tw
台湾
.it
意大利
.gov
政府机构
.ca
加拿大
.kr
韩国
.org
研究单位及非营利组织
.sg
新加坡
.fr
法国
5.1.2网站制作流程
搜集资料
草图制作
构思主题
初期规划 中期实际行动 后期维护
图3 网站设计整体流程图
5.1.3HTML文件的生成、编辑与查看
编辑网页有多种语言，目前最基本最常用的是HTML，HTML（HyperTextMarkupLanguage）是一种文件标记式的网络语言，现在已经成为Internet上专门用来制作网页文件的标准语言。
由于HTML文件是一个纯文本文件（TextFile），因此要产生HTML文件很简单，只要使用一般的文本编辑软件就可以了。
在Windows环境下可以使用记事本、写字板、Word或使用网页制作专用软件如FrontPage、Dreamweaver等，一旦文件的内容编辑好了，以扩展名.htm或.html方式存盘，就可以了。
编辑好之后想查看生成网页的效果，可以直接双击它就行了，这时计算机会自动使用IE浏览器打开HTML网页文件。
现在给大家演示一下怎么用这些软件编辑HTML文件，也就是网页文件，并比较一下它们的优劣。
其实目前专门用于HTML文件制作的软件很多，有的有自动提示功能，这里给大家推荐ASPstudio，它还可以方便以后大学习动态网页的制作。
5.2HTML编辑文字图片技巧
HTML是制作网页最基础的语言，Internet上所有的Web网站的网页，95%以上都是以HTML格式来制作的。
当然HTML一般只能生成静态的网页，以后大家可能会使用ASP、JSP或PHP等语言来制作动态的网页，但这些ASP或PHP程序经服务器解译之后，最后呈现在客户端浏览器上的还是HTML格式的，更为重要的是不管是ASP、JSP或PHP或其他什么语言，一般都要和嵌入到HTML文件之中，或者自己被HTML嵌入。
因此，有人认为使用Frontpage或Dreamweaver等所见即所得的网页编辑软件，就可以不必学习HTML语言了，这是错误的，当然，如何你只想制作一个静态的网页，用这样的软件就可以了，甚至可以不学习HTML语言，但这种做法只能说是沙堆上建高楼，根基太差，只知其然不知其所以然，以后几乎没有进步发展的可能。
5.2.1HTML基本语法
标记
一份标准的HTML文件是由标记（Tag）和欲显示在网页上的内容所组成。
欲显示的内容当然包括文字、图片、图像、声音、视频等元素；
而标记（Tag）的作用是标记网页元素在网页上出现的位置、形式、顺序及元素间的关系。
在HTML中文件中，有些标记规定必须是以“＜tagname＞”符号开始，而以“＜/tagname＞”符号结束，我们称之为“成对标记”；
有些标记允许单一标记出现在欲显示元素的前面或后面，这是非成对标记，其基本格式有下列两种写法：
语法1：
成对标记
<
tagnameproperty1=”value1”property2=”value2”>
displaydata<
/tagname>
语法2：
非成对标记
1.<
displaydata
2.displaydata<
HTML的语法使用上没有大小写的差别，可依自己的习惯来撰写。
说明：
①<
tagname>
是标记名称，用来表示这是标记的开始，<
标记前面加斜线表示这是标记的结束。
②displaydata代表欲在网页上显示的内容。
③在<
tagname…>
标记内的property（属性）用来改变displaydata的属性值。
之前的内容都按property的值来显示。
④在设定value值时不一定要用双引号将属性值的头尾括起来，但建议最好用双引号，以免字符串中有空白而产生错误。
⑤不同标记所拥有的property（属性）不一定相同，而且书写几个属性时，没有前后次序关系。
⑥每个property（属性）都有其默认值。
因此，标记内若省略某属性不写，则会使用默认值。
结构
HTML的整体结构。
人类的身体是由头部（Head）和身体（Body）两大部分组成。
HTML文件的整体结构也是如此。
其中头部（Head）就是指文件的标题，以<
head>
开头，以<
/head>
结束，中间用来定义标题的内容，身体是以<
body>
/body>
结束，两个标记之间用来放置欲显示的网页元素及其标记。
其整体构架如图所示：
html>
……
title>
/title>
/html>
图4 HTML的整体结构
HTML>
一个完整的HTML文件是以<
标记开始，用来告诉浏览器这个文件是使用HTML格式编写的；
最后使用<
/HTML>
标记结束，用来告诉浏览器此处是HTML文件的结束点。
由图4我们可以看到，<
~<
两者之间包含两个主要部分：
一个是HTML文件的头部，我们称之为“标题设定区”，放置一些有关该文件的识别数据，前后使用<
标记框住；
另一部分是主体我们称之为“HTML网页文本区”，是呈现给浏览者观点的文件内容及其格式，前后使用<
标记住。
HEAD>
标记主要用来提供此份文件的整体信息。
包括标题栏名称、文件的网址、所采用的语种等。
标记用来告诉浏览器这是文件标头的开始点；
标记告诉浏览器此处是文件标头的结束点。
但要记住<
必须成对出现。
这对标记之间可以使用下列标记：
（1）通过<
来设定标题栏名称。
（2）通过<
baseherf=>
来设定文件中超级链接的网址。
（3）通过<
matahttp-equiv=”Content-Type”content=”text/html;
charset=gb2312”>
说明本文件使用什么语种，如本例是使用国标码。
（4）通过<
bgsoundsrc=”URL”loop=”playtime”>
来加入背景音乐。
音乐文件的格式只能是.mid、.wav或.asf格式的。
“URL”为音乐文件的全路径，如为本地音乐，格式为：
“src="
file:
///D:
\workinfuyang\语言文字信息处理教案\第5章\d067.WAV"
”
（5）通过<
!
--说明文字-->
可以在HTML文件任何地方加上注释。
在一些关键地方加入注释是一个非常好的习惯。
TITLE>
必须成对出现，之间所夹的文字就是你在浏览器标题栏所看到的标题名称。
但要记住：
必须出现包含在<
标记之间。
META>
由于Internet的范围涵盖全球，因此也就面临英文、中文、法文、日文等语种在显示文字上的问题，我们可以在HTML文件中通过<
标记来设定网页所属的语种。
当然，这个标记还可以指定其他附加信息，这里不再多提。
语法：
metaHTTP-EQUIV=”Content-Type”Content=”text/html;
charset=big5”>
功能：
允许网页设计者在网页标头中加入自定义信息。
①非成对标记，该标记必须写在<
之间。
②本例作用是指定文件格式为text/html，语种是大五码（charset=big5）
③其他作用请参考HTML手册。
BGSOUND>
这个标记的作用是在网页中加入背景音乐，其语法如下：
bgsoundsrc=”URL”loop=”playtimes”>
按照指定的播放次数播放背景音乐。
①非成对标记，必须写在<
②src的值为“URL”，用来指定音乐所在位置
③loop的值为“playtimes”，用来设定音乐播放次数，缺少值为1次，若值为-1，则表示播放无限次。
④该标记只在IE中有效。
⑤音乐文件的格式只能是.mid、.wav或.asf格式的。
5.2.2设定段落与对齐
在HTML文件中，可以配合各种不同的标记来美化文字，如：
设定文字的颜色、大小，字体等。
BODY>
到<
之间是HTML文件最重要的部分，是真正呈现到浏览者面前的图文内容及其格式，<
的语法如下：
bodybgcolor=”color”background=”url”text=”color”link=”color”alink=”color”vlink==”color”>
设定网页内容显示区的属性。
bgcolor：
设置背景色
background：
设置背景图片
text：
设置文本颜色
link：
设置链接文本颜色
alink：
活动链接颜色值
vlink：
访问过的颜色值
注：
表示颜色：
（1）用redblueyellowgreenblackwhitecyanmagenta
（2）用#rrggbb表示：
r、g、b使用16进制数
如品红：
#880088、青色：
#008888
省略全部属性，则网页背景色为白色，文字为黑色。
前面提到，<
之间的内容将按照其格式呈现到浏览者面前。
我们现在在这中间输入一些内容来试试。
例1：
欢迎光临我的网站<
亲爱的各位同学：
你只要认真听课，勤于练习，你会发现：
“HTML原来不难啊!
坚持下去，你很快会成为网友制作高手的!
祝
学习进步
傅成宏
2008.4.6
实验结果表明，可以在浏览器中显示这些内容，但并没有按我们的排版样式显示。
原因是我们的HTML文件并没有对这些内容加任何美化的标记。
要想使浏览器按我们排版的样式显示，只要在内容的前后加上下面的标记就可以了。
PRE>
这个标记可以让文字的编排按我们设定的方式显示，也就是说浏览器里显示的文字和我们在HTML文件里的排版方式一模一样。
注意<
pre>
/pre>
要成对出现在<
和<
内部。
来试试。
BR>
br>
是换行标记，属于非成对标记。
一般都是配合<
p>
标记使用，使得网页的段落分明。
如我们可以使用它来实现上面<
标记实现的功能。
试试。
实验结果我们发现，基本上实现了我们的要求，但每段开头没有空两格，尽管我们在源代码中手工加入了空格也不能让浏览器显示空格。
这是因为要让浏览器显示空格，必须使用空格的特殊符号句柄“&
nbsp;
”。
在网页中要显示特殊符号，需要使用句柄并且在句柄的前面加上＆作为开头，常见特殊符号的句柄如下表。
表2常见特殊符号句柄
句柄
显示结果
&
空一格（半角）
＆divide;
÷
lt;
plusmn;
±
gt;
>
copy
©
qout;
“
reg;
®
times;
×
amp;
P>
palign=”value”>
displaydata<
/p>
段落标记用来设定段落。
①与<
组成成对标记。
一般配合<
使用，让网页的段落分明。
②<
会使接下来的文字从新的一行开始显示，并且每个用<
标记所形成的段落之间都会自动空一行，<
不会产生空行。
也可以省略不写。
③align属性且为设定文字的对齐方式，其value属性值可设为：
Left：
左对齐；
right：
右对齐；
center：
中对齐。
CENTER>
功能是将图文置中对齐，必须与<
/center>
成对出现。
而<
center>
…<
palign=”center”>
的差别在于后者会跳出一个空行，前者不会。
5.2.3设定文字格式
SMALL>
此为文字缩小一级标记，其后到<
/small>
之前的文字会缩小一级，此标记应该成对出现。
BIG>
与<
small>
标记相反。
试试！
H1>
H6>
标题标记
①一般用来设定标题字的字体大小，使得标题字更加醒目，但它除了会改变字体大小之外，字体还会依大小自动加粗以提高浏览者的注意力，作为标题的文字会独占一行且上下各有一空行。
h1>
最大、<
h6>
最小，此标记应该成对出现。
③此标记中可以加入align属性来控制文字对齐方式。
FONT>
字体标记
在一份HTML文件中,设定字体大小当然可能使用前面的三个标记，<
big>
甚至还可以嵌套使用，但毕竟不太方便。
因此HTML另外提供<
fontsize=”value”>
来对整个段落的文字大小作设定，而且不会像<
那样将字体加粗并将文字上下空一行。
字体标记除了可以设定字体大小之外，还通过face属性来设定字体和种类，通过color属性来设定文字的颜色，其语法如下：
fontsize=”value1”face=”value2”color=”value3”>
/font>
设定文字的大小、字体、颜色。
font>
应与<
成对使用。
②size属性，用来设定文字的大小。
它的值为1~7值越大字体越大。
默认值为3。
也可以使用相对大小设定，例如size=”+1”或size=”-1”表示将目前字体大小上升一级或下降一级。
③face属性，用来设定文字字体的种类（如：
face=”楷体_GB2312”）。
④color属性，用来设定文字颜色。
正表是常用颜色名称（color=”green”）：
颜色名称
代表颜色
Aqua
水蓝色
black
黑色
blue
蓝色
fuchsia
紫红色
gray
灰色
green
绿色
line
石灰色
maroon
栗色
navy
深蓝色
olive
橄榄色
purple
紫色
red
红色
sliver
银色
teal
蓝绿色
while
白色
yellow
黄色
pink
粉红色
文字的特殊标记
见下表：
表3常用的文字特殊标记
说明
b>
将标记范围内的文字以粗体显示
I>
将标记范围内的文字以斜体显示
u>
将标记范围内的文字加上下划线
sup>
将标记范围内的文字以上标形式显示，如：
2X3+3X2+6X=5
sub>
将标记范围内的文字以下标形式显示，如：
2H2＋O2＝2H2O2
em>
以斜体来显示的重要文字
kbd>
以较小且加粗的方式显示文字
strike>
在文字中间加上一条横线，用来显示要删除的文字
strong>
以粗体来显示文字的重要性
var>
用来显示程序中的变量
code>
用来显示程序中的代码文字
blockquote>
用来将文字缩进显示
cite>
以斜体的方式显示参考文献
address>
用斜体来显示地址
dfn>
用来显示科学上的定律文字
5.2.4在网页中插入水平线
一个HTML文件通过<
来产生段落，可能让文件的段落层次分明，让浏览者知道彼此间哪些是属于同一个部分的内容。
但是一张网页可能有标题以及不同性质的内容，单靠<
段落标记来区分，层次上不够清楚。
此时可能通过<
hr>
标记加入水平线来加以区分，让浏览者很快区分出不同性质的内容。
标记的语法如下：
hralign=”value1”width=”value2”size=”value3”color=”value4”>
显示分层水平线。
①非成对标记
②属性说明如下:
align:
对齐方式center、left、right，默认为center
width:
左右长度，默认为窗口宽度，可用60%来指定其长度为屏幕宽度的比例
size:
上下宽度，也可以用%指定宽度
color:
颜色
noshade:
无阴影
5.2.5制作“跑马灯”
在HTML标记中有个会产生简单特效的标记<
marquee>
，人们俗称之为“跑马灯”。
语法如下：
marqueeloop=”value1”behavior=”value2”…>
/marquee>
升级会员 