建站常識(shí)
怎么改善現(xiàn)有網(wǎng)站為xhtml+CSS結(jié)構(gòu)
2006-08-05 11:58:00
我們大部分的設(shè)計(jì)師依舊在采用傳統(tǒng)的表格布局、表現(xiàn)與結(jié)構(gòu)混雜在一起的方式來建立網(wǎng)站。學(xué)習(xí)使用XHTML+CSS的方法需要一個(gè)過程,使現(xiàn)有網(wǎng)站符合網(wǎng)站標(biāo)準(zhǔn)也不可能一步到位。最好的方法是循序漸進(jìn),分階段來逐步達(dá)到完全符合網(wǎng)站標(biāo)準(zhǔn)的目標(biāo)。如果你是新手,或者對(duì)代碼不是很熟悉,也可以采用遵循標(biāo)準(zhǔn)的編輯工具,例如Dreamweaver MX 2004,它是目前支持CSS標(biāo)準(zhǔn)最完善的工具。
1.初級(jí)改善
為頁面添加正確的DOCTYPE
很多設(shè)計(jì)師和開發(fā)者都不知道什么是DOCTYPE,DOCTYPE有什么用。DOCTYPE是document type的簡寫。主要用來說明你用的XHTML或者HTML是什么版本。瀏覽器根據(jù)你DOCTYPE定義的DTD(文檔類型定義)來解釋頁面代碼。所以,如果你不注意設(shè)置了錯(cuò)誤的DOCTYPE,結(jié)果會(huì)讓你大吃一驚。XHTML1.0提供了三種DOCTYPE可選擇:
(1)過渡型(Transitional )
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
(2)嚴(yán)格型(Strict )
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
(3)框架型(Frameset )
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
對(duì)于我們初級(jí)改善來說,只要選用過渡型的聲明就可以了。它依然可以兼容你的表格布局、表現(xiàn)標(biāo)識(shí)等,不至于讓你覺得變化太大,難以掌握。
Tip:你懶得輸入上面過渡型代碼的話,可以訪問http://www.macromedia.com/網(wǎng)站的首頁,然后查看源代碼,把head區(qū)同樣的代碼拷貝粘貼就可以了。
設(shè)定一個(gè)名字空間(Namespace)
直接在DOCTYPE聲明后面添加如下代碼:
<html XMLns="http://www.w3.org/1999/xhtml" >
一個(gè)namespace是收集元素類型和屬性名字的一個(gè)詳細(xì)的DTD,namespace聲明允許你通過一個(gè)在線地址指向來識(shí)別你的namespace。只要照樣輸入代碼就可以。
聲明你的編碼語言
為了被瀏覽器正確解釋和通過標(biāo)識(shí)校驗(yàn),所有的XHTML文檔都必須聲明它們所使用的編碼語言。代碼如下:
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
這里聲明的編碼語言是簡體中文GB2312,你如果需要制作繁體內(nèi)容,可以定義為BIG5。
用小寫字母書寫所有的標(biāo)簽
XML對(duì)大小寫是敏感的,所以,XHTML也是大小寫有區(qū)別的。所有的XHTML元素和屬性的名字都必須使用小寫。否則你的文檔將被W3C校驗(yàn)認(rèn)為是無效的。例如下面的代碼是不正確的:
<TITLE>公司簡介</TITLE>
正確的寫法是:
<title>公司簡介</title> 同樣的,<P>改成<p>,<B>改成<b>等等。這步轉(zhuǎn)換很簡單。
為圖片添加 alt 屬性
為所有圖片添加alt屬性。alt屬性指定了當(dāng)圖片不能顯示的時(shí)候就顯示供替換文本,這樣做對(duì)正常用戶可有可無,但對(duì)純文本瀏覽器和使用屏幕閱讀機(jī)的用戶來說是至關(guān)重要的。只有添加了alt屬性,代碼才會(huì)被W3C正確性校驗(yàn)通過。注意的是我們要添加有意義的alt屬性,象下面這樣的寫法毫無意義:
<img src="logo_unc_120x30.gif" alt="logo_unc_120x30.gif">
正確的寫法:
<img src="logo_unc_120x30.gif" alt="UNC公司標(biāo)志,點(diǎn)擊返回首頁">
給所有屬性值加引號(hào)
在HTML中,你可以不需要給屬性值加引號(hào),但是在XHTML中,它們必須被加引號(hào)。
例:height="100",而不能是height=100。
關(guān)閉所有的標(biāo)簽
在XHTML中,每一個(gè)打開的標(biāo)簽都必須關(guān)閉。就象這樣:
<p>每一個(gè)打開的標(biāo)簽都必須關(guān)閉。</p> <b>HTML可以接受不關(guān)閉的標(biāo),XHTML就不可以。</b>
這個(gè)規(guī)則可以避免HTML的混亂和麻煩。舉例來說:如果你不關(guān)閉圖像標(biāo)簽,在一些瀏覽器中就可能出現(xiàn)CSS顯示問題。用這種方法能確保頁面和你設(shè)計(jì)的一樣顯示。需要說明的是:空標(biāo)簽也要關(guān)閉,在標(biāo)簽尾部使用一個(gè)正斜杠"/"來關(guān)閉它們自己。例如:
<br /> <img src="webstandards.gif" />
經(jīng)過上述七個(gè)規(guī)則處理后,頁面就基本符合XHTML1.0的要求。但我們還需要校驗(yàn)一下是否真的符合標(biāo)準(zhǔn)了。我們可以利用W3C提供免費(fèi)校驗(yàn)服務(wù)(http://validator.w3.org/)。發(fā)現(xiàn)錯(cuò)誤后逐個(gè)修改。在后面的資源列表中我們也提供了其他校驗(yàn)服務(wù)和對(duì)校驗(yàn)進(jìn)行指導(dǎo)的網(wǎng)址,可以作為W3C校驗(yàn)的補(bǔ)充。當(dāng)最后通過了XHTML驗(yàn)證,恭喜你已經(jīng)向網(wǎng)站標(biāo)準(zhǔn)邁出了一大步。不是想象中的那么難吧!
2.中級(jí)改善
接下來我們的改善主要在結(jié)構(gòu)和表現(xiàn)相分離上,這一步不象第一步那么容易實(shí)現(xiàn),我們需要觀念上的轉(zhuǎn)變,以及對(duì)CSS2技術(shù)的學(xué)習(xí)和運(yùn)用。但學(xué)習(xí)任何新知識(shí)都需要花點(diǎn)時(shí)間的,不是嗎?訣竅在于邊做邊學(xué)。假如你一直采用表格布局,根本沒用過 CSS,也不必急于跟表格布局說再見,你可以先用樣式表代替 font 標(biāo)簽。隨著你學(xué)到的越多,你能做的就越多。好,一起來看看我們需要做哪些事:
用CSS定義元素外觀
我們?cè)趯憳?biāo)識(shí)時(shí)已經(jīng)養(yǎng)成習(xí)慣,當(dāng)希望字體大點(diǎn)就用<h1>,希望在前面加個(gè)點(diǎn)符號(hào)就用<li>。我們總是想<h1>的意思是大的,<li>的意思是圓點(diǎn),<b>的意思是“加粗文本”。而實(shí)際上, <h1>能變成你想要的任何樣子,通過CSS,<h1>能變成小的字體,<p>文本能夠變成巨大的、粗體的,<li>能夠變成一張圖片等等。我們不能強(qiáng)迫用結(jié)構(gòu)元素實(shí)現(xiàn)表現(xiàn)效果,我們應(yīng)該使用CSS來確定那些元素的外觀。例如,我們可以使原來默認(rèn)的6級(jí)標(biāo)題可以看起來大小一樣:
h1, h2, h3, h4, h5, h6{ font-family: 宋體, serif; font-size: 12px; }
用結(jié)構(gòu)化元素代替無意義的垃圾
許多人可能從來都不知道HTML和XHTML元素設(shè)計(jì)本意是用來表達(dá)結(jié)構(gòu)的。我們很多人已經(jīng)習(xí)慣用元素來控制表現(xiàn),而不是結(jié)構(gòu)。例如,一段列表內(nèi)容可能會(huì)使用下面這樣的標(biāo)識(shí):
句子一<br /> 句子二<br /> 句子三<br />
如果我們采用一個(gè)無序列表代替會(huì)更好:
<ul> <li>句子一</li> <li>句子二</li> <li>句子三</li> </ul>
你或許會(huì)說“但是<li>顯示的是一個(gè)圓點(diǎn),我不想用圓點(diǎn)”。事實(shí)上,CSS沒有設(shè)定元素看起來是什么樣子,你完全可以用CSS關(guān)掉圓點(diǎn)。
給每個(gè)表格和表單加上id
給表格或表單賦予一個(gè)唯一的、結(jié)構(gòu)的標(biāo)記,例如
<table id="menu">
接下來,在書寫樣式表的時(shí)候,你就可以創(chuàng)建一個(gè)“menu”的選擇器,并且關(guān)聯(lián)一個(gè)CSS規(guī)則,用來告訴表格單元、文本標(biāo)簽和所有其他元素怎么去顯示。這樣,不需要對(duì)每個(gè)<td>標(biāo)簽附帶一些多余的、占用帶寬的表現(xiàn)層的高、寬、對(duì)齊和背景顏色等等屬性。只需要一個(gè)附著的標(biāo)記(標(biāo)記“menu”的id標(biāo)記),你就可以在一個(gè)分離的樣式表內(nèi)為干凈的、緊湊的代碼標(biāo)記進(jìn)行特別的表現(xiàn)層處理。
中級(jí)改善我們這里先列主要的三點(diǎn),但其中包含的內(nèi)容和知識(shí)點(diǎn)非常多,需要我們逐步學(xué)習(xí)和掌握,直到最后實(shí)現(xiàn)完全采用CSS而不才用任何表格實(shí)現(xiàn)布局。
近期更新
- [2023-06-25 23:22:29] 優(yōu)秀網(wǎng)站設(shè)計(jì)的五大特點(diǎn)
- [2023-04-27 14:05:55] Html 5 響應(yīng)式網(wǎng)站設(shè)計(jì)制作
- [2023-04-10 11:07:30] 網(wǎng)站建設(shè)制作流程知多少
- [2022-10-14 10:11:30] 做網(wǎng)站設(shè)計(jì)應(yīng)該更看重框架搭建還是視覺觀感?
- [2022-08-09 15:57:48] 以“產(chǎn)品”思維搭建網(wǎng)站!
- [2022-08-08 09:12:57] 一家公司的網(wǎng)站應(yīng)該有哪些板塊內(nèi)容?
- [2022-08-05 09:28:06] 企業(yè)網(wǎng)站建設(shè)為什么要設(shè)置新聞板塊?
- [2022-07-04 15:58:06] 網(wǎng)站首頁設(shè)計(jì)的好看,這個(gè)網(wǎng)站就成功了一大半!
- [2022-05-20 09:34:19] 網(wǎng)站后臺(tái)管理系統(tǒng)是什么?有什么作用?
- [2022-05-17 11:29:32] 作為消費(fèi)者,應(yīng)該如何選擇一家水平高的網(wǎng)站建設(shè)公司
- [2022-05-17 11:27:01] 高端網(wǎng)站定制與模板化網(wǎng)站應(yīng)該怎么選擇?
- [2022-04-22 16:00:41] 現(xiàn)在高端的網(wǎng)站設(shè)計(jì)都有哪些新的趨勢(shì)?
延伸閱讀
- [2009-09-21 14:23:00] 新聞鏈接中的空格處理
- [2006-05-12 17:01:00] Web與排版學(xué)上的字體問題
- [2007-08-02 17:14:00] 想用戶所想——感受亞馬遜
- [2012-09-03 16:10:29] 蘋果視頻播放代碼
- [2007-10-25 12:18:00] 關(guān)于頁面制作角色的思考
- [2009-11-16 08:29:00] 關(guān)于“用戶問題”的嚴(yán)重程度定義
- [2016-10-21 10:54:00] 什么是網(wǎng)站的轉(zhuǎn)化率?
- [2010-03-31 11:43:00] 用戶體驗(yàn)的量化方法
- [2007-11-05 11:21:00] 如何布局電子商務(wù)網(wǎng)站
- [2009-06-23 17:56:00] 電子商務(wù)搜索引擎的細(xì)節(jié)設(shè)計(jì)
- [2009-07-25 08:25:00] 設(shè)計(jì)與表達(dá)
- [2005-12-28 13:24:00] 無間斷MC正/倒播放
解決方案
輪胎行業(yè)網(wǎng)站設(shè)計(jì)解決方案 機(jī)械行業(yè)網(wǎng)站設(shè)計(jì)解決方案 房地產(chǎn)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 科技企業(yè)網(wǎng)站設(shè)計(jì)解決方案 電子家電網(wǎng)站設(shè)計(jì)解決方案 食品行業(yè)網(wǎng)站設(shè)計(jì)解決方案 集團(tuán)公司網(wǎng)站設(shè)計(jì)解決方案 企事業(yè)單位網(wǎng)站設(shè)計(jì)解決方案 外貿(mào)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 健身運(yùn)動(dòng)網(wǎng)站設(shè)計(jì)解決方案 美容與化妝品網(wǎng)站設(shè)計(jì)解決方案 建筑設(shè)計(jì)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 物流行業(yè)網(wǎng)站設(shè)計(jì)解決方案
TAGS關(guān)鍵字
html和css 插畫 扁平化設(shè)計(jì) 視覺靈感 集團(tuán)官網(wǎng) 網(wǎng)站改版 新的元素 圖形網(wǎng)格 青島網(wǎng)站優(yōu)化 青島網(wǎng)站營銷 網(wǎng)站推廣 網(wǎng)站動(dòng)畫 微信營銷的優(yōu)勢(shì) 網(wǎng)站優(yōu)化 營銷型網(wǎng)站 搜索引擎 英文網(wǎng)站建設(shè) 青島不錯(cuò)的英文網(wǎng)站建設(shè)公司 H5專題頁面 海信網(wǎng)絡(luò)科技 交互設(shè)計(jì) 青島網(wǎng)絡(luò)公司 robots 手機(jī)網(wǎng)站 網(wǎng)站視覺 網(wǎng)站開發(fā) 官網(wǎng)網(wǎng)站建設(shè) 網(wǎng)站SEO 網(wǎng)站品牌 力圖數(shù)字科技