模块二网页排版技术 单元2：文本元素的应用 一、简单个人网页分析 ←→C©fle://C:/test2/111.html ☆ 欢迎光临我的个人网站 自我金纽丨联系方式丨动画欣赏丨我的简历 自我介绍： :雅韵避 ·工作地点：四川省广元市 联系方式： 1. QQ: 21376712312 2 邮编：628123 地址：四川省广元市雪峰 4. 邮箱：xw7163.nm 回到顺部 版视所有：四川信息职业技术学院信息工程系02012-0的-283：10W 图2-2-1简单个人网页效果图 问题1：在该网页中大家看到了什么？ ·不同颜色、不同大小、摆放在不同位置的文字 ·位置不同、大小不同的灰色线条 ·项目列表 ·特殊字符等 问题2：这些元素是如何制作的呢？
模块二 网页排版技术 单元 2：文本元素的应用 一、简单个人网页分析 图 2-2-1 简单个人网页效果图 问题 1：在该网页中大家看到了什么？ • 不同颜色、不同大小、摆放在不同位置的文字 • 位置不同、大小不同的灰色线条 • 项目列表 • 特殊字符等 问题 2：这些元素是如何制作的呢？
二、Dreamweaver中简单个人网页文本元素的编辑 1.在上节课新建的网页的设计视图的工作区域空白处输入文字“欢 迎光临我的个人网页”，选中文字，在Dreamweaver下方的属性面板上 设置其段落属性为标题1”，对其方式为“”，修改其颜色为“红色”， 如图2-2-2所示。 Dw 设计器，口 0 cSLive回x 插入改M格式O)命9站点(S)口(M帮助(H indexhtm!x C\Users Seven\Desktop\index.html 代码拆分设计实时代码三4实时视图检查③.8.C标题：无标题文档 Adobe BrowserLab 插入 ◆8个地址：f台1/∥/C/sers/Swn/Dosktop/indw.htnl CS样式AP元球 全部当前 欢迎光临我的个人网站 所选内容的摘要 color 杆00 toxt-align bodr》@l W9q100g￥596t129￥1K/1秒nicode0UTP-8) 性 )格式)标题1 类 div BI目扫出标题 规则 ,图 凸Cs$ D)无 链接a) ·白目标G 一.div“的属性 页而低性门列床目 油Az用 w五2⊙日 文件源 图2-2-2 2.光标定位在“欢迎光临我的个人网页”后面，按【Enter】键，点击 常用插入栏，选择HTML选项，单击其中的“”按钮，在欢迎光临我 的个人网页”下面插入一条水平线。如图2-2-3所示
二、Dreamweaver 中简单个人网页文本元素的编辑 1.在上节课新建的网页的设计视图的工作区域空白处输入文字“欢 迎光临我的个人网页”，选中文字，在 Dreamweaver 下方的属性面板上 设置其段落属性为“标题 1”，对其方式为“ ”，修改其颜色为“红色”， 如图 2-2-2 所示。 图 2-2-2 2.光标定位在“欢迎光临我的个人网页”后面，按【Enter】键，点击 常用插入栏，选择 HTML 选项，单击其中的“ ”按钮，在“欢迎光临我 的个人网页”下面插入一条水平线。如图 2-2-3 所示
Dw,◆品 设计器·口 CSLie:a回x indexhtml x 插入文件Adobe Browser 代码拆分设计实时代码寸机图检查.③.心标题：无标预文档 常用 △地址Ei1e./C/Uers3evan/eto/hnl 。超级 10 回电子件铜接 p>snbsp: file:///C/Users/Seven/Desktop/indexhtml 8命名亩记 ch3>cfont color-"4006600">- 白我介超 里表格 回图配 欢迎光临我的个人网站 ·蝶件 构件 Ghead>Raat 同日期 性 META 性TP-i习值Content-T 内容ttt/htnl:char5-8 图2-2-3 3.选中水平线，设置水平线属性，如图2-2-4所示，“对其”中包含了 左、右、中三中对其方式。 ?属性 默认：即为居中对齐 水平线 宽80 时济默认 爽无 ☑阴影 图2-2-4 4.在水平线后面按【Enter】键，输入“一、自我介绍”，选中该文本， 设置其属性如图2-2-5所示。 属性 格式标题3 样式无 CSS■BI亖差复■ 字体默认字体 大小无 #006600 扫扫坦坦 图2-2-5 5.重复步骤2插入水平线，设置水平线属性如图2-2-6所示
图 2-2-3 3.选中水平线，设置水平线属性，如图 2-2-4 所示，“对其”中包含了 左、右、中三中对其方式。 图 2-2-4 4.在水平线后面按【Enter】键，输入“一、自我介绍”，选中该文本， 设置其属性如图 2-2-5 所示。 图 2-2-5 5.重复步骤 2 插入水平线，设置水平线属性如图 2-2-6 所示
、属性 水平线 对齐左对齐 类C)无 高 ☑阴影 图2-2-6 6.输入输入“姓名”、“性别”、“出生年月”、“毕业院校”、“所学专业 等四行文字，每行的结尾按【Enter】键换行。 7选中这四行文字，切换“常用工具栏”为文本选项”，点击其上的 按钮，如图2-2-7所示。完成后效果如图2-2-8（区域1）所示。 W国，在，品· 凝汁器，可 cs Live回x ndex.html x 氏码拆分设计实时代码后斗实时视图检查.③.C标题：无标题文街入文件原4如be。” 中△地：c/Wsr发#n/t你/hnd4t 国. 文本 文件 k!DOCTYPE html FUBLIC "-//W3C//DTD XHTML 1.0 Trenaitional//E "http://v h33 1 -"http://www.w3. org/1999/xhtml"> 自源 l项目列表 meta http-equiv="Content-Type"content="text/html;charset-utf-8"/> l编号列 图Adobe BrowserLab 无标超文档 /head> 目列表项 之d41Agd dl定义列表 h1 align=center">cfont co1or=red">欢迎光临我的个人网站c/h1> arw1dh="80线"/> 定义术 dd定义说明 12 一：白我介经 缩写 首字母编写词 欢迎光临我的个人周：蓉惊游 图2-2-7 8.重复步骤4-6，制作联系方式部分，如图2-2-8（区域2）所示
图 2-2-6 6.输入输入“姓名”、“性别”、“出生年月”、“毕业院校”、“所学专业” 等四行文字，每行的结尾按【Enter】键换行。 7.选中这四行文字，切换“常用工具栏”为“文本选项”，点击其上的 “ ”按钮，如图 2-2-7 所示。完成后效果如图 2-2-8（区域 1）所示。 图 2-2-7 8.重复步骤 4-6，制作联系方式部分，如图 2-2-8（区域 2）所示
! 一、 自我介绍 姓名：刘清梅 性别：名 出生年：92年具 西南交通大学 所草专业：讦算机科学与技术 二、 联系方式 工作单位：四川信息职业技术学院 邮政编码：628017 I 2 QQ:68801747 Email:qm186@163.com 图2-2-8 9选中联系方式的四行文字，切换“常用工具栏”为“文本选项”，点 击其上的”按钮。完成后效果如图2-2-9所示。 Dwm,,昌， 毅计器。回 cSLive回x 文件的编减E)查看M猫入)修效M0格式数O)章令口站宗S)窗口(M帮物 indexchtml x 代码拆分设计实代码视图查③..标：无标题文入文Ab:r© →8△地址：i1ef代usrs/3e40t/i五dh1 文本 面文件 可编号墙 因Adobe BrowserLab 56 t11e>无标文当f七1t1e dl定义列 color="xe>欢迎光临我的个人网站c/Eae>×/h1> chr width-"804"/> dt定义术语 dd定义明 h3×ont co1or="40E600“y一t白我介还 c首字母缩写词 欢迎光临我的个入同蓉字： k四Q0o%96￥135v1/1秒ni cod。0rr-) 图2-2-9
图 2-2-8 9.选中联系方式的四行文字，切换“常用工具栏”为“文本选项”，点 击其上的“ ”按钮。完成后效果如图 2-2-9 所示。 图 2-2-9
10.重复步骤2插入页面底部的水平线并设置其属性。 11.输入版权信息，设置其属性为居中对其，版权符号的插入如图 2-2-10所示。 CSLive ▣回X 44X 插入文件资源Adobe Browser三 文本一 ul项目列表 ol 编号列表 i 列表项 d定义列表 dt 定义术语 dd 定义说明 abbr 缩写 W3C 首字母缩写词 圆·字符：其他字符 明换行符(Shit+Enter）) 山不换行空格 “左引号 ”右引号 一破折线 一短破折线 ￡英镑符号 €欧元符号 ￥日元符号 ©版权 ®注册商标 TM商标 圆其他字符 图2-2-10 12.日期的插入方法如图2-2-11所示
10.重复步骤 2 插入页面底部的水平线并设置其属性。 11.输入版权信息，设置其属性为居中对其，版权符号的插入如图 2-2-10 所示。 图 2-2-10 12.日期的插入方法如图 2-2-11 所示
index.html* -日× 四代码回拆分国设计 标题：无标题文档 9雕.G. 7 8日 hl align=center'">Kfont color=red)欢迎光1临我的个人网站 9 Khr width="80%"> 甘 10  : 11 h3>一、自我介绍》 9Q100%506￥51￥2K/1秒 、属性 格式标题1 样式无 CSS B I 屋看 字体默认字体 大小无 red 扫扫超超 图2-2-11 三、简单个人网页中常用文本标记的应用 1.把网页切换到混合模式视图”，分析个页面元素的HTML标记， 如图2-2-12所示。选中设计视图中的内容，系统将自动在代码视图模式 中显示相应的代码
图 2-2-11 三、简单个人网页中常用文本标记的应用 1.把网页切换到“混合模式视图”，分析个页面元素的 HTML 标记, 如图 2-2-12 所示。选中设计视图中的内容，系统将自动在代码视图模式 中显示相应的代码
index.html* -日× )代码回拆分国设计 标题：无标题文档 9雕.G. 7 8日 hl align=center'">font color=red①欢迎光临我的个人网站 9 Khr width="80%"> 甘 10  : 11 h3>一、自我介绍 9Q100%506x512K/1秒 、属性 格式标题1 样式无 CSS B I 屋看 字体默认字体 大小无 red 扫扫超超 图2-2-12 2.标题文字标记及文本控制标记 标题标记∝hn>: 其中的文字显示为加粗了的文字并且前后空一行。“”的取值为 “1-6”,n”值越大，字号越小。“hn>”有对齐方式(align)属性，取值为left、 right、center”。 字体标记∝fonP 字体标记为双标记被控制的文字写在“”与”之间，字 体标记常用属性如下表： 属性 值 表示 机器上常用字体，如： “宋体”、“黑 字体类 face 体”等 型 color left/right/center 字体颜 色 size 通常情况下为“1-7” 字体大
图 2-2-12 2.标题文字标记及文本控制标记 标题标记: 其中的文字显示为加粗了的文字并且前后空一行。“n”的取值为 “1-6”,“n”值越大，字号越小。“”有对齐方式(align)属性，取值为“left、 right、center”。 字体标记 字体标记为双标记被控制的文字写在“”与“”之间，字 体标记常用属性如下表: 属性 值 表示 face 机器上常用字体，如：“宋体”、“黑 体”等 字体类 型 color left/right/center 字体颜 色 size 通常情况下为“1-7” 字体大
小 “欢迎光临我的个人网站”设置属性的格式为标题1，标题居中对其， 红色字体，对应的代码为：欢迎光临 我的个人网站 3.水平线标记 “”为单标记，即没有结束标记。常用属性及属性值如下： 属性 值 表示 width 整数 长度 align left/right/center 对齐方式 颜色英文名称或#十六进制颜 color 色值，例如#ff0000 颜色 size 整数 高度 空值，加上noshade,.水线无阴 noshade 影 是否阴影 网页中的四条水平线从上到下代码依次为： 1. 2. 3. 4. <hr align="center"width="80%"noshade 4.列表标记 列表标记分为有序列表和无序列表，示例中“自我介绍”的详细内容 用的是无序列表标记，而联系方式用的是有序列表标记。 1)无序列表
小 “欢迎光临我的个人网站”设置属性的格式为标题 1，标题居中对其， 红色字体，对应的代码为：欢迎光临 我的个人网站 3.水平线标记 “”为单标记，即没有结束标记。常用属性及属性值如下： 属性 值 表示 width 整数 长度 align left/right/center 对齐方式 color 颜色英文名称或＃十六进制颜 色值，例如＃ff0000 颜色 size 整数 高度 noshade 空值,加上 noshade，水线无阴 影 是否阴影 网页中的四条水平线从上到下代码依次为： 1. 2. 3. 4. 4.列表标记 列表标记分为有序列表和无序列表，示例中“自我介绍”的详细内容 用的是无序列表标记，而联系方式用的是有序列表标记。 1）无序列表
无序列表用项目符号来标记无序的项目。列表定义标记为，其属 性type的取值范围为disc(实心圆)、square(实心方框)、circle(空心 圆)”，其语法结构如下表： D列表内容W1D 自我介绍详细内容的无需列表代码如下： ul>//type省略，默认为实心圆 姓名：刘强性别：男 出生年月：1982年7月 毕业院校：西南交通大学/1i》 所学专业：计算机科学与技术 》 2)有序列表 有序列表使用编号来记录项目的顺序。列表定义标记为0l,其属性 type的取值范围为1、A、a、i”等可表示顺序的值，其语法结构如下表： 列表内容… 》 联系方式详细内容的无需列表代码如下：
无序列表用项目符号来标 记无序的项目。列表定义标记为 ul，其属 性 type 的取值范围为“disc(实心圆)、square（实心方框）、circle（空心 圆）”，其语法结构如下表： 列表内容 … 自我介绍详细内容的无需列表代码如下： //type 省略，默认为实心圆 姓名:刘强 性别：男 出生年月：1982 年 7 月 毕业院校：西南交通大学 所学专业：计算机科学与技术 2）有序列表 有序列表使用编号来记 录项目的顺序。列表定义标记为 ol，其属性 type 的取值范围为“1、A、a、i”等可表示顺序的值,其语法结构如下表： 列表内容 … 联系方式详细内容的无需列表代码如下：