编辑的好帮手 网页文字的处理技巧

 更新时间:2016年9月20日 19:04  点击:1285
众所周知,网页文字的排版设计对于页面的整体效果有着非常重要的影响。就象传统的报刊杂志一样,我们将网页看作一张报纸、一本杂志来进行文字的排版处理,针对不同的需要,有可能需要使用一些特殊的文字排版技巧。比如做一个介绍古文的网页时,我们可能会用到文字竖排、文字从右读起的效果以增强页面表现力;做一个新闻页面,可能会用到段落首字下沉等效果,用以强调某条新闻。

  在一张报纸上、一本杂志上要实现这些效果并不难,但是我们如何在网页上实现这样的效果呢?下面就向大家介绍几种文字排版处理的技巧。

  1、段落首行自动缩进

  每个段落的首行要缩进两个汉字大小是众人皆知的常识,我们通常在每个段落首行加上多个“ ”标签来实现缩进,这样虽然能够达到目的,但是却过于麻烦。其实我们只要运用一些简单的CSS语法就可以一劳永逸地在一个页面中实现首行缩进。

<style type="text/css">
p{text-indent: 2em}
</style>

  通过上面的样式,页面中每段包含在标签<p>和</p>之间的段落都会自动缩进两个汉字字符大小。

  2、段落首字下沉

  我们阅读传统媒体时,经常看到如图1的效果,通过使用样式,我们也可以很轻松地实现类似效果。

图1 很常见的段落首字下沉效果


<style>
#chr:first-letter{font-size: 24pt;left: 0px; float: left;position: absolute }
</style>

  上面这段代码定义了一个首字大小为24pt的缩进,使用时我们只要在某个段落的标签中添上一个“id=chr”就可以了,例如下面的段落:

<p id=chr>柳永(987?-1053?)字耆卿,福建崇安人。……</p>

  3、文字竖排效果

  如下面的一段诗文,在网页上显示时文字呈竖直排布,非常适合诗词的文字编排。

<div style="line-height: 18px; text-align: center; writing-mode: tb-rl">
<pre>
长恨歌(片段)<br>白居易<br>
汉皇重色思倾国,御宇多年求不得。
杨家有女初长成,养在深闺人未识。
天生丽质难自弃,一朝选在君王侧。
……
</pre></div>

代码

  标签中的样式规定了文字的竖直排布,并且每行的间距为18像素,文字为中间对齐。网页读取时都会自动将空格去除后才显示,在诗文内容开始和结束部分分别加上标签<per>和</per>,可以使诗文内容按照自己的意愿精确显示,其效果如图2。
  先说这个“长”,中国网站的页面真是长啊,以至于我坐在电脑前浏览的时候经常会想,这个页面的最低端会不会已经搭拉到我的脚面上了。我们的万里长城是第几大奇迹来着?反正中国的网站应该紧排在她后面。

  我们的大型门户网站恐怕应该是长页面的领军者吧。现在能生存下来的大型门户各个实力不凡,又纷纷上市,其他网站能与他们页面相似应该也能说明实力相似吧,这几家大型门户已经给用户形成了“长则是好”的印象,于是众多网站都纷纷“长”起来了。无论是综合性网站还是专业性网站,只要有内容,就能做多长就做多长,没有内容,抄袭别人内容也要做长,以至于不少实力有限的网站只是首页很长,到了栏目页面(二级页面)就简陋的可怜了。

  长的基础就是要内容要多,这些众多的长网站在组织内容的思路上基本是一致的,就是把二级页面的内容摘要的放在首页上。首页分成若干个相应的通栏的大块儿(这样可以逐个部分的下载页面,易于显示),再在每两块之间加一条广告,最后再在页面的最上面加一个更综合的区域,所谓的重中之重,这样以来页面想短都短不了。

  按照Jakob Nielsen的说法:网站首页的长度不应该超过4屏。当然这个准则也未必就那么准确,但是至少应该承认页面不是越长越好的。

  第二,说说“闪”。就是网页上能动的东西

  网站策划是成功网站平台建设成败的关键内容之一。在中国真正普及全职的网站策划人员严格讲是2002年,在之前更多是由技术性人才(软件项目经理、网站美工等)担任此项职位,随着中国互联网环境转晴,网站的高竞争使网站策划的地位突显。我们可以看到,许多真正处于领军性地位的网站平台90%具有一个特点——网站策划思路清晰合理,界面友好,网站营销作用强;因此专业的网站策划是未来网站成功的重要条件之一。
 
  在未来,网站策划呈现以下5大趋势:
 
  1.具备市场/销售意识,且掌握扎实技术的专业网站策划人才成抢手货

  网站定位决定了网站策划思想的宽度和深度,网站客户决定了网站策划思维形式,网站页面和程序的实现决定了优秀网站策划思想的表现力,网站市场/销售再次验证网站策划水平的高低;如果需要深入并运用上句的思想,就必须具备市场、销售、和扎实技术于一身,这种复合性网站策划人才则是现今大网站品牌竞争中不可或缺的人力资源,随着国家2001年开设电子商务专业,这种人才真正成熟须要再等5年以上;但由于网站越来越多,优秀的网站竞争越来越难,这种人才在5年内将从从事网站销售、市场、技术这三方面的人才中产生,其中当前网站竞争实力不高的情况下,技术人才转型是网站策划是当前现状,不过未来以市场/销售为主的人才转型,才能真正推动网站策划走向专业化。

  2.人机工程学思想将大行其道

  人机工程学又称人机工效学(Ergonomics),是一门让技术人性化的科学,一门关于技术和人的协调关系的科学。即如何让技术的发展围绕人的需求来展开,把人作为产品和环境设计的出发点,使其性能、色彩等更好地适应和满足人类的生理和心理的需要,从而使人们在工作中更安全、便捷和舒适,工作效率更高。其研究方法和评价手段涉及心理学、生理学、医学、人体测量学、美学和工程技术等多个领域。

  人机工程学已渗透至我们生活的每一个部分,例如:喝水的杯子,洗口的牙膏,使用的电脑…等各方面,人机工程学更是利于产品销售的优化剂,那么我们从专业网站策划看,更需要人机工程学帮助我们使网站平台更容易推销给目标客户。在未来人机工程学将使网站在以下方面得到质的提升:
人性化:通过引导性文字语言、图形语言、个性互动等方式,使网站平台更利于客户浏览,以吸引并留住客户。

  方便性:网站操作简便、易用,内容分布合理,符合客户的行为习惯。

  逻辑性:整体网站策划流程符合客户心理,且在充分分析客户行业特征的基础上,建立网站内部功能之间的逻辑转换,让客户享受整个访问过程。

  科学性:网站栏目策划、定位具备科学性,其既充分代表了网站的意图,又能充分调动访客继续点击,引导客户购买产品。

  控制性:网站在建立客户行为权限控制方面,必须符合公司业务规则,根据不同的客户类型产生不同的权限。

  交互性:建立异步沟通系统(帮助中心、留言板、操作指南…)方便客户与网站之间沟通;建立同步沟通系统(即时聊天、电话反馈…)达到即时双向沟通目标。

  界面友好性:心理学表明,适合的界面对于客户点击欲望的提升和印象指数的提升效果明显,网站界面是客户与网站交流的重要载体,在这点上网站策划师需要与网站设计师协作实现。但思想方法确保以下内容您做到了:

  a、 同样的界面对象是否具有一致性、连续性的行为?
  b、 各种提示信息是否简单、清晰?
  c、 色彩是否统一、协调?是否避免了同时使用太多的颜色?
  d、 文字内容是否简洁、重点突出?字体、字号、字型是否合适?
  e、 界面对象的动静处理是否得当?
  f、 布局是否合理、简洁、协调、美观,画面是否均衡等等?

  3. 文化理念全面渗透网站策划实战

  网站竞争从技术竞争、平台竞争,以及现在的市场竞争,经过几年的发展,未来将上升至“文化竞争”的高度,例如:新浪网络媒体、网易虚拟社区、阿里商人文化…..

  从历史的角度来看,经济可以推动文化的发展,文化却能够决定经济、政治的走势;

  从网站经营的角度来看,好的网站经营能够促使网站的客户不断的聚集、交流,逐步建立以网站或网站行业或网站性质为核心的文化;但网站或网络文化的建立却能够带动网站从量变至质变的转换,并且能够形成“马太效应”,对网站资本运作、市场运作、技术运作、人力资源运作等综合方面产生催化作用,使网站经营真正走向成功。

  从现有已形成文化的网站案例来看,新浪已成为中国甚至华人世界最具权威性质的网络媒体,它形成了与电视媒体、杂志媒体、报刊媒体、广播媒体并列的第五大媒体,其文化力量可见一斑;以网易为代表的社区交流型网站更是如此,网络游戏文化、网络交友文化更是深入人心,并对中国互联网普及进程产生决定性的推动作用;以阿里、当当、易趣、淘宝为代表的商人文化,对中国走向世界,世界了解中国,商人上网做生意的普及的贡献有目共睹;以前程无忧、CJOL、卓博、中华英才为代表的网上人力资源文化更是加速了全国人力资源高效互动。

<

1、 选择有效的关键字:

关键字是描述你的产品及服务的词语,选择适当的关键字是建立一个高排名网站的第一步。选择关键字的一个重要的技巧是选取那些常为人们在搜索时所用到的关键字。

2、 理解关键字:

在你收集所需的关键字之前,明白一般人是怎样用关键字是十分重要的。人们在搜索的时候一般是不会使用单个词,而是用短语或者词组。这样对于网站优化起到更重要的作用。

3、 找出有效的关键字:

下面的一个网址包括了测试关键字使用频率的工具:http://www.trafficzap.com/的 Keyword Generator

4、 选取关键字技巧:

A:认真思索

用笔写下与你的网站或产品有关的所有关键字,先不要对这些关键字进行审评。不要局限于你是卖什么的,尽量站在你客人方面考虑。那些人会为你的网站带来利益,尽量站在这些人的角度想。

B:多问周围人的意见

讲你的家里人,朋友,同学怎样的词语适合描述你的产品或网站。他们很有可能会找出一些你连想到没想过的词语。

C:分析日志文档:

日志文档将会告诉你,人们是使用什么关键字来访问你的网站的。(有些网站在建站的时候会安装相应的工具来生成日志文档供网管参考)

D:参考其他网站:

参照那些主题与你相似或相同的网站,看一下他们的meta keyword 是怎么写的。这样你有可能会得到意外的关键字,但是不要直接将人家的模板粘贴过来,因为你不知道网管在设计网站之前对关键字进行了那些可能性的研究。这主要是用于关键字研究。

E:找出错误的拼写(多用于英文)

有很多关键字人们会经常拼写错误的,找出这些经常出现错误拼写的词或词组可以为你带来额外的流量。(就GOOLE来说,它有检查拼写错误的功能。建议不要用拼写错误的词、词组作关键字)

5、 处理关键字:

到了这一步,你已经收集了很多与你的网站或产品有关的关键字了。接下来的工作就是把收集到的关键字进行组合,把它们组成常用的词组或短语。很多人在搜索的时候会使用两个或三个字组成词。据统计,平均是2.3个字。不要用普通的,单个字作为关键字。这样的关键字很难排到搜索引擎的前十位。例如:你有以下几个关键字:“搜索引擎、软件、提高”,试着把他们组合为“搜索引擎软件”、“搜索引擎提高”等。把字组成关键字短语有利于提高你网站的排名,你将会更有效提高你网站访问量。例如:很少人会用“搜索引擎”或者“软件”。

6、 舍弃一些关键字: 寻找出那些搜索时很少用到的关键字:

A:在英文里,在搜索引擎大小写是没有区别的。

B:拼写错误的关键字是没用的,但是找到一个经常出现拼写错误码的词可以额外地提高你的访问量

C:去除那些停用的词,在英文里有“the, for , a ,” 等。中文里有“的,地,你,我”等。

D:没有人会用“最好的”,“疯狂的”等词语进行搜索。如果你的网站里有类似的词,最好把他去除。

7、 最佳关键字:

如果你按照上述所说,你一定列出了一大堆的关键字。尽管,你已经去除了一些没人使用的。但是对于你来说还是太多了。现在是时候进入关键字优化的最后一步了。

提示:

一.外观

1 不要先决定网页的外观,然后强迫自已去适应它,应该从你的访客对像,你要传 达的讯息以及你的制网目标推导出一个最适合的网页架构。

2 每页排版不要太疏或用太大的字,尽量避免看你的网页时需要作很大的卷动,要 知道在一页的上部分是显眼而宝贵的地方,不要只放着几个粗大的字或图片。

3 最好不要用 800x600 以上的分辨率设计网页。常用的分辨率是 640x480 及 800x600 。 明智的网页设计者是处处照顾浏览者,绝不会炫耀自己有专线、有17 寸的显示器等。

4 不要于每页插入太多的广告牌。相信你亦不喜欢浏览一些贴满广告的网页吧,你要考虑到该页内容与广告的比例,摆放的位置亦很重要,不妨多参考别人的做法。广告太多,只会令人烦厌。

5 不要每页都采用不同的背景图片,以免每次转页都要花时间去下载,采用相同的底色或背景图片还可增加网页一致性,树立风格。

6 底色或背景图片必须与文字对比强烈,易于阅读,这并不是要求你永远使用鲜亮的背景配搭深色的文字,但深色背景常要求与主题配合,有较多的顾虑,若你的网页 是文章式或包含大量文字,不妨在底色与文字的配搭上下些工夫,力求让访者能舒适阅读你的文章。

7 不要把图片白色当透明,要知道别人的作业系统不一定把内定底色设为白色,解 决方法除了真的把该网页的底色设为白色之外,最好还是以图片编辑工具为图片设好透明颜色。

8 太长的一页要使用内部连结,明智的网页设计者是不会让浏览者看网页时作太大 的卷动。常见的内部连结应用例子如 FAQ (常见问答)。

二.标记运用

  1. 小心使用框架(Frame)。框架易学难精,它虽有快速、漂亮和方便更新等优点, 但稍有不慎会适得其反,切勿勉强使用,由于 IE 及 NC 对框架属性定义有所差异,公开网页前宜作多方面测试,可能你的框架于 IE 显示下是漂亮的一页,但于 NC 可能是最丑陋的。

  2. 背景音乐尽量同时使用 bgsound 及 embed 两种标记,照顾旧版的浏览器,或可使 用 JavaScript 分辨浏览器以印出适当的媒体标记。

  3. 应用框架 Frame 时要加入不支持的提示以提醒旧版的浏览器的用户,亦可以是藏着一没有框架的版本或一个连到另一版本的连结,这样不但照顾到旧版的浏览器,亦有利于登一些寻找引擎。

  4. 同一页中不要使用太多的 HR 标记,即水平分隔线,否则你的网页看起来会支离破碎,要达到文件清晰或主次分明,可改变字体的大小、颜色或底色。或采用清单标记,不一定要使用水平线。

  5. 不要使用“点选这里”“Click Here”之类的字眼当作连结,正确的做法如:“请 到 Microsoft 网站看看 Windows 98 的介绍吧”。

  6. 不要勉强使用闪烁文字,指 Blink 标记,不必说它的被支持问题,这类的闪烁常为浏览者带来紧张和不安,要知道制作网页的首要条件便是要让访客看得舒适,不要因小失大。

  7. 使用 ImageMap 时,不要让关键区域太近或重叠,不要让你的访客猜测关键区域, 如果图片示意不够清楚可加些文字说明,按键的作用只是用以打开另一文件,只要能做到清楚及显眼便足够。

  8. 编辑完 ImageMap 后不要更动原来图片档案,否则它的关键区域会因相对座标值的更变而失准。

  9. 在表单中使用 Action=mailto 时,要提醒使用者不要期待立即的回应,否则你的访问者便「痴痴地等」或多按几次“Submit”,最好还是使用 CGI 吧。

  10. <
    [!--infotagslink--]

    相关文章

    • photoshop打开很慢怎么办 ps打开慢的设置技巧

      photoshop软件是一款专业的图像设计软件了,但对电脑的要求也是越高越好的,如果配置一般打开ps会比较慢了,那么photoshop打开很慢怎么办呢,下面来看问题解决办法。 1、...2016-09-14
    • Jquery Ajax Error 调试错误的技巧

      JQuery使我们在开发Ajax应用程序的时候提高了效率,减少了许多兼容性问题,我们在Ajax项目中,遇到ajax异步获取数据出错怎么办,我们可以通过捕捉error事件来获取出错的信息。在没给大家介绍正文之前先给分享Jquery中AJAX参...2015-11-24
    • c# WPF中通过双击编辑DataGrid中Cell的示例(附源码)

      这篇文章主要介绍了c# WPF中通过双击编辑DataGrid中Cell的示例(附源码),帮助大家更好的理解和学习使用c#,感兴趣的朋友可以了解下...2021-03-03
    • php语言中使用json的技巧及json的实现代码详解

      目前,JSON已经成为最流行的数据交换格式之一,各大网站的API几乎都支持它。我写过一篇《数据类型和JSON格式》,探讨它的设计思想。今天,我想总结一下PHP语言对它的支持,这是开发互联网应用程序(特别是编写API)必须了解的知识...2015-10-30
    • 图解Sublime Text3使用技巧

      通过本篇文章给大家介绍Sublime Text3使用技巧的相关知识,对sublime text3技巧相关知识感兴趣的朋友一起学习吧...2015-12-24
    • php根据用户语言跳转相应网页

      当来访者浏览器语言是中文就进入中文版面,国外的用户默认浏览器不是中文的就跳转英文页面。 <&#63;php $lan = substr(&#8194;$HTTP_ACCEPT_LANGUAGE,0,5); if ($lan == "zh-cn") print("<meta http-equiv='refresh' c...2015-11-08
    • 基于PHP给大家讲解防刷票的一些技巧

      刷票行为,一直以来都是个难题,无法从根本上防止。但是我们可以尽量减少刷票的伤害,比如:通过人为增加的逻辑限制。基于 PHP,下面介绍防刷票的一些技巧:1、使用CURL进行信息伪造$ch = curl_init(); curl_setopt($ch, CURLOP...2015-11-24
    • 腾讯视频怎么放到自己的网页上?

      腾讯视频怎么放到自己的网页上?这个问题是一个基本的问题,要把腾讯视频放到自己的网页有许多的办法,当然一般情况就是直接使用它们的网页代码了,如果你要下载资源再放到...2016-09-20
    • 分享12个非常实用的JavaScript小技巧

      这篇文章主要介绍了分享12个非常实用的JavaScript小技巧,这些小技巧可能在你的实际工作中或许能帮助你解决一些问题,需要的朋友可以参考下...2016-05-14
    • 基于JavaScript实现网页倒计时自动跳转代码

      这篇文章主要介绍了基于JavaScript实现网页倒计时自动跳转代码 的相关资料,需要的朋友可以参考下...2015-12-29
    • Python爬虫必备技巧详细总结

      本篇文章介绍了我在爬虫过程中总结的几个必备技巧,都是经过实验的,通读本篇对大家的学习或工作具有一定的价值,需要的朋友可以参考下...2021-10-22
    • 网页头部声明lang=”zh-cn”、lang=“zh”、lang=“zh-cmn-Hans”区别

      我们现在使用的软件都会自动在前面加一个申明了,那么在网页头部声明lang=”zh-cn”、lang=“zh”、lang=“zh-cmn-Hans”区别是什么呢?下面我们就一起来看看吧. 单...2016-09-20
    • BootStrap和jQuery相结合实现可编辑表格

      这篇文章主要介绍了BootStrap和jQuery相结合实现可编辑表格的相关资料,需要的朋友可以参考下...2016-04-23
    • Illustrator像素级完美绘制经验技巧分享

      今天小编在这里就来给Illustrator的这一款软件的使用者们来说一说像素级完美绘制的经验技巧,各位想知道具体信息的使用者们,那么下面就快来跟着小编一起看一看。 给...2016-09-14
    • jQuery实现可以编辑的表格实例详解【附demo源码下载】

      这篇文章主要介绍了jQuery实现可以编辑的表格,涉及jQuery响应鼠标事件动态操作页面元素的相关技巧,需要的朋友可以参考下...2016-07-25
    • C#实现Winform中打开网页页面的方法

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

      本文主要介绍了前端开发必知的15个jQuery小技巧。具有很好的参考价值,下面跟着小编一起来看下吧...2017-01-26
    • Eclipse编辑jsp、js文件时卡死现象的解决办法汇总

      使用Eclipse编辑jsp、js文件时,经常出现卡死现象,在网上百度了N次,经过N次优化调整后,卡死现象逐步好转,下面通过脚本之家平台给大家分享几种解决办法,需要的朋友参考下...2016-02-05
    • Go语言通过http抓取网页的方法

      这篇文章主要介绍了Go语言通过http抓取网页的方法,实例分析了Go语言通过http操作页面的技巧,需要的朋友可以参考下...2020-05-05
    • vue如何在用户要关闭当前网页时弹出提示的实现

      这篇文章主要介绍了vue如何在用户要关闭当前网页时弹出提示的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-06-01