DW4网页中的文本对象

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,Dreamweaver 应用技术,Dreamweaver,MX,2004,实训教程讲义,第,4,章 网页中的文本对象,重点内容：,输入文本,格式化文本,创建项目列表,设置,HTML,样式,创建层叠样式表,查找与替换,1,Dreamweaver 应用技术,Dreamweaver,MX,2004,实训教程讲义,一、输入文本对象,在Dreamweaver MX 2004中，编辑文本如同在Word等文字处理软件中一样方便，用户可以很轻松地实现文本的各种操作。如需要在已有的文本中查找某一个词汇，直接利用其查找命令即可实现。,1. 输入普通文本,在Dreamweaver中输入文本的方法与在Word中输入文本的方法基本相同。先确定插入点，然后调整好输入法，直接输入所需内容即可。,在输入过程中我们会遇到3种换行：,自动换行：在输入文字时，若一行的长度超过了Dreamweaver窗口的显示范围，文字将自动换到下一行。自动换行的好处在于不管浏览器窗口的大小，网页文字都将依照窗口大小自动换行，避免超出水平页面之外而需要移动滚动条浏览的情况。,利用Enter键换行（硬换行）：按Enter键，文字成段，且上下段各空一行。,利用Shift + Enter键换行（软换行）：如果想要将文字手动换行，中间又不能出现空白行，可以按Shift + Enter键。,2,Dreamweaver 应用技术,Dreamweaver,MX,2004,实训教程讲义,一、输入文本对象,2. 导入Word文档,如果用户已经在Word文档中将所需的信息收集完毕，可直接导入到Dreamweaver中。导入方法：选择【文件】|【导入】|【Word文档】命令，从打开的【打开】对话框中选择需要导入到Dreamweaver的Word文档，选择完毕后单击【确定】按钮，即可完成Word文档的导入，效果 如下图所示。,提示：在Dreamweaver中，可以导入在Microsoft Word中保存为HTML文件的文档，然后使用【命令】|【清理Word的HTML】命令删除Word生成的无关HTML代码。,3,Dreamweaver 应用技术,Dreamweaver,MX,2004,实训教程讲义,一、输入文本对象,3. 插入特殊字符,某些特殊字符在HTML中以名称或数字的形式表示，它们被称为实体。HTML包含版权符号(）。,HTML在代码中使用尖括号，但有时候在网页中可能会用到“大于”或“小于”这样的特殊字符，此时就不能让Dreamweaver将它们解释为代码。这种情况下，我们应该使用表示小于()。,在Dreamweaver MX 2004中，这些特殊字符可以通过选择【插入】|【HTML】|【特殊字符】命令，从弹出的下一级菜单（如右图所示）中选择要插入的特殊符号，如【注册商标】。,4,Dreamweaver 应用技术,Dreamweaver,MX,2004,实训教程讲义,一、输入文本对象,下面我们练习在页面中插入、及字符。,(1) 选择【插入】|【HTML】|【特殊字符】|【其他字符】命令，打开【其他字符】对话框，如右图所示。,(2) 单击要插入字符的位置，单击【确定】按钮。,(3) 弹出提示对话框，提示用户“文档不使用西欧字符编码，则特殊字符字符可能不会出现在所有浏览器中”，单击【确定】按钮，如右图所示。,(4) 以同样的方式打开【其他字符】对话框，选择号，连续单击【确定】按钮。,(5) 选择【插入】|【HTML】|【特殊字符】|【其他字符】|【注册商标】命令，插入字符。,5,Dreamweaver 应用技术,Dreamweaver,MX,2004,实训教程讲义,一、输入文本对象,4. 添加注释,将光标移到想要插入批注的地方，然后单击【插入】栏中【常规】类的【插入注释】按钮 ，弹出【注释】对话框，如左下图所示。,将批注内容加入到设计视图后，在设计模式下是不可见；如果切换至代码模式下，会见到如右下图所示的效果。,批注内容在代码视图下是可见的,批注内容在设计视图下以这种符号表示，在浏览网页时这种符号是不可见的,6,Dreamweaver 应用技术,Dreamweaver,MX,2004,实训教程讲义,一、输入文本对象,. 插入更新日期,Dreamweaver提供了一个方便的日期对象，使用该对象可允许用户选择自己喜欢的格式插入当前日期（包含或不包含时间都可以），而且还可以选择在每次保存文件时都自动更新该日期。本实例中我们介绍如何在网页中插入可自动更新的日期。,(1) 将光标置于要插入的位置，选择【插入】|【日期】命令，打开【插入日期】对话框，如右图所示。,(2) 从【星期格式】下拉列表框中选择【星期四】。,(3) 从【日期格式】列表框中选择【1974年3月7日】。,(4) 选择【储存时自动更新】复选框，这样在每次保存文档时都可更新插入的日期,(5) 设置完毕后单击【确定】按钮即可完 成日期的插入，如右图所示。,7,Dreamweaver 应用技术,Dreamweaver,MX,2004,实训教程讲义,一、输入文本对象,6. 插入HTML源代码,在默认状态设计视图下是无法插入HTML源代码的，即使插入也只能以文本的形式出现。要插入HTML源代码，则必须切换至代码模式或拆分模式下，此时插入HTML源代码才能显示相应效果。,比如要在文档中插入多个连续空格，如果我们在视图模式下插入，则会自动将其识别成空格，如下图所示。,8,Dreamweaver 应用技术,Dreamweaver,MX,2004,实训教程讲义,二、格式化文本,文本格式一般包括文字的字体、字号、颜色及文本的对齐方式等。下面通过实例来介绍如何设定文本的格式。,1. 设置字符格式,在网页中，人们往往使用一些加粗、加斜的文字，或者通过更改文字的大小、字体及颜色来美化网页。设置字符的字体、字号、斜体、加粗等，可以通过单击【属性】面板中的【字体】、【大小】、【粗体】、【斜体】和【颜色】来实现。,将页面中的“悠然而过”设置为26号隶书粗体颜色代码为#FF00FF。,(1) 选择文档中的“悠然而过”字样，如右图所示。,(2) 单击【字体】下拉列表框，从中选择【隶书】选项。,(3) 单击【大小】下拉列表框，从中选择【26】选项。,(4) 在【颜色】右侧的文本框中输入颜色代码#FF00FF。,(5) 单击【粗体】按钮，得到如右图所示的效果。,9,Dreamweaver 应用技术,Dreamweaver,MX,2004,实训教程讲义,二、格式化文本,2. 使用段落和标题,使用【属性】面板中的【格式】下拉列表框，可设置所选文本（一般是标题文本）的段落样式。“段落”是应用标签的默认格式，“标题 1”添加标签，设置该选项可以将所选的文本设置成各种标题。Dreamweaver中提供的标题号越小，字体越大，如下图所示。,要为某个段落设置标题样式，只需将光标置于该段或选择整个段落，然后选择【属性】面板【格式】下拉列表框中的任意一种标题样式即可。,10,Dreamweaver 应用技术,Dreamweaver,MX,2004,实训教程讲义,二、格式化文本,3. 对齐文本,对齐方式的作用对象是整个段落文字，而无论光标是在该段的开始处、结尾处，还是在段落中间。将光标插入到需对齐的段落中，单击【左对齐】按钮 ，【居中对齐】按钮 ，【右对齐】按钮 ，即可将段落对齐，如下图所示。,4. 使用扩展和缩进,在【属性】面板上还可以利用段落扩展/缩进按钮扩展和缩进段落。将光标置于要扩展或缩进,的段落，单击【属性】面板中的【文本凸出】按钮 ，或单击【属性】面板中的【文本缩进】按钮 ，可对选择的段落进行扩展或缩进。,11,Dreamweaver 应用技术,Dreamweaver,MX,2004,实训教程讲义,二、创建项目列表,在网页制作时经常用到文本的另一种形式，这就是项目列表。项目列表按序可分为无序列表和有序列表两种形式。无序项目列表有一比较特殊的列表图片项目列表。,有时为了方便说明某事或某项内容，在使用项目列表时可能还会用到嵌套项目列表，即在当前项目列表下还包含有一层或多层项目列表,1. 无序项目列表,无序列表通常用各种几何符号来表示其列表关系，其主要用于一种并列关系的元素组合，各列表项之间并不存在先后主次的顺序。,如果要创建无序项目列表，应先选择要应用无序项目符号的所有段落，然后单击【属性】面板中的【项目列表】按钮 即可为文本添加项目符号。默认状态下使用的项目符号为“点”，我们可以根据需要更改 项目符号。,12,Dreamweaver 应用技术,Dreamweaver,MX,2004,实训教程讲义,二、创建项目列表,(1) 选择要添加无序项目符号的段落，单击【属性】面板中的【项目列表】按钮，如左图1所示。,(2) 选择【文本】|【列表】|【属性】命令，打开如左图2所示的【列表属性】对话框。,(3) 从【样式】下拉列表框中选择【正方形】选项，设置完毕后单击【确定】按钮，得到如左图3所示的项目列表（此时符目符号变为正方形）。,对于图片项目列表，简单的说就是在每一段的前面插入一张小图标，如左图4所示。,提示：列表类型共分为共类：项目列表、编号列表、目录列表和菜单列表。 选择【项目列表】时，【样式】下拉列表框中列出了【项目符号】 和【正方形】两个可选项。如果不选择的话，默认使用的是【项止 符号】。,13,Dreamweaver 应用技术,Dreamweaver,MX,2004,实训教程讲义,二、创建项目列表,2. 有序项目列表,有序项目列表也称为编号列表代表了一种进程，各列表项之间存在着“从此到彼”的过程，通常用阿拉伯数字或字母等有序符号表示。,如果要创建有序项目列表，应先选择要应用有序项目符号的所有段落，然后单击【属性】面板中的【编号列表】按钮即可为所选对象设置编号。默认状态下使用的编号为“数字序列”，我们可以根据需要更改编号。,(1) 选择要添加有序项目符号的段落，单击【属性】面板中的【编号列表】按钮，如右图所示。,(2) 选择【文本】|【列表】|【属性】命令，打开如右图所示的【列表属性】对话框。,(3) 从【样式】下拉列表框中选择【大写罗马字母】选项，设置完毕后单击【确定】按钮，得到如右图所示的项目列表。,14,Dreamweaver 应用技术,Dreamweaver,MX,2004,实训教程讲义,二、创建项目列表,3. 嵌套项目列表,如果想把不同级别的文本内容用列表的形式表现出来，则需要用到项目列表的嵌套。创建项目列表的嵌套，需要用到文本属性栏上的段落扩展/缩进按钮。,为利用项目列表创建嵌套项目列表，先选择需要进行操作的列表项。然后【属性】面板中的【文本缩进】按钮 ，向右缩进形成不同级子列表项。如果单击【属性】面板中的【文本扩展】按钮 ，则列表项将恢复原来的设置。,(1) 选择文档中所有要添加项目符号的段落，单击【属性】面板中的【项目列表】按钮，如右图所示。,(2) 选择“输入普通文本”和“导入Word文档”两段，单击【属性】面板中的【文本缩进】按钮。,(3) 选择“设置字符格式”和“使用段落和标题”两段，单击【属性】面板中的【文本缩进】按钮，得到如右图所示的嵌套项目列表。,15,Dreamweaver 应用技术,Dreamweaver,MX,2004,实训教程讲义,四、HTML样式,虽然Macromedia Dreamweaver允许不考虑HTML源代码的编写就可以建立与编辑网页，但有的时候还是需要懂得一些HTML知识；通过所编辑HTML代码能够帮助控制或修改网页中出现的问题。,例如，如果在文档中选择了一段正文并应用了新的字体，但结果只能对部分正文起作用。打开代码显示器可以发现关闭的标签位于正文的中间，所以不得不移动标签到正文结束的位置。,1. 什么是HTML样式,HTML是Hyper Text Markup Language(超文本标识语言)的缩写，是构成网页最基本的元素。目前最常用的网页编辑工具(如FrontPage 2000、Netscape网页设计师等)都是建立在HTML之上，用它们制作的网页都可以转换成HTML源代码。此外，一些常用的脚本语言(如JavaScript、VBScript等)也都是建立在HTML之上，以HTML为框架来制作网页。,16,Dreamweaver 应用技术,Dreamweaver,MX,2004,实训教程讲义,四、HTML样式,HTML是一种描述性语言，通过标签(markup)描述不同的内容。HTML文件可以解释文本，并通过特殊的标签告诉浏览器如何显示文件内容。例如，I标签可以控制文本的倾斜，在HTML中添加的标签告诉浏览器在此标签之后的文本将显示为斜体；在HTML中添加的标签告诉浏览器在此标签之后的文本将恢复为默认字体。,HTML不但可以解释文本并告诉浏览器将显示什么样的字符格式，还可以为一些标签设置属性。例如，可以指定图像在标签内部的排列方式，排列方式是图像标签的一个属性。,Dreamweaver通过HTML面板、代码视图与快速标签编辑器为HTML提供了通道，同时还提供了帮助理解与编写HTML代码的Dreamweaver参考面板。,17,Dreamweaver 应用技术,Dreamweaver,MX,2004,实训教程讲义,四、HTML样式,2. 应用HTML样式,Dreamweaver MX 2004中为文本设置字体、字号或文本颜色时，系统会自动生成一个样式，如果要为其余文本设置该样式时，可以直接应用，无需在单独进行设置。,例如我们在4.2.1节中为“悠然随笔”字样设置了文字格式，系统自动将其保存为样式，如style7，如果要为其他文本设置该样式，只需选择要设置样式的文本，然后打开【属性】面板中的【样式】下拉列表框，从中选择【style7】选项，如图左下图所示，得到如右下图所示的效果。,18,Dreamweaver 应用技术,Dreamweaver,MX,2004,实训教程讲义,四、HTML样式,3. 编辑和删除样式,一个网页中不可能只含有一个样式，在制作网页的过程中可能会颜色很多的样式，如果觉得样式过多我们可以将其删除；如果觉得样式不理想，可以对其进行编辑。,(1) 打开【属性】面板中的【样式】下拉列表框，从中选择【管理样式】选项，打开【】对话框。,(2) 单击其中的【编辑】按钮，打开如图4-28所示的【.style7的CSS样式定义】对话框，将颜色代码更改为#0000FF，设置完毕后单击【确定】按钮，完成样式编辑。,(3) 回到【】对话框，如果要删除该样式，直接单击【删除】按钮即可。,(4) 完成操作后，单击【完成】按钮，退出【】对话框,。,19,Dreamweaver 应用技术,Dreamweaver,MX,2004,实训教程讲义,五、,层叠样式表CSS,样式表定义控制正文中块和区域界面属性格式的展示效果，一个样式表包括一个文档所有的样式。例如，在Dreamweaver中的文字都是黑色的，如果想将网站设置的多样化，就必须自己动手一一设置，这样一来即费力，又费时间。应用CSS样式表，可使这些工作变得简单许多。,1. CSS简介,CSS即Cascading Style Sheets(级联样式单)的缩写，一般又常称之为风格样式单、层叠样式表，由World Wide Web Consortium(全球广域网协会，简称W3C)制定。CSS定义了控制元素外观的样式属性，例如字体、颜色、填充、边距和字间距等。在Dreamweaver中允许用户设置所有的CSS样式属性。比如，想让链接字未点击时是蓝色的，当鼠标移上去后字变成红色的且有下划线，这就是一种风格。通过设立样式表，我们可以统一地控制HMTL中各标志的显示属性。,20,Dreamweaver 应用技术,Dreamweaver,MX,2004,实训教程讲义,五、,层叠样式表CSS,在主页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。它的作用可以达到：,几乎在所有的浏览器上都可以使用,。,以前一些非得通过图片转换实现的功能，现在只要用,CSS,就可以轻松实现，从而更快地下载页面。,使页面的字体变得更漂亮，更容易编排，使页面真正赏心悦目,。,可以轻松地控制页面的布局,。,可以将许多网页的风格格式同时更新，不用再一页一页地更新了。可以将站点上所有的网页风格都使用一个,CSS,文件进行控制，只要修改这个,CSS,文件中相应的行，那么整个站点的所有页面都会随之发生变动。,21,Dreamweaver 应用技术,Dreamweaver,MX,2004,实训教程讲义,五、,层叠样式表CSS,2.,CSS的基本语法,在Dreamweaver中查看CSS的语法，可通过单击状态栏上的【代码】图标，切换到代码视图模式，如下图所示。辨别CSS语法最简单的方法就是查找“span”标记符，凡是包含在标记符之间的部分，就是CSS语法。而卷标一定放在与卷标之间，所以很容易找到。,CSS可将原有的HTML卷标定义成自己想要的效果，其基本语法是在卷标之后加上符号，在此符号内填入CSS所设置的HTML属性。例如将H2的卷标的字号定义成16号，字体颜色为蓝色，语法大致如下：,h2font-size: 16px; color: #0000FF,22,Dreamweaver 应用技术,Dreamweaver,MX,2004,实训教程讲义,五、,层叠样式表CSS,3.,创建CSS样式,如果要应用【CSS样式】面板创建CSS样式表，应选择【窗口】|【CSS样式】命令，打开【CSS样式】面板，如左下图所示。,【CSS样式】面板中下侧按钮从右到右各功能说明如下。,附加样式表 ：单击此图标打开【链接外部样式表】对话框，从中选择外部的样式应用于当前的文档中。,新建CSS样式 ：单击此图标可以打开【新建CSS样式】对话框，新建一个样式。,编辑样式 ：单击此图标可以打开相应的CSS样式定义对话框，编辑一个样式。,删除样式 ：选中样式后单击此图标可以删除样式。,单击【新建CSS样式】按钮打开如,右下,图所示的【新建CSS样式】对话框，选择【选择器类型】后，在【名称】文本框中输入名称，并设置定义的范围，如是仅对该文档还是相对于整个站点,。,23,Dreamweaver 应用技术,Dreamweaver,MX,2004,实训教程讲义,五、,层叠样式表CSS,设置完毕后单击【确定】按钮，保存样式后打开定义样式对话框，在该对话框中可自由设置CSS样式，设置完毕后单击【确定】按钮即可。,下面以创建一个名为“CSS1”的样式，要求此样式的字体为仿宋，颜色为红色，字号为24号，背景为淡蓝色。,(1) 单击【CSS样式】面板【新建CSS样式】按钮，打开【新建CSS样式】对话框。,(2) 在【新建CSS样式】对话框的【名称】选项后的文本框中输入样式名称为“CSS1”。在【定义在】选项组中选择【新建样式表文件】单选按钮，单击【确定】按钮。,(3) 打开【保存样式表文件为】对话框，输入样式名称CSS1，单击【保存】按钮。,(4) 打开【.CSS1的CSS样式定义在（CSS1.css中）】对话框，选择【分类】列表框中的【类型】选项，从【字体】下拉列表框中的【仿宋_GB2312】选项，在【大小】文本框中输入24，从【颜色】拾色器中选择【红色】，如下页左图所示。,(5),选择【分类】列表框中的【背景】选项，从【背景颜色】拾色器中选项中选择 【谈蓝色】，如下页右图所示，设置完毕后单击【确定】按钮。,24,Dreamweaver 应用技术,Dreamweaver,MX,2004,实训教程讲义,五、,层叠样式表CSS,向【编辑字体列表】中添加新字体的方法：,(1) 从【可用字体】列表框中选择要添加的字体【仿案GB_2312】选项。,(2) 单击【添加】按钮 ，将选择的字体添加到【选择的字体】列表框中。,(3) 如果要一次添加多个字体，可重复以上步骤。,(4) 如果添加了不必要的字体，可先选择【字体列表】列表框中要删除的字体，然后单击【删除】按钮 。,(5) 设置完毕后单击【确定】按钮，完成字体的添加。,25,Dreamweaver 应用技术,Dreamweaver,MX,2004,实训教程讲义,五、,层叠样式表CSS,提示：如果已经存在外部样式表，我们可以选择导入或链接至当前站点中，可省去定义的步骤。单击【CSS样式】面板中的【附加样式表】按钮，打开【链接外部样式表】对话框，如右图所示。,如果要更改样式，应先选择要更改的样式，然后单击【编辑】按钮，打开相应的样式定义对话框，更改后，单击【确定】按钮即可，例如将CSS1样式下的CSS1中的背景色更改为#9bb0f3。,(1) 选择【样式】面板中的CSS1.css下的.CSS选项。,(2) 单击【编辑】按钮，打开【.CSS1的CSS样式定义在（CSS1.css中）】对话框。,(3) 选择【分类】列表框中的【背景】选项，在【背景颜色】后的文本框中直接输入颜色代码#9bb0f3。,(4) 设置完毕后单击【确定】按钮。,26,Dreamweaver 应用技术,Dreamweaver,MX,2004,实训教程讲义,五、,层叠样式表CSS,4. 应用CSS样式,选择要应用样式的文本，然后右击【样式】面板中要应用的样式，从弹出的快捷菜单中选择【套用】命令，即可应用CSS样式。,应用样式前与应用样式后的两种效果对比，如下图所示。,5. 管理CSS样式,选择面板中的CSS样式，单击【编辑】按钮，打开【CSS1.css】对话框，如图4-37所示，选择列表框中的样式，然后单击对应按钮，可进行相应的操作。,27,Dreamweaver 应用技术,Dreamweaver,MX,2004,实训教程讲义,五、,层叠样式表CSS,重命名：单击此按钮，可打开【重命名类】对话框，在【新建名称】文本框中直接输入名称，单击【确定】按钮即可。,重制：单击此按钮，可打开【重制CSS样式】对话框，以前一样式作为基础重新定制作一定新样式。,删除：单击此按钮，直接删除选择的CSS样式。,六、查找与替换,选择【编辑】|【查找与替换】命令，打开【查找与替换】对话框，如下图所示。在【查找】与【替换】列表框中输入所需的内容，并设置对应【选项】后，单击【查找下一个】、【查找全部】、【替换】和【替换全部】按钮，可以完成查找或替换。,28,Dreamweaver 应用技术,Dreamweaver,MX,2004,实训教程讲义,七、,拼写检查,选中需进行拼写检查的文字内容，再选择【文本】|【拼写检查】命令，开始检查单词的拼写。如果选定的文字内容中没有拼写的错误，,则弹出提示拼写检查完成的对话框。如果文字内容中有错误，比如说是将Dreamweaver写成了Deramweaver，则弹出如右图所示的对话框，提示进行修改。,提示：在Dreamweaver MX 2004，可以在代码视图下很方便地查看整个 设计的代码。如果想查找或替换代码中的特殊标记及其属性，也可以通过查找与替换功能来完成。,提示：如果所提示替换成的单词不是错误单词的正确形式，可以在列表中选择合适的单词。如果将报错单词加入到私人字典中，则下次检查此单词时，Dreamweaver将自动将其识别为正确单词。,29,Dreamweaver 应用技术,Dreamweaver,MX,2004,实训教程讲义,八、动手实践,向第八章动手实践中创建的主页右框架中的文本段落起始位置处添加两个空字符，并为右上角的文字设置CSS样式，并应用于index.asp与dmjs.asp网页中。,步骤1 添加空字符,(1) 打开卡通动漫网站中的index.asp网页。,(2) 将插入点至于“记得小时候”段前，选择【插入】|【HTML】|【特殊字符】|【不换行字符】命令，插入一个空字符。,(3) 单击【文档】工具栏中的【拆分】按钮，可以查看当前插入的特殊字符。,(4) 在代码窗口中选择完成空字符的插入。,(5) 以同样的方式，在其他段落前插入两个空字符，如上图所示。,30,Dreamweaver 应用技术,Dreamweaver,MX,2004,实训教程讲义,八、动手实践,步骤2 创建CSS样式,(1) 单击【CSS样式】面板【新建CSS样式】按钮，打开【新建CSS样式】对话框。,(2) 在【新建CSS样式】对话框的【名称】选项后的文本框中输入样式名称为“ptcs”，打开【定义在】选项组中的下拉列表框，从中选择【新建样式表文件】选项，单击【确定】按钮。,(3) 打开【保存样式表文件为】对话框，输入样式名称pt，单击【保存】按钮。,(4) 打开【.ptcs的CSS样式定义在（pt.css中）】对话框，选择【分类】列表框中的【类型】选项，从【字体】下拉列表框中的【隶书】选项，在【大小】文本框中输入16，在【颜色】拾色器右侧的文本框中直接输入颜色代码【#B7957C】。,(5) 选择【分类】列表框中的【区块】选项，从【文本对齐】下拉列表框中的【居中】选项。,(6) 设置完毕后单击【确定】按钮，在【CSS样式】面板中显示出新建的CSS，如右图所示。,31,Dreamweaver 应用技术,Dreamweaver,MX,2004,实训教程讲义,八、动手实践,步骤3 应用CSS样式,(1) 选择主页右上角的“设为首页”和“收入收藏”字样。,(2) 展开【CSS样式】面板中pt.css样式。,(3) 右击pccs样式，从弹出的快捷菜单中选择【套用】命令，得到如上图所示的效果。,(4) 打开dmjs.asp网页，选择【CSS样式】面板的【附加样式表】按钮，选择【添加为】选项组中的【链接】按钮，打开【链接外部样式表】对话框，单击【文件/URL】右侧的【浏览】按钮，选择pt.css样式，设置完毕后单击【确定】按钮。,(5) 选择dmjs.asp网页网页中右上角的“设为首页”和“收入收藏”字样。,(6) 展开【CSS样式】面板中pt.css样式，右击pccs样式，从弹出的快捷菜单中选择【套用】命令。,(7) 以同样的方式，将ljcs.css样式链接到当前页，完成CSS样式的应用。,32,