京网站建设公司在做网站过程中总会遇到这种情况:网站设计效果很赞,网站特效很棒,非常漂亮而且逻辑性很强,但往往在很多影响网站整体形象的细节方面做的很不理想,就比如像网站中的文字样式和排版方式等都有可能影响网站整体形象!
网站中的文字放置的位置和文字大小、字体等对于网站整体表现来说至关重要!一般来说网站字体从美观性和兼容性考虑来说,大多数网站尽量应选择像微软雅黑等相对比较饱满的字体,当然在有字体使用版权的情况下可以使用一些更符合企业或产品特点的字体。这样能提高网站整体质量感和厚重感!
再一个就是网站文章内容的排版和字体大小了,一般来说,网站内容的字体排版是对网页最重要的了!网站内容大多数都是文字形式的体现,因此标题大小、字体、文字排版形式等对页面的美观程度非常重要!
那么网站中文字字体、文字间距、文字大小和段落空格等如何设计定义和排版才能符合大多数人的需求呢?网站内容文章是要居于网站左边还是右边?字体颜色如何设置呢?
网站建设过程中,一般情况下网站后台对于内容页的设置会有专门的编辑框用于上传内容,而这个编辑框本身定义的段落分格形式和默认字体等也一般是网站中一般被最多用到的!
很多人喜欢在编辑文章时跟在书本上的排版一样每次分段都要空两个字,但实际上因为互联网络形式的页面本身在空两个字符之后的局促性仍然没有办法消除掉,相反还是很局促。同样的,如果分段以空格的形式来表现,因为网络空间本身只需要滚轮滑动就可以有大量的位置,不会像书本一样需要翻页,因此空格来分段会显得网站页面更简洁大方!
而字体一般来说网站字体多用普通黑色字体,这样能尽量的符合用户习惯性的字体视觉,显得比较可靠和专业。当然还是要具体网站具体分析了。
小小的文字排版在网站建设中不过是一个小的不能再小的细节,可是,就是这样的细节还有的网站做的不够好,要知道网站上的每一个元素都将影响着用户的浏览体验,一篇质量上乘的文章因为排版的问题而让用户擦肩而过,或者一篇普通的文章可能因为文字排版符合用户体验,而获得用户欣赏认可都是极有可能的!
原文链接出自:http://www.bjjfsd.com/index_show_catid_19_id_634.html
于汉字的特殊性,在CSS网页布局中,中文排版有别于英文排版。排版是一个麻烦的问题,作为一个优秀的网页设计师和网页制作人员,掌握一些简单的中文排版技巧是不可或缺的。所以今天小编特意整理了一些简单实用的技巧,希望对大家有所帮助。
字体
我们可以使用css样式为网页中的文字设置字体、字号、颜色等样式属性。
body{font-family:"宋体";}
这里注意不要设置不常用的字体,因为如果用户本地电脑上如果没有安装你设置的字体,就会显示浏览器默认的字体。(因为用户是否可以看到你设置的字体样式取决于用户本地电脑上是否安装你设置的字体。)
现在一般网页喜欢设置“微软雅黑”,如下代码:
body{font-family:"Microsoft Yahei";}
或
body{font-family:"微软雅黑";}
字号、颜色
可以使用下面代码设置网页中文字的字号为12像素,并把字体颜色设置为#666(灰色):
body{font-size:12px;color:#666}
粗体
可以使用下面代码实现设置文字以粗体样式显示出来。
p span{font-weight:bold;}
斜体
以下代码可以实现文字以斜体样式在浏览器中显示:
p a{font-style:italic;}
<p>三年级时,我还是一个<a>胆小如鼠</a>的小女孩。</p>
下划线
有些情况下想为文字设置为下划线样式,这样可以在视觉上强调文字,可以使用下面代码来实现:
p a{text-decoration:underline;}
<p>三年级时,我还是一个<a>胆小如鼠</a>的小女孩。</p>
删除线
如果想在网页上设置删除线怎么办,这个样式在电商网站上常会见到:
上图中的原价上的删除线使用下面代码就可以实现:
.oldPrice{text-decoration:line-through;}
缩进
中文文字中的段前习惯空两个文字的空白,这个特殊的样式可以用下面代码来实现:
p{text-indent:2em;}
注意:2em的意思就是文字的2倍大小
行间距(行高)
这一小节我们来学习一下另一个在段落排版中起重要作用的行间距(行高)属性(line-height),如下代码实现设置段落行间距为1.5倍。
p{line-height:1.5em;}
中文字间距、字母间距
如果想在网页排版中设置文字间隔或者字母间隔就可以使用 letter-spacing 来实现,如下面代码:
h1{
letter-spacing:50px;
}
注意:这个样式使用在英文单词时,是设置字母与字母之间的间距。
如果我想设置英文单词之间的间距呢?可以使用 word-spacing 来实现。如下代码:
h1{
word-spacing:50px;
}
...
<h1>welcome to imooc!</h1>
对齐
想为块状元素中的文本、图片设置居中样式吗?可以使用text-align样式代码,如下代码可实现文本居中显示。
h1{
text-align:center;
}
<h1>了不起的盖茨比</h1>
同样可以设置居左:
h1{
text-align:left;
}
<h1>了不起的盖茨比</h1>
还可以设置居右:
h1{
text-align:right;
}
<h1>了不起的盖茨比</h1>
图文环绕
在css中有一个常见的图文环绕效果。实现方式主要是通过float标签,将图片左浮动,或者右浮动。其相邻的文字,就会环绕图片排列,代码和效果如下:
竖排文字
使用writing-mode实现。writing-mode属性有两个值lr-tb和tb-rl,前者是默认的左-右、上-下,后者是上-下、右-左。
比如:
p{
writing-mode: tb-rl;
}
可以结合direction排版。
首字下沉
伪对象:first-letter配合font-size、float可以制作首字下沉效果。
比如:
p:first-letter{
padding: 6px;
font-size: 32pt;
float: left;
}
汉字注音
如果我们想为汉字注音,就可以使用ruby标签和ruby-align属性来实现,比如:
<ruby>注音<rt style="font-size:11px;">zhuyin</rt></ruby>
然后通过ruby-align设置其对齐方式。
这是一个比较冷门的技巧,可能平时使用不多,但小编觉得不妨提供给大家预防不时之需。
以上就是小编要跟大家分享的CSS网页布局中文排版技巧,虽然很简单,但简单的过程中其实暗藏玄机,如果大家喜欢还请记得收藏哦~
家好,今天我们一起来探讨一下Banner的设计,在这一次的教程中我会介绍一些平时总结下来的可以让banner迅速达成效果的简单小窍门,如果你在平时有大量的banner设计工作,并且总觉得时间不够用,那么希望本次的教程可以帮助到你。
好了,那么我们进入正题。
首先让我们认识一下banner,平时大家在各种网站或者移动端的app里经常可以见到,印象里他们大都长这个样子:
当然了,这就是我们常说的banner,但其实banner还有几个远房表兄、同父异母什么的兄弟姐妹们,它们可能长这个样子:
恩……其实以上这些在广义上来说都可以归纳为Banner,就形状来说现在的banner也已经不再局限于从前大家所理解和看到的那些出现在固定广告位的长条形广告了,他可以是长的、方的、必要的时候也可以是其他什么乱七八糟的形状,总之,不管是侧边栏广告、焦点图、专题页的头图、我们都可以理解为是banner,在设计方法上,其实都是共通的。
如果要是分类的话其实可以大概分为两类:
1.“促使点击”
2.“渲染气氛”
第一种就是大家经常在各种大大小小的网站都能看到的广告banner或者焦点图,她们有大有小可长可短,但是他们共同的作用就是通过各种方式引导你去点击。
通常你在做这种类型的banner时,一般会是上图这个场面。
第二种大家通常可以在各种游戏网站,房地产网站,各种活动专题页中见到,也就是大家常说的头图,这种类型的banner通常并不是引导用户去触发点击,而是服务于内容,为整个页面做好气氛的渲染。
通常你在做这种类型的banner时,一般会是上图这个场面
说这么多,其实我是希望通过这种介绍和分类方式,让大家在拿到设计需求时可以确定一个正确的设计方向,降低设计成本,从而提高工作效率。
下面我们介绍几个设计小窍门,也许通过这些方法可以让你在最短的时间内有效的达成效果。
首先我们来说一下字体和字形,大家都知道我们从图形上解读信息的能力是要大于单纯的阅读文字,但是在banner的设计中,大多数情况下我们都是通过文字来了解信息,图片只是起到一个衬托的作用,在我自己平时做banner的时间分配里对字形的处理可能要占到百分之五十甚至更多的时间,所以今天我们重点来说一下这方面的处理技巧。
1.钢笔造字
钢笔造字是在做字形设计上一个比较讨巧的方法,但却又十分有效。对平时没有太多字形设计经验的同学来说非常适合的,只要你了解基本的字形设计规律(笔画的粗细,字体的重心等),那么此方法可以让你快速的让banner高大上起来,具体的设计方法大家可以移步字形设计大师@刘兵克老湿的设计教程:http://v.youku.com/v_show/id_XNDI4MDMwMTg4.html
2.笔画链接
当你没有时间完整的设计banner上字体的字形时,笔画链接未尝不是一种好的方法,在做笔画链接时只有合理的安排需要链接的笔画,做到不突兀,不影响易读性,那么都会出来一个比较好的视觉效果,在做笔画连接的时候我推荐大家使用一些笔画粗细比较统一的非衬线字体比方说雅黑、悦黑、幼圆等等。
3. 随“意”变形
顾名思义就是根据文字的具体含义来设计字形的一种方法,当上面介绍的两种技巧都让你感觉头大的时候不妨试试这种处理技巧,你只需要脑洞大开,了解文字的具体含义并用相应的图形在文字上加以体现就可以了,就酱简单!
4. 3D
如果要在banner中想突出文字,把文字做成3D效果可谓是最“粗暴”的一种解决方法,只要处理方法得当也可以达到很好的效果,如何处理3D这种细节问题这里就不提及了,网上有大堆大堆的教程可供参考。切记,处理3D文字的时配色是关键,稍不注意就会显得山寨和俗气。
好了,以上是一些在设计banner时可以用到的字形设计技巧,可能有童鞋要说我平时banner的设计工作很繁重,时间也很紧张,没有精力去做字形,或者由于版权的问题,在大多数情况下不得不使用那么几种字体,像这样的情况有没有好的办法让banner中的文字出效果呢。答案当然是有啦,下面就给大家介绍几个方法。看看如何在使用简单的默认字体的同时打破字体的沉默。
字体如何打破沉默——不破不立
看到没有,同样是简单的字体,只是打破了整段的文字,做单个字体的倾斜,整体看起来就活泼跳动了很多,或者可以做单个字体的叠加,凹凸效果同样可以让简单的默认字体变得跳跃起来。
如何打破字体的沉默——空间独立
说起这种方法我们就不得不提到banner中的空间关系,在设计banner时通常我们如果我们想突出文字,那么就要使文字和背景拉开空间,而为文字做一个简单的纯色底色不可谓不是一个省事的办法。
如何打破字体的沉默——斜能压正
文字必须横平竖直才是最好看的嘛?当然不是,在一些设计中一个倾斜的文字排版不仅可以打破默认字体的沉默还可以帮助整个画面的构图,真是百试不爽。
如何打破字体的沉默——长短粗细变换自如
通常我们在做一段文字的排版时,经常会根据段落中的关键字做相印的加粗或者高亮,这种方法看似简单,但是在实际操作的过程中稍有不当就会导致整段字体看起来凌乱不堪,其实只要设计的时候把文字看作图形,注意整个字体排版的走向是否有规律可循就容易很多。
OK,以上就是今天为大家总结的一些字形与字体的处理方法,希望对大家有所启发,在banenr的设计中还有很多种有效的技巧可以用到,如果你有什么特别的技巧也可以告诉我们。
作者:LipengBian 转自/uec.nq
更多视频教程学习请关注:视觉设计联盟公众号:shijueshejilianmeng,回复“教程”
*请认真填写需求信息,我们会在24小时内与您取得联系。