项目四(网页文本、图像与多媒体)

（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
border-radius属性用于设置元素的圆角。属性值为数值加单位，设置该属性时可
03 以直接在属性后输入属性值（表示同时设置四个方向角的圆角），也可以在下方
的矩形元素示意图上设置特定方向角的圆角。
CSS3中新增了一些属性用于设置元素的变形与过渡效果，从而展示动画效果，提升页面趣味性。
01 变形:在CSS3中，使用transform属性即可实现元素的平移、缩放与旋转等变形效果。属性值有以下几种:
各级别标题标签与段落标签的页面效果
3．文本格式化标签
HTML5中提供了一些文本格式化标签，如<strong>（粗体）、<em>（倾斜）标签，使Dreamweaver CC添加这两种标签的方法如下:
01 打开本书配套素材“项目四”→“任务一”文件夹，右击“ex1.html”文件，在弹出的快捷菜单中选择
文件夹1 images
文件夹2
page1.html p1.jpg
文件的存储路径
图像文件在页面中显示时默认占据一个矩形区域，使用CSS3可以设置该矩形区域的宽度、高度、边框及圆角 样式，如图所示。
01 width与height属性分别用于设置元素的宽度与高度，它们可以直接在标签 中设置，也可以在CSS3选择器中设置。需要注意的是，这两条属性在 “布局”设置区中。
在网页中编辑文本时，有时可能会遇到一些无法直接输入的字符，如版权符号“©”、注册商标符号“®”等。 这时可以使用Dreamweaver CC的插入功能添加对应字符，具体的方法为，将插入点置于想要插入字符的标签中， 打开“插入”面板，单击“字符”按钮，在展开的列表中选择对应符号即可。如果还需要其他更多的字符可以选 择“其他字符”选项，打开“插入其他字符”对话框，选择对应字符，单击“确定”按钮，如图所示。
width属性与height属性分别表示图像的宽度和高度，单位是像素。 当素材图像在本地磁盘中移动位置后，图像标签的src属性需要及时更改，否则将无法正常显示 图像。
在网页中使用图像、音频、视频等素材文件时，都需要引用素材文件的地址，引用方式有绝对路径与相对路径两种。
01 绝对路径：是指素材文件的真正地址，可以是文件在磁盘上的完整路径，也可以是文件在网络上的完
在网页中，文本主要是由段落标签、标题标签及文本格式化标签标记的 。
1．段落标签
在HTML5中，使用<p>标签标记段落文本，该标签通常用于标记正文形式的文本。虽然使用其他标签也能实 现段落文本的显示效果，但是不建议使用，因为可能会妨碍搜索引擎的识别。
2．标题标签
HTML5中提供了6个级别的标题，可用<h1>～<h6>标签来标 记。其中，<h1>的标题级别最高，<h6>的标题级别最低。默 认情况下，这些标签都具有字体加粗效果，并根据标题级别 的降低，依次减小字号，如图所示。
签中的文本会添加下划线效果，<del>标签中的文本会添加删除线效果。
突出显示文本 注音
在HTML5中，使用<mark>标签标记页面中需要突出显示的文本内容。默认情况下，标签 中的文本会添加黄色背景。
在HTML5中，使用<ruby>标签为字符添加注音（也称旁注）。注音是东亚语言（如中文或 日文）中的一种惯用符号，一般位于要标注字符的上方或右侧。<ruby>标签在使用时需要 与<rt>标签连用，<rt>标签标记字符需要标注的注音内容。
使用Dreamweaver CC添加图像标签
添加图像后，文档窗口中自动生成图像标签的代码，如图所示 。
图像标签的代码
在HTML5中，使用<img />标签标记图像。该标签在使用时需要声明两个属性，其中，src属性必 须设置，它表示图像的引用地址，一般用相对路径表示；alt属性表示图像的代替文本，当该图像因 文件缺失、路径错误等原因无法显示时，浏览器将在该标签所在位置显示代替文本，该属性可以为 空。
02 border属性用于设置元素的边框，在“边框”设置区中可以选择设置矩形元素的 “所有边”“顶部”“右侧”“底部”“左侧”边框，其下方的子属性width用于设 置边框的宽度，属性值为数值加单位；子属性style用于设置边框的样式，常用的属 性值为solid，表示单实线，属性值dotted表示点线、dashed表示虚线；子属性color 用于设置边框的颜色，属性值的设置方式与文本颜色的设置方式相同。
1.掌握使用Dreamweaver CC丰富网页内容的方法，提升工作能力。
2.通过学习文本、图像及多媒体元素的使用方法，明白各种事物都有其 独特的功能性。
01
任务一 在网页中添加文本
文本是网页中最常见的元素，优秀的网页文本设计不仅可以传 递信息，还能给用户带来良好的视觉体验。
本任务首先介绍使用Dreamweaver CC添加文本并设置样式 的基础知识，然后通过实际操作加深理解。
即可在代码中插入<em>标签，在标签内输入“斜体”。将网页保存后，按“F12”键进行预览。
粗体与斜体标签的页面效果
除了这两种可用Dreamweaver CC直接插入的文本格式化标签之外，HTML5还提供了许多其他的格式化 标签，用它们标记文本，文本就可以在页面上显示出不同的效果。常用的其他格式化标签有以下几种。
整网址。制作网页时不推荐使用绝对路径，因为在网页制作完成后需将其上传至服务器，这时素材文件
的绝对路径会发生改变，导致文件无法引用。
02 相对路径：是指素材文件相对于当前文件的地址，也就是以当前文件为起点，通过层级关系描述素材文
件的位置。一般有以下3种情况：
① 素材文件与当前文件位于同一文件夹时，只需直接输入素材文件的名称，如<img src="p1.jpg" />。
（4）font-weight属性用于设置文本的字体粗细。常用的属性值有bold，表示粗体；normal，表示正常粗细。
（5）font-size属性用于设置文本字号。属性值通常使用数字与单位的组合，如“20 px”表示20像素。
（6）line-height属性用于设置文本的行高。属性值为表示行高大小的数值（没有单位时表示使用该数值与 字号大小相乘设置行高）或百分比（基于当前字号大小的百分比设置行高），此外还有一个默认值normal。
上下标
上标与下标是很重要的排版格式，在HTML5中，分别使用<sup>与<sub>标签来标记上标 文本与下标文本。上标文本比主体文字稍高，常见的上标有指数、商标符号等；下标文本
比主体文字稍低，常见的下标有脚注、化学符号脚标等。
插入与删除文本 在HTML5中，分别使用<ins>与<del>标签标记插入与删除的文本。默认情况下，<ins>标
设置文本样式
选色板
（2）font-family属性用于设置文本的字体样式。属性值即为字体样式名称，当字体样式名称为中文时需要 用双引号引起来；为英文时直接声明即可。
（3）font-style属性用于设置文本的字体风格。属性值有3个，normal表示默认效果，也就是正常的字体； italic表示斜体字；oblique表示倾斜字体，可以将没有斜体属性的字体强制倾斜。
（1）none，默认值，表示无变形效果。
（2）translate(x,y)，表示平移方法，用于重新设置元素的位置。两个参数分别表示元素在x轴与y轴方向上移动的 距离，参数值为数值与单位或者百分比，可以为负值。如果只设置一个参数值，则第二个参数值默认为0。
（3）scale(x,y)，表示缩放方法，用于改变元素的尺寸。两个参数分别表示元素宽度与高度的缩放倍数，参数值大 于1表示按比例放大，参数值小于1则表示按比例缩小。如果只设置一个参数值，则表示同时设置宽度与高度的缩放 比例。当参数值为负数时，会将元素翻转显示。 （4）rotate(angle)，表示旋转方法，用于使元素旋转一个角度。参数为旋转的角度，如30 deg。deg为角度的单位， 表示度。当参数值为正值时，元素按顺时针旋转，反之则按逆时针旋转。 （5）skew(x-angle,y-angle)，表示倾斜方法，用于使元素倾斜一个角度。两个参数分别表示元素相对于竖直方向 与水平方向的倾斜角度，设置方法与rotate()相同，但是不同的是，当参数值为正数时表示逆时针倾斜，反之表示 顺时针倾斜。当只设置一个参数值时，第二个参数值默认为0。
表示阴影不偏移；blur表示阴影的模糊程度，不可为负值；color表示阴影的颜色，设置方式与文本颜色的设置方 式相同。
任务实施 ——制作“传承经典网”主页的“诗词佳作”模块
本任务将通过制作“传承经典网”主页的“诗词佳作”模块，练习在网ห้องสมุดไป่ตู้中添加文本的操作，该模块页面效 果如图所示。
扫描二维码观看详细步骤视频
使用Dreamweaver CC插入特殊字符
使用Dreamweaver CC为标签添加样式的方法在项目三中已经简单介绍过，在设置各选择器的样式时，单击“属 性”窗格名称下方的“文本”按钮 后，即可跳转到文本设置区，在其中可以设置文本的各种样式，如图所示。
（1）color属性用于设置文本颜色。使用Dreamweaver CC设置该属性值时， 单击“设置颜色”按钮 ，即可打开选色板，直接手动调节颜色，所选颜色将 自动生成16进制编码，如图所示。单击选色板中的“吸管”按钮 ，可以选取 Dreamweaver CC内部的颜色，按住该按钮并拖动可选取Dreamweaver CC外 部的颜色。
“打开方式”→“Adobe Dreamweaver 2020”选项，在Dreamweaver CC中打开该文件，如图所示。
使用Dreamweaver CC打开网页文件
02 将鼠标指针置于任一文本标签中，单击“窗口”→“属性”菜单，打开“属性”窗格，如图所示。
“属性”窗格
03 单击其中的“粗体”按钮，即可在代码中插入<strong>标签，在标签内输入“粗体”；单击“斜体”按钮，
“传承经典网”主页的“诗词佳作”模块页面效果
02
任务二 在网页中添加图像
在网页中适当添加图像可以使网页内容更加丰富。 本任务首先介绍使用Dreamweaver CC在网页中 添加图像并设置样式的基础知识，通过实际操作加深 理解。
使用Dreamweaver CC可以直接在网页文档中添加图像，将插入点置于想要插入图像的位置；打开“插入”面 板，单击“Image”按钮，打开“选择图像源文件”对话框；接着在其中选择图像文件；单击“确定”按钮，如图 所示。
网页文本、图像与 多媒体
网页设计与制作 案例教程
项目四
网页设计
项目导读
文本、图像与多媒体是网页中的常见元素。其 中，文本用于传递网页信息；图像与多媒体用于修 饰网页整体效果，增强网页可读性，提高用户体验 感。
本项目将介绍网页文本、图像与多媒体的相关 知识，以及使用Dreamweaver CC在网页中添加这 些元素的方法。
知识目标 能力目标 思政目标
1.熟悉文本标签的基础知识。 2.熟悉图像标签的基础知识。 3.熟悉多媒体标签的基础知识。
1.能够使用Dreamweaver CC为网页添加文本与特殊字符，并设置样式。 2.能够使用Dreamweaver CC为网页添加图像并设置样式。 3.能够使用Dreamweaver CC为网页添加多媒体文件并设置样式。
② 素材文件位于当前文件的下一级文件夹时，需要将文件夹名和文件名一同输入，并将
它们用“/”隔开，如<img src="images/p1.jpg" />。
D
③ 素材文件位于当前文件的上一级文件夹时，需要在文件夹名前加上“../”，每上一级 即增加一个“../”。例如，在如图4-20所示的“page1.html”文档中引用p1.jpg时，使用 相对路径可以写为<img src="../images/p1.jpg">。