XHTML網頁與HTML網頁製作技術對比

2021-01-07 站長之家
首頁

 > 

教程

 > 

關鍵詞

 > 

網頁最新資訊

 > 

正文
XHTML網頁與HTML網頁製作技術對比

目前看來關於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>
<span></span>
<span></span>
<span></span>
<div>
</div>
</div>

內容應當就是線性的排列下來,標籤的目的僅僅是為了區分內容的結構,而並不用關心設計師的設計稿,忘記陰影、顏色、背景圖吧,因為你和設計師在設計前已經商量好了網頁內有哪些內容,所以設計也是為內容服務。

2、簡單排版

這時我們拿到了設計師的設計稿,設計師們已經用很漂亮的顏色,很漂亮的版式為我們設計出了這個網頁,這時就是CSS發揮威力的時候了,我們將原來定義的內容用CSS進行排版,用顏色塊(先不要著急切圖)對內容進行區分,先不要著急加背景圖,因為那樣只會擾亂你自己。

這時就是對製作人員的CSS功力的考驗了,只要堅信一個信念,沒有CSS做不到的就可以了

3、細細品位

這是網頁的大體架構已經出來了,但是需要對設計師的頁面進行細細品位了,為了效果設計師多會加一些陰影或者好看的背景圖片,或者漸進式的圖片,此時我們可能要在原有內容中加入一些輔助的標籤來放置這些背景或點綴圖片,但原則是儘可能的少加,能用原標籤背景做的就用背景做,此處也比較考驗製作人的CSS功力。

4、兼容性

我們還要在多款瀏覽器中做一下測試,看一下是否在每個瀏覽器中均正常,然後把代碼儘可能的向XHTML標準靠攏。咱們的FarideaRSS已經順利通過了XHTML的檢驗。

然後咱們再來回顧一下,XHTML網頁製作步驟:

1、內容大刀闊斧劃分

2、簡單排版

3、細細品位設計

4、兼容性與標準

總體來說XHTML網頁製作時間要比傳統HTML網頁耗時,但出來的網頁容量小兼容性好,最主要的是,不知大家是否注意到了,可以脫離DW這種可視化工具依賴,只要有一個好的CSS編輯器就可以了,這種依賴的脫離是不容小視的。

相關焦點

  • 網頁設計HTML_CSS_VB語言描述的網頁
    紙介質或網頁版面涉及到的元素及其屬性。使用WWW特有語言HTML語言—基礎描述語言後臺計算機語言描述—代碼HTML<html><bodystyle="background-color: #ffff00"><p>WWW_WEB_入門實踐—網頁設計HTML語言<br />
  • HTML網頁製作技巧
    首頁 > 教程 > 關鍵詞 > 最新資訊 > 正文 HTML網頁製作技巧
  • HTML語言和XHTML有什麼區別?XHTML有什麼特點?
    HTML(文本標記語言)是英文HyperText Markup Language的簡稱,用於創建網頁的標準標記語言,html並不是程式語言,HTML 運行在瀏覽器上由瀏覽器來解析翻譯給網站訪客,它是建設網站的基礎。Html5代表了下一代html的發展,html5功能已經很強大。
  • 網頁設計_HTML_CSS語言描述的網頁
    :我的網頁製作嘗試</h1><hr /><pstyle="font-family:華文新魏;color:red;font-size:30px">這是我的網頁製作嘗試的第一個段落。
  • 初識HTML中的塊元素——零基礎自學網頁製作
    <div>塊元素基礎屬性講解<div>元素是個有故事的元素,這個元素很早就出現在html超文本標記語言中,它設計之初就是為了解決網頁頁面布局的需求。但是遺憾的是它出生後一直懷才不遇。在我還上初中的時候,智慧型手機還沒有出現,更沒有平板電腦等行動裝置。
  • 網頁設計HTML_CSS_VC#語言描述的網頁
    使用WWW特有語言HTML語言—基礎描述語言後臺計算機語言描述—代碼HTML<html><bodystyle="background-color: #ffff00"><p>WWW_WEB_入門實踐—網頁設計HTML語言<br />
  • 常用DIV+CSS網頁製作布局技術技巧
    首頁 > 教程 > 關鍵詞 > CSS最新資訊 > 正文 常用DIV+CSS網頁製作布局技術技巧
  • HTML元素中的屬性1——零基礎自學網頁製作
    DOCTYPE HTML> <html> <head> <title>第一個網頁</title></head> <body> <h1>第一個網頁</h1><hr><a href="https://www.bilibili.com/read/cv2720755" target
  • 網頁前端技術HTML教程第一講
    比如 <html><p><h1><h6>標籤通常是成對出現的.例如<html></html> <body></body> <p></p>等。(當然也有特殊的標籤,比如</br>它就不是成對出現的)後面會給大家講解常用的全部標籤。
  • 網頁Web標準:使用有意義的HTML標記製作網頁
    首頁 > 教程 > 關鍵詞 > 最新資訊 > 正文 網頁Web標準:使用有意義的HTML標記製作網頁
  • 網頁設計基礎:Div+CSS布局入門教程
    首頁 > 教程 > 關鍵詞 > 最新資訊 > 正文 網頁設計基礎:Div+CSS布局入門教程
  • 前端入門教程網頁導航欄製作教程(技術:HTML+CSS)
    整個布局用到的是flex布局:大家可以去看一下阮一峰老師的教程:阮一峰flex布局左側logo部分我們用到的標籤有:1、h3標籤:<h3><a href="index.html">多多魚網頁</a></h3>h3是一對有開始有閉合的標籤組合。
  • 網頁設計與製作專題 | HTML網頁代碼
    整理:@呈旭chx來源:@chx工作室official轉載  (註:僅供參考)基於Web標準的網頁設計與製作複習參考資料
  • 學習網頁製作並不難,HTML菜鳥教程,從這裡開始第一課學習
    很多朋友想學一下網頁製作,上網一看,只要涉及到網頁製作,都離不開HTML這個詞語,HTML是HyperText Markup Language的簡稱,想學習HTML語言,先得了解一些基本知識,今天這邊內容可以作為學習HTML的菜鳥教程第一課。
  • 網頁設計HTML_CSS語言_外部樣式
    後臺計算機語言描述—HTML與CSS代碼_內部樣式<html><styletype="text/css">body {background-color:yellow}</style><body></body></html>
  • HTML、XML和XHTML的聯繫與區別
    HTML文本就是我們通常所說的網頁,擴展名可以是html或htm。  XML(Extensible Markup Language),可擴展標記語言。XML是標準通用標記語言的子集,是一種用於標記電子文件使其具有結構性的標記語言,它被設計用來傳輸和存儲數據,是對超文本標記語言的補充。
  • 小白入門網頁前端必知html基礎知識
    HTML是網頁內容的載體。內容就是網頁製作者放在頁面上想要讓用戶瀏覽的信息,可以包含文字、圖片等。網頁製作學習群:四九四零六,四九三四。
  • 贈書|《網頁設計與製作(HTML+CSS)》附視頻
    HTML與CSS是網頁製作技術的核心和基礎,也是每個網頁製作者必須要掌握的基本知識,兩者在網頁設計中不可或缺。本書從初學者的角度,以形象的比喻、實用的案例、通俗易懂的語言詳細介紹了使用HTML與CSS進行網頁設計與製作的各方面內容和技巧。
  • HTML網頁製作常用標籤及說明——前端開發入門
    上篇文章我們介紹了怎麼創建一個最基本的網頁,這篇我們介紹一下經常被使用的標籤及用途。顯示在瀏覽器中的內容都要添加在基本模板中的body標籤的中間,這點一定要記住!!下面的body標籤中各個標籤,做了解釋說明,大概了解各個標籤長什麼樣子,能記住就更好了。
  • 基於XHTML的DIV+CSS網頁製作布局技術
    文本流向對象的左邊  它是怎樣工作的,看個一行兩列的例子  xhtml:  <div id="wrap">  <div id="column1">這裡是第一列</div>  <div id="column2">這裡是第二列</div>  <div>