利用表格制作网页模板.doc

数学系09级（3）班 杜强海 1022129
利用表格制作网页
试验目标
该网页将利用设计页面布局, 制楚雄师院页面介绍。经过该种制作, 我们能够体会到表格在布局设计中实际利用, 体会怎样使用表格来控制页面中元素对象, 已达成自然, 生动配置组成元素目。
试验过程
《1》 在dreamweaver中实施《文件》中《新建》命令, 创建一个HTML文档。然后在《文件》中保留该文档。
然后在《文档》工具栏《标题》中输入
“师院首页”。然后单击《常见》工具栏
表格按钮, 插入一个3行3列表格, 图1
如图1所表示。
<2>选中第2行表格第2单元格。单击属性面板中合并所选单元格按钮, 将其合并。然后将指针置于第1行第1列单元格内在属性面板中将《宽》设为200, <高》设为30, 如右图2所表示。
图2
《3》单击《常见》工具栏中常见图像按钮, 再打开《选择图像源文件》对话框中选中一幅图片, 单击《确定》按钮, 为单元插入一幅图片, 如右图3所表示

《4》将鼠标指针移到第1行1列单元格内, 在属性面板中将《宽》设为50, 《高》设为30, 单击《常见》工具栏中图像按钮, 打开《插入鼠标经过图像》对话框, 如图4所表示。
图3
《5》在打开< 插入鼠标经过图像>对话框中, 单击《原始图像》后面《浏览》按钮.。在打开对话框中选中一幅图片, 单击确定按钮, 在单击《鼠标经过图像》后面《浏览》按钮, 用一样方法选定一幅图片, 如图5所表示
图4
《6》设置完成后, 单击《确定》按钮, 然后同同第4,5步一样为第1行第1,2列也分别设置鼠标经过图像。然后将鼠标指针置于第一行第三列单元格内, 在《属性》面板中, 为《宽》设为100, 《高》。设为50。为《背景颜色》设为#333cc, 如图6所表示
《7》将鼠标指针置于表格第3行, 按前面方法, 为第3行单元格也插入一幅图片。然后将鼠标指针置于表格下一行, 单击《常见》工具栏表格图标按钮, 为文档在插入一个3行3列表格, 如图7所表示。
图5
《8》将鼠标指针置于插入表格第1行第1列中,
在属性面板中将《宽》。设为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组合键, 在打开对话框中选择一幅图, 单击确定, 为单元格插入图片。在该单元格属性面板中, 单击居中对齐按
钮, 将图片居中, 如图12所表示
《13》将光标置于下1列单元格, 输入文字。在网页中右击, 在弹出快捷键菜单中实施 《CSS样式》新建命令, 弹出《新建
CSS规则》对话框。根据图13设置后, 单击《确定》按钮, 弹出《X1规则定义》对话框。 上》
《14》在《X1规则定义》对话框中, 将《文字》设为宋体, 《大小》设为12像素, , 《样式》设为正常, <行高>设为26像素,其它不变.单击<确定>按钮, 在编辑窗口选中输入文字, 右击, 在弹出快捷菜单中实施《
CSS样式》x1命令, 为文字应用css样式,
图12
如图14所表示

图13

图14

《15》将鼠标指针置于第7步插入3行2列
表格下一行, 然后按下ctrl+Alt+T组合键
打开《表格》对话框, 其中设置如图15所表示
设置完成后, 单击《确定》按钮, 为网页插入表格
《16》选中上一步插入表格, 在属性面板中, 将
《背景颜色》设为#99FF66。将鼠标指针设置于第1行单元格内, 在属性面板
中, 将《水平》设为右对齐, 然后为该
单元格插入一幅图片, 如图16所表示
《17》将鼠标指针置于定2行单元格内,
在属性面板中, 将《格式》设为段落, 《水平》设为右对齐, 然后输入师院信息。在网页中右击, 在弹出快捷键菜单中实施《css样式》《新建》命令
弹出《新建css规则》对话框。
《18》《新建css规则》对话框设置如图
图15
18所表示, 设置好后, 单击《确定》按钮。
弹出《x2规则定义》对话框, 将《大小》
设为19像素, 《样式》设为正常, 《行高》
设为20像素, 《颜色》设为 , 其它
不变。设置完成后, 单击确定按钮
《19》在编辑窗口选中输入文字, 右击
在弹出快捷菜单中实施《css样式》《x2》
命令, 为文字应用css样式。按下ctrl+s组合
图17
保留文件, 按下F12键预览在IE中。

图19
图16

图19
创建一个当地站点
试验目标
建立一个站点后, 要把全部站点文件保留在建立根目录中, 然后将所做网页保留在所建站点中。
试验过程
《1》 在dreamweaver中实施《站点》中打开《新建站点》命令, , 将弹出《未命名站点1站点定义为》对话框。然后在《基础》选项卡里输入站点名称。

《2》然后单击下一步, 弹出一个对话框如图2所表示。然后她给出你想使用那一个服务器技术。然后点击是这个按钮, 然后点击你所选中技术。如图2所表示
《3》然后单击下一行这个按钮, 找到在《当地进行编辑和测试》这个按钮, 点击它。然后找到将把文件存放在计算机上什么位置？ 图1
这个按钮, 然后点击浏览, 找到我所新
那个文件, 如图3所表示

《4》然后在单击下一步按钮, 将会出来如图4所表示对话框, 然后点击《否》这个按钮。
《5》然后再单击下一步这个按钮, 就得出如图5所表示对话框
《6》然后单击下一步按钮 图2
就得到如图6所表示对话框, 然后再进行测试一下即可。
《7》在单击下一步按钮, 就
建立了如图6所表示站点
图5
图3

图6
图5
图4
图3

图7
图4

图7