睡蓮‧池水間

Guest
2012-Feb-12  
0 位會員和 8 位訪客在線上

文章 :: 標準之路

XHTML網頁製作流程

changzheng
 
藍色理想 
目前看來關於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編輯器就可以了,這種依賴的脫離是不容小視的。

    «« 小談分辨率 網頁製作,改變你的思維方式 »»    

引用

  • 文章地址: http://waterlily-lsl.com/modules/article/view.article.php/c1/75
  • 引用地址: http://waterlily-lsl.com/modules/article/trackback.php/75

評分

10
9
8
7
6
5
4
3
2
1


 

API: RSS | RDF | ATOM

回覆及設定

    關閉


 

最 新 發 表 及 資 訊 區

此為池水間 banner ,需要安裝 Adobe Flash Player 才能觀看內容。

最新留言

最新留言:2012-Jan-6 11:13am
留言編號:76
留言者: wuji888
網主回覆:
總留言數: 71

前往萍踪留影

造訪統計

今天:311
昨天:544
本週:311
本月:6151
總計:376535
平均:292

連結

Powered By XOOPS
Valid XHTML 1.1
Valid CSS 3
登 入