![Dreamweaver,Flash,Fireworks网页设计百练成精(CS3版)](https://wfqqreader-1252317822.image.myqcloud.com/cover/761/687761/b_687761.jpg)
第1章 用Dreamweaver制作图文网页
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0005_0001.jpg?sign=1734397804-G8UWNjBDH6HHhHYZIOXZKPun7qz22yv6-0-b43b4b104c7cffd381100b58f9305b4a)
Dreamweaver是一款可视化的网页编辑软件,使用它可以制作出各种精美的网页。本章主要介绍Dreamweaver的启动、网页的创建、网页内容的添加与美化等知识,通过本章的学习,读者可以制作出简单而精美的网页。
实例1 新建爱乐网页
素材:无
源文件:\实例1\music.html
包含知识
■启动Dreamweaver
■新建空白网页文档
■保存和预览网页文档
■输入文本
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0006_0001.jpg?sign=1734397804-8wg2vamUsYim5f0MtCEDPWP0mk6NlWG5-0-a4e19d4f78fb797042b837f32c8ebc35)
1Dreamweaver CS3安装好后,单击“开始”按钮,在“开始”菜单中选择“所有程序-Adobe Design Premium CS3-Adobe Dreamweaver CS3”命令,启动Dreamweaver CS3。
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0006_0003.jpg?sign=1734397804-u7tbBpC3l5zU97NgnoUDNnIR0uQAurFQ-0-863bfd52ffce708a5e42a7425513e014)
1在打开的欢迎屏幕的“新建”栏中单击“HTML”选项,创建一个空白网页文档。
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0006_0005.jpg?sign=1734397804-9IK2ryKEquONbnaV0BPgtK37ATYh5LOH-0-abfbdd8b38b92dca7c2ccb1b1368913e)
1选择“文件-保存”命令或按Ctrl+S组合键。
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0006_0007.jpg?sign=1734397804-6RslxNw9rlC6oBWupvMwNzwdzqpE5dnO-0-f30c91768d4fc6d5753aaf556563f887)
1在打开的“另存为”对话框的“保存在”下拉列表框中选择文档的保存位置,在“文件名”下拉列表框中输入文档的名称。
2单击“保存”按钮,完成网页文档的保存操作。
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0006_0010.jpg?sign=1734397804-2YqF22FGM7ZAns8b2g1omkyhbBpfk3Z9-0-ef4cca27943e92383eabc80d52668958)
1将鼠标光标定位到编辑窗口中,像在Word中一样输入文本“爱乐网页”。
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0006_0012.jpg?sign=1734397804-yOEdEAKeOZNeG6yrw50w0UZDvZwPsOS9-0-b3f8ba1a335e2f0455b5aa6d99f288b6)
1按Ctrl+S组合键保存网页文档。
2按F12键,在打开的默认浏览器IE中查看网页效果。
实例2 创建美容站点
包含知识
■启动Dreamweaver
■新建站点
■配置本地站点
■配置远程站点
■管理站点
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0007_0001.jpg?sign=1734397804-E8ukKteGb5XnYKf4Bo3debgmpPbG4zLF-0-30ff6b8508114d648c6a18f7b2d44ec0)
1启动Dreamweaver CS3后,选择“站点-新建站点”命令。
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0007_0003.jpg?sign=1734397804-ecWhLt4bd3tirwY0HvOCRIHjBwYTUdl4-0-8564f0a18ea75d526a395394b73901c3)
1在打开的对话框的“高级”选项卡的“分类”列表框中选择“本地信息”选项。
2在右侧进行本地站点信息的配置。
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0007_0006.jpg?sign=1734397804-T8py28sk77xIi2gvO2g25oJhlxkHXlhM-0-f157e57093c8d26d3fac2e32fc6d6b10)
1在“分类”列表框中选择“远程信息”选项。
2在右侧的“访问”下拉列表框中选择“本地/网络”选项,在“远端文件夹”文本框中输入“e:\meirong”,单击“确定”按钮。
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0007_0009.jpg?sign=1734397804-7dY3r8R1AhFL5Wv8uq8UmsQlh7hmdfgv-0-0143835fdcff08e20ab9832e0a86035a)
1站点创建完成后,Dreamweaver将自动打开“文件”面板,在其中可看到已创建好的站点。
2“文件”面板的站点列表中显示出了当前站点的名称“meirong”,双击该名称。
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0007_0012.jpg?sign=1734397804-sLBblQZD7EpaRN3NjfwAJ1HGzzTPhphT-0-6cc461d1efc4d23f4081066df7b7ba0c)
1在打开的对话框右侧的“HTTP地址”文本框中输入“localhost/meirong”。
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0007_0014.jpg?sign=1734397804-t4STEHVZ56JFLl02RU0eqTcFWmY1oKsw-0-c5fcd9ef9c36e99f2af0b77ab8eae70f)
1在“分类”列表框中选择“测试服务器”选项。
2在右侧的“服务器模型”下拉列表框中选择“ASPⅤBScript”选项,在“访问”下拉列表框中选择“本地/网络”选项,在“测试服务器文件”文本框中输入“e:\meirong”,单击“确定”按钮,在打开的提示对话框中单击“确定”按钮。
实例3 美化爱乐网页
素材:\实例3\
源文件:\实例3\music.html
包含知识
■复制素材
■打开网页文档
■设置页面属性
■预览网页文档
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0008_0001.jpg?sign=1734397804-hq6Ks0GvyJ0iuf8ZQxUMmPWdlAI4g7QQ-0-de0a81133bfaacfbf432d8c15390371d)
1将素材文件夹中的所有文件复制到源文件夹(源文件:\实例3\)中。
2启动Dreamweaver后选择“文件-打开”命令。
3在打开的对话框中双击要打开的网页文档,打开网页文档后按Ctrl+J组合键。
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0008_0005.jpg?sign=1734397804-QfNeOD4n0nLBDbL8HU7vYheMIwqTFQvi-0-3a90fc5b985f30d978616881b0ac903d)
1在打开的“页面属性”对话框的“分类”列表框中选择“外观”选项。
2在右侧的“页面字体”下拉列表框中选择“宋体”选项,在“大小”下拉列表框中选择“12”选项,在“背景颜色”文本框中输入“#A5D7BF”,在“背景图像”文本框中输入“bg.jpg”,在“重复”下拉列表框中选择“横向重复”选项,设置上、下、左、右的页边距为“0像素”。
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0008_0008.jpg?sign=1734397804-XZPu0xf83Q4chodATkgZenhC9016Ppet-0-6eb4a0b24a02e83214a748835d636e51)
1在“分类”列表框中选择“链接”选项,进行超链接显示效果的设置。
2在右侧的“链接颜色”和“已访问链接”文本框中输入“#333333”,在“变换图像链接”文本框中输入“#FF9900”。
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0008_0011.jpg?sign=1734397804-04wk9w4rXSmkybx5oZMdF7e9HUUalGBy-0-17ee928f514cea391bb8a07b16461e4e)
1在“分类”列表框中选择“标题/编码”选项,进行网页标题及网页编码方式的设置。
2在右侧的“标题”文本框中输入“爱乐网页”,在“编码”下拉列表框中选择“简体中文(GB2312)”选项,单击“确定”按钮。
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0008_0014.jpg?sign=1734397804-8Wr8rTP8E6Ajba3NEJdlyUwRXYbcGpXi-0-1b64f686c51ddfa5da60ae89ad642036)
1打开的提示对话框询问是否应用编码更改,单击“应用”按钮,应用编码更改。
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0008_0016.jpg?sign=1734397804-OtanqIl48c5RCkuF19BGm0r5BWxYWOT2-0-98ac4ca490d5e399072b9eab64aa1a23)
1按Ctrl+S组合键保存网页文档。
2按F12键,在打开的IE浏览器中查看网页效果。
注意提示
不同国家或地区的编码方式不同,只有设置正确的编码才能正常地显示网页内容。
实例4 制作爱乐网页版权区
素材:\实例4\
源文件:\实例4\music.html
包含知识
■复制素材
■打开网页文档
■输入文本
■预览网页文档
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0009_0001.jpg?sign=1734397804-Ywr72VMUa2MyMYjCvt5CAkIUr13d2nUv-0-8022a127f5c7a418f385dc6967eacb9a)
1将素材文件夹中的所有文件复制到源文件夹(源文件:\实例4\)中。
2在该文件夹中的“music.html”图标上单击鼠标右键,在弹出的快捷菜单中选择“打开方式-Adobe Dreamweaver CS3”命令,打开网页文档。
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0009_0004.jpg?sign=1734397804-uVggb3J011fR7CMX9Iphrensvz2dAiNi-0-7110efadc06f8ab2acc4ad43813e1cb6)
1按Ctrl+A组合键选择编辑窗口中的所有内容,按Delete键删除选择的内容。
2在编辑窗口中输入文本“版权所有”。
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0009_0007.jpg?sign=1734397804-aFAMMsL4FQxX9iwIf0sfOeuGsHru34Z9-0-8e49fae29b4ac8b934326df93479dfc8)
1在“插入”栏的“文本”选项卡中单击最右侧的按钮,在弹出的下拉菜单中选择“版权”命令。
2在打开的提示对话框中单击“确定”按钮,完成版权符号的插入。
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0009_0011.jpg?sign=1734397804-sDhUsO2kfAjFS34Wv4BMXoh14EL4oqHx-0-90e103dbdf1de2fa1f9c157ffd4d00ac)
1按键盘上的→键,输入文本“2000-2008”。
2打开输入法并切换为全角输入状态,按键盘上的空格键两次,此时鼠标光标所在位置如上图所示。
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0009_0014.jpg?sign=1734397804-aERtx7wR9Uis5QaWsx6UGTrlJGu9YApN-0-1dac1cec3008fd0e6ea57df5e9f2ec45)
1在鼠标光标所在位置输入英文文本“IMusic.com All rights reserved”。
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0009_0016.jpg?sign=1734397804-B7csgYewoSEYi3gpkJYRDi8fiK7oY9A5-0-f51dea165a4c8bb1edcd0a7e9214974e)
1按Ctrl+S组合键保存网页文档。
2按F12键,在打开的IE浏览器中查看网页效果。
实例5 制作自我简介网页
素材:无
源文件:\实例5\jjie.html
包含知识
■插入水平线
■设置水平线属性
■文本换行
■文本分段
重点难点
■设置水平线属性
■文本换行与分段
制作思路
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0010_0001.jpg?sign=1734397804-RAaRBHeVkUqkNYYbZv3byU8J1S65tbX7-0-190dc5a811a11c7e7a061798515b84dd)
添加水平线并设置属性
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0010_0002.jpg?sign=1734397804-6dHIGE9fEpEYHdjb6pe4zfju4UuZlx7m-0-713d385bc26de58b29a54f4b0b74df9b)
文本换行与分段
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0010_0003.jpg?sign=1734397804-6UbeGdhFJ9E5aWIRUc7q5hOtSuDOZ6jC-0-e255445642e70c8c41896586b3c7c3ed)
1新建空白网页文档,输入文本“自我简介”。
2选择“插入记录-HTML-水平线”命令,插入水平线,如上图所示。
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0010_0006.jpg?sign=1734397804-OjWdcwOwqiz6AqO3hxoiTTOsp9PqvqP3-0-952254e8b398da16a4593ba03b7cb48c)
1保持水平线的选择状态,在属性检查器的“高”文本框中输入“10”,按Enter键完成水平线粗细的设置。
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0010_0008.jpg?sign=1734397804-sodxhJfVScOYsB5Pv6UULJkXyuV6xNOm-0-a943f3ed534eac6f11f10d63a8422831)
1按Shift+Enter组合键换行。
2输入文本“要说我啊,绝对是一个特有意思的人,多话、胆小、爱折腾,喜欢各种Game,喜欢吃甜食,雪糕算是最爱了,还特别爱玩,一出去玩就容易激动得没完没了,像一个疯丫头一样”。
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0010_0011.jpg?sign=1734397804-MtHreXeJh1LGM6JdICN5oAujUyBMHyHG-0-328273e152d68ea03e142308b2af9313)
1按Enter键分段。
2输入文本“有事没事还特喜欢用QQ聊天,有时还一聊就是一个通宵”。
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0010_0014.jpg?sign=1734397804-mSRkXBzNOeJVjirfO4uFlL5ZqWkBQwaB-0-9863769d38994d67c13b74c620b5f316)
1单击编辑窗口左上角的“代码”按钮,切换到代码视图。
2选择“<br />”标签并按住鼠标左键不放将其拖动到“<hr size="10" />”标签后,调整换行的位置。
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0010_0017.jpg?sign=1734397804-2xOxNor5pnxG50SVy0cHYHL1XY5tGuOT-0-d126011aba97e4072ff7cb8a845b6734)
1按Ctrl+S组合键保存网页。
2按F12键,在打开的IE浏览器中查看网页效果。
注意提示
网页中的文本不能自动换行,换行需按Shift+Enter组合键;分段需按Enter键。
实例6 美化自我简介网页
素材:\实例6\jjie.html
源文件:\实例6\jjie.html
包含知识
■设置文本属性
■设置水平线属性
■另存网页文档
重点难点
■设置水平线属性
■设置文本属性
制作思路
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0011_0001.jpg?sign=1734397804-bqCNWMTIJaDpz5Ff65kI1UeuGKGtchwp-0-df25297e8b6e7e06f7a57700bf9f9342)
美化标题文本与水平线
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0011_0002.jpg?sign=1734397804-wthDUFVqsbBs9UEGJJVAzQdH0VHkRGyq-0-f0f34eec5cad887311e845f343e590d5)
美化其他文本并预览效果
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0011_0003.jpg?sign=1734397804-eyhk5KskORB9BXv3egsRm22okQqSdZf3-0-2935913dd73ed009b863f1a79e6106ad)
1打开素材网页文档并选择标题文本“自我简介”,设置其字体为“方正粗倩简体”、字号为“25像素”、颜色为“#009900”,单击“加粗”按钮,使文本变为粗体。
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0011_0005.jpg?sign=1734397804-9EKGJyWK5UzoJVJT45j9CLQClSTry5BQ-0-426e243c30dda8a50007ed1397c95257)
1选择水平线,在属性检查器中单击“快速标签偏移器”按钮,在打开的“编辑标签”窗口中输入代码“color="#FF9900"”,设置水平线的颜色,如上图所示。
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0011_0008.jpg?sign=1734397804-tpBuxw1jaXyWLe1BGO8rRhEzxOhIXVJq-0-19b2b5e0c4763c2bf755dc7cc0d6dc5b)
1选择文本“要”。
2在属性检查器中设置其字体为“方正粗倩简体”、字号为“36像素”、颜色为“#0000FF”。
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0011_0011.jpg?sign=1734397804-7fvaxIikVnkt6einvnFUspHR52TQp4dJ-0-8b407a60e9238a1bffa450c1b6787316)
1选择其他文本。
2在属性检查器中设置其颜色为“#009900”。
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0011_0014.jpg?sign=1734397804-0FhtrRFCzK3MPIbE7X9vRW4IpxmYI8fV-0-eee2e87611c9550400b6aacbc93bd26f)
1按Ctrl+Shift+S组合键,在打开的“另存为”对话框的“保存在”下拉列表框中选择保存位置。
2在“文件名”下拉列表框中输入文件名称“jjie.html”,如上图所示。
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0011_0017.jpg?sign=1734397804-x5e6wvepPOMzHV97wLL9puz2mu1YIvPu-0-78584f8f172ca31d60b2f41f5f5aab0f)
1单击“保存”按钮,关闭“另存为”对话框。
2按F12键,在打开的IE浏览器中查看网页效果。
实例7 制作软件排行榜
素材:\实例7\soft.html
源文件:\实例7\soft.html
包含知识
■创建项目列表
■创建编号列表
■修改项目列表
重点难点
■创建列表
■修改项目列表
制作思路
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0012_0001.jpg?sign=1734397804-kuYKWxtZn3uKQbM3qYO8mu7DsxR0wFz3-0-62fe9d4607711b9c3fe9670897bdf634)
创建列表
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0012_0002.jpg?sign=1734397804-Vlw6502dDSHgSJD7jm9IaX6M5MRzqFoI-0-51639e4ff3b6248dbf7f51b7ef4bb876)
设置列表属性
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0012_0003.jpg?sign=1734397804-KThaUlbIWxFe96AS0kphinGz0BH7ithc-0-0d68a1ef1d012063bccc6df60b8685da)
1复制素材文件夹中的所有文件到源文件夹(源文件:\实例7\)中。
2打开素材网页文档,将鼠标光标定位在要插入项目列表的位置,单击属性检查器中的“项目列表”按钮,输入文本“新软情报站”,并在属性检查器中设置其为粗体。
3按Enter键,然后输入文本“Audio Sliders”。
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0012_0008.jpg?sign=1734397804-vYMBppF2AjAR25Z43HOCoDY9K2brokL0-0-4509bff36a4240589c38f1061d65fbd2)
1使用相同的方法输入其他文本。
2选择如左上图所示的文本,在属性检查器中单击“编号列表”按钮,将其设置为编号列表。
3在属性检查器中单击“文本缩进”按钮,对编号列表进行缩进。
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0012_0014.jpg?sign=1734397804-fOTKQkCdeZOvyXfvw3T5gvUtsPA2iEO5-0-a6c432ca36b3044a8c897424d09dc6ee)
1使用相同的方法完成其他编号列表的设置。
2按Ctrl+S组合键保存网页文档并按F12键预览网页文档,其效果如右上图所示,从图中可以看出,项目列表前面的符号为黑色小圆点。
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0012_0017.jpg?sign=1734397804-MaCoAwr9ClS9jbhwTw9wIyPtGnNhQe81-0-9b1b8f7157480032539bd566d78beb32)
1返回到编辑窗口中,将鼠标光标定位在项目列表“新软情报站”中。
2单击属性检查器中的“列表项目”按钮,打开如右上图所示的“列表属性”对话框。
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0012_0020.jpg?sign=1734397804-5JF5ieNM1Dforqzo8UXOSuXGbCNuns2K-0-a41dd58d4d79cadeb64ffe5cd253f582)
1在其中的“样式”下拉列表框中选择“正方形”选项。
2单击“确定”按钮关闭对话框,完成设置后的效果如右上图所示。
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0012_0023.jpg?sign=1734397804-vuCB7Y9DSZ4In1BczuNGN0aIJO8o3Zrx-0-85828e4fd10dcfa1337dd879ab882592)
1按Ctrl+S组合键保存网页文档。
2按F12键,在打开的IE浏览器中查看网页效果。
实例8 制作文本链接网页
素材:\实例8\ditu.html
源文件:\实例8\ditu.html
包含知识
■选择文本
■创建站内文本链接
■创建站外文本链接
重点难点
■创建站内文本链接
■创建站外文本链接
制作思路
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0013_0001.jpg?sign=1734397804-p6EX20PwtOYGG3IWzhRwYdrJixXV20oF-0-175ea14252b9030acbd0f544d6ca47ef)
选择文本
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0013_0002.jpg?sign=1734397804-ROVQjx6qo6Ik7djKcVwyF7u1mxoQrxZO-0-15c076b494773d0ea1bfceca970e32c7)
设置链接属性
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0013_0003.jpg?sign=1734397804-5hSC0D3nmfvmOCQvjDSlTNyzNN6HE8Dl-0-7caf097973b123e97e0dec94ee204ab1)
1在Dreamweaver CS3中打开素材网页文档。
2选择如上图所示的文本“E地图首页”。
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0013_0006.jpg?sign=1734397804-vdV4xOtLhNwj7D3ie0oAYMsCPPOzABcN-0-125155d0a22f4da0b68c1cddfc8697ba)
1在属性检查器的“链接”下拉列表框中输入“index .html”,在“目标”下拉列表框中选择“self”选项。
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0013_0008.jpg?sign=1734397804-QxSwbhi4ibbmA9gEl9h0IAme5cbKshIR-0-50f6e788abb380817f569c0cffac8fdc)
1向下拖动编辑窗口右侧的垂直滚动条至最下方。
2选择如上图所示的文本“媒体报道”。
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0013_0011.jpg?sign=1734397804-RJr8whqibZ4clcrbSsUd8OVRgO5OUdmZ-0-c74f4893450a645aea835c99aabba0c3)
1在属性检查器的“链接”下拉列表框中输入“news.baodao.cn/editu.html”。
2在“目标”下拉列表框中选择“blank”选项。
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0013_0014.jpg?sign=1734397804-WbQo9tQOVRCqVryDwyAGsREMaBnWJ23d-0-e31c45df4432a8223ee8d5ac3c7d4efe)
1按Ctrl+S组合键保存网页文档并按F12键进行预览。
2单击创建的站点链接文本“E地图首页”,如上图所示。
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0013_0017.jpg?sign=1734397804-qBb5cb3gQeRoMIaWZHB3xzunstel8HjA-0-7abe4f458f678045c6266dab8075f293)
1打开的网页效果如上图所示。
知识延伸
“blank”表示在一个新窗口中打开目标网页,“self”表示在当前网页所在窗口中打开目标网页。
实例9 制作联系我们网页
素材:\实例9\ditu.html
源文件:\实例9\ditu.html
包含知识
■选择文本
■设置电子邮件链接
重点难点
■设置电子邮件链接
制作思路
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0014_0001.jpg?sign=1734397804-ajUa2On6rWSyywfpXMmsqh1ZAJwVc6bH-0-86def814d538a6f23d4db21006d8d262)
选择文本
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0014_0002.jpg?sign=1734397804-JXK4QzKd24X02bjPeI3qADP4cz3Uiigk-0-050c4a94a54f51f10ed350594b94c09c)
设置电子邮件链接
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0014_0003.jpg?sign=1734397804-5mobGAjT2KXJWKOCd98kqKvRR4lI9H3A-0-1593937473d171eafc5b852a0a367c8f)
1在Dreamweaver CS3中打开素材网页文档。
2选择如上图所示的文本“联系我们”。
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0014_0006.jpg?sign=1734397804-wbvgey5R8LNGtXIvrbxZewjUkAXutlOU-0-6889761935e6e7e7093a73a72d22eda6)
1在属性检查器的“链接”下拉列表框中输入“mailto:us@editu.com”。
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0014_0008.jpg?sign=1734397804-mgeTzo1jBFY7xlUi1OdQaMJyBn7kn3za-0-4d58eee6ae71f1e102ee4790a4cfe8e9)
1在文档工具栏中单击“在浏览器中预览/调试”按钮,在弹出的下拉菜单中选择“预览在IExplore”命令,进行网页文档的预览。
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0014_0010.jpg?sign=1734397804-ZSQr22nPnfJB5Tci7zBt48W9jODQSCZI-0-66d3d3d4038a292d48bfd1ef97a8eebc)
1在IE浏览器窗口中拖动右侧的滚动条到最下方。
2单击电子邮件链接文本“联系我们”。
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0014_0013.jpg?sign=1734397804-6E0Jb2XamzXlsbrWMT8hBzDqJTsfQU3P-0-7663479457621f7ec3f5285eeef3ce79)
1在打开的邮件发送程序的“收件人”文本框中自动添加了电子邮件地址。
2输入邮件标题,编辑邮件内容后即可发送邮件。
注意提示
在创建电子邮件链接时,应先输入“mailto:”(表示邮寄到什么地方的意思),再在其后输入电子邮件地址。
知识延伸
在创建电子邮件链接时,还可以为邮件创建主题,如输入“mailto:us@editu.com?subject=联系我们”,当在浏览网页并单击该电子邮件链接时,“收件人”文本框中将自动添加“us@editu.com”,“主题”文本框中将自动添加“联系我们”。
实例10 制作诚征英才网页
素材:\实例10\
源文件:\实例10\
包含知识
■创建锚记
■创建指向锚记的链接
重点难点
■创建锚记
■创建指向同页中的锚链接
■创建指向不同页中的锚链接
制作思路
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0015_0001.jpg?sign=1734397804-usCPmtE1oLVibPAaHmBBM6QoEapWPnJy-0-170d9e929703e29f1d424cddf6dfe875)
创建锚记
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0015_0002.jpg?sign=1734397804-ZVSdbLYVFOWGEGj0LqKPk2qejUvMjBrY-0-aa17149b3c2352b0d4c219f4e8835cf6)
创建锚链接
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0015_0003.jpg?sign=1734397804-VVnawEsK2fSVOTamqVmeINBwTTvjoA9Y-0-c127f3792925b29014f6a5f8639ca880)
1打开素材网页文档“zhaopin2.html”。
2将鼠标光标定位在文本“诚征英才”后。
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0015_0006.jpg?sign=1734397804-l3VBlG82blecsdPB3Jep8XxPLZbw2QHU-0-c1f42a5cabce88446fe796ff487e4a93)
1单击文档工具栏中的“命名锚记”按钮,在打开的“命名锚记”对话框的“锚记名称”文本框中输入“top”,单击“确定”按钮。
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0015_0009.jpg?sign=1734397804-Re3OIi8IKfw8cvP8cnhMcRigdWVnuIpW-0-92d88552d3fb390da384c7d955844691)
1选择“返回到顶部”按钮。
2在属性检查器的“链接”文本框中输入“#top”,在“目标”下拉列表框中选择“self”选项。
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0015_0012.jpg?sign=1734397804-m1GUUTnJFpBf3onvXOygL778nBzT7jvh-0-a101062f7fc4446afa3e86626c584e4d)
1将鼠标光标定位在“市场主管”文本后,使用相同的方法插入名为“zhuguan”的命名锚记,完成后的效果如上图所示。
2按Ctrl+S组合键保存网页文档。
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0015_0015.jpg?sign=1734397804-Fzyenyu3JKEePxKEmtsvv8spVsAcmPuo-0-88a23d80e72d8c57597c60a83b73db1a)
1打开素材网页文档“zhaopin.html”,选择“市场主管”文本。
2在属性检查器的“链接”下拉列表框中输入“zhaopin2.html#zhuguan”,在“目标”下拉列表框中选择“blank”选项。
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0015_0018.jpg?sign=1734397804-xEBDzTJTpUmmXY8uc7sQCMcJiMJRNo4Z-0-6023723b395aa56b9f7429b3288b271e)
1按Ctrl+S组合键保存网页文档。
2按F12键,在打开的IE浏览器中单击“市场主管”超链接,将在新窗口中打开网页文档“zhaopin2.html”,并将鼠标光标定位在“zhuguan”命名锚记处。
实例11 制作网络天空网页
素材:\实例11\pic\
源文件:\实例11\sky.html
包含知识
■设置跟踪图像
■插入图像
重点难点
■设置跟踪图像
■插入图像
制作思路
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0016_0001.jpg?sign=1734397804-EFlvTfMbPjnZBuOoqo46TR3u74d8KJzG-0-3beca43f3191324ae7c7f49ac1750a83)
设置跟踪图像
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0016_0002.jpg?sign=1734397804-zQYGcQssYfoQtyG5Iy7KwYjr4Xmupxml-0-3487bcd5ec64f50f5c6d319ceca17477)
插入图像
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0016_0003.jpg?sign=1734397804-MNgSwb0oTCNqL3b2VvMW3lcGUj17ikEv-0-98269251a9c1ecdd2fafb5c3c9c1e655)
1新建空白网页文档,按Ctrl+S组合键,在打开的“另存为”对话框中选择保存位置,并输入文件名进行保存。
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0016_0005.jpg?sign=1734397804-HIc9l3JdjvTT60xr2F4pjYft9IWaAuuT-0-c58d3bcab6637ae4515db4b177524084)
1按Ctrl+J组合键,打开“页面属性”对话框。
2在“分类”列表框中选择“跟踪图像”选项,在右侧的“跟踪图像”文本框中输入“pic/tiankong.jpg”。
3向左拖动“透明度”栏中的滑块,直到右侧数字显示为“50%”,然后单击“确定”按钮,关闭该对话框。
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0016_0009.jpg?sign=1734397804-dFOU4ygzKZMOPVDqz8OeDCM3s1aJMDBn-0-9095bf06b215248486252520f38382d3)
1此时,编辑窗口中显示的效果如上图所示。
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0016_0011.jpg?sign=1734397804-vQdc44JCyIqi7BxLdIFt8ZKobM1u2meY-0-771aa08ad5ffe88eab2c832ad0711415)
1保存网页文档并按F12键预览网页文档,发现浏览器窗口中没有任何内容。
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0016_0013.jpg?sign=1734397804-xGWmNfkkSpmRiUGUvt7B5gjqA1MVltVd-0-3104711d740a0fa9d634ac3f95afc1bd)
1在“常用”选项卡中单击“图像”按钮。
2在打开的对话框的“查找范围”下拉列表框中选择图像所在的位置,在文件列表框中双击需要插入的图像文件。
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0016_0017.jpg?sign=1734397804-Zx6RpTJftU98kQVIVCtaYwtQ5VevcYNt-0-f5bd906a230d17ebd1a96a775f34ee8b)
1在打开的“图像标签辅助功能属性”对话框的“替换文本”下拉列表框中输入“我的网络天空”,再单击“确定”按钮,完成图像的插入。
2保存网页文档后按F12键,在打开的IE浏览器中即可看到网页效果。
实例12 制作图像链接网页
素材:\实例12\
源文件:\实例12\photo.html
包含知识
■使用占位符插入图像
■设置图像属性
■设置图像链接
重点难点
■设置图像属性
■设置图像链接
制作思路
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0017_0001.jpg?sign=1734397804-xvFFgy6MTBdEzksn2889e0E4GJxEwuBF-0-4a46996bec6d704b596d7e00d803203e)
定位鼠标光标
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0017_0002.jpg?sign=1734397804-t43t9hIygIHkvYaQcaOqYa0PJVJgbqpd-0-c7b04e53ad49952fb1b4d3fb078d6b8b)
插入占位符
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0017_0003.jpg?sign=1734397804-1JzHNhIOEj06g8g7vtRw3uUkls8i1UVd-0-6cb5ba6a18cc114075c8ca0f7648cf65)
1打开素材网页文档“photo.html”。
2将鼠标光标移动到如上图所示的位置,单击鼠标左键,定位鼠标光标。
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0017_0006.jpg?sign=1734397804-LyuQLL8kNDhtnTJh2iLLEtYkmVO9NBuU-0-5efcc87063718b4a14f88c4b6b17619d)
1选择“插入记录-图像对象-图像占位符”命令。
2在打开的“图像占位符”对话框的“名称”文本框中输入“tu1”,设置宽度及高度分别为“180”和“135”,设置替换文本为“图像1”,单击“确定”按钮。
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0017_0009.jpg?sign=1734397804-gj6PBYaoUo8CTjfhRHUHjrhCThf9iLTj-0-e814a9dec8895654c8d6e0b5d36172fc)
1保持插入的占位符的选择状态。
2在属性检查器的“链接”文本框中输入“001.jpg”,在“目标”下拉列表框中选择“blank”选项。
3单击“居中对齐”按钮,使图像占位符居中显示。
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0017_0014.jpg?sign=1734397804-fneviXGZRPTfv1vmh0ux6Cl4FECuEY2t-0-d4a3891bcc2580def3b5d2149f53fc97)
1按Ctrl+S组合键保存网页文档。
2选择“文件-在浏览器中预览-IExplore”命令,进行网页文档的预览,其效果如上图所示。
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0017_0017.jpg?sign=1734397804-HV8yIo9KsaifDeGEac1RhAL1rVzCcK8u-0-948851eedc215e6f78b529f663f36858)
1返回到编辑窗口中,双击图像占位符。
2在打开的对话框的“查找范围”下拉列表框中选择图像位置,在文件列表框中双击需要的图像文件“s001.jpg”。
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0017_0020.jpg?sign=1734397804-jAbJCuPiyBjbey4mGQNUviqITG2U6lps-0-e28f00e8842b7f6ecf2721c6d723b715)
1按Ctrl+S组合键保存网页文档。
2按F12键,在打开的IE浏览器中单击更改图像后的图像占位符,将自动打开一个新窗口,并在窗口中显示图像“s001.jpg”。
实例13 制作远征网页
素材:\实例13\yuanzheng.html
源文件:\实例13\yuanzheng.html
包含知识
■创建图像热点区域
■创建热点链接
重点难点
■创建热点链接
制作思路
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0018_0001.jpg?sign=1734397804-lneYPLeEYZExKscfgTYvVRBAAsrfLhnk-0-123c5d572d24d9573efbfa3757a0d80d)
选择图像
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0018_0002.jpg?sign=1734397804-XWRTjg44nN05JiuHMgf4kjNypLQtPNjg-0-2372826134802f2619b89e1272b938d9)
绘制热点区域
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0018_0003.jpg?sign=1734397804-VsQs38KvoXi2oLIDBlwYPJ0PIrAwaUHN-0-32ce76430e95bbcf59d0ad1b28177ebe)
创建链接
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0018_0004.jpg?sign=1734397804-CKvbVZqCIJoGgfo1PnBqpZu4ZLNNpaZo-0-961280a623651a40e6d00c370dd21eba)
1打开素材网页文档“yuanzheng.html”,选择如上图所示的图片。
2在属性检查器中单击“矩形热点工具”按钮。
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0018_0008.jpg?sign=1734397804-lZitHHPzRnmf1leH8Nnr1AJinkw3ZYGF-0-f47f5b7f8d92c592f4dfa353d3f4a9df)
1将鼠标光标移动到所选图像的左上角,按住鼠标左键不放向右下角拖动,然后释放鼠标,在弹出的对话框中单击“确定”按钮,完成图像热点区域的创建。
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0018_0010.jpg?sign=1734397804-W3J1maKf0wvZjwzeKJwXYPj5bEzWOmL1-0-6295e07a614f65e7cd9d95186bb58d78)
1在属性检查器的“链接”文本框中输入链接文本“jieshao.html”。
2在“目标”下拉列表框中选择“blank”选项。
3在编辑窗口中选择如上图所示的图像。
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0018_0014.jpg?sign=1734397804-GLdUB35dP1zDHc9PNTiZGbvwR1HEJF1d-0-4be7fd62cbd31aa0ff52f8306e899eeb)
1在属性检查器中单击“椭圆形热点工具”按钮。
2将鼠标光标移动到所选择的左侧图像的左上角,按住鼠标左键不放向右下角拖动鼠标直到覆盖整个左侧图像,然后释放鼠标,如上图所示,在打开的对话框中单击“确定”按钮。
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0018_0018.jpg?sign=1734397804-Kx7ijhNOVUQNmQQ6PWPYivHZXi8UpBS8-0-2ae7e53e6d87793b9b8be9d5ff2c6877)
1在属性检查器中单击左下角的“指针热点工具”按钮。
2将鼠标光标移动到创建的圆形热点区域中,按住左键不放拖动鼠标,调整图像热点区域的位置。将鼠标光标移动到四周的控制柄上,按住鼠标左键不放拖动鼠标,调整热点区域的大小。
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0018_0022.jpg?sign=1734397804-EkGpaNuP4hLsqc4tk49RdhCFMCfPNUjD-0-eb4289a2335de7fc1dba85e2f8ef7b14)
1保持圆形热点区域的选择状态,按Ctrl+C组合键复制圆形热点区域,然后按Ctrl+Ⅴ组合键进行粘贴。
2拖动新粘贴的热点区域到右侧的图像上,如上图所示。
3在属性检查器的“链接”文本框中输入“lasha.html”,在“目标”下拉列表框中选择“blank”选项。
实例14 制作酷搜网页
素材:\实例14\
源文件:\实例14\baohang.html
包含知识
■删除图像
■插入鼠标经过图像
重点难点
■插入鼠标经过图像
制作思路
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0019_0001.jpg?sign=1734397804-IHi4wUMGtdZUaWb1p3jfQ0zhYM06DApl-0-ec54be9c32bcc4dc12be3b3b636db488)
定位鼠标光标
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0019_0002.jpg?sign=1734397804-1HWWBgIgDRkayUBoja5C0WaKfIeHZjAa-0-a9f5bfbefc0301eb9753eec301eac28b)
设置属性并预览效果
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0019_0003.jpg?sign=1734397804-0U7EmLX61bxt2PaFOgljoa0OTHLSo7Le-0-5a8a38e5693fac4a5a5b1a6472c30f54)
1打开素材网页文档“baohang.html”。
2选择“网页”按钮图像。
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0019_0006.jpg?sign=1734397804-OYwK5RrBNFJOYbVYYVZlvFc4V95SonuW-0-b7f48f72c85bcfae35bee9283833ba5f)
1按Delete键删除所选图像,将鼠标光标定位在“博客”按钮的左侧,如上图所示。
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0019_0008.jpg?sign=1734397804-vt4kx6ZIjIdcqxYeNAe8eYgaaaSNnS4c-0-4a47a1643eb9e92bea3f465d189445c1)
1选择“插入记录-图像对象-鼠标经过图像”命令,打开“插入鼠标经过图像”对话框。
2在其中的“图像名称”文本框中输入图像名称“news”。
3单击“原始图像”文本框后面的“浏览”按钮。
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0019_0012.jpg?sign=1734397804-QMRP9qnXW4zxTIx3mU0OnDeF2U4tvEG3-0-835ec5c11b32e5131db88e54401a9282)
1在打开的“原始图像”对话框的“查找范围”下拉列表框中选择图像位置。
2在文件列表框中双击“btn new1.gif”图像文件,返回“插入鼠标经过图像”对话框。
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0019_0015.jpg?sign=1734397804-2ZgHfoDgKpb5pNT9WAu1YlW1lrDfvxpT-0-cfdcee298d3bd29600f501340725e2ce)
1在“鼠标经过图像”文本框中输入“pic/btn new2 .gif”。
2在“替换文本”文本框中输入“新闻”,在“按下时,前往的URL”文本框中输入“#news”,单击“确定”按钮,完成鼠标经过图像的创建。
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0019_0018.jpg?sign=1734397804-g3lvocPkZPBmU80LDsdds0N2ioHrpXLJ-0-2dc5c78efb8a3140f194d9763587beca)
1按Ctrl+S组合键保存网页文档。
2按F12键,在打开的IE浏览器中将鼠标光标移动到鼠标经过图像“网页”按钮上,其效果如上图所示。
实例15 制作我的相册网页
素材: \实例15\
源文件:\实例15\Albumz.html
包含知识
■插入导航条
■修改导航条
重点难点
■插入导航条
■修改导航条
制作思路
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0020_0001.jpg?sign=1734397804-746O00VrYId20QcrXi5gdYp2dNikehvX-0-8dfb1d03df43798695d9977613217ea6)
定位鼠标光标
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0020_0002.jpg?sign=1734397804-82u4PWkLtgMNPzLhFUe8FUJlPDxHQ0fq-0-6c06d48b05516666f7eb31956d95fa6f)
插入导航条
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0020_0003.jpg?sign=1734397804-cGebLh0LfroIQ97j90MZ5Wll6lMfGZAt-0-13f34215504511b6bfc0f3891e804340)
1打开素材网页文档“Albumz.html”。
2在如上图所示的位置单击鼠标左键,确定鼠标光标位置。
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0020_0006.jpg?sign=1734397804-7B17NFavvLBT0MxMM5L37HOqGqCjgYaF-0-e7f05bbd9e34f510c1a37332a19e4137)
1选择“插入记录-图像对象-导航条”命令,打开“插入导航条”对话框。
2单击“状态图像”文本框后面的“浏览”按钮。
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0020_0009.jpg?sign=1734397804-ndIlp0oPypnAlAEEWnd2mGcCfG6TthNh-0-4c4ffa9731ffb7167786a330c1f1f1d7)
1在打开的对话框的“查找范围”下拉列表框中选择图像所在的位置。
2在文件列表框中双击需要的图像,关闭对话框。
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0020_0012.jpg?sign=1734397804-UIJPFzEtP3OJ0lJGwJc8sH10IrX35QjI-0-65a74d3170f39682d3eb6f63ed14f234)
1返回到“插入导航条”对话框中,在“鼠标经过图像”文本框中输入图像位置及名称。
2在“替换文本”及“按下时,前往的URL”文本框中输入相应的内容,并在“插入”下拉列表框中选择“垂直”选项。
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0020_0015.jpg?sign=1734397804-roYuYghHWP0ytk7yB3PsYONYkHH0AdeK-0-0d760c7c0f2eb467b96a50cf2e542e9d)
1单击按钮,添加导航条元件。
2使用相同的方法进行设置。
3单击按钮,添加导航条元件,并进行导航条元件的设置,然后单击“确定”按钮。
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0020_0021.jpg?sign=1734397804-sH8EOiHPTPaxloUiK21Kpo6pbGhEYe8M-0-e32a4d5bd88689c8e1398cc215c67f3f)
1按Ctrl+S组合键保存网页文档。
2按F12键,在打开的IE浏览器中将鼠标光标移动到导航条元件上时,图像将发生变化,如上图所示。
注意提示
选择“修改-导航条”命令,可以修改导航条的设置。
实例16 制作错误提示页面
素材:\实例16\
源文件:\实例16\erro.html
包含知识
■复制图像
■粘贴图像
重点难点
■粘贴图像
制作思路
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0021_0001.jpg?sign=1734397804-TXsTW3gAVoiY7kKhaEOvmOfxotagLiTC-0-afa78eedaab5d2640af0af2268904ab0)
复制图像
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0021_0002.jpg?sign=1734397804-zCSWeJbyhmPsFpCLsPcu8cgDLn2NdhTI-0-f55878aeaa8c8568775f2097574fcb21)
粘贴图像
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0021_0003.jpg?sign=1734397804-Empws1VY5IenjOXULZtmP5gp9vwWsFtR-0-760eeecbc2f2fa64c086630e0fc24053)
1打开素材文件夹并选择图像“erro.jpg”。
2在选择的图像上单击鼠标右键,在弹出的快捷菜单中选择“复制”命令。
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0021_0006.jpg?sign=1734397804-uwoxXABQHnjtm6f60cLShfMWRVZuIGBT-0-54ab66b2935a6d575eeb17d56cd127f8)
1打开素材网页文档“erro.html”。
2选择如上图所示的“粘贴图像”文本并按Delete键将其删除。
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0021_0009.jpg?sign=1734397804-cET3srRMPqdtz0lz625cP31NnYaugAfl-0-e8882493acc4cd17feca3c7870d60206)
1保持鼠标光标在删除文本的位置并按Ctrl+Ⅴ组合键,在打开的“选择图像源文件”对话框中不进行任何操作,单击“取消”按钮。
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0021_0011.jpg?sign=1734397804-eb2DF5yHiv5YfHZmoNRfabUFbrl7iLUz-0-d4b98870dff46deb48f27d7b0a1dac4a)
1在打开的“图像标签辅助功能属性”对话框中不进行任何操作,单击“取消”按钮,完成图像的插入。
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0021_0013.jpg?sign=1734397804-K2lxsLHSf7JESbd27E2koVPYGNoQb7dh-0-0b0a5114819c616deb44c2ab03ae9f7e)
1使用相同的方法将图像“yuan.jpg”插入到文本“如果您”之前,按一次空格键,完成后的效果如上图所示。
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0021_0015.jpg?sign=1734397804-h3kSpt7Oq5SPGf9wnzOZmBonHV0x2mub-0-2d03bc22cf65811f19354e5422eab905)
1按Ctrl+S组合键保存网页文档。
2按F12键,在打开的IE浏览器中查看网页效果,如上图所示。
实例17 制作注册模板网页
素材:\实例17\
源文件:\实例17\reg.html
包含知识
■创建模板
■创建可编辑区域
■通过模板创建网页文档
重点难点
■创建可编辑区域
■通过模板创建网页文档
制作思路
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0022_0001.jpg?sign=1734397804-2d3zKPx7Jx9wZ2n2gd1IBvSaAaTMRcMB-0-5abb76216d4e550b617c7e1687ddcab8)
另存为模板
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0022_0002.jpg?sign=1734397804-SVTGl7c3JXefSeuTTaMs5NgqcvQNeXfl-0-25ed2b2a91d3087308b7dcf7a643f6c1)
创建可编辑区域并输入、美化文本
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0022_0003.jpg?sign=1734397804-R75IfrN6LsZhGtKVGQwWT0pa3RATAjE8-0-d4f8baa6a1491a08c706de5314677583)
1创建站点后将所有的素材文件复制到站点根文件夹中,打开素材网页文档“reg moban.html”。
2选择“文件-另存为模板”命令,在打开的“另存模板”对话框的“另存为”文本框中输入“reg moban”,单击“保存”按钮。
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0022_0006.jpg?sign=1734397804-MZxD96gDVU6u9eyAogUO0CKxKy7Oe8tf-0-04f3faec3e47903eaf04d18e0533fac9)
1在打开的提示对话框中单击“是”按钮,更新链接,以免导致图像等对象的链接不正确,因为模板网页会保存在站点的“Templates”文件夹中,其路径就必须跟着改变才能正确地进行链接。
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0022_0008.jpg?sign=1734397804-YiEoETzmPVvpcTtHwMuPrxz2dTAj2AHN-0-57e6e14155f058385fdd3b631f58de63)
1将鼠标光标移动到如上图所示的网页对象上并单击鼠标,选择该对象。
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0022_0010.jpg?sign=1734397804-LlZIsMLV22r6Hpea6g179pNZgny5GAXg-0-d6242597c856eea601c9e609a41173c0)
1选择“插入记录-模板对象-可编辑区域”命令。
2在打开的对话框的“名称”文本框中输入可编辑区域的名称,单击“确定”按钮,完成可编辑区域的创建。
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0022_0013.jpg?sign=1734397804-ZVQnpNp6dxq7E1Q3eOAoADQs3nmMjdgI-0-51a9df7589ab168460ee24df3021481a)
1创建的可编辑区域如上图所示。
2按Ctrl+S组合键保存模板。
![](https://epubservercos.yuewen.com/A578F3/3590497703468701/epubprivate/OEBPS/Images/figure_0022_0016.jpg?sign=1734397804-EOwi6D0dRkFYu4Rk21l9KFNp6IS0L3qh-0-8ea7d16ec07bbb53d42716c5d3ab3ff3)
1按F11键,打开“资源”面板,单击其中的“模板”按钮。
2在“reg moban”模板文件上单击鼠标右键,在弹出的快捷菜单中选择“从模板新建”命令。
3将鼠标光标定位到可编辑区域中,输入相应的文本并设置样式,完成后的效果如上图所示。按Ctrl+S组合键将其以“reg.html”为名进行保存。