雲橙雨林: 8月 2012

2012年8月22日星期三

Html 基本說明（25）-可以不用的html 標籤，讓你的網頁更易了解 [4]-br

最後就是不要過度使用<br/>標籤，<br/>是用來換行的，而不是用來建立一個段落，在過去設計師總是會避免他們不想要的段落間距，比如用一些換行來取代一個<p>標籤用<font>標籤使段落看起來像一個標題，其實，無須過度使用<br/>換行標籤，即可

利用css裡的margin和padding在<p>標籤中設定上下的長度，即可看出行與行的間距量

而一些過去粗糙的html 寫法就不要再寫了

結語：

過去的html的寫法，有那個時代的背景和時空，通常並非是很完整和通用的，有的在現在

看來是個很奇怪的寫法，但在橙子剛學html的時候，確實為了這個寫法感到感動，因為當

時也只有這樣寫法才會使網頁顯示自己所要表達的，不過，依照現今css的寫法中，是真的

要學習的，在實際寫網頁中，累的不是寫網頁，累的真的修改網頁，如果不照規矩寫，等

真的要修改的時候，那才叫。。。。。ooxx

Html 基本說明（24）-可以不用的html 標籤，讓你的網頁更易了解 [3]-bgcolor

再來就是不要再使用只有能裝飾外觀的，看起來又笨笨的<body>標籤屬性如以下程式碼：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>魚和橙的結合</title>
</head>
<body bgcolor="red", text="#fff">abc
</body>
</html>

結果如下：

結果出現此背景是全紅的，而有白色的字，其實事實上只要應用基本的css標籤，即可完成此事各位須想像，如果當各位想將一個網頁的專案裡，全部的body全變成另外的顏色，而專案的網頁又高達20個網頁時，你要一個一個改body的標籤，只一件可怕的事，而這樣做，做出來只能是一個很基本的網頁，無法設計出較為高檔的網頁，而也不要使用特定用於瀏灠器上來設置網頁邊距的屬性：leftmargin。topmargin。marginwidth。marginheight，這些皆可用css中的

margin 來頂替使用。

2012年8月13日星期一

Html 基本說明（23）-可以不用的html 標籤，讓你的網頁更易了解 [2]-table 標籤

再來，依上篇說明我們不要用<font>、<b>、<i>的標籤後再來就是<table> 標籤，<table>標籤不是常用嗎，怎麼可能不用呢？不是的！<table>還是要用的，只是要針對他的功能來說明對於早期的寫網頁的人，常常都是用<table>來佈局的，會造成網頁程式的混亂，即對未來網頁修改，會造成很大的麻煩。

<bodybgcolor="#ffffff">
<table style="display:inline-table;"border="0"cellpadding="0"cellspacing="0"width="664">
  <tr>
   <td><img src="spacer.gif" width="184" height="1"alt=""/></td>
   <td><img src="spacer.gif" width="480" height="1"alt=""/></td>
   <td><img src="spacer.gif" width="1" height="1"alt=""/></td>
  </tr>

  <tr>
   <td><img name="challenges_r1_c1"src="challenges_r1_c1.gif"width="184"height="148"id="challenges_r1_c1"alt=""/></td>
   <td rowspan="4"><imgname="challenges_r1_c2"src="challenges_r1_c2.gif"width="480"height="641"id="challenges_r1_c2"alt=""/></td>
   <td><img src="spacer.gif"width="1"height="148"alt=""/></td>
  </tr>
  <tr>
   <td><img name="challenges_r2_c1"src="challenges_r2_c1.gif"width="184"height="120"id="challenges_r2_c1"alt=""/></td>
   <td><img src="spacer.gif"width="1"height="120"alt=""/></td>
  </tr>
  <tr>
   <td><img name="challenges_r3_c1"src="challenges_r3_c1.gif"width="184"height="153"id="challenges_r3_c1"alt=""/></td>
   <td><img src="spacer.gif"width="1"height="153"alt=""/></td>
  </tr>
  <tr>
   <td><img name="challenges_r4_c1"src="challenges_r4_c1.gif"width="184"height="220"id="challenges_r4_c1"alt=""/></td>
   <td><img src="spacer.gif"width="1"height="220"alt=""/></td>
  </tr>
</table>
</body>

這是一個用<table>來排版的網頁內容，一堆程式碼，是不是很亂呀！所以table只限於用於你要表現數據或者表單時所用，沒事別拿來用排版！

Html 基本說明（22）-可以不用的html 標籤，讓你的網頁更易了解 [1]-font、i、b 標籤

CSS 可以讓HTML的編寫更加容易，你不須要在HTML上增加一些標籤碼，而所出來的效果，又沒有預期的好，反而更加的醜，再加上更新上的困難，例如 <font>是較明顯的例子，最主要是給本本加入顏色，改變字體類型…等等

以下介紹一些可以用CSS 取代的標籤和屬性

不要用<font> 來控制文中的顯示，這個交給css來處理會更好。

不要用<b>和<i>來使文字變成粗體和斜體，css 可以使任何標籤變成粗體或斜體，因此你不需要這些專門用於格式化的標籤，然而，如果你一定要特別強調某個字或短語，你可以用<strong>標籤[系統會將文字顯示為粗體，而搜尋系統會認為為重要的搜尋點，增加搜尋的機會]。如對於較次要的文字，就用<em>來進行說明[系統會視為斜體]。

不要用<font>、<b>、<i>的方式

<body>
<p>this is  <font color="#999999">魚橙結合</font> blog~~~ go go go </p>
<p>this is  <b>魚橙結合</b> blog~~~ go go go </p>
<p>this is  <i>魚橙結合</i> blog~~~ go go go </p>
</body>

輸出結果

要改成以下寫法：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>魚和橙的結合</title>
<style type="text/css">
span {
    color: #999999;
}
</style>
</head>

<body>
<p>this is  <span> 魚橙結合 </span> blog~~~ go go go </p>
<p>this is  <strong>魚橙結合</strong> blog~~~ go go go </p>
<p>this is  <em>魚橙結合</em> blog~~~ go go go </p>
</body>
</html>

輸出結果

結果輸出的結果是一樣的，但是各位必須改由這樣寫，因為，這樣寫才符合現在的html寫法，也讓以後更能方便修改！

參考資料：CSS the missing manul - 麥克法藍

2012年8月7日星期二

Html 基本說明（21） - 網頁顏色英文 RGB 對照表

我們在CSS設定中，可以設定RGB，也可設定你要英文顏色，一般來說如果沒有特定用的顏色，我們都可以用英文顏色名稱來替代

所以，寫了一個對照表提供各位參照！

色彩

英文名稱

RGB值


Aqua

#00FFFF


Black

#000000


Blue

#0000FF


Fuchsia

#FF00FF


Gray

#808080


Green

#008000


Lime

#00FF00


Maroon

#800000


Navy

#000080


Olive

#808000


Purple

#800080


Red

#FF0000


Silver

#C0C0C0


Teal

#008080


White

#FFFFFF


Yellow

#FFFF00

2012年8月3日星期五

Html 基本說明（20） - 製作動態選單

有許多人，會用flash來製作選單，可以做出許多漂亮的動態選單，但是flash的動態選單並不是萬能的，

他有幾項問題，造成網路的困擾

1、flash 很傷電腦資源：現在的網頁並非只有電腦在讀取，設計時更須要符合各項設備的要求，平板電腦和手機並非像電腦一樣，有那麼快的cpu和ram，所以在讀取時就會很慢。

2、flash 不利搜尋：以現在來說，seo的部份對於swf 的內容資料，並非有效關鍵字搜尋，所以不利搜尋結果。

3、flash 工具太強：其實，選單的使用對於使用者來說，他只想要找到他要的資料，致於漂不漂亮，對於使用者來說，好像不是那麼實際，就有點殺雞焉用牛刀的狀況了

所以，還是用簡易的html 和 css 的方法來設計，比較方便又快速！

先來寫段基本架構吧！

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>魚和橙的結合</title>
</head>

<body>
<header>
  <h1>魚和橙的結合-選單</h1>
  <nav>
    <ul>
      <li><a href="#">HOME</a></li>
      <li><a href="#">CONTANT</a></li>
      <li><a href="#">BLOG</a></li>
      <li><a href="#">NEWS</a></li>
    </ul>
  </nav>
</header>
</body>
</html>

執行一下吧！

很醜！讓我加入一段css 吧！美化一下吧！

<style type="text/css">
* {
    margin: 0px;
    padding: 0px;
}
h1 {
    font-family: Tahoma, Arial;
    color: #FC3;
}
nav {
    border: 1px dotted #999;
    height: 50px;
    width: 90%;
    float: left;
    background-color: #632494;
}
ul {
    list-style-type: none;
}
li {
    display: block;
    float: left;
    height: 50px;
    text-align: center;
}
nav ul li a:link, nav ul li a:visited {
    font-size: 1.5em;
    font-weight: bold;
    background-color: #632494;
    color: #ffffff;
    height: 40px;
    text-decoration: none;
    display: block;
    width: 150px;
    padding-top: 10px;
}
nav ul li a:hover, nav ul li a:active {
    font-size: 1.5em;
    font-weight: bold;
    background-color: #c6aa50;
    color: #000000;
}
</style>

加入以上的css後，先來看看結果：

加入css 就可以得到以上的結果，這有幾個設定的重點

1.一定要加入以下的css
* { margin: 0px; padding: 0px; }
2.設 <li> 及 <li a:link ..>都要設定 display:block; 及 float:left
這要設定為區塊，讓這個區塊的部位都向左浮動。選單就會變橫的
3.設定 :hover 讓滑鼠滑過時，作圖形的變化
4.在 a:link 設定 text-decoration: none;
讓連結的底線取消。
5.在 <ul> 設定 list-style-type: none;
取消讓選單的前面標示為none。

以上，就可以建設一個基本選單，各位可以試著copy程式碼，去一個一個試，應該會了解不少，試試吧！

如有問題，可以留言喔！大家討論討論！

2012年8月1日星期三

Html 基本說明（19） - 讓表格有分列顏色的效果！

在表格的設計中，當你在表格的資料越多的時候，可能有好幾十列的資料，當使用者在看的時，會看不清他要的是那一行資料，又特別拿尺來對齊，才能明顯看後到資料，此時對於網路的使用者來說，是一件很麻煩的事。

我們就利用像excel 的分色，可讓資料更明顯清楚

那網頁的表格是要如何設計呢？當然，你在<tr>裡面設 id ，一個一個設，單數設紅，雙數設白，但是資料量大的時候，對於寫網頁的來說是一個很白痴的事

當然，也許資料量大的時候，也可以考慮用php 資料庫等東西來設計，但是這個事情交給php或javascript，就有點大才小用了！

我們先來設計一個基本的表格網頁：

<!doctype html>
<html>
<head>
<metacharset="utf-8">
<title>魚和橙的結合</title>

<style type="text/css">
table {
    border-collapse: collapse;
}
</style>
</head>
<body>
   <table border="1">
        <caption>
        ● 產品規格(Specifications)
        </caption>
        <tr>
          <th scope="col">編號(No.)</th>
          <th scope="col">刃徑(D)</th>
          <th scope="col">刃長(H)</th>
          <th scope="col">全長(L)</th>
          <th scope="col">柄徑(d)</th>
          <th scope="col">刃數(F)</th>
        </tr>
        <tr>
          <td>001</td>
          <td>1</td>
          <td>2.5</td>
          <td>50</td>
          <td>4</td>
          <td>2</td>
        </tr>
        <tr>
          <td>002</td>
          <td>1</td>
          <td>2.5</td>
          <td>50</td>
          <td>6</td>
          <td>2</td>
        </tr>
        <tr>
          <td>003</td>
          <td>1.5</td>
          <td>4</td>
          <td>50</td>
          <td>4</td>
          <td>2</td>
        </tr>
        <tr>
          <td>004</td>
          <td>1.5</td>
          <td>4</td>
          <td>50</td>
          <td>6</td>
          <td>2</td>
        </tr>
        <tr>
          <td>005</td>
          <td>2</td>
          <td>5</td>
          <td>50</td>
          <td>4</td>
          <td>2</td>
        </tr>
        <tr>
          <td>006</td>
          <td>2</td>
          <td>5</td>
          <td>50</td>
          <td>6</td>
          <td>2</td>
        </tr>
        <tr>
          <td>007</td>
          <td>2.5</td>
          <td>7</td>
          <td>50</td>
          <td>4</td>
          <td>2</td>
        </tr>
        <tr>
          <td>008</td>
          <td>2.5</td>
          <td>7</td>
          <td>50</td>
          <td>6</td>
          <td>2</td>
        </tr>
      </table>
</body>
</html>

此時我們加入css，讓他有所變化：

<style type="text/css">
table {
    border-collapse: collapse;
}
caption {
    font-size: 1.5em;
}

th {
    background-color: #999;    
}

</style>

看看結果：

改好之後，我們再加入以下的css

<style type="text/css">
tr:nth-of-type(even) {
    background-color: #f3f3f3;
}
tr:nth-of-type(odd) {
    background-color: #ddd;
}
</style>

再看結果唄：

由上面改完之後加入了 tr:nth-of-type(even) [偶數]和 nth-of-type(odd) [奇數] ，這個是所謂的虛擬類別選擇器，也就是將在<tr>加入，設計他在偶數和奇數做設定，而橙子在此例中，亦加了灰色和淺灰色的顏色！

此時，如果你再加入表格，電腦會自動判定偶數及奇數欄，也就不用人為去定義id ，這就可省去不少麻煩！

各位可以試試喔！

訂閱：文章 (Atom)

色彩	英文名稱	RGB值
	Aqua	#00FFFF
	Black	#000000
	Blue	#0000FF
	Fuchsia	#FF00FF
	Gray	#808080
	Green	#008000
	Lime	#00FF00
	Maroon	#800000
	Navy	#000080
	Olive	#808000
	Purple	#800080
	Red	#FF0000
	Silver	#C0C0C0
	Teal	#008080
	White	#FFFFFF
	Yellow	#FFFF00

2012年8月22日 星期三

2012年8月13日 星期一

2012年8月7日 星期二

2012年8月3日 星期五

2012年8月1日 星期三

2012年8月22日星期三

2012年8月13日星期一

2012年8月7日星期二

2012年8月3日星期五

2012年8月1日星期三