网页制作-文本的应用
项目四(网页文本、图像与多媒体)
（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”文件，在弹出的快捷菜单中选择
《网页设计与制作》教案-第3讲 文字的操作一
第3讲文字的操作一1.1教学目标：◆知识目标1.掌握在网页中输入文本、文本编辑。
2.掌握网页文本格式化的操作方法。
3.学会在网页中插入其它特殊文本。
◆技能目标1.在网页设计编辑中熟练引用文本、列表、分段等方法并设置。
2.能够根据页面需要对文本进行编辑设置来美化页面。
3.能够根据页面需要灵活添加其它特殊元素。
◆品质目标培养学生认真细致、勇于创新的精神1.2教学重点：1.掌握在网页中输入文本、文本编辑。
2.掌握网页文本格式化的操作方法。
3.学会在网页中插入其它特殊文本。
1.3 教学难点掌握在网页中输入文本、文本编辑。
掌握网页文本格式化的操作方法。
1.4教学方法：讲练结合，任务驱动、分子任务操练1.5课时安排：2课时1.6教学对象分析：这个班学生具有基本专业技能，不仅仅是要教会他们方法，最重要的是教会他们的规范的动手能力与各种事件多方法的灵活处理能力，在保证全班同学教学进度一致的情况上，培养学生较好的专业基础与创新创作意识。
1.7教学过程：一、任务目标----任务三文本的操作本任务是针对网页的基本元素——文本的相关操作的子任务，旨在通过该任务的实施完成，读者能够熟练掌握编辑网页文本的各种方法，对网页文本的格式化处理有一个清晰的认识，使网页的显示效果更加丰富多彩。
◆完成任务关键步骤➢新建一个网页并保存到站点指定目录。
➢在页面中输入文字。
➢运用Dreamweaver CS6提供的导入功能，把外部文件插入当前页面。
➢在拆分视图中显示并修改标记，了解标记功能。
➢在页面的指定位置插入水平线。
➢在页面的适当位置插入能够自动更新的日期。
➢通过页面属性的设置掌握网页格式的整体。
➢设置网页中文本的项目列表及缩进方式处理。
➢设置网页中文本的格式。
➢设置锚点链接。
二、在网页中插入文本1.进入页面编辑设计视图状态。
在一般情况下，编辑器默认左对齐，光标在左上角闪烁，光标位置就是插入点的位置。
如果要想让文字居中插入，点属性面板居中按钮即可。
网页制作教程第3章
3.2.2 插入图像
(2) 在【选择图像源文 对话框中点选【 件】对话框中点选【文 件系统】单选钮， 件系统】单选钮，在 ch3】 【ch3】文件夹的列表 框中选择要插入的图像 文件，单击【确定】 文件，单击【确定】按 如图3 所示。 钮，如图3-6所示。弹 出【图像标签辅助功能 属性】对话框。 属性】对话框。
3.1.1 添加文本
2. 插入空格 若要在文本中插入空格，可执行下列操作之一。 在菜单栏中选择【插入记录】→【HTML】→ 【特殊字符】→【不换行空格】命令。 按<Ctrl>+<Shift>+<空格>组合键。 在【插入】工具栏的【文本】选项卡中，选 择【字符】下拉列表框中的【不换行空格】命令。
3.1 添 加 文 本
3.1.1 添加文本 3.1.2 设置文本格式
3.1.1 添加文本
1. 插入文字 若要将文字添加到网页文档中，可执行下列操 作之一。 ◆直接在【文档】窗口中输入文字。 ◆从其他应用程序中复制文本，切换到 Dreamweaver，将插入点定位在【文档】窗口的【设 计】视图中，然后在菜单栏中选择【编辑】→【粘 贴】命令。 ◆在菜单栏中选择【编辑】→【选择性粘贴】命 令，弹出【选择性粘贴】对话框，然后选择需要的 选项。
3.3 添 加 声 音
3.3.1 适合网页使用的声音格式 3.3.2 链接到声音文件 3.3.3 嵌入声音文件
3.3.1 适合网页使用的声音格式
MIDI格式 1. MIDI格式 MIDI是 乐器数字接口” MIDI是“乐器数字接口”(Musical Instrument Digital Interface)的简称 其扩展名为MID MIDI记录的不是声音本 的简称， MID。 Interface)的简称，其扩展名为MID。MIDI记录的不是声音本 而是将每个音符记录为一个数字， 身，而是将每个音符记录为一个数字，从而形成声音文件的格 MIDI格式文件声音效果的好与差 格式文件声音效果的好与差， 式。MIDI格式文件声音效果的好与差，与用户计算机声卡质量 有直接关系。很小的MIDI MIDI格式文件就可以提供较长时间的声音 有直接关系。很小的MIDI格式文件就可以提供较长时间的声音 剪辑。 剪辑。 MP3格式 2. MP3格式 MP3格式 是运动图像专家组音频第3 格式， MP3格式，是运动图像专家组音频第3层(Motion Picture Layer-3)，或称为MPEG音频第3 MPEG音频第 Experts Group Audio Layer-3)，或称为MPEG音频第3层的一 种压缩格式，它可使声音文件明显缩小。MP3文件的声音质量 种压缩格式，它可使声音文件明显缩小。MP3文件的声音质量 非常好，如果正确录制和压缩mp3文件，其音质甚至可以和CD mp3文件 非常好，如果正确录制和压缩mp3文件，其音质甚至可以和CD 音乐相媲美。MP3技术用户可以对文件进行 流式处理” 技术用户可以对文件进行“ 音乐相媲美。MP3技术用户可以对文件进行“流式处理”，以 便用户不必等待整个文件下载完成即可收听该文件。 便用户不必等待整个文件下载完成即可收听该文件。
Dreamweaver CS5网页制作项目三
1．插入水平线
定位插入点后，选择“插入”>“HTML”>“水 平线”菜单，即可插入水平线。此外，单击“插 入”面板“常用”类别中的“水平线”按钮 ， 同样可插入水平线。
2．插入特殊字符
如要插入版权符号，可在定位插入点后，选择 “插入”>“HTML”>“特殊字符”>“版权” 菜单，插入版权符号。 如果在“特殊字符”下级菜单中没有找到需要的 字符，可以通过选择该菜单中最下面的“其他字 符”命令，打开“插入其他字符”对话框。
项目三 设置网页内容
任务一 任务二 任务三 任务四 网页基本设置 文本输入与编辑 应用图像 应用动画和多媒体
任务一 网页基本设置
任务说明
新建网页后，一般需要对页面进行一些简单的 设置，主要包括头信息和页面属性，下面就来 学习这些知识。
预ห้องสมุดไป่ตู้知识
一、设置文档头信息
头信息包括网页关检索网页的所有内容，而是只检索网 页的关键字。如果希望自己的网页能够被搜索 引擎检索到，最好把关键字设置为人们经常使 用的词语。
二、制作鼠标经过图像
要制作鼠标经过图像，需要用到两张大小相同，而 内容不同的图像。其中一张作为原始图像，在页面 打开的时候就显示；另一张则作为鼠标经过图像， 在鼠标滑过的时候替换原始图像显示出来。下面我 们来看鼠标经过图像的制作方法。
任务实施
一、为“欧妮雅”网站主页设置图像内容
下面通过为“欧妮雅”网站主页设置图像内容， 来进一步巩固和练习在网页中插入与编辑图像的 操作（具体操作见视频3-3-1）。
预备知识
一、输入文本
在Dreamweaver中输入文本的方法非常简单，只 要将插入点定位在网页的某个位置（如某个表格 单元格内），然后选择输入法输入文本就可以了。 对于大量的外部文本，可利用剪贴板将其拷贝至 网页文档中。
第3章网页文本应用
Dreamweaver网页制作
应用举例——用CSS样式设置文本格式 利用CSS样式为Triangel网页进行文本 格式设置，最终效果如下图所示 。
Dreamweaver网页制作
Dreamweaver网页制作
练习（四）
在Dreamweaver CS3中输入宋词《满江 红》，利用CSS样式设置其格式，参考效果 如下图所示。
Dreamweaver网页制作
提高：操作CSS样式表
页面文本的输入和设置比较简单，其操作与常 用的Word等文字处理软件差不多，但是关于文本样 式的设置和应用则有一些区别。
Dreamweaver网页制作
设置段落格式
设置段落缩进
设置文本对齐
Dreamweaver网页制作
设置段落缩进
将光标插入点定位到需要设置格式的段落 中，在“属性”面板的“格式”下拉列表框 中选择“段落”选项，可通过单击相应的按 钮设置缩进或凸出。
Dreamweaver网页制作
设置文本对齐
Dreamweaver提供了左对齐、居中对 齐、右对齐和两端对齐等4种对齐方式。可 在“属性”面板中进行设置，也可选择“ 文本/对齐”菜单中的对齐命令进行设置。
选择“窗口/CSS样式”命令可在浮动 面板组打开“CSS样式”面板，如下图所 示。
Dreamweaver网页制作
创建CSS样式
创建内部CSS
创建外部CSS
Dreamweaver网页制作
创建内部CSS
内部CSS样式只能用于当前网页，可在 CSS面板中单击鼠标右键，在弹出的快捷 菜单中选择“新建”命令，也可单击面板 右下角的“新建CSS规则”按钮进行创建 。
如何制作HTML网页-制作HTML网页的软件和设计方法
如何制作HTML网页?制作HTML网页的软件和设计方法HTML网页是互联网上最基本的构建单元，它是由HTML语言编写的网页。
HTML语言是一种标记语言，它用于创建网页结构和内容。
HTML网页可以包含文本、图像、音频、视频等多种元素，它们可以通过超链接相互连接，形成一个完整的网站。
那么，如何制作HTML 网页呢?下面，我将为大家介绍制作HTML网页的软件和设计方法。
HTML网页的制作软件1.文本编辑器文本编辑器是最基本的HTML网页制作工具，它可以直接编辑HTML代码。
常用的文本编辑器有Windows自带的记事本、Notepad++、Sublime Text等。
使用文本编辑器制作HTML网页需要把握HTML语言的基本语法和标签，这需要肯定的编程基础。
2.集成开发环境(IDE)集成开发环境是一种集成了多种开发工具的软件，它可以供应代码编辑、调试、编译、运行等多种功能。
常用的IDE有Dreamweaver、Visual Studio Code、Eclipse等。
使用IDE制作HTML网页可以更加便利快捷，但需要肯定的学习成本。
3.在线网页制作工具在线网页制作工具是一种基于云计算的网页制作工具，它可以通过简洁的拖拽操作制作HTML网页。
常用的在线网页制作工具有Wix、WordPress、Weebly等。
使用在线网页制作工具可以快速制作网页，但功能和自由度相对较低。
HTML网页的设计方法1.网页结构设计网页结构设计是指网页的布局和结构设计，它包括网页头部、导航栏、主体内容、侧边栏、底部等部分。
网页结构设计需要考虑用户体验和页面美观度，同时也需要考虑网页的可访问性和SEO优化。
2.网页样式设计网页样式设计是指网页的颜色、字体、排版、图片等方面的设计。
网页样式设计需要考虑网页的整体风格和品牌形象，同时也需要考虑用户体验和页面美观度。
3.网页交互设计网页交互设计是指网页的交互方式和效果设计，它包括鼠标悬停、点击、滚动等交互方式，以及弹出框、下拉菜单、轮播图等交互效果。
第3章 文字在网页中的应用
— 22 —
案例二 制作个人博客子页——设置段落和其他文字样式
2. 相对长度单位
相对长度单位是指网页元素的大小相对于某个参照物来确定，如使用屏幕分辨 率、父元素或浏览器作为参照物等。
长度单位
px %
说 明
px表示像素，当使用它作为文字或其他网页元素的尺寸单位时，屏幕分辨率越大，相同像素 的网页元素就显得越小 以父元素大小的百分比来定义当前文字或其他网页元素的大小，如果没有设定父元素大小， 则相对于浏览器默认字体大小的百分比。一般情况下，浏览器默认的字体大小为16px 以父元素大小的倍数来定义字体大小。例如，若父元素字体大小为12px，则1em就表示12px； 2em就表示12px*2=24px。若没有设定父元素大小，则相ly: "黑体"; font-weight: bolder; color: #FFFFFF; letter-spacing:1em; background-color: #FF0000; padding: 10px; }
— 10 —
/*设置文字字体为黑体*/ /*设置文字加粗*/ /*设置文字颜色为白色*/ /*设置文字之间的字间距为一个文字大小*/ /*设置背景颜色为红色*/ /*设置文字的内边距为10像素*/
说 明 正常粗细（默认）
属性值 lighter 细体
说 明
粗 体 （ 约 为 数 字 700 ） number 加粗体
— 18 —
100 ～ 900 九个级别，数字越大 文字越粗
案例二 制作个人博客子页——设置段落和其他文字样式
5. 设置文字颜色 属性为color，基本语法：color: 颜色的名称|RGB值|十六进制数;。 其属性值可以是颜色的英文名称， 如red、blue；也可以是颜色的RGB 值，如rgb(255,0,0)；还可以是颜色 的十六进制值，如#ff0000。
第4章 编辑与设置网页文本(姜慧霖)
导入外部文本 复制与粘贴文本
:::::《计算机基础与实训教材系列》系列丛书官方网站
/edu :::::
4.1.2 插入特殊字符
在网页文档中常见的特殊符号有版权符号、货币符号、注册商标号以及 直线等。要在网页中插入特殊字符，用户可以在Dreamweaver中执行以下操 作。
4.1 在网页中添加文本
文本是网页中最常见也是应用最广泛的元素之一，是网页内容的核心 部分。在网页中输入文本域在其他应用软件（例如Word、Excel等）中添加 文本一样方便，用户可以在Dreamweaver软件中直接在网页中输入文本，也 可以从其他文档中复制文本，还可以插入水平线和特殊字符等。本节将通过 实例详细介绍在网页中添加文本的具体方法 。
:::::《计算机基础与实训教材系列》系列丛书官方网站
/edu :::::
4.2
设置网页文本属性
设置网页中的文本属性，可以将网页中的文本设置成色彩纷呈、样式 各异的文本，使枯燥的文本更显生动。在Dreamweaver中，用户可以通过编 辑文本设置文本字体、颜色以及对齐方式等属性 。
显示网页文档头部信息
在网页文档头部插入元素
:::::《计算机基础与实训教材系列》系列丛书官方网站
/edu :::::
:::::《计算机基础与实训教材系列》系列丛书官方网站
/edu :::::
本 章 重 点
在网页中插入文本
设置网页文本属性 设置网页文本格式 设置文本段落格式 设置网页头部信息
:::::《计算机基础与实训教材系列》系列丛书官方网站
/edu :::::
高等学校计算机应用规划教材
《网页设计与制作基础教程》
第 四 章
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
网页制作——文本的应用1 网页制作——文本的应用1
文本插入栏
标题
项目、 项目、 编号、 编号、 列表项
实例1 VIP邮箱文本编辑 实例1：VIP邮箱文本编辑
1、文本一般字号 、 大小为12像素 大小为 像素 2、插入文本方法： 、插入文本方法： 1）直接输入 ） 2）从其他文档复制 ） 3、文本格式设置方法： 、文本格式设置方法： 1）通过“属性”面板设置 ）通过“属性” 2）先选中对象，再操作 ）先选中对象， 4、插入不换行空格方法： 、插入不换行空格方法： 1）编辑 首选参数 常规 允 首选参数/常规 ）编辑/首选参数 常规/允 许多个连续的空格 打勾
实例3：宇时E 实例3：宇时E时代
1、插入水平线方法： 、插入水平线方法： 1）插入 ）插入/html/水平线 水平线 2、编辑水平线方法： 、编辑水平线方法： 1）“属性”面板 ） 属性” 2）修改颜色，写代码 ）修改颜色，
3、插入日期方法： 、插入日期方法： 1）插入 日期 ）插入/日期 2）选择格式 ） 3）根据实际，选择是 ）根据实际， 否自动更新日期
实例2 实例2：天长地久婚纱网站
要求：参照效果图， 要求：参照效果图，实现文本 的插入。 的插入。 1、标题，正文字号大小为 、标题，正文字号大小为12 像素 2、网页底部的网页导航栏需 、 由同学们自己直接输入 3、特别注意最后一行符号 、 “©”的输入 的输入 特殊符号的插入方法： 特殊符号的插入方法： 1）定位 ） 2）“文本”插入栏中的 ） 文本”
代码中涉及的几个新标签
• <p>标签：分段。Deramweaver中产生的方 法：按【Enter】键 • <br/>标签：换行。Deramweaver中产生的 方法：按【Shift】+【Enter】键 • <hr> • <hr color=“#123456”>
堂上作业
要求： 要求：与效果图一置
结