• 2025-10-28【線上報名的操作方式】

    ★ 舊學員登入系統：無法登入時，請善用「查詢密碼或新註冊」查詢帳密，若無法收信，請詢問工作人員

    ★ 點選欲報名的課程，再點「我要線上報名」，之後再按確認繳費。<...[詳全文]

  • 2025-06-13【114年第二學期，報名須知（114/9/1起開課）】


    ● 6/29(日)上午9:00起 新舊生 同步開放 線上報名/線上轉帳
    ● 6/30(一)起 開放 現場報名
    ● 部份課程分時段開放線上報名，請見報名須知，以取得線上...[詳全文]

  • 2024-12-26【報名需備資料】


    ● 新生報名| 請準備 一吋照片1張 、身分證件正本備查、報名註冊費200元、學分費。
    ● 舊生報名| 請準備 學員證、報名註冊費150元、學分費。
    ● 設籍...[詳全文]

:::

XOOPS網站門面專業設計 ---HTML、CSS及XOOPS佈景設計

人氣：2749 人 人氣：2749 人 下載課綱PDF 課綱
確定開課 確定開課 未開放線上報名 未開放線上報名
課程資訊 課程資訊
上課時間：
每週 四 晚上07:00～09:50（第一次上課日期：03 月 10 日）
開課地點：
台南社區大學（台南市公園路750號）
招生人數：
39 人
課程收費：
  • 總學分費：3 學分 3000 元（18 週課程 / 一次上課 3 小時）
  • 學期報名費：新生：200 元； 舊生：150 元
  • 保證金：對於免收學費者（低收入或身心障礙）收取 1000 元
  • 教材費：0 元（使用教材：講師自製教材講義）
  • 上機費：500 元
  • 旁聽費： 本課程不開放旁聽
其他資訊：
<b>講義網站：</b>http://tad.tnc.edu.tw
<b>HTML手冊：</b>http://www.w3school.com.cn/html/index.asp
<b>CSS手冊：</b>http://www.w3school.com.cn/css/index.asp
授課老師 授課老師
吳弘凱
最高學歷：
台南大學資訊教育研究所
現職：
XOOPS正體中文延伸計畫站長
相關學經歷：
台南市教育網路中心教學資源組
教育部校園自由軟體應用諮詢中心顧問
台南社大資訊學程召集人
松崗、旗標、上奇、碁峰電腦書籍作者
關於這一門課 關於這一門課
1.為什麼想開這門課？希望帶領學員共同學習甚麼
一個好的網站門面可以體現一個網站要表達的意念，是讓使用者留下深刻印象的第一步，本班將以HTML5及CSS3技術，搭配攝影班或繪本班提供的素材，以環境生態、公共議題或公民意識為主提，針對XOOPS網站來設計一個專有的風格。
XOOPS是一個專業的架站機，可以在短時間內架出一個功能強大齊全的網站，以此為主題是延續上一學期的架站課程。
HTML是網站最基本的語法，要深入網站設計就必須對它有所了解，目前HTML5雖然尚未成為正式標準，但可以利用這們課，先來一窺其奧妙之處。
CSS（串接樣式表）是當今設計網站外觀必備的技術，中文口語常被譯為「網際排版」，利用它可以控制整個網站外觀，因此，不管您是要設計一般網頁、或者是要開發XOOPS佈景甚至是撰寫程式，您都無法脫離它的魔掌。適逢CSS3開始嶄露頭角之際，我們也來了解一下CSS3有哪些過人之處以及限制。
2.修此門課需具備什麼條件？
需架設過網站（最好有使用XOOPS網站的經驗）。
對於不排斥撰寫語法（本班不使用所見即所得編輯器）。
做出的佈景作品願意釋出提供他人下載。
3.上課的方式是怎麼進行的？學生可以有什麼收穫？
上課方式：說明、示範、練習、發問、示範、練習…練習…練習
學期末將採工開票選評選出十套佈景公開於網路提供下載。
學生可以從這門課學會HTML語法、CSS用法、基本影像處理能力、XOOPS網站佈景設計方法。
4.如何取得學分？（評量方式）
作品實做（40%）、出席率（30%）、上課態度（30%）
5.備註&推薦書目
《CSS網頁設計師手札》，Rachel　Andrew，上奇出版
各週課程規劃各週課程規劃
  • 日期
  • 課程主題
  • 課程內容
  • 授課講師
  • 第 1 次課程
  • 第 1 次 2011-03-10
    （四）晚上07:00～09:50
    成功國中電腦教室
  • 認識HTML、CSS與親密戰友！
  • 這節課我們先了解一下XOOPS、HTML、CSS這幾個名詞的意含及功用，還有在這次課程中各自扮演的角色為何。此外，這次我們不用FrontPage不用Dreamweaver，我們用免費全中文，全功能型的文字編輯器：PSPad來陪伴我們18週，這堂課，我們就來好好的認識這套編輯器。
  • 吳弘凱
  • 第 2 次課程
  • 第 2 次 2011-03-17
    （四）晚上07:00～09:50
    成功國中電腦教室
  • 打好HTML基礎
  • 這一節課我們開始學習網站的最基礎：HTML語法！包括文字、排版、圖形、連結等標籤。打造出一個網站的主要架構！
  • 吳弘凱
  • 第 3 次課程
  • 第 3 次 2011-03-24
    （四）晚上07:00～09:50
    成功國中電腦教室
  • HTML表格的妙用
  • 在還沒學到CSS排版之前，我們先用HTML表格來替網站進行排版的動作，讓您可以隨心所欲的調整版面位置。
  • 吳弘凱
  • 第 4 次課程
  • 第 4 次 2011-03-31
    （四）晚上07:00～09:50
    成功國中電腦教室
  • 列表與表單
  • 表單是寫程式時必備的元件！利用這節課替未來打好基礎，認識一下如何利用HTML來製作精美的表單。此外，最常用的項目符號或列表清單也會在此單元一併介紹。
  • 吳弘凱
  • 第 5 次課程
  • 第 5 次 2011-04-07
    （四）晚上07:00～09:50
    成功國中電腦教室
  • 認識HTML的未來
  • 這一節課除了溫習並整合過去幾節所學到的網頁標籤及屬性外，還要了解一下HTML的新趨勢：HTML5，了解目前各家瀏覽器對於HTML5的支援程度，並體驗HTML5新標籤所帶來的全新震撼。
  • 吳弘凱
  • 第 6 次課程
  • 第 6 次 2011-04-14
    （四）晚上07:00～09:50
    成功國中電腦教室
  • CSS的文字外觀排版
  • 這節課起，我們將CSS導入網頁中，了解CSS的用法，並熟悉CSS的強大能力。我們還先利用CSS來將文字加背景，設間距、設行距，更可以進行縮排、字首放大…等效果。這節課，我們就針對文字與段落來好好的惡搞一下其外觀，讓您知道怎麼把網頁文字、連結搞的和雜誌一樣夢幻…
  • 吳弘凱
  • 第 7 次課程
  • 第 7 次 2011-04-21
    （四）晚上07:00～09:50
    成功國中電腦教室
  • 精美的區塊與項目符號
  • 區塊就是指一個小區域，區域中，您可以設計美美的內容，讓您的區塊看起來精美無比。如此，不管您是要放在網頁上或者要設計XOOPS區塊，都將能夠得心應手。
  • 吳弘凱
  • 第 8 次課程
  • 第 8 次 2011-04-28
    （四）晚上07:00～09:50
    成功國中電腦教室
  • 用CSS來玩玩表格
  • 本節課將說明如何讓滑鼠移到某一格，該格就變色？如何做像Google那樣經美的行事曆表格？並讓您的表格看起來精美絕倫。
  • 吳弘凱
  • 第 9 次課程
  • 第 9 次 2011-05-05
    （四）晚上07:00～09:50
    成功國中電腦教室
  • 區塊的排版變化
  • 以往的網頁都用表格來排版，如何做到用區塊來排版呢？如何用區塊來把畫面分為兩欄，甚至三欄？如何做出類似XP桌面的圖示效果？這一單元統統告訴您～
  • 吳弘凱
  • 第 10 次課程
  • 第 10 次 2011-05-12
    （四）晚上07:00～09:50
    成功國中電腦教室
  • 絕美的網頁表單
  • 寫程式常常會用到表格與表單，醜醜的表單是否引不起您的興致呢？沒關係，我們來把表單美化ㄧ番，讓它看起來可以更為精緻美觀！
  • 吳弘凱
  • 第 11 次課程
  • 第 11 次 2011-05-19
    （四）晚上07:00～09:50
    成功國中電腦教室
  • XOOPS架站機介紹及架設
  • 本單元起，我們將要開始製作XOOPS這一個相當多人使用的架站機的佈景，因此，我們先來熟悉一下這套軟體的佈景架構。
  • 吳弘凱
  • 第 12 次課程
  • 第 12 次 2011-05-26
    （四）晚上07:00～09:50
    成功國中電腦教室
  • 佈景整體設計
  • 這一單元，我們會利用影像處理軟體來架構出網頁的初步架構，然後利用網頁編輯軟體，將之做成網頁檔。
  • 吳弘凱
  • 第 13 次課程
  • 第 13 次 2011-06-02
    （四）晚上07:00～09:50
    成功國中電腦教室
  • 將網頁轉為XOOPS佈景
  • 這一單元，我們要來將上一節課做好的網頁檔，搖身一變，變成XOOPS的佈景檔！
  • 吳弘凱
  • 第 14 次課程
  • 第 14 次 2011-06-09
    （四）晚上07:00～09:50
    成功國中電腦教室
  • XOOPS區塊的微調與設計
  • 剛做好的佈景通常是會有很多問題的，因此，這個單元，我們就要來針對區塊做個CSS的微調，讓它看起來可以更精美，更有整體感。
  • 吳弘凱
  • 第 15 次課程
  • 第 15 次 2011-06-16
    （四）晚上07:00～09:50
    成功國中電腦教室
  • 徹底改造主選單
  • 覺得XOOPS很醜嗎？來，我們就來大刀闊斧的把主選單的外觀給改掉！讓它改頭換面，煥然一新！
  • 吳弘凱
  • 第 16 次課程
  • 第 16 次 2011-06-23
    （四）晚上07:00～09:50
    成功國中電腦教室
  • 套用絢爛的動態效果到佈景
  • 網路上有許多精彩的網頁特殊效果，這一單元我們就來看看，如何把它套用到網頁上！
  • 吳弘凱
  • 第 17 次課程
  • 第 17 次 2011-06-30
    （四）晚上07:00～09:50
    成功國中電腦教室
  • 不同頁面有不同的外觀
  • XOOPS的佈景是採用Smarty佈景引擎，這一單元我們將來看看，如何利用Smarty引擎的功能，來做到每一頁都有不同的外觀
  • 吳弘凱
  • 第 18 次課程
  • 第 18 次 2011-07-07
    （四）晚上07:00～09:50
    成功國中電腦教室
  • 作品分享
  • 辛苦了18週，我們來看看同學們的作品吧！
  • 吳弘凱