JinJin 的視覺設計專區 - 109-1《中國》竹視傳二-網頁設計 http://mepopedia.com/forum/list.php?2871 Wed, 29 Apr 2026 10:21:20 +0800 Phorum 5.2.7 http://mepopedia.com/forum/read.php?2871,91584,91584#msg-91584 [期末作業]RWD多頁專題網站 (29 replies) http://mepopedia.com/forum/read.php?2871,91584,91584#msg-91584
  1. 1. 製作RWD｜多頁專題網站
  2. 2. 作業說明

1. 製作RWD｜多頁專題網站



可參考『RWD｜多頁專題網站』作業說明

1.參照講義製作
［講義11］RWD多頁網頁編輯 (一) skin / navigation / Menu / video
［講義12］ RWD多頁網頁編輯 (二) 介紹頁面《關於我們》/ 頂圖微動畫設定
［講義13］RWD多頁網頁編輯 (三) 網頁架構 / 列表頁 / 內容頁 / 表格
［講義14］RWD多頁網頁編輯 (四) 相簿設定 / 聯絡我們
［講義15］Google Fonts 網路中文字型


2. 作業說明


1.請以範本形式，製作RWD多頁專題式網站，請設計自己有興趣的主題、個人網站或主題式網站如：景點，小吃，行業，廟宇，風俗，文化，故事....等主題製作。

2.作品須原創，不可使用他人作品，包含文字、照片及插圖，若為他人之文字或圖片請務必取得授權並註明來源。

3.參照上課範例，或其他多頁免費版型，挑選一適合期末作業主題的版型，結合選擇之版型製作。

4.可多人合組完成，但人數越多完成的規模與內容需越完整，並需詳細說明工作分配。

5.需完成之製作項目：
(1)製作個人favicon、LOGO
(2)使用圖示字體(icon font) Font Awesome，並使用最新版本作更替。
(3)製作『首頁影片』、『輪播圖』、『頂圖微動畫』。
(4)製作『介紹頁面』，並進行修改。
(5)製作『列表頁』以及『內容頁（文章頁）』。
(6)製作『相簿』，並進行修改。
(7)製作『網站架構圖』
架構圖可上傳至 https://imgur.com/

4.製作完畢請上傳FTP，資料夾命名：rwd-學號。

請回覆於作業文章

(1) 作業網址 ：
<a href="http://my.cute.edu.tw/~1085445XXX/rwd-1085445XXX/" target="_blank">RWD專題網站｜作業網址</a>
(2) 網站主題： ：
(3) 內容大綱(導覽列/中文/檔名)：
(4) 網頁架構圖(樹狀圖)：
<img width="100%" src="https://i.imgur.com/XXX.jpg" border="0">
(5) 主要對象
(6) 色彩規劃(色調）：簡單的色調
(7) 遇到之問題:
(8) 製作時間:
(9) 分工與心得:

參考之版型網址：(如選擇上課版型則無須此項)

組員名單：班級，學號
]]> JinJin 109-1《中國》竹視傳二-網頁設計 Mon, 18 Jan 2021 03:03:09 +0800 http://mepopedia.com/forum/read.php?2871,91448,91448#msg-91448 [OnePage作業] OnePage作業｜輪播圖｜格線系統｜相簿｜地圖 (66 replies) http://mepopedia.com/forum/read.php?2871,91448,91448#msg-91448
  1. 1. 製作RWD｜多頁專題網站
  2. 2. 作業說明
  3. 3. 製作RWD｜OnePage網頁
  4. 4. 作業說明

3. 製作RWD｜OnePage網頁



1.參照講義製作
［講義09］OnePage 網頁｜實作解析(一）｜輪播圖｜Grid System格線系統
［講義10］OnePage 網頁｜實作解析(二）｜相片分類與燈箱效果｜地圖設定


4. 作業說明


1.請以個人網站、作品集、自訂有興趣的等主題製作，作品須原創，不可使用他人作品。

2.參照上課範例，或其他免費版型，挑選一適合期中作業主題的版型，結合選擇之版型製作。

3.需完成之製作項目：
(1)製作個人favicon
(2)使用圖示字體(icon font) Font Awesome，並使用最新版本作更替。
(3)製作輪播圖
(4)了解網頁格線概念，並進行修改。
(5)製作作品分類，並進行修改。

4.製作完畢請上傳FTP，資料夾命名：onepage-學號。

請回覆於作業文章

(1) 作業網址 ：
(1).作業網址：
<a href="http://my.cute.edu.tw/~1085445XXX/onepage-1085445XXX/" target="_blank">OnePage作業網址</a> (2) 參考之版型網址：
(3) 設計主題 / 風格
(4) 導覽列項目：
(5) 遇到之問題:
(6) 製作時間:
(7) 製作心得:

班級，學號

課程影片]]> JinJin 109-1《中國》竹視傳二-網頁設計 Tue, 12 Jan 2021 15:35:45 +0800 http://mepopedia.com/forum/read.php?2871,91281,91281#msg-91281 [作業02]html-css｜CSS3｜jQuary｜FontAwesome｜練習 (69 replies) http://mepopedia.com/forum/read.php?2871,91281,91281#msg-91281
  1. 1. 製作RWD｜多頁專題網站
  2. 2. 作業說明
  3. 3. 製作RWD｜OnePage網頁
  4. 4. 作業說明
  5. 5. 製作說明
  6. 5.1 作業範例
  7. 5.2 參考之課堂講義
  8. 6. 繳交作業方式
  9. 6.0.1 製作完成後，檔案命名方式：
  10. 6.0.2 以FileZilla上傳至FTP
  11. 6.0.3 回覆本篇文章
[作業02] html-css基礎概念練習-歌詞篇

5. 製作說明


1. 作業範例


作業02課堂範例：作業02範例
作業02學長姊範例：作業02範例

2. 參考之課堂講義


［講義06］jQuery動態網頁初探
［講義07］使用圖示字體(icon font) Font Awesome
［講義08］CSS進階語法補充


＊請分別於兩首歌詞，加入CSS3視覺效果、jQuary動態效果、FontAwesome圖示字體等，設定出具有符合歌詞意境的網頁，加入圖片、影片、Tabs、及效果使其產生：透明感、漸層、陰影..等。

＊以FileZilla上傳至FTP

6. 繳交作業方式


1. 製作完成後，檔案命名方式：


第一個作業FTP上的資料夾為：hw02

每位同學請將自己的資料夾命名為：hw02-學號
這個作業的網址則為：
http://my.cute.edu.tw/~1085445XXX/hw02-1085445XXX/

資料夾內含：
1.html部分：首頁命名為index.html，第二個檔名為next.html
2.css部分：命名為style.css與style2.css

存放在 < hw02-學號 > 的資夾內

2. 以FileZilla上傳至FTP


3. 回覆本篇文章


(1).作業網址：
<a href="http://my.cute.edu.tw/~1085445XXX/hw02-1085445XXX/" target="_blank">作業02網址</a>
(2).請回答以下問題：
1.製作主題：
2.加入新效果愈呈現的風格為何：
3.遇到的問題?
4.花多少時間製作：
5.製作心得：

班級，學號]]> JinJin 109-1《中國》竹視傳二-網頁設計 Wed, 24 Nov 2021 13:10:36 +0800 http://mepopedia.com/forum/read.php?2871,91058,91058#msg-91058 [作業01]html-css基礎概念練習-歌詞篇 (78 replies) http://mepopedia.com/forum/read.php?2871,91058,91058#msg-91058
  1. 1. 製作RWD｜多頁專題網站
  2. 2. 作業說明
  3. 3. 製作RWD｜OnePage網頁
  4. 4. 作業說明
  5. 5. 製作說明
  6. 5.1 作業範例
  7. 5.2 參考之課堂講義
  8. 6. 繳交作業方式
  9. 6.0.1 製作完成後，檔案命名方式：
  10. 6.0.2 以FileZilla上傳至FTP
  11. 6.0.3 回覆本篇文章
  12. 7. 製作說明
  13. 8. 教學影片
  14. 9. 繳交作業方式
  15. 9.0.1 製作完成後，檔案命名方式：
  16. 9.0.2 以FileZilla上傳至FTP
  17. 9.0.3 回覆本篇文章
[作業01] html-css基礎概念練習-歌詞篇

7. 製作說明


歌詞作業範例：http://jinjin.mepopedia.com/~jinjin/hw/hw01

1.請參考

[講義] html-css基礎概念練習-歌詞篇製作說明 的步驟製作。

2.每個同學記得在title的部分打上『歌詞名稱』。

3.自行選擇兩首歌詞，設定歌詞風格，依照所設定風格進行配色。

4.footer請設定個人的專屬版權聲明，並註明『本網頁為作業之用，如有侵權敬請告知』字樣。

5.以FileZilla上傳至FTP

6.本次作業的重點在於：

(1)認識基礎html網頁架構、標題設定、連結設定。
(2)認識css基礎語法，利用單純色彩搭配字體，設計出具有符合歌詞意境的網頁。
(3)學會利用FileZilla上傳自己製作的網頁到雲端空間，成為自己專屬的網頁。

8. 教學影片


1.HTML CSS基礎概念練習一 html架構與內容建置

https://youtu.be/Uq011dmJkv8



2.HTML-CSS基礎概念練習（二） css視覺設定解析

https://youtu.be/sqEV6TSnxDw



9. 繳交作業方式


1. 製作完成後，檔案命名方式：


第一個作業FTP上的資料夾為：hw01

每位同學請將自己的資料夾命名為：hw01-學號

主機名稱: my.cute.edu.tw
使用者: 學號
密碼: 單一入口密碼


這個作業的網址則為：
http://my.cute.edu.tw/~1085445XXX/hw01-1085445XXX/

資料夾內含：
1.html部分：首頁命名為index.html，第二個檔名為next.html
2.css部分：命名為style.css與style2.css

存放在 < hw01-學號 > 的資夾內

2. 以FileZilla上傳至FTP


3. 回覆本篇文章


(1).作業網址：
<a href="http://my.cute.edu.tw/~1085445XXX/hw01-1085445XXX/" target="_blank">作業01網址</a>
(2).請回答以下問題：
1.製作主題：
2.呈現之配色風格：
3.有無遇到的問題?
4.花多少時間製作：
5.製作心得：

班級，學號


學長姐範例：
http://cute.mepopedia.com/~web107a/hw01/hw01-1055440119-1/
http://cute.mepopedia.com/~web107a/hw01/hw01-1075445010/]]> JinJin 109-1《中國》竹視傳二-網頁設計 Wed, 24 Nov 2021 13:05:33 +0800 http://mepopedia.com/forum/read.php?2871,91056,91056#msg-91056 [作業00] 網頁設計課前準備與基本認識 (73 replies) http://mepopedia.com/forum/read.php?2871,91056,91056#msg-91056
  1. 1. 製作RWD｜多頁專題網站
  2. 2. 作業說明
  3. 3. 製作RWD｜OnePage網頁
  4. 4. 作業說明
  5. 5. 製作說明
  6. 5.1 作業範例
  7. 5.2 參考之課堂講義
  8. 6. 繳交作業方式
  9. 6.0.1 製作完成後，檔案命名方式：
  10. 6.0.2 以FileZilla上傳至FTP
  11. 6.0.3 回覆本篇文章
  12. 7. 製作說明
  13. 8. 教學影片
  14. 9. 繳交作業方式
  15. 9.0.1 製作完成後，檔案命名方式：
  16. 9.0.2 以FileZilla上傳至FTP
  17. 9.0.3 回覆本篇文章
  18. 10. 逛逛老師整理的網頁設計教學網站
  19. 11. 安裝軟體
  20. 11.0.1 FileZilla
  21. 11.0.2 Notepad++
  22. 11.0.3 Dreamweaver
  23. 12. 閱讀關於html、css相關書籍，建立網頁設計基本概念
  24. 13. 教學網站註冊
  25. 14. 認識瀏覽器
  26. 14.0.1 Internet Explorer (IE)
  27. 14.0.2 Google Chrome
  28. 14.0.3 Firefox
  29. 15. 多觀摩與紀錄優良網站
  30. 16. 預備週課後問答
歡迎來到網頁設計的世界，網頁設計是現代設計人須具備的基本技能，他比一般的平面設計更為複雜一點，需要大家投入更多的時間練習，請大家跟著我們的步伐，你也可以成為很棒的網頁設計師，讓自己更擁有更具優勢的能力，面對未來的職場。
為了讓大家更快的進入這門課程，更好的學習網頁設計，請大家在一開始先完成以下任務！
第一週須完成的任務：

10. 逛逛老師整理的網頁設計教學網站



  1. 網頁設計教學網站

  2. 本學期作業列表


11. 安裝軟體


安裝必備軟體

1. FileZilla

免費好用的FTP軟體

https://filezilla-project.org/

FileZilla是一套開放原始碼的免費FTP檔案傳輸軟體，內建44種語言的多國語系介面，且還提供Windows、Linux、Mac OS X等多種作業系統平台的版本。除了支援一般FTP檔案傳輸之外，還可支援SFTP與「FTP over SSL/TLS」…等傳輸模式，是個相當穩定而好用的免費軟體。

本課程的作業，將藉由FileZilla上傳至雲端伺服器，請每位同學都須下載並學會使用！

安裝說明：
http://jinjin.mepopedia.com/~jinjin/webdesign-notes/concept.html#fz


2. Notepad++


http://notepad-plus-plus.org/

實用的免費文字編輯軟體 - Notepad++，是旅法台灣人作品，體積輕巧不佔系統記憶體，支援多分頁功能，是一套用來取代Windows記事本的工具，他的操作方式與記事本完全相同。

具有好用的中文搜尋取代、開啟檔案群組、在目錄中的指定副檔名搜尋特定字串、程式語言高亮度顯示等功能，支援ANSI、UTF-8（支援檔首無BOM）、UCS-2...等格式的編譯及轉換，是必備的原始碼編輯軟體。可以替許多的程式語言的語法上色，而且還有半透明視窗的效果，是撰寫程式的好幫手。


3. Dreamweaver


視覺設計師常用的網頁設計軟體，不過不宜太依賴內建的功能，先了解網頁背後的結構與語法才是王道。


12. 閱讀關於html、css相關書籍，建立網頁設計基本概念


請多多利用圖書館或網路資源，來獲取更多網頁設計的新知，從事網頁設計工作，各種技術日新月異，需要隨時充電，獲取不同的技術及最新趨勢。


13. 教學網站註冊


http://mepopedia.com/forum/register.php?804
註冊帳號建議為『學號』
每位同學都必須註冊，有任何註冊問題請隨時反應。可以寄信到 mepo@mepopedia.com 申請開通帳號，或於課堂上留下帳號及 email 由老師統一申請開通。


14. 認識瀏覽器


從事網頁設計必須擁有不同的瀏覽器、裝置等來做網頁的測試，不同瀏覽器及裝置所呈現的網頁效果可能會不同，需要及時調整。請安裝目前主流的三個瀏覽器：IE、Google Chrome、FireFox至少三種瀏覽器。
Google Chrome 市占率從 68.5% 增長到 69.18%，依舊穩居第一。微軟 Chromium 版 Edge 市占率從 7.59% 增長到 7.76%。Firefox 從 7.19% 增長到 7.25%。

http://jinjin.mepopedia.com/~jinjin/webdesign-notes/concept.html#concept03

1. Internet Explorer (IE)


特色：因為是Microsoft開發的軟體，因為有許多先天的優勢，所以大部分的網站、論壇甚至是一些php或java程式編碼都採用IE可以普遍認得的編碼。在其他不同瀏覽器上觀看這些網頁的時候，有可能發生網頁顯示不正常或者部分功能無法使用的情況。現階段而言，聰明的網頁編輯人員都會在製作網站的時候，根據這三種瀏覽器作為測試的平台，基本上以符合三種瀏覽器使用為原則。
缺點：速度慢、網頁編碼方式不符合html發佈的官方寫法，因此較容易出現網頁顯示異常。
下載 Internet Explorer
http://windows.microsoft.com/zh-TW/internet-explorer/products/ie/home


2. Google Chrome


快速啟動?Google Chrome 瞬間即可啟動。迅速載入?Google Chrome 的網頁載入速度飛快。高速搜尋?直接從網址列搜尋網頁。是目前最多人使用的瀏覽器。
下載Google Chrome
http://www.google.com/chrome?hl=zh-TW


3. Firefox


Mozilla Firefox是目前市占率第三名的瀏覽器，它有著豐富的擴充套件，可打造出相當個人化的瀏覽環境。最新的Firefox 80.0 ，最大的特色在於新設計的界面以及方便的網路同步功能，能將你的分書籤、密碼、分頁、附加元件…等資料自動同步到雲端的Firefox帳號中，強調保護隱私。
下載FireFox
https://www.mozilla.org/zh-TW/firefox/


15. 多觀摩與紀錄優良網站


1.瀏覽網站時可隨時觀察或記錄不同瀏覽器閱讀時的差異。
2.多看多觀摩美觀且優良網站的設計，並隨時記錄優良網站的網址，以供後續設計的參考。


16. 預備週課後問答


1.請寫下你對於本課程的期許，你覺得學習網頁設計對你有什麼幫助？
2.請將瀏覽過不錯及值得推薦的網站，列出網站名稱及網址，並試著說明及分析你覺得好的原因？
3.是否已安裝好軟體？並提出任何相關問題！


回覆完畢請註明班級，學號。
如：竹視傳二A，1085440000

祝大家有個愉快的學習旅程！]]> JinJin 109-1《中國》竹視傳二-網頁設計 Tue, 12 Jan 2021 16:51:48 +0800