大学计算机基础 —— 系统工具与环境（文科用）

大学计算机基础大学计算机基础————系统工具与环境系统工具与环境（文科用）（文科用）

赵欢肖德贵杨小林陈娟吴蓉晖编著

第三部分网页设计与制作第三部分网页设计与制作第第 88 章网页设计基础章网页设计基础

大学计算机基础——系统工具与环境（文科用）

2大学计算机基础——系统工具与环境

















文档工具栏的最左边是视图的切换按钮，利用按钮可以在“代码”、“拆分”、和“设计”三种视图之间方便地进行切换。在代码视图下，文档窗口显示网页的 HTML 代码；在设计视图下，文档窗口显示网页的设计效果；在拆分视图下，文档窗口分为两部分，同时显示网页的设计效果和 HTML 代码。


在标题文本框中显示当前网页的标题。当浏览网页时，该标题将显示在浏览器的标题栏中。如果该网页没有标题，则可在标题文本框中为其设置标题。在工具栏的右边显示一些常用的工具按钮：文件管理，在浏览器中预览调试，刷新设计视图，视图选项，可视化助理，验证标记，检査浏览器兼容性。


文档窗口是 Dream weaver 进行网页制作的主要区域。当文档窗口处于最大化状态时（默认状态），顶部会显示选项卡，上面显示所有打开的文档的文件名。若要切换到某个文档，单击它的选项卡。如果某文档尚未保存所做的更改，则 Dream weaver 会在文件名后显示一个星号。Dream weaver 还会在文档的选项卡下（如果在单独窗口中査看文档，则在文档标题栏下）显示“相关文件”工具栏。相关文档指与当前文件关联的文档，例如 CSS 文件或JavaScript 文件。单击文件名，便可打开相关文件。


插入栏“ 插入栏” 包括“常用”、“布局”、“表单”等 8 个标签。单击某个标签选项，在面板下显示相关的工具按钮，单击这个按钮，就在编辑窗口插入相应的对象。某些类别具有带弹出菜单的按钮，从弹出菜单中选择一个选项时，该选项将成为该按钮的默认操作。


属性面板属性面板可以检查和编辑当前选定页面元素的属性。可以在“文档”窗口或“代码”检査器中选取页面元素，然后在相应的属性面板中进行编辑。属性面板的内容根据所选定的元素会有所不同。


面板组面板组是相关面板的集合，默认放在 Dream weaver 工作区域的右侧。单击面板组顶部的面板名称，可在不同面板之间相互切换。在面板名称上右击，可通过快捷菜单来关闭、最小化、折叠或展开面板。如果需要的面板没有显示出来，可以通过【窗口】菜单下的命令来打开相应的面板。


面板组单击面板组左侧的【折叠为图标】按钮，即可将所有面板组隐藏为图标。再次单击该按钮，可显示隐藏的面板。根据自身需要，用户可以对 Dream weaver 的面板进行拆分或者合并。例如，将鼠标移动到属性面板的面板名称上，将其拖曳到面板组的面板名称旁，则将其合并到面板组中。反之，将鼠标移动到面板组的文件面板的面板名称上，将其拖曳到面板组范围之外，则将其拆分为独立的面板。


状态栏“ 文档”窗口底部的状态栏提供与正在创建的文档有关的其他信息。


大学计算机基础——系统工具与环境 27


栏目设计写文章前先要拟定提纲，文章才能层次清晰。同样，在制作网站前，先要将网站的内容进行分类，设计成不同的栏目。

网站标题一级栏目二级栏目

我的大学

校园歌曲校园风光

校园地图

土木学院机械学院

电气工程学院……


风格设计版面布局厂字型所谓厂字型结构就是指页面顶部为横条网站标志加广告条，下方左面为主菜单（主导航栏），右面显示内容的布局。这是网页设计中使用最广泛的一种布局方式。这种布局的优点是页面结构清晰、主次分明，且初学者最容易掌握的。同字型页面上面一般有一个广告条，下面的中间是网页的主要内容，左右两面都是导航条。这种布局的优点是充分利用版面、信息量大。


风格设计版面布局封面型这种类型基本上是出现在一些网站的主页，大部分为一些精美的平面设计结合一些小的动画，放上几个简单的链接或者仅是一个“进入”的链接。这种类型大部分出现在企业网站和个人网站的首页中。标题正文型标题正文型布局的特点是内容简单。网页上部是网站徽标，下部是网页正文。例如百度、谷歌的主页。


风格设计色彩搭配网页色彩的选择和搭配是网页设计的重点之一。在设计网页的色调、背景、文字、图标、边框、链接时，都会遇到选择色彩的问题。色彩能够给人以联想，如蓝色、绿色给人的感觉是冰冷的，红色、黄色给人的感觉是火热的，黑色、白色、灰色则属十中性偏冷的颜色。一般一个网站的标准色彩不超过三种。


准备相关素材在建立具体可见的网页之前，最重要的工作是围绕建站目标，收集资料，准备相应的素材，形成建设站点所必需的资源库。除了一般的文字资料外，制作人员所搜集的重要站点素材是图片、动画、视频等。要成为一个好的网站制作人员，应熟练掌握Photoshop 、 Fireworks 、 Flash 等工具。


建立本地站点建站资料准备好后，可以根据网站的栏目建立一个合理的文件结构。对于内容较多，需要经常更新的栏目可以建立独立的子目录。而一些内容简单，不需要经常更新的栏目，可以合并放在一个统一的目录下。网站用到的素材文件，通常也会建立子目录来存放。例如，图片文件通常存放在 images子文件夹。


完成具体页面本书的其余章节将详细介绍制作具体页面的方法


发布测试网站在整个网站创建完成并测试无误后，需要将网站根目录及其子文件夹中的所有文件都复制到 WWW服务器上〔即上传到服务器〕，这样，访问者就可以通过网络访问该网站了。要将网站上传到 www服务器，必须先在网上申请一个网站空间。上传的方法通常有两种：一是使用 FTP 方式上传网站；二是使用 WEB 方式上传网站。


站点建设实训实训任务：在 Dream weaver 中建立站点，该站点的名称为“我的主页”，存放在 D盘的 me 文件夹。并且，在该站点文件夹下建立一个 images子文件夹



网页的实质是一个用 HTML 描述的纯文本文件。 HTML的英文全称是 Hyper Text Markup Language ，中文叫做“超文本标识语言”。HTML 是通过对文档的格式、特性进行描述的标记来控制数据显示的。HTML 标记是一种用小于号“ <” 和大于号“ >” 括起来的短语和符号。标记大多数是成对使用的，即由“开始标记”和“结束标记”两部分构成，其语法是： < 标记名称> 内容 </ 标记名称 > 。其中，“开始标记”告诉浏览器开始执行该标记所表示的功能，“结束标记”标志着该功能的结束，“内容”部分就是被这对标记施加作用的部分。例如， <title> 我的主页 </title> ，表示网页的标题是“我的主页”。


此外，在许多开始标记内还可以包含一些属性，扩展标记的功能，其格式为：〈标记名称属性 1 属性 2 属性 3 〉。例如， <font color=“#0000FF” size=“7”> 欢迎来到我的主页 ! </font> 表示通过将文字的颜色设为蓝色，文字的字号设为 7 号。


HTML 文件包含文件头和文件体两部分。文件头对文件的有关信息，如文件标题、编码方式、是不是索引等进行了定义，这些信息一般不会作为文件本身的一部分显示在浏览器窗口中。文件则体包含了文件的所有信息和格式信息。


HTML 文件的最基本的结构如下：<HTML> 文件开始 <HEAD> 文件头开始<META><TITLE> 网页标题 </TITLE> </HEAD> 文件头结束<BODY> 文件体开始正文部分，即在浏览器上显示的内容</BODY> 文件体结束</HTML> 文件结束


HTML 中常用 <P><BR><CENTER><B><I><U><FONT>等标记对文本进行格式化。<P></P> 标记：用来创建个段落。 <P> 标记还可以使用align 属性 ( 值可以是 left 、 center 或 right 设置段落的对齐力式。 )<BR> 标记：它没有结束标志，用来创建一个回车换行符。<CENTER></CENTER> 标记：位于这个标记对中的内容在页面上居中显示。


<B></B><I></I><U></U> 标记：这三对标记分别使被控制的内容以粗体、斜体和下划线形式显示。<H1></H1>……<H6></H6> 标记：是对文本中的标题进行操作的六个标志对，其中， <H1></H1> 用于控制最大的标题，而 <H6></H6> 控制最小的标题。也即标志对中后面的数字越大，标题文本越小。<FONT> 标记：可以设置文本的字体、颜色和大小。


属性名属性描述

SIZE 设置文本字体的大小。但可以是 1 到 7 之间的任意一个数。SIZE=1 时 . 文本最小； SIZE=7 时，文本最大

COLOR

设置文本的颜色。例如： <font color="#0000FF">HTML 是用六个十六进制数表示 RGB （即红、绿、蓝三色的组合）颜色的，如 #0000FF 对应的是蓝色。此外，还可以使用 HTML语言所给定的常量名来表示颜色：Black 、 White 、 Green 、 Gray 、 Yellow 等

FACE 设置文本使用的字体，例如： <font face="楷体 _GB2312">


HTML 语言中插入图像的标记是 <IMG> ，其语法是：<IMG SRC=” 图像文件地址” > 。SRC 属性在〈 IMG 〉标记中不可缺少，且必须赋值，其值就是图像文件所在的路径和文件名。


此路径可以是相对路径，所谓相对路径是指，所要嵌入到当前 HTML 文件的图像文件与当前 HTML 文件的相对位置所形成的路径。假设当前的 HTML 文件与图像文件 ( 文件名为 me.gif)假设是在同一个目录下，则可以将代码写成 <img src="me.gif" 。假设图像文件位于当前 HTML 文件所在目录的一个子目录 (假设子目录名是 image 下，则代码应为 <img src="images/me.gif" 。假设图像文件位于所嵌入的 HTML 文件的上级目录的 image子目录下，则代码为 <img src="../images/me.gif" ，其中 "../" 表示上级目录。


链接是 HTML 的关键技术，因为有了它，才能把WWW连成一个信息的海洋。在 HTML 中，超级链接的语法格式为 <a herf=“资源地址” > <触发内容 /a>其中，属性资源地址定义了单击链接后跳转的目的地，“触发内容”用来触发链接，它可以是文字，也可以是图片或其他。例如： <a herf=“http://www.hnu.cn”> < 我的大学 /a> 该语句创建了一个触发内容为文字“我的大学”的超级链接，链接的目标是湖南大学的主页。


如果“资源地址”是同一网站的不同文件，则采用“相对路径”来指示这个文件；如果“资源地址”在其他服务器上，则资源地址采用 URL（统一资源定位）表示，即：“协议名： // 主机域名 /路径 / 文件名”，常用的协议名有 HTTP 、 FTP 、 MAILTO等；如果“资源地址”是同一页面的不同位置，则可以先用属性 NAME 在要跳转到的地力建立一个标签，例如： <A NAME=” 标签名” > ，然后再用语句： <a herf=“# 标签名” > <单击此处跳转到标签名 /a> 创建一个触发内容。


表格是 HTML 的一项非常重要的功能，它在网页中已不局限于以传统方式描述各类数据，而是大量用于页面的排版布局。表格的主体标记如下 :<TABLE>…</TABLE> ：定义一个表格。<TR>…</TR> ：定义表格的一行。<TH>…</TH> ：定义一个表头，在表头中的文字会以粗体显示。<TD>…</TD> ：定义一个单元格。


属性名属性描述BORDER 设置表格外框线的宽度，取值范围是 0,1,2,3……

CELLSPACING 设置表格中单元格间的间隙，取值范围是 0,1,2,3……CELLPADDING 设置表格中单元格内部的空白，取值范围是 0,1,2,3……

WIDTH 设置表格的宽度，直可以是像素，也可以是百分比（相对值〉HEIGHT 设置表格的高度，值可以是像素，也可以是百分比（相对值〉ALIGN 设置表格在页面中的对齐方式，值可以为 center, left, right

BGCOLOR 设置表格的前景色BORDERCOLOR 设置边框线的颜色

FRAME

设置表格边框的显示情况。值为 box 时，显示表格的 4 个边框；值为 above 时，只显示表格的上边框；值为 below 时，只显示表格的下边框；值为 besides 时，显示表格的上、下边框；值为 vsides 时，显示表格的左、右边框；值为 lhs 时，只显示表格的左边框；值为rhs 时，只显示表格的右边框；值为 void 时，不显示表格的任何边框

RULES

设置表格分隔线的显示情况。值为 all 时，显示表格中的所有分隔线：值为 rows 时，只显示表格中行与行之间的分隔线；值为 cols时，只显示表格中列与列的分隔线；值为 none ，不显示表格中的分隔线。


属性名属性描述BGCOLOR 设置一行或一个单元格的背景色

ALIGN设置水平方向上的对齐方式，值可以是 left ， right ， center…

VALIGN设置垂直方向上 . 的对齐方式，值可以是 bottom ， top ， middle…

COLSPAN设置跨多列的单元格，值为单元格跨列需占据的列数

ROWSPAN设置跨多行的单元格，值为单元格跨行需占据的行数

TR 、 TH 和 TD 标记的属性


框架是一种分割浏览器窗口的布局形式。它能把一个浏览器窗口分割成几个部分，每个部分包含一个独立的网页。框架的基本语法如下<FRAMESET><FRAME SRC="url"></FRAME><NOFRAMES> 浏览器无法显示框架时要显示的内容 </NOFRAMES>


实训任务：在站点“我的大学”中建立网页“ first” ，网页标题为“ example” 。

第三部分网页设计与制作第三部分网页设计与制作第第 99 章网页制作基础章网页制作基础




文字在网站的设计中包括正文、标题、特殊字符、滚动文字等，是网页设计最基本的元素之一。文字的颜色、大小、间距等可任意设置。


输入文字时，将视图切换为设计模式，然后在可视化编辑窗口中，将光标定位在适当的位置，直接输入文字。中间要分段的地方，直接按回车键。也可以从外部导入文本。打开记事本、 Word 等应用程序，复制文本，在 Dream weaver 编辑窗口粘贴即可。 Dream weaver CS4 不保留其他程序的文本格式。但是从浏览器窗口的网页中所复制的文本，粘贴到 Dream weaver 编辑窗口中，会保留大小、颜色等大部分格式。


在可视化编辑窗口输入文字的长度超过了 Dream weave 窗口的显示范围，文字将自动换到下一行。如果用 Enter键换行，则将对文本进行分段，换行的行距较大。而用 Shift+Enter 组合键换行，将在文本中插入换行符，文本的行距为正常行距。或选择“插入栏”的“文本”类的“字符”按钮菜单下的，也可以插入换行符。


在在 Dream weaver 中，连续敲击空格键时仅仅只输入一个空格。若要输入多个连续的空格，可以选择“插入栏”的“文本”类的“字符”按钮下的。或切换到中文输入状态，设置为全角输入状态，再敲击空格键。


如果属性面板没有显示，可以使用组合键 [Ctrl]+[F3]或菜单【窗口】的【属性】命令打开属性面板。或在选中文字后，单击右键，选择快捷菜单的【属性】命令打开属性面板。


Dream weaver 中定义了七种段落格式，使用属性面板中的格式下拉列表框，可以将所选的文本应用一种段落格式。选择“段落”，则文本应用 P 标签的默认格式，选择“标题1” ，则文本添加 <H1> 标签，应用标题 1 格式……。


添加中文字体：选择主菜单【格式】的【字体】的【编辑字体列表】命令


可以选择文字大小以像素（ px ）、点数（ pt ）、英寸、厘米、毫米、 12pt 字、字体高度中的一种为度量单位，然后在“大小”下拉菜单选择一种适当的大小


选中文字后，在文本属性面板上单击按钮文字变为粗体，单击按钮文字变为斜体。


对齐方式的作用对象是整个段落文字，将光标放在一个段落文字中的任意位置，单击属性面板的按钮实现左对齐。按钮实现居中对齐，按钮实现右对齐，按钮实现两端对齐。选中多个段落，可同时设置这些段落的对齐方式。


选中文字后，在文本属性面板上单击按钮文字变为粗体，单击按钮文字变为斜体。


当显示多个相关的条目时，使用列表方式可以清楚地表示出各个条目的并列关系。项目列表按序可分为无序列表和有序列表两种形式。无序列表通常用各种几何符号来表示其列表关系，主要用于一种并列关系的元素组合，各列表项之间并不存在先后主次的顺序。选中要设为无序列表的多个段落，单击按钮将其变为项目列表，每个段落的前面自动加上项目符号。

有序列表通常用数字或字母来表示各个条目的先后关系。选择要应用有序项目符号的所有段落，单击按钮可将其变为编号列表，每个段落的前面自动加上编号。默认状态下使用的编号为“数字序列”，用户可以根据需要更改编号的样式。要改变编号或列表的样式，选中定义为列表的文字，单击右键，在快捷菜单中选择【列表】的【属性】，打开“列表属性”对话框。在样式下拉列表中，用户可选择编号的样式。



文本属性面板上的按钮和按钮可设置列表文字的凸出和缩进。设置多级编号时，可使用这两个按钮来升高或降低编号的级别。


水平线可用于页面上内容的分隔。单击“插入栏”的“常用类”的水平线按钮，或选择主菜单【插入】的【 HTML 】的【水平线】命令，在编辑窗口会加入一条水平线。单击该水平线 , 可在属性面板中设置水平线的属性，如宽度、高度、对齐方式等


单击“插入栏”的“常用类”的日期按钮，打开“插入日期”对话框。用户可以选择日期格式，还可以选择是否每次保存文件时都自动更新该日期。


单击主菜单【插入】的【 HTML 】的【特殊字符】菜单命令，可以在光标位置插入所选择的字符。


实训任务：在站点“我的主页”中建立网页“ xg” ，并编辑以下内容：将文本文件“校歌”的文字复制到网页中。在网页开始处插入文字“湖南大学校歌”，并设置其为黑体， 36 号，红色，居中。在第一句的结尾处（萧友梅先生作曲）加上换行符。在第一句和第二句的开头处各插入四个空格。在“校歌歌词”和“歌词注释”前插入水平线在“校歌歌词”和“歌词注释”前设置项目符号在校歌的歌词（从“麓山巍巍”到“扬我国光”）前加入项目符号，并设置文本缩进一层。在歌词的注释（从“泱泱”到“治国平天下”）前加入列表符号，并设置文本缩进一层。



图像是网页中重要的元素之一。在 Dream weaver 中可以方便地将图像插入到网页并进行各种处理，用来展示照片、图画或者修饰页面，也可以将图像作为背景图像。


网页中的图像分为正文图像和装饰图像。正文图像一般是照片，尺寸较大，是网页内容的一部分。装饰图像用于提供网页的美化效果，如边框、艺术字、小点缀、作为页面或局部的背景，在页面上面起导航作用，制作时应避免使用过大的图像。Dream weaver 和大多数浏览器一样，支持使用JPG 、 PNG 、 GIF 格式的图像。


GIF 格式GIF 格式一般只支持 256 色，不能用于存储真彩的图像文件，是存储非连续色调图像或颜色比较单一的图像。但GIF支持透明色，可以使图像浮现在背景之上，且GIF89A 格式的 GIF 图像可以产生动画效果。 GIF 图像文件扩展名为 .gif 。 GIF 图像的制作软件较为多，例如Photoshop 、 Animagic GIF 、 Ulead Gif Animator 等。


JPEG 格式JPEG 格式支持 24bit真彩色，是存储照片或连续色调图像的较好格式。在图像处理软件中，以 JPEG 格式储存时，提供多级压缩级别。由于文件经过压缩，可减少网络的传输时间，适合应用于互联网。 JPEG 图像文件的扩展名为JPG 或 JPEG 。


PNG 格式PNG 格式是采用无损压缩方式的可携式网络图像，是目前最不失真的格式，具有 gif 和 jpg 的色彩模式。 PNG 格式同样支持透明图像的制作，但不支持动画应用效果。在Fireworks软件中，文件的默认格式就是 PNG 。


网页中的图像不是保存在网页文件中，而是单独的图像文件。在网页中要使用的图像文件必须保存在站点文件夹中。大多数网站会将图像文件保存在专门的文件夹中，常见的是将图像文件保存在 images 文件夹中。


选择【插入】菜单的【图像】命令，或单击“插入栏”中“常用类”的“图像”按钮，打开“选择图像源文件”对话框。


在“选择图像源文件”对话框中，选择要插入的图像文件。在文件列表中单击图像文件时，图像预览区会显示这个图像的缩略图。若图像没有存放在站点所在的文件夹下，在“选择图像源文件”对话框的“ URL” 文本框中，显示的是本地计算机硬盘中的绝对路径。否则，“ URL”选项就变成相对于文档或站点根目录的路径名。


如果图像文件在站点文件夹中，就会直接插入到网页中，同时在编辑窗口显示出图像。如果图像文件没有在站点文件夹中，就会打开对话框询问是否将图片文件复制到站点所在的文件夹。单击“是”按钮，系统打开“复制文件为”对话框，用户可指定图片文件的复制位置。通常，把图片文件复制到站点文件夹的 images子文件夹中。


在编辑窗口中单击插入的图像，图像周围出现 3 个控制点，同时在属性面板中可以设置图像的各种属性。面板左上方是图像预览方式，可以大致看到图像的内容。预览图像的右边说明了所插入图像的大小，此图像的大小是 201K 。


在未调节图像大小时，“宽”与“高”显示的是图像原始宽度与高度，单位是像素点。如果用手动方式，拖动图像右下角的黑色控制点来调整图像的大小，“宽” 与“高”栏中的数值也随着改变（拖动结束后数值也变成了粗体数字）。倘若改变图像大小后 ,希望回复到原图像的大小，单击“重设大小”按钮即可。如果要维持原图像的宽度与高度之比例不变，按住 Shift键拖动图像右下角的黑色控制点来调整图像大小。


在版面安排上，若图像和文字贴得太近，容易使人产生压迫感。因此，适当地调整图像间距可以使浏览者在浏览网页时更加舒适。“垂直边距”设置图像和周围文字的上下距离，“水平边距”设置图像和周围文字的水平距离，单位为像素。


在“替换”中输入文字说明。用户若关闭了浏览器中的图像显示，在浏览网页时，图像处会显示一个带图像标志的方框，上面显示所设置的替代文字。


为图像加上适当的边框线，可以使图像产生一种立体感。在“边框”输入数值即可设置图像的边框线的宽度。若要取消边框，只需删除“边框”的数值。


在图像的对齐属性下拉列表中有 10 个选项。在网页制作的实际应用中，使用最多的是左对齐和右对齐。


选中要裁剪的图像，单击“属性”面板中的“裁剪”按钮，在其四周将出现一个裁剪控制框。将鼠标指针指向控制点，拖动鼠标可以改变裁剪框的大小。将鼠标指针移到裁剪框中拖动鼠标可以移动裁剪框的位置。在裁剪框中双击鼠标或按 Enter键，就可以剪切掉裁剪框以外的图像。


在 Dream weaver 中，选中图像，单击“属性”面板中的“亮度和对比度”按钮，打开“亮度 / 对比度”对话框。在“亮度”和“对比度”中，输入合适的数值，可改变图像的亮度和对比度。


通过扫描得到的图像，其边缘常常是模糊的，可以通过Dream weaver提供的锐化图像功能提高图像的质量。选中要锐化的图像，单击“属性”面板中的“锐化”按钮，打开“锐化”对话框，输入合适的数值。锐化的数值越大，则锐化程度就越高。


在实际制作网页的过程中，当网页的整体排版已经完成，但是需要插入的图像还没有制作出来时，可以插入一个图像占位符，来配合排版的需要，等到图像制作出来后，再将图像占位符替换掉。


在【插入】菜单中选择【图像对象】下的【图像占位符】命令，或单击“插入栏”的“常用类”的“图像”下的“图像占位符”按钮，打开“图像占位符”对话框


鼠标经过图像实际上由两幅图像组成：初始图像（页面初次装载时显示的图像）和替换图像（当鼠标指针掠过时显示的图像），两幅图像的大小必须相同。在【插入】菜单中选择【图像对象】下的【鼠标经过的图像】命令，或单击“插入栏”的“常用类”的“图像”下的“鼠标经过的图像”按钮。


选择【修改】菜单的【页面属性】命令，或单击“属性”面板上的“页面属性”按钮，打开“页面属性”对话框，在“背景图像”文本框中，输入作为背景图片文件的路径和文件名，或单击“浏览”按钮，在“选择图像源文件”对话框中选择图片。


默认情况下，当网页尺寸比背景图像大，会重复显示背景图像。在“重复”下拉列表中选择“ no-repeat” ，背景图像只显示一次；选择“ x-repeat” ，背景图像在水平方向上重复；选择“ y-repeat” ，背景图像在垂直方向上重复；选择“ repeat” ，则背景图像在水平和垂直方向上均重复。


实训任务：在网页“ xg” 中完成以下操作：在“歌词注释”旁插入图像文件“ hndx.jpg” ，设置图像右对齐，垂直和水平边距为 50 。设置图像的边框为 3 ，颜色为蓝色。设置图像的锐化值为 5 。设置页面的背景图像为“ bj.gif”



在 Dream weaver 中，可以快速、方便地向网页中添加音频、视频等多媒体内容，使网页更加生动。



midi 或 mid(Music Instrument Digital Interface,乐器数字接口 )此格式用于器乐，很小的 MIDI 文件就可以提供较长时间的声音剪辑。许多浏览器都支持MIDI 文件，并且不需要插件。但是 MIDI 文件不能通过录制获取，并且必须使用特殊的硬件和软件在计算机上合成。


wav （波形扩展 )此格式具有良好的声音品质，许多浏览器都支持 wav 格式文件，并且不需要插件。可以从 CD 、磁带、麦克风等录制自己的 WAV 文件。但是，此格式文件较大，会影响在网页的传输速度。


mp3(Motion Picture Experts Group Audio Layer-3 ，运动图像专家组音频第 3层，或称为 MPEG 音频第 3 层 )mp3 是一种压缩格式，它可使声音文件明显缩小，且其声音品质较好。 mp3技术可以对文件进行“流式处理”，使访问者不必等待整个文件下载完成，即可收听文件。若要播放mp3 文件，访问者必须下载并安装辅助应用程序或插件，例如 QuickTime 、 Windows Media Player 或 Real Player 。


ra 、 .ram. 、 rpm 或 Real Audio此格式具有非常高的压缩度，比mp3 格式文件还要小。因为可以在普通的服务器上对这些文件进行“流式处理”，所以访问者在文件完全下载之前，就可听到声音。但是，访问者必须下载并安装 Real Player辅助应用程序或插件，才可以播放这种文件。


qt 、 .qtm. 、 mov 或 Quick Time此格式是由苹果公司开发的音频和视频格式。 Apple Macintosh 操作系统中包含了 Quick Time ，并且大多数使用音频、视频或动画的 Macintosh应用程序都使用 Quick Time 。 PC 也可播放 Quick Time 格式的文件，但是需要特殊的Quick Time驱动程序。


选择要进行链接的文本，在文本属性的“链接”文本框中键入文件的路径和名称，或单击文本框右边的“文件夹”按钮，打开“选择文件”对话框以定位文件。当浏览网页时，单击该链接，浏览器打开对话框询问用户是要打开该文件，还是要将该文件保存到本机。若用户选择打开，将启动相应的播放程序播放该文件；若选择保存，在“另存为”对话框中指定保存的位置后，相应的音频文件就开始下载。


通过嵌入一个音频文件，可以将其集成到网页中。但要求浏览器具有所选音频文件的播放器插件时，音频才可以播放。将光标放在网页文档中要放置音频文件的位置，选择“插入栏”的“常用类”的“媒体”下的“插件”按钮，打开“选择文件”对话框。在“选择文件”对话框中，选择音频文件。


当插入插件对象后， Dream weaver 会显示一个通用的插件占位符。选中插件对象，在“属性”面板中，可设置宽度、高度和源文件名等选项。在浏览器中显示网页时，此处会显示播放器，并播放该音频文件。


如果要使用背景音乐，可以在代码中使用 <bgsound> 标记进行设置。其语法是 <bgsound src=“背景声音文件” loop= 数值 > loop= 正整数表示背景音乐重复的次数， loop=-1 则表示无限重复当窗口最小化时，背景音乐自动暂停播放，窗口恢复时，继续播放。



Microsoft 的 ASF 文件格式Microsoft 的 ASF 是 Advanced stream Format 。微软将ASF 定义为同步媒体的统一容器文件格式。 ASF 是一种数据格式，音频、视频、图像以及控制命令脚本等多媒体信息通过这种格式，以网络数据包的形式传输，实现流式多媒体内容发布。ASF 最大优点就是体积小，因此适合网络传输，使用微软公司的最新媒体播放器 Window Media Player 可以直接播放该格式的文件。用户可以将图形、声音和动画数据组合成一个 ASF 格式的文件，当然也可以将其他格式的视频和音频转换为 ASF 格式，而且用户还可以通过声卡和视频捕获卡将诸如麦克风、录像机等外设的数据保存为 ASF格式。另外， ASF 格式的视频中可以带有命令代码，用户指定在到达视频或音频的某个时间后触发某个事件或操作。


Real System 的 Real Media 文件格式Real Network公司的 Real Media 包括 Real Audio 、 Real Video 和 Real Flash 三类文件，其中 Real Audio 用来传输接近 CD音质的音频数据， Real Video 用来传输不间断的视频数据，它使得 Real System 可以通过各种网络传送高质量的多媒体内容。第三方开发者可以通过 Real Network提供的 SDK 将它们的媒体格式转换成 Real Media 文件格式。


Apple公司的 QuickTime 文件格式Apple公司的 QuickTime电影文件现已成为数字媒体领域的工业标准。 QuickTime电影文件格式定义了存储数字媒体内容的标准方法，使用这种文件格式不仅可以存储单个的媒体内容（如视频或音频采样），而且能保存对该媒体作品的完整描述。此文件格式还被设计用来适应与数字化媒体一同工作需要存储的各种数据。因为这种文件格式能用来描述几乎所有的媒体结构，所以它是应用程序间〈不管运行平台如何）交换数据的理想格式。 QuickTime 文件格式中媒体描述和媒体数据是分开存储的，媒体描述或元数据（ meta-data) 叫做电影 (movie ），包含轨道数目、视频压缩格式和时间信息。同时movie 包含媒体数据存储区域的索引。媒体数据是所有的采样数据，如视频帧和音频采样，媒体数据可以与 QuickTime movie存储在同一个文件中，也可以在一个单独的文件或者在几个文件中。


选择“插入栏”的“常用类”的 “媒体”下的“插件”按钮，在弹出的“选择文件”对话框中选择要插入的视频文件，再单击“确定”按钮。当插入插件对象后， Dream weaver 会显示一个通用的插件占位符。选择插件图标，在属性面板中将其“宽”和“高”设为合适的值。完成后，在浏览器中浏览该网页时，该视频将自动播放。注意，在网页中，如果想播放流媒体文件，用户必须使用辅助应用程序（如插件）。


Flash 是 Macromedia公司出品的，用在互联网上动态的、可互动的 Shockwave 。它的优点是体积小，可边下载边播放，这样就避免了用户长时间的等待。但是，要在浏览器中播放 Flash动画，浏览器中必须集成有 Flash播放器。最新的 Navigator 和 IE 中，都集成了 Flash播放器。其中， Navigator 通过相应的插件来实现， IE 则是通过ActiveX 控件来实现。


FLA 文件（ .fla ）所有项目的源文件，使用 Flash 创作工具创建。此类型的文件只能在 Flash 中打开（而无法在 Dream weaver或浏览器中打开）。可以在 Flash 中打开文件，然后将它发布为 SWF 文件或 SWT 文件以在浏览器中使用。SWF 文件 FLA 文件的编译版本，己进行优化，可以在WEB 上查看。此文件可以在浏览器中播放并且可以在Dream weaver 中进行预览，但不能在 Flash 中编辑此文件。FLV 文件（ .flv) 一种视频文件，它包含经过编码的音频和视频数据，用于通过 Flash Player 进行传送。例如，如果有QuickTime 或 Window Media视频文件，则可以使用编码器 ( 如 Flash CS4 Video Encoder 或 Sorensen Squeeze ) 将视频文件转换为 FLV 文件。


首先选择“插入栏”的“常用类”的“媒体”按钮下的“ SWF”按钮，打开“选择文件”对话框。在对话框中，选择所要插入的 Flash 文件，单击“确定”按钮。当插入该对象后，网页中会显示一个 swf占位符。在网页中选择该占位符，可以在属性面板中设置各选项


宽和高：以像素为单位指定动画的宽度和高度。文件：指定 SWF 文件或 Shock Wave 文件的路径。可键入路径或单击“文件夹”按钮以定位到文件。源文件：指定源文档（ FLA 文件）的路径（如果计算机上同时安装了 Dream weaver 和 Flash ）。若要编辑 SWF 文件，需设置影片的源文档。背景：指定影片区域的背景颜色。在不播放影片时（在加载时和在播放后）也显示此颜色。编辑：启动 Flash 以更新 FLA 文件 ( 使用 Flash 创作工具创建的文件 ) 。如果计算机上没有安装 Flash ，则会禁用此选项。


循环：使影片连续播放。如果没有选择循环，则影片将播放一次，然后停止。自动播放：在加载页面时自动播放影片。品质：低品质设置会首先照顾到显示速度，然后才考虑外观；而高品质设置首先照顾到外观，然后才考虑显示速度；自动低品质会首先照顾到显示速度，但会在可能的情况下改善外观。比例：确定影片如何适合在宽度和高度文本框中设置的尺寸。默认设置为显示整个影片。对齐：确定影片在页面上的对齐方式。播放：在“文档”窗口中播放影片


实训任务：在网页“ xg” 中完成以下操作：在第二句的后面插入新的段落，输入文字“下载歌曲”，并链接到音频文件“ xg.mp3” 。在标题的下面插入视频文件“ xg.asf” ，设置其宽度为 320 ，高度为 240 。


表格在网页制作的用途主要有两个方面：一是显示表格式数据。二是对网页中的文本、图像、视频等网页元素进行布局。


选择主菜单【插入】的【表格】菜单项，或单击“插入栏”的“常用类”的“表格”按钮，打开“表格”对话框


表格行数：确定表格行的数目。列数：确定表格列的数目。表格宽度：以像素为单位或按占浏览器窗口宽度的百分比指定表格的宽度。边框粗细：指定表格边框的宽度。单元格边距：确定单元格边框与单元格内容之间的像素数。单元格间距：决定相邻的单元格之间的像素数。标题：“无标题”对表格不启用列或行标题；“左列标题”将表格的第一列作为标题列；“首行标题”将表格的第一行作为标题行；“左侧和顶部标题” 将表格的第一行作为行标题，第一列作为列标题。辅助功能：“标题”提供一个显示在表格上部的标题。 “摘要”对表格进行注释，但不会在浏览器中显示使用表格进行布局时，通常不显示表格边框，可设置边框粗细、单元格边距、间距为 0 。


用下列方法可选择表格，选中的表格会在表格右侧和下侧显示三个黑色的锚点。单击表格的下侧或右侧外边框单击表格内单元格边框单击表格某个单元格，然后在“文档”窗口左下角中选择 <table> 标签。

单击表格某个单元格，然后选择主菜单【修改】的【表格】的【选择表格】菜单项。


其中，清除列宽和清除行高按钮，用于从表格中删除所有明确指定的行高或者列宽。将表格宽度转化为像素按钮用于将表格中每一列的宽度设置为以像素为单位的当前宽度。将表格宽度转化为百分比按钮用于将表格中每一列的宽度设置为按占文档窗口宽度百分比表示的当前宽度。


选择单元格鼠标拖动法：将光标放在单元格中，然后按住鼠标左键拖动，水平拖动可选择一行，纵向拖动可选择一列，斜线方向拖动，可选择矩形区域内的所有单元格。使用 Ctrl键和鼠标配合选择，按住 Ctrl键，在需要的单元格内点击，即可选择所需的单元格。该方法所选单元格既可以是相邻的，也可以是不相邻的。使用 Shift键和鼠标配合选择，将光标置于开始选择的单元格内，按住 Shift键，在需要的单元格内点击，即可选择所需的连续单元格。该方法只能选择连续单元格。


选中单元格后，属性面板，可设置水平对齐方式、垂直对齐方式、是否为标题行、背景颜色等选项


调整表格大小主要有两种方法：一是鼠标拖动法，首先选择整个表格，将鼠标指针指向锚点，按住鼠标左键，即可沿上下、左右方向移动，改变表格的大小；二是使用表格属性面板，首先选择整个表格，设置属性“宽”的值，即可改变宽度。注意：在表格属性面板中不能设置表的高度。


调整单元格大小可通过鼠标拖动来实现。将鼠标指针置于单元格的边框线，如果鼠标指针显示为双向箭头，按住鼠标左键拖动，可改变单元格的高度和宽度。或选择需要改变大小的单元格，设置单元格属性面板中属性“宽”和“高”的值也可改变单元格大小。


插入行单击要插入行位置的下方相邻单元格。选择主菜单【修改】的【表格】的【插入行】命令。插入列单击要插入列位置的右方相邻单元格。选择主菜单【修改】的【表格】的【插入列】命令。


插入指定数量指定位置的行或列单击需要插入行或列的单元格。选择主菜单【修改】的【表格】的【插入行或列】命令，打开“插入行或列”对话框。


删除行选择要删除的行，或选择该行内的任意单元格。选择主菜单【修改】的【表格】的【删除行】命令。删除列选择要删除的列，或选择该列内的任意单元格。选择主菜单【修改】的【表格】的【删除列】命令。


合并单元格时所选择的单元格必须是连续的、相邻的矩形区域中的单元格。选择要合并的单元格，选择主菜单【修改】的【表格】的【合并单元格】命令，可将多个单元格合并为一个单元格。选择要拆分的单元格，选择主菜单【修改】的【表格】的【拆分单元格】菜单项，打开“拆分”单元格对话框。


选择需删除的整个表格，按“ Delete”键。


表格嵌套是在一个表格的单元格中插入另外一个表格。在网页设计中，使用表格的嵌套技术，就可以设计更为复杂的表格结构，从而使页面内容排列的更条理、更紧凑。


插入表格后，可将文字和图片素材添加到表格中。将光标定位到单元格中，可直接输入文字。在输入时，按 Tab键可将光标移到下一个单元格。按方向键，则在相应方向上移动插入点。若要插入图像，定位到单元格，选择主菜单【插入】的【图像】命令，在弹出的对话框中，选择需要插入的图像文件。


实训任务：在网页“ xg” 中插入表格，对页面重新布局。插入一个六行二列的表格。将表格第一行、第二行、第三行、第五行的单元格分别合并。将表格第四行第一列的单元格拆分为上下两个单元格，再将下面的单元格拆分为左右两个单元格。设置表格的宽度为 800 ，边框为 0 ，对齐方式为居中对齐。将文字、图片、插件、水平线移动到对应的单元格。设置图片对象的垂直和水平边距为 0 ，对齐方式为默认。调整单元格的宽度和高度。设置“下载歌曲”和图片所在的单元格的水平对齐方式为居中。



超级链接（ Hyperlink) ，简称超链接、链接，是指从一个网页指向一个目标的连接关系。这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。而在一个网页中用来超链接的对象，可以是一段文本或者是一个图片。当浏览者单击已经建立链接的文字或图片后，浏览器将根据目标的类型来打开链接目标。


所谓文字链接，就是以文字为媒介所建立起来的超级链接形式。它是所有网页超级链接中运用最为广泛的链接之一。选取作为链接的文字，在属性面板的“链接”文本框中输入链接目标。


或单击文本框旁的“浏览文件”按钮，在弹出的对话框中定位到链接的文件。也可以单击文本框旁的“指向文件”按钮，将鼠标指向文件面板的链接目标字，就会跳转到链接目标


在属性栏中的“目标”下拉列表中，可选择链接目标打开的窗口。_blank ：在新的窗口中打开链接的网页，原来的浏览窗口仍然存在。_self ：在当前窗口中打开链接网页。_parent ：通常用于框架页面中，在上一级窗口中打开。_top ：通常用于框架页面中，在最高等级的窗口中打开链接网页。设置完超级链接后，当浏览网页时，若鼠标指向链接的文字，鼠标指针就会变成手掌的图标。单击这些文字，就会跳转到链接目标


图片也是经常被使用的链接媒介。选择图片后，在属性面板中设置链接目标。浏览网页时，单击图片后，网页就会跳转到链接目标。


图像链接是整张图像与一个目的地进行链接，而图像地图链接是在一张图像上建立多个热点，每个热点指向一个链接目标。图像地图链接又称为热点链接或热区链接。选中图像文件，在属性面板中单击“热点工具”，将鼠标指向图像，鼠标指针变为十字架形状，在图像上拖曳鼠标以形成热点。选中热点后，在属性面板中指定链接目标。


电子邮件链接，是指在单击该链接之后，直接触发启动Outlook Express 发送电子邮件软件，并默认打开新建的一个空白的新的电子邮件，提供给用户撰写。选择要进行链接的文字，在“插入栏”的“常用类”中选择“电子邮件链接”按钮，或选择主菜单【插入】的【电子邮件链接】命令，打开“电子邮件链接”对话框


对文字或图片建立电子邮件链接后，属性面板的链接栏中显示“ mail to: 电子邮件地址”。当浏览网页时，单击建立了链接的文字或图片后，就会打开电子邮件撰写软件，并新建一个空白邮件，收件人地址为链接中所设置的邮件地址


浏览大量信息内容的网页时，滚动条变得很长，使用鼠标很不方便。使用命名锚记链接，可以很好地解决这一问题。当单击它时，可以跳到页面中指定的位置。命名锚记链接的制作过程通常可以分为两大步骤：创建命名锚记和链接命名锚记。


要创建命名锚记，将光标移到需要插入命名锚记的位置，选择主菜单【插入】的【命名锚记】命令，或者单击“插入栏”的“常用”选项卡的“命名锚记”按钮，打开“命名锚记”对话框。在“锚记名称”文本框中输入锚记的名称。建立锚记后，在指定的位置插入一个锚记符号，这一位置也就是后面单击链接之后要跳转的位置。


创建命名锚记后，选择要跳转到锚记位置的文字或图像，在属性面板的链接文本框中输入锚记的名称。在浏览网页时，单击这些文字或图像，就会跳转到锚记所建立的位置。


所谓文件下载链接，就是链接的目标不是网页，而是文件。单击此类链接时，如果链接指向的是 GIF 、 JPG 或 PNG图像，则会在浏览器中显示图像。如果是其他类型的文件，就会打开对话框询问用户打开或保存文件。选择“保存”选项，则可将文件下载到本机上。


打开网页“ xyfg” ，建立命名锚记链接，实现页面跳转，在表格第一行的“美丽校园”处插入名为“ top” 的命名锚记。在图片上插入到“ top” 的链接。在文字“南校区风光”处插入“ nxq”锚记 , 文字“北校区风光”处插入“ bxq”锚记 , 文字“岳麓书院风光”处插入“ ylsy”锚记。在表格的第一行文字上插入到对应锚记的链接，“南校区” 链接到“ nxq” ，“北校区”链接到“ bxq” ，“岳麓书院” 链接到“ ylsy” 。


打开网页“ wddx” ，在文字上建立链接。在文字“校园风光”处插入链接，链接到本站点的网页“ xyfg” ，要求在新的窗口中打开网页。在文字“大学校歌”处插入链接，链接到本站点的网页“ xg” ，要求在当前窗口中打开网页。在文字“校园主页”处插入链接，链接到湖南大学网站www.hnu.cn 。在图片上插入链接，链接到邮箱账户 [email protected] 。打开网页“ xg” ，输入文字“返回”，在文字上建立到网页“ wddx” 的链接。

第三部分网页设计与制作第三部分网页设计与制作第第 1010 章网页制作高级技术章网页制作高级技术





CSS 的英文全称是 cascading style sheets ，即层叠样式表单，通常都称它为样式表。它是一系列格式设置规则。简单来说， CSS 的引入是为了使得 HTML 语言能够更好地适应页面的美化设计。样式表相当于一个模板，通过它可以快速地统一格式，如字体、颜色、字型、对齐方式等，使页面达到统一。有了样式表，就不必一个个地设置格式属性了。样式表不仅可以应用于同一文档的多处，通过外部样式还可以统一多篇文档的格式。当样式表被修改后，所有应用该样式表的文档格式都会自动更新。


概括地来说， CSS样式有以下重要的作用：将格式与结构分离。增强页面控制布局的能力。简化代码，提髙下载速度。使维护和更新网页变得更加容易。代码兼容性更好。


CSS 可分为内联样式表和外部样式表。内联样式表是若干组包括在 HTML 文档中的 CSS规则。一种是在 HTML 文档的头部标签 <head></head> 中定义，对当前整个 HTML 页面产生作用。一种是单独在某个HTML 标签中定义，只对当前 HTML 标签有效。外部样式表是存储在一个单独的外部 CSS （ .css ）文件中的若干组 CSS规则。在网页文档的文档头部分通过链接或@import规则对这个 CSS 文件加以应用即可。当外部样式表被更改时，各个引用该样式表的 HTML 页面风格也会随之发生变化，而不需要一个个地去改变。


CSS 可分为内联样式表和外部样式表。选择主菜单【格式】的【 CSS样式】的【新建】菜单命令或单击 CSS 面板中的“新建样式” 按钮，打开“新建CSS规则”对话框


选择器类型：创建 CSS样式的类型，包括类、 ID 、标签和复合内容四种类型。类可用于任何标签，是在页面上定义样式最灵活的方法。类名称必须使用“句点”开始，为类命名时尽量不要使用body或者其他 HTML 标签，防止产生冲突。ID仅应用于一个 HTML元素，一般以 "#" 开头。标签则是重新定义特定标签的外观，这种类型的样式是对于已有的页产生快速而具全局变化的极好的工具。复合内容则是基于选择的内容而建立的，通常可以在已经建立好的 ID 下进行下一步的定义，从而进行更加详细的约束。


选择器名称：用于输入样式的名称，根据选择器不同，可定义的名称规则不同。使用标签选择器时，选择器名称可以通过下面的下拉列表直接调用。规则定义：用于选择定义样式的位置，包括仅限该文档和新建样式表两种。仅限该文档表示所创建 CSS样式只针对当前页面使用。新建样式表则是建立一个独立的样式表文件，该文件可独立于页面存在并可以控制多个页面，从而保证整体网页的一致性，具有很强的管理功能。如有已经建立好的外联样式表，则该样式表同样会显示在下拉列表中。


在 Dream weaver 的 CSS样式中，包含了所有的 CSS样式，分为类型、背景、区块、方框、边框、列表、定位和扩展等 8 个部分。










选择主菜单【窗口】的【 CSS样式】可调用出 CSS样式面板


选择需要修改的样式，若修改原来属性，在参数栏中直接修改相应内容；若添加属性，可单击下面的“添加属性”进行新内容添加；若要删除某些参数，选择相应的参数，按右键选择【删除】即可。也可以在选择样式后，单击“编辑样式” 按钮，打开样式的规则定义窗口来编辑样式。对于 HTML 语法熟悉的设计者，也可以打开 CSS代码编辑窗口进行修改。


遇到不需要的样式的时候，可以将其删除。打开 CSS样式标签面板，选择不需要的样式，点击面板右下角的“删除 CSS规则” 图标，即可删除相应样式。或直接打开 CSS代码编辑窗口进行删除。


当不同的样式表中需要使用同一种样式，所有设置一样的时候，可以不必重新设计，只需要将已经设置好的样式表中的样式复制到另外需要的样式表中即可。选择需要复制的样式，按鼠标右键，在快捷菜单中选择【复制】命令，打开“复制 CSS规则”对话框


打开网页“ xyfg” ，执行以下操作：建立名为 image1 的扩展样式，使用模糊的滤镜效果。将 image1样式应用到网页的图片上，在浏览器中查看图片。修改 image1样式为波动的滤镜效果，在浏览器中观察图片的变化。


建立样式文件 style1 ，并将其应用于网页“ wddx” 和“ xyfg” 。新建一个样式文件 style1在样式文件 style1 中，新建样式，将链接的格式设置为加粗，颜色设为 063 ，中间划线。在样式文件 style1 中，新建一个样式，将区块的字母间距设为5 像素。将样式文件应用于网页“ wddx” 和“ xyfg” 。



框架是网页技术中常用的技术，利用这项技术可将页面分成不同的区域，在每个区域中可以分别显示不同的网页。框架由两个部分组成，框架集和单个框架。框架集是在一个文档内定义一组框架结构的 HTML 网页。它定义了网页的框架数、框架的大小、载入框架的网页源和其他可定义的属性等。单个框架是指在框架集中被组织和显示的每一个文档。框架是浏览窗口中的一个区域。如果一个页面划分成两个框，那实际上包含了三个独立的文件：一个框架集文件和两个框架内容 ( 显示在页面框架中的内容 ) 文件。


单击“插入栏”的“布局”选项下的“框架”按钮，在下拉列表框中可以看到预设定义的框架结构，选择按钮，即可在当前打开的页面中插入相应的框架集。选择主菜单【插入】下的【 HTML】的【框架】子菜单下的对应的框架菜单命令，也可以插入框架集


增加框架按下 Alt键，拖动一个框架的边框线，可以对框架进行垂直或水平划分。或选择主菜单【修改】的【框架集】命令，在子菜单中选择对应的拆分框架选项，可以增加框架。删除框架删除框架很简单，只要将框架边框拖离页面或拖动到父框架边上就可以删除框架。改变框架的大小拖动框架的边框线，即可改变框架大小。


框架的选择选择主菜单【窗口】的【框架】命令，打开“框架”面板。在框架面板中单击需要选中的框架，则可选择相应的框架。框架集的选择在文档窗口中，单击框架集的任意两个框架的边缘。或在框架面板中，单击框架集的外围，可选择框架集。




框架网页中显示了多个网页文件，因此需要对框架集和每一个框架进行保存。保存框架文件：框架中的内容其实就是一个独立的网页文件。要保存框架文件，将鼠标放置框架中，呈现编辑状态的光标形式时，选择菜单【文件】的【保存框架】命令。如果只保存框架集，在单击框架边框选中框架集后，选择菜单【文件】的【保存框架页】命令。选择文档中的任何文件执行菜单【文件】的【保存全部】命令，可以保存所有文件，其中既包括框架集文件又包括框架文件。


框架中通常会放置导航条。单击导航条中的链接对象，需要设定链接的网页在哪一个框架中打开。在框架网页中，可通过链接对象属性面板的“目标”下拉列表来指定。_blank: 在新的浏览器窗口中打开链接的网页，同时保持当前窗口不变。_parent ：在显示链接的框架中父框架集中打开链接的网页，同时替换整个框架集。_self ：在当前框架中打开链接，同时替换该框架中的内容。_top ：在当前浏览器窗口中打开链接的网页，同时替换所有框架。框架名称：选择一个框架名称以打开改框架中链接的网页。如果做外部链接，需使用 _top 或 _blank 用来确保该页面不会显示为自己站点的一部分。


建立网页“ wddxkj” ，执行以下操作：插入下方和嵌套的左侧框架。设置左侧框架的源文件为“ leftwddx.html” 。设置“ leftwddx.html” 网页中链接的目标为“ mainframe” 。设置主框架的源文件为“ xyfg.html” 。设置底部框架源文件为“ bottom.html” ，并且设置页面属性的上、下、左、右边距为 0 。

Documents

大学计算机基础 —— 系统工具与环境 （文科用）

大学计算机基础 —— 系统工具与环境（文科用）