网站制作如何设计页面中的文字_优品建站

网站制作如何设计页面中的文字

  文本是人类重要的信息载体和交流工具,网页中的信息也是以文本为主。虽然文字不如图像直观形象,却能准确地表达信息的内容和含义。在确定网页的版面布局后,还需要确定文本的样式,如字体、字号和颜色等,还可以将文字图形化。
一. 文字的字体、字号、行距
  网页中中文默认的标准字体是“宋体”,英文是“The New Roman”。如果在网页中没有设置任何字体,在浏览器中将以这两种字体显示。

图3-4 适当的行距
  字号大小可以使用磅(point)或像素(pixel)来确定。一般网页常用的字号大小为12磅左右。较大的字体可用于标题或其他需要强调的地方,小一些的字体可以用于页脚和辅助信息。需要注意的是,小字号容易产生整体感和精致感,但可读性较差。
无论选择什么字体,都要依据网页的总体设想和浏览者的需要。在同一页面中,字体种类少,版面雅致,有稳重感;字体种类多,则版面活跃,丰富多彩。关键是如何根据页面内容来掌握这个比例关系。
  行距的变化也会对文本的可读性产生很大影响,一般情况下,接近字体尺寸的行距设置比较适合正文。行距的常规比例为10:12,即用字10点,则行距12点,图3-4所示行距适当放大后字体感觉比较合适。
  行距可以用行高(line-height)属性来设置,建议以磅或默认行高的百分数为单位。如(line-height:20pt)、(line-height:150%)。
二. 文字的颜色
图3-5 多彩的网页文字
  在网页设计中可以为文字、文字链接、已访问链接和当前活动链接选用各种颜色。如正常字体颜色为黑色,默认的链接颜色为蓝色,鼠标点击之后又变为紫红色。使用不同颜色的文字可以使想要强调的部分更加引人注目,但应该注意的是,对于文字的颜色,只可少量运用,如果什么都想强调,其实是什么都没有强调。况且,在一个页面上运用过多的颜色,会影像浏览者阅读页面内容,除非有特殊的设计目的。
  颜色的运用除了能够起到强调整体文字中特殊部分的作用之外,对于整个文案的情感表达也会产生影响。图3-5所示为多彩的网页文字。
  另外需要注意的是文字颜色的对比度,它包括明度上的对比、纯度上的对比,以及冷暖的对比。这些不仅对文字的可读性产生作用,更重要的是,可以通过对颜色的运用实现想要的设计效果、设计情感和设计思想。
三. 文字的图形化
图3-6 图形化的文字
  所谓文字的图形化,即把文字作为图形元素来表现,同时又强化了原有的功能。作为网页设计者,既可以按照常规的方式来设置字体,也可以对字体进行艺术化的设计。无论怎样,一切都应该围绕如何更出色地实现自己的设计目标。
将文字图形化,以更富创意的形式表达出深层的设计思想,能够克服网页的单调与平淡,从而打动人心。
四. 让文字易读
  字体是帮助用户获得与网站信息交互的重要手段,因而文字的易读性和易辨认性是网站制作页面时的重点。不同的字体会营造出不同的氛围,同时不同的字体大小和颜色也对网站的内容起到强调或者提示的作用。
  正确的文字和配色方案是好的视觉设计的基础。网站上的文字受屏幕分辨率和浏览器的限制,但仍有通用的一些准则:文字必须清晰可读,大小合适,文字的颜色和背景色应有较为强烈的对比度,文字周围的设计元素不能对文字造成干扰。在如图3-7所示的网页中,文本与背景色对比不强烈,阅读吃力,同时正文字体过小。
指点迷津
  在进行网站的页面文字排版时要做到以下几点。
  避免字体过于黯淡导致阅读困难。
  字体色与背景色对比明显。
  字体颜色不要太杂。
  有链接的字体要有所提示,最好采用默认链接样式。
  标题和正文所用的文字大小有所区别。
  作为内容的文字字体大小最好能大一点。
  英文和数字选用与中文字体和谐的字体。

  • 网店装修必备技能:文字——辅助商品信息的表现
    文字作为视觉传达的重要组成部分,是图像和色彩之外的又一重要视觉构成要素。因此,完成商品照片的美化和修饰后,为了让顾客了解更多的商品信息,通常还需要在画面中适当添加文字。
  • 网站制作报价单模板适用多个行业(最新版)
    网站制作报价免费模板下载,可以应用于多个行业,也可以根据客户需求进行定制,内容详细,报价清晰明确,直接复制即可使用。
  • bootstrap网站制作案例实训——开发电商网站特效
    本案例使用Bootstrap进行网站制作的网格系统进行布局,其中设置了一些电商网站经常出现的动画效果。
  • 网站制作报价预算的明细报表下载,免费使用
    本文为大家提供网站制作报价预算的明细报表,内容包括网站制作原报价价格、根据客户要求进行修改、网站制作调整后报价,免费下载。
  • bootstrap被删除的Glyphicons字体图标
    本文单独介绍一下Bootstrap框架中的Glyphicons字体图标组件。Glyphicons字体图标指的是Glyphicon Halflings字体图标。我们在使用Glyphicons Halflings字体图标时一般是需要付费的,不过Glyphicons Halflings字体图标拥有者对Bootstrap授权可以免费使用。
  • 苏州网站制作报价,苏州网站建设价格
    苏州网站建立几钱,苏州网站制造的价钱规范,真的很重要、很迫切需求吗?当你散步市场时,你发现同一件商品在每一个摊位的报价都不同时,你能否在犹疑?这时你就是客户,你弄不分明终究花几钱购置该商品才是最合算,由于该市场没有标准。
  • Three.js网站开发指南:在单几何体上使用多种材质
    在创建THREE.Mesh时,到目前为止,我们已经使用过一种材质。为几何体的每个面指定不同的材质是可能的。
  • 网站制作报价明细模板免费下载
    本文详细介绍网站设计的报价,网站内容的报价,网站功能模块的报价,网站报价的注意事项。
  • html网页制作如何使用<audio>标签播放音频
    本文教大家如何使用<audio>标签播放音频,此功能在网站制作中应用非常广泛,代码简单移动,正文附带源码供大家学习参考。
  • 常见企业网站制作报价单模板下载
    本文提供的是常见的企业网站制作报价模板,适用于大中小多种不同行业的企业,仅供大家参考学习,可以在此基础上根据实际情况进行修改。
  • 网站制作 服务

    免费网站制作报价,免费优化,1对1服务,个性化定制服务

    pc和wap网站制作

    多年建站经验,上千个成功案例,
    为您提供一站式服务

    网站维护改版

    大厂经验工程师对现有网站进行
    改版,修复,维护。

    小程序制作

    微信小程序,支付宝小程序,
    百度小程序

    响应式网页设计

    响应式网页设计可以与多种设备兼容,
    如智能手机,平板电脑和PC