利用表格制作网页.docx

利用表格制作网页数学系09级(3)班杜强海20091022129利用表格制作网页实验目标该网页将利用设计页面的布局,制楚雄师院的页面简介。通过该种制作,我们可以体会到表格在布局设计中的实际运用,体会如何使用表格来控制页面中的元素对象,已达到自然,生动的配置构成元素的目的。实验过程《1》在dreamweaver中执行〈〈文件》中的《新建》命令,创建一个HTML文档。然后在〈〈文件》中保存该文档。然后在〈〈文档》工具栏的〈〈标题》中输入“师院首页”。然后单击〈〈常用》工具栏的表格按钮,插入一个3行3列的表格,图1如图1所示。<2>选中第2行表格的第2单元格。单击属性面板中的合并所选单元格按钮,将其合并。然后将指针置于第1行第1列单元格内在属性面板中将《宽》设为200,〈高》设为30,如右图2所示。«3»单击〈〈常用》工具栏中的常用图像按钮,再打开的〈〈选择图像源文件》对话框中选中一幅图片,单击〈〈确定》按钮,为单元的插入一幅图片,如右图«4》将鼠标指针移到第1行1列单元格内,在属性面板中将〈〈宽》设为50,〈〈高》设为30,单击《常用》工具栏中的图像按钮,打开《插入鼠标经过图像》对话框,如图4所示。«5》在打开的<插入鼠标经过图像>对话框中,单击〈〈原始图像》后面的《浏览》按钮.。在打开的对话框中选中一幅图片,单击确定按钮,在单击〈〈鼠标经过图像》后面的〈〈浏览》按钮,用同样的方法选定一幅图片,如图5所示《6》设置完成后,单击〈〈确定》按钮,然后同同第4,5步一样为第1行的第1,2列也分别设置鼠标经过图像。然后将鼠标指针置于第一行第三列的单元格内,在〈〈属性》面板中,为《宽》设为100,〈〈高》。设为50。为〈〈背景颜色》设为#,如图6所示«7»将鼠标指针置于表格的第3行,按前面的方法,为第3行单元格也插入一幅图片。然后将鼠标指针置于表格的下一行,单击〈〈常用》工具栏表格图标按钮,为文档在插入一个3行3列的表格,如图7袂示。«8》将鼠标指针置于插入表格的第1彳牛锢1咧中,在属性面板中将〈〈宽》。设为120,然后将鼠标指针置于第1行第1列单元格内,按下Ctrl+Alt+t组合键,打开《表格》对话框,其中的设置如图8所示。设好后,单击〈〈确定》按钮,给单元格插入嵌套表格。«9»选中插入的嵌套表格在属性面板中将〈〈对齐》设置为剧中右对齐。然后将鼠标指针置于嵌套表格第一行中,按照前面的方法,为其插入一幅图片。同样的,为其第2,3,4,5列也分别插入图片。图67«10»在属性面板中,将第6列单元格的〈〈高》设为50,再将鼠标指针置于第7列,为其插入一幅图片。单击〈〈状态栏》中的〈〈tatle》标签,选中第7步插入的3行3列图10的表格,在属性面板中,为〈〈背景颜色》设置为于7步插入表格的第2行2列中,在属性面板中,将〈〈垂直》设置为顶端。打开〈〈表格》对话框,其中的设置如图11所示。设置完后,单击〈〈确定》按钮,为单元格插入嵌套《12》在上一步插入表格的属性面板中, 将对齐方式设为居中对齐,将鼠标置于该表格的第2行,按下ctrl+alt+I组合键,在打开的对话框中选择一幅图,单击确定,为单元格插入图片。中,单击居中对齐按钮,将图片居中,如图«13》将光标置于下1在该单元格的属性面板12所示列单元格,输入文字。在网页中右击,在弹出的快捷键菜单中执行«CSS样式》的新建命令,弹出〈〈新建CSS规则》对话框。按照图13设置后,单击〈〈确定》按钮,弹出《X1的规则定义》对话框。上》«14》在《XI规则定义》对话框中,将《文字》设为宋体,〈〈大小》设为12像素,,〈〈样式》设为正常,<行高>设为26像素,〈确定>按钮,在编辑窗口选中输入的文字,右击,在弹出的快捷菜单中执行《CSS样式》的x1命令,为文字应用css样式,如图14所示r j了JC!的凶倾做 'au9技 类里VR7大小5:停mO:桔S;二上灿瓠如洌nri无比■邸事映)■殂蚓m地律王常▼眸L-I匚|i隘_]: 「邮勤,[蒂功I1^2图14《15》将鼠标指针置于第7步插入的3行2列表格的下一行,然后按下ctrl+Alt+T组合键打开《表格》对话框,其中的设置如图15所示设置完毕后,单击〈〈确定》按钮,为网页插入表格«16»选中上一步插入的表格,在属性面板中,将《背景颜色》设为#99FF66o将鼠标指针设置于第1行单元格内,在属性面板中,将〈〈水平》设为右对齐,然后为该单元格插入一幅图片,如图16所示«17〉〉将鼠标指针置于定2行单元格内,在属性面板中,将〈〈格式》设为段落,〈〈水平》设为右对齐,然后输入师院信息。在网页中右击,在弹出的快捷键菜单中执行〈〈css样式》的〈〈新建》命令弹出《新建css规则》对话框«18»〈〈新建css规则》对话框的设置如图18所示,设置好后,单击〈〈