Re: [第一週] 資料蒐集與首頁設計
參考網站網址： http://www.huashan1914.com/ http://www.usatoday.com/
一、網站蒐集及分析
1.主題設定，原網址：http://www.huashan1914.com/
2.原網站優缺點分析：
優點。背景用白底的方式表現，活動內容與說明等都一目了然，閱讀上簡單明白；畫面乾淨俐落
缺點。白底是缺點也是優點，個人覺得留白處太多導致畫面看上去是密密麻麻的一片說明，興致大失
原版的文字太多也是問題，規劃上因為一些贊助廠商、合作夥伴、商家資訊的關係導致把網頁拉長
冒出不必要得空白，以表演展覽為主的網站我希望是以圖片去表現而不是一排排的文字。
3.鄉裩國內外網站列表分析： 鄉裩？？
4.選定參考網站優缺點分析與首頁截圖分析：
(1)網址： http://www.usatoday.com/
(2)網站名稱： USATODAY
(3)風格與色彩分析： 整體圖片區塊表現居多，是以報導的方式進行；色彩黑灰白，分類上使用彩色區分
(4)優點： 淺顯易懂，在閱讀時間上大幅縮短，可以在很短的時間內掌握所要得資訊
(5)缺點： 貌似沒有響應式設計
(6)首頁截圖分析
二、新設計網站說明
(1)網站分類，原網址： http://www.huashan1914.com/
(2)網站主題： 藝文傳播、展覽活動
(3)對象： 一般大眾、對藝術文化有興趣者
(4)色彩計畫：
(5)風格設定、網頁看點、預期成效：
(6)請整理以下數值：
字體設定(font-family) ：微軟正黑體
標題級數：14px、20px
文章標題級數：14px
內文級數(font-size)：12px
網站寬度(width)：1020px
(7)製作心得：
下面我用了切版的方式做了一個html預覽，主要是變輪撥圖跟滑鼠移動之後得樣子
我是覺得一個藝文展覽的網站不該是白白一片，顏色部份選用黑灰白、黃銅色做搭配
中間content部份希望大大凸顯當下展覽的展圖，消息部份我則是參考了google keep 便籤做一個下拉的動作
主要配合現在人在瀏覽頁面的習慣，喜歡在同一個頁面把全部資訊瀏覽完畢
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
原網址：http://www.huashan1914.com/
改過後：http://mepopedia.com/~web102-a/intern/linyi/web/%E8%8F%AF%E5%B1%B11914.html
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
20140703
第一個內頁"關於華山"，一樣用切版了方式模擬了一下
http://mepopedia.com/~web102-a/intern/linyi/web-about/%E8%8F%AF%E5%B1%B11914-%E9%97%9C%E6%96%BC%E8%8F%AF%E5%B1%B1%E5%88%87%E7%89%88%E7%94%A8.html
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
20140716
修改排版、字體？ 字體縮至20→14p、14→12p
一、網站蒐集及分析
1.主題設定，原網址：http://www.huashan1914.com/
2.原網站優缺點分析：
優點。背景用白底的方式表現，活動內容與說明等都一目了然，閱讀上簡單明白；畫面乾淨俐落
缺點。白底是缺點也是優點，個人覺得留白處太多導致畫面看上去是密密麻麻的一片說明，興致大失
原版的文字太多也是問題，規劃上因為一些贊助廠商、合作夥伴、商家資訊的關係導致把網頁拉長
冒出不必要得空白，以表演展覽為主的網站我希望是以圖片去表現而不是一排排的文字。
3.鄉裩國內外網站列表分析： 鄉裩？？
4.選定參考網站優缺點分析與首頁截圖分析：
(1)網址： http://www.usatoday.com/
(2)網站名稱： USATODAY
(3)風格與色彩分析： 整體圖片區塊表現居多，是以報導的方式進行；色彩黑灰白，分類上使用彩色區分
(4)優點： 淺顯易懂，在閱讀時間上大幅縮短，可以在很短的時間內掌握所要得資訊
(5)缺點： 貌似沒有響應式設計
(6)首頁截圖分析
二、新設計網站說明
(1)網站分類，原網址： http://www.huashan1914.com/
(2)網站主題： 藝文傳播、展覽活動
(3)對象： 一般大眾、對藝術文化有興趣者
(4)色彩計畫：
(5)風格設定、網頁看點、預期成效：
(6)請整理以下數值：
字體設定(font-family) ：微軟正黑體
標題級數：14px、20px
文章標題級數：14px
內文級數(font-size)：12px
網站寬度(width)：1020px
(7)製作心得：
下面我用了切版的方式做了一個html預覽，主要是變輪撥圖跟滑鼠移動之後得樣子
我是覺得一個藝文展覽的網站不該是白白一片，顏色部份選用黑灰白、黃銅色做搭配
中間content部份希望大大凸顯當下展覽的展圖，消息部份我則是參考了google keep 便籤做一個下拉的動作
主要配合現在人在瀏覽頁面的習慣，喜歡在同一個頁面把全部資訊瀏覽完畢
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
原網址：http://www.huashan1914.com/
改過後：http://mepopedia.com/~web102-a/intern/linyi/web/%E8%8F%AF%E5%B1%B11914.html
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
20140703
第一個內頁"關於華山"，一樣用切版了方式模擬了一下
http://mepopedia.com/~web102-a/intern/linyi/web-about/%E8%8F%AF%E5%B1%B11914-%E9%97%9C%E6%96%BC%E8%8F%AF%E5%B1%B1%E5%88%87%E7%89%88%E7%94%A8.html
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
20140716
修改排版、字體？ 字體縮至20→14p、14→12p
Edited 1 time(s). Last edit at 07/02/2014 06:12PM by lin yi.
(編輯記錄)
參考網站網址： http://www.axeant.net/
一、網站蒐集及分析
1.主題設定，原網址： http://deloin.victo.com.tw
2.原網站優缺點分析：
色彩搭配有整體感，但用色上太多暗沉的顏色，圖片雖然很多很漂亮但卻不能點進去有點可惜。
3.鄉裩國內外網站列表分析：
4.選定參考網站優缺點分析與首頁截圖分析
(1)網址： http://www.axeant.net/
(2)網站名稱： Axeant
(3)風格與色彩分析： 簡單，黑白色系
(4)優點： 簡單乾淨的畫面讓人看起來很舒服
(5)缺點： 沒有回首頁的選單
(6)首頁截圖分析
二、新設計網站說明
(1)網站分類，原網址： http://deloin.victo.com.tw
(2)網站主題： 美食料理
(3)對象： 一般大眾
(4)色彩計畫： 暖色調
(5)風格設定、網頁看點、預期成效： 精緻又簡單的感覺
(6)請整理以下數值：
字體設定
標題級數 14px
文章標題級數 13px
內文級數 12px
網站寬度(width)
(7)製作心得：其實還是有點搞不太清楚這次要做的方式是什麼，然後在製作的時候看了很多網站的設計，發現國外有些網站是用大小圖片來穿插製作成首頁，或是有些網站就像我們這次期末的教學資源訪台北一樣的型式，但是國內大多數都不是以這種形式來做，所以後來將想做的網站架構跟這次用的主題結合在一起，想要有不一樣的感覺。
＞＞＞＞＞＞
改過後
(1)首頁
(2)滑鼠移過的效果
一、網站蒐集及分析
1.主題設定，原網址： http://deloin.victo.com.tw
2.原網站優缺點分析：
色彩搭配有整體感，但用色上太多暗沉的顏色，圖片雖然很多很漂亮但卻不能點進去有點可惜。
3.鄉裩國內外網站列表分析：
4.選定參考網站優缺點分析與首頁截圖分析
(1)網址： http://www.axeant.net/
(2)網站名稱： Axeant
(3)風格與色彩分析： 簡單，黑白色系
(4)優點： 簡單乾淨的畫面讓人看起來很舒服
(5)缺點： 沒有回首頁的選單
(6)首頁截圖分析
二、新設計網站說明
(1)網站分類，原網址： http://deloin.victo.com.tw
(2)網站主題： 美食料理
(3)對象： 一般大眾
(4)色彩計畫： 暖色調
(5)風格設定、網頁看點、預期成效： 精緻又簡單的感覺
(6)請整理以下數值：
字體設定
標題級數 14px
文章標題級數 13px
內文級數 12px
網站寬度(width)
(7)製作心得：其實還是有點搞不太清楚這次要做的方式是什麼，然後在製作的時候看了很多網站的設計，發現國外有些網站是用大小圖片來穿插製作成首頁，或是有些網站就像我們這次期末的教學資源訪台北一樣的型式，但是國內大多數都不是以這種形式來做，所以後來將想做的網站架構跟這次用的主題結合在一起，想要有不一樣的感覺。
＞＞＞＞＞＞
改過後
(1)首頁
(2)滑鼠移過的效果
參考網站網址：http://www.dot-and-ready.net/index.php
一、網站蒐集及分析：
1.主題設定：板橋435藝文特區
原網址：http://www.435.culture.ntpc.gov.tw/
2.原網站優缺點分析：
雖然上面的資訊可以讓人一目了然，
但是缺少了活潑感，這是藝文特區，
如果做的活潑一點可以增加民眾的吸引力。
3.鄉裩國內外網站列表分析：
4.選定參考網站優缺點分析與首頁截圖分析：
(1)網址：http://www.dot-and-ready.net/index.php
(2)網站名稱：AND READY
(3)風格與色彩分析：簡單的色調，利用粉紅、黃、灰做搭配
(4)優點：整體感覺很有質感，雖然簡單，但很清爽不會讓人感覺看不下去。
(5)缺點： 左邊的導覽列的格子分配的有點奇怪。
(6)首頁截圖分析：
[hr]
二、新設計網站說明
(1)網站分類，原網址：http://www.435.culture.ntpc.gov.tw/
(2)網站主題： 板橋435藝文特區
(3)對象： 大眾
(4)色彩計畫： LOGO色來作搭配，但是整體感覺以橘色為主。
(5)風格設定、網頁看點、預期成效： 具有活潑感。
(6)請整理以下數值：
字體設定(font-family) ：Adobe 繁黑體
內文級數(font-size)：12px
小字級數：11px
網站寬度(width)：840px
[hr]
(1)首頁
(2)滑鼠移過的效果
(3)子頁
(7)製作心得：
當初在找主題時，找到了三個像這樣同款樣式的網站，我想應該都是同個人做的吧～
選這個主題時，第一個想法就是想要把它改的活潑點，
因為這也不是甚麼教育部之類的網站，但整體看來還蠻官方的感覺，
這樣感覺並不會吸引人想要看得慾望，
做完後其實還蠻開心的，
不過另一方面我也在想，如果真的要寫成網頁不知道要怎麼寫才好，
應該要磨一陣子才有可能把它寫完整的出來吧～
學號1015445218-謝宜倢
一、網站蒐集及分析：
1.主題設定：板橋435藝文特區
原網址：http://www.435.culture.ntpc.gov.tw/
2.原網站優缺點分析：
雖然上面的資訊可以讓人一目了然，
但是缺少了活潑感，這是藝文特區，
如果做的活潑一點可以增加民眾的吸引力。
3.鄉裩國內外網站列表分析：
4.選定參考網站優缺點分析與首頁截圖分析：
(1)網址：http://www.dot-and-ready.net/index.php
(2)網站名稱：AND READY
(3)風格與色彩分析：簡單的色調，利用粉紅、黃、灰做搭配
(4)優點：整體感覺很有質感，雖然簡單，但很清爽不會讓人感覺看不下去。
(5)缺點： 左邊的導覽列的格子分配的有點奇怪。
(6)首頁截圖分析：
[hr]
二、新設計網站說明
(1)網站分類，原網址：http://www.435.culture.ntpc.gov.tw/
(2)網站主題： 板橋435藝文特區
(3)對象： 大眾
(4)色彩計畫： LOGO色來作搭配，但是整體感覺以橘色為主。
(5)風格設定、網頁看點、預期成效： 具有活潑感。
(6)請整理以下數值：
字體設定(font-family) ：Adobe 繁黑體
內文級數(font-size)：12px
小字級數：11px
網站寬度(width)：840px
[hr]
(1)首頁
(2)滑鼠移過的效果
(3)子頁
(7)製作心得：
當初在找主題時，找到了三個像這樣同款樣式的網站，我想應該都是同個人做的吧～
選這個主題時，第一個想法就是想要把它改的活潑點，
因為這也不是甚麼教育部之類的網站，但整體看來還蠻官方的感覺，
這樣感覺並不會吸引人想要看得慾望，
做完後其實還蠻開心的，
不過另一方面我也在想，如果真的要寫成網頁不知道要怎麼寫才好，
應該要磨一陣子才有可能把它寫完整的出來吧～
學號1015445218-謝宜倢