您所在位置：网站首页 > 高等教育 > 大学课件网页设计与制作项目教学教学课件 ppt 王君学孙海伦金哲第6章教案项目6 表格──布局商务网页-PPT

网页设计与制作项目教学教学课件 ppt 王君学孙海伦金哲第6章教案项目6 表格──布局商务网页-PPT

35页

卖家[上传人]：E****

文档编号：89492228

上传时间：2019-05-25

文档格式：PPT

文档大小：911.50KB

文档加载中……请稍候！
如果长时间未打开，您也可以点击刷新试试。

下载文档到电脑，查找使用更方便

10 金贝

/ 35 举报版权申诉马上下载

文本预览

下载提示

常见问题

1、,项目六表格布局商务网页,任务一使用表格布局页眉,任务二使用嵌套表格布局主体页面,实训使用表格布局“玉石的种类”页面,任务三使用表格布局页脚,表格是网页排版的灵魂，是页面布局的重要方法，它可以将网页中的文本、图像等内容有效地组合成符合设计效果的页面。本项目将以商务网页为例，介绍使用表格进行网页布局的基本方法。在项目中，将使用表格分别对页眉、主体和页脚进行布局。,任务一使用表格布局页眉,（1）首先在Dreamweaver 8中定义一个本地静态站点，然后把“项目素材”文件夹中的内容复制到站点根文件夹下。,（2）在网站根文件夹下面新建一个主页文档，并保存为“index.htm”。,（3）在【属性】面板中单击页面属性按钮，打开【页面属性】对话框，在【外观】分类中将文本【大小】设为“14像素”，页边距全部设为“0”，在【标题/编码】分类的【标题】文本框中输入“盘古石翡翠”，然后单击确定按钮。,（4）将鼠标光标置于页面中，然后在菜单栏中选择【插入】【表格】命令，或在【插入】【常用】面板中单击（表格）按钮，打开【表格】对话框，参数设置如图所示，然后单击确定按钮，插入表格。,（5）确认表

2、格处于被选中状态，然后在【属性】面板的【对齐】下拉列表中选择【居中对齐】选项，设置【背景图像】为“images/bg.gif” 。,（6）选定左侧两个单元格后单击鼠标右键，选择【表格】【合并单元格】命令，合并表格。表格处于被选中状态下，在单元格【属性】面板的【水平】下拉列表中选择【居中对齐】选项，在【宽】文本框中输入“81” 。,（7）仍将鼠标光标置于左侧第1个单元格内，然后在菜单栏中选择【插入】【图像】命令，将图像文件“images/t1.jpg”插入到单元格中。,（8）在图像【属性】面板的【替换】列表文本框中输入“盘古石翡翠”，在【垂直边距】和【水平边距】文本框中均输入“3” 。,（9）将鼠标光标置于右侧第1个单元格内，然后在菜单栏中选择【插入】【图像】命令，将图像文件“images/t2.jpg”插入到单元格中。,任务二使用嵌套表格布局主体页面,（一）布局网页右上方栏目的内容（二）布局右下方栏目的内容,（一）布局网页右上方栏目的内容,（1）选中右侧表格第2行或者将鼠标光标置于页眉表格的最右侧，然后单击【插入】【常用】面板中的按钮，在页眉表格的下面继续插入一个表格。,（2

3、）将鼠标光标置于第一个单元格内，在【属性】面板中设置其水平对齐方式为“居中对齐”，垂直对齐方式为“顶端”，单元格高度为“50”，然后将鼠标光标置于第2个单元格内，在【属性】面板中设置其水平对齐方式为“居中对齐”，垂直对齐方式为“顶端”，单元格高度为“485” 。,（3）在菜单栏中选择【插入】【表格】命令，在左侧单元格中插入一个1行6列的嵌套表格。,（4）然后在单元格中输入文本。,（5）将鼠标光标置于“首页”单元格内，按住Shift键不放，依次向右拖曳单元格至“翡翠论坛”单元格，已添加文本的单元格完全被选中后，设置单元格属性。,（6）选中文本“首页”，然后在【属性】面板中设置字体加粗，设置【大小】为“18”像素，这时在【样式】下拉列表中自动出现相应的样式名称“STYLE2” 。,（7）运用同样的方法设置其他单元格文本的字体和大小，也可以直接在【样式】下拉列表中选择相对应的样式名称“STYLE2”来设置。,（二）布局右下方栏目的内容,（1）将鼠标光标置于主体页面右下方单元格内，在【属性】面板中设置水平对齐方式为“居中对齐”，垂直对齐方式为“顶端”，背景颜色为“#FFFFFF” 。

4、,（2）在菜单栏中选择【插入】【表格】命令，在右侧单元格中插入一个7行5列的嵌套表格。,（3）将鼠标光标置于第2行的任意一个单元格中，然后单击文档窗口左下角的“”标签来选择该行，然后在【属性】面板中设置单元格的宽度和高度均为“150” 。,（4）运用同样的方法设置第5行单元格的高度为“150”，然后设置第3行和第6行单元格的高度为“30”，水平对齐方式为“居中对齐”。,（5）选择表格第4行所有单元格，然后在菜单栏中选择【修改】【表格】【合并单元格】命令，对单元格进行合并。,（6）将鼠标光标置于合并后的单元格中，在【属性】面板中设置其高度为“1”，背景图像为“images/bg.gif” 。,（7）单击文档窗口左上角的代码按钮，切换到【代码】视图，将单元格源代码中的不换行空格符“”删除，然后再单击设计按钮，切换到【设计】视图。,（8）在表格第2行的4个单元格中依次插入图像“images/fc1.jpg”、“images/fc2.jpg”、“images/fc3.jpg”、“images/fc 4.jpg、“images/fc5.jpg”，并在每个图像下面的单元格中输入相应的文本。选

5、中图像“images/fc5.jpg”在其【属性】面板中将【边框】宽度设为“1”。,（9）在表格第5行的4个单元格中依次插入图像“images/2-1.jpg”、“images/2-2.jpg”、“images/2-3.jpg”和“images/2-4.jpg”，并在每个图像下面的单元格中输入相应的文本。选中图像“images/fc5.jpg”、“images/fc7.jpg”在其【属性】面板中将【边框】宽度设为“2”。,（10）由于图片大小不一，表格的大小在插入图像后会出现改变，应在【属性】面板中设置单元格的宽度和高度均为“150”。,（11）选择表格的第7行，然后按下Delete键将该行删除。,任务三使用表格布局页脚,（1）将鼠标光标置于网页主体部分最外层表格的右侧，然后插入一个2行1列、宽为“870像素”的表格，其单元格边距和边框粗细均为“0”，单元格间距为“3”。,（2）在【属性】面板中设置表格的高度为“50像素”，背景图像为“images/bg.gif” 。,（3）将每行单元格的水平对齐方式均设置为“居中对齐”，然后输入相应的文本。,实训使用表格布局“玉石的种类”页面,本项目主要介绍了使用表格布局网页的基本方法，本实训将让读者进一步巩固所学的基本知识。要求：把“项目实训素材”文件夹下的内容复制到站点根文件夹下，然后使用表格布局网页。,小结,本项目介绍了使用表格对网页进行布局的基本方法，详细阐述了插入表格、编辑表格、表格属性设置、单元格属性设置等基本内容。熟练掌握表格的各种操作和属性设置会给网页制作带来极大的方便，是需要重点学习和掌握的内容之一。,

《网页设计与制作项目教学教学课件 ppt 王君学孙海伦金哲第6章教案项目6 表格──布局商务网页-PPT》由会员E****分享，可在线阅读，更多相关《网页设计与制作项目教学教学课件 ppt 王君学孙海伦金哲第6章教案项目6 表格──布局商务网页-PPT》请在金锄头文库上搜索。

点击阅读更多内容

TA的资源