簡單網頁設計                 by 蔡神 寫於 1994年 tsaiwn@csie.nctu.edu.tw 
    網頁雖然可以很複雜, 但其實也可以很簡單 :-)
如果你已經習慣用 DreamWeaver 或 FrontPage 等工具做網頁, 那這篇不必看了 :-)
 
    網頁也是文字檔案(text file), 一般只要檔案尾巴取 .htm 或是 .html 就會被當作是網頁。
(1)最簡單的網頁就是以所見即所得的方式呈現的網頁,
   也就是你先用文字編輯器打出你要的"樣子",
   然後在該檔案最前面加入以下兩列即可:
      <html><body bgcolor=lightYellow>
      <pre><b><font color=blue size=4>

(2)不過有兩個符號要特別注意: & 和 <
   所以在要補上(1)所說的兩列之前請先用文字編輯器(如 notepad 即可)依序做以下兩件事情:
   (a)用編輯全部更換(replace all)的方式把 & 改為 &amp;
   (b)用編輯全部更換(replace all)的方式把 < 改為 &lt;
     注意以上(a)(b)一定要照順序做!
       不過如果你的文章中所有的 & 和 < 兩符號之後都至少有一個空格,
     那可以不必做這(a)(b)兩件事! 
     但是, 通常如果是程式碼, 可能會用到 && 這代表 "且"的符號,
     也就是連續兩個 & 顯然中間不可以空格, 那你就一定要做 (a)規定的換掉所有的 & 
(3)這樣已經是個視覺上看起來不會很難過的網頁(淡黃色底, 藍色四號字, 粗體);
   但有時你想強調某段文字, 可考慮把該段文字用 font 標籤夾住, 例如:
       <font color=red>這會變紅色字體</font>這恢復藍色字體
   如果文字要有底色, 加入 style 屬性即可, 例如:
       <font color=red style="background:yellow">這是紅色字體但黃色底</font>
(4)偶而用 <hr> 畫一條橫線, 例如畫一條紅色粗細是兩點的線:<hr color=red size=2>


(5)必要時中間可以夾一個 table 以便用不同的底色顯示文章資料:


   <table><tr bgcolor="#66ffcc"><td><pre><b><font color=blue size=4>
   例如這便是一個 table 表單,                                   
   但其實只有一列一格, 裡面架構與整個網頁類似!
   底色 #66ffcc 是十六進位表示 RGB 紅色綠色藍色的組成,
   就是你現在看到的底色, 淡淡的淺綠色, 因紅色成分 0x66, 綠色滿格 0xff, 藍色佔 0xcc,
   建議只使用 00  33  66  99  cc  ff 的組合(網頁安全色), 當然底色要注意不可以讓字變不清楚。
   </tr></table>


   以下再看一次, 改用暗紅色字體, 深黃色底:


   <table><tr bgcolor="yellow"><td><pre><b><font color=darkRed size=4>
   例如這便是一個 table 表單,                                   
   但其實只有一列一格, 裡面架構與整個網頁類似!
   底色 "yellow" 相當於是十六進位 "#ffff00" 表示 RGB 紅色綠色藍色的組成,
   就是你現在看到的底色, 淡淡的淺綠色, 因紅色成分 0x66, 綠色滿格 0xff, 藍色佔 0xcc,
   建議只使用 00  33  66  99  cc  ff 的組合(網頁安全色), 當然底色要注意不可以讓字變不清楚。
   </tr></table>


(6)如果要放一張圖, 可用 img 標記, 例如以下會秀林志玲的照片:
   <img width="258" src="http://www3.365shu.com/images3/wall/20060726/Chiling010.jpg"> 寬度調整為 258像素

   請注意, 圖片要先夾檔到你文章, 存檔後再重新編修你文章, 複製圖片網址(捷徑)來用;
   或者,
   你也可以把圖片上傳到大家可看得到的網站, 例如你的臉書(Facebook)或其他部落格或是網頁空間,
   且要記得開放權限給大眾, 然後找出該圖片的網址: 
       用滑鼠右鍵點該圖片, 選最底下的"內容" (Property), 
       彈出的窗就可看到網址, 用滑鼠左鍵在該網址快速連點三下, 敲 Ctrl_C 複製即可。
   
(7)如果你要凸顯一段落的開始, 可以考慮臨時換 size=5 或 size=6 的紅色字, 
   甚至該標題用黃色底比較明顯, 例如: 
<font color=red size=5 style="background:yellow">
這是紅色五號字黃底
</font>
(8)如果你要設定超連結(HyperLink), 可用 <a href="網址"> 與 </a> 夾住一句話, 例如:
   <a target=_blank href="http://www.ydu.edu.tw">點這會連到育達首頁</a>


    你現在看到的這網頁就是這樣做出來的, 可以點按檢視原始檔(View Source)查看!
以下是方便複製去做這篇所講的簡易網頁: 
請把滑鼠點這右邊壓下開始往下拖即可複製:    
 

<html><body bgcolor=lightYellow>
<pre><b><font color=blue size=4>

   這裡放你已經修改過 & 和 < 兩個符號的文章
   注意要先把 & 改為 &amp;
   再把 <  改為 &lt;

<font color=red>這會變紅色字體</font>這恢復藍色字體
    繼續 ...
<font color=red style="background:yellow">這是紅色字體但黃色底</font>
 

<font color=red size=5 style="background:yellow">
這是紅色五號字黃底
</font>
以下畫一條藍色線, 佔畫面 58%, 靠左: 
<hr color=blue width=58% align=LEFT>



以下會出現林志玲照片:
   <img width="258" src="http://www3.365shu.com/images3/wall/20060726/Chiling010.jpg"> 照片寬度調整為 258像素


  <font color=red>這會變紅色字體</font>這恢復藍色字體
    繼續 ...
  <font color=red style="background:yellow">這是紅色字體但黃色底</font>


再看看以下這會怎樣:
<img width="258" align=RIGHT src="http://www3.365shu.com/images3/wall/20060726/Chiling010.jpg">

注意主要是加了 ALIGN=RIGHT
還有, 再次提醒, 
 圖片要先夾檔到你文章, 存檔後再重新編修你文章, 複製圖片網址(捷徑)來用;
   或者,
 你也可以把圖片上傳到大家可看得到的網站, 例如你的臉書(Facebook)或其他部落格或是網頁空間,
  且要記得開放權限給大眾, 然後找出該圖片的網址: 
   用滑鼠右鍵點該圖片, 選最底下的"內容" (Property), 
    彈出的窗就可看到網址, 用滑鼠左鍵在該網址快速連點三下, 敲 Ctrl_C 複製即可。
   


  開新窗連到 Google協作平台 去 
  (需要有 Google 的 GMail 帳號, 沒有就立刻申請一個!)
 


 
   
   
 


這是用以下的 HTML 網頁碼連到 Google 的協作平台取得 Applet


   <Applet code="ydu.HWApp87.class"  archive="week08.jar"
       codebase="https://sites.google.com/site/abc135246111/"
       width=568 height=258>
   </applet>


請注意, Google 自2015年4月已經禁止使用 Java Applet -- 
參考:
  Google Chrome瀏覽器於2015年4月起已經停用了Java Applet外掛(曾經是讓Java紅起來的技術)
 




 Top