《网页制作：项目06 使用表格布局门户网站首页--ppt》由会员分享，可在线阅读，更多相关《网页制作：项目06 使用表格布局门户网站首页--ppt（31页珍藏版）》请在金锄头文库上搜索。
1、主讲：网页设计与制作 Dreamweaver 8项目六 使用表格布局门户网站首页任务一 制作页眉任务二 设置主体页面项目六： 使用表格布局门户网 站首页网页设计与制作 Dreamweaver 8任务一任务二任务三 制作页脚小 结任务三实 训任务一 制作页眉本任务主要是使用表格来布局网页页眉的内容，用 到的基础知识主要包括插入表格及其属性设置的方法、 选择表格及其行与列的方法、拆分单元格的方法、表格 的嵌套以及插入字幕的方法及其设置参数等。Dreamweaver 8网页设计与制作项目六： 使用表格布局门户网 站首页任务一任务二小 结任务三实 训操作一 制作导航栏Dreamweaver 8网页设计
2、与制作本操作主要介绍使用表格定位网站站标和制作导航栏的方法 。通过本操作的学习，应该掌握的内容主要有： 1.关于表格的理解一个完整的表格包括行、列、单单元格、单单元格间间距、单单元格 边边距（填充）、表格边边框和单单元格边边框。表格边边框可以设设置粗 细细和颜颜色等属性，单单元格边边框粗细细不可设设置。 一个包括n列表格的宽宽度2表格边边框（n1）单单元格 间间距2n单单元格边边距n单单元格宽宽度+2n单单元格边边框宽宽度（1 个像素）。掌握这这个公式是非常有用的，在运用表格布局时时，精确地定 位网页页就是通过设过设 置单单元格的宽宽度或者高度来实现实现 的。 项目六： 使用表格布局门户网 站
3、首页制作导航栏操作动画任务一任务二小 结任务三实 训操作一 制作导航栏Dreamweaver 8网页设计与制作项目六： 使用表格布局门户网 站首页表格的构成 任务一任务二小 结任务三实 训Dreamweaver 8网页设计与制作操作一 制作导航栏2.插入表格的方法将光标标置于页页面中，然后在主菜单单中选择选择 【插入】【表 格】命令或在【插入】【常用】面板中单击单击 （表格）按钮钮 打开【表格】对话对话 框进进行参数设设置，最后单击单击 【确定】按钮钮插 入表格。 项目六： 使用表格布局门户网 站首页任务一任务二小 结任务三实 训Dreamweaver 8网页设计与制作操作一 制作导航栏3.选
4、择表格的方法通过过以下4种方法来选择选择 整个表格。 单击单击 表格左上角或者单击单击 表格中任何一个单单元格的边边框线线。 将光标标置于表格内，选择选择 主菜单单中的【修改】【表格】 【选择选择 表格】命令或单击单击 鼠标标右键键，在快捷菜单单中选择选择 【 表格】【选择选择 表格】命令。 按住鼠标标左键键由表格的左上角至右下角拖曳，选选中其中所有 的单单元格，并选择选择 主菜单单中的【编辑编辑 】【全选选】命令。 将光标标移至欲选择选择 的表格内，单击单击 文档窗口左下角对应对应 的“ table”标签标签 。项目六： 使用表格布局门户网 站首页任务一任务二小 结任务三实 训Dreamwe
5、aver 8网页设计与制作操作一 制作导航栏4.设置表格【属性】的方法首先选选中表格，然后通过过表格【属性】面板设设置表格的行数 、列数、宽宽度、高度、填充、间间距、边边框、对齐对齐 方式、背景颜颜 色、背景图图像、边边框颜颜色等属性。 项目六： 使用表格布局门户网 站首页任务一任务二小 结任务三实 训Dreamweaver 8网页设计与制作操作一 制作导航栏5.设置单元格【属性】的方法通过单过单 元格【属性】面板可以设设置单单元格的宽宽度和高度、 水平和垂直对齐对齐 方式、背景颜颜色和背景图图像以及边边框颜颜色等。 另外，在设设置单单元格高度或宽宽度为较为较 小数值时值时 ，为为了达到实际实
6、际 效果，必须须将该单该单 元格源代码码中的“”（不换换行空格符） 删删除。 项目六： 使用表格布局门户网 站首页任务一任务二小 结任务三实 训Dreamweaver 8网页设计与制作操作一 制作导航栏6.拆分单元格的方法通过过以下方法可以打开【拆分单单元格】对话对话 框拆分单单元格。在主菜单中选择【修改】【表格】【拆分单元格】命令。 单击鼠标右键，在其快捷菜单中选择【表格】【拆分单元格 】命令。 单击单元格【属性】面板左下方的 （拆分）按钮。项目六： 使用表格布局门户网 站首页任务一任务二小 结任务三实 训Dreamweaver 8网页设计与制作操作一 制作导航栏7.合并单元格的方法通过过以
7、下方法可以将选择选择 的单单元格进进行合并。在主菜单中选择【修改】【表格】【合并单元格】命令。 单击鼠标右键，在其快捷菜单中选择【表格】【合并单元格 】命令。 单击单元格【属性】面板左下方的 （合并）按钮。项目六： 使用表格布局门户网 站首页任务一任务二小 结任务三实 训Dreamweaver 8网页设计与制作操作一 制作导航栏项目六： 使用表格布局门户网 站首页8.选择表格的行或列的方法下面两种方法可用来选择选择 表格的行或列。当鼠标位于表格欲选择的行首或列顶时，鼠标变成黑色箭头， 这时单击鼠标左键，便可选择行或者列。 按住鼠标左键从左至右或者从上至下拖曳，将欲选择的行或列 选中。 另外，单
8、击单击 文档窗口左下角相应应的“”标签标签 也可以选择选择 相应应 的行。任务一任务二小 结任务三实 训操作二 插入字幕Dreamweaver 8网页设计与制作本操作主要介绍插入字幕的方法，即如何使用“标签选择器”插入 marquee标签并设置相关参数。通过本操作的学习，应该掌握的内容主 要有： 1.设置marquee标签的方法将输输入的文本选选定，并单击单击 鼠标标右键键，在弹弹出的快捷菜单单 中选择选择 【快速标签编辑标签编辑 器】命令，出现现快速标签编辑标签编辑 器和标签标签 列表框，在列表中选择选择 “marquee”标签标签 ，然后双击击鼠标标左键键， 将标签标签 插入到快速标签编辑
9、标签编辑 器中。接着按下空格键键，在标签标签 列 表中将出现该标签现该标签 的所有属性名称，在其中选择选择 需要的属性， 然后按回车键车键 插入该该属性，此时时在等号右侧侧的双引号内将出现现 属性参数，双击选择击选择 即可。如果需要继续继续 插入其他属性，可以 继续继续 按下空格键键重复以上操作。项目六： 使用表格布局门户网 站首页插入字幕操作动画任务一任务二小 结任务三实 训操作二 插入字幕Dreamweaver 8网页设计与制作注意，marquee不仅仅可以使文字滚动滚动 ，也可以使图图片滚动滚动 ， 只要在和间间插入。 项目六： 使用表格布局门户网 站首页任务一任务二小 结任务三实 训操
10、作二 插入字幕Dreamweaver 8网页设计与制作2. marquee标签的主要参数（1）bgcolor：表示背景颜颜色，可输输入颜颜色的英文名称或16进进制代码码 。（2）direction=”left | right | up | down”：表示滚动滚动 方向（左|右|上|下） 。 （3）behavior=”scroll |slide | alternate”：其中，scroll表示由一端滚动滚动 到 另一端；slide表示由一端快速滑动动到另一端，不再重复；alternate表示在 两端之间间来回滚动滚动 。 （4）height”数值值”：表示滚动滚动 区域的高度。 （5）widt
11、h=”数值值”：表示滚动滚动 区域的宽宽度。 （6）scrollamount=”数值值”：表示滚动滚动 的速度，数值值越大滚动滚动 越快。 （7）scrolldelay=”数值值”：表示延迟时间迟时间 ，数值值越大跳跃跃越明显显。 （8）loop”数值值”：表示循环环次数，不设设置该值该值 即表示无限循环环。项目六： 使用表格布局门户网 站首页任务一任务二小 结任务三实 训操作二 插入字幕Dreamweaver 8网页设计与制作3.修改marquee标签参数值的方法如果需要修改marquee标签标签 的参数值值，可将光标标置于 marquee标签标签 内的文本上，然后在主菜单单中选择选择 【窗
12、口】【标标 签检查签检查 器】命令打开【标签标签 】面板，选择选择 【属性】 选项选项 ，单击单击 【未分类类】前面的“+”号，展开marquee的各项项参数 。在这这里，可以继续设继续设 置或修改各项项参数值值。 项目六： 使用表格布局门户网 站首页任务一任务二小 结任务三实 训操作二 插入字幕Dreamweaver 8网页设计与制作4.编辑或者删除标签的方法如果要编辑编辑 或者删删除标签标签 ，只需将光标标置于标签处单击标签处单击 鼠 标标右键键，在弹弹出的快捷菜单单中选择选择 【编辑标签编辑标签 代码码】或【删删除 标签标签 】命令，即可对对当前标签标签 中被选选定的部分进进行编辑编辑
13、或者删删 除。 项目六： 使用表格布局门户网 站首页观看【插入字幕】视频动画任务一任务二小 结任务三实 训如果要编辑或者删除标签，只需将光标置于标签处 单击鼠标右键，在弹出的快捷菜单中选择【编辑标签代码 】或【删除标签】命令，即可对当前标签中被选定的部分 进行编辑或者删除。Dreamweaver 8网页设计与制作任务二 设置主体页面项目六： 使用表格布局门户网 站首页任务一任务二小 结任务三实 训操作一 制作左侧区域Dreamweaver 8网页设计与制作通过本操作的学习，应该掌握的内容主要有： 1.表格的复制和粘贴选择选择 要复制的表格，然后在主菜单单中选择选择 【编辑编辑 】【拷 贝贝】命
14、令复制表格。将光标标置于要粘贴贴表格的位置，在主菜单单中 选择选择 【编辑编辑 】【粘贴贴】命令粘贴贴表格。 项目六： 使用表格布局门户网 站首页2.删除表格中的内容用鼠标选择标选择 表格中的1个或多个单单元格，按Delete键键可以删删 除其中的内容。但不能选择选择 整行、整列或者整个表格，只有这样这样 ，被选择选择 的行、列或者单单元格内的内容被删删除后，表格的结结构 或属性才不会发发生变变化。 制作主体页面的左侧区域操作动画任务一任务二小 结任务三实 训操作一 制作左侧区域Dreamweaver 8网页设计与制作3.选择相邻单元格的方法（1）在开始的单单元格中按住鼠标标左键键并拖曳到最后
15、的单单元格。 （2）将光标标置于开始的单单元格内，按住Shift键键不放，单击单击 最后 的单单元格。 项目六： 使用表格布局门户网 站首页4.选择不相邻的行、列或单元格的方法（1）按住Ctrl键键，单击单击 欲选择选择 的行、列或单单元格。 （2）在已选择选择 的连续单连续单 元格、行或列中按住Ctrl键键，单击单击 想取 消选择选择 的单单元格、行或列将其去除。 5.选择单个单元格的方法（1）先将光标标置于单单元格内，按住Ctrl键键，并单击单单击单 元格。 （2）将光标标置于单单元格内，然后单击单击 文档窗口左下角的“” 标签标签 。 任务一任务二小 结任务三实 训Dreamweaver 8网页设计与制作操作二 制作右侧区域本操作主要介绍使用嵌套表格对右侧区域的内容进行定位的 方法，同时介绍通过设置表格背景颜色、间距和单元格背景颜色 制作细线边框效果以及插入Flash动画的方法。通过本操作的学习，应该掌握的内容主要有： 1.关于嵌套表格在表格单单元格中继续继续 插入表格，称为为嵌套表格。嵌套表格的宽宽 度一定不要大于当前单单元格的宽宽度，否则则当前单单元格的宽宽度就 会发发生变变化。使用表格进进行网页页布局，嵌套表格是经经常使用的 。合理使用嵌套表格是做好表格网页页布局的关键键因素。 项目六：
