Transcript 下载附件
2004.9.6 第一章 网页设计概述 第一节 基础知识 一、基础概念 网页：是一种用HTML语言编写的文本文件。 HTML ：全文是 “HyperText Markup Language” ，中 文意思为“超文本标记语言”。 超文本：意指页面内除文本外，还可包含图片、链 接、甚至音频、视频等非文字元素。 网站建设 第一章 网页设计概述 主页：Internet用户访问网站时所看到的第一个网 页(网站的入口)，称作主页（Homepage或Home Page）。 超链接：一种与其它文件的链接，当用户单击后， 所链接的网页信息显示出来。 网站：在逻辑上可视为一个整体的一系列网页的集 合称为网站（Web Site或Site）, 网页之间用超级连 接进行连接。 网站用于构成一个WWW信息服务器，提供一定范围内 的信息资源；如一个学校，一个企业、一个公司等的 WWW服务器。 网站建设 第一章 网页设计概述 请求 浏览器 响应 Web 服务器 网站建设 第一章 网页设计概述 二、网页设计的基本方式 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>。 开始标记符和相应的结束标记符定义了标记符所影 响的范围。 开始标记符与结束标记符的区别在于：结束标记符 多一个斜杠“/”（不是反斜杠“\”！） 某些标记符，例如<BR>，只要求单一标记符号。 网站建设 第一章 网页设计概述 属性(Attribute)是用来描述对象特征的。 值(Value)：通常属性会有一个值，而且这个值必须 从预先定义好的范围内选取。 在HTML中，所有的属性都放置在开始标记符的尖括 号里，属性与标记符之间用空格分隔，属性的值放在 相应属性之后，用等号分隔，而不同的属性之间用空 格分隔。 网站建设 第一章 网页设计概述 格式： <标记符 属性1=属性值1 属性2=属性值2 …> 受影 响的内容 <／标记符> HTML属性通常也不区分大小写。 例如，用字体标记符和字号属性指定文字的大小。 <FONT SIZE=1>本行字将以较小字体显示。</FONT> 另外标记可以嵌套，如： <H1>Happy<I>Birthday</I></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> <P>这是一个HTML的测试文件</P> </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．<BR>和<P>标签 在HTML文档中，无法用多个回车、空格、Tab键来调 整文档段落的格式。要用HTML的标记符来强制换行、 分段。 “BR”即Break，是换行标签，它是单独出现的。 <BR>的作用相当于回车符。 “P”即Paragraph（段落）。<P>标签用于划分段落， 作用是插入一个空行。它可以单独使用，也可以成对 使用。 网站建设 第一章 网页设计概述 两种不同用法： （1）强制换段标记符 强制换段标记符的格式为：文字<P> （2）设置段落标记符 设置段落标记符的格式为： <P align=“对齐方式”> 文字内容 <／P> 网站建设 第一章 网页设计概述 5．<HR>标签 在页面中插入一条水平线，可以使不同功能的文字 分隔开，看起来整齐、明了。 格式： <HR align=" 对 齐 方 式 " width="横线长度" size=" 横 线 粗 细 " color="横线颜色" noshade> 网站建设 第一章 网页设计概述 6．字符格式标签 HTML文档的字符格式标签主要有<B>、<I>、<U>、和 <S>四种，它们都是成对出现的。 如： 黑体 <b>abc</b> 斜体 <i>abc</i> 上标 下划线 <u>abc</u> 印刷体 <tt>abc</tt> <sup>abc</sup>自由 删除线<s>abc</s>报告 下标 <sub>abc</sub>自由 网站建设 第一章 网页设计概述 7．<FONT>标签 用于设置文本的大小、字体、字型和颜色。 <FONT>是字体标签，它是成对出现的，用于指定文 本的字体大小、颜色等。该标签包含若干属性。 设置格式： <FONT size="数字" face="字体名" color="颜色"> 被设置的文字 <／FONT> 网站建设 第一章 网页设计概述 size属性是字号属性，用于控制文字的大小，它的 取值既可以是绝对值，也可以是相对值。 face属性是字体标记符，用来指定字体样式。 color属性可用来控制文字的颜色，属性值可以是颜 色名称或十六进制值。 如：“#FF0000”与”RED”等价。 <font color="blue">我的主页</font> 与 <font color="#0000FF" >我的主页</font> 等价 网站建设 第一章 网页设计概述 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 src=’file’ height= height width 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 vlink=#x bgcolor=#x text=#x link=#x alink=#x background=“imageURL”>。 ┈┈ </BODY> 网站建设 第一章 网页设计概述 四、文档的超链接 1、统一资源定位器——URL URL（Uniform Resource Locator）即统一资源定位 器，是指文档在Web上的具体地址，指出了文件在 Internet中的位置。它的作用相当于门牌号码。 事实上，URL是一类似Windows 或DOS路径的东西， 用来指定存储数据或文件的装置及文件夹。 URL由协议名、服务器地址、文件在服务器中的路径 （即目录）和文件名四部分构成。 网站建设 第一章 网页设计概述 http://www.happywin.com:8001/Windows/project.html 通 讯 协 议 服 务 器 名 称 通 讯 端 口 文 件 夹 文 件 网站建设 第一章 网页设计概述 2、超链接 ①、链接到其他站点（文档） 在HTML文档中，当需要链接其他文档时，应使用<A> 标签。 法格式：<A HREF=“scheme://host[:port]/dir/ filename”>anchor name</A> 其中<a></a>是超链接标签，HREF是一个标签属性。 如：<A href="xxx">zzz</A> 网站建设 第一章 网页设计概述 【例】超链接标签应用示例。 <HTML> <TITLE>超链接示例</TITLE> <BODY> 登记前请参阅<a href="kaoyan.html">研究生考试 简章</a> </BODY> </HTML> 网站建设 第一章 网页设计概述 ②．链接到本页的另一位置或其他页面中的特定位 置 超链接可以指向本页面中的任何位置，这种链接方 式叫做本地链接。 定位锚(Anchors)被用来指定本页中的某一位置。在 某一位置定义“锚”需要使用下列格式的<A>标签： <A name="KKK">…<／A> name属性将放置该标记的地方标记为“KKK”，KKK是 一个全文唯一的标记串。 网站建设 第一章 网页设计概述 做好“记号”后，可以用下列方法来建立指向它的 超链接： <A href ="#KKK">转向下一处</A> 注意：在超级链接中由#引导。 网站建设 第一章 网页设计概述 网站建设