DW_03在网页中输入文本

1、主讲：主讲：韩维良韩维良2022年年2月月网站建设网站建设第3章在网页中输入文本2022年2月21日星期一教育学院第一节第一节 在网页中输入文本在网页中输入文本一、文本的添加一、文本的添加直接在“文档”窗口中定位光标键入文本。二、文本的复制二、文本的复制从其他应用程序中“拷贝”“粘贴”、“选择性粘贴”;对文字部分进行的复制，粘贴，撤消，重复等操作与WORD类同，不在讲述。（记事本中“复制粘贴”会干净一些；或者在首选参数中指定）3网站建设网站建设第3章在网页中输入文本2022年2月21日星期一教育学院4设置粘贴类型：“编辑”菜单的“首选参数”中的“复制与粘贴”。网站建设网站建设第3章在网页中输入

2、文本2022年2月21日星期一教育学院第二节第二节 设置文本属性设置文本属性打开属性面板：“窗口”“属性”； 或者Ctrl+F3方法：选中文本，在属性面板中设置其属性（格式）；设置文本格式有两种方法设置文本格式有两种方法： 使用HTML标签格式化文本 使用层叠样式表（CSS）。5网站建设网站建设第3章在网页中输入文本2022年2月21日星期一教育学院使用HTML标签和CSS都可以控制文本属性，包括特定字体和大小；粗体、斜体、下划线；文本颜色等。两者区别在于，使用HTML标签仅仅对当前应用的文本有效，当改变设置时，无法实现文本自动更新。而CSS则不同，通过CSS事先定义好文本样式，当改变CSS样

3、式表时，所有应用该样式的文本将自动更新。此外，使用 CSS 能更精确地定义字体的大小，还可以确保字体在多个浏览器中的一致性。默认情况下，Dreamweaver CS5 使用 CSS 样式而不是HTML标签指定页面属性。6网站建设网站建设第3章在网页中输入文本2022年2月21日星期一教育学院7选择文本所用的CSS格式类选择文本格式类型设置文本超链接选择文本所用的字体、字形、对齐等新建或编辑CSS格式网站建设网站建设第3章在网页中输入文本2022年2月21日星期一教育学院第三节第三节 设置文本的格式类型设置文本的格式类型文本的格式类型是指文本所包含的标签是什么，如：标题、段落（正文）、预定义格式

4、等。方法：选中文本，在属性面板的HTML属性中的“格式”中选择设置。8网站建设网站建设第3章在网页中输入文本2022年2月21日星期一教育学院一、段落格式一、段落格式选中文本后设置段落格式，自动加上段落标签。或者输入文本后，再输入回车，自动生成一个段落。二、标题格式二、标题格式选中文本后设置某级标题格式，自动加上该标题标签。9网站建设网站建设第3章在网页中输入文本2022年2月21日星期一教育学院三、预定义格式三、预定义格式选中文本后设置预定义格式，自动加上预定义格式标签。预定义格式中可以包含多个空格，任意回车，可用空格任意编排文本，凡被标签包含的内容在浏览器中原样显示。10网站建设网站建设第

5、3章在网页中输入文本2022年2月21日星期一教育学院第四节第四节 设置文本类样式设置文本类样式方法：选中欲设置样式的文本，在属性面板的HTML中的类中选择已有的CSSCSS样式样式。单击“附加样式表”，可以将已有的样式文件链接或导入到本网页中，再设置样式。11网站建设网站建设第3章在网页中输入文本2022年2月21日星期一教育学院第五节第五节 设置字设置字体属性体属性一、设置字体类型一、设置字体类型方法：选中欲设格式 的 文 本 ， “ 格式”“字体”单击编辑字体列表可以添加并编辑字体。12网站建设网站建设第3章在网页中输入文本2022年2月21日星期一教育学院二、设置字体颜色二、设置字体颜

6、色方法：选中欲设格式的文本，“格式”“颜色”，再在调色盘中设置某种颜色。在网页中颜色表示法有三种：1、颜色名称(W3C标准的16色名称)13名称名称颜色颜色名称名称颜色颜色名称名称颜色颜色名称名称颜色颜色aqua天蓝gray深灰navy深蓝silver浅灰black纯黑green深绿olive褐黄teal靛青blue浅蓝lime浅绿purple深紫white亮白fuchsia品红maroon深红red大红yellow明黄网站建设网站建设第3章在网页中输入文本2022年2月21日星期一教育学院2、百分比合成颜色方法：RGB(*%,*%,*%)，分别代表红、绿、蓝色比重值。最小比重：0%；最大比重

7、：100%如：RGB(0%,0%,0%)表示黑色 RGB(100%,100%,100%)表示白色14网站建设网站建设第3章在网页中输入文本2022年2月21日星期一教育学院3、数字合成颜色方法：RGB(*,*,*)，分别代表红、绿、蓝色颜色值0255。如：RGB(0,0,0)表示黑色 RGB(255,255,255)表示白色也可以用十六进制数合成法：#RRGGBB每两位代表一种色彩值：00FF。如：#000000表示黑色 #FFFFFF表示白色15网站建设网站建设第3章在网页中输入文本2022年2月21日星期一教育学院三、设置文本加粗和斜体三、设置文本加粗和斜体选中文本，单击属性面板的HTML

8、属性中的“B”、“I”按钮。16网站建设网站建设第3章在网页中输入文本2022年2月21日星期一教育学院四四、在属性面板的在属性面板的CSSCSS中设置字体的各属性中设置字体的各属性方法：在属性面板的CCS属性中“编辑规则”，定义一个CSS样式：Style1。17选择文本所用的字体、字形、对齐等新建或编辑CSS格式网站建设网站建设第3章在网页中输入文本2022年2月21日星期一教育学院18网站建设网站建设第3章在网页中输入文本2022年2月21日星期一教育学院设置字体、大小、加粗、斜体等属性，再应用到某段文本中；除了在样式定义对话框中定义以外，还可以在属性面板的CCS属性中设置：字体、大小、字

9、形、颜色等。如字体大小:19网站建设网站建设第3章在网页中输入文本2022年2月21日星期一教育学院第六节第六节 设置段落版式设置段落版式段落是指描述一个主题并且格式统一的一段文字。在文档窗口中，输入一段文字后按Enter键，这段文字就显示在标签中。直接按Enter键可添加一个新的段落硬回车硬回车(标签标签) )。一、强制文本换行一、强制文本换行按“Shift+Enter”键可实现段内换行软回车软回车（标签）标签）或者：插入HTML特殊字符换行符。20网站建设网站建设第3章在网页中输入文本2022年2月21日星期一教育学院如需换行分段，可以按下Enter键；如需换行但不分段，可以按住Shift

10、键的同时按下Enter键。分行和分段的区别分行和分段的区别:直接按Enter键进行分段，按Shift+Enter组合键进行分行；分段行距较大分段行距较大，适合主题内容相差比较大的文本划分；分行行间距较小分行行间距较小，常见于诗歌等格式比较工整的内容的划分。21网站建设网站建设第3章在网页中输入文本2022年2月21日星期一教育学院二、设置文本对齐二、设置文本对齐文本的对齐方式是指文字相对于文档窗口或浏览器窗口在水平位置的对齐方式。主要有四种：左对齐，居中对齐，右对齐，两端对齐。HTML对齐方式：选中文字，“格式”“对齐”左、中、右、两端22网站建设网站建设第3章在网页中输入文本2022年2月2

11、1日星期一教育学院设置后代码如下： 教育学院另外，也可以CSS属性中设置，建立CSS样式代码。23网站建设网站建设第3章在网页中输入文本2022年2月21日星期一教育学院三、设置段落文本缩进和凸出三、设置段落文本缩进和凸出为了突出或强调某些文本，经常会用到“缩进文本” 或者“文本凸出”命令，相对于页面左侧，缩进留出一定的空白区域，使页面更美观。在“属性”面板中单击“文本缩进”按钮 或“文本凸出”按钮 ；或者“格式 缩进”或“格式 凸出”命令，使段落向右移动或向左移动。按快捷键或快捷键。网站建设网站建设第3章在网页中输入文本2022年2月21日星期一教育学院第七节第七节 设置段落信息列表样式设置

12、段落信息列表样式一、创建列表一、创建列表选中多行列表文字，属性面板中单击“HTML”，单击“项目列表”、“编号列表”按钮；或者选择“格式”菜单中的“列表”，然后选择所需的列表类型：“项目列表”、“编号列表”或“定义列表”。25网站建设网站建设第3章在网页中输入文本2022年2月21日星期一教育学院二、多层列表嵌套二、多层列表嵌套结合段落缩进与列表功能，可以实现列表嵌套。对于多级列表,使用“文本缩进”和“文本凸出”按钮创建下级列表。26网站建设网站建设第3章在网页中输入文本2022年2月21日星期一教育学院三、设置列表属性三、设置列表属性方法：将插入点置于欲设置项目符号或编号的文本中，单击“属性

13、”面板中的“列表项目”按钮，或者选择“格式”菜单的“列表”的“属性”命令。“列表属性”对话框中进行设置。27网站建设网站建设第3章在网页中输入文本2022年2月21日星期一教育学院28编号列表样式项目列表样式列表类型1、“列表类型”中选择列表类型。2、在“样式”中选择列表的样式。3、对于编号列表，在“开始计数”中设置开始编号。可以在一个列表中从插入点所在的行开始新建一个列表项，选择其样式，对于编号列表还可以重设开始编号网站建设网站建设第3章在网页中输入文本2022年2月21日星期一教育学院第八节第八节 设置文本的链接设置文本的链接方法：方法：选中要设置超链接的文本文字,然后:直接在链接栏后将“

14、指向文件”图标拖向目标文件。（站内的链接多用此法）单击链接栏后的浏览浏览按钮，用于指定站内的链接。直接输入链接地址（相对或绝对均可）。 29网站建设网站建设第3章在网页中输入文本2022年2月21日星期一教育学院设置超级链接的属性设置超级链接的属性主要是选择设置被链接文档要打开的位置；（选中超级链接或将单击之，在属性面板的“目标”栏中选择）。_blank_blank在新建窗口（或者新标签）中加载链接网页。 _self_self将链接网页加载到与链接相同的框架或窗口中，该目标是默认值。 30网站建设网站建设第3章在网页中输入文本2022年2月21日星期一教育学院_parent_parent在父框

15、架页或包含该链接的框架窗口中加载链接文档。如果包含链接的框架不是嵌套的，则链接文档将加载到整个浏览器窗口中。 _top_top将在整个浏览器窗口中加载链接文件，同时移除所有框架。Parent和top用于框架网页。 另外还要注意，当链接到不同类型的文件时，用户单击访问时处理方法不同，对于网页文件，则在浏览器中打开，对于其它类型文件如：ZIP压缩文件，则会提示用户下载。31网站建设网站建设第3章在网页中输入文本2022年2月21日星期一教育学院第九节第九节 在文本中插入特殊字符在文本中插入特殊字符一、快速可视化插入特殊字符一、快速可视化插入特殊字符选择“插入/HTML特殊字符”；32网站建设网站建

16、设第3章在网页中输入文本2022年2月21日星期一教育学院也可以在“插入”栏中，选择“字符”类别并选择所需的字符。如：版权符号等。编辑界面中不显示，需要预览知道效果。 33网站建设网站建设第3章在网页中输入文本2022年2月21日星期一教育学院二、通过代码方式输入特殊字符二、通过代码方式输入特殊字符在代码视图中，输入“&”字符，在弹出的列表中选择欲输入的特殊字符，自动输入对应字符的代码。列表中左侧蓝色显示的特殊字符原型，右侧为其代码。列表中代码化的字符比较多。34网站建设网站建设第3章在网页中输入文本2022年2月21日星期一教育学院三、快速输入空格三、快速输入空格3 3法法空格的添加

17、空格的添加：HTML只允许字符之间包含一个空格；若要在文档中添加其他空格，必须添加连续空格。1、在设计视图中选择“插入”“HTML”“特殊字符”“不换行空格”。在“插入”栏中，选择“文本”，然后单击最右侧下拉列表框中“不换行空格”。按按 Ctrl+Shift+Ctrl+Shift+空格键空格键 35网站建设网站建设第3章在网页中输入文本2022年2月21日星期一教育学院36单击之单击之网站建设网站建设第3章在网页中输入文本2022年2月21日星期一教育学院设置自动添加不换行空格的首选参数设置自动添加不换行空格的首选参数选择“编辑”“首选参数”命令，在“首选参数”对话框的 “常规”类别中选中“允

18、许多个连续的空格”复选框，单击“确定”。此时再把光标插入到需要空格的地方，连续按下空格键，网页就可以输入多个空格了。 37网站建设网站建设第3章在网页中输入文本2022年2月21日星期一教育学院2、在代码视图中输入“&nbsp”代码。3、中方输入法状态下，输入全角空格即可。38网站建设网站建设第3章在网页中输入文本2022年2月21日星期一教育学院第十节第十节 插入水平线插入水平线单击欲插入处，选择“插入/HTML水平线”；或在“插入”栏中，选择“HTML” ，然后单击“水平线”按钮。修改水平线属性修改水平线属性：选中水平线在属性面板上可以设置水平线的粗细、对齐方式及是否有阴影。39网站建设网站建设第3章在网页中输入文本2022年2月21日星期一教育学院在Dreamweaver中，水平线的格式颜色单一，可以用代码方式修改它的颜色。切换到代码和设计视图方式，选中插入的水平线，在代码窗口中，找到选中的标签，在r后输入一个空格，出现该标签的属性列表框，双击color属性，并在调色板中选择合适的颜色。 用代码法改变某用代码法改变某HTMLHTML标签属性的方法，是标签属性的方法，是DWDW最具特最具特色的色的。属性面板中的属性毕竟有限。40网站建设网站建设第3章在网页中输入文本2022年2月21日星期一