用Dreamweaver8表格进行页面布局教程
本文介绍如何在Macromedia Dreamweaver 8 中创建基于表格的页面
布局。页面布局将确定您的页面在浏览器中会如何显示，例如，显示菜单、图像和Macromedia Flash 内容将如何放置。表格是用于在HTML 页上显示表格式数据以及对文本和图形进行布局的强有力的工具。您可以使用表格快速轻松地创建布局。在本教程中，您将在一个新的Dreamweaver 文档中创建若干表格。这些表格的行和单元格实际上用作您将在以后添加的内容的"容器框"。
通常，创建Web 站点并不是以打开Dreamweaver 并立即对页面进行布局开始的。创建Web 站点的初始工作从纸张或图形编辑应用程序(如Macromedia Fireworks)开始。图形设计人员通常会画出Web 站点综合图形的草图(也称为"草样")，以便向客户展示并确保站点的初始构思能让客户满意。
设计草样由客户要求其Web 站点具有的任意数目的页面元素组成。例如，客户可能会提出："页面顶端要有徽标，要有能链接到其它页面的导航功能，有用于联机存储的部分和可以插入视频剪辑的位置。"根据这些讨论，设计人员开始对站点布局进行规划，并制作满足客户要求的示例页面草图。
本教程向您提供为Cafe Townsend(一个需要制作Web 站点的虚构餐馆)
设计的、完整的和符合要求的设计草样。作为Web 设计人员，您需要对草样进行转换，使之最终形成可以使用的Web 页面(通常需要其他图形设计人员与Flash 开发人员的帮助)。
您可以看到，图形设计人员已经向您提供了Web 页面设计草样，其中包括一些内容区域和图形方案。在下面的部分，您将使用Dreamweaver 展示此设计。
您也可以打开原始草样文件以便在计算机屏幕上查看该设计草样。可以在cafe_townsend 文件夹(在教程：设置站点和项目文件中已将该文件夹复制到了硬盘上)的fireworks_assets 文件夹中找到设计草样homepage-mockup.jpg。在创建页面时，还可以打印草样以便随时查看，创建并保存新页面。
建立站点并检查设计草样后，您就可以开始创建Web 页面了。首先您将创建一个新页面，并将它保存到您的Web 站点的本地根文件夹cafe_townsend 中。该页面最终将成为虚构餐馆Cafe Townsend 的主页。
如果您尚未创建本地根文件夹cafe_townsend，则必须先完成创建，然后再继续。
在Dreamweaver 中，选择"文件">"新建"。
在"新建文档"对话框的"常规"选项卡上，从"类别"列表中选择"基本页"，从"基本页"列表中选择"HTML"，然后单击"创建"。
选择"文件">"另存为"。在"另存为"对话框中，浏览至定义为站点的本地根文件夹的cafe_townsend 文件夹并打开该文件夹。
在教程：设置站点和项目文件中，您在名为local_sites 的文件夹中创建了此文件夹。
在"文件名"文本框中输入index.html，然后单击"保存"。
文件名即出现在应用程序窗口顶部的标题栏中。
在新文档顶部的"文档标题"文本框中，键入Cafe Townsend。
这就是页面的标题(与文件名不同)。站点访问者在Web 浏览器中查看页面时将在浏览器窗口的标题栏中看到此标题。选择"文件">"保存"来保存该页面。
插入表格
接下来，您将添加一个表格，用于放置文本、图形和Macromedia Flash 资源。在页面上单击一次，在页面左上角放置插入点。
选择"插入">"表格"。在"插入表格"对话框中，执行下面的操作：在"行数"文本框中，输入3。在"列数"文本框中，输入1。在"表格宽度
"文本框中，输入700。在"表格宽度"弹出式菜单中，选择"像素"。
在"边框粗细"文本框中，输入0。在"单元格边距"文本框中，输入0。
在"单元格间距"文本框中，输入0。单击"确定"。
一个三行一列的表格即出现在文档中。该表格的宽度为700 像素，边框、单元格边距和单元格间距均为0。
关于表格的更多信息表格是用来在HTML 页上显示表格式数据以及对文本和图形进行布局的强有力工具。表格由一行或多行组成;每行又由一个或多个单元格组成。当您创建包含多个单元格的多行表格时，这些单元格形成列。从技术上来说，一个单元格是水平行中的一个区域，而一列是由这些单元格区域垂直堆积而成的。
当选定了表格或表格中有插入点时，Dreamweaver 会显示表格宽度和表格选择器(由绿色线条指示)中的每个表格列的列宽。
宽度旁边是表格标题菜单与列标题菜单的箭头。使用菜单可以快速访问一些与表格相关的常用命令。还可以通过选择"查看">"可视化助理">"表格宽度"来启用或禁用宽度和菜单的显示。
表格可以具有边框，表格的单元格可以具有边距、间距或同时具有边距和间距。单元格边距是指单元格内容和单元格边界之间的像素数。单元格间距是指相邻的表格单元格之间的像素数。如果您没有明确指定单元格边距和单元格间距的值，则大多数浏览器按单元格边距设置为1、单元格间距设置为 2 来显示表格。若要确保浏览器显示的表格没有边距和间距，请将单元格边距和单元格间距设置为0。
单击一次该表格右侧取消对它的选择。选择"插入">"表格"以插入另一个表格。在"插入表格"对话框中，对第二个表格执行下面的操作：
在"行数"文本框中，输入1。在"列数"文本框中，输入3。
在"表格宽度"文本框中，输入700。在"表格宽度"弹出式菜单中，选择"像素"。在"边框粗细"文本框中，输入0。在"单元格边距"文本框中，输入0。在"单元格间距"文本框中，输入0。单击"确定"。
第二个表格(该表格具有一行三列)即出现在第一个表格下方。
单击该表格右侧取消对它的选择。
通过选择"插入">"表格"，然后在"插入表格"对话框中输入以下值来插入第三个表格：在"行数"文本框中，输入1。在"列数"文本框中，输入1。
在"表格宽度"文本框中，输入700。在"表格宽度"弹出式菜单中，选择"像素"。在"边框粗细"文本框中，输入0。在"单元格边距"文本框中，输入0。在"单元格间距"文本框中，输入0。单击"确定"。
第三个表格(该表格具有一行一列)即出现在第二个表格下方。
单击该表格右侧取消对它的选择。您的页面现在应如下所示：
注意插入表格后可能会看到表格选择器(由绿色线条指示)。通过在表格外单击，通常可以隐藏表格选择器。也可以通过选择"查看">"可视化助理">"表格宽度"禁用表格选择器。
设置表格属性。现在将使用"扩展表格"模式设置具体的表格属性，"扩展表格"模式是用于临时添加表格的单元格边距和间距并增加表格边框以简化编
辑的一种功能。特别需要指出的是，它使您能够精确地放置插入点，而不会意外选择错误的表格或其它表格内容。
注意在"扩展表格"模式下完成对表格属性的设置后，应总是返回到"标准"
模式。"扩展表格"模式不属于所见即所得环境，因此某些操作(如调整大小)不会得到预期的结果。选择"查看">"表格模式">"扩展表格模式"。
注意如果出现"开始使用扩展表格模式"对话框，请单击"确定"。
在第一个表格的第一行内单击一次。
在"属性"检查器("窗口">"属性")的"单元格高度"文本框中输入90，然后按Enter 键(Windows) 或Return 键(Macintosh)。
注意如果未出现"单元格高度"文本框，请单击"属性"检查器右下角的展开箭头。在第一个表格的第二行内单击一次。
在"属性"检查器的"单元格高度"文本框中输入166，然后按Enter 键(Windows) 或Return 键(Macintosh)。在第一个表格的第三行内单击一次。
在"属性"检查器的"单元格高度"文本框中输入24，然后按Enter 键(Windows) 或Return 键(Macintosh)。现在第一个表格中的三行应具有不同的高度。
接下来，您将设置第二个表格(该表格包含三列)的属性。在第二个表格的第一列内单击一次。
在"属性"检查器的"单元格宽度"文本框中输入140，然后按Enter 键(Windows) 或Return 键(Macintosh)。
在第二个表格的第二列内单击一次。在"属性"检查器的"单元格宽度"文本框中输入230，然后按Enter 键(Windows) 或Return 键(Macintosh)。
将第三列的宽度设置为330 个像素。
如果已打开表格选择器("查看">"可视化助理">"表格宽度")，将能看到刚才在各个表格列上输入的三个像素值。
您无需为这个表格的单元格输入任何高度值，因为这些单元格的高度将取决于您以后添加的内容。最后，在最后一个表格(该表格包含一行和一列)内单击一次。
在"属性"检查器的"单元格高度"文本框中输入24，然后按Enter 键(Windows) 或Return 键(Macintosh)。您的布局现在应如下所示：
单击"文档"窗口顶部的"退出扩展表格模式"链接，返回到"标准"模式。保存页面。
插入图像占位符图像占位符是在准备好将最终图形添加到Web 页面之前使用的图形。在对Web 页面进行布局时图像占位符很有用，因为通过使用图像占位符，您可以在真正创建图像之前确定图像在页面上的位置。
在文档窗口中，在第一个表格的第一行内单击一次。
选择"插入">"图像对象">"图像占位符"。在"图像占位符"对话框中，执行下面的操作：在"名称"文本框中，键入banner_graphic。在"宽度"文本框中，输入700。在"高度"文本框中，输入90。单击颜色框并从颜色选择器中选择一种颜色。在本教程中，我们选择了红棕色(#993300)。
保留"替换文本"文本框为空。关于…关于替换文本的说明替换文本是W eb 页面上的图像的文字描述。它属于HTML 代码，不会显示在页面上。对于大多数图像，提供替换文本是很重要的，这样使用屏幕阅读器或只显示文本的浏览器用户就可以访问这些图像所提供的文本信息。而对于仅显示Web 站点徽标的横幅图形，无需提供替换文本。将"图像占位符"对话框中的"替换文本"文本框保留为空时，Dreamweaver 会在img 标签中添加一个alt="" 属性。以后，如果您要向某个图像添加替换文本，就可以选择该图像并在"属性"检查器中输入替换文本。例如，如果以后您想更改徽标以包括电话号码或地址，则能够以替换文本方式提供此信息。单击"确定"。
图像占位符出现在第一个表格内。图像占位符显示最终放置于此处的图像的标签和大小属性。
注意当在浏览器中查看时，不显示图像占位符的标签文字和大小文本。
保存页面。
关于…关于图像占位符图像占位符是在将最终图形添加到Web 页面之前使用的临时图形;它不是显示在浏览器中的图形图像。在您发布站点之前，应该用适用于Web 的图形文件(例如GIF 或JPEG)替换所有添加的图像占位符。
如果您有Macromedia Fireworks，则可以根据Dreamweaver 图像占位符创建新的图形。当您选择图像占位符并在"属性"检查器中单击"创建"按钮时，F ireworks 将打开并呈现一个新的画布。新图像的尺寸设置为与占位符图像相同的大小。接着，您可以随意创建并编辑图像，并替换Dreamweaver 中的占位符图像。向页面添加颜色
现在，您将通过设置某些表格单元格以及页面背景的颜色，向页面添加更
多颜色。
在上述包含三列的表格的第一个单元格内单击一次。单击标签选择器中的
标签(单元格标签)以选择该单元格。
在"属性"检查器("窗口">"属性")中，在"背景颜色"文本框内单击一次。
"背景颜色"文本框位于"背景颜色"(Bg) 颜色框旁。
注意如果未出现"背景颜色"文本框，请单击"属性"检查器右下角的展开箭头。在"背景颜色"文本框中，输入十六进制值#993300，然后按Enter 键(Windows) 或Return 键(Macintosh)。
表格单元格的颜色即变为红棕色。在上述包含三列的表格的第二个单
元格内单击一次。单击标签选择器中的标签(单元格标签)以选择该单元
格。在"属性"检查器中，在"背景颜色"文本框内单击一次，输入十六进制
值#F7EEDF，然后按Enter 键(Windows) 或Return 键(Macintosh)。表格
单元格的颜色即变为浅棕色。
重复第5-7 步，将第三个表格单元格的颜色也更改为浅棕色。
设置完这三个单元格的颜色后，单击一次表格的外部，取消选择该表格。
接下来，您将通过修改页面属性来更改整个页面的背景颜色。通过"页面属性"对话框可以设置一些页面属性，包括页面字体的大小和颜色、已访问链接的颜色以及页面边距等。选择"修改">"页面属性"。
在"页面属性"对话框的"外观"类别中，单击"背景颜色"颜色框，然后从颜色选择器中选择黑色(#000000)。
关于…选择颜色在HTML 中，颜色或者表示成十六进制值(如#FF00 00)或者表示为颜色名称(如红色)。网页安全色是指使用256 色模式时，无论在Windows 还是在Macintosh 系统中，在Netscape Navigator 和Microsoft Int ernet Explorer 中都显示相同的颜色。有216 种常见颜色，而且任何结合了0 0、33、66、99、CC 或FF 对(RGB 值分别为0、51、102、153、204 和25 5)的十六进制值都代表网页安全色。
在Dreamweaver 中，可以通过在相应的文本框中输入十六进制值或从颜色选择器中选择颜色来选择颜色。颜色选择器使用216 色Web 安全的调色板;从此调色板选择颜色即显示颜色的十六进制值。若要使用颜色选择器，只需单击颜色框并使用滴管选择颜色。
您还可以使用颜色选择器匹配颜色。例如，如果页面上的某一图像包含某种蓝色阴影，并且您希望表格单元格的背景颜色与之匹配，那么可以选择该表格单元格，单击颜色框打开颜色选择器，将滴管移动到图像的蓝色阴影上，并单击鼠标按钮。颜色选择器将使用与通过滴管单击的颜色最接近的匹配颜色来填充您选择的区域。如果您通过这种方法选择颜色，颜色选择器为您选择的颜色可能不是网页安全色。单击"确定"，页面的背景即变为黑色。保存您的工作。
您的页面布局现已完成。该布局包含一些表格，用于放置各种资源，如图像、文本和Flash 视频(FLV) 文件。在下一教程中，即教程：向页面添加内容中，您将学习如何使用Dreamweaver 提供的各种插入功能向页面添加资源。
创建页面布局之后，您就可以将资源添加到页面。您将从添加图像开始。可以在Dreamweaver 中使用多种方法向Web 页面添加图像。本文将介绍使用不同的方法将四个不同的图像添加到Cafe Townsend 的索引页。替换图像占位符在Dreamweaver 中创建的index.html 文件。双击页面顶部的图像占位符banner_graphic。在"选择图像源文件"对话框中，浏览至您定义为站点根文件夹的cafe_town
send 文件夹中的images 文件夹。选择banner_graphic.jpg 文件并单击"确定
"。
Dreamwe aver 将图像占位符替换为Cafe Townsend 的横幅图形。
在表格外单击一次以取消选中该图像。保存该页("文件">"保存")。
使用"插入"菜单插入图像在第一个表格的第三行(低于刚插入的横幅
图形两行，彩色表格单元格之上)内单击一次。选择"插入">"图像"。
在"选择图像源文件"对话框中，浏览至cafe_townsend 文件夹中的images 文件夹，选择body_main_header.gif 文件，然后单击"确定"。注意如果出现"图像标签辅助功能属性"对话框，则单击"确定"。
一个长的彩色图形出现在该表格行中。它看上去更像表格单元格的背景色，而不是图形，但如果仔细看，您将看到该图形具有圆角。添加完所有资源之后，这种圆角效果将使页面的下半部分呈现一种有趣的外观。通过拖动插入图像在页面上最后一个表格的最后一行(彩色表格单元格之下)中单击一次。
在"文件"面板("窗口">"文件")中，找到body_main_footer.gif 文件(它位于imag es 文件夹
中)，将该文件拖到最后一个表格的插入点。注意如果出现"图像标签辅助功能属性"对话框，则单击"确定"。
在表格外单击一次，并保存该页面("文件">"保存")。
从"资源"面板插入图像在由三列组成的表格(第一个浅棕色表格单元格)的中间一列内单击一次。在"属性"检查器("窗口">"属性")中，从"水平"弹出式菜单中选择"居中对齐"，然后从"垂直"弹出式菜单中选择"顶端"。该操作将表格单元格的内容对齐到单元格的中间，并使单元格的内容从单元格
顶端开始。
注意如果您无法看到"垂直"或"水平"弹出式菜单，请单击"属性"检查器右下角的展开箭头。
按一次Enter 键(Windows) 或Return 键(Macintosh)，创建更多空间。单击"文件"面板中的"资源"选项卡，或选择"窗口">"资源"，则会显示您的站点资源。
如果未选择"图像"视图，则单击"图像"以查看您的图像资源。
在"资源"面板中，选择street_sign.jpg 文件。关于"资源"面板可以使用"资源"面板查看和管理当前站点中的资源。"资源"面板显示与文档窗口中的活动文档相关联的站点资源。
必须首先定义一个本地站点，然后才能在"资源"面板中查看资源。
"资源"面板提供两种视图：站点列表显示您的站点的所有资源，包括在该站点的所有文档中使用的颜色和URL。收藏列表仅显示您明确选择的资源。若要将某个资源添加到"收藏"列表，请在"站点"列表中选择该资源，然后从"文件"面板右上角的"选项"菜单中选择"添加到收藏夹"。
在"资源"面板中单击某个资源时，预览区域会显示您所选择的资源。若要更改预览区域的大小，请拖动预览区域与资源列标题之间的分隔线。
执行下列操作之一：
将street_sign.jpg 文件拖到中心位置的表格单元格中的插入点。单击"资源"面板底部的"插入"。注意如果出现"图像标签辅助功能属性"对话框，则单击"确定"。street_sign.jpg 图形即显示在页面上。在表格外单击一次以取消选中该图像，保存该页。
教学内容：项目五表格的应用 任务3、使用表格布局网页课程：网页设计与制作 专业：计算机 授课课时： 1课时 教师： 授课班级： 单位： 授课时间： 教学设计说明：对于使用表格布局“个人写真”首页的任务，我在坚持以教
师为主导，学生为主体的教学原则下，通过复习提问——巩固旧知；创设情景——导入新课，明确任务；提出问题——分析任务，引发思考、课堂讨论、获取知识；讲授点拨——任务实施，引出重点；师生互动，归纳提高——攻破难点五个环节进行教学。在任务实施中采取小组合作完成的方法，以小组为整体回答问题及完成操作性任务，小组评比采用星级制，小组得星数量从多到少评为优、良、
D:/myweb素材 2 文本、图片等元素的布局，强调两个网页在制作中的区别是前者运用表格进行合理布局，可见布局在网页制作中的 提出本次课的任二、导入新课 看图观察对比2张网页效果图 图1 图2 【观看效果图】 观看老师展示的 张页面效果图。 【学生感受】 学 网 重要作用。 学 学习任务。
首页效果图 请同学们观察首页的布局，分析 结构，得出首页表 向学生展示首页三、进入新课 1、任务分析 2、任务实施 （一）、插入布局页面的表格并在表格、单元 格属性面板中设置表格 【操作步骤】 步骤1：单击菜单栏[插入记录]/[表格]，设 【学生讨论】 在教师的引导下， 分析、 布局规律。
请学生到教师机上演示表格四的 巡回检查学生制作，并针对制作过程出现问题进 引导学生建立调整表格结构的思 软 教师巡回检查学生制作，并针对制作过程出现问 指置：1*1，边框、边距、间距：0； 步骤2：单击状态栏[table]标签，设置表格 对齐方式为“居中”； 步骤3：单击状态栏[td]标签，设置单元格高； 步骤4：表格2、3、4的创建方法同上。 【提出问题】 如果表格属性填充、间距、边框不设为0是 什么效果？ 练习一：带着问题完成表格插入及属性设置 操作。 【总结】如果没有指明单元格边距和单元格 间距，大多数浏览器按单元格边距为1、单元 格间距为2来显示表格。 （二）调整表格结构 1、合并、拆分表格 【操作步骤】 步骤1：光标定位于表格2中，单击单元格属 性面板“拆分”按钮，将单元格差分成10列； 步骤2：按住ctrl键选择不连续单元格，设 置奇数单元格为80px,偶数单元格为20px; 2、表格嵌套 【操作步骤】 光标定位于表格3第二例，插入一个2*3，宽 度80%的表格。 【提出问题】 如何使嵌套的表格置于单元格的最顶端并居 中？ 练习二：完成表格的结构调整操作。 【总结】表格中的第二种对齐 单元格中的对象相对该单元格的对齐方式， 在[属性]面板中展开[水平对齐]/[垂直对齐]下 拉列表，选择相应的水平方向和垂直方向的 学生到前面操作， 及 在的普遍问题。 【学生操作】 带 成 设置操作。 总结表格的填充、 间距、 义。 学 整 法， 习操作方法， WORD 进行对比。 【学生操作】 带 成
第15课用表格为网页布局 绍兴市树人中学黄学锋1．设计思想 本节课的主题是对网页内容的排版。为了提高学生的建网兴趣，接受网页中表格的排版定位作用，设计了提供宠物——领养宠物——建立宠物园的教学过程，以“给宠物网上安家”、“不同的宠物需要不同大小的生活空间”等为引导，设计使用表格中不同大小的单元格来让宠物“和睦相处”。同时，请学生建立自已的开心宠物园，掌握网页的表格排版功能。 2．教材分析： 布局是网页制作的第一步，在本节教材中，先提出了规划布局，再进行表格定位，最后进行定位调整。这要求教学过程中需要对学生明确：对于网页中对象多而杂的情况，必需先规划、再定位，而用表格是一种很实用而有效的途径。 3．学性分析 在前几节课中，学生已学会了建立站点、新建主页、插入素材等操作。为了区别WORD和PPT等曾经排版方法，在学习网页排版时，创设一种情境能让学生对于多个网页对象能自然的用表格进行页面布局。通过这种教学方式，能让学生觉得网页表格排版理所当然，利用情境也大大提高了操作兴趣，在操作中掌握了技能。 4、教学目标 知识目标：用表格排版主页使其达到页面整洁有序； 技能目标：在网页中插入表格并更改表格的属性； 情感目标：用表格排版网页解决了网页版面杂乱的问题，提示同学们凡事要有计划，做事要遵守规则，促进其做事的信心。 5．重点难点 重点：插入表格和更改表格属性。 难点：让学生灵活掌握排列表格和设置表格属性的方法。 6．教学策略与手段 以网络流行的开心菜园、开心农场为引入，整堂课围绕建立自已的开心宠物园为主题对学生进行教学，最后通过若干学生作品展示来提高表格操作技巧。 7．环境与素材 1．教学环境：多媒体网络教室，配备投影仪;学生计算机中安装IE5.0以上版本及Frontpage2000以上中文版，要求能上因特网; 课本准备。 2．教学素材：为学生准备好一批宠物GIF图片。
制作网站——表格布局网页（第3-4课时） 教学目标： 1．知识与技能 （1）了解网页设计中表格的作用。 （2）掌握网页中表格的制作方法、表格属性的设置方法以及单元格的修饰与编辑方法，能 够在单元格中正确插入文字和图片。 （3）能够根据网页设计内容，正确布局表格的结构，掌握表格嵌套的设计方法。 2．过程与方法 （1）掌握软件学习中的对比学习法，培养学生迁移学习的能力。 （2）通过用表格结构设计网页，使学生进一步理解表格的作用、功能及网页设计方法的多 样性，培养学生的发散思维能力。 （3）通过自主探究，使学生掌握软件的使用规则，由摸索、探究性学习到形成性学习，培 养学生学会学习，驾御学习的能力。 3．情感态度与价值观 （1）通过对比学习使学生体验软件学习的一般方法及规律，提高学生自主学习信息技术的 能力。 （2）通过运用表格布局网页对象活动（各人根据网站主题，设计网页），进一步掌握各种 不同对象的属性设置方法和规律，体验创造的快乐。 （3）通过“动物——人类的朋友”表格页的设计与制作，再次激发学生关爱动物、保护动物的责任感，从而进一步树立共同改善人类生存环境的意识。 教学重点、难点： 1．教学重点： （1）了解表格在网页设计中的重要作用和功能。 （2）掌握插入、编辑表格的方法及表格的属性设置方法。 （3）掌握单元格的修饰与属性设置。 2．教学难点： 表格的嵌套设计在网页设计中的应用。 教学方法： 对比教学法、探究学习法、模仿学习法。 教学准备： 各自制作的站点文件夹，整理、归类相关素材并按要求摆放。 教学过程： 1．复习 以复习提问的方式来回顾站点的建立、网页的新建以及网页中文字、图像等对象的插入，学 生认真回顾，回答教师提问。为本节课教学做一定铺垫。 2．引入 （1）观看两个页面并进行比较：一个使用表格布局，但表格边框隐藏（看不出表格痕迹），其页面工整，文本、图片摆放对称，具有一定规律；另一个页面凌乱，图文混杂，摆放杂乱。你更喜欢怎样的页面布局？ 提出问题：有什么办法可以达到第一个页面的效果？ （2）观察第三个页面，内容与第一个页面相同，显现页面的表格边框。 学生讨论，交流，回顾Word中学习过的表格，明白表格在FrontPage中的作用。
第三章使用表格规划网页布局 一、相关概念 1、表格功能：显示数据，定位网页元素（布局） 2、表格的组成： 表格由行和列组成，行和列的交叉形成的矩形形状称之为单元格。单元格中的内容和边框之间的距离叫边距cellpadding。单元格和单元格之间的距离叫间距cellspacing。表格的边线叫做边框border。tr：代表一行。td：代表一个单元格。 3、占位符： 当我们插入表格后，每个单元格的默认的高度是12像素的，但这些单元格中什么也没有，它是用什么撑起高度的？这都是“占位符”的功劳。因为一个单元格在没有设置高度值的时候，代表着此单元格的高度值为0，但如果这样就没法对单元格进行操作了，所以，Dreamweaver会在每个单元格中插入代码“ ”，用以撑起单元格的高度。 当我们在单元格插入内容，或是设定了单元格的高度数值，这个代码就会消失。如果想要设置低于12像素的单元格的高度时，也必须先将这个占位代码给删除掉才行。 二、插入表格 两种方法：①“插入”→“表格”命令 ②单击“插入”面板的“常用”类别中的“表格”按钮上，打开“表格”对话框。
1、宽度（百分比，像素）：相对显示，绝对显示 2、边距/填充：文本内容与边框之间距离 3、间距：单元格与单元格之间距离 4、标题：设置表格标题位置 【例4-1】：新建一个网页文档，在文档中插入表格（9行2列）并插入表格内容 【练习1】：制作下面表格 【练习2】：如何让文本与表格边框有一定空白区间，如下： 5、插入嵌套表格：嵌套表格就是在已经存在的表格中插入的表格。插入嵌套表格的方法与插入表格的方法相同。 【练习3】：利用表格制作下图样式： 说明：由于大表格控制的是网页整体的布局，为使之在不同分辨率的显示器下能保持统一的
第13课用表格布局网页 一、教学目标： 1．知识与技能 （1）了解网页设计中表格的作用。 （2）掌握网页中表格的制作方法、表格属性的设置方法以及单元格的修饰与编辑方法，能够在单元格中正确插入文字和图片。 （3）能够根据网页设计内容，正确布局表格的结构，掌握表格嵌套的设计方法。2．过程与方法 （1）掌握软件学习中的对比学习法，培养学生迁移学习的能力。 （2）通过用表格结构设计网页，使学生进一步理解表格的作用、功能及网页设计方法的多样性，培养学生的发散思维能力。 （3）通过自主探究，使学生掌握软件的使用规则，由摸索、探究性学习到形成性学习，培养学生学会学习，驾御学习的能力。 3．情感态度与价值观 （1）通过对比学习使学生体验软件学习的一般方法及规律，提高学生自主学习信息技术的能力。 （2）通过运用表格布局网页对象活动（各人根据网站主题，设计网页），进一步掌握各种不同对象的属性设置方法和规律，体验创造的快乐。 （3）通过“动物——人类的朋友”表格页的设计与制作，再次激发学生关爱动物、保护动物的责任感，从而进一步树立共同改善人类生存环境的意识。 二、教学重点、难点： 1．教学重点： （1）了解表格在网页设计中的重要作用和功能。 （2）掌握插入、编辑表格的方法及表格的属性设置方法。 （3）掌握单元格的修饰与属性设置。 2．教学难点： 表格属性和单元格属性设置 三、教学方法： 对比教学法、探究学习法、模仿学习法。 四、教学过程： 1．复习 以复习提问的方式来回顾站点的建立、网页的新建以及网页中文字、图像等对象的插入，学生认真回顾，回答教师提问。为本节课教学做一定铺垫。 2．引入 （1）观看两个页面并进行比较：一个使用表格布局，但表格边框隐藏（看不出表格痕迹），其页面工整，文本、图片摆放对称，具有一定规律；另一个页面凌乱，图文混杂，摆放杂乱。你更喜欢怎样的页面布局？ 提出问题：有什么办法可以达到第一个页面的效果？ （2）观察第三个页面，内容与第一个页面相同，显现页面的表格边框。
FrontPage2003轻松布局网页 内容提要：很多朋友对FrontPage2003中增加的网页布局功能很感兴趣，现在我们一起来深入了解这一实用功能。用FrontPag 很多朋友对FrontPage2003中增加的网页布局功能很感兴趣，现在我们一起来深入了解这一实用功能。 用FrontPage2003的“布局表格和单元格”功能布局网页时，需要通过两部分来完成。 首先通过“布局表格”功能来为网页布局创建一个框架，然后通过“布局单元格”功能为该框架填充包含有网页内容（包括文本、图像、Web部件和其他元素）的区域，也就是单元格。 下面我们就以设置一个单位网站首页为例来了解一下用布局表格给网页布局的过程。 一、创建布局表格 1.创建布局表格 打开一个空白网页，并切换到“设计”视图下，单击“表格”菜单中的“布局表格和单元格”命令，随后在右侧弹出一个任务窗口（图1），在该任务窗口下面程序提供了多种表格布局模板，在此单击其中需要的模板即可将该模板添加到网页中。
2.绘制布局表格 如果你对模板中提供的布局表格不太满意，还可以用手工绘制的方法创建一个布局表格。创建时首先在“新建表格和单元格”项中单击“绘制布局表格”，随后将指针移到操作窗口最左端，然后拖动鼠标即可绘制表格。 3.设置表格属性 插入表格后，还需对表格属性进行设置。在“表格属性”项中设置该表格所需的属性。 提示：在设置表格时，如果要想覆盖网页的默认边距，并让布局表格跨到文档窗口的边缘，可以将表格中的各个边距的属性都设置为0。 在设计框架时经常需要调整某一行或列的属性，这时可以通过表格中列宽和行高的标签来完成。在操作窗口中单击布局表格需要调整的边框，每一侧都会出现显示列宽和行高的标
用表格布局网页教学设计 教学目标 （一）知识与技能目标： 1、理解用表格布局主页的作用。 2、掌握在网页中插入表格进行排版。 3、学生设置表格的属性。 （二）过程与方法目标： 通过欣赏和借鉴别人布局的主页，取长补短，帮助学生进一步了解表格的作用、功能以及网页设计方法的多样性，培养学生的发散思维能力。（三）情感、态度与价值观目标: 用表格排版网页解决了网页版面杂乱的问题，培养学生在遇到困难时灵活运用各种方法解决，促进其建站信心。 五、重点与难点 教学重点：插入表格和更改表格属性。 教学难点：让学生灵活掌握排列表格和设置表格属性的方法。 六、教学策略与手段 游戏竞赛法，对比教学法，任务驱动法，讲解演示法，自主探究学习法，网站教学法，小组合作法。 七、课前准备 1、学生的准备 带课本进教室 2、老师的教学准备 （1）精心准备课堂，做好教学设计 （2）预先做好问题的设计及突发事件的应对 3、教学环境的设计与布置 多媒体网络教室，学生计算机中安装IE5.0以上版本及Frontpage2000以上中文版 4、教学用具的设计与布置 准备好一些具有代表性的版面设计优美合理的网站主页面作为参考八、教学过程 （一）、课堂导入 教师：第一次给大家上课，老师想了解一下情况，不知我们班是男生信息技术水平高还是女生信息技术水平高？ 学生：……… 教师：自己说了都不算，这节课我们就来较量一下。怎么样？先从第一个环节拼图游戏开始。
邀请两位同学（男生和女生）上来，分别选择其中一个，帮我把网页上图片的位置调整好。一位没调整好，另一位调整好了。 先采访一下失败的原因，你觉得问题出在哪里，是不是按照Word中的方法在操作，那你觉得在Word中图片、文字可以怎么样，而在FrontPage 中呢？ 采访另一个，发表一下你的成功感言，你觉得你为什么会成功，是网页中的什么帮了你的忙？网页里面有表格。也说是说在网页中要给图片定位，就必须要用到表格，表格在网页中起到了一个怎么样的作用——可以定位对象，即可以为网页布局，那怎样操作大家想不想学，今天这节课我们一起来学习第十五课《用表格为网页布局》。 板书：用表格为网页布局 （二）、页面布局 其实一般的网站都是用表格来布局的，我们先来欣赏几个网站。 1，2欣赏以后分别看编辑图，都是有表格，除了都有表格外，老师还发现了一个共同点，从整体看，得出这张主页都是怎么样的一个图形，半包围型，老师今天的这个教学网站也是包包围型。除了这个半包围型，你还看到过哪些。然后得出任务一，小组合作，让学生结合平时上网的经历，设计一张页面布局图，（分层教学）1、可以自行设计，2、也可以参考课本。 板书：1、页面布局 绝大部分同学已经设计好了。我看有几位同学做得很不错，然后展示，让学生具体说说他的设计。 （三）制作主页 （1）布局图设计好了，那么如何在网页中插入表格进行布局，我们以前在哪里学习过表格的插入——Word，当时是怎么操作的，想起来了吗？（表格——插入——表格） 看任务二。 任务二，①根据任务要求，探究着在FrontPage中插入一个6X3的表格。谁来试试，马上请一个学生来演示。演示好后，下面同学自己操作。板书：2、制作主页 （2）老师这里也有几个页面布局，这些都是网页上常用的布局图，其实这些都是从6X3的表格中，使用了对单元格的操作转变过来的，单元格怎么操作——合并单元格，选择一个，让学生讨论一下，叫一个学生演示。 如果我要在这里增加一格，怎么操作，去掉这格又怎么操作？具体操作一个。（三种操作都讲讲菜单、右键、手绘） ②把你自己刚才的创意布局用表格的形式呈现在网页上。 任务三：今天来了这么多老师，你能不能用刚才的布局图，做一张宣传
第十二课用表格为网页布局教学设计 1教学目标 知识与技能: 1)了解表格在网页设计中的作用; 2)掌握网页中表格的制作方法、表格属性的设置方法以及单元格属性的设置方法,能够在单元格中正确插入文字。 3)能够根据网页设计内容,正确布局表格的结构,掌握表格嵌套的设计方法。 过程与方法： 通过对常见网页布局认识,了解网页板块分布结构,通过表格设计网页,掌握网页制作基本思路。 情感与价值观： 学生通过掌握利用表格设计网页思路,打破网页设计难度并激发网页创作的积极性。 2学情分析 学生通过上一节课准备的素材,如何组织用网页形式表现出来,这是学生期待的;另外sharepoint designer 2013软件与word界面相似,学生很容易迁移,技术入门会相对简单,主要是要有一个熟悉过程。学生通过网页制作设计思路形成,增强网页设计的积极性。 3重点难点 1)掌握插入、编辑表格的方法及表格属性设置; 2)掌握单元格拆分的方法及属性设置; 4教学过程 活动1【导入】课堂引入 我们上网主要是访问网络上网页资源,它包括丰富的资源,页面上有很多栏目板块。【展示幻灯片第1页】 提问1:哪个是网页标题栏、菜单栏、主题部分; 提问2:主题部分分开几个板块? 提问3:视觉中心在哪个位置? 活动2【活动】网页集中常见类型分析 分别请学生回答几种类型包括包围型、半包围型、主题突出型、导航型等四种; 活动3【讲授】小结网页布局特点 总结:网页布局要求简洁、有序、方便,注意浏览者视觉中心。
活动4【活动】复习新建站点 第1步:找到制作网页的软件SharePoint Designer;并新建站点。 任务1:新建站点; 活动5【活动】表格插入与内容填充 第2步: 插入表格 填充文字和图片到表格单元格中; 任务2:插入表格并填充各板块内容; 活动6【活动】解决学生存在问题 教师巡视学生操作情况并发现问题?请几位同学上来帮忙演示操作。 1)导航菜单用文字空格分隔开,而不是用单元格拆分; 2)单元格大小调整很难均匀; 学生上台演示操作解决学生存在困难。 【操作】选中第二行,在菜单栏中选择“表格”->“修改”->“拆分单元格”,设置列数为“5”问题2:单【操作】选择需要均匀分布的单元格,右击->”修改”->平均宽度。 活动7【活动】调整网页大小和表格大小 现在我们将做好的网页在浏览器里面查看一下效果; 提问:网页浏览有什么问题? 【教师演示】表格宽度修改操作。 缩小浏览宽度后请学生观察? 教师演示网页大小修改操作步骤 任务4:修改表格大小为960像素宽度;网页大小修改为960像素 活动8【活动】作业上交 要求上交站点文件夹
[html]表格布局之实例版 | [<<][>>] 前面我们讲了html表格的基础知识，今天我们通过一个实例让大家更清晰的了解下表格的用途。 例如：我们做一个简单的网站布局，代码如下：
| 网站名称 | ||
| 网站标题 | 搜索框 | |
| 左边 | 中间 | 右边 |
| 网站底部信息 | ||
这是一张整体的表格，第一行和第四行分别跨度了三列，这里用 colspan="3"来限制，而第二行的“搜索框”占用了两列的位置，用colspan="2"控制；align="center"是对表格内文字的对齐限制，center表示中间，right 表示靠右，left靠左。 表格的基础设置，可以参考： [html]利用表格规划网站布局 [html]如何制作多行多列的表格 [html]设定表格的尺寸和边框 如果你现在可以根据自己的想法制作出一个表格了，那么你就是向自己制作模板迈近了一步。^o^ 表格布局现在仍然很多人在用，方便实在。 网页设计现有两种布局方法，一种即是表格布局，另一种是现在W3C极力推荐的CSS布局。不过，就目前来说，由于xhtml并未完全占据主流，表格布局依然是大多数网页设计师的首选。 你所描述的问题属于表格的对齐问题，解决方式有以下几种： 如果两个表格的宽度不一致，那么选择默认的对齐方式，也即左对齐，在html 中的标签和属性是：
《用表格为网页布局》教学设计《用表格为网页布局》是浙江教育出版社信息技术教材八年级上册第三单元第十五课的内容。本课是在学生学习建立网站站点后，开始尝试做第一张网页。通过本课的学习，是对表格知识的巩固和深入，更重要的是为后面的网页制作打下基础，所以本课是本单元的重点，起到承上启下的作用。前阶段学生已经学习了文本编辑、图片插入、网络基本知识、文件操作等内容，很多知识都可以迁移到本课来。八年级学生对电脑基本操作已经不再陌生，已经能够独立完成一定要求的学习任务，但是学生对于特定任务进行分析，整体规划能力相对还是比较欠缺的。本节课教学的作业设计中，我将注重培养学生这个方面的能力。根据课程标准和教材内容，我将本课的教学目标设计成三个方面： 知识与技能目标： 1、了解主页布局的常见布局图，并明确主页设计的基本要素； 2、理解用表格排版主页的作用； 3、掌握在网页中插入表格进行排版的技能； 4、学会设置表格属性，对表格进行编辑修改。 过程与方法目标： 通过欣赏、借鉴他人的主页布局，取长补短，为自己的主页布局做铺垫。 情感、态度与价值观目标： 1、通过作品欣赏，让学生意识到取长补短的可贵性，及在借鉴基础上的创新的重要性； 2、用表格排版网页解决网页版面杂乱问题，培养在遇到困难时灵活运用各种方法解决，强化建站信心。 为了实现这个教学目标，我将教学重点确定尾插入表格进行排版和更改表格属性。根据学生的思维障碍和学习情况的分析，我将难点定位于灵活掌握排列表格和设置表格属性。只有正确设置了表格的属性，才能美化和完善网页的布局。为了更好的突出教学重点，突破教学难点，圆满的完成教学任务，我在课前截取了典型的旅游网页图片素材并设置成框架形式让学生一目了然地看到表格所起的作用，并设置了几个学生需要突破的任务。 信息技术课是培养学生对信息技术的兴趣和意识，使学生养成良好的信息素养为宗旨，强调学生的自主学习和研究学习。上新课前，我要求学生两两合作，通过传统手工绘制草图的学习方式，设计你需要建立网页的框架布局，同时学会和与他人合作。为了让学生主动的参与学习，我在设计教学流程时，准备以学生“任务驱动”为主线，以教师为主导，以学生为主体，通过学生自主探究，合作交流完成教学任务。根据教学内容和学情的分析，本课我采用的教学方法有：讲解、练习、任务驱动、小组合作，学生可以通过小组合作、给定的任务等将本课学习用于实际操
《应用表格布局网页结构》教案 一、教学目标 1、知识与技能： （1）了解表格网页的作用； （2）掌握网页中表格的制作方法，表格属性的属性设置方法； （3）能根据网页设计内容，正确布局表格的结构； （4）尝试根据内容需要设计表格布局网页页面。 2、过程与方法： （1）利用对比，加深学生对表格布局网页的认识； （2）通过用表格结构设计网页，使学生进一步理解表格的作用、功能及网页设计方法；（3）通过自主探究，使学生掌握软件的使用规则，培养学生自主学习的能力。 3、情感态度与价值观： （1）通过实践创作的过程，形成主动学习和利用信息技术、参与信息作品创作的态度；（2）培养学生注重吸取成功的经验，提高本身的信息素养。 二、教学重点 1、表格的制作及设置方法； 2、根据实际情况设计并应用表格布局网页。 三、教学难点 1、应用表格布局网页页面的意识； 2、合理制作表格，实现页面布局。 四、教学方法 教师讲解、演示、与学生任务驱动、合作学习相结合。 五、教学过程 教学过程 教师活动 学生活动 课前准备 将“学习素材”文件夹发送到学生机桌面； 打开并预习本课内容。 一、对比，引入新课 1、明确表格在网页制作时的作用：页面规划 （1）展示两个页面（1.htm和2.htm）并进行比较： 提问：①这2个网页，你喜欢哪个？为什么？
②网页中的文字、图像对象如何插入？ ③在Frontpage中打开2张网页，观察有什么不一样。 总结：这些线就是表格线，在做网页时，可以利用表格布局网页结构。 （2）引出本课内容：探索用表格来布局网页的页面。 （3）明确本课的任务：使用表格制作网页。 学生小组交流、讨论，对比加深印象，感受表格布局网页的作用 发现表格可以布局页面 明确本课内容 二、小组合作，体会用表格布局网页 2、模仿用表格布局网页页面结构 （1）引导学生回忆Word中学过的表格内容，提示学生表格操作跟Word中具有很大的相通之处； 提问：还记得哪些表格的编辑方法？ （2）展示效果页，引导学生分析页面的结构，探索需要制作表格的结构； （3）讲解演示表格的制作及调整； （4）布置学生完成任务一：“心憩空间”网页 （5）展示成功学生的作品，引出表格属性的设置； 如：行列的插入、删除、单元格的合并、拆分、调整大小等。 根据网页内容来规划所需表格结构，了解网页中表格制作及设置的方法。 学生小组合作，完成网页“chushi.htm” 三、小组合作，尝试用表格布局网页 3、小组交流并独立制作表格布局网页 （1）刚才我们一起体会用表格布局网页的网面结构：先分析确定所需表格的结构，然后根据实际制作设置表格布局网页页面结构。接下来我们就来尝试用表格布局我们的网页了；引入用表格布局“多彩的生物”网页； （2）引导学生分析确定网页的表格结构； （3）布置学生完成任务二：制作“多彩的生物”网页；可以根据自己的设计对网页进行适当的调整； 掌握根据网页确定所需表格的结构 能根据网页规划表格 小组合作讨论，根据学案提供的参考表格确定“多彩的生物”网页的表格结构，再独立完成图片、文字的插入。 四、作品展示交流与课堂总结
巧用表格来布局 【学科领域】本教案所适用的学科为八年级信息技术学科。 【内容概述】在用FrontPage制作网页的过程中，良好的版面设计是使网页美观的要素之一。在本课的学习中，学生通过比较，了解使用表格可以合理布局网页空间，起到美化网页的作用。 【学习目标】 1．知识与技能：熟悉表格在网页编辑中的作用；掌握用菜单命令和工具按钮插入表格的方法；学会用菜单命令、快捷菜单命令、鼠标操作等不同的方法对表格进行编辑。 2．过程与方法：通过知识迁移，培养学生利用已学过的知识进行自主学习的能力；利用表格使网页布局合理、美观，从而让学生对网页制作更有兴趣。 3．情感态度价值观：培养学生独立思考、自主学习、合作讨论的能力，通过自己探究问题，进一步树立学生学习信息技术的自信，提高学生学习网页制作的兴趣。 【课时安排】：1课时。 【教学重难点】： 1、重点：表格在FrontPage中的作用；表格的插入与编辑；“表格”的菜单命令。 2、难点：表格属性、单元格属性。 【教学过程】： 一、教学表格的插入
1．直觉判断 （1）观看两个页面进行比较：一个是用表格存放文本、图片，表格边框隐藏，页面美观；一个是上节课制作的页面，有图有文但没有表格的页面。 提出问题，学生讨论，有什么办法可以达到第一个页面的效果？（2）观察第三个页面（用表格存放文本、图片，但表格边框未隐藏的网页），告诉学生其实有一种方法很简单，而且利用的是在学习Word时用过的一种工具，这就是表格，但是在FrontPage中表格的作用比Word中作用更大了。 2．任务驱动、知识迁移、观察总结 布置任务1：回忆过去学Word时是如何插入一个3行2列的表格的，尝试一下在FrontPage中是不是可以用同样的方式插入这样的表格。并仿照刚才观看的第三个页面将“我的第一个网页”进行修改。遇到问题可查阅书上“插入表格”的步骤。 小组讨论总结FrontPage中的表格比Word中有了什么更大的作用。 二、教学表格的编辑 1．推测、实践、证实（培养自主学习的方法） 提出问题：在Word和FrontPage中插入表格的方法是一样的，但是编辑表格是不是也一样呢？
利用表格进行网页页面的布局教学设计《利用表格进行网页页面的布局》教学设计 上海市蒙山中学夏勤 在教学过程中发现:学生在网页制作时，往往只重视网页内素材的添加，而忽略了素材间的整体布局效果，致使制作出的网页布局不合理美观，页面上的素材布局杂乱无章。为了解决这个问题，我设计了“如何利用表格进行网页页面的布局”这节课的内容。 本节课的教学对象是预备年级的学生，对于预备年级的学生来说，仅仅简单的讲解表格的使用，不利于学生对“利用表格布局网页页面”这一知识点的理解和实际信息技术应用能力的提高，因此，我在设计这节课的教法时，主要采用项目活动教学模式，整个项目活动通过比较、提问、引导、合作、展示、交流、评价等教学方法得以开展，激发了学生利用表格布局网页页面的积极性，培养和提高了学生辨别表格布局网页页面的能力、分析和解决如何利用表格布局网页页面的能力、审美能力、语言组织和表达能力、归纳能力、自主学习能力。 1( 先回顾网站制作的步骤，并展示两张素材相同而布局不同的网页，让学生进行比较、 分析、归纳出两张素材相同而整体页面效果不同的原因是其中一张网页是利用表格布 局了页面，从而引出本节课的课题——利用表格布局网页页面。 2( 师生继续分析页面效果好的那张网页，其布局页面的表格结构有几行几列，引出问 题:如何对表格进行处理而使页面布局更合理,即表格的编辑操作。 3( 教师以页面较杂乱的那张网页为例，进行插入表格、合并、拆分单元格等示范操作。
4( 学生以小组为单位根据实际情况，进行“利用表格布局网页页面”的实践操作练习。 教师针对不同水平的学生进行分层教学:对特殊学生，允许他们完成一张网页的表格 布局。教师给予较多的个别辅导机会。对天才学生，要求完成网站内多张网页的表格 布局。 5( 要求各小组将已经利用表格布局好的网页进行交流展示，各小组评价。以网页上各类 素材间整体布局的合理性、谐调性和美观程度为评价标准。达到加深学生对利用表格 布局网页的理解及提高解决实际问题的能力，同时激发学生的积极性，并从中获取成 功的体验。 6( 课堂小结则分成教师强调实践操作注意点和学生总结“利用表格布局网页”的重要性 两部分组成。 7( 为了巩固新知识及更好的布局网页页面，要求学生课后以小组为单位进行分工操作， 预先在草稿纸上设计好各自所负责网页页面的表格结构，以便上机操作时更快捷的完 成页面布局。
实验15 利用表格和框架技术进行网页布局设计 1.115.1 实验目的 1．掌握利用Adobe Dreamweaver CS6的表格进行网页布局设计的方法。 2．掌握利用Adobe Dreamweaver CS6的框架技术进行网页布局设计的方法。 1.215.2 实验内容 1．利用框架对个人站点网站重新进行设计。 2．利用表格对个人站点网站重新进行设计。 1.315.3 实验操作步骤 15.3.1 利用框架设计网页布局 利用框架设计网页布局就是利用框架技术重新设计实验14中的“我的小站”，将主页拆分为上中下部分，分别为top.html、middle.html和bottom.html。使得浏览“个人简介”和“我的学校”等页面时都能看到导航栏和底部版权联系信息。具体操作步骤如下： 1.新建站点：启动Adobe Dreamweaver CS6，单击“站点”菜单中的“新建站点”命令，则弹出“站点设置对象”对话框，如图15-1所示。在站点名称右边的文本框中填入站点名称“框架网页布局，在本地站点文件夹中填入D:\webs\myFrameSite（也可以指定其他位置）后，单击“保持”按钮，就创建了一个新的站点。 图15-1“站点设置对象”对话框
图15-2添加网页top.html、middle.html、bottom.html后效果 2.设计网页top.html、middle.html、bottom.html：在站点中添加网页文件并打开。如图15-2所示。参照实验14中的设计主页index.html步骤设计top.html、middle.html、bottom.html。各个页面的设计效果分别如图15-3~图15-5所示。 图15-3 网页top.html设计效果图
省淳中信息技术深度研课教学设计 【课题】 用表格进行页面布局 【课程标准】 1.理解WWW、网页、主页、网站的基本概念及其相互关系。 2.理解动态网页的概念，了解其工作过程。 3.能够使用常用的网页制作软件进行动态网页的制作与发布。 4.通过开发实践，学会简单网站的规划、设计、制作、发布与管理的基本方法。 5.能够根据网站主题要求设计评价指标并对常见网站的建设质量与运行状况进行评 价。 【学业水平测试内容和要求】 1.了解WWW、网页、主页、网站的概念及区别。 2.了解什么是静态网页和动态网页。 3.了解动态HTML技术和服务器端动态网页技术的基本知识。 4.了解网站开发的一般过程。 5.知道网站规划主要包含的内容，学会根据需求规划网站。 6.学会使用一种常用的网页制作软件制作网站，包括建立站点、新建网页、利用表格 布局网页、修饰文字、插入多媒体信息、建立超级链接、制作简单的网页动态效果 等。 7.了解如何在局域网或因特网上申请网站空间，发布网站。 8.了解简单维护网站的方法。 9.了解网站评价的几个主要方面，能使用评价量表进行网站评价。 【学情分析】 网络技术应用是普通高中信息技术选修模块。计算机网络的出现改变了人们的生活方式，对人类产生了深远的影响，网络技术的学习将帮助学生更好地合理地去使用它。课时安排为7课时，本节教学设计为第1课时。 大部分学生小学或初中有了一定的计算机基础，掌握了计算机的基本操作技能，能够使用一些常用软件，并且对网络有一定的了解，但是也有个别零起点学生。因此，在教学中要兼顾到不同层次的学生。这一章在学业水平测试中要求较高，要求学生理解并能独立操作、迁移应用与熟练操作。所以，在课时安排上有所侧重，在教学设计中也要着重锻炼学生的操作能力。 【学习目标】 1．通过学生网页与示例网页的对比，引导学生发现及归纳其差异：文字与图片位置合理，确定问题，即需要对网页进行页面布局。 2．通过阅读材料和自主探究，归纳和总结网页布局的形式和方法。 3．通过分析示例网页，找出解决上一问题的方法之一，即用表格进行页面布局。 4．通过学生自主探究，掌握表格的建立、边框粗细的设置、宽度高度的设置、单元格的合并与拆分。 5．通过网页、表格、单元格的背景色设置，让学生在操作中发现并总结出网页、表格、
《应用表格布局网页结构》教学实录 ［作者：阜宁县明达中学姜秀菊来源：本站原 创点击数：1078 更新时间：2010-6-12 文章录 入：yc_chl ］ 知识与技能目标： 1、了解表格在网页设计中的作用。 2、掌握网页中表格的制作方法、表格属性的设置方法以及单元格的修饰与编辑方法，能够在单元格中正确插入文字和图片。 3、区分表格属性和单元格属性，并掌握属性的设置。 4、能够根据网页设计内容，正确布局表格的结构，掌握表格嵌套的设计方法。 过程与方法目标： 1、利用对比学习，形成知识迁移的能力 2、通过用表格布局网页，进一步理解表格的作用、功能 3、通过对比学习与自主探究，了解并掌握软件学习的一般方法及规律，提升自主学习能力 4、通过任务驱动学会 情感态度与价值观目标： 1、通过对用表格布局网页的学习，增强审美观，提高对学习网页制作的兴趣。 2、通过“保护动物”网站的制作，激发学生关爱动物、保护动物的责任感，从而进一步树立共同改善人类生存环境的意识。 教学重点与难点： 1、重点。 （1）了解表格在网页设计中的重要作用。 （2）掌握插入、编辑表格的方法及表格的属性设置方法。 （3）掌握单元格的修饰属性的设置。 2、难点。 表格的嵌套在网页设计的重要作用。 教学准备：各自制作的站点文件夹，整理、归类相关素材并按要求摆放。 教学过程 一、导入：
播放歌曲“一个真实的故事”，激发学生兴趣，与学生互动。 师：这首歌里讲的是什么样的故事呢？ 生回答。一个姑娘救丹顶鹤的故事 师：丹顶鹤，它是一种珍稀动物，同学们还知道哪些珍稀动物呢？是从哪里知道这些珍稀动物的呢？ 生抢答。扬子鳄，大鲵，金丝猴，丹顶鹤…… 师：很好，同学们知道的可真多啊，是从哪里知道这些珍稀动物的呢？ 生回答：书，报纸，网络…… 师：同学们知道，但是很多人不知道呢，更不知道人与动物要和谐相处，我们是不是有必要做些宣传。为保护珍稀动物尽一份力？ 生：对 师：但是这么多珍稀动物在网页上应该如何分布呢？ 展示：两张素材相同布局不同的网页（动物——人类的朋友）。（然后将两个页面并排显示在投影上） 提问：同学们，请大家比较一下这两个网页，相互之间可以讨论一下，那一个网页布局更合理，哪张较美观？较美观的那张网页是怎么布局的？（请学生回答，请坐。） 【设计意图】展示作品，激发学生兴趣；引导学生发现问题，并学会分析问题。 观察和比较两张素材相同布局不同的网页，分析布局网页页面的元素。这两个网页，通过比较会发现：一个是页面工整，文本、图片摆放对称且有一定规律，使用表格布局，但表格边框隐藏（看不出表格痕迹）；一个是页面凌乱，有图有文，摆放杂乱，提出问题，有什么办法可以达到第一个页面的效果？
使用表格布局制作欢迎光临我的小屋网页步骤 1.设置页面字体格式14px 2.在页面中插入1个3行1列的表格，宽度774px 3.在表格的第1行插入图像topbar0.jpg 4.在表格的第2行输入如图所示的文字 5. 选中单元格在属性面板中设置背景颜色#66FFFF 选中这些文字，在CSS面板中编辑新规则设置如下图所示 单击确定按钮进入下图所示 单击确定按钮版权信息设置完毕。 6.将第2行拆分成2列，左侧列宽212排序，右侧562px 7. 选中左侧单元格，在CSS面板中设置新规则如图所示
单击确定按钮进一步设置如下图所示 单击确定按钮单元格背景设置完毕。 8. 将左侧单元格设置水平对齐：居中对齐；垂直对齐：顶端 9. 插入1个9行1列的表格，宽度212px；选中所有单元格，设置水平对齐：居中对齐；垂直：默认或居中 在表格的第1行插入图像menu.gif 然后适当拉高单元格 在表格的第2行插入时间 将表格的第3行适当拉高 将表格的第4-8行设置单元格高度50 将第4行拆分为3列，列宽33%，33%，33%；第5-8行同样设置 如图所示将单元格进行合并；然后依次插入鼠标经过图像 10. 将右侧单元格拆分成5行1列 第1行水平：居中对齐；垂直：底部。输入文字“欢迎光临我的小屋” 选中文字在CSS面板中设置字体样式：title 字体：隶书字号24px 颜色#686868 第2行插入图片090.gif，适当设置单元格的高度
第3行插入图片200542313154753935_0hxRJjK7O018.gif，适当调整单元格高度第4行插入图片27_4200_107.gif，适当调整单元格高度 第5行设置水平：水平居中；垂直：居中。 输入文字 刚刚无意风吹起 花瓣随着风落地 我看见多么美的一场樱花雨 选中文字，切换到“代码”编辑窗口，在文字的前后进行如下图设置 将窗口切换回“设计”为文字设置一个比较好看的字体样式 单击确定按钮，进一步设置如下图
《应用表格布局网页结构》 教学目标 （一）知识与技能目标： 1、了解表格在网页设计中的作用。 2、掌握网页中表格的制作方法、表格属性的设置方法以及单元格的修饰与编辑方法，能够在单元格中正确插入文字和图片。 3、区分表格属性和单元格属性，并掌握属性的设置。 4、能够根据网页设计内容，正确布局表格的结构，掌握表格嵌套的设计方法。（二）过程与方法目标： 1、利用对比学习，形成知识迁移的能力 2、通过用表格布局网页，进一步理解表格的作用、功能 3、通过对比学习与自主探究，了解并掌握软件学习的一般方法及规律，提升自主学习能力 4、通过任务驱动学会应用表格布局网页结构。 （三）情感、态度与价值观目标: 1、通过对用表格布局网页的学习，增强审美观，提高对学习网页制作的兴趣。 2、通过“多彩的生物”网站的制作，激发学生关爱动物、保护动物的责任感，从而进一步树立共同改善人类生存环境的意识。 教学重点与难点 教学重点：了解表格在网页设计中的重要作用，插入表格和更改表格属性。 教学难点：让学生灵活掌握排列表格和设置表格属性的方法。表格的嵌套在网页设计的重要作用。 教学过程 一、课堂导入 展示：两张素材相同布局不同的网页（多彩的生物）。 提问：同学们，请大家比较一下这两个网页，相互之间可以讨论一下，哪一个网页布局更合理，哪张较美观？较美观的那张网页是怎么布局的？（请学生回答。）想一想：为什么一般我们在网页上看不到表格呢？——表格线隐藏设置。 【设计意图】展示作品，激发学生兴趣；引导学生发现问题，并学会分析问题。 观察和比较两张素材相同布局不同的网页，分析布局网页页面的元素。这两个网页，通过比较会发现：一个是页面工整，文本、图片摆放对称且有一定规律，使用表格布局，但表格边框隐藏（看不出表格痕迹）；一个是页面凌乱，有图有文，摆放杂乱，提出问题，有什么办法可以达到第一个页面的效果？这就是我们今天所要学习的内容《应用表格布局网页结构》 二、新授： 1、分析表格结构布局 展示有表格布局的网页，引导学生分析其表格结构，分析结构，得出表格的布局（几行几列，哪些行做了哪些处理）。