《利用表格制作网页.doc》由会员分享,可在线阅读,更多相关《利用表格制作网页.doc(7页珍藏版)》请在金锄头文库上搜索。
1、数学系09级(3)班 杜强海 利用表格制作网页实验目标该网页将利用设计页面的布局,制楚雄师院的页面简介。通过该种制作,我们可以体会到表格在布局设计中的实际运用,体会如何使用表格来控制页面中的元素对象,已达到自然,生动的配置构成元素的目的。实验过程1 在dreamweaver中执行文件中的新建命令,创建一个HTML文档。然后在文件中保存该文档。然后在文档工具栏的标题中输入“师院首页”。然后单击常用工具栏的表格按钮,插入一个3行3列的表格,图1如图1所示。选中第2行表格的第2单元格。单击属性面板中的合并所选单元格按钮,将其合并。然后将指针置于第1行第1列单元格内在属性面板中将宽设为200,高设为3
2、0,如右图2所示。图23单击常用工具栏中的常用图像按钮,再打开的选择图像源文件对话框中选中一幅图片,单击确定按钮,为单元的插入一幅图片,如右图3所示4将鼠标指针移到第1行1列单元格内,在属性面板中将宽设为50,高设为30,单击常用工具栏中的图像按钮,打开插入鼠标经过图像对话框,如图4所示。图35在打开的对话框中,单击原始图像后面的浏览按钮.。在打开的对话框中选中一幅图片,单击确定按钮,在单击鼠标经过图像后面的浏览按钮,用同样的方法选定一幅图片,如图5所示图46设置完成后,单击确定按钮,然后同同第4,5步一样为第1行的第1,2列也分别设置鼠标经过图像。然后将鼠标指针置于第一行第三列的单元格内,在
3、属性面板中,为宽设为100,高。设为50。为背景颜色设为#333cc,如图6所示7将鼠标指针置于表格的第3行,按前面的方法,为第3行单元格也插入一幅图片。然后将鼠标指针置于表格的下一行,单击常用工具栏表格图标按钮,为文档在插入一个3行3列的表格,如图7所示。图58将鼠标指针置于插入表格的第1行第1列中,在属性面板中将宽。设为120,然后将鼠标指针置于第1行第1列单元格内,按下Ctrl+Alt+t组合键,打开表格对话框,其中的设置如图8所示。设置好后,单击确定按钮,给单元格插入嵌套表格。 9选中插入的嵌套表格在属性面板中将对齐设置为剧中右对齐。然后将鼠标指针置于嵌套表格第一行中,按照前面的方法,
4、为其插入一幅图片。同样的,为其第2,3,4,5列也分别插入图片。 图6图6图8图710在属性面板中,将第6列单元格的高设为50,再将鼠标指针置于第7列,为其插入一幅图片。单击状态栏中的tatle标签,选中第7步插入的3行3列的表格,在属性面板中,为背景颜色设置为#,如图10所示。图10图911将鼠标指针置于7步插入表格的第2行2列中,在属性面板中,将垂直设置为顶端。打开表格对话框,其中的设置如图11所示。设置完后,单击确定按钮,为单元格插入嵌套。图1112在上一步插入表格的属性面板中,将对齐方式设为居中对齐,将鼠标置于该表格的第2行,按下ctrl+alt+I组合键,在打开的对话框中选择一幅图,
5、单击确定,为单元格插入图片。在该单元格的属性面板中,单击居中对齐按 钮,将图片居中,如图12所示13将光标置于下1列单元格,输入文字。在网页中右击,在弹出的快捷键菜单中执行CSS样式的新建命令,弹出新建CSS规则对话框。按照图13设置后,单击确定按钮,弹出X1的规则定义对话框。上14在X1规则定义对话框中,将文字设为宋体,大小设为12像素,样式设为正常,设为26像素,其余不变.单击按钮,在编辑窗口选中输入的文字,右击,在弹出的快捷菜单中执行CSS样式的x1命令,为文字应用css样式,图12如图14所示图13图1415将鼠标指针置于第7步插入的3行2列表格的下一行,然后按下ctrl+Alt+T组
6、合键打开表格对话框,其中的设置如图15所示设置完毕后,单击确定按钮,为网页插入表格16选中上一步插入的表格,在属性面板中,将背景颜色设为#99FF66。将鼠标指针设置于第1行单元格内,在属性面板中,将水平设为右对齐,然后为该单元格插入一幅图片,如图16所示17将鼠标指针置于定2行单元格内,在属性面板中,将格式设为段落,水平设为右对齐,然后输入师院信息。在网页中右击,在弹出的快捷键菜单中执行css样式的新建命令弹出新建css规则对话框。18新建css规则对话框的设置如图图1518所示,设置好后,单击确定按钮。弹出x2的规则定义对话框,将大小设为19像素,样式设为正常,行高设为20像素,颜色设为
7、,其余不变。设置完毕后,单击确定按钮19在编辑窗口选中输入的文字,右击在弹出的快捷菜单中执行css样式的x2命令,为文字应用css样式。按下ctrl+s组合图17保存文件,按下F12键预览在IE中。图19图16图19创建一个本地站点实验目标建立一个站点后,要把所有的站点文件保存在建立的根目录中,然后将所做的网页保存在所建的站点中。实验过程1 在dreamweaver中执行站点中打开新建站点命令,将弹出未命名站点1的站点定义为对话框。然后在基本选项卡里输入站点名称。2然后单击下一步,弹出一个对话框如图2所示。然后他给出的你想使用那一种服务器技术。然后点击是这个按钮,然后点击你所选中的技术。如图2
8、所示3然后单击下一行这个按钮,找到在本地进行编辑和测试这个按钮,点击它。然后找到将把文件存储在计算机上的什么位置? 图1这个按钮,然后点击浏览,找到我所新那个文件,如图3所示4然后在单击下一步按钮,将会出来如图4所示的对话框,然后点击否这个按钮。5然后再单击下一步这个按钮,就得出如图5所示的对话框6然后单击下一步按钮 图2就得到如图6所示的对话框,然后再进行测试一下即可。7在单击下一步按钮,就 建立了如图6所示的站点图5图3图6图5图4图3图7图4图7涟江为区内地表水的主要排水通道,隧道设计标高高于最低排水基准面,隧道区山脊内沟谷多为季节性冲沟,主要由大气降水补给,水量小,受季节影响明显,地表水不发育,地表水对隧道施工及运营无影响。