《在网页中使用表格、文字和图片实训教案》由会员分享，可在线阅读，更多相关《在网页中使用表格、文字和图片实训教案（30页珍藏版）》请在金锄头文库上搜索。
1、在网页中使用表格、文本和图片本节课案例效果图：一、新建站点在 Dreamweaver 中新建站点，站点名自定，在站点文件夹中新建文件夹 images，用来存放网页需要的图片素材，新建文件 index.html 作为网站的首页，并开始编辑网页。 （该步骤不熟悉这参考第一周实训教案）二、index.html 网页的编辑1、添加网页的背景图片单击【属性检查器】中的【页面属性】 在打开的窗口中，通过【浏览】设置网页的背景图像为 images 文件夹中的background.gif 图片。如下图所示：2、使用表格对网页进行布局1）插入 4 行 1 列的表格（1）在菜单【插入】中选择【表格】按钮，如下图所
2、示：（2）在下边的窗口上进行相应的设置，如下图：注意：该表格是用来布局页面的，是控制页面中的内容在适当的位置显示的，不是我们用来填数据的表格，所以这里表格的边框粗细设置为 0，这样的话表格看上去是隐藏的，不会影响页面的美观性。在这里我们为了编辑的方便可以先设置为 1 像素的边，最后完成网页后再修改为 0。运行浏览效果为：我们会发现表格式默认居左的，接下来我们设置表格在整个网页中居中，将光标放在表格的边上单击一下选中整个表格，然后在【属性检查器】中将【对齐】方式设置为【居中对齐】方式。如下图所示：接下来我们运行查看结果如下图：2）增加单元格列的划分（3）在第一行单元格中，再插入一个表格为 1 行
3、 2 列，将光标定位在第一个单元格中，点击【插入】菜单，选择【表格】 ，并进行行列的设置，如下图：运行效果如下图：（4）使用同样的方法，在第 3 行的单元格中插入一个表格为 1 行 3 列，设置如下图所示：运行效果如下：接下来我们为了编辑过程中视觉比较清晰，我们通过拖拽的方式来拉高行高，如果是嵌套了表格的单元格，可以直接拖拉内部表格来进行高度的调整，结果如下图：3、第 1 行内容的插入（1）在第 1 行内表格的单元格中分别输入 Fashion 时尚生活和服饰搭配和礼仪，结果如下图：（2）文字内容的美化首先，选中 Fashion，如下图：然后，在属性检查器中选中 CSS，如下图：接下来我们单击颜
4、色选择器右下角的黑色小三角，在展开的颜色面板上选择一种橙色，选择是只要单击一下即可，如下图：在单击的同时弹出 CSS 设置窗口，如下图：在【选择器类型】中选择“类（可应用于任何 HTML 元素） ”，然后给出类名为.fashion，注意前边必须有点，名称开始的符号必须为字母。然后确定即可。接下来，还是保持选中该部分文字，在【属性检查器】中修改文字的大小为 36，字体为 Tahoma，并且加粗，这时就不会弹出 CSS 的命名窗口，因为该修改仍然是在.fashion 类上进行的，如下图：在此，如果想给 dreamweaver 添加新的字体，可以单击【编辑字体列表】进行添加，如下图：譬如，将黑体添加
5、进来，就可以在右边的【可用字体】中选择黑色，然后单击中间的箭头，则字体就添加到【选择的字体】部分，然后确定即可。用同样的方法，将时尚生活设置为红色、大小 16 号、默认字体、加粗。（3）将“服饰搭配与礼仪”在单元格中居右首先选中“服饰搭配与礼仪” ，然后选择【属性检查器】的对齐方式为右对齐，如下图：单击之后弹出如下窗口：在【选择器类型】中选择“类（可应用于任何 HTML 元素） ”，然后给出类名为.fsdp，注意前边必须有点，名称开始的符号必须为字母。然后单击确定即可。运行结果如下：4、第 2 行水平线的插入将光标定位在外层表格的第 2 行，然后单击菜单【插入】 ，选择【HTML】-【水平线
6、】 ，即可插入水平线。运行效果如下：接下来将水平线的颜色修改为红色，单击选中水平线，将会在【属性检查器】中显示水平线的属性：我们前边在修改“时尚生活”的颜色为红色的时候，曾经创建过一个.ssh的 CSS 类，现在我们只需要将该 CSS 类应用到水平线上就可以了，我们在属性“类”中单击下拉列表选择 ssh 即可将水平线设置为红色。如下图所示：运行结果如下：5、第 3 行第 1 个单元格内容插入将光标定位在该单元格内，拷贝文字素材.doc 文件中的第一段，粘贴过来即可。单击右键- 粘贴。适当的调整该单元格中表格的列宽，运行结果如下：接下来，在文字底部插入图片，注意这是需要另起一段或者换行，注意直接
7、按 Enter 回车键是另起一段，按 shift+Enter 是另起一段，这两种方式都可以，只不过使用分段的方式图片和文字距离远一些，这里我们直接回车，然后在【插入】面板中选择【图像】进行插入。在弹出的图片选择对话框中单击图片排列方式按钮，如下图所示，选择缩略图，就可以很直观的看到你要选择的图片了。单击选择图片后确认即可。通过拖拉方式修改图片的大小和单元格的宽度进行适当调整后，运行效果如下：接下来我们通过创建 CSS 的方式来美化该单元格中的文字，在 CSS 面板中，单击新建 CSS 规则按钮，打开新建 CSS 窗口，如下图：在弹出的窗口中，输入 CSS 的类名，然后单击【确定】 ，如下图：确
8、定后，在弹出的窗口中， 【分类】中选择【类型】 ，字体设置为“Tahoma”，字号设置为 “14”。如下图：然后在【分类】中选择【区块】 ，将首行缩进 test-indent 设置为 25pixels 像素，如下图：最后按【确定】 ，我们可以在 CSS 面板中看到刚刚创建的 CSS.zgwz。如下图：但是这个时候，该 CSS 并没有起作用，我们必须把它应用到文字段落上才可以，现在我们选中整个文字，然后切换到代码视图，我们会看到如下图片：我们看以看出来整段文字被嵌套在标签 中，那么该标签就是表示一个段落的标签，我们只要将刚刚创建的 CSS 应用到该标签就可以对文字起作用，接下来我们将光标定位到中
9、的 p 后边，然后敲空格键，在弹出的下拉菜单中双击选择“class ”即可，如下图：双击选择 class 后，又弹出一个下拉列表，让你选择你使用哪个类来美化该段落，我们当然要选择我们刚刚创建的.zgwz 这个类，只要双击该处即可。如下图：这时，我们去运行网页，则效果如下：其实，我们发现好像缩进的不够两个字符，那么我们可以继续在 CSS 面板中，双击.zgwz 这个类，打开 CSS 设置窗口，在【 区块】中去调整 text-indent的的像素的多少，直到合适为止。6、第 3 行第 2 个单元格中插入鼠标经过时图像该效果是当我们的鼠标指针放到这个图片上的时候，这个图片就会变成另一幅图片，从而实现
10、一种美轮美奂的效果。首先把光标定位在第 3 行的第 2 个单元格中，然后单击【插入】面板的【图像】处的黑三角，选择弹出的列表中的【鼠标经过图像】 ，如下图：在弹出的窗口中，选择【原始图像】为 shishang_r3_c4.jpg， 【鼠标经过图像】为 shishang_r3_cquse.jpg，然后确定即可，如下图：调整单元格和图片大小到适合程度后，运行网页后，将鼠标放在图片上，可以观察到图片的切换效果。7、第 3 行第 3 个单元格中插入列表文字和图片单击【插入】面板【常用】旁边的黑色箭头，展开列表后，选择【文本】 ，如图所示： 在【文本】面板中，选择编号列表，则插入点处就自动插入 1.，如
11、下图：在插入点出插入文字素材中的“文明大方”后回车，则编号 2 会自动出现，依次按照文字素材将三个标题拷贝上去，如下图：接下来我们，将光标定位在“文明大方”后边，敲击回车，如下图：将光标定位在 2.后边，选择【属性检查器】中的【HTML】 ，如下图：单击上图红框处的向右缩进按钮，则 2.变成 1.的下一级列表，如下图：然后我们再单击【属性检查器】中的项目符号按钮，则数字列表又可以转换成项目列表，如下图：然后我们将文字素材中的文明大方的内容拷贝到该项目符号处，如下图：用同样的方法，添加搭配得体和个性特征的内容，结果如下：接下来，我们来进行列表项的美化，用图片来修饰，首先单击 CSS 面板的新建
12、CSS 规则的按钮，新建 CSS 规则.liebiao，如下图：确定后，在弹出的窗口中【分类】中选列表，然后再 list-style-image 中选择图片 point01.gif 为列表用图片，单击【确定】 。然后切换到代码视图，如下：在标签 ol 的后边敲空格，选择 class，然后选择我们刚才创建的.liebiaoCSS 类，这样我们就把.liebiao 样式应用到了列表中，结果如下：在文字的下方插入两幅图片，并适当调整大小，如下图：8、在最后一行输入内容“Copyright 2008 by Choice.Lee All Rights Reserved ”我们会发现 在键盘上是无法直接输入的，需要打开【插入】面板的【文本】 ，选择特殊的版权字符即可插入。如下图：然后我们选中文字内容，并且在【属性检查器】的 CSS 中选择 【居中】按钮，如下图：在弹出的窗口中，输入类名.footer 后确定，如下图：预览效果如下：9.去掉布局表格的边框单击布局用的表格，在【属性检查器】中将【边框】设置为 0，敲回车或 tab 键确认即可。如下图：注意布局时用了三个表格，全部修改过来，网页会更美观。最终效果如下：
