轻松掌握网页制作Dreamweaver学习课件.pdf

一、轻松掌握网页制作当你在网上冲浪时，会欣赏到很多制作精美的网站，在羡慕的同时，你想亲手制作 网页吗？你想让自己制作的网页功能更强大吗？好，那我们就一起学习Dreamweaver 吧，这可是制作主页的好工具呀！你可能会说，我既不懂HTML,也没进行过程序设计，能学会吗？告诉你，一点儿 都没问题，Dreamweaver是可视化的网页制作工具，很容易上手，可以让你轻松地制作 出自己的网页。慢着慢着，先告诉我什么是可视化？可视化的意思就是你在Dreamweaver中制作成 什么样，在浏览器中就能看到什么样，也就是常说的“所见即所得”。那还等什么，快跟我学吧！1、第一次新鲜接触(1)什么是 Dreamweaver工欲善其事，必先利其器。Dreamweaver在多媒体方面颇有建树的Mac romedia公 司推出的可视化网页制作工具，它与Flash Firework s合在一起被称为网页制作三剑客,这三个软件相辅相承，是制作网页的最佳选择。其中，Dreamweaver主要用来制作网页 文件，制作出来的网页兼容性比较好，制作效率也很高，Flash用来制作精美的网页动 画，而Firework s用来处理网页中的图形。图1 Dreamweaver启动画面Dreamweave字面意思为“梦幻编织”，这一软件有着不断变化的丰富内涵和经久 不衰的设计思维，它能充分展现你的创意，实现你的想法，锻炼你的能力，使你成为真 正的网页设计大师。好吧，未来的网页设计大师们，让我们一起在Dreamweaver的空间驰骋，在网上编织我们的梦想吧！一、轻松掌握网页制作1、第一次新鲜接触（2）软件界面介绍现在我们启动DreamWeaver,来见识一下它的面貌。在安装Dreamweaver 3之后，它会自动在Windows的“开始”菜单中创建程序组,打开开始”菜单，选择程序-Mac romedia Dreamweaver 3-Dreamweaver 3 v 命令,便可启动Dreamweaver（图1）。软件启动后，会新建一个空白的HTML文档等候编辑。陵宣坛）查携*助Sff 3缶钱序叱）注精 Li h one lyg0JJ关闭系城ToolsTiikZip 附件 总动Int miU Expl*r*rS-DDS方式OEfictSt黑在线Honq t Out look Expressh nd”*资需3理附田4：固9 38图 1 启动 Dreamweaver 3我们看一下它的界面1图2,。上面是标题栏，显示出被编辑页面的标题，在括号 内显示出文档所在目录及文件名，如果有星号出现则表示页面中没保存的改动。标题栏 下面是菜单，里面列有软件的功能列表，这与其它软件没什么两样。中间这一大块空白 地方是编辑区，我们就在这里制作网页。被贝的4M,“一次$立族畲*9AUucIccA医等内昊学出文总所在的 目录晟文件*,*步出3点承贝中设绿在修立普蠹对 泉看层次号种用于皇学和体中文拈的大小图2 Dreamweaver界面介绍窗口最下面由三部分组成，从左向右分别为标签选择器(tag selec tor)s页面信息 和快速启动栏。最左面的是标签选择器，可以用来显示光标所在位置或所选对象的层次 结构，在页面中选定某个对象后，标签选择器中会将选择的标签加粗显示，比如我们选 中一个图形，则img字样会被加粗(图3)0标签选择器的用途很大，以后我们会经 常使用。Gt awvEdi t Si zes.536X196(640 x 480,Default)600X300(640 x 480,Afaj cimi Hed)T60X420(600 x 600,Maximized)795X4 T0(63Z X 6Z4,Maximized)955X600(1024 x 768,Maximi zed)592 x 32&5K/2 sec 曲山谓，/图3标签选择器图4显示和控制窗口的大小底栏中间是一些页面信息，第一项800X600,用于显示和控制文档窗口的大小，单 击旁边的小箭头，可以从列表中选择窗口的尺寸图4）。第二项7K/2sec,用于显示和估计文档的大小及下载这个页面所需时间，包括所有 与其相链接的图片及Shoc k ware电影。底栏最右侧的一排按钮叫迷你发射器（Mini-Lau nc her）（图5）,其实就是打开常 用窗口快捷工具栏，比如Site（站点管理器）、Lib rary（库管理）、CSS Styles（样式 编辑器）、Html Sou rc e（源代码编辑器）等窗口。图5迷你发射器和“Lau nc her”面板假设我们要调出HTML源代码编辑器，可以在发射器上点最后一个按钮，也可以 按下F1 0键。按下Shif t+F4,可以看到迷你发射器放大的样子，叫做“Lau nc her”面板，点击这里弹出相应的窗口，我们以后会经常用到。DreamWeaver窗口中还有多个面板，这些浮动面板中有一些常用功能的快捷方式，和PhotoShop很象，不要被这些面板吓倒，真正用起来还是很方便的。这是对象面板（即Ob jec t面板），如果页面上看不到，可以按下CW+F2键将其调 出（图6）这个面板里集成了“Insert”主菜单中的命令，用于在网页中插入图形、表 格等内容。现在看到的是“普通面板”，单击面板上部“Common”旁的小三角，弹出一个菜单，可以切换到其它对象面板中，比如选择Frames”，就切换到框架面板中,里面提供了创建框架的快捷按钮。图6对象面板及面板间的切换这些图标都很直观，相信你一眼就能看出来它是做什么的。如果不知道某个按钮的 功能，可以将光标停在此按钮上，这时就会出现提示信息，显示其功能。这是属性面板（Properties）,如果页面上看不到，可以按下Ctrl+F3键将其调出。属性面板主要用来设定元素的属性。这个面板比较灵活，变化也很多，它随着我们选择 对象的不同而不同。比如我们选择了一幅图片，那么属性面板上将出现图片的相应属性（图7）,如果我们选择的是表格，它相应的会变化成表格的相应属性。我金慈里巧制更，的展性,电刖 mage.4K丸76Src ywab，imgO，Handwav.gif _|A lign|Browser DeFauk|叫H SLink|刍口 Mt图7收缩时的属性面板属性面板中有一个向下的小三角图标，单击后将出现更多的扩展属性图8）。再 次单击小三角图标，将关闭扩展属性，恢复到最初状态。京逋里对a收”催板图8扩展后的属性面板好了，DreamWeaver的界面就介绍到这里，是不是听糊涂了？没关系，你只要先有 个印象就行了，具体用法我们在下面的教程中讲到。一、轻松掌握网页制作2、制作简单的网页千里之行，始于足下。下面我们开始Dreamweaver之旅，相信这是一次有趣、有益 的旅行。（1）定义一个本地站点在开始用Dreamweaver制作网页时，首先要定义一个本地站点。作为一个网站，里 面有很多网页文件、图片，甚至Flash动画等，如果不进行管理归档，分散在硬盘的各 个地方就无法方便地进行网页发布。定义本地站点，就是在硬盘上建立一个目录，将所 有的网页和相关的文件都放在里面，以便进行网页的制作和管理。单击“Site”菜单下的“New Site”命令，弹出Site Def inition”（定义站点）对话 框（图1所示）o在Category列表中的第一项“Loc al Inf o”被选中，用来定义一些 本地信息。在“Site Name”框中输入站点的名字“myweb”,单击Loc al Root”输入框右侧 的文件夹图标，弹出选择本地文件夹对话框，我们点“新建文件夹”按钮，在D盘根目 录下建立一个名为myweb的文件夹，并选择它，单击“保存”按钮，“Loc al Root”输 入框中显示“D：myweb，这个文件夹将作为我们的站点文件夹，以后所有的网页文 件都放在这个文件夹下，相当于先选块地方以便盖房子。糖点的名系iU*MI文件图1定义一个本地站点选中“Ref resh Loc al File List Au tomatic ally”,表示自动刷新本地文件列表，以便在 向网站中复制文件的时候，网站文件列表会自动刷新。选中“Use Cac he to Speed Link Updatesn,表示为站点生成一个高速缓冲存（Cac he）文件，它可以自动跟踪网站内的文件链接情况。当文件移动、重命名或删除时，可以自 动修改所有相关链接。单击“OK”按钮，会弹出一个对话框,单击“Create”，弹出“Def ine Sites”对话 框，窗口中列出了我们刚刚创建的名为“myweb”的站点。单击“Done”按钮，定义的 站点就生效了（图2）.Sit s图2定义站点过程中的对话框观察一下新建的站点，发现它有点儿象资源管理器，右侧显示网站内的所有文件,并且以D：myweb为根目录（图3）.关闭弹出的Site窗口。File Edit View Site Window Help:Site-meweb图3站点管理器一、轻松掌握网页制作2、制作简单的网页(2)添加网页文字好，下面我们开始制作网页的正文。现在光标处在正文编辑区，和记事本一样，我 们输入文字“笨象先行”。敲一下回车，光标定位在下一段中，输入一些主页说明文字(图 1),Untitled Document(Untitied-1*)-Dreamweaver-a|x|File Edit Vi ew Insert Modify Text C ommands Site Window Help笨象先行嗨，大家好！我是笨象。这是我的第一个主或，也是第一个 D r eweaver作品，里面包含逊格好、照片和一些文学作品,希望大家喜欢。请多给我提意疝body)9441 x 246 IK/1 sec 岛 CJW 普,图1在编辑区内输入文字对了，千万别忘了保存文件哟！按下Ctrl+S键，在“Save As”对话框中输入文件 的名字“index，表示这是一个主文件，单击“保存”按钮（图2）。图2及时保存网页按下F5键，弹出“Site”窗口，可以看到在D：myweb 目录下生成了一个名为 index.htm 文件（图3）。图3保存的网页出现在站点中接下来我们对文字进行简单地排版。先设置标题文字的格式，将光标定位在第一段,然后按CW+F3调出“属性面板”，点“居中”按钮，将文字设为居中对齐。选中本段 文字，点Size下拉列表框，选择字号为6,设置文字颜色为深红，并将文字加粗（图4）。图4设置文字及段落属性接下来在正文文字前加两个空格。这时你会发现按下空格键没有用，这是因为在 Dreamweaver中只认全角空格，我们可以启动输入法，按下Shif t+空格键，使其处于全 角状态，再敲两下空格键（图5）0W五宝T回|H五至I世阖图5全角半角转换同样，我们将正文文字设置为自己喜欢的格式，比如灰色4号字，这下页面看起来 好些了吧（图6）。:(BR/b/indx-Zb*Mv t v rB0Q1(,il(dit(*Ifit vr t|di y Ixt aunit$at a fift dMr.笨象先行.6野军打他丰嗨.大家好！我是笨象。这是我的第一个主页,也是第一个Dr eanwaver作品，里面包含甜的爱 好、照片和一些文学作品，希望大家喜欢.清多给找进意见I|M1 r M|3KZ I m,UJ J 1?U-图6设置好的文字效果一、轻松掌握网页制作2、制作简单的网页（3）插入图形一个页面光有文本是无法吸引人的，下面我们插入一幅图片，使页面更加生动，图 文并茂。为了保持良好的制作习惯，我们在D：myweb下建立一个名为“img”的文件夹，将主页中需要的图片都放在这个文件夹下。图1站点管理器我们可以用PhotoShop、Firework s等图形工具处理好一些图片，将图片放在img文 件夹下，为提高主页下载速度，可将图片存为gif或jpg格式。将光标定位在正文段落中，单击“Ob jec t面板”中的“Insert Image”按钮，在弹出 的对话框中选定图片，点“Selec t”按钮，图片被插入到文档中（图3）。此时图片将段落挤开了，我们可以对其对齐方式进行设置。图片处于选中状态时,属性面板中显示的是图片属性，单击“Align”下拉列表框，选择“Right”，看，图和 文字混排了（图4）0图3插入图形图4设置图片右对齐是不是觉得图和文字排得太挤了，那好，我们给图片和文字间加点距离。在“属性 面板”中的“H Spac e”框中输入10,敲下回车，图的左右各出现10个像素的间距。同 样，我们可以在“V Spac e”框中也输入适当的数值，使图的上下也与文字有一定的间 距（图5）。这一9*!)文多图5设置图片与文字间距xts7s sI*口 r有的上网者为了加快页面下载速度，会设置不让图片显示，这时我们可以给图形加 个说明文字（图6）。大*第蜚*火*图6设置图片与文字间距在属性面板中的“ALT”框中输入“我的形象”，这样在用户浏览器不支持图形时,在这个图片的位置会出现所加的注释；如果浏览器支持图片，将鼠标停在这个图片上一 小会儿，也会出现这行说明文字。多为上网者考虑，要养成给图形加ALT的好习惯。一、轻松掌握网页制作2、制作简单的网页(4)加超级链接简单的主文件完成后，我们可以依次将其他页面，比如我的爱好、我的收藏等页面 建好。这样我们就可以通过超级链接将各个页面连接起来。我们选中段落中的“我的爱好”四个字，单击“属性面板”中“link”列表框右侧 的文件夹图标，选择已经做好的“mylik e.htm”文件，再单击“Selec t，文字的超链接 就加完了(图1)。搜寻（X）:|j|myweb 画说宜IB1e s d/like.htm文件名 国）：|mylike.htm Select|文件类型（I）：|m Files（*.*）三 取消URL:|mylike.ht mRelat ive To:（Document index.ht m图1选择链接文件在页面上点一下，取消文字选中状态，这时看到加链接文字变为蓝色，并且带下划 线。将光标定位在链接文字中，在属性面板上可以看到其链接文件，单击“Target”列 表框，选择“_b lank”，链接页面就会在一个新窗口中打开（图2）。图2属性面板上做文字链接做了这么久，你一定想知道页面在浏览器中的效果吧！按下F1 2,系统会启动主浏 览器进行页面预览，系统默认的主浏览器是Internet Explore。看，这就是页面预览效果,点一下刚做好的链接，就跳转mylik e.htm页面了（图3）。匕2gf,7，I仪，笨象先行-J.*!.这是我的第一个主也是面、H月加一箜x K才我.s多蛤程发I第一个加.9件品,甲图3点击可看到浏览效果不仅文字可以做超链接，图片也可以。我们可以为刚插入的图片做一个超链接，选 中图片，在属性面板中，也有“Link”项，如果知道文件名，可以直接在“Link”文本 框中输入，我们输入“introdu c e.htm（假设这是一个自我介绍的页面），“Target”属 性也设为“_b lank”，用图形做链接时，其Border值一般都设为0（图4）。1.Image,3K W 150 Sr c img/xiang 1.gif 口Ahgn|Right _t。H 116 Link int r oduce.ht mQO A IS我的感成Map V Space TargetW 口 021 H Space 10 Low Src_blank|Border 0/三屋|音|铮口 Refresh j Edit 公图4用图片做链接进入浏览器后，只要单击这个图形，就会跳转到相应的页面。图5）。笨象先行4 W.这是宛的第一个主R.13是 建一小Or egEdver作品.S面X,图5点击可看到浏览效果一、轻松掌握网页制作2、制作简单的网页（5）标题和页边距设置再看一下我们做好的页面，你是否觉得少些什么？噢，原来页面还没有标题，背景 也显单调。下面我们就来添加标题和背景图片。按下Ctrl+J键，弹出“Page Properties”对话框（图1）。Title文本框中用来添加标 题，当用户浏览页面时，页面标题可以帮助了解页面中的内容。我们在框中输入“欢迎 到笨象的家做客”。接下来单击“Bac k grou nd Image”框右侧的Browse”按钮，从弹 出的对话框中选择我们事先做好的背景图，回到页面属性框中。图1设置页面的标题和背景单击“0K”,可以看到页面有了背景。按下F1 2,可以看到在浏览器中，刚才输入 的标题显示在标题栏中，页面背景也不错。LU C&i r.M ci.笨象先行图2点击可看到浏览效果从浏览效果中我们可以看到，页面顶部与浏览器工具栏紧挨着，显得很挤，我们可 以给页面设置边距。现次按下Ctrl+J键，可以看到页面属性对话框中可以设置页边距。Top Margin表示页面距顶边距离；Lef t Margin表示页面距左边距离；Margin Height表示边距高度；Margin Width表示边距宽度。图3设置页边距我们将Top Margin设为20,Lef t Margin设为10,单击“Apply”按钮，可以看到 页面上面不那么挤了，关闭设置对话框。进入浏览器，可以看到新的页面效果。图4点击可看到浏览效果最后我们再保存一下页面，一个简单的个人主页就完成了。怎么样，很容易吧！如 果你要做出更漂亮，更复杂的页面，就继续学习下面的课程。一、轻松掌握网页制作3、细化和完善网页如果你觉得这个主页面还太简单了，我们就将其进一步细化，使用其功能更完善些。(1)插入Flash动画在Dreamweaver中，可以很方便地插入Flash动画、Shoc k wave电影、Java小程序 等，增加网页的动感，让你做出来的网页更吸引人。下面我们在网页中插入一个Flash动画。将光标置于页面底部，单击“Ob jec t面板”中的“Flash”图标，在弹出的对话框中选择一个swf文件，插入的Flash动画显示为一 个灰色的方框，里面有Flash标志。在属性面板中可以设置它的高度（H）和宽度（W）。如果想看一下效果，就点一 下属性面板上的播放按钮（图1）。进入浏览器，可以看到Flash动画的效果（图2）。图2点击可看到浏览效果不过我们发现当前Flash为白背景，看起来不太谐调，这时我们可以设置Flash动 画的背景为透明。选中这个Flash,按下Ctrl+Tab切换到源代码，在前加入代码：Vparam name=WMODE valu e=transparent（图3）。洪星在缝Hong e 又/口 c 二1 _I 4.皿3,(/ob jec t)图3选择链接文件关闭HTML源代码编辑器，浏览页面，这回Flash是透明的了。有了 Flash动画,真的为页面增色不少！（index5.htm）（图4）0图4点击可看到浏览效果、轻松掌握网页制作3、细化和完善网页（2）项目列表的使用现在需要在主页中添加一些内容，比如在简介下面列出个人主页中的主要内容。为了使用输入的内容整齐有序，我们使用项目列表功能。先输入项目列表的第一行,然后选择“Text”（文本）菜单中的“List”（列表）项，弹出相应的子菜单。我们选 择“Unordered List”（无序列表，也称作项目符号）命令，可以看到此行前面加了一个 小圆点，这就是项目符号（图1）。更便捷的方法是点属性面板上的“UnorderedList”按钮。我的爰好入f文字我的爱好衿的爱好I以目8目*图1项目列表的使用在第一行后面回车，下一行中也出现在一个项目符号，我们可以继续输入项目中的 其他内容。内容都输入了，想要结束项目列表，就在最后一行后连续按两下回车。现在的列表叫无序列表，各个列表项之间没有顺序级别之分，用一个项目符号作为 每条列表项的前缀。如果你觉得用项目符号不能表示列表每项的顺序，可以将其转化为 有序列表，也就是每项有序列号。将这几行选中，打开属性面板，这里提供了有序列表和无序列表的快捷方式（图2）。图2选择链接文件点一下“Ordered List”（有序列表，也称作项目编号）按钮，选中段落就以编号方 式排列了（图3）。的的的的 我我找我 番画家庭庭 番画家 的的的的 我我 一二二、二 二4 L Z3.4.图3带项目列表的属性面板 注意：如果想取消项目列表，就再点一下属性面板上的“Ordered List”按钮。如果我们想列出第二条中的细项，就可以使用多级项目列表。我们先在第二条下面 添加其细项内容，一共有两条。将这两行其选中，单击属性面板中的“Indent”（缩进）按钮，这两项就变为下一级内容了。（图4）。12 3 4 5 6我文剪我我我器品爵庭 寄他画家 的田的的作品庭 妻剪收画家 的 的的的 我找找我-V 1-2 二;二 二、L2.3.4.图4多级项目列表一、轻松掌握网页制作3、细化和完善网页（3）设置项目列表属性可以看到，下一级项目编号自动为数字形式，能不能改为其他形式呢？当然可以了，通过设置项目列表的属性，可以改变项目符号或编号的类型。将光标插入点放在第二级项目中的任意位置，然后单击“Text”菜单下的“List”项，再选择“Properties（属性）命令，打开列表属性对话框。在“List Type”（列表类型）下拉列表框中选择列表类型，我们选择“Nu mb ered List”（编号列表）；在“Style”（样式）下拉列表框中，可以选择相应的项目列表样式。这 里选择该选择“Roman Large”（大写罗马数字）（图1）。.Default旦9 热.Sm=L-G/i 1 JDefaultNumber(1,2,3.)A lphabet Small(a,b,A lphabet Large(A,B,图1项目列表属性对话框设置完毕，单击“OK”按钮，看，第二级项目编号变为大写罗马数字了1图2）。L Z3.4.作品 创精庭 箜翦收画家 的 的的前 我LZ我我我图2改变项目列表的形式注意：我们也可以通过单击属性面板上的“List Item”（列表项）按钮来打开该列表属性对话框，要注意的是，必须展开属性面板，才可以看到此按钮。最后我们浏览一下有了项目列表的页面（图3）。图3点击可看到浏览效果一、轻松掌握网页制作3、细化和完善网页（4）插入水平线和版权符我们在页面的下部，Flash动画的上面，加上版权方面的说明文字。先插入一条水 平线，用以分隔文档内容，使文档结构清晰明白。将光标定位在最后一行，敲回车换到下一段。单击Ob jec t面板中的“Insert Horizontal Ru le”邕I按钮，就插入了一条水平线。在 属性面板中，设置水平线的宽度W为400像素，对齐方式Align为居中对齐（Center）（图 1）,水*皿 水干居中B齐 是涮M图1水平线属性面板按下Shif t+Enter键换行，输入相应的文字。文字中需要一个版权符，输入方法为：单击Ob jec t面板上的“Common”下拉箭头,选择“Charac ters”，切换到字符面板，这里提供了一些经常使用的字符和符号。单击 第一个图标回，版权符就插进来了，在页面上显示为“&c opy;，在浏览器中会显示 为。Copyright©jHonginiiig.Li 2000-07-02 给我来信图2插入的水平线和版权符浏览一下页面（图3）,美观多了吧！图3点击可看到浏览效果一、轻松掌握网页制作3、细化和完善网页（5）创建电子邮件链接接下来在网页上添加一个E-mail链接，方便用户意见反馈。把光标置于文档窗口要显示电子邮件链接的地方，选择“Insert-E-Mail Link”命令。在“Insert E-Mail Link”对话框的Text框中输入链接显示文本“给我来信”，在下面的 E-Mail框中输入E-mail地址（图1）。图1插入电子邮件的链接浏览此页面（图2）,单击“给我来信”的链接，打开浏览器默认的电子邮件程序 处理程序，收件人邮件地址被电子邮件链接中指定的地址自动更新，无需浏览者手工输 入。图2点击可看到浏览效果一、轻松掌握网页制作3、细化和完善网页（7）设置链接字体的颜色在浏览别人网页时，我们会发现超链接的颜色很丰富，鼠标放上去是一种颜色，点过之 后又是一种颜色，能不能让我们的页面也有这样的属性呢？在文档窗口中单击鼠标右键，从快捷菜单中选择“Page Properties，又弹出了“页面属 性”对话框，老朋友了，你还认识它吧！我们曾在里面设置过标题、背景和页边距。Ba ckgr ound：J|#FFFFFFLeft Margin：|10一 Text：|#0cle1066一 Links：匚11洪周在线 a j t i Hong(ncomVisi ted Links.y11#660066 3 A ctive Links：|#C匚口口口口 Margin 也idth：|Margin Height：|amMMont ammaa图i设置链接字体的颜色我们看对话中间的选项（图1）:Text（文本），用于设置文档中文字的颜色，我们可以不作设置；Link s（链接）用于设置未访问过的超链接文字颜色，我们点一下旁边的颜色板，选择深 蓝色；Visited Link s（访问过的链接）用于设置文档中已经访问过的超级链接的文字颜色，我们 将其设置为紫色；Ac tive Link s（正在访问的链接）用于设置文档页面中正在访问的超级链接的文字颜色，将其设置为红色。点“OK”，超链接文字的颜色设置完毕。按F1 2进入浏览器中，可以看到超链接字显示为深蓝色，将鼠标放在超链接字体上时显 示为红色，点一下，再回到当前页面，可以看到当超链接变为紫色了（图2）。图2点击可看到浏览效果好了，经过我们的细化，当前页面功能更完善了，相信你也学会了很多东西。不过别骄 傲哟，这一章只是入门，要想做更复杂的页面，就要用到表格、层或框架等内容，还要创建 一些表单，以便于和用户交流。这些内容我们将在下面的教程中一一讲到，你可要认真学呀!好，不见不散！二、深入学习和使用1、用表格做网页表格在网页制作中有着举足轻重的地位，很多网站的页面都是以表格为框架制作的，这 是因为表格在内容的组织、页面中文本和图形的位置控制方面都有很强的功能，灵活、熟练 地使用表格，会使你在网页制作中如虎添翼。（1）插入第一个表格我们看一下这个网页，虽然看起来很复杂,但主要是利用表格制作的图。去掉文字和图形，可以看到其表格框架为下面这个样子1图2,。图1页面的效果（点击放大）图2页面的表格结构（点击放大）下面我们就利用表格制作这个网页。启动Dreamweaver后，自动产生一个空文档。我们 先来定义网页尺寸，不同的分辨率所查看的网页最终结果是不一样的，为了照顾更多的上网 者，我们设置640X480分辨率（图3）,单击状态栏上的窗口尺寸箭头，在弹出的列表中选 择“600X300（640X480）,Maximizedv,窗口就小了，做出的网页在640X480分辨率下 会显示正常，编辑区大小为600X300,我们编辑的网页宽度就定为600,高度可以大些，在 浏览器中显示时会有竖直滚动条。图3设置页面尺寸 我们看一下网页的布局，共有三个主要表格，最上面的表格放置logo图标和b anner广告 条，中间的表格为主要栏目切换条，最下面的表格为网页正文。根据网页布局，我们先来制 作最上面的表格。单击“对象面板”中的插入表格图标，弹出“InsertTab le”对话框（图4）。设置行数（Rows）为1,列数（Colu mns）为2,表格宽度（Width）为590Pixels,表格线宽度（Border）为0,另两个选项“Cell Padding”表示表格内文本与表格线的距离，“Cell Spac ing”表示表格单元 格之间的距离，这里我们不做设置，单击“OK”，表格就插进来了。行政裹林富度列政表密内文本与我容就约距离小单元警切物距离图4“插入表格”对话框将光标定位在表格的第一个单元格内，可以看到状态栏左侧的标签选择器处显示为u b odytab letrtdv,其中tab le表示表格，tr表示表格中的行，td表示单元格，现在td 被加粗显示，说明光标处在单元格内。单击一下tab le,标签选择器处显示为“b odytab letrtd”（图5）,再看编辑区内的表格，表格周围为一圈黑线，表示表格 被选中了，四周还有儿个黑色的小方块，是表格拖放手柄，可以用来改变表格的大小。Co dyNldGQ（t*.ody i I他升矫在手无撑内 热寸衰1t建中T图5用标签选择器选择表格选中表格后，我们查看一下属性面板，可以看到刚刚设置的一些表格属性，行数（Rows）为1,列数（Cols）为2,表格宽度（W）为590Pixels。以后要改变表格的属性，就可以在属 性面板中进行了（图6）.图5表格的属性面板按Ctrl+S,将此文件保存在D盘myweb文件夹下。接下来我们在表格中插入图形。在第一个单元格内单击，然后按下Ctrl+Alt+I键，弹出插 入图片对话框，选择事先做好的log。图片，单击“Selec t”，图片就插到第一个单元格中了。在属性面板中可以看到，此图片宽度为170像素，我们可以将第一个单元格的宽度也调 整为170像素宽。按一下右方向键，光标就定位在第一个单元格中了，这时属性面板中显示 的是第一个单元格的属性，我们在宽度输入框中填入170,再敲一下回车，第一个单元格就刚 好容纳下所插图形了。同样，我们可以在第二个单元格中插入Banner图形，第一个表格就做 好了（图7）。图7点击可看到浏览效果上一节二、深入学习和使用1、用表格做网页（2）制作第二个表格下面我们制作栏目切换条。这是一个一行、五列的表格，我们用上面的方法插入，表格的宽度也设为590Pixels,Border 为1,单元格间距Cell Spac ing为0（图1）0图1“插入表格”对话框将光标定位在某一单元格中，按下Ctrl+A键，选中所插入的表格，在属性面板中设置表 格高度(H)为20 Pixels(图2)。Rows fl W1590 pi;*l5 C ellP adA lign Default 9,且older pF 二Table NamepixelsJ C ellSpace 0V SpaceHSpaceLight BrdrDark BrdrBgBg J囿:B迎二4米阚在跷单上防距，域AdURi图2表格的属性下面我们进行各种颜色设置，使表格有背景色和立体效果。先设置表格背景色，单击属 性面板的最下排颜色选择按钮“Bg”，从弹出的颜色列表中选择一种绿色(#A3C06D)o接下来设置表格边框高亮度效果(Light Brdr)的颜色，单击颜色选择按钮，从颜色列表 中选择一种深颜色，这里我们选择“#003300”，用同样方法设置表格阴影效果(Dark Brdr)颜色为#FFFFFF,表格就变成了这个样子(图3)。图3在属性面板上设置立体效果我们把最后一个单元格背景设置为另一个颜色，表示此项为当前激活的选项。在最后一个单元格内单击鼠标，此时属性面板变为当前单元格的属性，用上面的方法设 置背景颜色为#CCCC33,这里再告诉你一个选择颜色的方法，当单击颜色选择按钮后，鼠标 指针变为一个吸管的样子，这时就可以在屏幕上吸取颜色了，你可以直接到我们的例子中吸 取所需颜色。如果你懒得这样做，就直接在颜色输入框中键入“#CCCC33”（图4）0图4设置单元格背景你可能会问这样一个问题，最后一个单元格刚才是绿色，现在又是黄色了，这是怎么回 事？这要从表格（tab le）、表格行（tr）和单元格（td）的格式的优先级说起。如果我们同时 对表格、表格行和表格单元格设置了不同格式，比如设置了不同的背景颜色，那么那一个优 先显示呢？其优先级为：表格单元格表格行表格，也就是tdtrtab le,所以这里我们将此单元格的 颜色设置为黄色，而将整个表格颜色设置为绿色，则在整个表格中只有这个单元格颜色为黄 色，其他单元格颜色都为绿色。最后我们在此表格内加上文字和相应的链接，第二个表格就完成了（图51 o图5点击可看到浏览效果二、深入学习和使用1、用表格做网页（3）表格的嵌套在这个例子中，下面部分是一个大表格，这个表格共有三行两列，一些单元格中还插入 了一个新的表格。下面我们开始制作，先在第二个表格下插入一个三行两列，宽为590Pixels的表格。先看看这条红线是怎么做出来的。在第一行第一个单元格内单击，然后向右拖动鼠标，将第一行的两个单元格选中，按下M键，选中的单元格被合并为一个单元格图图1合并单元格在属性面板中，设置此行高度H为1,背景颜色为红色。再按下Ctrl+Tab键，调出HTML 源代码编辑窗口，显示光标所在位置的源代码为：我们将单元格内的占位字符“&nb sp;删 除，关闭HTML编辑窗口，表格第一行就显示为一条红线了（图2）._col 3D an=,2,z height=Ml Mftnb3D；在代癖中普F.飞./一条虹墨 图2用表格产生红线下面我们制作中间左侧的栏目。在第二行第一个单元格内单击鼠标，设置此单元格宽度 为HOPixels,然后在此单元格内插入一个表格。按下Ctrl+Alt+T键，设置行数（Rows）为6,列数为1,b orders,单击宽度（Width）后面的下拉列表，从中选择“Perc ent”（百分比），在文本框中输入100,单击“0K”，所插入的表格刚好充满第一个单元格（图3）0光标定位亮单元林中图3在单元格中嵌套表格注意：嵌套表格的宽度受表格单元的限制，也就是说所插入的表格宽度不会大于容纳它 的单元格宽度，即不会大于UOPixels。比如我们现在看一下表格内的单元格有多宽，可以将 光标定位在第一个单元格内，然后单击属性面板下的这个切按钮，就会将表格宽度从百分比相对值转换为实际像素值，可以看到单元格宽度为1 08Pixels,再点一个旁边的则按钮，又将 表格宽度转换为百分比相对值（图4）。Tabl Name Rows 6 里100 fxVC ellFad A lignDefault 云旭 I V Space 收耍 SpaceLight Brdr 匚一旦gDar k Br dr 匚国 G|Br dr 匚|Q.j特帙也；怏为酉分比也浜同在线图4表格宽度值的转换你可能要问，为什么单元格宽度不是llOPixels呢？这是因为表格线本身宽度为1,两侧 框线就占去了 2个像素，所以单元格实际宽度为1 08Pixels。在计算表格或单元格宽度和高度 时应该注意这一点。我们刚插入的表格添加背景图。选中此表格，在属性面板中单击背景图选项右侧的图标 1图5人弹出图片选择对话框，选一个带过渡色的横条图片，这个图片就被平铺在表格内了。誉片 一文件Bg img/line.gif QT_1BgJLl B dr 匚|a图5给表格添加背景图注意，这个图片是事先处理好的，其宽度与表格宽度相同图6）。图6点击可看到浏览效果好了，你可以在这个子表格内写上文字，设置字的大小为2,居中对齐，并加上链接。其 中“报刊杂志”条目不用加链接，字的颜色也可设置得不同，表示当前页面属于此条目。最 后一个内插入一个动态Gif图，在图的属性中，设置Alt为“给我来信”，链接为“mailto:k etang.pc goldhu man.c om,这样在浏览器中，单击此图，就会启动发送邮件窗口，便于网 友直接给你来信。图7加入邮件链接好，最后再看一下页面吧！（图8）图8点击可看到浏览效果二、深入学习和使用1、用表格做网页（4）表格的编辑我们再来制作右侧的表格。在主表格第二行的第二个单元格内插入一个七列四行的 表格，表格宽还是1 00%Perc ent,边框的高亮颜色为黑色，边框的阴影颜色为白色，表 格线宽度为1,背景色为#E9FCDA,这就是完成后的效果（图1）。图1点击可看到浏览效果各列的宽度可以根据需要进行调整，方法是将鼠标指针置于列间的竖线上，鼠标指 针变为左右双向键头，按下鼠标左键拖动就可以改变列宽了图2）。图2改变列宽3时拖动鼠标，可改变行高或列宽。_如果想让所有的列都一样宽，可以设置各列宽度，这里有四列，所以可以先将鼠标 指针置于表格上面，当鼠标变为向下箭头时单击，就