您所在的位置： &
DIV CSS解决不规则文字排版问题
DIV CSS解决不规则文字排版问题
我们在网页设计中，会遇到许多意想不到的情况，不规则文字的排版就是其中之一了，这里向大家描述一下如何使用DIV CSS解决不规则文字排版问题。
网页设计时遇到不规则文字排版问题，通常通常情况下我们有两种选择，但是这两种方法都不是可靠的，遇到特殊的上网设备，更不能显示出来发挥它的作用。这里向大家介绍一下使用DIV 解决此问题。
DIV CSS解决不规则文字排版问题
我们在网页设计中，会遇到许多意想不到的情况，不规则文字排版就是其中之一了，我们该如何面对这样的排版要求呢？DIV CSS代码又该如何编写呢？
遇到这样的情况，通常情况下我们有两种选择：
1、用图片来制作，并应用热区制作链接，这样的方式可以很方便的解决问题，但对搜索引擎很不友好，它不知道你这里到底有什么。
2、用Flash来完成，还可以加上动感的特效，除了同样对搜索引擎不友好之外，还存在着用户是不是安装有flash播放插件的风险，以及浏览器对flash文件的屏蔽的问题。
这两种方法都不是可靠的，遇到特殊的上网设备，更不能显示出来发挥它的作用。
我们可以考虑用DIV CSS来完成它。主要的思路就是用不同的容器，将容器进行定位来实现。虽然这样做非常的烦杂，而且不利于后期的更新维护，但可以收到很大的效果：显示速度快，更有语义，适合多种上网设备，有利于SEO对搜索引擎更加友好等。
我们该如何制作不规则文字排版呢。我们可以首页定义一个容器，并设置一定的背景图片，在这个容器内，我们再加上不同的容器标签，如：h1、span、div、p等等。如果你的文字语义很明确，链接很重要，我们建议你直接用h1标签。
对h1标签，应用不同的样式，设置不同的margin以进行定位，必要的时候可以设置z-index属性改变其层叠结构。不断的调整和完善就可以完成了。
原文链接：/0707/css-927.html
【编辑推荐】
【责任编辑： TEL：（010）】
关于的更多文章
Angular.js 是一个MV*（Model-View-Whatever，不管是MVC或者MVVM
本次的专刊为大家提供了Oracle最新推出的Java SE 8详细的开发教程，从解读到探究Java 8最新
程序员的30岁，是个伤不起的现象。你不可能敲一辈子的
Hadoop Summit 2013 大会讲师 PPT 第二季重磅来袭！如
现在这天气到处都是高温，还是老老实实的呆在家里上网
本书阐述了为什么以及如何设计出简单易用的基于Web的软件，让用户单凭常识即可有效地使用它。主要内容包括：显性设计的概念、如
51CTO旗下网站微博、人人关键词应用的文字排版是怎么做到的？
就像这个应用一样，他文字排版是怎么做到的，有没有什么软件可以做到？要是你没有人人，可以在这里看到示图
按投票排序
如果只是自己玩玩，用d3.js可以做，例如：。我们为了提高计算效率，是自己写的。
标签云 有好多软件 建议楼主用标签云这个关键词试试~我记得processing语言是可以做出来的，不过具体哪些软件就不记得了~长春平面设计培训之平面设计技巧应用案例——文字排版的魅力
关键字：纯文字排版的魅力 文字排版技巧 文字排版实例 汉字排版艺术 文字排版艺术 文字排版欣赏 画册文字排版 包装文字排版 时尚风格文字排版 实用文字排版 画册文字如何排版需要知道更多设计技巧，请报名张伟高级平面设计培训班，40天完美提升！课程设置———————————————————————————————————————————————————张伟平面设计培训班之平面设计技巧应用案例——的魅力对于汉字，究竟应该以一种什么样的原则和原理来进行编排才能使字、句、段、篇看起来美观清晰呢？本人在实践中，有一些经验可以拿出来与大家商讨，我在进行汉字编排时一般遵循的流程是：理解——分类——粗排——精确细排——校对。 1、理解：在进行文字的编排之前，首先要理解文字的内容。我见过很多设计师只注重版式美现而不关注文字内容，把文字一拿到手就开始编排，从不考虑文字在说什么，他们的原则是文字一定要服从于版式需要。这是不正确的设计方法，对于一篇文案稿，如果我们不去理解它的表述内容，就很容易本末倒置。一个标题，究竟用什么字体？用多大字号？横排还是竖排？这些是由整体版面气质和文字表述的内容所共同决定的，而不是按我们的惯性思维理解，标题一定要大，要突出，要用粗壮的字体。我们要深刻理解文字到底在说些什么，才能为我们选择字体字号提供依据，才能让文字的视觉感受与表述内容保持统一，才能为我们选择合适的插图提供指导方向。当然这种理解不是表面性的理解，还是真正吃透它所表达的意思，有时一些文字的意义是指东道西的，表面上是说这件事，其实它真正想表现是却是另一个道理，这就需要设计师有较强的理解能力。 2、分类：分类也就是把我们理解的文字段分成几个层级，并为其分配相应的占用空间和大致的视觉位置。谁是主标题，谁是广告词，谁是副标题，谁是内文，内文的组成结构是怎样的，是否需要进行视觉归纳或者是内容归纳等等，把这些问题搞清楚了，我们就可以为把这些文字分类成几个层级，第一级是最重要和突出的，比如主标题、广告词、副标题等，第二级是对第一级的辅助说明或者是次于第一级的，比如内文和某些特别需要强调的电话号码等，第**是最次要的，比如跋、通联、页码、旁注等等，一般情况下分成三个层级就足够了，但有时会有一些很专业的技术图表和技术参数类的文本编排就另当别论了。需要特别说明的是，这种分类并不是绝对的，只是一个模糊、大概的基本轮廓，可以让我们了解到编排对象的在版面中的功能和意义。最后要做的就是为各个层级的文字内容分配视觉空间，如果有插图配合的话，应该同时考虑插图和文本的空间占用（在这个过程中，最容易出现的问题就是，很多设计师喜欢先把插图定位得很死，把空间都计算好了，在编排文字的时候发现文字的空间不够，这时只能到处找多余的空间把文字硬塞进去，或者牺牲文字的字号大小来妥协，最后的效果就是到处都很挤，到处都不合理，这些对于新手来说要特别注意，文本的容量和插图的容量一定要同时考虑，在有必要的时候一定要对插图的空间进行调整，不要舍不得，整体效果永远都要比局部的效果重要），这里的空间分配的原则就是：每个文本元素都一定要有相对独立的空间，要让它看起来本来就应该在那儿，那块空间本来就是为它而留下的，而不是让人感觉是没有地方放了硬塞在那儿的。这是一个考验设计师整体调控能力的过程，因为空间是固定不变的，而每个元素之间又是互动的，A元素的空间多一点就意味着另一个B元素的空间就会少一点，那么如何让其占用空间均衡合理，要需要从版面美感、视觉流程、表述内容、版面风格、阅读习惯等多方面去考虑，千万不要过早为它下定论，多实验几次才能找到最佳解决方案。 3、粗排：经历了前面的过程，设计师心中应该已经有了一个初步的构想，粗排的过程就是把这些构想视觉化，以形成一个基本的编排风格，这个过程仍然是一个创作的过程，是对前面提出的编排构想实践和检验的过程，主要是检验各个文本元素占用空间的情况是否合理，（这里要特别注意的一点是，现在已经是在做成品了，因此要随时把自已调整到做成品的状态上来，成品的实际有多大，有时在电脑上体现不出来的，要以实际的印刷经验来判断文本的大小是否合理，是否适合正常的阅读习惯）。粗排主要是针对以下几个方面来进行：A、对于内文，如果篇幅过长，应该考虑为其分栏，分栏的方式有两种：一种就是把整个篇幅平均分成几个相同容量的段块，另一种就是根据文本内容的结构，以自然段为基础进行分栏，也就是每一段分为一栏，这种分栏方式能产生比较灵活自由、错落有致的视觉风格，但不是所有的篇幅都可以这样来分，它只适合于自然段比较明显均衡，段落数量不多，各个段之间的文本容积相差不大的条件下才可以实现。分栏的另一个要注意的地方就是栏宽的确定，一般来说，15-25个字的栏宽视觉效果比较适舒，超长或超短都会引起阅读的不方便。B、字体的设置：字体的问题牵涉很广，由于篇幅有限，在这里我也只能简短介绍一些实践过程的经验与大家共勉。首先要明白的一点就是：不同的字体有着不同的性格和气质，也就是说字体是有生命的。许多设计师对使用字体很迷茫，不知道什么情况下该使用什么样的字体，其实这就是没有去真正关注字体性格的结果。现在电脑上的字库五花八门，基本上我们所需要的字体在里面都能找到，但似乎选择的余地越大情况却越糟糕，各种字体出现在不应该出现的场合已是司空见惯！所以我们要学会区分各种字体的适合范围，一个基本原则就是字体的气质与版面的气质是否吻合？比如说楷体，楷体是一种非常经典的字体，经过一千多年文明和无数书法大师的不断锤炼，已经非常成熟了，每一个字都经得起推敲，具有很强的文化气质，因此在做具有文化感和传统味的设计中可以使用。宋体也是一种历经几个朝代的字体，被前人们修饰得无可挑剔，端庄秀丽，有贵族气质，还有仿宋体，刚柔结合，精致细腻，很唯美的字体。黑体是一种现代字体，刚挺稳重，有力量感，很醒目，但稍嫌笨重粗糙，但后来发展出来的等线体却非常精致耐看，很有现代小资的感觉，低调却不粗俗，且自成一派。但有些字体在设计中却尽量少用或避免使用，比如文鼎的新字库里面的稀奇古怪的字体，非常粗俗，层次很低，然后就是综艺体、中行书、隶书之类的电脑字体，粗糙难看，气质很差。真正经得起推敲的几种字体是：宋体（标宋、书宋、大宋、中宋、仿宋、细仿宋）、黑体（中黑、平黑、细黑、大黑）、楷体（中楷、大楷、特楷）、等线体（中等线、细等线）、圆黑体（中圆、细圆、特圆），这些字体是一些标准的基础字体，虽然普通却很耐看，一般内文都使用这些字体。当然，也有一些未列入进来的好字体，比如方正繁秀丽体和汉鼎的繁黑变，我就觉得非常不错。好的字体要用好的表现方式，对于每一种字体的挑选，一定要根据版面传达的内容和气质进行对照选择，不要带有个人喜好，许多平常不用的基础字体要尝试着去用，这样能加深对字体的理解，还有就是参考好的设计作品，看他们是如何使用文字的。总是就是不要乱用，要有切实可行道理，最关键就是一定要有视觉美感。关于字体，还要补充一点，书法字体和手写字体是对字体过于雷同的一种好的解决方法，某些特别的版面上，使用这种很自我的字体能让版面产生灵气和个性。C、字号大小的确定。粗排过程中，每个层级的文本字号应该基本确定，这对于形象画册、书籍装帧设计来说尤为重要，因为这种多页的设计物需要在文字上有统一的视觉风格，每个层级的文本元素应该在不同的版面上保持相同或统一的视觉性格。字号的大小确定需要有三个依据：一是各个层级元素之间的对比关系，a应该比b大多少，c应该比b小多少，应该要把各个层级之间的轻重关系体现出来。二是版面整体比例关系，也就是让文字突出但不唐突，弱化但要可见。三是成品的视觉效果，这是最重要的，比如一段内文，在报纸广告上可能8号至10号就足够了，但在海报招贴上，因为阅读距离的不同，可能需要24号字以上才能看清楚，而在形象画册上，6号至8号字都能看得很清楚，10号字都已经感觉偏大了一点。所以根据不同的成品媒介考虑不同的字号大小是非常重要的，千万不能依赖电脑屏幕的显示效果做为最终依据，要经常培养对字号大小的敏感程度，在一个经验丰富的设计师眼里，8号字和9号字的区别是非常大的，它们代表着完全不同的表现力。总之一点，字号的大小是一种固定物理尺度，在设计中不能以单纯的感性观察作为确定依据，而要同时加入理性经验和成品概念来作为参考的依据。另外要注意的一点是字体的不同也可能对字号大小的造成视觉偏差，一般来说，字符的占用比较满的字体（如黑体）在同等字号情况下看起来偏大，反之（如楷体）则偏小，这些在不同字体混排时经常出现，需要对其进行视觉修正，一般可以加入正负0.1-0.2的修正值就可以解决。在编排时，字号的大小级数不能出现太多（除非你在刻意创造某些特殊视觉效果而需要进行混排），最好每个层级只使用一种字号大小，对于同一层级的不同隶属关系的文本，可以用字体进行区分，否则字号级数过多，将造成整个版面的杂乱无章。一般来说，第一层级的字号大小与第二层级的大小区别要比较大，而第二层级与第三层级的字号大小差距应该要小一点，这样可以清晰地体现出各个层级之间的区别。D、字距和行距的再设计：这个问题是很多设计师都忽略的问题，所以要在这里重点说一说。为什么说“字距和行距的再设计”而不是“字距和行距的调整”，因为这里面的变化如同中国古代的八卦阵，复杂多变，不同的字距和行距设定会产生完全不同的视觉风格，已经可以说成是一种“再设计”。看到过很多设计师在进行文字编排时，直接使用电脑默认的字距和行距进行排版，花了大量精力在字体和字号大小或者段落形状上做文章，却完全忽略或者不重视字距和行距的再设计，以至于最后总是不得要领，结果不尽人意。汉字是方块字，每个字的占位空间完全一样，所以编排中非常容易出现呆板、沉闷、粗糙的视觉效果，解决这个问题的法宝就是字距和行距的调整。如何让一段文字看起来精致、清晰可辨？不单单是字号大小的问题，而是每一个字、每一行字、每一段文本、每一篇章的上下左右的空间间隔距离是否合理。一般来说，字距的确定是由字体结构来决定的，因为每种字体对字符的占用空间是不一样的，比如楷体，结构比较自由灵活，对字符四边的占用率比较小，所以它所要求的“字距”也相对较小，字距太宽的话视觉效果就会散，阅读起来很吃力。而黑体和宋体则对四边的空间利用率很高，字符很满，因此它所需要的字距空间就比楷体要稍微大一点，才能让阅读者感觉舒适（如下图所示）。在正常情况下，电脑的默认字距都偏宽，应该适当把字距调小一点。而行距的设计，则最能体现一个文字篇章的气质，汉字的行距设定一定要比字距大（除非你纯粹在追求一种特殊效果），行距最小应该在字高的50%以上才会看起来舒适，才能让“行”的感觉出来。单个汉字在设计中是一个个“点”，汉字的编排就是把这些点连成我们需要的线、面、形体，让它为设计服务，至于是让它成为点还是线或者是面，就完全由字距和行距所决定，有时我们在做一些比较大气的版面时，为了寻求一种视觉张力，会把文字行距处理超常地宽或窄，以加强每行字在设计版面中的作用力，充当“节奏线”的概念。有时也可以夸张字距，让字距超常地宽，让文字在设计中起到“点”的作用。总之，或严谨传统，或反叛突破，字距和行距的再设计可以为版面提供更加灵活、富有感染力的表现形式，诸位多多试验就能体会其中奥妙。有一点需要补充的，不要牺牲可阅读性作为代价！E、对齐：汉字编排中的“对齐”是让人头痛的事情，有时为了让一个标点符号避开行首行尾，就要对整个段落进行大调整。对齐主要是指头尾对齐、段落对齐，一般来说，一段文字要想让它看来整齐划一，最好让标点不要在行头和行尾出现，这样可以保持文字段的完整性，当然调整起来是很吃力的，但就我的经验来说，有时候我为了对齐一行字，甚至会把所有的文字都打散了来重新进行微调。因为电脑的自动对齐命令是基于一种相同的定位数值，而不能考虑到不同字体和字号之间的视觉偏差，设计师就需要对这些视觉偏差进行修正。设计师要具有这种严谨的编排习惯，对每一个元素都要斤斤计较，要做到分毫不差，才能有完美的作品产生。F、气口的设置：汉字的编排不象英文，英文有上标下标，有单词之间的空隔，所以排列起来感觉很有节奏感和韵律感，汉字每个字之间都太规则，所以排列起来沉闷无趣，要打破这种局面，就要学会设置气口。所谓气口，就是能让大篇幅文本透气的空间，让阅读者有喘气的机会。一般来说，汉字编排中气口的设置在段前段后进行，气口的基本特征就是比正常的行距要大、与文字篇幅外围的大面积留白相连接、具有与空气对流相同原理的空白视觉通道。气口的设置根据设计的具体需要进行设置，篇幅小的时候一个气口就足够了，篇幅大而复杂时，则需要设置多个气口，尤其是抽象、枯燥的技术型文本块，由于层级关系复杂，更需要针对不同层级设计不同的气口，这样能缓和阅读的紧张感，让文本块看起来有节奏感和趣味性。要注意的是，气口的设置一定要在自然段或自然章节的前后进行，不要勉强拆分一个完整段来设置气口，这样会破坏文本本身的完整性。G、文本块的趣味性：汉字编排是很严谨的工作，但有时太严谨就会呆板，这时我们就要考虑文本块的趣味性，当然现在的电脑技术有很多的特殊效果可供我们选择的，比如首字下沉、文本阴影、文本绕图、任意形状的文本框等这些效果，就能让枯燥的文本块产生很好的趣味性。但做为设计师来说，不能一味依赖电脑提供的程序化的效果，很多时候我们需要独立创造一些有趣的编排效果，以体现设计的某种特别意图。比如让自然段之间有意识的错开、设置特殊的文本块的摆放角度、增加其它的可视化的效果、让文字同时具有图像的效果、颠覆传统的编排习惯等等，在设计的领域里，只有你敢想敢做，就一定会有出乎意料的收获！但不管何种趣味性的效果，最多同时使用两个，用得越多情况反而会越糟糕，要有把握的分寸，时时刻刻都要关注版面的整体美感，不要图一时之快而破坏整个版面，造成杂乱无章的结果。H、文本块的外围留空：文本块处理好了，放在哪儿？怎么放？这就牵涉到“外围留空”的问题。所谓“外围留空”，就是文本块或篇章本身之外的周围需要一定缓冲空间，以利于阅读轻松愉悦，就象是城市的的一栋漂亮的建筑，如果周围不足一米的地方就是其它乱七八糟的建筑，那么这栋建筑将会魅力尽失，而如果它的周围有大片草地，它的魅力才能完整地展现出来。文字编排也是同样的道理，如果一个经过严谨编排的文本块的四周全是挤得满满的图片、色块，那么这个文本块的美感就很难体现出来了，所以，在文本块的编排时，一定要在外围留有足够的缓冲空间。根据我的设计经验，一般比较舒适合理的留空，大致比例是：如果是从左向右阅读的文本块，那么它的左边边界到相邻元素之间的距离至少要保证3个以上完整字符的安全距离才能透气；如果左边相邻的是纸的边界，则一般需要6个字符以上的安全距离才能缓冲，否则就会有太“冲”和太“危险”的感觉。文本块的顶部与其它相邻元素的空间也就应该保持至少3个字符的安全距离，而且越多越好。文本块的右边和下边对空间的需求相对较小，一般保持1个字符以上的安全距离就可以了。当然这并不是绝对的数值，许多情况下这些规则是可以被打破的，我们在设计的过程中应该多进行这种视觉实验，多揣摩好的设计作品的文本外围留空是怎样的，提高自已对这方面的认识，以后就会慢慢掌握留空的方法。 4、精确细排：这个阶段是非常重要而且是必须的，汉字编排是很讲究精确计算的，严谨完美的编排一定来自于精确的计算，这点在日本的设计中体现得尤为突出（日本文字的编排规则与汉字一样）。这个计算过程就是精确化、清晰化的过程。要计算什么呢？在成品的习惯阅读距离内字的大小字号是否已经合理，各部分比例是否恰到好处，文本篇章在整个版面中是否和谐，各个层级的文字是否清晰明了，分栏的栏数和栏宽是否合理，各元素之间的距离是否安全得体，该对齐的部分是否已经分毫不差，字距行距看起来是否舒适，是否已经考虑过印刷成品裁切出血位后的距离，是否有需要进行视觉修正的部分，每个文本块的位置是否能完全确定下来等等问题，这些问题都需要经过复杂周密的调整和计算，有些需要通过我们的眼睛进行判断，有些需要借助经验，有些需要校验数值，所以这个过程马虎不行，尤其对于文本量非常大的设计项目，一个地方出错，可能牵涉到所有的版面都需要调整。 5、校对：虽然这是一个很老土的话题，但是对于商业设计这种讲究效率的行业来说，是必须要坚持的，因为有时我们无意间漏掉的几个字、几句话都可能对你已经精确编排好的版面造成极大影响，可能会浪费你很多的宝贵时间去重新调整，因此，还是校对一下心里踏实些，免得以后重复许多无用功！以下作品有整理发布需要知道更多设计技巧，请报名张伟高级平面设计培训班，40天完美提升！课程设置文字排版的魅力文字排版的魅力文字排版的魅力文字排版的魅力文字排版的魅力文字排版的魅力文字排版的魅力文字排版的魅力文字排版的魅力文字排版的魅力文字排版的魅力文字排版的魅力上海平面设计培训班 广州平面设计培训班 常州平面设计培训班 成都平面设计培训 广告设计培训班学平面设计有前途吗 学平面设计要多少钱 河南 平面设计高端培训品牌 平面设计培训精品班 广告设计师精英学校 平面设计速成班 张伟平面设计培训学校 文字排版 画册封面设计欣赏画册风格设计系列 文字排版 文字排版技巧需要知道更多设计技巧，请报名张伟高级平面设计培训班，40天完美提升！课程设置
&&&&&&&&&&你可能感兴趣的文章
该专题详细又系统的讲解了Word2003基础知识，将Word高手们的技巧手把手教给大家，灵活...
Word 是一款非常强大的文字处理和排版软件，是办公者必备的办公软件之一，通常我们会...
我一直在寻找一款软件能把图片上的文字抓出来，可是找了不少想什么Aqua Deskperience...
“Word无法启动转换器mswrd632.wpc”又一Word常见问题，也是许多使用Word办公软件朋友...
打开Word2007，出现错误提示： run-time error'91' object variable or with block va...}