网页设计与制作(Dreamweaver)《插入网页基本要素之图像与超链接》
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
插入网页基本要素之图像与超链接
图像的编辑与属性设置
单击选中图像，在属性面板中，设置图像的属性： “源文件”指定图像文件的存放路径。单击文件夹图标以浏览到源文件，或者键入路径。 “垂直边距”和“水平边距”沿图像的边缘添加边距（以像素为单位），实为与其它内容的间距，即其它内容靠近图像程度。 “垂直边距”沿图像的顶部和底部添加边距。 “水平边距”沿图像左侧和右侧添加边距，如文字与图片的距离。 特别注意“对齐”，左右可使图片与文本的位置相对协调。
创建鼠标经过图像
鼠标经过图像是一种在浏览器中查看并使用鼠标指针移过它时发生变化的图像，单击则转向指定的超 级链接，用Java语言控制。
需要两张图片，一张是一般状态下的图片，另 一张是鼠标经过时的图片。 将插入点置于要建立鼠标经过图像的位置，单 击“插入”面板“常规”中的“鼠标经过图像” 按钮；或者“插入”菜单中的相关项。
在左边选择文件类型，右边单击左上方的加号图像编辑器
设置及启用外部图像编辑器：
设置不同类型图像文件编辑器：选择“编辑／ 首选参数／文件类型/编辑器”…… 通过外部图像编辑器对图像文件进行修改:
启用图像编辑器：选取图像→单击属性面板中 的“编辑”按钮即可启动相应编辑器，并打开 图像文件，进行修改。
插入网页基本要素之图像与超链接
添加图像
在“插入”栏的“常用”类别中，单击“图像” 图标或选择“插入／图像”→选择一个图形文 件。
与添加文本不同，插入的图像不能从别的文档中复制； 必须特别说明的是，插入到网页中的图像只能以文件的 形式独立存在于站点文件夹中，如果图像文件不在站点 目录中，DW会提示保存到站点目录中。 注意图像一般较大，不可过多地插入，一般情况下，将 网页文件控制在40K左右，通过状态栏知道。
插入网页基本要素之图像与超链接
超链接的类型
1 页间链接：利用该链接可 以跳转到其他文档或文件，如图 形、电影、PDF或声音文件。
2 页内链接：也被称为锚记链接，利用它 可以跳转到本站点指定文档的位置。
4 空链接及脚本链接
它允许用户附加行为至对象或创 建 一 个 执 行 JavaScript 代 码 的 链 接。
插入网页基本要素之图像与超链接
超链接
超级链接是网页中的精华部分，当光标移至浏览器中的超级链接时，光
标会变成一只手的形状，此时单击链接便可以打开链接所指向的目标网
页。
没有它每个网页都要输入很长的URL地址。没有超链接，就无法通过单击的方式 遨游Web世界，而如果没有了单击的功能，Web就会是死水一潭。
网页文件的存放路径是紧密相关的。
URL可以简单地称为网址，顾名思义，就是Internet文件在网上的 地 址 ， 定 义 超 链 接 其 实 就 是 指 定 一 个 URL 地 址 来 访 问 它 指 向 的 Internet 资源。 同时，认识从作为链接起点的文档到作为链接目标的文档之间的 文件路径，对于创建链接至关重要。一般来说，链接路径可以分 为绝对路径与相对路径两类。
超链接的应用范围很广，利用它不仅可以链接到其他网页，还可以链接到其他 图像文件、多媒体文件及下载程序，也可以利用它在网页内部进行链接或是发 送E-mail等。
插入网页基本要素之图像与超链接
超链接
超链接与URL
在Dreamweaver中，可以为文档中的任何文字及
任意位置的图片设置为超链接。超链接与URL及
插入网页基本要素之图像与超链接
图像的编辑与属性设置
单击选中图像，在属性面板中，设置图像的属性： 放大、缩小图像大小：拖动控制点或直接在属性面板中输入宽度与高度的像素值； 等比例放大、缩小图像大小：按住Shift同时拖动右下角控制点； 恢复图像大小：删除其属性面板中的宽度、高度值，即可恢复到原来的大小。 “边框”是以像素为单位的图像边框的宽度。默认为无边框，相当于加一个相框。 “编辑”启动在“外部编辑器”参数选择中指定的图像编辑器并打开选定的图像。
插入网页基本要素之图像与超链接
超链接
（1）绝对路径：包括协议，服务器地址，路径，当网页指向其他服务器上的网页时，须把超链接 写成绝对地址形式。 （2）文档相对路径：相对于当前文档的URL；直接输入目标对象的文件名，是指目标对象与当前 网页在同一根目录下。 (如：image/pic01.jpg) （3）站点根目录相对路径：相对于服务器；它的开始为“/”，指明是当前服务器的根目录。（与 文件系统中的“\”区别）(如：/image/pic01.jpg)
插入网页基本要素之图像与超链接
创建各种超链接
创建跳转到文档内特定位置的锚点链接：在需要插入锚的地方，单击光标，然后单击常用面
板上的命名锚记工具，或者插入菜单中的命名锚记。
在文档中选取要创建链接的文本，选择插入超加链接，点击属性面 板中的“链接”的下拉菜单或者输入如“#Top”形式的超级链接。 如一个长文档网页文件：教育法，从目录到各章节，从目录到各章 节，再由各章节返回到目录。
插入网页基本要素之图像与超链接
图像的编辑与属性设置
单击选中图像，在属性面板中，设置图像的属性： 给图片增加提示：选中图像→在属性面板的“替代”中输入提示文字，在浏览器中，鼠标指向这个图片时，就会出现文字提示。 另外，有时，不显示图片后，可以显示该说明文字。
插入网页基本要素之图像与超链接
图像的编辑与属性设置
3 E-mail链接：使用该链接，
可以启动电子邮件程序，允许用户书写 电子邮件，并发送到指定地址。
创建各种链接
Fra Baidu bibliotek
插入网页基本要素之图像与超链接
创建各种超链接
创建到其他文档或文件的链接：直接在链接栏后将“指向文件”图标拖向目标文件。（站内的
链接多用此法），或直接输入链接地址（相对或绝对均可）。
_blank——在新建窗口中加载链接文档。 _parent——在父框架页或包含该链接的框架窗口中加载链接 文档。如果包含链接的框架不是嵌套的，则链接文档将加载到 整个浏览器窗口中。 _self——将链接文档加载到与链接相同的框架或窗口中，该目 标是默认值。 _top——将在整个浏览器窗口中加载链接文件，同时移除所有 框架。 Parent和top用于框架网页。
图像的编辑与属性设置
单击选中图像，在属性面板中，设置图像的属性： “源文件”指定图像文件的存放路径。单击文件夹图标以浏览到源文件，或者键入路径。 “垂直边距”和“水平边距”沿图像的边缘添加边距（以像素为单位），实为与其它内容的间距，即其它内容靠近图像程度。 “垂直边距”沿图像的顶部和底部添加边距。 “水平边距”沿图像左侧和右侧添加边距，如文字与图片的距离。 特别注意“对齐”，左右可使图片与文本的位置相对协调。
创建鼠标经过图像
鼠标经过图像是一种在浏览器中查看并使用鼠标指针移过它时发生变化的图像，单击则转向指定的超 级链接，用Java语言控制。
需要两张图片，一张是一般状态下的图片，另 一张是鼠标经过时的图片。 将插入点置于要建立鼠标经过图像的位置，单 击“插入”面板“常规”中的“鼠标经过图像” 按钮；或者“插入”菜单中的相关项。
在左边选择文件类型，右边单击左上方的加号图像编辑器
设置及启用外部图像编辑器：
设置不同类型图像文件编辑器：选择“编辑／ 首选参数／文件类型/编辑器”…… 通过外部图像编辑器对图像文件进行修改:
启用图像编辑器：选取图像→单击属性面板中 的“编辑”按钮即可启动相应编辑器，并打开 图像文件，进行修改。
插入网页基本要素之图像与超链接
添加图像
在“插入”栏的“常用”类别中，单击“图像” 图标或选择“插入／图像”→选择一个图形文 件。
与添加文本不同，插入的图像不能从别的文档中复制； 必须特别说明的是，插入到网页中的图像只能以文件的 形式独立存在于站点文件夹中，如果图像文件不在站点 目录中，DW会提示保存到站点目录中。 注意图像一般较大，不可过多地插入，一般情况下，将 网页文件控制在40K左右，通过状态栏知道。
插入网页基本要素之图像与超链接
超链接的类型
1 页间链接：利用该链接可 以跳转到其他文档或文件，如图 形、电影、PDF或声音文件。
2 页内链接：也被称为锚记链接，利用它 可以跳转到本站点指定文档的位置。
4 空链接及脚本链接
它允许用户附加行为至对象或创 建 一 个 执 行 JavaScript 代 码 的 链 接。
插入网页基本要素之图像与超链接
超链接
超级链接是网页中的精华部分，当光标移至浏览器中的超级链接时，光
标会变成一只手的形状，此时单击链接便可以打开链接所指向的目标网
页。
没有它每个网页都要输入很长的URL地址。没有超链接，就无法通过单击的方式 遨游Web世界，而如果没有了单击的功能，Web就会是死水一潭。
网页文件的存放路径是紧密相关的。
URL可以简单地称为网址，顾名思义，就是Internet文件在网上的 地 址 ， 定 义 超 链 接 其 实 就 是 指 定 一 个 URL 地 址 来 访 问 它 指 向 的 Internet 资源。 同时，认识从作为链接起点的文档到作为链接目标的文档之间的 文件路径，对于创建链接至关重要。一般来说，链接路径可以分 为绝对路径与相对路径两类。
超链接的应用范围很广，利用它不仅可以链接到其他网页，还可以链接到其他 图像文件、多媒体文件及下载程序，也可以利用它在网页内部进行链接或是发 送E-mail等。
插入网页基本要素之图像与超链接
超链接
超链接与URL
在Dreamweaver中，可以为文档中的任何文字及
任意位置的图片设置为超链接。超链接与URL及
插入网页基本要素之图像与超链接
图像的编辑与属性设置
单击选中图像，在属性面板中，设置图像的属性： 放大、缩小图像大小：拖动控制点或直接在属性面板中输入宽度与高度的像素值； 等比例放大、缩小图像大小：按住Shift同时拖动右下角控制点； 恢复图像大小：删除其属性面板中的宽度、高度值，即可恢复到原来的大小。 “边框”是以像素为单位的图像边框的宽度。默认为无边框，相当于加一个相框。 “编辑”启动在“外部编辑器”参数选择中指定的图像编辑器并打开选定的图像。
插入网页基本要素之图像与超链接
超链接
（1）绝对路径：包括协议，服务器地址，路径，当网页指向其他服务器上的网页时，须把超链接 写成绝对地址形式。 （2）文档相对路径：相对于当前文档的URL；直接输入目标对象的文件名，是指目标对象与当前 网页在同一根目录下。 (如：image/pic01.jpg) （3）站点根目录相对路径：相对于服务器；它的开始为“/”，指明是当前服务器的根目录。（与 文件系统中的“\”区别）(如：/image/pic01.jpg)
插入网页基本要素之图像与超链接
创建各种超链接
创建跳转到文档内特定位置的锚点链接：在需要插入锚的地方，单击光标，然后单击常用面
板上的命名锚记工具，或者插入菜单中的命名锚记。
在文档中选取要创建链接的文本，选择插入超加链接，点击属性面 板中的“链接”的下拉菜单或者输入如“#Top”形式的超级链接。 如一个长文档网页文件：教育法，从目录到各章节，从目录到各章 节，再由各章节返回到目录。
插入网页基本要素之图像与超链接
图像的编辑与属性设置
单击选中图像，在属性面板中，设置图像的属性： 给图片增加提示：选中图像→在属性面板的“替代”中输入提示文字，在浏览器中，鼠标指向这个图片时，就会出现文字提示。 另外，有时，不显示图片后，可以显示该说明文字。
插入网页基本要素之图像与超链接
图像的编辑与属性设置
3 E-mail链接：使用该链接，
可以启动电子邮件程序，允许用户书写 电子邮件，并发送到指定地址。
创建各种链接
Fra Baidu bibliotek
插入网页基本要素之图像与超链接
创建各种超链接
创建到其他文档或文件的链接：直接在链接栏后将“指向文件”图标拖向目标文件。（站内的
链接多用此法），或直接输入链接地址（相对或绝对均可）。
_blank——在新建窗口中加载链接文档。 _parent——在父框架页或包含该链接的框架窗口中加载链接 文档。如果包含链接的框架不是嵌套的，则链接文档将加载到 整个浏览器窗口中。 _self——将链接文档加载到与链接相同的框架或窗口中，该目 标是默认值。 _top——将在整个浏览器窗口中加载链接文件，同时移除所有 框架。 Parent和top用于框架网页。