论文部分内容阅读
美丽的圣诞节已经华丽地飘过，相信大家通过２００５年第２３期特别话题《这个圣诞夜，谁在为你歌唱》为心爱的ＭＭ送出了亲手打造的圣诞大餐，是否已见成效了呢。年底事情总是特别多，紧接着我们就将迎来中国人自己的传统节日—春节，既然是传统的节日，那么传统的互赠贺卡等祝福方式当然是必不可少的，可不要老想着ＭＭ哦，身边的亲朋好友，一个都不能少！
我相信在广大的读者群里，跟我一样生于七十、八十年代的人不在少数。大家是否还记得，在学生时代，每逢过年，我们都会翻空自己的荷包，将平时积攒的零花钱用于购买各种花花绿绿的贺年卡来赠送给班上的同学和老师，而喜欢自己动手同学更是精心制作出自己创意的贺卡来表达新年的祝福。如今我的百宝箱里还珍藏着儿时收到的一百多张贺卡呢，这不是一种巨大的幸福吗？
如今，科技的触角已经深入到我们生活的各个角落，传统的纸制贺卡已经渐渐淡出人们的视线，取而代之的是网上电子贺卡和手机短信等前卫的祝福方式。不过，科技除了给我们带来方便以外，其弊端也是显而易见的，君不见过年过节手机上收到的短信都是千篇一律，网上随处可见的吗？这种快餐式的祝福方式是不是越来越让你感到厌倦了呢？
ＤＩＹ！这是我们不变的主题，将情感和心血融入到一张张电子贺卡里，让朋友和恋人能触摸到我们的真情，在这个辞旧迎新的日子里，让我们自己动手，放飞我们的祝福。
或许你会问我，电子贺卡是不是就是那种会动的，有音乐的动画贺卡呢？没错，Ｆｌａｓｈ听说过吧，没听说过的话请回火星继续进修。这种电子贺卡就是利用Ｍａｃｒｏｍｅｄｉａ公司的产品Ｆｌａｓｈ制作出来的。利用动画的表现力固然强，但是学习难度也相当的大，没有好的手绘（鼠绘）功底，是很难做出漂亮的贺卡来的。况且，电子贺卡可不止这一种表现方式，利用同一家公司的另一产品Ｄｒｅａｍｗｅａｖｅｒ，我们可以制作出另一种形式的贺卡—网页贺卡，用它来拜年。
问：做网页难吗？
答：难！
问：啊？你这个骗子！
答：我是说做到完完全全的精通很难，可是做一张电子贺卡并不难。
问：那让我们开始吧。
１牛刀小试做贺卡
虽然我们相信能够通过短短几页文章，引领大家一起制作出像样的网页贺卡，但也需要提醒大家，Ｄｒｅａｍｗｅａｖｅｒ８可不像泡方便面那么简单的。为什么军队的战斗力如此强大？因为他们有明确的战略目标和详细的战术指引，而我们要用同样的方式来克服各个难点，直至赢得最后的胜利。
ｔｉｐｓ
网页制作的工具有很多，但是所见即所得的制作工具中以Ｍｉｃｒｏｓｏｆｔ的Ｆｒｏｎｔｐａｇｅ和Ｍａｃｒｏｍｅｄｉａ的Ｄｒｅａｍｗｅａｖｅｒ最为著名。何谓所见即所得？顾名思义，就是你在工具的编辑窗口所见到的画面就是在浏览器里显示出的画面，这样一来，我们不需要掌握专业的ＨＴＭＬ源代码知识就可以做出漂亮的网页。
在Ｄｒｅａｍｗｅａｖｅｒ诞生以前，Ｆｒｏｎｔｐａｇｅ可谓是最好的所见即所得网页制作工具，微软公司依靠此软件垄断着网页制作工具市场，但随着Ｄｒｅａｍｗｅａｖｅｒ的横空出世，Ｆｒｏｎｔｐａｇｅ渐渐开始走下坡路。Ｄｒｅａｍｗｅａｖｅｒ凭着强大的技术支撑，完善的站点管理功能和不断开拓进取的精神，已经成为业界的ＮＯ．１。在２００５年年末新发布的Ｄｒｅａｍｗｅａｖｅｒ８简体中文版中，我们欣喜地看到这款专业级的网页制作工具又增添了许多新功能，这些改进无论对开始使用ＸＨＴＭＬ，ＸＭＬ制作网页的高级使用者还是刚刚入门的新手来说都是让人欢呼雀跃的。
建立根据地—网页的结构规划
战略目标：建立根据地
战略意义：通过熟悉页面构成的基本要素，了解自己应该怎么规划页面
战术讲解：根据地是一场战斗的基础，没有根据地就无法开始战斗，胜与负就更无从说起。这就像要做好一张网页，首先要知道一张网页是如何运行的，网页的根本是什么？是框架，是借助表格功能来搭建的框架！在网上打开任意一张网页，我们会发现组成网页的无非就是文字、图片、ｆｌａｓｈ等元素。这些元素又是如何被排列、规划成一块一块而不是杂乱无章地随意摆放的呢？这就要归功于表格的作用了，想制作一张像模像样的网页，学会表格的排列和嵌套则是基础中的基础。
ｔｉｐｓ
一张制作好的网页，实际上是由一行行的ＨＴＭＬ代码组成，在没有所见即所得编辑工具以前，网页制作者都是通过古老的记事本，或者专业的ＨｏｔＤｏｇ、ＨｏｍｅＳｉｔｅ等工具手工编写代码。然后通过ＩＥ等浏览器进行代码的解释，才能直观地将网页呈现在用户面前。对于初学者这显然是不可想象的，如今我们有了Ｄｒｅａｍｗｅａｖｅｒ，通过几个简单的鼠标动作就可以制作出自己的网页，而不需要学习专业的ＨＴＭＬ代码编写。
开始战斗：我们可以将一张网页想像成一座大厦，即将要写入的文字就是这座大厦里工作的人，插入的图片和动画就是办公所使用的家具和其他设施。等等，难道你就这样一股脑地把人和家具都扔进去？Ａ公司和Ｂ公司挤在一起上班？有人顶着椅子用电脑，有人踩在别人头上开会？ＮＯ！ＩＱ正常的人都知道，我们应该将大厦分成很多层，然后每层分成很多房间，Ａ公司在一层Ｂ公司二层，洗手间在左边办公室在右边，而实现这种元素分隔功能的就是表格了。有了这种抽象的概念以后，让我们回到这张空白的页面上来，开始战斗吧！
ＳＴＥＰ１
创建新页面
打开ＤＷ８，哇，这个界面看上去好复杂，不要被吓倒了哦，接下来的所有战斗都将在这个复杂地形上展开。首先要做的是新建一张页面，看到画面中央的项目列表了吗？点击“创建新项目”下的“ＨＴＭＬ”（图１）创建一张新网页，然后可以通过点击设计或代码窗口上方的三个按钮来切换显示模式，具体效果大家可以自己尝试一下（图２）。
点击图２中的“设计”按钮，整个编辑界面就像一张白纸一样呈现在面前，而下方的“属性”窗口中也显示出了许多输入框、按钮和下拉菜单。在这张“白纸”上插入任何一个元素，我们都可以在属性面板中对其进行控制，比如大小、颜色等等，各种属性使用后的效果，留待有心人自行钻研吧。
注：在第一次启动的时候，工具会询问你使用何种工作区布局（图３）
ＳＴＥＰ２
创建表格
选择菜单栏中的“插入→表格”（ＣＴＲＬ＋ＡＬＴ＋Ｔ），在弹出的窗口中设置好行数和列数（以后可随时利用属性面板中的相应选项进行调整），例如３行１列，表格宽度选择１００百分比，边框粗细、单元格间距设置为０，边距为５，然后确定（图４）。
ＳＴＥＰ３
添加文字
此时画面中便出现了一个３行１列的表格，也就是将这座大厦分为了三层，在这三层里，我们要分别放置不同的内容进去。
将焦点放在第一行的表格中，然后选择菜单栏中的“修改→表格→拆分单元格”，将本行表格拆分成３列，就像是一层楼被划分出三个房间一样，在中间的房间里写下主题，例如“新年快乐！”，然后将属性面板中的“水平”下拉菜单设置为“居中对齐”，框选输入的文字，设置大小为３６像素，颜色为红色，并点中面板中的字母“Ｂ”将字体加粗（图５）。剩下的两个房间暂且按下不表，以后会用到。
在第二行的表格中写下我们的祝福。但是就这么放点个头小小的而且黑黑的字进去是不是显得一点技术含量也没有？那么可以在ＤＷ里对这些字进行单独的字体、大小和颜色设置吗？或许再来点特殊的格式，就像在Ｗｏｒｄ里一样轻松排版？当然，不过这些功能只是可以实现而已，并非真的像在Ｗｏｒｄ里一样简单，它们涉及到更高级的ＣＳＳ层叠样式表的应用。怎么办？ｅａｓｙ！我们就先在Ｗｏｒｄ里把祝福写下，然后调整好包括字体、颜色、大小等一切的一切，全部框选以后拷贝，转到刚才的第二行表格，点击右键选择“选择性粘贴”，在弹出的面板中选择第四项“带结构的文本以及全部格式”（图６），ｙｅａｈ！在Ｗｏｒｄ中设置好的一切都原封不动地搬过来了，怎一个爽字了得！当然，这可是ＤＷ８的新功能哦，老版本的用户就没有这种待遇可以享受了，ＤＷ８带给我们的好处还不止这些呢，咱们走着瞧。
最后，别忘了在第三行里写下自己的大名和ＱＱ等信息，设置好字体的相应属性，拜年网页的基本框架就算搭建完成了。有了根据地，接下来下来考虑的是添砖加瓦，构建工事。
经验与技巧
经验：以“带结构的文本以及全部格式”粘贴Ｗｏｒｄ文字的时候虽然可以将格式完全照搬过来，但是同样也会带来大量垃圾代码，所以请尽量使用ＣＳＳ来进行文字排版和设置。
技巧：假如我们欲将一个表格拆分成３行，结果不小心只拆分成了２行，这时只需要将鼠标焦点至于最后一行上然后按下ＴＡＢ键，ＤＷ就会自动在本行下生成一行新单元格，对于多行多列的表格同样有效；如果不小心多拆分出一个单元格，要对其进行删除，那么只需要按住ＣＴＲＬ键点击此单元格，它的周围会显示一圈黑色的实线以表示该格被选中，然后按下键盘上的ＤＥＬＥＴＥ键就可以啦。
构建工事—页面元素的加入
战略目标：构建工事
战略意义：为页面添加各种图片元素，提升视觉效果
战术讲解：如果将前面部分所设计好的页面保存，然后就这样发送出去，恐怕也太简陋了，我们诚心的一片祝福受过于简陋的页面所累，反倒让收到祝福的亲朋好友看不出丝毫诚意。要知道，在战场上有了防御工事，我们的战士进可攻退可守，战术变得更加灵活多样。同样，在祝福的页面中，有了图片甚至Ｆｌａｓｈ的加入，简单的页面也会变得更丰富，更有视觉冲击力。通过各种“花花草草”的点缀，枯燥的文字有了陪衬，效果可就大不一样了。
开始战斗：未经修饰的单调文字页面非常枯燥，就像是随手找张纸在上面写了几个字一样，一份连基本的包装都没有的礼物难于受到对方的欢迎。想要包装，最好的做法就是增加插图和动画，下面我们就来学习一下如何为这张网页增强视觉效果。
ＳＴＥＰ１
准备图片
利用Ｐｈｏｔｏｓｈｏｐ等图像制作工具做出能表达思想的图片，或者从网上的图库里下载一些现成的ｊｐｇ图片或ｇｉｆ动画图片，将其保存到本机，注意，请确保与我们正在制作的这张页面处于同一文件夹下。
ＳＴＥＰ２
插入主体图片
回到ＤＷ８的设计页面，在画面中欲插入图片的地方点击一下以确定位置，然后选择菜单栏中的“插入→图像”，选择本机上准备好的图片然后确定就可以了。如果觉得图片默认位置不合适，我们还可以右击这张图片并选择“对齐”中的相应属性，例如“左对齐”，这样一来图片就会被文字所包围，看上去不再那么唐突了。
选择好插入图片后会弹出一个窗口要求你输入一些信息，我们只需要在“标题”处输入这张图片的标题就行了，例如“新年快乐”，其作用为在图片无法显示的情况下显示这个文字标题，让浏览者知道这张图片的主题（图７）。
ＳＴＥＰ３
插入修饰性图片
还记得刚才在创建表格的时候剩下两个房间还没有用到吗，现在我们可以在这里面分别插入相应的图片以起到修饰作用（图８）。每个单元格之间的虚线是可以拖动的哦，需要的时候可以很方便地调整单元格大小。（要是家里的房子也能这么简单地调整大小就好了……）。
ＳＴＥＰ４
准备动画
如果你觉得这样图文并茂还不够丰富多彩，想插入一些Ｆｌａｓｈ动画让整个画面活起来，ｖｅｒｙｅａｓｙ！去网上最著名的两个Ｆｌａｓｈ站点“闪客帝国”（ｗｗｗ．ｆｌａｓｈｅｍｐｉｒｅ．ｃｏｍ）和“闪吧”（ｗｗｗ．ｆｌａｓｈ８．ｎｅｔ）下载自己喜欢的Ｆｌａｓｈ动画，同样放到网页的同级目录下。
ＳＴＥＰ５
插入动画
切换到ＤＷ８，选择菜单栏中的“插入→媒体→Ｆｌａｓｈ”，选择你准备好的ｆｌａｓｈ文件就ＯＫ了，就这么简单。
经验与技巧
经验：将图片左对齐以后文字会紧紧地环绕在图片周围，如果点中图片将属性面板中的“垂直边距”和“水平边距”都设置一个合适的数值，比如５，那么图片与文字周围便会出现５个像素的空白间距，看上去舒服多了。
技巧：如果插入的图片数量较多，用文中的方法也太折磨人了，其实所有这些基本功能都有快捷键，插入图片的快捷键就是ＣＴＲＬ＋ＡＬＴ＋Ｉ，是不是效率高得多了？
ｔｉｐｓ
为何在刚才战斗过程中，第一步会强调要把图片放在同一个目录下？这是因为存在一个绝对路径和相对路径的问题。对于新手而言，这两个概念很容易弄错。做个比喻，绝对路径就像是详细的门牌号，比如我们的网页文件在二单元七层Ｂ户，需要的图片存放在二单元七层Ａ户。那么当我们把页面和图片从我们的电脑传送到互联网上时，就像是搬到另外一栋楼，这个门牌号其实已经失效。所以在页面中“二单元七层Ａ户”的描述已经找不到图片了。相对路径是什么呢？还是假设我们制作的页面存放在二单元七层Ｂ户，图片存放在Ａ户，我们在页面中的表述是，图片在“隔壁”。那么不管我们怎么搬家，只要保证图片和页面是邻居，那就不用担心找不到图片了。
我们做个实验，首先在Ｃ盘下新建一个名为Ｔｅｍｐ的文件夹，将页面保存到此文件夹中，然后将图片存放在硬盘上的任意位置，接下来用图片插入功能插入这张图片，我们会看到对话框下方的“ＵＲＬ”显示的是以“ｆｉｌｅ：／／／盘符｜”开头的文件路径（图９），表示此路径指向的是本机某盘符下的某文件夹下的某文件，也就是固定的门牌号“二单元七层Ａ户”。假如我们将这张网页和图片上传到互联网上的免费空间中，这张照片将不会被显示出来，因为网页会从服务器上的相应盘符位置下去寻找这张图片，也就是说搬到另外一栋楼了，却还在按照“二单元七层Ａ户”的地址来寻找图片，当然找不到了。所以，我们应该注意避免出现这种绝对路径。如果我们将图片放入网页的同级目录，那么“ＵＲＬ”则会直接显示图片文件名（图１０），如果放到网页存放的文件夹的上一级目录，则会显示“．．／文件名”，就像是“邻居”的描述一样。这样网页会以当前位置相对应的路径去寻找图片，只要不改变图片和网页相互之间的关系（让它们保持邻居关系），传到任何地方都可以很正常地将图片显示出来。
弹药准备—打造活力四射的页面
战略目标：弹药准备
战略意义：利用ＧＩＦ动画和Ｊａｖａｓｃｒｉｐｔ制作出种种特调，让页面活力四射
战术讲解：经过了前两步，我们已经建立起了根据地，并且构建好了防御工事。仔细看看我们的作品，嗯，画面丰富多了，可是怎么总觉得还缺少一些节日的气氛呢？感觉像是在大型的防御工事里面用小米加步枪作战，这仗打起来可不够痛快，我们更需要一些猛火力。怎么加强火力？我们一步一步来！
开始战斗：这里所说的猛火力有两种方式，一是现成的动画作为背景烘托氛围，一是通过Ｊａｖａｓｃｒｉｐｔ脚本程序来进行交互，总之就是想让我们的拜年网页动起来，更具活力，更酷更炫！
火力一：闪烁星空
第一步：制作或下载合适的具有节日气氛的ｇｉｆ动画图片，比如一个在夜空中闪闪发光的星星
第二步：点击我们正在制作的网页的任何空白地方（注意不要点到图片，动画这类元素），然后再点击下方属性面板中的“页面属性按钮”，在弹出的窗口中我们可以对整张页面进行总体设置，例如点击“背景图像”后面的“浏览”按钮，选择我们准备好的背景图片，便可以将这张图片平铺为这张页面的背景了（图１１）。
预览一下，ｗｏｗ，一个闪烁的星星变成了一片星空，一闪一闪眨眼睛，我们的心都不由自主地跟着星星跳动起来了，你开始兴奋了吗（图１２）？这还不算完呢，下面我们再用更高级的Ｊａｖａｓｃｒｉｐｔ来增加更多的特效。
火力二：归去来兮
Ｊａｖａｓｃｒｉｐｔ（以下简称ＪＳ）是一种可以在页面上实现种种特效的脚本程序，它的工作原理我们不用去深究，也不需要去手工编写这写脚本语言，在ＤＷ８的世界里，只要动动鼠标，一切皆有可能。相信大家在网上都看到过一种效果，就是一张图片在画面上飘来飘去，这就是利用ＪＳ制作出来的网页特效，如果我们在这张拜年页面上挂上一个红灯笼，在空中飘荡，不是更能衬托出节日的气氛吗？
像闹鬼？
Ｂ４封建迷信！
ＳＴＥＰ１
点击菜单栏中的“插入→布局对象→层”，设计视图上会出现一个有边框的格子，按住格子左上角的移动标志可以任意拖动其位置。然后将光标焦点置于该层中，插入一张准备到处飘动的图片（图１３）
ＳＴＥＰ２
点击移动标志选中此层，并在按下右键出现的菜单中选择“添加到时间轴”。
ＳＴＥＰ３
在下方的时间轴面板会出现两个小圆，第一个表示图片开始飘动的起始位置，第二个就是结束位置了，我们可以点击第二个小圆，然后在设计视图上拖动这个层到任意位置，然后将面板中的“自动播放”和“循环”勾上。保存以后预览看看，这张图片是不是动起来了？如果觉得速度太快可以将面板中的“Ｆｐｓ”数值降低，要实现更复杂的轨迹运动只需重复第二、三步（图１４）。
这样，一个图片飘动效果就完成了，ＤＷ８会自动在页面源代码中添加ＪＳ脚本，就不需要我们去关心了，真是太方便了。
火力三：源源不断
ＤＷ８中本身就内置了一些ＪＳ特效，我们可以通过ＳＨＩＦＴ＋Ｆ４来打开这个面板，点击面板中的“＋”号，在弹出的菜单里选择自己中意的效果（图１５）。如果这些无法满足你，那么可以到例如ｈｔｔｐ：／／ｗｗｗ．ｂａｒｏｎ．ｃｏｍ．ｃｎ／ｊａｖａｓｃｒｉｐｔ／ｉｎｄｅｘ．ａｓｐ，ｈｔｔｐ：／／ｔｅｃｈ．ｓｉｎａ．ｃｏｍ．ｃｎ／ｉｎｔｒｏｄｕｃｔｉｏｎ／ｆｏｃｕｓ／ｊａｖａｓｃｒｉｐｔ．ｓｈｔｍｌ这样的站点上去寻找自己喜欢的效果，并按照说明添加到网页源代码的相应部分。ＤＷ８中可以通过点击图３里显示的“代码”按钮切换到编码器视图，从而进行源代码的编辑。
至此，我们耗费“巨大心血”制作而成的第一张拜年网页终于光荣诞生了，把它上传到网上或是打包分发给自己的亲戚朋友吧，让大家一起分享你的祝福和快乐！不过，现在我们仅仅是做好了战斗前的种种准备，真正的战斗马上就要打响，ＬＥＴ＇ＳＧＯ！
经验与技巧
经验：在页面设置中，一般将字体设置为９ＰＴ的宋体，其显示效果是最好的，其他有特殊要求的可在ＣＳＳ中单独设置。
技巧：在最外层表格以外的空白处右击鼠标选择“页面属性”也可对正张页面进行宏样式的设置。预览页面只需要按下Ｆ１２键，ＤＷ８会自己调用你设置好的主浏览器来预览页面。
２精致祝福全面打造
前面我们说到了，诚意的祝福是不能千篇一律的，想要给亲朋好友送上最特别的祝福，那就得是专门为他定制，可是有那么多朋友总不能为每一个人都制作一个页面吧？赫赫，我们只要充分利用页面的交互功能，就可以在一个页面的基础上为无数好友送出不同的祝福，怎么样，神奇吧？
火力试探—初涉页面交互功能
战略目标：火力试探
战略意义：进一步掌握网页交互功能，并开始灵活运用
战术讲解：通过刚才的火力试探，我们对于交互页面的代码运用有了一定的认识和了解，接下来就要开始进一步利用交互页面的代码，通过各种途径对页面进行丰富，把代码的作用真正发挥出来。当然，随后这个例子，确实有点“忽悠”人：）
战斗开始：对于大多数读者而言，从头到尾编写代码是非常困难而且没有必要的，记住，他山之石可以攻玉。
ＳＴＥＰ１
搭建表格
新建一张ＨＴＭＬ网页，然后插入一个宽为７６０像素的２行１列表格，其他设置与上例一样。在表格右或下边缘上轻点鼠标左键以选中此表格，然后在下方的属性面板的“对齐”属性中选择“居中对齐”（图１６）。此设置的作用为将表格绝对定位于浏览器ｘ轴的中间，使页面更具观赏性。
ＳＴＥＰ２
插入表单核表单对象
将光标焦点置于第二行表格中，选择菜单栏中的“插入－表单－文本域”，确定了第一个弹出窗口以后，第二个窗口为询问你是否添加表单标签，按“是”确定。然后在这个文本框后面继续“插入→表单→按钮”。这时我们会看到表格周围多出了一圈红色的虚线，表示此区域为表单区域，用于提交预定数据（图１７）。
ＳＴＥＰ３
编辑源代码
这里，我们将第一次真正地接触到网页的核心，ＨＴＭＬ源代码，所有页面上的元素其实都是用一个一个的标签表示的，对于有一些英文基础的朋友们来说，要理解这些标签的含义并不困难，不过ＨＴＭＬ有一套自己的语法规则，胡乱修改也是不行的哦。
切换到编码器视图，不要被一大堆字母镇住了，我们仅仅修改其中的一小部分。
首先映入眼帘的就是那些黄色的字母了，这是ＤＷ８的代码高亮功能，会自动将特定的标签用不同颜色显示，方便查找和修改。找到以＜ｆｏｒｍｉｄ＝＂ｆｏｒｍ１＂开头的地方，将后面的ｍｅｔｈｏｄ＝＂ｐｏｓｔ＂改为ｍｅｔｈｏｄ＝＂ｇｅｔ＂，在ａｃｔｉｏｎ＝＂＂的两个引号中添加当前页面的文件名，例如将本页面保存为ｄｅｍｏ２．ｈｔｍｌ，那么这里就要相应更改为ａｃｔｉｏｎ＝＂ｄｅｍｏ２．ｈｔｍｌ＂。除了这里需要注意，其他地方就没什么大问题了，按照下面我给出的源代码细心修改吧：
＜ｆｏｒｍｉｄ＝＂ｆｏｒｍ１＂ｎａｍｅ＝＂ｆｏｒｍ１＂ｍｅｔｈｏｄ＝＂ｇｅｔ＂ａｃｔｉｏｎ＝＂ｄｅｍｏ２．ｈｔｍｌ＂ｏｎｓｕｂｍｉｔ＝＂ｔｈｉｓ．ｅｌｅｍｅｎｔｓ［＇ｎｉｃｋｎａｍｅ＇］．ｖａｌｕｅ＝ｅｓｃａｐｅ（ｔｈｉｓ．ｅｌｅｍｅｎｔｓ［＇ｎｉｃｋｎａｍｅ＇］．ｖａｌｕｅ）；ｒｅｔｕｒｎｔｒｕｅ；＂＞
＜ｌａｂｅｌ＞请输入你的名字：
＜ｉｎｐｕｔｔｙｐｅ＝＂ｔｅｘｔ＂ｎａｍｅ＝＂ｎｉｃｋｎａｍｅ＂ｉｄ＝＂ｎｉｃｋｎａｍｅ＂／＞
＜／ｌａｂｅｌ＞
＜ｌａｂｅｌ＞
＜ｉｎｐｕｔｔｙｐｅ＝＂ｓｕｂｍｉｔ＂ｎａｍｅ＝＂＂ｖａｌｕｅ＝＂提交＂／＞
＜／ｌａｂｅｌ＞
＜／ｆｏｒｍ＞
接下来，找到代码中出现的第一个＜ｔｄ＞标签，将中间的＆ｎｂｓｐ；替换为＜ｓｐａｎ＞＜／ｓｐａｎ＞，然后在后面写下想说的话，例如将整行替换为＜ｔｄ＞＜ｓｐａｎ＞＜／ｓｐａｎ＞，祝你新年快乐＜／ｔｄ＞。
最后，找到＜ｂｏｄｙ＞，将其替换为＜ｂｏｄｙｏｎｌｏａｄ＝＂ｒｅｔｕｒｎｏｎ＿ｌｏａｄ（）；＂＞。
ＳＴＥＰ４
添加ＪＳ代码
找到＜／ｈｅａｄ＞标签，在前面添加如下一段代码：
＜ｓｃｒｉｐｔｌａｎｇｕａｇｅ＝＂ｊａｖａｓｃｒｉｐｔ＂ｔｙｐｅ＝＂ｔｅｘｔ／ｊａｖａｓｃｒｉｐｔ＂＞
ｆｕｎｃｔｉｏｎｏｎ＿ｌｏａｄ（）｛
ｖａｒｅｌｓ＝ｄｏｃｕｍｅｎｔ．ｇｅｔＥｌｅｍｅｎｔｓＢｙＴａｇＮａｍｅ（＂ｓｐａｎ＂）；
ｖａｒａｒｇ＝ｄｏｃｕｍｅｎｔ．ｌｏｃａｔｉｏｎ．ｓｅａｒｃｈ；
ｖａｒｔｘｔ＝ｕｎｅｓｃａｐｅ（ｕｎｅｓｃａｐｅ（ａｒｇ．ｓｕｂｓｔｒ（１０）））；
ｆｏｒ（ｉ＝０；ｉ＜ｅｌｓ．ｌｅｎｇｔｈ；ｉ＋＋）｛
ｅｌｓ［ｉ］．ｉｎｎｅｒＴｅｘｔ＝ｔｘｔ；
｝
ｒｅｔｕｒｎｔｒｕｅ；
｝
＜／ｓｃｒｉｐｔ＞
现在用ＩＥ打开这张页面，在输入框里随便输入一个人的名字，然后提交，哈哈，是不是已经欣喜若狂了呢！好了，既然火力试探已经初见成效，我们可以开始下一步的行动了。
ｔｉｐｓ
使用老版本ＤＷ的朋友们请自行将ｉｄ＝＂ｎｉｃｋｎａｍｅ＂，ｖａｌｕｅ＝＂提交＂这两个属性后的“／”去掉，因为ＤＷ８增强了对Ｗｅｂ标准页面制作功能的支持，新建文档默认采用ＸＨＴＭＬ１．０格式（该标准规定任何没有关闭的标签最后必须以“／”结尾以表示此标签的关闭），而不是以往版本的ＨＴＭＬ４．０１，这些技术上的问题，有兴趣的同学可以自行上网翻阅相关资料。此注意事项以后不再重复。
经验与技巧
经验：在８００ｘ６００解析度下，ＩＥ浏览器窗口航向宽度为７７８像素，ＷｉｎｄｏｗｓＸＰ中使用不同的主题会造成这个数字的细微变动，将最外层表格设置为宽７６０像素并置中，那么无论在８００还是１０２４解析度下整个画面都会处于ｘ轴的中间位置并不会出现横向滚动条。当然７６０只是一个建议值，无论多少，以不出现横向滚动条为原则。
技巧：尽量使用“拆分模式”编辑源代码，在下方的设计视图中框选某个元素，上方的代码视图则会相应的选择这个元素的相关代码，方便定位和修改。
全面进攻—完美交互功能的拜年网页制作
战略目标：全面进攻
战略意义：尝试页面交互功能，初步学习代码的使用
战术讲解：战斗开始，可我们不能一上来就猛烈攻击，因为还没有试探敌方的虚实，贸然行动可能会导致失败，活力试探是必不可少的。就像是我们即将开始的交互页面制作，这里涉及到了一些代码，毕竟我们可都不是编程高手，所以对于交互页面的制作，一定要循序渐进。好了，开始我们的活力试探吧！
开始战斗：新年送出的祝福话语里出现频率最高的是哪句话？“恭喜发财”！人人都怀揣着一个发财梦，今天我们就将这个梦送给朋友们，让他们好好乐一乐。
首先我们在脑袋里大概想象一下最终效果：在这张页面里不但要有基本的装饰，最好是伪装成一个简单的新闻页面以增加娱乐效果，我们可以将大表格分成２列，右边列中放一个“财富排行榜”，左边列分成３层，第一层里放一个大大的标题，在第二层里放入正文内容，第三层里放入“相关新闻”，嗯，就这么干！
１．拆分表格
ＳＴＥＰ１
我们刚刚做好的页面只有两层，如何将其拆分为想象中的布局呢？首先将光标焦点置于第一层上，然后轻击鼠标右键，选择“表格－拆分单元格”，设置为拆分成２行，这样第一层的表格就被轻松地拆分为两行了。
ＳＴＥＰ２
现在要做的是右边增加１列。轻击一下大表格的边缘以选中此表格，下方会出现一个绿色的辅助工具，点击第一根绿线上的小箭头并选择“右侧插入列”，拖动右列的左边缘到合适大小。
ＳＴＥＰ３
将光标焦点置于右列第一层并按住鼠标左键不放向下移动，直到三层表格都被选中（图１９），最后单击鼠标右键并选择“表格”－“合并单元格”，一个两列三行的表格就拆分完毕了。
２．设置ＣＳＳ样式
ＣＳＳ样式也就是层叠样式表，它的作用就是修饰页面的表现层，简单说就是可以给表格和字体上色啊，设置文章段落行距啊什么的。我们现在的页面就像一个赤身裸体的人一样，ＣＳＳ可以比做一件漂亮的衣服，直接套上去这个人就大变样了。让我们还是用实例来加深理解。
ＳＴＥＰ１
用ＳＨＩＦＴ＋Ｆ１１打开ＣＳＳ样式面板（又一个被ＤＷ８大大增强了功能的面板，还没有升级新版ＤＷ的朋友不要再等咯），点击下面的带有“＋”号的小图标（图２０），在弹出的面板的“名称”里随意输入几个字母（可以为字母和数字混合，但不能为纯数字，不能为中文），例如“ｂｉａｏｔｉ”，然后选中下方的“仅对该文档”后确定。
ＳＴＥＰ２
在弹出的界面中我们可以看到非常丰富的设置信息，可以设置字体大小，例如１６像素，粗细中选择粗体，颜色选择白色。然后点击左边的“背景”，在“背景颜色”中选择红色，接着继续点击左边的“边框”，样式选择“实线”，宽度为１像素，背景为黑色，最后“确定”（图２１）。
ＳＴＥＰ３
回到视图编辑界面，将光标焦点置于左列第一层中，将下方的属性面板中“水平”的值更改为“居中对齐”，“样式”选择“ｂｉａｏｔｉ”（图２２），然后拉高到合适的高度，一个标题栏就这样做好了。
这样举一反三，根据自己的喜好设置好所有的ＣＳＳ样式并在相应的表格中予以调用，一个漂亮的界面就诞生了。
３．偷梁换柱
在最初的基本页面里，我们已经实现了输入一个人名后，标题自动将这个名字显示了出来，现在我们就来动手对现在这张包装过的“新闻页面”偷梁换柱，成为名副其实的“爆炸新闻”。
ＳＴＥＰ１
自己先胡编一则新闻内容放入左列第二层中，然后切换到代码视图。由于添加了许多内容，此时的页面源代码已经不像刚开始那样简单了，如果觉得代码拉得太长，老是拖动滚动条十分不便，我再隆重介绍一个ＤＷ８新增功能“代码折叠”。
“代码折叠”顾名思义就是能将源代码折叠起来（废话……），这在源代码数量巨大而我们又需要编辑它们的时候显得非常方便。框选一段代码，他们的前面会出现两个带“－”号的小图标（图２３），点击其中任意一个，他们则会自动折叠起来，并且前面的两个小图标变成了一个带“＋”号的小图标，我们可以通过点击这个图标来展开这段折叠好的源代码。另外，在代码视图的左侧还竖立这一列小图标，他们的存在为我们编辑源码带来了极大的方便，可谓是ＤＷ８新增功能中最抢眼的亮点之一了。
ＳＴＥＰ２
将多余代码折叠起来，只留下我们需要修改的部分，然后将文中欲替换的名字改为＜ｓｐａｎ＞＜／ｓｐａｎ＞，还可以将字体加粗以增强效果，例如：“４５岁的盖茨已经连续七年获得此项排名第一位”更改为“身强力壮的＜ｓｔｒｏｎｇ＞＜ｓｐａｎ＞＜／ｓｐａｎ＞＜／ｓｔｒｏｎｇ＞已经连续七年获得此项排名第一位”。
ＳＴＥＰ３
将视图上方“标题”框中的“无标题文档”忽悠一个名字，比如“世界首富仍未易主”
依照这样的方法全文更换，正文部分就算完工了，用ＩＥ打开页面，输入一个名字，嘿嘿，是不是很有成就感啊（图２４）。
４．财富排行
主体部分已经完工，现在右边的那列还空着呢，就用它来放财富排行，要搞得还真像那么回事一样。
ＳＴＥＰ１
将光标焦点置于右边列上，将下方属性面板的“垂直”属性更改为“顶端”。
ＳＴＥＰ２
选择菜单栏中的“插入→表格”来插入一个宽度为１００％的表格并将其拆分为两行。
ＳＴＥＰ３
分别设置好两层单元格的ＣＳＳ样式并调用，然后在第一层里写下“财富排行榜”。第二层里就随你想像啦，不过第一位肯定是要留给朋友的，也就是在源代码在第一位的位置上写下＜ｓｐａｎ＞＜／ｓｐａｎ＞（图２５）。
让我们再次回到ＩＥ里浏览一下，哈哈，好一个财富排行榜，足足５８７亿美元的财富呢，先输入自己的名字过过瘾吧（图２６）。
５．相关新闻
一般的新闻页面除了标题和正文以外还有什么？那就是相关新闻了，而且我们还可以继续利用这个元素来做文章，将忽悠一忽到底。
ＳＴＥＰ１
将鼠标在最外层表格右边的空白处轻击一下，然后插入一个宽为７６０像素的表格并置中，就跟本例中开使建立的第一个表格的方法一样，然后拆分为两行。
ＳＴＥＰ２
设置好本表格的ＣＳＳ样式并调用，例如灰底黑字，建议将字体大小设置为９点数（ｐｔ）。
ＳＴＥＰ３
在第一层的表格中写下“相关新闻”字样，然后在第二行里凭自己的创意写下一些所谓的“相关新闻”吧，记住不要太正儿八经了，大家就是要乐一乐嘛。
ＳＴＥＰ４
替换相关新闻中的相关人名为＜ｓｐａｎ＞＜／ｓｐａｎ＞，这点已经不用我多说了吧（图２７）。
ＳＴＥＰ５
为了使页面包装得更加真实，我们还可以在相关新闻的新闻列表上加入超链接。框选一行文字，然后切换到代码视图，按照如下方式加入超链接＜ａｈｒｅｆ＝＂＂＞＜ｓｐａｎ＞＜／ｓｐａｎ＞新闻标题＜／ａ＞，其中“ｈｒｅｆ”的值就是你准备跳转到的网址，至于跳转到哪里去，就全由你自己决定了。也可以直接以“＃”为值，这样在对方点击该链接的时候则会跳转到当前页面的顶部，或者以“ｊａｖａｓｃｒｉｐｔ：；”为值，点击以后网页不会有任何反应，更具忽悠效果，例如＜ａｈｒｅｆ＝＂ｊａｖａｓｃｒｉｐｔ：；＂＞＜ｓｐａｎ＞＜／ｓｐａｎ＞继续稳坐世界首富位置＜／ａ＞。
几个小时的浴血奋战之后，我们的忽悠大作终于完工了，万岁！在网上找一个免费空间，然后将本作上传上去浏览，输入好友的名字，把地址栏的地址ｃｏｐｙ下来以后发给他吧，相信这是新年里最让人惊喜的事了（图２８）。
ｔｉｐｓ
超链接就是一张网页跳转到另一张网页的入口，我们继续用大厦做例子，假设一张网页是一座大厦，我要从这座大厦漫步去另一座大厦，那么超链接就像是一座天桥，而拥有超链接属性的文字或其他元素就像是天桥这边的一道门。
经验与技巧
经验：ＤＷ８的ＣＳＳ面板虽然有所增强，可以满足基本需要，但是对于一个高级使用者来说这些还是远远不够的，工具自带的ＣＳＳ代码编辑器改进一直都不是很大，如果你希望对ＣＳＳ进行进一步深造，建议使用ＴｏｐＳｔｙｌｅ来进行ＣＳＳ的编辑工作。ＴｏｐＳｔｙｌｅ是当年捆绑在ＨｏｍｅＳｉｔｅ中的一款强大的ＣＳＳ编辑器，ＨｏｍｅＳｉｔｅ停止开发以后ＴｏｐＳｔｙｌｅ就被独立出来了，一句话，比ＤＷ８自带的好用多了。
技巧：假如你在制作页面的时候觉得编辑视图视野太小，反复拖动滚动条实在难以忍受，可以通过快捷键Ｆ４来跳转到全屏模式，或者利用“设计视图”下方的缩放工具来缩放页面（ＤＷ８新功能）。
占领高地—图文结合电子春联
战略目标：占领高地
战略意义：将图片背景与文字相结合，制造更强烈的视觉冲击力
战术讲解：在猛烈的交火过后，占领制高点是最重要的事情，只有这样才能更好地把优势转换为胜势。在我们的拜年页面中同样有了强大的交互功能，更要以图片作为背景，以文字镶嵌其中，看上去才更像是为亲朋好友专门定制的拜年页面。
开始战斗：春节挂春联是中国人的老传统了，红红的纸上写下祝福的话语，还有什么能比这更吉利的呢。有了前面的知识做基础，制作电子春联那就真是易如反掌了。
ＳＴＥＰ１
新建一张页面，插入一个宽度为５００像素的表格并居中，然后将其分为三行，第二行分为三列。
ＳＴＥＰ２
准备好一张春联的素材，然后用Ｐｈｏｔｏｓｈｏｐ等图像处理软件制作一张宽度为５００的春联背景作为横批（图２９）。
ＳＴＥＰ３
将光标焦点置于顶部单元格时将属性面板中的“背景”指向到你准备好的春联背景素材（点击输入框后方的文件夹图片浏览图片），然后单元格高度拉伸到合适大小并将属性面板中的“水平”属性设置为“居中对齐”，再在下面一层左右两个单元格中分别插入春联图片（图３０）。
ＳＴＥＰ４
为第一层的单元格设置好ＣＳＳ样式并调用，然后依照老规矩将＜ｓｐａｎ＞＜／ｓｐａｎ＞加入源代码的相应位置中去。
ＳＴＥＰ５
将我们刚才忽悠新闻页面中的表单源代码ｃｏｐｙ到第三层的单元格（注意ａｃｔｉｏｎ的属性改为本页文件名，ｂｏｄｙ标签后面加入ｏｎｌｏａｄ＝＂ｒｅｔｕｒｎｏｎ＿ｌｏａｄ（）；＂），然后＜／ｈｅａｄ＞前面的ＪＳ代码也相应地复制过来（图３１）。
切换到浏览器里试验一下，呵呵，嘿嘿，哈哈，革命成功了，我们的心血没有白费，这样的一幅电子春联送给亲朋好友，还不得把他们乐上天呀（图３２）。
经过我们坚持不懈的斗争，这场新春送祝福超级大作战就彻底结束了，亢奋的你是否还意犹未尽，或许还在为如何挑选精美的素材而苦恼呢？我就好人做到底，送佛送上西，使出我最后的绝招：资源网站一箩筐！
经验与技巧
经验：要将网页做的好看仅仅依靠ＤＷ８是不行的，掌握一种图像处理软件也非常重要，例如Ａｄｏｂｅ公司的Ｐｈｏｔｏｓｈｏｐ和Ｍａｃｒｏｍｅｄｉａ公司的Ｆｉｒｅｗｏｒｋｓ，不过Ｍａｃｒｏｍｅｄｉａ已经在前不久被Ａｄｏｂｅ收购，Ｆｉｒｅｗｏｒｋｓ前景难以预料，究竟使用何种软件，那就根据个人喜好和习惯了。
技巧：如果表格中再嵌套一个同样大小的表格，那么在设计视图里它们的边缘会紧紧挨在一起，难以区分，按下Ｆ６则将以表格扩展模式显示，表格与表格间就能空出一段距离来方便控制了（并不影响最终效果）。
３祝福一大堆资源一箩筐
网页制作的学习并不是一朝一夕的事，我们上面所介绍的内容只不过是沧海一粟。并且，涉及到修饰用的图片需要专业的图像处理软件来完成，这对于初学者来说几乎是不可能完成的任务。但是，我们有互联网这个大宝库，只有想不到没有找不到。下面我就和大家一起搜罗一番。
ＧＩＦ、ＪＰＧ图片类资源。对于初学者来说多多利用现有ＧＩＦ动画，不但很容易学会使用，也可以使作品生动漂亮。首先就来给大家介绍一些图片素材网站。
首先推荐《谦龙素材》
网址：ｈｔｔｐ：／／ｗｗｗ．ｃｃｃｅｎ．ｃｏｍ／ｓｏｕ／ｉｎｄｅｘ．ｈｔｍ
此素材站图片丰富，包括动画图库、图标图库、背景图库、线条图库、按钮图库、背景音乐、创意图库等，分类详细，非常适合初学者们在此站搜罗需要的各类图片素材。
《网页制作大宝库》
网址：ｈｔｔｐ：／／ｗｗｗ．ｄａｂａｏｋｕ．ｃｏｍ／ｇｉｆ／
《好素材》
网址：ｈｔｔｐ：／／ｗｗｗ．ｈａｏｓｃ．ｃｏｍ／Ｓｕｃａｉ／２５／Ｌｉｓｔ１．ｈｔｍ
《番禺信息网之网友天地ＧＩＦ动画库》
网址：ｈｔｔｐ：／／ｗｙｔｄ．ｐａｎｙｕ．ｇｄ．ｃｎ／ｇｉｆ／
《ＩＴ网络教室素材库》
网址：ｈｔｔｐ：／／ｉｎｆｏ．ｉｎｆｏｓｃａｐｅ．ｃｏｍ．ｃｎ／ｓｕｃａｉ／ｉｎｄｅｘ．ｈｔｍｌ
以上推荐的几个站点，都属于分类详细、内容丰富的ＧＩＦ、ＪＰＧ图片素材资源库，适合初学者们在里面搜索自己需要和喜欢的图片。
如果觉得自己做得不够好或者时间上不允许大家慢慢做贺卡来送给亲友们，那我就推荐大家去一些知名的贺卡网站，直接挑选漂亮的贺卡来发送给亲友们。提到贺卡，那首推的就是国内知名的《卡秀》了（网址：ｈｔｔｐ：／／ｗｗｗ．ｋａｘｉｕ．ｃｏｍ，您只需要在卡秀上免费注册一个用户，就轻松的选择站内的免费贺卡通过ＥＭＡＩＬ的方式发送给亲友了。
除了卡秀，还有网易电子贺卡（网址：ｈｔｔｐ：／／ｃａｒｄｓ．１６３．ｃｏｍ）、ＴＯＭ贺卡站（ｈｔｔｐ：／／ｃａｒｄ．ｔｏｍ．ｃｏｍ）、ＱＱ贺卡站（ｈｔｔｐ：／／ｅｃａｒｄ．ｑｑ．ｃｏｍ）等国内著名网站。以上这些网站提供的贺卡在精美程度和安全性上都非常有保障，大家可以放心使用。
而如果大家想自己制作的网站上能有更互动、生动的特效，那就需要用上Ｊａｖａｓｃｒｉｐｔ程序代码（以下简称ＪＳ代码）和ＣＳＳ样式表（以下简称ＣＳＳ）了，而对于初学者来说，自己去学习编写ＪＳ代码和ＣＳＳ是非常困难的，那要怎么办呢？其实在我们的互联网宝库里，有非常多的已经编写好的ＪＳ代码和ＣＳＳ供给大家免费使用，那在哪里能找到这些呢？不用怕，跟我来！
首先推荐给大家的是国内著名站点《中国站长》（网址：ｈｔｔｐ：／／ｄｏｗｎ．ｃｈｉｎａｚ．ｃｏｍ）登录此站后，您只需要在搜索栏内填写上“特效”或ＣＳＳ并选中“程序介绍”条件，然后就可以搜索出许多效果很棒的特效代码
之外还有著名的《洪恩在线》（网址：ｈｔｔｐ：／／ｗｗｗ．ｈｏｎｇｅｎ．ｃｏｍ／ｐｃ／ｈｏｍｅｐａｇｅ／ｊａｖａｓｃｒｉｐｔ／ｉｎｄｅｘ１．ｈｔｍ）。洪恩在线有个很值得推荐的地方就是不但它提供这些代码，并且有详细的教程教授大家如何使用这些代码。另外洪恩在线还有制作网页的各种初级教程和技巧例如网页制作技巧、Ｄｒｅａｍｗｅａｖｅｒ教程、Ｆｌａｓｈ实例教程、ＦｒｏｎｔＰａｇｅ教程、ＣＳＳ教程、各种实例等，令初学者朋友们很容易走进网页制作的大门。
素材和代码大家都能找到了，那如何把您的作品放到互联网上给大家欣赏呢？对了，我们需要一个网络空间来存放您的作品，这样您的作品就可以在互联网上有一个门牌号——网址。那我们我们如何来找互联网空间存放这些精美的作品呢，不用着急，我来帮您找。在互联网上有许多网站是提供免费的网络空间的，一般只需要简单地注册一个用户就可以使用了。
下面给大家推荐几个比较好的免费网络空间站点。
《３６５人》（网址：ｈｔｔｐ：／／ｗｗｗ．３６５ｒｅｎ．ｃｏｍ）、《个人主页空间》（网址：ｈｔｔｐ：／／ｗｗｗ．ｋｕｄｎｓ．ｃｏｍ）、《免费吧》（网址：ｈｔｔｐ：／／ｗｗｗ．ｆｒｅｅ８．ｃｏｍ）、《免费中国》（网址：ｈｔｔｐ：／／ｗｗｗ．ｆｒｅｅｚｇ．ｃｏｍ）、《游Ｅ资源》（网址：ｈｔｔｐ：／／ｗｗｗ．ｕｏｏｅ．ｃｏｍ）、《中国免费空间网》（网址：ｈｔｔｐ：／／ｗｗｗ．ｈｍｓｏｎ．ｃｏｍ）。以上这些网站都提供免费的空间服务，大家可以任意选择。
我相信在广大的读者群里，跟我一样生于七十、八十年代的人不在少数。大家是否还记得，在学生时代，每逢过年，我们都会翻空自己的荷包，将平时积攒的零花钱用于购买各种花花绿绿的贺年卡来赠送给班上的同学和老师，而喜欢自己动手同学更是精心制作出自己创意的贺卡来表达新年的祝福。如今我的百宝箱里还珍藏着儿时收到的一百多张贺卡呢，这不是一种巨大的幸福吗？
如今，科技的触角已经深入到我们生活的各个角落，传统的纸制贺卡已经渐渐淡出人们的视线，取而代之的是网上电子贺卡和手机短信等前卫的祝福方式。不过，科技除了给我们带来方便以外，其弊端也是显而易见的，君不见过年过节手机上收到的短信都是千篇一律，网上随处可见的吗？这种快餐式的祝福方式是不是越来越让你感到厌倦了呢？
ＤＩＹ！这是我们不变的主题，将情感和心血融入到一张张电子贺卡里，让朋友和恋人能触摸到我们的真情，在这个辞旧迎新的日子里，让我们自己动手，放飞我们的祝福。
或许你会问我，电子贺卡是不是就是那种会动的，有音乐的动画贺卡呢？没错，Ｆｌａｓｈ听说过吧，没听说过的话请回火星继续进修。这种电子贺卡就是利用Ｍａｃｒｏｍｅｄｉａ公司的产品Ｆｌａｓｈ制作出来的。利用动画的表现力固然强，但是学习难度也相当的大，没有好的手绘（鼠绘）功底，是很难做出漂亮的贺卡来的。况且，电子贺卡可不止这一种表现方式，利用同一家公司的另一产品Ｄｒｅａｍｗｅａｖｅｒ，我们可以制作出另一种形式的贺卡—网页贺卡，用它来拜年。
问：做网页难吗？
答：难！
问：啊？你这个骗子！
答：我是说做到完完全全的精通很难，可是做一张电子贺卡并不难。
问：那让我们开始吧。
１牛刀小试做贺卡
虽然我们相信能够通过短短几页文章，引领大家一起制作出像样的网页贺卡，但也需要提醒大家，Ｄｒｅａｍｗｅａｖｅｒ８可不像泡方便面那么简单的。为什么军队的战斗力如此强大？因为他们有明确的战略目标和详细的战术指引，而我们要用同样的方式来克服各个难点，直至赢得最后的胜利。
ｔｉｐｓ
网页制作的工具有很多，但是所见即所得的制作工具中以Ｍｉｃｒｏｓｏｆｔ的Ｆｒｏｎｔｐａｇｅ和Ｍａｃｒｏｍｅｄｉａ的Ｄｒｅａｍｗｅａｖｅｒ最为著名。何谓所见即所得？顾名思义，就是你在工具的编辑窗口所见到的画面就是在浏览器里显示出的画面，这样一来，我们不需要掌握专业的ＨＴＭＬ源代码知识就可以做出漂亮的网页。
在Ｄｒｅａｍｗｅａｖｅｒ诞生以前，Ｆｒｏｎｔｐａｇｅ可谓是最好的所见即所得网页制作工具，微软公司依靠此软件垄断着网页制作工具市场，但随着Ｄｒｅａｍｗｅａｖｅｒ的横空出世，Ｆｒｏｎｔｐａｇｅ渐渐开始走下坡路。Ｄｒｅａｍｗｅａｖｅｒ凭着强大的技术支撑，完善的站点管理功能和不断开拓进取的精神，已经成为业界的ＮＯ．１。在２００５年年末新发布的Ｄｒｅａｍｗｅａｖｅｒ８简体中文版中，我们欣喜地看到这款专业级的网页制作工具又增添了许多新功能，这些改进无论对开始使用ＸＨＴＭＬ，ＸＭＬ制作网页的高级使用者还是刚刚入门的新手来说都是让人欢呼雀跃的。
建立根据地—网页的结构规划
战略目标：建立根据地
战略意义：通过熟悉页面构成的基本要素，了解自己应该怎么规划页面
战术讲解：根据地是一场战斗的基础，没有根据地就无法开始战斗，胜与负就更无从说起。这就像要做好一张网页，首先要知道一张网页是如何运行的，网页的根本是什么？是框架，是借助表格功能来搭建的框架！在网上打开任意一张网页，我们会发现组成网页的无非就是文字、图片、ｆｌａｓｈ等元素。这些元素又是如何被排列、规划成一块一块而不是杂乱无章地随意摆放的呢？这就要归功于表格的作用了，想制作一张像模像样的网页，学会表格的排列和嵌套则是基础中的基础。
ｔｉｐｓ
一张制作好的网页，实际上是由一行行的ＨＴＭＬ代码组成，在没有所见即所得编辑工具以前，网页制作者都是通过古老的记事本，或者专业的ＨｏｔＤｏｇ、ＨｏｍｅＳｉｔｅ等工具手工编写代码。然后通过ＩＥ等浏览器进行代码的解释，才能直观地将网页呈现在用户面前。对于初学者这显然是不可想象的，如今我们有了Ｄｒｅａｍｗｅａｖｅｒ，通过几个简单的鼠标动作就可以制作出自己的网页，而不需要学习专业的ＨＴＭＬ代码编写。
开始战斗：我们可以将一张网页想像成一座大厦，即将要写入的文字就是这座大厦里工作的人，插入的图片和动画就是办公所使用的家具和其他设施。等等，难道你就这样一股脑地把人和家具都扔进去？Ａ公司和Ｂ公司挤在一起上班？有人顶着椅子用电脑，有人踩在别人头上开会？ＮＯ！ＩＱ正常的人都知道，我们应该将大厦分成很多层，然后每层分成很多房间，Ａ公司在一层Ｂ公司二层，洗手间在左边办公室在右边，而实现这种元素分隔功能的就是表格了。有了这种抽象的概念以后，让我们回到这张空白的页面上来，开始战斗吧！
ＳＴＥＰ１
创建新页面
打开ＤＷ８，哇，这个界面看上去好复杂，不要被吓倒了哦，接下来的所有战斗都将在这个复杂地形上展开。首先要做的是新建一张页面，看到画面中央的项目列表了吗？点击“创建新项目”下的“ＨＴＭＬ”（图１）创建一张新网页，然后可以通过点击设计或代码窗口上方的三个按钮来切换显示模式，具体效果大家可以自己尝试一下（图２）。
点击图２中的“设计”按钮，整个编辑界面就像一张白纸一样呈现在面前，而下方的“属性”窗口中也显示出了许多输入框、按钮和下拉菜单。在这张“白纸”上插入任何一个元素，我们都可以在属性面板中对其进行控制，比如大小、颜色等等，各种属性使用后的效果，留待有心人自行钻研吧。
注：在第一次启动的时候，工具会询问你使用何种工作区布局（图３）
ＳＴＥＰ２
创建表格
选择菜单栏中的“插入→表格”（ＣＴＲＬ＋ＡＬＴ＋Ｔ），在弹出的窗口中设置好行数和列数（以后可随时利用属性面板中的相应选项进行调整），例如３行１列，表格宽度选择１００百分比，边框粗细、单元格间距设置为０，边距为５，然后确定（图４）。
ＳＴＥＰ３
添加文字
此时画面中便出现了一个３行１列的表格，也就是将这座大厦分为了三层，在这三层里，我们要分别放置不同的内容进去。
将焦点放在第一行的表格中，然后选择菜单栏中的“修改→表格→拆分单元格”，将本行表格拆分成３列，就像是一层楼被划分出三个房间一样，在中间的房间里写下主题，例如“新年快乐！”，然后将属性面板中的“水平”下拉菜单设置为“居中对齐”，框选输入的文字，设置大小为３６像素，颜色为红色，并点中面板中的字母“Ｂ”将字体加粗（图５）。剩下的两个房间暂且按下不表，以后会用到。
在第二行的表格中写下我们的祝福。但是就这么放点个头小小的而且黑黑的字进去是不是显得一点技术含量也没有？那么可以在ＤＷ里对这些字进行单独的字体、大小和颜色设置吗？或许再来点特殊的格式，就像在Ｗｏｒｄ里一样轻松排版？当然，不过这些功能只是可以实现而已，并非真的像在Ｗｏｒｄ里一样简单，它们涉及到更高级的ＣＳＳ层叠样式表的应用。怎么办？ｅａｓｙ！我们就先在Ｗｏｒｄ里把祝福写下，然后调整好包括字体、颜色、大小等一切的一切，全部框选以后拷贝，转到刚才的第二行表格，点击右键选择“选择性粘贴”，在弹出的面板中选择第四项“带结构的文本以及全部格式”（图６），ｙｅａｈ！在Ｗｏｒｄ中设置好的一切都原封不动地搬过来了，怎一个爽字了得！当然，这可是ＤＷ８的新功能哦，老版本的用户就没有这种待遇可以享受了，ＤＷ８带给我们的好处还不止这些呢，咱们走着瞧。
最后，别忘了在第三行里写下自己的大名和ＱＱ等信息，设置好字体的相应属性，拜年网页的基本框架就算搭建完成了。有了根据地，接下来下来考虑的是添砖加瓦，构建工事。
经验与技巧
经验：以“带结构的文本以及全部格式”粘贴Ｗｏｒｄ文字的时候虽然可以将格式完全照搬过来，但是同样也会带来大量垃圾代码，所以请尽量使用ＣＳＳ来进行文字排版和设置。
技巧：假如我们欲将一个表格拆分成３行，结果不小心只拆分成了２行，这时只需要将鼠标焦点至于最后一行上然后按下ＴＡＢ键，ＤＷ就会自动在本行下生成一行新单元格，对于多行多列的表格同样有效；如果不小心多拆分出一个单元格，要对其进行删除，那么只需要按住ＣＴＲＬ键点击此单元格，它的周围会显示一圈黑色的实线以表示该格被选中，然后按下键盘上的ＤＥＬＥＴＥ键就可以啦。
构建工事—页面元素的加入
战略目标：构建工事
战略意义：为页面添加各种图片元素，提升视觉效果
战术讲解：如果将前面部分所设计好的页面保存，然后就这样发送出去，恐怕也太简陋了，我们诚心的一片祝福受过于简陋的页面所累，反倒让收到祝福的亲朋好友看不出丝毫诚意。要知道，在战场上有了防御工事，我们的战士进可攻退可守，战术变得更加灵活多样。同样，在祝福的页面中，有了图片甚至Ｆｌａｓｈ的加入，简单的页面也会变得更丰富，更有视觉冲击力。通过各种“花花草草”的点缀，枯燥的文字有了陪衬，效果可就大不一样了。
开始战斗：未经修饰的单调文字页面非常枯燥，就像是随手找张纸在上面写了几个字一样，一份连基本的包装都没有的礼物难于受到对方的欢迎。想要包装，最好的做法就是增加插图和动画，下面我们就来学习一下如何为这张网页增强视觉效果。
ＳＴＥＰ１
准备图片
利用Ｐｈｏｔｏｓｈｏｐ等图像制作工具做出能表达思想的图片，或者从网上的图库里下载一些现成的ｊｐｇ图片或ｇｉｆ动画图片，将其保存到本机，注意，请确保与我们正在制作的这张页面处于同一文件夹下。
ＳＴＥＰ２
插入主体图片
回到ＤＷ８的设计页面，在画面中欲插入图片的地方点击一下以确定位置，然后选择菜单栏中的“插入→图像”，选择本机上准备好的图片然后确定就可以了。如果觉得图片默认位置不合适，我们还可以右击这张图片并选择“对齐”中的相应属性，例如“左对齐”，这样一来图片就会被文字所包围，看上去不再那么唐突了。
选择好插入图片后会弹出一个窗口要求你输入一些信息，我们只需要在“标题”处输入这张图片的标题就行了，例如“新年快乐”，其作用为在图片无法显示的情况下显示这个文字标题，让浏览者知道这张图片的主题（图７）。
ＳＴＥＰ３
插入修饰性图片
还记得刚才在创建表格的时候剩下两个房间还没有用到吗，现在我们可以在这里面分别插入相应的图片以起到修饰作用（图８）。每个单元格之间的虚线是可以拖动的哦，需要的时候可以很方便地调整单元格大小。（要是家里的房子也能这么简单地调整大小就好了……）。
ＳＴＥＰ４
准备动画
如果你觉得这样图文并茂还不够丰富多彩，想插入一些Ｆｌａｓｈ动画让整个画面活起来，ｖｅｒｙｅａｓｙ！去网上最著名的两个Ｆｌａｓｈ站点“闪客帝国”（ｗｗｗ．ｆｌａｓｈｅｍｐｉｒｅ．ｃｏｍ）和“闪吧”（ｗｗｗ．ｆｌａｓｈ８．ｎｅｔ）下载自己喜欢的Ｆｌａｓｈ动画，同样放到网页的同级目录下。
ＳＴＥＰ５
插入动画
切换到ＤＷ８，选择菜单栏中的“插入→媒体→Ｆｌａｓｈ”，选择你准备好的ｆｌａｓｈ文件就ＯＫ了，就这么简单。
经验与技巧
经验：将图片左对齐以后文字会紧紧地环绕在图片周围，如果点中图片将属性面板中的“垂直边距”和“水平边距”都设置一个合适的数值，比如５，那么图片与文字周围便会出现５个像素的空白间距，看上去舒服多了。
技巧：如果插入的图片数量较多，用文中的方法也太折磨人了，其实所有这些基本功能都有快捷键，插入图片的快捷键就是ＣＴＲＬ＋ＡＬＴ＋Ｉ，是不是效率高得多了？
ｔｉｐｓ
为何在刚才战斗过程中，第一步会强调要把图片放在同一个目录下？这是因为存在一个绝对路径和相对路径的问题。对于新手而言，这两个概念很容易弄错。做个比喻，绝对路径就像是详细的门牌号，比如我们的网页文件在二单元七层Ｂ户，需要的图片存放在二单元七层Ａ户。那么当我们把页面和图片从我们的电脑传送到互联网上时，就像是搬到另外一栋楼，这个门牌号其实已经失效。所以在页面中“二单元七层Ａ户”的描述已经找不到图片了。相对路径是什么呢？还是假设我们制作的页面存放在二单元七层Ｂ户，图片存放在Ａ户，我们在页面中的表述是，图片在“隔壁”。那么不管我们怎么搬家，只要保证图片和页面是邻居，那就不用担心找不到图片了。
我们做个实验，首先在Ｃ盘下新建一个名为Ｔｅｍｐ的文件夹，将页面保存到此文件夹中，然后将图片存放在硬盘上的任意位置，接下来用图片插入功能插入这张图片，我们会看到对话框下方的“ＵＲＬ”显示的是以“ｆｉｌｅ：／／／盘符｜”开头的文件路径（图９），表示此路径指向的是本机某盘符下的某文件夹下的某文件，也就是固定的门牌号“二单元七层Ａ户”。假如我们将这张网页和图片上传到互联网上的免费空间中，这张照片将不会被显示出来，因为网页会从服务器上的相应盘符位置下去寻找这张图片，也就是说搬到另外一栋楼了，却还在按照“二单元七层Ａ户”的地址来寻找图片，当然找不到了。所以，我们应该注意避免出现这种绝对路径。如果我们将图片放入网页的同级目录，那么“ＵＲＬ”则会直接显示图片文件名（图１０），如果放到网页存放的文件夹的上一级目录，则会显示“．．／文件名”，就像是“邻居”的描述一样。这样网页会以当前位置相对应的路径去寻找图片，只要不改变图片和网页相互之间的关系（让它们保持邻居关系），传到任何地方都可以很正常地将图片显示出来。
弹药准备—打造活力四射的页面
战略目标：弹药准备
战略意义：利用ＧＩＦ动画和Ｊａｖａｓｃｒｉｐｔ制作出种种特调，让页面活力四射
战术讲解：经过了前两步，我们已经建立起了根据地，并且构建好了防御工事。仔细看看我们的作品，嗯，画面丰富多了，可是怎么总觉得还缺少一些节日的气氛呢？感觉像是在大型的防御工事里面用小米加步枪作战，这仗打起来可不够痛快，我们更需要一些猛火力。怎么加强火力？我们一步一步来！
开始战斗：这里所说的猛火力有两种方式，一是现成的动画作为背景烘托氛围，一是通过Ｊａｖａｓｃｒｉｐｔ脚本程序来进行交互，总之就是想让我们的拜年网页动起来，更具活力，更酷更炫！
火力一：闪烁星空
第一步：制作或下载合适的具有节日气氛的ｇｉｆ动画图片，比如一个在夜空中闪闪发光的星星
第二步：点击我们正在制作的网页的任何空白地方（注意不要点到图片，动画这类元素），然后再点击下方属性面板中的“页面属性按钮”，在弹出的窗口中我们可以对整张页面进行总体设置，例如点击“背景图像”后面的“浏览”按钮，选择我们准备好的背景图片，便可以将这张图片平铺为这张页面的背景了（图１１）。
预览一下，ｗｏｗ，一个闪烁的星星变成了一片星空，一闪一闪眨眼睛，我们的心都不由自主地跟着星星跳动起来了，你开始兴奋了吗（图１２）？这还不算完呢，下面我们再用更高级的Ｊａｖａｓｃｒｉｐｔ来增加更多的特效。
火力二：归去来兮
Ｊａｖａｓｃｒｉｐｔ（以下简称ＪＳ）是一种可以在页面上实现种种特效的脚本程序，它的工作原理我们不用去深究，也不需要去手工编写这写脚本语言，在ＤＷ８的世界里，只要动动鼠标，一切皆有可能。相信大家在网上都看到过一种效果，就是一张图片在画面上飘来飘去，这就是利用ＪＳ制作出来的网页特效，如果我们在这张拜年页面上挂上一个红灯笼，在空中飘荡，不是更能衬托出节日的气氛吗？
像闹鬼？
Ｂ４封建迷信！
ＳＴＥＰ１
点击菜单栏中的“插入→布局对象→层”，设计视图上会出现一个有边框的格子，按住格子左上角的移动标志可以任意拖动其位置。然后将光标焦点置于该层中，插入一张准备到处飘动的图片（图１３）
ＳＴＥＰ２
点击移动标志选中此层，并在按下右键出现的菜单中选择“添加到时间轴”。
ＳＴＥＰ３
在下方的时间轴面板会出现两个小圆，第一个表示图片开始飘动的起始位置，第二个就是结束位置了，我们可以点击第二个小圆，然后在设计视图上拖动这个层到任意位置，然后将面板中的“自动播放”和“循环”勾上。保存以后预览看看，这张图片是不是动起来了？如果觉得速度太快可以将面板中的“Ｆｐｓ”数值降低，要实现更复杂的轨迹运动只需重复第二、三步（图１４）。
这样，一个图片飘动效果就完成了，ＤＷ８会自动在页面源代码中添加ＪＳ脚本，就不需要我们去关心了，真是太方便了。
火力三：源源不断
ＤＷ８中本身就内置了一些ＪＳ特效，我们可以通过ＳＨＩＦＴ＋Ｆ４来打开这个面板，点击面板中的“＋”号，在弹出的菜单里选择自己中意的效果（图１５）。如果这些无法满足你，那么可以到例如ｈｔｔｐ：／／ｗｗｗ．ｂａｒｏｎ．ｃｏｍ．ｃｎ／ｊａｖａｓｃｒｉｐｔ／ｉｎｄｅｘ．ａｓｐ，ｈｔｔｐ：／／ｔｅｃｈ．ｓｉｎａ．ｃｏｍ．ｃｎ／ｉｎｔｒｏｄｕｃｔｉｏｎ／ｆｏｃｕｓ／ｊａｖａｓｃｒｉｐｔ．ｓｈｔｍｌ这样的站点上去寻找自己喜欢的效果，并按照说明添加到网页源代码的相应部分。ＤＷ８中可以通过点击图３里显示的“代码”按钮切换到编码器视图，从而进行源代码的编辑。
至此，我们耗费“巨大心血”制作而成的第一张拜年网页终于光荣诞生了，把它上传到网上或是打包分发给自己的亲戚朋友吧，让大家一起分享你的祝福和快乐！不过，现在我们仅仅是做好了战斗前的种种准备，真正的战斗马上就要打响，ＬＥＴ＇ＳＧＯ！
经验与技巧
经验：在页面设置中，一般将字体设置为９ＰＴ的宋体，其显示效果是最好的，其他有特殊要求的可在ＣＳＳ中单独设置。
技巧：在最外层表格以外的空白处右击鼠标选择“页面属性”也可对正张页面进行宏样式的设置。预览页面只需要按下Ｆ１２键，ＤＷ８会自己调用你设置好的主浏览器来预览页面。
２精致祝福全面打造
前面我们说到了，诚意的祝福是不能千篇一律的，想要给亲朋好友送上最特别的祝福，那就得是专门为他定制，可是有那么多朋友总不能为每一个人都制作一个页面吧？赫赫，我们只要充分利用页面的交互功能，就可以在一个页面的基础上为无数好友送出不同的祝福，怎么样，神奇吧？
火力试探—初涉页面交互功能
战略目标：火力试探
战略意义：进一步掌握网页交互功能，并开始灵活运用
战术讲解：通过刚才的火力试探，我们对于交互页面的代码运用有了一定的认识和了解，接下来就要开始进一步利用交互页面的代码，通过各种途径对页面进行丰富，把代码的作用真正发挥出来。当然，随后这个例子，确实有点“忽悠”人：）
战斗开始：对于大多数读者而言，从头到尾编写代码是非常困难而且没有必要的，记住，他山之石可以攻玉。
ＳＴＥＰ１
搭建表格
新建一张ＨＴＭＬ网页，然后插入一个宽为７６０像素的２行１列表格，其他设置与上例一样。在表格右或下边缘上轻点鼠标左键以选中此表格，然后在下方的属性面板的“对齐”属性中选择“居中对齐”（图１６）。此设置的作用为将表格绝对定位于浏览器ｘ轴的中间，使页面更具观赏性。
ＳＴＥＰ２
插入表单核表单对象
将光标焦点置于第二行表格中，选择菜单栏中的“插入－表单－文本域”，确定了第一个弹出窗口以后，第二个窗口为询问你是否添加表单标签，按“是”确定。然后在这个文本框后面继续“插入→表单→按钮”。这时我们会看到表格周围多出了一圈红色的虚线，表示此区域为表单区域，用于提交预定数据（图１７）。
ＳＴＥＰ３
编辑源代码
这里，我们将第一次真正地接触到网页的核心，ＨＴＭＬ源代码，所有页面上的元素其实都是用一个一个的标签表示的，对于有一些英文基础的朋友们来说，要理解这些标签的含义并不困难，不过ＨＴＭＬ有一套自己的语法规则，胡乱修改也是不行的哦。
切换到编码器视图，不要被一大堆字母镇住了，我们仅仅修改其中的一小部分。
首先映入眼帘的就是那些黄色的字母了，这是ＤＷ８的代码高亮功能，会自动将特定的标签用不同颜色显示，方便查找和修改。找到以＜ｆｏｒｍｉｄ＝＂ｆｏｒｍ１＂开头的地方，将后面的ｍｅｔｈｏｄ＝＂ｐｏｓｔ＂改为ｍｅｔｈｏｄ＝＂ｇｅｔ＂，在ａｃｔｉｏｎ＝＂＂的两个引号中添加当前页面的文件名，例如将本页面保存为ｄｅｍｏ２．ｈｔｍｌ，那么这里就要相应更改为ａｃｔｉｏｎ＝＂ｄｅｍｏ２．ｈｔｍｌ＂。除了这里需要注意，其他地方就没什么大问题了，按照下面我给出的源代码细心修改吧：
＜ｆｏｒｍｉｄ＝＂ｆｏｒｍ１＂ｎａｍｅ＝＂ｆｏｒｍ１＂ｍｅｔｈｏｄ＝＂ｇｅｔ＂ａｃｔｉｏｎ＝＂ｄｅｍｏ２．ｈｔｍｌ＂ｏｎｓｕｂｍｉｔ＝＂ｔｈｉｓ．ｅｌｅｍｅｎｔｓ［＇ｎｉｃｋｎａｍｅ＇］．ｖａｌｕｅ＝ｅｓｃａｐｅ（ｔｈｉｓ．ｅｌｅｍｅｎｔｓ［＇ｎｉｃｋｎａｍｅ＇］．ｖａｌｕｅ）；ｒｅｔｕｒｎｔｒｕｅ；＂＞
＜ｌａｂｅｌ＞请输入你的名字：
＜ｉｎｐｕｔｔｙｐｅ＝＂ｔｅｘｔ＂ｎａｍｅ＝＂ｎｉｃｋｎａｍｅ＂ｉｄ＝＂ｎｉｃｋｎａｍｅ＂／＞
＜／ｌａｂｅｌ＞
＜ｌａｂｅｌ＞
＜ｉｎｐｕｔｔｙｐｅ＝＂ｓｕｂｍｉｔ＂ｎａｍｅ＝＂＂ｖａｌｕｅ＝＂提交＂／＞
＜／ｌａｂｅｌ＞
＜／ｆｏｒｍ＞
接下来，找到代码中出现的第一个＜ｔｄ＞标签，将中间的＆ｎｂｓｐ；替换为＜ｓｐａｎ＞＜／ｓｐａｎ＞，然后在后面写下想说的话，例如将整行替换为＜ｔｄ＞＜ｓｐａｎ＞＜／ｓｐａｎ＞，祝你新年快乐＜／ｔｄ＞。
最后，找到＜ｂｏｄｙ＞，将其替换为＜ｂｏｄｙｏｎｌｏａｄ＝＂ｒｅｔｕｒｎｏｎ＿ｌｏａｄ（）；＂＞。
ＳＴＥＰ４
添加ＪＳ代码
找到＜／ｈｅａｄ＞标签，在前面添加如下一段代码：
＜ｓｃｒｉｐｔｌａｎｇｕａｇｅ＝＂ｊａｖａｓｃｒｉｐｔ＂ｔｙｐｅ＝＂ｔｅｘｔ／ｊａｖａｓｃｒｉｐｔ＂＞
ｆｕｎｃｔｉｏｎｏｎ＿ｌｏａｄ（）｛
ｖａｒｅｌｓ＝ｄｏｃｕｍｅｎｔ．ｇｅｔＥｌｅｍｅｎｔｓＢｙＴａｇＮａｍｅ（＂ｓｐａｎ＂）；
ｖａｒａｒｇ＝ｄｏｃｕｍｅｎｔ．ｌｏｃａｔｉｏｎ．ｓｅａｒｃｈ；
ｖａｒｔｘｔ＝ｕｎｅｓｃａｐｅ（ｕｎｅｓｃａｐｅ（ａｒｇ．ｓｕｂｓｔｒ（１０）））；
ｆｏｒ（ｉ＝０；ｉ＜ｅｌｓ．ｌｅｎｇｔｈ；ｉ＋＋）｛
ｅｌｓ［ｉ］．ｉｎｎｅｒＴｅｘｔ＝ｔｘｔ；
｝
ｒｅｔｕｒｎｔｒｕｅ；
｝
＜／ｓｃｒｉｐｔ＞
现在用ＩＥ打开这张页面，在输入框里随便输入一个人的名字，然后提交，哈哈，是不是已经欣喜若狂了呢！好了，既然火力试探已经初见成效，我们可以开始下一步的行动了。
ｔｉｐｓ
使用老版本ＤＷ的朋友们请自行将ｉｄ＝＂ｎｉｃｋｎａｍｅ＂，ｖａｌｕｅ＝＂提交＂这两个属性后的“／”去掉，因为ＤＷ８增强了对Ｗｅｂ标准页面制作功能的支持，新建文档默认采用ＸＨＴＭＬ１．０格式（该标准规定任何没有关闭的标签最后必须以“／”结尾以表示此标签的关闭），而不是以往版本的ＨＴＭＬ４．０１，这些技术上的问题，有兴趣的同学可以自行上网翻阅相关资料。此注意事项以后不再重复。
经验与技巧
经验：在８００ｘ６００解析度下，ＩＥ浏览器窗口航向宽度为７７８像素，ＷｉｎｄｏｗｓＸＰ中使用不同的主题会造成这个数字的细微变动，将最外层表格设置为宽７６０像素并置中，那么无论在８００还是１０２４解析度下整个画面都会处于ｘ轴的中间位置并不会出现横向滚动条。当然７６０只是一个建议值，无论多少，以不出现横向滚动条为原则。
技巧：尽量使用“拆分模式”编辑源代码，在下方的设计视图中框选某个元素，上方的代码视图则会相应的选择这个元素的相关代码，方便定位和修改。
全面进攻—完美交互功能的拜年网页制作
战略目标：全面进攻
战略意义：尝试页面交互功能，初步学习代码的使用
战术讲解：战斗开始，可我们不能一上来就猛烈攻击，因为还没有试探敌方的虚实，贸然行动可能会导致失败，活力试探是必不可少的。就像是我们即将开始的交互页面制作，这里涉及到了一些代码，毕竟我们可都不是编程高手，所以对于交互页面的制作，一定要循序渐进。好了，开始我们的活力试探吧！
开始战斗：新年送出的祝福话语里出现频率最高的是哪句话？“恭喜发财”！人人都怀揣着一个发财梦，今天我们就将这个梦送给朋友们，让他们好好乐一乐。
首先我们在脑袋里大概想象一下最终效果：在这张页面里不但要有基本的装饰，最好是伪装成一个简单的新闻页面以增加娱乐效果，我们可以将大表格分成２列，右边列中放一个“财富排行榜”，左边列分成３层，第一层里放一个大大的标题，在第二层里放入正文内容，第三层里放入“相关新闻”，嗯，就这么干！
１．拆分表格
ＳＴＥＰ１
我们刚刚做好的页面只有两层，如何将其拆分为想象中的布局呢？首先将光标焦点置于第一层上，然后轻击鼠标右键，选择“表格－拆分单元格”，设置为拆分成２行，这样第一层的表格就被轻松地拆分为两行了。
ＳＴＥＰ２
现在要做的是右边增加１列。轻击一下大表格的边缘以选中此表格，下方会出现一个绿色的辅助工具，点击第一根绿线上的小箭头并选择“右侧插入列”，拖动右列的左边缘到合适大小。
ＳＴＥＰ３
将光标焦点置于右列第一层并按住鼠标左键不放向下移动，直到三层表格都被选中（图１９），最后单击鼠标右键并选择“表格”－“合并单元格”，一个两列三行的表格就拆分完毕了。
２．设置ＣＳＳ样式
ＣＳＳ样式也就是层叠样式表，它的作用就是修饰页面的表现层，简单说就是可以给表格和字体上色啊，设置文章段落行距啊什么的。我们现在的页面就像一个赤身裸体的人一样，ＣＳＳ可以比做一件漂亮的衣服，直接套上去这个人就大变样了。让我们还是用实例来加深理解。
ＳＴＥＰ１
用ＳＨＩＦＴ＋Ｆ１１打开ＣＳＳ样式面板（又一个被ＤＷ８大大增强了功能的面板，还没有升级新版ＤＷ的朋友不要再等咯），点击下面的带有“＋”号的小图标（图２０），在弹出的面板的“名称”里随意输入几个字母（可以为字母和数字混合，但不能为纯数字，不能为中文），例如“ｂｉａｏｔｉ”，然后选中下方的“仅对该文档”后确定。
ＳＴＥＰ２
在弹出的界面中我们可以看到非常丰富的设置信息，可以设置字体大小，例如１６像素，粗细中选择粗体，颜色选择白色。然后点击左边的“背景”，在“背景颜色”中选择红色，接着继续点击左边的“边框”，样式选择“实线”，宽度为１像素，背景为黑色，最后“确定”（图２１）。
ＳＴＥＰ３
回到视图编辑界面，将光标焦点置于左列第一层中，将下方的属性面板中“水平”的值更改为“居中对齐”，“样式”选择“ｂｉａｏｔｉ”（图２２），然后拉高到合适的高度，一个标题栏就这样做好了。
这样举一反三，根据自己的喜好设置好所有的ＣＳＳ样式并在相应的表格中予以调用，一个漂亮的界面就诞生了。
３．偷梁换柱
在最初的基本页面里，我们已经实现了输入一个人名后，标题自动将这个名字显示了出来，现在我们就来动手对现在这张包装过的“新闻页面”偷梁换柱，成为名副其实的“爆炸新闻”。
ＳＴＥＰ１
自己先胡编一则新闻内容放入左列第二层中，然后切换到代码视图。由于添加了许多内容，此时的页面源代码已经不像刚开始那样简单了，如果觉得代码拉得太长，老是拖动滚动条十分不便，我再隆重介绍一个ＤＷ８新增功能“代码折叠”。
“代码折叠”顾名思义就是能将源代码折叠起来（废话……），这在源代码数量巨大而我们又需要编辑它们的时候显得非常方便。框选一段代码，他们的前面会出现两个带“－”号的小图标（图２３），点击其中任意一个，他们则会自动折叠起来，并且前面的两个小图标变成了一个带“＋”号的小图标，我们可以通过点击这个图标来展开这段折叠好的源代码。另外，在代码视图的左侧还竖立这一列小图标，他们的存在为我们编辑源码带来了极大的方便，可谓是ＤＷ８新增功能中最抢眼的亮点之一了。
ＳＴＥＰ２
将多余代码折叠起来，只留下我们需要修改的部分，然后将文中欲替换的名字改为＜ｓｐａｎ＞＜／ｓｐａｎ＞，还可以将字体加粗以增强效果，例如：“４５岁的盖茨已经连续七年获得此项排名第一位”更改为“身强力壮的＜ｓｔｒｏｎｇ＞＜ｓｐａｎ＞＜／ｓｐａｎ＞＜／ｓｔｒｏｎｇ＞已经连续七年获得此项排名第一位”。
ＳＴＥＰ３
将视图上方“标题”框中的“无标题文档”忽悠一个名字，比如“世界首富仍未易主”
依照这样的方法全文更换，正文部分就算完工了，用ＩＥ打开页面，输入一个名字，嘿嘿，是不是很有成就感啊（图２４）。
４．财富排行
主体部分已经完工，现在右边的那列还空着呢，就用它来放财富排行，要搞得还真像那么回事一样。
ＳＴＥＰ１
将光标焦点置于右边列上，将下方属性面板的“垂直”属性更改为“顶端”。
ＳＴＥＰ２
选择菜单栏中的“插入→表格”来插入一个宽度为１００％的表格并将其拆分为两行。
ＳＴＥＰ３
分别设置好两层单元格的ＣＳＳ样式并调用，然后在第一层里写下“财富排行榜”。第二层里就随你想像啦，不过第一位肯定是要留给朋友的，也就是在源代码在第一位的位置上写下＜ｓｐａｎ＞＜／ｓｐａｎ＞（图２５）。
让我们再次回到ＩＥ里浏览一下，哈哈，好一个财富排行榜，足足５８７亿美元的财富呢，先输入自己的名字过过瘾吧（图２６）。
５．相关新闻
一般的新闻页面除了标题和正文以外还有什么？那就是相关新闻了，而且我们还可以继续利用这个元素来做文章，将忽悠一忽到底。
ＳＴＥＰ１
将鼠标在最外层表格右边的空白处轻击一下，然后插入一个宽为７６０像素的表格并置中，就跟本例中开使建立的第一个表格的方法一样，然后拆分为两行。
ＳＴＥＰ２
设置好本表格的ＣＳＳ样式并调用，例如灰底黑字，建议将字体大小设置为９点数（ｐｔ）。
ＳＴＥＰ３
在第一层的表格中写下“相关新闻”字样，然后在第二行里凭自己的创意写下一些所谓的“相关新闻”吧，记住不要太正儿八经了，大家就是要乐一乐嘛。
ＳＴＥＰ４
替换相关新闻中的相关人名为＜ｓｐａｎ＞＜／ｓｐａｎ＞，这点已经不用我多说了吧（图２７）。
ＳＴＥＰ５
为了使页面包装得更加真实，我们还可以在相关新闻的新闻列表上加入超链接。框选一行文字，然后切换到代码视图，按照如下方式加入超链接＜ａｈｒｅｆ＝＂＂＞＜ｓｐａｎ＞＜／ｓｐａｎ＞新闻标题＜／ａ＞，其中“ｈｒｅｆ”的值就是你准备跳转到的网址，至于跳转到哪里去，就全由你自己决定了。也可以直接以“＃”为值，这样在对方点击该链接的时候则会跳转到当前页面的顶部，或者以“ｊａｖａｓｃｒｉｐｔ：；”为值，点击以后网页不会有任何反应，更具忽悠效果，例如＜ａｈｒｅｆ＝＂ｊａｖａｓｃｒｉｐｔ：；＂＞＜ｓｐａｎ＞＜／ｓｐａｎ＞继续稳坐世界首富位置＜／ａ＞。
几个小时的浴血奋战之后，我们的忽悠大作终于完工了，万岁！在网上找一个免费空间，然后将本作上传上去浏览，输入好友的名字，把地址栏的地址ｃｏｐｙ下来以后发给他吧，相信这是新年里最让人惊喜的事了（图２８）。
ｔｉｐｓ
超链接就是一张网页跳转到另一张网页的入口，我们继续用大厦做例子，假设一张网页是一座大厦，我要从这座大厦漫步去另一座大厦，那么超链接就像是一座天桥，而拥有超链接属性的文字或其他元素就像是天桥这边的一道门。
经验与技巧
经验：ＤＷ８的ＣＳＳ面板虽然有所增强，可以满足基本需要，但是对于一个高级使用者来说这些还是远远不够的，工具自带的ＣＳＳ代码编辑器改进一直都不是很大，如果你希望对ＣＳＳ进行进一步深造，建议使用ＴｏｐＳｔｙｌｅ来进行ＣＳＳ的编辑工作。ＴｏｐＳｔｙｌｅ是当年捆绑在ＨｏｍｅＳｉｔｅ中的一款强大的ＣＳＳ编辑器，ＨｏｍｅＳｉｔｅ停止开发以后ＴｏｐＳｔｙｌｅ就被独立出来了，一句话，比ＤＷ８自带的好用多了。
技巧：假如你在制作页面的时候觉得编辑视图视野太小，反复拖动滚动条实在难以忍受，可以通过快捷键Ｆ４来跳转到全屏模式，或者利用“设计视图”下方的缩放工具来缩放页面（ＤＷ８新功能）。
占领高地—图文结合电子春联
战略目标：占领高地
战略意义：将图片背景与文字相结合，制造更强烈的视觉冲击力
战术讲解：在猛烈的交火过后，占领制高点是最重要的事情，只有这样才能更好地把优势转换为胜势。在我们的拜年页面中同样有了强大的交互功能，更要以图片作为背景，以文字镶嵌其中，看上去才更像是为亲朋好友专门定制的拜年页面。
开始战斗：春节挂春联是中国人的老传统了，红红的纸上写下祝福的话语，还有什么能比这更吉利的呢。有了前面的知识做基础，制作电子春联那就真是易如反掌了。
ＳＴＥＰ１
新建一张页面，插入一个宽度为５００像素的表格并居中，然后将其分为三行，第二行分为三列。
ＳＴＥＰ２
准备好一张春联的素材，然后用Ｐｈｏｔｏｓｈｏｐ等图像处理软件制作一张宽度为５００的春联背景作为横批（图２９）。
ＳＴＥＰ３
将光标焦点置于顶部单元格时将属性面板中的“背景”指向到你准备好的春联背景素材（点击输入框后方的文件夹图片浏览图片），然后单元格高度拉伸到合适大小并将属性面板中的“水平”属性设置为“居中对齐”，再在下面一层左右两个单元格中分别插入春联图片（图３０）。
ＳＴＥＰ４
为第一层的单元格设置好ＣＳＳ样式并调用，然后依照老规矩将＜ｓｐａｎ＞＜／ｓｐａｎ＞加入源代码的相应位置中去。
ＳＴＥＰ５
将我们刚才忽悠新闻页面中的表单源代码ｃｏｐｙ到第三层的单元格（注意ａｃｔｉｏｎ的属性改为本页文件名，ｂｏｄｙ标签后面加入ｏｎｌｏａｄ＝＂ｒｅｔｕｒｎｏｎ＿ｌｏａｄ（）；＂），然后＜／ｈｅａｄ＞前面的ＪＳ代码也相应地复制过来（图３１）。
切换到浏览器里试验一下，呵呵，嘿嘿，哈哈，革命成功了，我们的心血没有白费，这样的一幅电子春联送给亲朋好友，还不得把他们乐上天呀（图３２）。
经过我们坚持不懈的斗争，这场新春送祝福超级大作战就彻底结束了，亢奋的你是否还意犹未尽，或许还在为如何挑选精美的素材而苦恼呢？我就好人做到底，送佛送上西，使出我最后的绝招：资源网站一箩筐！
经验与技巧
经验：要将网页做的好看仅仅依靠ＤＷ８是不行的，掌握一种图像处理软件也非常重要，例如Ａｄｏｂｅ公司的Ｐｈｏｔｏｓｈｏｐ和Ｍａｃｒｏｍｅｄｉａ公司的Ｆｉｒｅｗｏｒｋｓ，不过Ｍａｃｒｏｍｅｄｉａ已经在前不久被Ａｄｏｂｅ收购，Ｆｉｒｅｗｏｒｋｓ前景难以预料，究竟使用何种软件，那就根据个人喜好和习惯了。
技巧：如果表格中再嵌套一个同样大小的表格，那么在设计视图里它们的边缘会紧紧挨在一起，难以区分，按下Ｆ６则将以表格扩展模式显示，表格与表格间就能空出一段距离来方便控制了（并不影响最终效果）。
３祝福一大堆资源一箩筐
网页制作的学习并不是一朝一夕的事，我们上面所介绍的内容只不过是沧海一粟。并且，涉及到修饰用的图片需要专业的图像处理软件来完成，这对于初学者来说几乎是不可能完成的任务。但是，我们有互联网这个大宝库，只有想不到没有找不到。下面我就和大家一起搜罗一番。
ＧＩＦ、ＪＰＧ图片类资源。对于初学者来说多多利用现有ＧＩＦ动画，不但很容易学会使用，也可以使作品生动漂亮。首先就来给大家介绍一些图片素材网站。
首先推荐《谦龙素材》
网址：ｈｔｔｐ：／／ｗｗｗ．ｃｃｃｅｎ．ｃｏｍ／ｓｏｕ／ｉｎｄｅｘ．ｈｔｍ
此素材站图片丰富，包括动画图库、图标图库、背景图库、线条图库、按钮图库、背景音乐、创意图库等，分类详细，非常适合初学者们在此站搜罗需要的各类图片素材。
《网页制作大宝库》
网址：ｈｔｔｐ：／／ｗｗｗ．ｄａｂａｏｋｕ．ｃｏｍ／ｇｉｆ／
《好素材》
网址：ｈｔｔｐ：／／ｗｗｗ．ｈａｏｓｃ．ｃｏｍ／Ｓｕｃａｉ／２５／Ｌｉｓｔ１．ｈｔｍ
《番禺信息网之网友天地ＧＩＦ动画库》
网址：ｈｔｔｐ：／／ｗｙｔｄ．ｐａｎｙｕ．ｇｄ．ｃｎ／ｇｉｆ／
《ＩＴ网络教室素材库》
网址：ｈｔｔｐ：／／ｉｎｆｏ．ｉｎｆｏｓｃａｐｅ．ｃｏｍ．ｃｎ／ｓｕｃａｉ／ｉｎｄｅｘ．ｈｔｍｌ
以上推荐的几个站点，都属于分类详细、内容丰富的ＧＩＦ、ＪＰＧ图片素材资源库，适合初学者们在里面搜索自己需要和喜欢的图片。
如果觉得自己做得不够好或者时间上不允许大家慢慢做贺卡来送给亲友们，那我就推荐大家去一些知名的贺卡网站，直接挑选漂亮的贺卡来发送给亲友们。提到贺卡，那首推的就是国内知名的《卡秀》了（网址：ｈｔｔｐ：／／ｗｗｗ．ｋａｘｉｕ．ｃｏｍ，您只需要在卡秀上免费注册一个用户，就轻松的选择站内的免费贺卡通过ＥＭＡＩＬ的方式发送给亲友了。
除了卡秀，还有网易电子贺卡（网址：ｈｔｔｐ：／／ｃａｒｄｓ．１６３．ｃｏｍ）、ＴＯＭ贺卡站（ｈｔｔｐ：／／ｃａｒｄ．ｔｏｍ．ｃｏｍ）、ＱＱ贺卡站（ｈｔｔｐ：／／ｅｃａｒｄ．ｑｑ．ｃｏｍ）等国内著名网站。以上这些网站提供的贺卡在精美程度和安全性上都非常有保障，大家可以放心使用。
而如果大家想自己制作的网站上能有更互动、生动的特效，那就需要用上Ｊａｖａｓｃｒｉｐｔ程序代码（以下简称ＪＳ代码）和ＣＳＳ样式表（以下简称ＣＳＳ）了，而对于初学者来说，自己去学习编写ＪＳ代码和ＣＳＳ是非常困难的，那要怎么办呢？其实在我们的互联网宝库里，有非常多的已经编写好的ＪＳ代码和ＣＳＳ供给大家免费使用，那在哪里能找到这些呢？不用怕，跟我来！
首先推荐给大家的是国内著名站点《中国站长》（网址：ｈｔｔｐ：／／ｄｏｗｎ．ｃｈｉｎａｚ．ｃｏｍ）登录此站后，您只需要在搜索栏内填写上“特效”或ＣＳＳ并选中“程序介绍”条件，然后就可以搜索出许多效果很棒的特效代码
之外还有著名的《洪恩在线》（网址：ｈｔｔｐ：／／ｗｗｗ．ｈｏｎｇｅｎ．ｃｏｍ／ｐｃ／ｈｏｍｅｐａｇｅ／ｊａｖａｓｃｒｉｐｔ／ｉｎｄｅｘ１．ｈｔｍ）。洪恩在线有个很值得推荐的地方就是不但它提供这些代码，并且有详细的教程教授大家如何使用这些代码。另外洪恩在线还有制作网页的各种初级教程和技巧例如网页制作技巧、Ｄｒｅａｍｗｅａｖｅｒ教程、Ｆｌａｓｈ实例教程、ＦｒｏｎｔＰａｇｅ教程、ＣＳＳ教程、各种实例等，令初学者朋友们很容易走进网页制作的大门。
素材和代码大家都能找到了，那如何把您的作品放到互联网上给大家欣赏呢？对了，我们需要一个网络空间来存放您的作品，这样您的作品就可以在互联网上有一个门牌号——网址。那我们我们如何来找互联网空间存放这些精美的作品呢，不用着急，我来帮您找。在互联网上有许多网站是提供免费的网络空间的，一般只需要简单地注册一个用户就可以使用了。
下面给大家推荐几个比较好的免费网络空间站点。
《３６５人》（网址：ｈｔｔｐ：／／ｗｗｗ．３６５ｒｅｎ．ｃｏｍ）、《个人主页空间》（网址：ｈｔｔｐ：／／ｗｗｗ．ｋｕｄｎｓ．ｃｏｍ）、《免费吧》（网址：ｈｔｔｐ：／／ｗｗｗ．ｆｒｅｅ８．ｃｏｍ）、《免费中国》（网址：ｈｔｔｐ：／／ｗｗｗ．ｆｒｅｅｚｇ．ｃｏｍ）、《游Ｅ资源》（网址：ｈｔｔｐ：／／ｗｗｗ．ｕｏｏｅ．ｃｏｍ）、《中国免费空间网》（网址：ｈｔｔｐ：／／ｗｗｗ．ｈｍｓｏｎ．ｃｏｍ）。以上这些网站都提供免费的空间服务，大家可以任意选择。