论坛首页 Web前端技术论坛

谈一下关于XHTML网页的制作

浏览 17944 次
该帖已经被评为精华帖
作者 正文
   发表时间:2005-04-07  
目前看来关于XHTML网页的制作大家还存在很多的困惑,一一解答有些困难,我现在就XHTML网页与HTML网页制作技法上的不同来做一下说明。

首先说一下HTML网页的制作方法:
1。拿到美工设计图开始切图
2。用表格把切的图拼成一个网页
3。把内容放在已经编排好的空白处

而XHTML网页在制作技法与顺序上是截然不同的,XHTML想要做的就是内容与版式的分离,那么自然制作人员与设计师的工作可以做到一定程度的分离。

我们以我给理想做的FarideaRSS网页来进行一下XHTML网页制作流程的说明:
1。内容划分
将内容大刀阔斧的进行划分:Logo,导航,文章标题,作者,发布时间,Copyright等等,用代码表示就是:
<div id="context">
  <div id="logo"></div>
  <ul>
    <li>菜单1</li>
    <li>菜单2</li>
  </ul>
  <div id="items">
      <div class="item">
	<span class="title"></span>
	<span class="author"></span>
	<span class="time"></span>
	<div class="memo">
      </div>
   </div>
  

此主题相关图片

内容应当就是线性的排列下来,标签的目的仅仅是为了区分内容的结构,而并不用关心设计师的设计稿,忘记阴影、颜色、背景图吧,因为你和设计师在设计前已经商量好了网页内有哪些内容,所以设计也是为内容服务。

2。简单排版
这时我们拿到了设计师的设计稿,设计师们已经用很漂亮的颜色,很漂亮的版式为我们设计出了这个网页,这时就是CSS发挥威力的时候了,我们将原来定义的内容用CSS进行排版,用颜色块(先不要着急切图)对内容进行区分,先不要着急加背景图,因为那样只会扰乱你自己。示例如下:
此主题相关图片

这时就是对制作人员的CSS功力的考验了,只要坚信一个信念,没有CSS做不到的就可以了:)

3。细细品位
这是网页的大体架构已经出来了,但是需要对设计师的页面进行细细品位了,为了效果设计师多会加一些阴影或者好看的背景图片,或者渐进式的图片,此时我们可能要在原有内容中加入一些辅助的标签来放置这些背景或点缀图片,但原则是尽可能的少加,能用原标签背景做的就用背景做,此处也比较考验制作人的CSS功力。
此主题相关图片


4。兼容性
我们还要在多款浏览器中做一下测试,看一下是否在每个浏览器中均正常,然后把代码尽可能的向XHTML标准靠拢。咱们的FarideaRSS已经顺利通过了XHTML的检验。
此主题相关图片


然后咱们再来回顾一下,XHTML网页制作步骤:
1。内容大刀阔斧划分
2。简单排版
3。细细品位设计
4。兼容性与标准

总体来说XHTML网页制作时间要比传统HTML网页耗时,但出来的网页容量小兼容性好,最主要的是,不知大家是否注意到了,可以脱离DW这种可视化工具依赖,只要有一个好的CSS编辑器就可以了,这种依赖的脱离是不容小视的。

希望这篇文章对大家有用:)
   发表时间:2005-04-07  
太精彩了!
0 请登录后投票
   发表时间:2005-04-07  
为了尽可能地将程序员从Web界面上解脱出来, 显示效果由CSS一把抓. 这对Web设计人员可是一个不小的挑战. 期待有这样的合作机会.

老实说我不太喜欢用DW等东西, 还是用个能Syntax Highlight的Editor方便.
0 请登录后投票
   发表时间:2005-04-08  
我也是很讨厌DW之类的工具,写出来的网页一塌糊涂。很多多余的元素,排版又乱。嵌入JSP后更加惨不忍睹。用一般的文本编辑工具写网页,结合CSS,会让页面好看很多。如果是IE,再给CSS用HTC添加行为,那就更酷了。此外CSS还可以用来做皮肤更换,于是就叫酷毙了!
0 请登录后投票
   发表时间:2005-04-08  
问一下这个CSS牛人算美工还是程序人员,还是独立一角色
HTML文档不是程序,最终到底还是给人看的
PS完成设计-&gt;切图-&gt;DW做成页面-&gt;嵌程序或是标签   这个过程对客户和技术人员都是很舒服的

像楼主这样做不是又回到记事本做HTML时代了
0 请登录后投票
   发表时间:2005-04-08  
DW开发也许不很方便(没有办法,有一些牛人就喜欢讲这个不好).

但改页面,我想没有一个比它好的了.
0 请登录后投票
   发表时间:2005-04-08  
感谢大家的关注,网页在由HTML-&gt;XHTML-&gt;XML的转化过程中,肯定会遇到这样和那样的问题,我写这篇文章主要是想说明这种转化的本质,那就是内容与版式的分离,我看过很多目前制作的XHTML网页,感觉就是原来用Table去拼,现在改为用Div去拼,这是对XHTML的最大误解,XHTML不等于Div,我们在做一个XHTML网页的时候,应当是将注意力集中在内容,然后围绕内容添加版式,而不要受到设计图的牵绊,在制作过程中肯定会遇到一些额外标签的添加,但一定要尽可能的优化尽可能的少加,因为永远不要忘记内容是核心

至于制作工具的使用这就是仁者见仁智者见智了,我的观点就是:尽可能的不要绑定在某一个工具,工具仅仅是为了提供方便,而不是被死死的绑定在上面。

:)大家继续讨论,目前这个HTML向XHTML转化的时代,大家肯定有很多苦水很多牢骚,大家一起来讨论一下吧
0 请登录后投票
   发表时间:2005-04-09  
哈哈 我一直用emacs编辑html 比别人用dw还快
0 请登录后投票
   发表时间:2005-04-10  
不懂
感觉上写CSS是无比头痛的事情
而且在实际项目实施过程中
写代码的程序员好找
画界面的美工好找
但能写会改CSS的人却很难找啊

这种方法厉害、完美,但成本未免大点。
0 请登录后投票
   发表时间:2006-11-30  
我一直觉得,Web设计中表示层设计工程师会越来越占比重,具体技能为: 切割网页,使用 XML/CSS/Javascript 等,随着Web2.0模式的持续发展,这种职业的需求量会越来越大。
0 请登录后投票
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics