利用表格制作网页

1、无数学系 09 级（3）班 杜强海 20091022129利用表格制作网页实验目标该网页将利用设计页面的布局，制楚雄师院的页面简介。通过该种制作，我们可以体会到表格在布局设计中的实际运用，体会如何使用表格来控制页面中的元素对象，已达到自然，生动的配置构成元素的目的。实验过程1在 dreamweaver 中执行 文件 中的 新建命令，创建一个 HTML 文档。然后在文件中保存该文档。然后在文档工具栏的标题中输入“师院首页” 。然后单击常用工具栏的表格按钮，插入一个 3 行 3 列的表格，图 1如图 1 所示。选中第 2 行表格的第 2 单元格。单击属性面板中的合并所选单元格按钮，将其合并。然后将

2、指针置于第 1 行第 1 列单元格内在属性面板中将宽设为 200，高设为 30，如右图 2 所示。3单击常用工具栏中的常用图像按钮，再打开的选择图像源文件对话框中选中一幅图片，单击确定按钮，为单元的插入一幅图片，如右图 3 所示4将鼠标指针移到第 1 行 1 列单元格内，在属性面板中将宽设为 50， 高设为 30，单击常用工具栏中的图像按钮，打开插入鼠标经过图像对话框，如图 4 所示。图 35在打开的对话框中，单击原始图像后面的浏览按钮.。在打开的对话框中选中一幅图片，单击确定按钮，在单击鼠标经过图像后面的浏览按钮，用同样的方法选定一幅图片，如图 5 所示6设置完成后，单击确定按钮，然后同同第

3、 4,5 步一样为第 1 行的第 1,2 列也分别设置鼠标经过图像。 然后将鼠标指针置于第一行第三列的单元格内，在属性面板中，为宽设为 100，高 。设为 50。为背景颜色设为#333cc，如图 6 所示7 将鼠标指针置于表格的第 3 行，按前面的方法，为第 3 行单元格也插入一幅图片。 然后将鼠标指针置图 4图 2无于表格的下一行，单击常用工具栏表格图标按钮，为文档在插入一个 3 行 3 列的表格，如图 7 所示。8将鼠标指针置于插入表格的第 1 行第 1 列中，在属性面板中将宽 。设为 120，然后将鼠标指针置于第 1 行第 1 列单元格内，按下 Ctrl+Alt+t 组合键，打开表格对话

4、框，其中的设置如图 8 所示。设置好后，单击确定按钮，给单元格插入嵌套表格。9选中插入的嵌套表格在属性面板中将对齐设置为剧中右对齐。然后将鼠标指针置于嵌套表格第一行中，按照前面的方法，为其插入一幅图片。同样的，为其第 2,3,4,5 列也分别插入图片。图 6图 8图 710在属性面板中，将第 6 列单元格的高设为 50，再将鼠标指针置于第 7 列，为其插入一幅图片。单击状态栏中的tatle标签，选中第 7 步插入的 3 行 3 列的表格，在属性面板中，为背景颜色设置为#009966，如图10 所示。图 10图 9图 5无图 11图 1211 将鼠标指针置于 7 步插入表格的第 2 行2 列中，

5、在属性面板中，将垂直设置为顶端。打开表格对话框，其中的设置如图 11 所示。设置完后，单击确定按钮，为单元格插入嵌套。12在上一步插入表格的属性面板中，将对齐方式设为居中对齐， 将鼠标置于该表格的第2 行，按下 ctrl+alt+I 组合键，在打开的对话框中选择一幅图，单击确定，为单元格插入图片。在该单元格的属性面板中，单击居中对齐按钮，将图片居中，如图 12 所示13 将光标置于下 1 列单元格， 输入文字。在网页中右击，在弹出的快捷键菜单中执行CSS 规则对话框。按照图 13 设置后，单击确定按钮，弹出X1 的规则定义对话框。14在X1 规则定义对话框中，将文字设为宋体， 大小设为 12

6、像素， ， 样式设为正常，设为 26 像素,其余不变.单击按钮，在编辑窗口选中输入的文字，右击，在弹出的快捷菜单中执行CSS 样式 的 x1 命令， 为文字应用 css 样式，如图 14 所示图 1415将鼠标指针置于第 7 步插入的 3 行 2 列表格的下一行，然后按下 ctrl+Alt+T 组合键图 13无打开表格对话框，其中的设置如图 15 所示设置完毕后，单击确定按钮，为网页插入表格16选中上一步插入的表格，在属性面板中，将背景颜色设为#99FF66。将鼠标指针设置于第 1 行单元格内，在属性面板中，将水平设为右对齐，然后为该单元格插入一幅图片，如图 16 所示17将鼠标指针置于定 2

7、 行单元格内，在属性面板中，将格式设为段落，水平设为右对齐，然后输入师院信息。在网页中右击，在弹出的快捷键菜单中执行css 样式的新建命令弹出新建 css 规则对话框。18 新建 css 规则对话框的设置如图18 所示，设置好后，单击确定按钮。弹出x2 的规则定义对话框，将大小设为 19 像素， 样式设为正常， 行高设为 20 像素， 颜色设为，其余不变。设置完毕后，单击确定按钮19在编辑窗口选中输入的文字，右击在弹出的快捷菜单中执行css 样式的x2命令， 为文字应用 css 样式。按下 ctrl+s 组合保存文件，按下 F12 键预览在 IE 中。图 16图 15图 17无创建一个本地站点

8、实验目标建立一个站点后， 要把所有的站点文件保存在建立的根目录中， 然后将所做的网页保存在所建的站点中。实验过程1在 dreamweaver 中执行站点中打开新建站点命令， ，将弹出未命名站点 1 的站点定义为对话框。然后在基本选项卡里输入站点名称。2然后单击下一步，弹出一个对话框如图 2 所示。然后他给出的你想使用那一种服务器技术。然后点击是这个按钮，然后点击你所选中的技术。如图 2 所示3然后单击下一行这个按钮， 找到在 本地进行编辑和测试这个按钮，点击它。然后找到将把文件存储在计算机上的什么位置？图 1这个按钮，然后点击浏览，找到我所新那个文件，如图 3 所示4然后在单击下一步按钮，将会出来如图 4 所示的对话框，然后