DreamWeave练习

Dreamweaner 8 练习一、站点建立•在D盘根目录下，建立一个名为TEST的文件夹,在TEST下再建一个名为IMAGE的文件夹,准备放图象文件.步骤：•启动Dreamweaner 8站点菜单/新建站点，选高级，在分类处选本地信息，站点名称输入：test，在本地根目录文件夹处，旁边的文件夹处选文件夹为D:\test,在默认的图像文件夹旁边的文件夹处选文件夹为D:\test\image确定按下图选择，最后确定。

注意：本练习的所有.htm文件保存在站点d:\test下，图片文件会自动保存在d:\test\image下。

二、建立简单页面（1.html）1、建立一个3X3步骤：1、文件菜单→新建→基本页→HTML，单击“创建”按钮，出现空白网页。

2、插入面板为常用，单击按钮，出现对话框，作以下设置，并确定。

注：75%指表格的宽度，占浏览器的75%。

边框粗细为0，指表格在浏览时看不到边框。

3、在页面底部的属性面板选对齐，选“居中对齐”，使表格对齐。

4、输入文字信息，单击第2行第3列，插入菜单→选图像，选d:\考试用素材下的文件dora.gif。

5、在表格下输入：返回主页6、文件菜单→保存，输入文件名：1.html，文件保存在的d:\test，即站点下。

三、文字的编辑1、创建列表和嵌套按照4-1.HTM建立简单的页面(2.html)使用了水平条,项目列表(文本菜单/列表),我的兴趣爱好钓鱼o集邮o游泳o看电视文字编辑：在属性面板选择和编辑文字，对项目列表的嵌套可在选中文本后使用属性面板的文本凸出和文本缩进按钮,例：将标题“我的兴趣爱好”设置为兰色，隶书、加粗步骤：1、文件菜单→新建→基本页→HTML，单击“创建”按钮，出现空白网页。

2、在属性面板选字体，选编辑字体列表出现对话框，在可用字体处选隶书，单击“”，在上面的列表框中将出现所选择的字体。

如果还要选其它中文字体，需，单击“+”按钮，再次选择并添加。

注：中文字体的必须自己添加。

3、在属性面板：格式选“段落”，输入“我的兴趣爱好”，选中它，在属性面板字体选“隶书”，大小选“36”颜色选兰色。

单击（加粗）并设置居中对齐。

4、输入：钓鱼集邮游泳看电视5、在属性面板：格式选“标题一”选中：钓鱼集邮游泳看电视，属性面板选项目符号，大小选“36”，选中：集邮游泳看电视，属性面板单击（文本缩进）。

6、文件菜单→保存，输入文件名：2.html，文件保存在的d:\test，即站点下。

四、与邮件地址的链接(3.html)1、输入以下内容并插入图片，将E-mail地址e-mail:rudolf@与OUTLOOK建立链接个人简历：姓名：机器猫性别：男出生年月：1997年3月29日返回主页e-mail:rudolf@步骤：1、文件菜单→新建→基本页→HTML，单击“创建”按钮，出现空白网页。

2、插入菜单→选图像，选d:\考试用素材下的文件dora.gif。

3、输入文字信息4、选中“e-mail:rudolf@”文字，在属性面板链接处输入：5、选中“返回主页”，在属性面板链接处输入“”1.html,或用链接旁的文件夹去选择文件。

6、文件菜单→保存，输入文件名：3.html，文件保存在的d:\test，即站点下。

7、按F12键在IE里预览网页，单击邮件地址，启动outlook，可发送邮件，单击“返回主页”，可链接到1.htm。

五、文字的超级链接(4.htm与5.html)1、建立主页文件：4.htm的文字：插入图片“机器猫阿蒙”，输入文字“我的第1页”将文字与链接，1.htm建立链接，将1.htm的“返回主页”链接到4.htm。

2、建立5.html，页面内容为：（锚点链接）“网页制作思路”、“网上交易新观念”、“网上交友之我见”，单击其中的任何一项，在页面上显示相应的内容，左下方有一返回按钮，能返回主页4.htm。

步骤：1、文件菜单→新建→基本页→HTML，单击“创建”按钮，出现空白网页。

2、插入菜单→选图像，选d:\考试用素材下的文件doraemon.gif。

3、输入“我的第1页”。

4、选中“我的第1页”, 在属性面板链接处输入“”1.html,或用链接旁的文件夹去选择文件.5、文件菜单→保存，输入文件名：4.html，文件保存在的d:\test，即站点下。

6、在右侧的文件面板上双击1.html，打开它。

选中“返回主页”, 在属性面板链接处输入“”4.html,或用链接旁的文件夹去选择文件.7、文件菜单→保存，保存对1.html的修改。

8、按F12键在IE里预览网页，选中“返回主页”，可链接到4.html，在4.html中选中“我的第1页”，可链接到1.html.注：文件与文件的链接，或与电子邮件的链接，都称为外部链接。

9、文件菜单→新建→基本页→HTML，单击“创建”按钮，出现空白网页。

10、输入三行文字：网页制作思路网上交易新观念网上交友之我见7、文件菜单→保存，保存对5.html的修改。

11、输入十几行回车键，以出现十几行空行。

12、单击常用面板处的命名锚记，出现，在锚记名称处输入“A”，确定后出现，在它旁输入有关文字说明，这里用一行“AAAAAAA”表示。

按回车出现空行，输入“返回”，选中“返回”文字，链接到5.html。

13、选中第一行“网页制作思路”，用鼠标点击滚动条，直到看到那行A，用鼠标按住链接处的不放，拖曳到锚点标记上，完成首行与第1个锚的链接。

在属性面板的链接处出现。

注：锚点链接是文件内部之间的链接。

14、输入十几行回车键，以出现十几行空行。

15、单击常用面板处的命名锚记，出现，在锚记名称处输入“B”，确定后出现，在它旁输入有关文字说明，这里用一行“BBBBBB”表示。

按回车出现空行，输入“返回”，选中“返回”文字，链接到5.html。

16、选中第二行“网上交易新观念”，用鼠标点击滚动条，直到看到那行B，用鼠标按住链接处的不放，拖曳到锚点标记上，完成首行与第2个锚的链接。

在属性面板的链接处出现#B。

17、输入十几行回车键，以出现十几行空行。

18、单击常用面板处的命名锚记，出现，在锚记名称处输入“C”，确定后出现，在它旁输入有关文字说明，这里用一行“CCCCC”表示。

按回车出现空行，输入“返回”，选中“返回”文字，链接到5.html。

19、选中第三行“网上交友之我见”，用鼠标点击滚动条，直到看到那行C，用鼠标按住链接处的不放，拖曳到锚点标记上，完成首行与第3个锚的链接。

在属性面板的链接处出现#C。

20）文件菜单→保存，保存对5.html的修改。

21) 按F12键在IE里预览网页，单击第一行文字，应链接到第1个锚。

单击“返回”，回到第一行。

单击第二行文字，应链接到第2个锚。

单击“返回”，回到第一行。

单击第三行文字，应链接到第3个锚。

单击“返回”，回到第一行。

六、图象链接1、插入图片“机器猫阿蒙”在机器猫的眼睛上建立一个矩形连接：链接到2.htm在机器猫的嘴上建立多边形连接到3.html。

步骤：2、在4.html中选中图片，在属性面板中选中“”矩形热点，在图片的眼睛处画一个矩形，在属性面板的链接处选“2.html”。

3、在4.html中选中图片，在属性面板中选中“”多边形热点，在图片的嘴巴处画一个多边形形，在属性面板的链接处选“3.html”。

4）文件菜单→保存，保存对4.html的修改。

5）按F12键在IE里预览网页，选中机器猫的眼睛，应链接到2.html，选中机器猫的嘴巴，应链接到3.html。

七、图像翻转按钮和FLASH按钮(7.html)1、使原始图像为“风景1”，当鼠标移到风景1时，图像变为风景22、建立FLASH按钮，按钮名“返回”链接到2.html。

（插入菜单/媒体/ FLASH按钮，按钮文字为“返回”）步骤：1、文件菜单→新建→基本页→HTML，单击“创建”按钮，出现空白网页。

2、插入菜单→图像对象→鼠标经过图象，出现下列对话框：3、在原始图像的右侧的“浏览”处选选d:\考试用素材下的文件风景2 .jpg。

4、在经过图像的右侧的“浏览”处选选d:\考试用素材下的文件风景3 .jpg。

5、在替换处输入“这是图片！”。

6、在“按下时…”旁的浏览处选1.html。

单击“确认”。

文件菜单→保存，保存为7.html。

7、在图片下方定位，插入菜单→媒体→Falsh按钮，出现对话框。

8、在样式处选中一种样式，按钮文本为“返回主页”，在链接处“5.html”。

注：插入Falsh按钮后，会在站点下自动生成一个文件“button1.swf”，所以网页文件要先保存。

文件菜单→保存，保存对6.html的修改。

9、按F12键在IE里预览网页。

将鼠标移到图片上风景2变成风景3，鼠标停在图片上，出现文字提示“这是图片！”，单击图片，链接到1.html。

八、表格的应用（8.html）1、插入一个6 X 3行的表格，将表格的背景的改为蓝，（注意表格的背景色和单元格的背景色的不同），将表格的边框线设为02、观察在属性面板改变表格的宽度单位（%和像素），如果将表格的宽度单位改为像素，表格将不随IE窗口的的大小改变而改变，通过IE验证。

3、练习在属性面板的左下角单元格的合并和拆分按钮的作用。

，4、改变单元格的边距和间距5、在单元格中插入背景图片。

步骤：1、文件菜单→新建→基本页→HTML，单击“创建”按钮，出现空白网页。

2、插入面板为常用，单击按钮，出现对话框，作以下设置，并确定。

3、选中第1行的三个单元格，在属性面板选，合并这三个单元格。

注：在属性面板的可拆分单元格。

4、在属性面板修改单元格的边距和间距，观察表格的变化。

5、将鼠标定位在第一行，，。

6、选中第2行第2列，在属性面板选，出现下面的结果7、插入菜单→页面属性，再背景图片选背景8.jpg。

8、按F12键在IE里预览网页。

发现背景8.jpg无法显示。

在站点的image下找到背景8.jpg，右击改名为bj8.jpg。

插入菜单→页面属性，再在image下选bj8.jpg，重新插入。

9、按F12键在IE里预览网页。

背景图片可以显示。

10、文件菜单→保存，保存8.html。

九、层的使用（9.html）重点：掌握层的概念和制作方法、打开和关闭层的显示，防止层的重叠。

层面板的使用：窗口菜单/其他/层，属性面板Z轴：输入0表示该层处于最底层。

1、插入2个层，将企鹅和欢迎光临的图片分别放于2层之中，将，将企鹅的Z轴设为1，将欢迎光临的Z轴设为0，将2层重叠在一起，企鹅层永远在上面（Z轴的数字小的层在下面）2、在层面板中可对层改名，选中层面板的防止重叠，在页上无法将2层重叠在一起。

3、打开和关闭层面板的眼睛可打开或隐藏层。

步骤：1、文件菜单→新建→基本页→HTML，单击“创建”按钮，出现空白网页。