第4讲 使用HTML设置文本和图像
合集下载
第四讲 工具
第四讲 工具
一、修饰工具： 1、污点修复画笔（J） 、污点修复画笔（J 1）选择后对较小的瑕疵进行修复（画笔的 直径越大，误差会越大） 选项中最常用命令是画笔的笔触大小和笔 触硬度（从左数第二个按钮）一般可以使用 快捷键进行操作
2、修复画笔工具： 选择后使用Alt件在要修复的位置最接近的 选择后使用Alt件在要修复的位置最接近的 位置的地方单击进行拾取颜色，然后以单击 的方式在其位置进行修复 注：使用时尽量以单击方式操作，这样拾 取点不会动；在进行修复的时候要适当的进 行拾取点的更换，以配合不同补工具： 首先选择要修补的区域（制作选区），然 后将鼠标定位于选区内部，拖拽到需要匹配 的区域上即可。 注：工具使用之初，相当于普通套索工具 进行绘制选区，我们可以配合其他任何选取 工具进行绘制后，然后选择此工具拖拽操作。
4、颜色替换工具： 颜色替换工具：能够快速绘制图像中的一个 区域，并改变其颜色。 颜色替换工具不适用于“位图”、 颜色替换工具不适用于“位图” “索引”或“多通道”颜色模式的图像。选项工具的选项栏 索引” 多通道” 决定替换颜色工具如何影响颜色 （1）色相：改变区域的基本颜色，不改变亮度、饱和度。 （2）饱和度：使一个区域的颜色和前景色一样鲜艳，但 不改变区域的基本颜色亮度。将区域改变为黑白色，只要前 景色选取黑、白色即可。 （3）颜色：可以同时改变基本颜色和颜色的饱和度，但 不能改变亮度。 （4）亮度：改变区域的亮度，以匹配绘图时所用颜色的 亮度，不能改变颜色。此选项适用于修复动物眼中的绿眼或 橙眼。
5、仿制图章工具：s 、仿制图章工具：s 1）作用：可将一副图像部分或全部连续 复制到同意或另外一副图像中，并且不能与 被复制的图像的底色相容。 2）使用：首先按住ALT键在一个区域上点 ）使用：首先按住ALT键在一个区域上点 取一个取样点，然后再放到需要修改的区域 点击复制即可。
一、修饰工具： 1、污点修复画笔（J） 、污点修复画笔（J 1）选择后对较小的瑕疵进行修复（画笔的 直径越大，误差会越大） 选项中最常用命令是画笔的笔触大小和笔 触硬度（从左数第二个按钮）一般可以使用 快捷键进行操作
2、修复画笔工具： 选择后使用Alt件在要修复的位置最接近的 选择后使用Alt件在要修复的位置最接近的 位置的地方单击进行拾取颜色，然后以单击 的方式在其位置进行修复 注：使用时尽量以单击方式操作，这样拾 取点不会动；在进行修复的时候要适当的进 行拾取点的更换，以配合不同补工具： 首先选择要修补的区域（制作选区），然 后将鼠标定位于选区内部，拖拽到需要匹配 的区域上即可。 注：工具使用之初，相当于普通套索工具 进行绘制选区，我们可以配合其他任何选取 工具进行绘制后，然后选择此工具拖拽操作。
4、颜色替换工具： 颜色替换工具：能够快速绘制图像中的一个 区域，并改变其颜色。 颜色替换工具不适用于“位图”、 颜色替换工具不适用于“位图” “索引”或“多通道”颜色模式的图像。选项工具的选项栏 索引” 多通道” 决定替换颜色工具如何影响颜色 （1）色相：改变区域的基本颜色，不改变亮度、饱和度。 （2）饱和度：使一个区域的颜色和前景色一样鲜艳，但 不改变区域的基本颜色亮度。将区域改变为黑白色，只要前 景色选取黑、白色即可。 （3）颜色：可以同时改变基本颜色和颜色的饱和度，但 不能改变亮度。 （4）亮度：改变区域的亮度，以匹配绘图时所用颜色的 亮度，不能改变颜色。此选项适用于修复动物眼中的绿眼或 橙眼。
5、仿制图章工具：s 、仿制图章工具：s 1）作用：可将一副图像部分或全部连续 复制到同意或另外一副图像中，并且不能与 被复制的图像的底色相容。 2）使用：首先按住ALT键在一个区域上点 ）使用：首先按住ALT键在一个区域上点 取一个取样点，然后再放到需要修改的区域 点击复制即可。
第4讲 Dreamweaver中网页元素的插入与运用
点击 设置对话框 图像名称：不能为空， 随便起一个，生成的JS 代码需要使用。 它会将鼠标经过的图像 提前下载到浏览器，以 加快显示速度。 <a href ="" 生成的HTML 结 论：鼠标经过的图像 onmouseout="MM_swapImgRestore()" 本质就是对原始图像加 onmouseover="MM_swapImage('Image2 ','','logo.jpg', 上链接，并施加JS特效 1)"><img src="main.jpg"alt="这是图像的替换文本" 而形成的特殊效果。 name="Image2" width="323" height="141" border="0" id="Image2" /> </a>
本节重点
在网页中插入和编辑文本 在网页中插入和编辑图像 在网页中插入和编辑各种Flash 元素（难点） 在网页中插入音频和视频 在网页中插入和编辑各种超链接（难点） 相对路径和绝对路径（难点） 图像热点链接（ 难点）
1 文本
1.1 认识【文本】工具栏
文本是网页中最常见、运用最广泛的元素之一,是网 页内容的 核心部分。在网页中添加文本与在Word等文字处 理软件中添加文本一样方便 ， 可以直接输入文本,也可从 其他文档中复制文本，还可以插入水平线和特殊字符等。 使用【文本】工具栏、可以快速插入各种类型的文本 。 单击插入栏上的【文本】选项卡，打开【文本】插入栏。
3.5 插入Flash视频
3 多媒体
3.6 插入Flash视频
本节重点
在网页中插入和编辑文本 在网页中插入和编辑图像 在网页中插入和编辑各种Flash 元素（难点） 在网页中插入音频和视频 在网页中插入和编辑各种超链接（难点） 相对路径和绝对路径（难点） 图像热点链接（ 难点）
1 文本
1.1 认识【文本】工具栏
文本是网页中最常见、运用最广泛的元素之一,是网 页内容的 核心部分。在网页中添加文本与在Word等文字处 理软件中添加文本一样方便 ， 可以直接输入文本,也可从 其他文档中复制文本，还可以插入水平线和特殊字符等。 使用【文本】工具栏、可以快速插入各种类型的文本 。 单击插入栏上的【文本】选项卡，打开【文本】插入栏。
3.5 插入Flash视频
3 多媒体
3.6 插入Flash视频
第4讲 文本操作
视图——风格和参考线——显示框架网格SHIFT+CTRL+E
议题2:设置文本框属性
1、文本框串接（用选择工具）
文本流标签
2在改变文 本框大小时保持栏宽不 变．缩放框的大小会改 变分栏数目，而不是栏
的宽度．
3、文字——用假字填充
议题3、文本绕排
第 四 讲
格 式 化 排 版( 一 )
教 学 目 的 与 要 求
掌握文本编辑的方法
熟悉文本绕排
了解文本框的概念并掌握操作的方法 掌握缩排与定位操作 掌握段落样式和字符样式的操作 了解吸管工具的使用
教 学 重 难 点
文本框的使用 路径文字的创建与编辑
字符调板、段落调板对字段的格式化（重点） 缩排与定位的使用、样式（难点）
创建打下基础。
理论作业：
1、字符网络可以被文本遮住
2、Indesign不支持置入Excel文件 3.字形的快捷键是 A
ctrl+F11 ctrl+F8 ctrl+F12
4.实现字数统计的调板是 “字符”调板 调板
ctrl+F9
“段落”调板 “控制”
B
“信息”调板
5.关于”首字下沉” :
议题1:如何实现闪电排文？
文本载入文本有:手动、半自动、自动3种控制方式
半自动排文：按Alt+单击，文本流入一栏之后，光标会自动 变成载入文本图符．
自动排文：按Shift键，文字以鼠标点位置的参考线为基准进
行排列。如一栏或一页不能容纳所有文字，此文件会自动 加页。
注：如按Shift+Alt则不会添中加新页面
D
首字下沉只能下沉一个字
议题2:设置文本框属性
1、文本框串接（用选择工具）
文本流标签
2在改变文 本框大小时保持栏宽不 变．缩放框的大小会改 变分栏数目，而不是栏
的宽度．
3、文字——用假字填充
议题3、文本绕排
第 四 讲
格 式 化 排 版( 一 )
教 学 目 的 与 要 求
掌握文本编辑的方法
熟悉文本绕排
了解文本框的概念并掌握操作的方法 掌握缩排与定位操作 掌握段落样式和字符样式的操作 了解吸管工具的使用
教 学 重 难 点
文本框的使用 路径文字的创建与编辑
字符调板、段落调板对字段的格式化（重点） 缩排与定位的使用、样式（难点）
创建打下基础。
理论作业：
1、字符网络可以被文本遮住
2、Indesign不支持置入Excel文件 3.字形的快捷键是 A
ctrl+F11 ctrl+F8 ctrl+F12
4.实现字数统计的调板是 “字符”调板 调板
ctrl+F9
“段落”调板 “控制”
B
“信息”调板
5.关于”首字下沉” :
议题1:如何实现闪电排文？
文本载入文本有:手动、半自动、自动3种控制方式
半自动排文：按Alt+单击，文本流入一栏之后，光标会自动 变成载入文本图符．
自动排文：按Shift键，文字以鼠标点位置的参考线为基准进
行排列。如一栏或一页不能容纳所有文字，此文件会自动 加页。
注：如按Shift+Alt则不会添中加新页面
D
首字下沉只能下沉一个字
第四讲路程图像时间图像问题专练 (1)
5. 提高两种能力
两辆汽车在同一平直公路上同时出发，其位置 s 与时 间 t 的关系如图所示。由图像可知，甲车的速度为
30 450 ________m /s，当 t1＝50 s 时，甲、乙两车相距________m 。
6. 提高两种能力
课外活动时，小明和小华均在操场上沿直线进 行跑步训练。在某次训练中，他们通过的路程 和时间的关系如图所示，则下列说法中正确的 是（ ） D
A．两人都做匀速直线运动 B．两人都不是做匀速直线 运动 C．前2s内，小明跑得较快 D．全程中，两人跑步的平 均速度相同
7. 提高两种能力 某小组同学分别测出了甲、乙、丙电动小车做
直线运动的路程和时间，并依据数据做出了相应的路程—时 间图像，如图10所示。观察甲、乙、丙车的图像，回答下列 问题： (1)观察分析图14丙车图像可知，丙车做匀速直线运动
第四讲 路程图像时Βιβλιοθήκη 图像问题专练1. 提高两种能力
你知道下面左右图像对应的甲乙两车分别做什么运动吗？
V/m/s
2. 提高两种能力 请根据图像判断物体的运动情况：
V
V
S
S
t
t
t
t
匀速直线运动 变速直线运动 静止 (速度不变) (速度增大) (路程不变)
匀速直线运 动 (速度不变)
3. 提高两种能力
9. 提高两种能力 根据图中所给A、B两物体s-t图象，判断对应的v-t图象那个是 正确的（ ）
B A
C
D
如图所示，是一个骑自行车的人与一个跑步的 人运动的路程与时间变化的图线，根据该图线能 够获得合理的信息有： 示例：信息一，他们同时开始运动； 信息二：骑车者和跑步者都在做；匀速直线运动 信息二：骑车者的速度比跑步者。速度快
第四讲 文本标注
| Object | Text |
Scale 工具栏方式：
3.4
对正点修改
该命令能够在不改变文字位置的前提 下，对文字对象的对正方式：
命令方式：JUSTIFYTEXT 菜单方式：Modify
| Object | Text |
Justify 工具栏方式：
3.5
拼写检查
该命令能够自动检测到文字的拼写或 语法错误，给出修改建议，并且可用建议 形式自动修改拼写错误：
启动表格样式的方法： 命令方式：TABLESTYLE 菜单方式：Format | Tablestyle 工具栏方式：[样式]工具栏上
2)创建及修改空白表格
用TABLE命令创建空白表格，空白表格的外观由当前 表格样式决定。使用该命令时，用户要输入的主要参数 有“行数”、“列数”、“行高”及“列宽”等。
2.1
单行文字
单行文字在一次操作中也可以输入多行，但 是每一行是一个单独的文字对象。 启动单行文字的方法： 命令方式：TEXT 或 DTEXT 菜单方式：Draw | Text | Single Line Text 工具栏方式：
1）添加文字
标注单行文字需要输入的参数有：文字起点、字高、 文字旋转角度和文字内容。 例：在“9-3.dwg”，用DTEXT命令在图形中放置一 些单行文字，如图所示
1.1 新建、删除文字样式 1.2 字体设置 字高如设为0，以后每次进行文字标注 时，都要求输入字高；如不为0，系统自动 以该字高标注。 1.3 文字效果
2 文字标注命令
AutoCAD提供了两种创建文字的方法： 单行文字和多行文字。对简短的输入项使
用单行文字，对带有内部格式的较长的输
入项使用多行文字。
4 使用修订云线给图形添加注释
网页设计HTML代码
4.<title></title>使用过浏览器的人可能都会注意到浏览器窗口最上边蓝色部分显示的文本信息，那些信息一般是网页的“主题”，要将您的网页的主题显示到浏览器的顶部其实很简单，只要在<title></title>标志对之间加入您要显示的文本即可。
注意：<title></title>标志对只能放在<head></head>标志对之间。
下面是一个综合的例子，仔细阅读，您便可以了解以上各个标志对在一个Html文档中的布局或所使用的位置。
例1 Html文档中基本标志的使用<html><head><title>显示在浏览器最上边蓝色条中的文本</title></head><body bgcolor="red" text="blue"><p>红色背景、蓝色文本</p></body></html>返回教程二、格式标志1.<p></p>2.<br>3.<blockquote></blockquote>4.<dl></dl><dt></dt><dd></dd>5.<ol></ol><ul></ul><li></li>6.<div></div>上一个教程中我们讲了Html文档的基本标志，但我们还不知道怎样在浏览器中显示文本之类的东西，这正是我们在教程二中将要谈到的。
在学习之前，必须强调一下，我们这个教程中所讲的格式标志统统都是用于<body></body>标志对之间的。
数字印前技术-第4讲 印刷图像信息处理
数字加网
所谓的数字加网就是采用无形的电子或 数字网屏完成网点的形成，其主要工具 是光栅图像处理器（Raster Image Processor，RIP），它可根据图文处理好 的信息自动对网点的大小、网点的角度、 网点的线数加以确定。
印刷分色与合成
彩色印刷品不同于单色印刷品的地方就 在于颜色再现。原稿上的颜色，是利用 光和色之间的关系，被再现在印张上的。
圆形网点无论是在亮调还是在中间调的 情况下，网点之间都是独立的，只有暗 调的情况下才有部分相连。
菱形网点综合了方形网点的硬调和圆形 网点的柔调特性，色彩过渡自然，适合 一般图像、照片的表现。
网点线数
网点线数是指单位长度（每英寸或每厘 米）内所排列的网点个数，用LPI或 LPCM表示。在习惯上也称之为“网屏线 数”或“网目数”。目前常用网点线数。
如果能将印版上的图文部分分割成无数 面积大小不同的小点，不同面积大小的 点着墨后，着墨的多少也就不同，在视 觉效果上也就表现出了不同的阶调层次。 同样，着墨的多少，也反映出了色彩的 千变万化。这些小点在印刷上称之为网 点，所以印刷上一定要采用网点来印刷。
加网方式
玻璃网屏加网 玻璃网屏是由垂直相交的等宽的黑线和
印张上单位面积内，点子的总面积小， 油墨复盖率低，反射光线多，吸收光线 少，给人以明亮的感觉，这样原稿图像 的浓淡层次，在印张上便可得到再现。
调幅加网（AM）
由于网屏的网孔呈现有序的排列，因此， 形成的网点在空间的分布不仅有规律， 而且单位面积内网点的数量是衡定不变 的，原稿上图像的明暗层次，依靠每个 网点面积的变化，在印刷品上得到再现。
彩色图像原稿的颜色要再现在印刷品上， 必须先经过颜色的分解（分色），再进 行颜色的合成（印刷）。
网页设计与制作PPT课件
1.1 网页和网站
1.1.3 网页的基本功能
1、媒介的作用。使用者与信息之间的媒介。 一方面是发布者，功能是发布信息；另一方面 是浏览者，功能是提供浏览的信息，通过浏览 网页找寻需要的信息。
2、互动的作用。浏览者与网页制作单位之 间互动的窗口，可以单向或双向传递信息。
3、传输的作用。作为传输各种电子文件或 信息之用，如下载说明书、更新文件、驱动程 序等。
超链接的标志一般有：文本、图像、热区 三种。要注意的是，所有超链接标志均应清晰 无误地向浏览者标识出来，让人一看就知道。
1.2 网页中的主要元素
1.2.4其他的基本要素
除上述几种要素之外，在网页上经常使用 的还有动画、视频、声音等各种信息的形式。
1．动画。目前网络上常用的动画类型有 gif和Flash动画两种。
第2讲 HTML语言基础
$ [知识目标]
了解HTML文件的基本结构 掌握HTML中文本的编辑及图像的语法 掌握HTML中各种设置超级链接的语法 掌握HTML中表格和框架的基本语法
8 [能力目标]
掌握进行文本及图像的编辑操作 掌握创建各种超级链接的操作 能够编写简单的HTML网页 掌握HTML文件中表格和框架的使用
1.4 网页设计的基本流程
1.4.3网页的测试
1．浏览器兼容性测试。目前浏览器有： Internet Explorer与Netscape两大主流浏览器，二 者对HTML和CSS等语法的支持度是不同的。在 Dreamweaver中提供了可以检查网页中是否含有某版本浏 览器不能识别的语法功能，设计者可以借助其进行检查。
1.4 网页设计的基本流程
1.4.4网页上传和发布
网页设计好，必须把它发布到互联网上， 否则网站形象仍然不能展现出去。发布的服务 器可以是远程，也可以是本地。如果是发布到 互联网上，要先申请域名和主页空间，然后再 利用专用软件（如：CuteFTP）上传，FTP有很 多种软件，最著名的是 CuteFTP 和 LeapFTP， 也可以用Dreamweaver内置的FTP上传。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
回顾内容:
HTML文件的基本结构是怎样的? HTML文件的基本结构是怎样的? 文件的基本结构是怎样的 HTML标记及其属性如何命名 标记及其属性如何命名? HTML标记及其属性如何命名? <!DOCTYPE> 头部标记 主体标记<body> 主体标记<body>
第4讲 使用HTML 4 HTML设置文本和图像 HTML
预格式化标记示例
5） 水平线标记 <hr>
水平线用于段落与段落之间的分隔， 水平线用于段落与段落之间的分隔，使文 档结构更加清晰， 档结构更加清晰，使文字的编排更加整齐 基本语法 <hr> 常用属性
属 width size align noshade color 性 水平线高度,单位为像素 水平线对齐方式,取值left|center|right,默认居中对齐 默认的水平线的空心立体效果改设为实心的不带阴影 的效果 水平线颜色,显示颜色时，当水平线将显示成实心 描 述 设置水平线宽度,单位为像素或浏览器窗口的%
Pictures\ Pictures\Img270819276.jpg
站点文件系统结构示意
Root
F_01
F_02
F_03
f
F01
F02
b.htm
c.htm
car.gif
d.htm
hat.gif
为起点的路径： 同级目录) 以a为起点的路径：cup.gif(同级目录 为起点的路径 同级目录 为起点的路径： 下一级目录) 以b为起点的路径：F01/hat.gif(下一级目录 为起点的路径 下一级目录 为起点的路径： 不同级目录) 以d为起点的路径：../F02/car.gif(不同级目录 为起点的路径 不同级目录
定义列表的嵌套 无序列表和有序列表的嵌套
这种嵌套类型是最常见的， 这种嵌套类型是最常见的，它主要是通过在 一种列表中的列表项中嵌套另一种列表的定 义来实现
无序列表和有序列表嵌套示例
4.4 图片标记
网页中的常用图片格式
GIF（ Format， - GIF（Graphics Interchange Format，图形交换 格式） 格式）
PNG（ Graphics， - PNG（Portable Network Graphics，可移植网 络图形） 络图形）
既融合了GIF格式透明显示的颜色，又具有JPEG 既融合了GIF格式透明显示的颜色，又具有JPEG GIF格式透明显示的颜色 理精美图像的优势， 处 理精美图像的优势，是逐渐流行的网络图像 格式， 格式，但目前浏览器对其支持并不一致
在源代码中特殊字符使用其对应的符号码代替. 在源代码中特殊字符使用其对应的符号码代替.
特殊符号 空格 “ & < > • X § ￠ ￥ ￡ © ™
符号码 " & < > · × § ¢ ¥ £ © ® &trade；
2）标题字标记
所谓标题字就是以某几种固定的字号去 显示文字， 显示文字，一般用于强调段落要表现的内 容或作为文章的标题 具有加粗显示并与下一行产生一空行的特 性 根据字号的大小分为六级，分别用标记 根据字号的大小分为六级， H1~H6表示 表示， H1~H6表示，字号的大小随数字增大而 递减
标 记 <h1>……</h1> <h2>……</h2> <h3>……</h3> <h4>……</h4> <h5>……</h5> <h6>……</h6>
文字的修饰标记 字体标记
1）文字内容
网页中涉及到的文字主要包括:普通文字、 网页中涉及到的文字主要包括:普通文字、 特殊符号以及页面的注释语句 普通文字的输入: 普通文字的输入:
直接在<body>和</body>标记之间输入 直接在<body>和</body>标记之间输入 <body>
特殊字符的输入: 特殊字符的输入:
有序列表前导符和起始编号设置示例
ul> 2) 无序列表<ul> 常用无序列表如下: 常用无序列表如下:
项目列表<ul> 项目列表<ul>
前导符默认为实心圆点
2）项目列表<ul> <ul>
基本语法
<ul> ul> <li>项目一</li> li>项目一</li> </li li>项目二</li> </li <li>项目二</li> …… </ul ul> </ul>
指多于一级层次的列表， 指多于一级层次的列表，一级列表项下面 可以存在二级项目、三级项目等 可以存在二级项目、
1）有序列表<ol> <ol>
基本语法
<ol> <li>项目一 项目一</li> <li>项目一</li> <li>项目二 项目二</li> <li>项目二</li> …… </ol>
有序列表标记示例
插入图片基本语法
基本语法
src= file_name file_name”> <img src=“file_name >
常用属性
属 性 描 述 描 align属性值 述 src 指定图片源文件所在路径(必设属性) baseline、bottom、 图片底端与文字底端对齐 baseline、bottom、图片底端与文字底端对齐 absbottom alt 设置提示文字 width height hspace vspace align align border
4.1 段落标记 4.2 文字标记 4.3 列表标记 4.4 图片标记
4.1 段落标记
网页中对文字要安排文字位置需要通过 特定的HTML标记来完成。 HTML标记来完成 特定的HTML标记来完成。 HTML文件中无论输入多少个空格 文件中无论输入多少个空格（ HTML文件中无论输入多少个空格（按 空格键）均视为一个空格；换行（ 空格键）均视为一个空格；换行（按回 车键）也无效。 车键）也无效。
1)段落标记<p> <p> 1)
所谓段落， 所谓段落，指得是一段格式上统一的文本 基本语法
标 记 描 述 属性 属性取值 left align center right
<p>…</p> 双标记
语法解释
从<p>开始处创建一个段落，段落与上下 <p>开始处创建一个段落， 开始处创建一个段落
文都有一空行的间隔
插入图片综合示例
文件路径
路径分为以下两种情况：
绝对路径：先指明最高级别的层次，然后依次 向下说明。 例：
/20100315/Img2708192 76.jpg D:\Pictures\ D:\Pictures\Img270819276.jpg
相对路径：从自己的位置出发依次说明到达目 标文件的路径。 例：
描 述 属性 属性取值 一级标题 left（默认 值） 二级标题 三级标题 align center 四级标题 五级标题 六级标题 right
标题字标记综合示例
3）文字的修饰标记
用于对文字进行格式化 常用的修饰标记如下： 常用的修饰标记如下：
标 记 <b>…</b> <i>…</i> <sup>…</sup> <sub>…</sub> <big>…</big> <small>…</small> <u>…</u> <s>…</s> <address>…<address> 描 述
常用属性
属性 type 描 述 属性值 设置项目 disc 前导符为●（默认前导符） 列表的前 circle 前导符为○ 导符 square 前导符为■
项目列表前导符设置示例
3） 嵌套列表
嵌套列表指的是多于一级层次的列表， 嵌套列表指的是多于一级层次的列表， 一级列表项下面可以存在二级项目、 一级列表项下面可以存在二级项目、 三级项目等 嵌套列表类型： 嵌套列表类型：
• • •
有序列表 无序列表 嵌套列表
有序列表
以数字或字母等表示顺序的符号为项目 前导符来排列列表项目的列表。例如: 前导符来排列列表项目的列表。例如:
无序列表
以无顺序的符号（ 以无顺序的符号（●、○、■等）为项目前导 符来排列列表项目或没有任何符号作项目 前导符的列表。 前导符的列表。
嵌套列表
水平线标记示例
4.2 文字标记
文字标记主要用于设置网页中的所有 有关文字方面的内容， 有关文字方面的内容，具体包括普通 文字、特殊字符、标题字、 文字、特殊字符、标题字、字体以及 文字格式等方面的设置
表4-1 常用文字标记
标 文字内容 标题字标记 记 描 述
包括普通文字、 包括普通文字、空格及特殊符号等 以某几种固定的字号显示文字， 以某几种固定的字号显示文字，共 分为六个级别（H1~H6）， ），对应着 分为六个级别（H1~H6），对应着 六种字号 通过这些修饰标记， 通过这些修饰标记，可设定文字的 不同格式，如粗体、 不同格式，如粗体、斜体等 设定文字的字体、 设定文字的字体、字号及颜色等
HTML文件的基本结构是怎样的? HTML文件的基本结构是怎样的? 文件的基本结构是怎样的 HTML标记及其属性如何命名 标记及其属性如何命名? HTML标记及其属性如何命名? <!DOCTYPE> 头部标记 主体标记<body> 主体标记<body>
第4讲 使用HTML 4 HTML设置文本和图像 HTML
预格式化标记示例
5） 水平线标记 <hr>
水平线用于段落与段落之间的分隔， 水平线用于段落与段落之间的分隔，使文 档结构更加清晰， 档结构更加清晰，使文字的编排更加整齐 基本语法 <hr> 常用属性
属 width size align noshade color 性 水平线高度,单位为像素 水平线对齐方式,取值left|center|right,默认居中对齐 默认的水平线的空心立体效果改设为实心的不带阴影 的效果 水平线颜色,显示颜色时，当水平线将显示成实心 描 述 设置水平线宽度,单位为像素或浏览器窗口的%
Pictures\ Pictures\Img270819276.jpg
站点文件系统结构示意
Root
F_01
F_02
F_03
f
F01
F02
b.htm
c.htm
car.gif
d.htm
hat.gif
为起点的路径： 同级目录) 以a为起点的路径：cup.gif(同级目录 为起点的路径 同级目录 为起点的路径： 下一级目录) 以b为起点的路径：F01/hat.gif(下一级目录 为起点的路径 下一级目录 为起点的路径： 不同级目录) 以d为起点的路径：../F02/car.gif(不同级目录 为起点的路径 不同级目录
定义列表的嵌套 无序列表和有序列表的嵌套
这种嵌套类型是最常见的， 这种嵌套类型是最常见的，它主要是通过在 一种列表中的列表项中嵌套另一种列表的定 义来实现
无序列表和有序列表嵌套示例
4.4 图片标记
网页中的常用图片格式
GIF（ Format， - GIF（Graphics Interchange Format，图形交换 格式） 格式）
PNG（ Graphics， - PNG（Portable Network Graphics，可移植网 络图形） 络图形）
既融合了GIF格式透明显示的颜色，又具有JPEG 既融合了GIF格式透明显示的颜色，又具有JPEG GIF格式透明显示的颜色 理精美图像的优势， 处 理精美图像的优势，是逐渐流行的网络图像 格式， 格式，但目前浏览器对其支持并不一致
在源代码中特殊字符使用其对应的符号码代替. 在源代码中特殊字符使用其对应的符号码代替.
特殊符号 空格 “ & < > • X § ￠ ￥ ￡ © ™
符号码 " & < > · × § ¢ ¥ £ © ® &trade；
2）标题字标记
所谓标题字就是以某几种固定的字号去 显示文字， 显示文字，一般用于强调段落要表现的内 容或作为文章的标题 具有加粗显示并与下一行产生一空行的特 性 根据字号的大小分为六级，分别用标记 根据字号的大小分为六级， H1~H6表示 表示， H1~H6表示，字号的大小随数字增大而 递减
标 记 <h1>……</h1> <h2>……</h2> <h3>……</h3> <h4>……</h4> <h5>……</h5> <h6>……</h6>
文字的修饰标记 字体标记
1）文字内容
网页中涉及到的文字主要包括:普通文字、 网页中涉及到的文字主要包括:普通文字、 特殊符号以及页面的注释语句 普通文字的输入: 普通文字的输入:
直接在<body>和</body>标记之间输入 直接在<body>和</body>标记之间输入 <body>
特殊字符的输入: 特殊字符的输入:
有序列表前导符和起始编号设置示例
ul> 2) 无序列表<ul> 常用无序列表如下: 常用无序列表如下:
项目列表<ul> 项目列表<ul>
前导符默认为实心圆点
2）项目列表<ul> <ul>
基本语法
<ul> ul> <li>项目一</li> li>项目一</li> </li li>项目二</li> </li <li>项目二</li> …… </ul ul> </ul>
指多于一级层次的列表， 指多于一级层次的列表，一级列表项下面 可以存在二级项目、三级项目等 可以存在二级项目、
1）有序列表<ol> <ol>
基本语法
<ol> <li>项目一 项目一</li> <li>项目一</li> <li>项目二 项目二</li> <li>项目二</li> …… </ol>
有序列表标记示例
插入图片基本语法
基本语法
src= file_name file_name”> <img src=“file_name >
常用属性
属 性 描 述 描 align属性值 述 src 指定图片源文件所在路径(必设属性) baseline、bottom、 图片底端与文字底端对齐 baseline、bottom、图片底端与文字底端对齐 absbottom alt 设置提示文字 width height hspace vspace align align border
4.1 段落标记 4.2 文字标记 4.3 列表标记 4.4 图片标记
4.1 段落标记
网页中对文字要安排文字位置需要通过 特定的HTML标记来完成。 HTML标记来完成 特定的HTML标记来完成。 HTML文件中无论输入多少个空格 文件中无论输入多少个空格（ HTML文件中无论输入多少个空格（按 空格键）均视为一个空格；换行（ 空格键）均视为一个空格；换行（按回 车键）也无效。 车键）也无效。
1)段落标记<p> <p> 1)
所谓段落， 所谓段落，指得是一段格式上统一的文本 基本语法
标 记 描 述 属性 属性取值 left align center right
<p>…</p> 双标记
语法解释
从<p>开始处创建一个段落，段落与上下 <p>开始处创建一个段落， 开始处创建一个段落
文都有一空行的间隔
插入图片综合示例
文件路径
路径分为以下两种情况：
绝对路径：先指明最高级别的层次，然后依次 向下说明。 例：
/20100315/Img2708192 76.jpg D:\Pictures\ D:\Pictures\Img270819276.jpg
相对路径：从自己的位置出发依次说明到达目 标文件的路径。 例：
描 述 属性 属性取值 一级标题 left（默认 值） 二级标题 三级标题 align center 四级标题 五级标题 六级标题 right
标题字标记综合示例
3）文字的修饰标记
用于对文字进行格式化 常用的修饰标记如下： 常用的修饰标记如下：
标 记 <b>…</b> <i>…</i> <sup>…</sup> <sub>…</sub> <big>…</big> <small>…</small> <u>…</u> <s>…</s> <address>…<address> 描 述
常用属性
属性 type 描 述 属性值 设置项目 disc 前导符为●（默认前导符） 列表的前 circle 前导符为○ 导符 square 前导符为■
项目列表前导符设置示例
3） 嵌套列表
嵌套列表指的是多于一级层次的列表， 嵌套列表指的是多于一级层次的列表， 一级列表项下面可以存在二级项目、 一级列表项下面可以存在二级项目、 三级项目等 嵌套列表类型： 嵌套列表类型：
• • •
有序列表 无序列表 嵌套列表
有序列表
以数字或字母等表示顺序的符号为项目 前导符来排列列表项目的列表。例如: 前导符来排列列表项目的列表。例如:
无序列表
以无顺序的符号（ 以无顺序的符号（●、○、■等）为项目前导 符来排列列表项目或没有任何符号作项目 前导符的列表。 前导符的列表。
嵌套列表
水平线标记示例
4.2 文字标记
文字标记主要用于设置网页中的所有 有关文字方面的内容， 有关文字方面的内容，具体包括普通 文字、特殊字符、标题字、 文字、特殊字符、标题字、字体以及 文字格式等方面的设置
表4-1 常用文字标记
标 文字内容 标题字标记 记 描 述
包括普通文字、 包括普通文字、空格及特殊符号等 以某几种固定的字号显示文字， 以某几种固定的字号显示文字，共 分为六个级别（H1~H6）， ），对应着 分为六个级别（H1~H6），对应着 六种字号 通过这些修饰标记， 通过这些修饰标记，可设定文字的 不同格式，如粗体、 不同格式，如粗体、斜体等 设定文字的字体、 设定文字的字体、字号及颜色等