第三章网页编辑.ppt

《第三章网页编辑.ppt》由会员分享，可在线阅读，更多相关《第三章网页编辑.ppt（63页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第三章网页编辑第三章网页编辑3.1 网页的基本操作 n3.1.1 新建网页新建网页Dreamweaver提供了多种创建网页的方法，下面分别介绍一下：（演示3-1）1如果Dreamweaver MX 2004 运行后显示起始页，则在起始页中直接选择“新建HTML文档”。2如果Dreamweaver MX 2004运行后不显示起始页，则在“文件”菜单选择“新建”命令，打开“新建文档”对话框。3在文档窗口中，也可以直接按Ctrl+N组合键，打开“新建文档”对话框。3.1 网页的基本操作 n3.1.2 保存网页保存网页（演示3-2）1.新建一个文件后，选择菜单“文件”中的“保存”命令。2在文档窗口中，

2、也可以直接按Ctrl+S组合键。3.需要将文件以不同路径或名称保存时，选择“文件”菜单中的“另存为”命令。注意：网页的后缀必须为htm或html，否则上传到服务器之后，浏览器无法正常打开。通常网站首页名字是index.html或index.htm。3.1 网页的基本操作 n3.1.3 打开网页与关闭网页打开网页与关闭网页（演示3-3）1启动Dreamweaver程序，在起始页面中显示了最近编辑过的文件，点击目标文件，即可打开。2选择“文件”菜单中“打开”命令（介绍下能打开的文件类型）。3在文档窗口中，也可以直接按Ctrl+O组合键，出现“打开”对话框。4通过“文件面板”打开文档。通过“文件面板

3、”找到相应的文档，双击即可打开相应文件。3.1 网页的基本操作 n3.1.4 页面属性的设置页面属性的设置（演示3-4）1.打开首页面，在编辑窗口下选择“修改”菜单中的“页面属性”，或在在工作区单击鼠标右键，在快捷菜单中选择“页面属性”，打开“页面属性”对话框。2.“页面属性”对话框中的各选项含义（在标题栏课本上有一处错误，以帮助文档为准）3.1 网页的基本操作 n3.1.5 网页预览网页预览（演示3-5）1按F12键。2选择“文件”菜单中的子菜单“在浏览器中预览”下的“Iexplore”命令。3单击“文档”工具栏的“在浏览器中预览/调试”按钮，并在弹出的下拉菜单中选择“预览在iexplore

4、”命令。3.2 在网页中添加文本和图片在网页中添加文本和图片n准备工作：1.首先启动Dreamweaver，确保已经用站点管理器建立好了一个网站（根目录）。2.为了制作方便，最好事先打开资源管理器，把要使用的图片收集到网站目录images文件夹内。3.2 在网页中添加文本和图片在网页中添加文本和图片n3.2.1 在网页中添加文本 1.添加文本1）直接添加文本：（演示3-6）（1）输入过程中换行方法：自动换行（根据窗口宽度，英文不连续）：自动换行的好处在于不管浏览器窗口的大小，网页文字都将依照窗口大小自动换行，避免超出水平页面之外而需要移动滚动条浏览的情况。利用Enter键换行（硬换行）：按En

5、ter键，则另起一个段落，并且插入点移到隔了一个空白行的位置上。利用Shift+Enter键换行（软换行）：如果想要将文字手动换行，中间又不出现空白行，可以按Shift+Enter键，其行距比直接按Enter键小。3.2 在网页中添加文本和图片在网页中添加文本和图片n3.2.1 在网页中添加文本 1.添加文本添加文本1）直接添加文本：（演示）直接添加文本：（演示3-6）（2）输入空格）输入空格 Dreamweaver中，在文本开始处直接按空格键是不会输入空格的，在文字之间按空格键可以输入半个空格。如果要在网页中输入空格，可以采用如下三种方法：1.按住“Ctrl+Shift”键，按一次空格键，键

6、入半个空格。2.将输入法由半角状态切换到在全角状态，按一次空格键，键入一个空格。3.输入多个连续空格：编辑-首选参数-常规3.2 在网页中添加文本和图片在网页中添加文本和图片n3.2.1 在网页中添加文本 1.添加文本添加文本 2）复制文本打开字处理软件下含有文本的文档，如word文档，执行“编辑”菜单中的“复制”命令复制文本。然后在Dreamweaver文档窗口中，将插入点置于要添加文本的位置，执行“编辑”菜单中的“粘贴”命令，完成文本复制。3.2 在网页中添加文本和图片在网页中添加文本和图片n3.2.1 在网页中添加文本 1.添加文本添加文本3）导入Word文档（演示3-7，第3章_网页编

7、辑.doc）选择“文件”菜单中的子菜单“导入”下的“Word文档”命令，从打开的“打开”对话框中选择需要导入到Dreamweaver的Word文档，选择完毕后单击“确定”按钮，即可完成Word文档的导入。Dreamweaver“导入”功能除了能够导入Word文档外，还可以实现导入EXCEL文档、表格式数据及XML到模板等功能。3.2 在网页中添加文本和图片在网页中添加文本和图片n3.2.1 在网页中添加文本 2、格式化文本、格式化文本在Dreamweaver中，可以使用文本的属性面板方便地进行文本的格式设置。文本的属性面板显示文档中被选中文本的格式属性。可以在文本的属性面板中更改格式。注意：如

8、果没有显示属性面板，可以通过执行“窗口”菜单下的“属性”命令来显示它。文本的属性面板各主要选项的功能(演示3-8，随意插入一段文字，操作添加字体)：3.2 在网页中添加文本和图片在网页中添加文本和图片n3.2.2 在网页中添加图片 GIF格式（格式（Graphics Interchange Format 图像交换格式）图像交换格式）采用无损压缩算法进行图像的压缩处理，是目前在网页设计中使用采用无损压缩算法进行图像的压缩处理，是目前在网页设计中使用最普遍、最广泛的一种图像格式。最普遍、最广泛的一种图像格式。GIF格式可以高度压缩图像使其变格式可以高度压缩图像使其变得相当小，它在网页中大量用于动画

9、、站点图标得相当小，它在网页中大量用于动画、站点图标LOGO、广告条及网、广告条及网页背景图像。它最多支持页背景图像。它最多支持256种颜色，不适合用作照片级的网页图种颜色，不适合用作照片级的网页图像。像。JPEG格式（格式（Joint Photo Expert Graphics，联合图形专家，联合图形专家组图片格式）是另一种在组图片格式）是另一种在Web上应用广泛的图像格式。由于它支持上应用广泛的图像格式。由于它支持的颜色数几乎没有限制，因此通常用来显示照片等颜色丰富精美图的颜色数几乎没有限制，因此通常用来显示照片等颜色丰富精美图像。与像。与GIF格式采用无损压缩不同，格式采用无损压缩不同，

10、JPEG格式使用有损压缩来减小格式使用有损压缩来减小图片文件的大小，因此用户将看到随着文件的减小，图片的质量也图片文件的大小，因此用户将看到随着文件的减小，图片的质量也降低了。降低了。PNG格式（格式（Portable Networks Graphics，可移植的网络，可移植的网络图形格式）是近年来新出现的一种图像格式，它适于任何类型、任图形格式）是近年来新出现的一种图像格式，它适于任何类型、任何颜色深度的图片。该格式既融合了何颜色深度的图片。该格式既融合了GIF格式透明显示的特点，又具格式透明显示的特点，又具有有JPEG处理精美图像的优势，因此处理精美图像的优势，因此PNG格式很可能会取代格

11、式很可能会取代GIF格式格式和和JPEG格式。格式。3.2 在网页中添加文本和图片在网页中添加文本和图片n3.2.2 在网页中添加图片 1.插入图像（演示插入图像（演示3-9，Toco Toucan.jpg）1）在）在“文档文档”窗口中将光标移到将要插入图像的位窗口中将光标移到将要插入图像的位置。置。2）单击）单击“插入插入”菜单中的菜单中的“图像图像”命令，或单击命令，或单击“常用常用”子面板上的子面板上的“图像图像”按钮，打开按钮，打开“选择图像源文件选择图像源文件”对话框，对话框，3）选择已存放在当前站点中的图像文件或在磁盘）选择已存放在当前站点中的图像文件或在磁盘中查找其他的图像文件，

12、然后单击中查找其他的图像文件，然后单击“确定确定”按钮。按钮。注意：如果要插入的图像文件不在当前站点的文件注意：如果要插入的图像文件不在当前站点的文件夹中，插入时会出现一个对话框，询问是否要将这个图夹中，插入时会出现一个对话框，询问是否要将这个图像文件复制到当前站点的文件夹中，通常选择像文件复制到当前站点的文件夹中，通常选择“是是”，这，这时打开时打开“复制文件为复制文件为”对话框，要求在站点中选择一个文对话框，要求在站点中选择一个文件夹加以保存，这样可以保证网页对这个图像文件的引件夹加以保存，这样可以保证网页对这个图像文件的引用。用。3.2 在网页中添加文本和图片在网页中添加文本和图片n3.

13、2.2 在网页中添加图片 2图像属性设置图像属性设置用鼠标单击图像，图像四周出现可编辑的缩放手柄，说明该图像被选定。在图像的属性面板中，各主要选项的功能如下（演示3-10）：3.2 在网页中添加文本和图片在网页中添加文本和图片n3.2.2 在网页中添加图片 3.改变图像的尺寸改变图像的尺寸改变图像的尺寸大小，可以通过在属性面板改变图像的尺寸大小，可以通过在属性面板中的中的“宽宽”和和“高高”文本框中直接输入数值来改变图文本框中直接输入数值来改变图像的尺寸大小。像的尺寸大小。此外，还可以通过拖放图像的缩放边框来改此外，还可以通过拖放图像的缩放边框来改变图像的尺寸。为了避免造成拖动的宽度和高度变图

14、像的尺寸。为了避免造成拖动的宽度和高度比例不等而失真，可按下比例不等而失真，可按下Shift键进行键进行“锁定比例锁定比例”的缩放。的缩放。（演示3-11）3.2 在网页中添加文本和图片在网页中添加文本和图片n3.2.2 在网页中添加图片 4.对齐图像对齐图像在在Dreamweaver中调整图像位置的中调整图像位置的方法很简单，简述如下：方法很简单，简述如下：1）选中页面中要编辑的图像；）选中页面中要编辑的图像；2）打开图像属性面板中的）打开图像属性面板中的“对齐对齐”下拉下拉列表列表（演示3-12）3.2 在网页中添加文本和图片在网页中添加文本和图片n3.2.3 在网页中添加特殊字符（演示3

15、-13）1.在在Dreamweaver MX中中，这这些些特特殊殊字字符符可可以以通通过过执执行行“插插入入”菜菜单单中中的的子子菜菜单单“HTML”下下的的“特殊字符特殊字符”命令，来插入所需的字符。命令，来插入所需的字符。2.另另外外，在在“插插入入”栏栏的的“文文本本”类类别别中中单单击击“字符字符”按钮上的箭头后，也可选择所需的字符。按钮上的箭头后，也可选择所需的字符。3.还还可可以以插插入入其其他他字字符符，两两种种方方式式选选择择“其其他他字字符符”命命令令，会会出出现现一一个个“插插入入其其他他字字符符”对对话话框。框。3.2 在网页中添加文本和图片在网页中添加文本和图片n3.2

16、.4 在网页中添加水平线（演示3-13）在页面中，可以使用一条或多条水平分隔线在页面中，可以使用一条或多条水平分隔线以可视方式分隔文本和对象。插入水平线的方法以可视方式分隔文本和对象。插入水平线的方法如下：如下：在文档窗口中，将插入点放在要插入水平线在文档窗口中，将插入点放在要插入水平线的位置，在的位置，在“插入插入”工具栏的工具栏的“HTML”选项卡中单选项卡中单击击“水平线水平线”按钮，或者执行按钮，或者执行“插入插入”菜单下的子菜菜单下的子菜单单“HTML”中的中的“水平线水平线”命令来添加水平线。另命令来添加水平线。另外，选中插入的这条水平线，可以在属性面板对外，选中插入的这条水平线，

17、可以在属性面板对它的属性进行设置。它的属性进行设置。3.2 在网页中添加文本和图片在网页中添加文本和图片n3.2.5 插入更新日期插入更新日期（演示3-14）将光标置于要插入的位置，选择将光标置于要插入的位置，选择“插入插入”菜单中的菜单中的“日日期期”命令，或单击命令，或单击“常用常用”工具栏上的日期按钮，将弹出工具栏上的日期按钮，将弹出“插入日期插入日期”对话框。对话框。从从“星期格式星期格式”下拉列表框中可选择星期的显示格式，下拉列表框中可选择星期的显示格式，当然也可以不显示星期；从当然也可以不显示星期；从“日期格式日期格式”列表框中可选择列表框中可选择要插入的日期的显示格式，例如选择要

18、插入的日期的显示格式，例如选择“年月日年月日”的显的显示格式；示格式；从从“时间格式时间格式”下拉列表框中可选择要插入的时下拉列表框中可选择要插入的时间格式，时间格式有两种：即间格式，时间格式有两种：即12小时计时法和小时计时法和24小时计小时计时法，当然也可设置不要时间。时法，当然也可设置不要时间。若选择若选择“储存时自动更新储存时自动更新”复选框，这样在每次保存复选框，这样在每次保存文档时都可更新插入的日期和时间。设置完毕后单击文档时都可更新插入的日期和时间。设置完毕后单击“确确定定”按钮即可完成日期的插入。按钮即可完成日期的插入。3.3 创建列表项创建列表项3.3.1 创建编号列表项（演

19、示创建编号列表项（演示3-15，和项目列表一，和项目列表一起）起）编号列表项又称有序列表，是有一定排列顺序的列编号列表项又称有序列表，是有一定排列顺序的列表，一般前面有数字前导字符，可以是阿拉伯数字、英表，一般前面有数字前导字符，可以是阿拉伯数字、英文字母、罗马数字等符号。创建编号列表的方法如下：文字母、罗马数字等符号。创建编号列表的方法如下：在文档窗口中，将插入点放在要添加编号列表的位在文档窗口中，将插入点放在要添加编号列表的位置，单击置，单击“文本属性面板文本属性面板”中的中的“编号列表编号列表”按钮；或者执按钮；或者执行行“文本文本”菜单下的子菜单菜单下的子菜单“列表列表”中的中的“编号

20、列表编号列表”菜单命菜单命令添加，指定列表项的数字前导字符出现在文档窗口中。令添加，指定列表项的数字前导字符出现在文档窗口中。若要添加编号的文本已经存在，也可将这些文本选若要添加编号的文本已经存在，也可将这些文本选定，使用上述方法，一次性给文本添加编号。定，使用上述方法，一次性给文本添加编号。3.3 创建列表项创建列表项3.3.2 设置项目列表设置项目列表（演示（演示3-15）项目列表项又称无序列表，是一系列无顺序级别关项目列表项又称无序列表，是一系列无顺序级别关系的项目符号组成的列表，一般前面用项目符号作为前系的项目符号组成的列表，一般前面用项目符号作为前导字符。创建项目列表的方法如下。导字

21、符。创建项目列表的方法如下。在文档窗口中，将插入点放在要添加项目列表的位在文档窗口中，将插入点放在要添加项目列表的位置，单击置，单击“文本属性面板文本属性面板”中的中的“项目列表项目列表”按钮；或者执按钮；或者执行行“文本文本”菜单下的子菜单菜单下的子菜单“列表列表”中的中的“项目列表项目列表”菜单命菜单命令添加，指定列表项的项目前导字符出现在文档窗口中。令添加，指定列表项的项目前导字符出现在文档窗口中。若要添加项目列表的文本已经存在，也可将这些文若要添加项目列表的文本已经存在，也可将这些文本选定，使用上述方法，一次性给文本添加项目符号。本选定，使用上述方法，一次性给文本添加项目符号。3.3

22、创建列表项创建列表项3.3.3 创建多级列表项（演示创建多级列表项（演示3-16）有时在使用列表时可能还会用到嵌套有时在使用列表时可能还会用到嵌套列表，即在当前列表下还包含有一层或多列表，即在当前列表下还包含有一层或多层列表。创建嵌套列表的方法如下。层列表。创建嵌套列表的方法如下。在文档窗口中创建了任意列表，然后在文档窗口中创建了任意列表，然后选择要嵌套的列表项，单击选择要嵌套的列表项，单击“文本属性面板文本属性面板”中的中的“文本缩进文本缩进”按钮，就会将要嵌套的列按钮，就会将要嵌套的列表项文本缩进并创建一个单独的列表。表项文本缩进并创建一个单独的列表。3.3 创建列表项创建列表项3.3.4

23、修改列表属性（演示修改列表属性（演示3-16）首先将文字按照无序或有序列表方式首先将文字按照无序或有序列表方式进行列表设置，然后将光标移到列表文字进行列表设置，然后将光标移到列表文字中。单击中。单击“文本属性面板文本属性面板”中的中的“列表项目列表项目”按钮，或者执行按钮，或者执行“文本文本”菜单下的子菜单菜单下的子菜单“列列表表”中的中的“属性属性”菜单命令，弹出菜单命令，弹出“列表属性列表属性”对话框。对话框。介绍对话框的主要内容和功能。介绍对话框的主要内容和功能。上机操作指导n新建一个个人网站主页index.htm，对自己的简要情况，兴趣爱好，所学专业等进行简要的介绍。n要对网页中文本的

24、格式进行设置，包括字形，字号，加粗，下划线等效果。n插入自己的一张照片，并使用照片属性对其设置，做到美观大方。n在不同的栏目之间用水平线进行分割。n在网页底部插入当前日期和时间。n用列表项列出自己的兴趣爱好。3.4 用表格布局网页用表格布局网页3.4.1 表格基本操作表格基本操作 n1插入表格（演示插入表格（演示3-17）1）在插入）在插入“常用常用”工具栏上，单击插入表格工具栏上，单击插入表格按钮。按钮。2）通过主窗口）通过主窗口“插入插入”菜单中的菜单中的“表格表格”命令。命令。3）使用快捷组合键）使用快捷组合键“Ctrl+Alt+T”。4）在插入）在插入“常用常用”工具栏上，拖动表格按钮

25、工具栏上，拖动表格按钮到主窗口的工作区中。到主窗口的工作区中。“表格表格”对话框各主要选项的功能介绍：对话框各主要选项的功能介绍：3.4 用表格布局网页用表格布局网页3.4.1 表格基本操作表格基本操作 n1插入表格（演示插入表格（演示3-17）注注意意：“表表格格宽宽度度”文文本本框框用用来来设设置置生生成成表表格格的的宽宽度度，可可以以填填入入数数值值，紧紧随随其其后后的的下下拉拉列列表表框框用用来来设设置置宽宽度度的的单单位位，有有两两个个选选项项百百分分比比和和像像素素。当当宽宽度度的的单单位位选选择择百百分分比比时时，表表格格的的宽宽度度会会随随浏浏览览器器窗窗口口的的大大小小而而改

26、改变变。例例如如设设置置宽宽度度为为窗窗口口宽宽度度的的60，那那么么当当浏浏览览器器窗窗口口大大小小变变化化的的时时候候表表格格的的宽宽度度也也随随之之变变化化；如如果果设设置置宽宽度度为为400像像素素，那那么么无无论论浏浏览览器器窗窗口口大大小小为为多多少少，表表格的宽度都不会变化。格的宽度都不会变化。3.4 用表格布局网页用表格布局网页3.4.1 表格基本操作表格基本操作 2编辑表格编辑表格1）选择表格）选择表格（1）选择整个表格（演示）选择整个表格（演示3-18）方法一：将光标置于表格中的某个单元格中，选择方法一：将光标置于表格中的某个单元格中，选择“修改修改”菜单菜单下的子菜单下的

27、子菜单“表格表格”中的中的“选择表格选择表格”命令。命令。方法二：将光标置于表格中的某个单元格中，再按两次组合键方法二：将光标置于表格中的某个单元格中，再按两次组合键“Ctrl+A”。方法三：将光标置于表格中的某个单元格中，单击鼠标右键，方法三：将光标置于表格中的某个单元格中，单击鼠标右键，在弹出的快捷菜单中选择在弹出的快捷菜单中选择“表格表格”中的中的“选择表格选择表格”命令。命令。方法四：将光标置于表格的尾部（在表格的同一行，但不在表方法四：将光标置于表格的尾部（在表格的同一行，但不在表格之内），向左拖动鼠标。格之内），向左拖动鼠标。方法五：单击表格的边线。方法五：单击表格的边线。3.4

28、用表格布局网页用表格布局网页3.4.1 表格基本操作表格基本操作 2编辑表格编辑表格1）选择表格）选择表格（2）选择单个单元格）选择单个单元格（演示（演示3-19）方法一：将光标置于所要选择的单元格中，按一次方法一：将光标置于所要选择的单元格中，按一次组合键组合键“Ctrl+A”。方法二：将光标置于所要选择的单元格中，向右拖方法二：将光标置于所要选择的单元格中，向右拖动鼠标。动鼠标。方法三：将光标置于所要选择的单元格中，选择方法三：将光标置于所要选择的单元格中，选择“编编辑辑”菜单中的菜单中的“全选全选”命令。命令。方法四：按住方法四：按住Ctrl键，单击所要选择的单元格，再键，单击所要选择的

29、单元格，再单击一次则取消对单元格的选择。单击一次则取消对单元格的选择。3.4 用表格布局网页用表格布局网页3.4.1 表格基本操作表格基本操作 2编辑表格编辑表格1）选择表格）选择表格（3）选择多个单元格）选择多个单元格（演示（演示3-20）方法一：按住方法一：按住Ctrl键，单击所要选择的所有单元格。键，单击所要选择的所有单元格。（可不连续）（可不连续）方法二方法二：将光标置于单元格中，拖动鼠标，选择多：将光标置于单元格中，拖动鼠标，选择多个单元格。个单元格。方法三：如果要选择整行，将光标置于该行的左边方法三：如果要选择整行，将光标置于该行的左边缘，当光标变成图标时单击鼠标左键。缘，当光标变

30、成图标时单击鼠标左键。方法四：如果要选择整列，将光标置于该列的上边方法四：如果要选择整列，将光标置于该列的上边缘，当光标变成黑色图标时单击鼠标左键。缘，当光标变成黑色图标时单击鼠标左键。3.4 用表格布局网页用表格布局网页3.4.1 表格基本操作表格基本操作 2编辑表格编辑表格1）选择表格）选择表格（4）选择全部单元格）选择全部单元格（演示（演示3-21）方法一：将光标置于第方法一：将光标置于第1个单元格中，并拖动鼠标个单元格中，并拖动鼠标至最后一个单元格。至最后一个单元格。方法二：将光标置于第方法二：将光标置于第1个单元格中，按住个单元格中，按住Shift键，键，再单击最后一个单元格。再单击

31、最后一个单元格。方法三：将光标置于第方法三：将光标置于第1行的左边缘，当光标变成行的左边缘，当光标变成黑色图标时，向下拖动鼠标至最后一行。黑色图标时，向下拖动鼠标至最后一行。方法四：将光标置于第方法四：将光标置于第1列的上边缘，当光标变成列的上边缘，当光标变成 黑色图标时，向右拖动鼠标至最后一列。黑色图标时，向右拖动鼠标至最后一列。3.4 用表格布局网页用表格布局网页3.4.1 表格基本操作表格基本操作 2编辑表格编辑表格2）添加）添加/删除行列（演示删除行列（演示3-22，一起演示），一起演示）（1）在现有的表格中插入单元行，可以选择以下）在现有的表格中插入单元行，可以选择以下的操作之一：的

32、操作之一：方法一：将光标移到要插入单元行的下一行，选择方法一：将光标移到要插入单元行的下一行，选择“修改修改”菜单下子菜单菜单下子菜单“表格表格”中的中的“插入行插入行”命令。命令。方法二：将光标移到要插入单元行的下一行，单击方法二：将光标移到要插入单元行的下一行，单击鼠标右键，在弹出的快捷菜单中选择鼠标右键，在弹出的快捷菜单中选择“表格表格”中的中的“插入行插入行”命令。命令。3.4 用表格布局网页用表格布局网页3.4.1 表格基本操作表格基本操作 2编辑表格编辑表格2）添加）添加/删除行列（演示删除行列（演示3-22）（2）在现有的表格中插入单元列，可以选择以下）在现有的表格中插入单元列，

33、可以选择以下的操作之一：的操作之一：方法一：将光标移到在插入单元列的右边一列，选方法一：将光标移到在插入单元列的右边一列，选择择“修改修改”菜单下子菜单菜单下子菜单“表格表格”中的中的“插入列插入列”命令。命令。方法二：将光标移到要插入单元列的右边一列，单方法二：将光标移到要插入单元列的右边一列，单击鼠标右键，在弹出的快捷菜单中选择击鼠标右键，在弹出的快捷菜单中选择“表格表格”中的中的“插入插入列列”命令命令3.4 用表格布局网页用表格布局网页3.4.1 表格基本操作表格基本操作 2编辑表格编辑表格2）添加）添加/删除行列（演示删除行列（演示3-22）（3）如果想在现有的表格中添加多行或多）如

34、果想在现有的表格中添加多行或多列，可执行以下操作：列，可执行以下操作：首先将光标移到要插入行或列附近的单元格首先将光标移到要插入行或列附近的单元格中，单击鼠标右键，在弹出的快捷菜单中选择中，单击鼠标右键，在弹出的快捷菜单中选择“表格表格”中的中的“插入行或列插入行或列”命令，或是选择命令，或是选择“修改修改”菜单下子菜单菜单下子菜单“表格表格”中的中的“插入行或列插入行或列”命令，在命令，在此对话框中进行相关的设置，然后单击此对话框中进行相关的设置，然后单击“确定确定”按按钮，设置的多列或多行将插入到页面中。钮，设置的多列或多行将插入到页面中。3.4 用表格布局网页用表格布局网页3.4.1 表

35、格基本操作表格基本操作 2编辑表格编辑表格2）添加）添加/删除行列（演示删除行列（演示3-22）（4）删除整行）删除整行/整列，可以选择以下的操作之一：整列，可以选择以下的操作之一：方法一：先选择欲删除的整行或整列，直接按方法一：先选择欲删除的整行或整列，直接按Del键，即可删除。键，即可删除。方法二：先将光标移到要删除的行或列中，选择方法二：先将光标移到要删除的行或列中，选择“修修改改”菜单下子菜单菜单下子菜单“表格表格”中的中的“删除行删除行”或或“删除列删除列”命令。命令。方法三：将光标移到要删除的行或列中，单击鼠标方法三：将光标移到要删除的行或列中，单击鼠标右键，在弹出的快捷菜单中选择

36、右键，在弹出的快捷菜单中选择“表格表格”中的中的“删除行删除行”或或“删除列删除列”命令。命令。3.4 用表格布局网页用表格布局网页3.4.1 表格基本操作表格基本操作 2编辑表格编辑表格3）修改表格大小（演示）修改表格大小（演示3-23）（1）设置表格的宽度及高度）设置表格的宽度及高度方法一：通过鼠标拖曳法可以粗略地调整表格的大方法一：通过鼠标拖曳法可以粗略地调整表格的大小。小。方法二：通过方法二：通过“表格属性表格属性”对话框可以精确地调整表对话框可以精确地调整表格的大小。格的大小。在创建表格时，可以通过表格对话框来设置表格的在创建表格时，可以通过表格对话框来设置表格的宽度，但无法设置表格

37、的高度，如果要设置表格的高度，宽度，但无法设置表格的高度，如果要设置表格的高度，可以通过表格属性面板来确定。可以通过表格属性面板来确定。3.4 用表格布局网页用表格布局网页3.4.1 表格基本操作表格基本操作 2编辑表格编辑表格3）修改表格大小（演示）修改表格大小（演示3-23）（2）设置单元格的宽度及高度）设置单元格的宽度及高度在默认情况下，单元格的宽度是随表格的宽度而定在默认情况下，单元格的宽度是随表格的宽度而定的，表格中每一列的宽度基本上都相等，也就是说每一的，表格中每一列的宽度基本上都相等，也就是说每一个单元格的宽度都是相同的。如果不指定表格的高度，个单元格的宽度都是相同的。如果不指定

38、表格的高度，则表格中同一行的高度也是相等的，即单元格的高度相则表格中同一行的高度也是相等的，即单元格的高度相同。在属性面板上可以改变单元格默认的宽度和高度。同。在属性面板上可以改变单元格默认的宽度和高度。将光标置于需要设置宽度或高度的单元格中，此时属性将光标置于需要设置宽度或高度的单元格中，此时属性面板显示单元格属性。在属性面板上的面板显示单元格属性。在属性面板上的“宽宽”或或“高高”文本文本框中输入适当的数值即可。但单元格宽度与高度的单位框中输入适当的数值即可。但单元格宽度与高度的单位只可以使用像素，不能使用百分比。只可以使用像素，不能使用百分比。3.4 用表格布局网页用表格布局网页3.4.

39、1 表格基本操作表格基本操作 2编辑表格编辑表格4）合并）合并/拆分单元格（演示拆分单元格（演示3-24）（1）合并单元格）合并单元格首先在表格中选择需合并的单元格，属性面板变成首先在表格中选择需合并的单元格，属性面板变成单元格属性面板，然后选择下列操作之一：单元格属性面板，然后选择下列操作之一：方法一：选择方法一：选择“修改修改”菜单下子菜单菜单下子菜单“表格表格”中的中的“合并合并单元格单元格”命令。命令。方法二：单击鼠标右键，在弹出的快捷菜单中选择方法二：单击鼠标右键，在弹出的快捷菜单中选择“表格表格”中中“合并单元格合并单元格”命令。命令。方法三：单击单元格属性面板上的合并单元格图标。

40、方法三：单击单元格属性面板上的合并单元格图标。3.4 用表格布局网页用表格布局网页3.4.1 表格基本操作表格基本操作 2编辑表格编辑表格4）合并）合并/拆分单元格（演示拆分单元格（演示3-24）（2）拆分单元格）拆分单元格方法一：选择方法一：选择“修改修改”菜单下子菜单菜单下子菜单“表格表格”中中“拆分单拆分单元格元格”命令。命令。方法二：单击鼠标右键，在弹出的下拉菜单中选择方法二：单击鼠标右键，在弹出的下拉菜单中选择“表格表格”中中“拆分单元格拆分单元格”命令。命令。方法三：单击属性面板上的拆分单元格图标。方法三：单击属性面板上的拆分单元格图标。在在“拆分单元格拆分单元格”对话框中，可以选

41、择拆分成行和列对话框中，可以选择拆分成行和列以及行以及行/列的数量。列的数量。3.4 用表格布局网页用表格布局网页3.4.1 表格基本操作表格基本操作 2编辑表格编辑表格5）设置表格属性（演示3-25）选中一个表格后，可以通过表格属性面板更改表格属性 6）单元格属性（演示3-26）把光标移动到某个单元格内，可以利用单元格属性面板对这个单元格的属性进行设置 3.4 用表格布局网页用表格布局网页3.4.1 表格基本操作表格基本操作 2编辑表格编辑表格7）格式化表格（演示3-27）Dreamweaver还为我们提供了十几种表格模板，使设置表格格式变得非常方便，并且这些模板也可以通过设定参数来进行调整

42、。选中表格，选择“命令”菜单中的“格式化表格”。3.4 用表格布局网页用表格布局网页3.4.2 表格数据操作表格数据操作1导入表格数据导入表格数据（演示3-28）Dreamweaver 还支持将外部的数据导入表格，这还支持将外部的数据导入表格，这些数据文件一般是些数据文件一般是纯文本纯文本或者或者Excel等工具创建的文件，等工具创建的文件，一般是以制表符、逗号、分号等作为分隔符的格式。一般是以制表符、逗号、分号等作为分隔符的格式。选择选择“文件文件”菜单下子菜单菜单下子菜单“导入导入”中的中的“表格式数据表格式数据”命令，再单击命令，再单击“浏览浏览”按钮选择数据源，按钮选择数据源，“分隔符

43、分隔符”选项需选项需要和导入的数据文件保持一致，要和导入的数据文件保持一致，“表格宽度表格宽度”有两个选项，有两个选项，“匹配内容匹配内容”比较紧凑，但表格的宽度不一致，比较紧凑，但表格的宽度不一致，“指定宽度指定宽度”则可以以像素或百分比为单位设定宽度。则可以以像素或百分比为单位设定宽度。也可以通过选择也可以通过选择“文件文件”菜单下子菜单菜单下子菜单“导入导入”中的中的“EXCEL文档文档”命令，将一个现成的命令，将一个现成的EXCEL文档导入到文档导入到Dreamweaver“文档文档“窗口中。窗口中。3.4 用表格布局网页用表格布局网页3.4.2 表格数据操作表格数据操作2导出表格数据

44、导出表格数据（演示3-29）可以将表格数据从可以将表格数据从 Dreamweaver 导出到导出到文本文件中，相邻单元格的内容由分隔符隔开，文本文件中，相邻单元格的内容由分隔符隔开，可以将逗号、冒号、分号或空格用作分隔符。可以将逗号、冒号、分号或空格用作分隔符。选择选择“文件文件”菜单下子菜单菜单下子菜单“导出导出”中的中的“表格表格”命令，命令，“定界符定界符”选择用何种分隔符分隔表格数据，选择用何种分隔符分隔表格数据，“换行符换行符”选择断行类型，若使用的是选择断行类型，若使用的是Windows操作系统，则在换行符框内选择操作系统，则在换行符框内选择“Windows”，单击单击“导出导出”

45、按钮，打开保存文件窗口保存即可。按钮，打开保存文件窗口保存即可。3.4 用表格布局网页用表格布局网页3.4.2 表格数据操作表格数据操作3表格排序表格排序（演示3-30）在实际使用表格时，经常需要将数据进行重在实际使用表格时，经常需要将数据进行重新排列顺序，例如按照年龄大小进行排列、按照新排列顺序，例如按照年龄大小进行排列、按照价格高低进行排列等等。在价格高低进行排列等等。在Dreamweaver中，中，可以根据表格单个列的内容进行排序。还可以根可以根据表格单个列的内容进行排序。还可以根据两个列的内容执行更加复杂的表格排序。对表据两个列的内容执行更加复杂的表格排序。对表格的数据进行排序的方法如

46、下：格的数据进行排序的方法如下：光标定位表格内，选择光标定位表格内，选择“命令命令”菜单下的菜单下的“排排序表格序表格”命令，设置选项后，单击命令，设置选项后，单击“确定确定”按钮开按钮开始排序。始排序。3.4 用表格布局网页用表格布局网页3.4.3 初识表格布局初识表格布局布局设计是网页制作中一项很重要的工作，它涉及布局设计是网页制作中一项很重要的工作，它涉及到网页在浏览器中所显示的外观。到网页在浏览器中所显示的外观。在在Dreamweaver 中我们可以用表格、框架、层来中我们可以用表格、框架、层来布局网页，布局网页，但表格是使用最广泛的一种。但表格是使用最广泛的一种。Dreamwear系

47、系统除了提供了标准视图创建表格外，还提供了布局视图统除了提供了标准视图创建表格外，还提供了布局视图的表格，布局视图表格是的表格，布局视图表格是Dreamweaver提供的一个工提供的一个工具，用户可以通过绘制布局表格和布局单元格，从而可具，用户可以通过绘制布局表格和布局单元格，从而可以像在一张白纸上用笔来规划网页的布局，并可在布局以像在一张白纸上用笔来规划网页的布局，并可在布局单元格中插入文本和图像，通过移动布局表格和布局单单元格中插入文本和图像，通过移动布局表格和布局单元格的位置来精确地定位网页上的文本和图像元格的位置来精确地定位网页上的文本和图像,目的是使目的是使人们能够更方便地进行网页布

48、局设计。人们能够更方便地进行网页布局设计。3.4 用表格布局网页用表格布局网页3.4.4 表格整体布局的实现表格整体布局的实现（演示3-31）使使用用布布局局视视图图首首先先要要从从标标准准视视图图切切换换到到布布局局视视图图，方方法法是是：单单击击“查查看看”菜菜单单下下子子菜菜单单“表表格格视视图图”中中的的布布局局视视图图”命命令令，或或者者单单击击插插入入工工具具栏栏上上的的“布布局局”标标签签，然然后后选选择择“布布局局模模式式”按按钮钮，即可选择布局视图。即可选择布局视图。在在布布局局模模式式下下，表表格格中中的的单单元元格格可可以以通通过过鼠鼠标标拖拖动动任任意意改改变变大大小小

49、和和位位置置（不不超超过过表表格格范范围围），这给页面布局带来了更大的灵活性。，这给页面布局带来了更大的灵活性。3.4 用表格布局网页用表格布局网页3.4.4 表格整体布局的实现表格整体布局的实现 1绘制布局单元格绘制布局单元格（演示3-32）绘制一个布局单元格的步骤如下：在绘制一个布局单元格的步骤如下：在“布局布局”视图模视图模式下，单击式下，单击“绘制布局单元格绘制布局单元格”图标按钮，光标就会变成图标按钮，光标就会变成加号。把光标放在布局单元格开始的位置，单击并拖动，加号。把光标放在布局单元格开始的位置，单击并拖动，就绘制了一个布局单元格。就绘制了一个布局单元格。按住按住Ctrl键键可以

50、创建多个单元可以创建多个单元格。格。布局单元格边框默认为蓝色，它可以占据几行或几布局单元格边框默认为蓝色，它可以占据几行或几列，但他们不能重叠，创建了布局单元格，通过修改布列，但他们不能重叠，创建了布局单元格，通过修改布局局单元格的属性面板的参数，单元格的属性面板的参数，可以调整布局单元格。可以调整布局单元格。提示：布局单元格不能脱离布局表格而存在，每一个布局单元格都有一个能容纳它的布局表格。在页面中绘制布局单元格时，Dreamweaver系统会自动插入布局表格环绕它，该表格将占据整个页面，作为布局单元格的容器。3.4 用表格布局网页用表格布局网页3.4.4 表格整体布局的实现表格整体布局的实