网页设计与制作案例教程（第2版）（胡秀娥） 项目四（网页文本、图像与多媒体）

网页文本、图像与多媒体项

目

四网页设计与制作案例教程网页设计

文本、图像与多媒体是网页中的常见元素。其中，文本用于传递网页信息；图像与多媒体用于修饰网页整体效果，增强网页可读性，提高用户体验感。

本项目将介绍网页文本、图像与多媒体的相关知识，以及使用DreamweaverCC在网页中添加这些元素的方法。项目导读知识目标1.熟悉文本标签的基础知识。

2.熟悉图像标签的基础知识。能力目标思政目标1.能够使用DreamweaverCC为网页添加文本与特殊字符，并设置样式。2.能够使用DreamweaverCC为网页添加图像并设置样式。1.掌握使用DreamweaverCC丰富网页内容的方法，提升工作能力。2.通过学习文本、图像及多媒体元素的使用方法，明白各种事物都有其独特的功能性。3.熟悉多媒体标签的基础知识。3.能够使用DreamweaverCC为网页添加多媒体文件并设置样式。01任务一在网页中添加文本任务描述

文本是网页中最常见的元素，优秀的网页文本设计不仅可以传递信息，还能给用户带来良好的视觉体验。

本任务首先介绍使用DreamweaverCC添加文本并设置样式的基础知识，然后通过实际操作加深理解。一、添加文本在网页中，文本主要是由段落标签、标题标签及文本格式化标签标记的。1．段落标签在HTML5中，使用<p>标签标记段落文本，该标签通常用于标记正文形式的文本。虽然使用其他标签也能实现段落文本的显示效果，但是不建议使用，因为可能会妨碍搜索引擎的识别。2．标题标签HTML5中提供了6个级别的标题，可用<h1>～<h6>标签来标记。其中，<h1>的标题级别最高，<h6>的标题级别最低。默认情况下，这些标签都具有字体加粗效果，并根据标题级别的降低，依次减小字号，如图所示。各级别标题标签与段落标签的页面效果3．文本格式化标签HTML5中提供了一些文本格式化标签，如<strong>（粗体）、<em>（倾斜）标签，使DreamweaverCC添加这两种标签的方法如下:01打开本书配套素材“项目四”→“任务一”文件夹，右击“ex1.html”文件，在弹出的快捷菜单中选择“打开方式”→“AdobeDreamweaver2020”选项，在DreamweaverCC中打开该文件，如图所示。使用DreamweaverCC打开网页文件02

将鼠标指针置于任一文本标签中，单击“窗口”→“属性”菜单，打开“属性”窗格，如图所示。“属性”窗格03单击其中的“粗体”按钮，即可在代码中插入<strong>标签，在标签内输入“粗体”；单击“斜体”按钮，即可在代码中插入<em>标签，在标签内输入“斜体”。将网页保存后，按“F12”键进行预览。粗体与斜体标签的页面效果

除了这两种可用DreamweaverCC直接插入的文本格式化标签之外，HTML5还提供了许多其他的格式化标签，用它们标记文本，文本就可以在页面上显示出不同的效果。常用的其他格式化标签有以下几种。上下标上标与下标是很重要的排版格式，在HTML5中，分别使用<sup>与<sub>标签来标记上标文本与下标文本。上标文本比主体文字稍高，常见的上标有指数、商标符号等；下标文本比主体文字稍低，常见的下标有脚注、化学符号脚标等。插入与删除文本在HTML5中，分别使用<ins>与<del>标签标记插入与删除的文本。默认情况下，<ins>标签中的文本会添加下划线效果，<del>标签中的文本会添加删除线效果。突出显示文本在HTML5中，使用<mark>标签标记页面中需要突出显示的文本内容。默认情况下，标签中的文本会添加黄色背景。注音在HTML5中，使用<ruby>标签为字符添加注音（也称旁注）。注音是东亚语言（如中文或日文）中的一种惯用符号，一般位于要标注字符的上方或右侧。<ruby>标签在使用时需要与<rt>标签连用，<rt>标签标记字符需要标注的注音内容。二、添加特殊字符

在网页中编辑文本时，有时可能会遇到一些无法直接输入的字符，如版权符号“©”、注册商标符号“®”等。这时可以使用DreamweaverCC的插入功能添加对应字符，具体的方法为，将插入点置于想要插入字符的标签中，打开“插入”面板，单击“字符”按钮，在展开的列表中选择对应符号即可。如果还需要其他更多的字符可以选择“其他字符”选项，打开“插入其他字符”对话框，选择对应字符，单击“确定”按钮，如图所示。使用DreamweaverCC插入特殊字符三、设置文本样式

使用DreamweaverCC为标签添加样式的方法在项目三中已经简单介绍过，在设置各选择器的样式时，单击“属性”窗格名称下方的“文本”按钮后，即可跳转到文本设置区，在其中可以设置文本的各种样式，如图所示。设置文本样式（1）color属性用于设置文本颜色。使用DreamweaverCC设置该属性值时，单击“设置颜色”按钮，即可打开选色板，直接手动调节颜色，所选颜色将自动生成16进制编码，如图所示。单击选色板中的“吸管”按钮，可以选取DreamweaverCC内部的颜色，按住该按钮并拖动可选取DreamweaverCC外部的颜色。选色板（2）font-family属性用于设置文本的字体样式。属性值即为字体样式名称，当字体样式名称为中文时需要用双引号引起来；为英文时直接声明即可。（3）font-style属性用于设置文本的字体风格。属性值有3个，normal表示默认效果，也就是正常的字体；italic表示斜体字；oblique表示倾斜字体，可以将没有斜体属性的字体强制倾斜。（4）font-weight属性用于设置文本的字体粗细。常用的属性值有bold，表示粗体；normal，表示正常粗细。（5）font-size属性用于设置文本字号。属性值通常使用数字与单位的组合，如“20px”表示20像素。（6）line-height属性用于设置文本的行高。属性值为表示行高大小的数值（没有单位时表示使用该数值与字号大小相乘设置行高）或百分比（基于当前字号大小的百分比设置行高），此外还有一个默认值normal。（7）text-align属性用于设置文本的水平对齐方式。属性值有4个，left是默认值，表示左对齐；right表示右对齐；center表示居中对齐；justify表示两端对齐。（8）text-decoration属性用于设置文本划线。属性值有4个，none表示默认效果；underline表示下划线效果；overline表示上划线效果；line-through表示贯穿线效果。（9）text-indent属性用于设置文本的缩进。属性值为表示缩进大小的数值与单位（一般为em，表示一个字符）。（10）text-shadow属性用于设置文本阴影。该属性有4个值，依次为h-shadow、v-shadow、blur与color。

其中，h-shadow表示阴影的水平偏移量，v-shadow表示阴影的垂直偏移量，这两个属性值都可以为负值，0表示阴影不偏移；blur表示阴影的模糊程度，不可为负值；color表示阴影的颜色，设置方式与文本颜色的设置方式相同。扫描二维码观看详细步骤视频任务实施——制作“传承经典网”主页的“诗词佳作”模块

本任务将通过制作“传承经典网”主页的“诗词佳作”模块，练习在网页中添加文本的操作，该模块页面效果如图所示。“传承经典网”主页的“诗词佳作”模块页面效果02任务二

在网页中添加图像任务描述

在网页中适当添加图像可以使网页内容更加丰富。

本任务首先介绍使用DreamweaverCC在网页中添加图像并设置样式的基础知识，通过实际操作加深理解。一、添加图像使用DreamweaverCC添加图像标签

使用DreamweaverCC可以直接在网页文档中添加图像，将插入点置于想要插入图像的位置；打开“插入”面板，单击“Image”按钮，打开“选择图像源文件”对话框；接着在其中选择图像文件；单击“确定”按钮，如图所示。添加图像后，文档窗口中自动生成图像标签的代码，如图所示。图像标签的代码

在HTML5中，使用<img/>标签标记图像。该标签在使用时需要声明两个属性，其中，src属性必须设置，它表示图像的引用地址，一般用相对路径表示；alt属性表示图像的代替文本，当该图像因文件缺失、路径错误等原因无法显示时，浏览器将在该标签所在位置显示代替文本，该属性可以为空。

width属性与height属性分别表示图像的宽度和高度，单位是像素。

当素材图像在本地磁盘中移动位置后，图像标签的src属性需要及时更改，否则将无法正常显示图像。二、绝对路径与相对路径在网页中使用图像、音频、视频等素材文件时，都需要引用素材文件的地址，引用方式有绝对路径与相对路径两种。01绝对路径：是指素材文件的真正地址，可以是文件在磁盘上的完整路径，也可以是文件在网络上的完整网址。制作网页时不推荐使用绝对路径，因为在网页制作完成后需将其上传至服务器，这时素材文件的绝对路径会发生改变，导致文件无法引用。02相对路径：是指素材文件相对于当前文件的地址，也就是以当前文件为起点，通过层级关系描述素材文件的位置。一般有以下3种情况：①素材文件与当前文件位于同一文件夹时，只需直接输入素材文件的名称，如<imgsrc="p1.jpg"/>。②素材文件位于当前文件的下一级文件夹时，需要将文件夹名和文件名一同输入，并将它们用“/”隔开，如<imgsrc="images/p1.jpg"/>。③素材文件位于当前文件的上一级文件夹时，需要在文件夹名前加上“../”，每上一级即增加一个“../”。例如，在如图4-20所示的“page1.html”文档中引用p1.jpg时，使用相对路径可以写为<imgsrc="../images/p1.jpg">。文件的存储路径三、设置图像样式

图像文件在页面中显示时默认占据一个矩形区域，使用CSS3可以设置该矩形区域的宽度、高度、边框及圆角样式，如图所示。border-radius属性用于设置元素的圆角。属性值为数值加单位，设置该属性时可以直接在属性后输入属性值（表示同时设置四个方向角的圆角），也可以在下方的矩形元素示意图上设置特定方向角的圆角。01width与height属性分别用于设置元素的宽度与高度，它们可以直接在标签中设置，也可以在CSS3选择器中设置。需要注意的是，这两条属性在“布局”设置区中。02border属性用于设置元素的边框，在“边框”设置区中可以选择设置矩形元素的“所有边”“顶部”“右侧”“底部”“左侧”边框，其下方的子属性width用于设置边框的宽度，属性值为数值加单位；子属性style用于设置边框的样式，常用的属性值为solid，表示单实线，属性值dotted表示点线、dashed表示虚线；子属性color用于设置边框的颜色，属性值的设置方式与文本颜色的设置方式相同。03四、变形与过渡CSS3中新增了一些属性用于设置元素的变形与过渡效果，从而展示动画效果，提升页面趣味性。01变形:在CSS3中，使用transform属性即可实现元素的平移、缩放与旋转等变形效果。属性值有以下几种:（1）none，默认值，表示无变形效果。（2）translate(x,y)，表示平移方法，用于重新设置元素的位置。两个参数分别表示元素在x轴与y轴方向上移动的距离，参数值为数值与单位或者百分比，可以为负值。如果只设置一个参数值，则第二个参数值默认为0。（3）scale(x,y)，表示缩放方法，用于改变元素的尺寸。两个参数分别表示元素宽度与高度的缩放倍数，参数值大于1表示按比例放大，参数值小于1则表示按比例缩小。如果只设置一个参数值，则表示同时设置宽度与高度的缩放比例。当参数值为负数时，会将元素翻转显示。（4）rotate(angle)，表示旋转方法，用于使元素旋转一个角度。参数为旋转的角度，如30deg。deg为角度的单位，表示度。当参数值为正值时，元素按顺时针旋转，反之则按逆时针旋转。（5）skew(x-angle,y-angle)，表示倾斜方法，用于使元素倾斜一个角度。两个参数分别表示元素相对于竖直方向与水平方向的倾斜角度，设置方法与rotate()相同，但是不同的是，当参数值为正数时表示逆时针倾斜，反之表示顺时针倾斜。当只设置一个参数值时，第二个参数值默认为0。

因为“CSS设计器”面板中暂未提供该属性，所以使用DreamweaverCC设置变形时需要我们手动输入。

输入方式有两种，第一种是直接在CSS样式文件中输入代码；第二种是单击“CSS设计器”面板“属性”窗格中的“更多”按钮，在输入框中输入属性及属性值，如图所示。手动输入属性及属性值02过渡:使用CSS3提供的过渡功能，能够在不使用Flash与JavaScript的情况下展示元素样式从一个状态向另一个状态缓缓变化的过程。下面对CSS3中过渡效果的相关属性进行介绍:（1）transition-property属性用于设置应用过渡效果的CSS属性名称。属性值none是默认值，表示不应用过渡效果；all表示为所有属性应用过渡效果；CSS属性名表示应用过渡效果的具体属性，若有多个属性名，各属性名用逗号隔开。（2）transition-duration属性用于设置过渡效果的变化时间。属性值为过渡效果变化的总时间，默认值为0，单位一般为s（秒）或ms（毫秒）。如果不设置过渡时间，过渡效果将没有过渡的过程，直接显示结果。（3）transition-timing-function属性用于设置过渡效果的速度曲线。常用的属性值cubiczier(n,n,n,n)表示贝塞尔曲线，用于精确设置过渡效果的速度曲线，n的取值范围为0～1；linear表示匀速显示过渡效果，等同于cubiczier(0,0,1,1)；ease为默认值，表示（相对于匀速）慢速开始、先加速再减速至结束的过渡效果，等同于cubiczier(0.25,0.1,0.25,1)。（4）transition-delay属性用于设置过渡效果开始之前需要等待的时间，其设置方法与transition-duration属性相同。属性值默认为0，这时表示立即开始过渡效果；属性值为正数时，表示过渡效果将等待设置的时间之后开始；属性值为负数时，表示过渡效果会将该时间点之前的动作截断。例如，有一个时长为5秒的过渡效果A，A的变化过程可看作一个时长为5秒的动画片段，在此基础上设置延迟时间为−2秒，则表示当该过渡效果触发时，A将直接从第2秒开始播放直至结束（默认动画片段自第0秒开始播放）。五、设置元素背景与阴影CSS3中提供了许多设置元素背景的属性，包括背景图像和背景颜色。此外，还提供了设置元素阴影的属性。1．设置背景图像:为一个元素设置背景图像与直接插入图像标签的操作有所不同。设置背景图像的方法为，打开“CSS设计器”面板，单击“属性”窗格的“背景”设置区中background-image属性下子属性url后的文件按钮打开“选择图像源文件”对话框，在其中选择图像文件后，单击“确定”按钮，如图所示。设置背景图像其他与背景图像相关的属性说明如下:

（1）background-position属性用于设置背景图像的显示位置。默认情况下，背景图像显示在元素左上角。该属性需设置两个值，它们之间用空格隔开，如“background-position:lefttop;”。在使用DreamweaverCC设置时，只需分别设置这两个值即可，如图所示。第一个值表示背景图像在水平方向的位置，有left、center及right，默认为left；第二个值表示竖直方向的位置，有top、center及bottom，默认为top。这两个值也都可以使用数值加单位或百分比表示，当使用数值或百分比时，均以左上角为原点确定背景图像的显示位置。此外，如果在代码中只设置一个值，那么浏览器将默认第二个值为center，即50%。

设置背景图像的显示位置

（2）background-size属性用于设置背景图像的宽度与高度。

（3）background-repeat属性用于设置背景图像的显示方式，如图4-25所示。属性值repeat（）表示在水平与竖直方向上平铺；repeat-x（）表示在水平方向上平铺；repeat-y（）表示在竖直方向上平铺；no-repeat（）表示不平铺，只显示一次。设置背景图像的显示方式2．设置背景颜色：元素背景颜色的设置方式与文本颜色的设置方式类似。在为元素设置选择器之后，打开“CSS设计器”面板，在“属性”窗格中的“背景”设置区中设置background-color属性，如图所示。3．设置元素阴影元素的阴影将显示在元素的四周，其设置方法与文本阴影的设置方式类似。在为元素设置选择器之后，打开“CSS设计器”面板，在“属性”窗格中的“背景”设置区中设置box-shadow属性，如图所示。设置元素阴影设置背景颜色

其中，spread表示阴影的尺寸，inset表示内部阴影，其余各值与在文本阴影中的意义相同。此外，上述各值除h-shadow与v-shadow之外都可以省略。扫描二维码观看详细步骤视频任务实施——制作“传承经典网”主页的“大家风范”模块

本任务将制作“传承经典网”主页的“大家风范”模块，练习使用DreamweaverCC在网页中添加图像的方法，具体页面效果如图所示。“传承经典网”主页的“大家风范”模块页面效果03任务三

在网页中添加多媒体任务描述

多媒体元素能够给网页增添更强的互动性，为用户带来更多元的视听效果。

本任务主要介绍使用DreamweaverCC插入多媒体文件的方法，通过实际操作加深理解。一、插入HTML5Audio在网页文档中插入一个音频文件

在HTML5中使用<audio>标签标记音频文件，使用DreamweaverCC插入音频文件时可在“插入”面板中单击“HTML5Audio”按钮，网页文档中即插入了一个音频标签，网页中嵌入一个音频占位符，如图所示。

此时的标签中并没有音频文件，需要使用<audio>标签的“属性”面板进行添加。打开<audio>标签的“属性”面板后，单击“源”文本框后的“浏览”按钮，打开“选择音频”对话框，选择音频文件后单击“确定”按钮，即可插入音频文件，如图所示。选择音频文件

下面简单介绍一下<audio>标签的“属性”面板中的几个重要选项:（1）ID：用于设置HTML5音频的标题。（2）源：用于设置HTML5音频源文件。（3）Controls：选中该属性，表示显示音频播放控件。（4）Autoplay：选中该属性，则音频在加载完成后自动播放。（5）Loop：选中该属性，则音频将循环播放。（6）Muted：选中该属性，表示将音频设置为静音。（7）“Alt源1”和“Alt源2”：用于设置当“源”编辑框中设置的音频格式不被当前浏览器支持时，打开的第2种和第3种音频格式。二、插入HTML5Video

在HTML5中使用<video>标签标记视频文件，使用DreamweaverCC插入视频文件的方法与插入音频文件的方法类似，在“插入”面板中单击“HTML5Video”按钮并进行设置即可。不同的是，<video>标签的“属性”面板具有“W”与