页面制作人员的修练之道

2016-01-29 11:45 3 1 收藏

页面制作人员的修练之道,页面制作人员的修练之道

【 tulaoshi.com - Html 】

本文目的:与您分享如何学习基于web标准的网页制作。

适合人群:网页制作初学者。有一定的页面制作基础,并想学或正在学习web标准的朋友们。

备注:本文只是从理解以及概念上去分享网页制作的学习方法和步骤。力求通俗易懂,所以没有任何具体的代码、规范等内容,比如Xhtml的代码规范、CSS样式手册等具体内容我将会在文章的最后“推荐的资源列表”中将我所看到过或学习过的教程一一列出。

一、新形势下的网页制作以及职业定位

随着网络的发展,前几年还只是国外网站以及国内少数个人网站才会去实施的web标准,现在已经是大行其道了。上至新浪、163等门户网站,下至刚从学校毕业的大学生们的个人网站。到处都是它的踪影。
网站建设的分工也从原来的一人承包(从效果到页面到程序代码)的模式也逐步转变成Web Designer + Page Builder + Programer 的项目组合作开发模式。正是由于web标准的兴起,“页面工程师”这个称谓也慢慢走上了舞台并担任起了相当重要的角色。
曾在蓝色经典上看到Aether帖出来的土豆网(tudou.com)的招聘信息,感觉这个招聘信息非常的有代表性,原文如下:

引用

我非常的认同这种职业定位,所以转了过来。或许这将是未来比较流行的网站制作过程中的项目组分工合作的模式吧。

二、基于web标准的网页基本特征

从三年前开始接触网页到现在,我亲身经历了国内大多数网站的web标准重构。自己在不断的学习过程中也总结出了一点符合web标准的网页的一般特征,和大家一起分享一下。

1、页面代码容易读懂了

举一个简单的例子,按以前如果要实现一个页面的布局,一般是使用表格来划分整个页面。请阅读并运行以下代码:

运行代码框

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/html/)

   

 [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]   

[next]

而我们现在,一般会简化成这样:

然后再通过外部的CSS对页面上的元素进行布局以及美化效果,这样的代码相对于前一段应该说更精短,更易读懂。而且这个易读性,你还可以理解成搜索引擎也比较容易读懂你的内容、聋哑等有障碍人士也能通过一些特殊设备来读懂你的内容、用手机wap上网也能比较顺畅地访问你的页面。

2、页面变小了

同样的网页在新的标准下制作和以前的传统制作相比,代码一般能节约40%以上,当然这是由于以下原因造成的:

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/html/)

通常在符合标准的页面中,已经不再直接使用这种方法直接去控制显示样式了,而是放在网页之外的CSS文件中去表现。
抛弃了表格用来布局的做法后,N个表格重复嵌套的冗余代码也就不再出现了。
页面上已经不再直接使用图片进行装饰了,而是采用在CSS中使用背景图去实现。当然,具有实际意义的图片还是应该存在的,比如网站的Logo图标、广告图片、新闻图片以及其它不是用来装饰页面效果的、是属于实际内容的一部分的那类图片。
大量的javascript代码也被移植到了网页外部,在页面中将精简成 。
当然以上所谈的特征非常的表面化、也非常的局限,只是就页面代码方面描述了比较浅显的特征,针对于页面

来源:http://www.tulaoshi.com/n/20160129/1483208.html

延伸阅读
Photoshop制作人物燃烧效果 原图 最终效果  1、tulaoshi打开原图素材,按Ctrl + J把背景图层复制一层。 2、把背景图层填充黑色。 Photoshop制作人物燃烧效果(2) 3、回到图层1,按Ctrl + Shift + U去色。  4、按Ctrl + I反相。 5、执行:滤镜 风格化 查找边缘。 tulaoshi 6、把图层1复制一层,...
恋与制作人部门培训卡怎么获得 关于课程卡的获取途径: 1、许愿树——珍惜羁绊和珍贵羁绊 2、许愿树合成碎片 3、副本过关,掉落碎片凑羁绊 4、每日任务领取,拼合 课程卡的作用:升级各个部门,用来提升公司本身的四种属性能力。 公司发展必不可少的道具特权卡,虽然说城市新闻中是获取课程卡的主要途径,但是当玩家的调查能力无法提升...
Photoshop制作人物梦幻天使 最终效果 素材1 www.Tulaoshi.com素材2 1、打开两张素材图片,把素材2拖到素材1的文件里面,调节好大小,进入通道面板,复制蓝色通道,得到蓝色副本通道,按Ctrl + L调整下副本的对比度,然后按Ctrl点副本通道调出选区,按Ctrl + Shift + I反相,然后进入图层面板。 Photoshop制作人物梦幻天使(2) 2...
效果图 1 效果图 2 效果图 3 效果图 4 素材图 1 素材图 2 素材图 3 素材图 4 素材图 5 1、打开素材图,按Ctrl+a全选,按Ctrl+c键拷贝,进入通道面板,新建Alphal通道,接ctrl+v粘贴,这一步主要为下面制作高纯白黑白照片打下基础(图1)。 2...

经验教程

596

收藏

74
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部