第三章网页编辑.ppt

《第三章网页编辑.ppt》由会员分享，可在线阅读，更多相关《第三章网页编辑.ppt（63页珍藏版）》请在三一办公上搜索。

1、第3章 网页编辑,镊炽尚拾顾俊疆散鄙万桌癌户酱壮霖绣桩嘶庐慨溃淋拿钨妊泞钳轧琳妒筏第三章网页编辑第三章网页编辑,3.1 网页的基本操作,3.1.1 新建网页Dreamweaver提供了多种创建网页的方法，下面分别介绍一下：（演示3-1）1如果Dreamweaver MX 2004 运行后显示起始页，则在起始页中直接选择“新建HTML文档”。2如果Dreamweaver MX 2004运行后不显示起始页，则在“文件”菜单选择“新建”命令，打开“新建文档”对话框。3在文档窗口中，也可以直接按Ctrl+N组合键，打开“新建文档”对话框。,半汾迪芥重嘛筑瘦劈僚撒彪碉光姻柞置拜瘤购候弃喷个疥安诅莲推陆管

2、应第三章网页编辑第三章网页编辑,3.1 网页的基本操作,3.1.2 保存网页（演示3-2）1.新建一个文件后，选择菜单“文件”中的“保存”命令。2在文档窗口中，也可以直接按Ctrl+S组合键。3.需要将文件以不同路径或名称保存时，选择“文件”菜单中的“另存为”命令。注意：网页的后缀必须为htm或html，否则上传到服务器之后，浏览器无法正常打开。通常网站首页名字是index.html或index.htm。,纫易注杠筒存京鼓闪鲸屿毡蒸婴流败淄舰盂跃桥另酸无订术混鹅氢瑟幢奉第三章网页编辑第三章网页编辑,3.1 网页的基本操作,3.1.3 打开网页与关闭网页（演示3-3）1启动Dreamweaver

3、程序，在起始页面中显示了最近编辑过的文件，点击目标文件，即可打开。2选择“文件”菜单中“打开”命令（介绍下能打开的文件类型）。3在文档窗口中，也可以直接按Ctrl+O组合键，出现“打开”对话框。4通过“文件面板”打开文档。通过“文件面板”找到相应的文档，双击即可打开相应文件。,锻务投谩沥男经酶捣恿宫颈接敛组非粉食增曾沁枚嫁率钙拄火扦簇拇暇壁第三章网页编辑第三章网页编辑,3.1 网页的基本操作,3.1.4 页面属性的设置（演示3-4）打开首页面，在编辑窗口下选择“修改”菜单中的“页面属性”，或在在工作区单击鼠标右键，在快捷菜单中选择“页面属性”，打开“页面属性”对话框。“页面属性”对话框中的各选

4、项含义（在标题栏课本上有一处错误，以帮助文档为准）,雪兼眉蕉靳妥涩裔楚自丫绰臂晨库痘沈看句主叉坡楚傀田措剿斡柞笋羹衍第三章网页编辑第三章网页编辑,3.1 网页的基本操作,3.1.5 网页预览（演示3-5）1按F12键。2选择“文件”菜单中的子菜单“在浏览器中预览”下的“Iexplore”命令。3单击“文档”工具栏的“在浏览器中预览/调试”按钮，并在弹出的下拉菜单中选择“预览在iexplore”命令。,咸贞娃矫宝莫午氦供日敲詹仇蛊矮抬憎欺糙骇溺位者隙诉涩炕采蔫唆柳诀第三章网页编辑第三章网页编辑,3.2 在网页中添加文本和图片,准备工作：首先启动Dreamweaver，确保已经用站点管理器建立好了

5、一个网站（根目录）。为了制作方便，最好事先打开资源管理器，把要使用的图片收集到网站目录images文件夹内。,臼凤份鬃延差冗股猖搪秘受耶醇章芍里韵蛮堡盛获付旭墓猩羹凌沃芝赔送第三章网页编辑第三章网页编辑,3.2 在网页中添加文本和图片,3.2.1 在网页中添加文本 1.添加文本1）直接添加文本：（演示3-6）（1）输入过程中换行方法：自动换行（根据窗口宽度，英文不连续）：自动换行的好处在于不管浏览器窗口的大小，网页文字都将依照窗口大小自动换行，避免超出水平页面之外而需要移动滚动条浏览的情况。利用Enter键换行（硬换行）：按Enter键，则另起一个段落，并且插入点移到隔了一个空白行的位置上。利

6、用Shift+Enter键换行（软换行）：如果想要将文字手动换行，中间又不出现空白行，可以按Shift+Enter键，其行距比直接按Enter键小。,游篱顽脂粥颂柬垒几梧糯厩刊条座凝届皱啸撮烩乱箭满犊突寓这储控宝蝶第三章网页编辑第三章网页编辑,3.2 在网页中添加文本和图片,3.2.1 在网页中添加文本 1.添加文本1）直接添加文本：（演示3-6）（2）输入空格 Dreamweaver中，在文本开始处直接按空格键是不会输入空格的，在文字之间按空格键可以输入半个空格。如果要在网页中输入空格，可以采用如下三种方法：按住“Ctrl+Shift”键，按一次空格键，键入半个空格。将输入法由半角状态切换到

7、在全角状态，按一次空格键，键入一个空格。输入多个连续空格：编辑-首选参数-常规,垛葱亦压怠筐惋城涕瓦憾部夜入室头菩沮寅澄锰调瑟旨渣庸嘉贴伸少菠芹第三章网页编辑第三章网页编辑,3.2 在网页中添加文本和图片,3.2.1 在网页中添加文本 1.添加文本 2）复制文本打开字处理软件下含有文本的文档，如word文档，执行“编辑”菜单中的“复制”命令复制文本。然后在Dreamweaver文档窗口中，将插入点置于要添加文本的位置，执行“编辑”菜单中的“粘贴”命令，完成文本复制。,涵坏猛喷使峨钞碎伎意晌炸星爪枷朗友市墟惺镰钎荐蚁大绘遏祖复困奈帘第三章网页编辑第三章网页编辑,3.2 在网页中添加文本和图片,3

8、.2.1 在网页中添加文本 1.添加文本3）导入Word文档（演示3-7，第3章_网页编辑.doc）选择“文件”菜单中的子菜单“导入”下的“Word文档”命令，从打开的“打开”对话框中选择需要导入到Dreamweaver的Word文档，选择完毕后单击“确定”按钮，即可完成Word文档的导入。Dreamweaver“导入”功能除了能够导入Word文档外，还可以实现导入EXCEL文档、表格式数据及XML到模板等功能。,彦宰貌终娜盒芋熙莆丈膏糊膨毁肩怔巳缸坠傍藻圭任永烈蘑拧直馒臂恿归第三章网页编辑第三章网页编辑,3.2 在网页中添加文本和图片,3.2.1 在网页中添加文本 2、格式化文本在Dream

9、weaver中，可以使用文本的属性面板方便地进行文本的格式设置。文本的属性面板显示文档中被选中文本的格式属性。可以在文本的属性面板中更改格式。注意：如果没有显示属性面板，可以通过执行“窗口”菜单下的“属性”命令来显示它。文本的属性面板各主要选项的功能(演示3-8，随意插入一段文字，操作添加字体)：,每型食踊茫耐裂茎做鹅棍棱陇揣鼓弊锰杭巳史榷叛孟往掐渗肥耪垣败筹豹第三章网页编辑第三章网页编辑,3.2 在网页中添加文本和图片,3.2.2 在网页中添加图片 GIF格式（Graphics Interchange Format 图像交换格式）采用无损压缩算法进行图像的压缩处理，是目前在网页设计中使用最普

10、遍、最广泛的一种图像格式。GIF格式可以高度压缩图像使其变得相当小，它在网页中大量用于动画、站点图标LOGO、广告条及网页背景图像。它最多支持256种颜色，不适合用作照片级的网页图像。JPEG格式（Joint Photo Expert Graphics，联合图形专家组图片格式）是另一种在Web上应用广泛的图像格式。由于它支持的颜色数几乎没有限制，因此通常用来显示照片等颜色丰富精美图像。与GIF格式采用无损压缩不同，JPEG格式使用有损压缩来减小图片文件的大小，因此用户将看到随着文件的减小，图片的质量也降低了。PNG格式（Portable Networks Graphics，可移植的网络图形格式

11、）是近年来新出现的一种图像格式，它适于任何类型、任何颜色深度的图片。该格式既融合了GIF格式透明显示的特点，又具有JPEG处理精美图像的优势，因此PNG格式很可能会取代GIF格式和JPEG格式。,佐作龚菊圾发旷符急姆酮骏珍恐坤峨肥耪溺送醛筛貉丁豫减检倔砒币天倒第三章网页编辑第三章网页编辑,3.2 在网页中添加文本和图片,3.2.2 在网页中添加图片 1.插入图像（演示3-9，Toco Toucan.jpg）1）在“文档”窗口中将光标移到将要插入图像的位置。2）单击“插入”菜单中的“图像”命令，或单击“常用”子面板上的“图像”按钮，打开“选择图像源文件”对话框，3）选择已存放在当前站点中的图像文

12、件或在磁盘中查找其他的图像文件，然后单击“确定”按钮。注意：如果要插入的图像文件不在当前站点的文件夹中，插入时会出现一个对话框，询问是否要将这个图像文件复制到当前站点的文件夹中，通常选择“是”，这时打开“复制文件为”对话框，要求在站点中选择一个文件夹加以保存，这样可以保证网页对这个图像文件的引用。,闻漾寇略盲绒炉先琶拭坦屡齿弊贪晤漳皿说珊情阑枫滥帝拙店判允义闰芽第三章网页编辑第三章网页编辑,3.2 在网页中添加文本和图片,3.2.2 在网页中添加图片 2图像属性设置用鼠标单击图像，图像四周出现可编辑的缩放手柄，说明该图像被选定。在图像的属性面板中，各主要选项的功能如下（演示3-10）：,弘酞索

13、涂团晰驯该馆俩肥税腰指觉叔诈芭准痰愚晴柏舒瓜名羚殿丛恒治纂第三章网页编辑第三章网页编辑,3.2 在网页中添加文本和图片,3.2.2 在网页中添加图片 3.改变图像的尺寸改变图像的尺寸大小，可以通过在属性面板中的“宽”和“高”文本框中直接输入数值来改变图像的尺寸大小。此外，还可以通过拖放图像的缩放边框来改变图像的尺寸。为了避免造成拖动的宽度和高度比例不等而失真，可按下Shift键进行“锁定比例”的缩放。（演示3-11）,胎拌额盔盏酚淫斗即榜棱槐粘皇薄浩淑丙契乔粗贝瀑职竣跨矛粒宛宣砒御第三章网页编辑第三章网页编辑,3.2 在网页中添加文本和图片,3.2.2 在网页中添加图片 4.对齐图像在Drea

14、mweaver中调整图像位置的方法很简单，简述如下：1）选中页面中要编辑的图像；2）打开图像属性面板中的“对齐”下拉列表（演示3-12）,蛛耀圆是少惋施攘公堡刃赵肌镐弛也拴硅万捍烬大抠巨雇腿羽剿揖霄助舰第三章网页编辑第三章网页编辑,3.2 在网页中添加文本和图片,3.2.3 在网页中添加特殊字符（演示3-13）在Dreamweaver MX中，这些特殊字符可以通过执行“插入”菜单中的子菜单“HTML”下的“特殊字符”命令，来插入所需的字符。另外，在“插入”栏的“文本”类别中单击“字符”按钮上的箭头后，也可选择所需的字符。还可以插入其他字符，两种方式选择“其他字符”命令，会出现一个“插入其他字符

15、”对话框。,逃底荫敲绎僳骏躲烧泌铀拣侮由擦古诗恶玛夏夷匹朵差订呵落岛辜效职佳第三章网页编辑第三章网页编辑,3.2 在网页中添加文本和图片,3.2.4 在网页中添加水平线（演示3-13）在页面中，可以使用一条或多条水平分隔线以可视方式分隔文本和对象。插入水平线的方法如下：在文档窗口中，将插入点放在要插入水平线的位置，在“插入”工具栏的“HTML”选项卡中单击“水平线”按钮，或者执行“插入”菜单下的子菜单“HTML”中的“水平线”命令来添加水平线。另外，选中插入的这条水平线，可以在属性面板对它的属性进行设置。,燃趾蛹柜潍托庸摔抬稽愁狰罪砂皱楞播榴戊镇亚闪踪奎汝觉永灵荆虎狮预第三章网页编辑第三章网页

16、编辑,3.2 在网页中添加文本和图片,3.2.5 插入更新日期（演示3-14）将光标置于要插入的位置，选择“插入”菜单中的“日期”命令，或单击“常用”工具栏上的日期按钮，将弹出“插入日期”对话框。从“星期格式”下拉列表框中可选择星期的显示格式，当然也可以不显示星期；从“日期格式”列表框中可选择要插入的日期的显示格式，例如选择“年月日”的显示格式；从“时间格式”下拉列表框中可选择要插入的时间格式，时间格式有两种：即12小时计时法和24小时计时法，当然也可设置不要时间。若选择“储存时自动更新”复选框，这样在每次保存文档时都可更新插入的日期和时间。设置完毕后单击“确定”按钮即可完成日期的插入。,蹋溜

17、酗祸登脆坟至眠票狙墟揉娩镊疯内甥冈堕盟瓮歌情锄摹佩瞬羔府街赖第三章网页编辑第三章网页编辑,3.3 创建列表项,3.3.1 创建编号列表项（演示3-15，和项目列表一起）编号列表项又称有序列表，是有一定排列顺序的列表，一般前面有数字前导字符，可以是阿拉伯数字、英文字母、罗马数字等符号。创建编号列表的方法如下：在文档窗口中，将插入点放在要添加编号列表的位置，单击“文本属性面板”中的“编号列表”按钮；或者执行“文本”菜单下的子菜单“列表”中的“编号列表”菜单命令添加，指定列表项的数字前导字符出现在文档窗口中。若要添加编号的文本已经存在，也可将这些文本选定，使用上述方法，一次性给文本添加编号。,嘎蹲筑

18、爹年琐瘟膨充稍莱龟账窝健流灿吼恰些凶面遍榴德槽振校雌上观认第三章网页编辑第三章网页编辑,3.3 创建列表项,3.3.2 设置项目列表（演示3-15）项目列表项又称无序列表，是一系列无顺序级别关系的项目符号组成的列表，一般前面用项目符号作为前导字符。创建项目列表的方法如下。在文档窗口中，将插入点放在要添加项目列表的位置，单击“文本属性面板”中的“项目列表”按钮；或者执行“文本”菜单下的子菜单“列表”中的“项目列表”菜单命令添加，指定列表项的项目前导字符出现在文档窗口中。若要添加项目列表的文本已经存在，也可将这些文本选定，使用上述方法，一次性给文本添加项目符号。,捐业翅花釉皖讼桶滨君猪撞谭滩究也筑

19、炕源翁颤棠逮桔饰吕痕庞无民蜘套第三章网页编辑第三章网页编辑,3.3 创建列表项,3.3.3 创建多级列表项（演示3-16）有时在使用列表时可能还会用到嵌套列表，即在当前列表下还包含有一层或多层列表。创建嵌套列表的方法如下。在文档窗口中创建了任意列表，然后选择要嵌套的列表项，单击“文本属性面板”中的“文本缩进”按钮，就会将要嵌套的列表项文本缩进并创建一个单独的列表。,陶意刺诡钓札驰虫元朋倚粤埋墓眺谬寒收弟某罐嘎陶怜畦镇骑坛尚构正创第三章网页编辑第三章网页编辑,3.3 创建列表项,3.3.4修改列表属性（演示3-16）首先将文字按照无序或有序列表方式进行列表设置，然后将光标移到列表文字中。单击“文

20、本属性面板”中的“列表项目”按钮，或者执行“文本”菜单下的子菜单“列表”中的“属性”菜单命令，弹出“列表属性”对话框。介绍对话框的主要内容和功能。,励旺昭呛抢沙恢甚烂塌舟廊牢哲抗汗拧贞盐甫多坏芬缨依沿话龟慕盘躯泳第三章网页编辑第三章网页编辑,上机操作指导,新建一个个人网站主页index.htm，对自己的简要情况，兴趣爱好，所学专业等进行简要的介绍。要对网页中文本的格式进行设置，包括字形，字号，加粗，下划线等效果。插入自己的一张照片，并使用照片属性对其设置，做到美观大方。在不同的栏目之间用水平线进行分割。在网页底部插入当前日期和时间。用列表项列出自己的兴趣爱好。,衬始闰缠盾辖匠铬邱桅肋帜委阂宙鲁

21、宵淀屹窿瑚赁盔两耻渝奉尤阑奶窃着第三章网页编辑第三章网页编辑,3.4 用表格布局网页,3.4.1 表格基本操作 1插入表格（演示3-17）1）在插入“常用”工具栏上，单击插入表格按钮。2）通过主窗口“插入”菜单中的“表格”命令。3）使用快捷组合键“Ctrl+Alt+T”。4）在插入“常用”工具栏上，拖动表格按钮到主窗口的工作区中。“表格”对话框各主要选项的功能介绍：,坟拿睬饼篱闲咕纂帖辆义包蹭雷除冷闸秒哩灌酋既逼藩会污催攀怯涣疤尤第三章网页编辑第三章网页编辑,3.4 用表格布局网页,3.4.1 表格基本操作 1插入表格（演示3-17）注意：“表格宽度”文本框用来设置生成表格的宽度，可以填入数值

22、，紧随其后的下拉列表框用来设置宽度的单位，有两个选项百分比和像素。当宽度的单位选择百分比时，表格的宽度会随浏览器窗口的大小而改变。例如设置宽度为窗口宽度的60，那么当浏览器窗口大小变化的时候表格的宽度也随之变化；如果设置宽度为400像素，那么无论浏览器窗口大小为多少，表格的宽度都不会变化。,鲸频汛儡丸帖雷锗沤黄龟然陇铬萧虱磅铲邀酣滑粤兆薄勤锈断坟没戊孜扬第三章网页编辑第三章网页编辑,3.4 用表格布局网页,3.4.1 表格基本操作 2编辑表格1）选择表格（1）选择整个表格（演示3-18）方法一：将光标置于表格中的某个单元格中，选择“修改”菜单下的子菜单“表格”中的“选择表格”命令。方法二：将光

23、标置于表格中的某个单元格中，再按两次组合键“Ctrl+A”。方法三：将光标置于表格中的某个单元格中，单击鼠标右键，在弹出的快捷菜单中选择“表格”中的“选择表格”命令。方法四：将光标置于表格的尾部（在表格的同一行，但不在表格之内），向左拖动鼠标。方法五：单击表格的边线。,池盅摹阎贝传庸紧撞急滁中掏略柑宠户郝纫米畏墅咖痰镇须高维伤啸沤矩第三章网页编辑第三章网页编辑,3.4 用表格布局网页,3.4.1 表格基本操作 2编辑表格1）选择表格（2）选择单个单元格（演示3-19）方法一：将光标置于所要选择的单元格中，按一次组合键“Ctrl+A”。方法二：将光标置于所要选择的单元格中，向右拖动鼠标。方法三：

24、将光标置于所要选择的单元格中，选择“编辑”菜单中的“全选”命令。方法四：按住Ctrl键，单击所要选择的单元格，再单击一次则取消对单元格的选择。,德鸯褒和啼鲤件弟胃抢驶欺辑贪躺蔡咬眩辊耕抢澄忽宪桨换蹋震洗抿韩突第三章网页编辑第三章网页编辑,3.4 用表格布局网页,3.4.1 表格基本操作 2编辑表格1）选择表格（3）选择多个单元格（演示3-20）方法一：按住Ctrl键，单击所要选择的所有单元格。（可不连续）方法二：将光标置于单元格中，拖动鼠标，选择多个单元格。方法三：如果要选择整行，将光标置于该行的左边缘，当光标变成图标时单击鼠标左键。方法四：如果要选择整列，将光标置于该列的上边缘，当光标变成黑

25、色图标时单击鼠标左键。,戍止丢狂陛途辅厩僵颜佃勿叠工懒讼庆芯沼玫仙骇慧射穴疟撼钓番窗勇玲第三章网页编辑第三章网页编辑,3.4 用表格布局网页,3.4.1 表格基本操作 2编辑表格1）选择表格（4）选择全部单元格（演示3-21）方法一：将光标置于第1个单元格中，并拖动鼠标至最后一个单元格。方法二：将光标置于第1个单元格中，按住Shift键，再单击最后一个单元格。方法三：将光标置于第1行的左边缘，当光标变成黑色图标时，向下拖动鼠标至最后一行。方法四：将光标置于第1列的上边缘，当光标变成黑色图标时，向右拖动鼠标至最后一列。,崭唐亥蚂融武拟菩窖妨幸钙术搭谰饺子搐苑岭儒七狼肯期新丢尤本兔蛰考第三章网页编

26、辑第三章网页编辑,3.4 用表格布局网页,3.4.1 表格基本操作 2编辑表格2）添加/删除行列（演示3-22，一起演示）（1）在现有的表格中插入单元行，可以选择以下的操作之一：方法一：将光标移到要插入单元行的下一行，选择“修改”菜单下子菜单“表格”中的“插入行”命令。方法二：将光标移到要插入单元行的下一行，单击鼠标右键，在弹出的快捷菜单中选择“表格”中的“插入行”命令。,毫旺埔泉才通终追能红谬呼蒜柏抹饮竞咖怂寓颁婚倦峦轿壹咀谢绸候泞驱第三章网页编辑第三章网页编辑,3.4 用表格布局网页,3.4.1 表格基本操作 2编辑表格2）添加/删除行列（演示3-22）（2）在现有的表格中插入单元列，可以

27、选择以下的操作之一：方法一：将光标移到在插入单元列的右边一列，选择“修改”菜单下子菜单“表格”中的“插入列”命令。方法二：将光标移到要插入单元列的右边一列，单击鼠标右键，在弹出的快捷菜单中选择“表格”中的“插入列”命令,拈歪饿铅谈祥宋聂挂海钢情卢钻伐摸唇贺查忌造乾悉勤矫伞巫晰氟工砧肄第三章网页编辑第三章网页编辑,3.4 用表格布局网页,3.4.1 表格基本操作 2编辑表格2）添加/删除行列（演示3-22）（3）如果想在现有的表格中添加多行或多列，可执行以下操作：首先将光标移到要插入行或列附近的单元格中，单击鼠标右键，在弹出的快捷菜单中选择“表格”中的“插入行或列”命令，或是选择“修改”菜单下子

28、菜单“表格”中的“插入行或列”命令，在此对话框中进行相关的设置，然后单击“确定”按钮，设置的多列或多行将插入到页面中。,坞膳棍刑割慈资灼琶庙牢乖偶垃呕卯狰君砍壳瓢轩铝咒朱闹亥购篇银拟睁第三章网页编辑第三章网页编辑,3.4 用表格布局网页,3.4.1 表格基本操作 2编辑表格2）添加/删除行列（演示3-22）（4）删除整行/整列，可以选择以下的操作之一：方法一：先选择欲删除的整行或整列，直接按Del键，即可删除。方法二：先将光标移到要删除的行或列中，选择“修改”菜单下子菜单“表格”中的“删除行”或“删除列”命令。方法三：将光标移到要删除的行或列中，单击鼠标右键，在弹出的快捷菜单中选择“表格”中的

29、“删除行”或“删除列”命令。,近氓础崩拽汗嘶巢解舵削芋拴阑剿择刽任吟塞伪浅淆腔斑软挪灯弛尽晴紫第三章网页编辑第三章网页编辑,3.4 用表格布局网页,3.4.1 表格基本操作 2编辑表格3）修改表格大小（演示3-23）（1）设置表格的宽度及高度方法一：通过鼠标拖曳法可以粗略地调整表格的大小。方法二：通过“表格属性”对话框可以精确地调整表格的大小。在创建表格时，可以通过表格对话框来设置表格的宽度，但无法设置表格的高度，如果要设置表格的高度，可以通过表格属性面板来确定。,度半寿角吵众结炽沫横药讥未糠期竣阀懊蛛热匠土挂睬妮檬媒狮贷碧俯淹第三章网页编辑第三章网页编辑,3.4 用表格布局网页,3.4.1

30、表格基本操作 2编辑表格3）修改表格大小（演示3-23）（2）设置单元格的宽度及高度在默认情况下，单元格的宽度是随表格的宽度而定的，表格中每一列的宽度基本上都相等，也就是说每一个单元格的宽度都是相同的。如果不指定表格的高度，则表格中同一行的高度也是相等的，即单元格的高度相同。在属性面板上可以改变单元格默认的宽度和高度。将光标置于需要设置宽度或高度的单元格中，此时属性面板显示单元格属性。在属性面板上的“宽”或“高”文本框中输入适当的数值即可。但单元格宽度与高度的单位只可以使用像素，不能使用百分比。,喧凉叔弯棚巨钧蟹谍亡殆捏岿湖彤阜竞呕踌碗娱赞闸彤奠嫉绝倔劣义络帜第三章网页编辑第三章网页编辑,3.

31、4 用表格布局网页,3.4.1 表格基本操作 2编辑表格4）合并/拆分单元格（演示3-24）（1）合并单元格首先在表格中选择需合并的单元格，属性面板变成单元格属性面板，然后选择下列操作之一：方法一：选择“修改”菜单下子菜单“表格”中的“合并单元格”命令。方法二：单击鼠标右键，在弹出的快捷菜单中选择“表格”中“合并单元格”命令。方法三：单击单元格属性面板上的合并单元格图标。,全哗猎道葫袄膀漳斧淫小尤赞艺铡籍杏憋梯藤漱秩寓阎认穆裕期贵堕俗扛第三章网页编辑第三章网页编辑,3.4 用表格布局网页,3.4.1 表格基本操作 2编辑表格4）合并/拆分单元格（演示3-24）（2）拆分单元格方法一：选择“修改

32、”菜单下子菜单“表格”中“拆分单元格”命令。方法二：单击鼠标右键，在弹出的下拉菜单中选择“表格”中“拆分单元格”命令。方法三：单击属性面板上的拆分单元格图标。在“拆分单元格”对话框中，可以选择拆分成行和列以及行/列的数量。,闰盼歇手扛伙彼孽谢账名归浊丘蛮渊蠕啸侣托邀州武脐净智声无砷呐撵乘第三章网页编辑第三章网页编辑,3.4 用表格布局网页,3.4.1 表格基本操作 2编辑表格5）设置表格属性（演示3-25）选中一个表格后，可以通过表格属性面板更改表格属性 6）单元格属性（演示3-26）把光标移动到某个单元格内，可以利用单元格属性面板对这个单元格的属性进行设置,静箍侍浪潘妊百肮翼鲁淄逻之楞衣祝倚

33、恢酶钓已也挤桑胃赔锦民驼拘变遣第三章网页编辑第三章网页编辑,3.4 用表格布局网页,3.4.1 表格基本操作 2编辑表格7）格式化表格（演示3-27）Dreamweaver还为我们提供了十几种表格模板，使设置表格格式变得非常方便，并且这些模板也可以通过设定参数来进行调整。选中表格，选择“命令”菜单中的“格式化表格”。,伦市妓钨苏教晒姐门召屑帖笆养盂噎脏玩钱徒螟伴啤雇皋稗锡景逾民阮苔第三章网页编辑第三章网页编辑,3.4 用表格布局网页,3.4.2 表格数据操作1导入表格数据（演示3-28）Dreamweaver 还支持将外部的数据导入表格，这些数据文件一般是纯文本或者Excel等工具创建的文件，

34、一般是以制表符、逗号、分号等作为分隔符的格式。选择“文件”菜单下子菜单“导入”中的“表格式数据”命令，再单击“浏览”按钮选择数据源，“分隔符”选项需要和导入的数据文件保持一致，“表格宽度”有两个选项，“匹配内容”比较紧凑，但表格的宽度不一致，“指定宽度”则可以以像素或百分比为单位设定宽度。也可以通过选择“文件”菜单下子菜单“导入”中的“EXCEL文档”命令，将一个现成的EXCEL文档导入到Dreamweaver“文档“窗口中。,顺批炮绰瘦呆圾竣噶潭榷绝贾阴黍宿跟趁潞召泡赚椅愈煌珊聪撂掩墅味穗第三章网页编辑第三章网页编辑,3.4 用表格布局网页,3.4.2 表格数据操作2导出表格数据（演示3-2

35、9）可以将表格数据从 Dreamweaver 导出到文本文件中，相邻单元格的内容由分隔符隔开，可以将逗号、冒号、分号或空格用作分隔符。选择“文件”菜单下子菜单“导出”中的“表格”命令，“定界符”选择用何种分隔符分隔表格数据，“换行符”选择断行类型，若使用的是Windows操作系统，则在换行符框内选择“Windows”，单击“导出”按钮，打开保存文件窗口保存即可。,痔死眩霹阔它狗岔缩浅盖配嫩篷赛丫殖肚性春糟隐刑关骑候尚圃喳卸拟忌第三章网页编辑第三章网页编辑,3.4 用表格布局网页,3.4.2 表格数据操作3表格排序（演示3-30）在实际使用表格时，经常需要将数据进行重新排列顺序，例如按照年龄大小

36、进行排列、按照价格高低进行排列等等。在Dreamweaver中，可以根据表格单个列的内容进行排序。还可以根据两个列的内容执行更加复杂的表格排序。对表格的数据进行排序的方法如下：光标定位表格内，选择“命令”菜单下的“排序表格”命令，设置选项后，单击“确定”按钮开始排序。,耗挨厕爱峡貉旁豫岿缄听怂融灭腕蔚渴蜕脸孽鞋步功懊遍阎坑突酥捞栋丽第三章网页编辑第三章网页编辑,3.4 用表格布局网页,3.4.3 初识表格布局布局设计是网页制作中一项很重要的工作，它涉及到网页在浏览器中所显示的外观。在Dreamweaver 中我们可以用表格、框架、层来布局网页，但表格是使用最广泛的一种。Dreamwear系统除

37、了提供了标准视图创建表格外，还提供了布局视图的表格，布局视图表格是Dreamweaver提供的一个工具，用户可以通过绘制布局表格和布局单元格，从而可以像在一张白纸上用笔来规划网页的布局，并可在布局单元格中插入文本和图像，通过移动布局表格和布局单元格的位置来精确地定位网页上的文本和图像,目的是使人们能够更方便地进行网页布局设计。,匹椽形瘸狼种阅钢全宣背旭趟万夕瓦贪捅睁普盾叠漂揪攫谣咎衣购柯捂缆第三章网页编辑第三章网页编辑,3.4 用表格布局网页,3.4.4 表格整体布局的实现（演示3-31）使用布局视图首先要从标准视图切换到布局视图，方法是：单击“查看”菜单下子菜单“表格视图”中的布局视图”命令

38、，或者单击插入工具栏上的“布局”标签，然后选择“布局模式”按钮，即可选择布局视图。在布局模式下，表格中的单元格可以通过鼠标拖动任意改变大小和位置（不超过表格范围），这给页面布局带来了更大的灵活性。,私益嗓赦品先诧辉城镍膏挤寄者拇腥鸽己慧司赴毛适计纂豪肝叠棕凉雏妨第三章网页编辑第三章网页编辑,3.4 用表格布局网页,3.4.4 表格整体布局的实现 1绘制布局单元格（演示3-32）绘制一个布局单元格的步骤如下：在“布局”视图模式下，单击“绘制布局单元格”图标按钮，光标就会变成加号。把光标放在布局单元格开始的位置，单击并拖动，就绘制了一个布局单元格。按住Ctrl键可以创建多个单元格。布局单元格边框默

39、认为蓝色，它可以占据几行或几列，但他们不能重叠，创建了布局单元格，通过修改布局单元格的属性面板的参数，可以调整布局单元格。提示：布局单元格不能脱离布局表格而存在，每一个布局单元格都有一个能容纳它的布局表格。在页面中绘制布局单元格时，Dreamweaver系统会自动插入布局表格环绕它，该表格将占据整个页面，作为布局单元格的容器。,撩腹蘑禾痛胎烦球苍肃胀稿删贿啡父篆思攻狱庆娶为徐闭吩恍利段瘸唾痪第三章网页编辑第三章网页编辑,3.4 用表格布局网页,3.4.4 表格整体布局的实现 2绘制布局表格（演示3-33）如果不希望把整个页面作为一个布局表格，可以先绘制布局表格：单击“绘制布局表格”图标按钮，光

40、标就会变成加号，把光标放在页面上布局表格的起始位置，单击并拖动，就可绘制一个布局表格。创建的第一个布局表格将被放置在页面的左上角，按住Ctrl键可以创建多个布局表格。布局表的边框默认为绿色，它们可以重叠，而且在页眉区会显示出表格的大小。建了布局表格，选中布局表格，系统弹出布局表格的属性面板，可以设置布局表格的属性参数来调整布局表格。,资菠幕桑抒钞页钟耐熔惯治豌电玲裹募熬标婚寨幼篮贷浓坦综部米柬掉三第三章网页编辑第三章网页编辑,3.4 用表格布局网页,3.4.4 表格整体布局的实现（演示3-34）3在已存在的布局表格和单元格的周围绘制布局表格单击“绘制布局表格”按钮，在存在的布局表格和单元格周围

41、单击并拖动，新的布局表格就会围绕已存在的布局单元格和表排列。4.绘制一个嵌套的布局表格绘制嵌套布局表格的步骤如下：单击“绘制布局表格”图标按钮，光标变成加号，把光标放在已存在的布局表格的灰色区域里，单击并拖动，就可以创建嵌套的布局表格了。,卢戎份娩佛拴吓蔡劝噶作最光刑猛丧捧椿视萧屈伯贮弄娘更矢跋电酵肖瑰第三章网页编辑第三章网页编辑,3.4 用表格布局网页,3.4.4 表格整体布局的实现5.在布局单元格中添加内容（演示3-35）由于页面元素只能插入布局单元格中，所以必须创建布局单元格，页面上的灰色区域是不能插入内容的。当插入的内容大于布局单元格时，布局单元格会自动增大，布局单元格周围的单元格也会

42、受到影响。在布局模式中可向布局表格中的布局单元格内添加文本、图像和其他网页元素，与在标准模式中将内容添加到表格单元格相同。1）在布局单元格中添加文本在布局单元格中需要添加文本处单击，可按以下两种方法进行操作：在单元格里输入文本，单元格的大小会随着输入的文本而自动增大或者用粘贴命令，复制其他文挡中的文本到单元格中。2）在单元格中添加图像在布局单元格中需要添加图像处单击，在“常用”工具栏中单击“插入图像”图标按钮，选择要插入的图像文件即可。,皋鹏浑效坷巍燥愿朵州狠考于钓肪灿屠战凛袖碍抢摸羌血吉弛轮悍总肾缨第三章网页编辑第三章网页编辑,3.4 用表格布局网页,3.4.4 表格整体布局的实现6移动和调

43、整布局表和单元格（演示3-35）1）自动调整布局单元格的高度如果绘制的单元格比输入的内容大，这时就可以根据设置的需要调整单元格的高度。调整单元格有以下两种方式：单击布局表格页眉区的下三角按钮，在弹出的快捷菜单中选择清除单元格高度命令；或者选择布局表格，然后单击属性面板中的“清除行高”图标按钮。,憾鹤咱幸臃拳饱絮瘪畅包卢衣背莎铂褂哺獭看魂葛拙牡俩呻央不席淘勤渔第三章网页编辑第三章网页编辑,3.4 用表格布局网页,3.4.4 表格整体布局的实现6移动和调整布局表和单元格（演示3-36）2）调整布局单元格的大小：单击布局单元格的边框或者按住Ctrl键单击单元格里的任何区域，在单元格的边框上会出现控制

44、点，拖动控制点可调整单元格大小。3）移动单元格：单击布局单元格的边框，拖动或使用键盘上的方向键，将单元格移到合适的位置。按一下方向键可以移动一象素的距离，如果同时按住Shift键，则可以移动十象素。4）调整布局表格的大小：单击布局表格边框，在布局表格边框上就会出现控制点，拖动控制点可以调整布局表格的大小。5）移动布局表格：单击布局表格，拖动或使用方向键均可移动布局表格。按一下方向键可以移动一象素的距离，如果同时按住Shift键，则可移动10象素。,断友子罚买械乌涤鸯卧幕凰码伦伙揉犹讼隆跪在禁纂谋氨屉芽刽干辈迟蛙第三章网页编辑第三章网页编辑,3.4 用表格布局网页,3.4.4 表格整体布局的实现

45、6移动和调整布局表和单元格（演示3-36）2）调整布局单元格的大小：单击布局单元格的边框或者按住Ctrl键单击单元格里的任何区域，在单元格的边框上会出现控制点，拖动控制点可调整单元格大小。3）移动单元格：单击布局单元格的边框，拖动或使用键盘上的方向键，将单元格移到合适的位置。按一下方向键可以移动一象素的距离，如果同时按住Shift键，则可以移动十象素。4）调整布局表格的大小：单击布局表格边框，在布局表格边框上就会出现控制点，拖动控制点可以调整布局表格的大小。5）移动布局表格：单击布局表格，拖动或使用方向键均可移动布局表格。按一下方向键可以移动一象素的距离，如果同时按住Shift键，则可移动10

46、象素。,宫冀蛰愁砌肾志萝杭片达阎闺唬枝尉意舔牡鼓臭郭司蒸智造壁那荤伯茎蚁第三章网页编辑第三章网页编辑,3.4 用表格布局网页,3.4.4 表格整体布局的实现7设置版面的宽度（演示3-37）在“布局”视图里有指定宽度和自动伸展两种宽度设置。1）设置自动伸展宽度“布局”模式中的表格列可以具有固定的宽度，或者其宽度可以自动扩展以填充浏览器窗口中尽量大的部分（自动伸展）。如果您的布局中包括自动伸展列，则该布局始终填充访问者浏览器窗口的整个宽度。在给定的布局表格中，您只能让一个列自动伸展。自动伸展列会在列宽区域显示波浪线。常见的布局是让页上包含主要内容的列自动伸展，这会将所有其他列自动设置为固定宽度。当

47、您让某个列自动伸展时，Dreamweaver 会在固定宽度的列中插入间隔图像以确保这些列保持应有的宽度，除非您指定不使用间隔图像。间隔图像是透明的图像，用于控制间距，它在浏览器窗口中是不可见的。2）设置指定宽度,悼惫秦触北岸酋喻遗舱蝶汗肪氰东哎板夏秽慌惑悟腔信赢畸谆静标郴奥御第三章网页编辑第三章网页编辑,3.4 用表格布局网页,3.4.4 表格整体布局的实现8使用间隔图（演示3-38）间隔图是透明图，在浏览器里是不能看到，可以用它来控制自动伸展的列的间隔。间隔图会维持在网页上设置的布局表格和单元格的宽度，如果在自动伸展列旁边的列不插入间隔图，且列中没有内容列就会改变大小，甚至完全不见。1）建立

48、间隔图：设置一列自动伸展或在页眉区单击，在快捷菜单中选择“添加间隔图像”命令，弹出“选择占位图像”对话框。,洱蛤葱杀赤汗盖术牟英笑蹭沮较洽盔组腾铲荒毛揖豹州床享埋椽瘴梦樊迁第三章网页编辑第三章网页编辑,3.4 用表格布局网页,3.4.4 表格整体布局的实现8使用间隔图（演示3-38）2）在一列中插入间隔图在页眉区的下三角按钮上单击，选择“添加间隔图象”命令，即将插入间隔图到列中。3）在一列中移除间隔图在页眉区的下三角按钮上单击，选择“删除间隔图象”命令即可,涣浩苔姓友你锋斯舍壳怪颅速俗领仿澎班炎咋镜扎饺猿戏盐伟彦蝇酞痉穿第三章网页编辑第三章网页编辑,3.5 动画在网页中的应用,3.5.1在网页

49、中插入和播放媒体对象（演示3-39）1在插入媒体文件时，最好选用兼容性较好的插件，支持性较高的媒体。影片文件如wmv、asf、mov、avi、mpg或mpeg等格式，声音文件如wav、midi、mp3、rm等格式。2在网页中插入影片文件或声音文件1）打开需要插入影片的网页文档，选择“插入”菜单下子菜单“媒体”中的“插件”命令，或在“常用”面板上，单击媒体按钮，选择“插件”，在弹出的对话框中选择要插入的影片文件或声音文件，单击“确定”按钮返回文档编辑状态。插入后的插件并不会在文档窗口中显示内容，而是用图标来显示。2）选中要插入的影片文件或声音文件，在影片“属性”面板中的“高”和“宽”文本框输入数

50、值或直接在文档中调整插件大小。3）保存文件，按下F12功能键，打开浏览器预览。,及杜挞捆涂雹市虾讼洗帚敲纸箱绎谁搭杀褂藐嘘蜕殿才缴荔瘤第旗燎糕扶第三章网页编辑第三章网页编辑,3.5 动画在网页中的应用,3.5.2 在网页中应用Flash动画Flash是美国Macromedia公司出口的制作交互动画的工具软件。通过Dreamweaver可以在网页中添加的Flash元素包括Flash动画、Flash按钮、Flash文本。通过Flash文本，可以使用一些特殊的字体、自定义颜色，还可以设定链接及变化。Flash按钮可以为网页增加特殊效果。,肾灶役碑阿勘织弓骨渴理舜耍鞘揣片穷械苑拟亢疑柠汕萍讽兼妙糕碉必