网页教案(div布局)

天津渤海职业技术学院教师教案

DIV+CSS布局

二、实例二电子相册

#hphoto {

w idth: 500px;

b ackground: url(framels.jpg) no-repeat left;

h eight: 160px;

}

#vphoto {

w idth: 500px;

b ackground: url(framept.jpg) no-repeat left;

h eight: 160px;

} #hphoto img {

h eight: 90px;

w idth: 135px;

b order: 1px solid #0099FF; m argin-top: 36px;

margin-left: 10px;

}

#vphoto img {

h eight: 135px;

w idth: 90px;

border: 1px solid #0099FF; m argin-top: 10px;

m argin-left: 34px;

}

#hphoto ul,#vphoto ul {

l ist-style: none;

f loat: left;

p adding: 0px;

m argin-top: 8px;

m argin-left: 15px;

f ont-size: 12px;

b order: 1px solid #00CCFF;

b ackground: #CCFFFF;

c olor: #0066FF;

}

#hphoto li,#vphoto li {

b ackground: #CCFFFF;

}

#hphoto .title,#vphoto .title {

b order-bottom: 1px solid #66CCFF;

l ine-height: 1.5;

p adding-left: 10px;

f ont-weight: bold;

}

网页布局设计

网页布局设计： 用户的视觉路径一般是：从上到下，从左到右。 好的视觉设计路径应该是顺应这样的用户习惯，糟糕的设计会让用户无所适从，焦点到处都是。 对用户引导的关键就在于怎么处理主次关系。就是对比，从视觉的角度上看：形状的大小，颜色，摆放的位置都会影响信息的重要与否。 从大的区块来看，不要平均分割页面，三栏的设计应该让其中一栏明显短一些。 从局部来看，也要把握信息呈现的节奏，比如yahoo中间新闻栏的设计，大图带大标题是第一要点，小图带字是第二要点，纯文本第三，节奏感、主次关系非常强。 下面是几种常见的网页布局结构： <1>骨骼型结构。即类似于人体的骨骼结构。分为上中下，内容部分分为两、三栏的设计。

这就是一个web 2.0风格的页面，骨骼型结构，上面主要是logo,导航banner,内容部分三成两栏，页脚版权，典型的骨骼型结构。 <2>对称型结构，对称型结构就是网站有一个对称轴，称左右或者上下对称。这种网页在阅读上很明明确给出用户重要和次要区域的划分，根据于都习惯往往在比较大的位置上安排主要内容。 这个网页就是一个对称结构，左边是网站的一些导航和产品信息以及版权信息以及练习方式等等。右边是网站的主要信息。最大的特点是板我们骨骼型的top和foot放到了左边，body放到了右边，形成一个对称结构。 <3>满版型的结构。其实这种网页结构随着现在显示器尺寸的增大和分辨率的提高逐渐再做一个过度，即以前的整个图片满版到后面的背景满版，到现在的局部满版。这种版式给人的感受是内容紧凑，气氛表达充分，适合温馨和暖性思维的表达。 这个早期的满版多见于韩版网页。 <4>焦点型，这类网页多见于围绕一个中心点，真个页面围绕中心，多见于销售类网站或者品牌产品网站。其特点是中心明确，表达信息集中，传达信息清楚。 占据网页面积最大的图片吸引了大部分焦点，展现了个性。

初中信息技术《网页中的表格》教案

第一单元第三课网页中的表格教 学设计 一、教学目标 1.知识、技能目标： 知识目标：理解表格在网页设计中的重要作用。 技能目标：⑴掌握使用表格布局网页。 ⑵灵活掌握表格调整的方法。 2.过程与方法目标：能够合理利用表格对网页进行布局和规划。 3.情感态度与价值观目标：了解学校概貌，发现校园之美，理解规矩与方圆的关系，养成良好的生活和学习习惯。 本课的重难点：重点和难点：掌握利用表格对网页进行布局的方法课时安排：一课时 教学过程： 一、回顾知识通过打开程序、站点、打开网页、调整图片等操作，复习前两课的内容。 二、导入新课 让同学们欣赏一些有特色的个人网站，引导学生注意网页的设置和布局，引导出本节课的学习内容──网页中的表格。 方法：观察，讨论、思考、回答。 三、自主学习 让学生通过阅读和动手操作的方式，完成以下任务：

任务一：插入表格：师：如果我们想要在网页中使用表格必须先插入表格，操作方法与Word差不多，自己尝试着在一个新网页中插入不同设置的表格，并填写表1-3-1。 学生参照图1-3-4在主页文件Index．htm中插入表格：教师随时观察指导。 任务二：表格的调整：师：此部分内容与Word中的操作也是非常相似，根据教材内容分组完成表格的调整。调整结束后将第二课中已经输入的内容移动到表格中。 对于学生相对熟悉的知识点，完全放手给学生探究完成。尝试通过不同途径解决同一问题，提高学习效率。 三、实践练习 让学生参照课本习题要求，完成练一练部分，让学生练习刚学会的命令。 分组预览网页，看布局的效果。 四、合作探究 分组讨论教材中布局表格命令的用法，使用布局表格命令重新布局网页。 让学生演示后，教师点拨需要注意的问题。 分组展示操作步骤及预览网页。审视自己的网页与其他小组的区别，查找自己的不足。 五、大显身手 仿照第一课中的三个页面，进行布局设计，插入相关素材，完成网页的设计。 每小组选择最优秀的作品，进行展示评比，选出最优秀的作品。 六、教学总结

教案：使用表格布局网页

教学内容：项目五表格的应用 任务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 进行对比。 【学生操作】 带 成

利用表格布局网页教学反思

《网页中的表格》教学反思 表格的作用在网页制作中非常重要，网页的布局都由表格来控制，本节课通过任务驱动式教学，启发并引导学生完成任务。首先，给学生展示网络上的许多漂亮的网页，将网页布局的布局进行大概的分类，让学生体验表格在网页制作中的强大作用。由于学生在Word中已经学习过如何进行表格的操作，应此，将此部分的内容迁移到Frontpage还是比较简单的，所以本课主要以学生的自主探索为主，教师讲解为辅进行。 本节课使用任务驱动式教学法，通过启发的方式引导学生完成任务，首先，给学生展示如何用表格控制网页，通过与word类比的方法让学生认识表格的组成结构，接着，给学生展示一张利用表格控制后做出来的网页，明确目标，激发学生的学习兴趣。在学生学习的过程中给学生准备一个学程导航，让学生每次阅读任务的步骤，遇到操作中的难点，教师再进行示范。 在自主学习中，有效地培养了学生的动手能力，大部分的学生都能迅速地完成操作。但是学生在知识迁移的过程中还有一些小问题，因此，在今后的备课中还要加强每一个操作小任务的设计，对每一个操作的环节，应该准备操作的效果图，让学生能够快速直接地发现自己的问题，尽快去寻找解决问题的方法。 在本节教学过程中，要注意每一个小任务的提出，都要事先出示表格效果图，让学生面对眼前的实际问题，指导学生看书去寻求解决问题的方法，随后教师示范，学生看着大屏幕跟着一起解决问题，效果良好。另外，要求学生试制作“双休日活动安排表”这一残缺不全的表格时，教师一定要巡视每个学生，必要时结合本节课的知识要点进行个别辅导，让学得不扎实的学生也能尝受到成功的喜悦，以达到大面积提高教学质量的目的。

网页的排版与布局-网页设计初学者入门攻略.

网页的排版与布局网页设计初学者入门攻略 WORD制作：寻找尤娜

网络时代，人本身的因素是相当重要的，只有拥有这方面的一定的审美知识，才有机会做好网页，而真正技术上的东西是不重要的，毕竟技术的发展是使每个使用者使用更加的方便，发展的趋势是让软件成为“傻瓜型”。终极目标就是用鼠标一点就能够使所有的网页完成。所以，我们应该培养自己的审美修养才是最重要的。而真正的体现是在具体的网页的布局上，网页的设计呈现出多样化的趋势，但是万变不离其宗，我想认真的分析一下，可以得到一些有用的东西，在我们应用的时候作为参考。 虽然网页设计拥有传统的媒体的不具有的优势，例如是能够声音、图片、文字、动画相结合，营造一个富有生气的独特世界，同时它拥有极强交互性，使使用者能够参与其中，同设计者相交流。但是最基本的模式还是平面设计的内容，所以平面设计就要考虑形式美的内容，其中网页的排版布局就属于形式的内容，那什么形式呢？ 形。原形，包括原始形，或称自然形。 式。许慎之《说文解字》说：“法也”。它包括“法则”、“法度”、“法制”、有“用法”的含义，也就是一种“格律”。 中国古典建筑形式就称为“法式”。“形”是自然的，“式”是人为的。“形式”是将自然形态经过人为改造而称为一种新的美的形式。自然形态只有通过人的改造，才能起更大的作用，由于这个原因，就形成了今天的审美形态，形象是客观的，形式则是依据客观的规律进行主观的创造。如果没有主观的创造，就没有艺术，也不可能有今天的一切，

当然对于实际的网页制作来说，这也是最基本的，就是主观的创造，因为这是一个网页的灵魂，假如没有自己的主观创造，就只能拾人牙慧，重复别人丢掉不用的东西，是毫无意义的。所以现在强调网页设计的创造，表现在对页面的布局上，具体说就是体现在页面的形式美方面。就是通过页面的合理安排，例如文字的条理清楚、流畅、整体，使形式美得到体现。 首先从网站内容上来进行排版 现在的网站通常具有的内容是文字、图片、符号、动画、按钮等，其中文字占很大的比重，因为现在网络基本上还是以传送信息为主，而用文字还是非常有效率的一种方式，其次是图片，加入图片不但可以是页面更加的活跃，而且可以形象的说明问题。所以按照目前网页的设计，可以有针对性的对这些内容作一些调整，可以得出一些可以借鉴的东西。 既然文字是现在网页传输信息的主要工具，那么就得把页面上主要的部分留给它，这个看似简单的道理却是很多的网站所忽视的，包括一些影响力较大的网站，一味的讲求“美观”，花在形式上的没有具体内容的东西占了很大的比例。主要的文字性的内容却放到下边，结果上网的用户却要难以很舒服的获得信息，有时候要拉动下拉条才能看到整个页面的主要内容。

基于表格的页面布局教学设计

第3课开篇之作——基于表格的页面布局 教学设计 一、教学目标： 1.知识目标： （1）进一步熟悉Dreamweaver 8的工作界面。 （2）掌握利用“文件”面板打开网站的方法。 （3）学会根据网站素材的分类规划网站的文件夹。 （4）熟练地创建并保存网页。 （5）掌握设置网页标题的方法。 （6）能够根据网页内容使用表格恰当布局。 （7）学会设置网页背景色及表格背景图像。 （8）初步认识并尝试使用标签选择器选择对象。 （9）熟练地使用快捷键在浏览器中预览网页效果。 2.能力目标：让学生能动手完成一个简单的网页布局的设计。 3.情感目标： （1）培养学生严谨求实的工作态度以及感受美、评价美的艺术情操。 （2）培养学生在进行自主学习的过程中勇于克服困难，体验到成功后的快乐。 二、教学重点： 1.在“文件”面板中规划站点 2.设置网页标题 3.设置网页背景 4.使用表格对页面布局 三、教学难点： 根据网页内容使用表格恰当布局 四、教学策略的选择与设计 1、教学方法： （1）任务驱动—体验探究法 （2）分层教学法 （3）网络探究教学法 （4）激励教学法 2、学法指导：形象探究法、经验探究法、体验探究法、合作式学习法。 3、资源的设计与选择： 结合本节内容设计了一个《安全自护我能行》的网站首页、极域电子教室系统、Dreamweaver网页编辑软件、多媒体等。 五、课时：1课时 六、素材准备： 1、安全自护我能行——首页的效果图

2、首页背景图片：index.gif 3.练习题的图片：bg1.gif和bg2.gif 七、教学过程： 教学步骤教师活动学生活动教学形式（一）课堂引入 上节课我们做好了站点，当站点规划并创建完毕边授课边欣赏并对对学生机

解析网页界面设计和布局

近几年来，随着科技、计算机技术的迅猛发展和人们生活水平的不断提高。互联网以惊人的发展速度并且越来越深入到人们的生活和工作、学习中。信息的传播形式、内容、数量也在空前的改变着。互联网它凭借着一个崭新的媒介和独特传播形式打破了传统性的、地域性的、经济文化性的阻隔，并且在信息的传播范围和传播速度达到一个质的飞跃。随着互联网的发展，周边的附属品也同时在飞速的发展。而最明显的就是互联网最常用的网络媒介“网页”。网页设计—也开始慢慢上升到一个举足轻重的位置，一个好的网页界面设计小则可以让人赏心悦目，大则可以称之为现代原创艺术的结晶。越来越多的设计师也开始投入到追求网页界面形式美的行列中来。然而设计师们在设计界面的同时却忽略了一个微不足道的，但是却又是至关重要的“微观”元素—网页设计的“细节”处理。它可以让设计师们的界面美观度达到极 致的升华，也可以让界面变得暗淡和乏味。 然而，一个网页设计的“微观细节”都表现在哪里呢?它们要在何时何地出现才能为我们的界面设计带来一个极致的升 华呢?网页设计的“微观细节”主要表现有以下几点： 壹—页面的整体颜色，也可以称之为颜色。 貳—页面的整体布局，也可以称之为排版。 叁—页面的字体元素。也可以称之为字体。 肆—页面的效果元素。也可以称之为效果。 以上四点归纳出网页设计的“细节”主要在以上这些地方着重处理。 页面的整体色彩可以直接反映这个页面对用户的视觉感官，鲜艳的颜色可以给用户一种清新、活泼的视觉感受，然而此 时细节就在于设计师对于色彩与色彩间的把握。 图：

单一的色彩元素也可以给用户带来另一种不同的视觉感受，如：黑白单一色调可以给用户一种稳重、时尚的视觉体验，然而此时细节就在于设计师如何“画龙点睛”打破单一的色彩体系，不让用户感受到压抑的心理。 图：

网页设计与制作教案免费学技术改变生活

网页设计和发布流程 第一步是对站点进行规划 第二步是创建站点的基本结构 第三步即可开始具体的网页创作过程 最后一步是站点的发布 第一节站点的规划与创建 【教学目的与要求】 一、规划站点 二、创建一个站点 【教学方法与手段】 多媒体教学：借助多媒体手段，进行课堂理论教学； 启发式教学：教学活动关注的重点从结果转向过程。激发思维，师生互动，增强学生学习的主动性、积极性和创造性； 【教学重点与难点】： 基础知识：规划站点 重点知识：创建一个站点 2课时 【教学组织过程】2课时 1．上讲回顾 2．教授新知 【授课内容】 一、规划站点 Web站点是一组具有共享属性（如相关主题、类似的设计或共同目的等）的链接文档。 本地站点：是本地硬盘中存放远程网站所有文档的地方（文件夹）。 建立网站的通常做法是：在要地硬盘中建立一个文件夹用来存放网站的所有文件，往后就在该文件夹中创建和编辑文档。待网页设计和测试好之后，再把它们拷贝到网站上供浏览者浏览。 1、规划站点结构

注：规划站点的结构之前应先用笔绘出站点的结构图（如下图所示是一个典型的学校站点的结构图） 2、规划站点的浏览机制 一般可采用以下的方法： ●创建返回主页的链接 ●显示网站专题目录 ●显示当前位置 ●搜索和索引 ●反馈（将网页创作者或网站管理员公布在网页上，或创建一个E-MAIL超级链接，以使用户能快速地将信息反馈到网站中） 二、创建一个站点 步骤： 1、单击“文件”---“新建”---“站点”命令（或单击常用工具栏中“新建网页”按钮的下拉箭头，从打开的下拉菜单中选择“站点”命令） 2、选择一种站点模板或向导 3、单击“确定”按钮 三、站点的基本操作 1、打开站点：“文件”---“打开站点” 2、删除站点： 方法一：在Windows资源管理器中删除一个站点 方法二：在FrontPage中删除站点，在“文件夹”视图或“网页”视图的“文件夹列表”中，右击站点所对应的目录，在快捷菜单中单击“删除”命令 3、站点的设置 “工具”----“站点设置”，有“常规”、“参数”、“高级”、“语言”、“导航”、“数据库”六个选项卡 【课程小结】 【作业】 1．5 课后练习书本课后练习作业

《网页中的表格》教学设计

《网页中的表格》教学设计 一、教学设计部分 本课的主要内容与地位 网页中，常用表格来对网页中其它元素定位，将复杂的元素有条理的分布到网页各个位置──网页布局。另外，当我们把表格的宽度定为固定像素值后，还能保证网页布局不会随浏览器窗口的大小变化而变化，当我们在网页中输入文字的时候，就可以让文字顶满格后自动换行，方便我们对文字的编辑。 由此可见，网页中只有利用表格进行布局，才能称得上真正意义上的网页设计。 本课与前后内容的关系 利用表格布局网页，将上一节设计的网站首页中的各种素材进行合理的分布，是对学生进行网页设计技能上的提升；利用表格布局网页也是整个网站设计中一个非常重要技术手段，应用非常广泛。 知识目标/技能目标 知识目标 理解表格在网页设计中的重要作用。 技能目标 ⑴掌握使用表格布局网页。 ⑵灵活掌握表格调整的方法。 过程与方法目标 能够合理利用表格对网页进行布局和规划。 情感态度与价值观目标 了解学校概貌，发现校园之美，理解规矩与方圆的关系，养成良好的生活和学习习惯。

本课的重难点 重点和难点：掌握利用表格对网页进行布局的方法 本课的课时分配建议 一课时 教法建议 由于关于表格的基本操作（插入表格、调整表格：调整行高或列宽、合并或拆分单元格、插入或删除行或列、平均分布行或列）在Word中已经有较详细的操作方法。在本课教学过程中，教师教学的重点应放在由学生探究以上基本操作的基础上的表格的使用──如何利用表格布局网页，让网页中的素材合理的在网页上分布。 另外，网页模板是提高建站效率的有效手段，教师要注意引导学生对网页模板的使用。 学法建议 注意观察和借鉴样板网站中表格的运用情况，刚开始使用表格设计网页时可将其边框粗细的值设为1，以观察调整表格的过程，从而掌握表格调整的技巧。 本课教学资源索引 1．第二课的半成品网页：Index．htm、Parents．htm 自评、互评、师评要注意的问题 学生制作的网页是否通过表格的布局达到美化、整齐和排列有序的目的。

《用表格为网页布局》教学设计说课稿

《用表格为网页布局》教学设计《用表格为网页布局》是浙江教育出版社信息技术教材八年级上册第三单元第十五课的内容。本课是在学生学习建立网站站点后，开始尝试做第一张网页。通过本课的学习，是对表格知识的巩固和深入，更重要的是为后面的网页制作打下基础，所以本课是本单元的重点，起到承上启下的作用。前阶段学生已经学习了文本编辑、图片插入、网络基本知识、文件操作等内容，很多知识都可以迁移到本课来。八年级学生对电脑基本操作已经不再陌生，已经能够独立完成一定要求的学习任务，但是学生对于特定任务进行分析，整体规划能力相对还是比较欠缺的。本节课教学的作业设计中，我将注重培养学生这个方面的能力。根据课程标准和教材内容，我将本课的教学目标设计成三个方面： 知识与技能目标： 1、了解主页布局的常见布局图，并明确主页设计的基本要素； 2、理解用表格排版主页的作用； 3、掌握在网页中插入表格进行排版的技能； 4、学会设置表格属性，对表格进行编辑修改。 过程与方法目标： 通过欣赏、借鉴他人的主页布局，取长补短，为自己的主页布局做铺垫。 情感、态度与价值观目标： 1、通过作品欣赏，让学生意识到取长补短的可贵性，及在借鉴基础上的创新的重要性； 2、用表格排版网页解决网页版面杂乱问题，培养在遇到困难时灵活运用各种方法解决，强化建站信心。 为了实现这个教学目标，我将教学重点确定尾插入表格进行排版和更改表格属性。根据学生的思维障碍和学习情况的分析，我将难点定位于灵活掌握排列表格和设置表格属性。只有正确设置了表格的属性，才能美化和完善网页的布局。为了更好的突出教学重点，突破教学难点，圆满的完成教学任务，我在课前截取了典型的旅游网页图片素材并设置成框架形式让学生一目了然地看到表格所起的作用，并设置了几个学生需要突破的任务。 信息技术课是培养学生对信息技术的兴趣和意识，使学生养成良好的信息素养为宗旨，强调学生的自主学习和研究学习。上新课前，我要求学生两两合作，通过传统手工绘制草图的学习方式，设计你需要建立网页的框架布局，同时学会和与他人合作。为了让学生主动的参与学习，我在设计教学流程时，准备以学生“任务驱动”为主线，以教师为主导，以学生为主体，通过学生自主探究，合作交流完成教学任务。根据教学内容和学情的分析，本课我采用的教学方法有：讲解、练习、任务驱动、小组合作，学生可以通过小组合作、给定的任务等将本课学习用于实际操

利用表格进行网页页面的布局教学设计

利用表格进行网页页面的布局教学设计《利用表格进行网页页面的布局》教学设计 上海市蒙山中学夏勤 在教学过程中发现:学生在网页制作时，往往只重视网页内素材的添加，而忽略了素材间的整体布局效果，致使制作出的网页布局不合理美观，页面上的素材布局杂乱无章。为了解决这个问题，我设计了“如何利用表格进行网页页面的布局”这节课的内容。 本节课的教学对象是预备年级的学生，对于预备年级的学生来说，仅仅简单的讲解表格的使用，不利于学生对“利用表格布局网页页面”这一知识点的理解和实际信息技术应用能力的提高，因此，我在设计这节课的教法时，主要采用项目活动教学模式，整个项目活动通过比较、提问、引导、合作、展示、交流、评价等教学方法得以开展，激发了学生利用表格布局网页页面的积极性，培养和提高了学生辨别表格布局网页页面的能力、分析和解决如何利用表格布局网页页面的能力、审美能力、语言组织和表达能力、归纳能力、自主学习能力。 1( 先回顾网站制作的步骤，并展示两张素材相同而布局不同的网页，让学生进行比较、 分析、归纳出两张素材相同而整体页面效果不同的原因是其中一张网页是利用表格布 局了页面，从而引出本节课的课题——利用表格布局网页页面。 2( 师生继续分析页面效果好的那张网页，其布局页面的表格结构有几行几列，引出问 题:如何对表格进行处理而使页面布局更合理,即表格的编辑操作。 3( 教师以页面较杂乱的那张网页为例，进行插入表格、合并、拆分单元格等示范操作。

4( 学生以小组为单位根据实际情况，进行“利用表格布局网页页面”的实践操作练习。 教师针对不同水平的学生进行分层教学:对特殊学生，允许他们完成一张网页的表格 布局。教师给予较多的个别辅导机会。对天才学生，要求完成网站内多张网页的表格 布局。 5( 要求各小组将已经利用表格布局好的网页进行交流展示，各小组评价。以网页上各类 素材间整体布局的合理性、谐调性和美观程度为评价标准。达到加深学生对利用表格 布局网页的理解及提高解决实际问题的能力，同时激发学生的积极性，并从中获取成 功的体验。 6( 课堂小结则分成教师强调实践操作注意点和学生总结“利用表格布局网页”的重要性 两部分组成。 7( 为了巩固新知识及更好的布局网页页面，要求学生课后以小组为单位进行分工操作， 预先在草稿纸上设计好各自所负责网页页面的表格结构，以便上机操作时更快捷的完 成页面布局。

网页设计的四种布布局要点

网页设计的四种布布局要点 排版布局是整个网站页面的核心，下面就一起去了解一下网页设计的四种布布局要点吧，希望对大家有帮助！ 有些排版方式是建立在模块化或类似网格的结构上的，在这些设计中，每个模块都力图根据屏幕尺寸伸缩调整。实际上这并不是什么新的方式，不过响应式网页设计让它变得更加有用，它暗示了一种自适应布局模式，可以像搭积木一样，由各种模块组件创建而成。 无边界的布局模式，只是画出了一个大致的框架图，也许你只是想说这只是框架，因为设计规划前期很多素材还并不完善。一段文字和一张图片，甚至一个图标，在你进行布局的时候，由于素材并不是立刻手到擒来，因此布局总是喜欢用一个个矩形来代表一段文字或一张图片，这本没有错，但这个做法也会让人陷入“框架陷阱” 可以肯定的是，这样设计网页并没有多少呼吸的空间，整个网页都被信息所填满，如果稍微改变一下布局的元素大小和位置，其实就会展示出不一样的版面效果，这样的排版也是更灵活的。 垂直分割式的布局在上一篇文章中我们也有提到过，使用垂直分割布局，原因有两个。有时候在一套设计中，的确存在两个同等重要的主体元素。网页设计的通常方法，是按

照重要性给内容排序。然后重要性会体现在设计的层次和结构上。但是假如你就是要推广两样东西呢?这种方式，可以让你突出两者，并让用户迅速在其中做出选择。第二是要表现出重要的两面性。 网页设计布局几乎都是由几何构成的，三角形、圆形、矩形等等，都经常被使用。加之显示屏本身就是矩形，因此在布局时最常用到的也是矩形。 在实际的设计过程中一定是花样百出的，绝不可能用一两种布局模式就轻松完成，多思考多改变，总不会出错。但不管如何变化设计方式，最终还是要围绕着“美观”与“用户”进行的。

《网页中的表格》教案设计

《网页中的表格》教案设计 一、教学设计部分 教学内容分析 R本课的主要内容与地位 网页中，常用表格来对网页中其它元素定位，将复杂的元素有条理的分布到网页各个位置──网页布局。另外，当我们把表格的宽度定为固定像素值后，还能保证网页布局不会随浏览器窗口的大小变化而变化，当我们在网页中输入文字的时候，就可以让文字顶满格后自动换行，方便我们对文字的编辑。 由此可见，网页中只有利用表格进行布局，才能称得上真正意义上的网页设计。 R本课与前后内容的关系 利用表格布局网页，将上一节设计的网站首页中的各种素材进行合理的分布，是对学生进行网页设计技能上的提升；利用表格布局网页也是整个网站设计中一个非常重要技术手段，应用非常广泛。教学目标分析 R知识目标/技能目标 ·知识目标 理解表格在网页设计中的重要作用。 ·技能目标

⑴掌握使用表格布局网页。 ⑵灵活掌握表格调整的方法。 R过程与方法目标 能够合理利用表格对网页进行布局和规划。 R情感态度与价值观目标 了解学校概貌，发现校园之美，理解规矩与方圆的关系，养成良好的生活和学习习惯。 R本课的重难点 重点和难点：掌握利用表格对网页进行布局的方法 R本课的课时分配建议 一课时教学策略设计建议 R教法建议 由于关于表格的基本操作在ord中已经有较详细的操作方法。在本课教学过程中，教师教学的重点应放在由学生探究以上基本操作的基础上的表格的使用──如何利用表格布局网页，让网页中的素材合理的在网页上分布。 另外，网页模板是提高建站效率的有效手段，教师要注意引导学生对网页模板的使用。 R学法建议 注意观察和借鉴样板网站中表格的运用情况，刚开始使用表格设计网页时可将其边框粗细的值设为1，以观察调整表格的过程，从而掌握表格调整的技巧。教学资源与环境建

《应用表格布局网页结构》教案

《应用表格布局网页结构》教案 一、教学目标 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）布置学生完成任务二：制作“多彩的生物”网页；可以根据自己的设计对网页进行适当的调整； 掌握根据网页确定所需表格的结构 能根据网页规划表格 小组合作讨论，根据学案提供的参考表格确定“多彩的生物”网页的表格结构，再独立完成图片、文字的插入。 四、作品展示交流与课堂总结

《应用表格布局网页结构》教学设计

《应用表格布局网页结构》教学设计 一、教学目标 知识与技能：1、了解表格在网页设计中的作用。 2、能够根据网页的内容，正确布局表格的结构。 3、掌握网页中表格的制作方法，能够在单元格中正确插入文字和 图片，掌握表格属性的设置方法以及单元格的修饰与编辑方法。 过程与方法：通过观看优秀网站表格布局，动手设计表格等环节，帮助学生进一步了解表格的作用、功能以及网页设计方法的多样性，培养学生的 发散思维能力；通过学生自主地编辑和修饰表格等环节，培养学生 自主探究学习的能力。 情感、态度与价值观： 1、提高学生自学和探究的能力，培养学生应用表格布局网页结构 的兴趣。 2、提高学生语言表达能力，学会客观的评价作品。 二、教学重点与难点 重点：了解表格在网页设计中的重要作用掌握插入、编辑表格以及表格，单元格的属性设置方法。 难点：表格的嵌套表格，单元格，网页属性的设置 三、教学方法 讲解演示教学法，小组合作学习法，自主探究学习法 四、教学设计说明 本节课是初中信息技术（下册）20XX年7月第一版第11单元《设计主题网站》第二节的内容，教学面向的是初二年级的学生，该年龄段的学生已具备了一定的信息素养，掌握了基本的信息技术知识和技能。

初中的学生喜欢新、奇、特的事物，接受能力和理解能力比较快。而直观、醒目的网站示例图片则可以培养学生对于本课题的兴趣，但是学生对于如何应用表格布局网页结构的操作是比较模糊的。因此本节课充分地发挥学生了的积极性，让学生随着学案所设置的环节，探究完成一个又一个的应用表格过程。而学案则是在尊重学生解决问题的思维过程方式的基础上设置的，注重学生的学习体验和情感的体验。整节课以学生为主体、教师为主导的架构下，搭建以生为本的情景学习平台，帮助学生自学、交流讨论、深入探究，以不断的完成应用表格布局网页结构的过程为手段，一步步完成学习任务。 五、教学过程 课前将素材和网站站点发送到桌面，指导学生解压缩。并带领学生熟悉本节课所要制作的网页的素材。 （一）设置情境，引入课题 师：我们知道，地球是人类赖以生存的家园，然而，近几年来，地球的环境却越来越恶劣：全球性气候变暖、暴雨、雪灾等灾难性天气频繁出现，给我们的生活带来严重威胁。因此，我们每一位同学，都有责任去保护环境，那么我们应该如何去保护环境呢？我想首先是宣传环保、倡导环保。那上一节课呢我们已经建立了以环保为主题的站点，学习制作了网站的欢迎页。今天这节课，我们将一起学习制作网站的主页面来宣传环保，那如何来设计主页面呢？首先我们先来欣赏几个著名网站的主页。（播放课件） 师：你们能看出这些是哪些网站的主页吗？ 生：网易，新浪，搜狐 师：很好，它们分别是网易、新浪、搜狐的主页面。我们知道这些网站的主页面包含的内容都相当丰富，但给我们的视觉感受却是繁多而不杂乱，紧凑而不单调。这些页面设计是如何做到这一点的呢？ 师：我们以搜狐主页面为例，（呈现搜狐主页面的图片），来探究一下如何设计网站的主页面。首先这一页面的左上角有一张的搜狐的LOGO图片，使我们一眼能认出这是搜狐页面。在图片的右边呢，是网站中的导航，通过导航链接到其它的页面。下面的主体部分，分成了几个区域，我把它标示出来，这样我们

浅谈photoshop在网页布局设计中的意义与方法.

浅谈Photoshop在网页布局设计中的意义与方法

摘要 当今网络已经成为人们生活的重要组成部分,由此一个新兴的专业---网页设计诞生了。部分技工学校为适应这个职业对人才的需求纷纷开设了网络工程专业。但是在培养网页设计人员的过程中一些教师由于缺乏网页设计实践经验，对Photoshop这个图象软件在网页设计中对网页元素的整合作用认识不足，没有使这个软件发挥其应有的作用。本文针对这个现象，对Photoshop在网页设计和规划中的作用和意义以及运用Photoshop进行网页规划时应注意的问题作了论述，特别是对Photoshop的切片功能和操作方法做了详细的说明，这对于初学网页设计的人员来说更具有指导意义。 关键词：网页设计Photoshop 布局 现在是IT时代，几乎没有哪一行能和网络脱离关系，因此网站的规划与建设已经成为一项专门职业。在网站规划建设中，网页布局设计是其至关重要的一环，它关系到网站能否吸引更多人的眼球，直接反映网站的点击率，而点击率正是网站的生命所在。所以网页布局设计是否美观、规范、合理越来越受到网页设计师的重视。 网页布局设计的软件很多，如Dream weaver 、FrontPage 等都可胜任，但是初学者往往是一上手就使用Dreamweaver等进行规划布局，结果使网站建设延期，下载速度降低，更糟的是合同违约，失掉客户，造成不可估量的损失。纠其原因，关键是忽视

了Photoshop 在网页规划布局中的作用。初学者知道Photoshop 是图像处理软件，但只是把它用来解决一般图像裁切、调整、优化，而忽视它在网页布局设计中的重要作用。 一、Photoshop 在网页布局设计中的作用

用表格进行页面布局教案

省淳中信息技术深度研课教学设计 【课题】 用表格进行页面布局 【课程标准】 1.理解WWW、网页、主页、网站的基本概念及其相互关系。 2.理解动态网页的概念，了解其工作过程。 3.能够使用常用的网页制作软件进行动态网页的制作与发布。 4.通过开发实践，学会简单网站的规划、设计、制作、发布与管理的基本方法。 5.能够根据网站主题要求设计评价指标并对常见网站的建设质量与运行状况进行评 价。 【学业水平测试内容和要求】 1.了解WWW、网页、主页、网站的概念及区别。 2.了解什么是静态网页和动态网页。 3.了解动态HTML技术和服务器端动态网页技术的基本知识。 4.了解网站开发的一般过程。 5.知道网站规划主要包含的内容，学会根据需求规划网站。 6.学会使用一种常用的网页制作软件制作网站，包括建立站点、新建网页、利用表格 布局网页、修饰文字、插入多媒体信息、建立超级链接、制作简单的网页动态效果 等。 7.了解如何在局域网或因特网上申请网站空间，发布网站。 8.了解简单维护网站的方法。 9.了解网站评价的几个主要方面，能使用评价量表进行网站评价。 【学情分析】 网络技术应用是普通高中信息技术选修模块。计算机网络的出现改变了人们的生活方式，对人类产生了深远的影响，网络技术的学习将帮助学生更好地合理地去使用它。课时安排为7课时，本节教学设计为第1课时。 大部分学生小学或初中有了一定的计算机基础，掌握了计算机的基本操作技能，能够使用一些常用软件，并且对网络有一定的了解，但是也有个别零起点学生。因此，在教学中要兼顾到不同层次的学生。这一章在学业水平测试中要求较高，要求学生理解并能独立操作、迁移应用与熟练操作。所以，在课时安排上有所侧重，在教学设计中也要着重锻炼学生的操作能力。 【学习目标】 1．通过学生网页与示例网页的对比，引导学生发现及归纳其差异：文字与图片位置合理，确定问题，即需要对网页进行页面布局。 2．通过阅读材料和自主探究，归纳和总结网页布局的形式和方法。 3．通过分析示例网页，找出解决上一问题的方法之一，即用表格进行页面布局。 4．通过学生自主探究，掌握表格的建立、边框粗细的设置、宽度高度的设置、单元格的合并与拆分。 5．通过网页、表格、单元格的背景色设置，让学生在操作中发现并总结出网页、表格、

网页设计中排版与布局小基础

网页设计中排版与布局小基础 有些人始终认为，网页最主要是内容，不需要再搞些门面上的东西，还拿出MUD来比喻。可是，红花还需要绿叶陪衬。想想，若MUD不只是单纯的文本，还有画面出来，那么，它所吸引的何止现在的这些MUD迷呢？那么，我所要说的到底是什么呢？初学者如果能够了解一些设计上的东西，那么，自己的页面不会显得乱，自己看了也开心，别人看了也开心，何乐而不为呢？ 我们的主页，说到底，只是一个800*600的画面，那么，我们要怎么对它进行安排才合理呢？首先，也是最重要的一点，就是先停下创作，先想好一个主题。"设计，是一种有目的的创造"。若在动手之前并不了解自己将要做什么及要怎么做，而只是一味的靠操作PHOTOSHOP的滤镜而达到一种特效的话，那么，最终做出来的东西最多局部看得觉得挺不错的，但全局就显得太复杂了。页面上的构成，如果要让别人一眼望去觉得很BEAUTIFUL，这里面实际上是有很大的学问的。 我们先来说说构成，"构成：是将造型按视觉效应、视觉力学和精神力学等原则组成的，具备美好形态的造型"。构成形式里，有空间构成（平面构成和立体构成）和时间构成（静和动）。我们的创作，就是要协调这里面的种种关系，顺应视觉感受，才能够打动观看者的视觉，得到我们想要的效果。在这些形形式式里，都有着如下的部件：点：我们一般认为，点是指圆形的，但这是不正确的。只要在空间里有非常少量的面积，无法形成一个视觉上感觉的图形，都是一个点。无论什么形状都可以。线：点集合在一起就形成线。面：一个平面。体：一个物体。一般是指物体占据的空间，有三维形状。 那么，当点、线、面与体集结在一个页面上时，它们的关系要怎么协调呢？它们之间都有什么作用呢？ 点有集中视线、紧缩空间、引起注意的功能。两个点相距不远而且形状不等时，一般由小向大看。近距离的点引起面的感觉。灵活运用点，可使你的页面有一些本质上的变化。当点占据不同的空间时，它所引起的感觉是不同的。（1）居中引起视觉集中注意。 （2）上引起下跌落感。 （3）在上左或上右引起不安定感。 （4）下方中点，产生踏实感。 （5）左下右下，增加了动感。 为什么会这样呢？因为人的视觉，都是经过对生活的感觉都得来的。在下方的东西，一般联想到大地。在上方的东西，一般联想到浮云。线、面、体亦然。 线，又分为直线和曲线。直线：给人以速度，明确而锐利的感觉，具男性感。曲线，则优美轻快，富于旋律。曲线的用法各异，需结合自己的需要。而直线又分为斜线、水平线及垂直线。水平线代表平稳、安定、广阔，具踏实感。垂直线则有强烈的上升及下落趋势，可增加动感。斜线，一般我没有怎么使用，因为它造成视觉的一种不安定。 人们每看到一个东西，都试图用横直来分析，斜、歪是人们所不愿意见到的，但适当运用也可以达到一些特殊效果。这个要靠个人的感觉。面，指的是二度空间里的形。面又分为几何形和任意形，我个人比较喜欢任意形，因为它往更具人情味。几何形使人有一些机械感，但是，每一个图形里都会要用到

运用表格布局网页教学反思田晋玲

“运用表格布局网页”教学反思 我认为我在本课教学重难点的突破过程中采取如下措施，并取得了很好的效果： 我运用了“学生主体性教学”的教学策略。他的指导思想是：一切从学生主体出发，让学生成为知识技能的“探究者”、难点问题的“突破者”，使学生真正的成为学习的主人。 首先，我为学生创设了一个主动探究、积极进取、自主学习的良好氛围，这是发挥学生的主体性的基础。有了良好的氛围，原本单调的学习过程变成了一个充满乐趣、充满想象、不断创新的过程，一个科学的、有计划的动手实践过程；其次，设计的任务具有很大的想象空间，学生们敢于独立思考，敢于大胆想象，并通过实践探索实现了自己的想法，这为学生的创造性提供了展示的舞台。 在本课的学习中，学生通过比较了解到使用表格可以合理布局网页空间，起到美化网页的作用。利用知识迁移，让学生尝试用已学过的Word插入表格与编辑表格的操作来推测DreamWeaver中插入表格与编辑表格的操作，并通过小组讨论、看书以及自己的实践来证实自己的推测是否正确。通过实践、观察和小组讨论来探讨Word与DreamWeaver的表格操作有什么异同通过学生自主探究学习，培养学生的实践能力，观察能力及解决问题的能力，以及对知识的迁移能力。 我在整节课里只扮演一个组织者和提示者的角色，一步步引导学生完成本课的目标，让学生充分发挥自主性，协助性，培养他们合作、创新的能力。通过本课的学习，培养学生合作帮助、团结协作的良好品质，在合作实践过程中，培养学生大胆构思、自我创新的精神，培养学生的美感及创作后的成就感。 从整堂课的教学过程来看，效果不错，达到了教学目的，但也存在一些缺点，本课教学不足之处主要有下面几个问题： 1、由于本课的课堂容量相当大，时间上相对较紧，个别学生的接受和操作能力差，未能跟上教学节奏。 2、个别学生在制作网页的过程中定位能力不强，在美化网页的过程中浪费时间过多。 3、设计的任务还不够完善，简练，小组合作学习没有得到充分发挥，