实验1-6

实验一简单网页制作一、实验目的1．熟悉Dreamweaver软件的操作界面。2．掌握如何建立站点。3．掌握简单网页的制作方法。4．了解超链接的建立方法。二、实验内容1．创建“文学小屋”站点。2．制作“文学小屋－首页”网页。3．制作“文学小屋－雪绒花”网页。4．制作“文学小屋－红舞鞋”网页。5．制作“文学小屋－爱的秘密”网页。6．完成网页超链接。三、实验步骤1．创建“文学小屋”站点（1）在硬盘根目录下新建文件夹，命名为wenxue；（2）打开wenxue文件夹，在其中建立子文件夹，命名为images；（3）将所有图片素材复制到images文件夹中；（4）启动Dreamweaver，使用“站点｜管理站点｜新建站点”命令新建“文学小屋”站点，并指定wenxue文件夹为“文学小屋”站点的本地根文件夹。2．制作“文学小屋－首页”。（1）新建网页；（2）设置网页属性；（3）在网页中插入文字、图片、水平线、表格等对象，并在属性面板上设置对象属性，如图所示。（4）保存网页，按F12，预览网页。3．制作“文学小屋－雪绒花”网页，如图所示。4．制作“文学小屋－红舞鞋”网页，如图所示。5．制作“文学小屋－爱的秘密”网页，如图所示。1．建立超链接（1）在“文学小屋－首页”上建立到网站内其它网页的超链接；（2）在“文学小屋－首页”上建立到外部网址的外部链接；（3）在“文学小屋－首页”上建立电子邮件地址链接；（4）在网站内其它网页上建立“返回首页”超链接。四、实验报告总结总结你在网页设计中遇到的问题和解决方法，并思考如下问题：1．创建站点的重要性；2．实验中你用到了哪些HTML标签，以及属性，请给出标签及属性的作用；3．表格在网页布局中的作用。实验二在网页中插入基本元素一、实验目的1．掌握文本的插入方法及属性设置方法。2．掌握图像的插入方法及属性设置方法。3．掌握各种媒体的插入方法及相关参数的设置。二、实验内容1．制作“何所思”网页。2．制作“动画厨房”网页。3．制作“我爱北京”网络相册。4．创建“多媒体”站点，并制作以下网页：（1）插入flash动画的网页（2）插入RealPlayer播放器的网页（3）插入MediaPlayer播放器的网页（4）插入背景音乐的网页三、实验步骤1．制作“何所思”网页。（1）在硬盘根目录下新建文件夹，命名为thinking。（2）打开thinging文件夹，在其中建立子文件夹，命名为images。（3）将所有图片素材复制到images文件夹中。（4）启动Dreamweaver，使用“站点｜管理站点｜新建站点”命令新建“何所思”站点。（5）新建网页，保存为index.htm。（6）在网页中插入文字，设置标题文字，在文字中插入空格，分段，换行。（7）在网页中插入图片，设置图片的对齐方式为“右对齐”。（8）保存网页，预览。2.在站点里创建表单网页，并将表单用表格布局，效果可以自己设置。如定义如下的效果页面，也可以根据需要添加其他表单项。3．制作“我爱北京”网站相册。（1）将所有图片素材保存在photo文件夹中。（2）在硬盘根目录下新建文件夹，命名为beijing。（3）启动Dreamweaver，使用“站点｜管理站点｜新建站点”命令新建“北京”站点，并指定beijing文件夹为“北京”站点的本地根文件夹。（4）新建网页，使用“命令｜创建网站相册”命令创建相册，设置如图所示。（5）单击确定按钮，相册创建完成。（6）按F12，预览网页。（7）打开硬盘上的beijing文件夹，查看文件，其中imgaes文件夹保存的是原图片，thumbnails文件夹保存的是缩略图，pages文件夹保存的是相册分页，index.htm是网站相册首页。4．创建“多媒体”网页。使用embed标签，及其属性。（1）在网页中插入flash动画新建网页，保存网页为**.htm。在网页中插入flash动画**.swf，（2）在网页中插入背景音乐新建网页，在网页中插入，在弹出的选择文件对话框中选择**.MP3。插件的参数设置如图所示。代码：embedsrc=kiss.mp3width=32height=32hidden=trueloop=-1/embed5.制作“图片超级链接”网页插入图片，并对每个图片链接到不同的前面制作的不同网页或者网页。如效果四、实验报告总结总结实验中遇到的问题及解决办法；并查找资料总结回答如下问题：1．文本分行和分段落的区别。2．在网页中插入图片、背景音乐、水平线的方法。3．实现图文混排的方法。4.在网页中插入表单的方法，并阐述有哪些常用的表单。实验三表格的创建与编辑一、实验目的1．掌握表格的插入方法。2．掌握表格属性、单元格属性的设置方法。3．深入理解表格背景颜色、填充、间距、边框、单元格背景颜色等属性对网页外观的影响。4．掌握各种特殊表格的制作方法。二、实验内容1．插入、编辑表格。2．在网页中制作水平细线和垂直细线。3．在网页中制作细线表格。4．在网页中制作双线边框表格。5．在网页中制作圆角表格。三、实验步骤1．建立站点（1）在硬盘根目录下新建文件夹，命名为table。（2）在table文件夹中新建子文件夹，命名为images。将所有图片素材保存在images文件夹中。（3）启动Dreamweaver，使用“站点｜管理站点｜新建站点”命令新建“表格练习”站点，并指定table文件夹为“表格练习”站点的本地根文件夹。2．插入、编辑表格（1）新建网页，保存网页为001.htm。（2）插入一个3行3列的表格，表格宽度为300像素，边框粗细为1，单元格边距为0，单元格间距为0。（3）选中表格，设置表格的填充为5，间距6，边框为8。（4）选中表格，设置表格的背景图像为girl.gif。（5）选中表格，用鼠标拖动表格右下角的尺寸手柄，将表格加大，观察背景图像在表格中的“平铺”情况。（6）选中第一行所有单元格，将它们合并。（7）选中第二行第一个单元格，将它拆分成两列。（8）选中所有单元格，设置单元格的背景颜色为绿色。3．在网页中制作红色水平细线（1）新建网页，保存网页为002.htm。（2）插入一个1行1列的表格，表格宽度为500像素，边框粗细、单元格边距、单元格间距均为“0”。（3）选中表格，设置表格的背景颜色为红色。（4）设置表格的高度为“1”像素。（5）切换至“代码”视图，删除单元格中的“ ”代码。（6）保存网页，按F12预览。4．在网页中制作绿色垂直细线（1）新建网页，保存网页为003.htm。（2）插入一个1行1列的表格，表格宽度为1像素，边框粗细、单元格边距、单元格间距均为“0”。（3）选中表格，设置表格的背景颜色为绿色。（4）设置表格的高度为“400”像素。（5）切换至“代码”视图，删除单元格中的“ ”代码。（6）保存网页，按F12预览。5．在网页中制作黑色细线表格（1）新建网页，保存网页为004.htm。（2）插入一个3行3列的表格，表格宽度为300像素，边框粗细为0，单元格边距为5，单元格间距为1。（3）选中表格，设置表格的背景颜色为黑色。（4）选中所有单元格，设置单元格的背景颜色为白色。（6）保存网页，按F12预览。6．在网页中制作双细线表格（1）新建网页，保存网页为005.htm。（2）在网页中制作细线表格，表格宽度300像素，如图所示。（3）接下来绘制另一个表格，1行1列，宽度300像素，单元格边距为2、单元格间距为1。表格背景颜色为#003366，单元格背景颜色为白色。如图所示。（4）将前面制作的表格复制到该表格中。如图所示。（5）保存网页，按F12预览。7．在网页中制作圆角表格（1）新建网页，保存网页为006.htm。（2）在网页中插入一个1行3列的表格，表格宽度为300像素，边框粗细、单元格边距、单元格间距均为“0”。设置第一个单元格宽度9像素，高度9像素，在其中插入图片corner_tl.gif。设置第二个单元格高度为9像素，在其中插入图片topline.gif，设置图片宽度为282像素。设置第三个单元格宽度9像素，高度9像素，在其中插入图片corner_tr.gif。如图所示。（3）将光标停在第一个表格后，插入一个1行3列的表格，表格宽度为300像素，边框粗细、单元格边距、单元格间距均为“0”。设置表格高度为100像素。设置第一个单元格宽度1像素，背景颜色为#FF6600,切换至“代码”视图，删除其中的“ ”代码。设置第二个单元格宽度为298像素。设置第三个单元格宽度1像素，背景颜色为#FF6600,切换至“代码”视图，删除其中的“ ”代码。（4）将光标停在第二个表格后，插入一个1行3列的表格，表格宽度为300像素，边框粗细、单元格边距、单元格间距均为“0”。设置第一个单元格宽度9像素，高度9像素，在其中插入图片corner_bl.gif。设置第二个单元格高度为9像素，在其中插入图片bottomline.gif，设置图片宽度为282像素。设置第三个单元格宽度9像素，高度9像素，在其中插入图片corner_br.gif。（5）保存网页，按F12预览。四、实验报告总结按实验步骤完成实验内容，总结实验中出现的问题，并查找资料总结回答如下问题：1．图像插入到单元格中与图像作单元格背景有什么区别？2．水平细线的制作方法。3．细线表格的制作方法。实验四表格布局一、实验目的1．掌握利用表格进行网页布局的方法。2．深入理解表格背景颜色、填充、间距、边框、单元格背景颜色等属性对网页外观的影响。二、实验内容1．制作“心灵之间－信”网页。2．制作“我的设计”网站中的“三维作品”栏目。三、实验步骤1．制作“心灵之间－信”网页。（1）在D盘上新建文件夹，命名为“xinling”。将images文件夹拷贝到该文件夹下。启动Dreamweaver，定义该文件夹为站点。（2）设置页面属性网页标题：心灵之间（3）制作网页网页布局：宽度700像素，在浏览器窗口中“居中”图片一：images\img_2.gif宽度229像素高度281像素图片二：images\top_text.gif图片三：images\xin_xiao.gif图片四：images\img_bottom.gif宽度224像素高度62像素网页导航：表格宽度125像素单元格宽度25像素文字上制作空链接（4）设置网页CSS样式字号9pt行高150%A:linkCOLOR:#5c6c81TEXT-DECORATION:noneA:hoverCOLOR:#000000TEXT-DECORATION:underlineA:activeCOLOR:#000000TEXT-DECORATION:underlineA:visitedCOLOR:#5c6c81TEXT-DECORATION:none（5）保存网页，按F12预览，如图所示。2．制作“三维作品”页面（1）新建网页，保存为3d_001.htm。（2）设置页面属性，如图所示。（3）插入黑色细线表格。表格大小设置如图所示。在属性面板上设置表格背景色为黑色，单元格背景色为#CCCCB8，如图所示。（4）将光标置于细线表格中，继续插入表格。表格1行3列，宽度900像素，边框、边距、间距均为0，高度120像素，背景颜色#9E9E7E。各列宽度为30像素，350像素，520像素。插入图像后，如图所示。（5）将光标置于上一表格后，继续插入表格。表格1行1列，宽度900像素，边框、边距、间距均为0，高度20像素，背景图像为index_004.gif。（6）将光标置于于上一表格后，继续插入表格。表格1行3列，宽度900像素，边框、边距、间距均为0。各列宽度为200像素，50像素，650像素。在左列单元格中插入表格及网页内容，如图所示。（7）在右列单元格中插入表格及导航图片，如图所示。（8）继续插入表格。表格2行1列，宽度600像素，边框、边距、间距均为0。第一行单元格高度为10像素。在第二行单元格中插入表格，表格1行3列，宽度600像素，边框、边距为0，间距为10，背景颜色为#B7B7A5。