中职学校表格在网页布局中的应用
随着Internet的飞速发展,网络成为人们生活中的一种重要通信工具。它不仅可以让人们获取到自己想要的信息资源,还可以让我们享受到网上的种种乐趣。网页作为与浏览者直接进行信息交互的介质,包括文字、图像、动画等。如何使这些元素在网页中的合理位置显示出来,使网页变得美观合理,是所有设计人员在设计网页时所必须考虑的事情。
一、表格的作用与构成
在网页设计中,表格主要应用于两个方面:一方面,它作为数据的列表进行显示,直观地表示数据的组织结构;另一方面,它用于控制各元素在网页中的定位,组织网页布局。通过表格可以准确定位各种内容,以实现各种不同的网页布局
在表格中,横向称为行,纵向称为列,行列相交所产生的区域称为单元格,整张表格的边缘称为边框。
在Dreamweaver中,单击菜单“插入”→“表格”命令,在弹出的“表格”对话框,设置其行数和列数、表格的宽度、边框粗细、单元格边距及间距,单击确定。
在使用表格布局时,对于表现形式多样、内容丰富、布局相对复杂的网页,我们采用嵌套表格的方法对页面进行划分,使页面内容显得更有层次,也便于页面元素的修饰。嵌套表格是在一个表格中再插入表格,其作用是让同一行的不同单元格之间在调整高度或宽度时不会相互影响。
二、表格布局网页
为了让用户对网页有一个清晰的认识,除了网页内容之外,还需要一个合理的网页结构,而这个合理的网页结构就是网页布局。在设计网页结构的时候,我们必须清楚所设计的页面要展示的内容,然后根据这些内容把一个网页分成不同的模块,以及每个内容模块的目的,并根据这些模块建立相应的网页结构。
第一步:规划网站
网站的规划包括:页眉、左侧栏目、正文、右侧栏目和页脚。
第二步:创建站点及html文档
第三步:运用表格布局网页
下面结合“数码资讯网站”教学为例,阐述表格在网页布局中的运用。
步骤一:确定网站的布局类型:本图中的“数码资讯网”只有页眉、左侧栏目、正文和页脚部分,是典型的“拐角型”布局。
中职学校表格在网页布局中的应用
重庆市酉阳职业教育中心 吴春艳
摘 要:表格是网页设计中最常用的布局设计工具,它不仅用于排列数据还可以对页面中的文本、图像、动画等元素进行准确的定位,使页面显得整齐有序、分类明确,便于浏览者访问。本文以“数码资讯网站”的制作为例阐述了表格在网页布局中的重要性。
关键词:网页，表格，布局
中图分类号:G712 文献标识码:A 文章编号:1002-1221(2018)08-0116-02
不同的游戏表演方式,如个体表演,小组表演和群体表演,让不同性格和发展特点的幼儿承担不同的角色,有利于幼儿内心情感体验的大胆地表达和个性化的发展。如故事《耳朵上的绿星星》的游戏表演活动中,我让一个性格外向、语言表达能力较强的幼儿独自扮演红小松鼠,让两个能力中等水平的幼儿扮演萤火虫,让性格内向、胆小怯懦的幼儿小草。根据幼儿能力水平承担不同的角色任务,让每一个幼儿都不再是往日的“观众”,都有机会参与到游戏表演中,从而有效地引导幼儿积极地用身体动作和语言把故事生动地表演出来。所以,我觉得用游戏表演的方式,不仅让幼儿体验语言表达的丰富与快乐,也更能让幼儿变得自信与活泼。通过表演,使幼儿体会故事的主题思想以及各种人物不同情况下的思想感情。
总之,幼儿阅读图画书时总以自己的生活经验理解故事中的世界,并在与图画书的接触中拓展着自己的知识经验,理解这社会规范,获得社会性的发展。对幼儿而言,阅读即生活。在理解故事的过程中,幼儿已不知不觉、潜移默化地进行着社会化的过程,无形中扩展了幼儿的社会经验。本文主要研究故事研究法在幼儿园大班社会领域中的对策,使得教师在使用故事法教学时能更好地在大班幼儿社会领域中达到更好的教育效果。培养大班幼儿的规则意识,促进大班幼儿审美能力的发展,获得积极的情感体验,促进大班幼儿社会性发展。
参考文献:
[1]但菲.幼儿社会性发展与教育活动设计[M].北京:高等教育出版社,2008.
[2]叶明芳.幼儿园故事教学活动的组织与实施[J].学前教育研究,2010.
[3]王靖淑.谈故事教学中应注意的问题[J].胜利油田师范院校专科学校学报,2000.
2018年8月上半月刊· 116 ·
步骤二:创建站点及html文档
1.右击桌面→新建文件夹→命名“web”,在其中建子文件夹files、images、css、other等四个文件,分别用于放置子网页、图像、css样式、和其他的一些文件。
2.打开Dreamweaver 软件,单击“文件”→新建→基本页HTML→创建。
3.单击“站点”→新建站点→输入站点名称及相应的设置。
4.单击“页面属性”→设置背景图像。
步骤三、运用表格布局网页
1.制作页眉部分
单击“插入”→表格,打开表格对话框,创建3行7列,宽度为1000的表格。
将第一行所有单元格选中,右击→表格→合并单元格,并设置其高度为200,单击“插入”→图像→选择图像→确定。
选中第二行所有单元格,设置其宽度为143px,高度为43px,水平对齐为居中,字体大小为24px,白色,并在单元格中输入文本。
将第三行所有单元格选中合并,并设置其高度为10px。
2.主体结构制作
插入1行2列表格,左侧单元格宽度为224px,右侧单元格宽度为774px。
（1）左侧结构制作
在左侧单元格插入三个嵌套表格,分别为“最新数码资讯”“平板电脑”和“数码网站”,均为2行1列,宽度为100%。
设置每个嵌套表格第一行的背景图片,高度为30px ,输入相应的标题。第二行单行中格各插入嵌套表格。
（2）左侧主体结构制作
在“最新数码资讯”中插入8行1列表格,其单元格高度为30px,输入相应的数码资讯文本。
在“平板电脑”中插入3行1列表格,单元格高度为50px,水平居中对齐,垂直居中对齐,并创建“b.css”样式,规则定义其背景“b.jpg”,水平居中对齐,垂直居中对齐,不重复,并在其中输入相应的文本。
在“数码网站”中插入6行1列表格,设置各单元格高度为40px,水平居中对齐,垂直居中对齐,并在其中插入相应的图片。
3.右侧结构制作
在右侧单元格中有四个嵌套表格,均为2行1列,其第一行的设置与左侧表格第一行的设置方法一样,第二行单元格再嵌套表格。
（1）第一部分制作
在右侧单元格中插入2行1列的表格,并设置第1行单元格高度为30px,背景图片,输入文本“数码新产品”并设置文字的属性。
在第2行单元格中插入2行3列表格,宽度为90%。
选中所有单元格,设置宽度为30%,对齐方式均为居中。
创建样式表“.k”,定义背景图像“k..jpg”对齐方式均为居中,不重复,并运用该样式到第1行单元格中,并在其中插入图片。
在第2行单元格中输入文字,并设置文字属性。
（2）第二部分制作
方法同上(1)。
在第2行单元格中插入5行2列表格,高度为30px,设置表格背景颜色,单元格背景颜色,文字对齐方式,并调整左右两例的宽度,输入相应文字。
（3）第三部分制作
方法同上(1)。
在第2行单元格中插入5行6列表格,设置第一行高度为40px,背景颜色,第1、2列合并,第3、4列合并,第5、6列合并。其余各行单元格高度为30px,输入相应文字。
(4)第四部分制作
方法同上(1)。
在第2行单元格中插入7行2列表格,高度为30px,并将1、3、5、7行设置背景颜色。
调整第一列二列的列宽,并在单元格中输入文字。
4.页脚部分制作
插入1行1列表格,宽度为1000,高度为130。
设置表格的背景图像,水平对齐居中,垂直对齐居中,并在其中输入页脚文本。
表格是网页布局设计中最常用的布局设计工具,无论是用于对齐数据还是在页面上对文本进行排版,表格都有着它的强大功能。当使用表格布局网页时应注意以下几点:当表格用于定位时,表格边框、间距和填充三个参数都应设置为“0”。
为了不让插入的内容将单元格撑开,影响到网页的版面,必须要为单元格设定宽度。
网页中的相关元素的对齐方式,均采用单元格中的水平与垂直对齐方式。
单元格的默认高度为10px,如果设置单元格的高度小于10px时,应将单元格的“＆npsp;”空格删掉。
使用表格嵌套布局网页时,最外层的表格宽度用像素,内层表格使用百分比。
网页中的内容较多时,应将内容分成模块制作,以便加快下载与运行的速度。
三、结束语
在以上的案例中,可以发现使用表格布局网页不仅能够让网页的页面整洁,还能直观的表现数据的组织结构,准确的定位表格中各个元素,使页面更加的合理化。
参考文献:
[1]钱锋,张继辉.网页设计与制作(第2版).北京:高等教育出版社,2014.
[2]胡洪健.网站建设实训Dreamweaver CS3.重庆:重庆大学出版社,2011.
2018年8月上半月刊· 117 ·