文字编排在网页框架与布局设计中的技巧

在网页设计中,字体的处理与颜色、版式、图形化等其他设计元素的处理一样非常关键。文字图形化文字图形化就是将文字用图片的形式来表现,这种形式在页面的子栏目里面最为常用,因为它具有突出,同时又美化了页面,使页面更加人性化加强了视觉效果。是文字无法达到的。对于通用性的网站弊端就是扩展性不强。

一般来说,网页的背景色应该柔和一些、素一些、淡一些,再配上深色的文字,使人看起来自然、舒畅。而为了追求醒目的视觉效果,可以为标题使用较深的颜 色。下面是我做网页和浏览别人的网页时,对网页背景色和文字色彩搭配积累的经验,这些颜色可以做正文的底色,也可以做标题的底色,再搭配不同的字体,一定 会有不错的效果,希望对大家在制作网页时有用。

强调文字,如果将个别文字作为页面的诉求重点,则可以通过加粗、加下划线、加大号字体、加指示性符号、倾斜字体、改变字体颜色等手段有意识地强化文字的视觉效果,使其在页面整体中显得出众而夺目。这些方法实际上都是运用了对比的法则。如果在更新频率低的情况下也可以使用文字图形化。

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

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

字体具有两方面的作用:一是实现字意与语义的功能,二是美学效应。所谓文字的图形化,即是强调它的美学效应,把记号性的文字作为图形元素来表现,同时又强化了原有的功能。易雅达作为网页设计者,既可以按照常规的方式来设置字体,也可以对字体进行艺术化的设计。无论怎样,一切都应围绕如何更出色地实现自己的设计目标。将文字图形化、意象化,以更富创意的形式表达出深层的设计思想,能够克服网页的单调与平淡,从而打动人心。

关于页面前端设计

但凡从事互联网的人基本都会写几行 html,用过 Word 的人用 Dreamweaver 也能做出规整的页面,所以大部分人会很自然地认为“页面的开发没什么技术含量,很简单”。不仅有这种普遍的认知,对从业者来说也有很多疑惑:做页面前端实现,没问题;兼容性,小 case;图片集成,一直都在用……还能有什么问题?瓶颈啊、天花板啊、转型啊、出路啊就在从业者中广泛讨论。是不是真的没什么问题了呢?网易邮箱前端技术中心也设立好几年了,似乎有着讨论不完的话题,也经常会有一些新的想法让大家为之一振。那么页面开发还有哪些要求,还要做些什么,这里面的水有多深,让我们舀舀看。

在不同的时期对页面前端的看法似乎是多变的。在互联网早期的时候,小车还是比房子贵的,烧饼和粉丝还只是用来吃的,菊花还只是用来泡茶的。那时的页面设计风格相对单一,对应的页面需求比较简单,并且当时的浏览器也基本是 IE6 的天下,javascript 也只是网页特效的代名词,HTML 页面本身没有引起太多人的关注,似乎只要能用 div 甚至 table 加 css 辅助把图片定好位,把页面内容预留好就 OK 了,并且这种观念存在了很长一段时间。随着页面内容的丰富,设计风格的发展,交互复杂性的增加,AJAX 的应用,浏览器的更新换代,又让大家重新对最基本的页面本身重视起来。然后热议的就是浏览器的兼容性,碰到问题最热衷的就是满网络搜索 hack,顺便再骂骂 IE6、7……当这些都做一遍后,似乎又遇到了瓶颈,又开始寻找出路。我们就从这个阶段开始说起。

实现效果图是最基本的工作

把视觉稿通过页面代码的方式表现出来包含了两个基本诉求:1.能够真实反映视觉稿;2.能够通过浏览器的兼容。这两个诉求的达成需要我们有追求细节的态度和一定的页面功底,能完成这两个内容就可以初步进入页面前端的从业者行列了,但这就代表着我们可以胜任页面开发的工作了?不,才刚刚开始!

与设计师的沟通和项目的参与

沟通很重要。先抛出几个问题:我们有没有和设计师探讨过某些效果对低端浏览器渲染效率影响比较大?有没有探讨过部分效果可以用 CSS3 实现从而使得结构更加简洁清晰?有没有在代码和视觉中寻追求过平衡?页面前端的开发向基本用户,编写的代码也直接作用在浏览器上,我们有义务对页面的稳定性和渲染效率负责。我们也经常碰到项目在总体进度压力下导致的设计与页面前端开发同步进行,这时更有必要尽量多地获取项目信息,了解我们还要做些什么,这些可以帮助我们充分考虑重用和框架拓展。

良好的页面结构

页面结构的编写好比盖房的地基建设,其好坏会直接影响到 CSS 代码的质量、js 开发、后台开发还会影响到以后的页面拓展、迭代和页面调整。拿到视觉稿后,不要忙着动手开始,多观察思考。先分析布局,划分框架,然后规划结构,编写代码。特别在大型项目中,合理使用模块化的开发不论从整体进行还是拓展维护都有相当大的好处。

关于 hack

很多同学在页面开发时上网搜索最多的就是 hack 了,是否我们完全要依赖 hack 来实现页面兼容性,答案是否定的。大家经常比喻 IE6 向我们撒了一个谎,结果我们要再撒一百个谎来圆这个谎。不否认 IE6 经常让我们口吐鲜血,但不代表我们用更多的“谎言”来弥补就可以心安理得。大部分情况下可以通过变换思路调整 HTML 结构,或使用一些虽然无法解释但相对安全的 css 来干掉 hack。谁都无法预计使用 hack 什么时候会让我们栽一个大跟头。比如触发 layout 或 position:relative 就可以帮助解决很多 IE6 的问题。

优美的代码

现在很多 web 项目功能复杂,代码规模也会变得很庞大,如何更好地进行协同开发和维护是我们面临的一个问题。需要考虑完善统一的规划,还有要养成良好的代码开发习惯才会在面临各种情况时游刃有余。翻阅页面代码,看到合理的标签使用、良好的注释、清晰的代码结构、用意准确的 css 不仅犹如欣赏一个艺术品,更为下游开发和协同开发降低了不小的沟通成本,我们有什么理由不去这么做呢?举个反面例子:div 滥用是现在比较典型的一个问题。数数看自己使用的标签有多少个呢?不同的语义都该使用对应的标签代码,特别是 HTML5 提供了更丰富的语义化标签,它们都苦苦地在等待战场上的冲锋号,让我们去解放它们吧!

无障碍页面开发

可访问性与易用性是非常主观且人性化的东西。普通人看上去上完美呈现的页面在特殊群体中不一定显得那么贴心。当盲人用读屏软件在页面某个区域内陷入循环时,我们应该感到内疚。只能说目前国内的网站对此的重视程度还远远不够,这就需要我们共同努力,让更多的人感受到我们的热情。

保障效率

作为项目开发中比较靠前的一环,页面开发可能需要尽早完成为项目争取时间,这就需要我们尽可能地提高效率。“工欲善其事,必先利其器”,除了实战经验和代码习惯的形成可以帮助我们提高效率外,想要提高对自己开发的进度掌控能力,还有很多辅助工具可以帮助我们进行页面开发。比如使用 Less 或 Sass 可以帮助我们拓展和组织 CSS,大大提高 CSS 的编写效率增加了可维护性。比如可以通过 zen coding 的自动自动完成和自定义代码块让你可以剑指如飞。甚至还见过通过自定义输入法的代码块关键字来提升开发速度的。多多发掘一定会找到最合适自己使用的工具。

针对服务器的优化

页面开发也需要了解服务器的优化,尽量减小服务器负担。比如 css sprite 就是一个典型减小服务器请求数的例子。在网易邮箱的页面前端开发中大家不停地在做着各种优化,比如一直在寻求文件大小与服务器请求数的平衡;为了尽可能提高缓存利用率采用了补丁升级;对 class 名进行了混淆压缩避免命名过长的冗余;应用 base64 减少请求数量等等措施。这些都是综合权衡的结果,需要考虑各个方面整体优化。因为当页面访问量达到一定的数量级时,再小的一点优化都会达到可观的效果,再小的问题都可能会形成巨大的灾难。

拥抱 HTML5

这是一个充满机会的时代,HTML5时代的来临伴随着移动互联网的兴起创造了更大的机会,还有太多的东西值得我们去学习去发现。 HTML5 提供了丰富的 JS API 接口,需要我们去研究;CSS3的绚丽吸引了足够多的眼球,需要我们去研究;移动设备上如何开发更加适配的页面,需要我们去研究……

Stay Hungry, Stay Foolish

水是越舀越多了,却发现原来下面还深不见底,上面的内容越是深入研究就越会发现更多山川需要翻越。保持饥饿状态,用眼睛去努力发现发掘,不断丰富技能才能找到定位,突破瓶颈,正所谓“唯有高屋建瓴方可水到渠成”。形成本文是因为之前和同行讨论到瓶颈的问题,想给自己,给页面前端的同学一起找找定位,梳理一下思路。拿苹果 CEO 在斯坦福演讲的一句话“Stay Hungry, Stay Foolish”和大家共勉。

Seo先生博客转发,本文固定链接地址:https://seosir.cc/691.html

高效整洁CSS代码五原则

一、CSS重置

html,body,div,h1,h2,h3,h4,h5,
h6,ul,ol,dl,li,dt,dd,p,blockquote,
pre,form,fieldset,table,th,td{margin:0;padding:0;}

这些就够了,不需要用*了,*增大下载时间

二、CSS属性的排序

按着英文字母的排序,这样帮助你节省花费在寻找一个特殊属性的时间

三、CSS样式的组织

你应该组织你的样式表以致相关的内容靠在一起,更简单的找到想要的。使用更有效的注解。举个例子,这是我如何构造我的层叠样式表:

/*****Reset*****/
移除元素的填充(padding)和边距(margin)。
/*****BasicElements*****/
定义基本元素的样式:body,h1-h6,ul,ol,a,p,等。
/*****GenericClasses*****/
定义简单的风格,好像浮动的某一侧,移除元素的下边距, 等当然,它们大部分都与我们希望的语义不相关,但是它们是高效处理代码所必须的。
/*****BasicLayout*****/
定义基本的模板:header,footer等.帮助定义网页布局的基本元素
/*****Header*****/
定义所有Hearder元素
/*****Content*****/
定义所有内容框内的元素
/*****Footer*****/
定义所有Footer的元素
/*****Etc*****/ (more…)

CSS书写规范大全

前段时间有整理发表过《网站设计CSS规范必看》,今日在家中又找到关于网站CSS一些书写规则,这些都是比较习惯性的基础,当然了这文是比较详细的,这里还是给大家分享下,本文是有W3cTeam.com发表,我来稍微的整理一下,请大家转载注明一下。
一.?常规书写规范及方法
1.?选择DOCTYPE:
XHTML?1.0?提供了三种DTD声明可供选择:
过渡的(Transitional):要求非常宽松的DTD,它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)。完整代码如下:
<!DOCTYPE?html?PUBLIC?“-//W3C//DTD?XHTML?1.0?Transitional//EN”?“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“> (more…)

IE6的兼容性问题及解决方法

啥也不说,先上代码(有图有真相,见文底):
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>无标题文档</title>
<style type=”text/css”>
/*@set browser style:清除浏览器默认样式 */
html,body,h1,h2,h3,h4,h5,h6,hr,div,p,dl,dt,dd,ul,ol,li,form,fieldset,legend,button,iput,textarea,select,table,tr,th,td,pre,sup,address,cite,dfn,em,var,blockquote{ margin:0; padding:0}
img{ border:none;}
ul,li{ list-style:none;}
a{ text-decoration:none;}
.actFormBg{background-color:#C9F;height:25px; padding:2px 5px; background-repeat:no-repeat; float:left; margin-right:30px;}
.select94 {
background-position: -114px -42px;
cursor: pointer;
position: relative;
text-align: left;
z-index: 2; (more…)