Document

Download Report

Transcript Document 

8 网页制作基础知识
赵国庆 博士
[email protected]
北京师范大学教育技术学院
http://ksei.bnu.edu.cn
内容提要
一．
二．
三．
四．
五．
六．
网页制作基本概念
网站设计基本步骤
网页制作常用软件
HTML基础
Dreamweaver网页制作
FrontPage网页制作
一、网页制作基本概念
因特网、万维网和网格



第一代互联网：因特网（Internet）
第二代互联网：万维网（World Wide Web）
第三代互联网：网格（Grid）
Internet（因特网）




Internet是一个通过网络设备把世界各国的计算
机相互连接在一起的计算机网络。
在这个网络上，使用普通的语言就可以进行相
互通信，协同研究，从事商业活动，共享信息
资源。
Internet是世界上规模最大、用户最多的计算机
网络，是20世纪全球发展最快，影响最深远和
冲击最大的信息存取和处理工具。
人们称因特网为第一代互联网。
WWW（万维网）




WWW是internet上运行的全球性分布式信息系统。 是
World Wide Web (环球信息网)的缩写，也可以简称为
Web，中文名字为“万维网”。
由于Web支持文本，图像，声音、影视等数据类型，而且
使用超文本、超链接技术把全球范围里的信息链接在一
起，也称为超媒体环球信息系统。
WWW是Internet的多媒体信息查询工具，是Internet上近
年才发展起来的服务，也是发展最快和目前用的最广泛的
服务。正是因为有了WWW工具，才使得近年来Internet
迅速发展，且用户数量飞速增长。
人们称万维网为第二代互联网。
Internet和WWW


Internet和WWW的关系犹如计算机的硬件平
台和软件环境之间的关系。
WWW技术是Internet上环球信息系统设计技
术上的一个重大突破，是目前最热门的多媒体
技术。
第三代互联网——Grid（网格）


简单地讲，网格是把整个互联网整合成一台巨
大的超级计算机，实现计算资源、存储资源、
数据资源、信息资源、知识资源、专家资源的
全面共享。
网格类似于电力网，用户用电时无需了解电是
由哪个电站发出的。
万维网与网页
网络已逐渐成为与广播、电视、报纸同
等重要的媒体形式，成为人们获取信息
的重要渠道。
 WWW上的大量信息都是通过网站的形
式发布的。
 网站是由一组相关的网页组成的。

网站的分类








门户网站（Sohu, Sina, 网易、新华网、Tom.com）
专业网站（教育类、财经类）
电子商务网站（dangdang, Chinapub）
电子政务网站（政府上网工程）
单位网站（各高校、各部门等）
公司网站
个人网站（blog, 个人站点等）
……
网页、网站和主页的关系
网页
网站
主页
书中的每一页
一本书
书的封皮
Web网页的三种工作模式
Server
执行程序
Web Server
下载
网页
Browser 解读
网页
Web Server
下载
程序
Browser 执行
程序
Web Server
下载
结果
Browser 解读
网页
静态网页工作模式 动态网页工作模式（1） 动态网页工作模式（2）
C/S模式与B/S模式

C/S模式：Client/Server模式，客户/服务器模
式


QQ、Popo、MSN
B/S模式：Browser/Server模式，浏览器/服
务器模式

网页
二、网页制作基本步骤
网页制作基本步骤







网站的选题
网站内容规划
网站素材准备
网页设计与制作
域名申请
服务器配置(或申请主页空间)
网站测试及发布
三、网页制作常用软件
网页制作工具

网页编辑类



图像处理类





如微软的FRONTPAGE
Macromedia公司的Dreamweaver 和 Flash等。
Photoshop
Fireworks
Gif Animator
Cool3D
FTP类

FTP软件是用来发布你的网页的，通过 FTP 软件，能方便
地将你的网页上传到网站服务器上，常见的 FTP 软件有
CuteFTP 和 LeafFTP。
四、HTML基础
HTML

为了在世界范围内发布信息，需要一种能够被
普遍理解的语言，一种能为所有的计算机作为
信息发布用的母语，这就是万维网使用的超文
本标记语言（Hypertext Markup Language，
HTML)。
HTML句法结构
HTML句法结构


Google首页的部分源代码
<html>
<head>
<META HTTP-EQUIV="content-type" CONTENT="text/html;
charset=GB2312">
<title>Google</title>
...
</head>
另外还有HTML文档主体部分的声明。
<body bgcolor=#ffffff text=#000000 link=#0000cc vlink=551a8b
alink=#ff0000 onLoad=sf()>
<center>
HTML句法结构


一个HTML文档是普通的ASCII文本文件，它包含两
类内容：普通的文本、代码或标记。
标记(Tag)是用一对尖括号“<>”括起来的文本串，例
如第一行的<html>。标记通常具有如下结构：
<tagneme attribute1=value1 attribute2=value2…>

在标记定义中，“tagname”是标记名，定义标记的类
型；而“attributes”为属性，一般标记即可以不定义
属性，也可以定义若干个属性，属性给出了这个元素
的附加信息。
HTML句法结构

所谓元素（Element），是HTML中的主要构件，一
般元素都是由成对的标记组成，例如 ：
<title>Google</title>

单个出现的标记成为“空元素”，例如：<br>

可以容纳其他元素的元素也称为“容器元素”，例如：
<head>
<META HTTP-EQUIV="content-type" CONTENT="text/html;
charset=GB2312">
<title>Google</title>
...
</head>
HTML句法结构



在元素的起始标记中可以填入相关的元素属性
在Google主页文档第二行的<head>标记中，
head是标记名，没有相关属性。
在文档主体<body>定义中，定义了若干属
性，属性值为“bgcolor=#ffffff
text=#000000 link=#0000cc vlink=551a8b
alink=#ff0000 onLoad=sf()”。
HTML句法结构



需要注意，虽然标记和属性名称与字母大小写
无关，但是属性值却往往对大小写敏感。
例如，可以在超链中定义相关的文件名，尽管
在Windows系统中，href=a1和href=A1可以
指向同一文件，但在UNIX系统中，却是指向
不同的文件。
重要提示：在网页设计须统一命名方案
HTML句法结构
标记和文本结合起来形成元素(Element)。
每个元素代表文档中的一个对象，比如
文件头、段落或图片。一个元素可具有
一个或一对标记，通常具有一些相关的
属性。
 元素有两种类型：容器（container）元
素和单个元素（空元素）。

HTML句法结构

容器元素包含文本内容，代表一个文本段、它
由文本主体（或其他元素）组成，文本主体在
开头和结尾处用一对标记来确定边界（结尾的
标记用标记名前加“/”来表示，并不带任何属
性）。
例如，<title>和</title >标记把这两个标记之间的文本定义
成一个文档标题。

而空元素是由不影响任何文本的单个标记组成
的，它会在文档中插入一些对象。例如<img
src=…>标记就是一个可以在文档中插入图像
的单个元素。
HTML文档结构和常用元素

这三个元素一起构成完整的HTML文档结构模板，所
有的HTML文档都应该遵循这个模板：
<HTML>
<HEAD>
Header element
</HEAD>
<BODY>
body of Document
</BODY>
</HTML>
HTML文档结构和常用元素

<HEAD>容器元素中包含的最为常用的元素有：

<TITLE>text</TITLE>：这个元素是文档的抬头，
类似书籍的页眉。在浏览器中，标题通常与文本页
分开显示（例如，在窗口的标题栏中）。
抬头（TITLE）在用户保存网页时一般都作为
文件名，所以命名应该注意。
HTML文档结构和常用元素

<BODY>容器元素中包含以下几个常用元素：



<H#>text</H#>：标题把括起来的文本作为标题。从标记
<H1>、<H2>直到<H6>，可以有六个层次的标题（较小的
数字标记较重要的标题）。标题通常用较大的字型编排，并
且在该标题的上下各有一个空行。
<P>：段落标识文本主体中两个段落之间的间隔。
<IMG SRC=“URL”>：图像标记把图像插入到文档中，图像
可以在SRC属性中给出的URL处找到。
HTML文档结构和常用元素

<IMG src="URL" alt="text"
align=TOP/MIDDLE/BOTTOM>



把图像插入到文档中，图像可以在src属性指定的
URL处找到。最常见的图像格式是GIF。
如果浏览器不支持插入图像（例如，Lynx浏览
器），将显示在可选的alt属性中给出的文本。如
果没有给出alt属性值，在图形所在的位置上可能
会出现[IMAGE]的字样。
可选的align属性指出文本的当前行与图像在垂直
方向上怎样对齐（通常是BOTTOM，但这随浏览
器的不同而不同）。
HTML文档结构和常用元素




<UL><LI>text<LI>text</UL>：该结构提供了
一个无序的条目列表；每个条目以<LI>标记开
始。通常在显示出的各条目项前置一个圆点。
<A HREF=URL>text</A>：超文本标记，也称
为超链接。文本用某种特殊方式来显示（用颜
色、下划线或其它类似方法）；
<HR>：放置一个横穿浏览器窗口的水平线，通
常水平线的上下各有一个空行。
<BR>：在文本中强制换行，以便后继文本都放
在下一行。
HTML颜色单位
颜色单位有三种表达的方式：

十六进制的颜色代码
<font color=#FF0000>Red Characters</font>

十进制颜色码
<font color=rgb(0,0,255) > Blue </font>

颜色名码
<font color="green">Green Characters </font>

URL

统一资源定位器(URL)路径是一种因特网资
源地址的表示法。该数据里中可以包括链接
所需协议、链接主机的域名或IP地址、链接
主机的通讯端口（port）号、主机文件的发
布路径和文件名称等。
URL路径


在HTML中，URL路径又分为两种形式：绝
对路径和相对路径。
绝对路径是将主机地址和主机上资源发布目
录的路径和资源名称进行完整的描述。如:
<a href="HTTP://ctec.xjtu.edu.cn/bbs/index.htm">
<a href="file:///c:/xitami/webpages/default.htm">
HTML标准单位

相对路径则是相对于当前的网页所在目录或站
点根目录的路径。如:
<IMG SRC="Snowwhite.jpg">
<!--图像文件"Snowwhite.jpg"与当前显示的网页在同一目录下；-->
<IMG SRC="../image/Leaves.jpg">
<!--图像文件"Leaves.jpg "在与当前显示网页所在目录同层次的另一
子目录image下；-->

URL的绝对路径必须以http://形式开始，例如：
<IMG SRC=“http://202.117.35.70/image/Snowwhite.jpg">
HTML基本元素的使用

HEAD容器
HTML文档的<HEAD>标记是一个容器元素，
在<HEAD>容器中允许出现以下元素：

TITLE元素
<TITLE>"text"</TITLE>
TITLE元素所包含的内容通常会出现在浏览器的标题栏或
成为保存网页到本地磁盘时的默认文件名。
HEAD容器(续)

LINK元素
<LINK name="text" rel="text" href="URL">
在当前文档和另一文档之间建立链接关系。
name属性给链接起一个名字，比如
“Mail to Author”（发给作者），rel属性
描述了链接的类型，比如“made”（表示
作者），“parent”（表示文档是大文档
的一部分），“next”（表示是多文件文
档的后续部分），及“pre”（表示前序部
分）。href属性指向相关的文档。
HEAD容器(续)
META元素
<META NAME="text" CONTENT="text">
META元素提供网页作者以各种方式来描述与文
档本身而不是文档内容有关的信息。如META元素
通常用来为搜索引擎定义页面描述以及搜索关键字；
或者是定义用户浏览器上的Cookie，还可以设置页
面使其可以根据定义的时间间隔刷新页面。值得注
意的是META标记是一个单个元素。

HEAD容器(续)
<meta name="keywords" content="HTML, DHTML,
CSS, XML, XHTML, JavaScript, VBScript">
<meta name="description" content="基于开放平台
的动态网页程序设计">
以上语句为搜索引擎列出了关键字列表，
这些关键字可以将页面正确地放置在
Excite，Alta vista，Lycos和InfoSeek等著
名搜索引擎的列表上，以便进行快速搜索。
HEAD容器(续)
<META http-equiv="Expires" content="Tue, 20 Aug
2001 14:25:27 GMT">
以上语句会产生一个“Expires: Tue, 20 Aug
2001 14:25:27 GMT”的HTTP的头部（header），
使得缓存链（Caches）决定何时取回相关文件的
新版本。大部分浏览器为了节约下载时间，会在本
地硬盘上保存已访网页的临时版本。在用户下次打
开同一页面时，浏览器将直接调用硬盘上的文件，
而不是网上的。
HEAD容器(续)
<META HTTP-EQUIV="content-type" CONTENT="text/html;
charset="GB2312">
用户可以通过META元素为浏览器指定显示当前
网页须用的语言编码，而无需读者自选。上面语句
的黑体部分指定了当前的网页语言编码是简体中文。
如果需要将网页的编码方式指定为繁体中文，可以
使用下面语句：
<META HTTP-EQUIV="content-type" CONTENT="text/html;
charset="BIG5">
HTML基本元素的使用
<BODY>容器

包含在<BODY>标记对中的内容将显示在浏览器的
主窗口中。

在开始设计网页之前，需要对页面进行一个整体的规
划和设置，如背景颜色、背景图案、页面留白以及大
部分文字的颜色等等。

在HTML中，使用<BODY>元素来定义页面的这些基
本属性。如在本章开始时提到的搜索引擎“Google”
主页的例子，其<BODY>的定义如下：
<BODY bgcolor=#ffffff text=#000000 link=#0000cc
vlink=551a8balink=#ff0000 onLoad=sf()>

<BODY>容器(续)




BODY元素本身的属性可以分为三类：
背景属性，其中包括BGCOLOR和BACKGROUND：
BGCOLOR
背景色
BACKGROUND
背景图案
文字属性：
TEXT
正文文字颜色
LINK
链接文字颜色
ALINK
活动链接文字颜色
VLINK
已访问链接文字颜色
留白属性，其中分为LEFTMARGIN和TOPMARGIN。
LEFTMARGIN
页面左侧的留白距离
TOPMARGIN
页面顶部的留白距离
HTML基本元素的使用

字符容器（Character Container）允许在段落
内部格式化或描述字和词组,使其呈现出不同
的风格
超文本链接
超文本链接是HTML文档具有链接和检索功能的
基本原因，也是HTML中最重要的概念之一。超文
本锚点是指文档中的某处位置，在该位置下隐含了
对其它文档的链接。
<A href="URL" name="text">text</A>

字符容器(续)

文本修饰逻辑风格
文本修饰逻辑风格允用户赋于文本的各个
片段以真正的含义。
<b>text</b>
<I>text</I>
<tt>text</tt>
<!--黑体-->
<!--斜体-->
<!--打字机文本-->
HTML基本元素的使用

块容器
在HTML中，块容器（Block Container）
被定义成一个具有标记的文本片段，本身在
HTML文档中占有一定垂直空间，如一个段
落或一个标题(header)。某些元素可以互相
衔接，但不能嵌套（如，<h1>内部不能有
<p>，因为它们代表不同类型的块）。
块容器(续)

标题元素
<H#>text</H#>
用<H#>标注的标题和用<title>标注的标题是截然
不同的，前者是修饰浏览器窗体内文本的元素，而
后者标识的内容将显示在浏览器的标题栏中。
＃值可以从1到6，用以充当文档该节的标题。#位
置的数字值越小表示的标题就越重要，相应的字号
要大些。
块容器(续)

段落
Text<P>text
<p>text</p>
在一般网页中，该标记以第一种形式使用，
作为段落的分隔符。因此，它标识正常文本主
体的两个段落之间的界限。
注意不要不要使用 ….<p><h1>的形式，因为
<h1>隐含着换行，有些浏览器在元素之间会插
入太多的空行。
第二种形式（每个段落都有一个容器）表示了
一个更标准的SGML结构。
块容器(续)

预先格式化文本
<PRE>text</PRE>
由于HTML忽略多余的空格、制表符（tab）和
换行符（enter），某些具有特殊格式的文本，如
诗歌、表格及计算机程序清单等都很难标记。
<PRE>元素用于这样的文本，它按照文本原稿出
现的样式格式化所包含的文本，包括原稿中出现的
空格、制表和换行符等。
Table元素



表格元素是HTML中最为复杂，同时又是应用
最为广泛的元素之一。
表格元素在网页中以表格形式组织和显示数据
大量使用在网页布局设计上。在 “Google” 貌
似简单的网页上，居然也用了三个表格来布局。
Table元素（续）
Table元素（续）

<TABLE>标记的一般形式是：
<TABLE WIDTH="?" BGCOLOR="?" BACKGROUND="?"
BORDER="?" CELLSPACING="?" CELLPADDING="?">
<TR>
…
<TD> …</TD>
…
</TR>
</TABLE>
Table元素（续）

在<TABLE>标记的属性中：



Width表格的宽度，在默认状态下为自动适应表格
内容的宽度，即根据表格中的内容来自动调节表格
的宽度。取值可以是HTML的绝对或者相对长度标
准单位。
Bgcolor表格的背景颜色，在默认状态下表格无背
景色，网页作者亦可使用HTML的各种颜色单位进
行指定。
Background 表格的背景图案，须用URL来指定作
表格背景图片的文件路径。
Table元素（续）



Border 表格边框的风格（在作为布局使用时往往
取其默认值"0",即不显示表格的边框），在
“Border=1”时，表格的边框成3D的状态。
CellSpacing 表格中单元格的边距大小，即单元格
间距，长度单位。
CellPadding 表格中单元格之间的间距大小，表中
单元格的内容与单元格边框之间的留白距离，即单
元格边距，长度单位。
Table元素（续）
TR元素


TR元素表示表格中的行标记，表格中的每一行都
必须包含在一对<TR></TR>标记中。行标记的一
般形式是：
<TR ALIGN="?" BGCOLOR="?">… …</TR>
TR元素（续）
在<TR>标记的属性中：

Align
值如下：




指定该行中单元格的对齐方式，可选
Left 左对齐（默认值）
Center
居中对齐
Right 右对齐
Bgcolor
指定该行的背景颜色。
Table元素（续）
TD元素


单元格是表格的基本组成元素，一个TD元素表示
表格中的一个单元格，由<TR>标记对中所圈入
的所有TD元素构成了表格的一行。单元格标记的
一般形式是：
<TD WIDTH="?" HEIGHT="?" ALIGN="?" VALIGN="?"
BGCOLOR="?" BACKGROUND="?" ROWSPAN="?"
COLSPAN="?"> … …</TD>
TD元素（续）

在<TD>标记的属性中：






Width
Height
Align
Valign
RowSpan
ColSpan
单元格宽度
单元格高度
单元格水平对齐方式
单元格垂直对齐方式
单元格的行跨度
单元格的列跨度
五、应用Dreamweaver制作网页
应用Dreamweaver制作网页
六、应用FrontPage制作网页
FrontPage2003
8 网页制作基础知识
赵国庆 博士
[email protected]
北京师范大学教育技术学院
http://ksei.bnu.edu.cn