网页设计中层的应用案例分析

来源 :成功·教育 | 被引量 : 0次 | 上传用户:lkh007
下载到本地 , 更方便阅读
声明 : 本文档内容版权归属内容提供方 , 如果您对本文有版权争议 , 可与客服联系进行内容授权或下架
论文部分内容阅读
  摘要:本文通过介绍层的概念、表格和层的区别、创建层的方法、设置层的初始状态这些内容,讲述了层的一个方面应用在网页中制作一只自由飞翔的小鸟。
  关键词:层;表格;站点;时间轴;关键帧div+css
  
   一、层的概念
  
   所谓层就是网页内容的容器,网页设计人员可以定位在网页上的任意位置,层可以包含文本、图像、表单、插件或其他任何HTML文档中允许放入的内容,甚至层内还可以包含其他层,同时层也可以移动和重叠。
  在Dreamweavcr中,层可以分为CSS层和Netscape层两种格式:
  1、CSS层是利用
标记来创建层,它通过CSS样式来实现对文档内容的定位,具有很好的兼容性,Microsoft Intemet Explorer和NetscapeNavigator都支持CSS格式。它的属性由环球网协会(W3C)的“用层叠样式表定位HTML元素”定义。
  2、Netscape层是使用標记来创建层,它是Netscape公司自定义的层标准,它的兼容性较差,只有Netscape Navigator浏览器才支持,它的属性由Netscape的专有层格式定义。
  
  二、表格和层的区别
  
  大家都知道表格和层都是用于网页设计布局工具,那它们之间又有怎样的区别呢?下面通过一张表格很清楚便可知道:
  
   三、创建层的方法
  
  1、插入层:把光标置于网页制作软件Dreamweaver的文档编辑窗口中想插入层的地方,然后选择菜单[插入]—[层]命令。
  2、拖放层:把插入栏中的层按钮拖到文档编辑窗口中。
  3、绘画层:在插入栏中单击层按钮,在文档编辑窗口中拖动鼠标画出一层。(注意:只能拖动到设计视图中才能插入层)
  4、创建多个层:单击插入栏中层按钮,按下Ctrl键的同时,在文档编辑窗口中画出一个层。只要不释放Ctrl键,可以连续创建多个层。
  
  四、设置层的初始状态
  
  要设置层的初始状态,可以通过选择层以后,层的属性面板中可见性属性来设置。
  各项含义如下:
  default(默认):按照浏览器默认方式控制层的可见性。大多数浏览器都会以inherit方式控制层的可见性。
  inherit(继承):继承父层的可见性属性。
  Visible(可见):总是显示该层的内容,不管父层是否可见。
  Hidden(隐藏):总是隐藏该层的内容,不管父层是否可见。
  
  五、制作一只自由飞翔的小鸟
  
  操作步骤:
  1、新建一个网页文件。(1)通过[开始]菜单—[程序]—[Macromedia]—[Macromedia Dreamweaver],启动Dreamweaver。
  (2)运行Dreamweaver后,第一件要做的工作就是必须创建站点,创建站点的目的是为了在网页设计过程中便于有效地管理网站文件。创建方法:
  通过[站点]菜单—[新建站点]命令打开对话框,有基本和高级两个选项卡,基本选项卡是一个建立站点的向导,高级选项卡则用来快速设置站点的属性。建议入门或初学者先使用基本选项卡,高手和比较熟悉后再选用高级选项卡。基本选项卡根据提示一步步操作即可,这里重点介绍高级选项卡的设置。
  *在“分类”列表框中选择“本地信息”选项,创建一个本地站点。
  *“本地信息”列表框中设置以下参数项:
  站点名称:在此文本框中输入站点名称。
  本地根文件夹:设置站点文件的存放位置。可以直接在文本框中输入路径,也可以单击后面的文件夹图标,浏览选择本地站点存放位置。
  *自动刷新本地文件列表:选择此复选框后,如果更改、删除站点文件等这些操作,可以自动刷新本地站点文件列表。
  *默认图像文件夹:设置默认的图像存储路径。
  *HTTP地址:设置站点的URL,可以验证站点内使用的绝对URL的超链接。
  *启用缓存:选择此项可以创建本地高速缓存,改善链接的速度和提高站点管理。
  设置完成后,单击“确定”按钮。结果在右边[站点]面板就会出现下图的情况
  (3)新建一个网页文件。选择[文件]—[新建]命令,或者按键盘上Ctrl+N快捷键新建一个HTML类型的文件,然后选择[文件]—[保存]命令,将弹出一个[保存为]对话框,需要选择保存的位置(刚才创建站点的本地根文件夹中)、保存的文件类型为htm或者html和保存的文件名以后,将新建文件保存为bird.htn。
  (4)设置页面属性。通过[修改]菜单—[页面属性]命令,或按Ctrl+J快捷键设置。
  只需要设置标题(标题内容会在IE浏览器窗口的标题栏中显示)和顶部边界为0(网页内容和窗口上边之间的距离)。
  2、插入图层和鸟的图像。选择插入栏中的常用选项卡,单击层按钮,在新建网页中按住鼠标左键不放,拖出一个矩形框,然后松开左键就可以创建一个层。或者通过前面介绍的其它创建层的方法来插入层。
  在层中单击鼠标左键,将光标置于矩形框内,再单击插入图像的按钮,弹出选择图像源对话框,选择要插入Rif格式的小鸟图片,单击确认按钮确定。
  3、打开时间轴并设置动画的起止位置。选择[窗口]菜单—[其它]—[时间轴]命令或者按AIt+F9快捷键,打开时间轴工具栏。选择页面中的层并按鼠标左键不放,(注意:这里一定要选中层而不是选中图片)将其拖动到时间轴的第一通道上并让开始的小圆圈对准第一帧,拖动结束的小圆圈到最后一帧(最后一帧由自己根据需要设定,这里设置为60)。然后选择第一帧把层拖动到开始的位置,选择最后一帧再把层拖动到结束的位置,说明小鸟从第一帧开始播放到最后一帧结束,页面中会出现一条运动轨迹。
  4、增加关键帧。如果想改变运动轨迹,可以在时间轴上增加关键帧。方法:对着要改变的帧单击右键会出现快捷菜单选择[增加关键帧]命令后,移动层到一定的位置即可。这样一只从左到右飞翔的小鸟就制作完成了。
  5、制作从右到左的动画。现在动画仅仅只作了一半,要想完成小鸟来回飞的效果,还需要在页面中添加另外一个时间轴。
  (1)在页面中再插入一个层并插入一张反向飞的小鸟图片(提示:如果没有,可使用MacromediaFireworks制作修改),并将层拖到时间轴的第2通道上的第61帧(通道l最后一帧的后一帧位置,因为小鸟从左飞到右后,才从右飞到左)。
  (2)延长时间轴右边小圆圈到最后一帧120帧位置并拖动层到结束的地方。通过增加关键帧的方法改变运动轨迹。方法同上。
  (3)让时间轴2的最后一帧和时间轴l的第一帧属性中左和上的值保持一致,时间轴2的第一帧和时间轴1的最后一帧属性面板中左和上的值保持一致。
  6、保存文件并浏览网页。选择时间轴窗口中的自动播放和循环选项(目的使小鸟动起来,否则小鸟在原地动)。选择[文件]菜单—[保存],保存编辑完成的网页。按F12键预览效果,会看到一只在网页中自由飞翔的小鸟。动画就制作完成了。
  
  六、结束语
  
  介绍了教学过程中一个小鸟飞的实例,让大家了解到层的一个方面应用。随着网页技术的不断更新,层已经是大家制作网页的首选工具。原来很多的网页都还是利用表格来布局,代码冗余臃肿,运行效率不高,执行速度慢,不便于后期更新维护。而利用现在新的DIV(层)+CSS布局网页技术,花费时间少,页面代码减少,定位精确维护方便,一直受到大家的好评。
  
  参考文献:
  [1]前沿科技曾顺,精通CSS+DIV网页样式与布局,北京:人民邮电出版社,2007(8)
  [2]阳西述,网页制作与网站设计,武汉:武汉大学出版社,2007(9)等
其他文献
应城市为蒲阳古胜地,蒲骚文化的发祥地,钟灵毓秀、人杰地灵。坐落其间的湖北省应城市第一高级中学(以下简称“应城一中”)是湖北省示范学校之一,同时也是湖北省教改名校、教育科学研究实验学校和信息技术教育实验学校……  应城一中的前身为“私立应城西河初级中学”,由应城膏盐业锤业工会于1930年出资兴办。1945年秋,改建为“应城县立初级中学”。新中国建立后,该校在学段设置方面经历了三次变革,几度易名,19
期刊
摘要:课堂教学的过程是学生产生问题,提出问题,然后解决问题的过程,但长期以来,我们的课堂上敢于提问、善于提问的学生越来越少,以致于课堂教学缺乏生气,教学改革缺乏创新精神,本文从教师这个层面来尝试解决学生提问方面的问题,主要从帮助学生消除心理障碍,激发学生学习兴趣、教给学生学习方法,提高学生提问的质量的角度,提高学生提问的积极性,挖掘学生内心的求知欲,使学生做到“敢问”“能问”“善问”,从而使我们的
期刊
摘要:课堂教学环境中创设一个有利于张扬学生个性的“场所”,让学生的个性在宽松、自然、愉悦的氛围中得到释放,展现生命的活力。让我们的化学课堂情趣盎然,成为学生向往的地方。  关键词:课堂教学;学生;情趣与活力    一、尊重学生,掌握学生的学习起点    现在的学生接触的事物多,了解的信息多,我们教师不得不承认现在的学生了不得,他们大多爱表现,只要老师给予机会,一般都不会放过,所以只要你的课堂处处体
期刊
摘要:本文运用现代化教学手段,就如何上好一堂职业教育英语课作了一次探索,职教英语课堂教学必须以教材为基准,向社会生活的方方面面渗透,即需融入大量信息,因此教师必须运用计算机多媒体技术给予学生全方位的信息输入刺激。  关键词:职教英语教育;计算机多媒体教学手段;灵活积极的教法设计     当今世界,瞬息万变,“变”即“信息交替更新”,信息已经成为人们生活中必不可少的一部分,渗透到人类生活的各个方面。
期刊
新学期刚开始,我就发现在我的语文课堂上,每次上课总是那一个学生在睡觉。我下课后向同学们了解一下,他们都争先恐后地告诉我:“老师,他叫赵强。你别管他,原来幾个班主任都拿他没辙,他还敢跟老师吵架,可厉害啦!他每天都睡觉,有时上午四节课,他就能连睡四节课,是我班公认的‘睡神’!”我听了以后,心里稍微明白了一些。  第二天上课时,我先声明,上课最好别睡觉。因为这样做对不起三种人:第一种人是自己的父母,他们
期刊
随着南京文化艺术中心音乐会的落幕,成功的喜悦和幸福的泪水在我们心中流淌。由衷感谢江苏省教育厅、江苏省教研室为我们一线的音乐教师搭建了一个很好的学习提高的平台。  在这将近三年的培训中他们跟随中央音乐学院音教系的姜谧娅、董瑶瑶老师学习了柯达依教学法、奥尔夫教学法、达尔克罗兹教学法等世界先进的音乐教学法,同时还聆听了许多专家的精彩讲座,老师们以鲜活的实例、丰富的知识内涵、精湛的理论阐述和崇高的敬业精神
期刊
摘要:指出了独立学院党建和思想政治工作所取得的成绩及存在的问题,分析了存在问题的原因,提出了从建立省委教育工委独立学院工作处,出台相应工作条例,纳入评估的量化指标、优化大学生思想政治教育的渠道等方面强化独立学院党建和思想政治教育工作。  关键词:独立学院;党的建设;思想政治教育    独立学院是近10年来我国高等教育办学体制改革创新的重要成果,为发展民办高等教育事业、促进高等教育大众化做出了积极贡
期刊
一、团队精神的定义    在英文中,团队精神(team spirit)最初是指一个群体为了实现某一特定目标,通过主动调节群体内部的矛盾和行为,而呈现出通力合作、一致对外的精神面貌。学界从不同的研究角度不同的侧面给出了不同的定义,但至今难以统一,总结一下常见有如下几种:  所谓“团队精神”,是指个人在实现自身利益和目标的过程中,认识到自身利益对集体或他人利益的从属性和不可分割性,从而自觉地以集体的共
期刊
摘要:语文学科作为“各科之母”在整个学校教学过程中有着举足轻重的地位,在语文教学中应该做到知识传授与心育、德育渗透的有机结合,中学语文蕴含着中学道德教育的重要内容——中华民族的优秀传统和美德,道德教育往往要通过情感的共鸣,才能优化其教育效果,因此,在教学中,中学语文教师应该充分重视和有效利用情感教育来实现语文教学中的情感渗透,像养花一样地精心爱护学生,走进学生的内。世界,实现语文教学“三维目标”的
期刊
面对新的机遇与挑战,如何解决思想政治教育工作中遇到的新问题,是高校思想政治工作者必须认真思考而又必须认真解决的重大问题。    一、网络为高校思想政治教育带来新的机遇    1、信息资源共享,为高校思想政治教育工作提供了更为丰富的教育内容。网络技术的产生与发展使众多的教育资源得以充分交融与利用,使得思想政治教育的内容更加丰富,且具有极高的文化和科技含量,并使教育方法现代化。  2、网络的“虚拟”性
期刊