现在很多网站还依然保留着传统布局方式,这种布局是以效果为中心,制作页面首先考虑的是页面的布局,例如,一个两列布局,首先想到的是用表格的两列单元格来完成列布局,并且大量使用表格的行列进行排版定位,也没有考虑到网页的可用性和W3C标准规范,页面含有大量的用于表现的标签例如设置字体样式的font标签。这些和网页制作工具的发展也有关系,随着所见即所得工具的发展,制作网页变得非常简单,只要通过鼠标就可以制作一个简单的网页,在编辑器里使用表格可以快速建立一个复杂的布局页面,由于页面制作的高效,很多网站都是使用基于表格的布局。 1.1 表格布局 表格布局是利用表格单元格的拆分,及表格的嵌套来完成复杂的布局,这种所谓的复杂布局使用所见即所得工具完成并不复杂,使用鼠标可以非常方便的拖拉表格,通过工具提供的参数设置可以快速的建立复杂的布局,甚至可以不用懂HTML,因为这些都由编辑器自动生成 表格布局的优点就是布局效率高,这对于追求效率的公司来说无疑是件好事,对于很小的项目使用这种布局并无大碍,并可以保持高效,但对于大项目使用表格布局,会给后期维护带来风险,前期制作会很高效,但后期维护会感觉到繁琐,复杂,大量重复劳动。 为了弥补这些缺点,标准布局技术逐渐发展起来 1.2标准布局 标准布局首先考虑的不是如何实现效果,而是如何用有意义的标签把文档结构写出来,当结构确定后,再使用CSS来布局,实现样式表现,把网页分为3部分,内容,表现层,结构 1.2.1 内容 内容就是指网页原始内容,如果是一段文字它就是纯文字,图片就是一张图片,如果光把内容显示出来,不能区分它们,例如标题和段落都是文字,如果光显示它们会无法区分,所以内容和结构是密不可分的,这里只是在概念上把它们分开,实际制作,结构是需要根据内容来编写的 1.2.2 结构 结构是把内容通过使用复合语义的HTML标签组成的,例如,一段文字使用p标签,一个标题可以根据标题的级别使用H1~H6,除了这些标签,还有定义好的ID名,类名这些是给css完成样式表现的接口 1.2.3 表现 表现就是根据内容结构文档提供的接口也就是标签,ID名,类名来给结构定义样式,样式由css选择符,属性和属性值组成。 光有了这些思想还不够,由于另外一个原因导致制作完美页面的困难度大大增加。 1.2.4 标准布局的难点 由于浏览器之间对W3C标准的支持都有差别,导致页面在各个浏览器之间表现不同,这使得网页制作人员得花很多时间针对各个浏览器来写特殊样式,处理浏览器之间的差异,而又得差异需要大量的实践经验才能快速解决,这给标准布局带来了难度,同时也降低了制作的效率,虽然标准布局也有缺点,但它的优点远大于缺点。而且未来它的某些缺点将被纠正。 1.2.5标准布局的优点 首先使得网页更具它本身的语义,web程序开发人员只需在结构清晰简单的页面文件里加上他们的代码,不需要去杂乱的页面代码中去找放代码的位置,使得网页体积更小,大大提高了网页的加载速度,搜索引擎对符合标准的页面青睐有加,使得页面更容易被访问,后期维护的风险大大降低,网页样式的修改只需要css文件,修改带有程序代码的页面文件的几率被大大降低,网页可以在不同的客户终端显示,无须另外做特殊开发…这是目前我所了解的,还有很多。 这里介绍了标准布局的分层思想,了解了它的优缺点,有了正确的思想再按照思想实践,还需要加上一些规范. 2 网页制作规范 网页制作规范目前并没有一个统一的规范,都是从软件工程中借鉴过来的一些规范 2.1命名规范 选择符命名是在写结构时就需要做的事情,一般以小写英文单词组合,单词间可以用”_”,”-”,来间隔单词,还可以和软件中变量命名规范相同,首单词首字母小写,后面单词首字母大写 2.2 css组织划分及注释 Css虽然简单但是良好的组织划分以及注释,可以让css更具可读性,当维护修改起来时,可以很方便的找到修改的位置,css划分要看项目大小及项目的页面特点来分,所有页面公用样式以及一些常用的工具样式的放到一个文件,其它页面按照页面结构划分,把具有相同页面结构的页面的公用样式提取出来给它们公用,然后就是页面的私有样式,看私有样式的多少,设定一个标准,多余多少就单独提出来,否则合并到局部公用文件。 有了思想,有了规范,还有一个必须的理清楚的,那就是流程。 3 网页制作的流程 网页制作人员应该在网页策划阶段就参与项目,这样可以有充足的时间分析页面结构,根据文档内容写好结构,先写公用结构的样式,再写局部私有结构的样式,此流程是站在整个项目所有页面的全局角度考虑. 3.1 结构先行 一般项目中的页面会有个页面说明文档,有功能说明,区块栏目划分和线框图,这份文档会交给设计师,让设计师根据线框图设计出页面的终样式,在设计师的设计过程中,页面制作人员可以同时做好页面结构分析,可以根据这个文档中的内容及线框图把部分结构代码写出来,当拿到设计稿后再根据设计稿修改和添加结构,当设计中有些地方不利于标准,或会增加页面制作成本,可以和设计师以及产品经理沟通修改设计,直到结构终写完确定。 3.2 先公后私 当文档结构分析编写完后,开始写样式,首先要写的是公用结构的样式,可以看作是制作页面的样式框架,当公用样式做好后,页面的大致雏形会出来,再写页面私有的特殊样式,即单独存在此页面结构的样式 3.3 页面表现测试 当结构和样式都完成后,并不代表工作就此完成,因为客户不光使用一种浏览器,需要测试不同浏览器下的表现,然后根据表现修改样式直到在各个主流浏览器下的表现都统一。这个过程所需时间,和网页制作人员的经验相关,经验丰富的处理这些非常熟练,而对于新手这将是一个痛苦的过程。简单介绍完了页面制作的流程,这是网页制作关键的过程,有了清晰合理的过程,有如一个良好的计划,而前面的页面标准思想相当于丰富的资源,页面制作规范相当于计划的实施质量保证,良好的计划+丰富的资源+实施质量保证= 完美的执行,即,思想+规范+流程=完美的页面。 4 网页制作的未来 随着互联网的发展,页面类型也在不断的变化,简单的布局技术已经不能满足需求,页面将朝着标准化方向发展,也更注重用户体验和可用性,而用户体验需要很多交互,完成页面交互则需要大量高质量的脚本程序,随着IE 8 宣布完全支持W3C标准,这标志着在未来浏览器表现将终归统一,页面制作人员将不需要去考虑浏览器兼容性问题,可以把更多的时间关注在用户体验和可用性上,也对页面制作人员带来了更高的挑战。 |