《《网页制作》模块3简单网页的制作 p48》由会员分享，可在线阅读，更多相关《《网页制作》模块3简单网页的制作 p48（48页珍藏版）》请在金锄头文库上搜索。
1、目录模块3 简单网页的制作目录模块3 简单网页的制作掌握网页中文本的编辑方法。 了解网页中常用的图像类型。 掌握网页中图像的编辑方法。 了解网页制作中路径的概念。 掌握网页链接的设置方法。 掌握简单图文混排网页的制作方法。知识目标目录模块3 简单网页的制作能恰当地添加网页文本。 能在页面中添加图像和图像特效。 能够使用链接实现网页间的有效交互。能力目标目录模块3 简单网页的制作任务1：实现网页中文本的添加与设置操作。 任务2：实现向网页中添加图像的操作。 任务3：实现向网页中添加超链接的操作。具体任务目录文本的添加(1)(2)(3)(4)水平线的插入文本的编辑特殊符号的添加3.1.1任务分析任
2、务1 实现网页中文本的添加与设置操作目录3.1.2相关知识任务1 实现网页中文本的添加与设置操作1.文本的添加文本是网页中最基本的元素之一，在 Dreamweaver中可以直接输入文本，还可以引用外部文本文件。引用外部文本文件时，可以打开外部文 本文件，选择要引用的文本内容，将其复制后粘贴 到网页中，如图3-1所示。目录任务1 实现网页中文本的添加与设置操作2.文本的编辑 1）文本段落的编辑和对齐方式(1) (2)(3)按Enter键分段按Shift+Enter组合键换行选取要编辑的文本，单击“ 属性”面板中的对齐方式按钮，即可设置被选文本的对 齐方式。目录任务1 实现网页中文本的添加与设置操
3、作目录任务1 实现网页中文本的添加与设置操作2）编辑文本的字体、颜色和大小 （1）选取要编辑的文本，在“属性”面板中单击 CSS按钮，然后在“字体”下拉列表框中选择相应字体 ，若其中没有要使用的字体，则可以在“字体”下拉 列表框中选择“编辑字体列表”选项，如图3-4所示。目录任务1 实现网页中文本的添加与设置操作（2）随即弹出“编辑字体列表”对话框，在“可用 字体”列表框中选择要使用的字体，单击添加按钮， 将需要的字体添加到“选择的字体”列表框中，然后 单击“确定”按钮，如图3-5所示。目录任务1 实现网页中文本的添加与设置操作（3）返回编辑界面，在“字体”下拉列表框中选 择需要使用的新增字体
4、，如图3-6所示，文本将应用 所选择的字体样式，如图3-7所示。目录任务1 实现网页中文本的添加与设置操作（4）设置标题文本。 （5）设置文本颜色。 （6）选取要编辑的文本后，在“属性”面板中的“ 大小”下拉列表框中选择适当的选项，然后在其右侧的下拉列表框中选择相应的单位。目录任务1 实现网页中文本的添加与设置操作3）列表设置设置列表更改项目符 号样式目录任务1 实现网页中文本的添加与设置操作3.特殊符号的添加 网页中的文本可能包含一些特殊字符，如（小于符号）、（版权符号）等，这些特殊字符在网页中有特殊的表示方式。 。在文档中可以通过插入其他字符的方法来添加这些特殊字符 。 将光标置于要插入处
5、，在“插入”面板中单击“常用”下拉按钮 ，在弹出的下拉菜单中选择“文本”选项，再单击“字符”下拉按钮，在弹出的下拉菜单中选择要使用的特殊符号即可在光标处 插入对应的符号，如图3-17所示。目录任务1 实现网页中文本的添加与设置操作4.水平线的插入 网页通常包含一些HTML元素，如水平线、日期、注释等 ，可以在“插入”面板中执行相关操作将它们添加到文档中。下面介绍如何在页面中插入水平线。 在页面中确定插入的位置，然后在“插入”面板中的“常用”模 式下单击“水平线”按钮，如图3-18所示。目录任务1 实现网页中文本的添加与设置操作3.1.3任务实施1.具体任务 在站点study中创建页面并保存为s
6、oft.html，向页 面中添加文本、水平线等内容，如图3-20所示。目录任务1 实现网页中文本的添加与设置操作2.实施步骤目录任务1 实现网页中文本的添加与设置操作目录任务1 实现网页中文本的添加与设置操作目录任务1 实现网页中文本的添加与设置操作目录任务1 实现网页中文本的添加与设置操作3.1.4任务小结文本是页面不可缺少的基本元素，是站点内容 的集中体现，页面中文本的格式一方面确保了网站 内容的合理性，另一方面也起到了美化网页的作用 。 对页面中文本的段落、字体、大小等样式的设 置操作是编辑页面中文本的基本内容，应熟练掌握 。目录了解网页使用图像的特点(1)(2)(3)(4)鼠标经过图像
7、效果的实现在网页中插入图像图像的编辑3.2.1任务分析任务2 实现向网页中添加图像的操作目录3.2.2相关知识任务2 实现向网页中添加图像的操作1.网页图像基础(2)网页图像 基础(1)(3)GIF（图形交换格式）JPEG（联合图像专家组）格式PNG（可移植网络图形）格式目录任务2 实现向网页中添加图像的操作2.插入图像目录任务2 实现向网页中添加图像的操作目录任务2 实现向网页中添加图像的操作3.图像的编辑(1) (2)(3)调整图像大小添加图像的替 换文本设置图像对齐方式目录任务2 实现向网页中添加图像的操作4.鼠标经过图像鼠标经过图像是指当鼠标指针经过图像时，图像改变为另 一幅图像；当鼠
8、标指针离开时，图像又恢复为原始图像。它由 两幅图像组成，分别是鼠标指针未经过时的图像（原始图像） 和鼠标指针经过时显示的图像（鼠标经过图像）。目录任务2 实现向网页中添加图像的操作3.2.3任务实施1.具体任务目录任务2 实现向网页中添加图像的操作目录任务2 实现向网页中添加图像的操作目录任务2 实现向网页中添加图像的操作2.实施步骤目录任务2 实现向网页中添加图像的操作3.2.4任务小结图像和文本是网页中最基本的两大元素，将这 两种元素合理地结合起来是表现页面内容最直接、 最有效的方法，实现图文混排页面是制作网页的基 础。目录3.3.1任务分析任务3 实现向网页中添加超链接的操作要想正确、有
9、效地实现网页中的超链接，需要了解网页链 接路径，同时还要合理、恰当地设置不同类型的链接。本任务 的实现需要掌握以下内容。网页链接路径不同类型链 接的设置目录3.3.2相关知识任务3 实现向网页中添加超链接的操作1.关于链接 在创建了Dreamweaver站点和HTML页面之后，需要创建文 档到文档的链接。Dreamweaver提供了多种创建链接的方法，可创建到文档、图像、多媒体文件或电子邮件地址的链接，可以 建立到文档内任意位置的任何文本或图像的链接，包括标题、 列表、表、绝对定位的元素（AP元素）和框架中的文本或图像。目录任务3 实现向网页中添加超链接的操作2.网页链接路径(1) (2)(3
10、)绝对路径文档相对路径站点根目录相对路径目录任务3 实现向网页中添加超链接的操作最常使用的链接路径类型是文档相对路径和站点根目录相 对路径。文档相对路径站点根目录 相对路径目录任务3 实现向网页中添加超链接的操作目录任务3 实现向网页中添加超链接的操作3.不同类型链接的设置图像热点链接空链接电子邮件链接锚点链接 链接的设置步骤链接的类型脚本链接123 4567目录任务3 实现向网页中添加超链接的操作链接到其他文档或文件（如图像、 影片、PDF或声音文件）的链接(1)(2)(3)(4)空链接和脚本链接命名锚点链接电子邮件链接链接的类型目录1.具体任务 （1）在soft.html页面中的项目列表文
11、本上分别创建到 Photoshop.html、Illustrator.html、Freehand.html和CorelDraw.html页面的链接，打开方式为在新窗口中打开。 （2）分别在Photoshop.html、Illustrator.html、Freehand.html 和CorelDraw.html页面中创建返回到soft.html页面的链接，打开方式为在原窗口中打开。任务3 实现向网页中添加超链接的操作3.3.3任务实施目录（3）在Photoshop.html页面顶部插入锚点标记top，在页面 底部的“返回顶部”文本上创建到top的锚点链接，实现单击“返回 顶部”链接可以跳转到页面
12、顶部。 （4）在soft.html页面中创建一个文本内容为“技术咨询”的 电子邮件链接，电子邮件地址为。任务3 实现向网页中添加超链接的操作目录任务3 实现向网页中添加超链接的操作2.实施步骤目录任务3 实现向网页中添加超链接的操作目录任务3 实现向网页中添加超链接的操作目录任务3 实现向网页中添加超链接的操作3.3.4任务小结正确、有效的链接是网页能否被浏览的关键， 链接的创建方法和种类多样，在网页制作过程中， 要根据不同类型的链接设置正确、恰当的路径。目录思考与练习1.（）用于给文本、段落和图像等设置属性。 A.属性检查器B.布局检查器 C.“文件”面板D.“布局”选项卡2.“页面属性”对话框中的（）用于设置将显示 在Web浏览器的标题栏上的页面名称。 A.文本B.标题/编码C.脚本D.HTML目录思考与练习请用Dreamweaver CS5实现图3-72所示的图文并茂的页面。目录
