第2章网页中的文字、图像和导航条.ppt

《第2章网页中的文字、图像和导航条.ppt》由会员分享，可在线阅读，更多相关《第2章网页中的文字、图像和导航条.ppt（85页珍藏版）》请在三一办公上搜索。

1、第2章 网页中的文字、图像和导航条,2.1【案例4】“计算机简史”网页,2.1.1 学习目标“计算机简史”网页的显示效果如图2-1-1所示。文字是网页的基础和灵魂，任何一个网站都离不开网页中的文字。在Dreamweaver中，可以对文字的格式、字体、字号、颜色以及对齐格式等属性进行设置。通过本案例的学习，可以掌握这些属性设置的方法。2.1.2 操作过程,图2-1-1“计算机简史”网页的显示效果,1文字属性设置 文字的属性可以在图2-1-2所示的文本“属性”栏和图2-1-5所示的“插入”（文本）栏中进行设置。,2.1.3 相关知识,图2-1-2 文本的“属性”栏,（1）文字标题格式的设置 根据H

2、TML语言规定，页面的文本有6种标题格式，它们所对应的字号大小和段落对齐方式都是设定好的。在“格式”下拉列表框中，可以选择各种格式。,“无”选项：无特殊格式的规定，仅决定于浏览器本身。“段落”选项：正文段落，在文字的开始与结尾处有换行，各行的文字间距较小。“标题1”至“标题6”选项：标题1至标题6约为中文6号至中文1号字大小。“预先格式化的”选项：设置预定义的格式。,（2）创建字体组合 Dreamweaver 8使用了字体组合的方法，取代了简单地给文本指定一种字体的方法。字体组合就是多个不同字体依次排列的组合。在设计网页时，可给文本指定一种字体组合。,在网页浏览器中浏览该网页时，系统会按照字体

3、组合中指定的字体顺序自动寻找用户计算机中安装的字体。采用这种方法可以照顾各种浏览器和安装不同操作系统的计算机用户。,在“字体”下拉列表框中，可以选择Dreamweaver提供的各种字体组合，如图2-1-3所示。单击其中的某个列表项，即可设置该字体组合。,图2-1-3“编辑字体列表”对话框,单击图2-1-3所示的字体组合列表项中的“编辑字体列表”列表项，弹出“编辑字体列表”对话框，如图2-1-4所示。单击“编辑字体列表”对话框中“字体列表”列表框内的“在以下列表中添加字体”列表项。,图2-1-4“编辑字体列表”对话框,在“可用字体”列表框中选择字体，然后双击该字体名称，即可在“选择的字体”列表框

4、中显示出相应的字体名称；也可以单击某一个字体名字，再单击 按钮，将选中的字体添加到“选择的字体”列表框内。,按照上述方法，依次往“选择的字体”列表框中加入字体组合中的各种字体。同时，会看到在“字体列表”列表框内最下边随之显示出新的字体组合，如图2-1-4所示。单击“确定”按钮，即可完成字体组合的创建操作。,如果要删除字体组合中的一种字体，单击“选择的字体”列表框内该字体的名称，再单击 按钮。如果要删除一个字体组合，可在“字体列表”列表框中单击该字体组合，再单击“编辑字体列表”对话框中的 按钮。,如果还要增加字体组合，可以单击“编辑字体列表”对话框中的 按钮，使“字体列表”列表框中增加“在以下列

5、表中添加字体”选项。,（3）文字属性的设置文字大小设置：字号的数字越大，文字也越大。在Dreamweaver 8中，默认的字号是13。单击文字“属性”栏内的“大小”下拉列表框中的一种字号数字，即可完成字号的设定。在“大小”下拉列表框内，还可以通过选择“极小”到“极大”以及“较小”和“较大”列表项的方法来设置文字的大小。,文字样式设置：在“样式”下拉列表框中，单击“管理样式”项目，可以弹出“编辑样式表”对话框。单击该对话框中的“新建”按钮，就可以为文字添加样式设置。,文字的对齐设置：文字的对齐是指一行或多行文字在水平方向的位置，它有左对齐、居中对齐和右对齐3种。可以通过在选中页面内的文字后，单击

6、文字“属性”栏内的（左对齐）、（居中对齐）和（右对齐）按钮来实现。如果文字是直接输入到页面中的，则会以浏览器的边界线进行对齐。,文字的缩进设置：要改变段落文字的缩进量，可以选中文字，再单击文字“属性”栏内的（减少缩进，向左移两个单位）按钮或（增加缩进，向右移两个单位）按钮。,文字风格的设置：选中网页中的文字，单击按下 按钮，即可将选中的文字设置为粗体；单击按下 按钮，即可将选中的文字设置为斜体。,利用菜单命令改变文字风格：在“文本”“样式”菜单的子菜单中，单击其中的某一个菜单命令，可以将选中的文字样式做相应的改变。,文字颜色的设置：单击文字“属性”栏内的“大小”下拉列表框右边的 按钮，可以弹出

7、颜色面板，利用它可以设置文字的颜色。也可以在其文本框中直接输入颜色代码，例如红色的颜色代码为“#FF0000”。,使用“插入”（文本）栏：单击“插入”栏的“文本”标签，如图2-1-5所示。,图2-1-5“插入”（文本）栏,面板中有许多文本格式控制按钮，通过这些按钮可以方便地插入各种文本。单击面板中的“字体标签编辑器”按钮，可以弹出“标签编辑器”对话框，如图2-1-6所示。利用该对话框可以设置文字的字体、大小和颜色等，还可以编辑文字字体列表。,图2-1-6“标签编辑器”对话框,（1）设置项目列表设置无序列表和有序列表：选中要排列的文字段，再单击文字“属性”栏内的 按钮，可设置无序列表；选中要排列

8、的文字段，再单击文字“属性”栏内的 按钮，可设置有序列表。,2设置和修改项目列表,定义列表方式：选中要排列的文字段，再单击“文本”“列表”“定义列表”菜单命令。采用这种列表方式的效果是：奇数行靠左，偶数行向右缩进，如图2-1-7所示。,图2-1-7 奇数行靠左，偶数行向右缩进,（2）修改项目列表属性 首先将列表的文字按照无序或有序列表方式进行列表，然后将光标移到列表文字中。单击“文本”“列表”“属性”菜单命令，弹出“列表属性”对话框，如图2-1-8所示。,图2-1-8“列表属性”对话框,“列表类型”下拉列表框用来选择列表类型，其类型有项目列表、编号列表、目录列表和菜单列表4种。项目列表的段首为

9、图案标志符号，是无序列表；编号列表的段首是数字，是有序列表。选择“编号列表”选项后，“列表属性”对话框中的隐藏选项会变为有效。,在“样式”下拉列表框内，可以选择列表的风格，其中各选项的含义为：“默认”选项是默认方式，段首标记为实心圆点；“项目符号”选项是段首标记为项目的符号；“正方形”选项的段首标记为实心方块。,在“新建样式”下拉列表框内，也有上述4个选项，用来设置光标所在段和以下各段的列表属性。,在“列表类型”下拉列表框中选择“编号列表”列表项目后，“列表属性”对话框如图2-1-9所示。在“样式”列表框中，可以选择列表的风格。,图2-1-9 有序列表的“列表属性”对话框,选择“默认”选项和“

10、数字”选项，段首标记为阿拉伯数字；选择“小写罗马数字”选项，段首标记为小写罗马数字；选择“大写罗马数字”选项，段首标记为大写罗马数字；选择“小写字母”选项，段首标记为英文小写字母；选择“大写字母”选项，段首标记为英文大写字母。,在“开始计数”文本框内可以输入起始的数字或字母，以后各段的编号将根据起始数字或字母自动排列。在“列表属性”对话框的“列表项目”栏内的“新建样式”下拉列表框中，也有上述6个选项，用来设置光标所在段和以下各段的列表为另一种新属性。在“重设计数”文本框内，输入光标所在段和以下各段的列表的起始数字或字母。,2.2.1 学习目标“硬件知识”网页的显示效果如图2-2-1所示。通过该

11、网页可以看出，在网页中同时插入图像和文字时，可以设置不同的对齐方式，以达到不同的显示效果。图文混排是网页制作的基本操作，实用性非常强。2.2.2 操作过程,2.2【案例5】“硬件知识”网页,图2-2-1“硬件知识”网页的显示效果,（1）用鼠标拖曳图像 在Windows的“我的电脑”或“资源管理器”中，单击一个图像文件，再用鼠标拖曳该图像到网页文档窗口内，即可将图像插入到页面内的指定位置。双击页面内的图像，可以弹出“选择图像源文件”对话框，供用户更换图像。,2.2.3 相关知识,（2）利用“插入”（常用）面板插入图像 单击“插入”（常用）栏“图像”快捷菜单中的“图像”按钮，或用鼠标拖曳“图像”按

12、钮 到网页内，可以弹出“选择图像源文件”对话框，如图2-2-2所示。如果“图像”快捷菜单处显示的不是“图像”按钮，可以单击旁边的下三角按钮，在弹出的快捷菜单中选择“图像”按钮。,在“选择图像源文件”对话框中选中图像文件后，单击“确定”按钮，即可将选定的图像插入到页面的光标处。通常所选图像应放在站点文件夹下的图像文件夹内。,在“选择图像源文件”对话框内，“URL”文本框内会给出该图像的路径。在“相对于”下拉列表框内，如果选择“文档”选项，则“URL”文本框内会给出该图像文件的相对于当前网页文档的路径和文件名。,例如“pic/2-1-1.jpg”；如果选择“站点根目录”选项，则“URL”文本框内会

13、给出以站点目录为根目录的路径，例如“/pic/2-1-1.jpg”。,当网页内有文字和图像混排时，系统默认的状态是图像的下沿和它所在的文字行的下沿对齐。如果图像较大，则页面内的文字与图像的布局会很不协调，因此需要调整它们的布局。调整图像与文字混排的布局需要使用图像的“属性”栏。,2图像和文字的相对位置,（1）图像与文字相对位置的调整 图像“属性”栏内的“对齐”下拉列表框中有10个列表项，用来进行图像与文字相对位置的调整。这些列表项的含义如下。,“默认值”列表项：使用浏览器默认的对齐方式，不同的浏览器会稍有不同。“基线”列表项：图像的下沿与文字的基线水平对齐。“顶端”列表项：图像的顶端与当前行中

14、最高对象（图像或文本）的顶端对齐。,“中间”列表项：图像的中线与文字的基线水平对齐。“底部”列表项：图像的下沿与文字的基线水平对齐。“文本上方”列表项：图像的顶端与文本行中最高字符的顶端对齐。,“绝对中间”列表项：图像的中线与文字的中线水平对齐。“绝对底部”列表项：图像的下沿与文字的下沿水平对齐。文字的下沿是指文字的最下边，而基线不到文字的最下边。,“左对齐”列表项：图像在文字的左边缘，文字从右侧环绕图像。“右对齐”列表项：图像在文字的右边缘，文字从左侧环绕图像。,文字的上沿、中线、基线、下沿、左边缘和右边缘之间的关系如图2-2-3所示。,图2-2-3 文字对齐含义,（2）图像与文字间距的调整

15、 图像与文字的间距是指图像与文字水平方向和垂直方向的间距，可以通过改变“水平边距”和“垂直边距”文本框内的数值来实现，数值的单位是像素。,移动和复制图像：选中要编辑的图像，这时图像周围会出现几个黑色方形的小控制柄。如果要移动或复制图像，可以像移动文字那样，用鼠标拖曳图像到目标点，即可移动图像；按住Ctrl键并用鼠标拖曳图像到目标点，即可复制图像。,3图像的移动、复制、删除和调整大小,删除图像：先选中要删除的图像，再按Delete键即可，还可以将它剪切到剪贴板中。简单调整图像大小：选中要调整的图像，用鼠标拖曳其控制柄。按住Shift键，同时用鼠标拖曳图像周围的小控制柄，可以在保证图像长宽比不变的

16、情况下调整图像的大小。,在网页中插入图像后，如果要精确调整图像的大小和图像的位置，必须使用图像“属性”栏。在选中图像后，图像“属性”栏如图2-2-4所示。,4利用图像“属性”栏编辑“硬件知识”网页中的图像,图2-2-4 图像“属性”栏,图像命名：在图像“属性”栏的左上角会显示缩小的选中的图像，图像的右边会显示它的字节数。可以在图像右边的文本框内输入图像的名字，以后可以使用脚本语言（JavaScript、VBScript等）对它进行引用。,调整图像的位置：选中要调整位置的图像后，或将光标移到图像所在的行后，单击（居左）、（居中）或（居右）按钮，即可对该行的图像位置进行调整。,精确调整图像的大小：

17、在“宽”文本框内输入图像的宽度，系统默认的单位是像素（pixels），如果要使用其他单位，则必须在输入数字后再输入单位名称，例如in（英寸，1in=96 pixels）、mm（毫米，1mm=3.8 pixels)、pt（磅，1pt=1.3pixels）和pc（派卡，1pc=16 pixels）等。,用同样的方法可在“高”文本框内输入图像的高度。%表示图像占文档窗口的宽度和长度百分比，设置后，图像的大小会随文档窗口的大小自动进行调整。若不管页面大小，只想占页面宽度的30%，可在“宽”文本框中输入30%。,如果要还原图像大小的初始值，可单击 和 文字或删除“宽”和“高”文本框中的数值；要想将宽度和

18、长度全部还原，则可单击“重设大小”按钮。,图像的路径：“源文件”右边的文本框内给出了图像文件的路径。文件路径可以是绝对路径（“file:/D|/跟我学电脑/pic/2-1-1.jpg”图像文件不在站点文件夹内），也可以是相对路径（“pic/2-1-1.jpg”或“/pic/2-1-1.jpg”图像文件在站点文件夹内）。单击“源文件”右边的 按钮，即可弹出“选择图像源文件”对话框，利用它可以更换图像。,链接：“链接”右边的文本框内给出了被链接文件的路径。超级链接所指向的对象可以是一个网页，也可以是一个具体的文件。设置图像链接后，用户在浏览网页时只要单击该图像，即可打开相关的网页或文件。,建立超级

19、链接有3种方法：直接输入链接地址URL；拖曳指向文件图标 到“站点”窗口要链接的文件上；单击该文本框右边的文件夹按钮，弹出“选择文件”对话框，利用该对话框选定文件。,给图像加文字提示说明：选中要加文字提示说明的图像，再在图像“属性”栏内的“替代”下拉列表框中输入图像的文字提示说明。用浏览器打开图像页面后，将鼠标移到加文字提示说明的图像上，或发生断链现象时，即可出现相应的文字提示说明，如图2-2-5所示。,图2-2-5 显示图像的文字提示说明,2.3.1 学习目标“外设简介”网页的显示效果如图2-3-1所示。在该网页中，除了常见的文字和图像外，还包含一个由多个图像按钮组成的导航条。当鼠标移到该导

20、航条中的任意一个按钮上时，该按钮中的文字会变为“单击进入”文字图像。,2.3【案例6】“外设简介”网页,通过本实例的操作，要掌握在网页中插入导航条和水平线的基本操作方法。为导航条建立链接的操作将在第5章中进行介绍。2.3.2 操作过程,图2-3-1“外设简介”网页的显示效果,1插入导航条 导航条实际上是一组动态图像按钮，单击一个导航按钮，可以在浏览器中弹出HTML文件和其他（如图像）文件。插入导航条的方法如下。（1）单击“插入”（常规）面板中的“图像”快捷菜单中的“导航条”按钮，即可弹出“插入导航条”对话框，如图2-3-3所示。,2.3.3 相关知识,（2）在“插入导航条”对话框中进行各选项的

21、设置。各选项的作用如下。,“导航条元件”列表框：给出导航条中各个动态图像按钮的名称（默认是图像的名称）。单击 按钮，可以增加动态图像按钮；选中动态图像按钮名称，再单击 按钮，可以删除该按钮；单击动态图像按钮名称，再单击 按钮或 按钮，可以改变动态图像按钮在导航条中的位置。,“项目名称”文本框：其内可输入各动态图像按钮的名称。4个文本框与“浏览”按钮：定义鼠标4种状态时的图像。“状态图像”是按钮抬起状态，“鼠标经过图像”是鼠标移到按钮上时的图像，“按下图像”是鼠标按下时的图像，“按下时鼠标经过图像”是鼠标按下的过程中的图像。,“按下时，前往的URL”栏：在文本框内可输入与动态按钮链接的文件目录和

22、名字，单击“浏览”按钮后，可选择链接的文件。在其右边的列表框内，可选择显示链接的页面的框架名字。,“选项”栏：第一个复选框用来确定是否要预先载入各个图像，第2个复选框用来确定是否要在页面载入的初始状态时显示鼠标按下状态的图像。“插入”列表框：用来选择按钮放置的方式。选择“水平”选项，表示水平放置；选择“垂直”选项，表示垂直放置。,“使用表格”复选框：选中它后，表示使用表格将动态按钮框起来。（3）完成上述设置后，单击“确定”按钮，即可在网页中插入导航条。,在页面内可以利用水平分割线将标题与文字或图像等对象分割，使页面的信息分布清晰。当然，用线条图像来分割，效果会更好些，但会使文件变大。插入水平线

23、的方法如下。,2插入水平线,（1）单击“插入”（HTML）面板中的“水平线”按钮，即可在光标所在的行插入一条水平线，并弹出水平线的“属性”面板，如图2-3-4所示。,图2-3-4 水平线的“属性”面板,（2）在水平线“属性”面板内，“宽”文本框用于输入水平线的水平长度数值，“高”文本框用于输入水平线的垂直高度数值，单位有像素和百分数（%）两种选择。在“对齐”下拉列表框内，可以选择“默认”、“左对齐”、“居中对齐”或“右对齐”选项。,选择“阴影”复选框，则水平线是中空的；不选择“阴影”复选框，则水平线是亮实心的线。在标准“插入”面板中还有一些按钮，利用它们还可以在网页中插入日期、换行符和电子邮件地址等。因为使用方法比较简单，所以这里不再叙述。,肇庆代办公司注册 http:/诸智刚崅,