《dreamweavercs3网页设计》由会员分享,可在线阅读,更多相关《dreamweavercs3网页设计(15页珍藏版)》请在金锄头文库上搜索。
1、Dreamweaver CS3网页设计第三章 网页中的文本和图像3.1在网页中插入文本从本章开始,大多数的操作都将在“设计”视图窗口中进行,如不作特别说明,文档窗口都是指设计视图状态下的文档窗口。在Dreamweaver CS3“设计”视图窗口中,可以方便的进行各种可视化操作,插入的各种网页元素将以所见及所得的方式呈现在窗口中,并可随时进行修改,使用非常方便。文档中最常见的网页元素是文本,对文本的操作包括:插入、编辑文本内容、设置文本格式、段落格式,设置文本超链接等。3.1.1输入文本在网页中输入文本的方法,与其他应用软件没太大区别。需要注意的是,要在文本中插入空格时,如果按【space】键只
2、能插入一个空格,要插入多个空格的话,须试用【Ctrl+Shift+Space】组合键,输入一次相当于在指定位置插入一个Html的空格代码“ ;”。3.1.2设置网页中的文本属性设置文本属性的操作都是在文本属性检查器中进行的,选中要设置的文本部分,文本属性检查器将出现当前选中文本的属性信息,通过修改其中各项参数来实现对文本格式、字体和大小、文本样式、对齐方式和超链接等信息的设置修改。1设置文本格式“格式”下拉列表框用于定义当前选中文本的格式类型,可选值有:无、段落、标题16和预先格式化的等几项。选择“段落”选项时,将为选中文本增加一个段落标志(标签),使选中文本成为一个独立的段落。选择“
3、标题16”选项中任意一项,可使选中文本成为一条选定大小的标题。选择“预先格式化的”选项可使选中文本成为一段预格式化的文本(相当于添加了标签),设置为“预先格式化的”格式化的文本,其中的空格和回车将被完全保留。如果保持默认的“无”选项不做修改,文本将保持普通文本的格式。2设置文本字体和大小在Dreamweaver CS3里设置被选文本内容的字体和大小,都是通过在下拉列表框中选择来完成的,操作非常简便。默认情况下,在“字体”下拉列表框中的中文字体只有宋体和新宋体两种,而常用字体还摆阔黑体、仿宋体和楷体等,通过选择下拉列表框中“编辑字体列表”命令可将这几种字体加入字体下拉列表框。选中“可用字体”,单
4、击XX按钮添加新字体;再次添加需先单击XX按钮,再重复上述操作;要移除字体先在“字体列表”中选中字体,单击XX按钮即可;选中字体后单击XX和XX按钮可调整字体在列表中的先后顺序。3.设置文字样式Dreamweaver CS3默认采用CSS层叠样式表编码来设置文本格式,当通过文本属性检查器对一段选中的文本进行了文本格式化操作后,Dreamweaver会自动将相关格式设置组合后保存为一段CSS代码,同时在“样式”下拉列表框中会出现一个对应的样式名称,并且该样式名称的文字会体现相关格式设置的具体效果。当需要再次用到相同格式设置时,可直接从样式下拉列表框中选择样式名称。其他的文本样式设置还包括:在CS
5、S窗口编辑样式、设置粗体、设置斜体和设置文本颜色。设置文本颜色可以单击“文本颜色选择器”按钮打开颜色选择器进行选择,第2章中我们曾使用过这个颜色选择器,这里对颜色选择器的界面进行详细说明。颜色选择器由功能区和颜色样本区两部分构成。选择颜色的操作主要是通过“拾色器滴管”工具实现的。在颜色样本区是216中网页安全色,通过滴管单击可选中其中一个安全色,当然拾色器滴管也可以在颜色样本区之外的任何皮姆区域市区、选中颜色,但这时拾取的颜色不一定是网页安全色。当拾取器滴管移动到颜色样本区或其他屏幕区域时,便可拾取当前位置上的颜色该颜色将在“当前拾取颜色显示区”显示,对应的16进制颜色值则显示在其后。如果不需
6、要选择颜色,或要清除对象的当前颜色,可单击“调色盘”按钮打开调色盘进行选择操作。4设置文本对齐方式文本对齐方式设置由4个设置按钮组成,它们都用于设置文本相对页面或其父元素的水平对齐方式。当选中的文本已设置有对齐方式时,对应的对齐方式按钮将处于被按下的状态,单击该按钮可以清除当前对齐方式设置。5.设置文本超链接设置文本超链接的功能由“链接”文本框、“目标”下拉列表框、“指向文件”按钮和“浏览文件”按钮组成。设置文本链接的方法是:选中目标文本,然后在“链接”文本框中输入链接的目标地址,最后在“目标”下拉列表框中选择链接目标对象的打开方式。如不设置“目标”选项,链接目标对象将在浏览器窗口打开,代替原
7、有内容。“链接”文本/列表框中记录了当前文档中包含的所有链接地址,可供用户再次使用。再次启动Dreamweaver后设置过的所有地址都会被记录在该列表框中,直到用户退出。“指向文件”按钮可以方便地设置一个文本链接以指向以下目标地址“(1) 另一个在Dreamweaver中打开的文档。(2) 已打开文档中的可见锚点。(3) “文件”面板中的一个文档。如果要设置指向另一打开文档的链接,必须在目标文档所在文档窗口未最大化的情况下才能实现。其方法为:(1) 首先选中要设置的文本,并确多个打开的文档其窗口都处于非最大化显示状态。(2) 单击“指向文件”按钮,按住鼠标左键不放,将图标拖动至另一打开的文档窗
8、口中,释放鼠标左键,是指完成。“指向”已打开文档中的锚点或“指向”文件面板中的一个文档,其设置方法相似。“浏览文件”按钮主要用于设置内部链接,当目标文档为一本地文档时,单击“浏览文件”按钮,在“选择文件”对话框中选择路径个文件名,可方便地将目标文档的地址赋予选中的文本,创建一个内部文本超链接。3.1.3插入特殊符号所谓“特殊符号”是指通过键盘无法直接输入得到的异类符号。Dreamweaver CS3中为用户提供了方便的特殊符号输入功能,还提供了强制换行符和HTML专用的空格符&nbps;等网页中使用的特殊符号的输入功能。另外,为了方便用户,符号输入功能中还包括一些试用频率较高的常规符号。插入特
9、殊符号的操作方法有两种:(1) 使用插入栏“文本分类中的“符号”按钮插入在文档中定位插入点,单击插入栏“分类切换”按钮,将插入类型切换至“文本”类型。插入栏最后一个按钮就是符号插入按钮,单击它即可在文档中插入当前按钮上显现的特殊符号。要输入其他符号,单击右侧部分的下拉菜单按钮,在弹出的下来菜单中选择一种。即可将其插入文档。(3) 使用“插入记录-HTML-特殊符号”命令插入这种插入方法也非常方便,在文档窗口定位插入点后,选择“插入记录-HTML-特殊符号”命令,在其子菜单中有插入各种特殊符号的命令,选择其一,即可实现对应读好的插入。第一次插入特殊符号时,Dreamweaver会打开关于插入特殊
10、符号可能无法正常显示的提示,不用理会,选中“不再显示”单击确定即可。当插入换行符和不换行空格&nbps;这样的网页格式化符号时,符号的内容将不会在文档窗口中显示,其效果会直接作用在当前文档中。如果当前可选择的特殊符号中,没用需要的符号,可以选择符号列表中的“其他字符”命令打开“插入其他字符”对话框,其中有更多的特殊符号可供选择。3.1.4插入注释这里所指的煮熟是HTML的一种帮助性的辅助信息,该注释信息不会显示到WEB浏览器窗口中,只是在编写HTML代码时起到一种辅助阅读的作用。响应的HTML代码为“”。“插入注释”功能长在“代码”视图中使用。在设计视图中插入的注释将不课件。插入注释的菜单,命
11、令为“插入注释注释”,其插入栏按钮位于“常用”类型中。选择彩带命令或单击插入注释按钮将打开“注释”对话框,在其中的多行文本框中要输入内容后,单击“确定”按钮即可。要查看注释内容可单击文档工具栏“代码”按钮功能切换到代码视图窗口中进行。当在“首选参数”的“不可见元素”分类勾选了“注释”复选项后,在设计视图窗口中也可以看到注释标记,选中它可在属性检查器中编辑该段注释。3.1.7设置文本段落格式对文本的段落格式化操作主要包括:增加段落标志、换行和空格、调整文本缩进、添加文本列表等几种1. 增加段落标志段落标志用于划分文本的段落,构成段落结构。增加段落标志的操作相当于在对象文本两端加上的段落标签,该操
12、作有多种方式可以实现,可以直接键入【Enter】分段;可以使用菜单命令插入段落;还可以在选中文本后,通过其属性检查器的格式下拉列表框来设置段落。最简单的方式就是在目标文本后定位插入点,直接按【Enter】键。使用菜单和属性检查器也可以方便地设置段落标志。2. 换行和空格换行和空格之前已经多次使用过,这里系统地讲一下它们的操作。对于换行,首先要明确一点:换行是指强行换行,行与行之间没用空行,这点与段落不同,换行符的快捷键是【Shift+Enter】组合键。另外,换行符也归为特殊符号,通过插入栏“文本”类中的换行符按钮或选择“插入记录HTML特殊字符换行符”命令可实现插入。如果要像其他软件一样直接
13、按【space】输入空格,可是通过首选参数设置来实现,其方法为:(1) 选择“编辑首选参数”命令,打开“首选参数”对话框。(2) 在左侧“分类”列表框中选中“常规”选项,将有此案的“编辑选项”下的“允许多个连续的空格”复选框选中。(3) 按“确定”按钮保存设置。设置后,【Space】键就代替了原来【Ctrl+Shift+Space】组合键的功能,按一次【Space】键就想弹雨插入一个HTML代码“ ;”3. 调整文本缩进调整文本缩进主要通过文本属性检查器的“文本缩进”按钮和“文本凸出”按钮来实现的,这两个按钮的功能是互斥的关系。要增加缩进,在选中文本后单击“文本缩进”按钮,要减小缩进则
14、在选中文本后单击“文本凸出”按钮。当然也可以使用快捷键来实现操作,文本缩进的快捷键是【Tab】键,文本凸出的快捷键是【Shift+Tab】组合键。4. 添加文本列表列表长用于为文档设置自动编号、项目符号等格式信息。添加文本列表的常用方法有3种,通过属性检查器添加、通过插入栏按钮添加和通过菜单命令添加。最常用的方法是通过“文本”属性检查器中的“项目列表按钮”和“编号列表”按钮来添加。“项目列表”用于添加无编号的列表,“编号列表”用于添加按编号排序的列表,这两个按钮还可用于为现有文本增加列表格式。通过插入栏按钮及通过菜单命令添加、试着列表的方法大同小异。在菜单命令和插入栏按钮中都有一个“列表项”的
15、选项或按钮,它用于增加一组“”HTML标签,并自动切换至“代码”视图窗口,一边在其中查看代码情况。在使用列表项目的时候,我们常常会遇到嵌套列表项的问题,列表项的嵌套要通过列表功能与文本缩进功能相结合来实现。下面用实例加以说明。3.1.8插入文本超链接 在前面小节中,我们介绍过为目标文本设置超链接的方法,下面讲讲如何插入一个超链接以及如何插入不同形式超链接的方法。1.插入超链接这里讲的超链接实际是指插入文本超链接,插入方式是单击插入栏“常用”分类中的“超级链接”按钮或选择“插入记录超级链接”命令。单击按钮或选择菜单命令后将打开“超级链接”对话框来对插入的超级链接相关信息进行设置。在“超级链接”对话框中,“文本”文本框用于设置文字超链接的文本内容;“链接”下拉列表框用于设置链接的目标地址,如果是内部链接,可以单击右侧的按钮来选择目标文档的路径;“目标”下拉列表框用来设置目标对象的打开方式;“标题”文本框用于设置链接文本的提示信息;“访问键”文本框用于设置快速定位到该链接的快捷键;“TAB键索引”文本框可设置【Tab】键的索引顺序。2.插入电子邮件链接单击“常用”插入栏的“电子邮件链接”按钮或选择“插入记录电子邮件链接”命令可打开“电子邮件链接