老地方冰果室交流區

歡迎冰果室讀者在此交流
現在的時間是 07/17/2019 12:19 am

所有顯示的時間為 UTC + 8 小時




發表新文章 回覆主題  [ 7 篇文章 ] 
發表人 內容
文章發表於 : 08/19/2005 2:19 pm 
離線
討論區管理員
頭像

註冊時間: 04/19/2001 1:01 am
文章: 7056
來自: The '60s
今天跟幾個台灣的朋友在線上聊天時,碰巧提到 css 與 HTML 的話題。結果發現還是有不少人把 HTML 當成一種排版的語言,這樣硬幹出來的 HTML 通常都很難再利用 css 來進行真正的版面設計。

也因此所謂的 Semantic HTML Markup 其實才是學習 css 與 HTML 的第一步。在這邊有一篇文章對於這種以「會意」為主的 HTML 標示方式,有興趣的朋友可以參考看看:


http://mezzoblue.com/downloads/markupguide/

在看懂之後,還可以來這小考一番:

http://www.simplebits.com/bits/simplequiz/

_________________
圖檔


回頂端
 個人資料  
 
 文章主題 :
文章發表於 : 08/19/2005 3:04 pm 
離線
冰果室元老
頭像

註冊時間: 03/16/2005 5:18 pm
文章: 3205
來自: insoler.com
嗚~~~ 電腦就是這樣,永遠有 K 不完的技術.....
光那個只能【言傳】的 Markup 我就有得 K 了...

_________________
世界初、支援RAW相片上傳、分享、學習交流的 insoler • 社群網站https://www.insoler.com
攝影書:「美食写真の達人」進藤ヒカル・著


回頂端
 個人資料  
 
 文章主題 :
文章發表於 : 08/19/2005 3:08 pm 
離線
討論區管理員
頭像

註冊時間: 04/26/2001 1:01 am
文章: 8512
來自: Taipei, Taiwan
委實受益匪淺! 8)

_________________
【老地方神聖狂吃團之素吃客】【老地方神聖狂喝團之素喝客】
諸法皆空,自由自在。緣起緣滅,來去自如。


回頂端
 個人資料  
 
文章發表於 : 08/19/2005 3:45 pm 
離線
留言破百
頭像

註冊時間: 05/28/2005 8:10 am
文章: 221
來自: 鬼地方冰果室
bryanchang 寫:


但是我看不懂啊 :oops:
不過我有買The Zen Of CSS Design那本書,內容很不錯。
另外..
http://blog.yam.com/jaceju
這個Blog也有相關的排版介紹。

我認為CSS排版出問題大多都是因為IE不大支援CSS。

最後再扯一下...
http://www.csszengarden.com/
The Zen Of CSS Design這本書主要就是介紹這個網站裡面的各種Design,有空的朋友可以到這裡看一下 :roll:

現在的人嘛..專門搞IE Only的網站,然後再用表格排版(好像是<td>),到了其他瀏覽器不會亂跑位或者不能瀏覽才奇怪呢!
CSS是很不錯的技術,而且能夠把網頁容量縮小,進而增加瀏覽速度...所以當然要強力推薦一下 :badgrin:

再問一下,老地方的首頁也用表格排版的嗎?雖然有用到CSS,不過看起來好像有用表格...

_________________
老地方冰狗室


回頂端
 個人資料  
 
 文章主題 :
文章發表於 : 08/20/2005 7:24 am 
離線
討論區管理員
頭像

註冊時間: 04/22/2005 7:51 pm
文章: 2894
來自: 台北
講到這個.... 小弟寫 Widget 就都是用 CSS 說....
剪一段範例.....
代碼:
<body onload="setup();">
<div id="FrontWindow">
    <div id="topfrostyplaceLogo" onClick="FrostyPlaceLogo.click(event);"></div>
  <div id="topbar">
    <div id="topbarBackground">
      <div id="topbarLeft"></div>
      <div id="topbarMiddle"></div>
      <div id="topbarRight"></div>
    </div>
    <div id="topbarExtender">
      <div id="topbarExtenderLeft"></div>
      <div id="topbarExtenderRight"></div>
    </div>
    <div id="topbarContent">
      <div id="SelectDiv">
        <table>
          <tr>
            <td><span id="frostyplaceSelect0" class="frostyplaceButton"></span></td>
            <td><span id="frostyplaceSelect1" class="frostyplaceButton"></span></td>
            <td><span id="frostyplaceSelect2" class="frostyplaceButton"></span></td>
          </tr>
        </table>
      </div>
    </div>
  </div>

有看到一個表格,但是沒有屬性,屬性都在 CSS 裡面,其他都是... DIV
配合 CSS,有近一千行...

這樣 Load 起來會比較快嗎?以現在電腦 + 網路的速度大概感覺不太出來了吧....

不過 CSS 真的很神奇,IE 對 CSS 的支援也一樣多呀,而且也夠用了....
還可以利用 CSS 把 PNG 檔案透明的部份實現喔~ CSS 也藏有很多密技的。

差別在 javascript 能控制的在 IE 跟其他的瀏覽器不一樣囉。


回頂端
 個人資料  
 
 文章主題 :
文章發表於 : 08/20/2005 7:34 am 
離線
討論區管理員
頭像

註冊時間: 04/19/2001 1:01 am
文章: 7056
來自: The '60s
詹姆士 寫:
這樣 Load 起來會比較快嗎?以現在電腦 + 網路的速度大概感覺不太出來了吧....


Semantic HTML markup 的目的是讓資訊與外觀分離,速度上並不見得有何優勢,但是在網站的版面維護上卻大有幫助。上面網友所提的 css Zen Garden 就是個最好的例子。

_________________
圖檔


回頂端
 個人資料  
 
 文章主題 :
文章發表於 : 08/20/2005 9:43 am 
離線
留言破百
頭像

註冊時間: 05/28/2005 8:10 am
文章: 221
來自: 鬼地方冰果室
詹姆士 寫:
有看到一個表格,但是沒有屬性,屬性都在 CSS 裡面,其他都是... DIV
配合 CSS,有近一千行...

這樣 Load 起來會比較快嗎?以現在電腦 + 網路的速度大概感覺不太出來了吧....

不過 CSS 真的很神奇,IE 對 CSS 的支援也一樣多呀,而且也夠用了....
還可以利用 CSS 把 PNG 檔案透明的部份實現喔~ CSS 也藏有很多密技的。

差別在 javascript 能控制的在 IE 跟其他的瀏覽器不一樣囉。


我記得沒錯的話,以大量重複使用的font標籤與class比起來會有差異的。

然後呢...我在之前推薦的那本書上有看到,外部CSS檔會讓瀏覽器當作快取,進而增加瀏覽速度。

以現在來說,使用者應該是感覺不出來,不過省一點算一點,假如有大量的訪客,那時候流量就真的差多啦!主機也可以減少負擔。

關於IE支援CSS的問題,只要不是專門「搞怪」的新技術,IE應該都可以支援,故CSS目前用來排版應該都可以在主要瀏覽器中正常顯示。

Widget我倒是不清楚,因為沒有接觸過,只知道那是在桌面上的東西而已。

_________________
老地方冰狗室


回頂端
 個人資料  
 
顯示文章 :  排序  
發表新文章 回覆主題  [ 7 篇文章 ] 

所有顯示的時間為 UTC + 8 小時


不能 在這個版面發表主題
不能 在這個版面回覆主題
不能 在這個版面編輯您的文章
不能 在這個版面刪除您的文章
不能 在這個版面上傳附加檔案

搜尋:
前往 :  
POWERED_BY
正體中文語系由 竹貓星球 維護製作