第1章 用Dreamweaver制作图文网页

Dreamweaver是一款可视化的网页编辑软件，使用它可以制作出各种精美的网页。本章主要介绍Dreamweaver的启动、网页的创建、网页内容的添加与美化等知识，通过本章的学习，读者可以制作出简单而精美的网页。

实例1 新建爱乐网页

包含知识

■启动Dreamweaver

■新建空白网页文档

■保存和预览网页文档

■输入文本

1Dreamweaver CS3安装好后，单击“开始”按钮，在“开始”菜单中选择“所有程序-Adobe Design Premium CS3-Adobe Dreamweaver CS3”命令，启动Dreamweaver CS3。

1在打开的欢迎屏幕的“新建”栏中单击“HTML”选项，创建一个空白网页文档。

1选择“文件-保存”命令或按Ctrl+S组合键。

1在打开的“另存为”对话框的“保存在”下拉列表框中选择文档的保存位置，在“文件名”下拉列表框中输入文档的名称。

2单击“保存”按钮，完成网页文档的保存操作。

1将鼠标光标定位到编辑窗口中，像在Word中一样输入文本“爱乐网页”。

1按Ctrl+S组合键保存网页文档。

2按F12键，在打开的默认浏览器IE中查看网页效果。

实例2 创建美容站点

包含知识

■启动Dreamweaver

■新建站点

■配置本地站点

■配置远程站点

■管理站点

1启动Dreamweaver CS3后，选择“站点-新建站点”命令。

1在打开的对话框的“高级”选项卡的“分类”列表框中选择“本地信息”选项。

2在右侧进行本地站点信息的配置。

1在“分类”列表框中选择“远程信息”选项。

2在右侧的“访问”下拉列表框中选择“本地/网络”选项，在“远端文件夹”文本框中输入“e:\meirong”，单击“确定”按钮。

1站点创建完成后，Dreamweaver将自动打开“文件”面板，在其中可看到已创建好的站点。

2“文件”面板的站点列表中显示出了当前站点的名称“meirong”，双击该名称。

1在打开的对话框右侧的“HTTP地址”文本框中输入“localhost/meirong”。

1在“分类”列表框中选择“测试服务器”选项。

2在右侧的“服务器模型”下拉列表框中选择“ASPⅤBScript”选项，在“访问”下拉列表框中选择“本地/网络”选项，在“测试服务器文件”文本框中输入“e:\meirong”，单击“确定”按钮，在打开的提示对话框中单击“确定”按钮。

实例3 美化爱乐网页

包含知识

■复制素材

■打开网页文档

■设置页面属性

■预览网页文档

1将素材文件夹中的所有文件复制到源文件夹（源文件:\实例3\）中。

2启动Dreamweaver后选择“文件-打开”命令。

3在打开的对话框中双击要打开的网页文档，打开网页文档后按Ctrl+J组合键。

1在打开的“页面属性”对话框的“分类”列表框中选择“外观”选项。

2在右侧的“页面字体”下拉列表框中选择“宋体”选项，在“大小”下拉列表框中选择“12”选项，在“背景颜色”文本框中输入“#A5D7BF”，在“背景图像”文本框中输入“bg.jpg”，在“重复”下拉列表框中选择“横向重复”选项，设置上、下、左、右的页边距为“0像素”。

1在“分类”列表框中选择“链接”选项，进行超链接显示效果的设置。

2在右侧的“链接颜色”和“已访问链接”文本框中输入“#333333”，在“变换图像链接”文本框中输入“#FF9900”。

1在“分类”列表框中选择“标题/编码”选项，进行网页标题及网页编码方式的设置。

2在右侧的“标题”文本框中输入“爱乐网页”，在“编码”下拉列表框中选择“简体中文（GB2312）”选项，单击“确定”按钮。

1打开的提示对话框询问是否应用编码更改，单击“应用”按钮，应用编码更改。

1按Ctrl+S组合键保存网页文档。

2按F12键，在打开的IE浏览器中查看网页效果。

注意提示

不同国家或地区的编码方式不同，只有设置正确的编码才能正常地显示网页内容。

实例4 制作爱乐网页版权区

包含知识

■复制素材

■打开网页文档

■输入文本

■预览网页文档

1将素材文件夹中的所有文件复制到源文件夹（源文件:\实例4\）中。

2在该文件夹中的“music.html”图标上单击鼠标右键，在弹出的快捷菜单中选择“打开方式-Adobe Dreamweaver CS3”命令，打开网页文档。

1按Ctrl+A组合键选择编辑窗口中的所有内容，按Delete键删除选择的内容。

2在编辑窗口中输入文本“版权所有”。

1在“插入”栏的“文本”选项卡中单击最右侧的按钮，在弹出的下拉菜单中选择“版权”命令。

2在打开的提示对话框中单击“确定”按钮，完成版权符号的插入。

1按键盘上的→键，输入文本“2000-2008”。

2打开输入法并切换为全角输入状态，按键盘上的空格键两次，此时鼠标光标所在位置如上图所示。

1在鼠标光标所在位置输入英文文本“IMusic.com All rights reserved”。

1按Ctrl+S组合键保存网页文档。

2按F12键，在打开的IE浏览器中查看网页效果。

实例5 制作自我简介网页

包含知识

■插入水平线

■设置水平线属性

■文本换行

■文本分段

重点难点

■设置水平线属性

■文本换行与分段

制作思路

1新建空白网页文档，输入文本“自我简介”。

2选择“插入记录-HTML-水平线”命令，插入水平线，如上图所示。

1保持水平线的选择状态，在属性检查器的“高”文本框中输入“10”，按Enter键完成水平线粗细的设置。

1按Shift+Enter组合键换行。

2输入文本“要说我啊，绝对是一个特有意思的人，多话、胆小、爱折腾，喜欢各种Game，喜欢吃甜食，雪糕算是最爱了，还特别爱玩，一出去玩就容易激动得没完没了，像一个疯丫头一样”。

1按Enter键分段。

2输入文本“有事没事还特喜欢用QQ聊天，有时还一聊就是一个通宵”。

1单击编辑窗口左上角的“代码”按钮，切换到代码视图。

2选择“<br />”标签并按住鼠标左键不放将其拖动到“<hr size="10" />”标签后，调整换行的位置。

1按Ctrl+S组合键保存网页。

2按F12键，在打开的IE浏览器中查看网页效果。

注意提示

网页中的文本不能自动换行，换行需按Shift+Enter组合键；分段需按Enter键。

实例6 美化自我简介网页

包含知识

■设置文本属性

■设置水平线属性

■另存网页文档

重点难点

■设置水平线属性

■设置文本属性

制作思路

1打开素材网页文档并选择标题文本“自我简介”，设置其字体为“方正粗倩简体”、字号为“25像素”、颜色为“#009900”，单击“加粗”按钮，使文本变为粗体。

1选择水平线，在属性检查器中单击“快速标签偏移器”按钮，在打开的“编辑标签”窗口中输入代码“color="#FF9900"”，设置水平线的颜色，如上图所示。

1选择文本“要”。

2在属性检查器中设置其字体为“方正粗倩简体”、字号为“36像素”、颜色为“#0000FF”。

1选择其他文本。

2在属性检查器中设置其颜色为“#009900”。

1按Ctrl+Shift+S组合键，在打开的“另存为”对话框的“保存在”下拉列表框中选择保存位置。

2在“文件名”下拉列表框中输入文件名称“jjie.html”，如上图所示。

1单击“保存”按钮，关闭“另存为”对话框。

2按F12键，在打开的IE浏览器中查看网页效果。

实例7 制作软件排行榜

包含知识

■创建项目列表

■创建编号列表

■修改项目列表

重点难点

■创建列表

■修改项目列表

制作思路

1复制素材文件夹中的所有文件到源文件夹（源文件：\实例7\）中。

2打开素材网页文档，将鼠标光标定位在要插入项目列表的位置，单击属性检查器中的“项目列表”按钮，输入文本“新软情报站”，并在属性检查器中设置其为粗体。

3按Enter键，然后输入文本“Audio Sliders”。

1使用相同的方法输入其他文本。

2选择如左上图所示的文本，在属性检查器中单击“编号列表”按钮，将其设置为编号列表。

3在属性检查器中单击“文本缩进”按钮，对编号列表进行缩进。

1使用相同的方法完成其他编号列表的设置。

2按Ctrl+S组合键保存网页文档并按F12键预览网页文档，其效果如右上图所示，从图中可以看出，项目列表前面的符号为黑色小圆点。

1返回到编辑窗口中，将鼠标光标定位在项目列表“新软情报站”中。

2单击属性检查器中的“列表项目”按钮，打开如右上图所示的“列表属性”对话框。

1在其中的“样式”下拉列表框中选择“正方形”选项。

2单击“确定”按钮关闭对话框，完成设置后的效果如右上图所示。

1按Ctrl+S组合键保存网页文档。

2按F12键，在打开的IE浏览器中查看网页效果。

实例8 制作文本链接网页

包含知识

■选择文本

■创建站内文本链接

■创建站外文本链接

重点难点

■创建站内文本链接

■创建站外文本链接

制作思路

1在Dreamweaver CS3中打开素材网页文档。

2选择如上图所示的文本“E地图首页”。

1在属性检查器的“链接”下拉列表框中输入“index .html”，在“目标”下拉列表框中选择“self”选项。

1向下拖动编辑窗口右侧的垂直滚动条至最下方。

2选择如上图所示的文本“媒体报道”。

1在属性检查器的“链接”下拉列表框中输入“news.baodao.cn/editu.html”。

2在“目标”下拉列表框中选择“blank”选项。

1按Ctrl+S组合键保存网页文档并按F12键进行预览。

2单击创建的站点链接文本“E地图首页”，如上图所示。

1打开的网页效果如上图所示。

知识延伸

“blank”表示在一个新窗口中打开目标网页，“self”表示在当前网页所在窗口中打开目标网页。

实例9 制作联系我们网页

包含知识

■选择文本

■设置电子邮件链接

重点难点

■设置电子邮件链接

制作思路

1在Dreamweaver CS3中打开素材网页文档。

2选择如上图所示的文本“联系我们”。

1在属性检查器的“链接”下拉列表框中输入“mailto:us@editu.com”。

1在文档工具栏中单击“在浏览器中预览/调试”按钮，在弹出的下拉菜单中选择“预览在IExplore”命令，进行网页文档的预览。

1在IE浏览器窗口中拖动右侧的滚动条到最下方。

2单击电子邮件链接文本“联系我们”。

1在打开的邮件发送程序的“收件人”文本框中自动添加了电子邮件地址。

2输入邮件标题，编辑邮件内容后即可发送邮件。

注意提示

在创建电子邮件链接时，应先输入“mailto:”（表示邮寄到什么地方的意思），再在其后输入电子邮件地址。

知识延伸

在创建电子邮件链接时，还可以为邮件创建主题，如输入“mailto:us@editu.com？subject=联系我们”，当在浏览网页并单击该电子邮件链接时，“收件人”文本框中将自动添加“us@editu.com”，“主题”文本框中将自动添加“联系我们”。

实例10 制作诚征英才网页

包含知识

■创建锚记

■创建指向锚记的链接

重点难点

■创建锚记

■创建指向同页中的锚链接

■创建指向不同页中的锚链接

制作思路

1打开素材网页文档“zhaopin2.html”。

2将鼠标光标定位在文本“诚征英才”后。

1单击文档工具栏中的“命名锚记”按钮，在打开的“命名锚记”对话框的“锚记名称”文本框中输入“top”，单击“确定”按钮。

1选择“返回到顶部”按钮。

2在属性检查器的“链接”文本框中输入“#top”，在“目标”下拉列表框中选择“self”选项。

1将鼠标光标定位在“市场主管”文本后，使用相同的方法插入名为“zhuguan”的命名锚记，完成后的效果如上图所示。

2按Ctrl+S组合键保存网页文档。

1打开素材网页文档“zhaopin.html”，选择“市场主管”文本。

2在属性检查器的“链接”下拉列表框中输入“zhaopin2.html#zhuguan”，在“目标”下拉列表框中选择“blank”选项。

1按Ctrl+S组合键保存网页文档。

2按F12键，在打开的IE浏览器中单击“市场主管”超链接，将在新窗口中打开网页文档“zhaopin2.html”，并将鼠标光标定位在“zhuguan”命名锚记处。

实例11 制作网络天空网页

包含知识

■设置跟踪图像

■插入图像

重点难点

■设置跟踪图像

■插入图像

制作思路

1新建空白网页文档，按Ctrl+S组合键，在打开的“另存为”对话框中选择保存位置，并输入文件名进行保存。

1按Ctrl+J组合键，打开“页面属性”对话框。

2在“分类”列表框中选择“跟踪图像”选项，在右侧的“跟踪图像”文本框中输入“pic/tiankong.jpg”。

3向左拖动“透明度”栏中的滑块，直到右侧数字显示为“50%”，然后单击“确定”按钮，关闭该对话框。

1此时，编辑窗口中显示的效果如上图所示。

1保存网页文档并按F12键预览网页文档，发现浏览器窗口中没有任何内容。

1在“常用”选项卡中单击“图像”按钮。

2在打开的对话框的“查找范围”下拉列表框中选择图像所在的位置，在文件列表框中双击需要插入的图像文件。

1在打开的“图像标签辅助功能属性”对话框的“替换文本”下拉列表框中输入“我的网络天空”，再单击“确定”按钮，完成图像的插入。

2保存网页文档后按F12键，在打开的IE浏览器中即可看到网页效果。

实例12 制作图像链接网页

包含知识

■使用占位符插入图像

■设置图像属性

■设置图像链接

重点难点

■设置图像属性

■设置图像链接

制作思路

1打开素材网页文档“photo.html”。

2将鼠标光标移动到如上图所示的位置，单击鼠标左键，定位鼠标光标。

1选择“插入记录-图像对象-图像占位符”命令。

2在打开的“图像占位符”对话框的“名称”文本框中输入“tu1”，设置宽度及高度分别为“180”和“135”，设置替换文本为“图像1”，单击“确定”按钮。

1保持插入的占位符的选择状态。

2在属性检查器的“链接”文本框中输入“001.jpg”，在“目标”下拉列表框中选择“blank”选项。

3单击“居中对齐”按钮，使图像占位符居中显示。

1按Ctrl+S组合键保存网页文档。

2选择“文件-在浏览器中预览-IExplore”命令，进行网页文档的预览，其效果如上图所示。

1返回到编辑窗口中，双击图像占位符。

2在打开的对话框的“查找范围”下拉列表框中选择图像位置，在文件列表框中双击需要的图像文件“s001.jpg”。

1按Ctrl+S组合键保存网页文档。

2按F12键，在打开的IE浏览器中单击更改图像后的图像占位符，将自动打开一个新窗口，并在窗口中显示图像“s001.jpg”。

实例13 制作远征网页

包含知识

■创建图像热点区域

■创建热点链接

重点难点

■创建热点链接

制作思路

1打开素材网页文档“yuanzheng.html”，选择如上图所示的图片。

2在属性检查器中单击“矩形热点工具”按钮。

1将鼠标光标移动到所选图像的左上角，按住鼠标左键不放向右下角拖动，然后释放鼠标，在弹出的对话框中单击“确定”按钮，完成图像热点区域的创建。

1在属性检查器的“链接”文本框中输入链接文本“jieshao.html”。

2在“目标”下拉列表框中选择“blank”选项。

3在编辑窗口中选择如上图所示的图像。

1在属性检查器中单击“椭圆形热点工具”按钮。

2将鼠标光标移动到所选择的左侧图像的左上角，按住鼠标左键不放向右下角拖动鼠标直到覆盖整个左侧图像，然后释放鼠标，如上图所示，在打开的对话框中单击“确定”按钮。

1在属性检查器中单击左下角的“指针热点工具”按钮。

2将鼠标光标移动到创建的圆形热点区域中，按住左键不放拖动鼠标，调整图像热点区域的位置。将鼠标光标移动到四周的控制柄上，按住鼠标左键不放拖动鼠标，调整热点区域的大小。

1保持圆形热点区域的选择状态，按Ctrl+C组合键复制圆形热点区域，然后按Ctrl+Ⅴ组合键进行粘贴。

2拖动新粘贴的热点区域到右侧的图像上，如上图所示。

3在属性检查器的“链接”文本框中输入“lasha.html”，在“目标”下拉列表框中选择“blank”选项。

实例14 制作酷搜网页

包含知识

■删除图像

■插入鼠标经过图像

重点难点

■插入鼠标经过图像

制作思路

1打开素材网页文档“baohang.html”。

2选择“网页”按钮图像。

1按Delete键删除所选图像，将鼠标光标定位在“博客”按钮的左侧，如上图所示。

1选择“插入记录-图像对象-鼠标经过图像”命令，打开“插入鼠标经过图像”对话框。

2在其中的“图像名称”文本框中输入图像名称“news”。

3单击“原始图像”文本框后面的“浏览”按钮。

1在打开的“原始图像”对话框的“查找范围”下拉列表框中选择图像位置。

2在文件列表框中双击“btn new1.gif”图像文件，返回“插入鼠标经过图像”对话框。

1在“鼠标经过图像”文本框中输入“pic/btn new2 .gif”。

2在“替换文本”文本框中输入“新闻”，在“按下时，前往的URL”文本框中输入“#news”，单击“确定”按钮，完成鼠标经过图像的创建。

1按Ctrl+S组合键保存网页文档。

2按F12键，在打开的IE浏览器中将鼠标光标移动到鼠标经过图像“网页”按钮上，其效果如上图所示。

实例15 制作我的相册网页

包含知识

■插入导航条

■修改导航条

重点难点

■插入导航条

■修改导航条

制作思路

1打开素材网页文档“Albumz.html”。

2在如上图所示的位置单击鼠标左键，确定鼠标光标位置。

1选择“插入记录-图像对象-导航条”命令，打开“插入导航条”对话框。

2单击“状态图像”文本框后面的“浏览”按钮。

1在打开的对话框的“查找范围”下拉列表框中选择图像所在的位置。

2在文件列表框中双击需要的图像，关闭对话框。

1返回到“插入导航条”对话框中，在“鼠标经过图像”文本框中输入图像位置及名称。

2在“替换文本”及“按下时，前往的URL”文本框中输入相应的内容，并在“插入”下拉列表框中选择“垂直”选项。

1单击按钮，添加导航条元件。

2使用相同的方法进行设置。

3单击按钮，添加导航条元件，并进行导航条元件的设置，然后单击“确定”按钮。

1按Ctrl+S组合键保存网页文档。

2按F12键，在打开的IE浏览器中将鼠标光标移动到导航条元件上时，图像将发生变化，如上图所示。

注意提示

选择“修改-导航条”命令，可以修改导航条的设置。

实例16 制作错误提示页面

包含知识

■复制图像

■粘贴图像

重点难点

■粘贴图像

制作思路

1打开素材文件夹并选择图像“erro.jpg”。

2在选择的图像上单击鼠标右键，在弹出的快捷菜单中选择“复制”命令。

1打开素材网页文档“erro.html”。

2选择如上图所示的“粘贴图像”文本并按Delete键将其删除。

1保持鼠标光标在删除文本的位置并按Ctrl+Ⅴ组合键，在打开的“选择图像源文件”对话框中不进行任何操作，单击“取消”按钮。

1在打开的“图像标签辅助功能属性”对话框中不进行任何操作，单击“取消”按钮，完成图像的插入。

1使用相同的方法将图像“yuan.jpg”插入到文本“如果您”之前，按一次空格键，完成后的效果如上图所示。

1按Ctrl+S组合键保存网页文档。

2按F12键，在打开的IE浏览器中查看网页效果，如上图所示。

实例17 制作注册模板网页

包含知识

■创建模板

■创建可编辑区域

■通过模板创建网页文档

重点难点

■创建可编辑区域

■通过模板创建网页文档

制作思路

1创建站点后将所有的素材文件复制到站点根文件夹中，打开素材网页文档“reg moban.html”。

2选择“文件-另存为模板”命令，在打开的“另存模板”对话框的“另存为”文本框中输入“reg moban”，单击“保存”按钮。

1在打开的提示对话框中单击“是”按钮，更新链接，以免导致图像等对象的链接不正确，因为模板网页会保存在站点的“Templates”文件夹中，其路径就必须跟着改变才能正确地进行链接。

1将鼠标光标移动到如上图所示的网页对象上并单击鼠标，选择该对象。

1选择“插入记录-模板对象-可编辑区域”命令。

2在打开的对话框的“名称”文本框中输入可编辑区域的名称，单击“确定”按钮，完成可编辑区域的创建。

1创建的可编辑区域如上图所示。

2按Ctrl+S组合键保存模板。

1按F11键，打开“资源”面板，单击其中的“模板”按钮。

2在“reg moban”模板文件上单击鼠标右键，在弹出的快捷菜单中选择“从模板新建”命令。

3将鼠标光标定位到可编辑区域中，输入相应的文本并设置样式，完成后的效果如上图所示。按Ctrl+S组合键将其以“reg.html”为名进行保存。