JinJin 的視覺設計專區 - 102-2《中國》竹視傳二C-進階網頁設計 http://mepopedia.com/forum/list.php?1651 Wed, 29 Apr 2026 10:22:09 +0800 Phorum 5.2.7 http://mepopedia.com/forum/read.php?1651,47183,47183#msg-47183 [期末作業] 專題網站設計 (20 replies) http://mepopedia.com/forum/read.php?1651,47183,47183#msg-47183
  1. 1. 作業說明
  2. 2. 回覆項目
  3. 3. 評分標準

1. 作業說明


請參考[期末作業說明] 專題網站製作--以網站新人王為例
http://mepopedia.com/forum/read.php?1651,45305

請設計與台灣有關的主題
並請依[期末作業] 企劃大綱的內容製作
http://mepopedia.com/forum/read.php?1651,45589

盡可能地將本學期學習的技術應用於其中
仍須以視覺美感為主，設計頁數請盡量至少以十頁以上為主
設計上若有困難，請找老師討論

6/17日上課前製作完成，課堂討論評分

將資料夾命名為 final-學號(組長)，以ＦＴＰ上傳至final資料夾
作業網址為http://mepopedia.com/~web102-c/final/final-1015445XXX

[hr]

2. 回覆項目


1.作業網址：

2.網站主題：
3.內容：
4.主要對象：
5.風格設計：
6.組員名單，工作分配，製作心得：

[hr]

3. 評分標準


1.內容技巧，是否有應用所學技巧
2.視覺美感
3.網頁架構（ＨＴＭＬ＋ＣＳＳ）網頁效能
4.工作分配之項目]]> JinJin 102-2《中國》竹視傳二C-進階網頁設計 Sun, 29 Jun 2014 04:14:01 +0800 http://mepopedia.com/forum/read.php?1651,46983,46983#msg-46983 [作業10] PSD 2 HTML (no replies) http://mepopedia.com/forum/read.php?1651,46983,46983#msg-46983
  1. 1. 作業說明
  2. 2. 回覆項目
  3. 3. 評分標準
  4. 4. 參考講義
  5. 5. 作業說明

4. 參考講義


網頁探索- 網頁探索-PSD 2 HTML
JUDE WANG編輯
http://cute.jude.asia/week-2/

講義整理--[講義] 網頁探索-PSD 2 HTML
http://mepopedia.com/forum/read.php?804,46854

[hr]

5. 作業說明


以以下PSD檔，將欲使用的圖檔切片存檔使用
開新資料夾為 hw10，內含img、css、js等資料夾，將轉存的圖檔存於img資料夾中
盡可能的參照PSD的架構撰寫出html檔
上傳備用

[hr]
PSD練習檔下載
http://goo.gl/TemDGG

[hr]
於PSD中選擇欲輸出的圖檔
1.於圖層中按右鍵→複製圖層→新增
2.於新檔案中→影像→修剪

有不同的圖層可以ctrl連選

[hr]
Sublime Text 3編輯器下載
http://www.sublimetext.com/3

PACKAGE CTRL INSTALLATION
https://sublime.wbond.net/installation

Emmet
http://emmet.io/

[hr]
並請回覆
(1)作業網址：http://mepopedia.com/~web102-c/hw10/hw10-學號
(2)製作心得：]]> JinJin 102-2《中國》竹視傳二C-進階網頁設計 Sat, 31 May 2014 22:55:06 +0800 http://mepopedia.com/forum/read.php?1651,46756,46756#msg-46756 [作業09] 網頁探索-切版練習與HTML+CSS設計 (14 replies) http://mepopedia.com/forum/read.php?1651,46756,46756#msg-46756
  1. 1. 作業說明
  2. 2. 回覆項目
  3. 3. 評分標準
  4. 4. 參考講義
  5. 5. 作業說明
  6. 6. 參考講義
  7. 7. 作業
  8. 7.1 切版練習
  9. 7.2 CssZenGarden CSS編輯與設計
  10. 7.3 PSD 2 HTML

6. 參考講義


網頁探索-切版練習與HTML+CSS設計
JUDE WANG編輯
http://cute.jude.asia/week-1/

講義整理
http://mepopedia.com/forum/read.php?804,46755

[hr]

7. 作業


可以選擇其中一種製作，或每種都製作

[hr]

1. 切版練習


檔案下載 http://d.pr/f/iqrv
切版雖然是較舊的技術，但仍然是必學的技術之一，可應用於較小型或個人的網站
製作完成後請上傳至hw09資料夾中，資料夾請命名為：hw09-1-學號

並請回覆
(1)作業網址：http://mepopedia.com/~web102-c/hw09/hw09-1-學號
(2)製作心得：

2. CssZenGarden CSS編輯與設計


HTML檔案http://www.csszengarden.com/examples/index
CSS檔案http://www.csszengarden.com/examples/style.css
建議可使用
http://www.sublimetext.com/
編輯程式碼
製作完成後請上傳至hw09資料夾中，資料夾請命名為：hw09-2-學號

並請回覆
(1)作業網址：http://mepopedia.com/~web102-c/hw09/hw09-2-學號
(2)製作心得：

3. PSD 2 HTML


預習與練習
下回介紹
http://blog.spoongraphics.co.uk/tutorials/how-to-create-a-sleek-grid-based-website-design
http://line25.com/tutorials/create-a-grid-based-web-design-in-html5-css3]]> JinJin 102-2《中國》竹視傳二C-進階網頁設計 Sat, 21 Jun 2014 23:07:53 +0800 http://mepopedia.com/forum/read.php?1651,46367,46367#msg-46367 [作業08] HTML/CSS/jQuery 物件小動畫、燈箱效果 (11 replies) http://mepopedia.com/forum/read.php?1651,46367,46367#msg-46367
  1. 1. 作業說明
  2. 2. 回覆項目
  3. 3. 評分標準
  4. 4. 參考講義
  5. 5. 作業說明
  6. 6. 參考講義
  7. 7. 作業
  8. 7.1 切版練習
  9. 7.2 CssZenGarden CSS編輯與設計
  10. 7.3 PSD 2 HTML
  11. 8. HTML/CSS/jQuery 物件小動畫、燈箱效果作業說明

8. HTML/CSS/jQuery 物件小動畫、燈箱效果作業說明


請參考
[講義]FunTaipei HTML/CSS/jQuery 動態效果分析
http://mepopedia.com/forum/read.php?804,46224

[hr]
1.參考上課與講義上之作法，以jQuery做出物件小動畫、燈箱效果(有效果即可)
2.也可以期中或期末主題製作物件小動畫、燈箱效果

3.將資料夾命名為 hw08-學號，以ＦＴＰ上傳至hw08資料夾
作業網址為http://mepopedia.com/~web102-c/hw08/hw08-1015445XXX 。

並請回覆：

(1)作業網址：
(2)製作心得：
學號

[hr]
請於規定時間準時繳交作業，本作業為加分作業。
[hr]]]> JinJin 102-2《中國》竹視傳二C-進階網頁設計 Sun, 22 Jun 2014 17:30:43 +0800 http://mepopedia.com/forum/read.php?1651,46189,46189#msg-46189 [作業07] jQuery動態煥頁效果 (18 replies) http://mepopedia.com/forum/read.php?1651,46189,46189#msg-46189
  1. 1. 作業說明
  2. 2. 回覆項目
  3. 3. 評分標準
  4. 4. 參考講義
  5. 5. 作業說明
  6. 6. 參考講義
  7. 7. 作業
  8. 7.1 切版練習
  9. 7.2 CssZenGarden CSS編輯與設計
  10. 7.3 PSD 2 HTML
  11. 8. HTML/CSS/jQuery 物件小動畫、燈箱效果作業說明
  12. 9. jQuery動態煥頁效果作業說明

9. jQuery動態煥頁效果作業說明


請參考
[講義] FunTaipei HTML 網頁架構分析
http://mepopedia.com/forum/read.php?804,45798

[hr]
1.參考上課與講義上之作法，以jQuery做出翻頁效果(有效果即可)
2.也可以期中或期末主題製作翻頁效果

3.將資料夾命名為 hw07-學號，以ＦＴＰ上傳至hw07資料夾
作業網址為http://mepopedia.com/~web102-c/hw07/hw07-1015445XXX 。

並請回覆：

(1)作業網址：
(2)製作心得：
學號

[hr]
請於規定時間準時繳交作業，本作業為加分作業。
[hr]]]> JinJin 102-2《中國》竹視傳二C-進階網頁設計 Sun, 22 Jun 2014 17:25:11 +0800 http://mepopedia.com/forum/read.php?1651,45631,45631#msg-45631 [作業06] jQuery動態網頁初探 (29 replies) http://mepopedia.com/forum/read.php?1651,45631,45631#msg-45631
  1. 1. 作業說明
  2. 2. 回覆項目
  3. 3. 評分標準
  4. 4. 參考講義
  5. 5. 作業說明
  6. 6. 參考講義
  7. 7. 作業
  8. 7.1 切版練習
  9. 7.2 CssZenGarden CSS編輯與設計
  10. 7.3 PSD 2 HTML
  11. 8. HTML/CSS/jQuery 物件小動畫、燈箱效果作業說明
  12. 9. jQuery動態煥頁效果作業說明
  13. 10. jQuery動態網頁初探作業說明
  14. 10.1 作業步驟

10. jQuery動態網頁初探作業說明


請參考
[講義] jQuery講義
http://mepopedia.com/forum/read.php?1497,45619

[hr]
jQuery動態網頁初探作業說明
http://youtu.be/ScKyR0mrh1s



[hr]

1. 作業步驟

1.修改期中作業檔案，使#main產生fadein效果
2.學習重點
<head> <!--jQuery 語法--> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="http://code.jquery.com/jquery-1.10.2.js"></script> <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <script> $(function() { $( "#main" ).hide(); $( "#main" ).fadeIn(2000); }); </script> </head> 3.將資料夾命名為 hw06-學號，以ＦＴＰ上傳至hw06資料夾
作業網址為http://mepopedia.com/~web102-a/hw06/hw06-1015445XXX 。

並請回覆：

(1)作業網址：
(2)製作心得：
學號

[hr]
請於規定時間準時繳交作業，逾期不後。
[hr]]]> JinJin 102-2《中國》竹視傳二C-進階網頁設計 Mon, 23 Jun 2014 01:51:51 +0800 http://mepopedia.com/forum/read.php?1651,45589,45589#msg-45589 [期末作業01] 企劃大綱 (10 replies) http://mepopedia.com/forum/read.php?1651,45589,45589#msg-45589
  1. 1. 作業說明
  2. 2. 回覆項目
  3. 3. 評分標準
  4. 4. 參考講義
  5. 5. 作業說明
  6. 6. 參考講義
  7. 7. 作業
  8. 7.1 切版練習
  9. 7.2 CssZenGarden CSS編輯與設計
  10. 7.3 PSD 2 HTML
  11. 8. HTML/CSS/jQuery 物件小動畫、燈箱效果作業說明
  12. 9. jQuery動態煥頁效果作業說明
  13. 10. jQuery動態網頁初探作業說明
  14. 10.1 作業步驟
  15. 11. 企劃大綱說明
  16. 12. 企劃大綱

11. 企劃大綱說明


請參考[期末作業說明] 專題網站製作--以網站新人王為例
http://mepopedia.com/forum/read.php?1651,45305

請設計與台灣有關的主題

[hr]

12. 企劃大綱


1.網站主題：
2.內容大綱：
3.主要對象(分析)：
4.網頁架構圖(樹狀圖)：
5.網頁版型設計圖(標示尺寸)
6.色彩規劃：
7.資料蒐集：
8.歷屆得獎分析(至少三組)
9.組員名單，工作分配(視覺規劃、HTML CSS設計、動態效果)：]]> JinJin 102-2《中國》竹視傳二C-進階網頁設計 Fri, 27 Jun 2014 23:24:12 +0800 http://mepopedia.com/forum/read.php?1651,45307,45307#msg-45307 [作業05] HTML5與CSS--網頁版型練習 (18 replies) http://mepopedia.com/forum/read.php?1651,45307,45307#msg-45307
  1. 1. 作業說明
  2. 2. 回覆項目
  3. 3. 評分標準
  4. 4. 參考講義
  5. 5. 作業說明
  6. 6. 參考講義
  7. 7. 作業
  8. 7.1 切版練習
  9. 7.2 CssZenGarden CSS編輯與設計
  10. 7.3 PSD 2 HTML
  11. 8. HTML/CSS/jQuery 物件小動畫、燈箱效果作業說明
  12. 9. jQuery動態煥頁效果作業說明
  13. 10. jQuery動態網頁初探作業說明
  14. 10.1 作業步驟
  15. 11. 企劃大綱說明
  16. 12. 企劃大綱
  17. 13. HTML5與CSS--網頁版型練習作業說明
  18. 13.1 作業步驟

13. HTML5與CSS--網頁版型練習作業說明


請參考
[講義] HTML5與CSS--網頁版型設定：
http://mepopedia.com/forum/read.php?804,45304

[hr]

1. 作業步驟

1.參考雙欄版型 http://mepopedia.com/~jinjin/web/hw07-102/
與三欄版型 http://mepopedia.com/~jinjin/web/hw07-102/index-3.html
2.分別嘗試放入內容，並搭配重新的配色與CSS的改變。
3.利用現有的框架，體會區塊版型的應用。
5.將資料夾命名為 hw05-學號，以ＦＴＰ上傳至hw05資料夾
作業網址為http://mepopedia.com/~web102-c/hw05/hw05-1015445XXX 。

並請回覆：

(1)作業網址：
(2)本頁設計重點：
(3)製作心得：
學號

[hr]
請於規定時間準時繳交作業，逾期不後。
[hr]]]> JinJin 102-2《中國》竹視傳二C-進階網頁設計 Sat, 28 Jun 2014 01:02:52 +0800 http://mepopedia.com/forum/read.php?1651,45305,45305#msg-45305 [期末作業說明] 專題網站製作--以網站新人王為例 (no replies) http://mepopedia.com/forum/read.php?1651,45305,45305#msg-45305
  1. 1. 作業說明
  2. 2. 回覆項目
  3. 3. 評分標準
  4. 4. 參考講義
  5. 5. 作業說明
  6. 6. 參考講義
  7. 7. 作業
  8. 7.1 切版練習
  9. 7.2 CssZenGarden CSS編輯與設計
  10. 7.3 PSD 2 HTML
  11. 8. HTML/CSS/jQuery 物件小動畫、燈箱效果作業說明
  12. 9. jQuery動態煥頁效果作業說明
  13. 10. jQuery動態網頁初探作業說明
  14. 10.1 作業步驟
  15. 11. 企劃大綱說明
  16. 12. 企劃大綱
  17. 13. HTML5與CSS--網頁版型練習作業說明
  18. 13.1 作業步驟
  19. 14. 參考網址
  20. 15. 期末作業上課說明影片
  21. 16. 作業說明
  22. 17. 評分標準
  23. 18. 進度規劃
[期末作業說明] 專題網站製作--以網站新人王為例[hr]

14. 參考網址


1.2013-第12屆新人王網站設計大賽 http://2013.netking.tw/
2.2012-第11屆新人王網站設計大賽 http://2012.netking.tw/
3.2011-第10屆新人王網站設計大賽 http://2011.netking.tw/
4.2010-第9屆新人王網站設計大賽 http://2010.netking.tw/
[hr]

15. 期末作業上課說明影片


期末作業講說影片
http://youtu.be/4w9Y5HlxXQU



[hr]

16. 作業說明


請參考歷屆競賽說明：http://2013.netking.tw/competition.html

1.含首頁與內頁至少需10頁以上
2.主題需與台灣有關
3.內容需原創
4.加強內容豐富度與設計感
5.請盡量以新的網頁技術製作(HTML+CSS)
6.可以團體製作，一組不得超過五人，每人需有詳細的工作分配與製作項目

[hr]

17. 評分標準


1.視覺美感
2.CSS設計
3.動態效果

[hr]

18. 進度規劃


第十二週05/06　企劃大綱(主題、內容大綱、資料蒐集、歷屆得獎分析(至少三組)、組員名單)
第十三週05/13　首頁圖稿
第十四週05/20　版型圖稿、版型製作
第十五週05/27　內容架構
第十六週06/03　內容製作
第十七週06/10　期末作業討論
第十八週06/17　期末作業繳交，完整企畫書與作品]]> JinJin 102-2《中國》竹視傳二C-進階網頁設計 Tue, 22 Apr 2014 00:43:23 +0800 http://mepopedia.com/forum/read.php?1651,44851,44851#msg-44851 [期中作業] HTML與CSS練習--網站實作 (45 replies) http://mepopedia.com/forum/read.php?1651,44851,44851#msg-44851
  1. 1. 作業說明
  2. 2. 回覆項目
  3. 3. 評分標準
  4. 4. 參考講義
  5. 5. 作業說明
  6. 6. 參考講義
  7. 7. 作業
  8. 7.1 切版練習
  9. 7.2 CssZenGarden CSS編輯與設計
  10. 7.3 PSD 2 HTML
  11. 8. HTML/CSS/jQuery 物件小動畫、燈箱效果作業說明
  12. 9. jQuery動態煥頁效果作業說明
  13. 10. jQuery動態網頁初探作業說明
  14. 10.1 作業步驟
  15. 11. 企劃大綱說明
  16. 12. 企劃大綱
  17. 13. HTML5與CSS--網頁版型練習作業說明
  18. 13.1 作業步驟
  19. 14. 參考網址
  20. 15. 期末作業上課說明影片
  21. 16. 作業說明
  22. 17. 評分標準
  23. 18. 進度規劃
  24. 19. 期中作業說明

19. 期中作業說明


請參考期中前之講義製作
http://mepopedia.com/~jinjin/web/hw05a/link.html

須具備
1.以課堂練習架構修改為一全新內容的網站。
2.每個連結都要有內容
3.注意配色、設計質感、排版、字體、行間、字體大小等細節，設一一具有設計質感的網站。
4.至少有一頁面需有CSS3的效果，但不可過於誇張。

[hr]
將資料夾命名為 midterm-學號，以ＦＴＰ上傳至midterm資料夾
作業網址為http://mepopedia.com/~web102-c/midterm/midterm-1015445XXX 。

並請回覆：

(1)作業網址：
(2)網站主題：
(2)對象：
(3)色彩計畫：
(4)風格設定、預期成效：
(5)製作心得：
學號

[hr]
請於規定時間準時繳交作業，逾期不後。
[hr]]]> JinJin 102-2《中國》竹視傳二C-進階網頁設計 Thu, 26 Jun 2014 11:35:18 +0800 http://mepopedia.com/forum/read.php?1651,44671,44671#msg-44671 [作業04] HTML與CSS練習--內頁實作篇--資料整理--以DIV製作表格效果 (36 replies) http://mepopedia.com/forum/read.php?1651,44671,44671#msg-44671
  1. 1. 作業說明
  2. 2. 回覆項目
  3. 3. 評分標準
  4. 4. 參考講義
  5. 5. 作業說明
  6. 6. 參考講義
  7. 7. 作業
  8. 7.1 切版練習
  9. 7.2 CssZenGarden CSS編輯與設計
  10. 7.3 PSD 2 HTML
  11. 8. HTML/CSS/jQuery 物件小動畫、燈箱效果作業說明
  12. 9. jQuery動態煥頁效果作業說明
  13. 10. jQuery動態網頁初探作業說明
  14. 10.1 作業步驟
  15. 11. 企劃大綱說明
  16. 12. 企劃大綱
  17. 13. HTML5與CSS--網頁版型練習作業說明
  18. 13.1 作業步驟
  19. 14. 參考網址
  20. 15. 期末作業上課說明影片
  21. 16. 作業說明
  22. 17. 評分標準
  23. 18. 進度規劃
  24. 19. 期中作業說明
  25. 20. HTML與CSS練習--內頁實作篇--資料整理--以DIV製作表格效果作業說明
  26. 20.1 作業說明
  27. 20.2 作業步驟

20. HTML與CSS練習--內頁實作篇--資料整理--以DIV製作表格效果作業說明


請參考
[講義] HTML與CSS練習--內頁實作篇--資料整理--以DIV製作表格效果：
http://mepopedia.com/forum/read.php?804,44612

[hr]

1. 作業說明

1.延續作業03，繼續完成至少另一頁，
2.製作：(1)完成首頁，(2)設定滑鼠移過的效果，其他頁面將陸續完成。

[hr]

2. 作業步驟

1.參考http://mepopedia.com/~jinjin/web/hw04a/works.html
並以講義中的語法為參考http://mepopedia.com/forum/read.php?804,44612
2.延續作業03的內容
3.請以設計質感與創新設計為主要考量
4.將ＨＴＭＬ與ＣＳＳ語法分別貼上後，修改ＨＴＭＬ與ＣＳＳ語法。
5.將資料夾命名為 hw04-學號，以ＦＴＰ上傳至hw04資料夾
作業網址為http://mepopedia.com/~web102-c/hw04/hw04-1015445XXX 。

並請回覆：

(1)作業網址：
(2)本頁設計重點：
(3)製作心得：
學號

[hr]
請於規定時間準時繳交作業，逾期不後。
[hr]]]> JinJin 102-2《中國》竹視傳二C-進階網頁設計 Mon, 23 Jun 2014 01:45:22 +0800 http://mepopedia.com/forum/read.php?1651,44309,44309#msg-44309 [作業03] HTML與CSS練習--首頁實作篇 (37 replies) http://mepopedia.com/forum/read.php?1651,44309,44309#msg-44309
  1. 1. 作業說明
  2. 2. 回覆項目
  3. 3. 評分標準
  4. 4. 參考講義
  5. 5. 作業說明
  6. 6. 參考講義
  7. 7. 作業
  8. 7.1 切版練習
  9. 7.2 CssZenGarden CSS編輯與設計
  10. 7.3 PSD 2 HTML
  11. 8. HTML/CSS/jQuery 物件小動畫、燈箱效果作業說明
  12. 9. jQuery動態煥頁效果作業說明
  13. 10. jQuery動態網頁初探作業說明
  14. 10.1 作業步驟
  15. 11. 企劃大綱說明
  16. 12. 企劃大綱
  17. 13. HTML5與CSS--網頁版型練習作業說明
  18. 13.1 作業步驟
  19. 14. 參考網址
  20. 15. 期末作業上課說明影片
  21. 16. 作業說明
  22. 17. 評分標準
  23. 18. 進度規劃
  24. 19. 期中作業說明
  25. 20. HTML與CSS練習--內頁實作篇--資料整理--以DIV製作表格效果作業說明
  26. 20.1 作業說明
  27. 20.2 作業步驟
  28. 21. HTML與CSS練習--首頁實作篇作業說明
  29. 21.1 作業目的
  30. 21.2 作業說明
  31. 21.3 作業步驟

21. HTML與CSS練習--首頁實作篇作業說明


請參考
[講義] HTML與CSS練習--首頁實作篇：http://mepopedia.com/forum/read.php?804,43670

1. 作業目的

1.進一步熟悉HTML與CSS
2.練習將視覺與語法結合
3.學習如何修改HTML與CSS語法

[hr]

2. 作業說明

1.請以範例網站為基模，使用其排版概念，重新改編為一新的網站設計，除了架構一樣，其他資訊皆要更新。
2.製作：(1)完成首頁，(2)設定滑鼠移過的效果，其他頁面將陸續完成。

[hr]

3. 作業步驟

1.參考http://mepopedia.com/~web102-c/hw03/hw03/
並以講義中的語法為參考http://mepopedia.com/forum/read.php?804,43670。
2.重新設定一全新網站的主題，蒐集相關主題及內容資料
3.重新設定網站主題、使用對象、色彩計畫、圖片元素等。
4.製作背景圖片、整體色彩設定，標題及文字內容。
5.將ＨＴＭＬ與ＣＳＳ語法分別貼上後，修改ＨＴＭＬ與ＣＳＳ語法。
6.將資料夾命名為 hw03-學號，以ＦＴＰ上傳至hw03資料夾
作業網址為http://mepopedia.com/~web102-c/hw03/hw03-1015445XXX 。

並請回覆：

(1)作業網址：
(2)網站主題：
(2)對象：
(3)色彩計畫：
(4)風格設定、網頁看點、預期成效：
(5)請整理以下數值：
字體設定(font-family)
標題級數、文章標題級數、內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)
(6)製作心得：
學號

[hr]
請於規定時間準時繳交作業，逾期不後。
[hr]]]> JinJin 102-2《中國》竹視傳二C-進階網頁設計 Mon, 23 Jun 2014 01:40:14 +0800 http://mepopedia.com/forum/read.php?1651,42885,42885#msg-42885 [作業02] 網頁格線排版練習 (29 replies) http://mepopedia.com/forum/read.php?1651,42885,42885#msg-42885
  1. 1. 作業說明
  2. 2. 回覆項目
  3. 3. 評分標準
  4. 4. 參考講義
  5. 5. 作業說明
  6. 6. 參考講義
  7. 7. 作業
  8. 7.1 切版練習
  9. 7.2 CssZenGarden CSS編輯與設計
  10. 7.3 PSD 2 HTML
  11. 8. HTML/CSS/jQuery 物件小動畫、燈箱效果作業說明
  12. 9. jQuery動態煥頁效果作業說明
  13. 10. jQuery動態網頁初探作業說明
  14. 10.1 作業步驟
  15. 11. 企劃大綱說明
  16. 12. 企劃大綱
  17. 13. HTML5與CSS--網頁版型練習作業說明
  18. 13.1 作業步驟
  19. 14. 參考網址
  20. 15. 期末作業上課說明影片
  21. 16. 作業說明
  22. 17. 評分標準
  23. 18. 進度規劃
  24. 19. 期中作業說明
  25. 20. HTML與CSS練習--內頁實作篇--資料整理--以DIV製作表格效果作業說明
  26. 20.1 作業說明
  27. 20.2 作業步驟
  28. 21. HTML與CSS練習--首頁實作篇作業說明
  29. 21.1 作業目的
  30. 21.2 作業說明
  31. 21.3 作業步驟
  32. 22. 網頁格線排版練習作業說明
  33. 22.1 作業目的
  34. 22.2 作業說明
  35. 22.3 作業步驟
  36. 22.4 注意事項

22. 網頁格線排版練習作業說明


請參考[講義] 網頁設計的美學原則：http://mepopedia.com/forum/read.php?804,42883
[講義] 以Photoshop製作網頁版型：http://mepopedia.com/forum/read.php?804,43354

1. 作業目的

1.熟悉格線排版的目的與意義
2.了解網頁實際內容與細節
3.觀察優良網站的設計原則
4.增強網頁排版的能力與技巧

[hr]

2. 作業說明

1.請以格線設計原則，以講義上任一優良網站為例，使用其排版概念及網頁資訊，重新改編為一新的網站設計。
2.製作：(1)首頁，(2)滑鼠移過的效果，以及(3)進入後的至少其中一子頁。

[hr]

3. 作業步驟

1.請下載[url=https://github.com/nathansmith/960-Grid-System/archive/master.zip]格線系統版型[/url]，並以photoshop軟體版本選用其中一種製作。
2.請選擇講義中任何一個你認為值得學習的網站首頁作為練習對象，截圖置入photoshop當作背景。
3.試著以格線系統重新排版，以原參考網頁的版型與網頁資訊，重新以photoshop設計新的網站，包含標題文字、圖片、色彩。
4.重新設定網站主題、使用對象、色彩計畫、圖片元素等。
5.[color=#CC0066]完成後請保留原檔[/color](以方便日後修改)，並存成PDF檔以夾檔方式上傳，並將檔名命名為 hw02-學號.pdf 。

6.上傳
(1)首頁，(2)滑鼠移過的效果，(3)進入後的至少其中一子頁。
並請回覆：

參考網站網址：
(1)網站分類：
(2)網站主題：
(2)對象：
(3)色彩計畫：
(4)風格設定、網頁看點、預期成效：
(5)請整理以下數值：
字體設定(font-family)
標題級數、文章標題級數、內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)
(6)製作心得：
學號

[hr]

4. 注意事項

1.網站主題、標題名稱、圖片、配色請務必為新的設計，單純圖片可以網頁圖片取代，但必須符合網站整體屬性與效果，需設計之圖片(如頂圖、背景圖等，需經過設計，不可以現成圖片取代)
2.[color=#CC0066]排版比例、間距、字體大小、等請盡量以參考範本為主[/color]。
3.中文字體以微軟正黑、新細明體、標楷體為主，一般設定建議以微軟正黑為主，較具設計質感。
4.[color=#CC0066]網頁單位請務必以px標示，[/color]並注意整體網頁的寬度。

5.若沒有特別想法，可將網站設定為：
(1)網站主題：設計工作室(請自行命名，中英文皆可)
(2)對象：對設計有興趣的人，以20~30為主。
3.請於規定時間準時繳交作業，逾期不後。
[hr]]]> JinJin 102-2《中國》竹視傳二C-進階網頁設計 Fri, 27 Jun 2014 22:43:03 +0800 http://mepopedia.com/forum/read.php?1651,42170,42170#msg-42170 [作業01] DIV與CSS複習--以色塊為主的基本單欄網頁版型 (43 replies) http://mepopedia.com/forum/read.php?1651,42170,42170#msg-42170
  1. 1. 作業說明
  2. 2. 回覆項目
  3. 3. 評分標準
  4. 4. 參考講義
  5. 5. 作業說明
  6. 6. 參考講義
  7. 7. 作業
  8. 7.1 切版練習
  9. 7.2 CssZenGarden CSS編輯與設計
  10. 7.3 PSD 2 HTML
  11. 8. HTML/CSS/jQuery 物件小動畫、燈箱效果作業說明
  12. 9. jQuery動態煥頁效果作業說明
  13. 10. jQuery動態網頁初探作業說明
  14. 10.1 作業步驟
  15. 11. 企劃大綱說明
  16. 12. 企劃大綱
  17. 13. HTML5與CSS--網頁版型練習作業說明
  18. 13.1 作業步驟
  19. 14. 參考網址
  20. 15. 期末作業上課說明影片
  21. 16. 作業說明
  22. 17. 評分標準
  23. 18. 進度規劃
  24. 19. 期中作業說明
  25. 20. HTML與CSS練習--內頁實作篇--資料整理--以DIV製作表格效果作業說明
  26. 20.1 作業說明
  27. 20.2 作業步驟
  28. 21. HTML與CSS練習--首頁實作篇作業說明
  29. 21.1 作業目的
  30. 21.2 作業說明
  31. 21.3 作業步驟
  32. 22. 網頁格線排版練習作業說明
  33. 22.1 作業目的
  34. 22.2 作業說明
  35. 22.3 作業步驟
  36. 22.4 注意事項
  37. 23. 網頁基礎複習
  38. 24. 課堂範例
  39. 25. 盒子模型／區塊模型（Box Model）
  40. 26. 作業說明
經過了一年，為了讓大家回復記憶，請先複習基礎的網頁設計概念

23. 網頁基礎複習


[url=http://mepopedia.com/forum/read.php?804,41760][講義] HTML & CSS網頁基礎複習整理[/url]

[hr]

24. 課堂範例


http://mepopedia.com/~web103-2a/hw01/hw01-102

[hr]

25. 盒子模型／區塊模型（Box Model）


.參考以下網址，並牢記下圖 盒子模型／區塊模型（Box Model）
http://mepopedia.com/forum/read.php?844,15917

[img]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-01.gif[/img]

[hr]

26. 作業說明


參照講義
[url=http://mepopedia.com/forum/read.php?804,16481]利用Div標籤與CSS建立基本單欄網頁版型--以單純色塊為例[/url]

自行選擇主題，製作以DIV架構搭配CSS的基本網頁，請注意字體大小、整體質感與配色

直接將語法撰寫於http://codepen.io/pen
並將之儲存

製作完畢請上傳FTP
下載：http://filezilla-project.org/download.php?type=client

並回覆於此篇文章

1.網址:http://mepopedia.com/~web102-c/hw01/hw01-101xxxxxxx
2.設計概念與製作心得：
3.何謂HTML、DIV及CSS
4.附上至少一個覺得設計很有質感的網站，並說明原因
5.期待這門課的學習成果與收穫為何?

[hr]
範例：
http://mepopedia.com/~web101-a/hw01/hw01-1006445002/
http://mepopedia.com/~web101-a/hw01/hw01-1006445010/]]> JinJin 102-2《中國》竹視傳二C-進階網頁設計 Sat, 28 Jun 2014 03:35:18 +0800