Re: [期中作業] 以單欄為主的網站設計
[color=#990000][期中作業] 以單欄為主的網站設計[/color]
1. 一、製作說明：
1.請參考期中之前教過的做法及講義，製作以單欄為主的網站
2.每個同學記得在[color=#990033]title的部分打上"自訂的主題"[/color]
在#footer 註明 Designed by 某某某(可自行取名) 1001445ooo
3.題目自訂
4.需自行設計圖片，製作網站內容
5.需以DIV搭配CSS的方式完成，設定尺寸、字體、顏色等等
6.至少完成兩頁的內容，若內容完整，且全部頁面完成，最多加6分。
[color=#993300]7.若真的不會做，可下載附檔，參考老師的檔案，加以修改完成，但圖片及文字內容不可一樣。
(附檔有兩組：
一組是以圖片按鈕為主，需自行製作圖片
一組是以導覽列為主(色彩編排)，請選擇一組參考製作)[/color]
8.製作完成上傳至FTP
9.本次作業的重點在於：
[color=#CC0000](1)能自行設計以DIV與CSS製作的網站
(2)利用自已設計的圖片、色彩搭配與字體設定等設計出具有質感的網頁[/color]
2. 二、評分標準與製作檢核
1. HTML的正確架構(DIV的使用) 20%
2. 整體設計美感(CSS運用，風格及配色，字體設定、圖片製作) 30%
3. 導覽列的正確性(含導覽超連結)10%
4. h1或h2的使用 5%
5. class(類別)的運用 5%
6. HTML Title的設定 5%
7. Footer的版權宣告 5%
8. 內容完整的兩頁(至少)的連結 10%
9. 製作說明 10%
加分：
1.內容完整度，連結頁面全部做完最多加6分，最多100分。
3. 三、繳交作業方式
[color=#CC0066]1.製作完成後，檔案命名方式：[/color]
[color=#669900]期中作業FTP上的資料夾為：midtern
每位同學請將自己的資料夾命名為：midterm-學號
這個作業的網址則為:http://mepopedia.com/~web100b/midterm/midterm-100xxxxxxx
資料夾內含：
(1).首頁命名為index.html
(2).其他頁面請自行命名，但需注意命名為則，不可出現中文及全形字、特殊符號等等
(3).一個命名為style.css的css樣式檔
(4).存放圖檔的images資料夾
存放在 < midterm-學號 > 的資夾內[/color]
[color=#CC0066]2.全部完成後上傳至FTP[/color]
[color=#CC0066]3.依進度回覆本篇文章[/color]
[color=#0066CC]前置作業[/color](10/19)
(1)網站主題：
(2)製作動機：
(3)製作內容：
(4)資料蒐集分析
◎設計優良網站(風格)列表與分析：
◎相關網站列表與分析：
[color=#0066CC]完成品[/color](11/08前)
[color=#FF0066]請將這項放置於文章最前面[/color]
(1)作業網址
(2).
1有無遇到的問題
2.製作感想
3.製作作業的時間
[color=#CC0066]4.請務必在11/08前回覆，否則為遲交[/color]
4. 四、期中作業進度參考
第七週 10/19 前置作業，題目確定，資料蒐集與分析等
第八週 10/26 決定排版形式、尺寸、圖片製作
第九週 11/02 HTML DIV與CSS設定
第十週 11/09 11/8之前將期中作業上傳繳交
5. 五、同學常見問題之注意事項
隨時補充：
1.網頁圖檔不宜太大，否則網頁開啟速度會變慢，請盡量在Photoshop或Illustrator的『儲存為網頁與裝置用』的功能裡，修改圖檔的大小至100KB以下，100KB會佔1Mb頻寬(每秒鐘)，以此類推。
2.有文字出現的區塊，要記得設定padding，文字才不會跟邊框黏在一起。
3.導覽列的超連結
請記得先將第一頁所有的連結都先設定好，再以另存新檔的方式，存成其他檔案，如此就不用每次都要設定超連結。
4.亂碼問題，放在 ＜head＞ ＜/head＞ 之間
5.CSS檔案的路徑，放在 ＜head＞ ＜/head＞ 之間
6.檔案宣告，在HTML檔最前面放
7.任何出現在網頁裡的命名不能出現中文及全形字。
8.圖片必須放在images圖片資料夾裡
9.使用進階語法，需注意若直接以Dreamweaver製作，彈性較小，會比較難修改。
10.檔案被刪除的問題非常嚴重，尤其是B班，請再仔細檢查有無被刪檔，若有麻煩再上傳
=================================================
[color=#CC0066]若經發現作業為直接複製同學檔案以零分計[/color]
=================================================
Edited 12 time(s). Last edit at 11/02/2011 08:32AM by JinJin.
(編輯記錄)
完成品
(1)作業網址: http://mepopedia.com/~web100b/midterm/midterm-1001445008/
(2).
1有無遇到的問題 無
2.製作感想 : 很辛苦要花很多時間慢慢仔細去做,很有成就感,也覺得很有趣
3.製作作業的時間 : 2 天
前置作業
(1)網站主題： 顏色
(2)製作動機： 身為視傳的一份子, 顏色是不可或缺的,想做多ㄧ點了解
(3)製作內容： 介紹5種顏色
(4)資料蒐集分析
◎設計優良網站(風格)列表與分析：
http://www.6th-aunt.com.tw/story.asp 很有傳統文化的感覺 而且排版整齊明瞭
◎相關網站列表與分析：
http://zh.wikipedia.org/zh-hant/%E7%BA%A2%E8%89%B2 各種顏色的涵義和代表象徵都有說明
MEPOERs said:
(1)作業網址: http://mepopedia.com/~web100b/midterm/midterm-1001445008/
(2).
1有無遇到的問題 無
2.製作感想 : 很辛苦要花很多時間慢慢仔細去做,很有成就感,也覺得很有趣
3.製作作業的時間 : 2 天
前置作業
(1)網站主題： 顏色
(2)製作動機： 身為視傳的一份子, 顏色是不可或缺的,想做多ㄧ點了解
(3)製作內容： 介紹5種顏色
(4)資料蒐集分析
◎設計優良網站(風格)列表與分析：
http://www.6th-aunt.com.tw/story.asp 很有傳統文化的感覺 而且排版整齊明瞭
◎相關網站列表與分析：
http://zh.wikipedia.org/zh-hant/%E7%BA%A2%E8%89%B2 各種顏色的涵義和代表象徵都有說明
Edited 1 time(s). Last edit at 11/08/2011 06:02PM by 1001445008.
(編輯記錄)
MEPOERs said:
JinJin: 有趣的主題，內文再小一點，質感會更好！
1001445008: 內文在原檔是用別個字體和大小,沒有想到別的地方會顯示不出來.下次會注意~謝謝 ^口^
老師~ 我已經從新用好 給學姊上傳嚕攸!!
麻煩妳看看了
(1)網站主題： 攝影風格
(2)製作動機： 我很喜歡攝影 拍照等戶外取景等
(3)製作內容： 介紹自身攝影作品
(4)資料蒐集分析
◎相關網站列表與分析：
http://www.photo.org.tw/default.aspx
介紹很多攝影有關作品 及相機用法等等
麻煩妳看看了
(1)網站主題： 攝影風格
(2)製作動機： 我很喜歡攝影 拍照等戶外取景等
(3)製作內容： 介紹自身攝影作品
(4)資料蒐集分析
◎相關網站列表與分析：
http://www.photo.org.tw/default.aspx
介紹很多攝影有關作品 及相機用法等等
Edited 1 time(s). Last edit at 11/09/2011 02:24PM by 吳蓓蓓.
(編輯記錄)
完成品:http://mepopedia.com/~web100b/midterm/midterm-1001445002
(2).
1有無遇到的問題 圖片檔和製作黨一開始分開放無法連結 所以又重做一次
2.製作感想 做得比較順手了 但還是有些小地方會忘記
3.製作作業的時間 .....太混 其實可以早點做完 可是都在作別的事 最快3天吧= =
(1)網站主題：
個人文圖創作
(2)製作動機：
用文字或圖片抒情是我的興趣.想和大家分享我一直以來的創作.也想做出一個屬於自己的網站
(3)製作內容：
繪畫與圖片集錦,短文小說....等等
(4)資料蒐集分析
◎設計優良網站(風格)列表與分析：
http://liouxhin.wolflord.com/
http://liouxhin.wolflord.com/immoral.htm
柳宮燐長久以來一直是我最喜歡的繪家.而他的網站正如同他的作品他的人.展現專屬於自己的風格!!
◎相關網站列表與分析：
http://www.suncolor.com.tw/event/husband/index.html
希望有一天我也會有自己的小說專欄網站
(2).
1有無遇到的問題 圖片檔和製作黨一開始分開放無法連結 所以又重做一次
2.製作感想 做得比較順手了 但還是有些小地方會忘記
3.製作作業的時間 .....太混 其實可以早點做完 可是都在作別的事 最快3天吧= =
(1)網站主題：
個人文圖創作
(2)製作動機：
用文字或圖片抒情是我的興趣.想和大家分享我一直以來的創作.也想做出一個屬於自己的網站
(3)製作內容：
繪畫與圖片集錦,短文小說....等等
(4)資料蒐集分析
◎設計優良網站(風格)列表與分析：
http://liouxhin.wolflord.com/
http://liouxhin.wolflord.com/immoral.htm
柳宮燐長久以來一直是我最喜歡的繪家.而他的網站正如同他的作品他的人.展現專屬於自己的風格!!
◎相關網站列表與分析：
http://www.suncolor.com.tw/event/husband/index.html
希望有一天我也會有自己的小說專欄網站
Edited 3 time(s). Last edit at 11/09/2011 01:42PM by 1001445002.
(編輯記錄)
http://mepopedia.com/~web100b/midterm/midterm-1001445055
風格:母親的部落格
動機:之前媽咪想做一個獨一無二的無名，藉由這次機會嘗試做。
內容:整體有點偏向無名 但整體還不是很成熟 之後想一直以這主題更深入。
資料蒐集分析:之前有去看無名的語法 但是其實很雜亂 大概是擺的東西很多
語法有點亂之類的 所以都是以課堂上教的嘗試居多。
設計優良網站(風格)列表與分析:其實我之前看過香奈兒的官網 我覺得做得很美
國外也有很多很棒的網頁作品 值得我們學習 其中我看到一個很可愛的網頁
他比較偏向動畫之類的 跟現在我們做的平版的網頁不同
http://www.exit10.com/ 希望我也可以這麼厲害
花了5個小時 途中重做 再做一次 所以比較慢 ~
風格:母親的部落格
動機:之前媽咪想做一個獨一無二的無名，藉由這次機會嘗試做。
內容:整體有點偏向無名 但整體還不是很成熟 之後想一直以這主題更深入。
資料蒐集分析:之前有去看無名的語法 但是其實很雜亂 大概是擺的東西很多
語法有點亂之類的 所以都是以課堂上教的嘗試居多。
設計優良網站(風格)列表與分析:其實我之前看過香奈兒的官網 我覺得做得很美
國外也有很多很棒的網頁作品 值得我們學習 其中我看到一個很可愛的網頁
他比較偏向動畫之類的 跟現在我們做的平版的網頁不同
http://www.exit10.com/ 希望我也可以這麼厲害
花了5個小時 途中重做 再做一次 所以比較慢 ~
(1)作業網址 http://mepopedia.com/~web100b/midterm/midterm-1001445095
(2)
1有無遇到的問題:有些語法還是看不懂，自己在那邊亂拼湊，幾乎從老師的原始碼改寫成自己的網頁
2.製作感想 :很有成就感，終於可以靠自己的能力完成一個網頁，謝謝老師的講義
3.製作作業的時間 :沒在算耶，只是一直邊看老師講義邊做網頁
--------------------------------------------------------------------------------
(1)網站主題： 皮克斯動畫王國
(2)製作動機： 一直以來都很喜歡關於皮克斯的動畫，想藉此向大家推廣。
(3)製作內容：關於皮克斯、歷年創作的動畫、皮克斯的影音、相關作品。
(4)資料蒐集分析
◎設計優良網站(風格)列表與分析：
http://www.pixar.com/
一進去的版面還蠻有質感的，也讓人很清楚的知道他的風格。
◎相關網站列表與分析： : http://disney.lovesakura.com/index.htm
我想以兒童的角度去設計一個俏皮的網頁
MEPOERs said:
(2)
1有無遇到的問題:有些語法還是看不懂，自己在那邊亂拼湊，幾乎從老師的原始碼改寫成自己的網頁
2.製作感想 :很有成就感，終於可以靠自己的能力完成一個網頁，謝謝老師的講義
3.製作作業的時間 :沒在算耶，只是一直邊看老師講義邊做網頁
--------------------------------------------------------------------------------
(1)網站主題： 皮克斯動畫王國
(2)製作動機： 一直以來都很喜歡關於皮克斯的動畫，想藉此向大家推廣。
(3)製作內容：關於皮克斯、歷年創作的動畫、皮克斯的影音、相關作品。
(4)資料蒐集分析
◎設計優良網站(風格)列表與分析：
http://www.pixar.com/
一進去的版面還蠻有質感的，也讓人很清楚的知道他的風格。
◎相關網站列表與分析： : http://disney.lovesakura.com/index.htm
我想以兒童的角度去設計一個俏皮的網頁
MEPOERs said:
JinJin: 你應該是套用改得最徹底的了！這樣也很厲害了！（拇指）
(1)作業網址 http://mepopedia.com/~web100b/midterm/midterm-1001445020
1連結得時候有點困難 不過後來有問同學 就略懂些
2.很開心第一次自己製作完成網頁設計 雖然一路上不是作的很順 但是經驗累積才是最重要的
3.製作作業的時間 上課作一些 之後斷斷續續的完成
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
(1)網站主題： 畢卡索
(2)製作動機： 因為自己本身很崇拜畢卡索
(3)製作內容： 介紹畢卡索溜
(4)資料蒐集分析
◎設計優良網站(風格)列表與分析：
http://www.zanotta.it/
◎相關網站列表與分析： Zanotta的設計網站Designers可以查詢設計師和其設計作品
1連結得時候有點困難 不過後來有問同學 就略懂些
2.很開心第一次自己製作完成網頁設計 雖然一路上不是作的很順 但是經驗累積才是最重要的
3.製作作業的時間 上課作一些 之後斷斷續續的完成
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
(1)網站主題： 畢卡索
(2)製作動機： 因為自己本身很崇拜畢卡索
(3)製作內容： 介紹畢卡索溜
(4)資料蒐集分析
◎設計優良網站(風格)列表與分析：
http://www.zanotta.it/
◎相關網站列表與分析： Zanotta的設計網站Designers可以查詢設計師和其設計作品
Edited 1 time(s). Last edit at 11/09/2011 02:27PM by Nina Lin.
(編輯記錄)
(1)作業網址 http://mepopedia.com/~web100b/midterm/midterm-1001445091
(2)
1有無遇到的問題:無太大問題
2.製作感想:很有成就感!!!
3.製作作業的時間:8 hrs
MEPOERs said:
(2)
1有無遇到的問題:無太大問題
2.製作感想:很有成就感!!!
3.製作作業的時間:8 hrs
MEPOERs said:
JinJin: 很開心你的成就感！不過路徑還是有問題～明天再討論囉！
完成品
(1) 作業網址 http://mepopedia.com/~web100b/midterm/midterm-1001445107
(2)
1. 有無遇到的問題 : 看著講義先做，不懂的部分問同學
不確定是否有上傳成功
2. 製作感想 : 終於能做一個網頁 : )
在做的時候還是覺得有點複雜
3. 製作作業的時間: 沒有算多久~
自己做圖片花較久的時間
前置作業
(1) 網站主題： Disney
(2) 製作動機： 一直以來都非常喜歡迪士尼的風格
(3) 製作內容： 迪士尼網站 迪士尼系列動畫 華特.迪士尼
(4) 資料蒐集分析
◎設計優良網站(風格)列表與分析： http://www.nipponblue.com/
◎相關網站列表與分析： http://home.disney.com.tw/tv/
http://www.pixar.com/
MEPOERs said:
(1) 作業網址 http://mepopedia.com/~web100b/midterm/midterm-1001445107
(2)
1. 有無遇到的問題 : 看著講義先做，不懂的部分問同學
不確定是否有上傳成功
2. 製作感想 : 終於能做一個網頁 : )
在做的時候還是覺得有點複雜
3. 製作作業的時間: 沒有算多久~
自己做圖片花較久的時間
前置作業
(1) 網站主題： Disney
(2) 製作動機： 一直以來都非常喜歡迪士尼的風格
(3) 製作內容： 迪士尼網站 迪士尼系列動畫 華特.迪士尼
(4) 資料蒐集分析
◎設計優良網站(風格)列表與分析： http://www.nipponblue.com/
◎相關網站列表與分析： http://home.disney.com.tw/tv/
http://www.pixar.com/
MEPOERs said:
JinJin: 沒上傳成功喔！沒看到檔案！
(1)作業網址 http://mepopedia.com/~web100b/midterm/midterm-1001445083
(2)
1有無遇到的問題:想放音樂檔在上面,但研究了好久還是不會 希望老師可以教我們如何放影片檔和音樂檔在自己的網站上
2.製作感想 :覺得做了一個自己喜歡的網站給自己,很有成就感
3.製作作業的時間 :8hr
(1)網站主題： 韓國團體 BIGBANG介紹
(2)製作動機： 喜愛韓國團體,對她們大有了解
(3)製作內容：關於BIGBANG,介紹成員,音樂,BIGBANG的照片,年表
(4)資料蒐集分析
設計優良網站(風格)列表與分析：
http://yessbmx.com/
滑鼠拖曳的效果令人有新鮮感
相關網站列表與分析：
http://www.ygbigbang.com/popup_frame.asp
此團體的韓國官方網站
(2)
1有無遇到的問題:想放音樂檔在上面,但研究了好久還是不會
希望老師可以教我們如何放影片檔和音樂檔在自己的網站上
2.製作感想 :覺得做了一個自己喜歡的網站給自己,很有成就感
3.製作作業的時間 :8hr
(1)網站主題： 韓國團體 BIGBANG介紹
(2)製作動機： 喜愛韓國團體,對她們大有了解
(3)製作內容：關於BIGBANG,介紹成員,音樂,BIGBANG的照片,年表
(4)資料蒐集分析
設計優良網站(風格)列表與分析：
http://yessbmx.com/
滑鼠拖曳的效果令人有新鮮感
相關網站列表與分析：
http://www.ygbigbang.com/popup_frame.asp
此團體的韓國官方網站
(1)作業網址http://mepopedia.com/~web100b/midterm/midterm-1001445119
(2).
1有無遇到的問題 還好 都走過來了
2.製作感想 費了一番功夫 做完真是別有一番成就
3.製作作業的時間 兩三天 大概4-5小時吧
(1)網站主題：我的設計網站
(2)製作動機： 以我的畫作作品為主 想介紹自己
(3)製作內容： 都是我的想法與畫作結合 也介紹我的繪畫歷程
(4)資料蒐集分析 這幾年的作品 還有我自己的想法
◎設計優良網站(風格)列表與分析：[MOMA服飾] http://www.momaclub.com.tw/moma/news.aspx
簡單確有設計味~! 黑白為主
◎相關網站列表與分析： http://www.johanku.com/
設計師網站 聰分做出自己風格 與介紹自己
(2).
1有無遇到的問題 還好 都走過來了
2.製作感想 費了一番功夫 做完真是別有一番成就
3.製作作業的時間 兩三天 大概4-5小時吧
(1)網站主題：我的設計網站
(2)製作動機： 以我的畫作作品為主 想介紹自己
(3)製作內容： 都是我的想法與畫作結合 也介紹我的繪畫歷程
(4)資料蒐集分析 這幾年的作品
還有我自己的想法
◎設計優良網站(風格)列表與分析：[MOMA服飾] http://www.momaclub.com.tw/moma/news.aspx
簡單確有設計味~! 黑白為主
◎相關網站列表與分析： http://www.johanku.com/
設計師網站 聰分做出自己風格 與介紹自己