优化设计网页布局（共9篇）
优化设计网页布局 篇1
1 版面设计方法与布局原则
1.1 版面设计方法
网页版面设计的方法和技巧主要有以下几点:
1) 简洁
网页版面首先映入眼帘的是布局, 而布局最重要的原则就是简洁, 简洁的版面设计能够给人带来焕然一新的感觉, 这有利于浏览者更顺利的进行网页信息阅读, 对其更好的选择, 只有先简洁的阅读网页主题内容, 其次才是从属的内容。往往浏览者会被网页图片的精美吸引住, 所以这时网页只有在访问中体现它的使用价值, 他们才会反复性的进行浏览访问。这个网页版面在百度、谷歌中比较常见, 因为他们给人的感觉简洁、浏览器来更高效。
2) 要有主色调
网站版面给人的第一感觉, 要从主色调说起, 主色调主要布局与网站网页设计中。主色调多的页面会给客户带来厌烦的感觉, 不利于浏览者长期观看。简单来说, 网页版面的主色彩应用中不能超过5种, 而且其中应以一种主色调为主, 让其占主导地位, 用其他4中颜色作为衬托和点缀。网页版面设计的主色调一般包括黄色、蓝色、橙色、灰色、黑白色系列。
3) 注意字体的设置
网页版面的布局也包括字体的样式, 字体在网页版面中也应遵循简易的原则, 也以不超过3种样式为主。既然遵循简易原则, 且版面设计字体应不要太大, 这样在网页版面显示的字体会给浏览者带来更多有用的信息。哪些闪烁的文字就最好不要出现在网页版面设计中, 图片的闪烁会给浏览者带来厌烦的感觉, 甚至会不舒服。一般而言, 标题栏中的字体应比正文相对大些, 颜色也应该区分开来。
4) 视觉效果要好
网页版面中的网页结构与排版设计中最重要的成分是视觉效果。优秀的设计者能制作出更完美的网页排版和结构, 翻阅那些成功的网页分析发现, 网页主题部分设计的比例是1:2;2:1;再者也可以按1:2:1的结构, 这些比例结构是网页版面设计中较为常见和比较流行的结构方式。网页版面的标题和结尾处, 也应合理的发布网页信息, 更应遵循合理组织、灵活多变的结构方式去布局。
1.2 版面布局原则
网页版面的布局类似于杂志排版的布局。作为一种页面布局, 可以是图片、或者是文字, 也有可能是动画等等。同时, 或大或小的文本, 图片的大小;动静态的运用。当浏览者浏览版面时, 看到的画面是由文字和图片构成的, 假如文字和图片杂乱五章的罗列在一起, 会显得页面比较复杂。所以版面的布局应根据版面的内容需要, 进行合理的排序编辑, 布局, 这样在版面布局中形成一个有机的整体, 让用户更好的浏览。以下是版面布局的原则:
1) 整体布局, 和谐统一。网页设计中占据关键地位的整体布局页面, 起着主导作用。聪明的整体布局, 充分显示了设计师的想法, 设计师的灵感, 这个页面必须协调统一。
集成是布局的传统方法是使用一个对称的形式。通过空间, 和之间的交互文本和图形建立整体的均衡状态, 产生和谐的美感。然而, 对称平衡有时使页面显得呆板, 僵化、缺乏活力。对称平衡辅助设计一些新的单词和模式, 需要时可以使用一些夸张, 和强烈的紧张和运动, 能给对称页面添加一些生动、有趣;
2) 主次分明, 中心突出。在一个页面布局中, 您必须首先考虑视觉中心, 该中心一般在页面的关键领域, 即中部和上部的位置。因此应该最沟通的信息, 在这个网站最具吸引力的内容。在视觉的中心可以安排那些次要的内容, 略, 突出关键页面上的, 优先考虑。
最终的目的是使页面布局页面产生清晰有序, 更好地突出主体, 达到最好的显示效果, 因此, 内容页面的视觉中心应该是主体。网页可以视觉秩序、空间层次、主从关系和相互之间的逻辑关系, 通过组织掌握和使用来突出主体。空间层次, 按照订单的主从关系使得放大视觉中心的主要形象, 表达主体思想, 将一个总体布局设计文档在各种信息, 帮助建立的主要形象, 和双方的主要形象适当地增加一些空白, 可以让更突出强调的主要形象;
3) 疏密有度, 错落有致。在版面布局的内容中, 一定要紧密结合, 恰当留出空白, 合理的运用空格, 例如字间距和行间距的制造;在对称的原则下讲究非对称和对称美;对于形态和色彩的运用更要结合黑白搭配, 圆形和方形的搭配, 进而更好的获得视觉带来的效果;
4) 图文并茂, 相得益彰。图形的美观, 文字的整洁, 都需要二者相互搭配, 如果图形在版面设计中比例较大, 而文字使用较少, 就会大大降低页面所呈现的额信息容量;反之, 文字占用太多则会显现出整个版面的沉闷, 没有生气, 所以图文并茂, 合理搭配, 互相协调, 才能给网页版面带来灵活的展现, 继而丰富了页面的内容。
2 常见版面布局
版面通常所指的是在网页浏览器中呈现的完整布局, 布局呈现的文字和图形相得益彰, 以下是常见的页面布局形式:
2.1 T型布局
T型结构是顶部的页面布局的条纹网站标语和横幅, 下面左边主菜单的一部分, 右侧的布局来显示内容。因为菜单背景更深, 整体效果类似于英文字母T, T布局, 这是最广泛应用于网页设计布局。其优点是页面结构清晰, 明确, 主次是最容易学习初学者的布局方法;缺点是沉闷的, 如果把握不好, 不注意细节和色彩搭配, 容易看后让人觉得无趣。T的布局结构如图1所示。
2.2“口”型布局
“口”型布局映入眼帘的感觉是页面最中间的主题内容, 像一个口字, 左右为注册信息, 内容导航以及搜索引擎, 右侧往往是动态新闻, 热点内容, 以及友情链接, 上下则为横条广告, 以及横条菜单。而另一个口型布局相对简单些, 主要有横条广告或标题以及主题内容来布局的。
2.3“川”型布局
在页面布局中, 川型布局是最特殊的, 整个页面呈现川字形状, 一般分为3列, 网站的内容栏目主要呈现3列中, 这样就可以更大限度的呈现主页的索引功能。这种布局针对网站内容栏目较多。它区别于国形布局, 其内容主要是页面的二级链接, 不足之处就在于栏目在配置的比例上是不平衡的, 色彩也不容易得到统一。
2.4 POP布局
流行布局的海报, 一个美丽的照片作为页面设计中心, 在适当的位置放置主菜单, 用于POP布局。这个布局不是上下和左右对称, 但是需要平衡和节奏, 可以实现动态效果, 其优点是美丽迷人, 缺陷是速度运行中是很缓慢的。
3 新技术对企业网站的挑战
真正的媒体行业的变化是由数字信息传播方式演变而来的, 传统媒体的企业应该跟上步伐, 大胆的拥抱, 积极为数字方式进行传输。终端设备的发展, 使大量的桌面的网络时代企业再次面临严峻考验。新的在线阅读设备催生了新的开发技术, 显示技术, 当然也带来了新的设计技术。新一代的数字新媒体文化的游客的感知达到了不可逆转的趋势, 他们会像往常一样, 忘记了传统媒体网络的缓慢。通过互联网媒介为核心企业, 因此, 媒体, 还需要继续跟踪新技术, 密切关注数字波的进展, 为了保持良好的市场竞争力, 将不会被读者抛弃。网页设计的过程中, 我们应该继承我国的传统文化, 形成独特的设计风格, 扩大的设计视觉语言的同时, 我们还需要创新, 突出现代化、引领时尚潮流。在现代极简主义风格中融入中国传统元素以及符号的提炼为版面设计做出突出贡献, 促进网页设计变得更加强烈的视觉认知和艺术魅力, 创造一个自然、合理、平稳的视觉过程, 更好地激发人们的审美情趣和引导浏览者更好的接受信息。
摘要：网站版面设计也可以理解为布局设计, 版面就是在浏览器上显示的一个完整的页面, 它是网站设计的重要内容。网站与用户的交互就是通过一个个页面来实现的, 每个页面通常都包含了文字、表格、图像、动画、链接等诸多要素。版面布局设计就是要寻找最佳的浏览方式, 将这些要素有机地整合和分布在页面上, 给浏览者以最佳的视觉效果和使用效果。从表面上看, 网页布局设计是一种关于排版的学问, 而实际上, 它不仅是一种技能, 更是技术与艺术的高度统一。
关键词：网页,版面,设计
参考文献
[1]赵晓莉.iv+css布局在网页设计中的应用[J].管理学家, 2010.
[2]章学明.浅谈水工自动化监测系统在城西水库的应用[J].管理学家, 2010.
[3]严加琼.浅析网页设计中的页面布局[J].电脑学习, 2010.
[4]艾妮.基于三维全景技术的通用电子商务系统的研究与开发[D].贵州大学, 2009.
[5]马驰.语文课堂的幽默应充满理趣[J].小作家选刊 (教学交流) , 2013.
[6]周欢.论网页设计留白[J].小作家选刊 (教学交流) , 2013.
[7]李玲玲.关于"网页布局"方式的研究[J].淮北职业技术学院学报, 2011.
优化设计网页布局 篇2
也可以称为“同”字型，是一些大型网站所喜欢的类型，即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列一些两小条内容，中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等。这种结构是我们在网上见到的差不多最多的一种结构类型。
2、拐角型
这种结构与上一种其实只是形式上的区别，其实是很相近的，上面是标题及广告横幅，接下来的左侧是一窄列链接等，右列是很宽的正文，下面也是一些网站的辅助信息。在这种类型中，一种很常见的类型是最上面是标题及广告，左侧是导航链接。
3、标题正文型
这种类型即最上面是标题或类似的一些东西，下面是正文，比如一些文章页面或注册页面等就是这种类。
4、封面型
这种类型基本上是出一些网站的首页，大部分为一些精美的平面设计结合一些小的动画，放上几个简单的链接或者仅是一个“进入”的链接甚至直接在首页的图片上做链接而没有任何提示。这种类型大部分是企业网站和个人主页，如果说处理的好，会给人带来赏心悦目的感觉。
5、“T”结构布局
所谓“T”结构布局，就是指网页上边和左边相结合，页面顶部为横条网站标志和广告条，左下方为主菜单，右面显示内容，这是网页设计中用得最广泛的一种布局方式。在实际设计中还可以改变“T”结构布局的形式，如左右两栏式布局，一半是正文，另一半是形象的图片、导航。或正文不等两栏式布置，通过背景色的区分，分别放置图片和文字等。
这样的布局有其固有的优点，因为人的注意力主要在右下角，所以企业想要发布给用户的信，大都能被用户以最大可能性获取，而且很方便，其次是页面结构清晰，主次分明、易于使用。缺点是规矩呆板，如果细节色彩上不注意，很容易让人“看之无味”。
6、“口”型布局
这是一个形象的说法，指页面上下各有一个广告条，左边是主菜单，右边是友情链接等，中间是主要内容。
这种布局的优点是页面充实、内容丰富、信息量大，是综合性网站常用的版式，特别之处是顶部中央的一排小图标起到了活跃气氛的作用。缺点是页面拥挤，不够灵活。也有将四边空出，只用中间的窗口型设计，例如网易壁纸站使用多帧形式，只有页面中央部分可以滚动，界面类似游戏界面。使用此类版式的有多维游戏娱乐性网站。
7、“三”型布局
这种布局多用于国外网站，国内用得不多。其特点是页面上横向两条色块，将页面整体分割为4个部分，色块中大多放广告条。
8、对称对比布局
顾名思义，它指采取左右或者上下对称的布局，一半深色，一半浅色，一般用于设计型网站。其优点是视觉冲击力强，缺点是将两部分有机地结合比较困难。
9、POP布局
网页设计中布局方式之比较 篇3
关键词：表格 DIV+CSS 布局
1 概述
在网页设计过程中，色彩的搭配、文字的变化、图片的处理等，这些都是不可忽略的因素，但除此之外，还有一个非常重要的因素——网页的布局。不同类型的网站采用不同的布局，不但能使网站结构合理化，也可以使访问者一看就明白：这个网站是做什么的。
目前网页常见的布局结构类型主要有“国”字形布局、“匡”字形布局、“三”字形布局、“川”字形布局、标题文本型布局、框架型布局和变化型布局等。无论是哪一种布局結构，我们在布局时都应遵循以下三个基本原则：①主题鲜明：视觉设计表达的是一定的意图和要求，这就要求视觉设计不但要单纯、简练、清晰和精确，还要注意通过独特的风格和强烈的视觉冲击力，来鲜明地突出设计主题。②形式与内容统一：内容决定形式，形式反作用于内容，一个优秀的设计必定是形式对内容的完美表现。③强调整体性：注意单个页面形式与内容统一的同时，更不能忽视同一主题下多个分页面组成的整体网页形式与整体内容的统一。
2 常见布局方式
在网页设计中，常见的布局方式一般有三种，第一种是使用表格（table），第二种是使用框架，另一种是使用DIV+CSS。下面我们将具体的对这三种布局方式进行说明与分析。
2.1 表格布局方式
表格是一种简明扼要而内容丰富的组织和显示信息的方式，在文档处理中占有十分重要的位置。使用表格既可以在页面上显示表格式数据，也可以进行文本和图形的布局。由于表格使用简单而且灵活，是最早也是使用最广泛的网页布局技术。通过使用相关的一系列表格标签，如table、th、tr、td、caption、thread、tfoot、tbody、col等，并对表格单元格进行合并或拆分以及在表格中嵌套表格等操作，从而得到需要的布局。
表格布局的优势在于它能对不同对象加以处理，而又不用担心不同对象之间的影响，而且在定位图片和文本时非常方便。但当使用过多表格时，页面下载速度将会受到影响。并且灵活性较差，不易修改和扩展。
2.2 框架布局方式
框架也是网页设计中对页面布局控制的一种重要手段。使用框架可以将一个浏览器窗口划分为多个区域，每个区域可以分别显示不同的网页。访问者浏览站点时，可以使某个区域的内容永远不更改，但可通过导航条的链接更改主要框架的内容。框架结构常被用在具有多个分类导航或多项复杂功能的网页上。框架结构的实现主要是利用…标签。
框架布局能有效地实现页面导航，方便用户浏览网页，并在框架窗口中支持滚动条，从而能显示更多内容。由于框架集中相同的内容只用下载一次，所以能减少页面下载时间。但兼容性略差。
2.3 DIV+CSS布局方式
DIV+CSS是网站标准（或称“WEB标准”）中常用术语之一，在XHTML网站设计标准中，不再使用表格定位技术，而是采用DIV+CSS的方式实现各种定位。
DIV是指HTML标记集中的标记
①表现和内容相分离
将涉及部分剥离出来放在一个独立样式文件中，HTML文件只存放文本信息，符合W3C标准。
②提高搜索引擎对网页的索引效率
用只包含结构化内容的HTML代替嵌套的标签，搜索引擎将更有效地搜索到你的网页内容。
③代码简洁，提高页面浏览速度
对于同一个页面视觉效果，采用DIV+CSS重构的页面容量要比TABLE编码的页面文件容量小得多，代码更加简洁，前者一般只有后者的1/2大小。对于一个大型网站来说，可以节省大量带宽。
④易于维护和改版
由于内容和样式的分离，使页面和样式的调整变得更加方便。只需简单的修改几个CSS文件就可以重新设计整个网站的页面。
3 三种方式比较
3.1 应用的灵活性
表格方式是最常用的网页布局技术，它使用简单而且灵活，通过表格的嵌套，可以进行比较复杂的网页布局；框架方式由于其提供了固定的布局样式，所以适合布局一些特殊格式的网页，例如论坛的布局常使用这一方式。而DIV+CSS方式使用也比较简单，可以进行复杂的布局。
3.2 布局的重构性
无论是表格还是框架，最终生成的网页布局文件是布局格式控制和网页内容混在一起，这样对网页布局进行较大改动甚至重新布局时，就会显得非常困难和麻烦，有可能需要重新制作页面。而DIV+CSS方式布局和内容表现是一个分离体，使用属性就可以轻松改变布局结构和风格。
3.3 网页浏览
利用表格布局的网页在下载的时候必须等整个表格内容都下载完毕之后才会一次性显示出来，而利用DIV块的CSS布局的页面就科学得多，各个子块可以分别下载显示，从而提高了页面下载速度，搜索引擎的排名也会因此而提高。但从兼容性的角度来说，框架方式和DIV+CSS方式都表现差强人意，有待进一步提高。
参考文献：
[1]梁斌，柯华坤.《网页布局技术比较与应用优化》，中国教育技术装备，2009，11.
[2]马东.《网页与网站设计》，东方出版社，2008年.
[3]王俭敏.《CSS+DIV网页样式与布局》，电子工业出版社，2008.
[4]郑宁宁.《浅析DIV+CSS网页设计技术》，山东省农业管理干部学院学报，2008.
[5]扬森香，聂志勇.《网页设计与制作案例教程》，北京大学出版社，2009.
[6]严加琼.《浅析网页设计中的网页布局》，电脑学习，2010，1.
浅析网页设计中的页面布局 篇4
页面布局也称页面构图设计,其主要任务是将WEB页面合理分割成用于安排文字、图像等各种屏幕元素的区间。一个精美的网页,不仅体现在页面内容的精彩,还要有效地利用页面的有效显示空间,创造出合理的布局模式。
随着网页制作技术和浏览者需求的提高,访问者不再愿意看到只注重内容的站点,设计者只有将网页内容和色彩通过合理布局、协调搭配,将网页中具有闪光性的内容加以强化,这样既可以将设计者的思路淋漓尽致的表达出来,同时也可以留住太过“挑剔”的访问者。由此可见,页面的布局在网页设计中起着举足轻重的作用,那么如何才能使页面布局合理分配?这恰恰是网页设计者感到最棘手的问题,本文对网页设计的布局进行简要分析。
1 网页布局类型
在进行网页布局之前,首先要明确页面布局设计成何种类型,常见的网页布局类型有“国”字型布局、“厂”字型布局、“框架”型布局、“封面”型布局、“flash”型布局,下面分别论述。
(1)“国”字型布局。又称为“同”字型布局,即最上面是网站的标题以及横幅广告条,接下来是网站的主要内容,左右分别列出一些栏目,中间是主要部分,最下面是网站的一些基本信息、联系方式、版权声明等,这种结构是一些大中型网站常用的布局类型。这种布局的优点是充分利用版面,信息量大。缺点是页面拥挤,不够灵活。
(2)“厂”字型布局。也称拐角型,指页面顶部为横条网站标志+广告条,下方左面为主菜单,右面显示内容的布局,因为菜单条背景较深,整体效果类似英文字母“T”,所以又称之为“T”形布局。这是网页设计中用的最广泛的一种布局方式。这种布局的优点是页面结构清晰,主次分明,是初学者最容易上手的布局方法。缺点是规矩呆板,如果细节色彩上不注意,很容易让人“看之无味”。
(3)“框架”型布局。左右框架型:这是一种左右分为两页的框架结构,一般左面是导航链接,有时最上面会有一个小的标题或标志,右面是正文。我们见到的大部分的大型论坛都是这种结构的,有一些企业网站也喜欢采用。这种类型结构非常清晰,一目了然。
上下框架型:与上面类似,区别仅仅在于它是把页面分为上下两页的框架。
综合框架型:上面两种结构的组合,相对复杂的一种框架结构,较为常见的是类似于“拐角型”布局,只是采用了框架结构。
几种框架结构的一个共同特点就是浏览方便,速度快,但结构变化不灵活。
(4)封面型布局。这种类型基本上是出现在一些网站的首页,大部分为一些精美的平面设计结合一些小的动画,放上几个简单的链接或者仅是一个“进入”的链接。这种类型大部分出现在企业网站和个人主页,如果处理得好,会给人带来赏心悦目的感觉。优点显而易见,漂亮吸引人。缺点是速度慢,作为版面布局还是值得借鉴的。
(5)Flash型布局。其实这与封面型结构是类似的,只是这种类型采用了目前非常流行的Flash,与封面型不同的是,由于Flash强大的功能,页面所表达的信息更丰富,如果其视觉效果及听觉效果处理得当,绝不亚于传统的多媒体。
综上所述,在进行网页布局时,应根据具体情况选取不同的布局结构,如果内容比较多,可以考虑用“国”字型;页面内容不太多或者初学者,可以考虑用“厂”字型布局;如果做一个时尚类站点,Flash型和封面型是首选。在实际应用中也可以把几种布局结合在一起并稍做变化,即变化型布局。
2 网页布局技术
目前,网页设计的软件大多使用Dreamweaver,在使用Dreamweaver设计网页时,一般用于页面布局技术的有以下几种。
(1)表格布局。早期的网站很多都是采用表格布局,其实表格主要是用来组织和显示数据的,而不是承载网页布局的重任,优势在于可以有效地定位网页中不同的元素,而又不用担心不同元素之间的影响。表格布局直观,设置方便,初学者容易上手,使用表格的一个有利方面是众多浏览器全都支持。缺点是table会造成页面代码的可读性非常差,在多重嵌套的时候不仅代码比较乱,而且页面下载速度受到影响,不符合W3C网页标准,网站不便于维护,现在大中型网站一般不用表格来布局。
(2)框架布局。框架可以非常方便地完成网页的导航工作,可以把网页划分为若干个区域,每个区域可以分别显示不同的网页内容,而且不存在相互干扰的问题。如果能有效的运用框架,能使网页更加整洁、清晰。同时每个框架内容的改变不会刷新其他框架的内容,从而节约了网络数据流量,减少了页面下载次数,提高网页速度。
使用单独的框架只能完成简单的页面布局,通过框架互相嵌套使用,可以实现多方向的区域分割能力,但每个网页所使用的框架数量最好不要超过3到5个,采用过多的框架会增加下载网页所需的时间,影响网页的浏览速度,对于内容多、布局复杂的网站不宜采用框架布局,且框架结构的页面兼容性不好。
(3)DIV+CSS布局。随着网络技术的不断发展,早期的表格、框架布局方式越来越不能适应新的要求。新的web标准逐渐普及,一种基于DIV+CSS的新型网页布局方式开始流行,一些大型门户网站都已经完成了网站重构。
DIV是HTML中的一个元素,是容器性质的,DIV元素是用来为HTML文档内大块的内容提供结构和背景的,不用CSS技术,可以有效地页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。简单地说,DIV用于搭建网站结构(框架)、CSS用于创建网站表现(样式/美化)。
DIV+CSS网页布局最主要的优势体现在:表现和内容相分离,将设计部分剥离出来放在一个独立样式文件中,HTML文件中只存放文本信息,大大提高页面浏览速度;易于维护和改版,只要简单修改几个CSS文件就可以重新设计整个网站的页面;提高搜索引擎对网页的索引效率,搜索引擎将更有效地搜索到你的网页内容。
DIV+CSS布局虽然功能强大,但是完全都用它来做,太费时费力,对于初学者来说,需要一个深入学习的过程,才能灵活掌握,笔者认为用table+CSS也是不错的组合。table+CSS布局方案即HTML表格和CSS的混合使用,可以实现表格布局,CSS修饰页面效果,这样既利用了HTML表格的方便性与兼容性,又利用了CSS的修饰效果美化页面。使用table+CSS布局,对于构建小型个人网站来说,是个比较快捷方便的办法。
3 网页布局方法
网页布局的方法有两种,第一种为纸上布局;第二种为软件布局。下面分别加以介绍。
(1)纸上布局。准备若干张白纸和一只铅笔,在纸上画出页面的布局图,可按照以下三个步骤进行:
草案:尽可能发挥想象力,将想到的“景象”画上去,这属于创造阶段,不讲究细腻工整,不必考虑细节功能,只以粗陋的线条勾画出创意的轮廓即可,尽可能多画几张,最后选定一个满意的作为继续创作的蓝本。
粗略布局:在草案的基础上,将需要放置的功能模块安排到页面上,这里必须遵循突出重点、平衡谐调的原则,网站标志、主菜单等重要的模块放在最显眼、最突出的位置,然后再考虑次要模块的摆放。
定案:将粗略布局精细化,具体化,反复调整后确定最终的布局方案。根据智慧和经验,旁敲侧击多方联想,才能制作出具有创意的布局。
(2)软件布局。如果不喜欢用纸来画出你的布局意图,那么还可以利用软件Photoshop来完成这些工作。Photoshop所具有的对图像的编辑功能用到设计网页布局上更加得心应手。不像用纸来设计布局,利用Photoshop可以方便的使用颜色,使用图形,并且可以利用层的功能设计出用纸张无法实现的布局意念。
无论用哪种方法进行页面具体布局,都需要考虑以下几方面的问题:
(1)页面尺寸。由于页面尺寸和显示器大小及分辨率有关系,一般分辨率在800x600的情况下,页面的显示尺寸为:780x428个象素;分辨率在1024X768的情况下,页面的显示尺寸为:1007x600。从以上数据可以看出,分辨率越高,页面尺寸越大。
在网页设计过程中,向下拖动页面是唯一给网页增加更多内容的方法。除非能肯定站点的内容能吸引大家拖动,否则不要让访问者拖动页面超过三屏。如果需要在同一页面显示超过三屏的内容,最好能加上页面内部链接,方便访问者浏览。
(2)整体造型的选择。整体造型是指页面的整体形象。对于页面的造型,可以充分运用自然界中的不同形状以及它们的组合:矩形、圆形、三角形、菱形等。
对于不同的形状,所代表的意义是不同的。如矩形代表正式、规则,很多ICP和政府网页都是以矩形为整体造型;圆形象征柔和、团结、温暖、安全等,许多时尚站点喜欢以圆形为页面整体造型;三角形代表力量、权威、牢固、侵略等,许多大型的商业站点为显示它的权威性常以三角形为页面整体造型;菱形代表平衡、协调、公平,一些交友站点常运用菱形作为页面整体造型。在实际应用中,一般会综合多种图形进行设计,可能某种图形的构图比例占的多一些。
(3)页头的设置。页头又可称之为页眉,页眉的作用是定义页面的主题。一个站点的名字大多都显示在页眉里,这样,访问者能很快知道站点的内容。页头是整个页面设计的关键,它将牵涉到下面的更多设计和整个页面的协调性。页头常放置站点名字的图片和公司标志以及旗帜广告。
(4)文本的位置。文本在页面中多以数行或者块出现,它们的摆放位置决定者整个页面布局的可视性。在过去因为页面制作技术的局限,文本放置的位置灵活性非常小,而随着dhtml的兴起,文本已经可以按照自己的要求放置到页面的任何位置。
(5)图片和多媒体的利用。图片和文本是网页的两大构成元素,缺一不可,也是美化页面和说明内容必须的媒体。处理好图片和文本的位置成了整个页面布局的关键,而你的布局思维也将体现在这里。除了文本和图片,还有声音、动画、视频等其它媒体。虽然不是经常被利用到,但随着动态网页的兴起,它们在网页布局上也将变得非常重要。
4 结束语
当前,网络的飞速发展使网页设计技术不断提高,也给网页设计人员带来了更大的挑战,如何把网页的内容与形式完美地结合,增强网站的吸引力,不仅要精通网页制作的技术,还需要设计者具有较高的艺术修养和审美情趣,页面布局的好坏在很大程度上取决于设计者的艺术修养水平和创新能力。熟悉网页布局的技巧,具有较高的艺术修养水平,制作出适合用户的、具有个性风格的精美网页,是每个网页设计人员的追求。
摘要：网页是网站构成的基本元素,决定网页是否吸引浏览者的重要因素之一是网页的合理布局。本文阐述了在整体上把握好页面布局的重要性,介绍了网页布局的常见类型,对网页布局的技术和方法做了详细地分析。
关键词：网页设计,网页布局,技术,方法
参考文献
[1]刘霆雨.完美网页设计与制作[M].北京:人民邮电出版社,2007:13-15.
[2]扬森香,聂志勇.网页设计与制作案例教程[M].北京:北京大学出版社,2009:7-9.
优化设计网页布局 篇5
从内容出发（渐进增强的核心思想），一份合理的HTML结构如下：
main是主要内容，sub是辅助内容，比如导航、相关文章等，extra是额外信息，比如广告等，具体含义根据实际情况来定，书写HTML文档有个非常重要的原则是：重要的内容放前面。这能让文档更富语义，能提高可访问性，对SEO也更友善。
写好上面的代码后，我们再来看看如何实现三栏布局。（书写HTML时，尽量以内容为向导，避免一上来就考虑布局，这是渐进增强在工作流程中的体现）
Table布局
经典得一塌糊涂的表格布局，在渐进增强面前落花流水——表格布局要求书写HTML代码时，首先考虑布局，而不是内容。不嗦，直接枪毙。
Float布局
浮动布局满天飞：
优点是简单，缺点呢？我觉得最主要的一个缺点是对HTML结构有要求，比如上图中的三栏布局，要求sub, main, extra在DOM树中也是依次排列的。也就是说，布局会影响HTML文档流的顺序，需要一开始就考虑，这和渐进增强提倡的工作流程冲突。
在渐进增强的领导下，只好将浮动布局关禁闭了。
绝对定位布局
绝对定位非常简单，非常精准。但面对不可预料的高度时，绝对定位就死翘翘了。
废话少说，直接关禁闭。
负边距布局
Ryan Brill在写了一篇文章：Creating Liquid Layouts with Negative Margins. 文中的“发现”立刻让布局世界迎来了“负来负去”的新时代。对于上面的三栏布局，需要先调整DOM结构：
xxxxxBxxxxx
最终的CSS实现请看这里。请仔细阅读Ryan的原文，可以发现负边距能解决两栏布局中文档结构的问题（main可以放在sub前面），
但对于三栏布局，Ryan给出的解决方案需要添加额外的包裹层，对DOM结构也依旧存在依赖关系。
这个方法的最大价值是：开启了负边距的神奇大门，让布局的实现思路立刻活跃了起来。
圣杯布局
，Matthew Levine开始寻找布局圣杯：In Search of the Holy Grail. 这是一篇让人赞叹振奋的文章。Matthew灵活运用容器的内边距、浮动元素的负边距和相对定位，接近完美的实现了三栏布局。DOM结构也很好，无需额外标签。但是，我们来看看多达27页的评论吧。圣杯布局最令人头疼的是：在IE6下，左栏经常会神奇消失！！！（比如将IE6的窗口高度拖小点）评论中还反馈在IE7下也存在不少问题（我测试后，发现在IE7正式版下没问题，评论中的IE7可能是beta版）。另外在Chrome下表现也有点诡异，需要小小hack. 还有那繁琐的padding, margin, left, right计算，时刻需要一颗清晰的大脑，喝点小酒就彻底晕了……
这里还有篇文章专门分析了圣杯布局在IE6下的Bug: Jump on hover in Ala’s Holy Grail layout.（万恶的IE6啊，浪费了我们多少宝贵的时间）
总之：这是一个很美妙的布局，但在IE6尚未退出历史舞台的当今，圣杯布局可能并不是我们真正要找的圣杯。
伪绝对定位布局
聪明的同行们对完美布局的追求孜孜不倦。我们迎来了奥运。Eric Sol 给奥运的献礼是一个聪明的布局尝试：Faux Absolute Positioning.
这个布局思路很简单：先相对定位到最右边，再用margin-left移过来。关于这个布局，曾经引发了淘宝UED内部的热烈讨论。若干月后，我和明城在不同的项目中采用了这一方法，结果发现在ie下，某些页面会闪屏（页面加载时能看见左移）。当时项目紧，没细究，上周想重现却怎么也重现不了（明城说页面非常复杂的时候会闪屏，但具体原因没找出来）。今天看原文的评论，有人指出在IE6下，设置背景图会导致这个布局彻底完蛋。
仔细想来，这个布局最让人担心的是：为什么一开始要将所有item都left: 100%? 这个太邪恶了，让人不放心。
“借尸还魂”的Table布局
乍一看，这个布局很雷人：基于display:table的CSS布局。作者作了解释：在css里使用table-cell之类的声明，仅是声明渲染方式，并不影响HTML文档中的语义。从这个角度讲，这种布局方式的确不错，而且很容易就可以做到等高，也不用考虑清除浮动等扰人的问题。
但是，又是IE成了绊脚石。在IE中，这个布局需要IE8才支持。不过，即便所有浏览器都支持了，我为什么老觉得有点“借尸还魂”的感觉？
小结
可以看出，圣杯布局和伪绝对定位布局比较符合渐进增强的工作流程。圣杯布局里，把margin发挥到了极致（让我对浮动元素的负边距有了彻底的了解），但在IE6下的Bug让人很恼火。伪绝对定位布局则让人很不放心left: 100%，用来解决原文中的问题感觉不错，但如果用来作为整个页面的布局，则有点邪恶。
布局中究竟有没有圣杯呢？下一篇中将尝试给出一个“最佳”答案。
论网页设计的布局及色彩搭配 篇6
关键词:网页设计;布局;色彩;搭配
一、网页设计的布局
网页设计实际上就是平面设计,不过目的性、时效性更强。每一次网页设计都可以看成平面设计,不同的是设计网页不仅是把相关内容放到网页中就行了,它还要求网页设计者能够把这些内容合理安排,给浏览者以赏心悦目的感觉,这样才能增强网站的吸引力。网页设计者能够随意控制页面上所有的元素,但假如不知道什么是约定俗成的标准或者说大多数浏览者的浏览习惯,那么就不可能在此基础上加上自己的东西,从而被广大浏览者所接受和欣赏。这些概念,也就是人们常说的章法。要做好页面设计,就必须先了解一些网页布局相关的基本概念。
(一)页面尺寸
页面尺寸显示器的大小及分辨率的高低决定显示页面的尺寸,网页的最大局限性在于页面显示无法突破显示器的范围。由于浏览器本身也占用了网页显示的一部分,所以能显示网页的页面范围已经相当紧张。一般情况下,显示器在640*480像素的分辨率下,页面的显示尺寸为620*311像素:在800*600像素的分辨率下,显示器的分辨率越高,能显示的页面尺寸就越大。
(二)整体造型
造型就是创造出来的物体形象,这里指页面的整体形象。尽管显示器和浏览器都是矩形,但对于页面的造型,可以充分运用各种形状以及它们的组合:矩形,圆形,三角形,菱形等等,但图形与文本的结合应该层叠有序。
(三)页头
页头又称之为页眉,页眉的作用是定义页面的主题。比如一个站点的名字人多都显示在页眉里。这样,浏览者一看就能知道该站点的主题是什么。
(四)文本文字
文本文字是网页的主体,是传达信息的最重要的方式。一方面是因为浏览网页上的文字和看书很相似,比较符合一般人的习惯,另一方面也因为文字所需要的存储空间非常小。文本的摆放位置决定着整个页面布局的可视性。在过去由于网页制作技术的局限,文本放置的位置灵活性非常小,随着Html的兴起,文本已經可以放置在页面的任何位置。
(五)页脚
页脚是和页眉相呼应。页眉是放置站点主题的地方,而页脚是放置作者或公司等各种制作信息的地方。
(六)图片
图片在网页中占有非常重要的地位。因为采用图片可以减少纯文字给人的枯燥感,巧妙的图像组合可以带给浏览者美的享受。
(七)多媒体
多媒体一般指音频、视频、动画、虚拟现实等形式。将多媒体引入到网页,可以在很大程度上吸引浏览者的注意。利用多媒体文件可以制作出更有创造性、艺术性的作品,它的引入使得网站成了一个有声有色,动静相宜的世界。
(八)导航栏的位置
导航栏能让我们在浏览时容易地到达不同的页面,是网页元素非常重要的部分,所以导航栏一定要清晰、醒目。一般来讲,如果内容非常多,就要考虑用"国字型"或拐角型;如果内容不算太多而一些说明性的东西比较多,则可以考虑标题正文型;那几种框架结构的一个共同特点就是浏览方便,速度快,但结构变化不灵活。
二、网页设计的色彩搭配方法
在网页设计中,色彩成为一个非常重要的研究对象,约翰内斯o伊顿是最早引入现代色彩体系的教育家之一,具有非常敏感的形式认识,他坚信色彩是理性的,只有了解色彩的科学构成,才能进行有色彩的自由表现。
(一)明确网站的主题、服务对象及用色彩要表达的目的
要确定一个网页用什么色彩合适,即什么色彩适合什么网站。你必须要先弄明白该网站的主题和它的服务对象,以及你通过色彩希望达到的目的。
(二)确定网页的主色调
根据网站的主题、服务对象及用色目的,给网站的网页选一个主色调,以形成一定风格。整个网页最好只有一个主色调。主调色彩一般可用公司的标准色,这符合公司的形象战略,可以提升公司形象。
(三)辅助色彩的搭配
根据主调色选择辅助色彩主调色确定后,还可选一至两种辅助色配合使用,整个网页的色彩最好控制在三色之内。如果整个网页采用单色调,即只用一种色相,其辅助色只是在明度和纯度上作调整,间用中性色。采用单色调,易形成一种风格,在网页的局部要采用少量小面积的对比色以达到丰富页面的效果,
(四)确定背景和文本的色彩
背景和文本的色彩对比要尽量大(一般明度对比为3∶1到5∶1),以便突出主要文字内容,但不要过于亮丽,以免造成过强刺激的视觉效果。正文和标题的背景色可以不同,一般正文的背景色用淡雅色较佳,标题的背景色可用较鲜艳的。背景色如果以白色等淡色为主,其文本色要用低明度有彩色,这种搭配较利于阅读。
(五)最后确定超链接
超链接翻转效果当前超链接及已访问的超链接的色彩超链接的文本色彩,与其它文本的色彩要有差别,以利于浏览者进一步链接;如果利用翻转效果,其翻转效果的色彩应与超链接色彩不同,这样可以突出已选到的超链接,但翻转效果的色彩可以与当前超链接的色彩相同,已访问的超链接的色彩可以与超链接的色彩相同,也可以不同。
参考文献:
[1]刘佳,王倩.网页设计中的色彩表现[J].美术大观,2007,(11).
优化设计网页布局 篇7
1 相关概念
Web标准:web标准将网页划分为三个部分, 即结构、表现、行为。结构是指用来对网页中的信息进行整理与分类, 常用的技术有HTML、XHTML、XML;表现用于对已经被结构化得信息进行显示上的修饰, 包括版式颜色大小等, 主要技术就是CSS;行为是指对整个文档内部的一个模型进行定义及交互行为的编写, 主要技术有DOM、Java Script脚本语言。
Div:也称之为层, 承载的是内容, 是用来为HTML文档内大块的内容提供结构和背景的元素, 它可以将文档分为多个有意义的区域或模块。在DIV中可以放置文本、图像和动画等任何页面元素, 利用它还可以精确地定位页面中元素的位置。而DIV+CSS配合更是相得益彰。
CSS (Cascading Style Sheets) :译作“层叠样式表”, 简称样式表, 承载的是样式。用于控制网页样式并允许样式信息与网页内容分离的一种标记性语言。使用CSS技术, 可以将表现和结构分离, 能更好的控制页面布局, 从而制作体积更小、下载速度更快的网页。
Div+CSS:Div承载页面内容存放在HTML文档中, 而用于定义表现形式的CSS规则存放在另一个文件中或HTML文档的头部。将内容与表现形式分离, 不仅使维护站点的外观更加容易, 还可以使HTML文档代码更加简练。缩短浏览器的加载时间。
2 基于DIV+CS S的布局设计
网页布局, 是指在页面制作过程中, 将整个页面划分为几个功能模块进行布局。在开始设计网页之前都要有一个基本的网页布局的构思。
以图1所示的网站为例, 我们可以将网页的基本框架大致分为以下几个模块:顶部部分 (header) , 具体为banner图片和menu;内容部分 (pagebody) , 具体为左边栏、主体内容;底部部分 (footer) , 具体为版权信息、邮箱地址、联系信息等。页面构架与Div布局如图2所示。
3 基于DIV+CS S的代码编写
3.1 HTML文档代码
在上一步网页的布局之后, 我们继续完善各个层的属性, 初步体现出网页的基本雏形。在Dreamweaverz中新建一个空白的HTML文档, 命名为index.html, 然后根据Div嵌套结构在
之间写出以下代码:
3.2 CSS文件代码
在完成HTML文档之后, 我们定义各个层的属性, 在Dreamweaver中新建一个CSS样式文件style.css, 然后输入以下代码:
4 DIV+CS S的优劣分析
4.1 优势
4.1.1 表现与内容相分离。
Div+CSS将网站的内容存放在HTML文件中, 样式存放在一个独立的样式文件中。
4.1.2 网页加载速度快。
对于同一个页面效果, 使用Div+CSS的页面容量要比Table编码的页面文件容量小的多, 代码更加简洁, 具有搜索引擎的钱和力, 并能够提高页面的浏览速度。
4.1.3 轻松控制网页效果。
CSS样式文件能够实现多种不同的视觉效果。
4.1.4 易于维护和改版。
由于多个页面可以共享一个CSS文件, 只需修改CSS文件就能重新布局整个网站的页面, 提高了网站维护的效率, 降低了网站改版的成本。
4.2 不足之处
4.2.1 不适合初学者。
完全手工编写代码、开发速度慢、非所见即所得。不适合初学者使用, 相比之下传统的表格布局能让学生很容易掌握。
4.2.2 浏览器的兼容性。
并不是所有的浏览器都支持CSS布局的页面, 有一定的局限性。
4.2.3 对CSS依赖性较强。
一旦CSS文件出现异常, 将会影响整个网站的正常浏览。
结束语
通过对本案例的分析设计与实现, 我们发现使用Div+CSS可以轻松地控制页面的布局, 并使表现和内容相分离, 掌握Div+CSS, 熟练运用CSS样式是一个网页设计初学者向网页设计高手过渡的必备条件。
摘要：表格和Div+CSS是目前实现网页布局的两种常用方法。Div+CSS因为其特殊的优势被越来越多的应用于网页设计中, 该文通过一个具体实例采用Div+CSS的方法来设计并实现网页的布局。
关键词：Div,CSS,网页布局
参考文献
[1]黄雄平.基于Dreamweaver的Div+CSS网页设计初步研究[J].电脑知识与技术, 2010, 12.[1]黄雄平.基于Dreamweaver的Div+CSS网页设计初步研究[J].电脑知识与技术, 2010, 12.
[2]周鑫.浅谈DIV+CSS技术在网页设计中的应用[J].科技信息, 2011, 17.[2]周鑫.浅谈DIV+CSS技术在网页设计中的应用[J].科技信息, 2011, 17.
优化设计网页布局 篇8
关键词：网页布局,DIV+CSS方案,HTML优化,网页设计
只有当好的网页结构和优秀的网页布局相结合, 才能达到最好的浏览效果, 使浏览网站的用户感受到最好的用户体验, 如何设计出这样的网页就是我们现在研究的重点。
1 表格布局技术
早期页面布局的方式主要用框架及表格。在HTML和浏览器还不够完美的时候, 我们想让页面内的元素能有一个让人满意的格局是比较困难的事情, 由于表格不单可以控制单元格的宽度和高度, 而且可以相互嵌套, 所以为了让每个网页元素能够放在合适的位置, 表格就成为网页设计者的主要工具。
表格在页面布局上比较容易控制, 通过表格的套入可以轻松地实现各种各样的布局, 但是当你需要制作一个繁琐的页面时, HTML文档就会充满了标签。同时, 因为浏览器需要把整个表格加载完后才会显示出来, 因此加入一个表格过长, 那么访客就需要等很长的加载时间才可以看到页面内容。使用表格布局页面会让HTML文档的内部结构变得杂乱不堪, HTML文档字节数变得越来越大, 在落后的设备上, 页面需要大量修改, 正是这些弊端, 使得网页开发者开始注意Web的标准。
2 CSS样式
CSS就是Cascading Style Sheets, 中文翻译为“层叠样式表”, 简称样式表, 它是一种制作网页的新技术。CSS是Web标准中表现标准语言。使用CSS可以简化网站的格式代码, 加快网页显示的速度, 外部链接样式可以同时定义很多个页面, 大大降低了重复劳动的工作量。
CSS标准中重新定义了HTML中原来的文字显示格式, 并增加了一些新理念, 比如类、层等, 可以对文字进行定位、重叠等操作, 提供了更多丰富多彩的格式;同时CSS可进行集中样式管理。CSS还可以将样式定义独自存储于格式文件中, 这样可以将显示的内容和显示样式定义分开, 以便于多个HTML文件共享样式定义。除此之外, 一个HTML文件也可以使用多个CSS样式文件中的样式定义, 相对于之前传统HTML的表现而言, 在网站的建立及重构过程中使用CSS技术, 可以精准的掌握页面里每一个元素属性, 例如:字号样式、背景、排列方式、区域尺寸、项目符号等, 方便地实现网页的结构与内容表现完全分离, 使站点的加载速度及维护更加方便。使网站的功能扩展性达到前所未有的增强。
3 DIV+CSS技术
DIV+CSS是目前应用最多的一种网站布局技术, 使用DIV+CSS的网页布局方案, 首先需要把HTML结构化, 我们可以先不考虑网页的外观。先将内容放在设置好的DIV中, 让结构由DIV产生, 然后再使用CSS进行格式设计, 即“外观”设计。
在网站设计前需要对网页进行规划设计。例如, 一个页面可能有类似这样的几块:网站名称、主页、子页面导航 (主菜单) 、子菜单、搜索框、展示区、页脚等。
与传统的表格布局相比较, 使用DIV+CSS进行网页布局还具有以下优势:更快捷的被搜索引擎的引用, 加载速度更快;CSS使用灵活, 使页面元素样式多变, 利于维护和更新;使用DIV+CSS技术, 可以减少视觉的相同性, 同一网页在不同浏览器中表现的效果相同或基本不变, 保持网页的美感;表现和内容相分离、提高页面加载速度。
4 DIV+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.
优化设计网页布局 篇9
1 常用布局方法分析
常用的网页布局的方法有表格布局、框架布局和DIV+CSS布局。
1.1表格布局简单、直观,制作速度快,所以在以前的网页布局中大都采取表格布局,但用表格布局的页面源代码存在大量的冗余代码,不利于信息的检索,也不利于网站的维护与修改。为了解决这样一个问题,所以人们后来又引进了DIV+CSS布局技术。
2 DIV 和 CSS 介绍
2.1 DIV是指HTML语言中的 <div>标记元素,一般也称为DIV层定位。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的,其中所包含元素的特性由DIV标签的属性来控制,或者是通过使用样式表格式化这个块来进行控制。
2.2 CSS(Cascading Style Sheet),层叠样式表,是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言,是一系列格式规则,用来控制网页内容的外观。
(1) CSS语法
C S S样式基本语法 :S e l e c t o r { P r o p e r t y 1 :v a l u e 1 ;Property2:value2},其中Selector是选择器,指要引用样式的对象,可以是一个或多个HTML标记,如果有多个标记时,各个标记之间用逗号分开 ;Property1为属性,value为对应属性的取值。属性和属性值之间用冒号 ( :) 隔开,多个定义之间用分号( ;) 隔开。
(2)CSS选择符
1 id选择符
基于ID的样式定义要应用到由其ID属性标识的特定元素的属性。要为网页中的单个HTML元素设置样式时,通常使用基于ID的样式。
2类型选择符
基于类的样式要应用到特定元素类型子集的属性。下面的示例演示基于类的样式规则。名称introduction为样式的选择器。
3基于元素的样式定义
基于元素的样式定义要应用到特定的HTML元素的每个实例的属性。
(3)CSS盒子模型
CSS的盒子模式是DIV+CSS网页布局的核心。传统的表格布局是通过大小不一的表格和表格嵌套来定位排版网页内容,改用CSS布局后,就是通过由CSS定义的大小不一的盒子和盒子嵌套来编排网页。盒子模型主要具有4种属性 :内容(content)、边框距 (padding)、边界 (border)和边距 (margin)。
3 DIV+CSS 应用实例
用CSS布局,首先要清楚页面要显示的信息,并根据这些信息将一个网页分成不同的内容块。下面举例说明利用DIV+CSS来布局网页的方法 :
3.1 划分基本区块
首先将网页分为几个内容块 :标题区(banner),左侧区域(leftsidebar), 右侧区域(rightsidebar),主内容区(maincontent),版权信息区 (footer)。
3.2 编写步骤如下
(1)新建一个网站。
(2)打开Default.aspx页面并切换到“源”视图,在 <form> 元素之后添加下列代码 :
(3)在资源管 理器中,右击网站 名称,选择“添加新项”,新建样式表文件“Style Sheet.css”,编辑器将打开一个包含body样式规则的新样式表。
(4)移除body样式规则,然后添加以下代码 :
(5)打开Default.aspx页面并切换到“设计”视图,拖动解决方案资源管理器中的Style Sheet.css文件到Default.aspx页面。
(6)保存并运行Default.aspx文件。
4 结束语
网页布局对网站建设来说是至关重要的,如何将网页布局的合理、美观,是网站的设计者必须掌握的一项很重要的技能。DIV+CSS布局技术是现在和未来发展的必然趋势,是发展的方向。
摘要：本文介绍了网页设计中常用的布局方法,重点介绍了DIV和CSS的应用规则,并结合实例探讨了DIV+CSS布局技术在网页设计中的应用。