《互联网与网站建设》实验指导书聊城大学传媒技术学院2008年8月1实验指导书目录实验一简单网页制作............................................3实验二多媒体网页制作.........................................15实验三表格布局网页制作.......................................20实验四Fireworks切图网页制作.................................24实验五XHTML语言网页制作.....................................30实验六CSS选择符.............................................33实验七CSS盒模型.............................................37实验八CSS两列浮动布局.......................................41实验九CSS三列浮动布局.......................................49实验十CSS两列定位布局.......................................57实验十一CSS三列定位布局.....................................61实验十二Ajax框架在网页中的应用..............................67实验十三网页制作综合训练.....................................71传媒技术学院数字媒体艺术专业2实验指导书实验一简单网页制作一、实验目的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）在网页中插入图片、文字、水平线、表格等对象，并在属性面板上设置对象属性。传媒技术学院数字媒体艺术专业3实验指导书（6）保存网页，按F12，预览网页。3．制作“文学小屋－红舞鞋”网页。（1）使用“文件｜新建”命令新建网页。（2）使用“文件｜保存”命令保存网页，命名为dance.html。（3）在文档工具栏上设置网页标题“文学小屋－红舞鞋”。（4）插入table1，1行2列，宽度760像素。（5）选中table1，在属性面板上设置其居中对齐。（6）光标置于table1的左列单元格中，设置其宽度为200像素。（7）在table1的左、右单元格中分别插入图像。传媒技术学院数字媒体艺术专业4实验指导书（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，在属性面板上设置其居中对齐。传媒技术学院数字媒体艺术专业5实验指导书（18）光标置于table4的单元格中，设置该单元格的水平对齐方式为居中对齐，并在其中插入文字“返回”。（19）保存网页，按F12，预览网页。4．制作“文学小屋－爱的秘密”网页。（1）使用“文件｜新建”命令新建网页。（2）使用“文件｜保存”命令保存网页，命名为love.html。（3）在文档工具栏上设置网页标题“文学小屋－爱的秘密”。（4）使用“修改｜页面属性”命令设置网页背景图像为lovebg.jpg。（5）插入table...
