蔓 堡 堡圣 ２０１ ７年７）１第１ ８卷第７期 浅谈Ｄ ｌ Ｖ＋ＣＳＳ布局技术在 网页设计与制作中的应用 杨瑞梅 （重庆应用技术职业学院汽车与电子工程系 重庆４ ０ １ ５ ２ ０） 【摘要】ＤＩＶ＋ＣＳＳ布局技术已成为当前网页设计的一种趋势，本文介绍了ＤＩＶ＋ＣＳＳ布局技术以及利用其设计页面的几 个主要优点，并通过举例说明ＤＩＶ＋ＣＳＳ布局技术的应用思路和核心技术。 【关键词】ＤＩＶ＋ＣＳＳ布局；网页布局；网页设计 【中图分类号】ＴＰ３９３．０９２ 【文献标识码】Ａ 【文章编号】１００９－５６２４（２０１７）０７－０１１８－０３ ［Ａｂｓｔｒａｃｔ］ＤＩＶ＋ＣＳＳ ｗｅｂ ｐａｇｅ ｌａｙｏｕｔ ｔｅｃｈｎｉｑｕｅ ｈａｓ ｂｅｃｏｍｅ ａ ｔｒｅｎｄ ｉｎ ｃｕｒｒｅｎｔ ｗｅｂｐａｇｅ ｄｅｓｉｇｎ．Ｔｈｅ ｐａｐｅｒ ｄｅｓｃｒｉｂｅｓ ｔｈｅ ＤＩＶ＋ＣＳＳ ｗｅｂ ｐａｇｅ ｌａｙｏｕｔ ｔｅｃｈｎｉｑｕｅ ａｎｄ ｉｔｓ ａｄｖａｎｔａｇｅｓ［￣ａｎｄ ｉｌｌｕｓｔｒａｔｅｓ ｔｈｅ ａｐｐｌｉｃａｔｉｏｎ ｉｄｅａｓ ａｎｄ ｃｏｒｅ ｔｅｃｈｎｉｑｕｅｓ ｏｆ ＤＩＶ＋ＣＳＳ ｌａｙｏｕｔ ｔｅｃｈｎｏｌｏｇｙ ｔｈｒｏｕｇｈ ａ ｓｉｍｐｌｅ ｅｘａｍｐｌｅ ａｂｏｕｔ ｗｅｂｐａｇｅ ｌａｙｏｕｔ． ［Ｋｅｙｗｏｒｄｓ］ＤＩＶ＋ＣＳＳｌａｙｏｕｔ；Ｗｅｂｐａｇｅｌａｙｏｕｔ；Ｗｅｂｄｅｓｉｎ ｇ１引言 式表。它用于控制网页样式并允许将样式信息与网页内容分 离的一种标记性语言。ＣＳＳ通过格式化网页、控制字体、布 局、颜色等对页面风格进行控制。使用ＣＳＳ设置页面格式时， 由于内容与表现相互分开，页面内容位于自身的ＨＴＭＬ文件 中，而定义代码表现形式的ＣＳＳ规则位于另一个文件（即 外部样式表）或ＨＴＭＬ文档的另一部分（＜ｈｅａｄ＞）中，可以 使网页设计人员非常灵活地控制页面的外观，使网页的内 容和表现形式分离开来，增强文件结构性、可读性。 ＤＩＶ＋ＣＳＳ技术实现了网页内容和表现形式的分离，更 能合理地分析、整理复杂的网页信息，恰当地将信息放入 网页中，是一种应用灵活的网页布局方式。 随着ｗｅｂ标准在国内的逐步普及，许多网站己经开 始重构。Ｗｅｂ标准提出将网页的内容和表现分离，同时要 求ＨＴＭＬ文档具有良好的结构。因此，传统的采用表格布 局页面的方式越来越不适应网页设计与制作的要求。采用 Ｄｉｖ布局，结合使用ＣＳＳ样式表制作页面的技术正在形成 业界的标准，大到各大门户网站，小到不计其数的个人网 站，在Ｄｉｖ＋ＣＳＳ标准化的影响下，网页设计人员已经把这 要求作为行业标准。 一２ ＤｌＶ＋ＣＳＳ技术 ＤＩＶ的英文全称是ＤｉｖｉＳｉｏｎ，意为“区分”。ＤＩＶ标 签是用来定义ｗｅｂ页面的内容中逻辑区域的标签，是用来 为ＨＴＭＬ文档内大块（ｂｌｏｃｋ—ｌｅｖｅ１）的内容提供结构和背 景的元素。用户可以通过手动插入ＤＩＶ标签并对它们应用 ｃｓｓ定位样式来创建页面布局。ＤＩＶ本身就是容器，用户 不但可以嵌入表格，还可以嵌入文本和其他ＨＴＭＬ代码。 用户可以使用Ｄｉｖ标签创建ＣＳＳ布局快并在文档中对它们 进行定位。 ＣＳＳ是英文Ｃａｓｃａｄｉｎｇ Ｓｔｙｌｅ Ｓｈｅｅｔ的缩写，即层叠样 ３ ＤＩＶ＋ＣＳＳ布局页面的优点 ＤＩＶ＋ＣＳＳ的页面布局不仅仅是设计方式的转变，而且 是设计思想的转变，这一转变为网页设计与制作带来了许 多便利。虽然在设计中使用的元素依然没有改变，在旧的 表格布局中，也会使用到ＤＩＶ和ＣＳＳ，但他们却没有被用 于页面布局。采用ＤＩＶ＋ＣＳＳ布局方式主要有下述几个优点。 ３．１缩减页面代码，提高页面浏览速度 由于采用ＤＩＶ＋ＣＳＳ布局，更能体现样式和结构相分离， 警指示器，如果箱门没有关严（或开门时间超过３Ｏ秒）， 箱门上的传感器就会发出信号，直至把门关上。 ４．６生态健康的环保化 目前，世界各国正在大力推行“双绿色”冰箱，即在 冰箱制造和使用中不使用氟氯烃类物质。由于氟利昂会破 坏大气臭氧层，威胁整个地球的生态平衡和人类的健康。 日本、美国等国已全面推行无ＣＦＣ冰箱。我国的青岛海尔 集团、华意集团己率先推出无ＣＦＣ的“双绿色”冰箱。无 ＣＦＣ冰箱将是未来冰箱发展的必然趋势 为突出，由于设计所产生的一些行业诟病值得我们深思。 推出适合人居环境的设计成为目前急需解决的问题，相信 通过设计工作者的不懈努力，在不久的将来我们会实现设 计改变生活的初心。 【参考文献】 【１】朱明善，王鑫．制冷剂的过去、现状和未来［Ｊ］．制冷学报， ２００２年第１期． ［２】方言．电冰箱市场需求的大趋势［Ｊ］．家用电器科技， ２００２：３４—３５． ５结论 目前市场上的迷你冰箱产品可谓玲琅满目、色彩缤纷， 冰箱不再仅仅是一件储藏食物的工具而是成为人们家庭生 作者简介雷炀（１９９０－），男，羌族，四川江油，硕士，专任教师， 活中的一件艺术品。人们在看重冰箱的品质、功能、售后 研究方向：数字艺术，新媒体艺术，虚拟现实技术，工业设计， 的基础上越来越注重冰箱的外观和色彩。设计问题显得尤 计算机控制（ＣＮＣ）１１８ 信息记录材料２ ０１ ７年７月 结构的重构性强。很多ＣＳＳ文件通常是共用的，能有效精 简页面代码，使得页面体积容量变得更小。ＤＩＶ＋ＣＳＳ将页 面独立成更多的区域，在打开页面的时候，逐层加载，从 ＜／ＤＩＶ＞ 查堑！塑 ＜！一一主体内容一一＞ ＜ＤＩＶ ｉｄ＝ ＭａｉｎＢｏｄｙ ＞ ＜／ＤＩＶ＞ 而提高页面浏览速度。不像表格嵌套那样将整个页面圈在 个大表格里，使得加载速度很慢。 ３．２修改设计时更有效率 使用ＤＩＶ＋ＣＳＳ布局技术，由于表现和内容分离，设计 者将设计部分剥离出来放在一个独立样式文件中，在修改 页面时，根据区域内容标记，到ＣＳＳ里找到相应的ＩＤ， 只需修改一次，用户就可以将许多页面的风格格式同时更 新，使得修改页面的时候更加方便省时，而且也不会破坏 页面其他部分的布局样式。 ３．３方便修饰引擎的搜索 使用ＤＩＶ＋ＣＳＳ布局技术，由于将大部分的ＨＴＭＬ代码 和内容样式写入了ＣＳＳ文件中，即使用只包含结构化内容 的ＨＴＭＬ代替嵌套的标签，这就使得网页中正文部分更为 突出明显，便于搜索引擎将更有效的搜索到用户的内容。 ３．４保持视觉的一致性 采用ＤＩＶ＋ＣＳＳ布局方式，由于具有强大的字体控制和 排版能力，设计者能够更好地控制页面布局。以往表格嵌 套的布局方式，会使得页面与页面，或者区域与区域之间 的显示效果有偏差。而使用ＤＩＶ＋ＣＳＳ的布局方式，将所有 页面，或所有区域统一用ＣＳＳ文件控制，就避免了不同区 域或不同页面体现出的效果偏差。 ４ ＤｌＶ＋ＣＳＳ布局技术实现页面排版 一＜／ＤＩＶ＞ ＜ＤＩＶ ｉｄ＝ Ｆｏｏｔｅｒ ＞ ＜／ＤＩＶ＞ ＜／ＤＩＶ＞ ４．２用ＣＳＳ对各块位置进行定位 根据内容将页面进行分块后，用ＣＳＳ对页面的的各个 板块进行定位，实现对页面的整体规划，然后再往各个板 块中添加内容。在页面整体规划后，先设置各部分的宽度 和高度，设置各部分的位置等，然后再根据具体页面的布 局对各个板块添加相应的内容。图１中页面板块划分后的 ＣＳＳ基本代码如下。 ｂｏｄＹ｛ｆｏｎｔ：１２ｐｘ Ｔａｈｏｍａ；ｍａｒｇｉｎ：０ｐｘ；ｔｅｘｔ— ａｌｉｇｎ：ｃｅｎｔｅｒ：ｂａｃｋｇｒｏｕｎｄ：＃ＦＦＦ：） ａ：ｌ ｉ ｎｋ，ａ：ｖｉ Ｓｉ ｔｅｄ｛ｆｏｎｔ—Ｓ ｉ Ｚｅ：１２ｐｘ：ｔｅｘｔ— ｄｅｃｏｒａｔｉｏｎ：ｎｏｎｅ：） ａ：ｈｏｖｅｒ｛） ／木页面层容器，Ｉｃ／ ＃ｃｏｎｔａｉｎｅｒ｛ｗｉｄｔｈ：８００ｐｘ；ｍａｒｇｉｎ：０ ａｕｔｏ：） 页面头部：Ｉｃ／ ＃Ｈｅａｄｅｒ｛ｆｌｏａｔ：ｌｅｆｔ：ｗｉｄｔｈ：８００ｐｘ：ｈｅｉｇｈｔ：１００ｐｘ：ｂａ ｃｋｇｒｏｕｎｄ：＃ＦＦＣＣ９９） 页面主体：Ｉ：／ ＃ＰａｇｅＢｏｄｙ｛ ４．１用ＤＩＶ将页面分块 使用ＤＩＶ＋ＣＳＳ布局技术设计制作页面之前，首先要有 ｆｌｏａｔ：ｌｅｆｔ： 浮动居左木／ 个整体规划，因此必须要先绘制页面布局图，明确ＤＩＶ 层的嵌套关系。下列图１是最简单的框架结构，页面包括 ３个部分：顶部部分（Ｈｅａｄｅｒ），一般包括了Ｌｏｇｏ，菜单 和ｂａｎｎｅｒ广告图片；内容部分（Ｐａｇｅｂｏｄｙ），一般包括 侧边栏，主体内容；底部部分（Ｆｏｏｔｅｒ），包括一些版权 一ｗｉｄｔｈ：８００ｐｘ： ｈｅｉｇｈｔ：４００ｐｘ： ｂａｃｋｇｒｏｕｎｄ：＃ＣＣＦＦＯ０： 设定宽度木／ 设定高度木／ ） 页面底部木／ ＃Ｆｏｏｔｅｒ｛ ｆｌｏａｔ：ｌｅｆｔ： ｗｉｄｔｈ：８００ｐｘ： ｈｅｉｇｈｔ：５０ｐｘ： ｂａｃｋｇｒｏｕｎｄ：＃Ｏ０００ＦＦ 信息等。 ） 图ｌ页面简单布局图 其中页面中ＨＴＭＬ代码如下： ＜ＤＩＶ ｉｄ＝ ｃｏｎｔａｉｎｅｒ ＞ ＜！一页面层容器一＞ ＜ＤＩＶ ｉｄ＝ Ｈｅａｄｅｒ ＞ ＜／ＤＩＶ＞ ＜！一页面头部～＞ ＜！一页面主体一＞ ＜！～侧边栏一＞ ＜ＤＩＶ ｉｄ＝ ＰａｇｅＢｏｄｙ ＞ ＜ＤＩＶ ｉｄ＝ ＳｉｄｅＢａｒ ＞ 至此，页面的整体框架己基本搭建好，接下来可以根 据网页的具体内容，在各部分中添加相应的内容，并在 ＣＳＳ中设计内容的显示，在此，不再一一介绍。 ５结语 本文以一个最简单的网页布局模式为例，简单介绍了 如何使用ＤＩＶ＋ＣＳＳ技术进行网页布局，并给出了整体框架 的ＨＴＭＬ代码和ｃｓｓ设计代码。通过本文的概述，相信网 页设计的初学者对如何应用ＤＩＶ＋ＣＳＳ布局技术来进行网页 设计与制作有了初步的了解。当然，网页布局的样式还很 多，本文基金涉及了一小部分，还有很多方法没有提及到。 今后，笔者将继续在ＤＩＶ＋ＣＳＳ布局技术方面进行更多的实 践。 ． １１９ 信息记录材料２ ０Ｉ ７年７月第１ ８卷第７期 省属高校大学生创业教育模式创新与实践研究 以湖北大学为例 ——郭田田 （湖北大学商学院 湖北 武汉 ４ ３ ０ ０ ６ ２） 【摘要】本文从探讨创业教育的内涵出发，以作者所在单位一～湖北大学为例，剖析了目前省属高校创业教育存在 的问题，并依托大学生就业报告，采用描述性统计分析大学生自主创业的现状，创新性地提出‘‘一核心、三平台、九模 块”的创业教育新理念，为省属高校开展创业教育，提高大学生创业能力提供思路。 【关键词】创业教育；创业能力；大学生就业 【中图分类号】Ｇ６４７．３８ 【文献标识码】Ａ 【文章编号】１００９—５６２４（２０１７）０７—０１２０—０２ １省属高校创业教育模式创新的意义 课程为依托，成立了一个学生社团一一ＫＡＢ创业俱乐部， １．１推动省属高校改革，创新育人模式 湖北大学创业教育由此开展。 高校特别是省属高校以仓 业教育为突破口，对建立符 ２．２创业教育未引起足够重视 合时代要求的育人模式具有重要的推动作用。任何育人模 首先，创业教育引起重视不够，这是大多数省属高校 式都不是万能的，需要不断对育人模式进行改革，才能保 存在的问题，仅把创业教育作为就业教育的补充内容。其 持此模式的先进性。 次，创业教育师资力量的缺乏。创业教育专职教师较少， １．２提高大学生综合能力，提升创业意识 大多数创业教育教师属于兼职教师，缺乏企业实践经验， 创业不是一件简单任务，需要一个人具备很强的综合 更缺乏创业经历。 素质和专业能力。大学生还处于学习阶段，对于社会还有 ２．３学生缺乏较强的创业意识 许多不甚了解的地方，需要进行全方位的学习和实践，才 根据（（２０１６年中国大学生就业报告》，指出２０１５届 能逐步建立起创业的意识和信心。同时要根据每个学生的 大学毕业生自主创业比例为３％，由于我国传统教育模式 特点进行个性化培训，让他们可以选择更加适合自己的项 的影响，学生的创业意识不强，读完大学后，以找到一份 目，也会更加了解自己。 满意的工作为主要目标，而创业有较高的风险性，也使得 １．３增强大学生就业能力，缓解就业压力 部分同学望而却步。 大学生就业压力的出现是高等教育大众化的必然结 ３省属高校创业教育模式的发展途径 果，而创业教育对缓解大学生就业压力有明显的的效果。 ３．１依托示范基地，创新创业教育模式 创业教育不一定必须要让学生创业，在培训的过程中学生 在综合全国省属高校创业教育调研的基础上，以湖北 的综合素质获得提升，会更加容易就业，同时对于那些创 大学为例，按照各个专业人才培养主要目标，建立综合创 业成功的毕业生，也会提供更多的就业机会。创业教育有 新创业教育平台，引导学生转变思维，面对市场，培育市 利于培育大学生创新思维，培养优质人才。 场需要的高素质实用型人才。要根据自己学校的实际状况， ２省属高校创业教育模式存在的问题 建立富有特色的创业教育体系，让学生们不再为自己的前 ２．１创业教育实践起步较迟 途焦虑，只要拥有了过硬的本领，才能在激烈的市场竞争 美国早在１９１９年就设立创业教育类课程，是世界上 中游刃有余，让示范基地真正为学生服务。 最早进行创业教育的国家。我国高校创业教育起步较迟， ３．２健全管理体制，加强师资队伍建设 尚未形成创业教育体系。目前的大学生创业竞赛也还是 进一步落实以校学生处、团委、就业指导中心等学生 １９９７年由清华大学发起，而后创业教育才逐渐在各大高 管理部门为主体的管理模式，完善大学生创业指导中心的 校得以重视。２００５年，由共青团中央、全国青联等倡导 职能，通过组织创业计划大赛、开设创业教育讲座、组织 在中国大学生中设立ＫＡＢ创业教育项目。２００９年上半年， 创业社团活动等形式开展创业教育。还可以融合其他高校 湖北大学毕业生就业指导中心面向全校学生开设《ＫＡＢ》 的教务处等教学主管部门为主体的创业教育管理模式和高 公选课，采取小班授课，３６学时，２学分。与此同时以该 校各部门综合协调管理的模式。通过教授学生创业理论知 【参考文献】 ［１］田红玉．ＤＩＶ＋ＣＳＳ布局在网页设计教学中的应用【Ｊ］．信息 １］与电脑，２０１６（２）． ［３】傅伟玉．ＤＩ Ｖ＋ＣＳｓ在网页布局中的应用研究．科技广场 【Ｊ］．２０１４（１１）． ［２黄成立，杨育均．ＤＩ２］Ｖ＋ＣＳＳ技术在网站页面设计中的应用［Ｊ］． 现代情报，２Ｏ１４（５）． １２０ 作者简介杨瑞梅（１９８２－），女，山东潍坊人，讲师。研究方向 计算机网络、计算机应用等