当前位置：文档之家› 网站建设复习资料

网站建设复习资料

网站建设

网站（Website）是指在因特网上，根据一定的规则，使用HTML等工具制作的用于展示特定内容的相关网页的集合。简单地说，网站是一种通讯工具，就像布告栏一样，人们可以通过网站来发布自己想要公开的资讯，或者利用网站来提供相关的网络服务。

搜索引擎：搜索引擎(search engine)是指根据一定的策略、运用特定的计算机程序搜集互联网上的信息，在对信息进行组织和处理后，为用户提供检索服务的系统。

URL（Uniform Resource Locator）即统一资源定位器，它是一种通用地址格式，是Inetrnet的文件命名系统。当用户查询信息资源时，只要给出URL地址，服务器便可以根据它找到网络资源的位置，并将其传送给浏览器。

超链接（Hyperlink）是从一个页面跳转到另一个页面的入囗，它可以看做是一种文件的指针，它提供了相关联文件的路径，并且可以跳转执行相应的文件。

动态网页:是指网页的内容可根据某种条件的改变而自动改变的一类网页，与静态网页相对，网页的URL后缀不是.htm等，而是.asp,.jsp等，并在网址中有标志性符号“？”。

框架(Frame)网页是—种特殊的HTML网页，它可将浏览器窗口分成不同的区域，称为框架区域。每个区域都可以显示不同的网页。使用框架的最常见情况是：一个框架显示包含导航控件的文档，另一个框架显示含有内容的文档。

框架：是浏览器窗口中的一个区域，一个框架就像一个网页一样可以显示与浏览器窗口的其他部分无关的HTML文档。每个框架包括框架高度、框架宽度、滚动条和框架边框，此外还可指定框架的内边距（框架与网页正文之间的距离）。

框架集(Frameset)：是HTML文件，它定义一组框架的布局和属性，包括框架的数目、框架的大小和位置，以及在每个框架中初始显示的页面的URL。但框架集文件本身不包含要在浏览器中显示的HTML内容。通常将一个站点的框架集文件命名为index.html，以便当访问者未指定文件名时默认显示该名称。

CSS是W3C定义和维护的标准，是一种用来为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）的计算机语言。

图层又称层，是Dreamweaver中最有价值的对象之一，它是由层叠样式表发展过来的，它提供了一种对网页对象进行有效控制的手段，层可以包含文本、图像、表单、插件，甚至层内还可以包含其它层。表单是用于实现网页浏览者与服务器(或者说网页所有者)之间信息交互的一种页

面元素，在WWW上它被广泛用于各种信息的搜集和反馈。

元件是构成Flash动画的一个非常基础的单位。元件一旦被创建，就会

被自动添加到当然影片的库中，并可以被当前影片或其他影片重复调用。元件主要有图形、按钮和影片剪辑这三种类型

库：是一种特殊的Dreamweaver文件，其中包含已创建的单独的网

页“资源”或资源拷贝的集合。

网页优化：实际上是对HTML源代码的一种优化，包括了整理HTML文档和优化文档，目的是去除那些无用的垃圾，修复代码错误，提高代码质量。

按照其是否提供网络服务可分为门户网站和非门户网站，门户网站根据所提供的服务又可分为搜索引擎、电子邮件、网络聊天室、新闻组和电子公告牌等。

按照网站所属部门的性质可分为企业网站、政府网站、学校网站或个人网站等。

按照网站的主题可分为综合网站和专业网站等。

国内三大门户网站：新浪、搜狐和网易

搜索引擎的分类：全文索引、目录索引、元搜索引擎

所有网站都具有许多的共同特征:明确的主题、统一的风格、便捷的导航系统、方便的交流方式

一个完整的URL地址由协议名、Web服务器地址、文件在服务器中的路径和文件名四部分组成，每部分用斜杠“/”分隔。例如

https://www.doczj.com/doc/9717439079.html,/index.html http:// 是协议名（HTTP协议）， https://www.doczj.com/doc/9717439079.html, 是主机域名，即Web服务器地址, index.html 为要访问的文件名。

超链接技术是从一个网页指向另一个地址的链接，如指向另一网页或同一网页上的不同位置。链接地址通常是另一个网页，也可以是一幅图片、一个邮件地址等。

目前网站基本都采用 C/S 体系结构和 B/S 体系结构。

网页构成的基本要素:文字、表格、图形、链接标志、交互功能

网页上的图形格式一般使用JPEG、GIF和PNG

网页制作工具:超文本标识语言、Dreamweaver、FrontPage 、Photoshop、Fireworks、Flash

主要网页制作语言：HTML 、XML、ASP、https://www.doczj.com/doc/9717439079.html,、JSP

网页逻辑结构基础：最基本的有线型结构、层次型结构和网络型结构。要实现链接到同一个页面不同部分的超链接，需要定义两个标记：一个为超链接标记，另一个为书签标记。

CSS的定义由三部分构成：选择符selector、属性property和属性

值value。

表单通常由普通页面元素、表单控件两类元素组成。

网页中的文本框有：单行文本框、口令框、多行文本框。

数据库连接使用数据源名称或者使用连接字符串两种方法连接到数据库。

Dreamweaver的视图有：代码视图、拆分视图、设计视图。

HTML文档是有元素和内容组成的。

在网站设计中，纯粹的HTML格式的网页通常被称为静态网页。

在网站设计中，BBS论坛通常被设计为动态网页。

通常。。。之间的文字会显示在浏览器的标题栏上。在页面中，文本元素对齐的设置主页使用align属性。

WWW客户机和服务器之间的通信通常分为四个步骤：

1) 首先客户机通过浏览器向服务器发送HTTP请求，请求一个特定的网页。

2) HTTP请求通过Internet网络传送到服务器。

3) 服务器接受这个请求，找到所请求的网页，然后用HTTP协议再将这个网页通过Internet网络发送给客户机。

4) 客户机接收这个网页，并在浏览器中显示。

目录结构的设计一般遵循以下原则：

①根据网站的栏目规划来设计目录结构：一般一一对应地一个栏目创建一个子目录，子栏目的网页就存在父栏目对应的目录中。

②建立独立的图片子目录：一般把网页所用的全部图片统一存放在一个目录里，以便于图片的共享。如果图片很多，这个目录最好也能分门别类的创建子目录。

③目录的层次不要太深。

④尽量不要使用中文目录名：因为你的站点对Internet所有用户开放，所以你必须考虑到使用非中文操作系统的客户也能正常访问你的站点。对于目录名，最好使用英文。

⑤数据库文件单独放置：数据库文件因为安全要求较高，所以最好放置在HTTP所不能访问到的目录底下。这样可以避免恶意的用户通过HTTP方式取到数据库文件。

色彩的基础知识

网页中的颜色通常采用6位十六进制的数值来表示，每两位代表一种颜色，从左到右依次表示红、绿、蓝色。颜色值越高表示这种颜色越深。例如红色的数值为“#FF0000”，白色为“#FFFFFF”，黑色

为“#000000”。

按颜色的色调通常将其分为七种颜色：红、橙、黄、绿、青、蓝、紫。如果将这七种颜色按顺序渐变为一条色带的话，越靠近红色，给人的感觉越温暖，越靠近蓝色和紫色，给人的感觉越寒冷。所以红、橙、黄的组合又称为暖色调，青、蓝、紫的组合称为冷色调。

主色调指的是整个网站给人的印象最深的颜色，或者说除白色之外用得最多的颜色。通常表现在三个位置：首先是头部，也就是网页最上面的部分，一般包括导航条。其次是栏目索引条上。最后是网页上的文字，文字笔画虽细，但大面积的文字也能很好地突出主色调。

一般导航可分为两类：纵深型和横向型。

所谓纵深型，就是导航能顺着根节点告诉访问者他所在的位置，如网站中的导航栏所示。

所谓横向型，就是把某一节点下同一层的所谓节点并列列出，使访问者可以在同一层方便的跳转，通常是在网页的某一固定位置列出第一层的所有节点目录。如下图网站中的导航栏。

网站建设与网页制作的基本步骤:1、网站定位；2、整体规划；3、网页设计与制作4、测试网页

5、网页上传发布；

6、网站的宣传与推广；

7、网站的反馈与评价；

8、

网站的更新与维护

合理的结构设计对于网站的规划也是至关重要的。以下是三种常用的结构类型。

① 层状结构层状结构类似于目录系统的树型结构。

② 线性结构线性结构类似于数据结构中的线性表，用于组织本身的线性顺序形式存在的信息，可以引导浏览者按部就班地浏览整个网站文件。

③ Web结构 Web结构类似于Internet的组成结构，各网页之间形成网状连接，允许用户随意浏览。 V7

静态网页的特点：

(1)静态网页每个网页都有一个固定的URL，且网页URL

以.htm、.html、.shtml等常见形式为后缀，而不含有“?”;

(2)网页内容一经发布到网站服务器上，无论是否有用户访问，每个静态网页的内容都是保存在网站服务器上的，也就是说，静态网页是实实在在保存在服务器上的文件，每个网页都是一个独立的文件;

(3)静态网页的内容相对稳定，因此容易被搜索引擎检索;

(4)静态网页没有数据库的支持，在网站制作和维护方面工作量较大，因此当网站信息量很大时完全依靠静态网页制作方式比较困难;

(5)静态网页的交互性较差，在功能上有较大的限制。

动态网页的一般特点简要归纳如下：

（1）动态网页以数据库技术为基础，可以大大降低网站维护的工作量；

（2）采用动态网页技术的网站可以实现更多的功能，如用户注册、用户登录、在线调查、用户管理、订单管理等等；

（3）动态网页实际上并不是独立存在于服务器上的网页文件，只有当用户请求时服务器才返回一个完整的网页；

（4）动态网页中的“？”对搜索引擎检索存在一定的问题，搜索引擎一般不可能从一个网站的数据库中访问全部网页，或者出于技术方面的考虑，搜索蜘蛛不去抓取网址中“？”后面的内容，因此采用动态网页的网站在进行搜索引擎推广时需要做一定的技术处理才能适应搜索引擎的要求。

测试网页

当网页设计人员制作完所有网站页面之后，需要对所设计的网页进行审查和测试，测试内容包括功能性测试和完整性测试两个方面。

所谓功能性测试就是要保证网页的可用性，达到最初的内容组织设计目标，实现所规定的功能，读者可方便快速地寻找到所需的内容。完整性测试就是保证页面内容显示正确，链接准确，无差错无遗漏。

网页上传发布

网页设计好，必须把它发布到互连网上，否则网站形象仍然不能展现出去。发布的服务器可以是远程，也可以是本地，但必须要求服务器支持相应数据库，实现动态页面。

（1）申请域名和主页空间——网站的发布首先要考虑的是以什么样的域名发布，发布在什么地方，即要申请域名和主页

空间。

（2）设置浏览器的兼容性——为了避免在不同类型和版本的浏览器中出现某些元素不能正常显示的现象，在站点发布前必须设置浏览器的兼容性。

（3）测试站点——在将站点上传到服务器并宣布已经可供浏览之前，最好先在本地计算机上对其进行一下测试，因为在站点或者网页中可能会存在许多问题。

站点的测试主要包括：查看超链接、验证超链接、修复超链接、更新超链接及测试网络连接等。

（4）测试网络连接——如果在访问或打开一个服务器上的站点时遇到一些问题，则可以通过测试网络连接来检查主机名称、本地主机、IP地址、TCP/IP协议等设置。

（5）在本地计算机上发布站点——测试完站点后，如果觉得把站点发

布到服务器上的时机还不成熟，那么可以先在本地机上发布以测试效果。

（6）在服务器上发布站点——在本地计算机上设置完浏览器的兼容性、测试完站点后，就可以在服务器上正式发布精心制作的站点了。发布站点的方法有很多种，例如FTP上传或各大站点提供的文件管理器等。

注意：

每个元素都用“<”和“>”括起来，“<”与元素名之间不能有空格或其它字符。

所有的元素都是成对出现的，在元素名前加符号“/”便是其结束标记，表示这种元素内容的结束。

元素名不用区分大小写。但在编写网页时最好保持元素的大小写一致，这样便于辨认，有利于减少编制网页中的错误。

对同一段要标记的内容，可以用多个元素来共同作用，产生一定的效果。此时各个元素间的顺序也是任意的。

…
2、HTML文档的结构
HTML文档的基本结构为：
网页标题（网页制作教学）
网页内容（BODY之间则为主要语法所在，也是网页的主要呈现部分。）
3、 HTML文档的命名
当一个Web浏览器打开一个文件时，首先确定该文件的类型，然后再确定其打开方式。文件的后缀名就成为文件类型的标志。
HTML文档本身是一种文本文件，它的文件扩展名通常为“.
html”和“. htm”标志，所以只要有文字编辑功能的工具都可以用来编辑或处理HTML文件。
4、HTML的注释
Web浏览器对“”之间的部分不予显示。一个优秀的网页应该有详尽的注释，能让别人看得懂页面源代码。
HTML的注释的功能除了注释外，还能用作屏蔽功能。网页制作者常利用来屏蔽掉不想让页面访问者看到但又必须放到网页里的部分，如嵌入到网页中的脚本，样式表等。
第二节 HTML的标题和首部
HTML文档首部一般用于标记文档的某些信息，放于文档的与
之间，用于描述HTML文档的信息，如文件的标题、文档的信息等，它们通常不会显示在页面上。
1、网页标题
其用法为：网页的标题
该元素用于标记文档的标题，通常……之间的文字会显示在浏览器的标题栏上。一般用简明扼要的文字概括该文档的主题，不超过64个ACSII码字符长度。因为过长的话，窗口的标题栏无法容纳。
2、isindex 该标签用于标志该文档为索引文件，即该文档可以使用关键字查询，该文档所在的服务器一定有用于该文档的搜索引擎。其用法为：
3、base 该标签用于记录文档本身的统一资源地址(URL)，这在文档从原来的位置移到其他地方后特别有用。其用法为：
4、link 该标签用于标志某一文档和其他文档或者对象之间的相互关系。可能出现的关系有：“NEXT”、“PREVIOUS”和“HOME”等。其用法为：
title=“title” style=“style”>
5、meta
该标签用于为文档的特殊变量赋值，提供关于文档的信息，比如设置浏览器所使用的语言、创建日期、作者或者版权信息。这些变量将被加到由Web服务器发送到被浏览器使用的相关的域中。其用法：
…”content=“fieldValue”>
常用的有以下几种：
（1）指定被搜索引擎作为索引的关键词。
用法：
（2）设置文档的语言字符集信息
该标签用于向这个文档提示它所使用的语言。
用法：
（3）自动刷新页面
该标签能够要求浏览器以设置的时间为周期自动更新文档，
用法：
URL="linkto">
（4）描述页面内容
该标签向浏览器报告页面的相关信息，如作者、版权等。
用法：
第三节　文本的格式化
一、标题文字(header)
标题是一段文字内容的核心，通常用加强的效果来表示。网页中可以通过设置不同大小的标题来增加文章的条理。其用法：标题文字
例如：标题文字设置代码：
网站规划与网页设计

网上教学系统

二、段落和换行

在用浏览器浏览一个网页时，只有在HTML源文件中遇到换行或换段的标签时，才进行换行或换段的操作。

1、强制分段标签在HTML文档中，用

……

来强制换行、分段。

…

标签不但能使文字换到下一行，还可以使两段之间多一空行。

2、强制换行标签

放在一行的末尾，可以使后面的文字、图片、表格等元素显示于下一行，而行与行之建不会留下空行，即强制文本换行。其用法为：文字

3、显示预排格式

如果希望在浏览网页时，保留在编辑工具中已经排好的段落格式，可以使用

标签将预先排好的格式保留下来。显示预排格式的标签格式为： < pre >预先排好的格式

4、文字的对齐

在页面中，文本元素对齐的设置主要使用align属性，除此之外还可以使用

标签来设置居中对齐。

（1）align属性：它是跟许多元素都有关的属性

（2）center

该元素确定位于它之间的对象定位于页面的中央，其用法为：

文本内容

5、水平线

用法为：

使用方法：上一段文字内容

下一段文字内容

三、正文文字

网页中的文字可以设置为不同大小、字体、字形、颜色。用标

签来设置。其用法为：

被设置的文字

1、设置字的大小

用size来设置文字的相对大小，取值为n=1，2，3，4，5，6，7或+n，-n

2. 设置字体

用face来设置文字的字体，如黑体、宋体、隶书等。

3. 设置字形

字形就是文字的风格，如粗体、斜体、下划线、上标、下标等。 4、设置文字颜色

用color来设置文字颜色。利用它可以设定网页、段落、文字等的颜色。颜色的取值是以“#”引导的一个十六进制代码来表示。

例如：感觉的萌芽

四、字符实体

由于HTML文档是纯粹的ASCII文本，它只支持26个大小写字母、数字及其他常用的一些ASCII字符，如@#$等，另外

像“”“，“<”，“>”等用于HTML标记元素的字符以及文档中的空格等，浏览器都会忽略，不会显示出来，故这类字符无法用原来的字符标记显示。解决方法就是使用字符实体。

一个字符实体的通常格式为“&#;”，其中“#”代表字符实体名称或字符的ASCII码值。

第四节　超链接和列表

一、链接

所谓的链接就是从一个Web资源连接到另外一个资源。具有将一个文档链接到另外一个文档的能力，使HTML在文档标记语言中显得出类拔萃，这也是广泛流行的关键。

1、锚点标记（内部链接）

锚点标记由来定义，它在网页上建立超文本链接，其用法为：

式”>链接文字

先在欲连结处作记号：你想连结的点

设定连结：连结

2、创建指向其他页面的链接（外部链接）

创建指向其他页面的链接，就是在当前页面与其它相关页面间建立超链接。无论目标文件与当前文件的目录关系如何。

其用法为：超链接文字

3、创建指向页面中标签的链接

要实现链接到同一个页面不同部分的超链接，需要定义两个标记：一个为超链接标记，另一个为书签标记。

书签就是用标记对该文本作一个记号。如果有多个链接，不同目标文件要设置不同的书签名，书签名在的name属性中定义。其用法为：目标文本附近的字符串

超链接标记的格式即访问书签为：超链接文字

4、创建指向下载文件的链接

如果链接到的文件不是HTML文件，则该文件将作为下载文件，其用法为：

超链接文字

经常使用这种方法来实现网页中文件的下载链接。

5、创建指向电子邮件的链接

如果在网页中要实现电子邮件地址的链接，则在标记的href属性中加入mailto，其用法为：

超链接文字

二、列表

列表分为无序列表和有序列表。

1、无序列表

建立无序列表使用

标记和

表项标记，其用法为：

第一个表项

第二个表项

……

其中，type指定每个表项左端的符号类型，可为disc(实心圆点)、circle(空心圆点)、square(方块)等，也可以自己设置图

片。

例如：一个简单的无序列表。

也可以将type属性应用在列表项目标签

中，以改变特定项目符号的形状。

例如:改变列表项目中的项目符号形状。

2、有序编号列表

有序列表允许使用和无序列表相同的基础框架：整个列表包含在

和标签中，每一个单独的列表项目用一个

标签来表示。额外的空白会添加在列表的上下两处。其用法为：

第一个表项

第二个表项

……

type属性可以用在有序列表中，指定编号的类型。有五种可能的值：1(数字)、A(大写字母)、a(小写字母)、I(大写罗马字

母)、i(小写罗马字母)。其中默认的序号为数字。

例如：一个简单的有序表。

3、定义列表

定义列表是有要定义的项目和该项目的定义构成的，一般来说，项目放在页面的左边，而该项目的说明则以缩进显示，使之具有交互凹凸的特点。定义项目列表使用标记

和

。

用来定义项目，

则定义该项目的说明语句。其用法为：

定义项目1

项目1的说明

定义项目2

项目2的说明

……

第五节　图像元素

图形文件在Web上有很多用法。图片文件可以用作网页的背景图案，也可以创建一个对图形文件的超链接，使它显示在浏览器窗口中。

1、设置网页的背景

网页的背景可以是某种颜色，也可以是图片。无论是图片，还是背景色，都使用标记，只不过使用不同的属性。

（1）设置背景色

网页默认为白色，的bgcolor属性用于设置网页的背景色。其用法为：

其中颜色值可以为颜色的英文名或相应十六进制值。

（2）用图片作背景使用标记的background属性来设置，其用法为：

2、图片标签(img)

使用图片标签，可以把一幅图片加入到网页中，用图片标记还可以设置图片的替代文本、尺寸、布局等属性。其用法为：

框宽度” src=“图片文件名” align=“对齐方式” hspace=“水平方向空白” vspace=“垂直方向空白” width=“图片宽度”height=“图片高度” alt=“简单说明”>

3、设定图片的布局

所谓布局，就是图片放在网页中的位置，以及图片与文本的排放关系。实现这种功能，除了原有的标记外，还有

、

等标记。

（1）水平对齐方式图片的水平对齐方式主要有三种：左边（left）、中间（center）、右边（right）。通过用

标记的align 属性来设置它的对齐方式。其用法为：

其次，还可用

标记来实现图片的居中。其用法为：

（2）设置图片与文本间的关系

在网页中也可以设置图文混排的版面，如图文的对齐、文本环绕图片的等。

首先是图片与文本之间的空白设置。标记的hspace和vspace属性可以实现该功能。

其次是文本与图片在垂直方向上的对齐。利用标记的align属性可设定它们在垂直方向的对齐，其用法为：文本文本

align的值可取：top文本与图片顶部对齐；middle中央对齐；bottom底部对齐；

第三是文本环绕图片，利用标记的属性，可以是文本环绕图片。

其用法为：

文本

align的取值为：left图片居左、right图片居右。

使用该标记设置文本环绕方式后，将一直有效，直到遇到下一个设置标记。如果想取消文本环绕图片，可使用
标记，其后的文本将不再环绕图片。其用法为：

clear的取值：left解除左侧文本、right解除右侧文本、all解除左右文本。

4、用图片作超链接

要将图形变成链接，可以将锚标签放在图像标签的两头，就像用锚标签来围绕文本字符串一样。其用法为：

第六节表格标签

1	2	3
4	5	6

1
4	5	6

1	2	3
1	5	6