[color=#990000][期末作業] 以雙欄為主的網站設計[/color]

1. 一、製作說明：

1.請參考期末之前教過的做法及講義，製作以雙欄為主的網站。

2.題目自訂，可以延續期中作業的主題，也可以是全新的主題。

3.需自行設計圖片，製作網站內容。

4.需以Float浮動的方式建立雙欄(多欄)、DIV搭配CSS的方式完成，設定尺寸、字體、顏色等等。

5.至少需包含(1).Table：表格→匯整資料，(2)Float→繞圖排文，(3)臉書、噗浪等推文設定，(4)圖片跳窗連結，(5)導覽列設定。


6.製作完成上傳至FTP

2. 作業設計重點

[color=#CC0000](1)能自行設計以DIV與CSS製作的網站
(2)利用float設計雙欄網站
(3)利用項目清單設計導覽列
(4)利用自已設計的圖片、色彩搭配與字體設定等設計出具有質感的網頁[/color]

3. 二、評分標準與製作檢核

1.雙欄的製作(Float的使用)，不同的連結方式
2.HTML的正確架構(DIV的使用)
3.整體設計美感(CSS運用，風格及配色，字體設定、圖片製作)
4.導覽列的正確性(含導覽超連結)
5.表格、繞圖排文、推文等設定
6.HTML Title的設定，Footer的版權宣告
7.內容的完整性
8.製作說明

4. 三、繳交作業方式

[color=#CC0066]1.製作完成後，檔案命名方式：[/color]

[color=#669900]期中作業FTP上的資料夾為：final

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

資料夾內含：
(1).首頁命名為index.html
(2).其他頁面請自行命名，但需注意命名為則，不可出現中文及全形字、特殊符號等等
(3).一個命名為style.css的css樣式檔
(4).存放圖檔的images資料夾

存放在 < final-學號 > 的資夾內[/color]


[color=#CC0066]2.全部完成後上傳至FTP[/color]

[color=#CC0066]3.依進度回覆本篇文章[/color]

5. 回覆說明

[color=#0066CC]完成品[/color]
[color=#FF0066]請將這項放置於文章最前面[/color]
(1)作業網址：
(2).
1.製作作業的時間：
2.有無遇到的問題：
3.製作心得與感想：


[hr]

[color=#0066CC]前置作業[/color]
(1)網站主題：
(2)導覽列架構設定

範例參考：
[IMG]http://i556.photobucket.com/albums/ss1/whc915/webtree.jpg[/IMG]

(3)尺寸與架構設定

範例參考：
[IMG]http://i556.photobucket.com/albums/ss1/whc915/web-layout.jpg[/IMG]

(4)風格設定：
(5)主色調，輔助色調：
(6)製作動機：
(7)製作目的：
預期效果：

(8)資料蒐集分析

[color=#CC0099]◎設計優良網站(風格)列表與分析
請參考：http://mepopedia.com/forum/read.php?804,18412
[/color]

◎相關網站列表與分析：

6. 四、期末作業進度參考

第十六週06/08 圖片製作，內容建構
第十七週06/15 完成與上傳，檢討與修正
第十八週06/22 成績確認與最後修改


=================================================
[color=#CC0066]※期末作業無論如何請一定要繳交，否則以期末以零分計※
※若經發現作業為直接複製同學檔案以零分計※[/color]
=================================================



(編輯記錄)

(1)作業網址：

http://mepopedia.com/~web100-a/final/final-1006445001/

(2).

1.製作作業的時間：3小時
2.有無遇到的問題：網頁亂碼問題(已解決)
3.製作心得與感想：製作網頁蠻好玩的，按圖索驥蠻容易懂的

(3)網站主題：

MARVEL-驚奇漫畫

(4)風格：

漫畫風格

(5)主色調：

紅色

輔助色調：

白色

(6)製作動機：

從小就喜歡這些英雄電影，最近又看到電影復仇者聯盟，所以就以它為主題

(7)資料蒐集分析：

維基百科 http://zh.wikipedia.org/zh-tw/Wikipedia:%E9%A6%96%E9%A1%B5



(編輯記錄)

(1)作業網址：http://mepopedia.com/~web100-a/final/final-1006445014/

1.製作時間:4小時
2.有無遇到的問題:
跟著老師的講義做其實蠻容易的，大部分都能理解

3.製作心得與感想:
擁有自己的網頁蠻棒的，有了基本版型未來若真的要放別的內容也很方便

4 風格設定：
加入了電音,現代感,艷麗色彩,夜店元素

5 主色調，輔助色調：
主色調:暗色系.黑色.暗灰色
輔助色調:亮色系,亮粉紅,黃色

6 製作動機：
我想製作有個性的網頁，
剛好本身也很喜歡聽電子音樂，
風格上搭起來應該不錯。

7 製作目的：
讓大家了解夜店與電音密不可分的文化(主要是國外)

8 資料蒐集分析：
關於電子音樂:http://zh.wikipedia.org/zh-tw/%E9%9B%BB%E5%AD%90%E9%9F%B3%E6%A8%82

(1)作業網址：http://mepopedia.com/~web100-a/final/final-1006445018/
(2).
1.製作作業的時間：4小時
2.有無遇到的問題：沒問題講義很實用
3.製作心得與感想：做好後很有成就感
(4)風格設定：灰色調的介紹網頁
(5)主色調，輔助色調：(主)淺灰色，(輔)深灰色、白色
(6)製作動機：介紹貓咪的資訊
(7)製作目的：我想養ˊ_>ˋ
預期效果：乾淨俐落

(8)資料蒐集分析
http://st.popo.idv.tw/~aids/pp/Untitled-3.htm
http://www.oscar-pet.com.tw/webnews/view.php?SN=1157
http://happy2000.idv.tw/NEW_PAGE_13.HTM



(編輯記錄)

(1)作業網址： http://mepopedia.com/~web100-a/final/final-9822445040

(2).
1.製作作業的時間：一天
2.有無遇到的問題： 已向老師問清楚
3.製作心得與感想：
非常有成就感
太棒了!!!!!
我愛你dw


(1)網站主題： 甜在心舔
(2)導覽列架構設定
首頁
中式,西式,法式,日式

(3)尺寸與架構設定
950px
header
使用photoshop用刀叉湯匙說明這是食物的網站
粉粉的底色來表現女生喜愛的甜美風格
button
用五個連結各種不同形式的甜點
content
使用我認為可愛的圓花圖案看到就會開心
content-L
180PX
用多個連結敘述情人節可自製的甜食
conter-R
以文字敘述食譜
footer
以更淺的粉紅色跟PHOTOSHOP修圖
(4)風格設定：甜美女生最愛的甜甜甜風
(5)主色調，
C:0
M:29
Y:14
K:0
輔助色調：
C:0
M:74
Y:28
K:0
(6)製作動機：為了喜歡自己動手做美食的我(7)製作目的:可以更快速找到我愛吃的食譜

預期效果：有達到我想要的感覺
但不知道顏色是否符合

(8)資料蒐集分析
http://www.christinesrecipes.com/ (簡易食譜中西個式)
http://icook.tw/ (icook愛料理)
http://food.tank.tw/default.asp (食譜大權)
http://www.meishij.net/hongpei/tianpindianxin/(甜品點心做法)
http://dessertfmtv.pixnet.net/blog(用點心做點心)
http://www.wretch.cc/blog/EmilyHH/11222329(美式甜點)
http://happymcy.blogspot.com/2011/07/black-forest-cake.html(The tree hole)
http://www.wretch.cc/blog/HappySewing&category_id=13521880(維多利亞廚房)
http://mypaper.pchome.com.tw/berrynini/category/4/1(點心製作)
http://www.wretch.cc/blog/mitong/22956215(甜蜜小點心)
http://www.masa.tw/(簡易點心食譜)
http://loveafternoontea.pixnet.net/blog/category/1828945(美味食譜)
http://blog.yam.com/homeeconomics/category/1679846(周老師點心)
http://blog.sina.com.cn/s/articlelist_1278045382_3_1.html(甜點
http://sweetmilk0429.pixnet.net/blog/category/286913(烘培甜點)



(編輯記錄)

(1)作業網址：http://mepopedia.com/~web100-a/final/final-1006445022/
(1)網站主題:色色世界
1.製作作業時間:一天
2.有無遇到的問題:
製作過程,有很多都不是很懂,利用電話詢問同學.看看瀏覽~做的不是很完整
3.製作心得與感想:
這門課讓我有學到東西,也讓我嘗試到網頁製作的過程~還不錯
(4)風格設定： 加入色彩繽紛的色票,以大自然的底來襯托
(5)主色調，輔助色調：藍天主色調,黑色.綠色.輔助色調
(6)製作動機：因為本身自己喜歡色彩.從小對色彩有興趣
(7)製作目的:想讓大家了解色彩的美.色彩分析
(8)資料蒐集分析:http://content.edu.tw/vocation/art/ks_hc/htm/content/ch06/newpage1.htm

作業網址：http://mepopedia.com/~web100-a/final/final-9621471158/

1. 網站主題:紅貴賓介紹
2. 製作作業時間:兩天
3. 有無遇到的問題:
看了很多遍講義很多部分還是不清楚，沒有做得很完整...
4. 製作心得與感想:
從完全不會做網頁到至少可以做出基本東西出來，很有成就感
5. 風格設定：以白色簡單為主
6. 主色調，輔助色調：白色、藍色
7. 製作動機：養一年多紅貴賓，介紹一下
8. 製作目的：紅貴賓雖然可愛其實缺點也不不少 ex毛打結、很愛吃人類食物、過動
9. 資料蒐集分析：http://teddy.34c.cc/teddydogdetial.php

MEPOERs said:

(1)作業網址：http://mepopedia.com/~web100-a/final/final-9822445020

1.製作時間:1星期
2.有無遇到的問題:
跟著老師的講義做其實蠻容易的，大部分都能理解，不過還是有些不太能理解。

3.製作心得與感想:
就是學會說要如何做一個網頁以及架設網站
4 風格設定：
深色帶點復古感

5 主色調，輔助色調：
主色調:黑色.
輔助色調:紅色
6 製作動機：
因為自己很喜歡這個品牌，所以我就設計一個自己喜歡的網站。
7 製作目的：
就是推廣品牌讓大家都能看見
8 資料蒐集分析：
http://www.istayreal.com/blog/

MEPOERs said:

作業網址:http://mepopedia.com/~web100-a/final/final-1006445013/

1.製作作業的時間：2.5hr
2.有無遇到的問題：最後一頁還是一樣
3.製作心得與感想：做到最後有點亂
(4)風格設定：用 Hello kitty 身上的顏色作為我的網頁風格
(5)主色調，輔助色調：紅色 藍色 黃色 白色 黑色

MEPOERs said:

(1)作業網址：http://mepopedia.com/~web100-a/final/final-9822445048

1.製作時間:1星期
2.有無遇到的問題:
跟老師講議製作.跟同學討論

3.製作心得與感想:
趣味性製作.蠻寫真的一堂課

4 風格設定：
加入自己喜愛車系.動力寫真.以黑色風格製作

5 主色調，輔助色調：
主色調:黑色.灰色
輔助色調:亮紅.亮黃.

6 製作動機：
本身是車隊業餘跑車手.也熱愛速度.

7 製作目的：
架設屬於自己的網站

8 資料蒐集分析：

http://www.galant.club.tw/forum.php

MEPOERs said:

(1)作業網址：http://mepopedia.com/~web100-a/final/final-9822445046

1.製作時間:1星期
2.有無遇到的問題:
看老師的講義 部會的問同學

3.製作心得與感想:
還蠻頭大的 但是幸好做完了!!

4 風格設定：
喜歡糖果的色彩

5 主色調，輔助色調：
主色調:粉紅色 粉綠色
輔助色調:白色 紫色

6 製作動機：
應為現在馬卡龍非常火紅 色彩又很可愛~

7 製作目的：
我太愛甜點了~好吃又可愛

8 資料蒐集分析：

http://www.ytower.com.tw/prj/prj_317/p1.asp



(編輯記錄)

MEPOERs said:

(1)作業網址：http://mepopedia.com/~web100-a/final/final-1006445010

1.製作時間：因陸續在做，沒有ㄧ定的時間。

2.有無遇到的問題：先前Header歪歪的，和老師詢問已經解決！

3.製作心得與感想：網頁真的很需要有細膩的心，不然很容易因為小小的錯誤就會讓整體看起來很不順。
ㄧ開始製作時，因為Header歪歪的、整體看起來很失敗，弄得很不開心。後來詢問老師修正後就有比較好，現在弄到一個段落，雖然很簡單，但還滿有成就感的。學這堂課我覺得很開心！

4 風格設定：因為一開始找的圖就是藍色的天、藍色的海，所以整體的顏色就是深淺不同的藍色系為主。可以給人ㄧ種舒服的感覺。


5 主色調，輔助色調：
　主色調：藍色
　輔助色調：白色

6 製作動機：
喜歡幾米的作品

7 製作目的：
嘗試架構一個自己設計的網站

8 資料蒐集分析：
http://www.jimmyspa.com/
http://www.facebook.com/jmy.spa

MEPOERs said:

(1)作業網址：http://mepopedia.com/~web100-a/final/final-1006445002

1.製作時間：沒去計算時間，只知光很多時間在上面。

2.有無遇到的問題：網頁做到越後面越複雜，不懂得地方有詢問同學，也從老師您那邊得到解答。

3.製作心得與感想：網頁真的要常練習才行，一兩個星期沒用就可忘光光，好險有老師的講義和自己做的筆記，另外還和同學互相討論，
不然真的是"一顆頭兩顆大"，學會真的很有成就感，原來網頁是這樣做出來的，也謝謝老師這麼努力得教導。

4 風格設定：認識Teddy Bear---->介紹主題的事由
幸運月份---------->表格放入圖片介紹
限量典藏---------->表格放入圖片介紹
主題餐廳---------->雙欄介紹關於Teddy餐廳
博物館------------>加入連結語法

5 主色調，輔助色調：
　主色調：茶色
　輔助色調：黃色、粉膚色

6 製作動機：會製作Teddy Bear這想法是在網頁上看閱到的，最主要原因是當初是要做藝術風格的，因為自己的不小心把圖片全部存成中文字，
要修改太麻煩又加上沒有這麼多時間，所以就放棄了。跟大家說聲不好意思，無法介紹藝術風格給你們分享，希望你們會喜愛Teddy Bear。

7 製作目的：Teddy Bear不管是大人、小孩都超喜愛的，連我也不例外。所以製作網頁分享給大家認識。

8 資料蒐集分析： http://www.teddy-family.com.tw/product-list.asp?page=1&id=992&brand=Hermann-G
http://www.vrwalker.net/tw/scenery_view.php?tbname=scenerys&serno=193

MEPOERs said:

老師:我的圖還是跳掉了..><"
我查不出原因來...老師SOS
我上傳我最原始的資料hw03-1006445002

感謝同學幫我解決問題，也謝謝老師><




林綺欣 Wrote:
-------------------------------------------------------
> 老師:我的圖還是跳掉了..><"
> 我查不出原因來...老師SOS
>
> 我上傳我最原始的資料hw03-1006445002



(編輯記錄)

MEPOERs said:

(1)作業網址：

http://mepopedia.com/~web100-a/final/final-1006445006/

(2).

1.製作作業的時間：兩天
2.有無遇到的問題：圖片沒有顯示出來(以解決)
3.製作心得與感想：剛開始什麼都不會,也不懂,本來想完蛋了我,後來有詢問同學,東弄西弄就弄出來了,本來一直想
我可能做不出來了,後來有做出來還覺得滿不可思議的說!!

(3)網站主題：

奶茶世界

(4)風格：

樸素
(5)主色調：

紅色

輔助色調：

白色 -咖啡色

(6)製作動機：

因為很喜歡喝奶茶,有興趣想去多了解一些奶茶的東西,也因為這份作業讓我多認識它不少

MEPOERs said:

(1)作業網址：http://mepopedia.com/~web100-a/final/final-1006445019/
(2).
1.製作作業的時間：3小時
2.有無遇到的問題：跟著老師的講義做，內容很清楚，不會的地方以詢問過同學解決了
3.製作心得與感想：雖然沒有完全做完但製作網頁中，還滿有趣的。


(4)風格設定：以白色簡單為主
(5)主色調：白色 輔助色調：天空藍 黑色
(6)製作動機：很喜歡這個卡通人物
(7)製作目的：想嘗試做一個敵一無二的網站設計