湖南工业大学dreamweaver实验指导书(2014)

实验一 在Dreamweaver中建立一个站点

一、实验目的

1、掌握认识并熟悉Dreamweaver的工作界面。 2、能够自定义工作环境。

3、进行一个简单的网页设计。

二、实验内容

建立一个以自己名字命名的站点，该站点包含三个文件夹，image，css，mdb，四个网页，分别为index.html，jianjie.html，zuopin.html，xuexi.html，设置主页index.html的标题为“本站主页”。其中index.html页面效果图如所示。

图

三、知识点分解

本实验主要涉及到如下知识点： 1、 在Dreamweaver中建立站点。

2、 在Dreamweaver站点文件列表下新建文件和文件夹。 3、 在网页中插入背景图片。

四、实验步骤

1、创建本地站点步骤：

(1) 打开DREAMWEAVER,选择菜单下[站点]/[管理站点]|/[新建]/|[站点]命令.弹出如图所示对话框。

(2) 在弹出“站点定义”对话框的“高级”标签中输入如下信息。

图

(3) “站点名称”——输入站点名称如“myweb”。

(4) “本地根文件夹”——选择本地文件夹如“D\\myweb”

(5) “自动刷新本地文件列表”——选中是否每次拷贝文件到本地站点时都自动更新本地文件夹列表，选中该选项。

(6) “默认图像文件夹”——选择图像所放置的文件夹如“‘D\\myweb\\ image” 注意：图像文件夹一定要在站点文件夹下，且一般命名为image或images。

(7) “HTTP地址”——输入实用的完整网站的URL，以便Dreamweaver能检验使用绝对URL网站链接。

(8) “缓存”——选择是否创建一个缓存以提高链接和网站维护任务的速度。选中该选项。

(9) 设置完毕，点击“确认”按钮。

(10) 在Dreamweaver的工作界面右侧“浮动面板组”中的“文件”面板中的“文件”标签下就能看到刚才新建的站点myweb，如图所示。

图

如果要对所建立的站点进行修改的话，可以选择菜单下[站点]|[管理站点]| [编辑]命令。

2、在站点文件列表下新建文件和文件夹步骤：

(1)在站点文件列表中右键单击“站点—myweb(D:\\myweb)”，在弹出的菜单中选择“新建文件夹”，文件列表中就会出现名为“新建文件夹”的文件夹，将该文件夹命名为image，同样操作建立css文件夹和mdb文件夹。

(2) 在站点文件列表下新建文件有2种方法：

a) 选择[文件]|[新建]，在弹出的“新建文档”对话框中，选择“HTML”，就新建了一个HTML网页，然后再选择[文件]|[保存]或者是按【Ctrl+S】键，将网页名称改为index.html，同样操作建立jianjie.html, zuopin.html，xuexi.html。

b)在站点文件列表中右键单击“站点—myweb(D:\\myweb)”，在弹出的菜单中选择“新建文件”，文件列表中就会出现名为“新建文件”的网页文件，将该文件命名为index.html，同样操作建立jianjie.html, zuopin.html，xuexi.html。

3、在“文件列表”中选中index.html文件，单击右键，在弹出的菜单中选择“设为首页”，回到页面上，在“文档工具栏”中将“标题”更改为“本站主页”。

注意：要想在站点文件列表下自动出现新建的文件和文件夹，前提条件必需在建立站点时选中“自动刷新本地文件列表”，否则的话必需单击“刷新文件和文件夹，效果图如图所示。

”按钮才能出现新建的

图

4、设计index.html网页步骤：

(1)在站点文件列表中双击index.html，打开该网页。

(2)将光标定位到“文档工具栏”中的“标题”，将标题中的内容改为“本站主页”，如图所示。

图

(3)单击“属性面板”中的“页面属性”按钮，弹出如图所示的“页面属性”对话框，单击“背景图像”后面的“浏览”按钮，添加背景图像即可。

(4)在工作区的“编辑窗口”中输入“欢迎光临我的小站”

图

(5)浏览测试。浏览测试的方法有3种，第1种方法是直接按【F12】键，这是最快捷的方法，建议大家以后尽量采用这种方法。第2种方法是单击如上图所示的“文档工具栏”中的

按钮，在弹出的菜单中选择“预览在iexplore”命令后即可在IE浏览器中浏览

当前网页。第3种方法是选择[文件]/[在浏览器中预览]/[iexplore]菜单命令即可在IE浏览器中浏览测试当前网页。

思考题：在设置网页背景图像时，如果图像太小，铺不满整个网页，怎么办？

实验二 超级链接的建立

一、实验目的

1、掌握超链接的基本概念和种类 2、能熟练设置文本和图片超链接。

3、能熟练设置锚点超级链接和电子邮件链接。 4、掌握将外部文件导入Dreamweaver中的方法。

二、实验内容

某站点下有如下4个网页，index.html，meiwen.html，aiqing.html，hunyin.html， 1、首页效果图如图所示，图像显示在网页的中间，单击“情感美文”会在新的IE窗口打开meiwen.html，单击“爱情故事”会打开aiqing.html，单击“婚姻情感”会打开hunyin.html，单击“与我联系”会发送电子邮件。

图

2、hunyin.html效果图如图所示，图2-3-2(a)是网页上半部分的效果图，图2-3-2(b)是网页下半部分的效果图，单击“再看一遍”能返回到“中华人民共和国婚姻法”，该法规内容在fa.txt中，单击右下角的“返回首页”能够返回首页。

图(a) 图2-3-2 (b)

三、知识点分解

1、由图可以看出，在该页面正中间有一张图像，图像显示了边框，当鼠标移到文字“情感美文”时会显示提示文字“情感美文”。

2、由图可以看出，文字以表格的形式显示在网页上的，此时注意不是在网页中绘制表格，把文字录入进去，而是采用导入fa.txt文件，使他以“表格式数据”显示出来，“再看一遍”采用了锚链接，“返回首页”采用文字链接，两个链接都无下划线。

四、实验步骤

内容1的实验步骤：

1、新建4个HTML文档，将其分别保存为index.html，meiwen.html，aiqing.html，hunyin.html。

2、 将光标定位到要插入图像的位置。 3、 执行如下方法之一：

(1) 选择[插入]/[图像]菜单命令，打开“选择图像源”文件对话框；

(2) 单击“插入”面板的“常用”选项卡中的

按钮，打开如图所示的“选择

图像源文件”对话框；

(3) 按【Ctrl+Alt+I】键打开“选择图像源文件”对话框。

图

4、 在“选择文件名自”栏中选中单选项，在“查找范围”下拉列表框中指定要插入图像的路径并在文件列表中选择需要的文件名称（*.gif、*.jpeg和*.png）

5、 在“相对于”下拉列表框中选择“站点根目录”选项。 6、 单击“确定”按钮，弹出如图所示的“图像标签辅助功能属性”对话框。

图

7、 在“替换文本”下拉框中输入想要说明的文字，这样的话当鼠标移动到图像上就会出现“替换文本”下拉框中输入的文字。

8、 单击“确定”按钮。 9、 如果所选择的图像文件不在定义的本地站点中，系统会打开如图所示的询问对话框，询问是否保存到本地站点目录下。

图

10、 在提示对话框中单击按钮，打开“复制文件为”对话框，在该对

话框中选择保存路径，并在“文件名”文本框中更改图像的名称。

11、 单击“确定”按钮即可将所选的图像插入到网页中指定的位置。 12、 选中该图像，打开“属性面板”，将图像的高度改为“700”，边框改为“1”，选择“居中对齐”

13、 工具”

按钮。

选取要添加热区的图片，此时属性面板中出现4个热点工具，单击“矩形热点，在图像上“情感美文”绘制热区后，自动打开“热区”属性面板，如图所示。

图

14、 在“属性面板”中将“链接”改为meiwen.html，在“替换”中输入“情感美文”，在“目标”下拉列表框中选择“_blank”.

15、 用同样的方法绘制其他热点，并设置相应的链接。

16、 热点链接完成后按【F12】键预览页面，当鼠标移至热区上时即可看到手形图标下面有一个提示文本。

17、 在建立“与我联系”链接时，则要创建电子邮件链接。创建电子邮件链接有两种方法。

方法一：

(1) 在“文档”窗口的“设计”视图中，选择“与我联系”热区。 (2) 执行下列操作之一插入该链接： a) 选择[插入][电子邮件链接]菜单命令；

b) 在“插入”栏的“常用”选项中，单击“插入电子邮件链接”按钮 。 (3) 打开“电子邮件链接”对话框，如图所示。

图

(4) 在“文本”文本框中输入显示在Web页面中的链接文本，如“与我联系”。 (5) 在“E-Mail”文本框中输入要链接到的电子邮箱地址，如“csygold@163.com”。 (6) 单击“确定”按钮。 方法二：

使用“属性面板创建电子邮件链接，具体操作如下。

(1) 在“文档”窗口的“设计”视图中选择要建立电子邮件链接的文本或图像，如“与我联系”。

(2) 在属性面板的“链接”文本框中，输入“mailto:”，然后在它后面输入电子邮件地址，如“csygold@163.com”，在IE浏览器中单击该链接的显示效果。

18、按【F12】键，预览。

注意：此时电子邮件的发送是采用OutExpress或者是OutLook发送的。所以单击“与我联系”时，会自动创建OutExpress连接向导。

内容2的实验步骤:

1、 打开“hunyin.html”页面，选择[文件]\\[导入]\\[表格式数据]，弹出如图所示的“导入表格式数据”对话框。

图

2、 单击“数据文件”后面的按钮，选择“fa.txt”文件，定界符选择

“Tab”，单击“确定”按钮。

在Dreamweaver 8中还可以建立命名锚记的链接，也就是锚链接。使用命名锚记的链接可以跳转至文档内的特定位置。建立锚链接分为创建命名锚记和创建到该命名锚记的链接两部分。

3、 创建命名锚记：将插入点放在需要命名锚记的地方，如本例中“中华人民共和国婚姻法”。

4、 执行下列操作之一。

a) 选择[插入][命名锚记]菜单命令；

b) 在“插入”栏的“常用”选项中，单击“命名锚记”按钮 。 5、 在打开的“命名锚记”对话框的“锚记名称”文本框中，输入锚记名称，如top，并单击“确定”按钮，锚记标记出现在插入点处。

6、 创建到该命名锚记的链接：选择要创建命名锚记的文本或图像，如本例中的“再看一遍”。

7、 在属性面板的“链接”文本框中，输入一个数字符号“#”和锚记名称，如“#top” 。

注意：若要链接到当前文档中名为“top”的锚记，则输入“#top”。 若要链接到同一文件夹内其他文档中的名为“top”的锚记，则输入“index.html#top”形式的锚记引用。

8、选中“返回首页”，打开“属性面板”，将“大小”改为“16px”，对齐方式改为“右对齐”。

9、单击“链接”文本框后的

按钮，在打开的“选择新文件”对话框中选择要链

接的文件，这里选择“index.html”（即首页），同时在“相对于”下拉列表框中选择相应的“站点根目录”选项。

10、单击按钮，在弹出的“页面属性对话框”中，“分类”选择“链接”，将“下划线样式”改为“始终无下划线”，单击“确定”按钮。

11、按【F12】键，在IE浏览器中单击“再看一遍”链接，则返回到“中华人民共和国婚姻法”（命名锚记处），单击“返回首页”链接，则打开index.html。

思考题：大家经常在网页上会看到文字“加入收藏”，请问如何实现单击“加入收藏”

可以将该网页加入到浏览器的收藏夹中？

实验三 利用表格进行网页布局

一、实验目的

1、了解网页设计常用的几种版式；

2、掌握绘制及编辑布局表格和布局单元格；

3、掌握利用布局表格的嵌套来设计较复杂的版面； 4、掌握在布局表格中添加具体内容 ； 5、掌握设置布局表格和单元格属性 。

二、实验内容

利

用

布

局

表

格

制

作

如

图

所

示

的

网

页

。

图

三、知识点分解

由上图可知，该网页的结构属于拐角型，先画出该网页的版式结构，如图所示。 LOGO BANNER 导航菜单 导 航 网页内容 网页内容 版权信息 图

由图我们可以知道在进行该网页布局时，先要布最外面的表格，然后布最上端的表格，用来放置LOGO和BANNER，然后再布一个单元格放置导航菜单，接着下面布三个并排的表格，分别放置左边的导航，中间的网页内容，右边的网页内容，最下面再布一个单元格，放置版权信息。

四、实验步骤

1、 新建一个文档，打开“属性面板”，单击按钮，在弹出的页面属性对话框中将“背景图像”设为“bg-greenline.jpg”。

2、 将“插入”栏中的“常用”选项卡改为“布局”选项卡，此时就出现“布局”工具栏，如图所示。

图

3、单击布局工具栏中的按钮，进入布局模式。

4、首次执行以上操作之一后，会打开“从布局模式开始”对话框，在该对话框中给出在“布局模式”下创建表格的方法的提示。单击

按钮即可切换到布局模式。切换到

“布局”模式后，在“文档”窗口的顶部会出现标有“布局模式”的蓝色长条。

5、在“插入”栏的“布局”选项卡中单击“绘制布局表格”

按钮 。

6、将鼠标光标放置在页面上，此时鼠标光标变为加号（+）。

7、将鼠标移到要创建表格的左上角位置并按住鼠标不放拖动到要创建表格的右下角后释放鼠标。

8、选中该表格，打开属性面板，将表格的宽度设为“783px”，高度设为“845px”。

9、在“插入”栏的“布局”选项卡中单击“绘制布局表格”按钮 。将鼠标光标

放置在刚才绘制的表格的左上角，拖动鼠标，绘制一个嵌套表格，规格为：宽度“783px”，高度“101px”。

10、选中该表格，切换到“标准”模式，将背景图像改为“log1-text.jpg”。 11、再切换到“布局”模式，在“插入”栏的“布局”选项卡中单击“绘制布局单元格”按钮

。选中该单元格，打开属性面板，将单元格的宽度设为“111px”，高度设为

“101px”，水平对齐方式设为“左对齐”，垂直对齐方式设为“顶端”。

12、将图像“niux-home.gif”插入到该单元格，打开属性面板将其宽设为“，高设为“，对齐设为“绝对居中”，在紧接着该图像的旁边写上文字“加入收藏”，同时将该文字设为：字体“宋体”，大小“12px”。

13、将“插入”栏中的“布局”选项卡改为“文本”选项卡，单击“换行符”按钮

，

光标自动定位到下一行。

14、将“插入”栏中的“文本”选项卡改为“布局”选项卡，进入“布局”模式，重复步骤11、12两次。

15、在“插入”栏的“布局”选项卡中单击“绘制布局单元格”按钮

。选中该单

元格，打开属性面板，将单元格的宽设为“783px”，高设为“29px”，水平对齐设为“居中对齐”，垂直设为“居中”，背景颜色设为“#FF。

16、将光标定位到该单元格，输入文字“首页”，然后将“插入”栏中的“布局”选项卡改为“文本”选项卡，单击“不换行空格”按钮

两次，出现了两个空格，紧接着输入

两次，紧接

“|”（该符号用键盘上的“shift+\\”输入），再单击“不换行空格”按钮

着输入“国内旅游”，后面文字按相同方法输入，选中导航栏的所有文字，将其设为：字体“宋体”，大小“14px”，颜色“#。

17、紧接导航栏的布局单元格，在它下方绘制一个宽为“181px”，高为“665px”，颜色为“#dde”的布局表格，用来放左边导航内容。

18、在该布局表格内绘制一个宽“181px”，高“73px”的布局单元格，然后将“ygdd.jpg”图像插入到该单元格，同时设该图像的宽为“181px”，高为“73px”。

19、紧接上面的布局单元格，在它下方绘制一个宽“181px”，高“60px”，水平对齐为“居中对齐”，垂直为“居中”的布局单元格，输入文字“人文地理”，同时将该文字设为：字体“楷体”，大小“18px”，颜色“#CC。

20、紧接上面的布局单元格，在它下方绘制一个宽“181px”，高“98px”，的布局表格。

21、在上面的布局表格内绘制一个宽“26px”，高“96px”，的布局单元格。

22、在上面的布局单元格右边绘制一个宽“153px”，高“24px”，垂直“居中”的布局单元格，输入文字“□自然环境”(“□”的输入：在“智能abc”输入法下按键盘符号v+数字1)，将其设为：字体“宋体”，大小“14px”。

23、在上面的布局单元格下面绘制一个宽“153px”，高“24px”，垂直“居中”的布局单元格，输入文字“□气候变化”，将其设为：字体“宋体”，大小“14px”。

24、重复步骤22两次，同时将输入的文字分别改为“□人口、语言”，“□宗教、信仰”。

25、紧接上面的布局表格，在它下方绘制一个宽“181px”，高“60px”，水平对齐为“居中对齐”，垂直为“居中”的布局单元格，输入文字“民族风情”，同时将该文字设为：字体“楷体”，大小“18px”，颜色“#CC。

26、重复步骤20、21、22、23，将输入的文字分别改为“□民间风俗”，“□服饰与音乐”，“□民族节日”，“□生活习惯”。

27、重复步骤25，将输入的文字改为“旅游指南”。

28、重复步骤19、20、21、22、23，将输入的文字分别改为“□自驾车旅游须知”，“□潜水的医学知识”，“□散客旅游指南”，“□自助游常识”。

29、左边的导航做好了，将光标定位到中间的网页内容区，绘制一个宽“418px”，高“665px”，颜色为“#FFFFFF”的布局表格。

30、在该布局表格内绘制一个宽“418px”，高“239px” 的布局表格。

31、在该布局表格内绘制一个宽“126px”，高“239px”，垂直为“居中”的布局单元格，然后将“love.jpg”图像插入到该单元格，同时设该图像的宽为“126px”。

32、在上面的布局单元格右边绘制一个宽“278px”，高“239px”的布局表格。 33、在上面的布局表格内绘制一个宽“278px”，高“42px”，水平对齐“居中对齐”，垂直“居中”的布局单元格，将“plane.jpg” 图像插入到该单元格。

34、返回到 “标准”模式，选择[插入]/[表格]菜单命令，插入一个5行4列，宽“278px”，高“194px”，边框“的表格，将第1列宽设为“54px”，第2列宽设为“110px”，第3列宽设为“52px”，第4列宽设为“50px”，每行高都设为“30px”，单击第一单元格，设置：水平“居中对齐”，垂直“居中”，输入文字“出发地”，将文字设为：字体“宋体”，大小“12px”，颜色“#。

35、按照同样的方法，完成该表格的制作，且将其余各行文字设为：字体“宋体”，大小“12px”，颜色“#0000CC”。。

36、紧接着第29步的布局表格的下方绘制一个宽“418px”，高“52px”，背景图像为“fj01.jpg”的布局表格，然后再在该布局表格内偏左的位置绘制宽“156px”，高“52px”，水平对齐“居中对齐”，垂直“居中”的布局单元格，输入文字“风景名胜快览”，将文字设为：字体“楷体”，大小“24px”，颜色“#FF。

注意：设置表格背景图像时一定要从“布局”模式下退出，进入“标准”模式进行设置。 37、紧接上面的布局表格，在它下方绘制一个布局表格，在该布局表格内绘制一个宽“418px”，高“10px”的布局单元格。

38、在上面布局单元格的下面绘制一个宽“15px”，高“95px”的布局单元格，再在紧靠该单元格的右边绘制一个宽“120px”，高“95px”的布局单元格，在该单元格中插入图像“fj01-zjj.jpg”，将该图像设为：宽“120px”，高“95px”。

39、重复步骤38两次，分别将图像改为“fj03-tyhj.jpg”，“fj02-pu.jpg”。 40、在3个图像所在的布局单元格的正下面绘制3个宽“120px”，高“27px”，水平对齐“居中对齐”，垂直“居中”的布局单元格，分别输入文字“张家界”、“天涯海角”、“昆明”，并将文字设为：字体“宋体”，大小“12px”，颜色“#。

41、重复步骤38、39、40，将图像分别改为“fj06-sldw.jpg”、“fj05-sx.jpg”、“fj04-xm.jpg”，文字改为“森林公园”、“三峡”、“四川”。

42、紧接上面的布局单元格，在它下方绘制一个水平“居中对齐”，垂直“居中”的布局单元格，插入图像“banner.gif” ，并将其宽设为“410px”。

43、中间的网页内容做好了，将光标定位到右边的网页内容区，绘制一个宽“184px”，高“665px”，颜色为“#99CC的布局表格。

44、在该布局表格内绘制一个宽“184px”，高“255px”，颜色为“#FFFFFF” 的布局表格。

45、在该布局表格内绘制一个宽“184px”，高“49px”，背景图像为“b1.jpg”的布局表格，再在该布局表格内绘制一个宽“86px”，高“49px”，垂直“居中”的布局单元格。输入文字“最新资讯”，并将文字设为：字体“楷体”，大小“18px”，颜色“#CC。

46、紧接上面的布局表格，在它下方绘制一个宽“6px”，高“41px”水平“居中对齐”，垂直“居中”的布局单元格，插入图像“gw01.gif”，在紧靠该单元格的右边绘制一个宽“172px”，高“41px”。垂直“居中”的布局单元格，输入文字“第四届天目湖南山竹海登山节盛大开幕”，并将文字设为：字体“宋体”，大小“12px”。

47、重复步骤46四次，分别将文字改为“市旅游局发布2008年旅游质监情况”、“交通渐趋便利 杭州-千岛湖-黄山游线蓄势待发”、“常州旅游券发放现场拥挤被指“暗箱操作””、“早春二月“踏青游” 南方三城市受网友热捧”。

48、紧接上面的布局单元格，在它下方绘制一个宽“184px”，高“20px”，水平“右对齐”，垂直“居中”的布局单元格，插入图像“more1.jpg”。

49、紧接上面的布局单元格，在它下方依次绘制五个宽“184px”，高“65px”，

水平“居中对齐”，垂直“居中”的布局单元格，第一个布局单元格内输入文字“友情链接”，字体“楷体”，大小“18px”，颜色“#CC0033”；第二个布局单元格内插入图像“yqlogo01.jpg”，并将图像设为：宽“153px”，高“48px”；第三个布局单元格内插入图像“yqlogo02.gif”；第四个布局单元格内插入图像“yqlogo03.gif”；第五布局单元格内插入图像“yqlogo04.gif”；并将图像设为：宽“153px”，高“48px”。

50、右边的网页内容做好了，将光标定位网页的版权信息区，绘制一个宽“783px”，高“34px”，颜色为“#cccc，水平“居中对齐”，垂直“居中”的布局单元格，输入文字“Copyright ?阳光旅游公司 。

51、将“插入”栏中的“布局”选项卡改为“文本”选项卡，单击“换行符”按钮

，

光标自动定位到下一行，输入文字“E—mail：*********制作者：**********”。 52、选中这两行文字，将其设为：字体“宋体”，大小“12px”。

53、选中最外面的表格，切换到“标准”模式，打开“属性面板”，将对齐改为“居中对齐”。

54、按【F12】键，预览。

思考题：很多同学在做完这个实验后，预览网页时，页脚区（版权信息）与上面的主体区不能很好的结合起来，中间会有空隙，怎么解决这个问题呢？

实验四 利用层进行网页布局

一、实验目的

1、掌握层的绘制、选择、移动和对齐； 2、掌握“层”属性面板的设置； 3、掌握利用层来设计网页的版面； 4、掌握层的显示和隐藏； 5、掌握层的堆叠和删除。

二、实验内容

利用层布局制作如图所示的网页。

图

三、 实验步骤

1、 绘制层

绘制层有如下3种方法：

(1)将插入点放置在“文档”编辑窗口中，然后选择[插入]\\[布局对象]\\[层]菜单命令将自动在插入点插入一个层。

(2)在“插入栏”的“布局”插入栏中单击“绘制层”(3)在“插入栏”的“布局”插入栏中单击“绘制层”鼠标可绘制一个层。

按钮，拖动鼠标绘制一个层。 按钮，在文档编辑窗口中单击

2、将光标定位到层layer1内，插入图像“banner.jpg”。

3、将光标放在层layer1内，然后按下绘制层按钮，当光标变成“十字形”时，按Alt键直接在层layer1内绘制一个嵌套层layer2，插入图像“logo.gif”。

4、紧接着层layer1，在其下方再绘制五个层，在“插入栏”的“布局”插入栏中单击“绘制层”按钮，按住【Ctrl】键拖动连续绘制五个层，使这五个层大致处于同一区域。

5、选择层单个层的方法有3种。 (1)在文档编辑区中单击层边框。

(2)在层中单击鼠标左键，再单击该层的选择柄。

(3)打开“层”面板，如图所示，在“层”面板中单击要选择的层的名称。

注意：此时如果没有出现“层”面板，则选择[窗口]\\[层]菜单，在右侧的浮动面板中就会出现“层”面板。

图

用上述方法中的任意一种方法，选择“layer，插入图像“shouye.jpg”，选择“layer，插入图像“xiangce.jpg”，选择“layer5”，插入图像“yinyue.jpg”，选择“layer6”，插入图像“riji.jpg”，选择“layer7”，插入图像“liuyan.jpg”。

6、选择多个层有2种方法。

(1)按住【Shift】键，在需要选择的多个层中单击，同时“层”面板中选择的层以反白显示。

(2)按住【Shift】键，在“层”面板中单击要选择的多个层的名称。

选择“layer3”，“layer5”和“layer7”，执行[修改]\\[排列顺序]\\[左对齐]，所有选定层的左边框会与最后一个选定层的左边框处于同一垂直位置。

1、 选择“layer和“layer，执行[修改]\\[排列顺序]\\[右对齐]，所有选定层的右边框会与最后一个选定层的右边框处于同一垂直位置。

2、 在层“layer3”的右边，绘制层“layer8”，插入图像“shukuang.jpg”。 3、 将光标放在层“layer8”内，然后同时按下Alt键和“绘制层”

按钮，绘制层

“layer9”，使得层“layer9”处于顶端的正中间位置，插入图像“biaoti.gif”。 4、 将光标放在层“layer8”内，同时按下Alt键和“绘制层”

按钮，在层“layer9”

的下方绘制层“layer，然后选择[插入]/[表格]菜单命令，插入一个12行1列，有边框的表格，插入后调整表格的大小，使得它跟层“layer10”的大小一致。

5、 在层“layer的左边，层“layer7”的下方，绘制层“layer11”，然后选择[插入]/[表格]菜单命令，插入一个6行1列，有边框的表格，插入后调整表格的大小，使得它跟层“layer11”的大小一致。

6、 在该表格的第一个单元格输入文字“友情链接”，并设置背景颜色为“#66CCFF”。 7、 层“layer11”的下方再绘制层“layer12”，层“layer12”的宽度与层“layer1”的宽度一致。

8、 在层“layer中输入文字“版权所有**********”。 9、 “层”面板最终效果如图所示。

图

16、按【F12】键，预览。

思考题：做完这个实验后，很多同学会发现，该网页的内容不能在窗口的中间显示，怎么解决这个问题？

实验五 交互式表单的应用

一、实验目的

1、掌握表单的创建和设置，以及表单的检查； 2、掌握各表单对象的插入和属性的设置； 3、掌握表单中数据的提交；

二、实验内容

1、在站点目录下新建一个名为form.htm文件，制作如图所示的用户注册表的效果图，其中“用户注册表”格式：字体“宋体”，大小“”，颜色：“红色”，“密码”要求控制在6个字符内，且输入的数字以●方式出现，“您的生日”所对应的“年”值为“1990，“月”所对应的值为“1，“日”所对应的值为：“1，且单击“提交”按钮时要对表单中的“用户名”和“密码”进行检查，使之不为空值，提交时将数据提交到你的邮箱；

2、在站点目录下新建一个名为navigation.htm文件，制作如图所示的跳转菜单效果，其中“站点导航”格式：字体“宋体”，大小“”，颜色：红色。

图 form.htm文件效果图

图 navigation.htm文件效果图

三、知识点分解

由图可知，表单内所有表单对象都左对齐，所以在该表单中插入了一个9行2列的表格，表格有背景图像bj1.gif，在表格中插入表单对象。由图2-11-2可知，该网页有背景图像，为bj2.gif，“站点导航”文字下插入了一条水平线。

四、 实验步骤

内容1步骤：

1、新建一个文档，将“插入”栏中的“常用”选项卡改为“表单”选项卡， 如图所示。

图 “表单”工具栏

2、将光标定位在文档页面中需要插入表单的位置，单击 “表单”按钮，此时光标

定位处出现一个红色的虚线框，它表示表单的范围，所有表单对象都在该区域内插入。 3、在表单中插入一个9行2列的表格的表格，设置表格的背景图像为”bg1.gif”，表格“居中”。

4、合并第1行的单元格，输入文字”用户注册表”，文字之间空一格，格式：字体“宋体”，大小“”，颜色：“红色”。

5、在第2行第1个单元格内输入“你的用户名：” 将光标定位到第2个单元格，单击 “文本字段”

按钮，在弹出的“辅助标签属性”对话框中单击“取消”按钮。

6、在第3行第1个单元格内输入“你的密码：” 将光标定位到第2个单元格，单击 “文本字段”

按钮，在弹出的“辅助标签属性”对话框中单击“取消”按钮，打开“属性”

面板，在“最多字数符”中输入“，将“类型”改为“密码域”。 7、在第4行第1个单元格内输入“你的性别：” 将光标定位到第2个单元格，单击 “单选按钮”按钮，在弹出的“辅助标签属性”对话框中“标签文字”中输入“男”，“位置”改为“在表单项前”，单击“确定”按钮，敲一个空格，再单击 “单选按钮”按钮，在弹出的“辅助标签属性”对话框中“标签文字”中输入“女”，位置”改为“在表单项前”，单击“确定”按钮，选择“男”前面的单选钮，打开“属性”面板，将“初始状态”改为“已勾选”。

8、在第5行第1个单元格内输入“你的生日：” 将光标定位到第2个单元格，单击 “列表/菜单”

按钮，在弹出的“辅助标签属性”对话框中“标签文字”中输入“年”，“位

按钮，在弹出的“辅

置”为“在表单项后”，单击“确定”按钮，再单击 “列表/菜单”

助标签属性”对话框中“标签文字”中输入“月”，“位置”为“在表单项后”，单击“确定”按钮，再单击 “列表/菜单”

按钮，在弹出的“辅助标签属性”对话框中“标签文

字”中输入“日”，“位置”为“在表单项后”，单击“确定”按钮；选择“年”前的列表，打开“属性”面板，将“类型”设为“菜单”，单击按钮，在弹出的“列表值”对话框中的“项目标签”中输入“ ， 单击

按钮，添加第二个项目标签，输入“，

重复上面的操作，输入后面的数字，结果如图所示，单击“确定”按钮，回到“属性”面板，将“初始化选定”设为“，同理对后面的列表进行相同的操作。

图 “列表值”对话框 图2-12-5 “跳转菜单”对话框

9、在第6行第1个单元格内输入“你的生日：” 将光标定位到第2个单元格，单击 “复选框”

按钮，在弹出的“辅助标签属性”对话框中“标签文字”中输入“唱歌”，同理

插入后面的复选框。

10、在第7行第1个单元格内输入“个人近照：” 将光标定位到第2个单元格，单击 “文件域”

按钮，在弹出的“辅助标签属性”对话框中单击“取消”按钮。

11、在第8行第1个单元格内输入“个人简介：” 将光标定位到第2个单元格单击 “文本字段”

按钮，在弹出的“辅助标签属性”对话框中单击“取消”按钮，在弹出的“辅

助标签属性”对话框中单击“取消”按钮，打开“属性”面板，将“类型”改为“多行”。 12、将光标定位到第9行第2个单元格，单击 “按钮”按钮，在弹出的“辅助标签属性”对话框中单击“取消”按钮，连续插入几个“不换行空格”，再单击 “按钮”按钮，在弹出的“辅助标签属性”对话框中单击“取消”按钮，打开“属性”面板，将“动作”改为“重设表单”。

13、选择“提交”按钮，打开行为“面板”，添加行为“检查表单”，打开“检查表单”对话框，将文本“text1在表单中，text2在表单中”都设为“必需的”，单击“确定”按钮。

14、选择整个表单，打开“属性”面板，在“动作”中输入“mailto：你的邮箱地址”。 15、按【Ctrl+S】保存该网页为form.htm，按【F12】键预览。

内容2步骤：

1、新建一个文档，打开“属性面板”，单击按钮，在弹出的页面属性对话框中将“背景图像”设为“bg2.gifg”，输入文字“站点导航”，格式：字体“宋体”，大小“”，颜色：红色。

2、插入一条水平线。

3、将“插入”栏中的“常用”选项卡改为“表单”选项卡，单击

按钮，弹出如图所

示的“插入跳转菜单”对话框，将“文本”改为“站点导航”，将“选定时，转到URL：”设为“form.htm”，单击

按钮，添加第二个菜单项，将“文本”改为“洪恩在线”，将

“选定时，转到URL”设为“http://www.hongen.com,”, 单击按钮，添加第三个菜单项，

将“文本”改为“新浪网”，将“选定时，转到URL：”设为“ http://www.sina.com.cn,” 单击

按钮，添加第四个菜单项，将“文本”改为“搜狐”，将“选定时，转到URL：”设

按钮，添加第四个菜单项，将“文本”改为“天极

为“ http://www.sohu.com”， 单击

网”，将“选定时，转到URL：”设为“ http://www.yesky.com”，单击“确定”按钮。

4、按【Ctrl+S】保存该网页为navigation.htm，按【F12】键预览。

思考题：“用户注册表”中单击“提交”按钮，会将用户的信息提交到哪里？一般注册时都要对注册的信息进行验证的，也就是验证注册的信息是否与要求的条件一致（如要求密码为6位），这个验证是通过什么实现的？

本文来源：https://www.bwwdw.com/article/gmda.html