[在网页中使用表格、文字和图片实训教案.doc

在网页中使用表格、文本和图片 本节课案例效果图： 一、新建站点 在Dreamweaver中新建站点，站点名自定，在站点文件夹中新建文件夹images，用来存放网页需要的图片素材，新建文件index.html作为网站的首页，并开始编辑网页。（该步骤不熟悉这参考第一周实训教案） 二、index.html网页的编辑 1、添加网页的背景图片 单击【属性检查器】中的【页面属性】 在打开的窗口中，通过【浏览】设置网页的背景图像为images文件夹中的background.gif图片。如下图所示： 2、使用表格对网页进行布局 1）插入4行1列的表格 （1）在菜单【插入】中选择【表格】按钮，如下图所示： （2）在下边的窗口上进行相应的设置，如下图： 注意：该表格是用来布局页面的，是控制页面中的内容在适当的位置显示的，不是我们用来填数据的表格，所以这里表格的边框粗细设置为0，这样的话表格看上去是隐藏的，不会影响页面的美观性。在这里我们为了编辑的方便可以先设置为1像素的边，最后完成网页后再修改为0。 运行浏览效果为： 我们会发现表格式默认居左的，接下来我们设置表格在整个网页中居中，将光标放在表格的边上单击一下选中整个表格，然后在【属性检查器】中将【对齐】方式设置为【居中对齐】方式。如下图所示： 接下来我们运行查看结果如下图： 2）增加单元格列的划分 （3）在第一行单元格中，再插入一个表格为1行2列，将光标定位在第一个单元格中，点击【插入】菜单，选择【表格】，并进行行列的设置，如下图： 运行效果如下图： （4）使用同样的方法，在第3行的单元格中插入一个表格为1行3列，设置如下图所示： 运行效果如下： 接下来我们为了编辑过程中视觉比较清晰，我们通过拖拽的方式来拉高行高，如果是嵌套了表格的单元格，可以直接拖拉内部表格来进行高度的调整，结果如下图： 3、第1行内容的插入 （1）在第1行内表格的单元格中分别输入Fashion时尚生活和服饰搭配和礼仪，结果如下图： （2）文字内容的美化 首先，选中Fashion，如下图： 然后，在属性检查器中选中CSS，如下图： 接下来我们单击颜色选择器右下角的黑色小三角，在展开的颜色面板上选择一种橙色，选择是只要单击一下即可，如下图： 在单击的同时弹出CSS设置窗口，如下图： 在【选择器类型】中选择“类（可应用于任何HTML元素）”，然后给出类名为.fashion，注意前边必须有点，名称开始的符号必须为字母。然后确定即可。 接下来，还是保持选中该部分文字，在【属性检查器】中修改文字的大小为36，字体为Tahoma，并且加粗，这时就不会弹出CSS的命名窗口，因为该修改仍然是在.fashion类上进行的，如下图： 在此，如果想给dreamweaver添加新的字体，可以单击【编辑字体列表】进行添加，如下图： 譬如，将黑体添加进来，就可以在右边的【可用字体】中选择黑色，然后单击中间的箭头，则字体就添加到【选择的字体】部分，然后确定即可。 用同样的方法，将时尚生活设置为红色、大小16号、默认字体、加粗。 （3）将“服饰搭配与礼仪”在单元格中居右 首先选中“服饰搭配与礼仪”，然后选择【属性检查器】的对齐方式为右对齐，如下图： 单击之后弹出如下窗口： 在【选择器类型】中选择“类（可应用于任何HTML元素）”，然后给出类名为.fsdp，注意前边必须有点，名称开始的符号必须为字母。然后单击确定即可。 运行结果如下： 4、第2行水平线的插入 将光标定位在外层表格的第2行，然后单击菜单【插入】，选择【HTML】-【水平线】，即可插入水平线。 运行效果如下： 接下来将水平线的颜色修改为红色，单击选中水平线，将会在【属性检查器】中显示水平线的属性： 我们前边在修改“时尚生活”的颜色为红色的时候，曾经创建过一个.ssh的CSS类，现在我们只需要将该CSS类应用到水平线上就可以了，我们在属性“类”中单击下拉列表选择ssh即可将水平线设置为红色。如下图所示： 运行结果如下： 5、第3行第1个单元格内容插入 将光标定位在该单元格内，拷贝文字素材.doc文件中的第一段，粘贴过来即可。单击右键-粘贴。 适当的调整该单元格中表格的列宽，运行结果如下： 接下来，在文字底部插入图片，注意这是需要另起一段或者换行，注意直接按Enter回车键是另起一段，按shift+Enter是另起一段，这两种方式都可以，只不过使用分段的方式图片和文字距离远一些，这里我们直接回车，然后在【插入】面板中选择【图像】进行插入。 在弹出的图片选择对话框中单击图片排列方式按钮，如下图所示，选择缩