第三章网页中的文本

合集下载

第三章 HTML语言概述 fzy

第三章 HTML语言概述
第一节 HTML简介
1．HTML语言网页一般是以HTML语言格式为基础编写成的。 HTML语言是超文本标记语言的缩写。创建HTML文件也十分简单，使用任何的文本编
辑器都可以对它进行编辑。 HTML文件的后缀名必须是.html或移动的像素数； Scrolldelay，重复画面之间的时间间隔，以微妙（ms）为单位。
第四节版面设置
6．META标记的使用 META标签用来描述一个HTML网页文档的属性，
例如作者、日期和时间、网页描述、关键词、页面刷新等。常用属性有Content、 http-equiv和 Name，其中http-equiv和Name不能同时使用。
第七节表格
（2）定义表格行标记<TR> 表明所控制的内容为表格的一行，其属性为：
height，控制行高度（像素数或百分比） bordercolor，控制行的边框（即内框）颜色 Bgcolor，控制行的背景颜色 Align，控制行的文字水平对齐方式（left、right、
center） Valign，控制行的文字垂直对齐方式（top、middle、
第三节文字编排
2．文字标记文字标记：<FONT>，是双标记格式。 <font>的属性：
Face属性，控制字符使用字体的属性，语法： face=“字体名” （华文中宋、华文彩云、宋体、楷体、隶书、华文新魏、华文行楷、黑体）
Size属性，控制字符大小，语法：size=字符等级 Color属性，用于控制字符的颜色，语法：color=“颜
Size，用于控制水平线的粗细，属性值为像素数。
第四节版面设置
5．滚动文字滚动文字标记<MARQUEE>控制内容在行内滚动。其属性

第1篇第3章网页中的文本

5．脚本链接
在选中热字的link框中直接写入脚本。例：JavaScript:alert('确定删除吗')
6．指向下载文件的链接
链接的目标文件不是HTML文件，则作为下载文件，格式： <a href= "路径及文件名" > 热点 </a> 【例3-3】试制作外部文档链接、外部文档书签链接、本文档书签链接、E-mail链接、无址链接和脚本链接。
3.1.3 设置文本的属性
图3-4 文本的“属性”面板
【例 3-1】设计一个只有文字的页面。对照设计界面和代码界面，熟悉文本属性的标签。
• • •
学习双标签 <h1></h1> 、 </p></p> 、 <span></span> 、 <pre></pre> 及单标签<br />、<hr />的使用文本的字体、字号、风格等属性以CSS样式写在<head></head>中自定义的CSS样式优先级高于网页样式body,td,th { }的优先级
3.3.1 CSS语法
CSS 样式表位于XHTML代码中的head标签内，由3部分构成：选择符（selector）、属性（properties）和属性值（value）： Selector { properties1: value1 ; properties2 : value 2; … }
/*第1个属性名及属性值*/ /*第2个属性名及属性值*/
•
文档相对路径：相对当前文档的路径。
3.2.2 建立超链接
•
建立超链接由锚点（anchor）标签<a></a>定义： <a href="地址" target="打开窗口方式" > 热点 </a>

第三章html、xml与xhtml

第三章html、xml与xhtmlHTML：超文本标记语言或超文本链接标示语言，是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。

HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。

HTML的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。

HTML标签通常是英文词汇的全称（如块引用:blockquote）或缩略语（如“p”代表Paragraph），但它们的与一般文本有区别，因为它们放在单书名号里。

故Paragragh 标签是<p>,块引用标签是<blockquote>。

有些标签说明页面如何被格式化（例如，开始一个新段落），其他则说明这些词如何显示(<b>使文字变粗)还有一些其他标签提供在页面上不显示的信息－－例如标题。

HTML标准的版本历史：超文本置标语言(第一版)——在1993年6月发为互联网工程工作小组 (IETF)工作草案发布（并非标准）.HTML 2.0——1995年11月作为RFC 1866发布，在RFC 2854于2000年6月发布之后被宣布已经过时HTML 3.2——1996年1月14日，W3C推荐标准HTML 4.0——1997年12月18日，W3C推荐标准HTML 4.01（微小改进）——1999年12月24日，W3C推荐标准HTML 5——2007年HTML 5草案被W3C接纳，并成立了新的HTML工作团队。

08年1月22日第一份正式HTML 5草案发布。

XML：即可扩展标记语言，它与HTML一样，都是SGML(Standard Generalized Markup Language,标准通用标记语言)。

Xml是Internet环境中跨平台的，依赖于内容的技术，是当前处理结构化文档信息的有力工具。

扩展标记语言XML是一种简单的数据存储语言，使用一系列简单的标记描述数据，而这些标记可以用方便的方式建立，虽然XML占用的空间比二进制数据要占用更多的空间，但XML极其简单易于掌握和使用。

网页文本的处理

3.1.3 设置文本格式
在Dreamweaver CS5中设置文本格式可以通过属性面板，类似于Microsoft Word中对文本的属性设置，包括段落的格式、字体、字号、字的颜色、字体加粗/倾斜、对齐方式（左对齐/居中/右对齐）、文字所链接的路径或URL等。
3．创建和测试Web页
（1）创建Web页由于HTML文件的实质就是文本文件，因此可以用任何文本编辑器编辑HTML文件，通常可以使用 Windows系统中的“记事本”程序。
（2）测试Web页保存了Web页之后，在所选择的文件夹中将包含所创建的Web页，该Web页文件左边有一个图标，表示可以由IE将其打开。找到刚创建的Web页并用鼠标左键双击，则可以自动启动IE浏览器，此时所创建 Web页中的内容将在浏览器中显示。
字符”命令来插入，还可以通过插入“字符”面板来
直接插入。

3．输入空格
Dreamweaver CS5中，在文本开始处按空格键是不会输入空格的，在文字之间按空格键可以输入半个空格。如果要在网页中输入空格，可以采用如下三种方法：（1）按住“Ctrl+Shift”键，按一次空格键，键入半个空格。（2）将Dreamweaver CS5设置为默认情况下可以连续输入空格。选择“编辑”→“首选参数”菜单命令，打开“首选参数”对话框，在“常规”类下勾选 “允许多个连续的空格”单选按钮。

3.2.2 标题处理
在HTML中，用户可以通过Hn标记符来标识文档中的标题和副标题，其中n是1到6的数字。<H1> 表示最大的标题，<H6>表示最小的标题。使用标题样式时，必须使用结束标记符。标题文字标记符的格式： <Hn align="对齐方式"> 标题文字 </Hn>

HTML教程 03第三章

第三章段落与文字处理文本是所有语言需要具有的最基本功能，HTML更是如此。

本章讲解在HTML中如何编排段落和修饰文字。

3.1段落标记3.1.1<p>标记文本分段一般以<p>开头、以</p>结尾。

段落标记<p>是HTML中最常用的标记，虽然</p>可以省略，因为下一个<p>的开始就意味着上一个<P>的结束，但最好还是遵循规范，正规书写。

<P>标记的常用语法格式为：<p align = 对齐方式>……</p>其中，align用来定义段落的对齐方式，它可以取以下值：●center：居中对齐。

●left：靠左对齐，是默认值。

●right：靠右对齐。

【例1】<p>的用法。

<html><head><title>itsway -- 段落与文字</title></head><body><p align = center>劝学</p><p align = right>作者：颜真卿</p><p>三更灯火五更鸡，正是男儿立志时。

</p><p>黑发不知勤学早，白首方悔读书迟。

</p></body></html>显示结果如下图所示。

可以看出，标题“劝学”在页面中居中对齐，“作者：颜真卿”靠右对齐，而诗的主体则靠页面左边对齐。

3.1.2 <br>、<nobr>、<pre>和<center>标记段落与段落之间一般会空出一行距离。

如果不想分段而只想分行，可以使用<br>标记，常用格式为： <br>一般来说，每当浏览器窗口被缩小时，浏览器会自动将段落右边的文字转折至下一行。

第3章网页元素编辑

• •
password file checkbox radio button submit reset
第三章网页元素编辑
1、文字域text 、文字域 text属性值用来设定在表单的文本域中，输入任何属性值用来设定在表单的文本域中，属性值用来设定在表单的文本域中类型的文本、数字或字母。输入的内容以单行显示。类型的文本、数字或字母。输入的内容以单行显示。
第三章网页元素编辑
• • • 3.4 建立表单表单是实现交互动态网页的一种主要的外在形式，是网站管理者与浏览者之间沟通的桥梁。表单的主要功能是收集信息，接受浏览者在网页中的操作，并传递给服务器端的表单处理程序。
第三章网页元素编辑
• 表单是网页上的一个特定区域，它由
• <form></form>标签定义。 • • • • • • 语法： <form name=“form_name” method=“method” action=“url” > …… </form>
文字域属值 name maxlength size value 描述文字域的名称文字域的最大输入字符数文字域的宽度文字域的默认值
第三章网页元素编辑
结果代码 <form> 姓名： type=“text” 姓名：<input type=“text” name=“name” size=“20” name=“name” size=“20” /> </form>
(1)单选框当type=“radio”时,表示该输入项是一个单选项,具有相同name属性的单选按钮形成一个组,用户只能选择单选项中的一项作为输入信息。 checked属性，用来表示此项被默认选中。 value属性，用来设定选中项目后传送到服务器端的值。

HTML文档标记

加粗、倾斜与下划线标记
2）加粗、倾斜与下划线的定义标记（b、i、u） <b>……</b>  <i>……</i>  <u>……</u>  <em>……</em>  <strong>……</strong>  使用加粗、倾斜与下划线标记（b、i、u）的组合，可对文本文字进一步修饰。如：<b><font color="red" size="5">此处以红色五号字粗体显示</font></b>
有序列表(Ordered List)
<ul id="nav"> <li><a href="">文章</a> <ol> <li><a href="">CSS教程</a> </li> <li><a href="">DOM教程</a></li> <li><a href="">XML教程</a></li> <li><a href="">Flash教程</a></li> </ol> </li></ul>

《网页设计与制作》课件——项目二任务一网页中的文本

图2.1.15 代码视图
切换到设计视图，在“学校简报”后面单击“Enter”键，增加其他列表项，如图2.1.16所示。列表代码如图2.1.17所示。
图2.1.16 列表效果
图2.1.17 列表代码
最后网页浏览效果如图2.1.18所示。
图2.1.18 网页浏览效果
知识拓展
HTML中的列表
在HTML中的列表常用的主要有两种类型：无序列表、有序列表。通过列表可以对同类的内容进行简单的归纳。常见的用途有：图书目录、饭店菜单、人员名单、待办事宜等。这些信息大多不是大篇的信息内容，而是简要的标题。
属性 ul ol li
说明定义无序列表定义有序列表定义列表中的列表项元素
任务总结
主要让大家学习文本插入及属性设置，其中包括普通文本与特殊符号的插入、文本的基本属性设置、项目列表的应用，这些基本操作都是以后网站制作中经1.5 列表文字
图2.1.6 列表效果
步骤3：设置“学校简介”正文
（1）在正文的左上方输入“本站首页”→“学校简介”，在属性面板设置其大小为12px，颜色为#006600，粗体，如图2.1.7所示。
图2.1.7 文字效果
（2）打开“新闻简介.txt”文件，选择所有文字，单击鼠标右键，从弹出的快捷菜单中选择“复制”选项，复制所有文字，回到 Dreamweaver中，将鼠标光标放置在正文内容的位置，单击鼠标右键，从弹出的快捷菜单中选择“粘贴”选项，粘贴所有文字到页面中，如图2.1.8所示。
项目二制作学校概况
核心技术了解网页中的文本样式应用图片和多媒体丰富页面内容
任务目标
任务一：网页中的文本任务二：利用图文混排制作漂亮网页
能力目标
文本的基本操作插入特殊文本对象项目符号和项目列表插入与设置图像

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

用<hn>设置标题的大小。
<html> <head> <title> 网页设计 </title> </head>
<body>
<h1>今天天气真好!</hl> <h2>今天天气真好!</h2>
<h3>今天天气真好!</h3>
<h4 align=left>今天天气真好!</h4> <h5 align=center>今天天气真好!</h5>
<font size=3>文字的大小 size=3</font><br>
<font size=4>文字的大小 size=4</font><br> <font size=5>文字的大小 size=5</font><br> <font size=6>文字的大小 size=6</font><br> <font size=7>文字的大小 size=7</font><br> </body> </html>
无序列表
创建无序列表无序列表使用<ul>和</ul>标记，它包含的内容项没有指定顺序，表示彼此相关但却不遵循某一顺序的一组信息。无序列表的每一项不再用编号表示，而是用某种类型的标志（如实心圆、空心圆圈等）表示。一个典型的无序列表如下定义： <ul> <li>第1项</li> <li>第2项</li> …… <li>第n项</li> </ul> 列表项标志可以通过<ul>标记的type属性来设置。type属性可以选择以下几项之一： circle：空心圆点 square：方块 disc：实心圆点
星期五、星期六、星期日。<br />
<h3>以下使用分段标记（分为两段）：</h3> <p>星期一、星期二、星期三、</p><p>星期四、
星期五、星期六、星期日。</p>
<h3>以下使用预格式：</h3> <pre> 星期一、星期二、星期三、星期四、
星期五、星期六、星期日。 </pre>
</body></html>
3.1.4 建立列表
与列表有关的标签为<ul>、<ol>、<li>、<menu>、<lh>、<dl>、 <dt>、<dd>等，格式。
通过文本的“属性”面板建立列表
创建有序列表
创建有序列表创建有序列表需要使用有序列表标记符 OL 和列表项标记符 LI，其中 LI 标记符的结束标记符可以省略，基本语法如下： <OL> <LI>列表项 1 <LI>列表项 2 <LI>列表项 3
</body></html>
强制不换行标记<nobr>……</nobr>，常用英文人名
<nobr>Bill Gates</nobr>
“计算机简史”网页的显示效果
设置文字格式
1 设置文字的大小
设置文字的大小的格式为：
<font size=数字 <／font> face=字体名 color=颜色> 被设置的文字

<p class="STYLE3"><strong>编号不连续的有序列表</strong>：</p> <ol type="1"> <li class="STYLE2">列表值1</li> <li class="STYLE2">列表值1</li> <li value="5"class="STYLE2">列表值 1</li> </ol>
插入水平线
以下 HTML 代码显示了如何用 HR 标记符的各种属性控制水平线的显示，效果如下图所示。
<HTML> <HEAD> <TITLE>水平线效果</TITLE> </HEAD> <BODY> 以下是默认水平线：<HR> 以下是粗为 5 像素的水平线：<HR size="5"> 以下是长度为100像素的水平线：<HR width="100"> 以下是长度为屏幕宽度 50% 的水平线：<HR width="50%"> 以下是粗为 5 像素的实心水平线：<HR size="5" noshade> 以下是红色的水平线：<HR color="red"> </BODY> </HTML>
<font>标记可设定文字的字体、字号和颜色。
size用来设置文字的大小。数字的取值范围从1～7，size取1时最小，取7时最大。
face 用来设置字体。如黑体、宋体、楷体 —GB2312 、仿宋 — GB2312、隶书、Times New Roman等。
上标（sup）和下标（sub）标记
用于书写数学公式或分子式。
如：H<sub>2</sub>O  X<sup>2</sup>  由于字体标记属于对文本外观进行修饰的标记，是由于当时CSS语言尚未出现时html定义的表现的范畴，随着CSS的出现，这些表现功能均可以由CSS完成，所以不含有语义的字体标记慢慢过时了。
<p class="STYLE2">其实数字为3的有序列表：</p> <ol start="3"> <li class="STYLE2">列表值1</li> <li class="STYLE2">列表值2</li> <li class="STYLE2">列表值3</li> </ol>
<HTML> <HEAD> <TITLE>有序列表示例</TITLE> </HEAD> <BODY> 用大写罗马字母表示的有序列表： <OL type="I"> <LI>列表项1 <LI>列表项2 <LI>列表项3 </OL> 起始数字为 3 的有序列表： <OL start="3"> <LI>列表项1 <LI>列表项2 <LI >列表项3 </OL> 编号不连续的有序列表 <OL><LI>列表项1 <LI>列表项2 <LI value="5">列表项3</OL> 变换了数字样式的有序列表 <OL><LI>列表项1 <LI>列表项2 <LI type="A">列表项3 </OL> </BODY> </HTML>
思考题
3.1 文本的基本编辑
互联网上大量信息的传播以文本为主。因此，对于网页制作人员来说，文本的处理是最基本而重要的技巧之一。学习网页制作首先应掌握网页中文本的制作和编辑方法。
3.1.1 插入文本、符号、日期、水平线
1. Enter 插入<p> </p> （硬回车） 2. shift＋enter 插入<br /> （软回车）
color用来设置文字颜色。
<font>和<hn>标记都可以设置文字的大小，当 <font>中的size取7时的文字比<h1>要大。
【例2-5】用<font>设置文字的大小。 <html>
<head>
<title>用<font>设置文字的大小<／title> </head> <body> <h1>文字的大小!</h1> <font size=1>文字的大小 size=1</font><br> <font size=2>文字的大小 size=2</font><br>
嵌套的无序列表示例
<ul id="nav"> <li><a href="">文章</a> <ul> <li><a href="">CSS教程</a> </li> <li><a href="">DOM教程</a></li> <li><a href="">XML教程</a></li> </ul> </li> <li><a href="">参考</a> <ul> <li><a href="">XHTML</a></li> <li><a href="">XML</a></li> <li><a href="">CSS</a></li> </ul> </li></ul>