网页的基本操作
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
第3讲 网页的基本操作
本章学习目标
了解网页中图像的分类及其特点；理解链接的概念 ,其中包括URL、绝对路径和相对路径的概念。 通过实例分析，掌握设置网页属性的方法。 掌握文本和特殊字符的输入方法，学会创建列表； 掌握在网页中插入日期、水平线等常见网页元素的 方法。 熟练掌握在网页中添加图像及相关属性的设置方法 、学会创建图像热点区域；熟练掌握在网页中设置 超级链接的方法。 掌握在网页中插入 Flash 元素的基本方法及相关属 性的设置。
本章设计任务
构建一个以介绍厦门为主题的简单个人网站
内容
4.1 设置网页属性 4.2 添加网页内容
为网页加入文本
为网页加入图像
创建超链接
插入多媒体对象
2016/12/6
《网页设计技术》
4
3.1 设置网页属性
设置网页属性 制作网页时，先需设置网页的页面属性，如网页标题、 背景图像、超链接的颜色、文档编码方式等属性。 “修改”｜“页面属性”命令，将打开“页面属性” 对话框，各选项的含义： 外观：用来设置页面的默认字体、背景颜色、背 景图像、页面边距等 链接：设置链接字符的字体、颜色等 标题：设置当前网页文本的格式 标 题 和 编 码： “标题”设置网页文档的标题； “编码”设置文档字体采用的编码方式。计算机 中显示的每种文字都需要对应的编码支持，才能 正常显示，否则出现乱码，在中文模式下默认编 码为简体中文GB2312。 跟踪图像：在设计页面时插入用作参考的图像文 件，浏览网页时该图片是看不到的。
2016/12/6 《网页设计技术》 5
实例演示---构建厦门新貌个人网站
创建站点 站点根文件夹：xiamen
主页index.html存放在站点根文件夹xiamen下 files主要存放主页外其他的网页文件： gaikuang.html (厦门概况） gly.html （鼓浪屿） images主要存放站点中的图片文件，站点默认图像文件夹 others存放其他的一些文件，如flash 、声音等文件
注意：与添加文本不同，插入的图像不能从别的文档 中复制，插入到网页中的图像只能以文件的形式独立 存在于站点文件夹中。如果图像文件不在站点目录中， DW会保存到站点目录中。
《网页设计技术》 27
2016/12/6
图像的属性说明 源文件：图像文件所在的目录及名称，可通过“指向文件” 或“浏览”按钮设置。 替代：为图片添加描述信息。在浏览器中，当鼠标指向图像 时会显示这个描述信息。 链接：为图像指定一个链接。 编辑：启动“外部编辑器”，同时打开所选图像进行编辑。 垂直/水平边距：图像相对于编辑窗口或文本等的间隔。 低解析度源：设置低分辩率的图像。在主图像被下载之前， 先载入低分辩率图像，以便浏览者及早地了解图像的信息。
《网页设计技术》 6
2016/12/6
准备网页素材
2016/12/6
《网页设计技术》
7
设置页面属性
gaikuang.html (厦门概况）
新建 gaikuang.html ，保存在站点files下 修改/页面属性– 分类列表--外观—背景图像 ： materials中bj2.jpg
../images/bg2.jpg
2016/12/6 《网页设计技术》 23
在网页gaikuang.html中添加水平线和日期
① 将光标定位在第二行“旅游资源”后面 ② 插入工具栏---HTML---水平线
① 将光标定位于倒数第二行的行首，即“Copyright” 的前面 ② 插入菜单---HTML---水平线 ③ 光标定位于“版权所有”的后面，插入－－常用 －－日期
《网页设计技术》 15
2016/12/6
4.2 添加网页内容
3. 项目列表和编号列表
项目列表：对于一些具有相同或相似属性的文本，将 内容条列成项目，以便组成一个整体项目分类。
编号列表：对于具有序列属性（即顺序性）、属性相 同的内容，则可设置编号列表。
① ②
单击属性面板中的“编号列表”按钮 选择[文本][列表][编号列表]菜单命令。
人口 rk.txt 气候 qh.txt 宗教 zj.txt 语言 yy.txt 旅游资源 lyzy.txt 主要旅游景点 zyjd.txt
⑤ 回车后，输入 Copyright ©版权所有 地址：福建厦门
2016/12/6
（说明：两行之间按shift+enter ,换行不分段）
《网页设计技术》
22
为 网页gaikuang.html设置文字格式
直接输入文本 复制文本。在其他文本编辑器中复制文本（如 Word），在DW中执行粘贴命令即可。但DW不保留原 有的文本格式。如果想保留文本的格式，可以选择 [编辑][选择性粘贴]菜单命令 插 入 Word 或 Excel 等 其 它 文 档 的 内 容 。 选 择 [ 文 件][导入] 菜单命令。
分类列表—标题/编码—标题：厦门概况
2016/12/6
《网页设计技术》
8
源自文库
4.2 添加网页内容
1 为网页加入文本
插入文本 ① 普通文本 ② 特殊文本 ③ 在字符之间添加空格 ④ 水平线 ⑤ 日期 格式化文本 项目列表
2016/12/6
《网页设计技术》
9
4.2 添加网页内容
1.普通文本的录入
日期：在“插入”栏的“常用”选项中 “插入日 期”
2016/12/6
《网页设计技术》
13
4.2 添加网页内容
2.普通文本的格式化
一般有属性面板和菜单命令两种方法
①
使用菜单命令时，只需要选择“文本”菜单下的相应命 令即可。 最常用的属性面板, 文本属性面板中各选项含义及设置 方法如下。
②
格式：设置选定文本的段落格式。如段落、标题1、 标题2等 样式：对选定内容应用文本样式CSS样式 粗体、斜体、大小、颜色、对齐方式
链接：除了上述的字符格式化外，还可以对所选的 文本建立超级链接
目标：在此设置打开超级链接的窗口 字体
《网页设计技术》 14
2016/12/6
4.2 添加网页内容
字体属性说明：
默认情况下， DW 提供了三种中文字体， 如果要使用其它中文字体，可用“编辑 字体列表”命令，将系统的字体添加到 DW字体列表中。 字体列表中每一选项中包括多种字体， 各种字体之间用“，” 分隔。其含义是 浏览者的浏览器中如果没有这种字体， 则用“，”后面的字体进行显示，以此 类推。
① 单击标签选择器—body，选中整个页面；单击属性 面板的文本缩进 ② 选中第一段落“厦门概况”：设置隶书，46像素， 颜色为black，居中对齐 ③ 为“地理位置”创建项目列表： 地理位置 属性面板 — 项目列表按钮，列表项目按钮：样式为 正方形 ④ 将行政区域、经济状况、人口 、气候、宗教 、 语 言、旅游资源、主要旅游景点设置为项目列表。 ⑤ 将最后两行的版权和地址信息，在属性面板中设置 为宋体。
启动Firework优化当前图像 对当前图像进行裁剪操作，去掉不需要的部分 调整图像的对比度和亮度
实例：在网页gaikuang.html中插入图像
（1）使用菜单插入图像文件 xiamen.gif ① 光标定位在“地理位置”下面一段的段首 ② 插入菜单－－图像，materials/xiamen.gif ③ 图像属性设置。替代：俯瞰厦门；边框：1；对齐 下拉框选左对齐，水平和垂直边距为5
PNG （可移植网络图形） ： 无损压缩格式，支持 24 位真彩色，
4.2 添加网页内容
2.图像的插入 网页一般是图文混排结构，除了添加文本内容，还需 要插入有说服力的资料图片。
直接插入图像： 可使用 [ 插入 ][ 图像 ] 菜单命令或 “插入栏”的“常用”选项卡中的“图像”按钮。
用占位符插入图像： 在制作网页时，经常会出现所需 的图像还没有制作完成的情况，此时先插入一个图像 占位符。图像占位符是一个占有一定空间的符号，能 替换为其他真实的图像，它不会在浏览器中显示。[插 入][图像对象][图像占位符]
② ③
2016/12/6
[插入][HTML][特殊字符][不换行空格] 按【Ctrl+Shift+空格键】键输入。
《网页设计技术》 11
4.2 添加网页内容
在字符之间添加多个空格
①
[插入][HTML][特殊字符][不换行空格]
2016/12/6
《网页设计技术》
12
4.2 添加网页内容
absbottom
absmiddle
图片的底部与同行最低元素的底部对齐，常用于Netscape浏览器
图片的中部与同行最大元素的中部对齐，常用于Netscape浏览器
baseline
texttop
2016/12/6
图片的底部与文本基准线对齐，常用于Netscape浏览器
图片的顶部与同行最高元素的顶部对齐，常用于Netscape浏览器
特殊文本。 “插入”栏中的“文本”， 则弹出文 本工具栏，单击字符按钮 ，单击相应的特殊 字符。如果没有使用西欧字符，则会弹出一个警告 框，提示可能有些浏览器不能正常显示这些字符。
《网页设计技术》 10
2016/12/6
4.2 添加网页内容
在字符之间添加多个空格
①
在浮动选项卡“插入” 栏的“文本”选项卡中， 单击“字符”按钮，选择“插入不换行空格”
2016/12/6
《网页设计技术》
29
align属性用来指定图像与周围元素的对齐方式
align的取值
left center right top middle bottom
取值说明
在水平方向上向上左对齐 在水平方向上向上居中对齐 在水平方向上向上右对齐 图片顶部与同行其他元素顶部对齐 图片中部与同行其他元素中部对齐 图片底部与同行其他元素底部对齐
嵌套列表：包含其它列表的列表。属性面板中的“缩 进”按钮，或选择[文本][缩进]菜单命令来实现。 定义列表：不使用项目符号点或数字这样的前导字符， 并且通常用于词汇表或说明中. 列表属性设置 默认的前导符为一个点或阿拉伯数字，如要改成其他 前导字符，通过“列表属性”对话框。
《网页设计技术》 16
4.2 添加网页内容
3.2.2 为网页加入图像 1.图像的格式
由于受网络速度等方面的影响，一般用于网页的图像：GIF、 JPEG或PNG，适合网页快速下载浏览。
GIF( 图形交换格式 ) ： 无损压缩格式，只能支持 256 种颜色，
适合对颜色数目要求不高的卡通画及程序界面等。GIF格式 还可设置为透明及制作成动画文件。GIF图像常用于网页中 的小图标、符号、动画标题等。
水平线：在“插入”栏的“HTML” “水平线”
插入关键字：关键字为网络中的搜索引擎准备的， 关键字要求简短、尽可能概括网页的主题，以便浏览 者在输入很少关键字的情况下，就能很大程度地搜索 到 网 页 。 通 过 “ 插 入 ” “ HTML” “ 文 件 头 标 签”“关键字”即可，各关键字用逗号分隔。
2016/12/6
４.
实例 ：为 网页gaikuang.html输入并编辑文字
①设置页面字体、 大小和文本颜色 ② 输入文字： 厦门概况 经济状况 旅游资源 地理位置 ③ 将素材文件夹materials下的dlwz.txt文件中的文本内容复制到网页 中，每个段落前在中文输入法全角状态下按2次空格键。 ④ 行政区域----xzqh.txt； 经济状况---jjzk.txt
2016/12/6
《网页设计技术》
24
4.2 添加网页内容
3.2.2 为网页加入图像
高质量的图片一般用TIFF格式保存，但其图片体积 过大，不太适合网络传输。
不同的图片格式会表现出不同的颜色分辨率和颜色 标准，当然也会影响其体积的大小。 一般在网页设计中选择的图片不要超过8KB，如必 须选用较大图片时，可先将其分成若干小图片，显 示时再通过表格将这些小图片拼合起来。 如果在同一文件中多次使用相同的图片时，最好使 用相对路径查找该图片。
JPEG 即 JPG （联合图像专家组标准） ： 为有损压缩格式，支
持 24 位真彩色，最初为照片而设计。很高压缩比，删除人 眼不易察觉的部分图像，适合表现颜色丰富、色彩过渡平 滑的图像，不支持透明和动画。 FIREWORKS的文件格式。有较大的灵活性并且文件较小。
2016/12/6 《网页设计技术》 26
本章学习目标
了解网页中图像的分类及其特点；理解链接的概念 ,其中包括URL、绝对路径和相对路径的概念。 通过实例分析，掌握设置网页属性的方法。 掌握文本和特殊字符的输入方法，学会创建列表； 掌握在网页中插入日期、水平线等常见网页元素的 方法。 熟练掌握在网页中添加图像及相关属性的设置方法 、学会创建图像热点区域；熟练掌握在网页中设置 超级链接的方法。 掌握在网页中插入 Flash 元素的基本方法及相关属 性的设置。
本章设计任务
构建一个以介绍厦门为主题的简单个人网站
内容
4.1 设置网页属性 4.2 添加网页内容
为网页加入文本
为网页加入图像
创建超链接
插入多媒体对象
2016/12/6
《网页设计技术》
4
3.1 设置网页属性
设置网页属性 制作网页时，先需设置网页的页面属性，如网页标题、 背景图像、超链接的颜色、文档编码方式等属性。 “修改”｜“页面属性”命令，将打开“页面属性” 对话框，各选项的含义： 外观：用来设置页面的默认字体、背景颜色、背 景图像、页面边距等 链接：设置链接字符的字体、颜色等 标题：设置当前网页文本的格式 标 题 和 编 码： “标题”设置网页文档的标题； “编码”设置文档字体采用的编码方式。计算机 中显示的每种文字都需要对应的编码支持，才能 正常显示，否则出现乱码，在中文模式下默认编 码为简体中文GB2312。 跟踪图像：在设计页面时插入用作参考的图像文 件，浏览网页时该图片是看不到的。
2016/12/6 《网页设计技术》 5
实例演示---构建厦门新貌个人网站
创建站点 站点根文件夹：xiamen
主页index.html存放在站点根文件夹xiamen下 files主要存放主页外其他的网页文件： gaikuang.html (厦门概况） gly.html （鼓浪屿） images主要存放站点中的图片文件，站点默认图像文件夹 others存放其他的一些文件，如flash 、声音等文件
注意：与添加文本不同，插入的图像不能从别的文档 中复制，插入到网页中的图像只能以文件的形式独立 存在于站点文件夹中。如果图像文件不在站点目录中， DW会保存到站点目录中。
《网页设计技术》 27
2016/12/6
图像的属性说明 源文件：图像文件所在的目录及名称，可通过“指向文件” 或“浏览”按钮设置。 替代：为图片添加描述信息。在浏览器中，当鼠标指向图像 时会显示这个描述信息。 链接：为图像指定一个链接。 编辑：启动“外部编辑器”，同时打开所选图像进行编辑。 垂直/水平边距：图像相对于编辑窗口或文本等的间隔。 低解析度源：设置低分辩率的图像。在主图像被下载之前， 先载入低分辩率图像，以便浏览者及早地了解图像的信息。
《网页设计技术》 6
2016/12/6
准备网页素材
2016/12/6
《网页设计技术》
7
设置页面属性
gaikuang.html (厦门概况）
新建 gaikuang.html ，保存在站点files下 修改/页面属性– 分类列表--外观—背景图像 ： materials中bj2.jpg
../images/bg2.jpg
2016/12/6 《网页设计技术》 23
在网页gaikuang.html中添加水平线和日期
① 将光标定位在第二行“旅游资源”后面 ② 插入工具栏---HTML---水平线
① 将光标定位于倒数第二行的行首，即“Copyright” 的前面 ② 插入菜单---HTML---水平线 ③ 光标定位于“版权所有”的后面，插入－－常用 －－日期
《网页设计技术》 15
2016/12/6
4.2 添加网页内容
3. 项目列表和编号列表
项目列表：对于一些具有相同或相似属性的文本，将 内容条列成项目，以便组成一个整体项目分类。
编号列表：对于具有序列属性（即顺序性）、属性相 同的内容，则可设置编号列表。
① ②
单击属性面板中的“编号列表”按钮 选择[文本][列表][编号列表]菜单命令。
人口 rk.txt 气候 qh.txt 宗教 zj.txt 语言 yy.txt 旅游资源 lyzy.txt 主要旅游景点 zyjd.txt
⑤ 回车后，输入 Copyright ©版权所有 地址：福建厦门
2016/12/6
（说明：两行之间按shift+enter ,换行不分段）
《网页设计技术》
22
为 网页gaikuang.html设置文字格式
直接输入文本 复制文本。在其他文本编辑器中复制文本（如 Word），在DW中执行粘贴命令即可。但DW不保留原 有的文本格式。如果想保留文本的格式，可以选择 [编辑][选择性粘贴]菜单命令 插 入 Word 或 Excel 等 其 它 文 档 的 内 容 。 选 择 [ 文 件][导入] 菜单命令。
分类列表—标题/编码—标题：厦门概况
2016/12/6
《网页设计技术》
8
源自文库
4.2 添加网页内容
1 为网页加入文本
插入文本 ① 普通文本 ② 特殊文本 ③ 在字符之间添加空格 ④ 水平线 ⑤ 日期 格式化文本 项目列表
2016/12/6
《网页设计技术》
9
4.2 添加网页内容
1.普通文本的录入
日期：在“插入”栏的“常用”选项中 “插入日 期”
2016/12/6
《网页设计技术》
13
4.2 添加网页内容
2.普通文本的格式化
一般有属性面板和菜单命令两种方法
①
使用菜单命令时，只需要选择“文本”菜单下的相应命 令即可。 最常用的属性面板, 文本属性面板中各选项含义及设置 方法如下。
②
格式：设置选定文本的段落格式。如段落、标题1、 标题2等 样式：对选定内容应用文本样式CSS样式 粗体、斜体、大小、颜色、对齐方式
链接：除了上述的字符格式化外，还可以对所选的 文本建立超级链接
目标：在此设置打开超级链接的窗口 字体
《网页设计技术》 14
2016/12/6
4.2 添加网页内容
字体属性说明：
默认情况下， DW 提供了三种中文字体， 如果要使用其它中文字体，可用“编辑 字体列表”命令，将系统的字体添加到 DW字体列表中。 字体列表中每一选项中包括多种字体， 各种字体之间用“，” 分隔。其含义是 浏览者的浏览器中如果没有这种字体， 则用“，”后面的字体进行显示，以此 类推。
① 单击标签选择器—body，选中整个页面；单击属性 面板的文本缩进 ② 选中第一段落“厦门概况”：设置隶书，46像素， 颜色为black，居中对齐 ③ 为“地理位置”创建项目列表： 地理位置 属性面板 — 项目列表按钮，列表项目按钮：样式为 正方形 ④ 将行政区域、经济状况、人口 、气候、宗教 、 语 言、旅游资源、主要旅游景点设置为项目列表。 ⑤ 将最后两行的版权和地址信息，在属性面板中设置 为宋体。
启动Firework优化当前图像 对当前图像进行裁剪操作，去掉不需要的部分 调整图像的对比度和亮度
实例：在网页gaikuang.html中插入图像
（1）使用菜单插入图像文件 xiamen.gif ① 光标定位在“地理位置”下面一段的段首 ② 插入菜单－－图像，materials/xiamen.gif ③ 图像属性设置。替代：俯瞰厦门；边框：1；对齐 下拉框选左对齐，水平和垂直边距为5
PNG （可移植网络图形） ： 无损压缩格式，支持 24 位真彩色，
4.2 添加网页内容
2.图像的插入 网页一般是图文混排结构，除了添加文本内容，还需 要插入有说服力的资料图片。
直接插入图像： 可使用 [ 插入 ][ 图像 ] 菜单命令或 “插入栏”的“常用”选项卡中的“图像”按钮。
用占位符插入图像： 在制作网页时，经常会出现所需 的图像还没有制作完成的情况，此时先插入一个图像 占位符。图像占位符是一个占有一定空间的符号，能 替换为其他真实的图像，它不会在浏览器中显示。[插 入][图像对象][图像占位符]
② ③
2016/12/6
[插入][HTML][特殊字符][不换行空格] 按【Ctrl+Shift+空格键】键输入。
《网页设计技术》 11
4.2 添加网页内容
在字符之间添加多个空格
①
[插入][HTML][特殊字符][不换行空格]
2016/12/6
《网页设计技术》
12
4.2 添加网页内容
absbottom
absmiddle
图片的底部与同行最低元素的底部对齐，常用于Netscape浏览器
图片的中部与同行最大元素的中部对齐，常用于Netscape浏览器
baseline
texttop
2016/12/6
图片的底部与文本基准线对齐，常用于Netscape浏览器
图片的顶部与同行最高元素的顶部对齐，常用于Netscape浏览器
特殊文本。 “插入”栏中的“文本”， 则弹出文 本工具栏，单击字符按钮 ，单击相应的特殊 字符。如果没有使用西欧字符，则会弹出一个警告 框，提示可能有些浏览器不能正常显示这些字符。
《网页设计技术》 10
2016/12/6
4.2 添加网页内容
在字符之间添加多个空格
①
在浮动选项卡“插入” 栏的“文本”选项卡中， 单击“字符”按钮，选择“插入不换行空格”
2016/12/6
《网页设计技术》
29
align属性用来指定图像与周围元素的对齐方式
align的取值
left center right top middle bottom
取值说明
在水平方向上向上左对齐 在水平方向上向上居中对齐 在水平方向上向上右对齐 图片顶部与同行其他元素顶部对齐 图片中部与同行其他元素中部对齐 图片底部与同行其他元素底部对齐
嵌套列表：包含其它列表的列表。属性面板中的“缩 进”按钮，或选择[文本][缩进]菜单命令来实现。 定义列表：不使用项目符号点或数字这样的前导字符， 并且通常用于词汇表或说明中. 列表属性设置 默认的前导符为一个点或阿拉伯数字，如要改成其他 前导字符，通过“列表属性”对话框。
《网页设计技术》 16
4.2 添加网页内容
3.2.2 为网页加入图像 1.图像的格式
由于受网络速度等方面的影响，一般用于网页的图像：GIF、 JPEG或PNG，适合网页快速下载浏览。
GIF( 图形交换格式 ) ： 无损压缩格式，只能支持 256 种颜色，
适合对颜色数目要求不高的卡通画及程序界面等。GIF格式 还可设置为透明及制作成动画文件。GIF图像常用于网页中 的小图标、符号、动画标题等。
水平线：在“插入”栏的“HTML” “水平线”
插入关键字：关键字为网络中的搜索引擎准备的， 关键字要求简短、尽可能概括网页的主题，以便浏览 者在输入很少关键字的情况下，就能很大程度地搜索 到 网 页 。 通 过 “ 插 入 ” “ HTML” “ 文 件 头 标 签”“关键字”即可，各关键字用逗号分隔。
2016/12/6
４.
实例 ：为 网页gaikuang.html输入并编辑文字
①设置页面字体、 大小和文本颜色 ② 输入文字： 厦门概况 经济状况 旅游资源 地理位置 ③ 将素材文件夹materials下的dlwz.txt文件中的文本内容复制到网页 中，每个段落前在中文输入法全角状态下按2次空格键。 ④ 行政区域----xzqh.txt； 经济状况---jjzk.txt
2016/12/6
《网页设计技术》
24
4.2 添加网页内容
3.2.2 为网页加入图像
高质量的图片一般用TIFF格式保存，但其图片体积 过大，不太适合网络传输。
不同的图片格式会表现出不同的颜色分辨率和颜色 标准，当然也会影响其体积的大小。 一般在网页设计中选择的图片不要超过8KB，如必 须选用较大图片时，可先将其分成若干小图片，显 示时再通过表格将这些小图片拼合起来。 如果在同一文件中多次使用相同的图片时，最好使 用相对路径查找该图片。
JPEG 即 JPG （联合图像专家组标准） ： 为有损压缩格式，支
持 24 位真彩色，最初为照片而设计。很高压缩比，删除人 眼不易察觉的部分图像，适合表现颜色丰富、色彩过渡平 滑的图像，不支持透明和动画。 FIREWORKS的文件格式。有较大的灵活性并且文件较小。
2016/12/6 《网页设计技术》 26