实验1：使用DreamWeaver制作网站.docVIP

实验一：使用Dreamweaver制作网站 一、实验目的 1、了解并熟悉DreamWeaver 8 的使用； 2、了解网页制作的过程； 3、学会使用DreamWeaver 8 制作网页。 二、实验环境 1、Windows XP/Windows Server 2003操作系统； 2、安装有DreamWeaver 8和Fireworks 8软件的计算机一台。 三、实验要求 1、根据所提供素材，利用DreamWeaver 8完成对霍格华兹魔法学校网站的制作； 2、通过站点的制作学会如何在DreamWeaver 8中使用表格排版布局； 3、通过站点的制作了解网站的制作过程。 四、实验原理 1、掌握在DreamWeaver 8中创建站点； 2、熟练应用在DreamWeaver 8的视图模式中创建表格、利用表格布局； 3、掌握在表格布局中的表格嵌套。 五、实验步骤 1、初步分析一下如何对老师布置的网页进行布局。 2、打开Macromedia DreamWeaver 8。 3、创建站点。点击“站点→新建站点”，在弹出的对话框中，点击“基本”按钮。 4、填入你的站点的名称。 5、点击对话框中的“下一步”按钮。 6、在新弹出的对话框中选择“否，我不使用服务器技术”。然后点击“下一步”。 7、在新弹出的对话框中填入你的站点的存放位置，然后点击“下一步”。 8、在新弹出的对话框中的“您如何连接到远程服务器”的下拉菜单中选择“无”，然后点击“下一步”。 9、点击“完成”按钮。 10、在新建的站点中创建一个文件，命名为“index.html“。 11、双击打开“index.html”，切换到视图模式。 12、在标题栏中填入网站的标题“霍格华兹魔法学校”。 13、单击插入栏中的表格按钮，插入一个10行1列、宽为“770px”的表格，如图 实验1-1所示。 14、把光标定位到表格的第一行中。 15、单击插入栏中的图像按钮，插入一个图片，Banner.jpg，如图 实验1-2。 16、把光标定位到第二行中。 17、在第二行插入一个1行7列的表格。 18、在这一行中，第一列20px，第二，三，四，五，六列77px，从第二列依次填入“首页 | 学院简介 | 组织机构 | 规章制度 | 学院风景 | 招生就业 ”，并将文字大小设置为“13px”，并分别为它们加上超链接。如图 实验1-3所示。 19、在第三行插入一条白色直线line.gif。 20、在第四行插入一个1行3列的表格，宽为“770px”高为“622px”。 21、在刚插入的表格的第一列插入一个2行1列的表格。在第1行插入一个1列8行的表格，并在将第2、4、5、6、7行拆分为三列，并在拆分的列中的第2列分别插入rediantuijian.gif及相应的文字，设置文字的对齐方式为：左对齐。如图 实验1-4所示。 22、按照步骤21的方法在2行1列的表格的第二行中插入一个6行1列的表格并在第2，4、5行插入相应的图片与文字。设置文字对齐方式为：右对齐 图片的对齐方式为居中对齐。如图 实验1-5所示。 23、在热点推荐的右边的一列中插入一条白色线条。设置其宽度为“1px”。 24、在白色线条的右边的一列中插入一个2行1列的表格，宽为“564px”。分别在两行中插入一个11行3列的表格。设置第一行为“31px”在第2行第一列插入tubiao.gir设置对齐方式为右对齐，设置第二列为“17px”，在第三行添加文字“学院新闻”，宋体，大小为14.5px。在其余各行分别添加相应的文字，新宋体，大小为13.5px。如图 实验1-6 所示。 25、在第五行插入一条白线line.gif。 26、第六行，同18步，从右到左做一遍。如图 实验1-7所示。 27、在第七行插入一条白线line.gif。 28、第八行，第十行的背景色为黑色。把第九行拆分为三列，宽分别为83px、72px、615px，行高为60px。在第二列插入图片bottom.gif。在第三列插入一个两行一列的表格。在表格中添加版权信息。如图 实验1-8所示。 35、与原网站对比并修改其中的部分内容。 36、依照原来的方法做出霍格华兹魔法学校网站的其他网页。 六、实验思考题 1、在网页制作的过程中，除了用表格排版布局之外，还有没有其他的排版布局方式？ 2、使用FireFox等浏览器，在不同的浏览器下观察我们的网页是不是显示的效果完全相同？如果不相同，分析原因。 七、常见故障分析 1、如果将文字的大小设置成Size= 20，将会出现什么问题？ 我们在用HTML来设置文字的属性的时候，由于HTML的限制，文字的大小最大被设置为6，如果超过6的话，将依照6的大小来显示。 2、为什么表格超出定义的长度或宽度？ 检查表格内单元格的总长度或总宽度是否超过了定义的表格长度或宽