页面规划网页设计论文

摘要：行动导向的教学模式必须依靠一项有代表性的综合实训项目完成，整个实训过程中以学生为主体。在教学实践中，行动导向教学模式主要运用项目驱动、情景模拟等教学手段开展，教学过程将围绕一个具有代表性的项目课题展开实施。下面是小编精心推荐的《页面规划网页设计论文(精选3篇)》相关资料，欢迎阅读！

页面规划网页设计论文 篇1：

浅谈网页界面艺术设计

【摘要】在互联网飞速发展的今天，网络已成为人们生活中不可缺少的一部分,无论是在商业、工业还是政府部门中都早已普及开来，如今就连教育事业也都承载着网络这四通八达的命脉迅速的发展起来。网站建设越来越接近于一门艺术而不仅仅是一项技术。网页界面艺术设计，日益被网站建设者所注重。结合自身的经验，阐述了如何制作一个完整的丰富多彩的页面，主要从色彩、框架，布局、优化这几个大方面对页面设计进行描述,对网页界面艺术设计的文字、图形、色彩、多媒体四个要素做了具有特色的分析和归纳，最后对其艺术设计风格进行了深入的分类和阐述，这一部分的重点是对网页界面艺术设计风格的研究。网页作为新兴媒体,有着比报刊、杂志、广播、电视等传统媒体更多的构成要素,如文字、图形、声音、图像和动画等。最后得出页面设计需要时间和耐心去钻研，才能做出好的网页界面艺术设计这一观点。

【关键词】互联网;网页界面;艺术设计

【中图号】TP3【文献标示码】A

网页界面艺术设计是伴随着计算机互联网络的产生而形成的艺术设计新课题，是网页设计者以所处时代所能获取的技术和艺术经验为基础，依照设计目的和要求自觉地对网页的构成元素进行艺术规划的创造性思维活动，必然要成为设计艺术的重要组成部分，并随着网络技术的发展而发展。表面上看，它表面上看，它不过是关于网页版式编排的技巧与方法，而实际上，它不仅是一种技能，更是艺术与技术的高度统一。?网页设计包括风格定位、版面编排、色彩处理、浏览方式、链接功能等诸多方面,其中色彩处理有着举足轻重的作用。色彩既是网页作品的表述语言,又是视觉传达的手。所以首先要了解一个问题那就是：

1制作网页包括具体都包括哪几部分呢?

1.1图形、图像处理制作网页界面艺术设计，提到界面还有艺术，那在网页上插入一些精美、适当的图片是必要的，否则，不会有人去浏览你的页面，因此，在设计网页之前，就应搜集或制作一些好看、适用的图片。提到图形、图像处理，大家都会想到的软件是Photoshop这个软件，对，这个软件是进行图形、图像处理的软件，但是，它不是专门的处理网络图像的软件，Photoshop这个软件会用到去进行一些平面的图形图像，我们网络的图形、图像处理用的是Fireworks软件，它可以制作出传输较快的gif格式的图片，占的空间也比较小，一般大小也就是KB，而Photoshop制作出来的是jpg格式的位图，并且是有损压缩，象素大了图像就清晰，但这样的话上传到网上会影响浏览速度，象素小了就会出现模糊或者马赛克小方格，所以我们采用的是Fireworks软件进行处理图形、图像。

1.2动画制作网页界面艺术设计，肯定也少不了动画的加入，并且还要有艺术气息在里面，这就要求我们的设计者要有艺术修养和对颜色的综合把握了，在没有FLASH软件之前，用的是Go live这个软件，再后来就用传统的做法，在html中嵌入Java程序编写的动画，但这要求设计者要对Java语言熟悉。随着软件的发展，如今有了许多制作动画的软件，二维的、三维的等等，如现在我们用的FLASH软件，用它制作的动画，小巧迷人，只需作为一个.swf格式文件导出，再导入到网页编辑器里就可以了。

1.3文本的编写一般是采用在网页中用html语言中的标签编写,也可以用网页编辑工具的“所见即所得”功能直接写入文字，如：Dream weaver软件或者Front page软件等都可以进行文本的编写。还有一点要注意的就是，显示文本的时候，设计者的机器上装了很多漂亮的字体，设计的时候采用了，但是等上传到网上以后，别人在浏览的时候，如果别人机器上没有安装字体，那就显示不出来我们采用的漂亮样式字体，因此，在考虑网页界面艺术设计的基础上，我们是把文字提前在Photoshop或Fireworks可以将字体先选择自己喜欢的样式，然后转换栅格化图片再用切片切成小块，分别进行优化。输出的格式可以为gif或jpeg，再导入到Dream weaver进行具体编辑，做链接可以用图片特有的属性进行热区链接，这样就完成我们想要的字体样式效果了，就不会出现字体样式显示不出来的情况啦。

1.4框架的应用框架是网页的常用形式，它可以使网页更为清晰，可以把不同的页面超链接到同一框架中，使的页面更加紧凑。一般框架用在小说浏览页面，或者介绍图书章节的部分，或者教学网页用到的的框架比较多。

1.5表格的应用表格是网页中用处最广泛的，可以布局，定位等等，它是网页中最活跃的元素。它的应用可以使用网页更加灵活。表格(table)是页面中的重要元素,是页面排版的主要手段。我们可以设定表格的宽度、高度、边框、背景色、对齐方式等参数。很多时候，我们将表格的边框设为0，以此来定位页面中的元素，或者籍此确定页面中各元素的相对位置。我们知道：浏览器在读取网页html源代码时，是读完整个table才将它显示出来的。如果一个大表格中含有多个子表格，必须等大表格读完，才能将子表格一起显示出来。我们在访问一些站点时，等待多时无结果，按“停止”按钮却一下显示出页面就是这个原因。因此，我们在设计页面表格的时候，应该尽量避免将所有元素嵌套在一个表格里，而且表格嵌套层次尽量要少。在使用Dream weaver制作网页时，会自动在每一个td内添加一个空字符。如果单元格内没有填充其它元素，这个空字符会保留，在指定td的宽度或高度后，可以在源代码内将其删去。

2色彩的运用

网页界面艺术设计离不开色彩的应用，当打开一个网站的时候，给用户留下第一印象的既不是网站丰富的内容，也不是网站合理的布局，而是网站的色彩，尤其是在体现界面的时候，色彩对人的视觉效果非常明显，一个网站设计的成功与否，在某种程度上取决于设计者对网页界面设计颜色的运用和搭配。

网页界面设计是一种审美活动，成功的设计作品一般都很艺术化。但艺术只是设计的手段，而并非设计的任务。设计的任务是要实现设计者的意图，而并非创造美。网页界面页面设计的任务，是指设计者要表现的主题和要实现的功能。站点的性质不同，设计的任务也不同。从形式上，可以将站点分为以下三类：第一类是资讯类站点，像新浪、网易、搜狐等门户网站。这类站点将为访问者提供大量的信息，而且访问量较大。因此需注意网页界面设计页面的分割、结构的合理、页面的优化、界面的亲和等问题。第二类是资讯和形象相结合的网站，像一些较大的公司、国内的高校等。这类网站在设计上要求较高，既要保证资讯类网站的上述要求，同时又要突出企业、单位的形象。第三类则是形象类网站，比如一些中小型的公司或单位。这类网站一般较小，有的则有几页，需要实现的功能也较为简单，页面设计的主要任务是突出企业形象。这类网站对设计者的美工水平要求较高。

3网页界面的优化

在页面设计中，网页界面的优化是较为重要的一个环节。它的成功与否会影响页面的浏览速度和页面的适应性，影响观者对网站的印象。

在资讯类网站中，文字是页面中最大的构成元素，因此字体的优化显得尤为重要。使用css样式表指定文字的样式是必要的，通常我们将字体指定为宋体，大小指定为12px，颜色要视背景色而定，原则上以能看清且与整个页面搭配和谐为准。在白色的背景上，我们一般使用黑色，这样不易产生视觉疲劳，能保证浏览者较长时间地浏览网页。一般我们网页默认的字体是宋体。为了体现站点的“与众不同”和特有风格，我门可以根据需要选择一些特别字体。例如，为了体现专业可以使用粗仿宋体，体现设计精美可以用广告体，体现亲切随意可以用手写体等等。当然这些都是个人看法，你可以根据实际情况，选择更贴切的字体。目前常见的中文字体有二三十种，常见的英文字体有近百种，网络上还有许多专用艺术字体下载，要寻找一款满意的字体并不算困难。需要说明的是：使用非默认字体只能用图片的形式，因为很可能浏览者的PC里没有安装你的特别字体，那么你的辛苦设计制作便将付之东流。

网页的适应性是很重要的，在不同的系统上，不同的分辨率下，不同的浏览器上，我们将会看到不同的结果，因此设计时要统筹考虑。一般我们在800×600下制作网页，最佳浏览效果也是在800×600分辨率下，在其它情况下只要保证基本一致，不出现较大问题即可。现在我们设计网页，一般要考虑800×600和1024×768两种分辨率，因此我们的表格一般为居中的770左右的表格，表格的宽度最宽不要超过778。事实上，"做网页"不是单纯意义上的"制作网页"，如果想让自己制作的网页美观大方，就必须要考虑"设计网页"的过程，一个好的作品，不通过仔细的"设计"就成形是绝对不可能的。

我国的网页界面页面设计水平总体上不及韩国，创新的页面极少，基本都是一种风格，这也是因以前我国的宽带水平跟不上有原因，一个漂亮的页面，必然体积会比较庞大，网络比较慢的话打开的速度也就可想而之，打开速度慢正是网页的一个最大杀手，所以我国以前的页面基本都是以框架式居多。随着我国宽带的普及，我们也迅速括起了一阵韩风，很多大胆创新的页面出现，这是一个好现象，但是一味的模仿韩国也不行，我们也要有自己的特色，不能一味的拿来主义。

网页界面页面设计的一个基本特色便是吸引浏览者，一个美观漂亮的页面不管内容多么空洞，也会有人欣赏，反之一个内容充实但页面简陋却往往不会有人去浏览，从这便可看出网页界面艺术设计是多么的重要。

最后总结，网页界面艺术设计是永远也学不完的一门学问，因为它会跟着你的成长也变化，直到形成你的一种风格，网页界面艺术设计需要大胆创新，需要新的思维，需要不断的努力。

4参考文献

1张帆,等.网页界面设计艺术教程[M].人民邮电出版社,2002

作者：陈凡亮　闵晓杰　晋国卿

页面规划网页设计论文 篇2：

试谈行动导向模式在网站构建课程教学中的实施

摘要：行动导向的教学模式必须依靠一项有代表性的综合实训项目完成，整个实训过程中以学生为主体。在教学实践中，行动导向教学模式主要运用项目驱动、情景模拟等教学手段开展，教学过程将围绕一个具有代表性的项目课题展开实施。

关键词：行动导向教学模式网站构建典型工作任务教学活动核心能力

职业学校的网站构建是一门实践较强的课程，其主要教学目标是使学生掌握静态页面设计、网页交互信息及动态数据库连接、发布浏览网站等知识，要求学生有较强的学科综合知识，能熟练掌握网页的制作，并将之运用于学习及实际工作中。目前职校对网站构建的课程多以静态页面的教学为主，技能知识多，任务实践性不强，过于强调软件的操作，缺少实践项目制作的指导，因此探索适合职业学校的教学模式是非常重要的。

一、行动导向教学模式的提出与内涵

德国人在职业教育中提出了职业行动能力的培养模式，以知识能力、专业能力、与人协作能力等为主要的培养目标。过去以“结果为导向”的课程体制己无法适应一线技术工人的要求，以行动为导向、强调“学中做，做中学”的教学模式应运而生，行动导向教学模式由教师导、学生做、获取经验三部分组成，教师作为指导者和策划者，学生直接操作，从技术成品中进行评价，通过自学、与教师进行交流，提高技能创造的能力，从而增强和提高学生在学习过程中的主动性和参与性。

行动导向教学模式必须依靠一项有代表性的综合实训项目完成，整个实训过程中以学生为主体，选择合适的情境及注重知识引入，运用项目驱动、情景模拟、角色扮演等教学手段，做好教学活动的设计，其中包括资讯、计划、决策、实施、检查、评估等内容，以实现技能、知识一体化，将专业能力、方法能力、协作能力、个人能力的锻炼集于学生的实训过程中，以达到通过项目实训提升学生综合能力的目的。

二、行动导向教学模式在网站构建课程中的实施

学生在学完网站构建课程后，是否能完整、独立地设计一个网站？学生需要达到什么样的一个水平呢？这就是行动导向教学的最终要解决的问题。传统的教学模式一般采用接受教学和案例教学两种形式，教学方法单一，学生能基本掌握其中的知识和技能，但综合技能的运用能力比较弱，远远不能满足企业对学生的要求，学校的教学与社会生产实践往往出现脱节现象。为改变这一局面，笔者提出在教学中引入企业实践专家的指导，按照企业实现项目的构建要求，设计出合适的、有价值的项目进行教学。下面就以企业项目“电子商务网站构建”（教学课时：10周）为例，探讨行动导向模式的教学设计及实施。

1.典型工作任务：网站构建情境设计（课时2周，实施4次教学活动）

以4名学生为一个团队展开企业调研，自行联系一家电子商务企业为其产品设计宣传方案并推广网站。网站以信息发布、产品介绍、在线销售、顾客服务、提升品牌形象等为主要目的，通过分析用户的需求及初步设计系统的功能模块，做好相应的功能规划书，起草网站的虚拟站点，学生可以通过自学查阅相关的学科知识进行补充，教师对设计起辅导作用。

学习情境设计如下：

教学活动1，编写客户需求分析，提交制定的网站设计规划书，创建站点和管理站点。

教学活动2，规划站点并初步完成网站总体设计，用超级链接将设计好的子页面链接起来。

教学活动3，发布与管理网站，进行站点的网上宣传工作。

教学活动4，小组交叉讨论并检查评价网站的规划，填写项目评价表。

核心能力锻炼：要求学生自行联系企业，选择合适的产品构建电子商务网站，如手机、服装、食品、花店等对象。通过联系，学生了解企业对网站构建的要求，明确网站要实现什么功能。要让学生充分认识到，企业是如何要求项目实现的。通过学生的练习、自学以及教师的引导，学生能综合运用课程知识，简单设计出图文并茂、主题鲜明、实施方案合理、有创新性的网站，同时对网站发布的准备工作有了相应的了解。

2.典型工作任务：规划布局网站（课时2周，实施3次教学活动）

学生以团队形式与客户沟通，了解分析客户需求，进行网站策划和信息收集，学生讨论、制作网站策划书，确定网页素材。学生通过互联网等收集资讯，明确策划方案，绘制网页草图。学生根据老师的提示及任务，寻找完成任务所需要的资料。为网站申请发布空间以便上传

内容。

网站布局由以下任务完成：

教学活动1，分析客户需求并重新定义网站规划书，按企业客户要求绘制网站布局草图。

教学活动2，运用网页设计软件，创建网站本地站点。

教学活动3，为客户申请网站空间，并备案空间。

教学活动4，小组交叉讨论并检查评价网站的规划情况，填写项目评价表。

核心能力锻炼：学生根据计划方案完成设计和模拟，教师监督学生的学习过程，通过“引导问题”和“学习思考”等学习环节来培养学生分析问题、解决问题的能力。由于学生刚开始接触网页制作及软件的使用，基础还比较薄弱，因此，本任务应先由教师分模块演示并讲解一些重要操作，学生再同步进行模仿训练。而知识掌握相对比较扎实、操作比较熟练的学生，在操作过程中如果遇到问题，教师可引导其查找相关的教材、教学参考书或通过网络获取相关内容，从而解决问题。鼓励团队成员在工作过程中互相帮助，解决在完成任务过程中所遇到的问题。

3.典型工作任务：网站页面设计（课时5周，实施5次教学活动）

学生开展客户需求分析，并据此编写网站总体设计说明书，根据总体设计进行页面布局设计及制作完整的页面，调试动态数据库的连接，完成IIS的虚拟设置平台，进一步美化界面，并制作其他的页面，最后展示和评价自己的成果。

学习情境设计包括：

教学活动1，创建主页并设置页面属性，进行网页排版及图像处理，用多媒体元素美化网页。

教学活动2，使用模板制作内页，链接网页各个页面，注意网页的配色方案及架构要合理。

教学活动3，动态网页特效制作及网页代码编写。

教学活动4，设计客户动态数据交互功能及表单的注册及信息提交。

教学活动5，虚拟平台IIS的设置及SQL数据库的连接、虚拟网站的调试。

教学活动4，小组交叉讨论并检查评价页面的整体设计及其效果，填写项目评价表。

核心能力锻炼：学生以团队方式进行构建网站的分工，通过“引导问题”和“学习思考”等环节的“工作页”来提高制作网站页面的能力，补充学习网页的配色方案、版面布局知识，掌握网页插件及网页动态特效代码生成软件，以制作更强大、更丰富的网页版面，并以独立自主的方式学习IIS的虚拟平台知识、SQL数据库基本操作等内容。通过本节实训，学生基本形成了以自学为导向的学习探讨过程。

4.典型工作任务：发布与管理网站（课时1周，实施5次教学活动）

经虚拟平台设置调试成功的网站，根据客户的要求，要不断维护与更新所需要的信息资料，为网站进行功能测试、站点发布、管理、宣传等工作。发布与管理网站由以下任务组成：

教學活动1，利用FTP工具，连接远程服务端的网站空间。

教学活动2，在线上传本地站点，此时要注意服务端对网站的要求。

教学活动3，准备网站的管理、维护与更新所需要的信息资料。

教学活动4，为网站进行宣传工作，及时收取客户的反馈意见。

教学活动5，网站展示及评价，小组交叉讨论并检查评价网站的发布情况，填写项目评价表。

核心能力锻炼：学生可以在教师的指导下，利用互联网给客户选择合适的网站空间及申请域名，以自主方式学习FTP工具的使用；在此之前，学生按团队进行网站测试、检查站点中链接的有效性等工作，确认无误后，才可以进行网站发布，完成网站的上传与管理。学生团队最终以公开展示及网上浏览方式完成网站的最终评价。

三、实施行动导向教学模式的体会

一是项目实施要基于行动导向的教学设计，以企业实践专家经验为指导，教师起咨询者和组织者的作用，课堂是学生工作的舞台，学生是真正的导演。

二是行动导向模式要以完整的工作项目为任务，以企业实际的“工作过程”来引导教学与学生的设计行为，改变“统一讲，统一做”的传统教学理念。

三是工作任务要精心设计，结合企业对员工的要求，从学生实际出发，充分考虑学生现有的特点，遵循由浅入深、循序渐进的教学原则，以便学生更专注地学习和实施项目。

四是工作任务要多元化，以培养学生的自学能力、综合素质为行动导向的首要任务。项目评价体系要科学，要以激发学生的兴趣为主，注重“过程评价和结果评价”相结合，多鼓励多引导，消除差生的自卑感，增强学生的自信，只有让学生学会如何学习，才能让学生终身受益。

综上所述，通过网站构建的项目实施，学生在10周的时间里完成了网站的构建。从客户需求到网站生成，从发布网站到客户意见反馈，从任务设计到提交设计书、项目实施设计到客户反馈等工序均按企业的工作方式及要求去实施操作，每一环节的实施都给予了学生明确的工作导向，在企业实践专家及教师的指导下学生自主完成了网站的构建，从而实现了网站构建课程的学习目的，体现了“学中做，做中学”的以学生为本的行动导向学习过程。

参考文献：

[1]柳燕君.以工作过程为导向的课程模式研究与开发实践[J].中国职业技术教育,2009(9).

[2]史平,秦旭芳等.高等职业教育的有效模式:行动导向教学法[J].辽宁教育研究,2008(5).

[3]李继先.Dreamweaver网站开发完全攻略[M].北京:电子工业出版社,2009.

（作者单位：广东省珠海技师学院）

作者：盘耀雄

页面规划网页设计论文 篇3：

基于CSS技术的网页布局探究

摘要：基于CSS技术，配合使用DIV是当前常用的网页布局方式，文中详细分析探讨了CSS技术以及DIV的功能和特点，提出了实际应用CSS进行网页页面设计的方法和技巧。

关键词：CSS；DIV；页面布局

Research on Web Page Layout Based on CSS Technology

FENG Xiao-qiang

（School of Mathematics and Computer Science， Shaanxi Sci-Tech University， Hanzhong 723000， China）

Key words： CSS； DIV； Research； Page Layout

布局是设计制作网页的基础，网页的响应速度以及美观程度决定了网页的浏览频次，因此，对网页的优化与美工处理是整个网页制作过程中非常重要的环节[1]。从最初的Table布局方式到目前大量使用的DIV+CSS布局，CSS技术的广泛应用，使网页的样式制作变得更加灵活便利，也极大地提高了网页代码的执行效率。

1 DIV与CSS

实际应用中，CSS的技术总是和DIV标签一起使用，通过与DIV搭配，实现对网页中各个元素精确定位与控制，灵活、方便地制作出设计者预期的页面效果。

1.1 DIV

DIV是HTML中的一个标签，表示一个块，就像一个容器，可以容纳组合其他各种HTML元素。如果单独使用DIV，而不加任何CSS样式，将看不到任何效果，没有实际意义。实际的网页设计中，一般是使用DIV来将页面划分组合成各个区块，再引入CSS来定位设置各个区块，真正实现了网页的内容与显示的分离。

1.2 CSS

CSS，即：层叠样式表。是一种用来表现HTML或XML等文件样式的计算机语言，不仅可以静态修饰网页，还可以配合脚本语言动态格式化网页元素。[2]

2 CSS技术

使用HTML标签只是简单的搭建起网页骨架，CSS技术可以对网页中元素进行像素级精确控制，支持几乎所有字体字号样式[2]，使我们对网页骨架和网页内容进行美化和装饰。CSS可以改变网页中文字的大小、字体、颜色；改变网页元素的性质、位置、背景色、背景图片等。

2.1 CSS引入方式

使用CSS的目的是使的网页的显示与内容分离，CSS样式的引入方式非常灵活，既可以将样式规则嵌入到网页代码中，又可以单独存储为一个样式文件，这些样式规则都可以完成对网页元素的格式化。

1） 外部样式：在网页文件外部新建一个扩展名为css的文件，例如：demo.css，将样式规则代码写入CSS文件中。在网页文件标签中写入固定格式代码：<link rel="“stylesheet”type=“text/css" href="“demo.css”">，這样就将demo.css文件样式规则应用到网页元素上。

2） 内页样式：直接在网页文件内的标签中加入<style>标签，将CSS样式规则代码写在<style>标签内。如：<style type=“text/css”> p{font-size：20px；color：red；}</style>

3） 行内样式：直接在网页标签行内使用style属性，设置style属性值。如：

我是段落

三种方式可以混合使用，在优先级上，行内样式>内页样式>外部样式。

2.2 选择器

CSS的语法规则主要是选择器和声明。选择器是用来选中需要操作的网页元素，CSS选择器的写法非常灵活，需要在实际的项目应用中灵活使用，目前CSS的最新版本是CSS3，而新版本常常存在与浏览器的兼容性问题，常用的兼容性较好的是下面前3种选择器。

1） id选择器：给html文件的标签加一个id属性，属性的值是按语法规则自定义的名称，一个id名在页面中是唯一的，不能重复。通过#id名称{...}选中网页元素进行操作。

2） 类（class）选择器：给html文件的标签加class属性，属性值是按语法规则自定义的类名。通过 .类名{...}选中网页元素进行操作。相较于id名的唯一性，不同的标签可以使用相同的类名，同一个标签也可以有多个类名，充分体现了用类名来归类标签的特性。

3） 标签选择器，直接使用html标签名选中网页元素，比如：p{font-size：20px；color：red；}

4） 复杂选择器：根据页面标签的嵌套层次，组合id选择器、标签选择器、类选择器来选择元素。比如：div.mycolor{color：red；}选中div标签下的类名为mycolor的元素；div#myfont{font-size：20px；}选中div标签下的id名为myfont的元素；div p{color：red；}选中div标签下的p标签；div，p，div.moycolor，div#myfont{color：red；}被逗号分隔开的选择器都被选中。

5） 伪类选择器：根据状态来选择。a：hover{color：red}当有鼠标移动到a标签上时，选中a标签。

6） 通配符选择器：*{color：red；}选中html中所有元素。

2.3 盒模型概念

盒模型是CSS中非常中重要的概念，是对网页元素进行精确定位的基础。页面中所有的标记都可以看作一个盒子，盒模型规定了盒内包含的“内容”（content）、内容四周距离盒子边框的“内边距”（padding）、盒子四周的“外边距”（margin）、盒子本身的“边框”（border）。例如：padding：10px 20px 30px 40px；按上、右、下、左的顺序设置内边距。

2.4 定位与浮动

为了得到更好的页面效果，就必须调整好元素的位置，CSS可以对页面元素进行精确灵活的定位。

1） 相对定位：相对于元素原来的位置进行偏移定位。例如：#div{position：relative；left：10px；top：10px；}相对原来位置，div左边和顶部各偏移留空10像素。设置相对定位后，元素依旧在标准流中。

2） 绝对定位：相对于body元素的起始点进行偏移定位。例如： #div{position：absolute；left：10px；top：10px}相对整个页面的左上角，div左边和顶部各偏移留空10像素。设置绝对定位后，元素会脱离标准流。

3） 固定定位。相对于浏览器窗口进行偏移定位。#div{position：fixed；left：10px；top：10px；}相对于浏览器窗口，始终保持div的左边和顶部留空10像素，即使滑动滚动条div的位置也始终不变。

4） 浮动也是一种对页面元素进行定位的方法，由于块级元素在页面中是独占一行，为了实现多个块级元素排在一行，在不改变元素性质的情况下，就要使用到浮动。浮动可以让DIV等块级元素脱离标准流，依次紧挨从左到右形成一个新的流，漂浮在标准流之上，直到超出父元素的宽度，才会换到下一行排列，使用float属性来实现浮动。使用浮动必然会影响到未使用浮动的标准流中的元素位置，可以使用clear属性来清除浮动的影响。

3 网页布局技术的实际应用

布局是整个网页制作的基础，实际的项目中，需要将页面分成不同的区块，由DIV容器来存放这些区块。首先要整体规划，根据网站的内容、风格、特点绘制出布局图，明确DIV层的嵌套关系，搭建出网页的框架结构。再使用CSS技术对页面各个元素实现精准控制。具体的布局方式很多，最常用的是“固定浮动布局”，需要先将元素的宽度设为固定的值，再配合浮动技术实现页面内容的划分。

由于不同种类和版本的浏览器存在兼容性问题，使得网页代码的执行会出现各种问题，所以在网页制作的过程中，需要在不同的主流浏览器上测试网页代码，以确保代码在这些浏览器上都能正确的执行和显示。实际的项目中，可以借助“浏览器兼容性测试工具”，来测试网页代码在不同浏览器中的显示情况，从而及时修正问题。如：“Spoon Browser Sandbox”，可以测试IE、Chrome、FireFox、Safari、Opera等主流瀏览器；“IETester”，可以测试IE5.5到IE10等不同版本的IE浏览器。

网页页面中的每个元素都有默认的内外边距，在不同种类和版本的浏览器中，实际默认的显示距离都有不同，具体的项目中，需要一开始在CSS中将相关元素的内、外边距初始化为“0”，如：body，div，p，img{margin：0px；padding：0px；}，就可以消除元素默认值对于定位和布局的影响；设置img，a img{border：none；} a{text-decoration：none；} a：hover{text-decoration：underline；}，可以消除图像显示时的默认边框，并且只有当鼠标滑过超链接才会显示下划线；图片等资源文件最好与CSS文件放在同一个目录下，这样在CSS中引入图片时就可以直接使用图片文件的名称，而不用考虑路径问题。

4 结束语

布局是网页制作的基础，各种新技术的出现，使得网页制作变得更加便捷、高效，做出的网站功能更加强大，页面更加美观悦目。CSS便是众多新技术的一种，配合使用DIV，使得网页制作的水平和效果得到了很大提高。笔者结合自身网页制作的经验，分析研究了CSS技术在网页页面布局中的强大功能，提出了实际应用CSS技术制作网页的相关方法和技巧。今后，随着HTML5技术以及CSS3技术的应用，Web开发将会得到更多更先进的技术支持，作为Web开发前端的网页制作水平也必将大幅提高，必将制作出更加优秀的网页。

参考文献：

[1] 黄荣喜.CSS与表格布局在网页设计中的应用 [J].广西农学报，2017（2）：27-29.

[2] 黄雪琴，耿强，陈显军.基于CSS+DIV的自适应宽度网页布局方法[J].计算机与现代化，2014（6）：53-55

[3] 杨瑞梅.探讨HTML5和CSS3.0在网页设计中的新特性[J].电子制作，2017（6）52-53

【通联编辑：梁书】

作者：冯小强