「不錯學群/01/組課/HTML」修訂間的差異

出自不錯學群
跳至導覽 跳至搜尋
行 224: 行 224:
  
 
===排版樣本的設定===
 
===排版樣本的設定===
 +
*12-1排版樣本介紹
 +
*12-2行內排版樣式
 +
*12-3內嵌式排版樣式
 +
*#<STYLE>控制標籤
 +
*#使用CLASS定義樣式
 +
*#使用ID定義樣式
 +
*#CLASS與ID搭配使用
 +
*12-4連結式排版樣本
 +
*#呼叫排版樣本
 +
*#各式樣本的優先順序
 +
*#強迫優先權
 +
*12-5伊蔻網頁的設計應用
 +
*課後問題與習作
 +
 
===伊蔻首頁的製作===
 
===伊蔻首頁的製作===

於 2020年10月20日 (二) 16:58 的修訂

HTML入門熱身篇

  • 1-1何謂全球資訊網路
  • 1-2HTML與瀏覽器的關係
  • 1-3本書的基本架構
  • 1-4製作網頁的相關工具
  • 1-5設定您的工作環境
  • 1-6伊蔻的首頁介紹
  • 1-7使用WordPad來編輯HTML檔
  • 課後學問題習作

HTML程式的基本架構

  • 2-1看例子談HTML的架構
    1. 第一個HTML程式
    2. <HTML>與</HTML>
    3. <HEAD>與</HEAD>
    4. <TITLE>與</TITLE>
    5. <BODY>與</BODY>
  • 2-2HTML檔的撰寫風格
    1. 控制標籤大小寫不拘
    2. 同一列中可有多個控制標籤
    3. 無文件檔頭仍可執行
  • 2-3HTML的控制標籤
    1. 控制標籤的格式
    2. 跳列的設定
    3. 跳段的設定
    4. 向中對齊的設定
    5. 背景與文字顏色的設定
  • 2-4伊蔻網頁的設計應用
  • 課後問題與習作

網頁中文字大小、字型與顏色設定

  • 3-1文字大小的設定
    1. 設定標題文字
    2. 設定標題文字的排列
    3. 設定字的大小
  • 3-2文字顏色的設定
    1. 設定文字顏色
    2. 設定文字的大小與顏色
    3. 預設文字的大小
  • 3-3文字的字型設定
    1. 實體字型的控制標籤
    2. 邏輯字型的控制標籤
    3. 設定文字的字型
    4. 特殊字元的設定
    5. 字型、大小、顏色的結合設定
  • 3-4伊蔻網頁的設計應用
  • 課後問題與習作

讓您的網頁排列的更整齊

  • 4-1跳列的控制
    1. < BR>強迫跳列
    2. < NOBR>強迫不跳列
    3. < P>強迫分段
  • 4-2< HR>線段的設定
    1. 線段粗細的設定
    2. 線段長度的設定
    3. 線段排列的設定
    4. 線段無陰影的設定
  • 4-3文章內容的編排
    1. HTML檔中的備註
    2. < PRE>預先格式化的敘述
    3. < PRE>中涵蓋其它控制標籤
    4. 可調整排列的區段
    5. < BLOCKQUOTE>書信內容的預先格式化
    6. < ADDRESS>書信頭、尾的預先格式化
  • 4-4伊蔻網頁的設計應用
  • 課後問題與習作

項目清單的排列

  • 5-1< MENU>與< DIR>項目清單
    1. 設計項目清單
    2. 設定屬性
    3. 設計巢狀的項目清單
  • 5-2< UL>無序號條列式清單
  • 5-3< OL>有序號條列式清單
    1. < OL>有序號條列式清單[無屬性設定]
    2. < OL>有序號條列式清單[起始數設定]
    3. < OL>有序號條列式清單[型態設定]
    4. < OL>有序號條列式清單[巢狀設定]
  • 5-4< DL>敍述式清單
  • 5-5伊蔻網頁的設計應用
  • 課後問題與習作

表格在網頁設計中的應用

  • 6-1表格的宣告
    1. 基本表格
    2. 表格邊線的設定
    3. 格框線粗細的設定
    4. 格框與內容空隙的設定
    5. 表格長寬的設定
    6. 表格相對寬度的設定
    7. 表格位置的安排
    8. 表格的背景顏色
  • 6-2表格標題的排列
    1. 表格標題的設定
    2. 表格標題靠上、下排列的設定
    3. 表格標題靠左、右排列的設定
    4. 自定的表格標題
  • 6-3表格中欄位屬性的設定
    1. 欄位中寬度的設定
    2. 欄位中高度的設定
    3. 欄位中顏色的設定
    4. 欄位中資料左、右排列的設定
    5. 欄位中資料上、下排列的設定
    6. 欄位中行的擴展
    7. 欄位中列的擴展
    8. 欄位中行與列的擴展
  • 6-4HTML4.0新增表格類控制標籤
    1. 表格結構化
    2. 表格直行化
    3. 個別直行設定
    4. 直行中排列的調整
    5. 直行中顏色的調整
    6. 表格外框邊線的設定
    7. 表格內框格線的設定
  • 6-5表格的綜合應用
    1. 巢狀的表格
    2. 表格使排列更整齊
    3. 利用表格來製作色票
  • 6-6伊蔻網頁的設計應用
  • 課後問題與習作

HTML的超鏈結

  • 7-1超鏈結的介紹
    1. 何謂超鏈結
    2. 超鏈結的控制標籤
    3. 超鏈結的宣告
  • 7-2超鏈結的使用
    1. 相對路徑與絕對路徑
    2. 相對路徑連到同層目錄的檔案
    3. 相對路徑連到次層目錄的檔案
    4. 相對路徑連到上層目錄的檔案
    5. 絕對路徑的範例
    6. 指定相對位址
    7. 連接到同一個檔案的某一段
    8. 連接到另一個檔案的某一段
  • 7-3超鏈結的應用
    1. 連接上Internet上的其它站台
    2. LINK的顏色設定
    3. 設定超鏈結的快速按鍵
  • 7-4伊蔻網頁的應用
  • 課後問題與習作

將圖片加入網頁中

  • 8-1讓Home Page更精采
    1. 圖檔格式
    2. 背景圖案的設定
    3. 在網頁中插入圖片
    4. 以文字說明圖片
    5. 圖片大小的設定
    6. 圖片邊框的設定
  • 8-2
    1. 文字靠下
    2. 文字靠中
    3. 文字靠上
    4. 圖片靠左
    5. 圖片靠右
    6. 空隙的設定
  • 8-3圖片的應用
    1. 使用圖片檔做為超鏈結選取的對向
    2. 地圖索引
  • 8-4伊蔻網頁的設計應用
  • 課後問題與習作

多窗框的設計

  • 9-1多窗框的基本定義
    1. 多窗框的基本格式
    2. 窗框內容的顯示
    3. 窗框可變大小的設定
    4. 窗框捲動軸的設定
    5. 窗框中內容顯示的邊界設定
    6. 無支援窗框架構的設定
    7. 框邊的設定
    8. 窗框分界線粗細設定
    9. 窗框分界線顏色設定
  • 9-2多窗框的設計應用
    1. 巢狀窗框的設計
    2. 窗框與超鏈結
    3. 懸浮窗框的設定
    4. 如何解除多窗框的設定
    5. 有關TARGET屬性值的其它設定
  • 9-3伊蔻網頁的設計應用
  • 課後問題與習作

網頁中填表的設計

  • 10-1網頁中填表的設計
    1. 填表功能介紹
    2. 填表的基本功能
  • 10-2< INPUT>控制標籤
    1. < INPUT>控制標籤格式說明
    2. 文本欄位
    3. 按紐的設定
    4. 密碼欄位
    5. 隱藏性欄位
    6. 單一選項欄位
    7. 檢驗項欄位
    8. 圖片欄位
  • 10-3其他填表控制標籤
    1. < SELEST>控制標籤
    2. < TEXTAREA>控制標籤
    3. 圖像按鈕
    4. 填表單加上外框與標題
  • 10-4CGI程式
    1. 何謂CGI程式
    2. 填表與CGI的配合
    3. CGI程式的實例應用
  • 10-5伊蔻網頁的設計應用
  • 課後問題與習作

讓您的網頁包含更多

  • 讓網頁能夠自動切換
  • 讓文字能自動調整排列
  • 讓搜尋引擎更容易發現你的網頁
  • 讓Javascript程式加入網頁
  • 讓JAVA程式加入網頁
  • 將多媒體加入網頁
  • 設定背景音樂
    1. < BGSOUND>設定背景音樂
    2. < EMBED>設定背景音樂
  • HTML的電子看板
  • 11-9伊蔻網頁的設計應用
  • 課後問題與習作

排版樣本的設定

  • 12-1排版樣本介紹
  • 12-2行內排版樣式
  • 12-3內嵌式排版樣式
    1. <STYLE>控制標籤
    2. 使用CLASS定義樣式
    3. 使用ID定義樣式
    4. CLASS與ID搭配使用
  • 12-4連結式排版樣本
    1. 呼叫排版樣本
    2. 各式樣本的優先順序
    3. 強迫優先權
  • 12-5伊蔻網頁的設計應用
  • 課後問題與習作

伊蔻首頁的製作