关闭

关闭

关闭

封号提示

内容

首页 表格布局网页模板.doc

表格布局网页模板.doc

表格布局网页模板.doc

上传者: 张丹萱 2017-11-15 评分 0 0 0 0 0 0 暂无简介 简介 举报

简介:本文档为《表格布局网页模板doc》,可适用于表格/模板领域,主题内容包含表格布局网页模板篇一:html表格布局实例html表格布局之实例版|前面我们讲了html表格的基础知识今天我们通过一个实例让大家更清晰的了解下表格的符等。

表格布局网页模板篇一:html表格布局实例html表格布局之实例版|前面我们讲了html表格的基础知识今天我们通过一个实例让大家更清晰的了解下表格的用途。例如:我们做一个简单的网站布局代码如下:tablealign=centerwidth=height=border=bordercolor=#fftbodytrtdcolspan=align=center网站名称tdtrtrtdwidth=height=网站标题tdtdcolspan=align=right搜索框tdtrtrtdwidth=左边tdtdwidth=中间tdtd右边tdtrtrtdcolspan=align=center网站底部信息tdtrtbodytable产生如下的表格:这是一张整体的表格第一行和第四行分别跨度了三列这里用colspan=来限制而第二行的“搜索框”占用了两列的位置用colspan=控制align=center是对表格内文字的对齐限制center表示中间right表示靠右left靠左。表格的基础设置可以参考:html利用表格规划网站布局h择默认的对齐方式也即左对齐在html中的标签和属性是:tablealign=lefttable就能实现左边对齐。你现在出现的问题有可能是第一个表格设置了对齐方式例如居中对齐而第二个表格并没有设置对齐方式所以默认为左对齐这样就出现了上述问题。我的一些表格布局的经验:、表格布局第一步:先插入一个表格宽度是px(记住一定要用px不要用百分比)高度不用设置然后令这个表格居中。以后所有的内容都限制在这个表格中。、熟练使用表格嵌套。也就是说在一个表格中再插入另一个表格。举个例子把你要设计的页面分成大的几个部分然后利用表格的行数和列数来控制它们的布局如果某一个单元格中的内容又要分成几部分可以继续在这个单元格中插入表格方法同上。、补充:表格的边框一定要为即table中的border属性值为。也就是让表格在网页预览中不可见这样才能实现表格布局的目的。如何利用表格实现画中画也就是页中页效果网页的排版大多使用表格利用一个表个单元可以嵌入一个网页你知道吗,这样做有很多好处比如你把经常更新的区域划分一个表格单元然后在这个表格单元中嵌入你想要更新的内容今后更新主页只需上传这个被嵌套的页面就可以了没有必要对首页进行更新是不是很方便。我写个最简单的例子代码:,html,,head,,title,范例,title,,body,,tableborder=width=,,tr,,td,,IFRAMEsrc=examplehtmwidth=heitht=,,IFRAME,,td,,tr,,table,,body,,html,插入被嵌入页的关键代码是:,IFRAMEsrc=examplehtmwidth=heitht=,,IFRAME,。examplehtm是被嵌入的页面标签,IFRAME,还有一些可用的参数设置如下:marginwidth:网页中内容在表格右侧的预留宽度例如:marginwidth=单位是pix下同。marginheight:网页中内容在表格顶部预留的高度hspace:网页右上角的的横坐标vspace:网页右上角的纵坐标frameborder:是否显示边缘填表示是填表示否scrolling:是否出现滚动条填表示是填表示否表格背景图片的一个技巧大家都知道在一个较大的表格中放入背景图片背景图片就会重复填充直到整个页面。我们可以利用表格的这个特性来减小我们网页中图片的大小比如下面的一个渐变图你看上去像是一整张图片它其实用的就是表格背景重复填充特性而用的图片就是右边的那张大小只有k在此如果要用一张大的图片是很不划算的。你若要插入一根水平线用这方法也很有效。如何使鼠标指到表格表格背景变色这个特效用的是表格样式表要达到此效果你只需在,td,代码中加入onmouseout=thisstylebackgroundColor=onmouseover=thisstylebackgroundColor=#FFcccc例:onmouseout=thisstylebackgroundColor=onmouseover=thisstylebackgroundColor=#FFcccc,“#ffccc”是你鼠标指到表格上要变的颜色你可以根据自己需要改变颜色表格布局常见问题解答发布时间:、表格布满页面的问题我们在很多地方看到为了使页面适应不同的分辨率通常将表格的大小按百分比设置。刚开始学做网页的时候我已经把表格的宽度设置为但在浏览器上还是不能满屏显示四周总有一圈空白我曾对此感到迷惑不解后来在论坛请教才知道这不是表格的错。如果你用Dreamweaver制作网页这个问题很好解决选择菜单Modify,PageProperties,在弹出的对话框里设置Left、Top为就ok了~表格的变形问题网页在不同的屏幕分辨率、或改变窗口时常出现一些页面变形情况这也是最另人恼火的事怎么办呢秋实曾在天极网页(来自:WwWxltkwJcOm小龙文档网:表格布局网页模板)陶吧撰文详细的阐述过这个问题我们来看看他是怎么解决的。A、因为表格排列设置而在不同分辨率下所出现的错位这种变形情况是:、在*的分辨率下时一切正常而到了*时则多个表格或者有的居中有的却左排列或右排列很难看这是什么原因呢,在解决这个问题之前我们讲一下表格的排列。表格有左、中、右三种排列方式如果没特别进行设置则默认为居左排列不用说了这就是问题之所在。在*的分辨率下表格恰好就有编辑区域那么宽不容易察觉而到了*的时候就出现的解决的办法比较简单即都设置为居中或左或右。、同样是这种分辨率切换表格的上下排列不一致。上边的所说的是水平错位而这种则是纵向错位多发生在一个表格单元里嵌入另一个表格的情况。其原因在于嵌入的表格默认为竖向居中排列在*分辨率时这种错位看不出来而到*就出现了解决办法如前根据情况对排列进行设置而不是采用其默认设置。B、采用百分比而出现的变形这里所说的百分比是指表格的高或宽设置为上层标记所占区域高或宽的百分比如在一个表格单元的宽度是在它里面嵌入了另外一个表格表格宽度占表格单元的则这个表格的宽度为依此类推如果在一个表格不是嵌于另一个表格单元中则其百分比是相对于当时窗口的宽度的常出现在IE浏览器中随便改动主页窗口的大小时表格的内容也随之错位、变形这是因为表格的百分比也要随着窗口的大小而改变成相应的百分比宽度。当然了解决办法是不要设置成百分比我提倡的是如果表格没有外围嵌套标记则将宽等设置成固定宽度如有外围嵌套标记则将外转嵌套标记的宽度设置为固定值而表格的宽或高可设置为百分比这样就不会出现变形了。C、表格单元格之间互相干扰引起的变形这种变形情况通常是在工具里制作主页时没有空隙而在浏览时却发现莫名其妙地多出一些空隙而又不知原因在哪很是令人讨厌。本人也经常遇到类似的情况解决办法一是先看表格设置有没有上面所谈的两种情况如没有可能就是在划分表格时同一行的单元格之间相互牵制所出现的问题。我们知道同一行的表格单元在诸如DreamWeaver或FrontPage中经常频繁地被拆分所以同一行的单元格与另一个单元格的宽与高不一致这时你就要注意两个单元格属性:colspan、rowspan。colspan表示的是横向扩展而rowspan则表示的是纵向扩展这个扩展的意思即当前表格单元相邻的横向与竖向的表格单元数也可这样理解为表格单元的高或宽是相邻几个表格单元的高或宽的相加和这个单元格横向所占用的宽度是个表格单元的宽度(这里取最大值)即colspan=而竖向的高度是三个表格单元高度的总和即rowspan=。那么我们说的这种变形就和这个设置有关如果改变相邻单元格的高或宽与个数时图中所指的单元格也会发生相应的变化相互制约调整起来很麻烦这非我们所希望的我本人提倡如果表格比较复杂最好采取嵌表格的形式这样可以少一些单元格之间相互干扰情况而使单元格之间相对独立。出现变形有情况还很多我们就不一一陈述我建议你在划分表格时除了一些必要的高、宽设置外将其它的高、宽设置全部删掉一则减少了冗余代码另则也免除一些摸不着头脑的错误。、图片显示的问题有时候我们明明在单元格中插入了背景图片而且在Dreamweaver的视窗里也可以看到但是一预览背景图片就不显示了。遇到这种请情况不要着急检查一下你的代码是否正确我们来看下面的表格:表格代码:,tablewidth=border=cellspacing=cellpadding=bordercolor=#,,trbackground=hzzgif,,tdheight=,,td,,tdheight=,,td,,tr,,table,不错上面的背景图确实有(background=hzzgif)但由于放错了地方所以就显示不出来了请把背景属性放在,td,标记里面然后再预览一次怎么样这次出来了吧~表格代码:,tablewidth=border=cellspacing=cellpadding=bordercolor=#,,tr,篇二:用表格布局网页第课用表格布局网页一、教学目标:(知识与技能()了解网页设计中表格的作用。()掌握网页中表格的制作方法、表格属性的设置方法以及单元格的修饰与编辑方法能够在单元格中正确插入文字和图片。()能够根据网页设计内容正确布局表格的结构掌握表格嵌套的设计方法。(过程与方法()掌握软件学习中的对比学习法培养学生迁移学习的能力。()通过用表格结构设计网页使学生进一步理解表格的作用、功能及网页设计方法的多样性培养学生的发散思维能力。()通过自主探究使学生掌握软件的使用规则由摸索、探究性学习到形成性学习培养学生学会学习驾御学习的能力。(情感态度与价值观()通过对比学习使学生体验软件学习的一般方法及规律提高学生自主学习信息技术的能力。()通过运用表格布局网页对象活动(各人根据网站主题设计网页)进一步掌握各种不同对象的属性设置方法和规律体验创造的快乐。()通过“动物人类的朋友”表格页的设计与制作再次激发学生关爱动物、保护动物的责任感从而进一步树立共同改善人类生存环境的意识。二、教学重点、难点:(教学重点:()了解表格在网页设计中的重要作用和功能。()掌握插入、编辑表格的方法及表格的属性设置方法。()掌握单元格的修饰与属性设置。(教学难点:表格属性和单元格属性设置三、教学方法:对比教学法、探究学习法、模仿学习法。四、教学过程:(复习以复习提问的方式来回顾站点的建立、网页的新建以及网页中文字、图像等对象的插入学生认真回顾回答教师提问。为本节课教学做一定铺垫。(引入()观看两个页面并进行比较:一个使用表格布局但表格边框隐藏(看不出表格痕迹)其页面工整文本、图片摆放对称具有一定规律另一个页面凌乱图文混杂摆放杂乱。你更喜欢怎样的页面布局,提出问题:有什么办法可以达到第一个页面的效果,()观察第三个页面内容与第一个页面相同显现页面的表格边框。学生讨论交流回顾Word中学习过的表格明白表格在FrontPage中的作用。(新授()分析表格结构展示一些由表格布局的网页引导学生分析其表格结构自然过渡到教材中的例子(biaogehtm)分析结构得出表格的布局(如表格有几行几列哪些行做了哪些处理)。任务规划网页表格布局分层完成该任务基础相对薄弱一些的同学仅要求读懂教材中的网页表格布局知道规则根据表格的行数与列数调整至最终样式基础扎实、操作能力较强的同学可以跳出课本自行设计表格网页布局并将自己的表格设计绘制在书本上。学生可根据自己的实际情况选择任务难度并动手分析与创意设计。建议:使用多个非嵌套的表格来布局。设计意图:分层教学培养学生模仿以及创新能力。()完成表格布局FrontPage中表格的插入和编辑与Word中的表格操作类似教师无需讲解引导学生进行知识迁移。任务新建一个页面用表格布局该网页并在该网页中放入相应内容打开站点新建网页以“biaogehtm”为文件名保存。按前面分析的要求插入一个表格。调整表格结构(主要是行列的插入、删除单元格的合并、拆分、调整大小等)。老师可安排操作熟练的同学进行演示。()充实网页页面内容任务在表格中插入图片、输入文字建议:插入图片对象前对图片做一定处理例如选择风格统一的图片调整图片大小至同一尺寸等。注意图片的保存。()调整表格属性美化页面预览制作的网页修饰网页让网页看起来更美观。任务表格属性以及单元格属性的设置表格属性的设置如去除网格线、设置表格背景色等。使用不同的颜色区分各板块设置单元格属性。强调:学会利用右击后弹出的快捷菜单中的命令。学生根据自己的实际情况选择任务难度可按教师具体要求修饰、调整表格也可根据自己的意图修饰、调整表格。(表格边框的调整都需掌握)设计意图:完成必须要求掌握的知识同时给学生一定的自主空间鼓励他们去创新而非一成不变的生硬模仿。(总结与评价本节课我们学习了在FrontPage中插入表格、编辑表格以及表格嵌套的基本方法。请同学回答几个问题、并演示几个基本操作。展示表格页面制作完成的优秀作品表扬完成任务的同学对未完成的同学给予激励鼓励他们利用课余时间继续完成。学生回答问题:()表格在FrontPage中起到了的作用:定位对象。()表格编辑的基本操作。关注课堂学生操作达成率。篇三:使用表格布局网页教案信息技术教案学校:大连中学授课班级:初年班日期:年月日授课人:姜春月相关热词搜索:网页模板表格布局网页中表格布局的优点表格高度怎么设置html表格布局

用户评论(0)

0/200

精彩专题

上传我的资料

每篇奖励 +2积分

资料评价:

/12
0下载券 下载 加入VIP, 送下载券

意见
反馈

立即扫码关注

爱问共享资料微信公众号

返回
顶部