• 網頁設計與技術/響應式RWD網站建置
• 課程@學校創課

課程簡介

教學目標

教師自編

平時：20% 期初：期初網站建置報告 20% 期中：期中網站建置報告 20% 期末：期末網站建置報告 40% 網站以1~2人方式分組 評分標準： 1．網站整體功能架構 2．UI/美工

課程介紹

228放假

1．申請虛擬主機 xx.stu.x.ita.hk.edu.tw，取得虛擬主帳號及密碼，分組 2．登入/管理虛擬主機  http://xx.stu.x.ita.hk.edu.tw:2082 3．安裝Wordpress

下載解壓縮wordpress (主機目錄 public_html下新建一個目錄wp)，

上傳wordpress檔案到主機使用Windows 檔案總管 ftp 功能 (最簡單，ftp://xx.stu.x.ita.hk.edu.tw)

i. 使用Windows 檔案總管 ftp 功能 (最簡單，ftp://xx.stu.x.ita.hk.edu.tw)

ii. 使用ftp工具

註：最快的方式是使用ssh登入主機，使用wget直接下載wordpress到主機，再用tar解壓縮

建立MySQL資料庫及帳號

4．Wordpress初步設定，使用瀏覽器打開Wordpress 5．Wordpress建置好後，組員各自建立一個帳號(管理者)，開始配置你的網站，組員各自撰寫建站日誌文章(分類：Wordpress)，我會每週檢查打分數。

1．佈景主題 theme 外觀設定

https://themeforest.net

https://mythemeshop.com/

Elegant Themes

http://wpelegant.com/

MH Themes

2．改變字型，把醜醜的細明體改成正黑體

@import "http://fonts.googleapis.com/earlyaccess/notosanstc.css";
/*@import "http://fonts.googleapis.com/earlyaccess/cwtexhei.css";*/
/*
歡迎使用自訂 CSS！
若要瞭解自訂 CSS 的運作方式，請參閱 http://wp.me/PEmnE-Bt
*/
.post-body {
font-family: 'cwTeXHei', 'Noto Sans TC', Arial, "文泉驛正黑", "WenQuanYi Zen Hei", "儷黑 Pro", "LiHei Pro", "微軟正黑體", "Microsoft JhengHei", sans-serif;
font-size: 1.8px em;
font-weight: 400;
}
.blog-title {
font-family: 'cwTeXHei', 'Noto Sans TC', Arial, "文泉驛正黑", "WenQuanYi Zen Hei", "儷黑 Pro", "LiHei Pro", "微軟正黑體", "Microsoft JhengHei", sans-serif;
}
h1, h2, h3, h4, h5, h6, p, blockquote, address, big, cite, code, em, font, img, small, td, body {
font-family: 'cwTeXHei', 'Noto Sans TC', Arial, "文泉驛正黑", "WenQuanYi Zen Hei", "儷黑 Pro", "LiHei Pro", "微軟正黑體", "Microsoft JhengHei", sans-serif;
font-size: 1.8px em;
font-weight: 400;
}

3．找出一個Wordpress網站用了那些主題、外掛…：http://www.wpthemedetector.com/

 WordPress 經典網站 https://wordpress.org/showcase/

今天活動： 1．建立一個文章分類：WP建站日誌，寫架站日誌。 2．建立首頁+網誌 3．安裝基礎必備外掛： (注意，在安裝主題或外掛時，可能會造成網站異常，此時，使用ftp將新增主題/外掛刪除。) 1．Jetpack，請參考【WordPress百寶箱6】Jetpack 超過30種功能絕對必裝外掛】 2．快取：W3 Total Cache 3．社群分享：Super Socializer 4．視覺化編輯(文章、頁面)工具：TinyMCE 5．簡碼：Shortcodes Ultimate 6．表格工具：TablePress 7．搜尋引擎優化：Yoast SEO 8．表單：Contact Form (為避免垃圾留言，請安裝"Really Simple CAPTCHA") 本週架站日誌：請依照上面所列外掛撰寫一篇【 WordPress基礎必備外掛】，清楚寫下這些必備外掛的特色、功能，文章要有各外掛的畫面介紹。 請建立一個「WP建站日誌」，每週或每日的架站日誌，請指定此分類。

1．選單的建立，請建立3個頁面：首頁、網誌(或文章)、隱私政策 (內容請參考我的網頁上的隱私政策)，並將這3個頁面設置在選單上。 2．建立子選單，在網誌選單上加入「wp網站建站日誌」文章分類的連結 3．選單相關的外掛

Top 20+ Best WordPress Menu Plugins For Better Navigation

4．一頁式主題版面  Parallax

22 Free Parallax WordPress Themes 2017

5．精彩案例：

一頁商店 

一對美國情侶改造一輛校車所寫下的旅遊故事

放假

1．隱藏頁面標題

第一種方法：編輯 wp-content/themes/外觀主題名稱/inc/theme/views/content-page.php，移除下面程式碼：

<div class="entry-header">
  <?php
    if (! is_single()) :
      the_title( '<h2 class="entry-title"><a href="' . esc_url(  get_permalink() ) . '">', '</a></h2>' );
    else:
      the_title( '<h2 class="entry-title">', '</h2>' );
    endif; 
  ?>
</div>

第二種方法：安裝Hide title外掛，分別在各頁面編輯時指定是否隱藏標題。

如果要改Footer(網頁底部)，請到下列目錄找footer.php進行修改。

/home/tangetw/public_html/wp-content/themes/外觀主題名稱/inc/theme/footers

2．Slider (輪播圖片)

【WordPress】Slider的使用與應用

主題支援，writee，請參考老師網頁裏的網誌。

外掛：Meta slider，請參考Tange Seiki

3．簡碼與簡碼外掛的使用：Shortcode Ultimate 

Week 9

1．Mail功能設置

【Wordpress教學】Mail機制：Mail外掛與外部SMTP設定

2．聯絡表單 Contact Form

【WordPress教學】聯絡表單的建立

3．小工具

加入jetpack的網站訂閱小工具

訂閱網站、收確認信

新增文章

以上若mail功能正常，日後網站所有文章發表，你都能收到通知信。

4．HTML入門

• The 35 Best Personal Websites We've Ever Seen
• 50+ BEST HTML RESUME CV VCARD TEMPLATES 2016

【HTML 5】 課堂活動：在個別的文章或頁面編輯HTML文件。 繪製一條水平線： <hr size="5" align="center" noshade width="90%" color="0000ff"> 播放背景音樂： <audio src="http://rjchang.me.ncku.edu.tw/rj/%B3q%B0T%BF%FD/%A4%AD%A4%EB%A4%D1/%a4%ad%a4%eb%a4%d1-13---02_%ad%cf%b1j.mp3" autoplay loop> </audio> 【CSS 3】 課堂活動： 在個別的文章或頁面加上自訂的css來改變HTML的元素外觀、顏色等。 安裝外掛：WP Add Custom CSS 應用例：【WordPress】CSS-色彩漸層背景 【WordPress】進擊的選單 作業(學期計分30%)：找一個你認為最好的個人網頁，複製建立個人風格的網頁(建立一個新的WP網站，超連結掛在你原先的網站)。

HTML 簡介與應用 HTML5入門教學 頁內跳轉 - 錨點， 範例：【軟體測試】Visual Studio的單元測試實作範例 靜態網站模板

• CSS 教學 從 HTML + CSS開始

注意：今日的課堂練習網站，請將檔案上傳至各組的網站，並在各組的WP網站製作超連結選單項目，項目名稱：W13 HW，方便老師檢查。

• Web Design 設計過程與合作經驗分享 by Abby Chiu , UI / UX Designer at MediaTek Inc. .

今日教學講義及範例下載 (軟體工程聯盟  蘇怡仁 老師 提供) 使用CSS來做網頁的排版

• CSS DIV 單欄式網頁排版
• CSS DIV 兩欄式網頁排版
• CSS DIV 三欄式網頁排版設計

JavaScript

One Page Themes

RWD網頁設計

初學前端要達到什麼程度才可到就業水準 如何逐步學前端工程 網頁排版小技巧 (切版方法)

切版工具： 45+ Useful PSD to HTML/CSS Conversion Tutorials

網頁前端工程入門：網頁排版教學 By 彭彭 網頁前端工程入門：Javascript 簡介 By 彭彭

表格與CSS格式設定

期末考試