应用表格制造网页.docVIP

数学系09级（3）班 杜强海 20091022129 利用表格制作网页 实验目标 该网页将利用设计页面的布局，制楚雄师院的页面简介。通过该种制作，我们可以体会到表格在布局设计中的实际运用，体会如何使用表格来控制页面中的元素对象，已达到自然，生动的配置构成元素的目的。 实验过程 在dreamweaver中执行《文件》中的《新建》命令，创建一个HTML文档。然后在《文件》中保存该文档。 然后在《文档》工具栏的《标题》中输入 “师院首页”。然后单击《常用》工具栏 的表格按钮，插入一个3行3列的表格， 图1 如图1所示。 2选中第2行表格的第2单元格。单击属性面板中的合并所选单元格按钮，将其合并。然后将指针置于第1行第1列单元格内在属性面板中将《宽》设为200，高》设为30，如右图2所示。 图2《3》单击《常用》工具栏中的常用图像按钮，再打开的《选择图像源文件》对话框中选中一幅图片，单击《确定》按钮，为单元的插入一幅图片，如右图3所示 图2 《4》将鼠标指针移到第1行1列单元格内，在属性面板中将《宽》设为50，《高》设为30，单击《常用》工具栏中的图像按钮，打开《插入鼠标经过图像》对话框，如图4所示。 图3 《5》在打开的 插入鼠标经过图像对话框中，单击《原始图像》后面的《浏览》按钮.。在打开的对话框中选中一幅图片，单击确定按钮，在单击《鼠标经过图像》后面的《浏览》按钮，用同样的方法选定一幅图片，如图5所示 图4《6》设置完成后，单击《确定》按钮，然后同同第4,5步一样为第1行的第1,2列也分别设置鼠标经过图像。然后将鼠标指针置于第一行第三列的单元格内，在《属性》面板中，为《宽》设为100，《高》。设为50。为《背景颜色》设为#333cc，如图6所示 图4 《7》将鼠标指针置于表格的第3行，按前面的方法，为第3行单元格也插入一幅图片。然后将鼠标指针置于表格的下一行，单击《常用》工具栏表格图标按钮，为文档在插入一个3行3列的表格，如图7所示。 图5《8》将鼠标指针置于插入表格的第1行第1列中， 图5 在属性面板中将《宽》。设为120，然后将鼠标指针 置于第1行第1列单元格内，按下Ctrl+Alt+t组合键， 打开《表格》对话框，其中的设置如图8所示。设置 好后，单击《确定》按钮，给单元格插入嵌套表格。 《9》选中插入的嵌套表格在属性面板中将《对齐》 设置为剧中右对齐。然后将鼠标指针置于嵌套表格第一行中，按照前面的方法，为其插入一幅图片。同样的，为其第2,3,4,5列也分别插入图片。 图6 图6 图8 图7 《10》在属性面板中，将第6列单元格的《高》 设为50，再将鼠标指针置于第7列，为其插入一幅图片。单击《状态栏》中的《tatle》标签，选中第7步插入的3行3列的表格，在属性面板中，为《背景颜色》设置为#009966，如图10所示。 图10 图9 《11》将鼠标指针置于7步插入表格的第2行2列中， 在属性面板中，将《垂直》设置为顶端。打开《表格》 对话框，其中的设置如图11所示。设置完后，单击《确定》 按钮，为单元格插入嵌套。 图11《12》在上一步插入表格的属性面板中，将对齐方式设为居中对齐，将鼠标置于该表格的第2行，按下ctrl+alt+I组合键，在打开的对话框中选择一幅图，单击确定，为单元格插入图片。在该单元格的属性面板中，单击居中对齐按 图11 钮，将图片居中，如图12所示 《13》将光标置于下1列单元格，输入文字。在网页中右击，在弹出的快捷键菜单中执行 《CSS样式》的新建命令，弹出《新建 CSS规则》对话框。按照图13设置后，单击《确定》按钮，弹出《X1的规则定义》对话框。 上》 《14》在《X1规则定义》对话框中，将《文字》设为宋体，《大小》设为12像素，，《样式》设为正常，行高设为26像素,其余不变.单击确定按钮，在编辑窗口选中输入的文字，右击，在弹出的快捷菜单中执行《 CSS样式》的x1命令，为文字应用css样式， 图12如图14所示 图12 图13 图13 图14 《15》将鼠标指针置于第7步插入的3行2列 表格的下一行，然后按下ctrl+Alt+T组合键 打开《表格》对话框，其中的设置如图15所示 设置完毕后，单击《确定》按钮，为网页插入表格 《16》选中上一步插入的表格，在属性面板中，将 《背景颜色》设为#99FF66。将鼠标指针设置于第1行单元格内，在属性面板 中，将《水平》设为右对齐，然后为该 单元格插入一幅图片，如图16所示 《17》将鼠标指针置于定2行单元格内， 在属性面板中，将《格式》设为段落，《水平》设为右对齐，然后输入师院信息。在网页中右击，在弹出的快捷键菜单中执行《css样式》的《新建》命令 弹出《新建css规则》对话框。 《18