DW《网页设计与制作》教学课件.ppt

教学环节. 教学环节. . 教学环节. 教学环节. 教学环节. . 《网页设计与制作》教学课件 主讲人：信息工程学校 熊明 教学单元8：使用表格布局网页 课程引导，明确知识目标 展示实例效果，分析操作任务 知识讲解与操作示范 课堂实践与知识拓展 归纳总结，布置作业 (一)课程引导 　　　 在前面单元中我们学会了如何在网页中输入文本， 图片以及多媒体元素。 　　　请浏览【网易】的主页。 　　　 网易的主页中包含了大量的文字和图片，通过浏览我们发现这些文字和图片布局合理，搭配协调。这些文字和图片是通过什么方法布局的？ 　　　 本次课我们来学习使用表格布局网页的方法。 一、课程引导，明确知识目标 (二)明确知识技能目标 (1)学会添加表格、设置表格属性。 (2)掌握设置表格中行和列属性的方法。 (3)掌握拆分单元格，合并单元格的方法。 (4)掌握在表格中输入文字并定位的方法。 (5)掌握在表格中插入图像并定位的方法。 一、课程引导，明确知识目标 (1) 制作如下的课程表。 二、展示实例效果，分析操作任务 (1)在“趵突泉”网站文件夹中“表格布局”中创建命名为“04.html”的网页，网页的标题为“ 泉水”。 (2)插入1张3行4列的表格，宽度设置为750像素。 (3)拆分单元格，合并单元格。 (4)设置表格以及行、列、单元格的属性。 (5)为单元格设置背景图像。 (6)在表格的不同单元格中插入多幅图像。 (7)在表格的单元格中输入文字。 二、展示实例效果，分析操作任务 第一步：创建站点或切换站点 　　　　启动Dreamweaver cs，切换到“趵突泉”站点。 第二步：创建子文件夹，准备素材 　　　　在站点下创建子文件夹“表格布局”，在“表格布局”文件夹中创建子文件夹“image”，并将所需图像复制到该文件夹下。 第三步：新建网页且保存 　　　　在Dreamweaver cs主窗口中，单击菜单【文件】→【新建】，打开“新建文档”对话框，在“常规”选项卡中，“类别”列表框中选择“基本页”，“基本页”列表框中选择“HTML”，单击【创建】按钮，该站点下一个名为“Untitled-1”文档便创建。单击标准工具栏上的【保存】按钮，打开“另存为”对话框，保存位置为“表格布局”，文件名为“04.html”，单击【保存】按钮，保存该网页文档。 第四步：设置网页的标题 　　　　在文档工具栏的“标题”文本框直接输入文档标题“泉水”即可 。 三、知识讲解与操作示范 第五步：插入表格 　　　　1．打开网页04.html，将光标置于网页文档04.html第一行的最左端，在Dreamweaver cs主窗口中，单击菜单【插入】→【表格】 　　　　2．对“表格”对话框中的各个参数进行设置 (1)在“行数”文本框中输入“3”，在“列数”文本框中输入“4”； (2)在“表格宽度”文本框输入“100”，其后的下拉列表框中选择宽度的 　　单位为“百分比”； (3)“边框粗细”先设置为“1”，以后再设置为“0”； (4)“单元格边距设置为2，单元格间距设置为3； (5)设置完成后单击【确定】按钮，一个3行4列的表格就插入到页面了 。 第六步：选择表格和表格元素 　　　　　在进行表格操作之前，我们必须首先选定被操作的对象，对于表格而言， 　　　　可以选定整个表格、单行、单列、多行、多列、连续或不连续的单元格。 三、知识讲解与操作示范 第七步：设置表格及单元格的属性 　　　　(1)在“宽”文本框中输入“750”，其右侧的单位选择“像素”； 　　　　(2)“边框”文本框中输入“1”，“填充”文本框中输入“2”； 　　　　(3)“间距”文本框中输入“0”，对齐方式选择“居中对齐”； 　　　　(4)“边框颜色”文本框中输入“#000000”； (5)表格的”对齐“方式设置为”居中对齐“； 　　　　(6)其他表格属性保存原有设置或默认值不变 ，设置结果如下图所示。 第八步：调整表格的结构 　　　　将图中“A”、“B”、“C”、“D”四个单元格合并，将图中“I”、“J”、“K”、“L”四个单元格合并。 　　　　 三、知识讲解与操作示范 第九步：插入嵌套表格 　　　　 在图中的“E”单元格中插入一张7行1列的表格，在“G”单元格中插入一张5行3列的表格 为表格单元格“G”设置背景图像。 将单元格G的”垂直“对齐方式设置 为”顶端“(注意按住Ctrl键选中单元格) 第十步：在表格中输入文本和插入图像 　　　　(1)在表格单元格“ABCD”中插入一幅较大的图像。 　　　　(2)在表格单元格“E2”、“E4”、