企业网站开发与管理 - 万水书苑-出版资源网
69
0
0
全文
(2) 第 5 章 网站设计基础. 任何操作系统任何浏览器上读起来或看上去都是一样的。 超文本标识语言最初用于发布信息，并没有在网络上使用。但由于它极容易使用的显著 特点，随着网络带宽的逐渐增加，人们将其作为网络上发布信息的首选语言。超文本标识语 言的领头先锋是美国麻省理工学院（Massachusetts Institute of Technology，MIT）计算机科学 实验室的 WWW 标准化组织（World Wide Web Consortium，又称 W3C），其互联网地址为 http://www.w3c.org。有关 HTML 语言的各种参考资料或 Web 的相关技术资料，以及 W3C 行 将发布的各种新版特征、最新消息等，均可以在该网站上查到。 用超文本标识语言书写的源程序简单清晰，如例 5.1 是一个典型的 HTML 源程序。 例 5.1 典型的 HTML 源程序（L5-1.htm）。 <HTML> <HEAD><TITLE>HTML 源程序</TITLE></HEAD> <BODY> <H2>杭州碧波亭对联欣赏</H2> <OL><LI>三千里外一条水</LI><BR><BR> <LI>十二时中两度潮</LI> </OL> <MARQUEE bgcolor="#FFCEA2" scrollamount="1" width="80%">三千里外一条水</MARQUEE> <MARQUEE bgcolor="#2FF0FD" behavior="alternate">十二时中两度潮</MARQUEE> </BODY> </HTML>. 说明：打开“记事本”写入例 5.1 的源程序，保存时扩展名必须是.htm，打开浏览器运行 本例，或直接双击该文件，运行结果见图 5.1。<H2></H2>是标题文字标识；<OL></OL>是有 序列表标识；<LI></LI>是列表项标识；<BR>是换行标识；<MARQUEE>是移动文字的标识。 位于<MARQUEE></MARQUEE>标识之间的文字将会移动，其他标识或属性的含义请参阅相 关书籍。. 图 5.1 浏览器中的例 5.1. 标准的 HTML 文件一般分为三个部分：序（Prologue）、头部（Head）和文件主体（Body）。 HTML 文件的主要部分是头部和文件主体。除了头标识和主体标识外，就是 HTML 的. 43.
(3) 44. 企业网站开发与管理. 附加标识——序（HTML 的版本声明），这种标识放在 HTML 文档的第一行，一般的 HTML 文档中通常可以不写“序”。序是用来告知浏览器所遵循的 HTML 版本。当前的浏览器一般 不要求含有序，而且也不会处理序，因此该标识可以忽略。若想保持编写严格遵循标准通 用标识语言（Standard Generalized Markup Language，SGML）的 HTML 文档，应该保留序 的位置。 HTML 文件的基本结构如下： <!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01//EN"> <! 序> <HTML> <! HTML 文档起始标识> <HEAD> <! HTML 的头信息部分> <TITLE> <! HTML 的标题部分> HTML 文件的基本结构 </TITLE> <! 标题结束标识> </HEAD> <! 头信息结束标识> <BODY> <! 这里是 HTML 的正文部分> HTML 文件的基本结构样板，所有正文在这里书写。 </BODY> <! 正文部分结束标识> </HTML> <! HTML 文档结束标识>. 说明： （1）HEAD 标识内的信息一般不在浏览器的主窗口中显示。 （2）需要表示的内容和描述内容的标识格式等，一般放在 BODY 标识内。 （3）注释有两种方法。 <! 注释内容 >，“注释内容”中不可出现右尖括号，一般用于标识里的内容。 <!-- 注释内容 -->，“注释内容”中可以出现包括尖括号在内的任何括号，一般用于 注释大段的内容。注意，本注释仅用于注释超文本标识语言。 （4）可以使用所有编辑纯文本文件的软件，或带有 HTML 编辑器的软件来编辑 HTML，扩展名必须写为.html 或.htm。如记事本、写字板、Word、FrontPage、Hotdog、 Dreamweaver 等。 （5）“HTML 文件的基本结构”在浏览器中的显示效果见图 5.2。. 图 5.2 用浏览器打开的“HTML 文件的基本结构”文件. 超文本标识语言 HTML 是标识的集合，是标准通用标识语言 SGML 的一个子集。被一对 尖括号“<”和“>”括起来，标识一般成对出现。如“基本结构”中的<HEAD>和</HEAD>， <HEAD>为起始标识，加斜线的<HEAD>即</HEAD>为结束标识，称之为双标识；<BR>没有 结束标识，称为单标识。各种标识与不同网页内容的有机合成就构成了多姿多彩的互联网世 界。标识（Tags）和属性（Attributes）构建了 HTML 的语法。浏览器只要读到 HTML 的标识.
(4) 第 5 章 网站设计基础. 和属性，就会将其解释成网页或网页的某个组成部分。 5.1.2 HTML 应用 例 5.2 创建表格，取左、中、右方书写文字（L5-2.htm）。 <HTML> <HEAD> <TITLE>创建表格书写文字</TITLE> </HEAD> <BODY bgcolor="bronw" text="white"> <TABLE bgcolor="green" align="center" width="70%" border="3"> <TR><TD bgcolor="blue" align="left">左有孔明空城之计</TD></TR> <TR><TD bgcolor="orange" align="center">中流砥柱</TD></TR> <TR><TD align="right">右有关公斩将封城</TD></TR> </TABLE> </BODY> </HTML>. 说明：代码中的四个 bgcolor 分别表示网页、表格、单元格和单元格的背景颜色属性；text 表示文本的颜色属性；<TABLE>中的 align="center"、width="70%"、border="3"分别表示表格 居中、占全屏幕的 70%、边宽为 3。若设 border="0"，表格的框线将被隐去，通常采用此法定 位或布局页面内容。对于表格的位置除用<TABLE>中的属性 align（只有 left、center、right 三个值）外，也可在<TABLE>前选择加<LEFT>、<CENTER>、<RIGHT>三种标识。left、center 和 right 分别表示表格或字符串置左、中和右三个位置。 例 5.3 创建表单（L5-3.htm）。 <HTML> <HEAD> <TITLE>创建表单</TITLE> </HEAD> <BODY> <FORM method="POST" action="myaspfile.asp"> <P>姓名：<INPUT type="text" name="T2" size="13"> 性别：男<INPUT type="radio" value="V1" checked name="R1"> 女<INPUT type="radio" name="R1" value="V2"> 年龄：<INPUT type="text" name="T1" size="3"></P> <P>我要留言：</P> <P><TEXTAREA rows="3" cols="53" name="S1"></TEXTAREA></P> <P> <INPUT type="submit" value="提 交" name="B1"> <INPUT type="reset" value="重 填" name="B2"></P> </FORM> </BODY> </HTML>. 说明：本例在浏览器中的显示如图 5.3 所示。<FORM>标识中的 myaspfile.asp 为表单处 理程序，可参阅例 6.2 的第 35 行。“ ”是空格符的名称代码。. 45.
(5) 46. 企业网站开发与管理. 图 5.3 提交表单页. 例 5.4 HTML 综合应用（L5-4.htm），如图 5-4 所示。 <HTML> <HEAD><TITLE>HTML 综合应用</TITLE></HEAD> <BODY bgcolor="#ffffff" text="#000000" link="#0000ff" alink="ff00ff" vlink="#ff0000" background="背景图.jpg"> <A href="http://www.lhx.com/" target="resource window">绿海星</A> <A href="http://www.hemc.edu.cn">学院</A> <A href="http://cn.yahoo.com">雅虎中国</A> <CENTER> <H2>黄河颂</H2><HR> <!-- <HR>显示一条水平直线 --> <EMBED src="黄河颂.mp3" autostar="TRUE" hidden="TRUE" loop="TRUE"> <BGSOUND src="黄河颂.mp3" loop="INFINITE"> </CENTER> <IMG src="车展.jpg" alt="欢 迎来到车博会 " align="right" border="0" hspace="420" vspace="22" height="118" width="200"> </BODY> </HTML>. 图 5.4 HTML 综合应用.
(6) 第 5 章 网站设计基础. 说明：BODY 标识是网页制作中主要的组成部分之一，对于网页的背景或背景图片的设 置以及超链接时字体的变化均应放在 BODY 中。bgcolor 为背景颜色设置属性， “#FFFFFF” 是十六进制数，格式为“#RRGGBB”——红红绿绿蓝蓝。取值范围在 0～F 之间，该值也可 直接用英文的 red、green、blue、yellow、white 等词设置（请参阅附录 A）。一般来说设置背 景图片，也同时设置背景色。这样在图片尚未下载完毕之前使屏幕背景不至于太单调。link ——设定超链接的颜色，alink——设定单击超链接时的颜色，vlink——设定单击超链接以后 （已访问过）的颜色。background 取背景图片，图片的格式一般为.GIF 和.JPG。超链接标识 <A>的 target 属性设为“resource window”，表示单击链接时，浏览器打开一个新视窗显示网 页的内容。同样，如果 target 的属性值设置成“window_name”或“_blank”也有相同的效果， 请读者自己试一试。一般主页中常放上<EMBED>和<BGSOUND>两个标识，以防不同的浏览 器在解释网页时，无法读出背景音乐。<BGSOUND>标识播放背景音乐时，窗口最小化会使 背景音乐停止；而<EMBED>标识则不会出现这种情况。这就产生了一个问题，当最小化窗口 后，又打开时，会产生二重音乐。<EMBED>中的属性 autostar、hidden、loop 分别表示自动 启动播放、隐藏播放器、循环播放，它们均有两个值 TRUE 和 FALSE，<BGSOUND>中的 loop 属性可取值 INFINITE、TRUE 和 FALSE，分别表示无止尽播放、循环播放和播放一次。通常 背景音乐的格式是.WAV 和.MID，也可以播放.MP3 等，如本例。<IMG>标识中的 align 属性 用 top、middle、bottom、left、right 五种位置放置图片。hspace 和 vspace 分别设置图片距屏 幕左上角的水平和垂直距离（以像素为单位）。height 和 width 分别设置图片的高和宽，以满 足主页对图片尺寸的要求。也可使用 lowsrc 属性替代 src 属性，要求浏览器在画面载入以前 先装载低分辨率的图像，以加快访问网页的速度。语句中同时存在 align 属性和 hspace、vspace 属性时，则按 hspace、vspace 属性的值显示图片。 例 5.5 汽贸网站中的 HTML 应用（L5-5.htm）。 <HTML> <HEAD><TITLE>汽贸网站中的 HTML 应用</TITLE></HEAD> <BODY> <TABLE bgcolor="#FFCCDD" border="0" width="800" id="table1" height="445" cellspacing="0" cellpadding="0"> <TR> <TD height="20" valign="bottom"> <TABLE border="0" bgcolor="#9900FF" id="table1" width="803" cellspacing="0" cellpadding="0" height="23"> <TR> <TD width="382"></TD> <TD width="48"><FONT color="#FFFFFF"><A href="http://www.lhxqm.com/index.asp" onclick= "this.style.behavior='url(#default#homepage)'; this.sethomepage('http://www.lhxqm.com/');" class="yt">设为 首页</A></FONT></TD> <TD width="48"><FONT color="#FFFFFF"><A href="javascript:window.external.Addfavorite ('http://www.lhxqm.com/','绿海星汽贸公司网站')" target="_self" class="yt">收藏本页</A></FONT></TD> <TD width="48"><A href="javascript:window.print()" class="yt">打印本页</A></TD> <TD width="48"><A href="mailto:lhx@163.com" class="yt">联系我们</A></TD> <TD width="48"><A href="../nbusii/zxdg.asp" class="yt">在线订购</A></TD> <TD width="48"><A href="../../ht/homepage/default.asp" class="yt">网站管理</A></TD>. 47.
(7) 48. 企业网站开发与管理 </TR> </TABLE> </BODY> </HTML>. 说明：本例是截取“汽贸”网站 index.asp 文档中的一段代码。可以看出，此处缺乏多个 配置文件，所以本例显示时并不到位，不美观，也不实用，在此仅仅举例而已。. 层叠样式表 CSS. 5.2. 通过超文本标识语言 HTML，可以将网页的内容布置得有声有色，但有时我们仍感不足。 层叠样式表（Cascading Style Sheets，CSS）正好弥补了 HTML 标识在组织页面内容上的“缺 陷”，它主要用来定义网页字符数据的处理，包括字符的格式化、显示、编排、打印和特殊效 果等。CSS 由 WWW 标准化组织，又称互联网联盟（World Wide Web Consortium，W3C）制 定。一些有关 CSS 的资料以及与 Internet 相关的资料、标准、规则、建议、推荐等，读者可 以通过 W3C 的网站 http://www.w3c.org/查询。 5.2.1 CSS 样例与结构 层叠样式表的文件格式分为两部分：选择器（Selector）和样式规则（Rule），由相应的格 式代码文本文件组成，与 HTML 不一样，它比 HTML 代码复杂，表现网页的形式多样化，可 以更加精确地描述页面内容。从形式上看，CSS 的语法格式非常类似 C 语言中自定义的一个 函数。如： BODY{ font-family: "隶书"; font-size="32px"; color: "#00FF00"; letter-spacing:"8pt"; }. /* /* /* /*. 定义字体 */ 定义字体尺寸，32 点 */ 定义字体颜色，绿色 */ 定义字间距，8 磅 */. 在上面这段样式表文件中，BODY 是选择器，大括号内为样式规则。样式规则用于指定 样式要套用的对象，一般来说指的是 HTML 标识。样式规则用于设定样式内容，由属性（如 font-family）和属性值（如隶书）组合而成。属性指定标识所具有的特征，如字体、大小、颜 色等；属性值则指定对应属性的取值，如隶书、16pt、#FF00FF 等。分号是多重属性之间的 间隔符，上例中的样式规则采用分行书写（也可以写在同一行），这样更具可读性。注释符与 C 语言相同，也是“/* …… */”。要注意的是 IE 浏览器和 Netscape 浏览器对 CSS 的支持可能 会有所不同，使用时应注意它们的差别。样式表中的单位有：pc 十二磅活字、pt 磅、px 像素 （或称点，默认值也是像素） 、em 以当前字体的小写字母 m 的高度为单位高度、ex 以当前字 体的大写字母 X 的高度为单位高度、in 英寸、cm 厘米、mm 毫米。 5.2.2 CSS 应用 CSS 的使用比较灵活，在 HTML 中主要有三种使用方法（有关层叠样式表的其他内容， 请读者参阅 CSS 的相关书籍，也可以上 http://www.w3c.org/查询）。.
(8) 第 5 章 网站设计基础. 直接在 HTML 语句中使用。 嵌入 HTML 文档中使用。 使用独立的文件。 例 5.6 CSS 直接和嵌入 HTML 中的应用（L5-6.htm）。 . <HTML> <HEAD> <TITLE>CSS 直接和嵌入 HTML 中的应用</TITLE> <STYLE> .clSpan1{background-color:red;color:white;} /* 以下是 CSS 嵌入应用 */ .clSpan2{background-color:yellow;color:black;} .clSpan3{background-color:blue;color:white;} .clSpan4{background-color:lime;color:black;} .clDiv1 {background-color:yellow;color:black;} .clDiv2 {background-color:magenta;color:white;} .clDiv3 {background-color:cyan;color:black;} .clDiv4 {background-color:black;color:white;} /* 至此句结束 */ </STYLE> </HEAD> <BODY> <!-- 比较下面两个超链接，第 1 个是直接使用 CSS，第 2 个是普通超链接 --> <A href="L5-21.htm" style=text-decoration:none;font-size:40>您知道它的下联吗？</A> <FONT size=2><A href="L5-21.htm ">(这是一幅拆字联，答案在本书内找)</A></FONT><P> <SPAN class="clSpan1">氷凉酒</SPAN> <! 使用 CSS 规则，下同 > <SPAN class="clSpan2">一点</SPAN> <SPAN class="clSpan3">二点</SPAN> <SPAN class="clSpan4">三点</SPAN> <HR> <DIV class="clDiv1">氷凉酒</DIV> <! 使用 CSS 规则，下同 > <DIV class="clDiv2">一点</DIV> <DIV class="clDiv3">二点</DIV> <DIV class="clDiv4">三点</DIV> </BODY> </HTML>. 说明：<SPAN></SPAN>为“行内元素（Inline Element）”，<DIV></DIV>称作“块级元素 （Block Level Element）”。我们在代码中输入了 4 组词，词与词之间既无空格，也无换行。然 后，将各词分别配上<SPAN></SPAN>或<DIV></DIV>标识，并配置样式规则。从图 5.5 中可 以看出，加<SPAN>标识的前 4 组词，仍然在一行显示，没有因为<SPAN>的插入而破坏在一 行显示的结构。所以，用户可使用<SPAN>任意改变同一行范围内的显示样式，例如颜色、背 景、字体等。后 4 组词配上<DIV>标识，在源文件中未加分行标识，但是从图 5.5 中可以看出， 浏览器给它们各自分配了一个新的独立区域，形成各自的“块”。代码中的第 1 个超链接是直 接使用 CSS 样式规则，使之取消了超链接的下划线，并加大了字体。 若在源文件中仅插入一个<SPAN>或<DIV>，则什么都不会发生，直到用户为它们定义样 式，才能起应有的作用。因此，<SPAN>和<DIV>又被称作“空元素” 。<SPAN>和<DIV>的引 入，更加增强了页面设计的灵活性。其实，HTML 标识基本上都可以分成这两类。如<SUP>、. 49.
(9) 50. 企业网站开发与管理. <IMG>、<EM>和<INPUT>等是典型的“行内元素”，而<H1>、<P>、<HR>和<FORM>等就 属于“块级元素”。. 图 5.5 直接和嵌入使用 CSS. 例 5.7 建立一个扩展名为.css 的独立文本文件，用以定义 CSS 格式。采用链接或导入两 种方法调用此独立文件，使用 CSS 规则（L5-7.htm）。 <HTML> <HEAD> <TITLE>链接和导入样式表</TITLE> <LINK rel="StyleSheet" href="DeCss.css" type="text/css"> <!链接样式表> </HEAD> <BODY> 江流天地外，山色有无中。<BR> 此处采用链接样式表方式，所定义的字体为隶书、大小 32 点、间距 8 磅、颜色为绿色。 </BODY> <STYLE> <!-/* 为不能识别 CSS 的浏览器而设 */ @import url("DeCss.css"); /* 导入样式表 */ --> </STYLE> <BODY> <P>郡邑浮前浦，波澜动远空。<BR> 此处采用导入样式表方式，调用了同一个文件，所以字体、字号、间距、颜色相同。 </BODY> </HTML>. 说明：本例所调用的样式规则就是 5.2.1 节下的那段代码，将其命名为 DeCss.css，放在 与本例相同的目录下即可。 例 5.8 使用 CSS 设置滚动条的颜色、阴影、立体样式等（L5-8.htm）。 <STYLE> <!-BODY{ scrollbar-3dlight-color:'ff0000';. /* 设置滚动条 */ /*滚动条上边和左边的边沿颜色*/.
(10) 第 5 章 网站设计基础 scrollbar-arrow-color:'#00ff00'; scrollbar-base-color:'#ffffff'; scrollbar-darkshadow-Color:'#ffff00'; scrollbar-face-color:'#ff0000';. /*上下按钮上三角箭头的颜色*/ /*滚动条基本颜色*/ /*立体滚动条强阴影的颜色*/ /*立体滚动条凸出部分的颜色*/. scrollbar-highlight-color:'#ffffff'; scrollbar-shadow-color:'#ff0000'; scrollbar-track-color:'f7fbff';. /*滚动条空白部分的颜色*/ /*立体滚动条阴影的颜色*/ /*滚动条底板的颜色*/. } --> </STYLE>. 说明：在需要控制滚动条的网页将本例代码插入<HEAD>与</HEAD>之间，如插入到例 5.4 的<HEAD></HEAD>之间，滚动条将按设置变化。注意，低版本的浏览器和 Netscape 浏 览器不支持此功能。 例 5.9 SPAN 标识加鼠标样式，运行结果见图 5.6（L5-9.htm）。 <HTML> <HEAD> <TITLE>"SPAN"标识加鼠标样式</TITLE> <STYLE> .myTips1 {background-color:red;color:white;cursor:wait} .myTips2 {background-color:#FF00FF;color:#FFFFFF;cursor:hand} </STYLE> </HEAD> <BODY> <P>  月光如流水一般， <SPAN class="myTips1" title="朱自清">静静地</SPAN>泻在这一片叶子和花上。 <SPAN class="myTips2" title="摘选自荷塘月色">薄薄的</SPAN> 青雾浮起在荷塘里，叶子和花仿佛在牛乳中洗过一样；又象笼着青纱的梦。 <SPAN title="请查阅全文" style="cursor:help;text-decoration:underline; background-color:#00AAFF;color:#FFFF00;" OnClick="window.open('holfile.htm')">(请参阅全文) </SPAN> </P> </BODY> </HTML>. 说明：本例中使用<SPAN>标识分别定义了三组词的前景色、背景色和鼠标样式，在 <SPAN>标识内对字符串加 title 属性，作为鼠标指针移动到此字符串上时，显示该字符串的摘 要信息（见图 5.6 中的文本小框），给浏览者一个提示。利用 cursor:help 属性令鼠标移动到“请 参阅全文”上时，显示 Windows 默认帮助的样式，见图 5.6。另外，若用户单击此处，则会 在弹出新窗口的同时打开 holfile.htm 文件，这个过程由 window.open()方法来实现（例中的 holfile.htm 是假设的文档，读者可以换成自己的文档，如例 5.1 的 L5-1.htm）。在网页上用 CSS 定义鼠标指针样式及指定方法和效果图例见表 5.1。. 51.
(11) 52. 企业网站开发与管理. 图 5.6 <SPAN>标识与鼠标样式 表 5.1 CSS 鼠标样式指定及图例 指定方法. cursor:auto;. 演示效 果图例 （无）. 说明 这是默认的属性值，即鼠标根据页面不同的元素对象呈现不同的样式。 例如超链接为手形，文字和输入框为“I”形等. cursor:default;. 鼠标在任何地方都呈现普通的箭头形状. cursor:hand;. 鼠标将呈现手的形状，同超链接的鼠标形状. cursor:crosshair;. 在绘图时遇到过的精确定位的十字形鼠标. cursor:text;. “I”字形的鼠标，平时在文本上和输入框上可以见到. cursor:move;. 鼠标由水平和竖直双箭头组成，移动 Windows 窗口时常见. cursor:wait;. 鼠标呈现两个倒三角沙漏的形状，平时见于 Windows 程序忙的时候. cursor:help;. 鼠标样式为一个普通箭头加一个问号，在 Windows 窗口右上角单击“？” 按钮后，也可以看到这种鼠标样式. cursor:n-resize;. 鼠标箭头朝上方. cursor:s-resize;. 鼠标箭头朝下方. cursor:e-resize;. 鼠标箭头朝右方. cursor:w-resize;. 鼠标箭头朝左方. cursor:ne-resize;. 鼠标箭头朝右上方. cursor:nw-resize;. 鼠标箭头朝左上方. cursor:se-resize;. 鼠标箭头朝右下方. cursor:sw-resize;. 鼠标箭头朝左下方. 5.3. 可扩展标识语言 XML. 5.3.1 关于 XML XML（eXtensible Markup Language）的可扩展性是 XML 区别其他标识语言的最基本特.
(12) 第 5 章 网站设计基础. 征。XML 的核心在于以一种标准化的方式建立数据表示的结构，而将具体标识的定义留给用 户。XML 的可扩展性使 XML 可以满足各种不同领域数据描述的需要（见例 5.10 的源代码）， 并可以对计算机之间交换的任何数据进行编码。尽管 XML 的灵活性使得用户可以快速、容易 地描述任意的内容，但由于 XML 本身并不能解释它标识的含义，而浏览器只能解释 HTML， 所以大多数应用要求 XML 的标识集合能够满足某种标准或者双方的约定，这样才可能由“第 三者”将其“翻译”成 HTML，最终由浏览器呈现。 万维网联盟 W3C 对 XML 做了很好的说明，XML 简化了定义文件类型的过程，简化了 编程和处理 SGML 文件的过程，简化了在 Web 上的传送和共享；XML 可以广泛地运用于 Web 的任何地方，可以满足网络应用的需求；使用 XML 将使编程更加简单，更清晰和更有利于阅 读理解的代码，将有助于代码的学习和创建。 XML 有四大主要特点：良好的数据存储格式、可扩展性、高度结构化和便于网络传输。 凭借这些优良的特性，XML 已经被业界倡导作为电子商务的通用描述语言。XML 提供了丰 富的语法来存储、携带和交换数据，用户能方便地在独立的平台之间交换数据和针对特定应 用定义用户自己的标识语言。 XML 不是 HTML 的替代产品，也不是对 HTML 的升级，XML 只是对 HTML 进行了补 充，扩展了 HTML 的更多功能，在以后较长的一段时间里我们仍然有可能继续使用 HTML。 与 HTML 不同，HTML 是一种显示输出标识语言，只显示信息，不描述信息；XML 是一种 描述信息的标识语言，它不涉及任何显示信息的处理，而是使用其他语言来完成这一任务。 由于 XML 结构清晰、开放性强，使得它荣获了新一代“世界语”的美称，其扩展名是.xml。 担 当 XML 显 示 输 出 任 务 语 言 之 一 的 是 XSLT （ Extensible StyleSheet Language Transformations，可扩展样式表语言转换） ，它可以将 XML 转化成 HTML，可以过滤、选择 和格式化 XML 的数据，该文件的扩展名是.xsl。 HTML 和 XML 的最大区别是，HTML 用规定的标识来描述、显示网页内容，是一个定 型的标识语言。如<HR>表示一条水平分隔线，有固定的外观、尺寸。XML 则没有规定的标 识，用户可以自由定义，XML 不能描述网页具体的外观、内容等，只是描述内容的数据形式 和结构。所以不能像使用 HTML 一样，直接用 XML 编写网页程序。无论该程序中是否包含 了 XML 数据，它始终要被转换成 HTML 格式才能在浏览器上显示。 HTML 和 XML 的本质区别是，HTML 的显示内容和显示混在一起，共存于同一个文件； XML 则将显示内容和显示分开（可以在同一文件，也可以不在同一文件） ，代码结构清晰。 如例 5.11 给出的是数据（显示内容） ，而例 5.12 给出的是显示方式。我们仅需改变显示方式， 就可以改变页面的排版样式，而数据无需做任何改动。 可以说 XML 是一种标识语言，但更确切地说它是一种创建标识语言的元语言。从例 5.10 中可以看到，这里的所有标识都是用户自己定义的。一个 XML 元素由起始标识和结束标识， 以及标识之间的数据构成。起始和结束标识用来描述标识之间的数据。标识之间的数据被认 为是元素的值。例如： <商标>北京</商标>. XML 元素“<商标>”的值是“北京” 。元素名（“商标”）允许把“北京”这个值标出来， 这样可以把类似的数据区分开。例如，有可能另一个元素“<产地>”的值也叫“北京”。 <产地>北京</产地>. 53.
(13) 54. 企业网站开发与管理. 由于每个元素都有不同的标识名，所以可以很容易地区分上面两个元素的值。一个基本 的 XML 文档就是一个 XML 元素，它可以嵌套 XML 元素。 例 5.10 一个普通的 XML 文档结构。 <汽车类> <轿车> <品牌>北京</品牌> <系列>老式吉普</系列> <型号>北京吉普 213</型号> <产地>中国北京</产地> <价格>2.1</价格> <出厂日期>1995.12</出厂日期> </轿车> </汽车类>. 说明：本例中 XML 元素“汽车类”就是一个有效的 XML 文档。以前在 HTML 中只能 使用标准的标识，如<HEAD>、<TITLE>、<BODY>等，现在可以使用一个任意的标识名， 如本例的<轿车>、<品牌>等。要在浏览器中直接打开本例是不可以的，必须在本例的首行前 加上<?xml version="1.0" encoding="GB2312" ?>。此时，虽说可以运行本例（见图 5.7），但它 仍是一个 XML 文档结构，并不是我们要显示的真实内容。因为 XML 只是描述性语言，要想 在浏览器中显示它的“真实”内容，还要学习后面的知识。. 图 5.7 浏览器中的 XML 文档. XML 是用来传递数据的，这些数据是规范的树型结构，XML 提供了对这种结构的操作 方法。构建一个基本的 XML 文档有三点必须要注意： 所有元素必须有一个与之匹配的结束标识。 所有元素的嵌套必须正确，不允许交错。 所有属性值必须加引号。 还应当注意，XML 对字母的大、小写敏感，一些在 HTML 中可以“混”过去的语句， 在 XML 中将受到严格的限定。XML 需要使用 IE 5.0 以上版本的浏览器打开。.
(14) 第 5 章 网站设计基础. 例 5.11 标准的 XML 文档结构，运行结果见图 5.10（L5-11.xml）。 01:<?xml version="1.0" encoding="GB2312" ?> <!-- 声明语句 --> 02:<?xml-stylesheet type="text/xsl" href="L5-12.xsl"?> <!--声明并指定用样式表转换 XML 文档--> 03:<二手车> 04: <轿车> 05: <品牌>北京现代</品牌> 06: <系列>领翔</系列> 07: <型号>2.0GL MT</型号> 08: <产地>北京</产地> 09: <总价-万元>12.5</总价-万元> 10: <出厂日期>2008.10</出厂日期> 11: </轿车> 12: <轿车> 13: <品牌>一汽大众</品牌> 14: <系列>新宝来</系列> 15: <型号>1.6L 自动豪华</型号> 16: <产地>长春</产地> 17: <总价-万元>10.7</总价-万元> 18: <出厂日期>2008.9</出厂日期> 19: </轿车> 20:</二手车>. 说明：本例是一个标准的 XML 文档，但必须配合例 5.12 才能显示描述数据。行号仅为 方便说明而设，不是程序的组成部分。第 1 行告诉处理程序这里是 XML 文档，其中 version 表示遵守的 XML 规范版本，encoding 表示文档所用的语言编码，本例使用的是简体中文 GB2312。第 2 行告诉浏览器按 L5-12.xsl 指定的样式表将 XML 文档转换为 HTML 文档。 注意：只要使用汉字作标识，如“<二手车>” ，则必须使用属性 encoding="GB2312"。 5.3.2 关于 XSLT XSLT 语言由 W3C 定义，该语言的 1.0 版本在 1999 年 11 月 16 日作为“推荐书”发布。 XSLT 的最初目的是将信息内容与 Web 显示分离。如其最初的定义那样，HTML 通过按抽象 概念（如段落、重点和编号列表）定义显示来实现设备独立性。 W3C 定义了两个系列的样式表标准。其一是在 HTML 中广泛使用的 CSS 语言，它也可 以在 XML 中使用；其二就是功能强大的样式表语言 XSL。虽然 CSS 应用广泛，但是它不能 执行计算、重新整理或排序数据、组合多个源码中的数据或根据用户或会话的特征个性化显 示的内容。针对 CSS 语言的不足，XSL 采纳了 SGML（Standard Generalized Markup Language） 社区中开发的 DSSSL（Document Style Semantics and Specification Language，文档样式、语义 和规范语言）中一些好的构思。 从 XSL 系列的“家族”关系（参见图 5.8）上可以看出，XSL 在转换 XML 文档时分为 明显的两个过程，一是转换文档结构；二是将文档格式化输出。这两个过程可以分开并单独 处理，XSL 在发展过程中逐渐分裂为 XSLT（结构转换）和 XSL-FO（formatting objects，格 式化输出）两种分支语言，其中 XSL-FO 的作用类似于 CSS 在 HTML 中的作用。这里介绍的 只是第一个过程 XSLT。实际上，现在人们常常使用 XSL 将 XML 文档转换成 HTML，并使. 55.
(15) 56. 企业网站开发与管理. 用 HTML 浏览器作为格式化引擎。因为 HTML 实际上只是 XML 词汇表的一个示例，而 XSLT 可以使用任何 XML 词汇表作为其目标。 SGML XML. HTML. XSL. XSLT. XSLT. XSL-FO（Formatting Objects）……CSS. XPath 图 5.8 XSL 的“家谱”. XSLT 实际上也是一个 XML 文档。通过使用 XML 的尖括号标识语法来表示文档的结构。 XSLT 处理器使用树状结构作为其输入，并形成另一个树状结构作为输出（见图 5.9）。通过对 XML 文档进行语法分析来生成输入树状结构，而输出树状结构通常被串行化到另一个 XML 文档中。但 XSLT 处理器本身操作的是树状结构，而不是 XML 字符流。这个概念最初给许多 用户的感觉是不切实际的，结果却对理解如何执行更复杂的转换起了关键作用。 样式表单 Stylesheet. 源文档 Source document. 树状结构. XSLT 处理器. 树状结构. 目标文档 Result document. 图 5.9 XSLT 处理器的操作. XSLT 使用叫作 XPath 的子语言来引用输入树中的节点。XPath 本质上是与具有层次结构 的 XML 数据模型相匹配的查询语言。它可以通过按任何方向浏览树来选择节点，并根据节点 的值和位置应用谓词。它还包括用于基本字符串处理、数字计算和布尔代数的工具。XPath 在单独的 W3C 推荐书中定义，它允许使用在其他上下文中再使用的查询语言，特别是用于定 义扩展超链接的 XPointer。 XSLT 以传统语言（如 Lisp、Haskell 和 Scheme）中的功能性编程的概念为基础，样式表 由模板组成。XSLT 语言允许定义变量，但不允许现有变量更改它的值，即没有赋值语句。 XSLT 是一种用于操作 XML 文档的完整高级语言，就如同 SQL 是操作关系表的高级语言一 样。应该注意到 XSLT 不仅是一种样式设计语言，它比 CSS，甚至 CSS2 的功能更强大。 例 5.12 定义并显示 XML 文档内容的 XSLT 文档（L5-12.xsl），如图 5.10 所示。 01:<?xml version="1.0" encoding="GB2312" ?> <!-- 声明语句 --> 02:<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl"> <!--声明按 XSLT 规范转换文档-->.
(16) 第 5 章 网站设计基础 03:<xsl:template match="/"> 04:<HTML><TITLE>XML 数据输出</TITLE> 05: <BODY> 06: <H3>二手车购价</H3> 07: <TABLE border="2" bgcolor="#AAFF00"> 08: <TR> 09: <TH>品牌</TH> 10: <TH>系列</TH> 11: <TH>型号</TH> 12: <TH>产地</TH> 13: <TH>总价-万元</TH> 14: <TH>出厂日期</TH> 15: 16: 17: 18: 19: 20: 21: 22: 23: 24: 25: 26:. </TR> <xsl:for-each select="二手车/轿车"> <TR> <TD><xsl:value-of select="品牌"/></TD> <TD><xsl:value-of select="系列"/></TD> <TD><xsl:value-of select="型号"/></TD> <TD><xsl:value-of select="产地"/></TD> <TD><xsl:value-of select="总价-万元"/></TD> <TD><xsl:value-of select="出厂日期"/></TD> </TR> </xsl:for-each>. <!-- 循环输出 --> <!-- 输出指定的值 -->. </TABLE>. 27: </BODY> 28:</HTML> 29:</xsl:template> 30:</xsl:stylesheet>. 图 5.10. XSLT 处理 XML 文档的结果. 说明：XSLT 本身也是 XML 文档，第 1 行自然也就是标准的声明语句。第 2 行是标准的 XSLT 文档的首行代码，xsl:stylesheet 表示将文档作为样式表处理；xmlns:xsl 属性用来防止元 素名称重复和混乱，并遵守 W3C 的 XSLT 规范。第 3 行表示源文件在当前目录下。第 16、 18 行等语句是遵守 XSLT 语法的语句，请参阅其他书籍。第 29、30 行是结束标识。. 57.
(17) 58. 企业网站开发与管理. 5.3.3 XML 应用 通过以上介绍，我们了解到 XML 只能描述数据，所以制作 XML 网页的关键也就是解决 其显示问题。显示 XML 数据的方法有多种，例 5.11、例 5.12 是诸多方法中的一种，在下面 的例题中还将介绍。 例 5.13 从数据岛（Data Islands）读取数据（数据岛是被 HTML 页面引用或包含的 XML 数据）。XML 数据既可以包含在 HTML 文件内，也可以放在某外部文件内（L5-13.htm）。 01:<HTML> 02:<HEAD> 03: <TITLE>XML 数据在文件内</TITLE> 04:</HEAD> 05:<BODY> 06: <XML ID="xml 二手车"> 07: 08: 09: 10: 11: 12: 13: 14: 15: 16: 17: 18: 19: 20: 21: 22: 23: 24: 25: 26: 27: 28: 29: 30: 31: 32: 33: 34: 35: 36: 37: 38:. <?xml version="1.0" ?> <二手车> <轿车> <品牌>北京现代</品牌> <系列>领翔</系列> <型号>2.0GL MT</型号> <产地>北京</产地> <总价-万元>12.5</总价-万元> <出厂日期>2008.10</出厂日期> </轿车> <轿车> <品牌>一汽大众</品牌> <系列>新宝来</系列> <型号>1.6L 自动豪华</型号> <产地>长春</产地> <总价-万元>10.7</总价-万元> <出厂日期>2008.9</出厂日期> </轿车> </二手车> </XML> <TABLE datasrc="#xml 二手车" border="1"> <THEAD> <TH>品牌</TH> <TH>系列</TH> <TH>型号</TH> <TH>总价-万元</TH> <TH>产地</TH> <TH>出厂日期</TH> </THEAD> <TR> <TD><DIV datafld="品牌"></DIV></TD> <TD><DIV datafld="系列"></DIV></TD>.
(18) 第 5 章 网站设计基础 39: <TD><DIV datafld="型号"></DIV></TD> 40: <TD><DIV align="center" datafld="总价-万元"></DIV></TD> 41: <TD><DIV datafld="产地"></DIV></TD> 42: <TD><DIV datafld="出厂日期"></DIV></TD> 43: </TR> 44: </TABLE> 45:</BODY> 46:</HTML>. 说明：本例的数据与显示处于同一个文档中，没有使用属性 encoding="GB2312"。第 8 行至第 25 行是数据岛（XML 数据） 。本例利用<XML>元素的 ID 属性来完成数据的读入（请 注意“xml 二手车”是 XML 数据的根元素，可以仅用汉字或英文），通过能接收数据的 HTML 标识（如<TABLE>标识，把数据绑定到该 HTML），并格式化显示数据岛内的数据（显示输 出的数据顺序不一定与数据岛内的数据顺序一致，如本例的“产地”与“总价”）。本例显示 的是元素<轿车>内各 XML 子元素的内容。第 27 行的<TABLE>标识利用 datasrc 属性引用行 内 XML，datasrc 属性实际上是通过在要处理的 XML 元素的 ID 属性的前面加上#来实现的。 TD 元素不能绑定数据，这里使用 DIV 元素的 datafld 属性绑定要显示的 XML 元素，也可以 使用 SPAN 元素，它们的介绍可参阅例 5.6。运行结果见图 5.11。. 图 5.11 数据与显示代码同处一个文档. 例 5.14 从文件的外部读取数据岛数据（L5-14.htm）。 01:<HTML> 02:<HEAD> 03: <TITLE>XML 数据在文件外部</TITLE> 04:</HEAD> 05:<BODY> 06:<xml src="L5-15.xml" id="xmlhouse" async="false"></xml> 07:<TABLE datasrc="#xmlhouse" width="100%" border="1"> 08: <THEAD> 09: <TH>品牌</TH> 10: <TH>系列</TH> 11: <TH>型号</TH> 12: <TH>产地</TH> 13: <TH>总价-万元</TH> 14: <TH>出厂日期</TH> 15: </THEAD> 16: <TR>. 59.
(19) 60. 企业网站开发与管理 17: 18: 19: 20: 21: 22:. <TD><SPAN datafld="品牌"></SPAN></TD> <TD><SPAN datafld="系列"></SPAN></TD> <TD><SPAN datafld="型号"></SPAN></TD> <TD><SPAN datafld="产地"></SPAN></TD> <TD align="center"><SPAN datafld="总价-万元"></SPAN></TD> <TD><SPAN datafld="出厂日期"></SPAN></TD>. 23: </TR> 24:</TABLE> 25:</BODY> 26:</HTML>. 说明：第 6 行是将 XML 文件 L5-15.xml 调至 xmlhouse 数据岛内，async="false"属性的作 用是确保任何超文本标识语言在解析之前调入 XML 数据。运行结果见图 5.12。. 图 5.12 数据与显示代码不在同一个文档. 例 5.15 供例 5.14 读取的 XML 数据（L5-15.xml）。 01:<?xml version="1.0" encoding="gb2312" ?> 02: <二手车> 03: 04: 05: 06:. <轿车> <品牌>北京现代</品牌> <系列>领翔</系列> <型号>2.0GL MT</型号>. 07: 08: 09: 10:. <产地>北京</产地> <总价-万元>14</总价-万元> <出厂日期>2008.10</出厂日期> </轿车>. 11: 12: 13: 14:. <轿车> <品牌>一汽大众</品牌> <系列>宝来</系列> <型号>1.6L 自动豪华</型号>. 15: 16: 17: 18:. <产地>长春</产地> <总价-万元>10.7</总价-万元> <出厂日期>2008.9</出厂日期> </轿车>. 19: </二手车>.
(20) 第 5 章 网站设计基础. 例 5.16 应用 CSS 显示 XML 文档。XML 文档中含有需显示的数据，CSS 文件是显示格 式的设置文件。运行结果见图 5.13。 XML 文件（L5-16.xml）： 01:<?xml version="1.0" encoding="GB2312" ?> 02: <?xml:stylesheet type="text/css" href="L5-16.css" ?> 03:<secondhand> 04: <cprod> 05: <cname>北京现代</cname> 06: <cseri>领翔</cseri> 07: 08:. <ctype>2.0GL MT</ctype> <carea>北京</carea>. 09:. <price>12.5 万元</price>. 09: <cdate>2008.10</cdate> 10: </cprod> 11: <cprod> 12: <cname>一汽大众</cname> 13: <cseri>新宝来</cseri> 14: <ctype>1.6L 自动豪华</ctype> 15: <carea>长春</carea> 09:. 图 5.13 CSS 显示 XML 文档. <price>10.7 万元</price>. 16: <cdate>2008.9</cdate> 17: </cprod> 18:</secondhand>. CSS 文件（L5-16.css）： cprod{display: block;} cname{display: block; font-size:20pt; font-weight:bold} cseri{display:block; text-indent:2em} ctype{display:block; text-indent:2em} carea{display:block; text-indent:2em} price{display:block; text-indent:2em} cdate{display:block; text-indent:2em}. 说明：XML 文件的第 2 行指定使用 CSS 样式文件显示 XML 数据。与 XSL 相比，CSS 略显不足，CSS 比较“笨拙”，不适合用于元素顺序、位置经常要变动的文件等情况，而 XSL 常会使用户随心所欲。. 5.4. Visual Studio 2005 简介. Visual Studio 2005（以下简称 VS 2005）是一套完整的开发工具集，用于生成 ASP.NET Web 应用程序、XML Web Services、桌面应用程序和移动应用程序。Visual Basic、Visual C++、 Visual C#（读作 C-sharp）和 Visual J#全都使用相同的集成开发环境（Integrated Development Environment，IDE），利用此 IDE 可以共享工具且有助于创建混合语言解决方案。另外，这些. 61.
(21) 62. 企业网站开发与管理. 语言利用了.NET Framework 的功能，通过此框架可使用简化 ASP Web 应用程序和 XML Web Services 开发的关键技术。 VS 2005 可用于快速构建和部署功能强大而安全的.NET 应用程序，解决最具挑战性的软 件开发需要， 而构建的 VS 2005 进一步完善并增强了 Visual Studio .NET 2003 的功能，新的 IDE 环境更高效、更人性化，并与旧版本产品高度兼容。 使用 VS 2005 开发人员可以： 构建功能强大而且响应能力极好的基于 Windows 的应用程序。 构建功能强大而且响应能力极好的 Pocket PC 应用程序。 构建完善而安全的 Web 应用程序。 构建对设备有智能感知能力的完善而安全的移动 Web 应用程序。 在以上任何一种应用程序中使用 XML Web Services。 避免“DLL 灾难”。 消除代价高昂的应用程序部署和维护问题。 Visual Studio .NET 是唯一的从头至尾都基于通过 XML Web Service 进行集成这一思想而 构建的环境。它允许应用程序通过 Internet 共享数据，XML Web Services 使开发人员能够利用 新的和现有的代码构建应用程序，而不用考虑平台、编程语言或对象模型。Visual Studio .NET 的基础是建立在.NET 框架（见图 5.14）之上，它提供了在设计、开发、调试和部署 Web 应 用程序、XML Web services 和传统的客户端应用程序时所需的各种工具，大大提高了开发者 的效率，简化了服务器端的开发，提供了高效地创建和使用网络服务的方法等；用户可以使 用其中的任何一种语言开发应用程序。. VB .NET、C# .NET、C++ .NET 等 Common Language Specification 通用语言规范. Class Library 类库. Visual Studio .NET. Common Language Runtime 通用语言运行时 .NET Framework. 图 5.14 .NET 框架. 5.4.1 初识 Visual Studio 2005 VS 2005 有两个主要版本：Visual Studio 2005 Professional 和 Visual Studio 2005 Team.
(22) 第 5 章 网站设计基础. System（准确地说，针对不同的人员，有三种不同的 Team System，但它们的核心 Visual Studio 功能是一样的），而其中有些实用特性只在 Team System 中才有。安装完 Visual Studio 2005 就 是个人版，再安装 Team 插件，才能是 Team 版。服务器和 N 个客户端必须都装上 Team 才是 一个完整 Team System。 VS 2005 的功能可以细分为 9 类：项目与方案设计、文档和研究、安全与建模、编码、 自动化、其他效率提升特性、构建和部署、调试和测试、VS 2005 的扩展。 VS 2005 的代码编辑器智能体现在以下几个方面： （1）代码分色显示。代码编辑器能够识别用户所编写语言的语法，对其中的关键字高亮 显示。 （2）自动布局代码。在输入代码时，编辑器将自动设置代码的缩进，匹配代码块的首尾 括号等。 （3）自动语法检查。在输入代码时，编辑器还将自动进行一些语法检查，把可能产生错 误的代码加下划线；当鼠标放在有下划线文本上时，会显示出错误信息。 （4）代码折叠。在代码编辑器的左边有一系列的小减号图标（见图 5.15 中的鼠标所指 处），每个减号标记出一个新代码块的起点。单击这些减号图标，可以关闭对应的代码块视图， 同时减号图标变成加号图标（见图 5.16，这是源代码 custom.asp 的三大代码块）。单击加号图 标，则对应的代码块恢复显示。这一操作就像关闭或打开树型控件中的节点一样。. 图 5.15 代码展开的状态. 图 5.16 源代码被折叠. （5）智能感知（IntelliSense）。智能是指编辑器会自动列出对象的属性、方法以及方法 的参数等，该功能不仅减少了代码的输入工作量，还能确保其正确无误。 VS 2005 的智能感知包括以下内容： 列出成员：输入对象名称，然后输入一个点，代码编辑器就会显示一个列表框（如 图 5.17 中的 request 对象）。用户可在其中选择需插入到代码中的成员。. 63.
(23) 64. 企业网站开发与管理. 图 5.17 显示对象的成员列表框 . 参数信息：在输入方法名称后，输入左括号，编辑器就会显示其参数列表，如图 5.18 中的 response.write。. 图 5.18 显示方法的参数列表. 完成单词：输入类名或成员名的一部分后，按快捷键 Alt+→，编辑器将显示一个 列表框，其中列出用户可能要输入的名称，如图 5.19 所示，从中选择一个即可完 成输入。 还可以通过菜单或快捷键访问智能感知功能。智能感知命令位于“编辑”菜单的最下方， 如图 5.20 所示。 .
(24) 第 5 章 网站设计基础. 图 5.19 完成单词. 图 5.20 通过菜单访问智能感知. 5.4.2 使用 Visual Studio 2005 编写.NET 程序最简单的环境其实有一个记事本和一个编译器就足够了，之所以需要工具 集或者 IDE 是因为现在企业需要快速、高效地开发出稳定、实用的计算机应用程序，而工具 集的作用也在于帮助程序员快速、高效地开发。 单击“开始/所有程序/Microsoft Visual Studio 2005”，启动 Visual Studio 2005，进入“起. 65.
(25) 66. 企业网站开发与管理. 始页”，如图 5.21 所示，选择“文件/新建/文件”命令（如图 5.22）所示，弹出“新建文件” 对话框（如图 5.23 所示）。在“新建文件”对话框的类别中可以选择“常规”或“脚本” ，在 “常规”类别下，可以建立文本文件、HTML 页、样式表、XML 文件、XML 架构、XSLT 文件、位图文件、图标文件、光标文件、本机资源模板等。也可以选择“脚本”类别，建立 JScript 文件、VBScript 文件和 Windows 脚本宿主等（如图 5.24 所示）。其他详细操作请参阅 VS 2005 的相关书籍。. 图 5.21 VS 2005 的起始页. 图 5.22 选择“文件/新建/文件”.
(26) 第 5 章 网站设计基础. 图 5.23 “新建文件”对话框. 图 5.24 建立脚本文件. 5.5. 使用 FrontPage 2003. FrontPage 2003 是微软 Microsoft Office 2003 的组件之一，整个窗口界面、菜单类型均与 Word、Excel 等类似，以便 Office 用户可以非常轻松地学习 FrontPage 2003；同时，FrontPage 2003 与 Office 的无缝集成使用户能够有效地利用已有的许多数据。 FrontPage 2003 提供了一个万维网开发环境，它简单易学、易用，且功能强大。FrontPage 2003 不但可以用来创建和制作网页，同时提供了网站设计、开发、制作与管理等多项功能。 可以使用 FrontPage 2003“所见即所得”的强大功能，在短时间内组合文字、表格、图片、声 音和其他对象，构制成一幅美丽的网页。FrontPage 2003 也提供了方便实用的 HTML 源代码 编辑器，通过它用户可以直接写或修改源代码。在 FrontPage 2003 提供的“拆分”视图下， 初学者可以一边设计网页，一边学习 HTML 源代码。使用 FrontPage 2003 可以在一种轻松的 环境下学习和强化对 HTML 的认知和应用。 5.5.1 FrontPage 2003 的主界面 启动 FrontPage 2003（选择开始/程序/Microsoft Office/Microsoft Office FrontPage 2003）， 打开 FrontPage 2003，如图 5.25 所示，进入网页设计视图。这是一张为用户准备好的空白网 页，类似于 Word、Excel 的初始界面。FrontPage 2003 主窗口左下方的视图切换栏内提供 4 种. 67.
(27) 68. 企业网站开发与管理. 网页视图：设计、拆分、代码和预览视图（若选择制作框架网页，还会出现无框架视图，参 见图 5.55）。 标题栏. 菜单栏. 工具栏. 视图栏. 设计区域. 帮助窗口 任务窗格. 状态栏 图 5.25 FrontPage 2003 的初始主界面. 5.5.2 FrontPage 2003 的视图 FrontPage 2003 提供了比以往版本更丰富的视图模式，以适应用户的各种需要。这里共有 7 种视图模式，分别是网页、文件夹、远程网站、报表、导航、超链接和任务视图。 1．“网页”视图 打开 FrontPage 2003，立即进入默认的显示界面“网页”视图模式。“网页”视图模式是 设计网页的基本视图模式，在这种模式下用户可以所见即所得（WYSIWYG）地非常容易地 制作自己心仪的网页。 “网页”视图模式又分 4 种：“设计”视图、 “拆分”视图、“代码”视 图和“预览”视图（见图 5.26 的视图栏），其界面分别如图 5.26、图 5.27、图 5.28 和图 5.29 所示。当打开或者新建一个框架网页时（选择“开始/程序/FrontPage 2003/文件/新建/新建网 页/其他网页模板/框架网页”），FrontPage 2003 主界面的视图栏中会增加一个“无框架”视图 （参见图 5.55）。 （1）“设计”视图。“设计”视图显示 Web 页面，用户在此使用“所见即所得”的方式 设计、编辑、修改网页，查看一般网页的编辑效果和一般浏览器上不出现的页面要素（如注 释、无边框表格线、共享边框线等）。 （2）“拆分”视图。 “拆分”视图是 FrontPage 2003 的新增功能。使用“拆分”视图，用 户可以同时看到设计区和代码区。无论在哪个区进行设计、编辑、修改等操作，另一区的内 容都会随之改变。使用这种视图，初学者可以很快地掌握 HTML 的基本语法和超文本标识语 言的各类标识。.
(28) 第 5 章 网站设计基础. 图 5.26 “设计”视图. 图 5.27 “拆分”视图. 图 5.28 “代码”视图. 69.
(29) 70. 企业网站开发与管理. 图 5.29 “预览”视图. （3）“代码”视图。在“代码”视图中显示的是页面文件的源代码，用户可以看到 FrontPage 2003 自动生成的页面 HTML 源代码。这对高级用户来说无疑是很重要的，因为网页的内容千 变万化，并不是“所见即所得”的编辑方式都能满足要求，有时在“代码”视图下修改网页 参数要简单得多。 （4）“预览”视图。“预览”视图提供一个接近浏览器的显示方式（之所以说“接近”， 是因为显示某些网页对象时与浏览器有出入，仅供参考；读者做好的页面必须用浏览器查看 效果）。用户不但可以预览编辑好的页面，还可以预览页面中的动态图案（DHTML）和 ActiveX 控件。虽说“预览”视图提供了方便的预览环境，但读者应当切记，浏览器的判断才是网页 显示效果的最后裁决， “预览”视图仅仅提供粗略显示网页效果的环境。 （5）“无框架”视图。“无框架”视图是为不支持框架显示的浏览器设置的。选择“无框 架”视图，可以创建一个不带框架的页面，以满足不支持框架显示的浏览器在显示框架时的 需求，而不因在显示此框架网页时产生错误。“无框架”视图请见图 5.55 的视图栏。 2．“文件夹”视图 仅仅制作单一页面时， “文件夹”视图和后面的其他视图在菜单中呈灰色，不可以选择， 只有在设计制作网站时才有可能选择这些视图，而且此时视图栏中会显示这些视图。 “文件夹”视图用于有效地组织和管理网站。单击视图栏的“文件夹”按钮，FrontPage 2003 将以列表的形式给出当前 Web 站点的文件夹和网页文件的组织结构，对于站点内的文件包括 名称、标题、大小、类型、修改日期、修改者和注释等，见图 5.30，或者单击菜单栏“视图/ 文件夹”命令。 3．“远程网站”视图 “远程网站”视图用于站点和站点内部文件的发布。单击视图栏中的“远程网站” ，打开 “远程网站”视图窗口（见图 5.31）。单击 按钮设置远程网站属性，然后，用户 可在弹出的窗口中直接将当前站点中的文件和文件夹拖放至远程站点中发布。 4．“报表”视图 “报表”视图（见图 5.32）用于对当前站点的量化统计管理，包括网站摘要、文件、共 享内容、问题、工作流、使用率等六大块。单击菜单栏的“视图/报表”命令，或者单击视图 栏中的“报表”按钮，打开“报表”视图窗口。.
(30) 第 5 章 网站设计基础. 图 5.30 “文件夹”视图窗口. 图 5.31 “远程网站”视图. 图 5.32 “报表”视图窗口. 71.
(31) 72. 企业网站开发与管理. 5．“导航”视图 “导航”视图用于查看站点中所有的网页以及这些页面之间的组织逻辑关系，见图 5.33。单击视图栏中的“导航”按钮，打开“导航”视图窗口。导航图框中的“＋”号， 表示图框处于折叠状态；“－”号表示图框处于展开状态。可以单击这两种符号切换折叠 与展开状态。. 图 5.33 “导航”视图窗口. 6．“超链接”视图 “超链接”视图用于显示网页和页面文件间的所有超链接关系，见图 5.34。单击其中的 超链接，将自动打开预置对应的网页。 7．“任务”视图 “任务”视图用于组织或管理各用户小组以掌握工作进度，跟踪正在完成以及尚未完 成的工作，见图 5.35。所有的工作都将出现在任务列表中，“任务”视图将以常规方法显示 它们。. 图 5.34 “超链接”视图窗口.
(32) 第 5 章 网站设计基础. 图 5.35 “任务”视图窗口. 5.5.3 创建网页页面 1．直接创建新网页 选择“开始/程序/Microsoft Office/Microsoft Office FrontPage 2003”启动 FrontPage 2003 （如图 5.25 所示），在系统默认的“设计”视图下使用“所见即所得”的方式，可以直接输 入文字、插入图片、建立超链接等，以简洁、方便、快速地创建网页；还可以通过“代码” 视图直接修改源代码或在“拆分”视图下一边设计一边查看源代码；最后可以通过“预览” 视图查看创建的网页效果。 2．使用模板向导创建新网页 在菜单栏选择“文件/新建”命令，打开“新建”任务窗格，在“新建”任务窗格的“新 建网页”栏中单击“其他网页模板” ，打开“网页模板”对话框（如图 5.36 所示）。在“网页 模板”对话框中有常规、框架网页和样式表三个选项卡。“常规”选项卡提供常用的网页结构 组成模板；“框架网页”选项卡提供常用框架网页的结构模板；“样式表”选项卡提供常用的 层叠样式表架构。在“常规”选项卡下可以选择合适的模板，FrontPage 2003 针对不同的用户 设计了各种不同用途的模板和向导，利用这些模板和向导用户可以轻松地创建自己的网页。 使用模板向导的最大好处是节省了用户的宝贵时间，避免了许多冗余操作。. 图 5.36 “网页模板”对话框. 73.
(33) 74. 企业网站开发与管理. 3．设置网页的内容 在定制的网页内容中，有几项较常用的设置：网页的标题、背景音乐、背景颜色或图片、 网页的版式。 在 FrontPage 2003 的菜单栏中，单击“文件/属性”命令或在网页设计区右击，选择“网 页属性”命令，均会弹出“网页属性”对话框，它含有五个选项卡：常规、格式、高级、自 定义、语言和工作组，如图 5.37 所示。 （1）常规。在“常规”选项卡中（见图 5.37），可以设置： 网页的基本位置、标题、网页说明、关键字和默认的目标框架等。 背景音乐的位置、循环次数等。 （2）格式。在图 5.38 的“格式”选项卡中，可以选择： 背景图片和它的来源或添加水印。 背景和前景（文本）的颜色。 超链接（未链接、链接时和链接后）的颜色。. 图 5.37 “常规”选项卡. 图 5.38 “格式”选项卡. （3）高级。在图 5.39 的“高级”选项卡中，可以选择： 以像素为单位的上、下、左、右边距和边距的宽度、高度。 正文样式、翻转样式等。 设计阶段控件脚本（客户端或服务器端平台、服务器端脚本、客户端脚本） 。 （4）自定义。“自定义”选项卡一般较少使用，是为满足用户添加一些系统变量和用户 变量而设，如图 5.40 所示。在“自定义”选项卡中，可以选择： 系统变量（HTTP-EQUIV）。 用户变量。 （5）语言。进入“语言”选项卡，用户可以为不同的语言平台编写各自的网页，如图 5.41 所示。在“语言”选项卡中，可以选择： 网页语言。 HTML 编码。 （6）工作组。在图 5.42 的“工作组”选项卡中，可以选择： 可用类别。.
(34) 第 5 章 网站设计基础 . 分配对象的名称、审阅状态等。 发布网站时是否包含此文件。. 图 5.39 “高级”选项卡. 图 5.40 “自定义”选项卡. 图 5.41 “语言”选项卡. 图 5.42 “工作组”选项卡. 4．FrontPage 2003 中网站的主题 （1）设定网站主题。FrontPage 2003 提供了一个网站主题的设定，给网站的所有网页（或 单一页面）建立一个使用标准。这样做是为了使网站中的各网页保持统一的外观，而且在变 更外观时，只需改变这个设定就可以改变所有网页的设定，使设计变得十分简单和便利。 单击菜单栏的“格式/主题”命令，打开“主题”任务窗格，进入主题设定视窗，见图 5.43。 选中任一主题，单击展开三角形，可以选择“应用为默认主题”、 “应用于所选网页”或者“自 定义”。选择“应用为默认主题”设置网站主题。 （2）设置特定网页的主题。在一个网站的设计过程中，很可能有一些较特殊的页面。要 建立有别于网站主题的次主题或者设置个别网页的主题，只需要先选中要更改的网页，单击 “格式/主题”命令，在“主题”视窗（见图 5.43）的“主题”任务窗格中，选择“应用于所 选网页”即可。 （3）自定义。选择“主题”任务窗格中的“自定义” ，可以对同一主题进行颜色、图形、 文本以及背景图片等调整，以此获得不同的风格。请参阅图 5.43。. 75.
(35) 76. 企业网站开发与管理. 图 5.43 设定主题. 5.5.4 文字与超链接 1．在页面中添加文本 通常网页中不能缺少的内容就是文本，它是网页中最基本的组成部分。 （1）输入文本。进入 FrontPage 2003（见图 5.25），打开“设计”视图，可以直接在设 计区输入用户需要在网页中显示的文本素材。FrontPage 将自动为用户生成相应的 HTML 源 代码。 用户还可以在“拆分”或“代码”视图下，查阅或修改对应页面的 HTML 源代码。使用 这两种视图对初学 HTML 的用户无疑是一个良好的环境，同时对 HTML 编程老手来说，也是 一个修改源代码的良好界面。 （2）文本的基本操作。 1）改变文字的大小、字体、颜色。和 Office 2003 的其他组件以及旧版本的 Office 一样， 在 FrontPage 2003 中编辑、修改或改变文字的大小、字体、颜色等，只需在工具栏中选取相 应工具，操作几乎与 Word 2003 完全一样。 2）分段。在“设计”视图下编辑文本时，FrontPage 2003 将键入的回车，认为既是换行， 又是分段。它会把下一行文字作为新的段落起点，并与上一行文字隔有一定的距离。若用户 不需要分段，只是换行，可以使用组合键 Shift+回车。 2．创建超链接 互联网最精彩、最迷人之处莫过于超链接（Hyperlink）。只要轻轻点击鼠标，全球的信息 海洋任君遨游，这就是超链接的结果。超链接是将事先准备好的文本、图片、按钮等对象与 其他对象建立一种链接，即在源端点和目标端点之间建立一种链接。源端点是超链接的起始 端点，又称源锚；目标端点是链接的对象，又称目标锚。 超链接按源端点的链接对象划分，可以分为超文本链接和非超文本链接。超文本链接的 源锚文本下方一般都有下划线；非超文本链接是用除文本以外的其他对象构成的链接，这里 的源锚既可以是图片、表格、表单，也可以是多媒体对象等。.
(36) 第 5 章 网站设计基础. 超链接按目标端点的链接对象划分，可以分为外部链接、内部链接、电子邮件链接等。 在网页中建立超链接以后，剩下来的只是点击鼠标了。简单地在所设定的超链接（文本、 图片等）上单击，就能完成超链接的任务，到达被链接的“彼岸” 。 （1）建立文本或图片的超链接。在 FrontPage 2003 下建立文本或图片超链接的步骤是： 1）选中要建立超链接的文本或图片。 2）在菜单栏中单击“插入/超链接”命令，弹出图 5.44 的“插入超链接”对话框，或单 击. 按钮，或右击选择“超链接”命令。 3）在弹出的“插入超链接”对话框中，可以选择链接到： 原有文件或网页。 本文档中的位置。 新建文档。 电子邮件地址。 4）选择“原有文件或网页”，在“地址”栏内直接输入被链接的地址（如绿海星网站地 址 http://www.csasp.net），若不知道要建立的“地址”，可以依据“插入超链接”对话框中的一 些按钮来获得帮助，参见图 5.44。. 图 5.44 “插入超链接”对话框. （2）建立网站内部的超链接。网站内部的超链接有两种情况，一种是网站内部文件之间 的关联，另一种是网站内部文件与外部的超链接。 在“插入超链接”对话框（见图 5.44）中，选择“原有文件或网页”，FrontPage 2003 给 出“当前文件夹”、 “浏览过的页”和“近期文件”三个按钮，帮助用户较快地确定链接对象。 若链接对象不在以上选择之列，可以通过“查找范围”和“地址”分别确定链接网站内部文 件或网站外部的超链接。 （3）建立网页内部的超链接。前面谈到过<A>标识，它有一个 name 属性，用于建立文 档内部的超链接。文档的内部超链接在 FrontPage 2003 中称为“书签”，适用于文本较长的网 页。通常利用这种功能在网页的前部建立一个带有超链接的目录，使浏览者进入网页时就可 以对网页的内容有一个概貌性的了解，并可以快速地选定要阅读的内容。 1）设定书签。 选取要设定书签的文字。 在菜单栏单击“插入/书签”命令，弹出“书签”对话框，见图 5.45。. 77.
(37) 78. 企业网站开发与管理 . “书签名称”文本框内显示已选取的设定书签文字（可以改选其它的名称），单击“确 定”按钮即可，被设定为书签的文字下方会出现虚线。 删除“书签” ，只需在图 5.45 中选中要删除的书签名称，单击“清除”按钮即可。. 图 5.45 “书签”对话框. 2）建立内部超链接。 在所编辑的文本中，选定想要设置内部超链接的文字。 从菜单栏中选取“插入/超链接”命令，或右击，单击“超链接”命令。 在“插入超链接”对话框右边（见图 5.44），单击“书签”按钮，在“书签”列表框 中选取需链接的书签名称。 例 5.17 建立网页内部的超链接（L5-17.htm）。 <HTML> <HEAD> <TITLE>网页内部的超链接</TITLE> <STYLE> <!-P.title1 {font-family:"黑体"; font-size:"30" ; color:"Maroon"} P.title2 {font-family:隶书; font-size:20; color:black} P.title3 {font-family:"宋体"; font-size:"20"; color:"Olive"} .note1 {color:Green} .note2 {color:Blue} --> </STYLE> </HEAD> </HEAD> <BODY> <P class="title1">《<A name=念奴娇>念奴娇</A>·赤壁怀古》 <FONT size=2><A href="#注释">至注释</A>→</FONT></P> <P class=title2>苏轼</P> <BLOCKQUOTE> <P class="title3"> 大江东去，<BR>浪淘尽，<BR>千古风流人物。<BR> 故垒西边，<BR>人道是，<BR>三国周郎赤壁。<BR> 乱石崩云，<BR>惊涛裂岸，<BR>卷起千堆雪；<BR> 江山如画，<BR>一时多少豪杰。<BR><BR>.
(38) 第 5 章 网站设计基础 遥想公瑾当年，<BR>小乔初嫁了，<BR> 雄姿英发，<BR>羽扇纶巾，<BR>谈笑间，<BR>强虏灰飞烟灭。<BR> 故国神游，<BR>多情应笑我，<BR>早生华发。<BR>人生如梦，<BR>一尊还酹江月。 </P> </BLOCKQUOTE> <A name=注释>注释</A>∶<BR> <DIV class="note1">念奴娇（词牌名）<BR> 苏轼（1037-1101） ，字子瞻，号东坡居士，眉山（今四川眉山县）人。<BR></DIV> <SPAN class="note2">他是北宋时诗坛成就卓越的大家。</SPAN> 宋仁宗景佑三年生，嘉佑二年进士，累官至端明殿学士兼翰林侍读学士，礼部尚书。<BR> 因讥讽朝政被贬任杭州通判；历徙湖州、黄州、常州。 哲宗嗣位，召至京师，任中枢舍人。后又因晢宗亲政启用新党，<BR> 苏轼又被一贬再贬，之贬到海南，宋徽宗登基大赦天下，苏轼北返时在常州逝世。<BR> 时为徽宗建中靖国元年，享年六十六岁。高宗朝，赐太师，谥文忠。<BR> <FONT size=2><A href="#念奴娇">返回页首</A></FONT> </BODY> </HTML>. 说明：本例已经设置好内部链接，如带有下划线的部分。练习此题时，读者可以先输入 诗句，再做书签，即暂不输入带下划线的部分。然后按下列步骤操作： 1）打开 FrontPage 2003 在“代码”视图中输入例 5.17，注意暂不输入下划线部分。 2）选择“插入/书签/确定”，将词牌名“念奴娇”和“注释”设为书签。 3）分别选中“至注释”和“返回页首” ，右击，在快捷菜单中选取“超链接”命令。 4）在弹出的“插入超链接”对话框中，单击“书签”按钮，分别选取“注释”书签和“念 奴娇”书签，单击“确定/确定”按钮。 5）在“预览”视图中，单击“至注释”，光标将移动到词尾；单击“返回页首” ，光标将 移动到诗词的起始处。 （4）利用浏览器寻找、建立外部的超链接。若用户暂时不能确定外部链接的确切地址， 可按下列步骤操作： 1）单击“插入超链接”对话框（见图 5.44）中“查找范围”右边的 按钮。 2）在新开启的预设浏览器中，输入（或找到）要链接的 URL 地址或文件，例如，欲链 接绿海星网站的“教学资料”栏目。 3）在新打开的浏览器中输入 www.csasp.net，找到“教学资料”栏目（如图 5.46 所示）， 按 Alt+Tab 键返回 FrontPage 2003，此时“地址”栏内已加上该链接的 URL 地址或文件。 （5）建立电子邮件超链接。可以用两种方法建立电子邮件超链接： 直接在“插入超链接”对话框（见图 5.44）的“地址”栏内输入邮件地址。 单击“插入超链接”对话框中的“电子邮件地址”按钮，按提示在文本栏内输入邮 件地址。 （6）取消超链接。用 FrontPage 2003 编辑文本时，只要输入含有 http://或@（读作：at） 等的字符串时，FrontPage 2003 都会自动为其建立地址或邮件的超链接。FrontPage 2003 的这 种“高智商”有时并不被用户接受。此时要取消地址或邮件等的超链接，可以直接单击撤销 按钮 。对已有的超链接地址或邮件等，只需选中后右击，选择“超链接属性”命令，在弹. 79.
相關文件
本課程共分為兩階段。第一階段由基本網頁概念介 紹開始，帶領學員循序漸進使用 FrontPage 2003 建 立個人網頁；第二階段著墨在 Flash
本課程共分為兩階段。第一階段由基本網頁概念介 紹開始，帶領學員循序漸進使用 FrontPage 2003 建 立個人網頁；第二階段著墨在 Flash
本課程共分為兩階段。第一階段由基本網頁概念介 紹開始，帶領學員循序漸進使用 FrontPage 2003 建 立個人網頁；第二階段著墨在
学校现有教学仪器设备超过1亿元,学校图书馆纸质藏书125万册,电子图书
【20150302】今天是 2016 年度第一次交读书报告，第一次拿到书单时，感
• 全球已累积有 1600 万人次有效计算机案例， 5000 余家企 业、研究机构与政府组织持续追踪其有效性。. • 96% 的准确度、 34 个国家使用、
由于音乐以声波振动的非语义性组织结构与人类的情感、意志活动直接同构对应，所以音乐
衡量一个地区或一个国家水资源的丰歉 程度的指标：
