網站規劃與設計上課補充教材

第五堂課： 使用 HTML 的文字排版、清單、超連結等功能設計網頁

要讓網站版面乾淨，除了前幾堂課談到的 HTML5 版面配置之外，還有很重要的文字排版、文字變化、清單項目的設計以及 HTML 裡面最重要的超連結等， 通通得要用在你的網頁當中，這樣整個網頁才會乾乾淨淨、漂漂亮亮的。只是，單純的 HTML 標籤要讓你的版面與文字變得更有趣時，有點難度， 此時，透過 CSS 的特殊標籤來處理，那就顯得很重要了！所以，這堂課的重點除了認識 HTML 的相關標籤之外，能不能透過 CSS 來修改變化原有的展示方式， 那才是這堂課的重點囉！
本章重點目標：
  1. 先要了解一下，由於 <, > 在網頁上都有其特別的意義，因此想要將這些特殊的符號顯示出來，就得要使用較不一樣的方式來呼叫才行。 例如 < 可以使用 &lt; 來展示，目前常見的還有 © &nbsp;(空白) 等等。那 & 要怎麼呼叫呢？就使用 &amp; 來呼叫囉！

  2. 首先要瞭解網頁資料想要對齊或者是做些變化時，『段落效果』就顯的很重要了！常見的可能的段落效果有底下數個： p, br, nobr, center, pre, blockquote, hr, h1~h6 等，特別注意不要亂用 center, pre 這兩個東西，基本上，不建議使用 center， 而 pre 最多就是用在程式碼的設計上。此外， blockquote 是顯示引用資訊的，會自動縮排的資料，不是用來作為一般設計用的喔！定義要清楚。
    • 例題一：(1)透過 p 以及相關的特殊符號，將特殊符號與相對的展示方法對齊後顯示出來。(2)加上一個不同段落，透過 pre 完成前一段落的功能； (3)加上一個不同段落，使用 p 但是將段落間的留白取消 (CSS方法)
    • 例題二：下載這個檔案後，將標題突顯，然後內文對齊展示出來吧！

  3. 文字的特殊效果，可以透過 sup, sub, i, strong, ins (insert), del (delete), address 等等的成對標籤喔！如果要加上顏色、字體變化， 請使用 <span style=""> 的 CSS 功能來處理較佳！
    • 例題：請到 yahoo 隨意下載一則新聞，透過上述的段落、文字變形等功能，將該新聞處理好。此外，可透過 address 特別在記者姓名的位置， 並且與超連結到原本的新聞來源喔！

  4. 標準清單中，主要透過 <ul> 與 </ul> 來規範，內容每個項目則以 <li> 來規範；
    • 在 <ul type="disc, circle, square"> 可選擇不同的項目符號，預設是實心圓形；
    • 項目的部分會與項目上一行有空格，且項目會縮排；

  5. 序號清單，可使用 <ol> 來與 <li> 搭配使用。使用的方法與 <ul> 一模一樣，差別為：
    • 每個項目變成序號方式，序號有 1, a, A, I, i 等；
    • 序號的處理方法同樣使用 type 屬性，例如 <ol type="a"> 就會以 a, b, c... 為序號；
    • 序號開始的數字是可變的，使用 start 屬性來處理即可。例如 <ol start="5">
    • 例題：使用這檔案並使用清單來處理正確的展示喔！

  6. 什麼是超連結？需要談到 URL(Universal Resource Locator)，格式如下：
    <scheme>://<host[:port]/<path>/<filename>
    基本上的機制 (scheme) 有：
    • http://www.ksu.edu.tw
    • telnet://bbs.ptt.cc
    • ftp://ftp.isu.edu.tw
    • mailto:dmtsai@mail.ksu.edu.tw

  7. 超連結主要利用如下的語法：
    <a href="URL" target="框架名稱" title="滑鼠上的名稱" alt="同title用法" >顯示在網頁上的名稱</a>
    各元件的說明如下：
    • href="URL"：裡面接的就是上一題談到的各 URL 的資料；
    • target="關鍵字或者是特定框架名稱"：有的關鍵字如下所示：
      • _blank：新開一個視窗出來將連結顯示；
      • _self：在原本的框架中顯示出目前的連結網址；
      • _top：將瀏覽器的視窗之框架展開，以最大視窗顯示連結的目標；
      • 某個名稱：每次都將連結的資料丟到這個名字的瀏覽畫面中。
    • title="", alt=""：這兩個每次都要同時使用，因為IE支援alt，firefox 支援 title，這玩意兒可以讓你的滑鼠在移動到超連結時， 會在螢幕上面顯示特別的關鍵字！
    例題：建立一個檔案，內容有 (1)google, (2)yahoo, (3)我們的教學網站, (4)回首頁 等超連結，其中 google 與 yahoo 要開新分頁， 而且需要有超連結的字體變化，包括有 (1)顏色、(2)底色、(3)上下底線等等！

  8. href="mailto:" 的特殊用法：
    • 如果有多個收件者，可以利用分號隔開：<a href="mailto:dmtsai@mail.ksu.edu.tw;vbird@mail.vbird.idv.tw">...
    • 如果要直接幫使用者加上標題，可使用： "mailto:dmtsai@mail.ksu.edu.tw?subject=標題的文字" 來處理
    • 副本使用： "?cc=email@hostname"，密件副本使用 "?bcc=email@hostname"

  9. 超連結的顏色設定方面，主要可設計的項目有： a:active, a:hover, a:visited 等等。

  10. 段落的位置處理：可以讓你的畫面在同一個網頁上面跳動！這個也可以稱為『頁面標籤』就是了。
    • 在欲設定的文章處，需要指定標籤，指定的作法：<a id="這個標籤名"></a>；
    • 使用超連結時的方法：<a href="#這個標籤名">你的名稱</a>
    • 參考文末習題練習啦！
本章練習與習題：
  1. 使用 address 的功能，修改你列在 address 內的作者與 email 項目上的關於作者的相關資料喔！
  2. 建立 homework/class_05_1.php 的檔案，內容呈現如下模樣： 
    書籍介紹
	A 好書列表
		X 計算機概論-探索未來
		X Oracle資料庫建置與管理應用
		X C語言初學指引
			Y 特殊榮譽：當月暢銷書第二名

	B 暢銷排行
		X Windows Registry徹底揭秘
		X XML與ASP網站實作大全
		X C語言初學指引
			Y 特殊榮譽：年度暢銷書第三名
		X XML與JAVA程式設計大全
		X C++函式庫精華錄

	C 系列叢書
		X 一看就懂系列
			Z Word一看就懂
			Z Excel一看就懂
			Z Access一看就懂
			Z PointPower一看就懂
			Z Outlook一看就懂
			Z XML全面領航系列
			Z XML與ASP網站實作大全
			Z XML與JAVA程式設計大全
    注意，其中 X 使用一個小圖示來取代，Y 用另一個小圖示，Z 則使用數字或英文排序，有順序的意思。這些資料請使用清單 ul 或 ol 及 li 來處理。此外，Y 的部分請使用特殊顏色與不同的字體來顯示喔。此外，上述資料中，我需要黑底白字的展示喔！
  3. 下載這個檔案，然後：
    • 該檔案內容共分為五大部分，每個部分均需有類似書籤的功能，能夠讓使用者按下最上頭的連結後， 就能夠連結到適當的頁面位置 (此部份最好能夠做成類似按鈕的風格更好！)；
    • 並且在每個連結最後頭加上一個(top)的字樣，讓使用者能夠回到最上方的連結畫面中！
    • 至於本題的原始資料也請參考檔案中的連結資訊喔！依據該資訊內的資料排列格式來調整你的版面！
  4. 將上述資料進行完畢，並於首頁加入正確的連結，將結果上傳後，到上傳網站查閱是否正確處理才可以！