Welcome! 登入 註冊
專區首頁 專區百科 專區論壇 專區部落格 專區地圖

Advanced

Re: [期末作業] 以雙欄為主的網站設計

[期末作業] 以雙欄為主的網站設計

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



[hr]

1. 製作說明:


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

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

3.必須考慮設計風格與質感,並需自行設計圖片,製作網站內容。

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

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


6.製作完成上傳至FTP


[hr]

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.製作說明

[hr]

4. 繳交作業方式


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

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

每位同學請將自己的資料夾命名為:final-學號
這個作業的網址則為:http://mepopedia.com/~web103-c/final/final-10254452XX

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

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


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

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

[hr]

5. 回覆說明



[color=#0066CC]完成品[/color](1/13前)
[color=#FF0066]請將這項放置於文章最前面[/color]
(1)作業網址:
(2).
1.製作作業的時間:
2.有無遇到的問題:
3.製作心得與感想:
4.本學期於網頁設計課程上的收穫:
[color=#CC0066]4.請務必在1/6前回覆,否則為遲交[/color]


[color=#0066CC]前置作業[/color](12/17)
(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)製作目的:
預期效果:

(8)資料蒐集分析

[color=#CC0099]◎設計優良網站(風格)列表與分析
[作業] 優良設計網站蒐集與分析 http://mepopedia.com/forum/read.php?2024,68212
並將網站分析於12/17前回覆於前述網址
[/color]

◎相關網站列表與分析:



[hr]

6. 期末作業進度參考




第十二週12/03 題目及網站架構確定/版型、尺寸確定,資料蒐集與網站分析
第十三週12/10 資料蒐集與網站分析、圖片製作,內容建構
第十四週12/17 圖片製作,內容建構
第十五週12/24 檢討與修正
第十六週12/31 檢討與修正
第十七週01/07 細修、完成與上傳
第十八週01/14 期末作業發表與檢討 Presentation【期末作業】


[hr]
[color=#CC0066]進階參考:ubuntu網頁設計規範手冊 ubuntu Web Design Guidelines[/color]
http://design.ubuntu.com/web
下載:http://design.canonical.com/brand/D.%20Ubuntu%20Web%20Guidelines.pdf
[hr]

7. 學長姐作品參考


-

[size=small](1) 作業網址: http://mepopedia.com/~web100b/final/final-1001445022
(2).
 1. 製作作業的時間:超過二十四小時
 2. 有無遇到的問題:[color=#9999CC]同樣是跨瀏覽器的問題
          還有關於 content 裡面的 L 跟 R 的問題
          就算跟著老師的方法做也一樣不會跟著跑這樣[/color]
          [color=#FF0000]這些問題已經從老師那裡得到解答,解決囉!:)[/color]
 3. 製作心得與感想:雙欄式的網頁真的困難重重
          但很高興我能從這樣的網頁中學會自己克服困難、解決問題
          做完之後很有成就感,很高興:)

-

(1) 網站主題:金在中/東方神起
(2) 導覽列架構設定:
[IMG]http://i.imgur.com/E8uEV.jpg[/IMG]
(3) 尺寸與架構設定:
[IMG]http://i.imgur.com/FUmdw.jpg[/IMG]
(4) 風格設定:簡約、華麗、精緻
(5) 主色調,輔助色調:紅、黑;白、飽和度不依的紅、灰,等
(6) 製作動機:
    喜歡一個人不能只是看外表,很多人因為他的長相而喜歡他
    哪天他的髮型換了,身材變了,沒有了原本的帥氣,就不喜歡了
    最討厭這種人‥
(7) 製作目的:讓更多人認識金在中這個人

預期效果: 呈現擁有自我風格的雙欄式網頁[/size]

[hr]

1. 其他作品


http://mepopedia.com/~web100b/final/final-1001445042/
http://mepopedia.com/~web100b/final/final-1001445123/
http://mepopedia.com/~web100b/final/final-1001445004/index1.html
http://mepopedia.com/~web100b/final/final-1001445049/
http://mepopedia.com/~web100a/final/final-1001445021/
http://mepopedia.com/~web100a/final/final-1001445013/

http://mepopedia.com/forum/read.php?1173,27998

[hr]

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

http://youtu.be/JhWaXP7wCrI





Edited 3 time(s). Last edit at 12/08/2014 09:24PM by JinJin.
(編輯記錄)

Attachments:
開啟 | 下載 - ex-finallayout.ai (1.15 MB)
(1)作業網址: http://mepopedia.com/~web103-c/final/final-1025445072
(2).
1.製作作業的時間:很多個禮拜
2.有無遇到的問題: style.css世連在一起的
3.製作心得與感想: 只要有上課基本上是都會
4.本學期於網頁設計課程上的收穫:很開心多學會了一個軟體 而且還能做出一個屬於自己的網頁









(1)網站主題: 蔡健雅
(2)導覽列架構設定

[img]https://fbcdn-sphotos-b-a.akamaihd.net/hphotos-ak-xfp1/v/t1.0-9/10850084_1013130948704502_1683170836213164828_n.jpg?oh=315a10b2dee08c6ba10d330979e5bbbc&oe=5506B4D4&__gda__=1426147204_9f334db9bf0a2f2405b2df2326ed04f7[/img]

(3)尺寸與架構設定
[img]https://fbcdn-sphotos-h-a.akamaihd.net/hphotos-ak-xfp1/v/t1.0-9/10445932_1013130952037835_4213444774695907691_n.jpg?oh=86e6076a0b9fbe62cb5589638bdad96f&oe=553DA76F&__gda__=1426851391_d584058b0a3d4749c2ed671f87ed4fac[/img]

(4)主要瀏覽族群: 喜歡蔡健雅的人
(5)風格設定: 簡單
(6)主色調,輔助色調: 白 黑 粉
(7)製作動機: 喜歡聽她的歌~
(8)製作目的: 給更多人聽到他的歌聲
預期效果: 簡單明瞭

(8)資料蒐集分析
http://www.k-arena.com.tw/project1.aspx?ser=194


1025445072王人永



Edited 1 time(s). Last edit at 01/03/2015 06:30PM by 1025445072.
(編輯記錄)

(1)作業網址: http://mepopedia.com/~web103-c/final/final-1025445141
(2).
1.製作作業的時間: super久
2.有無遇到的問題:影片嵌入不會用
3.製作心得與感想: 很有成就感
4.本學期於網頁設計課程上的收穫:學會很多東西 很有成就感
(1)網站主題: g dragon
(2)導覽列架構設定
(3)尺寸與架構設定
(4)主要瀏覽族群: 年輕族群
(5)風格設定: 流行
(6)主色調,輔助色調: 灰色系
(7)製作動機: 喜歡g dragon
(8)製作目的: 交作業
預期效果: 帥氣

(8)資料蒐集分析 http://www.ygfamily.com/artist/About.asp?LANGDIV=K&ATYPE=2&ARTIDX=10



1025445141 王心仁



Edited 1 time(s). Last edit at 01/14/2015 01:44AM by 1025445141.
(編輯記錄)

1025445096 徐琬凌

作業網址:http://mepopedia.com/~web103-c/final/final-1025445096

1.製作作業的時間:一天
2.有無遇到的問題:常常當機,搞得自己很緊張
3.製作心得與感想:有點成就感,而且內容是自己感興趣的東西,所以做得很開心
4.本學期於網頁設計課程上的收穫:學會很多事情

(1)作業網址: http://mepopedia.com/~web103-c/final/final-1025443044/
(2).
1.製作作業的時間: 2天
2.有無遇到的問題: 一半一半
3.製作心得與感想: 還需要再多熟練一點做起來比較順
4.本學期於網頁設計課程上的收穫:學會自己設計網頁做完一個完整的網頁
雖然做的不是很好,但會有成就感


網站主題: 米奇
導覽列架構設定
[img]https://fbcdn-sphotos-a-a.akamaihd.net/hphotos-ak-xap1/v/t1.0-9/10891940_1529444603985624_7246562678171159020_n.jpg?oh=4a17a85dcc6a79aa22f59347547c8bdb&oe=552C06D5&__gda__=1425616108_d831dc65cb5af12e0aead2c59611bc43[/img]
(3)尺寸與架構設定
[img]https://scontent-a-ams.xx.fbcdn.net/hphotos-xpa1/v/t1.0-9/10858020_1523187117944706_8036979159431813447_n.jpg?oh=da99af27a7b15bfdefb372bbe57b27c3&oe=5542F15A[/img]
(4)主要瀏覽族群:喜愛米奇的人
(5)風格設定: 簡單明瞭
(6)主色調,輔助色調: 白 黑 紅
(7)製作動機: 經典卡通人物,大家都喜愛也都認識
(8)製作目的: 統整資料
預期效果:一眼就看得出米奇主色調

(8)資料蒐集分析
http://disney90.com.tw/


1025443044王薏茹



Edited 4 time(s). Last edit at 01/05/2015 08:02PM by 1025443044.
(編輯記錄)

(1) 作業網址 : http://mepopedia.com/~web103-c/final/final-1025445036

(2) 1.製作作業的時間 : 4天
2.有無遇到的問題 : 整個架構有點難
3.製作心得與感想 : 這次覺得比較難花了很久的時間才弄懂
4.本學期於網頁設計課程上的收穫 : 覺得對於網站的排版和色彩配色有慢慢進步

1025445036 李易達

(1)作業網址: http://mepopedia.com/~web103-c/final/final-1025445120
(2).
1.製作作業的時間: 很久很久~~~~
2.有無遇到的問題: 應該沒有
3.製作心得與感想: 頭昏眼花 亂七八糟 複雜!
4.本學期於網頁設計課程上的收穫: 很雜但做完很開心 需要分析一切有點煩



(1)網站主題:flumpool
(2)導覽列架構設定
(3)尺寸與架構設定
[img]https://fbcdn-sphotos-h-a.akamaihd.net/hphotos-ak-xpf1/v/t1.0-9/10338223_734388613319833_3618049492294404269_n.jpg?oh=0ea1bc65c23fe961417d494881f5a54c&oe=5547348F&__gda__=1426609637_c46203c9c2a9a9ef51f52ad69673e1e5[/img]




(4)主要瀏覽族群: 想看的人
(5)風格設定: 簡單
(6)主色調,輔助色調: 白 黑 粉
(7)製作動機: 喜歡
(8)製作目的: 想做
預期效果: 能做完就好~


1025445120



Edited 1 time(s). Last edit at 01/07/2015 04:41PM by 1025445120.
(編輯記錄)

(1)作業網址:http://mepopedia.com/~web103-c/final/final-1025445069
(2).
1.製作作業的時間:1~兩天
2.有無遇到的問題:都還好 只是剛開始FOOTER一直歪掉 後來好了
3.製作心得與感想:很有成就感
4.本學期於網頁設計課程上的收穫: 從完全不會到現在能做出一個還滿像樣的網站 覺得很開心 學到新的東西



(1)網站主題: 電台司令radiohead
(2)導覽列架構設定
[img]https://fbcdn-sphotos-e-a.akamaihd.net/hphotos-ak-xaf1/v/t1.0-9/10343495_1013342545350009_7478531594898592021_n.jpg?oh=d091291fc1e70a15618e207b8784ac45&oe=54FA0601&__gda__=1430274742_563299c70836bcd790d621a24c9463d6[/img]

(3)尺寸與架構設定
[img]https://scontent-b-pao.xx.fbcdn.net/hphotos-xfp1/v/t1.0-9/10382816_1013342552016675_8179642729745414489_n.jpg?oh=53c9071746eb03e386b17c03b03f38e8&oe=5510DB4A[/img]

(4)主要瀏覽族群: 大眾
(5)風格設定: 簡約
(6)主色調,輔助色調:藍色 灰色 白色 黑色 紅色
(7)製作動機: 喜歡這個樂團
(8)製作目的: 統整資料
預期效果: 簡單明瞭

1025445069 古珮儒



Edited 1 time(s). Last edit at 01/02/2015 06:08PM by 1025445072.
(編輯記錄)

(1)作業網址: http://mepopedia.com/~web103-c/final/final-1025445060
(2).
1.製作作業的時間: 好幾個禮拜
2.有無遇到的問題: CSS一直會跑掉,但後來問老師有解決問題了 smiling smiley
3.製作心得與感想: 雙欄比單欄難,語法太多有時會亂掉
4.本學期於網頁設計課程上的收穫:多學了一種軟體覺得還不錯 雖然有時真的感覺很難
但完成之後會很有成就感。







1) 網站主題:八三夭
(2) 導覽列架構設定:

(3) 尺寸與架構設定:

(4) 風格設定:簡單,質感
(5) 主色調,輔助色調:灰黑加上一點點藍綠色
(6) 製作動機:
    因為最近很喜歡聽八三夭的音樂,因此想製作有關八三夭的網頁,
並且介紹一些好聽的歌曲。
(7) 製作目的:讓八三夭的歌能讓更多的人知道

預期效果: 呈現與八三夭符合的風格


1025445060 黃淯婷



Edited 1 time(s). Last edit at 01/07/2015 09:12PM by 黃淯婷.
(編輯記錄)

(1)作業網址: http://mepopedia.com/~web103-c/final/final-1025445153
(2).
1.製作作業的時間:很多個禮拜
2.有無遇到的問題:很多很複雜有點亂掉
3.製作心得與感想: 做完很有成就
4.本學期於網頁設計課程上的收穫:覺得學會這個可以賺很多錢


(1) 網站主題:selena gomez魅力非凡
(2) 導覽列架構設定:
[url=http://imgur.com/BCXxGck][img]http://i.imgur.com/BCXxGck.jpg[/img][/url]

(3) 尺寸與架構設定:
[url=http://imgur.com/ZZbvHXh][img]http://i.imgur.com/ZZbvHXh.jpg[/img][/url]

(4) 風格設定:簡約、黑色、精緻
(5) 主色調,輔助色調:黑、深紫、藍...寒色系等顏色。
(6) 製作動機:
    因為很喜歡selena gomez,出生於美國得克薩斯州,美國女演員、歌手。
(7) 製作目的:讓更多人認識selena gomez的歌曲和許多影集。
預期效果: 簡約極致黑

1025445153 廖敏君



Edited 1 time(s). Last edit at 01/13/2015 05:08PM by 小累.
(編輯記錄)

(1)作業網址: http://mepopedia.com/~web103-c/final/final-1025445147
(2).
1.製作作業的時間: 二天多
2.有無遇到的問題:有點複雜
3.製作心得與感想: 雙欄比單欄難,也沒到我想要出現的東西
4.本學期於網頁設計課程上的收穫:有時覺得複雜,但完成時會有種成就感,雖然有時會出小差錯

(1)網站主題:ARASHI
(2)導覽列架構設定
網站主題:ARASHI
[img]http://i.imgur.com/K1YA1WO.jpg[/img]
(3)尺寸與架構設定
[img]http://i.imgur.com/pBBLBxC.jpg[/img]
(4)主要瀏覽族群:ARASHI的粉絲
(5)風格設定: 簡單明瞭
(6)主色調,輔助色調: 白 灰 黑 團員代表色
(7)製作動機:最近迷上的團體
(8)製作目的: 統整資料
預期效果:清楚明瞭

1025445147 張郁



Edited 1 time(s). Last edit at 01/14/2015 02:12AM by 詠月吾熹.
(編輯記錄)

(1)作業網址: http://mepopedia.com/~web103-c/final/final-1025445051/



1.製作作業的時間: 4個小時吧
2.有無遇到的問題: 一直怪怪的,絕對要用 “Opera”瀏覽器才是正確的,用ie或其他網頁都怪怪的
3.製作心得與感想: 很充實但真的要打好基礎
4.本學期於網頁設計課程上的收穫: 很亂但作完很充實


(1)網站主題:The Dinner
(4)主要瀏覽族群: 喜歡吃brunch的人
(5)風格設定: 美式風格帶點日式風格
(6)主色調,輔助色調: 白 黑 紅 黃
(7)製作動機: 剛好在跟朋友約brunch
(8)製作目的: 想練習
預期效果:完整度好舊好


1025445051 林芳伃



Edited 1 time(s). Last edit at 01/13/2015 10:42PM by XuanSong.
(編輯記錄)

作業網址: http://mepopedia.com/~web103-c/final/final-1025445015
1.製作作業的時間: 每個晚上累積做出來的
2.有無遇到的問題: 無
3.製作心得與感想: 完成後很感動
4.本學期於網頁設計課程上的收穫:
  網頁需要認真聽老師講解,也需要相當大的耐心和時間,對於自己做出來的成果也滿滿意的,感謝老師和同學指導。


(1)網站主題: Jessica & Krystal(韓國藝人姐妹)
(2)導覽列架構設定

(3)尺寸與架構設定

(4)主要瀏覽族群: 喜歡這對姊妹的粉絲
(5)風格設定: 個性、簡潔
(6)主色調,輔助色調: 深藍色、紅,灰白
(7)製作動機: 讓更多人瞭解她們
(8)製作目的: 瞭解做明星的辛苦,不是看似光鮮亮麗,實際上付出多倍的努力。
預期效果: 能呈現更清楚的資料給大家觀賞

(8)資料蒐集分析
http://www.avex.com.tw/fx/version04/
http://www.avex.com.tw/fx/version07/
這是F(x)團體其中兩張專輯的官方網站,都走個性、視覺化的感覺。


10254445015陳曉琪



Edited 2 time(s). Last edit at 01/13/2015 01:51AM by CHEN CHICHI.
(編輯記錄)

完成品(1/13前)
請將這項放置於文章最前面
(1)作業網址: http://mepopedia.com/~web103-c/final/final-1025445090/
(2).
1.製作作業的時間: 兩天吧
2.有無遇到的問題: 語法搞混
3.製作心得與感想: 完成一個偉大的網頁很滿足
4.本學期於網頁設計課程上的收穫: 有很大的收穫


前置作業(12/17)
(1)網站主題: Imagine Dragons
(2)導覽列架構設定[img]https://scontent-b-pao.xx.fbcdn.net/hphotos-xpa1/v/t1.0-9/10380319_859583470729464_2545068424518401824_n.jpg?oh=c3f5c6ed81703e6268abac1482b52aac&oe=553BB2FF[/img]
(3)尺寸與架構設定
[img]https://scontent-a-pao.xx.fbcdn.net/hphotos-xap1/v/t1.0-9/10559730_859583447396133_8008408593659569770_n.jpg?oh=355c7cf9a4c9ff6323a1f3b11ea03030&oe=550A78BA[/img]
(4)主要瀏覽族群: 會喜歡音樂的人
(5)風格設定: Imagine Dragons風格
(6)主色調,輔助色調: 藍 紅 黃
(7)製作動機: 喜歡Imagine Dragons
(8)製作目的: 介紹給大家
預期效果: 簡單明瞭

1025445090 鍾婷玟



Edited 1 time(s). Last edit at 01/08/2015 07:17PM by 1025445090.
(編輯記錄)

(1)作業網址: http://mepopedia.com/~web103-c/final/final-1025445102
(2).
1.製作作業的時間:兩三個禮拜
2.有無遇到的問題: 有些語法不知道該是運用在哪
3.製作心得與感想: 看到完成品很有成就感,但是好累~
4.本學期於網頁設計課程上的收穫:有成就感,因為是從不會 到會,可以作出屬於自己的網頁感覺很棒。










(4) 風格設定:簡約、精緻
(5) 主色調,輔助色調:粉色、深紫、白色、粉色系等顏色。
(6) 製作動機:
    因為喜歡韓國團體少女時代,剛好她們有出子團體Taetiseo,所以想介紹一下。
(7) 製作目的:讓更多人認識少女時代的子團體Taetiseo
預期效果: 整體簡約有子團體Taetiseo的特色

1025445102 邱筱惠



Edited 3 time(s). Last edit at 01/14/2015 01:51AM by 筱.
(編輯記錄)

(1)作業網址:http://mepopedia.com/~web103-c/final/final-1025445198/Index.html
(2).
1.製作作業的時間:四天
2.有無遇到的問題: 崁入UTUBE影片搞的頭很大
3.製作心得與感想: 語法看到眼睛快花掉了
4.本學期於網頁設計課程上的收穫:真的要把語法搞懂還是要好好上課阿

(1)網站主題: 李宗盛
(2)導覽列架構設定



(4)主要瀏覽族群: 喜歡音樂者
(5)風格設定: 簡單
(6)主色調,輔助色調: 白 黑
(7)製作動機: 相信音樂能給人能量
(8)製作目的: 讓更多人知道李宗盛的經典
預期效果: 簡單明瞭



Edited 1 time(s). Last edit at 01/03/2015 08:01PM by 1025445198.
(編輯記錄)

(1)作業網址: http://mepopedia.com/~web103-c/final/final-1025445027
(2).
1.製作作業的時間: 兩天
2.有無遇到的問題: 圖繞文、表格顏色、標籤變更跑不出來
3.製作心得與感想: 想了很多主題 可是還是想用自己的貓
凌晨時刻比較容易完成
4.本學期於網頁設計課程上的收穫:能自己做網頁了
1025445027

(1)作業網址:http://mepopedia.com/~web103-c/final/final-1025445048
(2).
1.製作作業的時間: 一整天
2.有無遇到的問題: 在連結時會不小心疏忽,沒有連結好,還有在表格的地方比較做ㄉ不好
3.製作心得與感想: 完成安東的網頁,覺得很開心

4.本學期於網頁設計課程上的收穫:能自己看影片一步一步的做網頁很開心,覺得老師的影片很詳細,慢慢作會慢慢了解

1025445048 林侑慶

(1)作業網址: http://mepopedia.com/~web103-c/final/final-1025445054/
(2).
1.製作作業的時間: 久到快吐
2.有無遇到的問題:表格製作比較難
3.製作心得與感想: 很有成就感
4.本學期於網頁設計課程上的收穫:學會很多東西
(1)網站主題:AKIAKANE-秋赤音
(2)導覽列架構設定
[img]http://i.imgur.com/COFp2AB.jpg[/img]
(3)尺寸與架構設定
[img]http://i.imgur.com/4rDVzCu.jpg[/img]
(4)主要瀏覽族群:想認識秋赤音與喜歡秋赤音的人
(5)風格設定: 簡單明瞭
(6)主色調,輔助色調: 紅.綠.藍
(7)製作動機:一直喜歡的繪師
(8)製作目的:讓更多人認識秋赤音
預期效果:鮮豔.簡單

1025445054 許雅筑



Edited 1 time(s). Last edit at 01/14/2015 04:51AM by 許雅筑.
(編輯記錄)

(1)作業網址: http://mepopedia.com/~web103-c/final/final-1005448079
(2).
1.製作作業的時間:2天
2.有無遇到的問題:做了好多次一直做不好 所以銃做好多次
3.製作心得與感想: 好累
4.本學期於網頁設計課程上的收穫: 還是一樣好難





1005448079

(1)作業網址:http://mepopedia.com/~web103-c/final/final-1025445030
(2).
1.製作作業的時間:兩天
2.有無遇到的問題:圖片一直跑掉 還有內文很煩
3.製作心得與感想:很有成就感
4.本學期於網頁設計課程上的收穫: 從完全不會到現在能做出成品 很感動

(1)網站主題:REDBULL
(2)導覽列架構設定 (3)尺寸與架構設定


(4)主要瀏覽族群: 大眾
(5)風格設定: 簡約
(6)主色調,輔助色調:藍色 灰色 白色 黑色
(7)製作動機: 喜歡這個性質
(8)製作目的: 統整資料
預期效果: 簡單明瞭

1025445030 王泰然

(1)作業網址: http://mepopedia.com/~web103-c/final/final-1025445126
(2).
1.製作作業的時間:1天
2.有無遇到的問題: 雙欄字體狂跑掉
3.製作心得與感想: 有點複雜
4.本學期於網頁設計課程上的收穫: 從無到有很有成就感





1025445126



Edited 1 time(s). Last edit at 01/11/2015 01:09AM by XuanSong.
(編輯記錄)

1)作業網址: http://mepopedia.com/~web103-c/final/final-1025445129/im
(2).
1.製作作業的時間:1天 半
2.有無遇到的問題: 第二頁一直莫名其妙的連不起來
3.製作心得與感想: 複雜有點亂
4.本學期於網頁設計課程上的收穫:從一開始的不會到現在有點懂網頁的架構

http://mepopedia.com/~web103-c/final/final-1025445156

1.導覽列配色與風格設定:死魚眼 / 淺灰藍
2.有無遇到的問題:有
3.製作感想:非常花時間的作業
4.製作作業的時間:N小時

1025445156 蔡佳芬

完成品(1/13前)

(1)作業網址: http://mepopedia.com/~web103-c/final/final-1025445192
1.製作作業的時間:7小時
2.有無遇到的問題: 一不小心按錯什麼就全沒了.. 但最後做很順
3.製作心得與感想: 終於完成了 也做得很順只是需要很多時間去摸索 有點感動 ..
4.本學期於網頁設計課程上的收穫: 學到如何製作雙攔 也讓我更懂網頁

前置作業(12/17)
(1)網站主題: 優格女孩 郭采潔
(2)導覽列架構設定
[img]http://i.imgur.com/bl7vl75l.jpg[/img]

(3)尺寸與架構設定
[img]http://i.imgur.com/KIoOpkQl.jpg[/img]

(4)主要瀏覽族群: 喜歡郭采潔的粉絲
(5)風格設定: 簡約舒服
(6)主色調,輔助色調: 白 咖啡
(7)製作動機: 喜歡郭采潔
(8)製作目的: 讓更多人了解喜歡她
預期效果: 舒服 達到正確明瞭傳遞訊息
(8)資料蒐集分析 :http://www.amberkuo.net/



1025445192 黃婷萱



Edited 1 time(s). Last edit at 01/13/2015 09:51PM by 黃婷萱.
(編輯記錄)

(1)作業網址: http://mepopedia.com/~web103-c/final/final-1025445177
(2).
1.製作作業的時間:三天
2.有無遇到的問題: 有請教同學
3.製作心得與感想: 有成就感
4.本學期於網頁設計課程上的收穫:覺得很難









(1)網站主題: 小美人魚系列
(2)導覽列架構設定



(3)尺寸與架構設定


(4)主要瀏覽族群:小孩子
(5)風格設定: 可愛
(6)主色調,輔助色調: 藍色調
(7)製作動機: 喜歡
(8)製作目的:興趣
預期效果: 不錯




1025445177 吳永婷

(1)作業網址: http://mepopedia.com/~web103-c/final/final-1025445117
(2).
1.製作作業的時間: 花了很多時間做 加起來應該有5天吧
2.有無遇到的問題: 有問題的地方 就看著老師的影片
3.製作心得與感想: 雖然過程中遇到蠻多問題的,但最後做好期末作業的當下, 真的有夠爽 ! ! ! !
4.本學期於網頁設計課程上的收穫: 真的學到了很多,只是網頁這個東西,真的要花很多時間與心思還有耐心。







(1)網站主題:THE▼NE 19941001 gb
(2)導覽列架構設定

[img]https://scontent-b.xx.fbcdn.net/hphotos-xap1/v/t1.0-9/10483693_727303307376508_4498298106633258767_n.jpg?oh=d9b571f157655241d77a9f06bcda53b8&oe=552B717B[/img]



(3)尺寸與架構設定

[img]https://fbcdn-sphotos-h-a.akamaihd.net/hphotos-ak-xap1/v/t1.0-9/1524977_727303304043175_2028215072057367256_n.jpg?oh=a365d04af271df783c6f0b03ccf195f4&oe=552CAC4A&__gda__=1429544707_12f32131de9afe9fcb9b0cf7c5082705[/img]


(4)主要瀏覽族群: 都可以
(5)風格設定: 主要用自己的東西來呈現
(6)主色調: 紅豆色、綠
(7)製作動機: 自己
(8)製作目的: 自己
預期效果: LUV

(8)資料蒐集分析



1025445117 黃振誠



Edited 1 time(s). Last edit at 01/14/2015 11:49AM by 綠辛.
(編輯記錄)

(1)作業網址: http://mepopedia.com/~web103-c/final/final-1025445045
(2).
1.製作作業的時間:一個禮拜
2.有無遇到的問題: 每天都煩惱
3.製作心得與感想: 真的很困難
4.本學期於網頁設計課程上的收穫: 做出成品很感動!





1025445045 饒文欣

(1)作業網址: http://mepopedia.com/~web103-c/final/final-1025445108
(2).
1.製作作業的時間:一個禮拜
2.有無遇到的問題: 影片一開使出不來
3.製作心得與感想:雖然一開始做不出來,但做出來後很有成就感。
4.本學期於網頁設計課程上的收穫: 做出來後很感動,漸漸喜歡上網頁了。


1025445108 張惟婷

(1)作業網址: http://mepopedia.com/~web103-c/final/final-1025445078
(2).
1.製作作業的時間:10天
2.有無遇到的問題: 前面東西都還跟著上期末後東西漸漸教得比較多 就有一點弱後的感覺 對東西都很陌生
3.製作心得與感想:跟朋友一起討論製作的感覺很好 做出來也真的很有成就感 smileys with beerthumbs up
4.本學期於網頁設計課程上的收穫:網頁設計這門課算我這學期真的有學到東西的一門課程 很有收穫 也很期待下學期的網業課 想學到更多的東西

1025445078 黃歆媛>grinning smiley<

(1)作業網址: http://mepopedia.com/~web103-c/final/final-1025445171
(2).
1.製作作業的時間: 豪久
2.有無遇到的問題:影片嵌入不會用
3.製作心得與感想: 終於好了
4.本學期於網頁設計課程上的收穫:COOL~
(1)網站主題: 迪士尼卡通人物
(2)導覽列架構設定


(3)尺寸與架構設定


(4)主要瀏覽族群: 老少咸宜
(5)風格設定: 簡單
(6)主色調,輔助色調: 淡色系
(7)製作動機: 喜歡迪士尼
(8)製作目的: 交作業
預期效果: 可愛

(8)資料蒐集分析 http://disney.lovesakura.com/toons.htm



1025445171 謝睿騏



Edited 1 time(s). Last edit at 01/14/2015 11:18AM by 1025445171.
(編輯記錄)

(1)作業網址: http://mepopedia.com/~web103-c/final/final-1025445180
(2).
1.製作作業的時間:一天
2.有無遇到的問題: 語法比較容易搞混
3.製作心得與感想: 做完很有成就感
4.本學期於網頁設計課程上的收穫:對於網頁設計更了解了也知道該怎麼去做

1025445180 謝芷寧

(1)作業網址: http://mepopedia.com/~web103-c/final/final-1025445009
(2).
1.製作作業的時間:一整個下午
2.有無遇到的問題: 很容易跳來跳去,有時會不小心連錯
3.製作心得與感想: 超級有成就感的
4.本學期於網頁設計課程上的收穫:很開心也多了很多的基礎

(1)作業網址: http://mepopedia.com/~web103-c/final/final-1025445150
(2).
1.製作作業的時間: 兩天
2.有無遇到的問題: 有
3.製作心得與感想: 很難但是做出來覺得很酷!
4.本學期於網頁設計課程上的收穫: 老師很用心 謝謝!

[img]https://fbcdn-sphotos-f-a.akamaihd.net/hphotos-ak-xpf1/v/t1.0-9/10426260_961005903917350_358543542064016792_n.jpg?oh=8c35213eb258109757ac512269a9035c&oe=5527BED3&__gda__=1428250130_a58e3c27fcfbedd4fae44e084f32047d[/img]

(4)主要瀏覽族群: 大眾
(5)風格設定: 沉穩
(6)主色調,輔助色調: 綠 黑 灰 藍
(7)製作動機: 喜歡鄧紫琪
(8)製作目的: 介紹喜歡的明星
預期效果: 好操作

視傳二C 1025445150 張曉萱



Edited 1 time(s). Last edit at 01/13/2015 07:49PM by 張曉萱.
(編輯記錄)

[img]http://i.imgur.com/zB08NAq.jpg[/img]
[img]http://i.imgur.com/vbFBUr4.jpg[/img]
1)作業網址:http://mepopedia.com/~web103-c/final/final-1025445162
1.製作作業的時間:2天
2.有無遇到的問題:一直遇到奇怪的問題
3.製作心得與感想:很好玩
4.本學期於網頁設計課程上的收穫: 從完全不會到會架網頁感覺很有成就感

1025445162陸怡潔



Edited 3 time(s). Last edit at 01/14/2015 12:28AM by 陸怡潔.
(編輯記錄)

(1)作業網址:http://mepopedia.com/~web103-c/final/final-1025445099
(2).
1.製作作業的時間:一到兩天
2.有無遇到的問題:有時候要找一下要改的顏色在哪一列的選項
3.製作心得與感想:感謝同學的協助 覺得痛哭流涕
4.本學期於網頁設計課程上的收穫:學到新東西是收穫 但真的很痛苦



(1)網站主題:Linkin Park
(2)導覽列架構設定
[img]https://fbcdn-sphotos-g-a.akamaihd.net/hphotos-ak-xaf1/v/t1.0-9/10922435_1087286361297069_4150416861432975483_n.jpg?oh=e1a1dc08c8751b6d3cbd951b0f247481&oe=552AA278&__gda__=1433284559_73ab79db8c6eb444850beb405d55815f[/img]
[img]https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-xfp1/v/t1.0-9/10384673_1087286357963736_1511539470951788511_n.jpg?oh=6c6ed6bad3aab5ad906a3903a7789c7e&oe=5537FFE2&__gda__=1429588146_810bc757823df78e32405fb110c6658e[/img]

(3)尺寸與架構設定


(4)主要瀏覽族群:對聯合公園有興趣的人皆可
(5)風格設定:搖滾
(6)主色調,輔助色調:藍色 白色 黑色 棗紅色
(7)製作動機: 想不到製作對象 突然聽見聯合公園的歌
(8)製作目的:統整資料 練習讓思緒清晰
預期效果: 還行

1025445099 陳盛倫

(1)作業網址: http://mepopedia.com/~web103-c/final/final-1025445006
(2).
1.製作作業的時間:很多天 好幾個小時
2.有無遇到的問題:連結聯的怪怪的 謝謝老師救助
3.製作心得與感想:有些還是好難會看不懂語法跟div什麼包甚麼會亂掉
4.本學期於網頁設計課程上的收穫:很開心多學會了一個軟體希望能學得更精


(1)網站主題: hello kitty
(2)導覽列架構設定



(3)尺寸與架構設定


(4)主要瀏覽族群: 喜歡三麗鷗的人
(5)風格設定: 簡單可愛 色調
(6)主色調,輔助色調: 白 粉
(7)製作動機:kitty非常可愛
(8)製作目的:因為本身超級無敵愛kity
預期效果: 簡單明瞭

(8)資料蒐集分析
http://www.sanrio.com.tw/

1025445006 鄭喬薰



Edited 1 time(s). Last edit at 01/13/2015 11:16PM by 1025445006.
(編輯記錄)

(1)作業網址: http://mepopedia.com/~web103-c/final/final-1025445123
(2).
1.製作作業的時間:一天
2.有無遇到的問題:語法很多,有點複雜
3.製作心得與感想:學到了很多技巧。
4.本學期於網頁設計課程上的收穫: 完成了一個完整的網頁。





1025445123姚育慈

(1)
作業網址: http://mepopedia.com/~web103-c/final/final-1025445018

(2)
1.製作作業的時間:6小時
2.有無遇到的問題:語法很亂很複雜,很容易看錯。
3.製作心得與感想:學到了很多語法和製作網頁的技巧。
4.本學期於網頁設計課程上的收穫: 學到很多,而且越來越像真的網頁了。





1025445018 陳怡融

1)作業網址: http://mepopedia.com/~web103-c/final/final-1025445111
(2).
1.製作作業的時間:超過一天
2.有無遇到的問題:目前沒有
3.製作心得與感想: 覺得可以更好,在配色上面能夠加強,內容較簡單
4.本學期於網頁設計課程上的收穫:學習到整個網頁的應用,雖然不是很熟悉,但可以做出一個網頁,覺得很好

(1)作業網址: http://mepopedia.com/~web103-c/final/final-1025445135


1.製作作業的時間: 4小時
2.有無遇到的問題: 沒有
3.製作心得與感想: 很好玩
4.本學期於網頁設計課程上的收穫: 覺得越來越上手 不需要一直看教學影片了


(1)網站主題:下午茶時光
(2)導覽列架構設定
(3)尺寸與架構設定
(4)主要瀏覽族群: 愛好美食者
(5)風格設定: 碎花
(6)主色調,輔助色調: 主色/粉色 輔助色/水藍和咖啡色
(7)製作動機: 喜歡下午茶

1025445135李品萱

(1)作業網址: http://mepopedia.com/~web103-c/final/final-1025445165
(2).
1.製作作業的時間:5小時
2.有無遇到的問題: css不再您的本地磁碟中???
3.製作心得與感想: 慢慢看就會越來越好
4.本學期於網頁設計課程上的收穫:雖然覺得很難很複雜但能完成一個完整的還蠻有成就感的

(1)作業網址:http://mepopedia.com/~web103-c/final/final-1005445191
(2).
1.製作作業的時間:一天
2.有無遇到的問題:有;沒注意刪到語法,會突然不知道自己哪裡做錯。
3.製作心得與感想:覺得更有耐心,因為語法很多,要耐心的從頭到尾不停的看。
4.本學期於網頁設計課程上的收穫: 覺得基本的架構都可以自己來,從完全不會到現在,覺得很有收穫。

1005445191 陳佳雯

(1)作業網址:http://mepopedia.com/~web103-c/final/final-1005445188
(2).
1.製作作業的時間:一整個晚上
2.有無遇到的問題:當然有,不過藉由反覆研究講義得以解決
3.製作心得與感想:個人認為網頁設計是一個相當複雜的一門學問,能學好真的不容易,不過能習得也是一大收穫。
4.本學期於網頁設計課程上的收穫:從來沒有接觸過網頁設計,藉由這次認識到了不一樣的新東西,挺不錯的。



Edited 1 time(s). Last edit at 01/14/2015 02:23AM by 姜翊萱.
(編輯記錄)

(1)作業網址: http://mepopedia.com/~web103-c/final/final-1025445039


1.製作作業的時間:2天
2.有無遇到的問題: 沒有
3.製作心得與感想: 很有成就感
4.本學期於網頁設計課程上的收穫: 越來越上手


(1)網站主題:佐藤のパン
(2)導覽列架構設定
(3)尺寸與架構設定
(4)主要瀏覽族群:購買麵包顧客
(5)風格設定: 深紅色
(6)主色調,輔助色調: 深紅色
(7)製作動機:麵包好吃

1025445039 何佳霖

(1)作業網址: http://mepopedia.com/~web103-c/final/final-1025445063
(2).
1.製作作業的時間:好幾個禮拜
2.有無遇到的問題:很多都不大會
3.製作心得與感想:很難
4.本學期於網頁設計課程上的收穫:還需要多學習

(1)網站主題:Audrey Kawasaki Art's
(2)導覽列架構設定

(4) 風格設定:木質感
(5) 主色調,輔助色調:灰 咖啡
(6) 製作動機:
   之前就蠻喜歡這藝術家的作品,他繪畫的技巧跟作品都很細膩
(7) 製作目的:喜歡她的作品

預期效果: 簡單明瞭

1025445063 洪筠真



Edited 1 time(s). Last edit at 01/14/2015 06:52AM by Annie真.
(編輯記錄)

(1)作業網址: http://mepopedia.com/~web103-c/final/final-1025445144
(2).


1.製作作業的時間:20小時
2.有無遇到的問題:都是小問題
3.製作心得與感想:中等
4.本學期於網頁設計課程上的收穫:我覺得多看語法吧 很多都很好用的

(1)網站主題:Hood by air
(2)導覽列架構設定
(3) 風格設定:簡單時尚
(4) 主色調,輔助色調:黑 白 灰
(5) 製作動機:喜歡他的牌子
(6) 製作目的:喜歡他的牌子

預期效果: 簡單明瞭

1025445144 李欣翰



Edited 2 time(s). Last edit at 01/14/2015 11:52AM by 1025445144.
(編輯記錄)

(1)作業網址:http://mepopedia.com/~web103-c/final/final-1025445195/creation.html


1.製作作業的時間:斷續幾天吧
2.有無遇到的問題: 有 因為有很多重複的語法 我會搞錯
3.製作心得與感想: 當看到做好的網頁時 會很有成就感
4.本學期於網頁設計課程上的收穫: 對網頁設計有了新的認知 也略懂 希望未來可以更加深入


(1)網站主題:1顆心裡面的第3個世界
(2)主要瀏覽族群:喜歡插畫的同好們
(3)風格設定: 粉色
(4)主色調,輔助色調: 也是粉色色調的淺灰 淺藍
(5)製作動機:希望能夠推廣我的插畫作品

1025445195古馥瑜



Edited 2 time(s). Last edit at 01/14/2015 11:45AM by 1025445195.
(編輯記錄)

(1)作業網址: http://mepopedia.com/~web103-c/final/final-1025445075/index.html

1.製作作業的時間: 3天
2.有無遇到的問題: 非常困難,尤其是設置版面配置,以及雙欄位的擺放
3.製作心得與感想: 很累,腦袋快爆炸
4.本學期於網頁設計課程上的收穫: 可以學會製作網頁真的非常棒,覺得很開心!辛苦總算有結果了哈哈!!
老師人也很好有耐心! very nice!!

(1)網站主題:Jolin Tsai 蔡依林

(2)導覽列架構設定:


(3) 尺寸與架構設定:


(1)作業網址: http://mepopedia.com/~web103-c/final/final-1025445132
(2).
1.製作作業的時間:2天
2.有無遇到的問題:
3.製作心得與感想: 有點複雜
4.本學期於網頁設計課程上的收穫:能做出有點完整的網站覺得很棒

(1)網站主題:snoopy
(2)導覽列架構設定
(3)尺寸與架構設定
(4)主要瀏覽族群:喜愛snoopy的
(5)風格設定: 藍色系列
(6)主色調,輔助色調: 藍綠色
(7)製作動機:讓大家更認識snoopy




1025445132 羅雅嫚



Edited 1 time(s). Last edit at 01/14/2015 11:47AM by yaman.
(編輯記錄)

(1)作業網址: http://mepopedia.com/~web103-c/final/final-1025445174
(2).
1.製作作業的時間:很多天
2.有無遇到的問題: 不太熟
3.製作心得與感想: 做成功了 覺得很有成就感
4.本學期於網頁設計課程上的收穫:會做網頁了









(1)網站主題: 冰雪奇緣
(2)導覽列架構設定

[img]http://i.imgur.com/FXDmgRC.jpg[/img]

(3)尺寸與架構設定
[img]http://i.imgur.com/JxnFPfv.jpg[/img]

(4)主要瀏覽族群: 喜歡迪士尼卡通的人
(5)風格設定: 簡單明瞭
(6)主色調,輔助色調: 白 藍
(7)製作動機: 覺得歌好聽
(8)製作目的: 讓更多人看到
預期效果: 簡單明瞭

(8)資料蒐集分析
http://zh.wikipedia.org/zh-tw/%E5%86%B0%E9%9B%AA%E5%A5%87%E7%BC%98


1025445174黃琪雅

(1) 作業網址:http://mepopedia.com/~web103-c/final/final-1025445012


(2)

1.製作作業的時間:5~6小時
2.有無遇到的問題:語法超煩。
3.製作心得與感想:做完有種鬆了口氣的感覺。
4.本學期於網頁設計課程上的收穫:越來越像有樣子了。

1025445012戴嫻淳



Edited 1 time(s). Last edit at 01/14/2015 11:51AM by 戴嫻淳.
(編輯記錄)

1025445096 徐琬凌

作業網址:http://mepopedia.com/~web103-c/final/final-1025445096

1.製作作業的時間:一天
2.有無遇到的問題:常常當機,搞得自己很緊張
3.製作心得與感想:有點成就感,而且內容是自己感興趣的東西,所以做得很開心
4.本學期於網頁設計課程上的收穫:學會很多事情

(1) 作業網址:http://mepopedia.com/~web103-c/final/final-1025445033

(2)
1.製作作業的時間:5~6小時
2.有無遇到的問題:語法好多,要往前翻才做得出來。
3.製作心得與感想:做完有種鬆了口氣的感覺。
4.本學期於網頁設計課程上的收穫:越來越像有樣子了。

1025445033 林子軒

(1)作業網址:http://mepopedia.com/~web103-c/final/final-1025445138/Index.html
(2).
1.製作作業的時間:三個小時
2.有無遇到的問題:將分開學的技巧融會貫通真的需要時間
3.製作心得與感想:會更認真的學
4.本學期於網頁設計課程上的收穫:打開了新的視野

(1)網站主題:復仇者聯盟
(2)導覽列架構設定

(4)主要瀏覽族群:漫威迷及電影愛好者
(5)風格設定:現代主義
(6)主色調,輔助色調:灰色系、黑、白、淺藍
(7)製作動機:心中喜愛英雄的九歲小男孩還沒死去
(8)製作目的:讓沒看過的人能了解大概在演什麼
預期效果:引起共鳴

1025445138 梁奕堯



Edited 1 time(s). Last edit at 01/17/2015 01:21AM by 邊緣人.
(編輯記錄)

(1) 作業網址:http://mepopedia.com/~web103-a/final/final-1025445010/index.html

(2)
1.製作作業的時間:很多天
2.有無遇到的問題:語法太多太複雜會搞混
3.製作心得與感想:雖然遇到很多瓶頸可是當作玩的時候還是很有成就感
4.本學期於網頁設計課程上的收穫:是一堂令人壓力很大可是卻充實的課程

1025445010 謝佳蓁