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

Advanced

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

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

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





1. 製作說明:


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

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

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

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

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


6.製作完成上傳至FTP





2. 作業設計重點



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



3. 評分標準與製作檢核


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




4. 繳交作業方式


1.製作完成後,檔案命名方式:

期中作業FTP上的資料夾為:final

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

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

存放在 < final-學號 > 的資夾內



2.全部完成後上傳至FTP

3.依進度回覆本篇文章




5. 回覆說明



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


前置作業(12/17)
(1)網站主題:
(2)導覽列架構設定

範例參考(可下載參考附檔的做法):
http://i556.photobucket.com/albums/ss1/whc915/webtree.jpg

(3)尺寸與架構設定

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

(4)主要瀏覽族群:
(5)風格設定:
(6)主色調,輔助色調:
(7)製作動機:
(8)製作目的:
預期效果:

(8)資料蒐集分析

◎設計優良網站(風格)列表與分析
http://mepopedia.com/forum/read.php?1173,27997
並將網站分析於12/17前回覆於前述網址


◎相關網站列表與分析:






6. 期末作業進度參考


第十二週11/26 題目及網站架構確定
第十三週12/03 版型、尺寸確定,資料蒐集與網站分析
第十四週12/10 資料蒐集與網站分析、圖片製作,內容建構
第十五週12/17 圖片製作,內容建構
第十六週12/24 檢討與修正
第十七週12/31 (調整放假) 細修、完成與上傳
第十八週01/07 成績確認與最後修改



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



7. 學長姐作品參考


-

(1) 作業網址: http://mepopedia.com/~web100b/final/final-1001445022
(2).
 1. 製作作業的時間:超過二十四小時
 2. 有無遇到的問題:同樣是跨瀏覽器的問題
          還有關於 content 裡面的 L 跟 R 的問題
          就算跟著老師的方法做也一樣不會跟著跑這樣

          這些問題已經從老師那裡得到解答,解決囉!:)
 3. 製作心得與感想:雙欄式的網頁真的困難重重
          但很高興我能從這樣的網頁中學會自己克服困難、解決問題
          做完之後很有成就感,很高興:)

-

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

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




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/



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

=================================================



Edited 2 time(s). Last edit at 11/25/2012 03:01PM by JinJin.
(編輯記錄)

Attachments:
開啟 | 下載 - ex-finallayout.ai (1.21 MB)
(1) 作業網址:

http://mepopedia.com/~web101c/final/final-1015445243-1/ (Mariah Carey)
http://mepopedia.com/~web101c/final/final-1015445243/ (濱崎步)

(2).
 1. 製作作業的時間:各2天~~
 2. 有無遇到的問題: 無
 3. 製作心得與感想:
發神經~~做兩個網頁
做出來根本就是官網了嘛~~
標籤設一堆!!包來包去好麻煩~~
我的尺寸架構設定超複雜的~~(有人看的懂就神了!!
4.本學期於網頁設計課程上的收穫:
收穫超多的~~~原本要完全靠不懂的語法!!現在幾乎都會!!
想再繼續學多一點 網頁設計

-----------------------------------------------------------------------------------------------------------
(1)網站主題: Mariah Carey
(2)導覽列架構設定
http://i.imgur.com/MoC1m.jpg?1
(3)尺寸與架構設定
http://i.imgur.com/6ouhU.jpg?1
(4)主要瀏覽族群: 想認識Mariah Carey的人

(5)風格設定:天后降臨="=
(6)主色調,輔助色調:金黃+黑色+土黃
(7)製作動機:Mariah Carey是我喜愛的歌手之一.從小聽她的歌到現在=口=
(8)製作目的: 想認識Mariah Carey多一點.順便做中文官方網站
預期效果:多重背景(透明背景)+雙欄式網頁+雙導覽列

(8)資料蒐集分析:
http://mariahcarey.com/
國際官方網站~~

作業網址: http://mepopedia.com/~web101c/final/final-1015445223

1)網站主題:舞力全開
(2)導覽列架構設定
http://imgur.com/8XGng

(3)尺寸與架構設定
http://imgur.com/m70ox

(4)主要瀏覽族群:喜歡跳舞的人
(5)風格設定: 帥帥的感覺
(6)主色調,輔助色調:深灰、淺灰、藍色
(7)製作動機:因為喜歡跳舞
(8)製作目的:推薦大家去看舞力全開
預期效果: 帥帥有設計風格網頁
(8)資料蒐集分析
http://stepup3d.pixnet.net/blog



Edited 1 time(s). Last edit at 01/07/2013 11:38AM by 1015445223.
(編輯記錄)

作業網址:http://mepopedia.com/~web101c/hw07/hw07-1015445209/links.html
(1)網站主題:Avangers
(2)導覽列架構設定
http://i.imgur.com/Th9iT.jpg?1


(3)尺寸與架構設定
http://i.imgur.com/UdKqA.jpg?1

(4)主要瀏覽族群:喜愛美國英雄漫畫的愛好者
(5)風格設定: 科幻
(6)主色調,輔助色調:黑色 深紅色
(7)製作動機:復仇者聯盟的粉絲
(8)製作目的:值得一看的一部好電影
預期效果: 略微接受
(8)資料蒐集分析
http://marvel.com/avengers_movie/

(1) 作業網址:

http://mepopedia.com/~web101c/final/final-1015445242
(2).
 1. 製作作業的時間:2天 
2. 有無遇到的問題: 解決了
 3. 製作心得與感想: 做出比預期的好 也感謝身邊幫助我的人
4.本學期於網頁設計課程上的收穫: 學會了設計網頁的軟體
-----------------------------------------------------------------------------------------------------------
(1)網站主題: Hello Kitty
(2)導覽列架構設定
http://i.imgur.com/fKPw3.png
(3)尺寸與架構設定
http://i.imgur.com/7uA3H.png
(4)主要瀏覽族群: 想認識Hello Kitty的人

(5)風格設定:簡約風
(6)主色調,輔助色調:粉紅+白色+灰色
(7)製作動機:喜歡Hello Kitty
(8)製作目的: 讓更多人了解Hello Kitty

(9)資料蒐集分析:

http://tw.knowledge.yahoo.com/question/question?qid=1205081213550

(1) 作業網址:

http://mepopedia.com/~web101c/final/final-1015445239/


(2).
 1. 製作作業的時間:一天
 2. 有無遇到的問題:語言障礙smiling smiley)
 3. 製作心得與感想:延續其中的冠希 自創品牌ㄛ!!!!
4.本學期於網頁設計課程上的收穫:學到更多之前不知道的偷吃步 :">


-----------------------------------------------------------------------------------------------------------
(1)網站主題: CLOT
(2)導覽列架構設定
http://i.imgur.com/LR2FN.png?1

(3)尺寸與架構設定
http://i.imgur.com/Zr4qZ.png?1
(4)主要瀏覽族群: 想了解或想購買CLOT自創品牌的帥哥美女:">
(5)風格設定:簡單
(6)主色調,輔助色調:CLOT的標準色 + 灰色
(7)製作動機:延續其中作業smiling smiley
(8)製作目的:喜歡冠希的風格也愛他的自創風格
預期效果:雙欄式網頁+一致性簡單明瞭

(8)資料蒐集分析:
http://clotinc.com/
官網

(1)作業網址: http://mepopedia.com/~web101c/final/final-1015445203
(2)
1.製作作業的時間:兩天
2.有無遇到的問題:有,想要找背景音樂的midi都找不到
3.製作心得與感想:做完的時候又想再看一次「仁顯王后的男人」這部韓劇了!
4.本學期於網頁設計課程上的收穫:從一個完全空白的網頁做出自己想要的東西,學到雙欄的運用,這是以前在玩留言板時沒學到的

(1)網站主題:仁顯王后的男人
(2)導覽列架構設定
http://i.imgur.com/HAY8D.png
(3)尺寸與架構設定
http://i.imgur.com/1J515.png
(4)主要瀏覽族群:會看韓劇的人
(5)風格設定:簡單和浪漫
(6)主色調,輔助色調:藍,紫;白
(7)製作動機:是我目前看過最好看的一部韓劇,而這部劇也榮獲今年韓國最受歡迎的戲劇,以前本來很排斥穿越劇,但看過這部之後就對穿越劇完全改觀了       
(8)製作目的:想要讓更多人知道這是一部非常好看的韓劇!
預期效果:呈現屬於仁顯自己風格的雙欄式網頁

(8)資料蒐集分析
1:http://zh.wikipedia.org/zh-hant/%E4%BB%81%E9%A1%AF%E7%8E%8B%E5%90%8E%E7%9A%84%E7%94%B7%E4%BA%BA
2:http://tieba.baidu.com/f?kw=%C8%CA%CF%D4%CD%F5%BA%F3%B5%C4%C4%D0%C8%CB

http://mepopedia.com/~web101c/final/final-1015445246/contact.html
(1)網站主題: 捍衛聯盟
(2)導覽列架構設定 :附加檔案中
(3)尺寸與架構設定 :
(4)主要瀏覽族群: 對於卡通、動畫有興趣的人
(5)風格設定:多以聖誕節的風格,
(6)主色調,輔助色調: 紅色為主調,冬天有了紅色,會有溫暖的感覺,白色、黑色為輔助
(7)製作動機: 對於動畫很感興趣,想了解更多相關資料
(8)製作目的: 因為自己很感興趣,所以希望介紹給更多人認識
預期效果: 希望老師所教的,能夠都運用上

(8)資料蒐集分析
http://www.dwaapps.com/tw/官方網站



Edited 2 time(s). Last edit at 01/14/2013 11:39AM by 1015445246.
(編輯記錄)

(1) 作業網址: http://mepopedia.com/~web101c/final/final-1015445218

(2).
 1. 製作作業的時間:一天
 2. 有無遇到的問題:沒有噢~
 3. 製作心得與感想:終於又做好了個像樣的網頁很開心~~
4.本學期於網頁設計課程上的收穫:上網頁很開心噢~
我想網頁應該就是這學期最有收穫的一門課了吧!


-----------------------------------------------------------------------------------------------------------

(1)網站主題:Roby跳跳馬
(2)導覽列架構設定
http://imgur.com/raF1x.jpg
(3)尺寸與架構設定
http://imgur.com/eTuS8.jpg
(4)主要瀏覽族群:適合所有的人
(5)風格設定: 以可愛對比色強烈的單色系來呈現
(6)主色調,輔助色調:紅.藍.綠.黃
(7)製作動機:因為最近喜歡上了roby
(8)製作目的:想要讓大家更了解roby
預期效果:呈現出不同種風格的roby網站

(8)資料蒐集分析:http://preview.shop123.com.tw/200500/index.php?type=0



Edited 2 time(s). Last edit at 01/07/2013 11:45AM by 1015445218.
(編輯記錄)

(1)作業網址: http://mepopedia.com/~web101c/final/final-1015445254
(2).
1.製作作業的時間: 兩天
2.有無遇到的問題: 沒有,看講議解決
3.製作心得與感想: 雙欄做完後,感覺就像是一個真正的網頁,好棒!!!
4.本學期於網頁設計課程上的收穫: 以前從來沒接觸過,在網路上點閱的網頁都覺得很難做到,
可是碰了之後發現,能自己做出來!!很感動~ 雙欄真的比單欄困難很多!! 不過還是做出來了^_^!

======================================================================
(1)網站主題: 中山優馬/PIECE
(2)導覽列架構設定
http://i.imgur.com/mQwgZ.jpg

(3)尺寸與架構設定
http://i.imgur.com/cfpXx.jpg

(4)主要瀏覽族群:有關注日劇與傑尼斯的人
(5)風格設定: 活潑、簡約
(6)主色調,輔助色調: 粉紅、藍
(7)製作動機: 讓更多人知道他的努力
(8)製作目的: 讓更多人認識及支持他
預期效果: 製作出屬於我的網頁

(8)資料蒐集分析http://blog.xuite.net/st70522/19901115/63119126-%E4%B8%AD%E5%B1%B1%E5%84%AA%E9%A6%AC%E7%9D%BD%E9%81%953%E5%B9%B4%E5%86%8D%E5%BA%A6%E4%B8%BB%E6%BC%94++%E6%B7%B1%E5%A4%9C%E5%8A%87%E3%80%8EPiece%E3%80%8F%E5%87%BA%E6%BC%94%E6%B1%BA%E5%AE%9A!!



Edited 1 time(s). Last edit at 01/06/2013 04:55PM by 許豆豆.
(編輯記錄)

(1)作業網址: http://mepopedia.com/~web101c/final/final-1015445269
(1)網站主題/Tiffany Alvord
(2)導覽列架構設定/http://imgur.com/AlnYS
http://imgur.com/AlnYS
(3)尺寸與架構設定/http://imgur.com/xFTry
http://imgur.com/xFTry

(4)主要瀏覽族群/適合所有想認識她的人
(5)風格設定/活潑的顏色表現出她俏皮的一面
(6)主色調,輔助色調/粉色系列 深色系列
(7)製作動機/喜歡她和她的歌聲
(8)製作目的/讓更多人認識她
預期效果/更快了解她及容易操作的網頁

(8)資料蒐集分析/http://www.wretch.cc/blog/macy800704/23313313



Edited 3 time(s). Last edit at 01/06/2013 11:21PM by 1015445269.
(編輯記錄)

(1)作業網址: http://mepopedia.com/~web101c/final/final-1015445252
(2).
1.製作作業的時間:兩天
2.有無遇到的問題: 很少,遇到翻前面講義都可以解決~
3.製作心得與感想: 越做越順手^^
4.本學期於網頁設計課程上的收穫:原本都不熟悉覺得非常困難的網頁設計,經過一學期的練習有理解不少。
把全部作業整理起來點閱,頗開心哈!!


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

http://i.imgur.com/3vtTQ.jpg

(3)尺寸與架構設定

http://i.imgur.com/WuseE.jpg

(4) 風格設定:簡單清晰
(5) 主色調,輔助色調:紅、黑、藍、白
(6) 製作動機:
改變大家對Rain的印象,不是只會唱歌跳舞的Rain,他是全能巨星。
讓大家知道Rain怎麼努力成為巨星,和他出道前的辛酸歷程。
(7) 製作目的:讓更多人認識Rain

預期效果: 擁有自我風格的網頁



Edited 1 time(s). Last edit at 01/05/2013 03:59PM by Chian Chian.
(編輯記錄)

(1)作業網址:http://mepopedia.com/~web101c/final/final-1015445221
(2).
1.製作作業的時間:兩天
2.有無遇到的問題:連結的問題
3.製作心得與感想: 開心做出完整的雙欄網頁
4.本學期於網頁設計課程上的收穫:
會看語法,學到很多,很有成就感!


(1)網站主題:國民妹妹IU
(2)導覽列架構設定

http://imgur.com/yNmGs
(3)尺寸與架構設定
http://imgur.com/fV3y0

(4)主要瀏覽族群:喜歡聽音樂的人
(5)風格設定: 青春和柔美
(6)主色調,輔助色調:綠 藍綠 白 咖啡 紅
(7)製作動機:喜歡IU所演唱的歌曲
(8)製作目的:希望能讓更多人欣賞她的歌曲與表演
預期效果: 簡單有設計風格網頁
(8)資料蒐集分析
韓國官網:http://iu.iloen.com/



Edited 6 time(s). Last edit at 01/07/2013 05:49PM by 姚少涵.
(編輯記錄)

(1)作業網址: http://mepopedia.com/~web101c/final/final-1015445270
(2).
1.製作作業的時間:1天
2.有無遇到的問題:自己找到並解決了
3.製作心得與感想:自己完成一個不同又屬於自己的網站感覺好開心
4.本學期於網頁設計課程上的收穫:
許多都是要靠一步一步累積才會有收穫,從製作一個網頁到製作一個網站,
其中的挫折很多但問題解決後就感覺很有成就感,是一個屬於自己的網站,
更學習到很多語法可以運用。

前置作業
(1)網站主題: 史努比sonnpy
(2)導覽列架構設定:http://i.imgur.com/uqQa5.jpg

(3)尺寸與架構設定:http://i.imgur.com/UcBHK.jpg

(4)主要瀏覽族群: 喜愛史努比的人
(5)風格設定: 簡單清晰
(6)主色調,輔助色調: 橘黃、白,藍、粉紅、灰
(7)製作動機: 喜歡簡單色彩的史努比
(8)製作目的: 讓大家了解可愛的史努比
預期效果: 簡簡單單可愛的網站

(8)資料蒐集分析:
http://stmail.tajen.edu.tw/~592092071/week9_3.htm
http://blog.yam.com/a12916007/article/13638012
http://www.julia4christ.org/Life/JLI_luv_snoopy.htm
http://www.jhjh.cyc.edu.tw/student/95/306/30615/html/manu1.htm



Edited 1 time(s). Last edit at 01/06/2013 11:26PM by 1015445270.
(編輯記錄)

(1)網站主題: 犬夜叉
(2)導覽列架構設定 : (3)尺寸與架構設定 :
http://i.imgur.com/9WvVv.jpg
(4)主要瀏覽族群:任何喜愛動漫的人
(5)風格設定:爽朗
(6)主色調,輔助色調: 藍色為主調,草綠色為輔助
(7)製作動機: 喜歡犬夜叉
(8)製作目的: 因為自己喜歡,就做
預期效果: 簡單好看就好
(8)資料蒐集分析 ??

(1)網站主題: 綠色奇蹟
(2)導覽列架構設定

http://i.imgur.com/53WRj.jpg
(3)尺寸與架構設定
http://i.imgur.com/Iyu2v.jpg
(4)主要瀏覽族群: 想了解或想觀看綠色奇蹟的群眾
(5)風格設定:簡單
(6)主色調,輔助色調:電影海報風個的綠色.黑色.暖色系
(7)製作動機:想介紹電影給大家
(8)製作目的:讓大家多了解綠色奇蹟
預期效果:雙欄式網頁+一致性簡單明瞭

(8)資料蒐集分析:
http://zh.wikipedia.org/wiki/%E7%B6%A0%E9%87%8C%E5%A5%87%E8%B9%9F_(%E9%9B%BB%E5%BD%B1)

(1)網站主題: 亞洲女子天團 S.H.E
(2)導覽列架構設定
http://i.imgur.com/HEnQj.jpg?1

(3)尺寸與架構設定
http://i.imgur.com/hItfh.jpg?1

(4)主要瀏覽族群:全球S.H.E的粉絲
(5)風格設定: 神秘、重生
(6)主色調,輔助色調: 黑白色調
(7)製作動機: 讓更多人知道她們的努力與堅持
(8)製作目的: 因為真的很愛她們
預期效果: 製作出屬於我對SHE的網頁

(8)資料蒐集分析: http://mepopedia.com/~web101c/final/final-1015445213

(1)作業網址: http://mepopedia.com/~web101c/final/final-1015445216
(2).
1.製作作業的時間: 2天半
2.有無遇到的問題: 左邊的分頁按鈕一直跑掉
3.製作心得與感想: 心靈受創(X)
4.本學期於網頁設計課程上的收穫: 可以做自己喜歡的網頁是一件很開心的事、也學了好多高中沒學過的東西




(1) 網站主題:星空幻想 -タルタロス- Tartaros Online
(2) 導覽列架構設定:
http://i.imgur.com/Uexwm.jpg
http://i.imgur.com/enwsY.jpg
(4)主要瀏覽族群:有在玩的人,希望能引起他們的注意(?
(5)風格設定:淡綠自然風
(6)主色調,輔助色調:粉綠、淡綠,青綠、深綠
(7)製作動機:很喜歡的線上遊戲,從開測以來玩到現在
(8)製作目的: 因為這款遊戲已經步向結束的道路了
預期效果:雙欄式網頁+雙導覽列,簡約
(8)資料蒐集分析:http://ttr.lager.com.tw/html/character/character_soma.html



Edited 2 time(s). Last edit at 01/06/2013 09:29PM by sp39678910.
(編輯記錄)

(1)網站主題: 初音未來

(2)導覽列架構設定 :
http://i.imgur.com/49YHL.jpg

(3)尺寸與架構設定 :
http://i.imgur.com/CAWtb.jpg

(4)主要瀏覽族群: 對於卡通、動畫有興趣的人

(5)風格設定:黑色神秘藍色跳動

(6)主色調,輔助色調: 以黑為主藍色為補

(7)製作動機: 對於他很感興趣,想了解更多相關資料 ,製作這會讓我很開心

(8)製作目的: 因為自己很喜歡,所以想讓更多人知道並更深入了解他

預期效果:老師教的都運用上去

(8)資料蒐集分析
http://zh.wikipedia.org/wiki/%E5%88%9D%E9%9F%B3%E6%9C%AA%E4%BE%86

(1) 作業網址:http://mepopedia.com/~web101c/final/final-1015445215
(2)
1. 製作作業的時間:一天
2. 有無遇到的問題:無
3. 製作心得與感想:一開始覺得雙欄網頁有點複雜難懂,但了解和熟悉做出來之後感覺真的很棒、很有成就感 !
4.本學期於網頁設計課程上的收穫:從一開始的不會到會真的學到了許多東西,每每做完一個步驟或是學到新的東西心情就變好好,很有成就感。


-----------------------------------------------------------------------------------------------------------

(1)網站主題:Green Day
(2)導覽列架構設定
http://i.imgur.com/SnCu1.jpg
(3)尺寸與架構設定
http://i.imgur.com/yAAaV.jpg

(4)主要瀏覽族群:Green Day 迷。
(5)風格設定:復古。
(6)主色調,輔助色調:紅、黑,綠。
(7)製作動機:喜歡Green Day。
(8)製作目的:讓更多人認識Green Day 。
預期效果:復古Green Day風格的雙欄網頁。



Edited 1 time(s). Last edit at 12/24/2012 07:10PM by 1015445215.
(編輯記錄)

(1)作業網址:http://mepopedia.com/~web101c/final/final-1015445240
(2).
1.製作作業的時間: 一天
2.有無遇到的問題:無
3.製作心得與感想: 很開心做完一個完整的網頁。
4.本學期於網頁設計課程上的收穫:每一次上課都吸收到很多東西,學到很多語法,
收穫很多。
-------------------------------------------------------------------------------------------------------------
(1)網站主題:少年魔法師梅林
(2)導覽列架構設定
http://i.imgur.com/SPlo6.jpg?1
(3)尺寸與架構設定
http://i.imgur.com/bkUbe.jpg?1
(4)主要瀏覽族群:喜歡看這部電視劇的人
(5)風格設定:黑灰色系
(6)主色調,輔助色調:黑色和灰白
(7)製作動機:喜歡看這部電視劇
(8)製作目的: 想讓大家了解這部英國的魔幻電視劇
預期效果: 雙欄網頁、表格製作

(8)資料蒐集分析
http://web.pts.org.tw/~web02/merlin/page.html



Edited 3 time(s). Last edit at 12/27/2012 08:33PM by 1015445240.
(編輯記錄)

(1)網站主題: 何維健
(2)導覽列架構設定 :http://sphotos-e.ak.fbcdn.net/hphotos-ak-ash4/415361_470668956302539_1440891019_o.jpg
(3)尺寸與架構設定 : http://sphotos-h.ak.fbcdn.net/hphotos-ak-prn1/521689_470669102969191_299473990_n.jpg

(4)主要瀏覽族群:喜歡他的人
(5)風格設定:簡潔
(6)主色調,紅藍黑
(7)製作動機:我喜歡他
(8)製作目的:讓更多人認識他

(1) 網站主題:青春洋溢BY2
http://mepopedia.com/~web101c/final/final-1015445206

(2) 導覽列架構設定:
http://i.imgur.com/doxEr.jpg

(3)尺寸與架構設定

http://i.imgur.com/z315f.jpg
(4)主要瀏覽族群:喜歡BY2的粉絲群
(5)風格設定: 以可愛的淡粉色系展現BY2的青春活力
(6)主色調: 紫色輔助色調:淡粉色
(7)製作動機: 很喜歡BY2
(8)製作目的: 想要更深入了解他們
預期效果: 簡單明瞭

(8)資料蒐集分析
http://mypaper.pchome.com.tw/tteerreessaa/post/1309295153
http://by2girl.pixnet.net/blog
http://blog.omy.sg/by2/
http://zh.wikipedia.org/zh-tw/%E7%99%BD%E7%B7%AF%E8%8A%AC#.E5.A7.8A.E5.A7.8AMIKO
http://weibo.com/u/1359703040



Edited 2 time(s). Last edit at 01/06/2013 08:06PM by 1015445206.
(編輯記錄)

網站主題: 雨月 あまつき
導覽列架構設定 :

尺寸與架構設定

主要瀏覽族群: 對於這部作品有興趣的人
風格設定: 神秘的江戶風格(?
主色調,輔助色調: 日本古色系列
製作動機: 因為有老婆(X....恩..是因為這作品值得推薦但卻鮮為人知...
製作目的: 希望能夠更推廣
預期效果: 充滿古日本風格的雙欄網頁

(1)作業網址: http://mepopedia.com/~web101c/final/final-1015445232
(2).
1.製作作業的時間: 兩天
2.有無遇到的問題: 不太會做封面
3.製作心得與感想: 終於做完了
4.本學期於網頁設計課程上的收穫:每一次上課都有學到東西,從一開始完全不會到現在會很多。
-
(1)網站主題: 2pm
(2)導覽列架構設定 http://i.imgur.com/TqNri.jpg
(3)尺寸與架構設定 http://i.imgur.com/EcXF3.jpg
(4)主要瀏覽族群: 想認識2pm的人
(5)風格設定:剛帶柔
(6)主色調,輔助色調: 黑+粉,灰,橘
(7)製作動機:喜歡
(8)製作目的: 讓更多人認識這團體
預期效果:有一致性

(8)資料蒐集分析
http://zh.wikipedia.org/wiki/2PM



Edited 6 time(s). Last edit at 01/07/2013 09:29AM by 1015445232.
(編輯記錄)

(1)作業網址: http://mepopedia.com/~web101c/final/final-1015445201
(2).
1.製作作業的時間: 3天以上
2.有無遇到的問題: 花很長的時間製作,要不斷的重複看講義。
3.製作心得與感想: 做完了很有成就感。
4.本學期於網頁設計課程上的收穫: 學習到很多技巧,收穫很多 :)

(1) 網站主題:Avril Lavigne
(2) 導覽列架構設定:
http://i.imgur.com/72OCc.jpg
(3)尺寸與架構設定:
http://i.imgur.com/teAkc.jpg
(4)主要瀏覽族群:喜歡Avril Lavigne 的人
(5)風格設定:個性風
(6)主色調:綠、黑、灰
(7)製作動機: 喜歡Avril Lavigne
(8)製作目的: 想要更了解她
預期效果: 完整有質感

(8)資料蒐集分析
http://zh.wikipedia.org/zh-tw/%E8%89%BE%E8%96%87%E5%85%92



Edited 4 time(s). Last edit at 01/04/2013 01:43AM by 1015445201.
(編輯記錄)

1.製作作業的時間:10X10分鐘
2.有無遇到的問題:多多多多
3.製作心得與感想:ggggggggg
4.本學期於網頁設計課程上的收穫:我不適合做網頁
http://imgur.com/IC1CB

(1)作業網址: http://mepopedia.com/~web101c/final/final-1015445234

1.製作作業的時間:2~3天
2.有無遇到的問題: 無
3.製作心得與感想: 比之前設計的看起來更有質感
4.本學期於網頁設計課程上的收穫: 學到新的技巧及設計網頁的作法很有趣

(1) 網站主題:只想告訴你 君に屆け
(2) 導覽列架構設定:
http://i.imgur.com/w6lCi.jpg
(3)尺寸與架構設定
http://i.imgur.com/sPVyt.jpg?1

(4)主要瀏覽族群: 喜歡這個動漫的人
(5)風格設定: 簡單浪漫
(6)主色調,輔助色調: 粉色、紫粉色
(7)製作動機: 我喜歡這個故事的內容和角色
(8)製作目的: 自己喜歡欣賞用
預期效果: 雙欄式網頁+雙導覽列



Edited 1 time(s). Last edit at 01/07/2013 05:14PM by a1234561018.
(編輯記錄)

(1)作業網址: http://mepopedia.com/~web101c/final/final-1015445222

1.製作作業的時間: 3天以上
2.有無遇到的問題: 花很長的時間製作,要不斷的重複看講義。
3.製作心得與感想: 做完了很有成就感。
4.本學期於網頁設計課程上的收穫: 學習到很多技巧,收穫很多 :)

(2) 導覽列架構設定:

導覽列架構設定 :
http://img96.imageshack.us/img96/8797/90191729.jpg

尺寸與架構設定 :
http://img404.imageshack.us/img404/5820/33643229.jpg
(4)主要瀏覽族群: 喜歡音樂,熱愛搖滾,狂熱份子

(5)風格設定:神秘和低調的熱情

(6)主色調,輔助色調: 神秘黑.熱情紅.酷帥白

(7)製作動機: 最熟也蠻喜歡的外國歌手

(8)製作目的: 順便多了解她,也能對網頁更上手

預期效果:老師教的學以致用!

(8)資料蒐集分析 :老師的範例



Edited 1 time(s). Last edit at 01/07/2013 11:42AM by 1015445222.
(編輯記錄)

(1)作業網址: http://mepopedia.com/~web101c/final/final-1015445245
(2).
1.製作作業的時間: 快6天
2.有無遇到的問題: 每個頁面做到最後都會變得不一樣
3.製作心得與感想: 做完很開心,很有成就感
4.本學期於網頁設計課程上的收穫:很大的收穫呦!!! 學會了很多 ,只是有點可惜的事,下學期沒有了 > 3 <


(1) 網站主題:噗噗熊維尼

(2) 導覽列架構設定:

http://sphotos-c.ak.fbcdn.net/hphotos-ak-ash3/577977_141380269348363_1858532821_n.jpg

(3) 尺寸與架構設定:

http://sphotos-d.ak.fbcdn.net/hphotos-ak-ash3/602693_141380362681687_910752981_n.jpg

(4)主要瀏覽族群: 媽媽們或是喜愛維尼的紛絲

(5)風格設定: 簡單的色塊表現出可愛

(6)主色調,輔助色調: 黃色 咖啡色 紅色 橘黃色

(7)製作動機:因為牠有胖胖的肚子,及短短的手腳,看起來整個超可愛的,因此我想和大家分享這個可愛的維尼

(8)製作目的:我想把我對牠的了解和喜愛和大家分享,讓大家都能更進一步的認識牠

預期效果: 一個充滿可愛維尼介紹的雙欄網頁

(9)資料蒐集分析

http://www.pooh-country.co.uk/index.php



Edited 1 time(s). Last edit at 01/07/2013 12:17PM by 1015445245.
(編輯記錄)

(1)網站主題: happy tree friends
(2)導覽列架構設定 (上傳不了....)
(3)尺寸與架構設定 (上傳不了....)
(4)主要瀏覽族群: 青少年族群
(5)風格設定: 粉嫩對比色可愛的感覺
(6)主色調,輔助色調: 粉嫩調色系
(7)製作動機: happy tree friends是我的童年
(8)製作目的: 想讓大家知道happy tree friends
預期效果: 雖然是血腥的動畫卡通可是以可愛風格來呈現

(8)資料蒐集分析http://www.mondomedia.com/shows/happytreefriends/

(1)作業網址: http://mepopedia.com/~web101c/final/final-1015445207

(2).
1.製作作業的時間: 3天
2.有無遇到的問題: Dw我都沒辦法灌在我的電腦.所以我都要跑到圖書館阿!!!
問題一堆!!!用完都沒力了...
3.製作心得與感想: 終於做完期末了!!!雖然有成就感.但超累的阿!!!!
4.本學期於網頁設計課程上的收穫:
學會Dw軟體也學習到如何完成自己的網頁.收或蠻多的wwww

(1)網站主題: 芋園柚子
(2)導覽列架構設定
http://i.imgur.com/uOBPZ.jpg

(3)尺寸與架構設定
http://i.imgur.com/lfwiV.jpg
(4)主要瀏覽族群: 會看實況團體的人
(5)風格設定: 活潑.簡約
(6)主色調,輔助色調: 黃色調.黑白色調
(7)製作動機: 因為很喜歡這個團體XDDDD
(8)製作目的: 讓別人更加了解這個團體~~
預期效果: 簡約方便的網頁設計

(8)資料蒐集分析

http://www.youtube.com/user/charlie615119
https://www.facebook.com/oeurXstudio
https://www.facebook.com/SLIP.FALL2008



Edited 3 time(s). Last edit at 01/04/2013 12:35AM by FF.
(編輯記錄)

(1)作業網址: http://mepopedia.com/~web101c/final/final-1015445231
(2).
1.製作作業的時間: 很久
2.有無遇到的問題: 好像有
3.製作心得與感想: .
4.本學期於網頁設計課程上的收穫: .

(1)作業網址:
http://mepopedia.com/~web101c/final/final-1015445202
(2)
1.製作作業的時間:三天
2.有無遇到的問題:連結一直做不好
3.製作心得與感想:非常有成就感
4.本學期於網頁設計課程上的收穫:
每次上課的時候都一頭霧水
可是到了真正在操作的過程中
卻是一次比一次還要得心應手

(1)網站主題:魔髮奇緣
(2)導覽列架構設定
http://i.imgur.com/ZiPzo.jpg
(3)尺寸與架構設定
http://i.imgur.com/kn0No.png
(4)主要瀏覽族群: 時時關心電影動態的影迷
(5)風格設定:簡單
(6)主色調,黑白兩色
(7)製作動機:對這部卡通動畫很有興趣
(8)製作目的:想要讓自己喜歡的東西經由自己的手創作出來
預期效果:簡單大方清楚的網頁設計
(8)資料蒐集分析: http://tw.movie.yahoo.com/movieinfo_main.html/id=3653

(1)作業網址: http://mepopedia.com/~web101c/final/final-1015445255
(2)
1.製作作業的時間: 很久
2.有無遇到的問題: 好像很多
3.製作心得與感想: 複雜的網頁
4.本學期於網頁設計課程上的收穫: 學到如何趕作業

(1)作業網址: http://mepopedia.com/~web101c/final/final-1015445241
(2).
1.製作作業的時間: 非常久
2.有無遇到的問題: 有
3.製作心得與感想: 做出來很累很高興
4.本學期於網頁設計課程上的收穫: 我終能自己做出網頁了!!!!!!!!!!!!!
(1)網站主題: 水草造景
(2)導覽列架構設定
http://mepopedia.com/~web101c/hw01/hw01-1015445241/1015445241f01.jpg

(4)主要瀏覽族群:喜歡水族的人
(5)風格設定:簡單
(6)主色調,輔助色調: 青色 綠色
(7)製作動機: 喜歡水草
(8)製作目的: 讓大家認識水草
預期效果:有設計感

(8)資料蒐集分析
http://www.tfhmagazine.com/blogs/2011/11/01/the-creation-of-a-hardscape-only-aquascape/

http://ibac.eu/listr.php?lang=bg

http://www.tfhmagazine.com/resources/web-extras/ada/ada-2009-winners/

http://zh.wikipedia.org/wiki/Wikipedia:%E9%A6%96%E9%A1%B5

(1)作業網址: http://mepopedia.com/~web101c/final/final-1015445261/
1.製作作業的時間: 兩天
2.有無遇到的問題: 表格製作問題(已解決)
3.製作心得與感想: 這次製作的較保守沒有其他變化,下次應該力求清新,做出突破,
4.本學期於網頁設計課程上的收穫: 學到很多語法和網頁設計
的眉眉角角

(1) 作業網址:

http://mepopedia.com/~web101c/final/final-1015445263/


(2).
 1. 製作作業的時間:三天
 2. 有無遇到的問題:因為困難所以做得很簡單
 3. 製作心得與感想:熱衷於愛迪達是我的榮幸
4.本學期於網頁設計課程上的收穫:DW真不錯

網站主題:adidas
導覽列架構設定

http://i.imgur.com/3b4nr.png

尺寸與架構設定
http://i.imgur.com/dgjHn.png

(4)主要瀏覽族群:給喜歡愛迪達的朋友
(5)風格設定: 簡單
(6)主色調,輔助色調: 黑+綠
(7)製作動機: 延續期中作業
(8)製作目的: 喜歡愛迪達所以有這個動機
預期效果: 其實做得很簡單 可以再更好

(1) 作業網址:

http://mepopedia.com/~web101c/final/final-1015445219

(2).
 1. 製作作業的時間:兩天
 2. 有無遇到的問題:不小心改錯一直重來
 3. 製作心得與感想:邏輯真的很重要,做完真的是太開心了smileys with beer

4.本學期於網頁設計課程上的收穫:原來製作一個網頁要費盡心思,真的好開心有學到東西smileys with beer

(1)網站主題:飛哥與小佛

(2)導覽列架構設定
http://i.imgur.com/EsQD8.jpg

(3)尺寸與架構設定
http://i.imgur.com/V4J9s.jpg

(4)主要瀏覽族群: 喜歡飛哥與小佛的有為青年
(5)風格設定:簡單明瞭
(6)主色調,輔助色調:深藍色,淺藍紫色
(7)製作動機:要把所有學到的放進去作業裡
(8)製作目的:太喜歡飛哥與小佛了spinning smiley sticking its tongue out

(8)資料蒐集分析:
http://phineasandferb.wikia.com/wiki/Phineas_and_Ferb_Wiki
飛哥與小佛百科全書



Edited 1 time(s). Last edit at 01/07/2013 12:20PM by stying411.
(編輯記錄)

(1) 作業網址:http://mepopedia.com/~web101c/final/final-1015445236/

1)網站主題:coldplay
(2)導覽列架構設定
http://i.imgur.com/Iwy7q.jpg?1
(3)尺寸與架構設定
http://i.imgur.com/0YJUa.jpg?1
(4)主要瀏覽族群:聽音樂的人
(5)風格設定: 暗暗的感覺
(6)主色調,輔助色調:深灰、淺灰、黑色
(7)製作動機:因為很多人聽音樂
(8)製作目的:多聽他們的音樂
預期效果: 搖滾設計風格網頁
(8)資料蒐集分析

http://www.coldplay.com/

(1) 作業網址:
http://mepopedia.com/~web101c/final/final-1015445212
(2).
 1. 製作作業的時間:兩天
 2. 有無遇到的問題:有點複雜
 3. 製作心得與感想:終於做完了smiling bouncing smiley
4.本學期於網頁設計課程上的收穫:原來如此spinning smiley sticking its tongue out

-----------------------------------------------------------------------------------------------------------

(1)網站主題: 玩具總動員
(2)導覽列架構設定
http://i.imgur.com/gHF5K.jpg
(3)尺寸與架構設定
http://i.imgur.com/faZQv.jpg
(4)主要瀏覽族群: 喜歡玩具總動員的人
(5)風格設定:兒童玩具
(6)主色調,輔助色調:嬰兒色
(7)製作動機:想介紹玩具給大家
(8)製作目的:讓大家多了解玩具總動員
預期效果:簡單明瞭

(8)資料蒐集分析:
http://zh.wikipedia.org/wiki/%E7%8E%A9%E5%85%B7%E7%B8%BD%E5%8B%95%E5%93%A13

(1) 作業網址:
http://mepopedia.com/~web101c/final/final-1015445257/

(2).
 1. 製作作業的時間:一天
 2. 有無遇到的問題:表格級影片
 3. 製作心得與感想: 一開始很挫折,但是越做越開心越上手,希望能夠越來越好!!
4.本學期於網頁設計課程上的收穫:讓我學到如何去架構一個網站,儘管現在沒有很厲害,但以後一定能更好

(1)網站主題:棉花糖
(2)導覽列架構設定
(3)尺寸與架構設定
http://i.imgur.com/J2CaO.jpg
(4)主要瀏覽族群: 想認識棉花糖的人
(5)風格設定:簡約
(6)主色調,輔助色調:粉紅+黃色+藍綠色
(7)製作動機:喜歡棉花糖
(8)製作目的: 讓更多人了解棉花糖

(9)資料蒐集分析: http://zh.wikipedia.org/wiki/%E6%A3%89%E8%8A%B1%E7%B3%96_(%E7%BB%84%E5%90%88)

(1)作業網址: http://mepopedia.com/~web101c/final/final-1015445235

(2).
1.製作作業的時間: 1天
2.有無遇到的問題:無
3.製作心得與感想: 做完期末,心理放心很多
4.本學期於網頁設計課程上的收穫:
學會更簡單明瞭的使用Dw軟體也學到如何製作網頁

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

http://imgur.com/edit

(3)尺寸與架構設定

http://imgur.com/edit

(4)主要瀏覽族群: 喜歡Vivienne Westwood
(5)風格設定: 時尚.簡約
(6)主色調,輔助色調: 紫色調.白色調 膚色調
(7)製作動機: 因為很喜歡Vivienne Westwood
(8)製作目的: 讓更多人喜歡Vivienne Westwood
預期效果: 簡約時尚的網頁設計

(1)作業網址:
http://mepopedia.com/~web101c/final/final-1015445224
(2).
1.製作作業的時間:3天
2.有無遇到的問題:錨點
3.製作心得與感想:雖然有遇到問題但整體算順暢,十分有成就!
4.本學期於網頁設計課程上的收穫:雖然前面都沒在上課,最後濃縮精華還是趕了出來,真的十分有成就感,很滿意。
老師我雖然拖到最後才趕出來的但內容真的不馬虎唷

(1)網站主題:
(2)導覽列架構設定
http://imgur.com/5g3qU
(3)尺寸與架構設定 \
http://imgur.com/iUTOd
(4)主要瀏覽族群: 喜歡The script 愛好音樂的人
(5)風格設定: 簡約
(6)主色調,輔助色調: 黑白,米白
(7)製作動機: 因為近期中了他們的毒
(8)製作目的: 好樂團想要分享給更多愛好音樂愛好搖滾樂的人
預期效果: 將重點集結起來,用自我風格重新詮釋

(8)資料蒐集分析
http://zh.wikipedia.org/wiki/The_Script
http://tw.kkbox.com/artist/5XQVwqdO3AB0NSB0F07WE08J-index-1.html

(1)作業網址:
http://mepopedia.com/~web101c/final/final-1015445248
(2)
1.製作作業的時間:一天
2.有無遇到的問題: 連結上會有小失誤
3.製作心得與感想:終於完成了!很開心
4.本學期於網頁設計課程上的收穫:
從一開始不懂,逐漸弄懂了該怎麼做!
我覺得就有小成就感。

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

(3)尺寸與架構設定

(4)主要瀏覽族群: 喜歡蛋堡的FANS
(5)風格設定:簡單
(6)主色調,淡藍與藍
(7)製作動機:我從四年前開始喜歡他
(8)製作目的:就是一種成就感

(8)資料蒐集分析: http://www.facebook.com/Softlipa?fref=ts

http://mepopedia.com/~web101c/final/final-1015445210

(1)網站主題:探險活寶
(2)主要瀏覽族群: 卡通愛好者
(3)風格設定: 活潑及角色顏色
(4)主色調,輔助色調: 藍色
(5)製作動機: 最近最愛的卡通
(6)製作目的: 想讓大家更了解他
預期效果:很有成就感喔

(7)資料蒐集分析http://www.cartoonnetwork.com.tw/minisite/adventure_time/index.php

作業網址: http://mepopedia.com/~web101c/final/final-1015445251

1)網站主題:梁靜茹


(4)主要瀏覽族群:喜歡偶像的人
(5)風格設定: 柔和的感覺
(6)主色調,粉色調 柔色調
(7)製作動機:因為喜歡靜茹
(8)製作目的:希望大家多多認識她(雖然結婚了 我心扔不變)
預期效果: 符合情歌天后的感覺
(8)資料蒐集分析
http://weibo.com/jingruqingge

(1) 作業網址:

http://mepopedia.com/~web101c/final/final-1015445249
(2).
 1. 製作作業的時間:2天 
2. 有無遇到的問題:
 3. 製作心得與感想:感謝身邊幫助我完成作業的人
4.本學期於網頁設計課程上的收穫: 學會了設計網頁的軟體

作業網址: http://mepopedia.com/~web101c/final/final-1015445226

1)網站主題: ELMO
(2)導覽列架構設定
http://imgur.com/Y6FiK

(3)尺寸與架構設定
http://imgur.com/p9CHC

(4)主要瀏覽族群:喜歡ELMO的人
(5)風格設定:可愛活潑的感覺
(6)主色調,輔助色調:紅、黃、水藍
(7)製作動機:因為可愛
(8)製作目的:讓喜歡的人能了解
預期效果: 可愛有設計感網頁
(8)資料蒐集分析
http://zh.wikipedia.org/wiki/%E6%88%B4%E5%AE%B6%E6%98%80

網頁做好,style還在,可是網頁無法顯示
說我的style不見之後就用不好耶



Edited 1 time(s). Last edit at 01/10/2013 11:53PM by 1015445226.
(編輯記錄)

MEPOERs said:
JinJin: 你的檔案沒有傳完整再檢查一下喔!裡面只有兩張圖檔