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