（物联网）互联网与网站建设.pdfVIP

（物联网）互联网与网站建 设 《互联网与网站建设》 实 验 指 导 书 聊城大学传媒技术学院 2008 8 月 目录 实验一简单网页制作3 实验二多媒体网页制作 15 实验三表格布局网页制作20 实验四Fireworks 切图网页制作 24 实验五XHTML 语言网页制作 30 实验六CSS 选择符 33 实验七CSS 盒模型 37 实验八CSS 两列浮动布局41 实验九CSS 三列浮动布局 49 实验十CSS 两列定位布局57 实验十一CSS 三列定位布局 61 实验十二Ajax 框架在网页中的应用 67 实验十三网页制作综合训练71 实验一简单网页制作 一、实验目的 1 ．熟悉Dreamweaver 软件的操作界面。 2 ．掌握建立本地站点的方法。 3 ．掌握简单网页制作方法。 4 ．掌握超链接的建立方法。 5 ．初步了解表格布局方法。 6 ．初步了解为网页添加CSS 样式表的方法。 二、实验内容 1 ．创建“文学小屋”站点。 2 ．制作“文学小屋－首页”网页。 3 ．制作“文学小屋－红舞鞋”网页。 4 ．制作“文学小屋－爱的秘密”网页。 5 ．完成网页超链接。 6 ．为网页添加CSS 样式表。 三、操作步骤 1 ．创建“文学小屋”站点 （1）在硬盘根目录下新建文件夹，命名为mysite ； （2）打开mysite 文件夹，在其中建立子文件夹，命名为 images ； （3）将所有图片素材复制到images 文件夹中； （4）启动Dreamweaver ，使用“站点｜新建站点”命令新建“文学小屋” 站点，并指定 mysite 文件夹为“文学小屋”站点的本地根文件夹。 2 ．制作“文学小屋－首页”。 （1）使用“文件｜新建”命令新建网页。 （2）使用“文件｜保存”命令保存网页，命名为index.html 。 （3）在文档工具栏上设置网页标题“文学小屋－首页”。 （4）使用“修改｜页面属性”命令设置网页背景颜色为淡黄色。 （5）在网页中插入图片、文字、水平线、表格等对象，并在属性面板上设 置对象属性。 （6）保存网页，按F12 ，预览网页。 3 ．制作“文学小屋－红舞鞋”网页。 （1）使用“文件｜新建”命令新建网页。 （2）使用“文件｜保存”命令保存网页，命名为dance.html 。 （3）在文档工具栏上设置网页标题“文学小屋－红舞鞋”。 （4）插入table1 ，1 行 2 列，宽度 760 像素。 （5）选中table1 ，在属性面板上设置其居中对齐。 （6）光标置于table1 的左列单元格中，设置其宽度为 200 像素。 （7）在table1 的左、右单元格中分别插入图像。 （8）光标置于table1 之后，插入 table2 ，1 行 3 列，宽度 760 像素。 （9）选中table2 ，在属性面板上设置其居中对齐。 （10）设置table2 左、中、右单元格的宽度分别为 150 像素，460 像素，150 像素。 （11）在table2 的中列单元格中输入文字，并设置文字属性。 （12）光标置于table2 之后，插入 table3 ，1 行 1 列，宽度 760 像素。 （13）选中table3 ，在属性面板上设置其居中对齐。 （14）光标置于table3 的单元格中，设置该单元格的水平对齐方式为右对 齐。然后在其中插入图像。 （16）光标置于table3 之后，插入 table4 ，1 行 1 列，宽度 760 像素。 （17）选中table4 ，在属性面板上设置其居中对齐。 （18）光标置于table4 的单元格中，设置该单元格的水平对齐方式为居中 对齐，并在其中插入文字“返回”。 （19）保存网页，按F12 ，预览网页。 4 ．制作“文学小屋－爱的秘密”网页。 （1）使用“文件｜新建”命令新