DIV+CSS布局在精品课网站建设中的应用

2013-04-29 00:44杨运强

软件工程 2013年6期

杨运强

摘要：当前，我国职业教育发展日新月异，正在推动各项内涵建设。精品课程建设是内涵建设的重要内容，精品课程的网站建设要求也越来越高，我们采用先进的DIV+CSS网站布局技术制作了多门精品课程网站，本文简要介绍在计算机应用基础省级精品课程中DIV+CSS布局公共部分的应用。

关键词：职业教育；精品课程网站；DIV+CSS布局

一、网站需求分析

网站制作要求页面简洁、美观，符合web标准，实现文字、表格、链接等各种样式。样式表文件通过外部引入到各个页面中，实现LOGO、导航、各栏目的样式自动更新和批量修改[1]。

二、logo部分样式表设计代码

1.结构部分

#top{ width：1004px； height：92px； background-image：url（images/qie_01.gif）； margin：0 auto；}

2.样式部分

#top{ width：1004px； height：92px； background-image：url（images/qie_01.gif）； margin：0 auto；}

三、导航部分设计

1.結构部分

2.样式设计

#nav{ width：1004px； height：23px； margin：0 auto；}

#left{ width：53px； height：23px；background-image：url（images/qie_02.gif）； float：left；}

#center{ width：847px； height：23px； background-color：#326a39； float：left；}

#center ul{ margin-left：0px；}

#center ul li{ width：70px； float：left； list-style：none； height：18px；}

height：17px； padding-top：6px；padding-left：13px；}

#right{ width：104px； height：23px； background-image：url（images/qie_04.gif）； float：right；}

四、链接样式设计

#center ul li a{ color：#FFFFFF； text-decoration：none； font-size：12px； display：block； width：70px；

#c32 ul li a{ font-size：12px； color：#000000； text-decoration：none；}

#c42 ul li a{ font-size：12px； color：#000000； text-decoration：none；border-bottom： dotted 1px； }

#c45 a{ display：block； height：10px； margin-top：0px；font-size：12px； text-decoration：none； padding-left：90px；}

五、页面底部设计

1.结构设计

2.样式设计

#bottom1{height：148px；width：1004px； margin：0 auto； background-image：url（images/qie_23.gif）；}

#ms{ width：70px；margin-left：450px； font-size：14px； margin-top：5px；}

#bottom2{ height：50px； width：1004px； margin：0 auto； background-color：#d9ffc4； text-align：center； padding-top：20px； font-size：12px；}

六、结束语

DIV+CSS不仅使用起来方便[2]，在网站的布局方面也更加规范。像表格建网站的传统做法已经不受欢迎，有越来越多的人正在使用CSS，它应该是目前在网页设计使用上相当受瞩目的一个区块。在制作与管理上提高了不少网页设计的效率。在制作上还可以使用多个页面去定义同一个CSS档案，修正起来也比较方便[3]。

参考文献

[1] 许晓安.国家精品课程建设对网络教育发展的启示[J].电化教育研究，2007，（8）： 26-27.

[2] 周红春，熊玉珍.精品网络课程的教学策略设计[J].高等理科教育，2005，（3）： 89-91.

[3] 桂早芳，刘波.网站设计与制作[J].黄冈职业技术学院学报，2002，（4）： 18-20.