GONE WITH THE WIND

          --tomorrow is another day

            BlogJava :: 首頁 :: 新隨筆 :: 聯系 :: 聚合  :: 管理 ::
            30 隨筆 :: 19 文章 :: 0 評論 :: 0 Trackbacks

          2009年4月8日 #

          LI代碼的格式化:
          A).運用CSS格式化列表符: ul li{
          list-style-type:none;
          }
          B).假如你想將列表符換成圖像,則: ul li{
          list-style-type:none;
          list-style-image: url(/blog/images/icon.gif);
          }
          C).為了左對齊,可以用如下代碼: ul{
          list-style-type:none;
          margin:0px;
          }
          D).假如想給列表加背景色,可以用如下代碼: ul{
          list-style-type: none;
          margin:0px;
          }
          ul li{
          background:#CCC;
          }
          E).假如想給列表加MOUSEOVER背景變色效果,可以用如下代碼: ul{ list-style-type: none; margin:0px; }
          ul li a{ display:block; width: 100%; background:#ccc; }
          ul li a:hover{ background:#999; }說明:display:block;這一行必須要加的,這樣才能塊狀顯示!

          F).LI中的元素水平排列,要害FLOAT:LEFT: ul{
          list-style-type:none;
          width:100%;
          }
          ul li{
          width:80px;
          float:left;
          }
          <ul><li>的區別
          <LI> 的參數設定(常用):
           


          例如: <li type="square" value="4">

          type="square"
          只適用于非順序清單,設定符號款式,其值有三種,如下,內定為 type="disc":
          符號 是當 type="disc" 時的列項符號。
          符號 if" width=10 height=10 border=0> 是當 type="circle" 時的列項符號。
          符號 是當 type="square" 時的列項符號。
          value="4"
          只適用于順序清單,設定該一項的數目,其後各項將以此作為起始數目而遞增,但前面各項則不受影響,其值只能是 1,2,3.. 等整數,沒有內定值。
          <UL>稱為無序清單標記。
          所謂無序清單就是在每一項前面加上 、、等符號,故又稱符號清單。
          <UL> 的參數設定(常用):
          例如: <UL type="square">

          type="square"
          設定符號款式,其值有三種,如下,內定為 type="disc":
          符號 是當 type="disc" 時的列項符號。
          符號 是當 type="circle" 時的列項符號。
          符號 是當 type="square" 時的列項符號。

          <ul>是項目列表,<li>是列表項,項目列表就是用符號來列的,所以你列出來默認的就是黑點啦,還有一個是<ol>這個是編號列表,用數字來列的,也是用<li>做列表項

           


          <li>是 list item 即列表項,但列表有很兩種,所以外面得有 <ul> 或者 <ol> 用來區別無序列表(小點點)和有序列表(1,2,3...)。

          posted @ 2009-04-13 09:22 張永耀 閱讀(399) | 評論 (0)編輯 收藏

          (from:http://www.0574dh.com/article.asp?id=420)

          /* mozilla.org Base Styles
          * maintained by fantasai
          * (classes defined in the Markup Guide - http://mozilla.org/contribute/writing/markup)
          */
          /* Suggested order:
          //顯示屬性
          * display
          * list-style
          * position
          * float
          * clear
          //自身屬性
          * width
          * height
          * margin
          * padding
          * border
          * background
          //文本屬性
          * color
          * font
          * text-decoration
          * text-align
          * vertical-align
          * white-space
          * other text
          * content
          *
          */
          posted @ 2009-04-08 12:31 張永耀 閱讀(186) | 評論 (0)編輯 收藏

          (from: http://www.webwoo.net/bc/bencandy-38-20144-1.htm)
          優化代碼:網頁技術CSS的font屬性的縮寫的技巧,縮寫有利于減少代碼,優化CSS,使之更加合理。

            css font屬性是用來控制文字字體、顏色、大小等。而font的屬性有多種,在通常情況下,我們用縮寫的辦法將多種屬性概括在一句css代碼中。這樣極大的減小了代碼,優化css文件。

            我們常用的font屬性有下面這六種:

          font-style設定斜體 如:font-style: italic;
          font-weight設定文字粗細 如:font-weight: bold;
          font-size設定文字大小 如:font-size: 12px;
          line-height設定行距 如:line-height: 150%;
          color設定文字顏色(注意不是font-color) 如:color: red;
          font-family設定字體 如:font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋體,sans-serif;

            上述的屬性,我們可以概括寫在一行font屬性里。需要注意的是color屬性我們需要單獨定義。

          font: italic bold 12px/150% "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋體,sans-serif;}

            上面的例子用一行來定義font屬性,分別是:font-style font-weight font-size line-height font-family;而color設定文字顏色需要單獨進行定義。

          posted @ 2009-04-08 12:30 張永耀 閱讀(195) | 評論 (0)編輯 收藏

          使用PHP編程的人都會碰到這樣一個問題:當PHP代碼和HTML代碼在一起的時候,看PHP代碼很費勁,整個文件也無法用Dreamweaver來編輯,這對于PHP程序員和美工來講,修改這樣的文件就象一個噩夢。
          PHP中的模板(Template)技術就是為了解決這個問題而出現的。PHP模板類有很多,比較常見的是 FastTemplate 和 PHPLib, 因為出現得早,在PHP編程界名聲很大。PHP程序員不知道這兩個類,就象VB程序員不知道MsgBox函數一樣,是一件不可思議的事情。
          以前我們需要去下載PHP模板類,現在PHP4有了自己的模板類 IntegratedTemplate 和 IntegratedTemplateExtension,功能和PHPLib 差不多。這兩個類是子類和父類的關系。一般我們用 IntegratedTemplateExtension 就可以了。讓人感到不可思議的是 IntegratedTemplate 不是從 PEAR 類繼承過來,無法用到 PEAR 類的 debug 功能。
          以下舉例子說明它們的用法,假設 IntegratedTemplate 類和 IntegratedTemplateExtension 類分別在 C:\php4\pear\HTML\ITX.php 和 C:\php4\pear\HTML\ITX.php 中。我們寫的代碼放在C:\TestPHP\PHP4\Welcome.htm 和 C:\TestPHP\HTML\Welcome.php 中。將C:\TestPHP\PHP4 在Web Server 上設成虛擬目錄 /testphp 并且給與腳本執行權限,確認C:\TestPHP\HTML\Welcome.htm 無法通過遠端瀏覽器訪問。在 php.ini 里面設置 include_path = ".;C:\php4\pear"
          例1:
          我們在HTML文件中放置變量的標記,用PHP代碼設置變量的值,然后將HTML中的標記替換掉,最后輸出到客戶瀏覽器。
          以下是 Welcome.htm 代碼,我們放了三個PHP tag(變量標記)為: {WelcomeTitle}、{UserName}、{WelcomeMessage}



          您好,{UserName}


          {WelcomeMessage}



          以下是Welcome.php代碼
          <?php
          require_once "HTML/ITX.php";

          //以下是給變量賦值,在實際代碼中可能從Database中取得數據然后賦值
          $WelcomeTitle = "歡迎來到網頁天堂";
          $UserName = "皮皮魯";
          $WelcomeMessage = "您的到來讓我們深感榮幸!";

          //一般來說這種全局變量放在單獨的一個文件中,便于維護
          $HTML_CODE_FILE_ROOT = "../HTML/";

          $tpl = new IntegratedTemplateExtension($HTML_CODE_FILE_ROOT);

          指定要替換 tag 的 HTML 文件
          $tpl->loadTemplatefile("Welcome.htm");

          替換HTML 文件中的 tag
          $tpl->setVariable( array (
          "WelcomeTitle" => $WelcomeTitle,
          "UserName" =>$UserName,
          "WelcomeMessage" =>$WelcomeMessage
          ) );

          輸出替換后的 HTML
          $tpl->show();
          ?>

          這樣寫好后,Welcome.htm 仍然可以使用網頁編輯器如Dreamweaver、FrontPage 進行編輯,Welcome.php中是純粹的PHP代碼,不含HTML,方便以后的代碼修改和維護。
          如果將 IntegratedTemplateExtension 類和 PHP4中的 Cache 類 聯合使用,在速度上可以得到很好的效果。
          PHP4 模板類還可以使用 Block,配合其他 PHP4 中的類 可以很輕松地實現數據庫數據檢索的翻頁,可以很輕松寫出論壇之類的軟件。

          補充說明:為了防止用戶直接用 Welcome.htm 看網頁,將 Welcome.htm 放在客戶訪問不到的目錄(只要不在Web Server 的虛擬目錄下即可)。對于大型的PHP項目,圖片、PHP代碼、HTML文件、多語言字符串文件都應該放在不同的目錄,這樣在多人共同做一個項目時不至于混亂。
          posted @ 2009-04-08 12:29 張永耀 閱讀(370) | 評論 (0)編輯 收藏

          分離內容和表現
          HTML從來就不是表現的手段,但從用戶端結合元素來格式化文本,開發者從中找到操作布局的方法。CSS的強大,使得現在不再需要用HTML做任何表現了,而內容也可以完全從表現(CSS)中分離出來。

          這樣做有很多好處──通常可以壓縮文件容量,有著用一個主要樣式表就可控制整個網站而不是單個頁面的靈活性,也可能使頁面更易用,更具親和力。

          遵循這些基本原則基本上意味著你不應該在HTML內使用樣式化的任何事物了。比如font的標簽,比如bgcolor的屬性不應該再使用。甚至在圖像標簽img內的邊框屬性border在XHTML 1.1中也是非法的了。別擔心,過時的HTML可以樣式化,CSS更可以樣式化,而且可以做得更好。

          不僅僅是從HTML內剝離表現,內容的結構意味著在適合的地方使用明確的HTML標簽。比如,h1,h2等應用在標題上──而不僅僅是使用CSS使字體變大而已。

          最佳指引就是一個可視化的瀏覽器上使用其默認的樣式來呈現一個沒有樣式表(或者有樣式表,但不支援樣式表的文本瀏覽器,比如lynx——譯者注)的頁面。

          表格不應該用在布局上──表格用來表示表格式的數據(我們已經不厭其煩地說了很多次──譯者注)。也許對于已經習慣傳統結構的HTMLer來說,完全改變有很大的技術難度。這個方法很大程度上壓縮了文件,而且,基于這些顯性代碼,它變得更易用,更具親和力。

          關于更多,請閱讀CSS高級指南的布局。


          在XHTML中所有的標簽都必須小寫和關閉。沒有閉合標簽的(如br和img)必須用英文半角正斜杠“/”在后面自關閉(如<br />)。注意在斜杠前應該有一個英文半角空格。

          標記也必須是合式的,使元素正確嵌套(比如<strong><em>this</em></strong>,而不是<strong><em>this</strong></em>)。

          所有的文檔都要有html,head,title和body元素。也必須從文檔類型聲明開始。

          文檔主體應該從 p, h1,h2, h3,h4,h5,h6,div, pre,address,ins或者del開始。

          屬性
          所有的屬性必須是小寫的,它們的值也要用英文半角引號括(")起來。

          精簡屬性是不允許的(比如<input type="checkbox" checked />)。按慣例,精簡屬性必須給出跟屬性名稱一樣的值(如 <input type="checkbox" checked="checked" />)。

          名字 name屬性不再是合法的了(除了在表單元素中),應該使用id來代替。

          目標屬性target不是一個合法的屬性。慶幸吧,它有些癲狂。

          在img里,alt屬性是必須的。

          親和力
          為殘障人士制做具有親和力網頁的理由是不證而明的。不僅是人道的,而且也對老年用戶和五官功能減退的用戶有利(想一想,有一天我們老了,視力消退,五官不靈,怎么瀏覽互聯網?為年老積點德,現在就考慮親和力吧!——譯者注)。親和力不僅與有嚴重殘障人士方便,也使大部分少量消退功能(特別是視覺)的用戶更為易用。

          這個問題越來越牽涉法律問題了,比如美國的“508條款”的采用,試圖積極推動強制使用親和力;在英國,所有的政府網站必須有一個指定的親和力程度。什么時候才可以有像在建筑物上的親和措施的立法,以便普遍用在商業網站上?(中國還不知道什么時候有這種立法呢!但不等于我們就不要關注我們設計的網頁的合法性。——譯者注)

          如果能遵循上述的建議,你的HTML應該已經具備了為殘障用戶服務的高度親和力。還有更多的創作使你的親和力更上一層樓,而且不難。見親和連接和親和表單指南。

          posted @ 2009-04-08 12:28 張永耀 閱讀(363) | 評論 (0)編輯 收藏

          怎么改善現有網站

          我們大部分的設計師依舊在采用傳統的表格布局、表現與結構混雜在一起的方式來建立網站。學習使用XHTML CSS的方法需要一個過程,使現有網站符合網站標準也不可能一步到位。最好的方法是循序漸進,分階段來逐步達到完全符合網站標準的目標。如果你是新手,或者對代碼不是很熟悉,也可以采用遵循標準的編輯工具,例如Dreamweaver MX 2004,它是目前支持CSS標準最完善的工具。

          1.初級改善

          • 為頁面添加正確的DOCTYPE

          很多設計師和開發者都不知道什么是DOCTYPE,DOCTYPE有什么用。DOCTYPE是document type的簡寫。主要用來說明你用的XHTML或者HTML是什么版本。瀏覽器根據你DOCTYPE定義的DTD(文檔類型定義)來解釋頁面代碼。所以,如果你不注意設置了錯誤的DOCTYPE,結果會讓你大吃一驚。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)嚴格型(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">

          對于我們初級改善來說,只要選用過渡型的聲明就可以了。它依然可以兼容你的表格布局、表現標識等,不至于讓你覺得變化太大,難以掌握。

          Tip:你懶得輸入上面過渡型代碼的話,可以訪問http://www.macromedia.com/網站的首頁,然后查看源代碼,把head區同樣的代碼拷貝粘貼就可以了。

          • 設定一個名字空間(Namespace)

          直接在DOCTYPE聲明后面添加如下代碼:

          <html XMLns="http://www.w3.org/1999/xhtml" >

          一個namespace是收集元素類型和屬性名字的一個詳細的DTD,namespace聲明允許你通過一個在線地址指向來識別你的namespace。只要照樣輸入代碼就可以。

          • 聲明你的編碼語言

          為了被瀏覽器正確解釋和通過標識校驗,所有的XHTML文檔都必須聲明它們所使用的編碼語言。代碼如下:

          <meta http-equiv="Content-Type" content="text/html; charset=GB2312" />

          這里聲明的編碼語言是簡體中文GB2312,你如果需要制作繁體內容,可以定義為BIG5。

          • 用小寫字母書寫所有的標簽

          XML對大小寫是敏感的,所以,XHTML也是大小寫有區別的。所有的XHTML元素和屬性的名字都必須使用小寫。否則你的文檔將被W3C校驗認為是無效的。例如下面的代碼是不正確的:

          <TITLE>公司簡介</TITLE>

          正確的寫法是:

          <title>公司簡介</title>

          同樣的,<P>改成<p>,<B>改成<b>等等。這步轉換很簡單。
          • 為圖片添加 alt 屬性

          為所有圖片添加alt屬性。alt屬性指定了當圖片不能顯示的時候就顯示供替換文本,這樣做對正常用戶可有可無,但對純文本瀏覽器和使用屏幕閱讀機的用戶來說是至關重要的。只有添加了alt屬性,代碼才會被W3C正確性校驗通過。注意的是我們要添加有意義的alt屬性,象下面這樣的寫法毫無意義:

          <img src="logo_unc_120x30.gif" alt="logo_unc_120x30.gif">

          正確的寫法:

          <img src="logo_unc_120x30.gif" alt="UNC公司標志,點擊返回首頁">

          • 給所有屬性值加引號

          在HTML中,你可以不需要給屬性值加引號,但是在XHTML中,它們必須被加引號。

          例:height="100",而不能是height=100。

          • 關閉所有的標簽

          在XHTML中,每一個打開的標簽都必須關閉。就象這樣:

          <p>每一個打開的標簽都必須關閉。</p>

          <b>HTML可以接受不關閉的標,XHTML就不可以。</b>

          這個規則可以避免HTML的混亂和麻煩。舉例來說:如果你不關閉圖像標簽,在一些瀏覽器中就可能出現CSS顯示問題。用這種方法能確保頁面和你設計的一樣顯示。需要說明的是:空標簽也要關閉,在標簽尾部使用一個正斜杠"/"來關閉它們自己。例如:

          <br />

          <img src="webstandards.gif" />

          經過上述七個規則處理后,頁面就基本符合XHTML1.0的要求。但我們還需要校驗一下是否真的符合標準了。我們可以利用W3C提供免費校驗服務(http://validator.w3.org/)。發現錯誤后逐個修改。在后面的資源列表中我們也提供了其他校驗服務和對校驗進行指導的網址,可以作為W3C校驗的補充。當最后通過了XHTML驗證,恭喜你已經向網站標準邁出了一大步。不是想象中的那么難吧!

          2.中級改善

          接下來我們的改善主要在結構和表現相分離上,這一步不象第一步那么容易實現,我們需要觀念上的轉變,以及對CSS2技術的學習和運用。但學習任何新知識都需要花點時間的,不是嗎?訣竅在于邊做邊學。假如你一直采用表格布局,根本沒用過 CSS,也不必急于跟表格布局說再見,你可以先用樣式表代替 font 標簽。隨著你學到的越多,你能做的就越多。好,一起來看看我們需要做哪些事:

          • 用CSS定義元素外觀

          我們在寫標識時已經養成習慣,當希望字體大點就用<h1>,希望在前面加個點符號就用<li>。我們總是想<h1>的意思是大的,<li>的意思是圓點,<b>的意思是“加粗文本”。而實際上, <h1>能變成你想要的任何樣子,通過CSS,<h1>能變成小的字體,<p>文本能夠變成巨大的、粗體的,<li>能夠變成一張圖片等等。我們不能強迫用結構元素實現表現效果,我們應該使用CSS來確定那些元素的外觀。例如,我們可以使原來默認的6級標題可以看起來大小一樣:

          h1, h2, h3, h4, h5, h6{ font-family: 宋體, serif; font-size: 12px; }

          • 用結構化元素代替無意義的垃圾

          許多人可能從來都不知道HTML和XHTML元素設計本意是用來表達結構的。我們很多人已經習慣用元素來控制表現,而不是結構。例如,一段列表內容可能會使用下面這樣的標識:

          句子一<br /> 句子二<br /> 句子三<br />

          如果我們采用一個無序列表代替會更好:

          <ul> <li>句子一</li> <li>句子二</li> <li>句子三</li> </ul>

          你或許會說“但是<li>顯示的是一個圓點,我不想用圓點”。事實上,CSS沒有設定元素看起來是什么樣子,你完全可以用CSS關掉圓點。

          • 給每個表格和表單加上id

          給表格或表單賦予一個唯一的、結構的標記,例如

          <table id="menu">

          接下來,在書寫樣式表的時候,你就可以創建一個“menu”的選擇器,并且關聯一個CSS規則,用來告訴表格單元、文本標簽和所有其他元素怎么去顯示。這樣,不需要對每個<td>標簽附帶一些多余的、占用帶寬的表現層的高、寬、對齊和背景顏色等等屬性。只需要一個附著的標記(標記“menu”的id標記),你就可以在一個分離的樣式表內為干凈的、緊湊的代碼標記進行特別的表現層處理。

          中級改善我們這里先列主要的三點,但其中包含的內容和知識點非常多,需要我們逐步學習和掌握,直到最后實現完全采用CSS而不才用任何表格實現布局。

          posted @ 2009-04-08 12:21 張永耀 閱讀(135) | 評論 (0)編輯 收藏

          主站蜘蛛池模板: 土默特右旗| 怀仁县| 双辽市| 饶平县| 临漳县| 罗定市| 浑源县| 武夷山市| 隆安县| 大宁县| 夏河县| 南木林县| 金川县| 上杭县| 沁水县| 大荔县| 镇安县| 嘉禾县| 定远县| 汽车| 都匀市| 巨野县| 临西县| 江永县| 泰州市| 朔州市| 邹平县| 法库县| 卢氏县| 德格县| 礼泉县| 康马县| 玛多县| 吴旗县| 霍州市| 海原县| 中卫市| 监利县| 剑川县| 泸州市| 翁源县|