第三章网页中的文本_第1页
第三章网页中的文本_第2页
第三章网页中的文本_第3页
第三章网页中的文本_第4页
第三章网页中的文本_第5页
已阅读5页，还剩75页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第三章网页中的文本本章要点3.1文本的基本编辑3.1.1插入文本、符号、日期、水平线3.1.2添加字体3.1.3设置文本的属性3.1.4建立列表3.2超链接3.2.1路径3.2.2建立超链接3.3样式3.3.1CSS语法3.3.2CSS样式应用3.3.3引用外部CSS文件与导出样式表3.1文本的基本编辑互联网上大量信息的传播以文本为主。因此，对于网页制作人员来说，文本的处理是最基本而重要的技巧之一。学习网页制作首先应掌握网页中文本的制作和编辑方法。3.1.1插入文本、符号、日期、水平线Enter插入<p> </p>（硬回车）shift＋enter

插入<br/>（软回车）Ctrl＋shift＋space

插入一个 特殊字符日期分段换行<html><head><title>分段换行与预格式</title></head><body><h3>以下是直接写文本的情况：</h3>星期一、星期二、星期三、星期四、星期五、星期六、星期日。<h3>以下是使用了三个换行标记的情况：</h3>星期一、星期二、<br/>星期三、星期四、<br/>星期五、星期六、星期日。<br/><h3>以下使用分段标记（分为两段）：</h3><p>星期一、星期二、星期三、</p><p>星期四、星期五、星期六、星期日。</p><h3>以下使用预格式：</h3><pre>星期一、星期二、星期三、星期四、星期五、星期六、星期日。</pre></body></html>以下HTML代码显示了如何用HR标记符的各种属性控制水平线的显示，效果如下图所示。<HTML><HEAD><TITLE>水平线效果</TITLE></HEAD><BODY>以下是默认水平线：<HR>以下是粗为5像素的水平线：<HRsize="5">以下是长度为100像素的水平线：<HRwidth="100">以下是长度为屏幕宽度50%的水平线：<HRwidth="50%">以下是粗为5像素的实心水平线：<HRsize="5"noshade>以下是红色的水平线：<HRcolor="red"></BODY></HTML>插入水平线3.1.2添加字体执行菜单命令“文本”|“字体”|“编辑字体列表”3.1.3设置文本的属性图3-4文本的“属性”面板【例3-1】设计一个只有文字的页面，以下网页为例，对文字的格式、字体、字号、颜色以及对齐格式等属性进行设置。学习双标签<h1></h1>、</p></p>、<span></span>、<pre></pre>及单标签<br/>、<hr/>的使用文本的字体、字号、风格等属性以CSS样式写在<head></head>中自定义的CSS样式优先级高于网页样式body,td,th{}的优先级用<hn>设置标题的大小。<html> <head> <title> 网页设计 </title> </head> <body> <h1>今天天气真好!</hl> <h2>今天天气真好!</h2> <h3>今天天气真好!</h3> <h4align=left>今天天气真好!</h4> <h5align=center>今天天气真好!</h5> <h6align=right>今天天气真好!</h6> <h>今天天气真好!<h> </body></html>强制换行标记的使用

<html> <head> <title>强制换行标记的使用</title> </head> <body> 欢迎进入牡丹园!<br><br> 新闻<br>

影视<p> 聊

天

室<br> </body></html>强制不换行标记<nobr>……</nobr>，常用英文人名<nobr>BillGates</nobr>“计算机简史”网页的显示效果设置文字格式1设置文字的大小设置文字的大小的格式为：<fontsize=数字face=字体名color=颜色>被设置的文字<／font><font>标记可设定文字的字体、字号和颜色。size用来设置文字的大小。数字的取值范围从1～7，size取1时最小，取7时最大。face用来设置字体。如黑体、宋体、楷体—GB2312、仿宋—GB2312、隶书、TimesNewRoman等。color用来设置文字颜色。<font>和<hn>标记都可以设置文字的大小，当<font>中的size取7时的文字比<h1>要大。【例2-5】用<font>设置文字的大小。<html> <head>

<title>用<font>设置文字的大小<／title> </head> <body> <h1>文字的大小!</h1> <fontsize=1>文字的大小size=1</font><br> <fontsize=2>文字的大小size=2</font><br> <fontsize=3>文字的大小size=3</font><br> <fontsize=4>文字的大小size=4</font><br> <fontsize=5>文字的大小size=5</font><br> <fontsize=6>文字的大小size=6</font><br> <fontsize=7>文字的大小size=7</font><br> </body></html>上标（sup）和下标（sub）标记用于书写数学公式或分子式。如：H<sub>2</sub>O<!--H2O-->X<sup>2</sup> <!--X2-->由于字体标记属于对文本外观进行修饰的标记，是由于当时CSS语言尚未出现时html定义的表现的范畴，随着CSS的出现，这些表现功能均可以由CSS完成，所以不含有语义的字体标记慢慢过时了。3.1.4建立列表

与列表有关的标签为<ul>、<ol>、<li>、<menu>、<lh>、<dl>、<dt>、<dd>等，格式。通过文本的“属性”面板建立列表创建有序列表创建有序列表创建有序列表需要使用有序列表标记符OL和列表项标记符LI，其中LI标记符的结束标记符可以省略，基本语法如下：<OL><LI>列表项1<LI>列表项2<LI>列表项3</OL>OL标记符具有两个常用的属性：type和start，分别用来设置数字序列样式和数字序列的起始值。start属性的值可以是任意整数，type属性的值如表2-3所示：有序列表的type属性值值含义1阿拉伯数字：1、2、3等，此选项为默认值A大写字母：A、B、C等a小写字母：a、b、c等I大写罗马数字：I、II、III、IV等i小写罗马数字：i、ii、iii、iv等

当位于OL标记符内时，LI标记符具有两个常用的属性：type和value。type属性用于设置数字样式，取值与OL的type属性相同；value属性用于指定一个新的数字序列起始值，以获得非连续性的数字序列。例如以下HTML代码显示了如何创建不同的有序列表，效果如下图所示。<pclass="STYLE2">用大写罗马字母表示的有序列表：</p><oltype="I"class="STYLE2"><li>列表值1</li><li>列表值2</li><li>列表值3</li></ol><pclass="STYLE2">数字序列的有序列表<

/p><oltype="1"><liclass="STYLE2">张三</li><liclass="STYLE2">李四</li><liclass="STYLE2">王五</li></ol><pclass="STYLE3"><strong>字母序列的有序列表</strong>：</p><oltype="A">

<liclass="STYLE2">列表值1</li><liclass="STYLE2">列表值1</li><liclass="STYLE2">列表值1</li></ol><pclass="STYLE3"><strong>编号不连续的有序列表</strong>：</p><oltype="1"><liclass="STYLE2">列表值1</li><liclass="STYLE2">列表值1</li><livalue="5"class="STYLE2">列表值1</li></ol><pclass="STYLE2">其实数字为3的有序列表：</p><olstart="3"><liclass="STYLE2">列表值1</li><liclass="STYLE2">列表值2</li><liclass="STYLE2">列表值3</li></ol><HTML><HEAD><TITLE>有序列表示例</TITLE></HEAD><BODY>用大写罗马字母表示的有序列表：<OLtype="I"><LI>列表项1<LI>列表项2<LI>列表项3</OL>起始数字为3的有序列表：<OLstart="3"><LI>列表项1<LI>列表项2<LI>列表项3</OL>编号不连续的有序列表<OL><LI>列表项1<LI>列表项2<LIvalue="5">列表项3</OL>变换了数字样式的有序列表<OL><LI>列表项1<LI>列表项2<LItype="A">列表项3</OL></BODY></HTML>有序列表的嵌套

以下HTML代码即显示了一个嵌套的有序列表，效果如下图所示。<HTML><HEAD><TITLE>嵌套的有序列表</TITLE></HEAD><BODY><H2>嵌套的有序列表</H2><OLtype="A"><LI>列表项1<OL><LI>子列表项1<LI>子列表项2<LI>子列表项3</OL><LI>列表项2<LI>列表项3</OL></BODY></HTML>创建无序列表无序列表使用<ul>和</ul>标记，它包含的内容项没有指定顺序，表示彼此相关但却不遵循某一顺序的一组信息。无序列表的每一项不再用编号表示，而是用某种类型的标志（如实心圆、空心圆圈等）表示。一个典型的无序列表如下定义：<ul> <li>第1项</li> <li>第2项</li> …… <li>第n项</li></ul>列表项标志可以通过<ul>标记的type属性来设置。type属性可以选择以下几项之一：circle：空心圆点square：方块disc：实心圆点无序列表

以下HTML代码显示了如何创建无序列表，效果如下图所示。<HTML><HEAD><TITLE>无序列表示例</TITLE></HEAD><BODY>默认无序列表：<UL><LI>列表项1<LI>列表项2<LI>列表项3</UL>使用方块作为列表项标记的无序列表：<ULtype="square"><LI>列表项1<LI>列表项2<LI>列表项3</UL></BODY></HTML>嵌套的无序列表示例<ulid="nav"><li><ahref="">文章</a><ul> <li><ahref="">CSS教程</a></li> <li><ahref="">DOM教程</a></li> <li><ahref="">XML教程</a></li></ul></li><li><ahref="">参考</a><ul> <li><ahref="">XHTML</a></li> <li><ahref="">XML</a></li> <li><ahref="">CSS</a></li></ul></li></ul>定义项目列表定义项目列表用项目列表表示单词或语句,使之具有交互凹进的特点.定义项目列表使用标记<dl>、<dt>和<dd>。<dt>往往用于定义单词，<dd>用于定义语句。由<dt>定义的项目会自动换行左对齐，但项目之间没有空行。格式为：<dl><dt>定义单词1<dd>单词1的说明<dt>定义单词2<dd>单词2的说明…….</dl>项目列表应用示例<html><head><title>项目列表应用</title></head><body><palign=center>院系设置</p><dl><dt>计算机应用专业<dd>专业内容有……<dt>计算机软件专业<dd>专业内容有……<dt>计算机网络专业<dd>专业内容有……</dl></body></html>课堂练习：定义列表项目<dl><dt>湖南城市</dt><dd>长沙</dd><dd>衡阳</dd><dd>常德</dd></dl><dl><dt>湖北城市</dt><dd>武汉</dd><dd>襄樊</dd><dd>宜昌</dd></dl>混合嵌套列表有序列表和无序列表也可互相嵌套，如以下HTML代码所示：<OL><LI>列表项1<LI>列表项2

<UL><LI>子列表项1<LI>子列表项2</UL>

<LI>列表项3</OL><spanclass="STYLE2">超链接</span><oltype="1"><liclass="STYLE2">站内文档链接

<ultype="disc"><li>要点1</li><li>要点2</li></ul><liclass="STYLE2">站外文档链接</li></ol>课堂练习：制作诗歌目录3.2超链接

3.2.1路径绝对路径：是Internet上资源的完整地址。包括3部分：协议种类、放有所须文件的计算机地址（计算机域名）、具体文件的路径及文件名。协议://计算机域名/文件路径及文件名创建对站点以外的链接必须用绝对路径。根相对路径：从站点根文件夹到文档所经过的路程，以斜杠/开始，例如：/support/tips.html就是站点根文件夹下的support子文件夹中的一个文件的根相对路径。浏览器不能像服务器那样识别站点根目录，故与根目录相对的路径必须放在远程服务器上才能浏览。文档相对路径：相对当前文档的路径。3.2.2建立超链接建立超链接由锚点（anchor）标签<a></a>定义：它在网页上建立超文本链接。通过单击一个词、句或图片，可从此处转到另一个链接资源(目标资源)，这个目标资源有唯一的地址(URL)。以上特点的词、句或图片就称为热点。<ahref="地址"target="打开窗口方式">热点</a>属性href指定超链接的目标网页地址，包括路径和文件名属性target指定超链接文件被打开的目标窗口，有如下4个选项：_blank：将链接的文件载入到新的无标题浏览器窗口中。_parent：将链接的文件载入到父框架，若该框架非嵌入式框架，则链接到整个浏览器窗口。3.2.2建立超链接_self（默认值）：将链接的文件载入到自身框架或自身窗口中。_top：将链接的文件载入到整个浏览器窗口中，并删除所有框架。在Dreamweaver中提供了6种常用的链接：外部文档链接、书签链接、E-mail链接、无址链接、脚本链接和指向下载文件的链接。1．外部文档链接指链接到本文档之外的文档，包括站内和站外的网页。

在热字“属性”面板的“链接”框中填入超链接的外部文档地址（属性href的值)；在“目标”下拉列表框中设置超链接的目标窗口(属性target的值)。标记的格式为：<ahref=”地址”或name=”字符串”>热点</a>属性href为超文本引用，它的值为一个URL，是目标资源的有效地址。属性name指定当前文档内的一个字符串，作为链接时可以使用的有效的目标资源的地址。热点可以根据需要设置颜色，利用<body>标记中相关的属性。建立指向其他页面的链接其格式为：

<ahref=”目标文件的路径／目标文件名.html”>热点文本</a>根据目标文件与当前文件的目录关系，有如以下4种写法。1）链接到同一目录内的网页文件链接到同—目录内的网页文件的格式为：<ahref=”目标文件名.html”>热点文本</a>2）链接到下一级目录中的网页文件链接到下一级目录中的网页文件的格式为：<ahref=”子目录名／目标文件名．html”>热点文本<／a>3）链接到上一级目录中的网页文件链接到上一级目录中的网页文件的格式为：<ahref=”.／目标文件名．Html”>热点文本<／a>其中“．／”表示退到上一级目录中。4）链接到同级目录中的网页文件链接到同级目录中的网页文件的格式为：

<ahref=”..／子目录名／目标文件名．html”>热点文本<／a>5）创建指向本页中的链接要在当前页面内实现超链接，需要定义两个标记：一个为超链接标记，另一个为书签标记。超链接标记的格式为：

<ahref=”#记号名”>热点文本<／a>即单击热点文本，将跳转到“记号名”开始的文本。书签就是用<a>标记对该文本做一个记号。若有多个链接的书签名，书签名在<a>的name属性中定义。格式为：

<aname=”记号名”>目标文本附近的字符串<／a>使用了name属性的锚站称为命名锚站，它用于创建指向同一页面中指定位置的链接，以便直接跳到此位置，而不是像一般锚站那样在不同页面间跳转。命名锚站的一般语法格式为： <aname="书签名">锚站A</a>属性name的值“书签名”用来标示“锚站A”在HTML文档中的位置。要找到命名锚站所在的位置，就必须使用<ahref=“”></a>。例如，要找到上述锚站，就要编写如下代码：<ahref="#书签名">点击此处将使浏览器跳到锚站A处</a>注意：href属性赋的值若是锚站的name属性值，则必须在书签名前边加一个“#”号。2．书签链接<ahref="地址#书签名"target="打开窗口方式">热点</a>建立书签：“插入”面板的“命名锚记”按钮链接书签：#书签名。3．无址链接返回页面的无址连接<ahref=“#">热点</a>不返回页面顶端，形成手形光标<ahref="javascript:;">热点</a>4．E-mail链接（电子邮件链接） <ahref="mailto:邮件地址">热点</a>“插入”面板中的“电子邮件链接”按钮3.2.2建立超链接5．脚本链接在选中热字的link框中直接写入脚本。例：JavaScript:alert('确定删除吗')6．指向下载文件的链接链接的目标文件不是HTML文件，则作为下载文件，格式：<ahref="路径及文件名">热点</a>【例3-3】试制作外部文档链接、外部文档书签链接、本文档书签链接、E-mail链接、无址链接和脚本链接。

3.3CSS样式样式是一组可以控制文本块、段落或整篇文档外观的格式属性。使用外部样式文件可以一次控制若干篇文档的格式。CSS（CascadingStyleSheets）即级联样式表或层叠样式表通过样式名或HTML标签表示，可以控制绝大多数的传统文本格式，如字体、字号和对齐方式等，还可以指定位置、鼠标指针形状和其他特殊效果。为了防止某些浏览器不识别某些CSS样式，可以用注释标签<!---->将CSS样式括起来。

样式设计是指应用HTML样式和CSS（层叠样式表）设计网页的外观样式。CSS是CascadingStyleSheet的缩写，我们把它译为“层叠样式表”或“级联样式表”。1．样式表的优点（1）同时更新站点的许多页面，更快更容易（2）制作体积小，下载页面快（3）样式和结构分离2．CSS的基本语法和定义（1）CSS的基本语法CSS样式表的样式规则是由三个部分构成：Selector（选择器），Property（属性）和Value（属性的取值）。基本的格式如下。Selector{properties1:value1;/*第1个属性名及属性值*/properties2:value2;/*第2个属性名及属性值*/…} ●selector：第一种是HTML标签选择器，只对该标签起作用，例如body，p，a等。第二种叫class，即类选择器，必须以“．”开始，名称可以是字母和数字的组合，可应用到任何对象。第三种叫ID选择器，和类选择器类似，必须以“#”开始，名称也是字母和数字的组合，可应用到任何对象，但其有一定的局限性。如：#right{text-align:right}/*只对id="right"的段落起作用*/●property：就是指将要被修改的性质，例如color。●value：给property的值，例如给color的值可以设置为red或#00ff00。（2）CSS的定义CSS允许网站作者的网页外观以及表示方式更多控制。它们扩展能够精确页上指定元素的位置和外观并创建特殊效果。

优先级内联嵌入样式表外部样式表低高共有三种类型的级联样式表：外部样式表、嵌入样式表和内联样式表。先创建CSS样式，再对选定文本应用CSS样式。对选定文本用了某CSS样式后，若又改变了该样式的格式，则修改之前用了该样式的文本自动更新格式。图3-15“CSS样式”面板CSS样式创建之后，只对本网页有效。以往创建的CSS样式不存在于新开文件的CSS样式列表中，新网页须重新附加CSS文件。3.3.3使用CSS样式在新建CSS样式窗口中，需要设置3个参数：选择器类型样式名称样式定义的范围边框属性.b{font-family:"新宋体"; font-size:24pt;border-top-width:medium; border-right-width:medium;border-bottom-width:medium; border-left-width:medium;border-top-style:dotted; border-right-style:dotted;border-bottom-style:dotted; border-left-style:dotted;border-top-color:#FF0000; border-right-color:#000000;border-bottom-color:#0000FF; border-left-color:#00FFFF;font-style:italic; line-height:normal;color:#99FF00; margin:0.2in;padding:0.2in;}边框属性以下示例显示了边框属性的用法，效果如图所示。代码.title{font:bolderitalic;font-family:楷体_GB2312;text-align:center;background-image:url(background.jpg);border-width:thinmediumthick;border-style:solid;border-color:gray}.content{border:solid#5f9ea0thin}.author{text-align:right}BODY{ background:#f0f8ff; background-image:url();}<body><H1class="title">惜春</H1><DIVclass="content"><P>黑发不知勤学早，白首方悔读书迟。</P><Pclass=“author”>——颜真卿</P></DIV><DIVclass="content"><P>莫等闲白了少年头，空悲切。</P><Pclass=“author”>——岳飞</P></DIV></body></html>页面元素周围的空白以下示例可以显示出这三种空白的区别，效果如图所示（A表示边界、B表示边框、C表示填充）。P{margin:0.25in;border:0.25insolidblack;padding:0.25in;background:gray}页面元素周围的空白

1．“类”选择器【例3-4】在文字上应用样式。.Glow{ font-size:24pt; line-height:25pt; filter:Glow(Color=#ff0000,Strength=4); color:#FFFFFF;.glow{ font-family:"隶书","华文中宋"; font-size:36px; font-weight:normal; color:#FFFFFF; filter:Glow(Color=#ff0000,Strength=2);}.blur{ font-family:"隶书","华文中宋"; font-size:36px; color:#0000ff; filter:Blur(Add=true,Direction=135,Strength=3);}.shadow2{ font-family:"隶书","华文中宋"; font-size:36px; color:#0000ff; filter:Shadow(Color=#cccccc,Direction=135);}.shadow1{ font-family:"隶书","华文中宋"; font-size:36px; color:#0000ff; filter:DropShadow(Color=#999999,OffX=3,OffY=3,Positive=1);}【例3-5】为图片设置具有透明效果（Alpha滤镜）、风吹效果（Blur滤镜）、黑白效果（Gray滤镜）、反相效果（Invert滤镜）的样式。.Alpha

{ filter:Alpha(Opacity=100,FinishOpacity=5,Style=2,StartX=30,StartY=20,FinishX=120,FinishY=50);}<HTML><HEAD><TITLE>过滤器效果之二</TITLE><STYLE><!--.blur{filter:blur(strength=6,direction=135);width=800}.dropShadow{filter:dropShadow(color=gray,offX=3,offY=3);width=800}.glow{filter:glow(color="#ff7f00",strength=10);width=800}.mask{filter:mask(color="#238e68");width=800}.shadow{filter:shadow(color=gray,direction=135);width=800}--></STYLE></HEAD><BODY><DIValign="center"><H2>此段文本未使用效果</H2><H2class="blur">此段文本使用了blur效果</H2><H2class="dropShadow">此段文本使用了dropShadow效果</H2><H2class="glow">此段文本使用了glow效果</H2><H2class="mask">此段文本使用了mask效果</H2><H2class="shadow">此段文本使用了shadow效果</H2></DIV></BODY></HTML>CSS竖排文字样式表的文字处理属性中有两个重要的属性：writing-mode和text-align。让我们先看看它们的用法：1.writing-mode（设置对象书写方向）语法：writing-mode:lr-tb、tb-rl

参数：lr-tb：从左向右，从上往下tb-rl：从上往下，从右向左

示例：div{writing-mode:tb-rl;}2.text-align（设置对象中文本的对齐方式）语法：text-align:left、right、center、justify

参数：left：左对齐right：右对齐center：居中justify：两端对齐

示例：div{text-align:center;}课堂练习：使用CSS竖排诗歌2．“标签”选择器3．“高级”选择器body{scrollbar-face-color:#3399FF;//立体滚动条凸出部分的颜色scrollbar-highlight-color:#FFFFFF;//滚动条空白部分的颜色scrollbar-3dlight-color:#FFC097;//立体滚动条亮边的颜色scrollbar-darkshadow-color:#FFFFFF;//立体滚动条强阴影的颜色scrollbar-shadow-color:#FF3300;//立体滚动条阴影的颜色scrollbar-arrow-color:#FF3300;//上下按钮上三角箭头的颜色scrollbar-track-color:#D7EBFF;//滚动条的基本颜色}鼠标属性鼠标属性用于设置在对象上面移动的鼠标指针显示的形状，取值如表所示。值含义auto浏览器基于当前文本决定显示哪种指针crosshair简单十字形default随平台而定的默认指针（通常为箭头）hand手形move指示某物被移动的交叉箭头*-resize指示边缘被移动的箭头（*可以是n、ne、nw、s、se、sw、e以及w，分别代表北、东北、西北、等方向）text编辑文本指针（通常为I形）wait指示程序正忙、用户需要等待的沙

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论