任务6 运用盒模型网页布局
《网页设计与制作》课程教学单元设计
教案：使用表格布局网页
教学内容：项目五表格的应用 任务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 进行对比。 【学生操作】 带 成
网页布局类型
网页常见布局 网页布局大致可分为“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、Flash型、变化型，下面分别论述。 1、“国”字型： 也可以称为“同”字型，是一些大型网站所喜欢的类型，即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列一些两小条内容，中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等。这种结构是我们在网上见到最多的一种结构类型。 2、拐角型： 这种结构与上一种其实只是形式上的区别，其实是很相近的，上面是标题及广告横幅，接下来的左侧是一窄列链接等，右列是很宽的正文，下
面也是一些网站的辅助信息。在这种类型中，一种很常见的类型是最上面是标题及广告，左侧是导航链接。 3、标题正文型： 这种类型即最上面是标题或类似的一些东西，下面是正文，比如一些文章页面或注册页面等就是这种类。 4、左右框架型： 这是一种左右为分别两页的框架结构，一般左面是导航链接，有时最上面会有一个小的标题或标致，右面是正文。我们见到的大部分的大型论坛都是这种结构的，有一些企业网站也喜欢采用。这种类型结构非常清晰，一目了然。 5、上下框架型： 与上面类似，区别仅仅在于是一种上下分为两页的框架。 6、综合框架型：
上页两种结构的结合，相对复杂的一种框架结构，较为常见的是类似于“拐角型”结构的，只是采用了框架结构。 7、封面型： 这种类型基本上是出现在一些网站的首页，大部分为一些精美的平面设计结合一些小的动画，放上几个简单的链接或者仅是一个“进入”的链接甚至直接在首页的图片上做链接而没有任何提示。这种类型大部分出现在企业网站和个人主页，如果说处理的好，会给人带来赏心悦目的感觉。 8、Flash型： 其实这与封面型结构是类似的，只是这种类型采用了目前非常游戏行的Flash，与封面型不同的是，由于Flash强大的功能，页面所表达的信息更丰富，其视觉效果及听觉效果如果处理得当，绝不差于传统的多媒体。
用表格为网页布局
第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中的作用。
网页常见的布局结构
https://www.sodocs.net/doc/0c18457197.html,/wangyesheji/wangyebuju/201102/28-6420.html手稿 https://www.sodocs.net/doc/0c18457197.html,/4327.html首页设计可用性 https://www.sodocs.net/doc/0c18457197.html,/?action=Public_Template_List&searchCategory=1模板欣赏https://www.sodocs.net/doc/0c18457197.html,/ js效果https://www.sodocs.net/doc/0c18457197.html,/sitebuilt/wytx.asp报价 https://www.sodocs.net/doc/0c18457197.html,/wangyetexiao/网页特效 https://www.sodocs.net/doc/0c18457197.html,/Products/SiteFactory/Function/网站系统 https://www.sodocs.net/doc/0c18457197.html,/国外付费素材网 https://www.sodocs.net/doc/0c18457197.html,/香港网络公司 https://www.sodocs.net/doc/0c18457197.html,/pswl/admin/main.php 用户名pswl 密码piq4on2m 电子电工 机械设备 家用电器 仪器仪表 五金加工 服装鞋帽 汽摩船舶 安全防护 礼品饰品 日用百货 广告包装 化工材料 化妆美容 建筑装修 交通运输 教育培训 节能环保 农林牧渔 商务服务 食品餐饮 休闲娱乐 办公文教 数码网络 医疗健康 机关社团 相关内容集中区域显示 就是将网页中所要表达的相近的栏目集中在一个区域显示，形成一种群体效应。 2. 栏目划分结构清晰、分开主次性，重为左，此为右 意思是将所要建立的网页栏目结构细分清晰，分开栏目的主次性、重要栏目以顶部、左侧排列排放，次要的栏目以底部、右侧排列排放。
框架网页的特点及制作方法.
框架是网页中经常使用的页面设计方式，框架的作用就是把网页在一个浏览器窗口下分割成几个不同的区域，实现在一个浏览器窗口中显示多个HTML页面。使用框架可以非常方便的完成导航工作，让网站的结构更加清晰，而且各个框架之间决不存在干扰问题。利用框架最大的特点就是使网站的风格一致。通常把一个网站中页面相同的部分单独制作成一个页面，作为框架结构的一个子框架的内容给整个网站公用。 一个框架结构有两部分网页文件构成： 框架（Frame）：框架是浏览器窗口中的一个区域，它可以显示与浏览器窗口的其余部分中所显示内容无关的网页文件。 框架集（Frameset）：框架集也是一个网页文件，它将一个窗口通过行和列的方式分割成多个框架，框架的多少根据具体有多少网页来决定，每个框架中要显示的就是不同的网页文件。 一、创建框架 在创建框架集或使用框架前，通过选择“查看/可视化助理/框架边框” 命令，使框架边框在文档窗口的设计视图中可见。 1、使用预制框架集 (1、新建一个HTML文件，在快捷工具栏选择“布局”，单击“框架” 按钮，在弹出的下拉菜单中选择“顶部和嵌套的左侧框架”。
（2）、使用鼠标直接从框架的左侧边缘河上边缘向中间拖动，直至合适的位置，这样顶部和嵌套的左侧框架就完成了。 2、鼠标拖动创建框架 （1）、新建普通网页，命名后将其打开。 （2）、把鼠标放到框架边框上，出现双箭头光标时拖拽框架边框， 可以垂直或水平分割网页。 二、、保存框架 每一个框架都有一个框架名称，可以用默认的框架名称，也可以在属性面板修改名称，我们采用系统默认的框架名称topFrame（上方）、leftFrame（左侧）、mainFrame（右侧）。 选择菜单栏>文件>保存全部，将框架集保存为index.html，上方框架保存为07.html，左侧框架保存为08.html，右侧框架保存为 09.html。
利用表格布局网页教学反思
《网页中的表格》教学反思 表格的作用在网页制作中非常重要，网页的布局都由表格来控制，本节课通过任务驱动式教学，启发并引导学生完成任务。首先，给学生展示网络上的许多漂亮的网页，将网页布局的布局进行大概的分类，让学生体验表格在网页制作中的强大作用。由于学生在Word中已经学习过如何进行表格的操作，应此，将此部分的内容迁移到Frontpage还是比较简单的，所以本课主要以学生的自主探索为主，教师讲解为辅进行。 本节课使用任务驱动式教学法，通过启发的方式引导学生完成任务，首先，给学生展示如何用表格控制网页，通过与word类比的方法让学生认识表格的组成结构，接着，给学生展示一张利用表格控制后做出来的网页，明确目标，激发学生的学习兴趣。在学生学习的过程中给学生准备一个学程导航，让学生每次阅读任务的步骤，遇到操作中的难点，教师再进行示范。 在自主学习中，有效地培养了学生的动手能力，大部分的学生都能迅速地完成操作。但是学生在知识迁移的过程中还有一些小问题，因此，在今后的备课中还要加强每一个操作小任务的设计，对每一个操作的环节，应该准备操作的效果图，让学生能够快速直接地发现自己的问题，尽快去寻找解决问题的方法。 在本节教学过程中，要注意每一个小任务的提出，都要事先出示表格效果图，让学生面对眼前的实际问题，指导学生看书去寻求解决问题的方法，随后教师示范，学生看着大屏幕跟着一起解决问题，效果良好。另外，要求学生试制作“双休日活动安排表”这一残缺不全的表格时，教师一定要巡视每个学生，必要时结合本节课的知识要点进行个别辅导，让学得不扎实的学生也能尝受到成功的喜悦，以达到大面积提高教学质量的目的。
第三章 使用表格规划网页布局
第三章使用表格规划网页布局 一、相关概念 1、表格功能：显示数据，定位网页元素（布局） 2、表格的组成： 表格由行和列组成，行和列的交叉形成的矩形形状称之为单元格。单元格中的内容和边框之间的距离叫边距cellpadding。单元格和单元格之间的距离叫间距cellspacing。表格的边线叫做边框border。tr：代表一行。td：代表一个单元格。 3、占位符： 当我们插入表格后，每个单元格的默认的高度是12像素的，但这些单元格中什么也没有，它是用什么撑起高度的？这都是“占位符”的功劳。因为一个单元格在没有设置高度值的时候，代表着此单元格的高度值为0，但如果这样就没法对单元格进行操作了，所以，Dreamweaver会在每个单元格中插入代码“ ”，用以撑起单元格的高度。 当我们在单元格插入内容，或是设定了单元格的高度数值，这个代码就会消失。如果想要设置低于12像素的单元格的高度时，也必须先将这个占位代码给删除掉才行。 二、插入表格 两种方法：①“插入”→“表格”命令 ②单击“插入”面板的“常用”类别中的“表格”按钮上，打开“表格”对话框。
1、宽度（百分比，像素）：相对显示，绝对显示 2、边距/填充：文本内容与边框之间距离 3、间距：单元格与单元格之间距离 4、标题：设置表格标题位置 【例4-1】：新建一个网页文档，在文档中插入表格（9行2列）并插入表格内容 【练习1】：制作下面表格 【练习2】：如何让文本与表格边框有一定空白区间，如下： 5、插入嵌套表格：嵌套表格就是在已经存在的表格中插入的表格。插入嵌套表格的方法与插入表格的方法相同。 【练习3】：利用表格制作下图样式： 说明：由于大表格控制的是网页整体的布局，为使之在不同分辨率的显示器下能保持统一的
使用框架布局页面
单元4——使用框架布局页面 学习目标： 理解框架布局的原理 掌握使用框架进行页面布局的方法 学习利用浮动框架嵌入插件 Dreamweaver CS3提供了一种很方便的可以进行网页布局的工具——框架。框架主要是用来把浏览器窗口划分为若干个区域，每个区域可以分别显示不同的网页。访问者浏览站点时，可以使某个区域的文档永远不更改，但可通过导航条的链接更改主要框架的内容。框架结构常被用在具有多个分类导航或多项复杂功能的Web页面上。 任务4.1 框架基本操作 在网页中，一个网页可以包含多个页面，此时需要用到框架。使用框架可以进行页面布局，把网页化分为几个区域。例如，一个水平框架用于放置Banner（也就是标题）；左垂直框架用于放置导航；右垂直框架用于放置正文。每一个框架单独使用一个网页，从而使页面设计简单化。框架除了用于页面布局，还可用于制作目录。包含框架的网页称为框架集。框架集定义了各个框架的结构、数量、大小和目标等属性。本章将介绍框架的使用方法。 4.1.1创建一个新的框架集网页 (1)运行Dreamweaver CS3，选择“文件”→“新建”命令，弹出“新建文档”对话框，在对话框中选择“示例中的页”→“框架集”→“上方固定，左侧嵌套”选项，如下图所示。 （2）单击“创建”按钮，弹出“框架标签辅助功能属性”对话框，如下图所示，在此可为每一个框架指定一个标题。
（3）单击“确定”按钮，即可创建一个上方固定，左侧嵌套的框架集，如下图所示。 4.1.2保存框架 每个框架包含一个文件，因此一个框架集会包含多个文件，在保存网页时，要将整个网页文档都保存下来。操作步骤如下： （1）选择“文件”→“保存全部”命令，整个框架边框会出现一个阴影框，同时会弹出“另存为”对话框，命名为“index.html”，表示整个框架集的名称。 （2）单击“保存”按钮，弹出第二个“另存为”对话框，右边框架内侧出现阴影，命名为“main.htlm”，表示右边框架即主框架的文件名。 （3）单击“保存”按钮，依次弹出第3个和第4个“另存为”对话框，分别命名为“left.html” 和“top.html”，表示左边框架和上方框架的文件名。如下图所示：
用表格布局网页
第13课用表格布局网页 一、教学目标： 1．知识与技能 （1）了解网页设计中表格的作用。 （2）掌握网页中表格的制作方法、表格属性的设置方法以及单元格的修饰与编辑方法，能够在单元格中正确插入文字和图片。 （3）能够根据网页设计内容，正确布局表格的结构，掌握表格嵌套的设计方法。2．过程与方法 （1）掌握软件学习中的对比学习法，培养学生迁移学习的能力。 （2）通过用表格结构设计网页，使学生进一步理解表格的作用、功能及网页设计方法的多样性，培养学生的发散思维能力。 （3）通过自主探究，使学生掌握软件的使用规则，由摸索、探究性学习到形成性学习，培养学生学会学习，驾御学习的能力。 3．情感态度与价值观 （1）通过对比学习使学生体验软件学习的一般方法及规律，提高学生自主学习信息技术的能力。 （2）通过运用表格布局网页对象活动（各人根据网站主题，设计网页），进一步掌握各种不同对象的属性设置方法和规律，体验创造的快乐。 （3）通过“动物——人类的朋友”表格页的设计与制作，再次激发学生关爱动物、保护动物的责任感，从而进一步树立共同改善人类生存环境的意识。 二、教学重点、难点： 1．教学重点： （1）了解表格在网页设计中的重要作用和功能。 （2）掌握插入、编辑表格的方法及表格的属性设置方法。 （3）掌握单元格的修饰与属性设置。 2．教学难点： 表格属性和单元格属性设置 三、教学方法： 对比教学法、探究学习法、模仿学习法。 四、教学过程： 1．复习 以复习提问的方式来回顾站点的建立、网页的新建以及网页中文字、图像等对象的插入，学生认真回顾，回答教师提问。为本节课教学做一定铺垫。 2．引入 （1）观看两个页面并进行比较：一个使用表格布局，但表格边框隐藏（看不出表格痕迹），其页面工整，文本、图片摆放对称，具有一定规律；另一个页面凌乱，图文混杂，摆放杂乱。你更喜欢怎样的页面布局？ 提出问题：有什么办法可以达到第一个页面的效果？ （2）观察第三个页面，内容与第一个页面相同，显现页面的表格边框。
FrontPage2003轻松布局网页
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的表格中，使用了对单元格的操作转变过来的，单元格怎么操作——合并单元格，选择一个，让学生讨论一下，叫一个学生演示。 如果我要在这里增加一格，怎么操作，去掉这格又怎么操作？具体操作一个。（三种操作都讲讲菜单、右键、手绘） ②把你自己刚才的创意布局用表格的形式呈现在网页上。 任务三：今天来了这么多老师，你能不能用刚才的布局图，做一张宣传
浙教版初中信息技术 第十二课 用表格为网页布局 教学设计 (4)
第十二课用表格为网页布局教学设计 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【活动】作业上交 要求上交站点文件夹
《用表格为网页布局》教学设计说课稿
《用表格为网页布局》教学设计《用表格为网页布局》是浙江教育出版社信息技术教材八年级上册第三单元第十五课的内容。本课是在学生学习建立网站站点后，开始尝试做第一张网页。通过本课的学习，是对表格知识的巩固和深入，更重要的是为后面的网页制作打下基础，所以本课是本单元的重点，起到承上启下的作用。前阶段学生已经学习了文本编辑、图片插入、网络基本知识、文件操作等内容，很多知识都可以迁移到本课来。八年级学生对电脑基本操作已经不再陌生，已经能够独立完成一定要求的学习任务，但是学生对于特定任务进行分析，整体规划能力相对还是比较欠缺的。本节课教学的作业设计中，我将注重培养学生这个方面的能力。根据课程标准和教材内容，我将本课的教学目标设计成三个方面： 知识与技能目标： 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）布置学生完成任务二：制作“多彩的生物”网页；可以根据自己的设计对网页进行适当的调整； 掌握根据网页确定所需表格的结构 能根据网页规划表格 小组合作讨论，根据学案提供的参考表格确定“多彩的生物”网页的表格结构，再独立完成图片、文字的插入。 四、作品展示交流与课堂总结
实验八 使用框架布局网页
实验八使用框架布局网页 【实验目的】使学生熟练掌握使用框架布局复杂的网页界面，设置框架集和框架的属性，在框架的网页文档中设计网页，并能在框架集的框架中添加超级链接，使页面在框架间相互访问。 【实验器材】安装有Windows 98/2000/xp；Dreamweaver CS3，Flash CS3，Fireworks CS3；IE浏览器，NetScape浏览器，IIS5.0 等软件的计算机。 【实验内容】 在你的个人站点“在线歌曲”栏目中的“MP3点播”网页文档中，使用框架布局网页界面，使得用户单击左侧导航栏中歌曲名称时，网页在右侧的框架中显示对应得MP3歌曲的播放器及其歌词。用户不管在点播最后哪一首歌曲，用户始终能够看到右侧的二级导航栏目。实验的内容包括如下3个方面： 在网页中插入一个顶部和嵌套的左侧框架集结构。 设置框架集的边框属性，设置被嵌套的左侧和右侧框架的滚动条属性，使其中的页面内容超过框架的区域时，在垂直放上出现滚动条。 在左侧的框架中添加添加超级链接，单击不同的链接时，其链接的目标网页在右侧框架中显示。 图8-1 实验任务的效果图 【实验步骤】 实验任务一：在网页中插入一个顶部和嵌套的左侧框架集结构，设置框架集及其中框架属性，并编辑、保存每个框架中的网页文档。
第1步：新建包含框架集的网页文件。在你的个人站点中，新建一个名为“Framesets.html”的网页文件，如图8-2所示。 图8-2 新建包含框架集的网页文件 第2步：插入框架结构。在DW的插入工具面板中，选择“布局”选项卡，单击其中的“框架”图表按钮，在其下拉的菜单列表中选择“顶部和嵌套的左侧框架集结构”菜单选项，如图8-3所示。 图8-3 插入框架的工具面板 第3步：设置框架标题属性。在系统弹出的标题属性对话框中，为其中的3个框架指定个性化的框架标题，如图8-4所示，然后单击“确定”按钮，完成框架标题属性，最后DW自动在网页设计窗口中插入一个如
使用表格布局网页
巧用表格来布局 【学科领域】本教案所适用的学科为八年级信息技术学科。 【内容概述】在用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.设置页面字体格式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( 学生以小组为单位根据实际情况，进行“利用表格布局网页页面”的实践操作练习。 教师针对不同水平的学生进行分层教学:对特殊学生，允许他们完成一张网页的表格 布局。教师给予较多的个别辅导机会。对天才学生，要求完成网站内多张网页的表格 布局。 5( 要求各小组将已经利用表格布局好的网页进行交流展示，各小组评价。以网页上各类 素材间整体布局的合理性、谐调性和美观程度为评价标准。达到加深学生对利用表格 布局网页的理解及提高解决实际问题的能力，同时激发学生的积极性，并从中获取成 功的体验。 6( 课堂小结则分成教师强调实践操作注意点和学生总结“利用表格布局网页”的重要性 两部分组成。 7( 为了巩固新知识及更好的布局网页页面，要求学生课后以小组为单位进行分工操作， 预先在草稿纸上设计好各自所负责网页页面的表格结构，以便上机操作时更快捷的完 成页面布局。