写论文没有思路的时候，经常查阅一些论文范文，小编为此精心准备了《页面规划网页设计论文(精选3篇)》，欢迎阅读，希望大家能够喜欢。【摘要】在互联网飞速发展的今天，网络已成为人们生活中不可缺少的一部分,无论是在商业、工业还是政府部门中都早已普及开来，如今就连教育事业也都承载着网络这四通八达的命脉迅速的发展起来。网站建设越来越接近于一门艺术而不仅仅是一项技术。网页界面艺术设计，日益被网站建设者所注重。
页面规划网页设计论文 篇1：
网页制作中的常见问题及处理分析
摘 要：网络已经成为人们生活中必不可少的部分。网页设计至关重要，设计者在制作网页时会面临较多的问题与挑战，例如网页打开不顺利，没有做好网页制作记录等问题。不仅对浏览者产生影响，对网页设计者也会产生消极影响。网页制作者需要把握网页制作原则，例如统一原则、分割融合原则、对比提出原则等，明确网页定位，做好相关的主题颜色设计，让网页凸显特色。在同一网页中避免使用过多链接、做好色彩与板块规划等，做好网页制作工作，提高自身的业务水平，为浏览者设计更佳的网页，加深网页影响力度。
关键词：网页制作；网络；原则；分析
随着计算机网络技术的推广，互联网的应用已经得到普及。网站已经成为一部分人的生活必需品，成为人们及时了解社会信息，查询工作、学习所需资料的重要途径。各种网络商务贸易也应用而生。如何制作网页，让人顺利浏览到网页信息，是网页制作需要制作的问题。某些机关的网站存在设计弊端，打开后不是分辨率受限，就是在浏览网页过程中经常出现错误信息反馈，无法正常浏览网页。若网页信息没有及时保存则会造成一定的麻烦。充分做好网站建设前的准备工作，注意网页制作过程中可能出现的问题，掌握网页制作技巧。
1 网页制作设计原则分析
1.1 连贯融合原则
设计者需要注意页面之间的相互关系。充分利用网页上个板块在内容或者形式上的联系，彰显它们之间的联系。确保页面设计风格保持连贯性，不会给人突兀的感觉。确保浏览者从视觉体验与心理感触都是一致的，网页整体融洽，犹如一体。
1.2 整体统一原则
网页设计需要体现整体性、统一性。这对网页制作的整体效果提出较高的要求。设计者在设计过程中，需要将网页各个板块整合到一起，确保网页颜色整体融洽，避免出现网页分散、浏览者无法找到重点内容的情况。
1.3 分割融合原则
保证网页统一、连贯的基础上，针对不同版块不同内容设计与网页整体风格相符，又可以突出各小版块。也就是实现对同一页面上不同版块的分割。让浏览者及时找到自己想要的信息内容。而不是将所有的版块统一同样的颜色，运用同样的FLASH。页面分割是网页表达的形式需要。
1.4 和谐自然原则
网页的和谐自然指的是页面符合人类对美的评判准则，呈现犹如一体的风格。不仅需要优化页面打开速度，还要从视觉角度考虑，确保网页中的图片、各种程序的运用能够保证页面的大方、整洁。
1.5 对比突出原则
网页需要通过一定的矛盾冲突，富有生气的设计进行重点突出。运用对比手法，体现不同小版之间的联系与区别。设计者在确保不破坏网页整体美感的基础上，遵循统一原则，运用颜色强与弱、线条粗细、疏密等方式，凸显网页的活泼或特色。
2 网页制作前期准备工作
2.1 明确网站定位，合理规划特色
制作网页首先需要明确网页的面向的浏览群体，明确网站定位，才能进行下一步的设计工作。在确定网页定位的基础上，进行相关的创意活动。网页设计者需要明确浏览群体的审美特点、消费习惯等基本情况，确定网页的主题风格。对于一些政府政务网站则需要考虑到政府机关自身的形象。运用鲜明的主题，体现网页的特色。
2.2 网站页面版式与颜色设计
网页页面直接呈现网页所属者的形象，要简洁大方。切勿在网页中融入过多的无关元素或者过于花哨的元素。否则会扰乱浏览者的视觉，造成浏览者产生抵触心理。网页页面设计需要让浏览者产生耳目一新的感觉，能够在浏览者内心中留下较好的印象。每个网页都需要根据自身页面的内容确定一种适宜的主题颜色，让人们看到相似的颜色搭配后会产生网页联想是最佳效果。设计者可以运用一到两种主题色，避免让页面显得枯燥单调。例如，政府政务网站多选用蓝色，以彰显公平、正义、高效等特点。儿童类网页则会多用比较鲜明的颜色，烘托出较为活泼的气氛，吸引活泼好动的儿童。
3 网页制作中值得注意的某些问题
3.1 建立完善的网页目录结构
建立网页目录结构是网页制作的基础。网页涉及到较多的路径，对初学者或者熟练者都是一场考验。初学者由于缺乏网页制作经验，容易搞不清网页制作内容，凭借一股冲动匆忙进行网页设计制作，经常出现自己制作的网页不能正常打开。网页制作是一项复杂的系统工程，需要掌握工序原则，理清工作思路，分清不同网页之间联系，同一页面之间的链接所用路径。导致工作思路受阻，不能设计出可正常浏览的网页。
3.2 避免用中文进行文件夹命名
网页制作者在进行网页制作时，使用中文的文件名或者目录名，在微软公司推出的IE浏览器中可能看不到所需要的文件夹，需要避免运用中文命名文件名或者目录名，尽量使用数字、下划线、英文等符号构成文件名，避免出现信息丢失的假象，造成网页制作者的心理恐慌。尽量不用中文命名目录名或者文件名是制作者需要养成的良好习惯。制作者可以根据制作日期、网页的英文标识或者网站的汉语拼音进行相关命名。
3.3 恰当地使用标题
网页可以表达特定内容，网页标题体现了网页内容的精华。制作者们可以将网页标题置于浏览器的标题栏中。如果网页信息比较多，比较杂，则不适宜将网页标题与网页信息放在一起。否则会造成浏览不便。网页制作者需要根据网页信息选择是否使用标题。网页信息较为简单直接，那么可以选择使用恰当的标题，吸引浏览者的注意，让浏览者第一时间了解网页基本信息。
3.4 合理控制超链接数目
在网页导览系统中，恰当地运用超链接，可以起到锦上添花的作用。我们可以认为适当地使用超链接是优秀导览系统必不可少的部分。但是如果在较短的网页文章内多次使用超链接，即影响网页信息的顺利浏览，损害行文之间的流畅感，也会带给浏览者一定的不舒适感。过多的超链接是没有意义的。笔者认为在一篇网页文章中，包含的文字式或者其他形式的超链接最好不要超过十个。
3.5 解决网页下载速度慢问题
下载表格内容较下载其他内容需要耗费更多的时间，只有当表格全部内容下载后，浏览者才能进行完整有效浏览表格内容。所以，如果网页制作者在一个网页中设计过多的表格，则会致使网页下载速度大大减慢。通常情况下，浏览者打开网页时，网页的显示顺序是自上而下逐步显示余下的内容，但是若遇到页面中存在表格，则需要等待表格中所有内容都下载完全后才能显示出来。而且在下载过程中，浏览者见不到任何下载信息显示，或者提示。网页的缓慢下载对浏览者的心情产生消极影响。笔者建议，如果要在网页中嵌入表格，最好不要将网页内容放到一个大表格内，可以分割成几个小表格。或者运用表格来定位，一行一行地设计。
3.6 选择适宜图像精度
网页制作的最终目的是显示给浏览者看。通常情况下，我们会选择图像精度为72dpi，如果选用高于显示屏分辨率的图像分辨率，也会不能显示自身的优势，浏览者无法体验出图像的增强效果，反而会影响到网页下载速度。某些图像原始尺寸较大，但是网页显示区域是有限的，制作者们会选择在DW中缩小图像来解决这一问题。实际上，在DW缩小图像时并没有改变图像真正的大小，下载仍需要消耗较长的时间。为解决这一问题，我们进行图像输出时，要适当降低输出精度，确保图像分辨率大小适宜，同时也确保输出正确的图像格式。保证浏览者能够顺利浏览网页，感受到制作者选用图片的用意。
3.7 确保网页前景与背景的配合
笔者在文章前面提到过，网页是一个有机整体，不单单是几个网页版块的结合，其前景与背景必须紧密配合，才能体现出美观协调感。这对网页制作者的Photoshop基本技术的扎实程度是一个考验。我们把网页上的图像当做一个矩型区域。制作者所选用的图案的边缘部分可能会与背景颜色有一定差异。如果简单地将图像置于网页中，则浏览者必然会看到前景与背景颜色差异表现出来的突兀，影响网页的美观效果。制作者要确保网页前景与背景的配合，对前景图的边缘部分进行相应的处理工作，确保前景可以与背景有机融合到一起。制作者选用Photoshop处理前景图时，可以采用羽化、透明等技术来实现融合目标。如果前景图像色彩与分辨率要求低，周围保留较多留白时，制作者可以选用透明的GIF格式作为图像应用格式。此种方法不适宜制作者选用图像色素多的情况或者前景边缘颜色与背景有显著差异时。此时，笔者建议网页制作者运用JPEG格式作为应用格式，通过对前景图进行适当宽度的羽化处理，实现前景与背景的融合变化，进而制作出协调一致的网页布局或者网页显示效果。
3.8 设计网页导航按钮
网页制作者在进行个人站点导航按钮设计制作时，笔者认为可以选用与网页主题相关的现成图片。例如制作一个图书网页，则可以选用一本词典图片作为导航，词典目录就是网页的栏目。例如制作工商局网页，则可以选用公平秤图片作为导航。对于个人网站，则可以通过Photoshop等辅助手段来制作个性导航按钮，增添网页特色。
3.9 网页分辨率的设置
网页分辨率设置问题是一个非常重要的问题。运用正确的分辨率浏览网页，可以获知网页全部信息。通常情况下，我们认为分辨率是用来表示平面图像精细程度的技术参数。是网页浏览或者网页设置中经常用到的数据。图像通过横向与纵向点的数量来体现。如果分辨率越高，表现图像的点数越多，图像越精细。反之表达图像的点数越少，图像越模糊，人们很容易看到纵横分布的点。电脑显示屏的分辨率通常是固定的几个值。显示分辨率的数值显示了显示器可见平面上垂直像素与水平像素的数量之和。如果网页制作者设置网页的分辨率为800×600，浏览者若使用较大的分辨率浏览网页，则会发现网页信息不能布满整个屏幕，文字较小，不利于浏览。如果网页制作者设置网页分辨率为1280×800，浏览者使用较小的分辨率，则会发现网页信息显示不全，字体过大，影响浏览情绪。避免出现这个情况，网页制作者可以网页给予浏览者提示，使用适宜的分辨率，以便达到较好的浏览效果。
4 小结
网页制作是一项系统工作，制作者经过精心设计后才能进行制作工序。网页设计需要遵循一定的原则，需要与网页所要表达的内容相吻合。制作者需要运用整体化的思维来解决网页制作问题，遵循之前的设计思路，进行一步接一步的制作工作。制作者在网页制作过程中可以积累越来越多的知识，发现解决问题的新思路，找到自己的制作漏洞。随着制作者自身经验的不断积累，并将这些经验正确运用到实际工作中，结合相关理论知识，表达正确的设计理念，为网页所属者制作出实用的网页，通过网页宣传企业或者个人形象。网页制作者都会经历由生疏到熟练的过程，掌握制作技巧后，也需要不断学习，寻找设计灵感，提高自身的设计素养与制作水平，促进自身不断发展。
[参考文献]
[1]刘喜荣.网页制作中值得注意某些问题和一些实用方法[J].微计算机应用，2003.03.
[2]王为正，何小翠，应红金.计算机网页制作中几个疑难问题研究[ J].金华职业技术学院学报，2003.02.
[3]廖聪尧.Photoshop在网页制作中图像处理的应用[J].网友世界，2012.12.
[4]李建霞.浅谈图像处理技术在网页制作中的应用[J].电脑知识与技术，2010.05.
[5]孙聪妮.探讨网页制作方法与技巧[J].信息与电脑（理论版），2013.07.
[6]余先锋.网页设计与制作[M].西安：西安电子科技大学出版社，2000.
[7]刘小伟.网页设计实用教程[M].北京：中国铁道出版社，2003.
[8]王春红.网站规划建设与管理维护教程与实训[M].北京：北京大学出版社，2006.
[9]张志强.网页制作时应该注意的问题[J].电力学报，2007.02.
[10]赵晓静.浅谈网站建设和网页制作的方法[J].电脑知识与技术，2005.09.
[11]陆校松.浅谈网站制作的常用软件和基本流程[J].福建电脑. 2013.08.
作者：廖丽
页面规划网页设计论文 篇2：
浅谈网页界面艺术设计
【摘要】在互联网飞速发展的今天，网络已成为人们生活中不可缺少的一部分,无论是在商业、工业还是政府部门中都早已普及开来，如今就连教育事业也都承载着网络这四通八达的命脉迅速的发展起来。网站建设越来越接近于一门艺术而不仅仅是一项技术。网页界面艺术设计，日益被网站建设者所注重。结合自身的经验，阐述了如何制作一个完整的丰富多彩的页面，主要从色彩、框架，布局、优化这几个大方面对页面设计进行描述,对网页界面艺术设计的文字、图形、色彩、多媒体四个要素做了具有特色的分析和归纳，最后对其艺术设计风格进行了深入的分类和阐述，这一部分的重点是对网页界面艺术设计风格的研究。网页作为新兴媒体,有着比报刊、杂志、广播、电视等传统媒体更多的构成要素,如文字、图形、声音、图像和动画等。最后得出页面设计需要时间和耐心去钻研，才能做出好的网页界面艺术设计这一观点。
【关键词】互联网;网页界面;艺术设计
【中图号】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
作者：陈凡亮 闵晓杰 晋国卿
页面规划网页设计论文 篇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
【通联编辑：梁书】
作者：冯小强