互联网与网站建设.doc

《互联网与网站建设.doc》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、《互联网与网站建设》实验指导书聊城大学传媒技术学院2008年8月1实验指导书78传媒技术学院数字媒体艺术专业实验指导书目录实验一简单网页制作3实验二多媒体网页制作15实验三表格布局网页制作20实验四Fireworks切图网页制作24实验五XHTML语言网页制作30实验六CSS选择符33实验七CSS盒模型37实验八CSS两列浮动布局41实验九CSS三列浮动布局49实验十CSS两列定位布局57实验十一CSS三列定位布局61实验十二Ajax框架在网页中的应用67实验十三网页制作综合训练7178传媒技术学院数字媒体艺术专业实验指导书实验一简单网页制作一、实验目的1．熟悉Dreamweaver软件

2、的操作界面。2．掌握建立本地站点的方法。3．掌握简单网页制作方法。4．掌握超链接的建立方法。5．初步了解表格布局方法。6．初步了解为网页添加CSS样式表的方法。二、实验内容1．创建“文学小屋”站点。2．制作“文学小屋－首页”网页。3．制作“文学小屋－红舞鞋”网页。4．制作“文学小屋－爱的秘密”网页。5．完成网页超链接。6．为网页添加CSS样式表。三、操作步骤1．创建“文学小屋”站点（1）在硬盘根目录下新建文件夹，命名为mysite；（2）打开mysite文件夹，在其中建立子文件夹，命名为images；（3）将所有图片素材复制到images文件夹中；（4）启动Dreamweaver，使用“

3、站点｜新建站点”命令新建“文学小屋”站点，并指定mysite文件夹为“文学小屋”站点的本地根文件夹。2．制作“文学小屋－首页”。（1）使用“文件｜新建”命令新建网页。（2）使用“文件｜保存”命令保存网页，命名为index.html。（3）在文档工具栏上设置网页标题“文学小屋－首页”。78传媒技术学院数字媒体艺术专业实验指导书（4）使用“修改｜页面属性”命令设置网页背景颜色为淡黄色。（5）在网页中插入图片、文字、水平线、表格等对象，并在属性面板上设置对象属性。（6）保存网页，按F12，预览网页。3．制作“文学小屋－红舞鞋”网页。（1）使用“文件｜新建”命令新建网页。（2）使用“文件｜保存”

4、命令保存网页，命名为dance.html。（3）在文档工具栏上设置网页标题“文学小屋－红舞鞋”。（4）插入table1，1行2列，宽度760像素。（5）选中table1，在属性面板上设置其居中对齐。78传媒技术学院数字媒体艺术专业实验指导书（6）光标置于table1的左列单元格中，设置其宽度为200像素。（7）在table1的左、右单元格中分别插入图像。（8）光标置于table1之后，插入table2，1行3列，宽度760像素。（9）选中table2，在属性面板上设置其居中对齐。（10）设置table2左、中、右单元格的宽度分别为150像素，460像素，150像素。（11）在table2

5、的中列单元格中输入文字，并设置文字属性。（12）光标置于table2之后，插入table3，1行1列，宽度760像素。（13）选中table3，在属性面板上设置其居中对齐。（14）光标置于table3的单元格中，设置该单元格的水平对齐方式为右对齐。然后在其中插入图像。78传媒技术学院数字媒体艺术专业实验指导书（16）光标置于table3之后，插入table4，1行1列，宽度760像素。（17）选中table4，在属性面板上设置其居中对齐。（18）光标置于table4的单元格中，设置该单元格的水平对齐方式为居中对齐，并在其中插入文字“返回”。（19）保存网页，按F12，预览网页。4．制作“

6、文学小屋－爱的秘密”网页。（1）使用“文件｜新建”命令新建网页。（2）使用“文件｜保存”命令保存网页，命名为love.html。（3）在文档工具栏上设置网页标题“文学小屋－爱的秘密”。（4）使用“修改｜页面属性”命令设置网页背景图像为lovebg.jpg。（5）插入table1，1行2列，宽度760像素。78传媒技术学院数字媒体艺术专业实验指导书（6）设置table1左列单元格的宽度为110像素。（7）光标置于table1的右列单元格中，设置该单元格的垂直对齐方式为“顶端”。（8）在table1中嵌套表格table2，1行1列，宽度100%，高度80像素。在其中输入文字,并设置文字属性。

7、（9）将光标置于table2之后，插入嵌套表格table3，1行2列，宽度100%。，设置table3的两个单元格的垂直对齐方式为“顶端”。然后在其中插入图像和文字。（10）将光标置于table3之后，插入嵌套表格table4，1行2列，宽度100%。设置table4的两个单元格的垂直对齐方式为“顶端”，右列单元格的水平对齐方式为“右对齐”，然后插入图像和文字。　78传媒技术学院数字媒体艺术专业实验指导书（11）将光标置于table