实验20 快速编辑源代码
实验要求:
通过实验,了解网页源代码编写结构机利用Dreamweaver查看网页自动生成的源代码,掌握HTML的常用标记及对网页中的代码进行增加和修改.
说明:网页就是HTML的文件,只是在Dreamweaver中把HTML可视化的视图文档,它由众多的HTML标记对组合而成,通常使用来表示代码的开始和结束;HTML是网页的超文本标记语言,是一种用来制作超文本文档的简单标记语言,在Dreamweaver MX 编辑网页中,HTML代码会自动生成.
对应知识点:
插入HTML语言.
修改和删除多余的代码.
查找和替换
对应教材(Macromedia Dreamweaver MX2004 标准教程)的第十四章的内容
实验课时:1课时
实验素材:
网页中使用的图片(可使用配套光盘内的exp20\sucai20文件)
实验步骤:

1 启动DreamweaverMX 2004 程序,选择菜单"文件"->"新建"命令,打开"新建文档"对话框.在对话框中"常规"标签下选择"类型"列表中的"基本页"选项,创建HTML网页.
2 创建页面后,保存页面到本地站点文件夹内,文件名称为index.htm.如图20-1所示.
说明:网页中的源代码是自动生成的,所以为了学习,我们先建立网页,在网页视图窗口
中插入表格和图像,然后打开代码窗口对照生成的代码进行比较和学习,这也是快速学习编辑代码的有效方法.
图20-1 保存文件名为index.Htm
3 .单击文档面板的"代码"按钮,打开代码视图窗口,在代码中的上部分""中输入"企业服务中心欢迎您!",使网页标题显示所输入的文字.
说明:网页就是HTML语言,所以网页中的内容都在中间,整个网页由页面头和网页体组成,标题是在网页头内.
4.把光标插入到中,在 图20-2 在代码中设置页面属性
5. 保存页面后,单击文档面板的"设计"按钮,返回设计模板模式,单击"常用"面板上的"表格"按钮,在页面中插入1行1列的表格.
6. 单击编辑窗口文档栏上的"拆分"按钮,打开代码和设计视图编辑窗口.如图20-3所示.
图20-3 代码和设计视图窗口
说明:表格是由表格标记…组成的,中包含表格的属性,如表格的宽度(width),边框(border),间距(cellspacing)等.
7. 选中代码窗口中的"width="后面的数值,把数值改为755,使表格宽度增加到755象素.
8. 把光标插入到设计视图窗口表格中,打开属性面板,单击"拆分单元格行或列"按钮,在弹出的对话框中把表格分成两行,然后单击"确定"按钮.
9. 再次把光标分别插入到两个表格中,单击属性面板上的"拆分单元格行或列"按钮,把两个表格分成两列,然后查看代码窗口,如图20.5所示,代码中添加两个表格代码.
说明:代码中的是定义表格的行,行是以结尾的,一个表格中有几个…就表示有几个行,表格中的…是定义表格的列,也就是一行中有几个表格单元,HTML中,标记都是成对出现的,缺少标记头或尾都会出现错误,标记尾都是"/" 加标记组成的,图20.4中有两对 ,四对,说明表格有两行四列单元格.
10 .单击代码窗口,把光标放在第一个中间,把  删除,然后输入第一个有效字符"".
图 20-5 表格代码
图20-5 表格代码

图20-8单击浏览选择图片插入图像

13,以同样的方法在第二个单元格中插入button.gif图像,插入图像后如图20-9所示
图20-9 插入代码
14,单击设计视图窗口选中第2行表格,在表格属性面板的"背景颜色"中输入色标值#0014A7.
15,把光标放在第2行第1个单元格中,在代码视图窗口中,删除" "然后在和之间插入滚动文字的代码:
我们将竭诚为您提供服务!
说明 在网页中加滚文字,是为了增加网页的动画效果.网页制作者可以修改自己需要的文字信息,然后把它拷贝到自己制作的网页中.
16,在下部的设计视图窗口中,把光标定位在第2行第2个单元格中,插入1行2列表格,宽度为100%的嵌套表格.
17,在代码视图窗口,利用提示菜单按照第9,10步骤的方法插入dot.gif图片,然后单击属性面板上的 绝对居中按钮.
18,返回视图窗口,在嵌套表格的第2个单元格中熟人"常用软件使用技巧| 常用工具软件| 软硬件测试结果| 最新电子商务动态| 首页"等文字.
19,把光标插入到代码视图窗口刚才插入的"常用软件使用技巧"文字前,然后熟人有效字节的第一个字符后,按照提示菜单输入" 说明 为了要弹出提示菜单,必须是输入有效字符串的第一个字符,如果输入的字符不是有效,那么,提示菜单不会弹出,因为字符不在收藏菜单中.如果你对代码很熟悉不需要提示,可以按下键盘Esc退出提示菜单.
20,选择"白色"后,在代码中自动加入了白色的色标值(#FFFFFF),然后在文字的"首页"后面输入字体结尾标记.
图 20-10 弹出的颜色选取框
21,保存页面,设计视图窗口中的导航栏文字变成白色了,代码和视图变化如图20-11所示.
图20-11 代码/视图窗口
22,在代码中,按照同样的方法在最后一个…,然后设置表格属性"填充","间距","边框",都为0.代码输入如图20-12所示.
说明 在对代码不熟练的情况下,最好充分利用提示菜单帮助输入代码,这样能有效的避免输入错误.
23,单击下部的设计视图窗口,在刚插入的表格中再次插入1行2列的表格,然后选中表格在属性面板中,设置"填充"和"间距"都为2,"边框"为0.
图20-12 增加表格代码
24,在代码窗口的中的第一个中利用提示菜单输入,使光标移动到表格中间,如果单击表格属性中的"居中对齐 "按钮,产生的代码和输入的代码是一样的.
25,在中间输入" 常用工具软件 ", 符号的颜色可以由浅到深设置.
26,在设计视图窗口中,选中"常用工具软件"文字,单击属性面板上的"粗体"按钮 ,使字体加粗显示.
27,再在第2个单元格下面插入2行3列,宽度为97%的表格.
28,在插入表格的代码中,选中前面两个 按Delect键删除,如图20-13所示,然后在下一个中按下空格键,按照提示菜单输入"colspan="3""
图20-13 删除代码合并表格
代码,是单元格代码变成,然后保存页面,合并了单元格.如图20-14所示.
图20-14 合并表格
29,选中合并的表格,在属性面板中设置"背景颜色"色标值为BCC3F5,或在代码中利用提示菜单设置背景颜色.
30,选中下面的3列表格,打开属性面板,在"背景颜色"中输入色标值#F0F1F,然后在各个单元格输入内容,保存页面.如图20-15所示.
图20-15 输入表格中的内容
31,在存放图片的文件夹目录中,新建一个image图片夹,如图20-16所示,然后把网页中的图片复制到image文件夹中.
32,单击文档栏上的"代码视图模板"按钮,切换到代码窗口,选中代码中任何一个images标签.如图20-17所示.
图 20-16 新建图片夹
图 20-17 选中images
33,单击鼠标右键,在弹出的菜单中选择"查找和替换"命令,如图20-18所示.
34,弹出"查找和替换"对话框,在"查找范围"下拉列表中的选择"当前文档"选项,在"替换"文本框中输入image,然后单击"替换全部"按钮.如图20-19所示.
35,替换后,网页代码中的images都替换成image了,页面中的图片也连接到image中了.
说明 利用图还功能可以查找和替换站点中所有页面上的代码和字符,选择查找范围可以在查找和替换指定范围内的代码,如:文件夹,本地站点等,这个功能可以节省工作时间和提高工作效率.
图 20-19 查找images 替换为image
图 20-18 选择"查找和替换"命令
36,替换和修改页面后,把整个网页的背景颜色设置为bgColor=#0014A7,保存页面,网页制作完成,显示如图20-20所示.
图20-20 完成网页

实验作业
模仿
在Dreamweaver MX2004编辑窗口下,创建HTML网页.
使用工具和代码相结合的方式制作网页.
新建图片夹复制图片到新的图片夹中.
利用查找和替换功能修改图片路径.
网页制作完成,保存网页.
创作
启动在Dreamweaver MX2004,创建HTML网页.
利用代码在页面中插入表格,图像,Flash等网页元素.
利用提示菜单设置表格的背景颜色.
利用查找和替换功能替换字符.
在光盘exp20\site20文件夹提供的网页中,切换互代码视图模式.修改或添加代码达到编辑网页的目的.网页如图20-21～图20-24所示.
图20-21 网页效果
图20-22 网页效果
图20-23 网页效果
图20-24 网页效果
实验报告
实验名称:
姓名:
班级
分组
实验室
实验时间: 年 月 日
实验步骤
序号
步骤
操作要领
实验结果