建站资讯

怎样运用网站建设的技巧尽快展现网页的细节

作者:admin 发布时间:2020-07-26
页面是互联网技术产品的表现层面,不仅讲求外观,而且会应对更新迅速的互联网技术产品需求。要成为一名优秀的开发人员,经验积累是不可或缺的,而一部分经验归纳起来正是在工作过程当中的细节。下文介绍的即是在页面开发流程中的各个方面的细节内容,希望对这些细节内容的探讨,可以帮助各位页面开发人员做得更出色,以更优雅的姿态来书写页面。
从静态网页的 切片 开始
从UI设计图到静态网页一般都称作 切图 。这个词非常容易令人联想到Photoshop中的 切片工具 ,但现在切片工具用得并不是很多,绝大多数在页面中需要用到的视觉元素,都需要拼合到一个或多个单独的图片中。
画面元素的分离和组合
快速更新的互联网技术产品需求使得UI室内设计师需要优先保证UI设计图的视觉冲击,也因此有时没有时间整理UI设计图源代码。所以,拿到手边的UI设计图,可能存在图层缺少命名,分组混乱等问题。
怎么才能找到需要分离的视觉元素所在的图层?此刻应该使用的是Photoshop的 自动选择 。另外要注意的是,某些边缘阴影及高光是由图层样式生成的,在选取这些部分时应选取旁边的实际绘图内容。

Photoshop的 移动工具 ,在使用时勾选一个 自动选择 的勾选框即可。此外可以设置是自动选择图层还是图层所在的分组。
拼合是在一个新建立的psd源代码上进行,命名应当与最后输出的图片命名相同。拼合时应当使用网格做整齐的排列(键盘快捷键Ctrl + 切换网格显示)。整齐的拼图不仅方便多人编辑,而且css代码中的背景坐标定位会更加快捷(谁都喜欢有规律的数字)。

在Photoshop的编辑 首选项中可以设置合适的网格尺寸。
为方便后续编辑,拼图源代码应适当保留原UI设计图图层(如保留文本图层,不做图层合并,方便以后的文本更改),同时做好图层命名和分组。此外,推荐在底部增加2个图层:底色层和网格尺寸描述层。


底色层:Photoshop默认的表示透明区域的网格背景(和前面的尺寸标识的 网格 不同)中,子网格的边线不易看清。而加上一个铺满全画布的底色,网格线就非常容易辨识了。底色一般用纯白色即可,对于部分颜色偏白的UI元素,可以填充黑色作为底色。底色层只是方便排列元素,在输出图片时,底色层设置为不可见再输出。
网格尺寸描述层:空白图层,采用 20 20 这种格式的命名,说明使用的网格尺寸大小。这样,多人编辑时,可以方便别人很快的设置出适合编辑此拼图源代码的的网格尺寸。
拼图源代码一定要保存到开发目录中,可以在images目录中,单独建立命名为_psd的目录,然后相关的拼图源代码都保存在这个目录中。
对应的,在静态页中用作图片占位和示意的临时图片(如用户头像),可以保存在命名为_temp的目录中。
gif与png-8图片的锯齿问题
为何gif和png-8格式的图片存在杂边?这是由于,gif和png-8格式的图片使用的是索引颜色编码,而索引颜色中,只存在透明索引颜色(用来绘制透明的像素点,也即空白点),而不会有半透明索引颜色。但是,一般的视觉元素的边缘都存在半透明的像素点以形成视觉上的平滑过渡,这些半透明点要保留到gif和png-8,就必须指定用一种实色替代。这也就是Photoshop中的杂边选项的意义。

Photoshop的这个颜色表中能看到,只有这一个透明索引色。
Photoshop中还可以选择杂边为 无 ,这时半透明点会被丢弃,不再保留到输出的图像中。由于边缘缺少用作过渡的像素点,这样的图像可能会有明显的锯齿,多数情况下效果不佳。

点击 杂边 旁边的小箭头,下拉列表中即可以选择 无 。
如果选择一个颜色作为杂边色,Photoshop在生成索引颜色表时会把图像中的半透明像素点也考虑进去,并用合适的索引颜色(参考选定的杂边色)替换这些半透明像素点。存在杂边色的gif和png-8图中的视觉元素,处于和杂边色相同的背景颜色中的时候,效果最佳,所以杂边色的选取应参考最终元素所在的背景。
如果有多种类别的背景而无法保证效果,应使用png-24。这里的png-24事实上基本都是png-32,即应包含清晰度alpha通道。这样表述也是由于在Photoshop中,只用了一个勾选框的设置来区分png-24和png-32。

勾选 清晰度 后,事实上保存的是png-32。
针对不兼容png-32的IE6,单独输出一个效果较差的png-8或gif,在一定程度上保证IE6的正常外观。这也是针对不同电脑浏览器的 渐进增强 开发思想的体现。

为IE6单独保存的png-8图。
HTML网页的DOM结构
在写html之前,认真阅读UI设计图是必要的。一方面,理清页面的各个构成部分以及这些构成部分彼此之间的联系。另一方面,分析页面及页面的构成部分应该用怎样的DOM结构实现。
页面的DOM结构因人有所不同的。从基础的层面来说,只要能够实现UI设计图的意图,用哪种DOM结构都是可行的。而从专业的层面来说,页面的DOM结构不仅要易于其他的开发人员辨识和读取,方便协同开发,而且要有良好的可维护性和拓展性,方便后续的增减和更新。
语义化的概念
语义化 的意思是说,在写html时,依照页面的内容,选取最好的html标签,以体现html标签的本意。如 p 表示文本段落,那么如果一段文本确实是段落,那么就应该把它们放在 p 标签中,而不是使用没有语义的 div 。
语义化,不仅有益于SEO,而且更重要的是使网页页面层次和结构清晰,在易读性上十分友好。试想一下,如果一个页面的 em 标签中的内容,从上下文看确实就是emphasis(强调)的内容,是否会觉得这个页面很整洁很亲切呢?
但是,语义化也不是绝对的。微博的新的的站外组件(widget),并不遵从语义,仅使用限定的标签,如块元素只使用 div ,非链接行内元素只使用 cite ,图标只使用 u 。如下图所示最近的新版集体微博组件。

新版集体微博组件的标题部分(红线圈出部分)的代码:

这样无视语义并限定标签的使用,是为了尽量减少组件被引用的站点的样式,对组件本身样式的干扰。 cite 和 u 都是很少使用的标签, div 又是非语义的标签,这样,站点css中以标签作为选择器写的样式,就很少会影响到组件(没有多少站点会直接对 div 等非语义标签写reset或默认样式)。
class命名的一致性
先来看使用Firebug查看的以下一段html代码。(取自开发中的微博话题组件)

能看出特别的地方吗?没错,就是所有的html节点,不管位于DOM结构中多深的位置,都有自己的class命名。
这样做有哪些好处?
首先,需要明确,少一些class命名,通过节点之间的相互关系,当然还可以实现对正确的html节点设置样式。这也是我们过去写html一般的做法,并认为这样可以精简html。事实确实如此,但现在我们应该认识到,精简的html却会带让我们愈来愈麻烦的css维护。
CSS Wizardry的Harry Roberts对此做了简单的解释说明。
Imagine a teacher trying to control a class of kids who have no names. That s how we used to write HTML .
意思是说,就像我们为何给人取名字一样,当事物被精确地命名后,事情会变得容易许多。稍微想一下就能够理解,直接说 皮卡丘 比说 小智一直带在身边的神奇宝贝 要简单地多。更重要的是,如果节点的位置发生了改变,原来的基于节点位置的写法就不再正确了,但使用名字的写法则不会存在这个问题。
把一些工作推给html,让css更加容易一些吧。想象自己是一个班级的老师,有哪些会比每一位同学的名字更方便表示每一位同学呢?
网页外观与CSS文件
CSS本身非常容易写,但合理的CSS架构却不是一个简单的事情。要保持CSS的可维护性,非常简单的做法就是追求CSS的复用性,尽量减少CSS量。
任何时刻,都要写CSS注释
CSS一般来说易读性较差,因此需要我们多写CSS注释。注释内容越丰富和细致越好,而且建议结合ASCII Art(字符画)。如果有时间,甚至可以在一个CSS文件中写一个目录。

如果是后续增加更改,还能够附上时间和项目基本信息,这在多人协作中很有用。

优雅的CSS选择器
优雅的CSS选择器不仅看上去亲切,而且还可以提升电脑浏览器的样式渲染效率。
主要使用类名(CLASS)作为选择符,不做额外的限定。

上图中下一种写法更好是由于非 p 标签元素也有效,标签可以随意替换,而且样式渲染时更加高效。
避免多余的继承关系。继承写法是为了不相同命名的选择符的样式互相影响,但在层级使用上要注意适度。

电脑浏览器样式渲染引擎是按照从右向左的顺序来解析CSS选择器,最右边的选择符称为关键选择符(Key Selector),每个额外的继承选择符都会增加样式渲染引擎的查找匹配时间。而且,要是没有额外的继承关系,子元素会有更好的重用性。
结论
在实际的经历中,我们开发人员所遵循的,主要是在经验积累中的成果,称为 最佳实践 。在心中明确这样一种 最佳实践 的理念,就能够帮助自己培养良好的习惯,在页面书写上做得更加自然,更加 优雅 。

发送到:点击次数: 更新::17 【打印此页】 【关闭】

收缩