谈网页页面设计技巧

谈网页页面设计技巧　许佳南　（揭阳职业技术学院　揭阳　５２２０００）　摘　要关键词ＤＩＶ＋ＣＳＳ网页布局越来越多的被广泛应用于网页设计中，本文通过使用ＤＩＶ＋ＣＳＳ技术制作一个网页页面详细说明　ＤＩＶ＋ＣＳＳ　网页设计　ＤＩＶ＋ＣＳＳ的使用方法。　中图分类号ＴＰ３９３　文献标识码Ａ　文章编号１　２０３２６—６０９４　Ｗｅｂｐａｇｅ　Ｄｅｓｉｇｎ　Ｓｋｉｌｌｓ　Ｘｕ　Ｊｉａｎａｎ　（Ｊｉｅｙａｎｇ　Ｖｏｃａｔｉｏｎａｌ　Ｔｅｃｈｎｉｃａｌ　Ｃｏｌｌｅｇｅ　Ｊｉｅｙａｎｇ　５２２０００）　Ａｂｓｔｒａｃｔ　ＤＩＶ＋ＣＳＳ　ｉｓ　ｍｏｒｅ　ａｎｄ　ｍｏｒｅ　ｐｏｐｕｌａｒ　ｉｎ　ｗｅｂｐａｇｅ　ｄｅｓｉｇｎ，ｔｈｅ　ａｒｔｉｃｌｅ　ｅｘｐｌａｉｎｓ　ｔｈｅ　ＤＩＶ＋ＣＳＳ　ｕｓａｇｅｓ　ｂｙ　ｍａｋｉｎｇ　ａ　ｗｅｂｐａｇｅ．　Ｋｅｙｗｏｒｄｓ　ＤＩＶ＋ＣＳＳ　Ｗｅｂｐａｇｅ　ｄｅｓｉｇｎ　随着互联网与ＷＥＢ技术的发展，利用ＤＩＶ＋ＣＳＳ设计网站　合适的位置，再把每部分合理地叠放到网页中，这样就完成了网　的设计方式正逐步成为制作网站的主力军之一，ＤＩＶ＋ＣＳＳ技术　页的布局。　作为制作网页的重要组成部分，已经成为网页设计中必不可少　的要素。本文将详细介绍如何使用ＤＩＶ＋ＣＳＳ制作一个网页。　一二、主要设计部分　在ＶＳ．ＮＥＴ开发环境中，新建ｉｎｄｅｘ．ｈｔｍ，并创建ｅｇｇ文件，命　名为ｍａｉｎ．ｃｇｓ，将样式表写在一个独立的文件中。　在”一、布局设计　网页中的布局是整个网页制作中最开始的步骤，也是最为　ｉｎｄｅｘ．ｈｔｍ中写入＜！ＤＯＣＴＹＰＥ　ｈｔｍｌ　ＰＵＢＬＩＣ　关键的一步。网页中的布局决定网页的整体效果，合理的布局　美观的感觉。　／／Ｗ３Ｃ／／ＤＴＤ　ＨＴＭＬ　４．０　Ｔｒａｎｓｉｔｉｏｎａｌ／／ＥＮ”＞用来声明将会把Ｉｎ—　在＜ｈｅａｄ＞＜ｈｅａｄ＞中加人＜ｌｉｎｋ　ｈｒｅｆ＝”ｍａｉｎ．ＣＳＳ”　可以完美、清晰地组织网页中的文字、图形，给人以紧凑、整洁、　ｔｅｒｎｅｔ　Ｅｘｐｌｏｒｅｒ　６及以后版本切换到标准兼容模式。　在本例中，我们首先使用Ｐｈｏｔｏｓｈｏｐ设置网页页面的效果　ｒｅｌ＝”ｓｔｙｌｅｓｈｅｅｔ”ｔｙｐｅ＝＂ｔｅｘｔ／ｃｓｓ”，＞，这表示ｉｎｄｅｘ．ｈｔｍ可以链接到　图，接着再切图并使用ＤＩＶ＋ＣＳＳ语言将其做成ＨＴＭＬ形式。接　ｍａｉｎ．ＣＳＳ文件中，可以调用其中的内容。　下来我们详细说明使用ＤＩＶ＋ＣＳＳ语言的布局方法。　１、网页页面的每个区域，如页头区、主体区、法律和版权声　明等，我们都插入相应的ＤＩＶ元素，然后，用ＣＳＳ控制ＤＩＶ使网　页居中显示。在本例中，我们将分为ｂｎ，ｍａｉｎ，ｃｒ三个ＤＩＶ。　２、对于页面中所有的ＤＩＶ元素，利用ＣＳＳ控制ＤＩＶ的位　了“盒模型”的工作原理，“盒模型”是ＣＳＳ的基础，“盒模型”理　论认为：页面上的每个元素都被看做—个矩形，这个矩形由内　容、填充（ｐａｄｄｉｎｇ）、边框（ｂｏｒｄｅｒ）、和边距（ｍａｒｇｉｎ）构成。对于每　作原理来调整。在网页默认的情况下，元素由上到下依次叠放，　当这样的叠放顺序不能满足布局的需要时，就要使用“ｆｌｏａｔ（浮　在ｉｎｄｅｘ．ｈｔｍ的＜ｂｏｄｙ＞＜／ｂｏｄｙ＞中插入如下代码：　＜ｄｉｖ　ｉｄ＝”ｂｎ　ｌ”＞　＜ｕｌ＞　＜ｌｉ　ｃｌａｓｓ＝”ｂｎ２”＞＜ｉｍｇ　ｇｒｃ＝”ｔｈｅｍｅｓ／ｂｎｐｉｅ．ｇｉＹ’　ｓｔｙｌｅ＝”ｍａｒｇｉｎ—ｂｏｔｔｏｍ：－４ｐｘ；”／＞＜ｓｐａｎ　ｓｔｙｌｅ＝”ｆｏｎｔ—ｗｅｉｇｈｔ：ｂｏｌｄ；”＞　置，我们可以将页面中的ＤＩＶ视为一个个块状元素。在此应用　欢迎：管理员＜／ｓｐａｎ＞＜／ｌｉ＞　＜／ｕｌ＞　＜／ｄｉｖ＞　＜ｄｉｖ　ｉｄ＝”ｂｎ”＞＜ｕｌ＞＜ｌｉ　ｃｌａｓｓ＝”ｂｎ＿ｂｏｘ”＞欢迎访问揭阳职业技　部分的间距，以及文字、图片空隙的调整，我们用“盒模型”的工　术学院实训与计算机中心网站！＜／ｌｉ＞＜／ｕｌ＞＜／ｄｉｖ＞　对ｍａｉｎ．ｅｇｇ文件的主要设计代码如下：　ｂｏｄｙｆ　ｍａｒｇｉｎ：Ｏｐｘ；ｐａｄｄｉｎｇ：Ｏｐｘ；ｔｅｘｔ—ａｌｉｇｎ：ｃｅｎｔｅｒ；ｆｏｎｔ—ｓｉｚｅ：　动）”属性来改变元素的叠放顺序。元素应用了“ｆｌｏａｔ（浮动）”属　１２ｐｘ；｝　性，它周围的元素就会靠近、包围元素，这样的影响在有的布局　＃ｂｎ１｛ｐｏｓｉｔｉｏｎ：ａｂｓｏｌｕｔｅ；ｌ　中是多余的，这时，可以用“ｃｌｅａｒ（清除）”属性来阻止这种浮动对　＃ｂｎ１　ｕｌ｛ｌｉｓｔ－ｓｔｙｌｅ－ｔｙｐｅ：ｎｏｎｅ；ｔｅｘｔ－ａｌｉｇｎ：ｌｅｆｔ；Ｊ　一后面元素的影响。再复杂的布局也是重复利用这样的技术，大　．ｂｎ２｛ｐａｄｄｉｎｇ－ｔｏｐ：９５ｐｘ；ｐａｄｄｉｎｇ—ｌｅｆｔ：１４０ｐｘ；１　．到网页每一部分的叠放，小到文字、图片的排版。　３、在ＤＩＶ中添加各种网页元素，把文字、图片、动画安排到　ｂｎｂｏｘ　｛ｈｅｉｈｔ：ｇ２５ｐｘ；ｗｉｄｔｈ：４７０ｐｘ；ｃｏｌｏｒ：＃４８ＡＥ１４；　ｐａｄｄｉｎｇ—ｌｅｆｔ：１０ｐｘ；ｐａｄｄｉｎｇ—ｔｏｐ：１Ｏｐｘ；ｐａｄｄｉｎｇ－ｆｉｇｈｔ：１０ｐｘ；ｍａ卜　办公自动化杂志　３９‘　ｇｉｎ—ｔｏｐ：１２５ｐｘ；ｌ　＜ｌｉ　ｃｌａｓｓ＝”ｈｂｌ—ｍｒＰ’＞＜ｓｐａｎ＞关于开展实训室检查通知　＃ｂｎ｛ｗｉｄｔｈ：９６３ｐｘ；ｈｅｉｇｈｔ：１　６２ｐｘ；ｂａｃｋｇｒｏｕｎｄ—ｉｍａｇｅ：ｕｒｌ　（ｂｎｂｇ．ｐｎｇ）；１　＜／ｓｐａｎ＞＜／ｌｉ＞　＜Ｉｉ＞＜ｓｐａｎ＞实训中心２０１１－２０１２下学期课表＜／ｓｐａｎ＞＜／ｌｉ＞　ｍｒ＜ｌｉ　ｃｌａｓｓ＝”ｈｂｌＰ’＞＜ｓｐａｎ＞关于做好２０１】一２０１２学年度　三、在ｍａｉｎ的ＤＩＶ中的各个ＤＩＶ中插入相应　第一学期实验…＜／ｓｐａｎ＞＜／ｌｉ＞　的内容　存导航的Ｄ１Ｖ中插入相应的内容　＜ｄｉｖ　ｉｄ＝”ｎａｙ”＞　＜ｕ１＞　＜ｌｉ＞＜ｓｐａｎ＞关于做好２０１１—２０１２学年度第二学期实验…　＜ｌｉ　ｃｌａｓｓ＝”ｌｔｂｌｍｒ＜／ｓｐａｎ＞＜／ｌｉ＞　—ｒ’＞＜ｓｐａｎ＞关于做好２０１　１－２０１２学年度　＜ｌｉ＞＜ｓｐａｎ　ｓｔｙｌｅ＝”ｃｏｌｏｒ：｝≠２１５ＢＯＡ；’’ａ　ｈｒｅｆ＝”＃”＞学院首页　第一学期实验…＜／ｓｐａｎ＞＜／ｌｉ＞　＜／ｓｐａｎ＞＜／ｌｉ＞　＜ｌｉ＞＜ａ　ｈｒｅｆ＝”＃”＞实验系统＜／ａ＞＜／ｌｉ＞　＜ｌｉ＞＜ａ　ｈｒｅｆ＝”＃”＞实验实训率＜／ａ＞＜／ｌｉ＞　＜ｌｉ＞＜ａ　ｈｒｅｆ＝”≠｝”＞实训基地＜／ａ＞＜／ｌｉ＞　＜ｌｉ＞＜ａ　ｈｒｅｆ＝”＃”＞实训与实习＜／ａ＞＜／ｌｉ＞　＜ｌｉ＞＜ａ　ｈｒｅｆ＝”＃”＞管理制度＜／ａ＞＜／ｌｉ＞　＜ｌｉ＞＜ａ　ｈｒｅｆ＝”＃”＞技能鉴定所＜／ａ＞＜／ｌｉ＞　＜１ｉ＞＜ａ　ｈｒｅｆ＝”＃”＞高新技术考试站＜，ａ＞＜／ｌｉ＞　＜／ｕｌ＞　＜／ｄｉｖ＞　同时我们在ｍａｉｎ．ＣＳＳ文件中加入如下代码：　＃ｍａｉｎ　ｆｗｉｄｔｈ：９５０ｐｘ；ｂｏｒｄｅｒ：ｌ　ｐｘ　ｓｏｌｉｄ＃９７９４９４；ｂｏｒｄｅｒ＿ｂｏｔ—　ｔｏｍ：０ｐｘ；ｂｏｒｄｅｒ—ｔｏｐ：０ｐｘ；ｈｅｉｇｈｔ：９２０ｐｘ；｝　＃ｎａｖ｛ｗｉｄｔｈ：９４６ｐｘ；ｂａｃｋｇｒｏｕｎｄ—ｉｍａｇｅ：ｕｒｌ（ｎａｙ—ｍｇ．ｇｉｆ）；　ｈｅｉｇｈｔ：３７ｐｘ；ｂａｃｋｇｒｏｕｎｄ—ｒｅｐｅａｔ：ｒｅｐｅａｔ—　ｘ；ｍａｒｇｉｎ：０ｐｘ；ｌ　＃ｎａｖ　ｕｌ　ｆ　ｗｉｄｔｈ：９４６ｐｘ；ｍａｒｇｉｎ：０ｐｘ；ｌｉｓｔ—ｓｔｙｌｅ—ｔｙｐｅ：ｎｏｎｅ；　ｈｅｉｇｈｔ：３７ｐｘ；ｎｍｒｇｉｎ：０ｐｘ；ｌ　＃ｎａｖ　ｕｌ　ｌｉ｛ｂａｃｋｇｒｏｕｎｄ－ｉｍａｇｅ：ｕｒｌ（ｎａｖ　ｆ．ｇｉｆ）；ｆｌｏａｔ：ｌｅｆｔ；　ｗｉｄｔｈ：９１ｐｘ；ｈｅｉｇｈｔ：３７ｐｘ；ｃｏｌｏｒ：＃ＦＦＦ；　ｆｏｎｔ—ｗｅｉｇｈｔ：ｂｏｌｄ；ｐａｄｄｉｎｇ—ｔｏｐ：１　０ｐｘ；｝　在左边的ＤＩＶ中插入相应的内容　＜ｄｉｖ　ｉｄ＝”ｌｔｂ“＞　＜ｄｉｖ　ｉｄ＝”ｈｂ１”＞　＜ｈ２＞最新公告＜／ｈ２＞　＜ｄｉｖ　ｃｌａｓｓ＝”ｈｂ　１ｍ”＞　＜ｄｉｖ　ｃｌａｓｓ＝”ｈｂ１ｍｌ”＞＜ｓｐａｎ　ｃｌａｓｓ＝”ｌｔｂｌｍｌｂ”＞＜ｉｍｇ　ｓｒｃ＝”ｔｈｅｍｅｓ／ｈｂ１一ｐｉｃ１．ｇｉｆ＇’，＞省教育厅巡视员李小鲁同志莅临我　院指导工作＜／ｓｐａｎ＞＜／ｄｉｖ＞　＜ｄｉｖ　ｃｌａｓｓ＝”ｈｂｌｍｉｌｌ”＞＜ｓｐａｎ　ｓｔｙｌｅ＝”ｃｏｌｏｒ：＃４Ｂ４Ｂ４Ｂ；　ｆｏｎｔ－ｗｅｉｇｈｔ：　ｂｏｌｄ；　ｍａｒｇｉｎ－ｂｏｔｔｏｍ：　３ｐｘ；”＞＜ｉｍｇ　ｓｒｅ＝”ｔｈｅｍｅｓ／ｈｂ１ｐｉｃ２．ｇｉｆ＇’ｓｔｙｌｅ＝”ｍａｒｇｉｎ—ｔｏｐ：３ｐｘ；ｍａｒｇｉｎ—ｂｏｔ—　一ｔｏｍ：一３ｐｘ；”／＞指导工作＜／ｓｐａｎ＞＆ｎｂｓｐ；＆ｎｂｓｐ；１０月２７日，省　教育厅巡视员李小鲁同志莅临我院检查指导工作。李小鲁巡视　员一到学院就详细了解我院新征规划用地的进展情况，亲临实　训中心视察，并召开调研会。…＜／ｄｉｖ＞　＜ｄｉｖ　ｃｌａｓｓ＝”ｈｂｌｍｒ”＞　＜ｕｌ＞　＜ｌｉ　ｃｌａｓｓ＝＂ｈｂ１ｍｒｒ’＞＜ｓｐａｎ＞揭阳职业技术学院参加省职　业院校技能大赛＜／ｓｐａｎ＞＜／ｌｉ＞　＜ｌｉ＞＜ｓｐａｎ＞关于参加２０１２年度全国职业院校技能大赛　＜／ｓｐａｎ＞＜／ｌｉ＞　’４０　办公自动化杂志　＜ｌｉ＞＜ｓｐａｎ＞关于开展实训室期末检查通知＜／ｓｐａｎ＞＜／ｌｉ＞　＜ｌｉ　ｃｌａｓｓ＝”ｈｂ１ｍｒＰ’＞＜ｓｐａｎ＞关于开展实训室期中检查通　知＜／ｓｐａｎ＞＜／ｌｉ＞　＜／ｕｌ＞＜／ｄｉｖ＞　＜／ｄｉｖ＞　＜ｄｉｖ　ｃｌａｓｓ＝”ｈｂｌｂ”＞＜／ｄｉｖ＞　＜／ｄｉｖ＞　在ｍｉａｎ．ＣＳＳ文件中加入如下代码：　＃１ｔｂ｛ｆｌｏａｔ：ｌｅｆｔ；ｗｉｄｔｈ：６６２ｐｘ；｝　＃ｈｂ１｛ｔｅｘｔ－ａｌｉｇｎ：ｌｅｆｔ；ｗｉｄｔｈ：６６２ｐｘ；ｈｅｉｇｈｔ：３１２ｐｘ；｝　＃１ｔｂ１　ｈ２｛ｂａｃｋｇｒｏｕｎｄ－ｉｍａｇｅ：ｕｒｌ（１ｔｂｌ＿ｔ．ｓｉｒ）；ｃｏｌｏｒ：＃Ｆ７６９００；　ｆｏｎｔ－ｓｉｚｅ：１４ｐｘ；　ｆｏｎｔ—ｗｅｉｇｈｔ：ｂｏｌｄ；ｐａｄｄｉｎｇ—ｌｅｆｔ：６０ｐｘ：　ｐａｄｄｉｎｇ－ｔｏｐ：２０ｐｘ；ｈｅｉｇｈｔ：４７ｐｘ；ｂａｃｋｇｒｏｕｎｄ－ｒｅｐｅａｔ：ｎｏ－ｒｅｐｅａｔ；　ｍａｒｇｉｎ－ｂｏｔｔｏｍ：Ｏｐｘ；｝　在右边的ＤＩＶ中加入代码：　＜ｄｉｖ　ｉｄ＝”ｒｔｂ”＞　＜ｄｉｖ　ｃｌａｓｓ＝”ｒｔｂｌ”＞　＜ｄｉｖ　ｃｌａｓｓ＝”￣ｂｌｔ”＞＜ｓｐａｎ　ｃｌａｓｓ＝”ｒｔｂｌ＿ｆｌ”＞实训实验室　＜／ｓｐａｎ＞＜ｓｐａｎ　ｃｌａｓｓ＝”ｒｔｂ１Ｐ’＞更多＜／ｓｐａｎ＞＜／ｄｉｖ＞　＜ｄｉｖ　ｃｌａｓｓ＝”ｒｔｂｌｍ”＞　—＜ｕｌ＞　＜ｌｉ＞＜ｉｍｇ　ｓｒｃ＝”ｔｈｅｍｅｓ／ｒｔｂ＿ｐｉｃ　１．ｇｉＰ’／＞＜／ｌｉ＞　＜ｌｉ＞＜ｉｍｇ　ｓｒｃ＝”ｔｈｅｍｅｓ／ｒｔｂｐｉｃ２．ｇｉｆ＇’／＞＜／ｌｉ＞　＜ｌｉ＞＜ｉｍｇ　ｓｒｃ＝”ｔｈｅｍｅｓ／ｒｔｂ＿ｐｉｃ３．ｇｉｅ’／＞＜／ｌｉ＞＜／ｕｌ＞　＜ｕｌ＞　＜ｌｉ＞药学综合实训实验室＜／ｌｉ＞　＜ｌｉ＞动物房实验实训室＜／ｌｉ＞　＜ｌｉ＞化工原理实训室＜／ｌｉ＞＜／ｕｌ＞　＜ｕｌ＞　＜ｌｉ＞＜ｉｍｇ　ｓｒｃ＝”ｔｈｅｍｅｓ／ｒｔｂｐｉｃ４．ｇｉｆ＇’／＞＜／ｌｉ＞　＜ｌｉ＞＜ｉｍｇ　ｅｒｅ＝”ｔｈｅｍｅｓ／ｒｔｂ＿ｐｉｃ５．ｇｉｆ＇　／＞＜／ｌｉ＞　＜ｌｉ＞＜ｉｍｇ　ｓｒｃ＝”ｔｈｅｍｅｓ／ｒｔｂ＿ｐｉｅ３．ｇｉＰ。／＞＜／ｌｉ＞＜／ｕｌ＞　＜ｕｌ＞　＜ｌｉ＞天平实验实训室＜／ｌｉ＞　＜ｌｉ＞食品检测实验实训室＜／ｌｉ＞　＜ｌｉ＞化学实验实训室＜／ｌｉ＞＜／ｕｌ＞　＜／ｄｉｖ＞　＜ｄｉｖ　ｃｌａｓｓ＝”ｒｔｂｌｂ”＞＆ｎｂｓｐ；＜／ｄｉｖ＞　＜／ｄｉｖ＞　＜／ｄｉｖ＞　在右边的ｍａｉｎ．ＣＳＳ中加入代码：　＃ｒｔｂ｛ｆｌｏａｔ：ｉｆｇｈｔ；ｗｉｄｔｈ：２８０ｐｘ；ｍａｒｇｉｎ：Ｏｐｘ；ｌ　．ｒｔｂｌ｛ｗｉｄ山：２８２ｐｘ；｝　．ｒｔｂｌｔ｛ｂａｃｋｇｍｕｎｄ—ｉｍａｇｅ：ｕｒｌ（ｒｔｂｌ＿ｔ．ｇｉｆ）；ｆｏｎｔ—ｓｉｚｅ：１２ｐｘ；　甓　獯懿壤纛糍蕃喾黪　∞哺　＊＃　…　ｗｉｄｔｈ：２８１ｐｘ；ｈｅｉｇｈｔ：２６ｐｘ；ｍａｒｇｉｎ—ｂｏｔｔｏｍ：０ｐｘ；ｔｅｘｔ—ａｌｉｇｎ：ｌｅｆｔ；｝　．ｒｔｂｌｊｌ｛ｗｉｄｔｈ：２００ｐｘ；ｐａｄｄｉｎｇ－ｔｏｐ：５ｐｘ；ｆｏｎｔ－ｗｅｉｇｈｔ：ｂｏｌｄ；　《　ｌ　≈　＃　８。　卿　ｇ　ｃｏｌｏｒ：＃７０５ｃ８ｃ；　ｅ　ｇ　搿％一　ｐａｄｄｉｎｇ—ｌｅｆｔ：１７ｐｘ；｝　．ｒｔｂｌｊ　ｆ　ｃｏｌｏｒ：＃３５９ｂｃ６；ｆｏｎｔ－ｗｅｉｇｈｔ：ｎｏｍａｌ；ｗｉｄｔｈ：７０ｐｘ；　＿ｌ　…　＊∞　ｐ　ｐａｄｄｉｎｇ—ｔｏｐ：５ｐｘ；ｐａｄｄｉｎｇ—ｌｅｆｌ：４Ｏｐｘ；｝　．＃＃～　ｘ　Ⅲ　＃ｎ　船ｎ　。　赫；＿　ｒｔｂｌｍ｛ｂａｃｋｇｒｏｕｎｄ－ｒｅｐｅａｔ：ｒｅｐｅａｔ—Ｙ；ｂａｃｋｇｒｏｕｎｄ—ｉｍａｇｅ：ｕｒｌ　—《　《＆　《　（ｒｔｂ＿ｍ．ｇｉｆ）；ｗｉｄｔｈ：２８２ｐｘ；ｍａｒｇｉｎ—ｔｏｐ：０ｐｘ；ｐａｄｄｉｎｇ：０ｐｘ；｝　．ｒｔｂ１　ｎｌ　ｕｌ　ｆｗｉｄｔｈ：２５０ｐｘ；ｌｉｓｔ－ｓｔｙｌｅ－ｔｙｐｅ：ｎｏｎｅ；ｆｌｏａｔ：ｌｅｆｔ；　、Ｐ一　＃ｉ　∞　》ｃ　ｍａｒｇｉｎ：０ｐｘ；ｐａｄｄｉｎｇ－ｌｅｆｔ：８ｐｘ；ｌｉｎｅ—ｈｅｉｇｈｔ：２４ｐｘ；｝　．§　ｒｔｂｌＩＴ［ｕｌ　ｌｉ｛ｌｆｏａｔ：ｌｅｆｔ；ｐａｄｄｉｎｇ—ｌｅｆｔ：５ｐｘ；ｃｏｌｏｒ：＃９８９８９８；　不足的地方，主要表现在开发技术高，开发时间长，开发成本　高。　参考文献　ｔｅｘｔ－ａｌｉｇｎ：ｃｅｎｔｅｒ；ｗｉｄｔｈ：７９ｐｘ；ｐａｄｄｉｎｇ—ｔｏｐ：６ｐｘ；ｌ　图文混搭之后的效果图如下所示：　在这里，我们只给出“最新公告”和“实训实验室”这两块内　［１］（美）Ｋｙｎｎ　Ｂａｒｔｌｅ．ＣＳＳ入门经典［Ｍ］．北京：人民邮电出版　容。我们还可以在左边的ＤＩＶ中加入“管理制度”“实训基地”　社，２００７．　“技能鉴定”三个ＤＩＶ，在右边的ＤＩＶ中加入“资料下载”“实训与　［２】（加）Ｚｏｅ　Ｍｉｃｋｌｅｙ　Ｇｉｌｌｅｎｗａｔｅ．灵活Ｗｅｂ设计［专著１【Ｍ］．北　实习”“高新技术考试”三个ＤＩＶ。　京：机械工业出版社，２００９．　四、上传测试　蕊　【３］郑宁宁．浅析ＤＩＶ＋ＣＳＳ网页设计技术ｌＪ１＿山东省农业管理　本文中的网页已通过测试运行并发布到ＷＥＢ服务器上测　～　Ｉ—Ｉ　干部学院学报，２００８．　试。上传后运行正常；并在不同分辨率下都能够正常显示。　ｆ４］车元媛．ＣＳＳ技术在网页设计中的应用研究　科技信息，　五、结束语　２０１１．　本文运用了ＤＩＶ＋ＣＳＳ技术设计的网页使用方便，兼容性好。　作者简介　但是ＤＩＶ＋ＣＳＳ布局的网页由于需要兼容各种浏览器，也有其　（上接第５０页）　许佳南揭阳职业技术学院讲师。　放录像，让学生先观察“一片”叶子从树上落下来的样子，在观察　气氛。　“一片片叶子从树上落下来”的情景，学生在比较中自然理解了　五、运用电教手段。培养读写能力　朗读是语文课堂教学中，最经常最重要的训练。运用电教　句子的含义。又如《刻舟求剑》一文明白找不到剑的原因是教学　重点。教学中可以通过演示活动幻灯片，让学生观察“船靠了岸”　手段可以烘托课堂气氛，促使学生声情并茂的读书。多媒体播　或“船在行驶”而“宝剑”没有随船走，即“船动剑不动”让学生明　＿　一　放的朗读声音，清晰标准，语调抑扬顿挫，富有感染力。可以让　白“那个人”找不到剑的原因。电化教育的直观、形象、生动，启发　学生跟着练习朗读，有错误之处再加以纠正，促进学生朗读能　了学生思索，培养了学生的理解能力。　力的培养。　一　四、运用电教手段，培养学生听说能力　如在教学《日月潭》、《黄山奇石》等表现祖国壮丽河山、旖旎　录音媒体是以清晰和流利的普通话，有的配以悦耳动听的　风光的文章时，可以充分运用多媒体进行教学，让学生先一边听　音乐录制而成的。播放朗读录音带，使学生沉浸于某种境界，从　范读一边欣赏此地的风景录像。电化教学把优美的意境、生动的　而展开想象的翅膀，达到最佳教学效果。　是无法比拟的。当录音带放到“黄盖把二十条船芦苇一齐点着　语言、丰富的情感融于一体，使学生仿佛在如画的湖光山色中漫　综上所述，电化教育以形、声、色、情的优势将教材内容直观　如《赤壁之战》这一课，教师的朗读与配乐录音朗读的效果　游。这样学生再朗读课文时必定感情充沛，有声有色。　火，乘着东南风驶向曹操船队，曹军在铁索连着的船上无法逃　形象地展现在学生面前，使学生眼见其形、耳闻其声，受到了美　脱，哭声、丢盔弃甲声以及周瑜的兵追来的喊杀声、震天的锣鼓　的熏陶，能更好的掌握语文知识。但也要引起警觉，电教容易使　声混成一片”，使学生有一种身临其境的感觉。学生听完录音后，　人沉醉于色彩斑斓的画面和赏心悦目的乐海中，绝不能以娱乐　了解了故事梗概，注意力都比较集中。让学生附属故事情节，他　而告终。同时，也有可能使学生减少对抽象的语文符号的兴趣，　们也复述得较为完整和生动。教后启发学生并提问：假如曹操知　缺乏独立思考精神，从而产生“电教手段依赖症”。利用电教手　道黄盖是来假投降，“赤壁之战”结果又将如何？学生纷纷举起小　段，旨在优化课堂教学，充分调动学习自觉性和主动性，提高学　手，抢着回答。有的说曹操将会设置一个埋伏圈，包围周瑜的士　习效果，才能使电化教育发挥最佳功能。　兵，一齐用带毒的弓箭射向周瑜的士兵；有的说曹操可能会想办　作者简介　法引周瑜的士兵上岸，再进行交锋。总之，曹操知道黄盖来假投　陈利利，女，江苏泗洪人，１９７８年２月生，小学语文高级教　降，一定会以强取胜的。学生在这种音响效果的氛围内学习，加　师，本科学历，曾多次荣获江苏省宿迁市市县级“优秀班主任”和　深了对教材的理解，展开了想象，培养了说话能力，活跃了课堂　“先进教师”称号。　办公自动化杂志‘４１．