网页布局网页设计教学应用

时间:2022-08-26 09:15:04

网页布局网页设计教学应用

摘要:

在现在的网页设计中DIV标签的使用越来越频繁,DIV标签的作用也越来越重要,以前那种以内容为中心的网站已经成为过去式。论文在分析表格布局技术及CSS技术的基础上,阐述了应用DIV+CSS技术进行网页布局的优势。从高校计算机网页设计课程的教学情况出发,文章中提出了DIV+CSS技术在教学中的应用措施。

关键词:

网页布局;DIV+CSS方案;HTML优化;网页设计

只有当好的网页结构和优秀的网页布局相结合,才能达到最好的浏览效果,使浏览网站的用户感受到最好的用户体验,如何设计出这样的网页就是我们现在研究的重点。

1表格布局技术

早期页面布局的方式主要用框架及表格。在HTML和浏览器还不够完美的时候,我们想让页面内的元素能有一个让人满意的格局是比较困难的事情,由于表格不单可以控制单元格的宽度和高度,而且可以相互嵌套,所以为了让每个网页元素能够放在合适的位置,表格就成为网页设计者的主要工具。表格在页面布局上比较容易控制,通过表格的套入可以轻松地实现各种各样的布局,但是当你需要制作一个繁琐的页面时,HTML文档就会充满了标签。同时,因为浏览器需要把整个表格加载完后才会显示出来,因此加入一个表格过长,那么访客就需要等很长的加载时间才可以看到页面内容。使用表格布局页面会让HTML文档的内部结构变得杂乱不堪,HTML文档字节数变得越来越大,在落后的设备上,页面需要大量修改,正是这些弊端,使得网页开发者开始注意Web的标准。

2CSS样式

CSS就是CascadingStyleSheets,中文翻译为“层叠样式表”,简称样式表,它是一种制作网页的新技术。CSS是Web标准中表现标准语言。使用CSS可以简化网站的格式代码,加快网页显示的速度,外部链接样式可以同时定义很多个页面,大大降低了重复劳动的工作量。CSS标准中重新定义了HTML中原来的文字显示格式,并增加了一些新理念,比如类、层等,可以对文字进行定位、重叠等操作,提供了更多丰富多彩的格式;同时CSS可进行集中样式管理。CSS还可以将样式定义独自存储于格式文件中,这样可以将显示的内容和显示样式定义分开,以便于多个HTML文件共享样式定义。除此之外,一个HTML文件也可以使用多个CSS样式文件中的样式定义,相对于之前传统HTML的表现而言,在网站的建立及重构过程中使用CSS技术,可以精准的掌握页面里每一个元素属性,例如:字号样式、背景、排列方式、区域尺寸、项目符号等,方便地实现网页的结构与内容表现完全分离,使站点的加载速度及维护更加方便。使网站的功能扩展性达到前所未有的增强。

3DIV+CSS技术

DIV+CSS是目前应用最多的一种网站布局技术,使用DIV+CSS的网页布局方案,首先需要把HTML结构化,我们可以先不考虑网页的外观。先将内容放在设置好的DIV中,让结构由DIV产生,然后再使用CSS进行格式设计,即“外观”设计。在网站设计前需要对网页进行规划设计。例如,一个页面可能有类似这样的几块:网站名称、主页、子页面导航(主菜单)、子菜单、搜索框、展示区、页脚等。与传统的表格布局相比较,使用DIV+CSS进行网页布局还具有以下优势:更快捷的被搜索引擎的引用,加载速度更快;CSS使用灵活,使页面元素样式多变,利于维护和更新;使用DIV+CSS技术,可以减少视觉的相同性,同一网页在不同浏览器中表现的效果相同或基本不变,保持网页的美感;表现和内容相分离、提高页面加载速度。

4DIV+CSS技术在教学中的应用措施

在网页设计课程学习时,经常是使用Dreamweaver网页开发软件,Dreamweaver是一个视觉化网页开发工具,可以方便、高效的实现DIV+CSS技术对页面进行布局,代码自动生成这一特点,一方面能让学生迅速的设计出网页,另一方面不利于学生真正记住和掌握。所以,在使用Dreamweaver的同时,可以让学生使用Notepad++编辑器或用记事本对代码进行录入。在初学DIV+CSS布局网页时,可以选择一个简单的网站,用表格和DIV+CSS技术两种方法进行布局,让学生真正理解这两种方法的区别和特点。针对不同网站使用不同的布局方法。教会学生当前社会网页前端开发师最需要的技术。基于以上论述,笔者认为在教学中加入DIV+CSS布局需要注意以下几个问题。共享学习资源,利用MOOC。教师要给出学习参考书目录,DIV+CSS布局的有关教材已经相当普遍,另外,教师也可以鼓励学生进行MOOC(慕课)学习,或在淘宝购买一些关于类似的视频教程,不论是在课上还是在课下,都能充分利用网上资源,整合成DIV+CSS布局原理、知识和案例的教学资源。将WEB的标准贯彻到网页设计的学习中,由HTML升级到XHTML。当下大部分网页设计教材讲解的内容还是HTML标记语言,但是在WEB结构标准语言中,我们将会使用XHTML,因此需要在HTML学习的基础上要加入升级版的教学内容,既要讲解HTML的普遍用法和主要标签,也要为学生讲解为什么要升级到XHTML以及升级后的XHTML比HTML好在哪里。适当推荐和引用CSS样式表,强化层叠样式表CSS的基础教学,为学习DIV+CSS的页面布局打下良好的基础。在讲解CSS样式时,可以引用网上使用频繁的外部CSS样式,在使用应用外部CSS文件的时候,页面的布局可以变得非常整洁和清新,让人眼前一亮。在CSS教学过程中,除了需要介绍CSS的常用属性之外,最重要的就是要让学生理解和学会使用外部CSS样式,这是学习DIV+CSS网页布局的提高过程。采用任务驱动式教学方法,以案例为驱动,培养学生学习兴趣,提高学生动手制作能力。在学习了基础的DIV+CSS页面布局知识之后,为学生提供一些DIV+CSS布局的网页案例的基础上,加强学生的动手实践训练,给学生一些真实的企业项目或学校网站项目,例如学院主页或各系主页宣传网站等。

5结语

本文探究的主旨在改变现存的网页设计课程的教学方法与模式,以培育精英级的网页设计人才为目的,扎实提升学生的自主学习能力,实现社会对网页设计精英的技术要求,从而保证该门课程的市场特色和教学质量。为了达到这个目的,我们对教学内容进行改变与扩充,使教学素材更加接近实际需求,竭力使学生更适合当今市场的需要,并为后面课程的学习打下坚实基础。

作者:田红玉 单位:黑龙江信息技术职业学院

参考文献

[1]高川程.浅谈基于DIV+CSS的网页布局技术应用研究[J].计算机光盘软件与应用,2013(1):231-232.

[2]刘坤彪,程旭东,陈铭.基于CSS的标准网页布局设计[J].南阳理工学院学报,2012(6):23-28.

[3]黄玉春,陈霞.DIV+CSS布局在网页设计教学中的应用研究[J].电脑知识与技术,2013(30):6837-6838.

上一篇:Flash软件画网页设计研究 下一篇:网络资源翻转课堂教学设计研究