第三讲 站点链接与表格布局.

Presentation on theme: "第三讲 站点链接与表格布局."— Presentation transcript:

1 第三讲 站点链接与表格布局

2 3.1 站点链接 一、链接的类型 二、管理链接 三、链接的HTML标记

3 一、链接的类型 可以以文本、图像、多媒体对象等创建超级链接，在一个文档中可以创建几种类型的链接： 内部链接： 在同一个文档之间的链接。
外部链接：在不同网站文档之间的链接。 电子邮件链接：此类链接新建一个已填好收件人地址的空白电子邮件。 命名锚记链接：此类链接跳转至文档内的特定位置。 链接到其它文档或文件（如图形、影片、PDF 或声音文件）的链接。 空链接和脚本链接：此类链接用于在对象上附加行为，或者创建执行 JavaScript 代码的链接。

4 二、管理链接 1.使用地图视图管理链接 可以通过在站点地图中添加、更改和删除链接来修改站点的结构。Dreamweaver将自动更新站点地图以显示对站点所做的更改。在【文件】面板中，选择【站点视图】菜单中的【地图视图】。 更改链接：在站点地图中，选择包含要更改的目标链接页面，单击鼠标右键从上下文菜单中选择【改变链接】。浏览到新的目标文件或键入其URL并确定。 删除链接：只需在站点地图中选择页面，右键单击，从上下文菜单中选择【删除链接】即可。 打开链接源：在站点地图中选择一个文件， 单击选择【站点】|【打开链接源】选项，或右键单击，从上下文菜单中选择“打开链接源”即可。执行此操作后，在“文档”窗口中打开属性检查器和含有此链接的源文件，同时该链接被突出显示。

5 2.在整个站点范围内更改链接 除了每次移动或重命名文件时让 Dreamweaver 自动更新链接外，还可以手动更改所有链接（包括电子邮件链接、FTP 链接、空链接和脚本链接），使它们指向其它位置。 此功能最适用于删除其它文件所链接到的某个文件，但也可以将它用于其它用途。

6 更改整个站点范围内链接的操作如下： （1）在【文件】面板的【本地视图】中选择一个文件。 注：如果更改的是电子邮件链接、FTP 链接、空链接或脚本链接，则不需要选择文件。 （2）选择【站点】菜单下的【改变站点范围的链接】。 （3）在【改变站点范围的链接】对话框中完成下列选项： 单击文件夹图标，浏览到并选择要取消其链接的目标文件。如果更改的是电子邮件链接、FTP 链接、空链接或脚本链接，则键入要更改的链接的完整文本。 变成新链接：单击文件夹图标，浏览到并选择要链接到的新文件。或键入替换链接的完整文本。

7 三、链接的HTML标记 1.链接标记 在HTML语言中，<a> 称链接标记， <a> 与 </a>标记内的文字、图片等等可以成为一个链接。 <a> 的一般参数设定如下： <a href=”链接目的地址” target=”目标窗口的打开方式”>链接对象</a> 例如：<a href=“wy_jichu.html” target=“_blank”>网页基础</a> 2.命名锚记标记 <a name="锚点ID" id="锚点ID"></a> 其中，name参数定义了一个命名锚记，它是链接的被接入点，作为被链接的位置，它不会被显示。这个参数不能与href参数同时使用。例如：<a name="tuxiang" id="tuxiang"></a>这里是一个锚点。

8 3.链接的HTML标记参数含义 （1）href参数 href=“wy_jichu.html"，其中href参数定义了一个链接的目的点为wy_jichu.html。它不能与name参数同时使用。 当作为一个外部链接时： href 所设定的是该链接所要链到的目的文件名称，若该文件与此 html 文档不是同在一目录时需加上适当的路径，相对路径或绝对路径皆可。 当作为一个内部链接时： href 所设定的是该链接所要连到的同文件内锚点或指定文件的锚点，且不需要包括任何内容只要加上结束标记 </a>即可。 （2）targer参数 这个参数相当于【属性】面板【链接】中的【目标】菜单的内容。 （3）name参数 这个参数定义了一个命名锚记，它是链接的被接入点，作为被链接的位置，它不会被显示。这个参数不能与href参数同时使用。

9 3.2 表格布局 一、插入表格 二、编辑表格 三、设置表格属性 四、排序及整理表格和单元格内容 五、 表格的高级应用 六、表格的HTML标记

10 一、插入表格 表格是对文本和图形进行布局的强有力的工具。表格由一行或多行组成；每行又由一个或多个单元格组成。
两种查看和操作表格的方式：“标准”模式（在该模式下，表格显示为行和列的网格）和“布局”模式（允许您在将表格用作基础结构的同时在页面上绘制方框、调整方框的大小以及移动方框）。 1、标准模式下的表格操作： 单击【插入】/【表格】,弹出【表格】对话框。 对话框表格大小参数：用于设置表格的行数、列数、表格宽度、边框粗细、单元格边距、单元格间距6个参数。

11 二、编辑表格 1.在表格单元中添加内容 （1）输入文字
在表格单元格中可以插入文字、图像和其他对象（如嵌套表格）等。单元格宽度会随着键入文本自动扩展。 （2）插入图像 通过【插入图像】，再选择需要插入的图像即可。 （3）插入表格 在表格的单元格中可以插入一个表格，形成嵌套表格。先单击需要插入嵌套表格的单元格，插入方法和直接插入表格相同。

12 2.操作单元格 可以对表格中的任意单元格进行复制、剪切、粘贴、删除等操作，还可以根据需要来拆分及合并单元格。 （1）合并单元格
所选区域是矩形选中需要合并的单元格后，执行下列操作之一： ①选择菜单栏【修改】→【表格】→【合并单元格】。 ②在展开的属性面板中，单击“合并单元格”。单个单元格的内容将会放置在最终的合并单元格中，所选的第一个单元格的属性将应用于合并的单元格。

13 （2）拆分单元格 当需要对单个单元格进行拆分时，可以使用拆分单元格。倘若选中多个单元格进行拆分单元格操作，操作仅对第一个单元格有效。选中需要合并的单元格后，请执行下列操作之一： ①选择菜单栏【修改】→【表格】→【拆分单元格】。 ②在展开的属性面板中，单击“拆分单元格” 。 然后在弹出的拆分单元格对话框中选择拆分的行数或者列数 。

14 三、设置表格属性 1.设置整个表格的属性 选中需要设置属性的整个表格后，属性面板就会显示该表格的相关属性。
表格 ID：该表格的 ID。 如果需要在页面使用JavaScript语言来控制表格，那么就需要一个ID。 行和列：表格中行数和列数。 宽和高：以像素为单位或按浏览器窗口宽度的百分比指定的表格宽度和高度。 填充：即单元格边距，指单元格内容与单元格边框之间的像素数。 间距：相邻的表格单元格之间的像素数。 边框：指定表格边框的宽度若要确保浏览器不显示表格中的边距和间距，请将“边框”、“单元格边距”和“单元格间距”都设置为 0。

15 对齐：确定表格相对于同一段落中的其它元素（例如文本或图像）的显示位置。
“左对齐”沿其它元素的左侧对齐表格（因此同一段落中的文本在表格的右侧换行）； “右对齐”沿其它元素的右侧对齐表格（文本在表格的左侧换行）； “居中对齐”将表格居中（文本显示在表格的上方和/或下方）； “缺省”指示浏览器应该使用其默认对齐方式。当将对齐方式设置为“默认”时，其它内容不显示在表格的旁边。若要在其它内容旁边显示表格，需要使用“左对齐”或“右对齐”。

16 清除列宽和清除行高：从表格中删除所有明确指定的行高或列宽。
将表格宽度转换成像素和将表格高度转换成像素：将表格中每列的宽度或高度设置为以像素为单位的当前宽度（还将整个表格的宽度设置为以像素为单位的当前宽度）。 将表格宽度转换成百分比和将表格高度转换成百分比：将表格中每个列的宽度或高度设置为按占“文档”窗口宽度百分比表示的当前宽度（还将整个表格的宽度设置为按占“文档”窗口宽度百分比表示的当前宽度）。 背景颜色：表格的背景颜色。 边框颜色：表格边框的颜色。 背景图像：表格的背景图像。

17 2.设置行、列和单元格的属性 如果选中表格中的单元格、行或列等元素时，属性面板就会显示对应表格元素的相关属性选项。按住Ctrl键，单击单元格的边框即可选中单元格。 选中表格的一列的属性（注意鼠标指针的变化）行、列相关的属性主要有： 水平：指定单元格、行或列内容的水平对齐方式。 垂直：指定单元格、行或列内容的垂直对齐方式

18 四、排序及整理表格和单元格内容 1.排序表格 可以根据单个列的内容对表格中的行进行排序，甚至还可以根据两个列的内容执行更加复杂的表格排序。需要注意的是，不能对包含合并单元格的表格进行排序。具体操作方法是： （1）选择该表格或单击任意单元格。 （2）选择菜单栏【命令】→【排序表格】，弹出排序表格对话框。 （3）在对话框中设置选项，排序按“列2”，顺序为“按数字顺序”，“降序”，然后单击【确定】。

19 对于排序对话框各个选项的功能，简要介绍如下：
排序方式：确定使用哪个列的值对表格的行进行排序。 顺序：确定是按字母还是按数字顺序以及是以升序（A 到 Z，数字从小到大）还是以降序对列进行排序。 再按/顺序：确定将在另一列上应用的第二种排序方法的排序顺序。 排序包含第一行：指定将表格的第一行包括在排序中。 排序标题行和排序脚注行：指对标题行和对脚注行进行排序 指定按照与主体行相同的条件对表格的标题或者脚注部分中的所有行进行排序。 使排序完成后所有行的颜色保持不变：指定排序之后表格行属性（如颜色）应该与同一内容保持关联。

20 2.整理表格内容 （1）HTML中的表格格式设置优先顺序
在给表格内容设置格式时，我们看到可以对单元格、行、列以及整个表格进行属性设置，表格格式设置的优先顺序如下：单元格→行→表格。

21 （2）导入和导出表格式数据 可以直接将在Microsoft Excel表格数据导入到 Dreamweaver 中并设置为表格格式。也可以将表格数据导出到文本文件中，相邻单元格的内容由分隔符隔开。您可以使用逗号、冒号、分号或空格作为分隔符。 导入表格的操作方法有以下三种： 选择【文件】→【导入】→【表格式数据】。 在【插入】栏的【数据】类别中，单击【导入表格式数据】。 选择【插入】→【表格对象】→【导入表格式数据”】。 单击浏览选择要导入的文件名称，选择需要的分隔符（即定界符）并设置相关属性数据，单击【确定】按钮即可。 导出表格对话框导出表格时，需要将插入点放置在表格中的任意单元格中，然后选择【文件】→【导出】→【表格】，在弹出的【导出表格】对话框中选择分隔符、换行符后单击【导出】按钮。并在弹出的对话框中保存文件即可。

22 五、 表格的高级应用 表格无疑是网页制作中最为重要的一个对象，因为通常的网页都是依靠表格来进行版面布局和各元素组织的，它直接决定了网页是否美观，内容组织是否清晰。合理的利用表格可以方便的美化你得页面。 1.水平细线 水平细线用以分隔页面，并且效果比直接插入的水平线更加美观。通过制作高为1像素的表格便可创建水平细线。 插入一个一行一列的表格，并将单元格边距和单元格间距都设置为0，边框设为1 ，然后单击【文档】→【代码】 按钮，切换到代码视图，将<td>和</td>标签之间的” ”删除，再切换到设计视图，即可看到水平细线的效果。如果想让水平细线变为彩色的，可对表格设置边框和背景颜色。

23 2.单像素表格 单像素表格就是利用设置单元格间距的属性，来使表格在浏览器中在表格和单元格的周围显示一条细线，从而避免了将表格边框宽度设置为1时显的过于突出的问题。 ⑴在属性面板中定义表格的边框为0（此项必须为0），填充为2(这项可使单元格中的内容与单元格边缘之间保持2个像素,可任意)；间距为1(此项使得单元格之间保持1个像素的间距)。 ⑵设置表格的背景色为想要的边框颜色，如#669933。 ⑶选定全部单元格，把全部单元格的背景色都设置为同一种颜色，如#F7F7DF。 ⑷在浏览器中预览一下效果，我们就可以看到表格呈现一个像素的边框了。

24 3.圆角表格 做网页时候为了美化网页，常常把表格边框的拐角处做成圆角，这样可以避免直接使用表格直角的生硬，使得网页整体更加美观。 ⑴先用Photoshop等作图软件绘制一个圆角表格所要一些图片。 ⑵首先建立一个3行3列的表格，设置表格边框为0,分别设置上面的图片作为单元格背景。

25 六、表格的HTML标记 1.表格标记 表格标记<table>和</table>。< table >是一个容器标记，它用以宣告这是表格而其它标记只能在它的范围内才适用。 此外，<tr>用以标示表格行、<td >用以标示表格列。 例如： <table width="60%" border="1"> <tr><td>只有一个单元格的表格</td></tr> </table> 它代表的含义是一个宽度占屏幕60%的表格，表格的边框为1，只有一个单元格，单元格里的内容就是“只有一个单元格的表格”。