当前位置: > 资源 > 常用软件 >

网页设计技术之Dreamweaver中文本的使用与编辑
栏目分类:常用软件   发布日期:2019-03-09   浏览次数:

大家好!文本是网页非常重要的组成部分,让我们来看看在Dreamweaver中,文本如何使用和编辑。 本部分内容的知识点结构如下图,红色方框的内容为今天要讲解的内容。学习的过程中要注意文本编辑时HTML代码与CSS的合理运用。 一、网页中文本的输入 网页中文本的

大家好!文本是网页非常重要的组成部分,让我们来看看在Dreamweaver中,文本如何使用和编辑。

网页设计技术之Dreamweaver中文本的使用与编辑

 

本部分内容的知识点结构如下图,红色方框的内容为今天要讲解的内容。学习的过程中要注意文本编辑时HTML代码与CSS的合理运用。

网页设计技术之Dreamweaver中文本的使用与编辑

 

一、网页中文本的输入

网页中文本的输入方法与其他软件没有区别,可以直接录入,也可以将复制好的内容粘贴到网页。 需要注意的有三点:分段、换行和空格输入。

网页设计技术之Dreamweaver中文本的使用与编辑

 

1、分段:当我们在某个文字后敲击"回车"键,会形成分段。分段的标志是形成一行的空行,同时代码视图中可以看到段落文本的前后会出现"<p>"和"</p>"标记。这一对"<p></p>"就是段落标记,它的作用是将其中的文本独立成一段,并在段后形成一行空行。

网页设计技术之Dreamweaver中文本的使用与编辑

 

2、换行:换行是只形成换行效果而不分段,此时不产生空行。换行的快捷操作是:Shift+回车,或者在代码视图的文本中插入换行标记"<br>"。

网页设计技术之Dreamweaver中文本的使用与编辑

 

3、输入空格:Dreamweaver中默认情况下,是不能输入连续的空格的。如何输入,请查看我之前发表的小技巧系列文章:输入连续空格方法一输入连续空格方法二

二、文本的格式编辑

Dreamweaver中也可以编辑文本的字体、大小、颜色、对齐方式等。选中要编辑的文本,查看其属性面板,属性面板分两部分,在HMTL部分可以设置的格式有:段落类型、加粗、斜体、列表和缩进(如下图):

网页设计技术之Dreamweaver中文本的使用与编辑

 

在CSS部分可以设置的格式有:字体、大小、颜色和分段(如下图):

网页设计技术之Dreamweaver中文本的使用与编辑

 

以上格式大部分是大家可以自己上手操作的,这里我讲两个需要注意的,分别是段落和字体的设置。

1、段落:在这里可以将文本设置为标题。如下图,选择"标题1"会让所选文本以DW预设的标题1格式显示,标题1的HTML标记为"<h1>…</h1>"。

网页设计技术之Dreamweaver中文本的使用与编辑

 

标题的预设一共有6个级别,即"<h1>…</h1>"至"<h6>…</h6>",其预设效果为:

网页设计技术之Dreamweaver中文本的使用与编辑

 

2、字体列表:点击"字体"时,会出现下图所示界面:

网页设计技术之Dreamweaver中文本的使用与编辑

 

在这个列表中,可能根本找不到我们想要用的字体,此时就需要点击"管理字体",在下图所示的界面设置我们要用的字体:

网页设计技术之Dreamweaver中文本的使用与编辑

 

打开管理字体界面,点开"自定义字体堆栈",在"可用字体"里找到想要的字体,双击字体名称,或者单击"<<"按钮,字体就会被列入"选择的字体",同时在"字体列表"中也会显示刚刚选择的那个字体,如下图。点击该界面左上角的"+"和"-"可以增加或删除字体列表中的字体。

网页设计技术之Dreamweaver中文本的使用与编辑

 

这里我建议大家把常用的字体做成下图1所示的列表,具体方法就是选择一种字体点一次"+",然后再选择,同时注意不要使用太过特殊的字体。如果一次性在选择的字体列表中添加了好多个,则会形成下图2所示的列表。这样的列表,其涵义为:先按黑体显示文字,如果浏览者的系统不支持黑体,则以宋体显示,再不行就以新宋体显示。当然,这在特定情况下也是有好处的。

网页设计技术之Dreamweaver中文本的使用与编辑

 

当我们设置了加粗、字体、颜色、大小等内容后,效果如下图所示,请大家关注代码视图中被框住的内容:

网页设计技术之Dreamweaver中文本的使用与编辑

 

如果我们对一段文本设置了格式后,DW默认会在段落标签的起始标签"<p>"中添加格式属性(如上图),style就是这个属性,它的值用""引起来,""内的代码格式为"名称:值;名称:值;"(如上图)。其中,font-family:'微软雅黑'用来设置字体,color:#24B8D9用来设置颜色,font-size:14px用来设置字体大小为14像素,text-align:left用来设置文本的对齐方式为左对齐,这些属性之间用分号隔开。文本的加粗用"<strong></strong>"来设置。它可以嵌套在"<p></p>"的外面。

以上就是DW中文本的输入与编辑时需要了解的知识点。在编排网页中的文本时,请大家注意以下两点:

1、同一个页面中的文本样式不要过多,以三种为宜。例如:标题都用红色、黑体、居中,18px;超链接文本都用深灰色、下划线、宋体、12px;其余文本都为黑色、宋体、12px。

2、网页的文字最好不要使用特殊字体,如毛体字这样必须要下载安装才会在系统里显示的字体。因为你的网页是给别人浏览的,如果浏览者的电脑上没有对应字体,就会以他的系统默认字体显示,那么你精心设计的版面就可能会因为字体的变化而失去原有的样子,甚至布局都会变乱。如果你的设计必须要用特殊字体支撑,就请把这个文字在PS中做成png或jpg图片,插入到网页中使用。

细心的同学,可能会问,文本能设置行距吗?如果我要做很多页面,每页的文本都得这么麻烦的设置样式吗?……这些问题都可以利用CSS样式来解决,由于篇幅太长不易于阅读,所以请关注后续发表的文章。谢谢!

相关热词:

js特效 教程 资源 资讯