当前位置：首页 > 实用文档 > 其他范文> 基于表现与结构分离的网页布局实践

基于表现与结构分离的网页布局实践

时间：2023-04-16 07:49:49 其他范文收藏本文下载本文

基于表现与结构分离的网页布局实践（精选7篇）由网友“隐性文盲”投稿提供，这里小编给大家推荐一些基于表现与结构分离的网页布局实践，方便大家学习。

基于表现与结构分离的网页布局实践

篇1：基于表现与结构分离的网页布局实践

基于表现与结构分离的网页布局实践

闻立鸥

（北京财贸职业学院，北京101101）

摘要：表现与技术相分离来制作网页已经是一种必然趋势。可以在网页结构不变的情况下，通过修改样式表文件实现页面重构，变换网页的表现风格。不仅大大提高了页面的制作效率，而且提高了网站的维护效率。本文通过案例的制作，将表现与结构分离的网页布局实践过程与大家分享。

关键词：表现；结构；网页布局

作者简介：闻立鸥（1971-），女，副教授，主要从事计算机应用方面的研究。

一、引言

随着Web 2.0标准化设计理念的普及，DIV+CSS进行网页制作已经是必然趋势，网页制作人员应该顺应网络技术的发展，及时更新技术手段。学会通过HTML语言构建网页的语义化结构并尽可能优化，然后运用CSS样式表文件呈现网页的可视化效果，实现网页的表现与内容的分离。大大减少了代码冗余，提高网页制作效率，改善网页浏览质量。

二、内容与表现相分离技术简介

内容和表现相分离，是目前WEB2.0标准技术制作网页最基本的方法，也是CSS网页布局重要的目标之一。基本的制作流程是，先分析规划切割效果图，接下来使用可扩展的超文本标记语言搭建网页内容结构，然后利用样式表文件“还原”出与效果图一致的页面效果。如果要实现网页内容和外观样式的完全分离，应创建一个新的样式文件，然后以链入外部CSS样式表的方法将这个样式文件链接到网页文档中。这样就完全做到网站的维护人员可通过修改样式文件来改变页面风格，修改网页文件来改变内容，互不干扰。

三、表现与结构分离技术制作网站流程解析本案例为个人网站，包括首页和相关二级页面，首页效果图如下。所有页面布局整齐且风格统一。使用表现与结构分离技术制作流程如左图。

1. 利用XHTML

构建整体网页的'结构。

四、结语

采用结构与表现相分离技术制作网页，在“表格时代”是不可能实现的。如果要修改网页的外观风格，直接修改CSS样式文件代码即可，准确而快捷呈现效果图的显示效果。但是如果按照WEB标准更加专业更加规范设计网页，还需要熟练运用XHTML与CSS代码，加强实践，认真思考并尝试运用多种方法去解决实践中出现的问题。

参考文献：

[1]闻立鸥。网页制作实用教程[M].北京：清华大学出版社，.

[2]柯海鹏。任务驱动法在DIV+CSS网页布局技术中的教学探索[J].教师，，（22）。

[3] 关秀英。Flash CS4商业动画、片头与网站设计案例精解[M].北京：清华大学出版社，.

[4]闻立鸥。DIV+CSS之布局一行三列页面实证分析[J].教育教学论坛，，（22）。

篇2：网页设计的布局与排版论文

网页设计的布局与排版论文

摘要：计算机网页设计是企业网站建设的重点，对于企业形象的展示和用户对企业的第一印象有着非常重要的影响，应当对其进行科学合理地设计与安排，提高网页美观度和利用率。网页设计布局与排版应当遵循主次分明、图文搭配、整体风格统一以及疏密均匀等原则，计算机网页设计布局与排版方法主要包括基础风格确定、字体设置以及图形搭配等。常见的计算机网页设计布局包括T字型、口字型、POP型和同字型等，应当根据实际需要进行选择。

关键词：网页设计；布局与排版；图文搭配；主次分明

0、引言

网页设计是指专业人员和部门以企业希望向网站浏览者提供的信息为依据，对网站进行规划设计，包括网站页面的美化设计以及宣传方式的改进与完善。科学合理的网页设计能够将图片、文字、颜色等网页元素结合在一起，使用户体验更加完美的视觉效果，同时也为企业带来更多的客户[1]。布局与排版是计算机网页设计中的主要内容，也是影响整个网页设计效果的关键，应当对其进行详细地分析，不断提高网页设计水平。

1、计算机网页设计中的布局与排版原则

1.1整体风格统一

首先，整体布局安排要科学合理，不同的元素之间要互相搭配，整体风格一致，视觉上做到和谐统一，从而提升网页美观度。但是同时要注意，过于整齐划一的布局也会使网页风格显得死板，从而给人僵化的感觉，所以应当在保持整体风格统一的基础上，加入一些活泼轻松的色调与细节，从而提升网页设计的美感。

1.2主次分明

其次，计算机网页设计应当遵循主次突出和层次分明的原则，在对网页内容进行布局与排版的时候，应当注意将关键内容放在最显眼的位置，从而使用户在浏览网页时，能够首先看到关键信息，进而激发用户兴趣。同时，这也能使网页设计清晰明确、重点突出，提高网页设计水平。在对主要内容进行合理安排与放置之后，还应当对其他内容进行科学地安排，做到主次分明、错落有致、强调重点。在提高页面使用效率的同时，增加页面美观度，从而加深用户对企业的第一视觉印象。

1.3疏密均匀

此外，在计算机网页设计中，还应当遵循错落有致、疏密均匀的原则。应当对网页的各个部位进行科学合理地安排，避免出现有的部位过于拥挤，而有的部位过于疏松的情况。保证网页设计的美观度。同时，要注意对字间距与行间距进行科学合理的设计和安排，保持整体风格的清爽简洁，拥挤的字段会得网页显得逼仄，而过于疏松的字段也会影响网页美观度。最后，应当对色彩搭配和图形搭配进行科学合理的安排，黑白搭配表示简洁大方，圆形与方形进行搭配，活泼又不失庄重，合理的搭配可以提升视觉效果。

1.4图文搭配

在计算机网页设计中应当注意图形与文字的合理搭配，使整个页面更加生动有趣。图形与文字所占的大小与比重应当根据网页内容进行合理安排。通常，图形太多会使网页过于花哨，不够简洁，而文字太多又会使得页面过于沉闷、僵化，给人压迫感。所以应当对图形与文字进行较为合理的安排，根据网页要表达的内容以及相关侧重点，对文字版面与图形进行科学合理的安排，做到图文并茂，搭配合理，这样能有效提升网页设计的'美观度，使网页更加生动有趣。

2、计算机网页设计中布局与排版的主要方法

2.1确定网页整体风格

网页中所要展示的内容代表了一定的企业文化和企业氛围，包含了企业想要向用户传达的信息，所以网页风格应当与企业文化形成呼应，要能很好地代表企业氛围。所以在对网页进行设计之前，应当首先确定网页的整体风格，设计者应当对网站内容进行熟悉和了解，明确企业想要通过网页传达的信息，并且结合实际情况和设计需要来确定网页风格基调，再对网页进行设计和安排[2]。同时，要严格坚持简洁明了的设计原则，使用户能够一目了然地浏览网页信息，避免将网页设计得繁复和复杂，提高页面利用效率和美观度，激发用户的了解兴趣，从而加深对企业的印象。

2.2选取合适的色调

在确定基本的网页风格之后，应当对网页色调进行科学合理地选择。网页给人的第一印象往往由主色调决定，所以应当选择合适的主色调，通常主色调不宜过多，一两种即可，过多的主色调会给人眼花缭乱的感觉，不利于网页设计水平的提升。在计算机网页设计中，主色调一般不超过五种，且通常以一种主色调为主，选取其他能够搭配的色调为辅，从而提升网页的整体美观程度。

2.3设置合适的字体

在确定了整体风格，并且选取了合适的色调之后，应当对字体进行合理地设置，网页设计中的字体设置也应当坚持简洁的原则。一般字体类型不超过三种，并且要与图形和色彩进行合理搭配，字体大小也应当与周围版面搭配[3]。此外，文字不宜过多，以关键内容为主，从而使用户能够更快速地得到自己想要的信息。同时，要严格避免闪烁类文字的出现，它不仅影响整体页面的简洁大方，而且会给用户带来厌烦之感，所以要对网页字体进行科学合理的设置。

3、计算机网页设计中布局与排版的类型

3.1T字型结构

T字型结构是常用的网页设计结构，指标题处于页面上方并且居中，下方左侧为小标题，右侧为对应的内容，大体上呈现T字型，所以称之为T字型结构[4]。T字型结构是计算机页面设计中最常见的布局，具有风格简洁、主次分明等优点，而且页面结构十分清晰，用户能够很好地把握重点。但是也存在较为沉闷、不够灵活等缺点。另外，它对色彩和图形的搭配要求较高，如果细节不够完善，则会有强烈的乏味感，影响用户浏览体验。

3.2口字型

口字型结构，顾名思义，就是将最关键的内容放置在页面中间，使用户能够快速锁定关键信息。页面四周则是内容导航、索引以及新闻动态等内容，页面下方通常为热点时事、友情链接、通讯地址与联系方式等。口字型结构能够对版面进行更加高效且充分地利用，能够在页面上安排更多的信息，提高页面利用率，而且能够有效突出重点。但是，口字型结构也具有一定的缺陷，它包含的信息量过多，导致页面显得较为拥挤，不够简洁。口字型页面结构在国外网站设计中比较普遍，在国内网站中的使用率则比较低。它对色彩搭配、图形选择等都有着较高要求，如果搭配不合理，口字型网页的美观度会大大降低。

3.3POP布局

POP布局的重点就是将一张照片放在网页中心，这张照片往往代表了企业文化和优势，可以是企业高层领导的合影，也可以是企业优秀成果展示，或者是企业文化表现等，通常要具有美观和代表性强等特点。并在照片下方设置合适的左右移动按钮，动态展示不同的照片，而主菜单则会根据需要摆放在合适的位置。POP布局具有美观、大方、动态展示等优点，是高校站设计中常用的网页布局与排版方式，但是动态展示会在一定程度上拖慢网站的运行速度。

3.4同字型

同字型布局是指在计算机网页中，将标题栏放置在网页上方，内容不限定，可以是网站主题，也可以是广告，并且在标题栏旁边配备一些小标题。在网页中间，则是与标题相呼应的重要内容。将重要内容放置在网页中间能够有效地突出重点，便于用户快速了解网站关键信息。在网页的两边是网站的新闻与动态、管理人员及其联系方式、广告和公告通知等。同字型网页设计的特点在于，它将关键内容放置在页面中心，并且从上到下根据内容的重要性进行合理安排与区分，通常网页下面部分为空白，有时候会根据企业需要放置一些常规内容，比如网站的基础信息，网页设计者信息等。同字型结构的缺点在于，它对页面布局的要求十分高，由于内容量较大，如果安排不合理，则会显得十分拥挤。

4、结论

随着互联网技术的进步和网络信息技术的普及，大部分企业和公共部门都会设置自己的网站作为展示最新信息以及与用户沟通交流的途径，它在企业宣传推广等方面起着重要作用。计算机网页设计是网站建设中的关键内容，对其进行科学合理地布局与排版设计，能够有效提升页面美观度，并且能够更好地向用户传达重要信息。布局与排版方法包括基础风格的确定、字体的设置和色调的选取。常见的计算机网页设计布局与排版类型包括口字型、同字型、POP型和T字型，不同的布局与排版方式具有不同的优缺点，应当根据需要选择合适的布局与排版方法。

篇3：成都武侯祠园林艺术与结构布局论文

三国时期能够保留至今的园林并不多，成都武侯祠因而在我国古典园林中也有着重要的地位，成都武侯祠是为了纪念蜀国丞相诸葛亮而建造的一座祀庙，由于诸葛亮这一人物独特的历史地位和广为人知的影响，因而成都武侯祠背后的文化意涵一直以来都掩盖住了其本身的园林艺术特色。事实上，成都武侯祠的园林艺术特别是结构布局方面的特色也是我国古典园林艺术中非常有代表性的。武侯祠本身的建造目的是为了纪念蜀国丞相诸葛亮以及蜀国皇帝刘备等蜀国英雄的，属于祀庙园林的范畴，但是在后来的改建变迁中，也不断融合了新的园林艺术形式，吸纳了祀庙园林的特色和川西园林的一些艺术形式，成为一座包容性很强的综合性园林。

一、成都武侯祠概述

成都武侯祠始建于223年，距今已有一千多年的历史，期间多有损毁，经过几次较大的变迁和修缮保留至今。成都武侯祠是为了纪念三国时期著名的历史人物诸葛亮而修建的，诸葛亮身为蜀国丞相，一生为蜀国鞠躬尽瘁，历史影响深远，而且成都武侯祠君臣合祀的形式在我国历史上也十分罕见。诸葛亮病逝于234年，死后被追谥为“忠武侯”，由于诸葛亮在我国民间有着广泛的影响力，成都武侯祠因而也是成都的一个重要景点，自古以来便有许多人参观游览。据《三国志》记载，223年刘备病故后葬于惠陵，并且修建了汉昭烈庙，而成都武侯祠最早便与汉昭烈庙相邻，后在南北朝时期被合并在一起，目前成都武侯祠的主体建筑修建于1672年，现为我国AAAA级旅游景区，也是我国最大的三国遗迹博物馆。成都武侯祠在一千多年的变迁中，其结构布局和园林艺术风格也多经改变，因而从园林艺术的角度来分析，成都武侯祠的园林艺术风格是在历朝历代修缮变迁中不断融合而成的园林艺术[1]22。同时成都武侯祠作为川西园林的一个重要代表，在其修缮变迁中，川西园林风格的影响起到了重要的作用，从当前成都武侯祠的面貌中也可以看到许多川西园林的影子。并且在1672年的修缮中，将刘备与诸葛亮合祀的格局打破，分为了汉昭烈殿和武侯祠殿，这一格局保留至今。因而我们当前所看到的成都武侯祠面貌，其主体沿承主要是修建于清朝康熙年间的，其园林艺术特色和结构布局也受到当时园林建造的一些影响。

二、园林艺术与结构布局鉴赏

1.古朴典雅的园林风格。从整体的园林艺术风格上来看，成都武侯祠的园林艺术风格是古朴和典雅的，园林文化以“三国文化”为主要脉络，这也是将之称为“三国圣地”的一个重要原因。成都武侯祠在园林艺术中有着浓厚的古朴和典雅气息，追求诗情画意般的意境，既有规则布局又有自然布局，以静远堂后的荷塘为分界线，荷塘西北有船舫和桂荷楼，桂荷楼是水景区域的最高点，也是欣赏全部水景的最佳地点。从桂荷楼上放眼望去，整个荷塘景色尽收眼底，而船舫则采用悬山样式建造，与荷塘交相辉映，十分自然地融为一体。荷塘的水景部分散发着古朴典雅的气息，并有着浓厚的文人底蕴。唐代杜甫曾居住于成都，多次游览成都武侯祠，并留下许多传世佳作，杜甫诗作中对于武侯祠的描绘在后来的修缮改建中也起到了很大影响。因而成都武侯祠园林艺术风格中古朴典雅的气息与杜甫诗作文化的影响也不无关系。在武侯祠的密林中修建有三座独立庭院，分别是听鹂馆、听鹂苑与和畅园，这三座独立庭院中有着浓厚的川西园林特色，建筑形式古朴简约，隐藏在密林中，由小路连通，正可谓“曲径通幽”。从我国的传统园林文化中可以看出，这种建筑形式背后的文化意涵也有“藏而不漏”、“君子守拙”之意。这三座独立的小院在建筑风格上也别具一格，将自然元素有效地利用了起来，建筑布局也并非完全对称，而是以融合外界自然事物的方式改变了传统的对称，并不追究繁琐和奢华，以简约、古朴、自然为主基调[2]3。

2.具有人文气息的植物景观。成都武侯祠的植物景观也是其艺术风格中重要的组成部分，正如杜甫诗中所言“丞相祠堂何处寻，锦官城外柏森森”，柏树便是武侯祠中主要的植物景观。柏树在我国园林文化中有着独特的地位，柏树常被种植于纪念性园林中，在我国现代的一些烈士陵园中也多有种植柏树，以示对先人的怀念和祭奠。同时，柏树在我国传统文化中还有着其他的含义，柏树被看做君子的象征，而武侯祠中柏树景观的形成一方面源自杜甫诗作文化的影响，另一方面也是基于柏树在我国传统文化中的独特地位。成都武侯祠中种植的植物景观非常多，以柏树为主，辅以榕树、松树、喜树、香樟等常绿乔木，并且还种植有大量的灌木，如丁香、宝珠香、六月雪等等，地被则以麦冬为主。在此之外，武侯祠中另一个重要的植物景观便是竹，竹同柏树一样，在我国传统文化中也是君子形象的代表，武侯祠中种植的竹种类很多，有棕竹、毛竹、文竹、紫竹等等，数量超过一万根，分布在溪畔、江岸等各个地方，形成了一种古朴典雅的独特景色[3]37。正如诸葛亮所说“非宁静无以致远，非淡泊无以明志”，竹这一意象不仅符合诸葛亮的形象和品质，也符合我国文人雅士的一种文化价值取向。从中也可以看出，成都武侯祠在植物种植选择方面并非是无意的，而是通过自觉的人为选择，多年来形成的一种具有深厚人文气息的植物景观。这种植物景观与武侯祠本身的建筑文化风格也十分协调，充分烘托出了建筑古朴典雅的风格，并且也给人以更多的文化意涵。

3.富有层次的空间处理。武侯祠的主要建筑材料为木材，开敞式、封闭式、楼停式等各种建筑形式错落其间，园中的建筑风格也并不统一，祭祀殿以庄严肃穆为主，而其他景致院落部分则以古朴典雅为主。在刘备殿西侧的碧草园中有一个水池，水池中心处建有鸳鸯亭，通过廊桥连接，构成“品”字形，这种庭院格局就形成了多层次的立体空间结构，并且其他院落也呈散落式分布，这些院落又与武侯祠的整体布局形成了空间层次结构。各个院落独自构成一个封闭的小区域，各自之间又相互连通，没有破坏武侯祠的整体格局，而又将院落建筑风格与整体建筑风格相融合。如荷花池、香叶轩、爱树山房、三顾园等等，在层次结构上十分丰富，巧妙地进行了空间处理，形成了立体感很强的空间结构。因而整体上而言，院落之间的封闭与开放在空间处理上就形成了统一，并且辅以树木和亭宇，保持了空间结构的完整性。各自封闭院落之间也有着一些重叠之处，走廊和花墙成为院落间相互渗透的关键点，通过这种渗透，使得独立封闭的小园相互融合，空间上的处理与层次丰富更加有机地统一在一起[4]28。这也使得游客在游览武侯祠的过程中会产生一种空间视觉上的错觉，形成一种独有的美感，置身其中能够领略到各个小园中曲折蜿蜒的独特景致。刘备殿较为宽敞，大气庄严，十分肃穆，而其他独立院落的风格就与刘备殿形成了鲜明的对比，不同的建筑风格在武侯祠中实现了统一。在这之中，空间上的巧妙处理与丰富的.层次结构，就是融合这两种建筑风格的重要部分，正是在这种过渡效应下，二者的融合才更加协调和自然。

4.中轴线对称的整体布局。以中轴线为分界，两端对称的布局结构是我国古典园林中常用的布局方式，在成都武侯祠的整体结构布局中也是如此，武侯祠中的主体建筑分布在一条南北中轴线上，分别为诸葛亮殿、过厅、刘备殿、二门、大门，其中大门是武侯祠的入口处。在中轴线上的建筑中，刘备殿和诸葛亮殿是主体，这两座建筑以中轴线为基准，分布在整个武侯祠的中心处，两座大殿建筑风格十分庄严肃穆，刘备殿更加宽敞、大气，诸葛亮殿则更为紧凑。从大门处一直到最后的诸葛亮殿构成了一条完整的中轴线，中轴线两端散布着众多独立的小院落。这种布局方式是我国古典建筑中常用的方式，在川西园林中也十分具有代表性。在康熙年间对成都武侯祠的修缮中，将原本合祀一殿的诸葛亮与刘备分开，并且刻意将刘备殿修得更加宽敞，放在诸葛亮殿前，以此体现君尊臣卑的思想。但是事实上，从诸葛亮殿的结构形式和其他院落的分布来看，诸葛亮殿依然是武侯祠中的主体建筑，依照我国传统古典园林建筑中的思想，中轴线上位置最后的大殿并不是主体建筑，主体建筑应当在前或者在中间部分。武侯祠中的刘备殿位于中轴线最中间部位，大门、二门在前，过厅、诸葛亮殿在后。但是事实上，诸葛亮的名望和影响很大，并且武侯祠的建造目的也是为了纪念诸葛亮，因而虽然在清朝康熙年间被人为地进行调整过，但是依然无法改变诸葛亮殿的主体建筑位置，这一影响并不仅仅是文化因素造成的，从其建筑的后续修缮中，也能够看到这一点。

参考文献

[1]张俊峰.儒家思想对四川名人纪念园林植物选择的影响[J].四川建筑,（4）.

[2]张丽君.成都武侯祠园林特色赏析[J].四川文物,（4）.

[3]刘金梁.浅析川西历史名人纪念园的造园艺术[J].内江师范学院学报,（4）.

[4]刘庭风.巴蜀园林欣赏（二）武侯祠[J].园林,（2）.

篇4：公司治理结构与股价表现

投资者呼吁更为透明和有效的公司结构，他们的信心水平与公司的结构改革进度保持正相关，同时公司治理与股价也表现为正相关

石油巨头荷兰皇家/壳牌石油表示可能将英国和荷兰的董事会合二为一，此举是公司精简管理结构的一个重要步骤，8月13日，这家世界第三大石油巨头表示将在11月出台一个公司重组计划，并且在的股东大会后实施所有通过的计划。

由于年初宣布石油储备量减少，投资者曾一度对该公司热情骤降，因此公司希望通过这次的企业重组能使投资者恢复信心。一般来说，良好的公司治理往往与股票价格表现会成正相关关系。

信用评级被调低

壳牌今年四次宣布调低其先前公布的已探明油气储量，这是对投资者信心的重大打击。今年1月以来，公司已总共调低已探明石油储量43.5亿桶，即22%。

那么壳牌宣布调低油气储量后，投资市场是如何回应的呢?

在壳牌宣布削减已探明油气储量20%的那天，标准普尔和穆迪在1月9日同时重新评定了壳牌公司的信用等级。

到了4月9日，标准普尔将荷兰皇家/壳牌石油的长期信用评级从AAA降至AA+，并且表示可能会继续降级。这一举措正是在壳牌4个月内数次宣布调低已探明石油储量后实施的。

标准普尔之所以降低壳牌的信

用等级，是因为壳牌宣布削减已探明油气储量，并公布公司以往账务管理审计报告后，让标准普尔认为，壳牌公司的治理结构“持续薄弱”，并“违反美国证券交易委员会规则”，

结构改革提升股价

在投资者要求壳牌对庞大的管理结构进行调整的呼声日益高涨之际，公司在上星期向媒体表示它将考虑精简董事会结构，改变现在的双董事会结构。

事实上，继1月的危机之后，公司一直处于投资者的压力之下。许多投资者指责壳牌公司缺乏有效的公司治理结构。

不过，公司新的管理团队，由董事长JeroenvanderVeer领导的团队，已经逐渐通过改善决策制定过程和明确权责范围挽回了一部分投资者的信心。现在壳牌公司的股票继1月大跌后已经缓慢回升。

继壳牌宣布其改革计划之后，市场进一步认为，壳牌的重组方案是公司走上正确道路的第一步。同一天有消息传出，在伦敦上市的壳牌公司股票在下午交易中上涨0.9%至410便士，在阿姆斯特丹的荷兰皇家公司的股票上涨1.5%至43.35欧元。

公司治理与股价

就像我们一直提到的那样，股价是公司状况的晴雨表，是观测公司运营情况的参考指标。

这一点从壳牌公司的例子中可见一斑。投资者呼吁更为透明和有效的公司结构，他们的信心水平与公司的结构改革进度保持正相关，同时公司治理与股价也表现为正相关。良好的公司治理包括制度规则、独立性、透明度、公正性、责任感等要素。

良好的公司治理结构和独立董事制度，包括投资者关系管理，常伴之以较好的股价表现，同时，这些公司的再融资也较为顺利。过去统计数据说明，公司治理好的那些公司，其股本回报率高出平均值10.3个百分点，股价上涨幅度超出平均值140个百分点。

不过在中国股票市场上目前可能还并不奏效，中国市场的股价指数还不能完全正确地反映公司的运营状况。

篇5：网站建设中网页布局与颜色运用基本准则

网页布局与颜色运用的基本准则

在网页设计的众多环节中，页面布局、颜色搭配是最为重要的环节之一，接下来，我们将通过五条准则来告诉您如何在布局、颜色方面让您的网页看起来更舒适、更美观。

首先，让我们来讲讲有关页面的布局。

准则一：有太多的条条框框会对你的健康产生不好的影响

有一名设计师说当他或她在页面设计时开始使用一些条条框框以及一些准则的时候就意味着他已经成为设计师了。

当你自己观察你的页面并意识到有必要去做些更有吸引力和创造力的东西来摆脱你所刚做的一些烦人的作品时，或是决定要抛弃一些以前所遵循的准则时，说明你的创造力已经脱离限制了。

在你使用那些存放在你软件中的条框钱，得先明白这点，做这件事得适当些。任何事一旦过了头就不太妙了。当然了，合理使用条框和分割线是亮出重要信息的好方法。但如果你在所有页面都用上，或是把太多的内容放在一个框里面，重要信息就会淹没在这些拥挤的文字中。

准则二：别把页面一分为二

在创新过程中最好把你的文档分成三个部分，

然后将那些重要的对象：比如标题，资料，放在顶上或是第三部分的底部。

现在我们来谈谈颜色。

准则三：颜色对比度越强可读性越强

任何一名设计师都明白这点，文字和背景有足够的对比可以让文字更容易阅读。通常黑色字就会用在比较明亮的背景上。反过来也一样

尽管在深色背景上使用亮些的字可以让文字容易阅读些，但这个手法应该尽量保守使用。事实上已经证实了，在深色背景上阅读对比度较大的文字会让眼睛非常疲劳。

准则四：珍惜使用的颜色

为了带来视觉上效果，设计师经常选择多个颜色来做设计。但在每个地方都用到不同的颜色也会降低它的视觉效果。基本原则：为把视觉效果最大化，把颜色充分利用在标题上，并把最重要的文字写在标题上。

准则五：不要使用互补色

以一个颜色为基点，可以在色盘的另一头找到它的互补色。举例来说，蓝色的互补色在色盘中是橘色。当这两个颜色贴边的时候，互补色会让我们的眼睛非常不舒服，因为这时我们无法同时聚焦在这两个颜色之上。再顺便补充一下，互补色在一起的时候会给人一种震动的感觉。

本文的英文原文地址为：www.phuketsolution.com/web-design-article/basic-rules-on-page-layout-and-color.html

篇6：最大限度的分离table的样式与结构

用table布局,相信大家都知道这是前端很诟病的事.但从HTML标签角度来看table标签,它的功能强大也是毋庸置疑的, 不然, 它也不会曾主导网站布局模式数年(甚至于现在仍有N多整站用table布局的网站). 但CSS+XHTML的兴起,使很多人开始妖魔化table这一标签,甚至以页面中是否有table来评判页面质量,这是不对的. table也有它存在的作用,很多页面功能(比如数据表格类,表单对齐等)用table实现远比用div实现起来简单明了.当然,本文不是为table平反的, 我只是想告诉大家如何最大限度的分离table的样式与结构.

分离样式,当然离不开CSS,而对于table标签,还有更多私有HTML属性可以利用.比如,thead,tr,th,td,tbody,tfoot,colgroup,scope.而本文正是利用这些属性,把样式从table中分离出来.

请看下图:

这是一个有6种背景色的table,如果按常规的table定义,想必大家都知道这个表格写出来该有多麻烦,你得一个个单元格的去加样式,加属性.其实,上面的效果完全可以有着很明了简洁的结构,也可以不通过修改html页面来改变它的样式.

HTML代码: