Dreamweaver网页设计期末综述报告.docx

期末实验报告豪门盛宴一、 实验目的利用本学期所学的Dreamweaver 8的相关技术和方法设计制作一个简单的网站，进一步 巩固所学的知识内容结合自己的兴趣，我选择以足球题材为自己网站的主题，主要介绍了 享誉欧洲的十家顶尖俱乐部的基本情况和历史荣耀及其部分现役球员在该网站设计与制作中，主要是利用表格来设计网页，其中导航条的设置是利用了 Flash 按钮，而部分标题和文字的安排则是用到了 “层”，在首页还以Flash视频的形式插入了 flv 视频文件通过本次期末网页设计的制作过程，相当与系统的复习了一遍本学期所学的有关 网页设计的部分相关知识，对网页设计的基本流程和页面设置，文档、页面安排等也有了更 深的了解，为今后更深入的学习、掌握该门课程打下了良好的基础二、 具体实验步骤：（一） 、在磁盘创建根目录：在电脑F盘文件"henry"下新建文件夹"haomenshengyan",并在该文件夹中新建文件 名为“images”的文件夹二） 、准备好文字和图片素材：将自己制作网页中可能用到的所有图片资料拷至"haomenshengyan "文件夹下的"images ” 文件夹中，将文字资料以txt文件的格式存放在"haomenshengyan"文件夹中，且把网页中要 插入的flv视频文件"football.flv"也放至该文件夹下。

三）、新建站点：（1） 运行Dreamweaver8,单击菜单栏中“站点”丨“新建站点”命令，打开“未命名站点1 的站点定义为”对话框2） 在“您打算为您的站点起什么名字？ ”对话框中输入站点的名称，键入“haomenshengyan”, 然后单击下一步3） 在弹出的对话框中选择“基本”选中“在本地进行编辑和测试（我的测试服务器是这台 计算机）（E）”，并在“您将把文件存储在计算机的什么位置？ ”文本框中输入“F:\henry\ haomenshengyan \”,单击"下一步"打开对话框4）在弹出的对话框中选择“基本”，在“您应该使用什么URL来浏览站点的根目录？（W）”,并在文本框中输入"http://localhost:haomenshengyan/",单击"测试URL",弹出URL测Ir^ haomenshengyanJ本地视图▼ 1脳C! | g鲁少ia | SE1 站点 _ haomenshengyan (F: \henry\haomenshengyan) E a images试成功对话框5）单击“下一步”按钮，打开 对话框，选择“否”单击“下一 步”单击“完成”即完成了站点 的建立。

新建的站点为： （四）、页面制作1、首页制作：在Dreamweaver8菜单栏中选择【文件】|【常规】[【基本页】I [HTML],单击创建，即 可创建一个空白页面执行【文件】丨【保存】命令或“Ctrl+s”的快捷命令，以“index.html”为文件名保 存首页点击空白页面下方的“页面属性”按钮，再点击页面属性后面的“浏览”按钮，在创建 的站点目录下的“images”文件夹中选择图片“back.jpg”，点击确定，即可设置首页的页面 背景图像执行菜单栏的【插入】丨【表格】命令或单击工具栏的国按钮，在页面中插入一个1行1 列的表格，设置表格的宽为1000像素，高为125像素，边框宽度为0将鼠标光标移至表格 内，执行【插入】丨【图像】命令，或单击工具栏的圆.按钮，在创建的站点目录下的“images" 文件夹中选择图片“bt.jpg”，点击确定，即可将图片插入该表格中执行【插入】丨【布局对象】丨【层】命令，在图片上插入一个层，在层中键入“豪门盛宴”, 设置字体为：大小40,白色，加粗执行菜单栏的【插入】丨【表格】命令或单击工具栏的国按钮，在页面中插入一个1行1 列的表格，设置表格的宽为1000像素，高为25像素，边框宽度为0o将鼠标光标移至表格内，执行菜单栏的【插入】丨【媒体】I【Flash按钮】，在弹出的对话 框中选择“Blue Warper”的样式，在按钮文本中输入“巴塞罗那”，选择字体为“GB_2312”， 大小为“18”。

另外，在另存为框中更改文件名为“basa.swf”在弹出的对话框中输入“巴塞 罗那”，点击确定即可将Flash按钮插入该表格中其它按钮的插入方法一样，只需更改按钮文本和另存文件框中的名字即可首页上插入 的导航按钮的预览效果为：誌刿：I M紐I壯忍灯 渤询肢躺楝I佈劄I骑秽施鹤鮭I關I衣騎在导航按钮表格的下方执行菜单栏的【插入】丨【表格】命令或单击工具栏的国按钮，在页面中插入一个1行3列的表格，设置表格的宽为1000像素，边框宽度为0o将新建的第1列单元格拆分为6行1列，执行【插入】I【图像】命令，或单击工具栏的團’ 按钮，在第1行单元格中插入站点文件夹下“images”文件夹中的图片“jinqiu.jpg”,在第2 行中插入图片“euro-1”，在第3行中插入图片“euro-2”，在第4行中插入图片“euro-3”，在 第5行中插入图片“euro-4”，在第6行中插入图片“euro・5”设置第1行图片的高为154, 宽为130,其余几行图片均设置为高170,宽130o执行【插入】丨【图像】命令，或单击工具栏的團.按钮，将新建表格的第2列拆分为 3行1列，又将第1行拆分为1行7列在第1列中插入图片“ro.jpg”，设置高为150,宽为 100；在第2列中插入图片“figo.jpg”，设置高为165,宽为100；在第3列中插入图片 “baoqiaol.jpg”，设置高为180,宽为100；在第4列中插入图片“football.jpg”,设置高为150, 宽为100；在第5列中插入图片“zidane.jpg”，设置高为180,宽为100；在第6列中插入图 片“kaen.jpg”，设置高为165,宽为100；在第7列中插入图片uhenry.jpg设置高为150, 宽为100。

在拆分的第2行单元格中执行【插入】I【媒体】I【Flash视频】命令，在弹出的对话框中找到所要插入的视频“football.jpg”，点击确定即可完成视频的插入将拆分的第3行单元格拆分为1行7列，同第1行中7列的图片格式设置一样一次将 "fanni.jpg"、"rd.jpg"、"db.jpg"、"football-l.jpg"、"owen.jpg"、"raul.jpg"和"shewa.jpg" 插入7个列中在该列的下方键入"xxxxxxx"将新建的第3列单元格同第1列一样的拆分为7行，在每行分别插入图片“fifajpg”、 “fifa-l.jpg”、“fifa-2.jpg”、“fifa-3.jpg”、“fifa-4.jpg” 和 “fifa-5.jpg”各图片的大小设置同第 1列的对应位置一样点击设计页面左下方的°°如＞,将整页文档的队旗方式设置为居中首页的制作完成，保存当前页面该页面的预览效果为：2、“巴塞罗那”页面制作：在Dreamweaver8菜单栏中选择【文件】 【常规】丨【基本页】丨【HTML】，单击创建， 即可创建一个空白页面执行【文件】丨【保存】命令或“Ctrl+s” 的快捷命令，以“basa.html”为文件名保 存当前页面。

点击空白页面下方的“页面属性”按钮， 再点击页面属性后面的“浏览”按钮，在创 建的站点目录下的“images”文件夹中选择 图片“backjpg”，点击确定，即可设置首页 的页面背景图像执行菜单栏的【插入】丨【表格】命令或单击工具栏的国按钮，在页面中插入一个1行1列的表格，设置表格的宽为1000像素，高为125像素，边框宽度为0将鼠标光标移至表格 内，执行【插入】丨【图像】命令，或单击工具栏的團"按钮，在创建的站点目录下的“images” 文件夹中选择图片“bt.jpg”，点击确定，即可将图片插入该表格中执行【插入】丨【布局对象】丨【层】命令，在图片上插入一个层，在层中键入“红蓝军团 巴塞罗那”，设置字体为：大小30,白色，加粗执行菜单栏的【插入】I【表格】命令或单击工具栏的国按钮，在页面中插入一个1行1 列的表格，设置表格的宽为1000像素，高为25像素，边框宽度为0同首页一样插入Flash 按钮导航条注意：在该页面中不需有“巴塞罗那”的导航按钮，在最前方插入一个名为 “首页”的新按钮）［戦摘】［肾用未兰］尤训莎在导航按钮的下方插入一个1彳亍2列的表格，设置表格的宽为1000像素，将表格拆分为 1行2列，在第1列的上方插入图片"spanish.jpg"和"barcelona.jpg",图片的高和宽均设置 为120,在该两张图片的下方键入“球队简介”和“俱乐部荣誉”的相关内容，标题字样设 置为大小24,加粗，蓝色，其它文字内容均设置为大小18,加粗，黑色，左对齐。

在第2列表格内键入“六冠伟业”，字体大小为24,加粗在下方插入图片“bs.jpg”，设置高为397, 宽为619图片下方键入“当家花旦”，字体大小为24,加粗再在下方插入一个4行3列的表格，第1彳亍第1列中插入图片"messi.jpg",第2行第1 列中插入文本“里奥•梅西(Messi)”，第1行第2列中插入图片“hawei.jpg”，第2行第2列 中插入文本“哈维(Xavi)”，第1行第3列中插入图片“xiaobai.jpg”，第2行第3列中插入文 本“伊涅斯塔(Iniesta)”，第3行第1列中插入图片“biliya.jpg",第4行第1列中插入文本“比 利亚(David Villa)”，第3行第2列中插入图片“pike.jpg”，第4行第2列中插入文本“皮克 (Gerard Pique)",第3彳亍第3列中插入图片"boyang.jpg",第4彳亍第2列中插入文本"博扬 (Bojan Krkic)”注：所有图片和文本都设置为居中的格式点击设计页面左下方的°°*>,将整页文档的队旗方式设置为居中页面“巴塞罗那”的制作完成, 保存当前页面该页面的预览效果为：3、“AC米兰”页面制作：在Dreamweaver8菜单栏中选择 【文件】丨【常规】丨【基本页】 [HTML],单击创建，即可创建一个 空白页面执行【文件】丨【保存】命令或 “ Ctrl+s ”的快捷命令，以 “milan.html”为文件名保存当前 页面。

点击空白页面下方的“页面属 性”按钮，再点击页面属性后面的 “浏览”按钮，在创建的站点目录 下的“images”文件夹中选择图片 "back.jpg",点击确定，即可设置 首页的页面背景图像球队勵介 K文FC lUrcelotM 1899 耶 b“29 日 所花域咐：(Barcelona)(H 乐AM9 •罗事尔• ft444 班任生14 场，98000 人主臥ALflfPWWHW：. 20次1929 年 1945华 1048 年 1949 耶 1952 耶 1953 耶 1959 耶 1960 那 1974 ST 198S 耶 1901 •!"，“ 1993 耶 1994 耶 1998 耶 1999 耶 2005 Sf 2006年 2009(P 2010 审 杯鼻址2b次1910年 1912年 1913年 1920年 1922年 I92b年 1926年 1928年 1942年 I9bl年 19&2年 1953年 1957 年 1959 年 1963年 1968 年 1971年 1978年 1981年 1983年 198«¥ 1990年 1997 年 1998 年2009 年9次1983* 1991* 1992 年 1994 耶 1996 年 2005年 2006年 2009。