网站建设

网站建设 2004.9.6

第一章 网页设计概述

第一章网页设计概述 第一节基础知识一、基础概念网页：是一种用HTML语言编写的文本文件。 HTML：全文是“HyperText Markup Language”，中文意思为“超文本标记语言”。超文本：意指页面内除文本外，还可包含图片、链接、甚至音频、视频等非文字元素。

第一章网页设计概述 主页：Internet用户访问网站时所看到的第一个网页(网站的入口)，称作主页（Homepage或Home Page）。超链接：一种与其它文件的链接，当用户单击后，所链接的网页信息显示出来。网站：在逻辑上可视为一个整体的一系列网页的集合称为网站（Web Site或Site）, 网页之间用超级连接进行连接。网站用于构成一个WWW信息服务器，提供一定范围内的信息资源；如一个学校，一个企业、一个公司等的WWW服务器。

第一章网页设计概述

第一章网页设计概述 二、网页设计的基本方式 1、手工编码方式网页是由HTML超文本标记语言编码的文档，设计制作网页的过程就是生成HTML代码的过程。在WWW（World Wide Web ）发展的初期人们制作网页是通过直接编写HTML代码来实现的。

第一章网页设计概述 2、可视化工具方式用FrontPage、Dreamweaver等网页编辑工具在可视环境下编辑制作网页元素，由编辑工具自动生成对应的网页代码。如制作表格，就可以直接在工作区中绘制表格而不用考虑编码的规则和语法。利用可视化工具编辑网页操作简单直观，调试方便，是大众化的网页编辑方式。但在制作一些特殊网页效果上有一定的局限性。

第一章网页设计概述 3、编码和可视化工具结合方式编码和可视化工具结合是一种比较成熟的网页制作方式。具体过程：一般的网页元素通过可视化工具编辑制作，一些特殊的网页效果通过插入代码生成。

第一章网页设计概述 三、网页中的常见元素 1、文本文本是网页发布信息所用的主要形式，由文本制作出的网页占用空间小，传输速度快。网页中的信息以文本为主。虽然不如图象那样能够很快引起浏览者的注意，但能准确地表达信息的内容和含义。为了克服文本固有的缺点，人们赋予了文本更多的属性，如字体，字号，颜色，底纹和边框等，通过不同格式的区别，表现不同的内容。

第一章网页设计概述 2、图像和动画图像在网页中具有提供信息，展示作品，装饰网页，表达个人情调和风格的作用。用户可以在网页中使用GIF, JPEG(JPG), PNG三种图象格式，其中使用最广泛的是GIF和JPEG两种格式。

第一章网页设计概述 3、声音和视频声音是多媒体网页的一个重要组成部分。用于网络的声音文件的格式非常多，常用的有MIDI、WAV、MP3和AIF等。视频文件的格式也非常多，常见的有Realplay(RM), MPEG, AVI和DivX等。不支持的格式，尽量少用或者不用。

第一章网页设计概述 4、超级链接超级链接技术可以说是万维网流行起来的最主要的原因。从本质上讲，是指向目的信息页面的地址信息。可以指向一幅图片，一个电子邮件地址，一个文件，一个程序或者是本网页中的其他位置。

第一章网页设计概述 5、表格在网页中表格用来控制网页中信息的布局方式。这包括两方面：一是使用行和列的形式来布局文本和图像以及其他的列表化数据；二是可以使用表格来精确控制各种网页元素在网页中出现的位置。即作为一种容器。

第一章网页设计概述 6、表单使用超级链接，浏览者和Web站点便建立起了一种简单的交互关系。网页中的表单通常用来接受用户在浏览器端的输入，然后将这些信息发送到用户设置的目标端。即问答式交流。

第一章网页设计概述 7、导航栏导航栏是用户在规划好站点结构，开始设计主页时必须考虑的一项内容。导航栏的作用就是引导浏览者游历站点。网站中的导航系统，实质上就是一组使用了超链接技术的网页对象（包括文字、按钮、小图片、图形等），它们将网站中的内容有机地连接在一起。

第一章网页设计概述 四、网页元素的创作与编辑工具 1、网页图像制作工具 ①、Fireworks MX Firework MX是Macromedia公司的产品，是目前最流行的网页图像制作软件。 ②、Photo shop

第一章网页设计概述 2、动画制作工具 ①、Flash MX Flash MX也是Macromedia公司的产品，是目前最流行的矢量动画制作软件。 ②、Director Director是Macromedia公司推出的多媒体开发工具，它为广大多媒体制作人员提供了建立交互式应用的强大功能。

第一章网页设计概述 3、网页编辑工具 ①、FrontPage FrontPage是Microsoft Office家族中的一员，FrontPage的界面，功能与Word非常相似。操作方法与 Office软件一致。

第一章网页设计概述 ②、Dreamweaver MX Dreamweaver MX和Fireworks MX、Flash MX一起，被人们喻为“网页制作三剑客”。 ③、HotDog HotDog是较早基于代码的网页设计工具，其最具特色的地方是提供了许多向导工具，能帮助设计者制作页面中的复杂部分。

第一章网页设计概述 第二节网页的制作语言一、概述 HTML（超文本标记语言）是一种描述文档结构的语言，它利用标签来描述文档结构、指定文档内容在浏览器中的显示格式、位置等。客户机上的浏览器（browser）对这些描述进行解释将相应页面内容正确显示在显示器上。一个WEB页面就是一个HTML文档。

第一章网页设计概述 HTML语法是由标记(Tags)和属性(Attributes)所组成。标记(Tag)：标记符又称标签，HTML是影响网页内容显示格式的标记符集合，浏览器根据标记符决定网页的实际显示效果。在HTML中，所有的标记符都用尖括号括起来。例如，<HTML>表示HTML标记符。绝大多数标记符都是成对出现的，包括开始标记符和结束标记符。

第一章网页设计概述 如：<HTML>…<／HTML>。开始标记符和相应的结束标记符定义了标记符所影响的范围。开始标记符与结束标记符的区别在于：结束标记符多一个斜杠“/”（不是反斜杠“\”！）某些标记符，例如 ，只要求单一标记符号。

第一章网页设计概述 属性(Attribute)是用来描述对象特征的。值(Value)：通常属性会有一个值，而且这个值必须从预先定义好的范围内选取。在HTML中，所有的属性都放置在开始标记符的尖括号里，属性与标记符之间用空格分隔，属性的值放在相应属性之后，用等号分隔，而不同的属性之间用空格分隔。

第一章网页设计概述 格式： <标记符属性1=属性值1 属性2=属性值2 …> 受影响的内容 <／标记符> HTML属性通常也不区分大小写。例如，用字体标记符和字号属性指定文字的大小。 本行字将以较小字体显示。 另外标记可以嵌套，如： <H1>HappyBirthday</H1>

第一章网页设计概述 空格：HTML浏览器会忽略标记之间多余的空格或“Enter”。二、HTML语言的结构及语法规范 1、HTML语言的结构 HTML文档由三大元素构成：HTML元素、HEAD元素和BODY元素。每个元素又包含各自相应的标记（属性）。

第一章网页设计概述 （1）HTML标记符 <HTML><／HTML>这两个标记符是HTML文档的标记符。 <HTML>处于文档的最前端，表示文档的开始，即浏览器从<HTML>开始解释。 <／HTML>则位于文件的最后一行。 HTML元素是最外层的元素，里面包含HEAD元素和BODY元素。

第一章网页设计概述 （2）HEAD标记符 <HEAD><／HEAD>是HTML文件头标记符，即文档头，包含对文档基本信息（文档标题，文档搜索关键字、文档生成器等）描述的标记。其中包含文档标题等属性。通常与某些标记符一起使用，如<TITLE><／TITLE>标记符。

第一章网页设计概述 （3）TITLE标记符 <TITLE><／TITLE>指的是一份文档的标题。显示在浏览器的标题栏中。（4）BODY标记符 <BODY><／BODY定义一个HTML文档的主体部分，位于首部下面，包含有对网页元素（文本、表格、图片、动画、链接等）描述的标记。

第一章网页设计概述 如： <HTML> <HEAD> <TITLE>青海师范大学计算机系</TITLE> </HEAD> <BODY bgcolor=yellow> 这是一个HTML的测试文件 </BODY> </HTML>

第一章网页设计概述 2、HTML语言的语法规范 • HTML文档的标签是可以嵌套的。 • 有些标签（例如<HTML>）没有任何属性，而有些标签（例如<BODY>）则可包含一个或多个属性。 • 在HTML中有三个字符具有特殊的意义，即“<”、“>”和“&”。 • 元素名称大小写等价。 • 一个标签可以有多个属性，属性及其属性值大小写等价，不同属性间用空格分隔。

第一章网页设计概述 • HTML文件中，有些标签只能出现在文档头部中，而绝大多数标签只能出现在文档主体中。

第一章网页设计概述 三、HTML的常用标签 1．<TITLE>标签 <TITLE>标签用来给网页命名，网页的名称将被显示在浏览器的标题栏中。 2．<Hi>标签 <Hi>标签是成对出现的，用于定义文档标题。位于<Hi>和</Hi>之间的内容是HTML文档中的标题。标题文字都以粗体显示，上级标题总比下级标题更大些，具体大小与浏览器有关。

第一章网页设计概述 标题文字标记符的格式： <Hn align="对齐方式" > 标题文字 </Hn> <Hn>…</Hn>标记符默认显示宋体,会自动插入一个空行。

第一章网页设计概述 3．预格式化文本标签<PRE> <PRE>为预格式化标签。它是成对出现的。对位于<PRE>和</PRE>之间的内容，浏览器将严格按照编辑HTML文档时的字符及位置进行显示。

第一章网页设计概述 4． 和标签在HTML文档中，无法用多个回车、空格、Tab键来调整文档段落的格式。要用HTML的标记符来强制换行、分段。 “BR”即Break，是换行标签，它是单独出现的。 的作用相当于回车符。 “P”即Paragraph（段落）。标签用于划分段落，作用是插入一个空行。它可以单独使用，也可以成对使用。

第一章网页设计概述 两种不同用法：（1）强制换段标记符强制换段标记符的格式为：文字 （2）设置段落标记符设置段落标记符的格式为： 文字内容 <／P>

第一章网页设计概述 5．<HR>标签在页面中插入一条水平线，可以使不同功能的文字分隔开，看起来整齐、明了。格式： <HR align="对齐方式" size="横线粗细" width="横线长度" color="横线颜色" noshade>

第一章网页设计概述 6．字符格式标签 HTML文档的字符格式标签主要有、、、和<S>四种，它们都是成对出现的。如：黑体 abc 下划线 abc 斜体 abc 印刷体 <tt>abc</tt> 上标 abc自由删除线<s>abc</s>报告下标 abc自由

第一章网页设计概述 7．标签用于设置文本的大小、字体、字型和颜色。 是字体标签，它是成对出现的，用于指定文本的字体大小、颜色等。该标签包含若干属性。设置格式： 被设置的文字 <／FONT>

第一章网页设计概述 size属性是字号属性，用于控制文字的大小，它的取值既可以是绝对值，也可以是相对值。 face属性是字体标记符，用来指定字体样式。 color属性可用来控制文字的颜色，属性值可以是颜色名称或十六进制值。如：“#FF0000”与”RED”等价。 我的主页 与 我的主页 等价

第一章网页设计概述 8、列表(Lists) ①．有序号列表语法格式：<OL>…</OL> 常用属性：其中的每一个列表项以<LI>标签打头。 type属性：属性值可以为1,a,A,i,I。 start属性：如type=1，start=5表示列表符号是从第5个列表序号开始。

第一章网页设计概述 ②．无序号列表语法格式：<UL>…</UL>。 type属性：属性值是disc,square,circle。 ③．定义性列表语法格式：<DL>…</DL>

第一章网页设计概述 9、图像（Inline Images）语法格式：<img src=’file’ height= width=> 常用属性： src height width Alt border align属性：其对应的属性值为bottom 、middle和top。

第一章网页设计概述 10、设置页面背景颜色 <BODY>标记符中使用bgcolor属性可以为网页设置背景颜色。 <BODY bgcolor=#FFFFFF> 11、设置页面背景图像使用BODY标记符的background属性即可。 <BODY background=“网页背景图案的地址”>

第一章网页设计概述 12、设置文字和超链接的颜色设置正文和超链接颜色时，可以使用BODY标记符的text、link、vlink和alink属性。 text属性用于设置正文的颜色； link属性用于设置未被访问的超链接的颜色； vlink用于设置已被访问过的超链接的颜色； alink用于设置活动超链接（即当前选定的超链接）的颜色。

第一章网页设计概述 <BODY>标签扩充为 <BODY bgcolor=#x text=#x link=#x alink=#x vlink=#x background=“imageURL”>。 ┈┈ </BODY>

第一章网页设计概述 四、文档的超链接 1、统一资源定位器——URL URL（Uniform Resource Locator）即统一资源定位器，是指文档在Web上的具体地址，指出了文件在Internet中的位置。它的作用相当于门牌号码。事实上，URL是一类似Windows 或DOS路径的东西，用来指定存储数据或文件的装置及文件夹。 URL由协议名、服务器地址、文件在服务器中的路径（即目录）和文件名四部分构成。

第一章网页设计概述 2、超链接 ①、链接到其他站点（文档）在HTML文档中，当需要链接其他文档时，应使用<A>标签。法格式：<A HREF=“scheme://host[:port]/dir/ filename”>anchor name</A> 其中<a></a>是超链接标签，HREF是一个标签属性。如：<A href="xxx">zzz</A>

网站建设

网站建设

Presentation Transcript