《网站建设与网页设计从入门到精通Dreamweaver+Flash+Photoshop+HTML+CSS+JavaScript》——3.3 添加文本元素

简介: 本节书摘来自异步社区《网站建设与网页设计从入门到精通Dreamweaver+Flash+Photoshop+HTML+CSS+JavaScript》一书中的第3章,第3.3节,作者:何新起 更多章节内容可以访问云栖社区“异步社区”公众号查看。

本节书摘来自异步社区《网站建设与网页设计从入门到精通Dreamweaver+Flash+Photoshop+HTML+CSS+JavaScript》一书中的第3章,第3.3节,作者:何新起 更多章节内容可以访问云栖社区“异步社区”公众号查看。

3.3 添加文本元素

文本是传递信息的基础,浏览网页内容时,大部分时间是浏览网页中的文本,所以学会在网页中创建文本至关重要。在Dreamweaver CS6中可以很方便地创建出所需的文本,还可以对创建的文本进行段落格式的排版。

3.3.1 在网页中添加文本
文本是基本的信息载体,是网页中最基本的元素,在浏览网页时,获取信息最直接、最直观的方法就是阅读文本。下面通过实例讲述如何在网页中添加文本,如图3.21所示。


7d297c8704199600e348daca400e70a16ce312d7

1 打开原始文件CH03//index.htm,如图3.22所示。


4159db05d4c9aec4a444650bcb035f455037a072

2 将光标放置在要输入文本的位置,输入文本,如图3.23所示。

3 保存文档,按F12键在浏览器中预览,效果如图3.21所示。


28f3f7ecb00401c11ebef32dd703fc172ec05957

3.3.2 插入日期
在Dreamweaver中插入日期非常方便,它提供了一个插入日期的快捷方式,用任意格式即可在文档中插入当前时间,同时它还提供了日期更新选项,当保存文件时,日期也随着更新。插入日期的效果如图3.24所示,具体操作步骤如下。


6d9db1ff58086e76679726f7b918e2e01a2c5ef7

1 打开原始文件CH03//index.htm,如图3.25所示。

2 将光标置于要插入日期的位置,选择菜单中【插入】|【日期】命令,弹出【插入日期】对话框,如图3.26所示。

3 在【插入日期】对话框中,在【星期格式】、【日期格式】和【时间格式】列表中分别选择一种合适的格式。勾选【储存时自动更新】复选框,每一次存储文档都会自动更新文档中插入的日期,如图3.27所示。


1c130d51e63777330bfcc61645e52d569c1b52a0


!<a href=https://yqfile.alicdn.com/6c786816d0627a0c91c3947cf4c41b28b98e1fd4.png" >


99d2323f45fff72c119a304b9daa849cdab8322b

4 单击【确定】按钮,即可插入日期,如图3.28所示。


98fe9e5548f5713a9e2033bd6eb54697dbcf56d9

显示在【插入日期】对话框中的时间和日期不是当前的日期,它们也不会反映访问者查看用户网站的日期/时间。
序号5 保存文档,按F12键在浏览器中浏览效果,如图3.24所示。

3.3.3 插入特殊字符
特殊字符包含换行符、不换行空格、版权信息和注册商标等,它们是网页中经常用到的元素。当在网页文档中插入特殊字符时,在代码视图中显示的是特殊字符的源代码,在设计视图中显示的是一个标志,只有在浏览器窗口中才能显示真正面目,如图3.29所示。下面通过实例讲述版权字符的插入,具体操作步骤如下。


a6b663de570a9f7fcc865f71147fa1a436bf998d

序号1 打开原始文件CH03//index.htm,如图3.30所示。


859238c11a4f69c805b6e5b6667169583894bb67

2 将光标置于要插入特殊字符的位置,选择菜单中的【插入】|【HTML】|【特殊字符】|【版权】命令,即可插入版权,如图3.31所示。


ff500b971e0eb607fdb64f33e896415f16c37ae0

序号3 保存文档,按F12键在浏览器中浏览效果,如图3.59所示。

选择菜单中的【插入】|【HTML】|【特殊字符】|【其他字符】命令,弹出【插入其他字符】对话框,在对话框中可以选择更多的特殊字符,如图3.32所示。


170d7530aeaa7d2695c6b9dfa4cdcda15dbaf0da

3.3.4 插入水平线
水平线在网页文档中经常用到,它主要用于分隔文档内容,使文档结构清晰明了,合理使用水平线可以获得非常好的效果。一篇内容繁杂的文档,如果合理放置水平线,会变得层次分明、易于阅读。

下面通过实例讲述在网页中插入水平线的效果,如图3.33所示,具体操作步


ed6e5d475ff3f4b2f37eb4898a4a001b33a049ca

1 打开原始文件CH03//index.htm,如图3.34所示。


737135019628b33a9c0e894868d8248e9d40da62

2 将光标置于要插入水平线的位置,选择菜单中的【插入】|【HTML】|【水平线】命令,插入水平线,如图3.35所示。


cadb85ee16be6ba244d58dbb3a50d1677ecfbdb5


5b5230020351a657a7c6bb09fa57541eda64b9ca

将光标放置在插入水平线的位置,单击【常用】插入栏中的【水平线】shuipingxian按钮,也可插入水平线。在【窗口】下拉列表中选择“插入”即可把【常用】插入栏调出。
3 选中水平线,打开【属性】面板,可以在【属性】面板中设置水平线的高、宽、对齐方式和阴影,如图3.36所示。


1a61c3187ee657c9bb6a70f480a43b3477dc7ab5

在水平线【属性】面板中可以设置以下参数。

  • 【宽】和【高】:以像素为单位或以页面尺寸百分比的形式设置水平线的宽度和高度。
  • 【对齐】:设置水平线的对齐方式,包括“默认”、“左对齐”、“居中对齐”和“右对齐”4个选项。只有当水平线的宽度小于浏览器窗口的宽度时,该设置才适应。
  • 【阴影】:设置绘制的水平线是否带阴影。取消选择该项将使用纯色绘制水平线。

设置水平线颜色:在【属性】面板中并没有提供关于水平线颜色的设置选项,如果需要改变水平线的颜色,只需要直接进入源代码更改〈hr color=“对应颜色的代码”〉即可。
序号4 保存文档,按F12键在浏览器中浏览效果,如图3.33所示。

HTML代码分析
1.插入水平线hr
水平线标记用于在页面中插入一条水平标尺线,使页面看起来整齐明了。

语法:

<hr>

说明:

在网页中输入一个< hr >标记,就添加了一条默认样式的水平线。

2.水平线宽度width
默认情况下,水平线的宽度为100%,可以使用width手动调整水平线的宽度。

语法:

<hr width="宽度">

说明:

在该语法中,水平线的宽度值可以是确定的像素值,也可以是窗口的百分比。

3.水平线高度size
默认情况下,可以使用size标记用于改变水平线的高度。

语法:

<hr size="高度">

说明:

在该语法中,水平线的宽度值可以是确定的像素值,也可以是窗口的百分比。水平线的高度只能使用绝对的像素来定义。

4.水平线去掉阴影noshade
默认的水平线是空心立体的效果,可以将其设置为实心并且不带阴影的水平线。

语法:

<hr noshade>

说明:

noshade是布尔值的属性,它没有属性值,如果在< hr >元素中写上了这个属性,则浏览器不会显示立体形状的水平线,反之则无需设置该属性,浏览器默认显示一条立体形状带有阴影的水平线。

5.水平线颜色color
在网页设计过程中,如果随意利用默认水平线,常常会出现插入的水平线与整个网页颜色不协调的情况。设置不同颜色的水平线可以为网页增色不少。

语法:

<hr color="颜色">

说明:

颜色代码是十六进制的数值或者颜色的英文名称。

6.水平线排列align
水平线在默认情况下是居中对齐的,如果想让水平线左对齐或右对齐,就需要设置对齐方式。

语法:

<hr align="对齐方式">

说明:

在该语法中对齐方式可以有3种,包括center、left和right,其中center的效果与默认的效果相同。

相关文章
|
14天前
|
移动开发 IDE 前端开发
HTML基础-标签与元素:构建网页的基石
【6月更文挑战第1天】HTML是网页基础,由标签和元素定义内容结构与样式。本文介绍HTML标签(如`<p>`)和元素(包括开始、结束标签及内容),并列出常见错误:忘记闭合标签、错误嵌套顺序、不恰当使用自封闭标签及混淆标签与属性。建议遵循标准、使用IDE辅助、验证代码和持续实践来避免错误。示例代码展示基本用法:`<html><head><title>...</title></head><body>...</body></html>`。学习HTML标签与元素是前端开发入门关键。
|
1天前
|
JavaScript 前端开发 索引
深入了解JavaScript中的indexOf()方法:实现数组元素的搜索和索引获取
深入了解JavaScript中的indexOf()方法:实现数组元素的搜索和索引获取
|
2天前
|
Python
Python基础教程(第3版)中文版 第20章 项目1: 自动添加标签(纯文本转HTML格式) (笔记2)
Python基础教程(第3版)中文版 第20章 项目1: 自动添加标签(纯文本转HTML格式) (笔记2)
|
2天前
|
Python
Python基础教程(第3版)中文版 第20章 项目1: 自动添加标签(纯文本转HTML格式) (笔记)
Python基础教程(第3版)中文版 第20章 项目1: 自动添加标签(纯文本转HTML格式) (笔记)
|
3天前
|
存储 前端开发 JavaScript
HTML元素周期表
HTML元素周期表
14 1
|
9天前
|
JavaScript 前端开发
JavaScript删除数组中指定元素3种方法例子
JavaScript删除数组中指定元素3种方法例子
|
9天前
|
前端开发 JavaScript 开发者
HTML基础-块级元素与内联元素
【6月更文挑战第6天】HTML中的元素分为块级和内联元素,两者在网页布局中扮演重要角色。块级元素占用整行,可设置宽高,常用于组织结构;内联元素只占内容宽度,常用于文本样式和链接。理解它们的区别并正确选择是创建清晰布局的关键。常见问题包括错误选择元素、忽视默认样式和不熟悉`display`属性。解决方法包括根据语义选择元素、清除默认样式以及灵活使用`display`属性转换元素行为。熟练掌握这些能提升网页的语义化、可访问性和布局效率。
|
11天前
|
移动开发 前端开发 数据安全/隐私保护
HTML基础-表单元素与属性:深入浅出指南
【6月更文挑战第4天】本文介绍了HTML表单的基础知识,包括`&lt;form&gt;`标签、各种表单元素(如文本输入、密码、单选、复选、下拉菜单和提交按钮)以及相关属性。易错点包括忘记设置`name`属性、不使用`label`、忽视表单验证和不安全的提交方式。建议使用HTML5内置验证属性增强安全性,并使用`POST`方法处理敏感信息。提供的完整注册表单示例展示了这些概念的应用。
|
13天前
|
前端开发 UED SEO
HTML基础-链接与图片插入:网页的连接与视觉元素
【6月更文挑战第2天】本文介绍了HTML中`<a>`和`<img>`标签的使用,包括链接的基本结构、目标类型以及图片的插入、尺寸调整和对齐方式。常见问题涉及链接和图片路径、缺失`alt`属性及尺寸不匹配,解决方案包括正确引用资源、使用绝对URL和重视`alt`属性。通过示例代码,展示了创建链接和图片的方法,强调了提升网页用户体验的重要性。
|
14天前
|
前端开发 搜索推荐 UED
HTML基础-文本格式化标签:美化网页内容
【6月更文挑战第1天】本文介绍了HTML的文本格式化标签,包括`<b>`、`<strong>`、`<i>`、`<em>`、`<u>`、`<s>`、`<mark>`、`<small>`、`<sub>`和`<sup>`等,强调了语义化使用和避免常见错误的重要性。示例代码展示了这些标签的用法,帮助提升网页内容的可读性和吸引力。