网页编辑与超级链接课件

第3章网页编辑与超级链接2014.11第3章网页编辑与超级链接2014.11第3章网页编辑与超级链接网页中图像的设置3.2制作图像效果3.3网页中文本的设置3.1设置超级链接

3.4网页的应用

4.5网页设计与制作》第3章网页编辑与超级链接网页中图像的设置3.2制作2本章要点文本是表达信息最直接的方式，网上大量信息的传播仍以文本为主。图像与文本一样，也是网页信息的表现形式，因为有了图像，网页才显得生动。文本与图像都是网页最基本、最常用的元素。此外，只有存在超级链接，网页才会有意义。因此，文本、图像与超级链接是网页设计最基本的要素。

输入普通文本、空格、特殊字符与日期设置文本属性网页图像的基础知识网页图像素材的搜集插入图像并设置图像的属性制作图像的提示信息、滚盖图与图像映射超级链接的基础知识创建超级链接、空链接、书签锚点与跳转菜单在网页中插入Flash动画、视频、声音博客的建立与基本操作网页设计与制作》本章要点文本是表达信息最直接的方式，网上大量信息33.1网页中文本的设置输入文本

3.1.11．输入文字在Dreamweaver中，文本的输入与其他字处理程序基本相同。操作实例3-1输入文字操作步骤：（1）在文档编辑窗口直接输入单击需要输入文字的位置，设置插入点。输入文字。（2）复制已有的文本首先选中需要复制的文本，使用快捷键“Ctrl+C”复制。切换到Dreamweaver的文档窗口，在网页上单击需要输入文本的位置，设置插入点。使用快捷键“Ctrl+V”粘贴；或选择“编辑”菜单的“粘贴”选项；或单击文档工具栏的“粘贴”按钮。注意：从其他地方复制文本，再粘贴到Dreamweaver文档窗口时，将失去原有的格式，但分段格式将保留。网页设计与制作》3.1网页中文本的设置输入文本3.1.11．输入文字43.1网页中文本的设置输入文本

3.1.12．输入空格在Dreamweaver中，空格的输入与其他字处理程序稍有不同。操作实例3-2输入空格操作步骤：方法一：将中文输入法切换到全角模式，可以按“空格”键输入空格。利用快捷键“Shift+空格”可以切换半角与全角状态。方法二：选择“文本”工具栏中的“已编排格式”选项，可以按“空格”键输入空格。方法三：选择“文本”工具栏中的“字符”、“不换行空格”选项。方法四：将光标定位到“代码”视图中需要输入空格的位置，输入

即可输入空格。

网页设计与制作》3.1网页中文本的设置输入文本3.1.12．输入空格53.1网页中文本的设置输入文本

3.1.13．输入特殊字符网页中除普通文字外，有时还需要输入特殊字符。例如，版权信息“©”、注册商标“®”、商标“™”等。在Dreamweaver中输入特殊字符非常方便，可以直接使用“文本”工具栏进行。操作实例3-3输入特殊字符操作步骤：①单击需要输入特殊字符的位置，设置插入点。②单击“文本”工具栏的“字符”下拉箭头，显示特殊字符菜单。③如果没有所需要的字符，则单击最后的“其他字符”选项，弹出“插入其他字符”对话框，可在其中选择需要插入的特殊字符。

网页设计与制作》3.1网页中文本的设置输入文本3.1.13．输入特殊63.1网页中文本的设置输入文本

3.1.1注意：通过此方法添加的特殊字符在Dreamweaver文档窗口中显示混乱，请不要修改，它们在浏览器中可正确显示。有些特殊字符Dreamweaver没有提供，如果需要，可以通过“智能ABC输入法”的软键盘输入。此方法输入的特殊符号在Dreamweaver文档窗口与浏览器窗口均能正确显示。4．输入回车在Dreamweaver文档窗口输入文字时，如果按回车键（Enter）换行，两段之间的距离比较大，为保持正常的行距，可采用插入“换行符”的方法。

网页设计与制作》3.1网页中文本的设置输入文本3.1.1注意：通过此73.1网页中文本的设置修饰文本

3.1.21．文本属性面板从DreamweaverCS6版本开始，“属性”面板上的属性设置分为两个部分：一个部分为HTML属性，该部分属性设置将直接写入元素所在的标记中；另一部分是CSS属性，该部分属性设置将写入相应的CSS样式表中。网页设计与制作》3.1网页中文本的设置修饰文本3.1.21．文本属性83.1网页中文本的设置修饰文本

3.1.22．基于文本属性的CSS规则的建立与应用网页设计与制作》3.1网页中文本的设置修饰文本3.1.22．基于文本93.1网页中文本的设置修饰文本

3.1.22．基于文本属性的CSS规则的建立与应用操作实例3-5创建并应用CSS规则图中的文字由三行组成，设置第一行文字字号为18px、文字加粗，将上述设置创建为CSS规则，命名为“word”。在第三行文字上，应用“word”规则。操作步骤：①选中第一行文字，在“属性”的CSS面板，“大小”设置为18。②在弹出的“新建CSS规则”对话框的“选择器名称”，输入“word”，单击“确定”按钮退出。③仍然选中第一行文字，在“属性”的CSS面板，设置为“粗体”。④在弹出的“新建CSS规则”对话框的“选择器名称”，再次输入“word”，单击“确定”按钮退出。

1.游客需花费389.36美元于火奴鲁鲁休息一夜。2.在英国伦敦出行一次往返的价格大约为41.47美元。3.两名游客可以以44.86美元的价位在中国台湾享用晚餐两次。设置前的文字1.游客需花费389.36美元于火奴鲁鲁休息一夜。2.在英国伦敦出行一次往返的价格大约为41.47美元。3.两名游客可以以44.86美元的价位在中国台湾享用晚餐两次。设置后的文字网页设计与制作》3.1网页中文本的设置修饰文本3.1.22．基于文本103.1网页中文本的设置修饰文本

3.1.2说明：两次设置均记录在新建的CSS规则“word”中。⑤选中第三行文字，打开“属性”的CSS面板。⑥在“目标规则”下拉列表中选择“word”，则第一行文字的设置自动应用于第三行文字。为减少叙述，后续的操作实例中，对于“新建CSS规则”对话框的处理方式均默认为“取消”。读者可根据自己的需要选择设置或取消。有关CSS规则的详细介绍将在第七章进行。网页设计与制作》3.1网页中文本的设置修饰文本3.1.2113.1网页中文本的设置修饰文本

3.1.23．设置文本属性操作实例3-6修饰下图文字修饰要求：标题行要求：字体为华文隶书、标题2、红色、居中、粗体。正文要求：字体为宋体、字号18px、蓝色、首行缩进。网页设计与制作》3.1网页中文本的设置修饰文本3.1.23．设置文本123.1网页中文本的设置修饰文本

3.1.2操作步骤：（1）设置标题格式选中标题“在线旅游旺季出招抢客源”。在文本“属性”HTML面板的“格式”列表中选择“标题2”。标题共分6级，“标题1”最大，“标题6”最小，如图3-11所示。（2）设置字体选中标题“在线旅游旺季出招抢客源”，在文本“属性”CSS面板的“字体”列表中选择“华文隶书”。如图3-12所示。（在弹出的“新建CSS规则”对话框，单击“取消”按钮。后不赘述。）选中正文，在文本“属性”CSS面板的“字体”列表中选择“宋体”。（3）设置字号①选中正文。②在文本“属性”CSS面板的“大小”列表中选择“18”，单位选择“px”。如果在“大小”列表中选择非数字，则单位失效。网页设计与制作》3.1网页中文本的设置修饰文本3.1.2操作步骤：网133.1网页中文本的设置修饰文本

3.1.2（4）设置文本的颜色选中标题“在线旅游旺季出招抢客源”，单击“属性”的CSS面板中的“颜色框”，选取“红色”，或在相邻的文本框中输入颜色值“#F00”。。选中正文，单击“属性”的CSS面板中的“颜色框”，选取“蓝色”，或在相邻的文本框中输入颜色值“#00F”。输入文本时，默认的颜色是黑色。可以改变选定文本的颜色，所选颜色将覆盖默认颜色。如果需要将文本颜色还原为默认颜色，可在颜色面板中单击“默认颜色”按钮。为标题设置文本属性为内容设置文本属性

网页设计与制作》3.1网页中文本的设置修饰文本3.1.2（4）设置文143.1网页中文本的设置修饰文本

3.1.2（5）设置文本的对齐方式①选中文本，或将光标放置在文本的起始处。例如，选中标题“在线旅游旺季出招抢客源”。②在“属性”的CSS面板中单击对齐按钮：左对齐，居中对齐，右对齐，两端对齐。或在“格式”菜单的“对齐”选项中选择一种对齐方式。例如，选择“居中对齐”。（6）设置文本的加粗或倾斜①选中文本。例如，选中标题“在线旅游旺季出招抢客源”。②单击“属性”的CSS面板上的“B”按钮，设置粗体。单击“B”（粗体）或“I”（斜体）按钮，可使文本加粗或倾斜。再次单击，可取消加粗或倾斜。也可直接单击“文本”工具栏上的“B”或“I”按钮。

网页设计与制作》3.1网页中文本的设置修饰文本3.1.2（5）设置文153.1网页中文本的设置修饰文本

3.1.2（7）设置文本缩进或取消缩进①选中正文。②在“属性”的HTML面板单击“文本缩进”按钮，设置正文的首行缩进。“文本缩进”按钮，用于设置文本的首行缩进；“文本凸出”按钮，用于取消首行缩进。也可直接选择“格式”菜单中的“缩进”或“凸出”选项。（8）保存文件并链接①编辑完成的网页以“news02.html”为名，存入站点的“html”文件夹。②打开首页index.html，选中文字“在线旅游旺季出招抢客源”，单击鼠标右键，在快捷菜单中选择“创建链接”，链接到“news02.html”文件。

网页设计与制作》3.1网页中文本的设置修饰文本3.1.2（7）设置文163.1网页中文本的设置修饰文本

3.1.24．添加字体可以通过“编辑字体列表”对话框增加中文字体的样式。操作实例3-7添加新字体操作步骤：选择“修改”菜单中的“字体家族”选项，或在“属性”的CSS面板的“字体”列表中选择“编辑字体列表”，弹出如图3-15所示的“编辑字体列表”对话框。单击“+”号按钮，在“字体列表”中显示“（在以下列表中添加字体）”选项。在“可用字体”列表中选择需要添加的字体，例如“幼圆”。单击“左向箭头”按钮，“幼圆”被添加到字体列表中，如图3-15所示。参照步骤②~③，继续添加其他字体。选中某个字体，单击“-”号按钮可以删除该字体。选中某个字体，单击“▲”或“▼”按钮，可以更改字体在列表中的顺序。单击“确定”按钮，完成字体添加。网页设计与制作》3.1网页中文本的设置修饰文本3.1.24．添加字体173.2网页中图像的设置网页图像的基础知识

3.2.11．网页图像的格式网页经常使用的图像文件有三种格式：GIF、JPEG和PNG。只有GIF和JPEG是被绝大多数浏览器完全支持的。它们的共同特点是：文件信息量小，适合于网络传输，适合于各种平台。因此，GIF和JPEG图像文件格式被作为标准的网页图像格式。网页设计与制作》3.2网页中图像的设置网页图像的基础知识3.2.11183.2网页中图像的设置网页图像的基础知识

3.2.1（1）图形交换格式GIFGIF（GraphicInterchangeFormat）格式采用非失真（Losses）的压缩方式。在压缩过程中，不破坏图像的像素信息，被破坏的是图像的颜色。GIF格式最多只能显示256色。GIF适合显示非连续色调或有大色块的图像，例如，导航条，按钮，图标，徽标或其他有一致颜色和色调的图像。GIF图像支持透明颜色，支持动画。此外，GIF图像还支持隔行扫描格式，即浏览器先按1、3、5、7、9……行载入图像的粗略概貌，然后继续载入2、4、6、8、10……行完成全部图像。这种GIF文件在浏览器中的显示是逐渐清晰的。相对来说，GIF图像的质量比JPEG图像要差一些。GIF格式文件的扩展名为.gif。网页设计与制作》3.2网页中图像的设置网页图像的基础知识3.2.1（1193.2网页中图像的设置网页图像的基础知识

3.2.1（2）联合摄影专家组JPEGJPEG（JointPhotographicExpertsGroup）采用失真（Lossy）的压缩方式。在压缩过程中，图像的像素信息将被破坏一些，因此图像会失真，但图像的颜色不会失真。JPEG格式是一种支持真彩色的影像压缩格式，适合显示连续色调图像或照片。例如，风景名胜摄影、人物肖像照片等。JPEG图像随着压缩质量的不同，其文件大小与下载时间也会不同。质量越高，则文件越大。可根据人的视觉所能接受的程度调节压缩质量，找到一个图像质量与文件大小之间的最佳平衡点。与GIF格式不同，JPEG图像既不支持透明颜色属性，也不支持动画。JPEG文件一般要比GIF或PNG文件大一些，其扩展名为.jpg或.jpeg。网页设计与制作》3.2网页中图像的设置网页图像的基础知识3.2.1（2203.2网页中图像的设置网页图像的基础知识

3.2.1（3）可携网络组PNGPNG（PortableNetworkGroup）文件格式支持颜色索引、灰度、真彩色图像和透明alpha通道。PNG是Fireworks的一种本地文件格式。PNG文件包含了所有的原始层、矢量、颜色和效果信息，而所有这些元素都是可以随时编辑的。PNG格式的文件比较大，其扩展名为.png。网页设计与制作》3.2网页中图像的设置网页图像的基础知识3.2.1（3213.2网页中图像的设置网页图像的基础知识

3.2.12．颜色原理在HTML中，颜色既可以使用颜色名称red（红色）、green（绿色）、blue（蓝色）表示，也可以使用十六进制数（例如：#FF0000）表示。在Windows操作系统中，在256色颜色模式下显示的颜色被称为安全色（websafe）。共有212种Web安全色，它们是组合了成对的00、33、66、99、CC或FF的任何十六进制值，其相应的RGB值为0、51、102、153、204和255。例如：#000000表示黑色、#FFFFFF表示白色、#FF0000表示红色、#00FF00表示绿色、#0000FF表示蓝色等。如果颜色值超出212种Web安全色范围，在不同的浏览器上可能显示不同的颜色，从而破坏网页的整体效果。Dreamweaver中所有颜色拾取器均使用212色的Web安全色调色板。从调色板中选择颜色时可显示颜色的十六进制值。也可以在任何颜色区域中直接输入十六进制值。网页设计与制作》3.2网页中图像的设置网页图像的基础知识3.2.12．223.2网页中图像的设置网页图像的基础知识

3.2.1颜色对人的视觉效果非常明显，冲击力是最强的。一个网站设计的成功与否，在某种程度上取决于设计者对颜色的运用和搭配。因此，在设计网页时，必须高度重视颜色的搭配。颜色有冷暖色之分，冷色（例如蓝色）给人的感觉是安静、冰冷；而暖色（例如红色）给人的感觉是热烈、火热。冷暖色的巧妙运用可以让网站产生意想不到的效果。一般情况下，各种颜色给人的感觉是：红色代表热情、活泼、热闹、温暖、幸福、吉祥。橙色代表光明、华丽、兴奋、甜蜜、快乐。黄色代表明朗、愉快、高贵、希望。绿色代表新鲜、平静、和平、柔和、安逸、青春。蓝色代表深远、永恒、沉静、理智、诚实、寒冷。紫色代表优雅、高贵、魅力、自傲。白色代表纯洁、纯真、朴素、神圣、明快。灰色代表忧郁、消极、谦虚、平凡、沉默、中庸、寂寞。黑色代表崇高、坚实、严肃、刚健、粗莽。网页设计与制作》3.2网页中图像的设置网页图像的基础知识3.2.1颜色233.2网页中图像的设置网页图像的基础知识

3.2.1网页颜色搭配时应注意以下问题：·使用单色：选定一种主色，通过调整颜色的饱和度和透明度，使之产生变化，使网站避免单调。·使用邻近色：邻近色，就是在色带上相邻近的颜色。例如，绿色和蓝色，红色和黄色互为邻近色。采用邻近色设计网页可以使网页避免色彩杂乱，易于达到页面的和谐统一。·使用对比色：对比色可以突出重点，产生强烈的视觉效果。通过合理使用对比色能够使网站特色鲜明、重点突出。一般以一种颜色作为主色调，以对比色作为点缀，可以起到画龙点睛的作用。·黑色的使用：黑色是一种特殊的颜色，如果使用恰当，设计合理，往往产生很强烈的艺术效果。黑色一般用于背景色，与其他纯度色彩搭配使用。·背景颜色的使用：背景颜色一般采用清淡素雅的色彩，避免采用花纹复杂的图片和纯度很高的色彩，同时背景颜色应与文字色彩对比的强烈一些。·色彩的数量：网站用色并不是越多越好，用色太多，缺乏统一和协调。网页设计与制作》3.2网页中图像的设置网页图像的基础知识3.2.1网页243.2网页中图像的设置网页图像素材的搜集

3.2.2制作网页之前，搜集一些图像素材是十分必要的1．从网页文件中提取全部图像文件如果某些网页的图像很精美，可以把这些图像下载（Download）下来。操作实例3-8保存“新浪”的网页操作步骤：①打开“新浪”的网页，在IE浏览器窗口中选择“文件”菜单中的“另存为”选项。②在弹出的“保存Web页”对话框中，选择保存位置，“文件名”一般采用默认的文件名，也可以重命名，“保存类型”默认为“Web页，全部（*.htm；*.html）”。③单击“保存”按钮。在“我的电脑”中打开保存网页的文件夹，在该文件夹下除了网页文件之外，还有一个前缀同名的文件夹。打开此文件夹，网页所使用的全部图像均保存在这里。网页设计与制作》3.2网页中图像的设置网页图像素材的搜集3.2.2制作253.2网页中图像的设置网页图像素材的搜集

3.2.22．从网页文件中提取一副图像如果只需要选择性地下载一些图像，可以使用右键快捷菜单。操作实例3-9保存网页上的一幅图像操作步骤：①在浏览器中打开网页。②在需要下载的图像上单击鼠标右键，在快捷菜单中选择“图片另存为”选项。③在“保存图片”对话框中选择“保存位置”，“文件名”和“保存类型”采用默认值即可。④单击“保存”按钮。网页设计与制作》3.2网页中图像的设置网页图像素材的搜集3.2.22．263.2网页中图像的设置插入图像

3.2.3可以在Dreamweaver文档中插入GIF、JPEG和PNG图像。除了向页面中插入图像之外，还可以在表格、表单或层中插入图像。在层中插入图像，可以达到图像交叠的效果。在Dreamweaver文档中插入图像时，将自动在HTML源代码中产生对该图像文件的一个引用。为保证该引用的正确，图像文件必须在当前站点中。如果图像文件不在当前站点中，Dreamweaver自动将图像文件复制到当前站点的根文件夹下。网页设计与制作》3.2网页中图像的设置插入图像3.2.3可以在Drea273.2网页中图像的设置插入图像

3.2.3操作实例3-10插入图像例如，在“在线旅游旺季出招抢客源”网页“news02.html”中插入1幅图片。

操作步骤：打开“news02.html”网页。在希望插入图像的位置单击鼠标设置插入点，执行下列操作之一，进入“选择图像源文件”对话框。·单击“常用”工具栏中的“图像”按钮。·选择“插入”菜单中的“图像”选项。·然后按快捷键“Ctrl+Alt+I”。·从“常用”工具栏中拖动“图像”按钮到文档窗口所需要的位置。在“选择图像源文件”对话框中，选取所要插入的图像文件“pic01.jpg”。单击“确定”按钮，图像插入完毕。所选的图像文件同时自动复制到站点定义的image文件夹中。如果所选图像文件已经存在于站点文件夹中，可以采用直接从“文件”面板中拖动图像文件到文档窗口指定位置的方法，完成图像的插入。按Ctrl+S快捷键保存网页“news02.html”。

网页设计与制作》3.2网页中图像的设置插入图像3.2.3操作实例3-1283.2网页中图像的设置设置图像属性

3.2.4图像插入后，可以在文档窗口中直接进行修改。例如，可以使用“属性”面板为图像添加链接、添加边框、设置图像的大小、在图像周围添加间隔、设置图像的对齐方式等。1．“图像”属性面板首先在文档窗口选中指定图像，文档窗口下方自动显示“图像属性”面板。通过“图像属性”面板右下角的“展开”按钮可以控制显示常用属性或所有属性。

网页设计与制作》3.2网页中图像的设置设置图像属性3.2.4293.2网页中图像的设置设置图像属性3.2.4图像属性面板中的各项功能如下：①图像图像旁边的数字代表所选图像的大小，下面的文本框可以输入所选图像的名称。如果图像有名称，就可以在使用Dreamweaver的行为（例如“交换图像”）或使用脚本语言（例如JavaScript或VBScript）时调用该图像。②“宽”和“高”“宽”和“高”规定了图像在页面上的大小，同时也为在浏览器中加载时保留空间。Dreamweaver使用图像的原始大小自动填充这些域。默认值和未标明值的单位均是像素。如果“宽”和“高”不对应图像的实际宽度和高度，则图像在浏览器中的显示将会不正常。可以按比例改变“宽”和“高”的值以缩放显示的图像，但不会影响下载时间，因为在按比例缩小图像之前，浏览器仍需要加载所有的图像数据。如果需要缩短下载时间且图像以相同的大小显示，则需要使用图像编辑程序按比例缩小图像。网页设计与制作》3.2网页中图像的设置设置图像属性3.2.4图像属性面板303.2网页中图像的设置设置图像属性3.2.4③源文件用于插入图像文件或显示当前图像文件的路径。④链接为图像指定一个超级链接。为图像创建超级链接有以下三种方法：·拖动“指向文件”图标到“站点”窗口中的一个文件上。·单击“浏览文件”文件夹图标，选取站点上的一个文件。·直接键入URL路径。⑤目标指定链接页面将在哪个窗口或框架中打开，当图像没有超级链接时该选项不可用。

网页设计与制作》3.2网页中图像的设置设置图像属性3.2.4③源文件网页313.2网页中图像的设置设置图像属性3.2.4⑥对齐在同一行上对齐文本和图像。选项的功能如下：·默认值：一般为基线对齐。浏览器不同，默认值也可能不同。·基线：将所选图像与文本或其他元素的基线的底部对齐。·顶端：将所选图像和当前行中最高的项目（图像或文本）对齐。·居中：将所选图像与文本的基线中间对齐。·底部：底端对齐。·文本上方：将所选图像与文本行中最高字符的顶端对齐。·绝对居中：将所选图像与当前行的绝对中间对齐。·绝对底部：将所选图像的底部与绝对底部（包括下行字母如字母g）对齐。·左对齐：将所选图像放置在左边界上，文本在其右边折行显示，如果左对齐文本超过该行对象，一般会强迫左对齐对象向下折行。·右对齐：将所选图像放置在右边界上，文本在其左边折行显示，如果右对齐文本超过该行对象，一般会强迫右对齐对象向下折行。网页设计与制作》3.2网页中图像的设置设置图像属性3.2.4⑥对齐网页设323.2网页中图像的设置设置图像属性3.2.4⑦替换指定文本浏览器或关闭了图像显示功能的浏览器在图像位置上显示的替换文本。在某些浏览器中，当鼠标指向图像时，该文本也会显示。⑧地图：允许用户创建客户端图像地图。⑨“垂直边距”和“水平边距”在图像的四周以象素为单位添加间隔。“垂直边距”将在图像顶部和底部添加间隔；“水平边距”将在图像左边和右边添加间隔。⑩边框设置环绕图像的边框宽度，单位是象素。输入0表示没有边框。可为链接图像和无链接图像指定边框。如果在“页面属性”对话框中指定链接文本的颜色，则链接图像边框也默认此颜色。如果设置没有链接的图像也有边框，边框颜色将和图像所在段落的文本颜色一样。

网页设计与制作》3.2网页中图像的设置设置图像属性3.2.4⑦替换网页333.2网页中图像的设置设置图像属性3.2.4⑾编辑按钮编辑：启动外部图像编辑器编辑当前图像。编辑图像设置：单击可启动图像预览窗口。

裁剪：单击可裁剪当前图像。

重新取样：放弃外部图像编辑器编辑后的效果，恢复原始图像。亮度和对比度。锐化。Dreamweaver将使用编辑后的图像更新文档窗口。⑿类从下拉列表框中可以选择应用已经定义好的CSS样式表，或者进行“重命名”等操作。

网页设计与制作》3.2网页中图像的设置设置图像属性3.2.4⑾编辑按钮网343.2网页中图像的设置设置图像属性3.2.42．调整图像的大小可以在Dreamweaver文档窗口调整图像的大小，以便使页面布局更加合理、美观。调整图像时应注意以下问题：属性面板的“宽”与“高”将显示图像的当前宽度和高度，调整图像的大小将重置图像的“宽”与“高”。Flash影片和其他矢量图是可按比例调整的，并且不会影响其品质。改变GIF、JPEG和PNG图像的“宽”与“高”时，图像可能会失真或模糊。在Dreamweaver中调整图像的大小只是用于布局，但图像文件的实际大小不会发生改变。一旦确定了图像的理想尺寸后，应及时启动图像编辑程序，调整图像的实际大小，以节省下载时间。网页设计与制作》3.2网页中图像的设置设置图像属性3.2.42．调整图像353.2网页中图像的设置设置图像属性3.2.4操作实例3-11调整图像的大小操作步骤：在文档窗口中选中图像。此时调整大小手柄出现在图像的底部、右边及右下角。执行下列操作调整图像大小：·拖动右边的选择手柄调整图像宽度。·拖动底边的选择手柄调整图像高度。·拖动右下角的选择手柄同时调整图像的宽度和高度。·Shift+拖动右下角的选择手柄，可在调整图像时保持图像的原有比例。·在“属性”面板的“宽”和“高”中直接输入数值。·如果需要将调整后的图像恢复初始大小，可在“属性”面板中删除“宽”和“高”的数值。网页设计与制作》3.2网页中图像的设置设置图像属性3.2.4操作实例3-363.3制作图像效果

制作网页中的滚盖图

3.3.1浏览网页时经常会看到这样的效果：当鼠标指向某图像时，图像大小不变但图像却变化为另一幅图像；当鼠标移出该图像时，图像又可还原。一般将这类图像称为“滚盖图”。例如，下图就是一个带有滚盖图的页面，当鼠标移入图像区域时（a）图变为（b）图所示的页面。

(a)含滚盖图的页面(b)鼠标指针经过时变化的页面网页设计与制作》3.3制作图像效果制作网页中的滚盖图3.3.1浏览网373.3制作图像效果制作网页中的滚盖图

3.3.1滚盖图常用于按钮或导航条，能给浏览者一种简单的动态感觉。滚盖图实际使用了两幅图像：一幅为原始图像，该图像在页面第一次加载时显示；一幅为鼠标指向图像，即当鼠标指向原始图像时所显示的图像。设计滚盖图时，应准备好两幅尺寸相同的图像。如果两幅图像的尺寸不同，Dreamweaver将自动调整第二幅图像的尺寸，使其与第一幅图像相匹配。网页设计与制作》3.3制作图像效果制作网页中的滚盖图3.3.1滚盖图常383.3制作图像效果制作网页中的滚盖图

3.3.1操作实例3-12在网页中制作滚盖图在首页index.html网页中，建立“旅游资讯”滚盖图。操作步骤：打开index.html网页，将原有的“旅游资讯”蓝色字样图像删除。将光标仍定位在此单元格中。选择以下操作之一，弹出“插入鼠标经过图像”对话框。·在“常用”工具栏的“图像”下拉列表中，选择“鼠标经过图像”选项。·在“插入”菜单中，选择“图像对象”中的“鼠标经过图像”选项。在“插入鼠标经过图像”对话框，作如下设置：·在“图像名称”框中输入滚盖图的名称，例如，输入“旅游资讯”，也可以使用默认设置。·在“原始图像”框中单击“浏览”按钮并选取图像文件，或直接输入第一幅图像文件的路径。例如，选取图片“image/dot01.jpg”。·在“鼠标经过图像”框中单击“浏览”按钮并选取图像文件，或直接输入第二幅图象文件的路径。例如，选取图片“image/dot01-new.jpg”。网页设计与制作》3.3制作图像效果制作网页中的滚盖图3.3.1操作实例393.3制作图像效果制作网页中的滚盖图

3.3.1·如果需要将图像预先加载到浏览器的高速缓存中，可选取“预载鼠标经过图像”选项。此复选框一般被选中。·在“按下时，前往的URL”框中，单击“浏览”按钮并选取链接文件，或直接输入链接文件的路径。例如，连接“html/news01.html”。注意：如果不为图像设置链接，Dreamweaver将在HTML源代码的滚盖图附加行为中插入一个空链接（#），如果删除该空链接滚盖图将不能正常工作。单击“确定”按钮，关闭“插入鼠标经过图象”对话框。快捷键“Ctrl+S”保存网页。按快捷键F12预览网页，在浏览器中将鼠标指向原始图像时将显示效果。

网页设计与制作》3.3制作图像效果制作网页中的滚盖图3.3.1·如果需403.3制作图像效果制作图像映射

3.3.2一幅图像一般只有一个超级链接。如果希望一幅图像具有多个超级链接，则必须使用图像热点进行处理。例如，在网页上插入一幅世界地图，该地图可创建多个不同的热点区域：当浏览者单击亚洲地区热点时，即可进入有关亚洲的页面；当浏览者单击非洲地区热点时，即可进入有关非洲的页面……这种链接称为“图像映射”。所谓“图像映射”（ImageMap），就是把一幅图像分割为若干个区域，每个区域称为一个“热点”（Hotsport），当浏览者单击某个热点时，将引发一个动作。例如，打开一个相关的网页文件。使用“图像属性”面板可以图形化地创建和编辑客户端图像映射。

网页设计与制作》3.3制作图像效果制作图像映射3.3.2一幅图像一般只413.3制作图像效果制作图像映射

3.3.2操作实例3-13创建客户端图像映射在“北京漫游”bjmy.html网页中，建立“各旅游景点”的图像映射。操作步骤：打开bjmy.html网页，选中“北京地图”图像。在图像“属性”面板的“地图”名称框中为图像映射输入一个惟一的名称。例如，输入“北京地图”。注意：如果在同一文档中使用多个图像映射，应保证各个地图使用不相同的名称。在“属性”面板中选取热点工具，创建热点：矩形热点工具。在图像上拖动鼠标创建矩形热点。圆形热点工具。在图像上拖动鼠标创建圆形热点。多边形热点工具。创建非规则形状的热点，每单击一次定义多边形的一个角，单击“指针热点工具”封闭该形状。指针热点工具。需要调整热点区域的大小时，单击“指针热点工具”，然后拖动热点区域的控点到合适的大小；需要调整热点区域的位置时，单击“指针热点工具”，然后按住鼠标左键拖动热点区域到合适的位置。

网页设计与制作》3.3制作图像效果制作图像映射3.3.2操作实例3-1423.3制作图像效果制作图像映射

3.3.2操作实例3-13创建客户端图像映射在“北京漫游”bjmy.html网页中，建立“各旅游景点”的图像映射。操作步骤：打开bjmy.html网页，选中“北京地图”图像。在图像“属性”面板的“地图”名称框中为图像映射输入一个惟一的名称。例如，输入“北京地图”。注意：如果在同一文档中使用多个图像映射，应保证各个地图使用不相同的名称。在“属性”面板中选取热点工具，创建热点：矩形热点工具。在图像上拖动鼠标创建矩形热点。圆形热点工具。在图像上拖动鼠标创建圆形热点。多边形热点工具。创建非规则形状的热点，每单击一次定义多边形的一个角，单击“指针热点工具”封闭该形状。指针热点工具。需要调整热点区域的大小时，单击“指针热点工具”，然后拖动热点区域的控点到合适的大小；需要调整热点区域的位置时，单击“指针热点工具”，然后按住鼠标左键拖动热点区域到合适的位置。网页设计与制作》3.3制作图像效果制作图像映射3.3.2操作实例3-1433.3制作图像效果制作图像映射

3.3.2例如，选择“矩形热点工具”在图像的“司马台长城”上设置热点。创建矩形热点

热点“属性”面板网页设计与制作》3.3制作图像效果制作图像映射3.3.2443.3制作图像效果制作图像映射

3.3.2选中热点，显示热点“属性”面板，如图3-24所示。可做如下设置：·在“链接”框中，单击“浏览文件”按钮，选取热点的链接文件。例如，链接“../image/simatai.jpg”。·在“目标”框中，选择链接文件显示的窗口。例如，选择“-blank”选项，在新窗口显示链接文件。重复步骤③~④，定义图像映射中的其他热点。图像映射创建结束时，单击文档空白区域以恢复图像属性面板的显示。按快捷键“Ctrl+S”保存网页。按快捷键F12预览网页，当鼠标指向热点区域时，鼠标旁将显示提示信息，任务栏将显示链接文件的路径，单击某一热点，在新窗口显示链接文件。网页设计与制作》3.3制作图像效果制作图像映射3.3.2选中热点，显示453.3制作图像效果制作图像的提示信息

3.3.3操作实例3-14制作图像的提示信息在“北京漫游”bjmy.html网页中，为“北京地图”图像制作提示信息。操作步骤：打开bjmy.html网页，选中“北京地图”图像或该图像设置的热点。在图像“属性”面板的“替换”文本框中输入图像的提示信息，例如，输入“北京地图”。

按快捷键Ctrl+S保存网页。按快捷键F12预览网页。网页设计与制作》3.3制作图像效果制作图像的提示信息3.3.3操作实例463.4设置超级链接超级链接概述3.4.1Dreamweaver提供了几种创建超级链接的方式，用于创建指向文档、图像、多媒体文件或可下载软件的超级链接，并可为文档内的标题、列表、表格、层或框架中的任何文本或图像创建链接。1.超级链接的类型超级链接分为内部链接和外部链接。内部链接又称为本地链接，是指同一网站文件之间的链接。外部链接是指不同网站文件之间的链接。（1）文档链接：指向其他文档或文件的链接。例如，图像、影片或声音文件的链接。（2）命名锚记链接：又称为书签链接，这种链接将转到文档中的一个指定位置。（3）电子邮件链接：这种链接将创建一个新的空白电子邮件，其中收件人地址已经填入。（4）空链接：这种链接不会跳转到任何位置，对于附加Dreamweaver行为有特殊用处。（5）脚本链接：创建执行JavaScript代码的链接。网页设计与制作》3.4设置超级链接超级链接概述3.4.1Dreamweav473.4设置超级链接超级链接概述3.4.12．创建本地链接的几种方法操作实例3-15使用“属性”面板的“指向文件”图标创建链接在首页index.html网页中，为旅游资讯文字“生态旅游国内渐成时尚未来在异化中寻求发展”创建链接news03.html。操作步骤：分别打开index.html、news03.html网页。在“窗口”菜单，选择“垂直平铺”选项。选中旅游资讯中的文字“生态旅游国内渐成时尚未来在异化中寻求发展”。将“属性”面板的“指向文件”图标拖动到另外打开的news03.html网页上。释放鼠标，创建结束。网页设计与制作》3.4设置超级链接超级链接概述3.4.12．创建本地链接的483.4设置超级链接超级链接概述3.4.1操作实例3-16使用菜单（或快捷菜单）创建链接为news03.html网页设置“返回首页”的链接。操作步骤：在“设计”窗口打开网页news03.html。选中内容区左上角“首页”两个字。选择“修改”菜单中的“创建链接”选项（或在选取的文本或图像上单击鼠标右键，在快捷菜单中选择“创建链接”选项），在“选择文件”对话框中选取首页文件index.html。按快捷键“Ctrl+S”保存网页。按快捷键F12预览网页。网页设计与制作》3.4设置超级链接超级链接概述3.4.1操作实例3-16493.4设置超级链接超级链接概述3.4.1操作实例3-17使用属性面板中的“浏览文件”图标或“链接”框创建链接操作步骤：在“设计”窗口选取文本或图像。在“属性”的HTML面板执行下列操作之一：·单击“浏览文件”图标，在弹出的“选择文件”对话框中选取链接文件，该文件的路径自动显示在URL域中。·从“文件”窗口将链接文件拖动到“链接”框中。·直接在“链接”框中输入链接文件名和路径。如果链接的是站点中的文件，则应输入该文件的相对路径或根相对路径。利用该方法可以创建一个指向并不存在的文件的链接。注意：直接输入链接文件的URL或路径可能导致不正确的路径和链接，建议读者使用“浏览文件”图标方式。网页设计与制作》3.4设置超级链接超级链接概述3.4.1操作实例3-17503.4设置超级链接超级链接概述3.4.1③在“目标”框中选择链接文件显示的位置。“目标”用于指定在哪个窗口或框架打开链接文件。当前文档中的所有框架名称都将显示在“目标”列表中。也可以选择“目标”下拉列表中保留的五个选项。·_blank或无：表示在新的浏览窗口打开链接文件。·new：与_blank类似，将链接的页面在一个新的浏览器窗口中打开。·_parent：表示在当前页面的父级窗口或包含该链接的框架窗口打开链接文件。·_self：表示在当前窗口或框架页中打开链接网页。·_top：表示在当前页面所在的整个窗口打开链接文件，同时删除所有框架。

网页设计与制作》3.4设置超级链接超级链接概述3.4.1③在“目标”框中选513.4设置超级链接超级链接概述3.4.13．创建外部链接创建指向其他站点的链接文件，必须在“属性”面板的“链接”框中直接输入绝对路径，并包括正确的协议。例如：。操作实例3-18创建外部链接操作步骤：选中需要创建外部链接的文字或图像。例如，“搜狐网”。在“属性”的“HTML”面板的“链接”框中输入该链接的外部网站地址“”。按快捷键“Ctrl+S”保存网页。网页设计与制作》3.4设置超级链接超级链接概述3.4.13．创建外部链接网523.4设置超级链接制作书签锚记3.4.2对于一篇包含大量文本信息的、很长的网页来说，组织按标题“索引”，能够“跳跃”式阅览是十分必要的。利用书签锚记可以完成上述的需求。“书签”一词是转译而来的，它的英文原词是“anchor”，意即“锚”。书签链接的原理就和锚一样：在需要的时候，返回到指定的位置。当网页的段落比较多，需要反复拉动滚动条时，使用书签在网页中定位显得特别方便。

创建书签链接包含两个步骤：首先创建命名锚记，然后再创建指向该命名锚记的链接。命名锚记是在文档中设置标签，锚记一般放置在指定的主题或文档的顶部。网页设计与制作》3.4设置超级链接制作书签锚记3.4.2对于一篇包含大量文533.4设置超级链接制作书签锚记3.4.2网页设计与制作》3.4设置超级链接制作书签锚记3.4.2网页设计与制作》543.4设置超级链接制作书签锚记3.4.2操作实例3-19根据图3-29所示创建命名锚记并建立锚记链接创建wdzj.html文件，制作命名锚记，并链接到“我的足迹”栏目。操作步骤：打开wdzj.html文件，单击需要创建命名锚记的位置，设置插入点。例如，在正文区的“嘉峪关”之前设置插入点。执行下列操作之一，弹出命名锚记对话框

·在“常用”工具栏中，单击“命名锚记”按钮。·选择“插入”菜单中的“命名锚记”选项。·按下快捷键“Ctrl+Alt+A”。网页设计与制作》3.4设置超级链接制作书签锚记3.4.2操作实例3-19553.4设置超级链接制作书签锚记3.4.2“锚记名称”文本框中，输入锚记名称。例如，输入“anchor01”注意：锚记名称不能包含空格，需要区分大小写。数字和字母均可作为锚记名称，但不能使用中文。单击“确定”按钮。此时，锚记符号（书签标志）将显示在插入点位置。如果锚记符号没有显示在插入点位置，可以在“查看”菜单，选择“可视化助理”中的“不可见元素”选项，可使锚记可见。参照步骤①~④，继续创建其他锚记。选中锚记符号，“属性”面板将显示该锚记的属性

网页设计与制作》3.4设置超级链接制作书签锚记3.4.2“锚记名称”文本框563.4设置超级链接制作书签锚记3.4.2⑥选取要创建链接的文本或图像。例如，选中标题“嘉峪关”。执行下列操作之一，建立链接。·在“属性”面板的“链接”中，输入一个数字符号“#”以及锚记名称。例如，链接到当前文档中名为“嘉峪关”的锚记，则输入“#anchor01”。如图3-32所示。·单击“属性”面板“链接”框右侧的“指向文件”图标，并将它拖动到需要链接的锚记处，无论该锚记是在同一文档中还是在其他打开的文档中。·按住Shift键并拖动被选中的文本到需要链接的锚记处。⑦参照步骤⑥，为其他文本设置锚记链接。⑧按快捷键Ctrl+S保存网页，按快捷键F12预览网页。网页设计与制作》3.4设置超级链接制作书签锚记3.4.2⑥选取要创建链接的573.4设置超级链接创建空链接3.4.3“空链接”也称为“无址链接”，是一个无指向的链接，不会跳转到任何地方。使用空链接可以为页面上的对象或文本附加行为。例如，当鼠标经过该链接时完成变换图像或者显示某个指定层的操作。操作实例3-20创建空链接操作步骤：①在文档窗口的“设计”视图中选中文本、图像或对象。②在“属性”面板的“链接”框中输入一个数字符号“#”。

网页设计与制作》3.4设置超级链接创建空链接3.4.3“空链接”也称为“无583.4设置超级链接检查链接的有效性3.4.4每个站点均有许多链接，为保证链接的可靠性，在将站点向服务器上传之前，应认真检查页面或站点链接的有效性。Dreamweaver只验证指向本站点内的链接，对于文档中出现的外部链接，Dreamweaver将提供一份外部链接列表。当Dreamweaver检查完指定的链接文件之后，将在“链接检查器”面板显示三种报告列表：断掉的链接、外部链接、孤立文件。网页设计与制作》3.4设置超级链接检查链接的有效性3.4.4每个站点均有许593.4设置超级链接检查链接的有效性3.4.4操作实例3-21检查指定文档中的链接操作步骤：打开需要检查链接的站点。在“文件”菜单中选择“检查页”、“链接”选项，或按快捷键“Shift+F8”，显示“链接检查器”面板。

单击“检查链接”按钮，选择如下三个选项之一开始检查。·“检查当前文档中的链接”：选择此项前应打开需要检查链接的文档。·“检查整个当前本地站点的链接”：选择此项前应打开需要检查链接的站点。·“检查站点中所选文件的链接”：选择此项前应在站点窗口选中需要检查链接的文件或文件夹。从“显示”下拉列表中选取需要显示的链接报告。三个选项是：断掉的链接、外部链接、孤立文件。只有检查整个站点时才能选择“孤立文件”选项。网页设计与制作》3.4设置超级链接检查链接的有效性3.4.4操作实例3-2603.4设置超级链接创建E-mail链接3.4.5电子邮件（E-mail）是人们的重要沟通手段之一。从方便沟通的角度出发，在网页中设置电子邮件链接已经变得非常普遍。当浏览者单击电子邮件链接时，可以自动打开安装在系统中的电子邮件应用程序（一般是Outlook或OutlookExpress），即一个新的空白邮件窗口。在新邮件窗口中，“收件人”位置自动填写好电子邮件链接所指定的地址，浏览者在编写完电子邮件之后，直接发送即可。电子邮件的链接可以附加在图像或文本上，一般出现在网页末尾。网页设计与制作》3.4设置超级链接创建E-mail链接3.4.5电子邮件（613.4设置超级链接创建E-mail链接3.4.5操作实例3-22创建文本的电子邮件链接操作步骤：打开index.html主页，选中需要创建电子邮件链接的文本。例如，选中“联系我们”。执行下列操作之一，弹出“电子邮件链接”对话框。·在“插入”菜单中选择“电子邮件链接”选项。·在“常用”工具栏单击“电子邮件链接”按钮。如果已经选中了文本，则该文本自动显示在“文本”框中；如果没有选中文本，则必须在“文本”框中输入链接电子邮件的文本，该文本将在网页中显示。在“E-mail”文本框输入电子邮件地址。单击“确定”按钮完成。

网页设计与制作》3.4设置超级链接创建E-mail链接3.4.5操作实例3623.4设置超级链接创建E-mail链接3.4.5操作实例3-23创建图像的电子邮件链接操作步骤：选取需要设置电子邮件链接的图像。在其“属性”面板的“链接”文本框中输入“mailto:”，其后紧接着输入电子邮件地址。例如，输入：“mailto:sunzhenye916@126.com”。需要注意的是，在电子邮件地址和冒号之间不能加入任何形式的空格。按快捷键Ctrl+S保存网页。按快捷键F12预览网页。网页设计与制作》3.4设置超级链接创建E-mail链接3.4.5操作实例3633.4设置超级链接创建文件下载链接

3.4.6操作实例3-24创建文件下载的链接为页面中的“下载”文字或图像添加链接，希望浏览者单击“下载”文字或图像后，下载相关的压缩文件。操作步骤：选取需要链接下载文件的“文本”或“图像”。单击“属性”面板上“链接”文本框后的“浏览文件”按钮，在弹出的“选择文件”对话框，选择需要下载的压缩文件。单击“确定”按钮。按快捷键Ctrl+S保存网页。按快捷键F12预览网页。网页设计与制作》3.4设置超级链接创建文件下载链接3.4.6操作实例3-643.5网页的应用

在网页中插入Flash动画

3.5.1操作实例3-25在网页中插入Flash动画操作步骤：打开“精彩瞬间”的网页jcsj.html。将光标定位在需要插入Flash动画的单元格内。单击“常用”工具栏中的“媒体”下拉列表，选择“SWF”。在弹出的“选择文件”对话框中，选择“flash01.swf”文件。单击“确定”按钮。在弹出的“对象标签辅助功能属性”对话框中，单击“确定”按钮。Flash动画插入到网页jcsj.html中。选中Flash动画，在“属性”面板进行设置。

网页设计与制作》3.5网页的应用在网页中插入Flash动画3.5.1653.5网页的应用

在网页中插入Flash动画

3.5.1

网页设计与制作》3.5网页的应用在网页中插入Flash动画3.5.1663.5网页的应用

在网页中插入视频

3.5.2操作实例3-26在网页中插入视频操作步骤：打开“精彩瞬间”网页jcsj02.html。将光标定位在需要插入视频的单元格内。单击“常用”工具栏中的“媒体”下拉列表，选择“插件”。在弹出的“选择文件”对话框，选择“vedio01.wmv”文件。单击“确定”按钮。插入后的插件并不会在设计视图中显示内容，而是显示插件图标。在“属性”面板上修改插件的“宽”为400，“高”为300。单击“属性”面板中的“参数…”按钮，在“参数”对话框单击“+”按钮，在“参数”下方输入“Autostart”，并在“值”下方输入“true”，即设置视频在网页打开后自动播放。在“参数”下方输入“Loop”，并在“值”下方输入“true”。即设置视频的循环播放。单击“确定”退出。按快捷键Ctrl+S保存网页。按快捷键F12预览网页。

网页设计与制作》3.5网页的应用在网页中插入视频3.5.2操作实例3673.5网页的应用

在网页中插入视频

3.5.2

修改插件大小“参数”对话框网页设计与制作》3.5网页的应用在网页中插入视频3.5.2修改插683.5网页的应用

在网页中插入视频

3.5.2操作实例3-27在网页中插入FLV视频操作步骤：打开“精彩瞬间”的网页jcsj03.html。将光标定位在需要插入视频的单元格内。单击“常用”工具栏的“媒体”下拉列表，选择“FLV”。在“插入FLV”对话框中进行设置。·单击“浏览”按钮，选择“vedio02.flv”文件。·在“外观”下拉列表中，选择一种外观形式。·“宽度”设置为400，“高度”设置为300。·根据实际需要选择“自动播放”和“自动重复播放”。单击“确定”按钮。按快捷键Ctrl+S保存网页。按快捷键F12预览网页。网页设计与制作》3.5网页的应用在网页中插入视频3.5.2操作实例3693.5网页的应用

在网页中插入视频

3.5.2“插入FLV”对话框网页设计与制作》3.5网页的应用在网页中插入视频3.5.2“插入FL703.5网页的应用

为网页添加声音

3.5.3操作实例3-28为网页添加背景音乐操作步骤：打开“旅行日志”的网页lxrz.html。将窗口视图切换到代码视图方式，将光标定位在<body>与</body>标记中间的位置，输入代码<bgsoundsrc=“../image/audio01.mp3”/>。如果想让背景音乐循环播放，可以在代码中再加上loop=“true”即可。按快捷键Ctrl+S保存网页。按快捷键F12预览网页。添加“背景音乐”代码添加“背景音乐”循环播放代码网页设计与制作》3.5网页的应用为网页添加声音3.5.3操作实例3-713.5网页的应用

博客

3.5.4操作实例3-29开通新浪博客操作步骤：访问新浪首页：。选择导航栏“登录”下的“立即注册”。在“注册新浪通行证”对话框中选择“手机注册”或者“邮箱注册”，并填写信息。单击“立即注册”按钮。根据注册的方式不同，进行不同的激活操作，取得新浪通行证。访问新浪博客首页。单击导航栏中的“开通新博客”按钮。选择右侧的“已有账号，直接登录”。在打开的对话框输入登录名和密码。登录名是已注册成功的邮箱和密码。单击“登录”按钮。系统自动返回“新浪博客首页”。单击“我的博客”按钮。在“博客尚未开通”界面，单击“完成开通”按钮。在打开的界面中，单击“我的博客”。即可打开已经开通完毕的博客首页。如图3-50所示。网页设计与制作》3.5网页的应用博客3.5.4操作实例3-29开723.5网页的应用

博客

3.5.4

“注册新浪通行证”对话框图3-46新浪博客“开通”导航栏新浪博客“开通”导航栏网页设计与制作》3.5网页的应用博客3.5.4“注册新浪通行证”733.5网页的应用

博客

3.5.4操作实例3-30填写个人资料操作步骤：在博客首页，单击“个人中心”。在打开的界面中，单击“设置”、“账户/博客设置”，显示“修改个人资料”对话框。可以对个人信息、头像昵称、登录密码、博客地址等信息进行修改。操作实例3-31设置博客页面风格和模块操作步骤：在博客首页，单击“页面设置”，进入“页面设置”窗口。如图3-51所示。可以对页面风格、版式、组件进行设置和修改。同时，在“页面设置”状态，拖动博客页面中的栏目标题，可以对栏目的显示位置进行调整。网页设计与制作》3.5网页的应用博客3.5.4操作实例3-30填743.5网页的应用

博客

3.5.4操作实例3-32发博文操作步骤：在博客首页，单击“发博文”按钮，打开“发博文”窗口。如图3-52所示。输入“标题”、“博文内容”，选择“分类”、“标签”、“设置”评论范围。单击“发博文”按钮，即可完成一篇博文的发表。博文发表后，将出现在博客首页中。单击博文标题旁边的“编辑”，可以对已发表的博文进行修改。单击博文标题旁边的“删除”，可以删除已发表的博文。博文发表后，在图3-52中，单击“博文目录”，可以浏览到所有已发表博文的目录。在这个界面中，可以对博文进行编辑、置顶、修改分类和删除的操作。“页面设置”窗口网页设计与制作》3.5网页的应用博客3.5.4操作实例3-32发753.5网页的应用

QQ空间3.5.5操作实例3-33开通QQ空间操作步骤：首先你需要有一个QQ号码，这样就会有一个QQ空间。每一个QQ号都可以注册一个QQ空间。如果你已经注册过QQ号，可跳过步骤①。访问腾讯首页，单击“QQ号码”，在“QQ注册”对话框输入注册信息，单击“立即注册”按钮。使用注册成功的QQ号码，登录QQ。在QQ聊天工具的导航栏单击“QQ空间”图标，即可进入QQ空间。登录成功后，显示QQ空间主页界面。网页设计与制作》3.5网页的应用QQ空间3.5.5操作实例3-33763.5网页的应用

QQ空间3.5.5操作实例3-34修改QQ空间的个人信息操作步骤：在QQ空间主页，单击“空间快速设置”按钮，选择“修改资料”，即可打开“个人资料——基本资料”修改界面。单击界面左侧的“我的爱好”、“空间资料”、“头像形象”、“实名认证”等，可以对个人资料进行修改与添加。修改完成后，单击界面下方的“保存”按钮。操作实例3-35发表网络日志操作步骤：在QQ空间主页，单击“日志”，打开“日志”栏目界面。单击“写日志”按钮，在“写日志”界面，输入“日志标题”和“内容”、选定“分类”与可见“权限”后，单击“发表”按钮，即可发表网络日志。网页设计与制作》3.5网页的应用QQ空间3.5.5操作实例3-34773.5网页的应用

QQ空间3.5.5操作实例3-36建立相册操作步骤：在QQ空间主页，单击“相册”，打开“相册”栏目界面。单击“上传照片”按钮，打开“上传照片”对话框。单击“添加照片”按钮，选择一张或多张照片，单击“添加”按钮返回。单击“开始上传”按钮，将选择的照片上传至QQ空间的相册。系统提示为照片添加信息。信息填写完成后，单击“保存并去查看照片”按钮。可以通过“分享”下拉列表，将照片“分享给好友”。网页设计与制作》3.5网页的应用QQ空间3.5.5操作实例3-3678上机实验

上网搜集有用的资料与图像。根据搜索的图片建立“九寨沟相册”，网页名称为jiuzhaigou.htm。设计如图所示的“文本”式网页。操作提示：网页共分四个域，可采用表格布局。新建网页文档并保存。插入1行1列的表格，设置标题区域，输入标题，设置标题、表格的属性。插入1行3列的表格。左单元格输入正文文本，并设置文本的属性。右单元格输入正文文本，并设置与左单元格文本相同的属性。中单元格插入垂直线：先插入水平线，通过设置属性的方法将水平线改为垂直线，并通过“修改”菜单的“标签编辑器”为垂直线设置颜色。网页设计与制作》上机实验上网搜集有用的资料与图像。网页设计与制作》79上机实验4.设计如图4-36所示的图像映射式网页。网页设计与制作》上机实验4.设计如图4-36所示的图像映射式网页。网页设计与80上机实验操作提示：可以自己选择图片完成。新建网页文件并打开。插入第一幅图像，调整其大小。设置热点：选中插入的图像，在图像属性面板单击“椭圆型热点工具”，在图像“山”的位置设置热点；然后单击“多边形热点工具”在图像“水”的位置设置热点。设置超级链接：选中“椭圆型热点”区域，在热点属性面板单击“链接”按钮，链接第三幅图像；选中“多边形热点”区域，在热点属性面板单击“链接”按钮，链接第四幅图像。设置两幅链接图在新的窗口打开。保存网页，预览网页时，单击“椭圆型热点”区域，将在新的窗口打开第三幅图像；单击“多边形热点”区域，将在新的窗口打开第四幅图像。

网页设计与制作》上机实验操作提示：网页设计与制作》81上机实验5.为下图所示的文本网页，设置标签并做超级链接。

网页设计与制作》上机实验5.为下图所示的文本网页，设置标签并做超级链接。网82上机实验操作提示：可以自己选择文本完成。新建网页文件并保存。按图3-62所示，安排第二行的链接文字。将光标定位在第一个插入“锚记”的位置（例如黄山所在段落之前），打开“命名锚记”对话框，设置锚记名称（例如a1）。选中链接文字（例如第二行的“安徽黄山”），在链接框输入锚记名称（例如a1）。按步骤（4）~（5）设置其他锚记名称与链接。保存网页，预览网页。网页设计与制作》上机实验操作提示：网页设计与制作》83谢谢！谢谢！第3章网页编辑与超级链接2014.11第3章网页编辑与超级链接2014.11第3章网页编辑与超级链接网页中图像的设置3.2制作图像效果3.3网页中文本的设置3.1设置超级链接

3.4网页的应用

4.5网页设计与制作》第3章网页编辑与超级链接网页中图像的设置3.2制作86本章要点文本是表达信息最直接的方式，网上大量信息的传播仍以文本为主。图像与文本一样，也是网页信息的表现形式，因为有了图像，网页才显得生动。文本与图像都是网页最基本、最常用的元素。此外，只有存在超级链接，网页才会有意义。因此，文本、图像与超级链接是网页设计最基本的要素。

输入普通文本、空格、特殊字符与日期设置文本属性网页图像的基础知识网页图像素材的搜集插入图像并设置图像的属性制作图像的提示信息、滚盖图与图像映射超级链接的基础知识创建超级链接、空链接、书签锚点与跳转菜单在网页中插入Flash动画、视频、声音博客的建立与基本操作网页设计与制作》本章要点文本是表达信息最直接的方式，网上大量信息873.1网页中文本的设置输入文本

3.1.11．输入文字在Dreamweaver中，文本的输入与其他字处理程序基本相同。操作实例3-1输入文字操作步骤：（1）在文档编辑窗口直接输入单击需要输入文字的位置，设置插入点。输入文字。（2）复制已有的文本首先选中需要复制的文本，使用快捷键“Ctrl+C”复制。切换到Dreamweaver的文档窗口，在网页上单击需要输入文本的位置，设置插入点。使用快捷键“Ctrl+V”粘贴；或选择“编辑”菜单的“粘贴”选项；或单击文档工具栏的“粘贴”按钮。注意：从其他地方复制文本，再粘贴到Dreamweaver文档窗口时，将失去原有的格式，但分段格式将保留。网页设计与制作》3.1网页中文本的设置输入文本3.1.11．输入文字883.1网页中文本的设置输入文本

3.1.12．输入空格在Dreamweaver中，空格的输入与其他字处理程序稍有不同。操作实例3-2输入空格操作步骤：方法一：将中文输入法切换到全角模式，可以按“空格”键输入空格。利用快捷键“Shift+空格”可以切换半角与全角状态。方法二：选择“文本”工具栏中的“已编排格式”选项，可以按“空格”键输入空格。方法三：选择“文本”工具栏中的“字符”、“不换行空格”选项。方法四：将光标定位到“代码”视图中需要输入空格的位置，输入

即可输入空格。

网页设计与制作》3.1网页中文本的设置输入文本3.1.12．输入空格893.1网页中文本的设置输入文本

3.1.13．输入特殊字符网页中除普通文字外，有时还需要输入特殊字符。例如，版权信息“©”、注册商标“®”