第3章 使用表格2 布局页面　课件

学习目标 能够插入表格，会使用属性面板和菜单对表格进行设定和编辑 能够运用表格及表格的嵌套和叠加进行网页布局 能够对表格数据进行处理 3.1 第3章 使用表格布局页面 3.2.1 案例制作：网站“极地动物”主页 3.2　表格在页面布局中的应用 最终效果如图所示。 3.1 第3章 使用表格布局页面 3.2.1 案例制作：网站“极地动物”主页 3.2　表格在页面布局中的应用 （1）规划站点 新建文件夹jididongwu,在文件夹中新建image、file、other三个子文件夹。image文件夹将放置所有图片素材，站点中除主页以外的所有网页文件将放置在file文件夹中，其他所有的素材将放置在other文件夹中。将站点中的图片素材拷贝到image文件夹中，将Flash素材拷贝到other文件夹中。 （2）定义站点 启动Dreamweaver CC ，单击菜单“站点”→“新建站点”命令，通过站点设置对象向导新建站点jididongwu，将文件夹jididongwu定义为存放当前站点的文件夹。 3.1 第3章 使用表格布局页面 3.2.1 案例制作：网站“极地动物”主页 3.2　表格在页面布局中的应用 （3） 制作网页页眉部分 1）新建网页，在站点的根目录下保存为index.html，将网页的标题改为“极地动物”。在属性面板中单击“页面设置”按钮，在“外观（CSS）”选项下，设上、下、左、右边距均为0。在“链接（CSS）”选项下，设“大小”为12，“链接颜色”和“已访问链接”的颜色代码是#45A476，“变换图像链接”和“活动链接”的颜色为红色。单击“确定”按钮退出“页面设置”对话框。 2）单击菜单命令“插入”→“表格”新建表格，设定表格为7行2列，宽610像素，其余参数为0。选中表格，在属性面板中设“Align”为居中对齐，这样表格将在页面中居中对齐。 3） 选中表格第1行单元格，在属性面板中设定单元格的背景颜色为#EAFFF5。选中第1列单元格，在属性面板内设“宽”为150。 3.1 第3章 使用表格布局页面 3.2.1 案例制作：网站“极地动物”主页 3.2　表格在页面布局中的应用 （3） 制作网页页眉部分 4） 光标移到表格第3行左侧单元格内，插入图像image/logo.jpg。光标移到该行右侧单元格内，插入Flash文件other/ad.swf。 5）选中表格第5行单元格，在属性面板中设定单元格的背景颜色为#EAFFF5。将光标移到该行左侧单元格内，输入文字“当前位置：动物档案”，在右侧单元格中输入文字“欢迎光临极地动物网站”。分别选中左右单元格文字，在CSS属性面板中设字体大小为12，字体颜色为#45A476。 3.1 第3章 使用表格布局页面 3.2.1 案例制作：网站“极地动物”主页 3.2　表格在页面布局中的应用 （3） 制作网页页眉部分 6）选中文字“欢迎光临极地动物网站”，切换到显示代码视图，找到反白显示的文字，将光标移到文字之前，输入命令“<marquee>”,在文字之后输入“</marquee>”，完整的代码是“<marquee>欢迎光临极地动物网站</marquee>”。切回到设计视图，按F12观察，会看到文字跑起来。 3.1 第3章 使用表格布局页面 3.2.1 案例制作：网站“极地动物”主页 3.2　表格在页面布局中的应用 （3） 制作网页页眉部分 7） 光标移到第6行，选中该行单元格合并单元格，设单元格的背景颜色为#339966。在窗口右侧的“CSS设计器”面板中，单击“源”选项右侧的按钮 ，在弹出的菜单中选择“在页面中定义”，系统自动添加了<style>。在“选择器”选项右侧单击按钮 ，设置新的样式名称为“.x1”。在“选择器”选项中单击选中样式“.x1”，在属性选项中单击第二个标签按钮 ，设置line-geight（行高）为1px。 在属性面板的“目标规则”中选择“x1”。则该行单元格变为1像素的绿色细线，按F12观察效果。 3.1 第3章 使用表格布局页面 3.2.1 案例制作：网站“极地动物”主页 3.2　表格在页面布局中的应用 （4）制作网页的正文部分 1）光标移到表格右侧，新建一个1行2列的表格（后面简称大表格），宽度仍为610像素，其它参数为0。选中表格，在属性面板中设“Align”为“居中对齐”，这样表格将在页面中居中对齐。 3.1 第3章 使用表格布局页面 3.2.1 案例制作：网站“极地动物”主页 3.2　表格在页面布局中的应用 （4）制作网页的正文部分 2）光标移到左侧的单元格中，在属性面板中设定单元格的“宽”为150，“水平”为“居中对齐”，“垂直”为“顶端”对齐。新建表格，表格为6行1列，宽116像素。 3）嵌套表格处于选中状态，切换到代码视图，将光标