JinJin 的視覺設計專區 - 107-2《中國》竹視傳一Ｂ-網頁設計 http://mepopedia.com/forum/list.php?2785 Wed, 29 Apr 2026 10:21:55 +0800 Phorum 5.2.7 http://mepopedia.com/forum/read.php?2785,89513,89513#msg-89513 [期末作業] 多頁主題式網頁設計 (37 replies) http://mepopedia.com/forum/read.php?2785,89513,89513#msg-89513
  1. 1. 製作說明
  2. 2. 繳交作業方式
  3. 2.0.1 製作完成後，檔案命名方式：
  4. 2.0.2 上傳至FTP
  5. 2.0.3 回覆本篇文章
[期末作業] 多頁主題式網頁設計

期末作業：http://jinjin.mepopedia.com/~jinjin/webdesign-notes/

1. 製作說明


1.請延續作業三及作業四，繼續完成整個網站，將課堂所學應用於網頁之中。

2.請參考以下講義
[url=http://jinjin.mepopedia.com/~jinjin/webdesign-notes/homeworks-3.html][作業03講義] 期末作業首頁設計/article/section/table[/url] 的步驟製作。
[url=http://jinjin.mepopedia.com/~jinjin/webdesign-notes/homework-4.html][作業04講義] 期末作業-列表頁設計/article/section/[/url] 的步驟製作。

設計內容：
1.設計多頁式網站，自行設定主題，針對內容，設定配色及主要風格。
2.可以以主題式網站為主，介紹一個地方文化、特色、美食或喜歡的事物、喜歡的明星、介紹自己，也可延續期中作業主題，使之更完整。
3.準備網站內容所需之圖與文，需要設計logo、視覺主圖、以及其他頁面內容需要的圖文資料，需要原創或取得授權。
4.footer請設定個人的專屬版權聲明，並註明『本網頁為作業之用，如有侵權敬請告知』字樣。
5.含首頁至少完成四頁。
6.以FileZilla上傳至FTP

評分標準：
1.完成四頁，無重大錯誤，至少80分。未達到標準80分以下。
2.完成四頁，無重大錯誤，並達到設計水準則往上加分，設計優秀者則90分以上。
3.未達三頁，並含重大錯誤則不及格。

完成時間：
1.6/14前請務必上傳與回覆，當天上課發表與檢討期末作業，及其他作業最後繳交期限
2.6/21確認分數，期末作業可修改，期末作業最後修改期限。
[color=#CC0066]以上兩次上課請務必準時到課，未到課並未上傳與回覆作業者，期末分數零分。如不能出席，請事先告知，否則以零分計算，未到課分數如有問題，請自行負責[/color]。

2. 繳交作業方式


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


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

每位同學請將自己的資料夾命名為：final-學號
這個作業的網址則為: http://cute.mepopedia.com/~web107b/final/final-107xxxxxxx

資料夾內含：
1.html部分：首頁命名為index.html，其他頁面請自行命名
2.css部分：命名為style.css
3.img：圖片資料夾
存放在 < final-學號 > 的資夾內
[color=#CC0066]切記，所有命名不可為中文，均為英文或數字[/color]

2. 上傳至FTP


3. 回覆本篇文章


作業網址：http://cute.mepopedia.com/~web107b/final/final-107xxxxxxx
1.製作主題：
2.網頁類型（活動式/主題式/個人/企業/..)：
3.導覽列分類（網站內容/中英文）:
4.欲呈現之配色風格：
5.有無遇到的問題?
6.花多少時間製作：
7.製作心得：]]> JinJin 107-2《中國》竹視傳一Ｂ-網頁設計 Sun, 23 Jun 2019 13:43:04 +0800 http://mepopedia.com/forum/read.php?2785,89465,89465#msg-89465 [作業04] 期末作業-列表頁設計 (33 replies) http://mepopedia.com/forum/read.php?2785,89465,89465#msg-89465
  1. 1. 製作說明
  2. 2. 繳交作業方式
  3. 2.0.1 製作完成後，檔案命名方式：
  4. 2.0.2 上傳至FTP
  5. 2.0.3 回覆本篇文章
  6. 3. 製作說明
  7. 4. 繳交作業方式
  8. 4.0.1 製作完成後，檔案命名方式：
  9. 4.0.2 上傳至FTP
  10. 4.0.3 回覆本篇文章
[作業04] 期末作業-列表頁設計

作業範例：http://jinjin.mepopedia.com/~jinjin/hw/hw04/list.html
期末作業：http://jinjin.mepopedia.com/~jinjin/webdesign-notes/

3. 製作說明



1.請參考以下講義

[url=http://jinjin.mepopedia.com/~jinjin/webdesign-notes/homework-4.html][作業04講義] 期末作業-列表頁設計/article/section/[/url] 的步驟製作。

本單元為作業04，為期末作業次頁，列表頁設計，列表頁通常扮演索引的功能，常出現在首頁之後的次頁，如文章列表頁、新聞列表頁、活動列表頁、相關連結列表頁等。

設計內容：
1.延續作業三以期末作業為主題之設定，自行設定主題，針對內容，設定配色及主要風格。
2.本主題之列表頁設定，可設定之主題為第二階層，可往下延伸至第三階層，或做外部連結
3.如為文章列表，第三階層則為文章頁；如為相關連結列表，則可作外部連結。

5.以FileZilla上傳至FTP

4. 繳交作業方式



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



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

每位同學請將自己的資料夾命名為：hw04-學號
這個作業的網址則為: http://cute.mepopedia.com/~web107b/hw04/hw04-107xxxxxxx

資料夾內含：
1.html部分：列表頁可命名為list.html，或其他設定好的檔名，首頁則為index.html
2.css部分：命名為style.css
3.img：圖片資料夾

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


2. 上傳至FTP



3. 回覆本篇文章



作業網址：http://cute.mepopedia.com/~web107b/hw04/hw04-107xxxxxxx/list.html (或其他自行命名的檔名）
1.製作主題：
2.有無遇到的問題?
3.花多少時間製作：
4.製作心得：]]> JinJin 107-2《中國》竹視傳一Ｂ-網頁設計 Sun, 23 Jun 2019 13:38:38 +0800 http://mepopedia.com/forum/read.php?2785,89411,89411#msg-89411 [作業03] 期末作業首頁篇 (33 replies) http://mepopedia.com/forum/read.php?2785,89411,89411#msg-89411
  1. 1. 製作說明
  2. 2. 繳交作業方式
  3. 2.0.1 製作完成後，檔案命名方式：
  4. 2.0.2 上傳至FTP
  5. 2.0.3 回覆本篇文章
  6. 3. 製作說明
  7. 4. 繳交作業方式
  8. 4.0.1 製作完成後，檔案命名方式：
  9. 4.0.2 上傳至FTP
  10. 4.0.3 回覆本篇文章
  11. 5. 製作說明
  12. 6. 繳交作業方式
  13. 6.0.1 製作完成後，檔案命名方式：
  14. 6.0.2 上傳至FTP
  15. 6.0.3 回覆本篇文章
[作業03] 期末作業首頁篇

作業範例：http://jinjin.mepopedia.com/~jinjin/hw/hw03/
期末作業：http://jinjin.mepopedia.com/~jinjin/webdesign-notes/

5. 製作說明



1.請參考以下講義

[url=http://jinjin.mepopedia.com/~jinjin/webdesign-notes/homeworks-3.html][作業03講義] 期末作業首頁設計/article/section/table[/url] 的步驟製作。

本單元為作業03，為期末作業首頁設計，首頁內容通常包含整個網站的概述與精華內容統整。

設定header中的LOGO設計與導覽列設定，以及main區塊內table表格的基本設定，加入區塊，呈現不同分類主題，設定繞圖排文，並加入圖片，增加網頁的豐富性。綜合期中作業所學，可依期末作業內容，自行設定版面。

設計內容：
1.設計多頁式網站，自行設定主題，針對內容，設定配色及主要風格。
2.可以以主題式網站為主，介紹一個地方文化、特色、美食或喜歡的事物、喜歡的明星、介紹自己，也可延續期中作業主題，使之更完整。
3.準備網站內容所需之圖與文，需要設計logo、視覺主圖、以及其他頁面內容需要的圖文資料，需要原創或取得授權。
4.footer請設定個人的專屬版權聲明，並註明『本網頁為作業之用，如有侵權敬請告知』字樣。

5.以FileZilla上傳至FTP

6. 繳交作業方式



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



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

每位同學請將自己的資料夾命名為：hw03-學號
這個作業的網址則為: http://cute.mepopedia.com/~web107b/hw03/hw03-107xxxxxxx

資料夾內含：
1.html部分：首頁命名為index.html
2.css部分：命名為style.css
3.img：圖片資料夾

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


2. 上傳至FTP



3. 回覆本篇文章



作業網址：http://cute.mepopedia.com/~web107b/hw03/hw03-107xxxxxxx
1.製作主題：
2.網頁類型（活動式/主題式/個人/企業/..)：
3.導覽列分類（網站內容/中英文）:
4.欲呈現之配色風格：
5.有無遇到的問題?
6.花多少時間製作：
7.製作心得：]]> JinJin 107-2《中國》竹視傳一Ｂ-網頁設計 Sat, 22 Jun 2019 02:35:09 +0800 http://mepopedia.com/forum/read.php?2785,89374,89374#msg-89374 資料蒐集 (no replies) http://mepopedia.com/forum/read.php?2785,89374,89374#msg-89374 1075445062 107-2《中國》竹視傳一Ｂ-網頁設計 Thu, 25 Apr 2019 21:11:17 +0800 http://mepopedia.com/forum/read.php?2785,89328,89328#msg-89328 [期中作業]OnePage-網頁製作 (36 replies) http://mepopedia.com/forum/read.php?2785,89328,89328#msg-89328
  1. 1. 製作說明
  2. 2. 繳交作業方式
  3. 2.0.1 製作完成後，檔案命名方式：
  4. 2.0.2 上傳至FTP
  5. 2.0.3 回覆本篇文章
  6. 3. 製作說明
  7. 4. 繳交作業方式
  8. 4.0.1 製作完成後，檔案命名方式：
  9. 4.0.2 上傳至FTP
  10. 4.0.3 回覆本篇文章
  11. 5. 製作說明
  12. 6. 繳交作業方式
  13. 6.0.1 製作完成後，檔案命名方式：
  14. 6.0.2 上傳至FTP
  15. 6.0.3 回覆本篇文章
  16. 7. 製作說明
  17. 8. 教學影片
  18. 9. 繳交作業方式
  19. 9.0.1 製作完成後，檔案命名方式：
  20. 9.0.2 上傳至FTP
  21. 9.0.3 回覆本篇文章
[期中作業] OnePage-網頁製作

作業範例：http://jinjin.mepopedia.com/~jinjin/hw/midterm

7. 製作說明



1.請參考以下講義

（1）[url=http://jinjin.mepopedia.com/~jinjin/webdesign-notes/homework-2.html][講義] 期中前置篇-header/nav/LOGO設計與導覽列設定/main/table[/url]
（2）[url=http://jinjin.mepopedia.com/~jinjin/webdesign-notes/homework-midterm.html][講義] 期中作業-onepage/main/article/section/圖文編排區塊單元/錨點連結/[/url]

的步驟製作。

期中作業為一頁式網頁（OnePage）

1.設計一一頁式網頁（OnePage)，自行設定主題，針對內容，設定配色及相關風格。

2.準備圖與文，需要設計logo、視覺主圖、以及其他頁面內容需要的圖文資料，需要原創或取得授權。

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

5.以FileZilla上傳至FTP

本單元需達成的目標有：

1.header/nav/LOGO設計與導覽列設定
2.main主圖的設定
3.表格的設定
4.article/section/單元的設定
5.圖文編排區塊單元
6.錨點連結
7.footer版權說明設定

8. 教學影片


1.【作業02解析】(一) header/nav/LOGO設計與導覽列設定/main/table-初步設定
https://youtu.be/gGTm3UYMzqE




9. 繳交作業方式



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



期中作業FTP上的資料夾為：midterm

每位同學請將自己的資料夾命名為：midterm-學號
這個作業的網址則為: http://cute.mepopedia.com/~web107b/midterm/midterm-107xxxxxxx

資料夾內含：
1.html部分：首頁命名為index.html
2.css部分：命名為style.css
3.img：圖片資料夾

存放在 < midterm-學號 > 的資夾內
可由作業二資料夾複製修改為midterm

2. 上傳至FTP



3. 回覆本篇文章




請回答以下問題/可先於4/26前回覆前三項：

作業網址：http://cute.mepopedia.com/~web107b/midterm/midterm-107xxxxxxx
1.製作主題：
2.網頁類型（活動式/主題式/個人/企業/..)：
3.導覽列分類（網站內容/中英文）：
4.欲呈現之配色風格：
5.有無遇到的問題?
6.花多少時間製作：
7.製作心得：]]> JinJin 107-2《中國》竹視傳一Ｂ-網頁設計 Sat, 22 Jun 2019 02:32:35 +0800 http://mepopedia.com/forum/read.php?2785,89279,89279#msg-89279 [作業02] 期中前置篇-header/nav/LOGO設計與導覽列設定/main/table (40 replies) http://mepopedia.com/forum/read.php?2785,89279,89279#msg-89279
  1. 1. 製作說明
  2. 2. 繳交作業方式
  3. 2.0.1 製作完成後，檔案命名方式：
  4. 2.0.2 上傳至FTP
  5. 2.0.3 回覆本篇文章
  6. 3. 製作說明
  7. 4. 繳交作業方式
  8. 4.0.1 製作完成後，檔案命名方式：
  9. 4.0.2 上傳至FTP
  10. 4.0.3 回覆本篇文章
  11. 5. 製作說明
  12. 6. 繳交作業方式
  13. 6.0.1 製作完成後，檔案命名方式：
  14. 6.0.2 上傳至FTP
  15. 6.0.3 回覆本篇文章
  16. 7. 製作說明
  17. 8. 教學影片
  18. 9. 繳交作業方式
  19. 9.0.1 製作完成後，檔案命名方式：
  20. 9.0.2 上傳至FTP
  21. 9.0.3 回覆本篇文章
  22. 10. 製作說明
  23. 11. 教學影片
  24. 12. 繳交作業方式
  25. 12.0.1 製作完成後，檔案命名方式：
  26. 12.0.2 上傳至FTP
  27. 12.0.3 回覆本篇文章
[作業02] 期中前置篇-header/nav/LOGO設計與導覽列設定/main/table

作業範例：http://jinjin.mepopedia.com/~jinjin/hw/hw02/

10. 製作說明



1.請參考以下講義

[url=http://jinjin.mepopedia.com/~jinjin/webdesign-notes/homework-2.html][講義] 期中前置篇-header/nav/LOGO設計與導覽列設定/main/table[/url] 的步驟製作。

本單元是期中作業一頁式網頁（OnePage）的前置階段，主要設定header中的LOGO設計與導覽列設定，以及main區塊內table表格的基本設定

1.設計一一頁式網頁（OnePage)，自行設定主題，針對內容，設定配色及相關風格。

2.準備圖與文，需要設計logo、視覺主圖、以及其他頁面內容需要的圖文資料，需要原創或取得授權。

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

5.以FileZilla上傳至FTP


11. 教學影片





12. 繳交作業方式



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



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

每位同學請將自己的資料夾命名為：hw02-學號
這個作業的網址則為: http://cute.mepopedia.com/~web107b/hw02/hw02-107xxxxxxx

資料夾內含：
1.html部分：首頁命名為index.html
2.css部分：命名為style.css
3.img：圖片資料夾

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


2. 上傳至FTP



3. 回覆本篇文章



(1).作業網址：http://cute.mepopedia.com/~web107b/hw02/hw02-107xxxxxxx

(2).請回答以下問題：
1.製作主題：
2.欲呈現之配色風格：
3.有無遇到的問題?
4.花多少時間製作：
5.製作心得：]]> JinJin 107-2《中國》竹視傳一Ｂ-網頁設計 Sat, 22 Jun 2019 02:30:02 +0800 http://mepopedia.com/forum/read.php?2785,89179,89179#msg-89179 [Figma作業03] 用Figma設計手機版首頁 (14 replies) http://mepopedia.com/forum/read.php?2785,89179,89179#msg-89179 https://www.figma.com/file/IyK77bBLvbNJjEa7SPCQjjFu/week-3?node-id=0%3A1

作業說明：



以Figma設計手機版首頁

製作完成請將分享回覆於此篇文章。

回覆內容如下：

＝＝＝＝＝＝＝＝

網址：

遇到之問題：

班級學號：]]> JinJin 107-2《中國》竹視傳一Ｂ-網頁設計 Sun, 23 Jun 2019 01:12:39 +0800 http://mepopedia.com/forum/read.php?2785,89068,89068#msg-89068 [Figma作業02] 網頁模板框架練習 (35 replies) http://mepopedia.com/forum/read.php?2785,89068,89068#msg-89068 https://www.figma.com/file/JPhJ1ZQLQSgPz9J31KyrwyEA/3-elements

利用其中元素，製作出一個羅浮宮網站首頁 ([color=#0099CC]或可設計一個自訂的主題[/color]），[color=#CC0000]作爲模擬客戶提案的首頁視覺設計稿[/color]

首頁寬度設定1440px，高度不要小於3000px

製作完成請將分享回覆於此篇文章。

回覆內容如下：

＝＝＝＝＝＝＝＝

網址：
遇到之問題：]]> JinJin 107-2《中國》竹視傳一Ｂ-網頁設計 Thu, 06 Jun 2019 11:22:32 +0800 http://mepopedia.com/forum/read.php?2785,89067,89067#msg-89067 [Figma作業01]資料蒐集 (33 replies) http://mepopedia.com/forum/read.php?2785,89067,89067#msg-89067 https://www.figma.com 線上工具
網站註冊帳號
並建立專案頁面，蒐集十個網站的手機版以及桌機版（筆電）截圖（一個網站兩個截圖。
分別置入frame，請大家在蒐集的過程中，觀察網站的架構與元素。

請大家將完成的頁面分享網址，回覆於本篇文章，並註明班級及學號。
如有任何問題（如存擋製作問題），也請提出

回覆內容如下：

＝＝＝＝＝＝＝＝

網址：
遇到之問題：
觀察心得：]]> JinJin 107-2《中國》竹視傳一Ｂ-網頁設計 Thu, 20 Jun 2019 09:20:33 +0800 http://mepopedia.com/forum/read.php?2785,88995,88995#msg-88995 [作業01] html-css基礎概念練習-歌詞篇 (38 replies) http://mepopedia.com/forum/read.php?2785,88995,88995#msg-88995
  1. 1. 製作說明
  2. 2. 繳交作業方式
  3. 2.0.1 製作完成後，檔案命名方式：
  4. 2.0.2 上傳至FTP
  5. 2.0.3 回覆本篇文章
  6. 3. 製作說明
  7. 4. 繳交作業方式
  8. 4.0.1 製作完成後，檔案命名方式：
  9. 4.0.2 上傳至FTP
  10. 4.0.3 回覆本篇文章
  11. 5. 製作說明
  12. 6. 繳交作業方式
  13. 6.0.1 製作完成後，檔案命名方式：
  14. 6.0.2 上傳至FTP
  15. 6.0.3 回覆本篇文章
  16. 7. 製作說明
  17. 8. 教學影片
  18. 9. 繳交作業方式
  19. 9.0.1 製作完成後，檔案命名方式：
  20. 9.0.2 上傳至FTP
  21. 9.0.3 回覆本篇文章
  22. 10. 製作說明
  23. 11. 教學影片
  24. 12. 繳交作業方式
  25. 12.0.1 製作完成後，檔案命名方式：
  26. 12.0.2 上傳至FTP
  27. 12.0.3 回覆本篇文章
  28. 13. 製作說明
  29. 14. 教學影片
  30. 15. 繳交作業方式
  31. 15.0.1 製作完成後，檔案命名方式：
  32. 15.0.2 上傳至FTP
  33. 15.0.3 回覆本篇文章
[作業01] html-css基礎概念練習-歌詞篇

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

13. 製作說明



1.請參考

[url=http://jinjin.mepopedia.com/~jinjin/webdesign-notes/homeworks.html#hw01][講義] html-css基礎概念練習-歌詞篇製作說明[/url] 的步驟製作。

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

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

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

5.以FileZilla上傳至FTP

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

[color=#CC0000](1)認識基礎html網頁架構
(2)認識css基礎語法，利用單純色彩搭配字體設定設計出具有與歌詞意境吻合網頁[/color]

14. 教學影片


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

https://youtu.be/Uq011dmJkv8




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

https://youtu.be/sqEV6TSnxDw



15. 繳交作業方式



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



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

每位同學請將自己的資料夾命名為：hw01-學號
這個作業的網址則為:http://cute.mepopedia.com/~web107b/hw01/hw01-107xxxxxxx

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

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


2. 上傳至FTP



3. 回覆本篇文章



(1).作業網址：http://cute.mepopedia.com/~web107b/hw01/hw01-107xxxxxxx

(2).請回答以下問題：
1.製作主題：
2.欲呈現之配色風格：
3.有無遇到的問題?
4.花多少時間製作：
5.製作心得：]]> JinJin 107-2《中國》竹視傳一Ｂ-網頁設計 Fri, 21 Jun 2019 10:57:12 +0800 http://mepopedia.com/forum/read.php?2785,88959,88959#msg-88959 [作業00] 網頁設計課前準備與基本認識 (29 replies) http://mepopedia.com/forum/read.php?2785,88959,88959#msg-88959
  1. 1. 製作說明
  2. 2. 繳交作業方式
  3. 2.0.1 製作完成後，檔案命名方式：
  4. 2.0.2 上傳至FTP
  5. 2.0.3 回覆本篇文章
  6. 3. 製作說明
  7. 4. 繳交作業方式
  8. 4.0.1 製作完成後，檔案命名方式：
  9. 4.0.2 上傳至FTP
  10. 4.0.3 回覆本篇文章
  11. 5. 製作說明
  12. 6. 繳交作業方式
  13. 6.0.1 製作完成後，檔案命名方式：
  14. 6.0.2 上傳至FTP
  15. 6.0.3 回覆本篇文章
  16. 7. 製作說明
  17. 8. 教學影片
  18. 9. 繳交作業方式
  19. 9.0.1 製作完成後，檔案命名方式：
  20. 9.0.2 上傳至FTP
  21. 9.0.3 回覆本篇文章
  22. 10. 製作說明
  23. 11. 教學影片
  24. 12. 繳交作業方式
  25. 12.0.1 製作完成後，檔案命名方式：
  26. 12.0.2 上傳至FTP
  27. 12.0.3 回覆本篇文章
  28. 13. 製作說明
  29. 14. 教學影片
  30. 15. 繳交作業方式
  31. 15.0.1 製作完成後，檔案命名方式：
  32. 15.0.2 上傳至FTP
  33. 15.0.3 回覆本篇文章
  34. 16. [url=http://jinjin.mepopedia.com/~jinjin/webdesign-notes/ ]逛逛老師整理的網頁設計教學網站[/url]
  35. 17. 安裝軟體
  36. 17.0.1 FileZilla
  37. 17.0.2 Notepad++
  38. 17.0.3 Dreamweaver
  39. 18. 閱讀關於html、css相關書籍，建立網頁設計基本概念
  40. 19. 教學網站註冊
  41. 20. 認識瀏覽器
  42. 20.0.1 Internet Explorer (IE)
  43. 20.0.2 Google Chrome
  44. 20.0.3 Firefox
  45. 21. 多觀摩與紀錄優良網站
  46. 22. 預備週課後問答
歡迎來到網頁設計的世界，為了讓大家更快的進入這門課程，更好的學習網頁設計，請大家完成以下任務！


第一週須完成的任務：

16. [url=http://jinjin.mepopedia.com/~jinjin/webdesign-notes/ ]逛逛老師整理的網頁設計教學網站[/url]


[url=http://jinjin.mepopedia.com/~jinjin/webdesign-notes/homeworks.html#all]本學期作業列表[/url]

[hr]

17. 安裝軟體


安裝必備軟體

[hr]

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

[hr]

2. Notepad++

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

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

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

[hr]

3. Dreamweaver


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

[hr]

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


請多多利用圖書館或網路資源

[hr]

19. 教學網站註冊


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

20. 認識瀏覽器


安裝目前主流的三個瀏覽器：IE、Google Chrome、FireFox至少三種瀏覽器。

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

[hr]

2. Google Chrome


快速啟動?Google Chrome 瞬間即可啟動。
迅速載入?Google Chrome 的網頁載入速度飛快。
高速搜尋?直接從網址列搜尋網頁。
下載Google Chrome
http://www.google.com/chrome?hl=zh-TW

[hr]

3. Firefox


Mozilla Firefox是目前市占率第三名的瀏覽器，它有著豐富的擴充套件，可打造出相當個人化的瀏覽環境。今天Mozilla基金會釋出了最新的Firefox 29.0正式版，最大的特色在於新設計的界面以及方便的網路同步功能，能將你的分書籤、密碼、分頁、附加元件…等資料自動同步到雲端的Firefox帳號中，比前一版(28.0)更加美觀、直覺、好用
下載FireFox
http://moztw.org/

[hr]

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


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


[hr]

22. 預備週課後問答


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


回覆完畢請註明學號。

祝大家有個愉快的學習旅程！]]> JinJin 107-2《中國》竹視傳一Ｂ-網頁設計 Fri, 21 Jun 2019 10:52:54 +0800