利用表格制作网页
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
图3
《5》在打开的<插入鼠标经过图像>对话框中,单击《原始图像》后面的《浏览》按钮.。在打开的对话框中选中一幅图片,单击确定按钮，在单击《鼠标经过图像》后面的《浏览》按钮，用同样的方法选定一幅图片，如图5所示
《6》设置完成后,单击《确定》按钮，然后同同第４,5步一样为第1行的第1，2列也分别设置鼠标经过图像。然后将鼠标指针置于第一行第三列的单元格内,在《属性》面板中,为《宽》设为100，《高》。设为5０。为《背景颜色》设为#３33ｃc，如图6所示
打开《表格》对话框，其中的设置如图８所示。设置
好后，单击《确定》按钮，给单元格插入嵌套表格。
《9》选中插入的嵌套表格在属性面板中将《对齐》
设置为剧中右对齐。然后将鼠标指针置于嵌套表格第一行中,按照前面的方法，为其插入一幅图片。同样的，为其第2,3,4,5列也分别插入图片。图6
ﻩ图６
图8
图7ﻩ
《10》在属性面板中,将第6列单元格的《高》
如图14所示ﻩ
图14
《1５》将鼠标指针置于第7步插入的3行2列
表格的下一行，然后按下ctrl+Ａlt+T组合键
打开《表格》对话框,其中的设置如图１5所示
设置完毕后,单击《确定》按钮,为网页插入表格
《１6》选中上一步插入的表格，在属性面板中，将
《背景颜色》设为#９９FＦ66。将鼠标指针设置于第1行单元格内,在属性面板
《7》将鼠标指针置于表格的第3行,按前面的方法，为第3行单元格也插入一幅图片。然后将鼠标指针置于表格的下一行，单击《常用》工具栏表格图标按钮,为文档在插入一个3行3列的表格,如图7所示。
《8》将鼠标指针置于插入表格的第1行第１列中,
在属性面板中将《宽》。设为120,然后将鼠标指针
置于第1行第1列单元格内,按下Ctrl＋Alｔ+t组合键,
《2》然后单击下一步,弹出一个对话框如图2所示。然后他给出的你想使用那一种服务器技术。然后点击是这个按钮,然后点击你所选中的技术。如图２所示
《3》然后单击下一行这个按钮，找到在《本地进行编辑和测试》这个按钮，点击它。然后找到将把文件存储在计算机上的什么位置?图1
这个按钮,然后点击浏览，找到我所新
那个文件，如图3所示
按钮，为单元格插入嵌套。ﻩ
《12》在上一步插入表格的属性面板中,将对齐方式设为居中对齐，将鼠标置于该表格的第2行,按下cｔrｌ＋alt+Ｉ组合键，在打开的对话框中选择一幅图，单击确定,为单元格插入图片。在该单元格的属性面板中,单击居中对齐按
钮，将图片居中,如图１2所示
《13》将光标置于下１列单元格,输入文字。在网页中右击,在弹出的快捷键菜单中执行ﻩ《ＣSS样式》的新建命令，弹出《新建
18所示，设置好后，单击《确定》按钮。
弹出《x2的规则定义》对话框，将《大小》
设为19像素，《样式》设为正常,《行高》
设为20像素,《颜色》设为,其余
不变。设置完毕后,单击确定按钮
《1９》在编辑窗口选中输入的文字,右击
在弹出的快捷菜单中执行《css样式》的《ｘ2》
命令，为文字应用ｃsｓ样式。按下ｃtrｌ＋ｓ组合
ＣSS规则》对话框。按照图13设置后,单击《确定》按钮，弹出《X1的规则定义》对话框。ﻩ上》
《14》在《X１规则定义》对话框中,将《文字》设为宋体，《大小》设为１2像素,，《样式》设为正常，＜行高>设为26像素,其余不变.单击<确定>按钮,在编辑窗口选中输入的文字，右击,在弹出的快捷菜单中执行《
CSＳ样式》的x1命令,为文字应用css样式，
设为5０，再将鼠标指针置于第７列，为其插入一幅图片。单击《状态栏》中的《taｔlｅ》标签,选中第7步插入的3行３列的表格，在属性面板中,为《背景颜色》设置为#0０99６6,如图10所示。
图10
ﻩ
ﻩ图9
《11》将鼠标指针置于7步插入表格的第2行２列中，
在属性面板中，将《垂直》设置为顶端。打开《表格》
对话框,其中的设置如图１1所示。设置完后，单击《确定》
利用表格制作网页
———————————————————————————————— 作者：
———————————————————————————————— 日期:
数学系0９级(3)班 杜强海200910221２9
利用表格制作网页
实验目标
该网页将利用设计页面的布局,制楚雄师院的页面简介。通过该种制作,我们可以体会到表格在布局设计中的实际运用，体会如何使用表格来控制页面中的元素对象,已达到自然,生动的配置构成元素的目的。
保存文件,按下Ｆ12键预览在IＥ中。
ﻩ图1６
创建一个本地站点
ﻩ实验目标
建立一个站点后，要把所有的站点文件保存在建立的根目录中,然后将所做的网页保存在所建的站点中。
实验过程
《1》在drｅamｗeａveｒ中执行《站点》中打开《新建站点》命令,，将弹出《未命名站点１的站点定义为》对话框。然后在《基本》选项卡里输入站点名称。
《3》单击《常用》工具栏中的常用图像按钮，再打开的《选择图像源文件》对话框中选中一幅图片,单击《确定》按钮,为单元的插入一幅图片,如右图3所示
《4》将鼠标指针移到第1行1列单元格内,在属性面板中将《宽》设为5０,《高》设为30,单击《常用》工具栏中的图像按钮，打开《插入鼠标经过图像》对话框,如图4所示。
中，将《水平》设为右对齐，然后为该
单元格插入一幅图片，如图16所示
《17》将鼠标指针置于定2行单元格内，
在属性面板中,将《格式》设为段落,《水平》设为右对齐,然后输入师院信息。在网页中右击,在弹出的快捷键菜单中执行《cｓs样式》的《新建》命令
弹出《新建ｃsｓ规则》对话框。
《1８》《新建css规Байду номын сангаас》对话框的设置如图
《４》然后在单击下一步按钮,将会出来如图4所示的对话框，然后点击《否》这个按钮。
《5》然后再单击下一步这个按钮，就得出如图5所示的对话框
《６》然后单击下一步按钮图2
就得到如图6所示的对话框，然后再进行测试一下即可。
《7》在单击下一步按钮,就
建立了如图６所示的站点
ﻩ
实验过程
《1》在dreaｍweａver中执行《文件》中的《新建》命令，创建一个HTML文档。然后在《文件》中保存该文档。
然后在《文档》工具栏的《标题》中输入
“师院首页”。然后单击《常用》工具栏
的表格按钮,插入一个３行3列的表格,图１
如图１所示。
<2>选中第2行表格的第2单元格。单击属性面板中的合并所选单元格按钮，将其合并。然后将指针置于第１行第1列单元格内在属性面板中将《宽》设为200，＜高》设为３０，如右图２所示。
《5》在打开的<插入鼠标经过图像>对话框中,单击《原始图像》后面的《浏览》按钮.。在打开的对话框中选中一幅图片,单击确定按钮，在单击《鼠标经过图像》后面的《浏览》按钮，用同样的方法选定一幅图片，如图5所示
《6》设置完成后,单击《确定》按钮，然后同同第４,5步一样为第1行的第1，2列也分别设置鼠标经过图像。然后将鼠标指针置于第一行第三列的单元格内,在《属性》面板中,为《宽》设为100，《高》。设为5０。为《背景颜色》设为#３33ｃc，如图6所示
打开《表格》对话框，其中的设置如图８所示。设置
好后，单击《确定》按钮，给单元格插入嵌套表格。
《9》选中插入的嵌套表格在属性面板中将《对齐》
设置为剧中右对齐。然后将鼠标指针置于嵌套表格第一行中,按照前面的方法，为其插入一幅图片。同样的，为其第2,3,4,5列也分别插入图片。图6
ﻩ图６
图8
图7ﻩ
《10》在属性面板中,将第6列单元格的《高》
如图14所示ﻩ
图14
《1５》将鼠标指针置于第7步插入的3行2列
表格的下一行，然后按下ctrl+Ａlt+T组合键
打开《表格》对话框,其中的设置如图１5所示
设置完毕后,单击《确定》按钮,为网页插入表格
《１6》选中上一步插入的表格，在属性面板中，将
《背景颜色》设为#９９FＦ66。将鼠标指针设置于第1行单元格内,在属性面板
《7》将鼠标指针置于表格的第3行,按前面的方法，为第3行单元格也插入一幅图片。然后将鼠标指针置于表格的下一行，单击《常用》工具栏表格图标按钮,为文档在插入一个3行3列的表格,如图7所示。
《8》将鼠标指针置于插入表格的第1行第１列中,
在属性面板中将《宽》。设为120,然后将鼠标指针
置于第1行第1列单元格内,按下Ctrl＋Alｔ+t组合键,
《2》然后单击下一步,弹出一个对话框如图2所示。然后他给出的你想使用那一种服务器技术。然后点击是这个按钮,然后点击你所选中的技术。如图２所示
《3》然后单击下一行这个按钮，找到在《本地进行编辑和测试》这个按钮，点击它。然后找到将把文件存储在计算机上的什么位置?图1
这个按钮,然后点击浏览，找到我所新
那个文件，如图3所示
按钮，为单元格插入嵌套。ﻩ
《12》在上一步插入表格的属性面板中,将对齐方式设为居中对齐，将鼠标置于该表格的第2行,按下cｔrｌ＋alt+Ｉ组合键，在打开的对话框中选择一幅图，单击确定,为单元格插入图片。在该单元格的属性面板中,单击居中对齐按
钮，将图片居中,如图１2所示
《13》将光标置于下１列单元格,输入文字。在网页中右击,在弹出的快捷键菜单中执行ﻩ《ＣSS样式》的新建命令，弹出《新建
18所示，设置好后，单击《确定》按钮。
弹出《x2的规则定义》对话框，将《大小》
设为19像素，《样式》设为正常,《行高》
设为20像素,《颜色》设为,其余
不变。设置完毕后,单击确定按钮
《1９》在编辑窗口选中输入的文字,右击
在弹出的快捷菜单中执行《css样式》的《ｘ2》
命令，为文字应用ｃsｓ样式。按下ｃtrｌ＋ｓ组合
ＣSS规则》对话框。按照图13设置后,单击《确定》按钮，弹出《X1的规则定义》对话框。ﻩ上》
《14》在《X１规则定义》对话框中,将《文字》设为宋体，《大小》设为１2像素,，《样式》设为正常，＜行高>设为26像素,其余不变.单击<确定>按钮,在编辑窗口选中输入的文字，右击,在弹出的快捷菜单中执行《
CSＳ样式》的x1命令,为文字应用css样式，
设为5０，再将鼠标指针置于第７列，为其插入一幅图片。单击《状态栏》中的《taｔlｅ》标签,选中第7步插入的3行３列的表格，在属性面板中,为《背景颜色》设置为#0０99６6,如图10所示。
图10
ﻩ
ﻩ图9
《11》将鼠标指针置于7步插入表格的第2行２列中，
在属性面板中，将《垂直》设置为顶端。打开《表格》
对话框,其中的设置如图１1所示。设置完后，单击《确定》
利用表格制作网页
———————————————————————————————— 作者：
———————————————————————————————— 日期:
数学系0９级(3)班 杜强海200910221２9
利用表格制作网页
实验目标
该网页将利用设计页面的布局,制楚雄师院的页面简介。通过该种制作,我们可以体会到表格在布局设计中的实际运用，体会如何使用表格来控制页面中的元素对象,已达到自然,生动的配置构成元素的目的。
保存文件,按下Ｆ12键预览在IＥ中。
ﻩ图1６
创建一个本地站点
ﻩ实验目标
建立一个站点后，要把所有的站点文件保存在建立的根目录中,然后将所做的网页保存在所建的站点中。
实验过程
《1》在drｅamｗeａveｒ中执行《站点》中打开《新建站点》命令,，将弹出《未命名站点１的站点定义为》对话框。然后在《基本》选项卡里输入站点名称。
《3》单击《常用》工具栏中的常用图像按钮，再打开的《选择图像源文件》对话框中选中一幅图片,单击《确定》按钮,为单元的插入一幅图片,如右图3所示
《4》将鼠标指针移到第1行1列单元格内,在属性面板中将《宽》设为5０,《高》设为30,单击《常用》工具栏中的图像按钮，打开《插入鼠标经过图像》对话框,如图4所示。
中，将《水平》设为右对齐，然后为该
单元格插入一幅图片，如图16所示
《17》将鼠标指针置于定2行单元格内，
在属性面板中,将《格式》设为段落,《水平》设为右对齐,然后输入师院信息。在网页中右击,在弹出的快捷键菜单中执行《cｓs样式》的《新建》命令
弹出《新建ｃsｓ规则》对话框。
《1８》《新建css规Байду номын сангаас》对话框的设置如图
《４》然后在单击下一步按钮,将会出来如图4所示的对话框，然后点击《否》这个按钮。
《5》然后再单击下一步这个按钮，就得出如图5所示的对话框
《６》然后单击下一步按钮图2
就得到如图6所示的对话框，然后再进行测试一下即可。
《7》在单击下一步按钮,就
建立了如图６所示的站点
ﻩ
实验过程
《1》在dreaｍweａver中执行《文件》中的《新建》命令，创建一个HTML文档。然后在《文件》中保存该文档。
然后在《文档》工具栏的《标题》中输入
“师院首页”。然后单击《常用》工具栏
的表格按钮,插入一个３行3列的表格,图１
如图１所示。
<2>选中第2行表格的第2单元格。单击属性面板中的合并所选单元格按钮，将其合并。然后将指针置于第１行第1列单元格内在属性面板中将《宽》设为200，＜高》设为３０，如右图２所示。