《网页制作》模块3简单网页的制作

1、目录目录 模块模块3 简单网页的制作简单网页的制作 目录目录 模块模块3 简单网页的制作简单网页的制作 掌握网页中文本的编辑方法。 了解网页中常用的图像类型。 掌握网页中图像的编辑方法。 了解网页制作中路径的概念。 掌握网页链接的设置方法。 掌握简单图文混排网页的制作方法。 知识目标知识目标 目录目录 模块模块3 简单网页的制作简单网页的制作 能恰当地添加网页文本。 能在页面中添加图像和图像特效。 能够使用链接实现网页间的有效交互。 能力目标能力目标 目录目录 模块模块3 简单网页的制作简单网页的制作 任务1：实现网页中文本的添加与设置操作。 任务2：实现向网页中添加图像的操作。 任务3：实现

2、向网页中添加超链接的操作。 具体任务具体任务 目录目录 文本的添加 (1)(2)(3)(4) 水平线的插入 文本的编辑 特殊符号的添加 3.1.1任务分析任务分析 任务任务1 实现网页中文本的添加与设置操作实现网页中文本的添加与设置操作 目录目录 3.1.2相关知识相关知识 任务任务1 实现网页中文本的添加与设置操作实现网页中文本的添加与设置操作 1.文本的添加文本的添加 文本是网页中最基本的元素之一，在 Dreamweaver中可以直接输入文本，还可以引用外部 文本文件。引用外部文本文件时，可以打开外部文 本文件，选择要引用的文本内容，将其复制后粘贴 到网页中，如图3-1所示。 目录目录 任

3、务任务1 实现网页中文本的添加与设置操作实现网页中文本的添加与设置操作 2.文本的编辑文本的编辑 1）文本段落的编辑和对齐方式 (1) (2) (3) 按按Enter键分段键分段 按按Shift+Enter 组合键换行组合键换行 选取要编辑的文本，单击选取要编辑的文本，单击 “属性属性”面板中的对齐方面板中的对齐方 式按钮，即可设置被选文式按钮，即可设置被选文 本的对齐方式。本的对齐方式。 目录目录 任务任务1 实现网页中文本的添加与设置操作实现网页中文本的添加与设置操作 目录目录 任务任务1 实现网页中文本的添加与设置操作实现网页中文本的添加与设置操作 2）编辑文本的字体、颜色和大小 （1）

4、选取要编辑的文本，在“属性”面板中单 击CSS按钮，然后在“字体”下拉列表框中选择相 应字体，若其中没有要使用的字体，则可以在“字 体”下拉列表框中选择“编辑字体列表”选项，如 图3-4所示。 目录目录 任务任务1 实现网页中文本的添加与设置操作实现网页中文本的添加与设置操作 （2）随即弹出“编辑字体列表”对话框，在 “可用字体”列表框中选择要使用的字体，单击添 加按钮，将需要的字体添加到“选择的字体”列表 框中，然后单击“确定”按钮，如图3-5所示。 目录目录 任务任务1 实现网页中文本的添加与设置操作实现网页中文本的添加与设置操作 （3）返回编辑界面，在“字体”下拉列表框中 选择需要使用的

5、新增字体，如图3-6所示，文本将应 用所选择的字体样式，如图3-7所示。 目录目录 任务任务1 实现网页中文本的添加与设置操作实现网页中文本的添加与设置操作 （4）设置标题文本。 （5）设置文本颜色。 （6）选取要编辑的文本后，在“属性”面板中 的“大小”下拉列表框中选择适当的选项，然后在 其右侧的下拉列表框中选择相应的单位。 目录目录 任务任务1 实现网页中文本的添加与设置操作实现网页中文本的添加与设置操作 3）列表设置 设置列表设置列表 更改项目符更改项目符 号样式号样式 目录目录 任务任务1 实现网页中文本的添加与设置操作实现网页中文本的添加与设置操作 3.特殊符号的添加特殊符号的添加

6、网页中的文本可能包含一些特殊字符，如（小于符号）、 （版权符号）等，这些特殊字符在网页中有特殊的表示方式。 在文档中可以通过插入其他字符的方法来添加这些特殊字符。 将光标置于要插入处，在“插入”面板中单击“常用”下 拉按钮，在弹出的下拉菜单中选择“文本”选项，再单击“字 符”下拉按钮，在弹出的下拉菜单中选择要使用的特殊符号即 可在光标处插入对应的符号，如图3-17所示。 目录目录 任务任务1 实现网页中文本的添加与设置操作实现网页中文本的添加与设置操作 4.水平线的插入水平线的插入 网页通常包含一些HTML元素，如水平线、日期、注释等， 可以在“插入”面板中执行相关操作将它们添加到文档中。下

7、面介绍如何在页面中插入水平线。 在页面中确定插入的位置，然后在“插入”面板中的“常 用”模式下单击“水平线”按钮，如图3-18所示。 目录目录 任务任务1 实现网页中文本的添加与设置操作实现网页中文本的添加与设置操作 3.1.3任务实施任务实施 1.具体任务具体任务 在站点study中创建页面并保存为soft.html，向页 面中添加文本、水平线等内容，如图3-20所示。 目录目录 任务任务1 实现网页中文本的添加与设置操作实现网页中文本的添加与设置操作 2.实施步骤 目录目录 任务任务1 实现网页中文本的添加与设置操作实现网页中文本的添加与设置操作 目录目录 任务任务1 实现网页中文本的添加

8、与设置操作实现网页中文本的添加与设置操作 目录目录 任务任务1 实现网页中文本的添加与设置操作实现网页中文本的添加与设置操作 目录目录 任务任务1 实现网页中文本的添加与设置操作实现网页中文本的添加与设置操作 3.1.4任务小结任务小结 文本是页面不可缺少的基本元素，是站点内容 的集中体现，页面中文本的格式一方面确保了网站 内容的合理性，另一方面也起到了美化网页的作用。 对页面中文本的段落、字体、大小等样式的设 置操作是编辑页面中文本的基本内容，应熟练掌握。 目录目录 了解网页使用 图像的特点 (1)(2)(3)(4) 鼠标经过图像效 果的实现 在网页中插入图像 图像的编辑 3.2.1任务分析

9、任务分析 任务任务2 实现向网页中添加图像的操作实现向网页中添加图像的操作 目录目录 3.2.2相关知识相关知识 任务任务2 实现向网页中添加图像的操作实现向网页中添加图像的操作 1.网页图像基础网页图像基础 (2) 网页图像网页图像 基础基础 (1) (3) GIF（图形交换格式） JPEG（联合图像 专家组）格式 PNG（可移植网 络图形）格式 目录目录 任务任务2 实现向网页中添加图像的操作实现向网页中添加图像的操作 2.插入图像 目录目录 任务任务2 实现向网页中添加图像的操作实现向网页中添加图像的操作 目录目录 任务任务2 实现向网页中添加图像的操作实现向网页中添加图像的操作 3.图

10、像的编辑图像的编辑 (1) (2) (3) 调整图像大小调整图像大小 添加图像的替添加图像的替 换文本换文本 设置图像对齐方式设置图像对齐方式 目录目录 任务任务2 实现向网页中添加图像的操作实现向网页中添加图像的操作 4.鼠标经过图像鼠标经过图像 鼠标经过图像是指当鼠标指针经过图像时，图像改变为另 一幅图像；当鼠标指针离开时，图像又恢复为原始图像。它由 两幅图像组成，分别是鼠标指针未经过时的图像（原始图像） 和鼠标指针经过时显示的图像（鼠标经过图像）。 目录目录 任务任务2 实现向网页中添加图像的操作实现向网页中添加图像的操作 3.2.3任务实施任务实施 1.具体任务 目录目录 任务任务2

11、实现向网页中添加图像的操作实现向网页中添加图像的操作 目录目录 任务任务2 实现向网页中添加图像的操作实现向网页中添加图像的操作 目录目录 任务任务2 实现向网页中添加图像的操作实现向网页中添加图像的操作 2.实施步骤 目录目录 任务任务2 实现向网页中添加图像的操作实现向网页中添加图像的操作 3.2.4任务小结任务小结 图像和文本是网页中最基本的两大元素，将这 两种元素合理地结合起来是表现页面内容最直接、 最有效的方法，实现图文混排页面是制作网页的基 础。 目录目录 3.3.1任务分析任务分析 任务任务3 实现向网页中添加超链接的操作实现向网页中添加超链接的操作 要想正确、有效地实现网页中的

12、超链接，需要了解网页链 接路径，同时还要合理、恰当地设置不同类型的链接。本任务 的实现需要掌握以下内容。 网页链接路径网页链接路径 不同类型链不同类型链 接的设置接的设置 目录目录 3.3.2相关知识相关知识 任务任务3 实现向网页中添加超链接的操作实现向网页中添加超链接的操作 1.关于链接关于链接 在创建了Dreamweaver站点和HTML页面之后，需要创建文 档到文档的链接。Dreamweaver提供了多种创建链接的方法，可 创建到文档、图像、多媒体文件或电子邮件地址的链接，可以 建立到文档内任意位置的任何文本或图像的链接，包括标题、 列表、表、绝对定位的元素（AP元素）和框架中的文本或

13、图像。 目录目录 任务任务3 实现向网页中添加超链接的操作实现向网页中添加超链接的操作 2.网页链接路径网页链接路径 (1) (2) (3) 绝对路径绝对路径 文档相对路径文档相对路径 站点根目录相对路径站点根目录相对路径 目录目录 任务任务3 实现向网页中添加超链接的操作实现向网页中添加超链接的操作 最常使用的链接路径类型是文档相对路径和站点根目录相 对路径。 文档相对路径文档相对路径 站点根目录站点根目录 相对路径相对路径 目录目录 任务任务3 实现向网页中添加超链接的操作实现向网页中添加超链接的操作 目录目录 任务任务3 实现向网页中添加超链接的操作实现向网页中添加超链接的操作 3.不同

14、类型链接的设置不同类型链接的设置 图像热点链接图像热点链接 空链接空链接 电子邮件链接电子邮件链接 锚点链接锚点链接 链接的设置步骤链接的设置步骤 链接的类型链接的类型 脚本链接脚本链接 1 2 3 4 5 6 7 目录目录 任务任务3 实现向网页中添加超链接的操作实现向网页中添加超链接的操作 链接到其他文档或文件（如图像、 影片、PDF或声音文件）的链接 (1)(2)(3)(4) 空链接和脚本链接命名锚点链接 电子邮件链接 链接的类型 目录目录 1.具体任务具体任务 （1）在soft.html页面中的项目列表文本上分别创建到 Photoshop.html、Illustrator.html、F

15、reehand.html和CorelDraw.html 页面的链接，打开方式为在新窗口中打开。 （2）分别在Photoshop.html、Illustrator.html、Freehand.html 和CorelDraw.html页面中创建返回到soft.html页面的链接，打开 方式为在原窗口中打开。 任务任务3 实现向网页中添加超链接的操作实现向网页中添加超链接的操作 3.3.3任务实施任务实施 目录目录 （3）在Photoshop.html页面顶部插入锚点标记top，在页面 底部的“返回顶部”文本上创建到top的锚点链接，实现单击 “返回顶部”链接可以跳转到页面顶部。 （4）在soft.html页面中创建一个文本内容为“技术咨询” 的电子邮件链接，电子邮件地址为。 任务任务3 实现向网页中添加超链接的操作实现向网页中添加超链接的操作 目录目录 任务任务3 实现向网页中添加超链接的操作实现向网页中添加超链接的操作 2.实施步骤 目录目录 任务任务3 实现向网页中添加超链接的操作实现向网页中添加超链接的操作 目录目录 任务任务3 实现向网页中添加超链接的操作实现向网页中添加超链接的操作 目录目录 任务任务3 实现向网页中添加超链接的操作实现向网页中添加超链接的操作 3.3.4任务小结任务小结 正确、有效的链接是