[精华]网站制作必备与指南(第2页有DW图文教材)

[color=red]Q[/color]: 什么是网页?
[color=red]A[/color]:现在在你眼前，出现在显示器上的这个 “ 东西 ” ，就是一个网页。网页实际是一个文件，他存放在世界某个角落的的某一台计算机中，而这台计算机必须是与互联网相连的。网页经由网址（ URL ）来识别与存取，当我们在浏览器输入网址后，经过一段复杂而又快速的程序，网页文件会被传送到你的计算机，然后再通过浏览器解释网页的内容，再展示到你的眼前。

[color=red]Q[/color]:  构成网页的元素.
[color=red]A[/color]: 文字与图片是构成一个网页的两个最基本的元素。你可以简单的理解为：文字，就是网页的内容，图片，就是网页的美观。除此之外，网页的元素还包括动画、音乐、程序等等。

[color=red]Q[/color]:  揭开网页的神秘面纱.
[color=red]A[/color]:在网页上点击鼠标右键，选择菜单中的 “ 查看源文件 ” ，就可以通过记事本看到网页的实际内容。可以看到，网页实际上只是一个纯文本文件，它通过各式各样的标记对页面上的文字、图片、表格、声音等元素进行描述（例如字体、颜色、大小），而浏览器则对这些标记进行解释并生成页面，于是就得到你现在所看到的画面。 为什么在源文件看不到任何图片？ 网页文件中存放的只是图片的链接位置，而图片文件与网页文件是互相独立存放的，甚至可以不在同一台计算机上。

[color=red]Q[/color]:  网页的类型.
[color=red]A[/color]:通常我们看到的网页，都是以 htm 或 html 后缀结尾的文件，俗称 HTML 文件。不同的后缀，分别代表不同类型的网页文件，例如以 CGI 、 ASP 、 PHP 、 JSP 甚至其他更多。

[color=red]Q[/color]: 什么是“流量”和“空间使用量”？
A: 流量：指您被访问的页面大小*次数的总和。按自然月统计（每月1日至月底）
空间使用量：您上传所有文件大小的总和 。

[color=red]Q[/color]:  什么是FTP?
[color=red]A[/color]:FTP （ File Transfer Protocol ）是 Internet 上用来传送文件的协议（文件传输协议）。 FTP 的作用就是让用户连接上远程计算机，查看远程计算机有哪些文件，然后把文件从远程计算机上拷到本地计算机，或把本地计算机的文件送到远程计算机去。

[color=red]Q[/color]: 什么是相对路径，什么是绝对路径？
[color=red]A[/color]: 绝对路径就是你的主页上的文件或目录在硬盘上真正的路径。 在www中，以http开头的链接都是绝对路径。

[color=red]Q[/color]: 选择一个适合自己的网页编辑工具.
[color=red]A[/color]:“ 工欲善其事，必先利其器 " 。制作网页第一件事就是选定一种网页制作软件。从原理上来讲，虽然直接用记事本也能写出网页，但是对网页制作必须具有一定的 html 基础，非初学者能及，且效率也很低。用 WORD 也能做出网页，但有许多效果做不出来，且垃圾代码太多，也是不可取的。我认为比较合适的网页制作软件首推 Dreamweaver ，它简单易学，功能强大， 用它做出的网页垃圾代码也比较少，另外，它还可以在我们用所见即所得的环境制作网页的同时可以在代检视窗中看到对应的 HTML 代码，这对我们学习 HTML 有很大好处。虽然用 Dreamweaver ，即使我们一点不懂 HTML  也能做出漂亮的网页，但 HTML 毕竟是制作网页的基础，我们要想把网页做活了，必须要知其然还要知其所以然，最终我们还是要熟练掌握 HTML 才行。当然  Frontpage 也不错，但比起 Dreamweaver 来还是要稍逊一筹。  

●DreamWeaver—— 自制动态 HTML 动画的网页     
DreamWeaver 是一个很酷的网页设计软件，它包括可视化编辑、 HTML 代码编辑的软件包，并支持 ActiveX 、 JavaScript 、 Java 、 Flash 、 ShockWave 等特性，而且它还能通过拖拽从头到尾制作动态的 HTML 动画，支持动态 HTML(Dynamic HTML) 的设计，使得页面没有 plug － in 也能够在 Netscape 和 IE 4.0 浏览器中正确地显示页面的动画。同时它还提供了自动更新页面信息的功能。     
DreamWeaver 还采用了 Roundtrip HTML 技术。这项技术使得网页在 DreamWeaver 和 HTML 代码编辑器之间进行自由转换， HTML 句法及结构不变。这样，专业设计者可以在不改变原有编辑习惯的同时，充分享受到可视化编辑带来的益处。 DreamWeaver 最具挑战性和生命力的是它的开放式设计，这项设计使任何人都可以轻易扩展它的功能。     

●Microsoft FrontPage 98—— 制作功能强大的网页     
如果你曾对 Word 很熟悉，那么相信你用 FrontPage 98 进行网页设计一定会非常顺手。     
使用 Frontpage98 制作网页，你能真正体会到 “ 功能强大，简单易用 ” 的含义。页面制作由 Frontpage98 中的 Editor 完成，其工作窗口由 3 个标签页组成，分别是 “ 所见即所得 ” 的编辑页， HTML 代码编辑页，预览页。 Frontpage98 带有图形和 GIF 动画编辑器，支持 CGI 和 CSS 。向导和模板都能使初学者在编辑网页时感到更加方便。   FrontPage 98 最强大之处是其站点管理功能。在更新服务器上的站点时，不需要创建更改文件的目录。 FrontPage 98 会为你跟踪文件并拷贝那些新版本文件。 FrontPage 98 是现有网页制作软件中唯一既能在本地计算机上工作，又能通过 Internet 直接对远程服务器上的文件进行工作的软件。     
  
●Netscape 编辑器 —— 制作简单的网页     
Netscape Communicator 和 Netscape Navigator Gold 3.0 版本都带有网页编辑器。   如果你喜欢用 Netscape 浏览器上网，那么使用 Netscape 编辑器真是简单方便！当你用 Netscape 浏览器显示网页时，单击编辑按钮， Netscape 就会 把网页存储在硬盘中，然后就可以开始编辑了。你也可以像使用 Word 那样编辑文字、字体、颜色，改变主页作者、标题、背景颜色或图像，定义描点，插入链接，定义文档编码，插入图像，创建表格等，是不是与 Frontpage 98 还有些像。但是， Netscape 编辑器对复杂的网页设计就显得功能有限了，它连表单创建、多框架创建都不支持。     
Netscape 编辑器是网页制作初学者很好的入门工具。如果你的网页主要是由文本和图片组成的， Netscape  编辑器将是一个轻松的选择。如果你对 HTML 语言有所了解的话，能够使用 Notepad 或 UltraEdit 等文本编辑器来编写少量的 HTML 语句，那么也可以弥补 Netscape 编辑器的一些不足。  

●Adobe Pagemill 3.0—— 制作多框架、表单和 Image Map 图像的网页   Pagemill 功能不算强大，但使用起来很方便，适合初学者制作较为美观、而不是非常复杂的主页。如果你的主页需要很多框架、表单和 Image Map 图像，那么 Adobe Pagemill 3.0 的确是你的首选。     
Pagemill 创建多框架页十分方便，你可以同时编辑各个框架中的内容。 Pagemill 在服务器端或客户端都可创建与处理 Image Map 图像，它也支持表单创建。 Pagemill 允许在 HTML 代码上编写和修改，支持大部分常见的 HTML 扩展，还提供拼写检错、搜索替换等文档处理工具。在 Pagemill 3.0 中还增加了站点管理能力，但仍不支持 CSS 、 TrueDoc 和动态 HTML 等高级特性。     
Pagemill 另一大特色是有一个剪贴板，可以将任意多的文本、图形、表格拖放到里面，需要时再打开，很方便。
　  
●Claris Home Page 3.0—— 快速创建动态的网页     
如果使用 Claris Home Page 软件，你可以在几分钟之内创建一个动态网页。这是因为它有一个很好的创建和编辑 Frame( 框架 ) 的工具，你不必花费太多的力气就可以增加新的 Frame( 框架 ) 。而且 Claris Home Page 3.0 集成了 FileMaker 数据库，增强的站点管理特性还允许你检测页面的合法连接。不过界面设计过于粗糙，对 Image Map 图像的处理也不完全。     
  
●HotDog Professional 5—— 制作要加入多种复杂技术的网页     
HotDog 是较早基于代码的网页设计工具，其最具特色的是提供了许多向导工具，能帮助设计者制作页面中的复杂部分。   HotDog 的高级 HTML 支持插入 marquee ，并能在预览模式中以正常速度观看。这点非常难得，因为即使首创这种标签的 Microsoft 在 FrontPage 98 中也未提供这样的功能。 HotDog 对 plug － in 的支持也远远超过其他产品，它提供的对话框允许你以手动方式为不同格式的文件选择不同的选项。但对中文的处理不很方便。     
HotDog 是个功能强大的软件，对于那些希望在网页中加入 CSS 、 Java 、 RealVideo 等复杂技术的高级设计者，是个很好的选择。     

●HomeSite 3.0—— 制作可完全控制页面进程的网页  
Allaire 的 HomeSite 3.0 是一个小巧而全能的 HTML 代码编辑器，有丰富的帮助功能，支持 CGI 和 CSS 等等，并且可以直接编辑 perl 程序。 HomeSite 工作界面繁简由人，根据习惯，可以将其设置成像 Notepad 那样简单的编辑窗口，也可以在复杂的界面下工作  HomeSite 具有良好的站点管理功能，链接确认向导可以检查一个或多个文档的链接状况。 HomeSite 更适合那些比较复杂和精彩页面的设计。如果你希望能完全控制你制作的页面的进程， HomeSite 3.0 是你最佳选择。不过对于生手过于复杂。     
  
●HotMetal Pro 4.0—— 制作具有强大数据嵌入能力的网页     
HotMetal 既提供 “ 所见即所得 ” 图形制作方式，又提供代码编辑方式，是个令各层次设计者都不至于失望的软件。但是初学者需要熟知 HTML ，才能得心应手地使用这个软件。 HotMetal 具有强大的数据嵌入能力，利用它的数据插入向导，可以把外部的 Access 、 Word 、 Excel 以及其它 ODBC 数据提出来，放入页面中。而且 HotMetal 能够把它们自动转换为 HTML 格式，是不是很棒，此外它还能转换很多老格式的文档 ( 如 WordStar 等 ) ，并能在转换过程中把这些文档里的图片自动转换为 GIF 格式。     
HotMetal 为用户提供了 “ 太多 ” 的工具，而且它还可以用网状图或树状图表现整个站点文档的链接状况。   　　
  
以上工具各有千秋，但对于 WEB 新手来说， " 所见即所得 " 无疑是最方便的， " 工欲善其事，必先利其器 " 。制作网页第一件事就是选定一种网页制作软件。从原理上来讲，虽然直接用记事也能写出网页，但是对网页制作必须具有一定的 html 基础，非初学者能及，且效率也很低。用 WORD 也能做出网页，但有许 多效果做不出来，且垃圾代码太多，也是不可取的。我认为比较合适的网页制作软件首推 Dreamweaver ，它简单易学，功能强大，用它做出的网页垃圾代码也比较少，另外，它还可以在我们用所见即所得的环境制作网页的同时可以在代检视窗中看到对应的 HTML 代码，这对我们学习 HTML 有很大好处。虽然用 Dreamweaver ，即使我们一点不懂 HTML  也能做出漂亮的网页，但 HTML 毕竟是制作网页的基础，我们要想把网页做活了，必须要知其然还要知其所以然，最终我们还是要熟练掌握 HTML 才行。当然  Frontpage 也不错，但比起 Dreamweaver 来还是要稍逊一筹.

[color=red]Q[/color]:【HTML】教程--一般概念
[color=red]A[/color]: ■ HTML 一般概念：

　　这节将简单介绍 HTML。  

　　全称：HyperText Mark-up Language  
　　译称：超文本标记语言。  
　　简意：一种为普通文件中某些字句加上标识的语言，其目的在于运用标记（tag）合文件 达到预期的效果。  

　　HTML 是在 SGML 定义下的一个描述性的语言，或可说 HTML 是 SGML 的一个应用程式。HTML 不是程式语言，如 C++ 和 Java 之类，它只是标记语言，基本上你只要明白了各种 标记的用法便算学懂了 HTML，HTML 的格式非常简单，只是由文字及标记组合而成，于 编辑部方面，任何文字编辑器都是可以，只要能将档案存为文本格式即可， 用专门的网页编辑工具当然更好。  

■ 阅读须知：

　　这一篇【HTML彻底剖析】偏重于标记的介绍，考虑到易懂及每节的篇幅问题，我并不按 W3C 的 HTML 分类，这可令你更易选择有兴趣的标记，其中只有【文件标记】是必须的，其余可任意选择。这一篇不会提及任何网页编辑软件，只要你掌握了 HTML ，任何网页编辑工具都可以变成一把利器。（就好像只要你有深厚内功，树叶同样可以杀人）  

■ 标记写法：

　　·任何标记皆由"<"及">"所围住，如 <P>  
　　·标记名与小于号之间不能留有空白字元。  
　　·有些标记需要加上参数，有些不要。如 <font size="+2">Hello  
　　·参数只可加于起始标记中。  
　　·在起始标记的标记名前加上符号"/"便是终结标记，如  
　　·标记字母大小写皆可。

■ 围堵标记与空标记：

　　标记按型态分为围堵标记与空标记

　　1、围堵标记  

　　顾名思义，它以起始标记及终结标记将文字围住，令其达到预期要显示的效果。  

　　例如 HTML Source ： Creation of Webpage is my favourite.  
　　显示成： Creation of Webpage is my favourite.  

　　其中  便称为围堵标记。它以起始标记及终结标记标示文字 Creation of webpage ，令它显示成粗体，两者失其一都会发生错误显示。  

　　2、空标记  

　　是指标记单独出现，只有起始标记没有终结标记。  

　　例如 HTML Source：

　　I love Creation of Webpage.<br>It's a wonderful place.  

　　显示成：

　　I love Creation of Webpage.  
　　It's a wonderful place.  

　　其中换行标记<br>便属于空标记。  
　　它的作用是将标记后的所有东西显示于下一行，可同终结标记对它是没有意义的， 但有些人为空标记加上终结标记，这是为方便阅读而已，对 HTML 没有影响。  

  
文章来源:Goeway

Q: 【HTML】教程--文件标记
A:■ 文件标记

　　<HTML> ； <HEAD> ； <TITLE> ； <BODY>  

　　欲明白本篇【HTML彻底剖析】之标记分类，请看 【标记一览】。  
　　也请先明白围堵标记与空标记的分别，请看 【HTML概念】。  

■ HTML 基本架构：  

　　以下 HTML Source Code 便是一份 HTML 文件的基本架构 ：  


<HTML>  
<HEAD>  
<TITLE> 网页的标题 </TITLE>  
</HEAD>  
<BODY>  
网页的内容，很多标记都作用于此  
</BODY>  
</HTML>  


特点解说：  

整份文件处于标记<HTML>与</HTML>之间。  
<HTML>用以宣告这是 HTML 文件，让浏览器认出并正确处理此 HTML 文件。  

文件分两部份，由<HEAD>至</HEAD>称为开头，<BODY>至</BODY>称本文。  
基本上两者各有适用的标记，如<TITLE>只可出现于开部分。  

开头部分用以存载重要信息，而只有本文部分会被显示。  
所以大部分标记会应用于本文部分。  

<TITLE>所标示的是文件的标题。  
会出现于浏览器顶部及为别人 Bookmark 时的名称，所以每页有不同面明确的标题是需要的。  
　　上述标记中只有<BODY>具参数设定。  

■ <BODY> 的参数设定：  

　　例子：  

<BODY text="#000000" link="#0000FF" alink="#FF0000" vlink="#0000FF" background="bg1.gif" bgcolor="#FFFFFF" leftmargin=2 topmargin=2 bgproperties="fixed">  

text="#000000"  
用以设定文字颜色。 #000000 代表黑色，也可以采用颜色名称，即 text="black" 。各种颜色的值及名称可参考【调色原理】一节。  

link="#0000FF"  
设定一般文字链接的颜色。  

alink="#FF0000"  
设定刚按下时文字链结颜色。  

vlink="#0000FF"  
设定被按过后的链接的颜色。  

background="bg1.gif"  
设定背景图片。GIF 或 JPEG 皆可，可以是绝对路径或相对路径。  

bgcolor="#FFFFFF"  
设定背景颜色，当已设定背景图片时会失去作用，除非透明部分。  

leftmargin=2  
设定整份文件显示画面的左方边沿空间，单位为像素。 （只适用于IE）  

topmargin=2  
设定整份文件显示画面的上方边沿空间。 （只适用于IE）  

bgproperties="fixed"  
固定背景图片，当卷轴卷动时不会跟着卷动。 （只适用于IE）  
　　标记及参数的字母大小写都可以。其他如 onload 等事件请参看有关 Java Script的介绍。  

文章来源：Goeway

Q: 【HTML】教程--排版标记
A:■ 排版标记

<!--注解--> ； <P> ；
； <HR> ； <CENTER> ； <PRE> ； <DIV> ； <NOBR> ； <WBR> ；  

　　欲明白本篇【HTML彻底剖析】之标记分类，请看 【标记一览】。  
　　也请先明白围堵标记与空标记的分别，请看 【HTML概念】。

■<!--注解-->： ▲Top  


　　像很多电脑语言一样，HTML 也提供注解功能。浏览器将忽略此标记中的文字（可以是 很多行）而不作显示，一般使用目的：  

为文中不同的部分加上说明，方便日后修改。  
这对较复杂或非私人网页尤其重要，它不单提醒自己也提醒其他同事这部分 做什么、那部份做什么。  
例子：  
<!--由这里开始是产品订购表格-->  

用作版权声明。  
假如你不希望别人使用或复制你的网页，可加上警告字句。  
例子：  
<!--本文版权为 2000, FortuneAge 所有，未经许可，请勿抄摘-->  
■ <P> ： ▲Top  


　　<P> 称为段落标记。作用：留一空白行。

　　本来<P>是一个围堵标记，标于一段落的头尾，但从 HTML 2.0 开始已不需要</P>作结尾。  

　　<P> 的常用参数： 如：<p align="center">  

align="center"  
可选值：right, left, center。  
默认值： align="left"  
例子： 原代码 Here is the text for my paragraph. It does't matter how long it is,  
how many space are between the words or when I decide to hit the return key.  
It will create a new paragraph only when I begin the tag with another one.  
<P>Here's the next paragraph.  
显示结果 Here is the text for my paragraph. It does't matter how long it is, how

manyspace are between the words or when I decide to hit the return key. It

will create a new paragraph only when I begin the tag with another one.  

Here's the next paragraph.  
  

■
： ▲Top  


　　
称为换行标记。作用：令其后的内容在下一行显示。  

　　由于浏览器会自动忽略原代码中的空白和换行的部分，这使得
成为最常用的标记之一 。 因为无论你在原代码中编好了多漂亮的文章，若不适当地加上换行标记或段落标记， 浏览器只会将它显示成一大段。  

错误示范： 原代码 566 E Boston Post RD  
Mamaroneck NY 10543-9982  
United States of America  
显示结果 566 E Boston Post RD Mamaroneck NY 10543-9982 United States of America  


正确例子： 原代码 566 E Boston Post RD  

Mamaroneck NY 10543-9982  

United States of America  
显示结果 566 E Boston Post RD  
Mamaroneck NY 10543-9982  
United States of America  

■ <HR> ： ▲Top  


　　<HR>称为水平线。作用：插入一条水平线。  

　　<HR> 的参数修改：

　　以： <HR align="LEFT" size="2" width="70%" color="#0000FF" noshade> 为例。  

align="LEFT"  
设定线条摆放位置，可选择：left；right；center 三种设定值。  

size="2"  
设定线条的厚度，以像素作单位，内定为 2。  

width="70%"  
设定线条长度，以像素作单位，可以是绝对或相对值，内定为 100%。  

color="#0000FF" （只适用于IE）  
设定线条颜色，内定为黑色。 #0000FF 代表蓝色，也可以采用颜色的名称，即 text="blue" 。各种颜色的值及名称请参考【调色原理】一节。  

noshade  
设定线条为平面显示，若删去则具阴影，这是内定值。  
例子： 原代码 <HR>  
<HR align="LEFT" size="4">  
<HR align="LEFT" size="2" width="70%" color="#0000FF" noshade>  
<HR align="LEFT" size="4" width="70" color="#008000">  

  

■ <CENTER> ： ▲Top  


　　<CENTER>称为居中标记。作用：令置中对齐。  

　　你会发现很多的标记已有 align="CENTER" 的参数，<CENTER>似乎是多余了，事实上它还是常用的标记之一，其简单易用 ，常用于文字，对于已加有 align="CENTER" 参数的 <TABLE> 标记也不要厌其烦 地加上居中标记，因为很多浏览器不支持<TABLE> 标记中的 align="CENTER" 参数。  

例子： 原代码 <CENTER>Chris's First Homepage</CENTER>  
<CENTER>What's new</CENTER>  
<CENTER>My profile</CENTER>  
结果 Chris's First Homepage  
What's new  
My profile  

■ <PRE> ： ▲Top  


　　<PRE>称为预设格式标记。作用：令文字按照原代码的方式显示。  

　　这标记允许保留你在原代码中输入的空白和回车。细看以下例子你便可体会到此标记的 威力。除了运用一大堆表格标记之外你只有采用这标记才能有此效果。  

　　能以<PRE>标记产生对齐效果，或产生多于一行的空白才算上乘！  

例子： 原代码  <pre> Creation of Webpage Log Analysis I

Composer Learning  459 407 480 522 547 586 673
HTML Advanced      200 268 296 358 385 453 506</pre>
  
显示结果   Creation of Webpage Log Analysis I

Composer Learning  459 407 480 522 547 586 673
HTML Advanced      200 268 296 358 385 453 506
  

■ <DIV> ： ▲Top  


　　<DIV>称为定位标记。作用：设定文字表格等摆放位置。  

　　<DIV>应用在 Style Sheet（样式表）方面更显威力，它最终目的是给设计者另一种组织 能力，有 Class ; Style ; title ; ID 等属性，将于【Style Sheet】一节才作详述，这里只作一个 属性设定。  
以 <DIV align="center"> 为例：  


align="center"  
可选值：center ; left ; right 。决定对齐方向。  
<DIV align="center"> 的作用和居中标记 <CENTER>一样，前者是由 HTML3.0 开始 的标准，后者是通用已久的标示法。  
例子： 原代码 <DIV align="center">Chris's First Homepage  
<br>What's new  
<br>My profile</DIV>  
显示结果 Chris's First Homepage  
What's new  
My profile  

■ <NOBR> ： ▲Top  


　　<NOBR>称为不换行标记。作用：令文字不能因太长而换行 。它对住址、数学公式、一行数字等尤其有用。  

例子：（其中 Chris's Creation of Webpage 将不被分开而显示于同一行。） 原代码 If you want to know how to create you own homepage quickly, don't miss

<NOBR>

Chris's Creation of Webpage</NOBR> which will help you a lot.  
显示结果 If you want to know how to create you own homepage quickly, don't miss

Chris's

Creation of Webpage which will help you a lot.  

■ <WBR> ： ▲Top  


　　<WBR>称为建议换行标记。作用：预设换行部位。  

　　它没有侵犯到
的责任，只是作建议而已，若浏览者的显示器分辨率够高的话，那么它是 不会换行的。  

例子：（若不加<WBR>标记，整个网址会显示下一行。） 原代码 Please visit my other homepage which locate at [url]http://www.geocities.com/[/url]

Silicon

Valley/<WBR>Sector/8234/index.html There are many softwares for download.

I think you will really love that place.  
显示结果 Please visit my other homepage which locate at [url]http://www.geocities.com/[/url]

Silicon

Valley/Sector/8234/index.html There are many softwares for download. I

think you will really love that place.  

  
文章来源：Goeway

Q: 【HTML】教程--字体标记
A: ■ 字体标记

<STRONG>  
<EM> <VAR> <CITE> <DFN> <ADDRESS>  
<TT> <SAMP> <CODE> <KBD> <U> <STRIKE> <BIG> <SMALL> <SUP> <SUB>  
<H1> <H2> <H3> <H4> <H5> <H6>  
<BASEFONT>  

　　欲明白本篇【HTML彻底剖析】之标记分类，请看 【标记一览】。  
　　也请先明白围堵标记与空标记的分别，请看 【HTML概念】。

■实体标记与逻辑标记 ： ▲Top  


　　这一节【字体标记】你必须先明白实体标记与逻辑标记的分别，否则你会迷惑于为何不同 的标记却有相同的效果。两者分别有以下两处：  

　　1、实体标记有固定的显示效果，逻辑标记标记则依不同浏览器而不同。  

　　例如逻辑标记的 <EM> 由于浏览器的不同它所标示的文字不一定出现斜体效果， 它可能是加底线、粗体或反白等，所以这一节是以它们在 IE 和 NC 中的效果作介绍。

　　2、多个实体标记也可有效标示同一字句，逻辑标记则通常于浏览器不能有效显示多 重的标示。

　　例如两个逻辑标记 <EM> 及 <STRONG> 同时标示一字句于旧浏览器常失去作用。  


实体标记有：  
  <U>  
逻辑标记有：  
<STRONG> <EM> <VAR> <CITE> <DFN> <ADDRESS> <CODE> <KBO> <SAMP> <TT>  
　　若要求真确的效果当然以实体标记为佳。

■<STRONG>  ： ▲Top  


　　两者皆能产生字体加粗效果，但必须注意的是当文件编码被设为汉字时，两者所标示的中文字不会在 Netscape Netvigator 显示粗体效果。  

例子： （第一行是没有任何字体标记的，作参照用） HTML Source Code （原代码） 浏览器显示结果  
Creation of Webpage  
<br><STRONG>Creation of Webpage</STRONG>  
<br>Creation of Webpage  Creation of Webpage  
Creation of Webpage  
Creation of Webpage  

■ <EM> <VAR> <CITE> <DFN> <ADDRESS>： ▲Top  


　　这些标记在 Internet Explorer 里都会产生斜体效果，而只有 </DFN> 于 Netscape Netvigator 失去作用。这些标记中只有 <ADDRESS> 较为特别，因为它包括换行效果所以不必在它前面加上  
标记。  

例子： HTML Source Code （原代码） 浏览器显示结果  
Creation of Webpage  
<br><EM>Creation of Webpage</EM>  
<br><VAR>Creation of Webpage</VAR>  
<br><CITE>Creation of Webpage</CITE>  
<br><DFN>Creation of Webpage</DFN>  
<ADDRESS>Creation of Webpage</ADDRESS>  Creation of Webpage  
Creation of Webpage  
Creation of Webpage  
Creation of Webpage  
Creation of Webpage  
Creation of Webpage  

■<TT> <SAMP> <CODE> <KBD> <U> <STRIKE> <BIG> <SMALL> <SUP> <SUB> ▲Top  


　　为方便对照及记认，所以把十个标记放在一起介绍。

<TT> <SAMP> <CODE> <KBD> 可令每字母有相等宽度且每个字母之间的距离稍微加宽。但于 NC 不见得如此。  
<U> 是加底线的标记，一些特别的浏览器并不支持，因顾虑到与链接混淆。  
<STRIKE> 加上删除线的标记。  
<BIG> 令字体加大。  
<SMALL> 令字体变细。  
<SUB> 为下标字， <SUP> 则为上标字，仅剩的数学标记。  
例子： （第一行是没有任何字体标记的，作参照用） HTML Source Code （原代码） 浏览器显示结果  
Creation of Webpage  
<br><TT>Creation of Webpage</TT>  
<br><SAMP>Creation of Webpage</SAMP>  
<br><CODE>Creation of Webpage</CODE>  
<br><KBD>Creation of Webpage</KBD>  
<br>Creation of Webpage  
<br><STRIKE>Creation of Webpage</STRIKE>  
<br><BIG>Creation of Webpage</BIG>  
<br><SMALL>Creation of Webpage</SMALL>  
<br>12345<SUB>7</SUB> 6789<SUP>9</SUP>  Creation of Webpage  
Creation of Webpage  
Creation of Webpage  
Creation of Webpage  
Creation of Webpage  
Creation of Webpage  
Creation of Webpage  
Creation of Webpage  
Creation of Webpage  
123457 67899  

■<H1> <H2> <H3> <H4> <H5> <H6>： ▲Top  


　　这些标记是标题标记，由 <H1> 到 <H6> 逐渐变小。每个标题标记所标示的字句将独占一行且上下留一空白行。  

例子： 原代码 <H1>Header Level 1</H1>  
<H2>Header Level 2</H2>  
<H3>Header Level 3</H3>  
<H4>Header Level 4</H4>  
<H5>Header Level 5</H5>  
<H6>Header Level 6</H6>  
显示结果 Header Level 1
Header Level 2
Header Level 3
Header Level 4
Header Level 5
Header Level 6  

■ <BASEFONT>： ▲Top  


　　这一节只有这两个标记具参数设定，且两者的参数设定是一样的，都是负责设定文字的大小、 字型及颜色，但各有用处，且看以下比较：  

<BASEFONT> 可以用于文件开头部分，即 <HEAD> 与 </HEAD> 之间的位置，将 影响全文字句，是一个空标记，用以改变字体显示的内定值。  
是应用于文件的内文部分，即 <BODY> 与 </BODY> 之间的位置，只影响 所标示的字句，是一个围堵标记。  
两标记可同时存在，唯没被  所标示的字句才直接受 <BASEFONT> 所影 响，而  本身也受 <BASEFONT> 的影响。  
　　的参数设定：  

　　例子： <font face="Arial" size="+2" color="#008000">Creation of Webpage  


face="Arial"  
设定文字的字形。Arial 是常用的一种，请不要使用 Window 附带字 体以外的字体。对于没有设定为中文代码的中文网页，Netscape Netvigator 不会显示此标记 所指明的任何中文字体。  
size="+2"  
设定文字的大小。其值可以是绝对或相对，  
绝对的意思是标记自己决定文字的大小，不受 <BASEFONT> 的影响，如  
size="5" 表示其大小便是 5， 而html内定值为 3，即 size="3"和没设定是一样的。  
相对的意思是在默认值 3 基础上增大或缩小的级数，如 size="+2" 便等同绝 对表示法的 size="5"，蓝天若已设定 <BASEFONT size="n"> 则其实际大小便是 n+2 不 再是 3+2 了。<BASEFONT>只有绝对表示法。  
color="#008000"  
设定文字的颜色。#008000 表示绿色，各类颜色值及调色法请参考【调色原理】  
例子： 原代码 <font size="+1">I love Creation of Webpage  
<br><font size="+2" color="#800080">I love Creation of Webpage  
<br><font face="Times New Roman" size="5" color="#008000">I love Creation of Webpage  
显示结果 I love Creation of Webpage  
I love Creation of Webpage  
I love Creation of Webpage

[color=red]Q[/color]: [color=royalblue]FrontPage2002简明教程[/color](一)
[color=red]A[/color]: ★原文转载自eniac版lzz7758258的《FrontPage2002简明教程(一)》★
第一章 安装与界面

1．安装FrontPage 2002程序

   FrontPage 2002已经集成在Office XP中，成为Office家族中的一员。如果你购买了Office XP企业版或者专业版，在安装时你只须选择安装FrnotPage XP就行了。

   rnotPage XP的安装过程非常简单，我使用的是Office XP中文企业版，分软件安装盘和中文支持语言包盘。将Office XP的双光盘的A盘（也就是软件安装盘）放入CD-ROM。双击光盘中setup.exe的文件，安装程序即开始自动安装。
[img]http://www.nease.net/xhelp/images/fp2002_1.1.jpg[/img]
图1.1

   首先出现一个用户信息窗口，要求你正确的输入用户名、单位和密码，我们将包装盒上的注册码输入指定框（图1.1）。然后单击"NEXT"按钮，出现用户许可协议画面，很长的用户许可协议不必阅读，直接选中"I ACCEPT THE TERMS IN THE LICENSE AGREEMENT"（"我接受《许可协议》中的条款"）（图1.2）。单击"NEXT"按钮，出现安装选择界面。单击下面的"COSTOM"按钮，再单击"NEXT"按钮，如果要对安装路径进行设置，可以在此界面的安装路径框中输入所要的路径。最后进入自定义安装介面。在此介面可以选择欲安装的XP组件，再上方的选项中至少选中Microsoft FrontPage 2002，在左下角可以看到所占用的硬盘空间，之后单击"NEXT"按钮，便开始安装软件了（图1.3）。
[img]http://www.nease.net/xhelp/images/fp2002_1.2.jpg[/img]
图1.2

在安装结束后，系统会重新启动一次，到此安装前半部分结束。
[img]http://www.nease.net/xhelp/images/fp2002_1.3.jpg[/img]
图1.3

2．安装FrontPage 2002中文语言支持包

  将Office XP的双光盘的B盘（也就是中文支持盘）放入CD-ROM。双击光盘中setup.exe的文件，安装程序即开始自动安装。过程同上，选择组件时至少选中FrontPage 2002才能保证之后你可以使用中文版。

  安装完后，系统同样会重新启动一次。之后在程序里选择Microsoft Office Tools里的Microsoft Office XP Language Setting。出现对话框，在第一行里选择Chinese（Simplified）（简体中文），其他设置保持不变（图1.4）。单击OK。
[img]http://www.nease.net/xhelp/images/fp2002_1.4.jpg[/img]
图1.4

3．启用

   启动FrontPage 2002后，简直就和Word XP是一个样子，上部是菜单栏、工具栏，像我这样熟悉Word的人就不用学习了；下面左边是视图区窗口，里面有六个按钮，代表六种不同的功能，它大大地方便了我们对站点和网页的制作和管理。占屏幕大部分空间的是我们的工作区，所有的页面编辑都在其中完成。其中的主要功能将在接下来的介绍中分别阐述其使用方法。（图1.5）
[img]http://www.nease.net/xhelp/images/fp2002_1.5.jpg[/img]

[color=red]Q[/color]: [color=royalblue]FrontPage2002简明教程(二)[/color]
[color=red]A[/color]: ★原文转载自eniac版lzz7758258的《FrontPage2002简明教程(二)》★
   FrontPage中对于文字与图像的处理与Word很相似，用过Word的人对与FrontPage中这部分的操作很容易上手的。不过，毕竟是网页制作软件，在Web的基础上，又增加了很实用的功能，让菜鸟也能做出复杂而且高级的网页文字与图像。相较与以前版本，FrontPage 2002在这方面进行了改进，更贴近普通用户，在轻轻松松的点击鼠标之后就可以做出以往还要通过粘贴HTML代码这样烦人步骤的效果。

   FrontPage中对于文字以及图像的处理基本集中在这三个菜单栏里：编辑、插入、格式。

编辑：包括用于处理文字的复制、粘贴等操作，调整网页内容（包括文字、图像、控件等等）的多少以及安排。是最基础的工具，经常使用其对应的快捷键。

插入：用于网页各种部件及其组成部分的创建，很多选项都能创建既复杂又实用的部件，这方面较Dreamwaver更容易被初学者接受。（图2.1）
[img]http://www.nease.net/xhelp/images/fp2002_2.1.jpg[/img]
图2.1

格式：对于文字的处理大多集中在这里，这里的选项是用来协调整个网页以及整个网站的内容编制，也是个较常用到的菜单栏。（图2.2）
[img]http://www.nease.net/xhelp/images/fp2002_2.2.jpg[/img]
图2.2

创建文字：

在FrontPage中创建文字的方法大致分两种：输入和导入。

一、新建一个网页，之后输入的文字就会在光标所在位置出现，根本得不能再根本的方法，说白了就是打字。只要光标能到的地方都可以正常输入文字。

二、通过【粘贴】能将之前在任何程序中复制或者剪切的文字创建到当前编辑网页中，【编辑】菜单栏中的选项与之有关。还可以通过【插入】中【文件】的形式导入文字，包括txt、doc、htm等纯文本或者包含文字的文件。

处理文字字体：

选择【格式】菜单栏中的【字体】选项，出现字体对话框（如图2.3）。
[img]http://www.nease.net/xhelp/images/fp2002_2.3.jpg[/img]
图2.3

字体：框中选择想应用的字体。字体文件都保存在windows目录中的fonts子目录中，可以自行删改添加。

字形：有常规、倾斜、加粗和加粗倾斜四个选项。一般来说正文选用保持常规，加粗用于标题，倾斜则用于突出正文中的内容以及使文字美观。

字号：可以直接在输入框中输入想使用的字号，也可以在选项中选取。一般来说在浏览器中9磅和10.5磅看起来最美观最舒服。

字符间距：这个分页中的选项是用来进行行距设置以及文字定位的。

预览：无论在【字体】中进行什么操作，都可以在预览框中看到样品，方便选取合适的搭配。

处理文字段落：

选择【格式】菜单栏中的【段落】选项，出现段落对话框（如图2.4）
[img]http://www.nease.net/xhelp/images/fp2002_2.4.jpg[/img]  
图2.4

对齐方式：设置整个段落在页面中的位置。常用的为居中。

缩进：调整段落与左右边界的距离。首行缩进是用来设置各段第一行。

段落间距：设置段落与段落之间的距离。

对段落的操作和字体一样，可以在预览框中观察。

当然，以上这些操作都可以在工具栏中对应图标按钮实现。（如图2）
[img]http://www.nease.net/xhelp/images/fp2002_2.jpg[/img]
图2

还有【格式】菜单栏中的【项目符号与编号】选项，也可以用来设置文字段落的排列，基本上文字的一般处理都与Word相似。

处理动态文字：
[img]http://www.nease.net/xhelp/images/fp2002_2.5.jpg[/img]
图2.5

§ 选择【插入】菜单栏中的【Web组件】选项，在出现的对话框中选择动态效果中的“字幕”（如图2.5）。在出现的对话框中首先在文本框中输入文字，而后对速度、大小进行调整。这里值得说明的是左下角的样式按钮，点击之后出现的新窗口中可以进行样式的调用等，在新窗口的左下角有一个格式按钮，在这里可以进行文字格式的一般处理（即上文所述的）。这在以后的文字相关处理中都用这种按钮后的按钮情况。（如图2.6）回到字幕对话框后按“确定”，这样一个网页中的滚动字幕就制作好了。
[img]http://www.nease.net/xhelp/images/fp2002_2.6.jpg[/img]
图2.6

§ 选择【格式】菜单栏中的【动态HTML效果】选项，出现相应浮动选项框（如图2.7）。只有当你在网页中选择了文字或者图像，浮动框中的选项才会启动。这里我们先在网页中输入文字处理一下，把鼠标移到文字行，在浮动框中依次选择“网页加载”、“逐字放入”。DHTML效果在FrontPage中以淡蓝色方框表示。（如图2.8）
[img]http://www.nease.net/xhelp/images/fp2002_2.7.jpg[/img]
图2.7
[img]http://www.nease.net/xhelp/images/fp2002_2.8.jpg[/img]
图2.8

创建图像：

在FrontPage中创建图像是在【插入】菜单栏里的【图片】选项。

剪贴画：会启动剪贴画寻找器。在这里你可以方便地在本机或者在互联网上搜索到剪贴画用来装点你的页面。

来自文件：导入本机或者局域网中的图片，相比较剪贴画，获得图像的质量、类型和格式都很丰富，是最常用的导入图像方式。

新建图片库：主要用于制作排列众多图片的页面，针对样品列举、图片欣赏等。在打开的对话框中，点击添加导入所需要的图片，设置好缩略图的大小后，在四种布局中选择一种适合用户的（如图2.9）。简单点击后，按确定，一张布满图像的页面就生成了。
[img]http://www.nease.net/xhelp/images/fp2002_2.9.jpg[/img]
图2.9

绘制新图形：选择后在页面中插入一块类似画板的蓝色区域，可以在上面自由作画。一般不用到。

自选图形：在众多简单后实用的线图中选择插入。
[img]http://www.nease.net/xhelp/images/fp2002_2.10.jpg[/img]
图2.10

艺术字：用过Word的人应该都很了解这个了，就是方便的创建含有文字特效的图片文件。知道保存页面后才会以图片形式导出。点击后选择一种合适的文字艺术效果，再输入文字就行了（如图2.10）。艺术字生成后可以修改，有艺术字浮动框（如图2.11）。可以进行艺术效果的重新选择，文字内容的重新输入，样式的调整等等。
[img]http://www.nease.net/xhelp/images/fp2002_2.11.jpg[/img]
图2.11

处理图片：

在已经创建的图片上点击左键，出现图片浮动框（如图2.12）。这里的所有图标按钮都可对图像进行操作处理，从左到右依次是：
[img]http://www.nease.net/xhelp/images/fp2002_2.12.jpg[/img]
图2.12

插入文件中的图片：插入新图像替代选中的图像。

文本：在图像上加入文字，这可是DREAMWEAVER很难做到的哦。不过它会帮你自动转换文件格式到gif。

自动缩略图：十分方便，轻轻一点就可创建缩略图。以前版本没有的功能。

绝对定位：锁定图片在网页中的位置。

上移、下移一层：类似于FIREWORKS中的排列，点击后，图像可以在网页中任意拖动确定位置，很好用的功能。

翻转：共上下左右四种。

对比度以及亮度的处理：这是DREAMWEAVER望尘莫及的。在加强了亮度以及对比度的图片上插入文字，这种安排一定可以大大提高访问量哦。

裁剪、线性、填充色、设置透明色、颜色、凹凸效果都用于修改图片的。

最后几个是添加热区，也就是图片上的超链接的。

可以看出，FrontPage对于图片的处理能力已经远在Dreamweaver之上了，只不过比起dw和fw的配合使用来说，还有一些距离。但它的简单快捷非常省事省力，适合初学者。接着我们在图像上点击右键，选择图像属性。这里常用的就是图像的环绕样式，以及一些其他设置（如图2.13）。
[img]http://www.nease.net/xhelp/images/fp2002_2.13.jpg[/img]
图2.13

处理动态图像：

§ 选择【插入】菜单栏中的【Web组件】选项，在出现的对话框中选择动态效果中的“横幅广告管理器”（就在上文说到的“字幕”下）。设置好广告图片的长和宽，选择一种合适的过渡效果，设置好时间后点击添加。在完成了所需广告图片的添加后，设置连接页面。最后点击确定，这样一个网页中的横幅广告就制作好了。（如图2.14）
[img]http://www.nease.net/xhelp/images/fp2002_2.14.jpg[/img]
图2.14

§ 选择【插入】菜单栏中的【Web组件】选项，在出现的对话框中选择动态效果中的“悬停按钮”。通过与上文相仿的简单设置就可以搞定一个动态按钮，简直可以和辛辛苦苦用FIREWORKS做出来的媲美呢。

§ 与文字相同的，图片也可以用动态HTML效果来处理。

[color=red]Q[/color]: [color=royalblue]FrontPage2002简明教程[/color](三)
[color=red]A[/color]:  ★原文转载自eniac版lzz7758258的《FrontPage2002简明教程(三)》★
   通常网页的布局使用到的是FrontPage 2002中的表格和框架菜单栏里的命令。

表格（TABLE）是将页面中的内容以表格的形式排列，常用于单一页面内图片与文字的安排，是最常用的布局命令。
[img]http://www.nease.net/xhelp/images/fp2002_3.1.jpg[/img]
图3.1

   框架（FRAMES）是在同一浏览器窗口中显示多个相互隔离的HTML页的结构。使用框架组织页面时，每个框架显示一个不同的独立页面或者图像，你可以将一些框架中的内容永远保留在浏览器窗口中，而其余窗口则发生改变。
[img]http://www.nease.net/xhelp/images/fp2002_3.2.jpg[/img]
图3.2

表格的使用十分简单，一般经过如下步骤：

§ 插入表格

§ 修改表格样式

§ 填充内容

一、轻轻松松插入表格

点击“表格”菜单中的“插入表格”，在弹出的对话框中可以对所需表格的行列数及边框属性进行设置。插入一个大概样子的表格，自己调整它在整个网页中的位置，为之后填充内容做好准备。
[img]http://www.nease.net/xhelp/images/fp2002_3.3.jpg[/img]
图3.3

二、对表格外观进行前所未有的美化

鼠标左击已经插入的表格，弹出的菜单中选择“表格属性”选项。弹出的对话框可以让你对表格的外观进行设置。基本上除了行列数这些需要使用插入行列等菜单完成的功能，在此设置的大都和表格的外观有关.
[img]http://www.nease.net/xhelp/images/fp2002_3.4.jpg[/img]
图3.4

FrontPage 2002的新功能：表格自动套用格式提供了快速和容易的方法，来创建具有专业外观的表格。用户可以选择他们想要使用的样式，可以自动更改表格的边框、底纹和颜色。使用新的填充表格，用户可以将一个单元格的内容快速地重复输入到该单元格右侧的单元格（向右填充），或输入其下面的单元格（向下填充）。当用户想要将相同内容复制到多个单元格中时，该功能将节约用户的时间。拆分表格让用户能够将任何位置的表格快速和容易地拆开。当用户想要在表格的各行之间添加文本或图形时，这会很方便。

§ 在 FrontPage 中编辑任何表格时，单击该表格，并从表格菜单中选择表格自动套用格式。从几个表格格式和设计中选择，以创建想要的外观。

§ 从表格菜单中单击插入，插入五个新行，然后选择行或列。在想要复制的内容下面，添加所需数量的行。选中想要复制的文本和想要填充的单元格。从表格菜单中选择表格填充，然后选择向下填充或向右填充，以匹配突出显示的单元格。

§ 在表格中间挑选一个单元格，然后从表格菜单中选择拆分表格。

三、简单填充完内容。

只需点击鼠标在表格中与插入的地方，就可以输入文字或者创建图像，或者导入文字图像等等，简简单单的操作之后，一张有条有理的网页就做好了。
[img]http://www.nease.net/xhelp/images/fp2002_3.5.jpg[/img]
图3.5

与以往的FrontPage一样，在FrontPage 2002中可以非常方便地利用框架来组织页面。

一般地，利用框架组织WEB页面需要经过如下步骤：

一．创建框架

二．设置框架属性

三．设定初始页面

四．确定框架间的调用关系

一、创建框架原来如此轻松！

在FrontPage 2002中，点击新建图标旁的小三角调出新建网页模板选择窗口，选择满意的模板创建框架Web页面。如果没有模板符合需要，你可以选择最接近的风格，然后改变框架大小或者增加框架以得到想要的结构。
[img]http://www.nease.net/xhelp/images/fp2002_3.6.jpg[/img]
图3.6

可以拖拉框架边改变框架大小；增加或删除框架则可以使用框架菜单中的拆分框架和删除框架命令。

在这里我们建立一个目录框架页面。

二、设置框架属性

点击页面右键菜单中的框架属性，在弹出的对话框中设置框架属性。你可以指定框架名称、控制框架之间边界的大小、在一个框架内是否允许滚动等。

在显示滚动条选项框中选择在该框架中是否允许存在滚动条。点击框架网页按钮进入该框架的页面属性设置窗口。在框架间距标签中设置框架之间的边界的宽窄，也可以取消显示边框的选项，不显示框架边框。记住，框架之间的边界越大，对于读者观看页面就越困难。
[img]http://www.nease.net/xhelp/images/fp2002_3.7.jpg[/img]
图3.7

一般地，我们把左、右两个框架名称定义为“contents”（目录）和“main”（主框架）。

三、设定初始页面

作为Web设计者，你要决定当第一次出现框架页面时，在每个框架内显示哪个页面即初始页面。只要框架的初始页面存在于你的Web中，这个页面就能够在每次显示框架时自动出现在框架中。

点击工作区域上的“设置初始页面”按钮，在对话窗口中设置初始页面。这时你可以选择点击原有文件中的浏览按钮查找需要的页面，或点击新建页面按钮直接在框架中新建一个页面。在这里我们新建一个页面。
[img]http://www.nease.net/xhelp/images/fp2002_3.8.jpg[/img]
图3.8

四、组织框架间的调用关系

在使用框架时一定会遇到如何处理框架间的调用关系的问题，即点击一个框架中的超链接后目的页面将会出现在哪一个框架内，或是新打开一个浏览器窗口。我们接着上面的例子来学习如何处理调用关系。

现在，我们需要在左边的页面中加入超链接，选中页面中任一蓝色按钮作为加入超链接的对象，这时我们希望所链接的页面在调入时出现在框架“main”中。你会发现在设置超链接窗口的右侧有一目标框架按钮，点击按钮将出现目标框架窗口，在这个窗口中你可以随意设定目的页面将出现在哪个框架中。你可以直接在“当前框架网页框”中选择左或右框架作为目的框架。你也可以选择“公共目标区框”中的选项来确定目标页面的出现形式：
[img]http://www.nease.net/xhelp/images/fp2002_3.9.jpg[/img]
图3.9

“默认网页（main）”：目标页面将出现在默认目的框架中，默认目的框架可以在框架的页面属性设置窗口中设置。如果不加以说明，系统将按照默认目的框架调用目标页面。

“当前相同网页”：目标页面将出现在同一框架中，也就是覆盖调用页面。

“整个网页”：目标页面将覆盖整个框架页面，独立地出现在浏览器窗口中。

“新窗口”：目标页面将出现在新打开的一个浏览器窗口中，而在原来的浏览器窗口中不发生任何变化。

在上面的例子中，我们将“Contents”框架中所有链接的目的框架都设为“main”框架。

好了，你已经能够在你的主页中利用框架来组织页面了！很简单，是吗？
[img]http://www.nease.net/xhelp/images/fp2002_3.10.jpg[/img]
图3.10


   新功能：FrontPage 2002现在支持由高级技术（例如 HTML 4）实现的功能，包括嵌入式框架、语言属性以及表单中的按钮和字段集。让这些特性帮助您做出更具动感和专业的Web站点

   从插入菜单中，选择嵌入式框架，然后选择“设置初始网页”并浏览到您的站点上或 Internet 上的任何 Web 页，（插入项的名称/地址应当出现在地址窗口中），然后单击确定。所选页将出现在 Web 页的框架中。通过选中它然后拖动角落，还可调整该框架大小。

[color=red]Q[/color]:[color=blue] FrontPage2002简明教程(四) [/color]
[color=red]A[/color]:原文转载自eniac版lzz7758258的《FrontPage2002简明教程(四)》★
FrontPage2002简明教程四：网页链接
网页的强大之处就在它的超链接，在浏览器中通过点击网页中的超链接，可以很方便地打开另外一个网页，或者是图片、文件、邮件地址。一个网页中的链接分成两个部分：链接的载体和链接的目标地址。

FrontPage 2002中添加连接的方法我们已经在上文有过阐述，这里着重介绍新的有关连接的内容。

链接的载体就是在网页中文字和图片，凡是包含链接的文字和图片都称为超链接。

操作　设置文字的超链接：打开网页文件，用鼠标反白选择要超链接的文字，然后按鼠标右键。在弹出菜单中选择超链接。弹出超链接设置窗口，然后在列表中选择要超连接网页文件，确定后，就可以看到超级链接已建立好了。注意，在网页编辑窗口，可以按住“Ctrl”键，点击超链接就可以打开超链接指向的网页。

操作　设置图片的超链接：鼠标右键点击要设置超链接的图片，在右键菜单中选择超链接属性，然后设置要链接的文件，也可以链接图片、E－Mail地址等。

操作　管理超链接：一个网站的超链接就像一张网一样，网住了网站的所有文件。在“视图”窗口中点击“超链接”，打开超链接的管理窗口，在这个窗口中，我们可以看到各个文件相互间的链接情况，文件中链接了哪些文件，又被哪些文件链接，可以在旁边的文件夹窗口中选择该文件，然后即可在链接示意窗口中查看了。也可以在超链接的示意窗口直接展开某个文件的上、下超链接。

操作　设置同一页面中的书签。选中文字或者图片，选择插入里的书签。输入书签名。然后在任何地方插入超链接，在选择属性框中的左侧的本文档中的内容按钮。然后选择欲指向的书签名即可。还可以进行其他设置。
[img]http://www.nease.net/xhelp/images/fp2002_4.1.jpg[/img]
图4.1

操作　在图片上添加热区。选中图片，在图片工具栏中选择插入热区按钮，可以插入矩形热区、圆形热区、多边形热区。方法和插入超链接类似，不过热区比起超链接，可以在同一图片完成多个连接，附图插入的是圆形热区。 （连载）
[img]http://www.nease.net/xhelp/images/fp2002_4.2.jpg[/img]
图4.2

[color=red]Q[/color]: [color=blue]FrontPage2002简明教程(五) [/color]
[color=red]A[/color]: :★原文转载自eniac版lzz7758258的《FrontPage2002简明教程(五)》★
FrontPage2002简明教程五：样式表的应用

一、三种添加CSS的方式  

在FrontPage 2002里可以通过三种方式给网页增加样式表。

1. 页面链接一个外部的样式表文件，这种方法可以使多个页面使用同一个样式表文件，方便保持页面的主题。步骤：启动FrontPage 2002，然后依次点“文件”、“新建”、“网页”，打开格式菜单栏里的样式选项。在样式设置窗口中，有FrontPage 2002自带的很多样式表供你参考和修改，在左侧选中欲进行样式调整的有关HTML内容，在右边点击新建，创建样式，然后运用。当然如果你对CSS熟悉的话，你也可以使用空白的样式表，自己重新创建一个，方法是在列表选项中选择用户自定义。
[img]http://www.nease.net/xhelp/images/fp2002_5.1.jpg[/img]
图5.1

2. 通过在FrontPage 2002中创建一个样式表单，此时样式表就是网页的一部分，直接位于HTML文档的之间。这个实际上不算创建，只要把已经创建好的样式表直接复制下来，然后选择网页编辑器的“html”选项，然后粘贴到HTML中〈HEAD〉之间就可以了。

3. 通过使用内含样式表元素，单独指定样式表。在FrontPage 2002编辑一个页面的时候，只要选中要发生变化的文字或图像等有关内容，然后点击右键，选择网页属性中的样式按钮就可以随时随地进行可视化操作了。
[img]http://www.nease.net/xhelp/images/fp2002_5.2.jpg[/img]
图5.2

二、内含式样式表的使用

下面就以修改美化一个搜索框为例，给大家介绍一下内含式样式表的使用。

现在就开始我们的美化之路。打开FrontPage 2002，新建页面。插入WEB组件中的搜索框。接下来就先对输入框进行处理。用鼠标左键选中那个最长的输入框，然后点击右键，选择表单域属性，出现文本框属性。

然后点击“样式”，接着选择格式中的边框按钮，出现边框与阴影对话框。

因为要保持表格的统一，我们在“设置”中选择“自定义”，然后选择“样式”中的“实线”。最重要的就是应用边框的设置。点击方框，四周出现的四个小按钮分别代表着文本输入框的四条边框。为了和文本输入框外面的表格统一，这里的宽度也选择为“1”，然后“确定”。

接着用鼠标左键选中搜索按钮，点鼠标右键，选择“超链接属性”就会出现窗口。

选择“样式”按钮，再选择编号方式，再选择“浏览”插入任何美观的搜索图片。

用鼠标左键选中页面中的搜索帮助四个字，然后再点击右键，选择“网页属性”，弹出Windows窗口。

选择“背景”选项，然后选中“启用超链接翻转效果”，然后点“翻转样式”弹出新的Windows窗口。
[img]http://www.nease.net/xhelp/images/fp2002_5.3.jpg[/img]
图5.3

在这里我们可以一目了然地设置要实现的翻转效果。为了突出“搜索帮助”四个字，我们把字体设置成12pt,这样当鼠标放上去的时候，字体就会从9pt变成12pt,从而让用户看得更清楚。接下来我们还可以根据自己的爱好来设置喜欢的颜色以及其他样式。通过内含式样式表的使用，我们很轻松地美化了搜索框。
[img]http://www.nease.net/xhelp/images/fp2002_5.4.jpg[/img]
 

[color=red]Q[/color]: [color=blue]FrontPage2002简明教程(六) [/color]
[color=red]A[/color]:★原文转载自eniac版lzz7758258的《FrontPage2002简明教程(六)》★

库：
用户可以快速和容易地创建图片库，以显示图片或图像。他们可以将图像添加到图片库中，从几个不同的可自定义布局中选择其一，为图像添加标题和说明，对图像重新排序、更改图像大小并切换布局。

§ 从插入菜单中选择图片，然后选择新建图片库。

§ 单击添加按钮将图片添加到库中，单击图片来自文件，从文件夹中选择图像并单击确定，然后为每个图像添加标题和说明。

§ 单击布局选项卡，确定图片库的布局。

关于图片库我们在上文中运用图像处理的时候已经讲到过

HTML在FrontPage中的应用：
虽然FrontPage已经给我们提供了很多面很强大的所见即所得的工具，但是随着HTML语言不断的进步，总有一些新内容新功能需要我们修改HTML代码来完成。而FrontPage中提供了这样的功能，让你的页面随时保持“新鲜”。

在插入WEB组件的选项窗口中，选择高级控件里的HTML，这里插入的HTML语言是不能用FRONTPAGE 2002进行修改的。

我们只需把HTML代码插入到HTML的弹出窗口中，即可完成HTML的添加。
[img]http://www.nease.net/xhelp/images/fp2002_7.1.jpg[/img]
图7.1

但是上面提到的功能只适合与在网页中的某位置插入HTML代码，如果我想在<head>等不能用鼠标在所见即所得的页面中选出的地方呢？

FrontPage 2002当然不会忘记这个好传统。在工作区的下方，如果你新建一个页面，你可以看到普通、HTML、预览三个选项。点击其中的HTML，你就可以任意的修改HTML代码，这里改起来肯定要比用记事本方便得多。

[img]http://www.nease.net/xhelp/images/fp2002_7.2.jpg[/img]
图7.2

下面介绍两个新效果，你可以试着添加到HTML中。

如何使你的主页自动被搜索引擎收录

你一定为了让你的网站名扬天下而去各个搜索引擎注册吧？在网上有很多机器人，它们自动搜寻关键字，我们只要在我们的网站上设立这样的关键字，就有可能被它们找到。

　　 <head><meta http-equiv="keywords" content="yancheng,science,technolodgy,information,network,politics,economic, charset=gb2312"></head>  


其中CONTENT这个属性主要让你放置一些你主页里的关键词，而且这些关键词最好容易使人想到。  

如何强制浏览器浏览信息时必须从服务器中读取

我们有时希望刷新时重新下载网页，而不是从缓存中读取旧的文件，为了解决这个问题，你可以在你的网页的<head>部分中加入以下HTML源代码就可以了：

　　　<META HTTP-EQUIV="Pragma" CONTENT="no-cache">

[color=red]Q[/color]:[color=blue] FrontPage2002简明教程(七) [/color]
[color=red]A[/color]:★原文转载自eniac版lzz7758258的《FrontPage2002简明教程(七)》★
FrontPage2002简明教程八：站点的管理

FrontPage 2002比起以前版本的FronPage，在站点管理方面改进良多，不仅适合个人用户，同时对于控制庞大网络的企业站点也游刃有余。除了视图栏中的文件夹、导航、超链接三个按钮对应的相关传统管理功能。新版FrontPage的改进和新增功能有：

FrontPage 2002 让用户能够完全控制他们的 Web 站点 — 从它的外观和行为到如何编辑和管理站点的内容。利用它复杂的站点管理和使用情况分析功能，这个最新版本的 FrontPage 重新定义了 Web 创作工具的边界。用户现在可以跟踪他们访问和使用站点的方式，并控制如何导入和编辑代码（这一点是以前无法实现的）。FrontPage 编辑环境已经变得更容易使用，使用户能够更容易访问所有站点管理和导航功能。新的发布功能不仅提供了更高的准确性和灵活性，而且极大地提高了发布速度。另外，FrontPage 现在使用户能够彻底地控制站点上什么资源可以访问和编辑，以及谁有这样的权利。

访问和分析数据以便更好地管理站点效力和性能

使用率分析报表可以帮助用户更好了解谁访问了他们的站点。该功能通过引用每天、每周或者每月报表中的 URL，让用户能够快速地了解哪些网页被点击最多，以及客户如何找到他们的站点。这些报表可以导出到 HTML 或者 Microsoft Excel 中，并可以进行筛选和做成图表以显示用户想要的准确信息。
[img]http://www.nease.net/xhelp/images/fp2002_8.1.jpg[/img]
图8.1

§ 从视图菜单中，选择报表，选择使用率，然后从下拉菜单中选择某个报表。

§ 如果报表中没有数据，则服务器上可能没有激活“使用率分析”。如果您有管理员权利，请从工具菜单中选择服务器，然后选择管理主页。向下滚动到配置使用率分析设置，然后单击更改使用率分析设置。

§ 如果在使用分析报表中没有任何数据，记住首先必须发布 Web 站点，然后才能让站点访问者注册统计结果。

使用FrontPage 增强报表，可以通过快速查找缓慢或未链接的文件或页面以及断开的超链接，来监视站点的性能。使用FrontPage 2002，还可以自动筛选报表，并将数据导出到 HTML 或 Microsoft Excel 中。

从视图菜单中，选择报表，然后从几个报表选项中选择一个这些报表可以筛选和导出到 HTML 页或 Excel 中。

准确控制 HTML 代码的外观和工作方式

Active Server Page (ASP) 源代码保留功能使用户能够编辑包含 ASP 代码的页面中的内容，而不会干扰 ASP 代码。现在，FrontPage 2002 总是在“普通”视图中打开 ASP 页面，不管ASP 代码是否违背了约定（例如多个 <head> 或 <body> 标记）。

如果计算机上有 .asp 页，可以打开该页（文件，打开，该页的 URL），然后可以看见它是在可以执行编辑的“普通”视图中打开的。

可选的重新设置 HTML 格式功能让用户能够告诉 FrontPage 他们的 HTML 页应当如何格式化 — 从在每个标记之前应当缩进多少到是否使用可选标记。FrontPage 中的新功能是能够取得已经被导入 Web 的页面，并按照用户的首选项重新格式化该页。

§ 设置 HTML 格式化首选项。从工具菜单中选择网页选项，然后单击HTML 源代码选项卡。在标记滚动框下面，选择 Body，然后将缩进更改为 12 个空格。单击颜色代码选项卡并将标记更改为紫色，然后单击确定。FrontPage 将把在 FrontPage 中创建的 HTML 页更改为使用这些格式规则。要更改在打开 HTML 保留的情况下导入站点的网页的 HTML 格式，请切换到HTML 视图。右键单击页面，并选择重新设置 HTML 格式。

准确和灵活地发布和保护 Web 站点。

增强发布对话框通过允许用户看见源站点上的网页及文件和目标站点上的网页及文件，“增强发布对话框”使发布更简单。该功能让用户能够拖、放或者删除在这两个位置的文件。

从文件菜单中，选择发布站点。键入[url]http://servername/directory[/url]（这里，servername 是发布的目标服务器名称，而 directory 是目标目录）。进入“发布站点”对话框时，单击显示>>按钮以显示要发布到的服务器的内容。可以单击文件并把它从源位置拖到目标站点，也可以单击“发布”将所有新的或者更改过的网页发布出去。
[img]http://www.nease.net/xhelp/images/fp2002_8.2.jpg[/img]
图8.2

单页发布可以帮助用户仅在需要时才发布他们想要的内容。用户可以在“文件夹”视图中右键单击文件，并把它直接发布到 Web 服务器中。

在 FrontPage 中打开某个站点，确保“文件夹列表”已打开（视图、文件夹列表）。在文件夹列表中右键单击任一页（或者使用 Ctrl 键 + 单击选中多个页），并选择发布选定文件。

新的更细致的权限让用户能够通过“基于角色”的安全模型授予或拒绝对个人和组的访问权。在 FrontPage 中，现在有更多的角色来让用户更好地控制谁可以访问他们站点上的内容。

从工具菜单，选择服务器，然后选择权限。如果站点正在使用 FrontPage 2000 服务器扩展，请在设置选项卡上，选择对此站点使用独有权限，然后执行对话框操作以自定义对该站点的权限。如果站点正在使用 Microsoft SharePoint Team Services 或者FrontPage 2002 服务器扩展，请在从工具菜单中选择服务器和权限之后，使用基于 Web 的管理页来管理或者添加用户，并添加或管理角色。

(完)

休息一下,马上就发Dreamweaver MX中文版教程~!

[color=red]Q[/color]: [color=blue]Dreamweaver MX中文版简介[/color]
[color=red]A[/color]: Macromedia公司推出的Dreamweaver MX中文版，不仅是专业人员制作网站的首选工具，而且普及到广大网页制作爱好者中，相对于其它网页制作工具和以前版本，有以下这些优势：

◇ 对简体中文良好的支持，不会出现一些不兼容中文的现象。例如，在早期的Dreamweaver4.0中，制作Flash按钮时会出现乱码。

◇ 使用Dreamweaver MX中文版，可以在可视化界面制作出ASP，ASP，NET，JSP，PHP， ColdFusion站点。

◇ Dreamweaver MX中文版自带大量模板，简化了用户的制作过程。

◇ Dreamweaver MX中文版支持数量众多的第三方插件，大大增强了Dreamweaver MX的功能。

◇ 通过配置 Dreamweaver MX 生成符合 XHTML 的代码，确保用最新的 HTML 设计标准及时更新站点。
[img]http://www.nease.net/xhelp/images/image001.jpg[/img]
如何获取Dreamweaver MX简体中文版

从Macromedia中文官方网站，可以下载到试用版的Dreamweaver MX。

Macromedia中文官方网站：[url]http://www.macromediachina.com/[/url]

也可以使用google搜索引擎：[url]http://www.google.com[/url]以Dreamweaver MX简体中文版+下载，作关键词搜索并下载些软件。

Dreamweaver MX十大新功能：

◇直观的新工作区

通过标记的文档窗口、可对接的面板组、可自定义的工具条和集成的文件浏览，节省宝贵的开发时间。
[img]http://www.nease.net/xhelp/images/image002.jpg[/img]
◇ 更加强大的模板

为开发人员设置尖端的规则，以便在不影响站点设计的情况下输入内容。嵌套的模板支持更为自定义的布局控制，而可编辑和可选的地区则允许开发人员更加灵活地输入内容。

◇  广泛的代码库

使用预置的代码库创建插入和更新表单、记录集导航页和用户认证页。通过用现场数据填充设计视图来测试布局。

◇ 新服务器技术支持

Dreamweaver MX 新增了对构建 ColdFusion MX、ASP.NET 和 PHP 网站的支持，以及对开发 ASP、JSP 和传统 ColdFusion 应用程序的支持。

◇ 帮助您起步的示例内容

利用专业质量的、预置的布局和代码，包括站点结构、表单、可访问的模板和 JavaScript 客户机方交互功能。运用能够即时为动态站点、静态站点或 ISP 托管的站点配置站点信息的站点设置向导，快速创建新站点。

◇ XML 和 Web 标准支持

    通过 XML 支持保持前沿领先优势，包括编辑、确认和导入纲要。轻易地自省ColdFusion、.NET 和 Java 中基于 XML 的 web 服务。通过 XHTML 输出的默认创建及标准 HTML 到 XHTML 的简单转换，确保标准一致性。

◇ 改进的级联样式表 2 (CSS2) 支持

使用 Dreamweaver MX 中改进的 CSS 渲染和设计工具，构建符合最新 CSS 标准的站点。Dreamweaver MX CSS 面板经过增强，可显示内外部定义的样式，并支持仅设计时间样式表。

◇ 高性能的新编码功能

利用高性能的编码功能（如代码提示、标记编辑器、可扩展的颜色编码、标记选择器、代码片段和代码确认，更快地编写自己的代码。

◇ 辅助功能

利用页面和站点的符合性检查功能、产品内含的参考内容及辅助功能有源创作模式，随时了解最新的美国法律和国际标准。

◇ 为 ColdFusion MX 开发而优化

ColdFusion 的初学者会发现站点向导、代码示例和参考材料很有帮助意义。而高级开发人员可以利用最新的 ColdFusion MX 功能，包括 ColdFusion 组件、web 服务以及集成的调试和跟踪。

[color=red]Q[/color]: [color=blue]Dreamweaver MX中文版建站流程[/color]
[color=red]A[/color]: 现在最流行的就是上网了，看到一个个精美的个人网站，是不是也有种冲动想自己来做网站？做网站可得做得好啊！Dreamweaver MX中文版的出现，使制作一个功能强大的网站，变得很容易，可以轻易的做出以前被认为很复杂的ASP，PHP网站。很重要的一点，它是中文版的，大家以后不会为看不懂英文头痛了J我知道大家的心情，很想快速学好制作网页，特别是一些想从事这个行业的人，学习网页制作时寄托了很高的期望，任何一个不明白的地方，都有可能被卡住。在接下来的教程中，将会给大家讲的尽量通俗易懂，一看就会。因为是中文版，有些简单的部分只会稍作介绍，容易出错和价值很高的部分，将作为重点。通过几个建站实例，一步一步的带大家掌握网页制作技术。我觉得做网站制作中，首先要了解的就是制作流程了。

　　整个网站的制作流程：在Photoshop或者Fireworks中作出效果图→切图→在Dreamweaver中添加文字，定义样式。

　　使用Dreamweaver也可以制作出整个网站，只是Dreamweaver本身不适合处理图片，需要Photoshop或者Fireworks的配合。下面是使用Dreamweaver制作静态站点的流程，动态站点流程将在以后介绍。

　　新建站点→站点文件命名→定义页面属性→插入表格→定义页面大小→转换到布局视图→添加内容→插入导航条→转换到标准视图工作→添加链接→使用代码片断→定义及应用CSS→添加动态交互→链接站点各个页面。

　　还有一些很重要的功能，是进阶必须掌握的技术。我认为下面的一些技术，是很重要的。

1　分析一个站点的方法

2　使用模板

3　使用框架

4　表格的应用技巧

5　使用插件

6　使用多页

7　在代码视图设计

8　实用的代码片断

9　层

10　时间轴

11　使用颜色

12　查找与替换功能

13　库

  以上是一个静态网站建设流程和需要掌握的技术。在后面的几篇文章中，将通过建立一个网站实例，具体介绍这些内容。

[color=red]Q: [/color] [color=blue]Dreamweaver MX中文版建站初步[/color]。
[color=red]A[/color]: 建立一个网站，首先要在本地机器上做好网站，再传到网上的虚拟空间上。现在免费的网页空间很少了，在[url]http://www.51.net[/url]还可以申请到可以使用几个月的免费空间，这对于学习网页制作已经够了。接下来主要介绍本地站点的建立，站点文件命名。  

简明步骤：在C盘新建一个文件夹→在Dreamweaver中定义站点→新建文件和文件夹→给文件和文件夹命名。

目标是做一个个人网站。打开“我的电脑”，打开C盘，点鼠标右键，选择新建。
[img]http://www.nease.net/xhelp/images/image003.jpg[/img]
选择文件夹选项
[img]http://www.nease.net/xhelp/images/image004.jpg[/img]
C盘下会出现一个新建文件夹图标
[img]http://www.nease.net/xhelp/images/image005.jpg[/img]
输入你想要的站点名称，这里输入media,其实可以任意输入名称的，要注意的是，尽量不要用中文命名，以免出现意想不到的麻烦！
[img]http://www.nease.net/xhelp/images/image006.jpg[/img]
现在开始在Dreamweaver MX中把media这个文件夹定义为站点。

打开Dreamweaver，在菜单栏上，点击站点菜单，选择新建站点
[img]http://www.nease.net/xhelp/images/image007.jpg[/img]
接下来需要给站点起一个名字，可以起任意一个名字。
[img]http://www.nease.net/xhelp/images/image008.jpg[/img]
这里起名为media,按下一步
[img]http://www.nease.net/xhelp/images/image009.jpg[/img]
按下一步按钮，选择是否使用服务器技术。因为实例建立的是一个静态站点，就选择“否，我不想使用服务器技术”。
[img]http://www.nease.net/xhelp/images/image010.jpg[/img]
按下一步按钮，因为要传到网上的虚拟主页空间，就要选择“编辑我的计算机上的本地副本，完成后再传到服务器上”。
[img]http://www.nease.net/xhelp/images/image011.jpg[/img]
按下一步，选择要定义的本地根文件夹
[img]http://www.nease.net/xhelp/images/image012.jpg[/img]
这里选择media文件夹
[img]http://www.nease.net/xhelp/images/image013.jpg[/img]
点“选择”按钮，因为没有使用远程服务器，就选择“无”。
[img]http://www.nease.net/xhelp/images/image014.jpg[/img]
按下一步
[img]http://www.nease.net/xhelp/images/image015.jpg[/img]
按完成按钮，一个站点就定义好了。
[img]http://www.nease.net/xhelp/images/image016.jpg[/img]

[color=red]Q[/color]: [color=blue]文件命名及修改默认扩展名[/color] 。
[color=red]A[/color]:站点定义好之后，就要开始新建网页文件和文件夹了，在站点中点击右键，选择新建文件。
[img]http://www.nease.net/xhelp/images/image017.jpg[/img]

给新建的文件输入名称

[img]http://www.nease.net/xhelp/images/image018.jpg[/img]

新建文件夹与新建文件类似，就不重复了。在文件命名和站点结构方面，养成良好的习惯很重要。

网站首页默认的文件名，取决于你申请的主页空间，一般是index.htm,index.html,default.htm等。同类型的文件，最好放在一个文件夹中，例如把图片文件，都放在image文件夹中。不要把所有文件都放在根目录下，把一个栏目的所有文件放在一个文件夹中，在链接网页和维护时，会很方便。文件和文件夹的命名，可以用栏目名称的拼音，也可以用栏目名称的英文，团队开发时，有统一的命名规则相当重要。例如个人简历这个栏目，命名的文件夹名称可以是jianli，如果命名成英文，可以是me。论坛这个栏目的命名，大家都是用bbs作文件夹名称。

应该有人发现了，怎么Dreamweaver MX默认扩展名是.htm，可我的空间默认扩展名是.html啊，难道要一个一个改扩展名？有办法的！修改Dreamweaver MX的一个配置文件，就可以把默认扩展名从.htm改到.html。

以windows2000操作系统，Dreamweaver MX默认安装路径为例，找到
[img]http://www.nease.net/xhelp/images/image019.gif[/img]
文件名（MMDocumentTypes.xml）这个文件，此文件位于：C:\Program Files\Macromedia\Dreamweaver MX\Configuration\DocumentTypes文件夹下。

双击MMDocumentTypes.xml，在Dreamweaver MX中打开

[img]http://www.nease.net/xhelp/images/image020.jpg[/img]

把第三行的html移动到"htm,html,shtml,shtm,stm,lasso,xhtml"这部分最前面的位置，就是改成"html,htm,shtml,shtm,stm,lasso,xhtml"。

[img]http://www.nease.net/xhelp/images/image021.jpg[/img]
保存文件。重新打开Dreamweaver MX，新建一个文件，默认扩展名变成.html了，其它扩展名修改方法类似。

[color=red]Q[/color]: [color=blue]页面属性的设置 [/color] 。
[color=red]A[/color]:双击media站点中的index.htm，打开一个空白的页面。我们将从这个空白页面开始制作，了解页面属性的设置和作用。

在工作区点鼠标右键，选择页面属性。
[img]http://www.nease.net/xhelp/images/image022.jpg[/img]

打开页面属性对话框

[img]http://www.nease.net/xhelp/images/image023.jpg[/img]

下面是我设置的一个页面属性

[img]http://www.nease.net/xhelp/images/image024.jpg[/img]

在标题上输入5dmedia，在背景，文本，链接，访问过的链接，活动链接几部分选取颜色。Dreamweaver MX有强大的颜色选取功能，将在下一篇中详细介绍。设置左边界，顶部边界，边界宽度，边界高度都为0，可以使页面中的表格与背景没有空隙。

[img]http://www.nease.net/xhelp/images/image025.jpg[/img]

如果不设置设置左边界，顶部边界，边界宽度，边界高度，就会与顶部和左边有明显的空隙

[img]http://www.nease.net/xhelp/images/image026.jpg[/img]

在中国大陆，使用的是简体中文（GB2312）编码。繁体网站，使用的是繁体中文（big5码）。

英文网站使用的是西欧语系（Latinl）。

   用得比较多的还有背景图像，选择一个已经做好的图像，就可以设置成页面的背景图像。

[color=red]Q[/color]: [color=blue]强大的颜色选取功能[/color]
[color=red]A[/color]: 网页设计中，颜色是最关键的，决定了一个网站在美工方面是否成功。Dreamweaver MX提供了强大的颜色选取功能。可以精确定义只要是网页设计中成立的颜色。

  现在流行的网页设计配色，采用黑、白、灰这些无彩色作基调，采用一种精确的有彩色作为主色调，大多使用一种颜色的渐变，让人感觉只有一种有彩色，颜色渐变是在Photoshop、Fireworks中处理的，不在本文讨论范围。在下面，主要针对相近颜色，无彩色和有彩色的精确选取三部分。

下面将以调整页面属性的颜色为实例，选择颜色选取框
[img]http://www.nease.net/xhelp/images/image027.jpg[/img]

打开颜色选取面板

[img]http://www.nease.net/xhelp/images/image028.jpg[/img]

◇ 精确选取有彩色：

如果要精确选取各种颜色，特别是各种有彩色，就要使用“系统颜色拾取器”


[img]http://www.nease.net/xhelp/images/image029.jpg[/img]

单击“系统颜色拾取器”，打开颜色面板

[img]http://www.nease.net/xhelp/images/image030.jpg[/img]

拖动最右边的滑块，调整高度。

[img]http://www.nease.net/xhelp/images/image031.jpg[/img]

◇ 选择连续色调，在网页设计时，常使用相近的颜色。点三角形按钮，选“连续色调”

[img]http://www.nease.net/xhelp/images/image032.jpg[/img]

◇ 无彩色的选取：选择“灰度级”，可以选取从白到黑各种无彩色。

[img]http://www.nease.net/xhelp/images/image033.jpg[/img]

不要选中“调整到网页安全色”，如果选中这一项，会减少可选择的颜色数。

[img]http://www.nease.net/xhelp/images/image034.jpg[/img]

[color=red]Q[/color]: [color=blue]用表格搭建页面[/color].
[color=red]A[/color]: 现在有好几种尺寸的显示器，“14、15、17、19”英寸，网页要在每个显示器上显示正常，就要设置恰当的参数，常用的是在页面中插入表格放内容，采用象素和百分比两种。

采用象素为单位，是以使用最多的显示器为参照的，现在数量最多的显示器是15英寸和17英寸的，所以页面使用象素为单位时，是以15英寸为标准，常用800×600的分辨率。                          

使用百分比，可以在各种显示器上有相同的效果，宽度设置为100％时，在各种显示器上全屏显示。下面分别介绍这两种方法。

简明步骤：打开一个页面→插入表格→设置表格宽度

在以前建立的media站点中，新建index.htm文件，双击打开。
[img]http://www.nease.net/xhelp/images/image035.jpg[/img]

点击插入表格图标

[img]http://www.nease.net/xhelp/images/image036.jpg[/img]

打开“插入表格”对话框，设置行数为1，列数为1，宽度选百分比，值为100，边框为0

[img]http://www.nease.net/xhelp/images/image037.jpg[/img]

在下面直接按确定

[img]http://www.nease.net/xhelp/images/image038.jpg[/img]

一个可以在各种显示器上全屏幕显示的网页就搭建好了。以后要做的是在表格里填充内容。

[img]http://www.nease.net/xhelp/images/image039.jpg[/img]

下面介绍象素大小的表格设置，选择像素为单位，值为768。可以在15英寸显示器上全屏幕显示，在17英寸显示器上也有好的显示效果。相对使用百分比制作网页，采用像素比较简单。

[img]http://www.nease.net/xhelp/images/image040.jpg[/img]

使用像素作单位时，可以用不同的值，下面是一些站点的宽度值：

5D多媒体[url]http://www.5dmedia.com/[/url]首页：宽760像素。

Microsoft 中文主页[url]http://www.microsoft.com/china/ms.htm[/url]：宽100％

Apple中国主页[url]http://www.apple.com.cn[/url]：宽680像素。

三星电子[url]http://www.isamsung.com.cn/[/url]：宽700像素。

联想[url]http://www.legend.com/[/url]：宽725像素。

以上这些站点的网页宽度，说明宽度没有一个固定值。

做一个在800×600分辨率下满屏幕显示的页面，可以大致选择一个近似的值：“宽768高430”，“宽776高430”等。

用像素为单位的表格，大多是把表格设置为居中对齐。选中表格，在属性面板选择对齐方式为居中对齐。

[img]http://www.nease.net/xhelp/images/image041.jpg[/img]

  完全下载一个表格的内容，才能在IE中显示出来。如果页面文件小，可以只有一个表格放内容。如果页面文件很大，可以在页面中，从上到下放几个宽度相同的表格，分别放不同的内容，这样就会一个一个显示表格里面的内容，不用等整个网页的内容下载完。下面是Apple中国主页的结构

[img]http://www.nease.net/xhelp/images/image042.jpg[/img]

[color=red]Q[/color]: [color=blue]版式设计[/color].
[color=red]A[/color]: 设计精美的网站，都是采用了优秀的版式设计。做一个网页，先要规划好版式。本篇主要介绍制作网页时的版式设计。

主要内容：

   几种常用的版式（分栏结构），LOGO（标志）尺寸，Banner（横幅）尺寸，导航栏类型，导航菜单位置，网页内容，版权声明。
[img]http://www.nease.net/xhelp/images/image043.jpg[/img]

  以上是一个主页的简单结构，由三个表格组成。第一个表格，二行一列，第一行放LOGO和Banner,第二行放导航菜单。

   中间一个表格，一行二列，里面再分别插入两个表格，左边表格放导航或者图片，右边表格放网页内容。典型的二分栏结构。

   下面一个表格，一行一列，放版权声明。

   几种国际尺寸的Banner：468×60(全尺寸Banner)，392×72（全尺寸带导航条Banner），234×60（半尺寸按钮）。

LOGO: 88×31

   实际中Banner和LOGO尺寸是根据设计需要选择大小，并不受标准的限制。常见的LOGO在页面的左上方，Banner在页面的右上方。也有相反的例子。例如三星电子[url]http://www.isamsung.com.cn/[/url] ，说明在设计时，并不受什么标准的限制。

   常见的分栏结构，还有三分栏，四分栏。下面是一个三分栏的结构：


[img]http://www.nease.net/xhelp/images/image044.jpg[/img]

最下面的表格，一行一列，放版权声明，联系方式。

   导航栏在网页的设计中，直接关系到使用网页的方便，和整个网页的美观也有很大关系。

   如果是以内容为主的网页，直接放入文字作为栏目，以键盘上的“|”分隔，一行一列的表格，如果栏目多，可以变成二行一列的表格。常见于门户网站，如[url]http://www.163.com[/url]

   如果内容很多，兼顾美观，推荐使用弹出式菜单，在Dreamweaver MX中文版中可以直接做出弹出式菜单，不象以前的版本那么复杂，将在以后的文章中介绍。

   如果是个人网站，内容较少，可以使用尺寸较大的图片作菜单，应用CSS滤镜后，可以有很好的效果。

   现在最流行的就是Flash导航菜单了，晃到一个按钮上时，有动画有声音，效果非常好。但是在没有装Flash播放器的电脑上，不能显示。

   现在国内使用较多的是使用按钮做导航。

   在Dreamweaver MX中文版提供了直接制作Flash按钮的功能，输入文字就可以做出中文的Flash按钮。

   导航栏有横排的、竖排的，也有两种都有的，横排的例如:V6艺术精英[url]http://www.v6dp.com[/url]这个站点页面采用的是百分比，在任何电脑上显示都是全屏幕的。

[img]http://www.nease.net/xhelp/images/image045.jpg[/img]

   坚排的如三星电子[url]http://www.isamsung.com.cn/[/url] 另外这个站点LOGO在右上角。

[img]http://www.nease.net/xhelp/images/image046.jpg[/img]

  横排坚排均有的：联想[url]http://www.legend.com[/url]联想的菜单栏还使用了弹出式菜单

[img]http://www.nease.net/xhelp/images/image047.jpg[/img]
网页的内容主要是文字和一些图片，为了方便阅读，两行文字之间的距离不宜太近。需要在CSS中设置行距，将在以后的文章中介绍。

[color=red]Q[/color]: [color=royalblue]选择适用的工作区 [/color]
[color=red]A[/color]: Dreamweaver MX 提供了两种可供选择的工作区布局：一种将全部元素置于一个窗口中的集成布局和一种非类似于 Dreamweaver 4 的浮动布局。第一次运行Dreamweaver MX需要选择一种工作区布局。
[img]http://www.nease.net/xhelp/images/image048.jpg[/img]

选择Dreamweaver MX工作区
[img]http://www.nease.net/xhelp/images/image049.jpg[/img]

两种布局的喜好因人而异，如果选择的是Dreamweaver MX工作区，想改成Dreamweaver 4工作区，可以使用“参数选择”对话框切换。
[img]http://www.nease.net/xhelp/images/image050.jpg[/img]

选择更改工作区
[img]http://www.nease.net/xhelp/images/image051.jpg[/img]

Dreamweaver MX 工作区是一个使用 MDI（多文档界面）的集成工作区，其中全部“文档”窗口和面板被集成在一个更大的应用程序窗口中，并将面板组停靠在右侧。建议大多数用户使用它。

HomeSite/代码编写者样式的 Dreamweaver MX 工作区是同样的集成工作区，但是将面板组停靠在左侧，布局类似于 Macromedia HomeSite 和 Macromedia ColdFusion Studio 所用的布局，而且“文档”窗口在默认情况下显示“代码”视图。建议 HomeSite 或 ColdFusion Studio 用户以及其他需要使用熟悉的工作区布局的手工编码人员使用这种布局。若要选择这种布局，请选择“Dreamweaver MX 工作区”选项，然后选择“HomeSite/代码编写者样式”选项。  

Dreamweaver 4 工作区是一种与 Dreamweaver 4 中所用布局相类似的工作区布局，其中每个文档都位于自己的独立浮动窗口中。面板组停靠在一起，但并不是停靠在一个更大的应用程序窗口中。仅建议喜欢使用更熟悉的工作区的 Dreamweaver 4 用户使用这种布局。

[img]http://www.nease.net/xhelp/images/image052.jpg[/img]

选择一种布局后，下一次启动Dreamweaver MX就可以生效。

如果因为改变面板位置，无法恢复原先的菜单或者面板位置，也可以采取切换工作区布局的方法恢复。从Dreamweaver MX 工作区切换到Dreamweaver 4 工作区，再从Dreamweaver 4 工作区切换到Dreamweaver MX 工作区，就可以恢复Dreamweaver MX 工作区布局。