网页高手之浅谈设计中的文字

 更新时间:2016年9月20日 19:03  点击:1646

  如今,互联网越来越走近我们的生活,网上冲浪也渐渐成为我们生活不可缺少的一部分。网络世界五彩缤纷,涌现出大量优秀精美的网页。大量网络信息的呈现,无非就是通过文本、图像、Flash动画等,其中,文本是网页中最为重要的设计元素。对于网页设计初学者而言,了解和掌握网页设计中的文字排版设计就显得尤为重要,下面笔者想谈谈一己之见。

  文字的格式化

  1.字号、字体、行距

  字号大小可以用不同的方式来计算,例如磅(Point)或像素(Pixel)。因为以像素技术为基础单位打印时需要转换为磅,所以,建议采用磅为单位。

  最适合于网页正文显示的字体大小为12磅左右,现在很多的综合性站点,由于在一个页面中需要安排的内容较多,通常采用9磅的字号。较大的字体可用于标题或其他需要强调的地方,小一些的字体可以用于页脚和辅助信息。需要注意的是,小字号容易产生整体感和精致感,但可读性较差。

  网页设计者可以用字体来更充分地体现设计中要表达的情感。字体选择是一种感性、直观的行为。但是,无论选择什么字体,都要依据网页的总体设想和浏览者的需要。例如:粗体字强壮有力,有男性特点,适合机械、建筑业等内容;细体字高雅细致,有女性特点,更适合服装、化妆品、食品等行业的内容。在同一页面中,字体种类少,版面雅致,有稳定感;字体种类多,则版面活跃,丰富多彩。关键是如何根据页面内容来掌握这个比例关系。

  从加强平台无关性的角度来考虑,正文内容最好采用缺省字体。因为浏览器是用本地机器上的字库显示页面内容的。作为网页设计者必须考虑到大多数浏览者的机器里只装有三种字体类型及一些相应的特定字体。而你指定的字体在浏览者的机器里并不一定能够找到,这给网页设计带来很大的局限。解决问题的办法是:在确有必要使用特殊字体的地方,可以将文字制成图像,然后插入页面中。

  行距的变化也会对文本的可读性产生很大影响。一般情况下,接近字体尺寸的行距设置比较适合正文。行距的常规比例为10:12,即用字10点,则行距12点。这主要是出于以下考虑:适当的行距会形成一条明显的水平空白带,以引导浏览者的目光,而行距过宽会使一行文字失去较好的延续性。

  除了对于可读性的影响,行距本身也是具有很强表现力的设计语言,为了加强版式的装饰效果,可以有意识地加宽或缩窄行距,体现独特的审美意趣。例如,加宽行距可以体现轻松、舒展的情绪,应用于娱乐性、抒情性的内容恰如其分。另外,通过精心安排,使宽、窄行距并存,可增强版面的空间层次与弹性,表现出独到的匠心。

  行距可以用行高(line-height)属性来设置,建议以磅或默认行高的百分数为单位。例如:{line-height:20pt}、{line-height:150%}。

  文字的整体编排

  页面里的正文部分是由许多单个文字经过编排组成的群体,要充分发挥这个群体形状在版面整体布局中的作用。从艺术的角度可以将字体本身看成是一种艺术形式,它在个性和情感方面对人们有着很大影响。在网页设计中,字体的处理与颜色、版式、图形等其他设计元素的处理一样非常关键。从某种意义上来讲,所有的设计元素都可以理解为图形。

  1.文字的图形化

  字体具有两方面的作用:一是实现字意与语义的功能,二是美学效应。所谓文字的图形化,即是强调它的美学效应,把记号性的文字作为图形元素来表现,同时又强化了原有的功能。作为网页设计者,既可以按照常规的方式来设置字体,也可以对字体进行艺术化的设计。无论怎样,一切都应围绕如何更出色地实现自己的设计目标。

  将文字图形化、意象化,以更富创意的形式表达出深层的设计思想,能够克服网页的单调与平淡,从而打动人心。

  2.文字的叠置

  文字与图像之间或文字与文字之间在经过叠置后,能够产生空间感、跳跃感、透明感、杂音感和叙事感,从而成为页面中活跃的、令人注目的元素。虽然叠置手法影响了文字的可读性,但是能造成页面独特的视觉效果。这种不追求易读,而刻意追求“杂音”的表现手法,体现了一种艺术思潮。因而,它不仅大量运用于传统的版式设计,在网页设计中也被
广泛采用。

  3.标题与正文

  在进行标题与正文的编排时,可先考虑将正文作双栏、三栏或四栏的编排,再进行标题的置入。将正文分栏,是为了求取页面的空间与弹性,避免通栏的呆板以及标题插入方式的单一性。标题虽是整段或整篇文章的标题,但不一定千篇一律地置于段首之上。可作居中、横向、竖向或边置等编排处理,甚至可以直接插入字群中,以新颖的版式来打破旧有的规律。

  4.文字编排的四种基本形式

  页面里的正文部分是由许多单个文字经过编排组成的群体,要充分发挥这个群体形状在版面整体布局中的作用。

  两端均齐:文字从左端到右端的长度均齐,字群形成方方正正的面,显得端正、严谨、美观。Web网页配色方案

一、红色的色感温暖,性格刚烈而外向,是一种对人刺激性很强的色。红色容易引起人的注意,也容易使人兴奋、激动、紧张、冲动、还是一种容易造成人视觉疲劳的色。

1. 在红色中加入少量的黄,会使其热力强盛,趋于躁动、不安。

2. 在红色中加入少量的蓝,会使其热性减弱,趋于文雅、柔和。

3. 在红色中加入少量的黑,会使其性格变的沉稳,趋于厚重、朴实。

4. 在红中加入少量的白,会使其性格变的温柔,趋于含蓄、羞涩、娇嫩。

二、黄色的性格冷漠、高傲、敏感、具有扩张和不安宁的视觉印象。黄色是各种色彩中,最为娇气的一种色。只要在纯黄色中混入少量的其它色,其色相感和色性格均会发生较大程度的变化。

1. 在黄色中加入少量的蓝,会使其转化为一种鲜嫩的绿色。其高傲的性格也随之消失,趋于一种平和、潮润的感觉。

2. 在黄色中加入少量的红,则具有明显的橙色感觉,其性格也会从冷漠、高傲转化为一种有分寸感的热情、温暖。

3. 在黄色中加入少量的黑,其色感和色性变化最大,成为一种具有明显橄榄绿的复色印象。其色性也变的成熟、随和。

4. 在黄色中加入少量的白,其色感变的柔和,其性格中的冷漠、高傲被淡化,趋于含蓄,易于接近。

三、蓝色的色感冷嘲热讽,性格朴实而内向,是一种有助于人头脑冷嘲热讽静的色。蓝色的朴实、内向性格,常为那些性格活跃、具有较强扩张力的色彩,提供一个深远、广埔、平静的空间,成为衬托活跃色彩的友善而谦虚的朋友。蓝色还是一种在淡化后仍然似能保持较强个性的色。如果在蓝色中分别加入少量的红、黄、黑、橙、白等色,均不会对蓝色的性格构成较明显的影响力。

1. 如果在蓝色中黄的成份较多,其性格趋于甜美、亮丽、芳香。

2. 在蓝色中混入小量的白,可使橙色的知觉趋于焦躁、无力。

四、绿色是具有黄色和蓝色两种成份的色。在绿色中,将黄色的扩张感和蓝色的收缩感相中和,将黄色的温暖感与蓝色的寒冷感相抵消。这样使得绿色的性格最为平和、安稳。是一种柔顺、恬静、潢足、优美的色。

1. 在绿色中黄的成份较多时,其性格就趋于活泼、友善,具有幼稚性。

2. 在绿色中加入少量的黑,其性格就趋于庄重、老练、成熟。

3. 在绿色中加入少量的白,其性格就趋于洁净、清爽、鲜嫩。

五、紫色的明度在有彩色的色料中是最低的。紫色的低明度给人一种沉闷、神秘的感觉。

1. 在紫色中红的成份较多时,其知觉具有压抑感、威胁感。

2. 在紫色中加入少量的黑,其感觉就趋于沉闷、伤感、恐怖。

3. 在紫色中加入白,可使紫色沉闷的性格消失,变得优雅、娇气,并充满女性的魅力。

六、白色的色感光明,性格朴实、纯洁、快乐。白色具有圣洁的不容侵犯性。如果在白色中加入其它任何色,都会影响其纯洁性,使其性格变的含蓄。

1. 在白色中混入少量的红,就成为淡淡的粉色,鲜嫩而充满诱惑。

2. 在白色中混入少量的黄,则成为一种乳黄色,给人一种香腻的印象。

3. 在白色中混入少量的蓝,给人感觉清冷、洁净。

4. 在白色中混入少量的橙,有一种干燥的气氛。

5. 在白色中混入少量的绿,给人一种稚嫩、柔和的感觉。

6. 在白色中混入少量的紫,可诱导人联想到淡淡的芳香。

明白了配色方案,在具体操作的时候少不了会用到:

安全色谱

Snow 255 250 250 #FFFAFA
GhostWhite 248 248 255 #F8F8FF
WhiteSmoke 245 245 245 #F5F5F5
<

  一个网站要想成功注册,它起码应具备两个条件,一是网站本身要有较好的内容和设计,二是网站没有作弊行为。这里所谓的“作弊”,是指采用一些特殊的、有悖常规的网页设计手法,以期提高网站排名的行为。如何设计好网站,相关的资料很多,本文就不废话了。这里主要谈谈后者,即在提高网站排名的同时,如何避免被搜索引擎视为作弊而拒绝注册。 那么,在搜索引擎看来,哪些行为算作弊呢?这里罗列了一下,从中你可看到,现在有些人还视为“密技”的东西,其实已经过时了。 

  堆砌页面关键字:为了增加某个词汇在网页上的出现频率,而故意重复它。这是有人常用的花招,不过,现在很多搜索引擎都能识破它。它们通过统计网页单词总数,判断某个单词出现的比例是否正常。一旦超过“内定标准”,就对你的网页说“ByeBye”了。  

  放置隐形文本:所谓的“鬼页法”。为了增加关键字数量,网页中放一段与背景颜色相同的、包含密集关键字的文本,访客看不到,可搜索引擎却能找到,过去一度还真能提高网站排名,但现在,主要搜索引擎都能识别出来,照样玩不通了。  

  安插微型文本:与“鬼页法”相似,只是文本更些?⒏?分散、更隐蔽。但是,对于敏感的搜索引擎来说,仍然是枉费心机。  

  网页重定向:使用META刷新标记、CGI程序、Java、Javas cript或其它技术,当用户点击一个链接时,自动跳到另一个网页。有人正是用这种方法,欺骗人们进入并不想去的地方。因此,有些搜索引擎(如Infoseek),对此类网页也很反感,一般不予登记。
 
  滥用Meta标记关键字:有人为增加关键字的出现次数,在语句中,重复关键字,或者加入与网站内容毫不相关的热门词汇。这种作弊行为,大部分搜索引擎也能识破。  

  滥用门户网页:门户网页(也称“桥页”),是指为了获得好的排名,而专门针对各搜索引擎排序算法设计的网页。尽管今天,多数搜索引擎并不反对这种作法。但俗话说:“物极必反。”建立太多具有相近关键字的门户网页,会招致搜索引擎的反感而无法成功注册。  

  连续注册:有人为加大保险系数,在一天之内,将一个网页重复提交给同一个搜索引擎,其实,这种作法适得其反。
 
  重复注册:有人以为,将一个网页简单复制成多个网页,然后,给它们安上不同的名字,并分别予以注册,会增大访问量,结果,搜索引擎会认为你在滥用它,而拒绝登记你的网站。

  偷换网页:是指一个网页成功注册并获得较好排名后,用另一个内容无关的网页(如产品广告)来替换它的行为。  

  张冠李戴:上面提到的门户网页,只适用于Altavista这类自动登录的搜索引擎,如果提交给Yahoo这类人工分类的目录式搜索引擎,它就会认为你在作弊。  

  突破页数限制:一些搜索引擎允许每个用户每天或每周提交的网页数量是有限制的。例如,Altavista每天允许10页;HotBot允许每天50页;Excite允许每周25页;Infoseek允许每天50页(但使用e-mail注册,没有页数限制)。请注意,这并不是说,搜索引擎每天或每周只能为你登录以上页数,而只是允许你提交的页数。还不明白?那就举个例吧,对于Excite而言,每周只允许你提交25页,如果你的网站有1000页,那该怎么办呢?就提交25页即可!余下的Excite会自己检查到,并将编入索引中。如果你强行突破这个限制,那么,搜索引擎就会认为你在作弊,反而不予注册。 

  上面这些条款似乎很明显、很容易区分,但有时我们却可能不知不觉犯上。例如,你有一个网页,背景是白色,在这个网页上,你设计了一个表格,其背景为蓝色、文字为白色,这种设计应该说也是完全正常的,但如果你到搜索引擎Infoseek去注册,它却不理你。为什么呢?它认为你在作弊!在Infoseek看来,表格中的白色文本,实际是置于白色的网页背景上,也就是说,网页文本与背景颜色相同,这就符合“鬼页法”的作弊特征。而这一点,可能你自己根本没有意识到。还有一例,有时因设计需要,或者网站已迁移到其它地方,通常我们会用到网页重定向,但对于Infoseek等搜索引擎而言,这也是不可容忍的作弊行为。另外,Infoseek等搜索引擎还要求,不要在多个网页上布置指向同一个网页的链接。例如,很多人喜欢在各个网页放上“返回主页”的链接,其实就属于这种情况。这种司空见惯的设计,居然也被看成作弊,真是太苛刻了。不过,对此Infoseek在真正执行时,似乎也并不是很严格,一些这样设计的网页,它照样登录了(你也碰碰运气?)。总体上说,这些限制都是为了对付真正的作弊者,使搜索引擎的检索结果更加准确有效,但事实上,的确也错怪了一些好人。如果万一你碰上这种情况怎么办,搜索引擎到底会怎样处罚你呢?  

  跟不少网主一样,笔者以前对此不甚了解,以为自己的某个网页违项,会导致整个网站被封杀。其实,事实并非如此!因为运作搜索引擎的人也知道,有时他们搜索引擎判定的“作弊”,实际是一种正常合法的设计,只是因为搜索引擎自身还不够“聪明”,无法准确判断是故意作弊,还是偶然巧合。所以,他们通常不会因为某网页象在作弊,就拒绝登记整个网站,而只是对有违规嫌疑的网页进行处罚——降低排名或不予登记,而其它的合法网页不会受到影响。此时,你只需将这个网页修改,并重新注册即可。

<

  网页优化不乏旁门左道,但这往往只是讨一时之巧,结果终是得不偿失。搜索引擎,尤其是大型搜索引擎在侦测作弊行为方面是很聪明的,所以从长计议,最好不要采用以下作弊行为:

  ■ 设置文字颜色与背景相同

  这是种“古老”的提高网页关联度的手段,具体做法是:

  在网页中放置大量的关键词,并将其颜色设成与背景同色,这样可以让搜索引擎检索到更多的关键词,同时还不易被普通浏览者发现。

  这是种典型的作弊行为,现在所有的搜索引擎对此都异常敏感,一旦发现投机取巧者,它们将毫不留情地予以严厉的打击。因此,除非你想证实搜索引擎对此有多恼火,否则千万不要以身试法。


 ■ 使用与网页内容无关的关键词

  有的网站为了增加访问量,在网页中使用一些非常热门,但与自己网页内容无关的搜索词,比如“mp3”、“DVD video”等,希望借此吸引更多的访问者。

  但要知道,这是种极不负责任的行为。当用户碰到这种情况时,他们往往会感到沮丧,并且由于大多数普通网民不了解搜索引擎检索信息的机制,他们会怀疑搜索引擎的有效性,进而对搜索引擎敬而远之,而这正是搜索引擎最不愿见到的结果。

  所以搜索引擎对这类做法也是深恶痛绝,一旦作弊者被发现,所受到的惩罚将是严厉的,轻则取消你网页的排名资格,重则会将你的整个网站从数据库中清除。


  ■ 大量无关的外部链接

  在网页排名基本原则和网页优化部分我们提到外部链接的重要性,但这并不意味着你可以不求策略地与所有愿意与你链接的网站交换链接。实际上过多与网站无关的低质量链接不仅起不了作用,相反会给你带来麻烦,而在这方面Google尤其挑剔。




Editor.htm

<textarea style="behavior:url('Editor.htc');"></textarea>

Editor.htc

<public:attach event=oncontentready onevent=initEditor()>
<script>
//对象
var vColorObject=null;
var vFontObject=null;
var vFontFamilyDiv=null;
var vFontSizeDiv=null;
var vFileObject=null;

var vConsoleDiv=null;
var vEditorDiv=null;

//按钮提示文本
var strButtonTitleArray=new Array("新建","打开","保存","剪切","复制","粘贴","取消","恢复","粗体","斜体","下划","表格","向左","居中","向右","编号","符号","缩进","缩出","字色","字号","字体","图像","链接","水平","打印","预览");
//按钮静态文本
var strButtonValueArray=new Array("新建","打开","保存","剪切","复制","粘贴","取消","恢复","粗体","斜体","下划","表格","向左","居中","向右","编号","符号","缩进","缩出","字色","字号","字体","图像","链接","水平","打印","预览");
//按钮接口程序
var strButtonDefineFunctionArray=new Array("defineNew()",
"defineOpen()",
"defineSave()",
"defineCut()",
"defineCopy()",
"definePaste()",
"defineUndo()",
"defineRedo()",
"defineBold()",
"defineItalic()",
"defineUnderLine()",
"defineTable()",
"defineJustifyLeft()",
"defineJustifyCenter()",
"defineJustifyRight()",
"defineInsertOrderedList()",
"defineInsertUnorderedList()",
"defineOutdent()",
"defineIndent()",
"defineColor()",
"defineFontSize()",
"defineFontFamily()",
"defineInsertImage()",
"defineCreateLink()",
"defineInsertHorizontalRule()",
"definePrint()",
"definePreview()");
//按钮图标
var strButtonDefineIconArray=new Array("","","","","","","","","","","","","","","","","","","","","","","","","","","");
//按钮响应库
function defineNew()
{
 vEditorDiv.innerHTML="";
}
function defineOpen()
{
 openFileDlg();
}
function defineSave()
{
 element.value=vEditorDiv.innerHTML;
}
function defineCut()
{
 vEditorDiv.focus();
 document.execCommand("Cut");
 vEditorDiv.focus();
}
function defineCopy()
{
 vEditorDiv.focus();
 document.execCommand("Copy");
 vEditorDiv.focus();
}
function definePaste()
{
 vEditorDiv.focus();
 document.execCommand("Paste");
 vEditorDiv.focus();
}
function defineUndo()
{
 vEditorDiv.focus();
 document.execCommand("Und SyntaxHighlighter.highlight();

[!--infotagslink--]

相关文章

  • photoshop设计一幅大鱼海棠动画片海报制作实例教程

    今天小编在这里就来给各位photoshop的这一款软件的使用者们来说一说设计一幅大鱼海棠动画片海报制作的实例教程,各位想知道具体制作步骤的使用者们,那么各位就快来看看...2016-09-14
  • iOS设置UIButton文字显示位置和字体大小、颜色的方法

    这篇文章给大家分享了iOS如何设置UIButton的文字显示位置和字体的大小、颜色,文中给出了示例代码,相信对大家的学习和理解很有帮助,有需要的朋友们下面来一起看看吧。...2020-06-30
  • ps怎么制作倒影 ps设计倒影的方法

    ps软件是一款非常不错的图片处理软件,有着非常不错的使用效果。这次文章要给大家介绍的是ps怎么制作倒影,一起来看看设计倒影的方法。 用ps怎么做倒影最终效果&#819...2017-07-06
  • C语言程序设计第五版谭浩强课后答案(第二章答案)

    这篇文章主要介绍了C语言程序设计第五版谭浩强课后答案(第二章答案),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2021-04-02
  • Photoshop设计商务名片的5种常见思路分享

    今天小编在这里就来给Photoshop的这一款软件的使用者们来说下计商务名片的5种常见思路,各位想知道的使用者,那么下面就快来跟着小编一起看一看吧。 给各位Photosho...2016-09-14
  • 基于JavaScript实现文字超出部分隐藏

    这篇文章主要介绍了基于JavaScript实现文字超出部分隐藏 的相关资料,需要的朋友可以参考下...2016-03-01
  • php根据用户语言跳转相应网页

    当来访者浏览器语言是中文就进入中文版面,国外的用户默认浏览器不是中文的就跳转英文页面。 <&#63;php $lan = substr(&#8194;$HTTP_ACCEPT_LANGUAGE,0,5); if ($lan == "zh-cn") print("<meta http-equiv='refresh' c...2015-11-08
  • 腾讯视频怎么放到自己的网页上?

    腾讯视频怎么放到自己的网页上?这个问题是一个基本的问题,要把腾讯视频放到自己的网页有许多的办法,当然一般情况就是直接使用它们的网页代码了,如果你要下载资源再放到...2016-09-20
  • WPF实现类似360安全卫士界面的程序源码分享

    最近在网上看到了新版的360安全卫士,感觉界面还不错,于是用WPF制作了一个,时间有限,一些具体的控件没有制作,用图片代替了。感兴趣的朋友一起跟着小编学习WPF实现类似360安全卫士界面的程序源码分享...2020-06-25
  • C#文字换行的实现方法

    这篇文章主要介绍了C#文字换行的实现方法,通过自定义函数实现针对特定字符串的换行长度处理,是比较实用的技巧,对于C#的深入学习具有一定的借鉴价值,需要的朋友可以参考下...2020-06-25
  • photoshop安卓和苹果界面设计之尺寸规范详解

    今天小编在这里就来给各位photoshop的这一款软件的使用者们来说下安卓和苹果的界面设计之尺寸规范,各位想知道的使用者们,那么下面就快来跟着小编一起看看吧。 给...2016-09-14
  • 基于JavaScript实现网页倒计时自动跳转代码

    这篇文章主要介绍了基于JavaScript实现网页倒计时自动跳转代码 的相关资料,需要的朋友可以参考下...2015-12-29
  • photoshop设计重影效果具体制作教程

    今天小编在这里就来给各位photoshop的这一款软件的使用者们来说一说设计重影效果具体的制作教程,各位想知道具体制作方法的软件使用者们,那么大家就来看下小编带来的教...2016-09-14
  • 网页头部声明lang=”zh-cn”、lang=“zh”、lang=“zh-cmn-Hans”区别

    我们现在使用的软件都会自动在前面加一个申明了,那么在网页头部声明lang=”zh-cn”、lang=“zh”、lang=“zh-cmn-Hans”区别是什么呢?下面我们就一起来看看吧. 单...2016-09-20
  • Illustrator结合photoshop设计可爱的卡通女厨师头像制作教程

    今天小编在这里就来给Illustrator的这一款软件的使用者们来说一说结合photoshop设计可爱的卡通女厨师头像的制作教程,各位想知道具体制作步骤的使用者们,那么下面就快来...2016-09-14
  • PS怎么设计T恤 PS制作T恤教程

    PS怎么设计T恤?很多人都想要在T恤上有自己喜欢的图案,那么自己设计T恤的图案是方法之一,本次为大家带来了详细的ps设计T恤教程,有兴趣的同学快来看看吧。 1、打开PS,新...2016-12-31
  • photoshop设计一张节约用水环保主题海报制作教程

    今天小编在这里就来给photoshop的这一款软件的使用者们来详细的说说设计一张节约用水环保主题海报的制作教程,各位想知道具体制作方法的使用者们,那么下面就快来跟着小...2016-09-14
  • C#利用GDI+给图片添加文字(文字自适应矩形区域)

    这篇文章主要给大家介绍了关于C#利用GDI+给图片添加文字(文字自适应矩形区域)的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起看看吧。...2020-06-25
  • c#实现51单片机频率计的代码分享(数字频率计设计)

    c#实现51单片机频率计的代码分享,大家参考使用吧...2020-06-25
  • C#实现Winform中打开网页页面的方法

    这篇文章主要介绍了C#实现Winform中打开网页页面的方法,涉及WinForm中WebBrowser的相关使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下...2020-06-25