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

下载本文档

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

文档简介

第1篇第3章网页中的文本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插入文本、符号、日期软回车和硬回车特殊字符日期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{}的优先级

3.1.4建立列表与列表有关的标签为<ul>、<ol>、<li>、<menu>、<lh>、<dl>、<dt>、<dd>等，格式、功能和样例见表3-2。通过文本的“属性”面板建立列表【例3-2】混合列表示例3.2超链接

3.2.1路径绝对路径：是Internet上资源的完整地址。包括3部分：协议种类、放有所须文件的计算机地址（计算机域名）、具体文件的路径及文件名。协议://计算机域名/文件路径及文件名

创建对站点以外的链接必须用绝对路径。根相对路径：从站点根文件夹到文档所经过的路程，以斜杠/开始，如/html/*.htm。浏览器不能像服务器那样识别站点根目录，故与根目录相对的路径必须放在远程服务器上才能浏览。文档相对路径：相对当前文档的路径。3.2.2建立超链接建立超链接由锚点（anchor）标签<a></a>定义：<ahref="地址"target="打开窗口方式">热点</a>属性href指定超链接的目标网页地址，包括路径和文件名属性target指定超链接文件被打开的目标窗口，有如下4个选项：_blank：将链接的文件载入到新的无标题浏览器窗口中。_parent：将链接的文件载入到父框架，若该框架非嵌入式框架，则链接到整个浏览器窗口。_self（默认值）：将链接的文件载入到自身框架或自身窗口中。_top：将链接的文件载入到整个浏览器窗口中，并删除所有框架。在Dreamweaver中提供了6种常用的链接：外部文档链接、书签链接、E-mail链接、无址链接、脚本链接和指向下载文件的链接。3.2.2建立超链接1．外部文档链接指链接到本文档之外的文档，包括站内和站外的网页。在热字“属性”面板的“链接”框中填入超链接的外部文档地址（属性href的值)；在“目标”下拉列表框中设置超链接的目标窗口(属性target的值)。2．书签链接<ahref="地址#书签名"target="打开窗口方式">热点</a>

建立书签：“插入”面板的“命名锚记”按钮链接书签：#书签名。3．无址链接

返回页面顶端，形成手形光标<ahref="#">热点</a>不返回页面顶端，形成手形光标<ahref="javascript:;">热点</a>3.2.2建立超链接4．E-mail链接（电子邮件链接）

<ahref="mailto:邮件地址">热点</a>“插入”面板中的“电子邮件链接”按钮5．脚本链接

在选中热字的link框中直接写入脚本。例：JavaScript:alert('确定删除吗')6．指向下载文件的链接链接的目标文件不是HTML文件，则作为下载文件，格式：<ahref="路径及文件名">热点</a>【例3-3】试制作外部文档链接、外部文档书签链接、本文档书签链接、E-mail链接、无址链接和脚本链接。3.3样式样式是一组可以控制文本块、段落或整篇文档外观的格式属性。使用外部样式文件可以一次控制若干篇文档的格式。CSS（CascadingStyleSheets）即级联样式表或层叠样式表通过样式名或HTML标签表示，可以控制绝大多数的传统文本格式，如字体、字号和对齐方式等，还可以指定位置、鼠标指针形状和其他特殊效果。

为了防止某些浏览器不识别某些CSS样式，可以用注释标签<!---->将CSS样式括起来。3.3.1CSS语法CSS样式表位于XHTML代码中的head标签内，由3部分构成：选择符（selector）、属性（properties）和属性值（value）：Selector{properties1:value1;/*第1个属性名及属性值*/properties2:value2;/*第2个属性名及属性值*/…}

3.3.1CSS语法规则 ：（1）标签选择符和选择符组：把相同属性和值的标签组合起来书写，用逗号隔开。如：p,table{font-size:10pt}

（2）类选择符：可用于任意标签的自定义样式，标签名与自定义样式名用西文点分隔。如：p.left{text-align:left}/*定义段落居左*/（3）ID选择符：只对某特定元素定义的单独的样式。如：#right{text-align:right}/*只对id="right"的段落起作用*/（4）包含选择符：定义具有包含关系的元素样式。若标签1内包含标签2，包含选择符只对标签1内的标签2有效，对单独的标签1或标签2无效。

如：Tablea{font-size:16px}/*只对表格内的链接起作用*/样式表具有层叠性，也称为继承性，即内层标签的样式继承外层标签的样式。

3.3.2CSS样式应用先创建CSS样式，再对选定文本应用CSS样式。对选定文本用了某CSS样式后，若又改变了该样式的格式，则修改之前用了该样式的文本自动更新格式。图3-15“CSS样式”面板CSS样式创建之后，只对本网页有效。以往创建的CSS样式不存在于新开文件的CSS样式列表中，新网页须重新附加CSS文件。3.3.3使用CSS样式在新建CSS样式窗口中，需要设置3个参数：选择器类型样式名称样式定义的范围3.3.3使用CSS样式1．“类”选择器【例3-4】在文字上应用样式。【例3-5】为图片设置具有透明效果（Alpha滤镜）、风吹效果（Blur滤镜）、黑白效果（Gray滤镜）、反相效果（Invert滤镜）的样式。2．“标签”选择器3．“高级”选择器【例3-6】试取消鼠标指向超链接文本时超链接文本上的下划线，并改变鼠标指向时的手形光标。3.3.4引用外部CSS文件与导出样式表1．引用外部CSS文件“链接”是通过指针指向外部CSS文件，“导入”相当于存在内部样式表中，这个区别可以从它们在代码中的位置看到。<head><styletype="text/css"><!--@importurl("CSS/Level3_3.css");/*导入的CSS文件*/.a{ font-family:"隶书","华文中宋";/*自定义名为.a的内部CSS样式*/ font-size:36px; }--></style><linkhref="CSS/Level2_Times_Text.css"rel="stylesheet"type="text/css"/>/*链接的CSS文件*/</head>【例3-7】在系统中查找h

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

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

最新文档

评论

0/150

提交评论