《Dreamweaver CS6 完全自学教程》笔记 第五章：网页中的图像编辑
文章目录
- 第五章：网页中的图像编辑
- 5.1 图像占位符
- 5.1.1 插入图像占位符
- 5.1.2 将图像占位符替换为图像
- 技术专题：预览网页时不显示图像的问题
- 5.2 交互式图像
- 实战：创建网页导航条
- 5.3 网页背景
- 5.3.1 设置网页背景颜色
- 5.3.2 设置网页背景图像
- 5.4 设置外部图像编辑器
- 实战：制作个性图像网页
- 5.5 图像映射
- 实战：给网页图像添加超链接
- 第五章总结
第五章：网页中的图像编辑
5.1 图像占位符
在制作网页时，若想要插入一幅图像，但暂时没有找到合适的图像，这就需要用到图像占位符。插入图像占位符后，用户可随时替换为真正的图像。
5.1.1 插入图像占位符
选择要插入的位置，点击 插入 -> 图像对象 -> 图像占位符，打开 “图像占位符” 对话框。在 “名称” 中输入该占位符标签，必须以字母开头，并且只能包含字母和数字，不能使用空格。 在 “替换文本” 中输入描述该图像的文本。
5.1.2 将图像占位符替换为图像
通过底部属性面板可以将图像占位符替换为真正的图像。在 ”源文件“ 处浏览图像所在位置，点击图像，再点击 ”确定“ 即可。
技术专题：预览网页时不显示图像的问题
这种情况有两种可能：
- 图像使用的是绝对路径： 如果图像使用的是绝对路径，并且路径用了本地盘符，则上传后就找不到图像文件。打开 “属性” 面板，发现图像的 “源文件” 显示为 “file:///F:/Web/img/1.gif”，这就是绝对路径。若要使用相对路径，就改为 “img/1.gif”。
- 大小写问题： 图形文件名或图形文件所在的目录名中有大写字母或中文。因为服务器所在的操作系统一般都是 UNIX 或 Linux 平台，而 UNIX 系统是区分文件大小写的。
5.2 交互式图像
交互式导航是指当鼠标经过一幅图像时，它会变成另外一幅图像，并且带有链接功能。因此导航条图像要由两幅图像组成。
点击 插入 -> 图像对象 -> 鼠标经过图像，打开 “插图鼠标经过图像” 对话框。填入对应的图像路径即可。
由于交换的图像会进行压缩或展开以适应原有图像的尺寸，这样容易造成图像失真，所以尽量选择尺寸一致的图像。
实战：创建网页导航条
5.3 网页背景
5.3.1 设置网页背景颜色
点击 修改 -> 页面属性，或在 “属性” 面板中点击 “页面属性” 打开 “页面属性” 对话框，在 ”背景颜色“ 处选择背景颜色。
5.3.2 设置网页背景图像
在 “页面属性” 的 “背景图像” 中选择图片的路径，点击确定即可。
5.4 设置外部图像编辑器
当把选择好的图片插入 Dreamweaver 中时，可能这些图片达不到你想要的效果，这时就需要对图像进行编辑，Dreamweaver 虽然在可以设置图像属性，但毕竟不是专门的图像编辑软件，这时就需要用到外部图像编辑器来对图像源文件进行处理。
步骤：
点击 编辑 -> 首选参数 ，打开 “首选参数” 对话框，在左侧选择 “文件类型 / 编辑器”。
在 “扩展名” 列表中可以添加或删除文件类型。
选中一种文件类型，在编辑器中点击 “+” 号。
选择想用的图像编辑软件。
选中图像编辑器，点击设为主要。
选中图像，在底部 “属性” 面板中点击编辑即可使用外部图像编辑器了。
实战：制作个性图像网页
5.5 图像映射
图像映射将图像划分为若干个区域，每个区域被称为一个热区，每个热区分别设置不同的超链接。热区可以是不同形状。
设置图像映射：
- 选中图像，在 “属性” 面板左下角有 “矩形热点工具”、“圆形热点工具”、多边形热点工具“。
- 点击任意工具，在图像上选择一片区域创建热区。
- 可以在 “替换” 中输入文字说明或提示。在浏览器中，当鼠标指向该热区时就会显示此处输入的文字。
- 保存文件，按 F12 预览即可查看。
若要选择多个热区，可点击 “属性” 面板的 “指针热点工具” 然后按住 Shift，对热区进行选择。或者全选 Ctrl + A 。
实战：给网页图像添加超链接
第五章总结
这一章的内容非常少，而且简单，但在丰富网页内容、对网页进行美化中起到了很大作用，尤其是图像映射个人感觉非常有用。
《Dreamweaver CS6 完全自学教程》笔记 第五章：网页中的图像编辑相关推荐
- 《Dreamweaver CS6 完全自学教程》笔记
声明: 博主完全采用自学方式进行学习,内用不够严谨,学习路线不够系统,仅可用作参考,如有错误请及时指正. 博主主要参考<Dreamweaver CS6 完全自学教程>这本书进行学习,但不限 ...
- 《Dreamweaver CS6 完全自学教程》笔记 第十七章：Spry 框架技术
文章目录 第十七章:Spry 框架技术 17.1 Spry 菜单栏 17.1.1 插入 Spry 菜单栏 17.1.2 设置 Spry 菜单栏的属性 17.1.3 设置菜单项的尺寸 17.2 Spry ...
- 《Dreamweaver CS6 完全自学教程》笔记 第十四章：使用 CSS 设计网页
文章目录 第十四章:使用 CSS 设计网页 14.1 CSS 样式表简介 14.2 CSS 的基本语法 14.3 伪类.伪元素以及样式表的层叠顺序 14.3.1 伪类和伪元素 14.3.2 样式表的层 ...
- 2022 最新 Android 基础教程，从开发入门到项目实战【b站动脑学院】学习笔记——第五章：中级控件
第 5 章 中级控件 本章介绍App开发常见的几类中级控件的用法,主要包括:如何定制几种简单的图形.如何使用几种选择按钮.如何高效地输入文本.如何利用对话框获取交互信息等,然后结合本章所学的知识,演示 ...
- 《Dreamweaver CS6 完全自学教程》笔记 第十三章：Dreamweaver 中的 HTML 代码
文章目录 第十三章:Dreamweaver 中的 HTML 代码 13.1 HTML 介绍 13.2 HTML 的基本结构 13.2.1 单标签 13.2.2 双标签 13.2.3 标签属性 13.3 ...
- 《Dreamweaver CS6 完全自学教程》笔记 第六章：使用表格进行网页布局
文章目录 第六章:使用表格进行网页布局 6.1 创建表格 6.2 应用表格 6.2.1 输入表格内容 6.2.2 选定表格元素 6.2.3 设置表格与单元格属性 实战:制作细线表格 6.2.4 添加和 ...
- 《Dreamweaver CS6 完全自学教程》笔记 第十章：表单的使用
文章目录 第十章:表单的使用 10.1表单概述 技术专题:表单的工作流程 10.2表单的创建及设置 10.2.1 创建表单 10.2.2 设置表单属性 10.3 创建表单对象 10.3.1 创建文本域 ...
- 《Dreamweaver CS6 完全自学教程》笔记 第十二章：框架的应用
文章目录 第十二章:框架的应用 12.1 创建框架或框架集 12.1.1 创建自定义框架 12.1.2 创建预定义框架 技术专题:框架的拆分与合并 12.1.3 创建嵌套框架 12.2 框架和框架集的 ...
- 《Dreamweaver CS6 完全自学教程》笔记 附录：Dreamweaver 常用快捷键、HTML 代码标签、CSS 属性
返回
最新文章
- NLP经典算法复现！CRF原理及实现代码
- 《JavaScript高级程序设计》笔记：变量、作用域和内存问题（四）
- python把光标定义到指定的位置并删除之前的字符_python 批量修改预定字符串并将修改后的字符串插入文件指定位置...
- retrofit2 spring接受参数_Spring面试中有可能遇到的问题
- 在objective-c / cocoa中抛出异常
- 字节跳动攻城狮: 我整理了很久的Python面试指南，请查收！
- 导出EXCEL2003
- javascript技巧及常用事件方法集合（全）
- Csla框架之业务与验证规则
- 软考系统架构师笔记-综合知识重点（一）
- 2015年下半年的读书技术
- android媒体--stagefright概述
- 吴伯凡-认知方法论-既然认知意味着痛苦，为什么选择认知？
- minecraft崩溃java,je1.7.10，进入世界就崩溃，解决一下
- VS2010如何安装MSComm控件
- 使用Chrome DevTools的Timeline分析页面性能
- 卷积神经网络的网络结构——ResNet
- css过长文字自动换行
- 有趣的转义字符，常见转义字符大全，转义字符速查手册 Escape character
- 视网膜电图特征可以检测成人的抑郁状态和治疗反应：一种机器学习方法