计算机基础（第二版)第7章 网页制作软件介绍

信息技术基础 第 7章 网页制作软件介绍 第 1页 第 7章 网页制作软件介绍 本章概述 本章的学习目标 主要内容 信息技术基础 第 7章 网页制作软件介绍 第 2页 本章概述 页是 页用 文本标记语言）书写，一个网页包含许多不同类型的 用这样的标记符构建成网页的结构、外貌和内容。 网页被保存在 以通过特定的 你在浏览器的地址栏中输入相应的 可以找到相应的 从中 获取信息。 人们在制作一个网页时，大都采用一些专门的网页制作工具，如们将网页界面自动构建成对应的 人们要制作一个有特色的、动态交互的网页还需要使用 信息技术基础 第 7章 网页制作软件介绍 第 3页 本章的学习目标 了解 掌握网页、网站等相关概念 掌握网站与网页创建和管理的操作 掌握网页的编辑技术 掌握网页的表格操作 掌握网页图片操作 掌握网页表单和框架网页操作 掌握网页超链接操作 了解网页制作的辅助技术和动态交互网页的制作工具 信息技术基础 第 7章 网页制作软件介绍 第 4页 主要内容 003的使用 003的高级应用 网页开发辅助技术 动态交互网页的制作工具 本章小结 信息技术基础 第 7章 网页制作软件介绍 文本标记语言 个常用的 第 5页 信息技术基础 第 7章 网页制作软件介绍 第 6页 超文本标记语言。 同所有的编程语言一样， 但它又不同于一般的编程语言，它只是一些可以由浏览器加以解释，并具有命令标记性质的文本。 一、超文本标记语言 信息技术基础 第 7章 网页制作软件介绍 第 7页 例如在浏览器 图 7 该网页的文本内容如下： 我的第一个 迎光临！ 您的到来为本站增辉！ 本站全体同仁欢迎您！ 蜜蜂之家 图 7个简单的主页 超文本标记语言 信息技术基础 第 7章 网页制作软件介绍 第 8页 二、 一个网页对应于一个 标准的 文件头部用来设置当前文档的一些相关信息，如网页的搜索关键字、网页的标题、网页所使用的编码以及脚本语言等，它一般不在浏览器的窗口中显示。 文件主体用来放置 含文字、图片、背景色、表格、表单等几乎所有关于网页的功能和效果的展示。 信息技术基础 第 7章 网页制作软件介绍 表 7第 9页 名 称 描 述 文 件开始 头 部 标题名 其他头部内容定义标记 主 体 主页内容（文本、图像等） 文 件结束 信息技术基础 第 7章 网页制作软件介绍 记”。一个标记表示为“ ”，中间可以包含标记名、标记的属性等，就像编程语言中的参数一样。 标记 构成一对完整的标签，并且许多标记是成对出现的，这也是 一个开始标记，还有一个结束标记，结束标记就是在开始标记之前加一个“ /”。比如下面两行： 它们告诉浏览器，这是 )以及结束 ()。 第 10页 信息技术基础 第 7章 网页制作软件介绍 第 11页 三、几个常用的 1 作用：表示超文本文档的开头及结束。 2 作用：一些有关文档的定义、说明和描述等标记包含在其中。 3 作用：其中包含的内容出现在浏览器窗口的标题栏上，作为该主页的标题。 4 作用：要表达的正文信息包含在其中。 说明：以上 4个标记是一个完整的 5 作用：其中 l6，表示由大到小的 6种标题文字。 信息技术基础 第 7章 网页制作软件介绍 第 12页 6 作用：强行换行。 在 有包含的回车符和空格都被忽略，当一行的内容还不满屏幕的宽度时，下一行内容会自动接上，因此在需换行时必须使用该标记。 7格式： 作用：用于设定字体的大小和所用的字体，其中包含两个属性： 属性 定字体的大小，值为 l 7。 属性 于指定不同的字体。 8格式： 作用：将图像文件嵌入到 中包含 3个属性： 像来源）、像宽度）和 像高度） 9格式： 作用：将文本的内容居中。 10格式： 作用：在其间包含的文本内容上加下划线。 当然， 于初学者来说比较难记。不过我们可以使用 几个常用的 信息技术基础 第 7章 网页制作软件介绍 第 13页 第二节 003概述 创建站点和网页操作 网页中的文本编辑 网页中图片的处理 网页中表格的使用 建立超链接 信息技术基础 第 7章 网页制作软件介绍 第 14页 一、 003概述 003是 003的新特性 003集中了所有 可以查看整个网络全景，增加了布局表格和单元格、图像描摹。可以使用动态 页标尺和布局网格。 （ 1）自定义例览器分辨率 在设计网页时，可实时调节当前页面在客户端显示的分辨率，以便预览当前效果。 （ 2）描摹图像 大家在学习书法的时候，都接触过临摹吧，描摹图像的功用与其类似，就是通过创建一个图像（一般为网页的效果图）为参照物，以便于网页的设计制作。选择菜单栏上的“视图”、“描摹图像”、“设置”命令，在弹出的对话框中，选择指定图像，再设置其坐标（即在设计页面上显示的位置）。最后，设置透明度，再单击“确认”按钮即可。 信息技术基础 第 7章 网页制作软件介绍 第 15页 （ 3）层功能 层在网页制作中是不可缺少的， 003可以像过层可以将内容重叠、交叉摆放。 （ 4）行为的应用 行为是事件和由该事件触发的动作的组合。行为代码是客户端的此它无需服务器的支持就可触发事件。 行为一直是 003现在也有了这个功能。选择菜单“格式”、“行为”命令，查看界面右侧的“行为”窗格，单击“插入”向下箭头按钮，在弹出的菜单中可选择播放声音、弹出消息、调用脚本及弹出菜单等事件。在选择指定的插入对象后，将弹出相应的设置对话框，在其中按需操作。所有添加的行为事件，均会显示在列表中。 003新特性 信息技术基础 第 7章 网页制作软件介绍 第 16页 （ 5）用网页重定向 在 003中，选择菜单“工具”、“中文简繁转换”、“插入重定向代码”命令，在弹出的对话框中，设置简体页面网址及繁体页面网址。而后，插入的代码将通过测览器对支持语言的检测，实现自动转向。 （ 6）检查网页错误 选择菜单“工具”、“辅助功能”命令，在弹出的对话框中设置检查范围、内容及显示对象，接着单击“检查”按钮即可。利用此项功能，就可快速找出指定网页是否有错误，并可查看问题之所在。 （ 7）规划页面布局 一个成功的设计作品，大都需要事先为其规划设计布局，以便于宏观控制其内容。选择菜单“表格”、“布局表格和单元格”命令，右侧窗格中将显示相应的属性设置。我们着重查看“表格布局”下拉列表，在其中有若干布局样式可供选择。当我们选择一种合适的布局应用于当前页面上后，可随时在设计视图中按需自行调节其布局样式。 003新特性 信息技术基础 第 7章 网页制作软件介绍 第 17页 003的启动与退出的方法和 003类似。 003的启动 双击 003快捷方式图标， 选择“开始”、“所有程序”、“ “ 单命令都可以启动 003。 003的启动 信息技术基础 第 7章 网页制作软件介绍 第 18页 003的退出 （ 1）单击 003窗口中的“关闭”按钮。 （ 2）选择菜单“文件”、“退出”命令。 （ 3）按 4。 （ 4）单击窗口中的 003控制图标，打开窗口控制菜单，选择“关闭”命令。 （ 5）双击窗口中的 003控制图标。 003的退出 信息技术基础 第 7章 网页制作软件介绍 第 19页 003启动后进入如图 7 003中提供了 7种视图模式和 4种网页视图方式。 003提供了网页视图、文件夹视图、远程网站视图、报表视图、导航视图、超链接视图和任务视图 7种视图模式， 利用这些视图可以完成站点的创建、管理、发布等任务。视图切换可以选择菜单“视图”，执行相应的命令，也可以使用视图模式标签进行切换。 图 7003窗口 003的工作界面 信息技术基础 第 7章 网页制作软件介绍 第 20页 （ l）网页视图 默认情况下，打开网页，就会进入网页视图，可以在该视图下编辑网页内容。 网页视图包括设计视图、拆分视图、代码视图和预览视图 4种视图方式。 （ 2）文件夹视图 文件夹视图列出了文件夹中的所有内容。 可以在文件夹内容上单击右键直接对其进行删除、复制、重命名、移动、打开等操作。 003视图 信息技术基础 第 7章 网页制作软件介绍 第 21页 （ 3）远程网站视图 该视图是 003的新特性之一，主要功能是向互联网发布文件。 可以使用此功能将同站发布到一个网络服务提供商的服务器上。 （ 4）报表视图 在该视图模式下，可以查看站点的各种分布情况，包括网站摘要、文件、共享内容、工作流、使用率信息和网站存在的问题等。 （ 5）导航视图 导航视图中提供了网站的分层视图，可以直观地表示一个网站的组织关系和逻辑层次，以方便管理网站中的各个网页。 003视图 信息技术基础 第 7章 网页制作软件介绍 第 22页 （ 6）超链接视图 超链接视图可以将网站中的超链接的状态显示在一个列表中，该列表中包括内部链接和外部链接。 图中带有加号的超链接表示该链接还链接其他站点，单击加号就可以打开它所包括的链接。 （ 7）任务视图 任务视图主要用来记录和分配任务，包括已完成任务和尚未完成任务，主要信息包括状态、任务名称、分配对象、优先级等信息。 任务视图用于同站项目的管理和任务的分配。 可以选择菜单“编辑”、“任务”命令，执行添加任务、编辑任务、标记完成等操作。 003视图 信息技术基础 第 7章 网页制作软件介绍 第 23页 选择菜单“视图”、“网页”命令可以切换到网页视图模式。此时文档窗口的左下方就会出现 4种网页视图方式的选项卡，可以从不同的角度对一个网页进行查看和处理。可以单击该选项卡实现视图方式的切换。 （ 1）设计视图。可以在该视图中设计和编辑网页，以“所见即所得”的工作方式实现网页设计和编辑。 （ 2）代码视图。网页文件其实是 以采用代码视图显示和编辑网页中的 （ 3）拆分视图。拆分视图可以同时访问代码视图和设计视图。该模式将工作窗口分成两部分：上面窗口是 面窗口是网页的编辑画面。 （ 4）预览视图。通过该视图可以在网页制作过程中随时查看网页的显示效果，可以看到和浏览器中一样的显示效果。 003视图 信息技术基础 第 7章 网页制作软件介绍 第 24页 二、创建站点和网页操作 创建站点 网站由网页组成，小型的网站可以逐个网页创建。如果 通过站点会使管理和创建更加便捷。 可以使用向导和使用模板两种方式创建站点。 003中的向导和模板分为两类： 一类是网页向导与模板，包括常规、框架网页和样式表 3种； 另一类是网站向导和模板。 信息技术基础 第 7章 网页制作软件介绍 第 25页 选择菜单“文件” |“新建”命令，打开“新建”任务窗格，如图 7击“新建站点”中的一个选项，根据提示操作即可创建站点。其中“只有一个网页组成的网站”模板将创建包含一个空白网页的新网站，是比较常用的方式，用于一般用途网站的创建。 网页是网站的基本组成部分，下面将介绍网页制作的基本操作，包括新建网页、设置网页属性、保存网页、打开已有网页和预览网页等。 新建网页 新建网页一般有 3种方式，分别为新建空白网页、根据现有网页新建网页和使用网页模板新建网页。选择菜单“文件”、“新建”命令，打开“新建”任务窗格，如图 7 图 7建”任务窗格 创建站点和网页 信息技术基础 第 7章 网页制作软件介绍 第 26页 新建空白网页。 在“新建网页”选择区域中单击“空白网页”，空白网页创建后，系统自动为其命名为“ 根据现有网页新建网页。 在“新建网页”选择区域中单击“根据现有网页”，打开“根据现有网页新建”对话框。选择所需应用的网页，单击“创建”按钮即可。此时会打开现有的网页，命名为“ 可以在此基础上进行编辑和修改。 使用网页模板新建网页。 该选项是根据 003提供的网页模板来新建网页。在“新建网页”选择区域中单击“其他网页模板”，打开“网页模板”对话框，如图 7供了常规网页模板、框架网页模板和样式表模板共 3类。选择所需要的网页模板，单击“确定”按钮即可。 图 7页模板”对话框 网页基本操作 信息技术基础 第 7章 网页制作软件介绍 第 27页 网页属性设置 网页属性主要包括网页的标题、背景音乐、背景图片、背景颜色、超链接颜色、边距和正文样式等。 选定网页文档区域，选择菜单“文件”、“属性”命令，或者单击右键，在弹出的快捷菜单中选择“网页属性”命令，打开“网页属性”对话框，如图 7有常规、格式、高级、自定义、语言、工作组 6个选项卡，其中： “常规”选项卡 设置标题。网页标题是一个网页的概括性说明文字，该标题将会显示在 网页说明。网站访问者在 会在搜索结果中看到此说明。 关键字。描述网页内容的一个或多个关键宇（用一个逗号和一个空格隔开）。 背景音乐。在“位置”文本框中输入要在打开网页时播放的音乐文件的路径和文件名，或者单击“浏览”选择文件。 循环次数。播放音乐的次数。若要不停地播放音乐，选中“不限次数”复选框。 图 7网页属性”对话框 信息技术基础 第 7章 网页制作软件介绍 第 28页 网页属性设置 “格式”选项卡，可以设置网页的背景图片、背景颜色、文本颜色、超链接颜色。已访问的超链接颜色、当前超链接颜色等。如图 7 背景。设置背景图片，如果图形的长或宽与网页不同，则图形会在网页的背景中重复显示，并与网页中的文本及其他元素一起滚动。 使其成为水印。把网页背景图形作为水印，固定在背景中，不会与网页中的文本及其他元素一起滚动。 属性。更改背景图形的格式和其他设置。只有已向网页添加了背景图形，此选项才可用。 颜色。设置网页的背景颜色、网页中文本的默认颜色。 超链接。设置尚未访问的超链接的文本颜色。 已访问的超链接。设置已单击过的超链接的文本颜色。 当前超链接。单击超链接时的文本颜色。 图 7格式”选项卡 信息技术基础 第 7章 网页制作软件介绍 第 29页 网页属性设置 “高级”选项卡，可以设置页面的边距、正文样式、超链接反转样式等，如图 7 边距。上、下、左、右边距分别可以设置网页内容与浏览器窗口的距离。边距宽度可以设置左右边距为相同的宽度，边距高度可以设置上下边距为相同的高度。 样式。单击“正文样式”弹出“修改样式”对话框，如图 7以更改网页中文本的默认格式字体、段落、边框、编号方式、定位等。如果对网页中的特定文本或元素应用格式设置，则“正文样式”设置对该文本或元素不起作用。 启用超链接翻转效果。当让指针停留在超链接文本上时，将更改该文本的外观。文本外观可以通过单击“翻转样式”按钮进行设置。 图 7高级”选项卡 图 7修改样式”对话框 信息技术基础 第 7章 网页制作软件介绍 第 30页 网页属性设置 “自定义”选项卡 可以添加由 要分为系统（ 量和用户（ 量。 “语言”选项卡。 可以设置网页语言、 信息技术基础 第 7章 网页制作软件介绍 第 31页 保存网页 保存尚未保存的网页 单击“常用”工具栏上的保存按钮。 或者选择菜单“文件”、“保存”命令，在打开的“另存为”对话框中找到并双击要保存网页的文件夹。 在“文件名”框中，输入网页的文件名，然后单击“保存”按钮。 保存从当前站点打开的网页 单击“常用”工具栏上的保存按钮， 或者选择菜单“文件”、“保存”命令即可。 保存从当前站点之外的位置打开的网页 选择菜单“文件”、“另存为”命令， 在弹出的“另存为”对话框中找到并双击要保存网页的文件夹， 然后单击“保存”按钮。 信息技术基础 第 7章 网页制作软件介绍 第 32页 打开网页 选择菜单“文件” |“打开”命令，通过弹出的“打开文件”对话框打开网页。 或者在 003的站点视图模式下，双击网页文件名也可以打开网页。 信息技术基础 第 7章 网页制作软件介绍 第 33页 预览网页 网页在制作完成后，在设计视图下只能看到页面的大概形态，而动画、视频、音频。 网页动态效果等需要在预览视图模式或者 览器中才能看到。 预览有两种方式：在 览器中预览。 预览网页首先要确定要浏览的网页处于打开状态。 （ l）在 单击 口中左下角视图切换标签中的预览按钮，即可浏览制作效果。 （ 2）在 选择菜单“文件”、“在浏览器中预览”命令，选择浏览器，即可启动浏览器显示页面效果，其中浏览器后面的数字表示将按此大小打开浏览器窗口。 或者单击“常用”工具栏上的“ 钮。 信息技术基础 第 7章 网页制作软件介绍 第 34页 三、 网页中的文本操作 网页中大量的信息是文本，因此文本的操作是网页制作的基础。本节主要介绍如何在设计视图模式下为网页输入文本，以及如何通过设置文本格式、段落格式、边框和底纹、列表等，使页面美观。 信息技术基础 第 7章 网页制作软件介绍 第 35页 文本的输入 网页中文本和特殊字符的输入和前面讲解的方法基本一样，也有所不同。 如果要产生一个新行，需要按下“ ，换行标记为“”。 要产生一个新的段落，直接按“ ，段落标记为“”。 插入水平线。 当页面中内容比较多时，为了使网页内容结构清晰，可以通过插入水平线分隔内容。 操作步骤为：选择插入位置，选择菜单“插入”、“水平线”命令。 设置水平线。 双击水平线，在弹出的“水平线属性”对话框，可以设置水平线的宽度、高度、对齐方式、颜色等。 信息技术基础 第 7章 网页制作软件介绍 第 36页 文本的格式化 设置字体格式 网页中最重要的内容是文本，因此文本的格式化是网页制作的关键步骤之一。包括设置字体、字号、字体颜色和字符间距等。 设置字体格式首先选中要设置字体的文本，选择方法与 003中的选定方式类似。 颜色吸管 003除了提供前面介绍的颜色选择方法外，还可以使用颜色吸管选择页面文本或图片的颜色作为文本的设定颜色 . 方法如下：选择菜单“格式”、“字体”命令，在打开的“字体”对话框中，单击“颜色”下拉列表框，在弹出的下拉列表中选择“其他颜色”，打开“其他颜色”对话框，如图 7- 2 示。 单击颜色选择按钮，鼠标就会变成颜色吸管。移动鼠标，在需要的颜色处单击鼠标，就会在“其他颜色”对话框中的“新建”颜色窗口中显示吸取的颜色，单击“确定”按钮即可使用吸取的颜色。 图 7其他颜色”对话框 信息技术基础 第 7章 网页制作软件介绍 第 37页 文本的格式化 设置字符间距 为了增加网页中文字与文字间的距离，需要设置字符间距。 首先选择要设置字符间距的文本，选择菜单“格式”、“字体”命令，弹出“字体”对话框，选择“字符间距”选项卡，如图7- 2 示。 在“间距”下拉列表框中可以设置间距方式：普通、加宽和紧缩。 在“间距大小”微调框中输入以像素为单位的间距大小。 在“定位”下拉列表框中可以设置字符高度相对于本行基线的高度，然后单击“确定”按钮。 图 7字符间距”选项卡 信息技术基础 第 7章 网页制作软件介绍 第 38页 文本的格式化 设置标题级 标题级可以用来设置不同的字体大小，在网页中可分为 6级不同大小的标题。 1级标题字体最大， 6级标题字体最小。 各级标题用来显示不同层次的主题，以区分各个主题的层次关系。 设置标题级的方法为：选中需要设置的标题，打开“格式”工具栏上的“样式”下拉列表框，如图 7- 2 a）所示，选择相应的标题。 在 示效果如图 7- 2 - 10（ b）所示。 图 7 信息技术基础 第 7章 网页制作软件介绍 第 39页 段落的格式化 段落是一种基于文本的布局格式，段落格式主要包括段落的缩进、段落间距和段落的对齐方式。 段落缩进 选中要设置缩进的段落，选择菜单“格式”、“段落”命令，弹出“段落”对话框，如图 7- 2 “缩进”选项区设置文本之前、文本之后、或者首行缩进的值。设置完成后单击“确定”按钮。 段落间距 段落间距的设置也是美化网页的一个重要手段，可以有效地控制文本与整个版面的层次。 设置段落间距的方法为：选中要设置间距的段落，在图 7- 2 落”对话框中，可以设置段前、段后、单字间距，也可以设置行距大小（单倍行距、 倍行距），设置完成后单击“确定”按钮。 段落对齐方式 段落的对齐方式有 5种：左对齐、右对齐、居中、两端对齐和交互象形文字。默认情况下使用的是两端对齐方式。 设置段落对齐的方法为：选中要设置对齐方式的段落，在图 7- 2 - 11所示的“段落”对话框中，在“对齐方式”下拉列表框中选择对齐方式，然后单击“确定”按钮。 图 7落”对话框 信息技术基础 第 7章 网页制作软件介绍 第 40页 列表的使用 列表是网页中组织数据的一种形式，可以使网页内容层次分明、重点突出。网页制作中共可以使用 5种列表：项目符号列表、编号列表、自定义列表、图片列表、菜单列表和目录列表。 信息技术基础 第 7章 网页制作软件介绍 第 41页 项目符号列表 项目符号是在文本列表项目的前面用于强调视觉效果的各种符号。创建项目符号列表的具体操作步骤如下： 选中要创建项目符号列表的段落或将光标定位在段落的开始处。单击“格式”工具栏的“样式”下拉列表框，选择“项目符号列表”选项即可。 如果需要改变项目符号列表，可以选择菜单“格式”、“项目符号和编号”命令，弹出“列表属性”对话框，选择“无格式项目列表”选项卡，如图 7择所需的项目列表，或单击“样式”进行样式修改。 图 7格式项目列表”选项卡 信息技术基础 第 7章 网页制作软件介绍 第 42页 编号列表 为已存在的文字建立编号列表。选中要创建编号的段落，单击“格式”工具栏的“样式”下拉列表框，选择“编号列表”选项即可。 新建编号列表。将光标定位在建立列表的起始位置，单击“格式”工具栏的“样式”下拉列表框，选择“编号列表”选项。窗口就会出现编号“ 1”，输入列表内容，保存后就可以预览效果了。 编号列表的编号主要有 5种：阿拉伯数字、大写罗马数字、大写英文字母、小写罗马数字、小写英文字母，默认是从1开始。可以在“列表属性”对话框中的“编号”选项卡中修改。 信息技术基础 第 7章 网页制作软件介绍 第 43页 自定义列表 自定义列表前面不需要任何列表符号，可以定义列表标题和列表项。 定义列表标题。 即定义一个列表项的标题，一般只有一行。 定义列表项。 即定义每一个列表项的具体内容，一般有多行，且左侧缩进。 把光标定位在网页中要创建自定义列表的位置，在“样式”下拉列表中选择“定义的术语”选项，然后在空白处输入列表标题“学校简介”，按“ 起一行。在新的一行输入列表项的具体内容，再次按“ 新起一行。重复上面的操作，保存后就可以在浏览器浏览。 信息技术基础 第 7章 网页制作软件介绍 第 44页 嵌套列表 当显示的内容层次较多时，需要建立大纲式的列表，即多级嵌套的编号列表、项目符号列表、定义列表等，或者几种形式的混合。 嵌套式列表的操作步骤： 将光标定位在网页的起始位置，在“样式”下拉列表中选择“项目符号列表”，输入章节建立项目符号列表，如图 7a）所示。 选中节次，连续两次单击“格式”工具栏的“增加缩进量”按钮，得到效果如图 7b）所示。 图 7 信息技术基础 第 7章 网页制作软件介绍 第 45页 图片列表 图片列表和项目符号列表类似，只是图片列表是采用图片作为列表符号。 采用图片列表的步骤是： 将光标定位在一组列表符号的任意位置，选择菜单“格式”、“项目符号和编号”命令，弹出“列表属性”对话框，选择“图片项目符号”选项卡。 选定“指定图片”单选按钮，单击“浏览”选择作为列表符号的图片。 信息技术基础 第 7章 网页制作软件介绍 第 46页 边框和底纹 为了突出显示某些内容，可以为文本或段落设置边框和底纹，可以分别设置也可以同时设置。操作步骤如下： 选中要设置边框和底纹的文本，选择菜单“格式”、“边框和底纹”命令，弹出“边框和底纹”对话框。 （ 1）设置边框。 选择“边框”选项卡，如图 7设置”选项中可以设置 3种边框方式：默认、方框和自定义三种。选择“边框”，在“样式”列表框中选择边框的线条样式，设置颜色、线条宽度、衬距（文字与边框的距离），单击“确定”按钮。取消边框可以选择“默认”方式。 （ 2）设置底纹。选择“底纹”选项卡，在“填充”选项区域中，“背景色”可以设置底纹颜色，“前景色”设置底纹文本颜色。在“图案”选项区域中，可以选择图片作为背景。设置完成后，单击“确定”按钮。 图 7框”选项卡 信息技术基础 第 7章 网页制作软件介绍 第 47页 四、网页中图片的处理 图片是网页中很重要的组成元素，恰当的使用图片不但可以美化页面，还可以达到文字无法表达的效果，更能清楚地表达细节内容，传递更多的信息。 信息技术基础 第 7章 网页制作软件介绍 第 48页 图片的类型 浏览器支持的常用网页图片主要有 用时既要考虑颜色效果，也要考虑文件的大小。 用 压缩很快。最多可包含 256种颜色，可用于包含少量颜色的图片。持动态效果。另外 样图片不会覆盖页面的背景颜色。 信息技术基础 第 7章 网页制作软件介绍 第 49页 图片的类型 以显示 1670万种颜色，适用于要求色彩丰富的图片，如人物、风景等。可以通过更改图片的质量来控制文件的压缩比例。设置的质量越低，压缩比例越高，文件越小，最高可以达到 1：100的压缩比。压缩时丢失的只是人眼不太敏感的高频信息，因此电脑屏幕显示时不是很明显。但 般的家用数码相机拍摄的照片采用 些浏览器不能直接显示 此应用较少。 前 格式颜色丰富，最多 224种。非压缩图片模式，文件较大，因此网页中使用较少。 信息技术基础 第 7章 网页制作软件介绍 第 50页 图片的使用 图片主要用在背景图片、网页横幅、公司徽标、图片列表、导航按钮、水平线等情况。 003中主要可以使用来自文件、剪辑库、扫描仪和数码相机的图片，也可插入艺术字、自选图形等。 插入来自文件的图片要先确定插入图片位置，选择菜单“插入”、“图片”、“来自文件”命令，弹出“图片”对话框。选择要插入的文件，单击“插入”按钮即可。 如果插入的图片不是来自当前站点，保存页面时会弹出“保存嵌入式文件”对话框，如图 7 单击“重命名”按钮可以在该对话框内为图片重新命名；单击“更改文件夹”按钮可以改变图片保存的位置：单击“图片文件类型”按钮可以改变图片格式，按新的设定格式保存文件。 图 7存嵌入式文件”对话框 信息技术基础 第 7章 网页制作软件介绍 第 51页 图片的设置 图片设置主要包括环绕方式、图片布局、图片大小等。可以选择菜单“格式”、“属性”命令，或者单击右键，在弹出的快捷菜单中选择“图片属性”命令，在打开的“图片属性”对话框中进行设置，如图 7 图片环绕方式 网页中图片环绕方式有左环绕和右环绕两种。左环绕是图片在左边，文字在右侧环绕。右环绕是图片在右边，文字在左侧环绕。也可以采用无环绕方式，图片和文字分开。 图片布局 在“布局”选项区域中设置对齐方式、边框粗细、水平间距、垂直间距。其中图片与文本在网页中的位置关系也就是对齐方式共有 11种。 图片大小 在“大小”选项区域中设置图片的大小，在“宽度”和“高度”中可以输入具体像素值，还可以设定相对原图的百分比。也可以通过用鼠标拖动图片控点的方式调整图片大小。 图 7片属性”对话框 信息技术基础 第 7章 网页制作软件介绍 第 52页 图片的编辑 图片的编辑除了使用 可以使用 003的“图片”工具栏。 主要包括裁剪图片、旋转或翻转图片、设置对比度和亮度等，可以使用“图片”工具栏完成这些操作。 信息技术基础 第 7章 网页制作软件介绍 第 53页 图片工具栏 可以选择菜单“视图”、“工具栏”、“图片”命令，就会出现“图片”工具栏，如图 7用按钮功能介绍如下： （ 1）“文本”按钮。用于在 （ 2）“自动缩略图”按钮。将选中的图片生成图片的缩略图，并在缩略图上建立一个链接到该图片的超链接。 （ 3）“向左旋转”按钮。将图片逆时针旋转 90”。 （ 4）“向右旋转”按钮。将图片顺时针旋转 90”。 （ 5）“水平翻转”按钮。将图片做左右对称的镜像。 图 7片”工具栏 信息技术基础 第 7章 网页制作软件介绍 第 54页 图片工具栏 （ 6）“垂直翻转”按钮。将图片做上下对称的镜像。 （ 7）“降低对比度”按钮。减少图片前景和背景的对比度。 （ 8）“增加对比度”按钮。增加图片前景和背景的对比度。 （ 9）“增加亮度”按钮。增加图片的亮度。 （ 10）“降低亮度”按钮。降低图片的亮度。 （ 11）“裁剪”按钮。将光标定位在图片上，可以拉出一个任意大小的虚线框，一框内的保留，框外的裁掉。 信息技术基础 第 7章 网页制作软件介绍 第 55页 图片工具栏 （ 12）“设置透明色”按钮。将 样就不会覆盖掉页面背景。 （ 13）“颜色”按钮。有“自动”、“灰度”、“黑白”、“冲蚀”选项，可以达到特殊效果。 （ 14）“凹凸效果”按钮。将图片边界凹凸化，达到 3成立体图片。 （ 15）“选择”按钮。用于网页中图片的选择。 （ 16）“长方形热点”按钮。在图片中定义长方形热点，在该热点上可以创建超链接。 （ 17）“圆形热点”按钮。在图片中定义圆热点，在热点上可以创建超链接。 （ 18）“多边形热点”按钮。在图片中定义多边形热点，在热点上可以创建超链接。 （ 19）“还原”按钮。撤销对图片的各种编辑操作。 信息技术基础 第 7章 网页制作软件介绍 第 56页 图片的编辑 （ 1）裁剪图片 选中图片，单击“图片”工具栏的“裁剪”按钮，图片上就会出现一个方框，拖动方框上的控点调整方框大小。 调整好后，再次单击“裁剪”按钮或者按“ 即可完成裁剪。 （ 2）设置图片透明度 为 非 选中图片，单击“图片”工具栏的“设置透明色”按钮，单击图片的任意位置即可。 （ 3）在图片中编辑文字 可以为 选中图片，单击“图片”工具栏的“文本”按钮，在图片上出现的输入框中输入文字，也可以设置文字格式，移动输入框的位置。 信息技术基础 第 7章 网页制作软件介绍 第 57页 五、网页中表格的使用 表格的创建 在网页中表格的主要作用是组织数据和页面布局。表格主要由 6部分组成：标题、表头、行、列、单元格、边框。 自动创建表格 选定插入点，选择菜单“表格”、“插入”、“表格”命令，弹出“插入表格”对话框，如图 7应设置完成后单击“确定”按钮。 手工绘制表格 手工绘制表格方法与 003的类似。 图 7入表格”对话框 信息技术基础 第 7章 网页制作软件介绍 第 58页 表格的编辑 对表格的编辑主要包括表格大小的调整、单元格的调整、单元格的合并和拆分等。 1选定表格 在对表格进行编辑之前，首先要选定表格、单元格、行或列等。 2单元格对齐方式 选中单元格，选择菜单“表格”、“表格属性”、“单元格”命令，弹出“单元格属性”对话框，如图 7 3插入和删除行、列及单元格 4调整表格及单元格大小 图 7元格属性”对话框 信息技术基础 第 7章 网页制作软件介绍 第 59页 六、 建立超链接 超链接的概念 1 统一资源定位符，由资源类型、主机、端口、目录和文件名组成。 需要通过 这些资源可以是一个页面文件、一个图片文件或者一个站点等。 2超链接 超链接是网页的核心，通过超链接可以实现页面到页面、页面到图片、页面到站点的跳转。 超链接的载体可以是文字、整个图片以及图片上的热点。 链接跳转的目的地可以是页面、书签、图片、站点以及电子邮件、视频、音频以及普通文件。 信息技术基础 第 7章 网页制作软件介绍 第 60页 创建超链接 1在文字上创建超链接 常见的在文字上创建超链接是指超链接的载体是文字，通过单击文字上的链接跳转到 方法如下： 选定要创建超链接的文字，选择菜单“插入”、“超链接”命令，或者单击