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

Advanced

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

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

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





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/~web104-2b/final/final-10354452XX

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

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



2.全部完成後上傳至FTP

3.依進度回覆本篇文章




5. 回覆說明



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


前置作業(12/24)
(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?2023,68211
並將網站分析於12/17前回覆於前述網址


◎相關網站列表與分析:





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



6. 學長姐作品參考


-

(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. 其他作品


作業參考
(1) http://mepopedia.com/~web100b/final/final-1001445022/
(2) http://mepopedia.com/~web100b/final/final-1001445042/
(3) http://mepopedia.com/~web101c/final/final-1015445243/
http://mepopedia.com/~web101c/final/final-1015445243-1/
(4) http://mepopedia.com/~web103-a/final/final-1025445124/
(5) http://mepopedia.com/~web103-a/final/final-1025445055/
(6) http://mepopedia.com/~web103-a/final/final-1025445001/
(7) http://mepopedia.com/~web103-a/final/final-1025445040/
(8) http://mepopedia.com/~web103-a/final/final-1025445043/
(9) http://mepopedia.com/~web103-a/final/final-1005445193/
(10) http://mepopedia.com/~web103-a/final/final-1025445070/

http://mepopedia.com/forum/read.php?2023,67943




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

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

http://youtu.be/JhWaXP7wCrI





上傳圖片可使用
http://imgur.com/

若寬度太寬,請使用以下語法,將圖片網址帶入:
<img width="100%" src="圖片網址" border="0">


Edited 1 time(s). Last edit at 12/17/2015 08:29AM by JinJin.
(編輯記錄)

Attachments:
開啟 | 下載 - ex-finallayout.ai (1.15 MB)
(1)作業網址: http://mepopedia.com/~web104-2b/final/final-1015448146
(2).
1.製作作業的時間: 約5~6小時
2.有無遇到的問題: 沒有~
3.製作心得與感想: 終於完成一個完整的網頁了覺得很開心
4.本學期於網頁設計課程上的收穫: 一直都很喜歡老師這種教學方式,一個步驟一個步驟只要跟著老師做、練習就可以完成一個完整的網頁,上了一學期對於整個網站架構有些概念,軟體使用上也熟悉很多。



-----------------------前置作業----------------------------

(1)網站主題: 梵谷 van gogh
(2)導覽列架構設定
http://i.imgur.com/4dlGR9h.jpg


(4)主要瀏覽族群: 喜歡繪畫及喜歡梵谷的人
(5)風格設定: 帶點神祕
(6)主色調,輔助色調: 藍色 紫色
(7)製作動機: 本身很喜歡梵谷這個畫家
(8)製作目的: 希望讓更多人認識梵谷
預期效果: 希望可以用網頁設計的成果吸引人來看 進而認識梵谷這個畫家~



Edited 1 time(s). Last edit at 01/03/2016 11:41PM by 1015448146.
(編輯記錄)

(1)網站主題:JORDAN傳奇
(2)導覽列架構設定:
http://imgur.com/EQo7S5s
(4)風格設定:用簡單的配色跟內容做結合
(5)主色調,輔助色調:以深藍色、黑色、白色
(6)製作動機:因為本身很喜歡鞋子,也很喜歡JORDAN這個牌子所以想深入介紹他。
(7)製作目的:想讓更多人了解JORDAN這個牌子的鞋子。

預期效果:可以讓觀看者能更深入了解JORDAN

(1)作業網址:http://mepopedia.com/~web104-2b/final/final-1035445098
1.製作作業的時間:總共8小時左右
2.有無遇到的問題:無
3.製作心得與感想:與期中作業相比感覺網站的成熟度增加不少
4.本學期於網頁設計課程上的收穫:從對網頁設計一竅不通到能做出一個網站,學習到很多。

(1)網站主題:JORDAN傳奇
(2)導覽列架構設定:
http://imgur.com/EQo7S5s
(4)風格設定:用簡單的配色跟內容做結合
(5)主色調,輔助色調:以深藍色、黑色、白色
(6)製作動機:因為本身很喜歡鞋子,也很喜歡JORDAN這個牌子所以想深入介紹他。
(7)製作目的:想讓更多人了解JORDAN這個牌子的鞋子。

預期效果:可以讓觀看者能更深入了解JORDAN

(1)作業網址:http://mepopedia.com/~web104-2b/final/final-1035445098
1.製作作業的時間:總共8小時左右
2.有無遇到的問題:無
3.製作心得與感想:與期中作業相比感覺網站的成熟度增加不少
4.本學期於網頁設計課程上的收穫:從對網頁設計一竅不通到能作出一個網站,學習到很多。

(1)網站主題:小王子
(2)導覽列架構設定
http://imgur.com/edit


(4)主要瀏覽族群: 喜歡小王子的人
(5)風格設定: 溫暖的感覺
(6)主色調,輔助色調:大地色,淺黃色
(7)製作動機: 小王子
(8)製作目的: 小王子的故事很溫暖
預期效果:希望大家會越來越喜歡她的溫暖故事


(1)作業網址:http://mepopedia.com/~web104-2b/final/final-1035445011/
1.製作作業的時間: 4天
2.有無遇到的問題: 沒有
3.製作心得與感想: 這次完成了一個完整的網頁,有種成就感
4.本學期於網頁設計課程上的收穫: 因為以前沒有碰過如何做網頁的東西,所以剛開始的時候很容易就搞亂,
但後來越來越上手,雖然後面的語法都越來越複雜很頭痛,不過還是慢慢地去瞭解,甚至做完自己做的網頁,真的很有成就感。



Edited 1 time(s). Last edit at 01/05/2016 05:37PM by wl02789213.
(編輯記錄)

(1)網站主題:維多利亞的秘密
(2)導覽列架構設定:
View post on imgur.com

(4)風格設定:整體營造簡單的風格。
(5)主色調,輔助色調:黑色為底,灰色和粉紅色為配色。
(6)製作動機:喜歡他們的時尚走秀,和設計師設計的風格。
(7)製作目的:因為喜歡所以想做。

預期效果:讓更多人知道這個品牌

(1)作業網址:http://mepopedia.com/~web104-2b/final/final-1035445077
1.製作作業的時間:3天
2.有無遇到的問題:語法存錯,只好重新來過,但是也成功完成。
3.製作心得與感想:做完真的很有成就感,雖然製作過程會很生氣。
4.本學期於網頁設計課程上的收穫:學習到很多原本不會的東西。



Edited 1 time(s). Last edit at 01/06/2016 04:35PM by 吳寶蓉.
(編輯記錄)

(1)網站主題:LIFE OF PI
(2)導覽列架構設定
(待上傳)
(4)主要瀏覽族群:電影解析
(5)風格設定:老虎、少年pi、奇幻
(6)主色調,輔助色調:以暖黃色為主
(7)製作動機:我很喜歡看奇幻類的電影,這是一部得了許多獎項令人引以為傲的國片。
(8)製作目的:讓其他人更加了解這部電影。
預期效果:告訴大家台灣也是可以拍出這麼屌的電影!


(1)作業網址:http://mepopedia.com/~web104-2b/final/final-1035445050(%E5%BE%85%E6%94%B9)/
1.製作作業的時間:好多天
2.有無遇到的問題:突如其來的高燒,讓我沒有思緒沒有體力在期限內完成這個作業,真的很抱歉。
3.製作心得與感想:以前高中快畢業時,老師只有稍微傳授了一些DW初階的內容給大家,在大學除了使用熟到焦的AI和PS之外,
又學了一套新軟體~
4.本學期於網頁設計課程上的收穫:這堂課在早八,我常常爬不起來沒上到囧,不過還好有老師詳細的影片教學,讓我有補救的機會~~~

View post on imgur.com



(1) 作業網址:http://mepopedia.com/~web104-2b/final/final-1035445002
(2).
 1. 製作作業的時間:一個禮拜
 2. 有無遇到的問題:左邊的色塊會多跑到右邊上面的
 3. 製作心得與感想:做完這著網頁之後非常的有成就感!原來製作雙欄的網頁會那麼辛苦!
做完之後眼睛都快脫窗了!

(4)主要瀏覽族群: 想了解,菲利浦‧史塔克的人
(5)風格設定: 讓網頁有對比的效果
(6)主色調,輔助色調: 灰色 白色 橙色
(7)製作動機: 本身很喜歡菲利浦‧史塔克這個設計師
(8)製作目的: 希望讓更多人認識菲利浦‧史塔克
預期效果: 希望可以用網頁設計來展現他的風格 進而認識菲利浦‧史塔克這個設計師。



Edited 3 time(s). Last edit at 01/04/2016 07:50PM by 1034445002.
(編輯記錄)

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

(4)風格設定:用橘色為主色調
(5)主色調,白色
(6)製作動機:我很喜歡七龍珠這個卡通,是個經典
(7)製作目的:希望大家也去看看這個經典作品

預期效果:大家一定會愛上

(1)作業網址:http://mepopedia.com/~web104-2b/final/final-1035445017
1.製作作業的時間:8小時左右
2.有無遇到的問題:問題很多但是朋友和老師的網頁指導都解決了
3.製作心得與感想:總覺得對於做網頁有更完整的了解了
4.本學期於網頁設計課程上的收穫:老師的用心看的見



Edited 1 time(s). Last edit at 01/07/2016 08:44AM by 1035445017.
(編輯記錄)

(1)網站主題:Minecraft當個創世神
(2)導覽列架構設定:

http://imgur.com/2OqQ9Fd
(4)風格設定:以Minecraft的風格簡單化
(5)主色調,輔助色調:以草地色為主.白色
(6)製作動機:喜歡這款遊戲, 想為這款遊戲製作一個網頁介紹。
(7)製作目的:讓自己有成就感,並且分享介紹這款不錯的遊戲。

預期效果:有想要的雙欄式網頁

(1)作業網址:http://mepopedia.com/~web104-2b/final/final-1035445209 (請點動圖進入)
(2)
1.製作作業的時間:6小時左右
2.有無遇到的問題:無
3.製作心得與感想:比期中作業還更有網站的感覺,越來越有挑戰性。
4.本學期於網頁設計課程上的收穫:更了解HTML和CSS的用法,並可以自己設計出一個網頁。



Edited 1 time(s). Last edit at 12/29/2015 08:17PM by fishtime.
(編輯記錄)

1035445113黃士釗

-----------------------前置作業----------------------------

(1)網站主題:楓之谷Maple Story
(2)導覽列架構設定 :

(3)主要瀏覽族群:玩過、聽過、看過楓之谷的大小朋友們
(4)風格設定: 楓之谷的畫風
(5)主色調:膚色;輔色:綠色、藍色
(6)製作動機: 相信很多人都有玩過,所以想做一下
(7)製作目的: 回想一下過去和現在的感覺
預期效果: 希望可以多被看一下



Edited 3 time(s). Last edit at 12/31/2015 08:42AM by JinJin.
(編輯記錄)

1035445218 柯惠文


-------------------完成品(1/7前) -------------------------

(1)作業網址:http://mepopedia.com/~web104-2b/final/final-1035445218
(2).
1.製作作業的時間: 我想有超過20小時
2.有無遇到的問題: 因為需要雙欄和單欄互相切換,常常遇到格子跑掉的問題。
         和我所選的腳色,資料超少,但還好最後都有解決。
3.製作心得與感想: 雖然麻煩,但很有成就感。
4.本學期於網頁設計課程上的收穫: 以前覺得網頁設計很難=工程師的工作,還以為設計科不會碰到,
                但在這學期後,我想我可以簡單應用的製作出屬於自己的網頁了。
                很喜歡這堂課,即使它在早八。                


-----------------------前置作業----------------------------

(1)網站主題: 角落生物
(2)導覽列架構設定



http://imgur.com/oOEKCGf

(4)主要瀏覽族群: 喜歡插畫和可愛東西和角落的人
(5)風格設定: 可愛溫馨庸懶的感覺
(6)主色調,輔助色調: 淡橘黃 白色
(7)製作動機: 偶然間腦中浮現之前在書局看見過他們的書
(8)製作目的: 希望讓人有療癒的感覺
預期效果: 希望可以進步自己製作網頁的技巧,順便介紹這個還不太紅
     還沒有太多人知道的角落生物給大家認識。



Edited 4 time(s). Last edit at 01/01/2016 08:58PM by 柯惠文.
(編輯記錄)

(1)作業網址:http://mepopedia.com/~web104-2b/final/final-1035445026

(2).
1.製作作業的時間:零散的十幾個小時
2.有無遇到的問題:無
3.製作心得與感想:時間幾乎都花在調整細節上
4.本學期於網頁設計課程上的收穫:接觸語法後發現網頁設計其實沒有學期初時想像的難,讓我學到上任何課程之前,不要用先入為主的觀念去面對

前置作業
(1)網站主題:Linkin Park聯合公園
(2)導覽列架構設定

(3)主要瀏覽族群:聽西洋流行音樂的人
(4)風格設定:樂團的重色風格
(5)主色調,輔助色調:主色調為藍黑,輔助色調為淺色(淺藍、淺灰、白)
(6)製作動機:覺得這個樂團不錯,想做個樂團介紹
(7)製作目的:介紹聯合公園
預期效果:是個看上去資訊明瞭的網站



Edited 1 time(s). Last edit at 01/06/2016 05:20PM by 1035445026.
(編輯記錄)

(1)作業網址: http://mepopedia.com/~web104-2b/final/final-1025445086
(2).
1.製作作業的時間: 25個小時
2.有無遇到的問題: 有,雙欄的部分較為複雜,設定了蠻多次才成功
3.製作心得與感想: 雖然有些複雜,不過再作業裡學習到許多語法的應用,也和網頁比較熟悉了
4.本學期於網頁設計課程上的收穫:努力學習和課後複習真得很重要,這樣才能越來越熟悉網頁


(1)網站主題:About time
(2)導覽列架構設定
(4)主要瀏覽族群:喜歡真愛美一天這部電影的人
(5)風格設定:質感
(6)主色調,輔助色調:咖啡色、墨綠色為主
(7)製作動機:因為自己非常喜歡這部電影
(8)製作目的:

前置作業
網站主題:神祕小鎮大冒險(Gravity Falls)
導覽列架構設定-

http://i.imgur.com/bp3JnAR.jpg?1

主要瀏覽族群:喜歡動畫或美式畫風的人。
風格設定: 豐富的色彩。
主色調,輔助色調:澄色系,偏黃色。
製作動機: 喜歡美式畫風的動畫,且偏好神秘或有意象的。
製作目的:讓人了解這部動畫,且這部動畫在台灣有播出。
-----------------------期末作業----------------------------

1).作業網址

http://mepopedia.com/~web104-2b/final/final-1035445107/

(2).請回答以下問題:
1.製作作業的時間: 6個小時
2.有無遇到的問題: 有,上課再問你
3.製作心得與感想: 有點心力憔悴
4.本學期於網頁設計課程上的收穫: 有喚起一些回憶,至今不至於會放棄,我會再努力。



Edited 2 time(s). Last edit at 12/31/2015 08:55AM by ttn0910.
(編輯記錄)

-----------------------前置作業----------------------------

(1)網站主題: 魔物獵人
(2)導覽列架構設定


(4)主要瀏覽族群: 魔物獵人新手玩家
(5)風格設定: 暖色系
(6)主色調,輔助色調: 暖色系,即便有綠色藍色都是飽和度較低的
(7)製作動機: 本身是魔物獵人的死忠粉絲,可是剛入坑沒有人帶的時候玩得很糟糕很不知所措
(8)製作目的: 一個讓新手能跟著那步驟慢慢玩的引導網站
預期效果: 希望可以讓人們對這個經典的遊戲有更多認識,也不會在玩的時候雞手鴨腳的




-----------------------期末作業----------------------------

1).作業網址
http://mepopedia.com/~web104-2b/final/final-1045245002/

(2).請回答以下問題:
1.製作作業的時間: 4個小時
2.有無遇到的問題: 沒有
3.製作心得與感想: 終於將網頁完成了,除了有成功感之外,也學到了不少之前在香港沒教過的語法,可以自己選題目也讓我更有興趣與耐性去完成作業。
4.本學期於網頁設計課程上的收穫: 比從前學到的更多,講議很清楚,所以課後要回顧和學習也非常方便,也能勾起學習更多的興趣。
               



Edited 1 time(s). Last edit at 01/04/2016 10:38PM by 1045245002.
(編輯記錄)

1035445222

(1)網站主題:Minions
(2)導覽列架構設定
http://i.imgur.com/ph5adHP.png

(4)主要瀏覽族群:看過Minions這部電影的人
(5)風格設定: 利用主角人物身上的顏色 黃與藍來搭配
(6)主色調,輔助色調:橘黃 藍
(7)製作動機:因為喜歡Minions所以想藉此可以更了解他們
(8)製作目的:讓對他們也有興趣的人可以更認識
預期效果: 希望可以看出自己進步多少,也希望讓大家對他們更認識更熟悉

(1)作業網址;http://mepopedia.com/~web104-2b/final/final-1035445222
1.製作作業的時間:5個多小時
2.有無遇到的問題:無
3.製作心得與感想:與期中比起來有比較複雜一點但是老師的講義很有幫助。
4.本學期於網頁設計課程上的收穫:一開始完全沒接觸過這種課程,一開始覺得很複雜,但是學到後面覺得很有趣也有成就感。



Edited 2 time(s). Last edit at 01/07/2016 04:57PM by yung yi.
(編輯記錄)

(1)作業網址: http://mepopedia.com/~web104-2b/final/final-1035445068

(2)
1.製作作業的時間:12小時

2.有無遇到的問題: 無
3.製作心得與感想: 覺得有點難

4.本學期於網頁設計課程上的收穫:學會了Dreamweav,能夠自己設計一個網頁很棒。

-----------------------前置作業----------------------------

(1)網站主題:小熊維尼歷險記
(2)導覽列架構設定
http://i.imgur.com/f1gsZZ9.jpg

(4)主要瀏覽族群:喜歡小熊維尼的人
(5)風格設定:簡單風格
(6)主色調,輔助色調:以圖片的大多色為配色風格。
(7)製作動機:因為你歡小熊維尼
(8)製作目的:想讓更多人喜歡小熊維尼
預期效果: 還可以



Edited 2 time(s). Last edit at 01/06/2016 10:14PM by _SHUAN.
(編輯記錄)

1035445185 徐于庭
(老師我不小心回應到兩篇一樣的文章了,不會刪SORRY)confused smiley

(1)作業網址: http://mepopedia.com/~web104-2b/final/final-1035445185

(2)
1.製作作業的時間:12小時

2.有無遇到的問題: 有,紀萩小老師都會幫我解決難題 很感謝她 spinning smiley sticking its tongue out

3.製作心得與感想: 做完全部蠻有成就感的

4.本學期於網頁設計課程上的收穫:老師上課都很認真的在講解,也學習到了很多
以前沒有接觸過網頁設計,現在能自己設立一個網頁了,覺得很開心很有成就,希望以後能更進步



-----------------------前置作業----------------------------

(1)網站主題: 櫻桃小丸子
(2)導覽列架構設定
http://i.imgur.com/YNvXh6k.jpg


(4)主要瀏覽族群: 喜歡櫻桃小丸子的觀眾朋友們
(5)風格設定:使用可愛的粉紅色和一些柔和的顏色
(6)主色調,輔助色調: 粉紅色,白色
(7)製作動機: 超喜歡櫻桃小丸子的,覺得她很可愛
(8)製作目的: 希望做了這個網頁能讓更多人跟我一樣喜歡櫻桃小丸子
預期效果:覺得OK



Edited 3 time(s). Last edit at 01/06/2016 05:34PM by 1035445185 徐于庭.
(編輯記錄)

完成品:
(1) 作業網址: http://mepopedia.com/~web104-2b/final/final-1035445158
(2)
1.製作作業的時間:大概10個小時。
2.有無遇到的問題:目前無遇到問題。
3.製作心得與感想:學會了雙欄的網頁設計語法,很有成就感,在自己摸索的過程當中越來越知道語法的概念。
4.本學期於網頁設計課程上的收穫: 在這學期的基本網頁設計課程當中,真的學習到很多概念與知識,
是不同與以往高中學習到的東西,在課堂教學的過程中,老師很細心的教學,讓我收穫不少!

前置作業 :
(1)網站主題:設計師介紹
(2)導覽列架構設定:



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

(4)主要瀏覽族群:未來想朝設計發展的人
(5)風格設定: 依照設計師的專長與圖片的顏色來美化網頁。
(6)主色調,輔助色調:主色調以褐色系為主,輔助色調以米白色做基底 。
(7)製作動機:無意間看到介紹古又文設計師的報導,覺得他的故事與人生經驗都很值得去思考。
(8)製作目的:希望讓喜歡設計的人看到他的故事後,能夠更有信心更富有熱情的去享受做設計。
預期效果:希望做出符合古又文風格的網頁,運用小巧思讓網頁變得更活潑一點。



Edited 4 time(s). Last edit at 01/07/2016 01:25AM by 1035445158.
(編輯記錄)

(1)作業網址: http://mepopedia.com/~web104-2b/final/final-1035445065
(2).
1.製作作業的時間: 時間沒有計算
2.有無遇到的問題: 沒有看講義後能大概做出來
3.製作心得與感想: 過程中很悶~完成後很爽~
4.本學期於網頁設計課程上的收穫: 挺累得但知道如何看懂一些語法


(1)網站主題:魍魎之匣
(2)導覽列架構設定
http://i.imgur.com/d4T1K32.jpg?1


(4)主要瀏覽族群:喜歡/懸疑/驚悚/獵奇的人或許會對這部動漫有興趣
(5)風格設定: 主要以黑色調為主
(6)主色調,輔助色調:主黑,輔橘
(7)製作動機: 在想主題時,想介紹動漫給他人,這部裡面帶有些科技的幻想以及讓人驚訝腳色關係
(8)製作目的: 這部本身懸疑/驚悚所以衝擊力挺震撼的
預期效果: 還在修正

1035445065



Edited 1 time(s). Last edit at 01/07/2016 05:24AM by co0x.
(編輯記錄)

完成品:
(1) 作業網址: http://mepopedia.com/~web104-2b/final/final-1035445032
(2) 1.製作作業的時間:大約有30個小時。
2.有無遇到的問題:目前無遇到問題。
3.製作心得與感想:一開始覺得雙欄的網頁語法好難,每個禮拜慢慢的跟著老師的進度走,到後面覺得好像還可以,
做完我覺得有無比的成就感,好開心哦!
4.本學期於網頁設計課程上的收穫:高中有學過一次切割圖片的,一開始覺得網頁設計不難,語法越來越多很容易搞混,
還記得有一次少了}全部都跑不出來,我覺得這學期網頁課收獲蠻多的,基礎的語法有概念了。

前置作業
(1)網站主題:LEGO
(2)導覽列架構設定
http://i.imgur.com/hFn6r80.jpg
(3)主要瀏覽族群:喜歡LEGO玩具系列或是想認識LEGO的人
(4)風格設定:樂高的基本配色
(5)主色調,輔助色調:主色調為紅藍,白色為底,輔助色調為綠色
(6)製作動機:喜歡LEGO積木,想做跟期中不同的主題,挑戰自己
(7)製作目的:介紹LEGO、表達LEGO很好玩很有趣
預期效果:能夠讓人想多看好幾眼的網站

1035445032



Edited 7 time(s). Last edit at 01/07/2016 04:44AM by yii_.
(編輯記錄)

(1)網站主題:草間彌生
(2)導覽列架構設定 :http://i.imgur.com/Hx1PaaN.jpg?1
(3)主要瀏覽族群:喜歡草間彌生的作品的人
(5)主色調:紅 輔助色: 黃 黑
(6)製作動機: 喜歡他的風格與作品
(7)製作目的:喜歡他的風格與作品
預期效果: 希望大家能多了解他


(1)作業網址:http://mepopedia.com/~web104-2b/final/final-1035445074
1.製作作業的時間:
20 小時左右
2.有無遇到的問題:
看影片解決了
3.製作心得與感想:
整個做出來很有成就感
4.本學期於網頁設計課程上的收穫:
覺得網頁設計越來越難了 這學期有些不懂得 看影片是有些明白怎製作了
也做出期末成品做完的時候 真的滿有成就感的
也很開心 下學期還有進階網頁設計 想到就怕



Edited 1 time(s). Last edit at 01/06/2016 03:23PM by 1035445074.
(編輯記錄)

前置作業
(1)網站主題:LINE
(2)導覽列架構設定
http://i.imgur.com/0oNcoWB.jpg?1
(3)主要瀏覽族群:對LINE有興趣的人
(4)風格設定:大眾都能接受的風格
(5)主色調,輔助色調:亮綠色、白色
(6)製作動機:LINE現在是生活中不可或缺的要素,
因此想要藉由這個作業更加了解LINE的背景
(7)製作目的:想要藉由這個作業更加了解LINE的背景
預期效果:更我依樣想更加認識我們每天用的APP的背景之類的



Edited 1 time(s). Last edit at 12/31/2015 08:51AM by 1035445152.
(編輯記錄)

(1)作業網址: http://mepopedia.com/~web104-2b/final/final-1035445131/
(2).
1.製作作業的時間: 20小時
2.有無遇到的問題: 很多細節都不知道
3.製作心得與感想: 雖然有點麻煩,但做完後很有成就感。
4.本學期於網頁設計課程上的收穫:以前覺得網頁設計很難,還以為會被當,
                 但在這學期後,我發現網頁很好玩,
                 很喜歡這堂課。

(1)網站主題: 星座
(2)導覽列架構設定 :
View post on imgur.com

(4)主要瀏覽族群: 喜歡看星座的人
(5)風格設定: 星座的感覺
(6)主色調,輔助色調: 以藍色為主
(7)製作動機: 因為我也喜歡看星座
(8)製作目的: 讓更多人可以理解星座
預期效果:希望可以用網頁設計來展現星座的風格



Edited 7 time(s). Last edit at 01/06/2016 01:38PM by 吳寶蓉.
(編輯記錄)

Attachments:
開啟 | 下載 - f64G4Ug.jpg (998.7 KB)
http://imgur.com/GglNP4w
(4)主要瀏覽族群: 喜愛旅行的背包客與對這個國家有興趣的人
(5)風格設定: 可愛溫馨庸懶的感覺
(6)主色調,輔助色調: 海軍藍 棗紅 淺黃色
(7)製作動機: 因為自己本身非常喜歡這個國家的風景&文化
(8)製作目的: 希望讓人多了解這個地方
預期效果: 希望可以進步自己製作網頁的技巧,藉此介紹這個大家比較少去了解的國家

完成品
(1)作業網址:http://mepopedia.com/~web104-2b/final/final-1035445104
(2).
1.製作作業的時間: 應該有一整天
2.有無遇到的問題: 無,大部分都是自己有時候少打了括號或單字,檢查後補上基本上都沒問題。
3.製作心得與感想: 這次特別在hotel-2的地方特別加了google地圖,還使用了flv方式放置影片,做完這次的作業很有成就感。
4.本學期於網頁設計課程上的收穫: 以前覺得網頁設計很難,因為以前高中都教太快了,所以都聽不懂,
                但在這學期後,我想我之後可以製作出屬於自己的網頁了。
               
  



Edited 5 time(s). Last edit at 01/05/2016 10:43PM by EN-TZU LEE.
(編輯記錄)

(1)作業網址:http://mepopedia.com/~web104-2b/final/final-1025445032
1.製作作業的時間:2個禮拜
2.有無遇到的問題:恩 很多問題,不過都是個人學習有點障礙造成.
3.製作心得與感想: 很燒腦細胞,但做出來了很有成就感.
4.本學期於網頁設計課程上的收穫:非常有收穫.



Edited 1 time(s). Last edit at 01/02/2016 09:07PM by 1025445032.
(編輯記錄)

(1)作業網址: http://mepopedia.com/~web104-2b/final/final-1035445194
(2). 1.製作作業的時間:至少一周
2.有無遇到的問題: enjoy.html的上方導覽列設定跑掉
3.製作心得與感想: 雖然過程很繁瑣,但製作完相當有成就感。表格很方便使用。
4.本學期於網頁設計課程上的收穫: 之前完全沒有學過這方面的知識,這學期課程中,我了解了網頁的基本架構和設計,Dreamweaver的使用方式,以及一些設計網頁的方法、竅門...等等,收穫良多。

前置作業
(1)網站主題: 治癒人心的pusheen
(2)導覽列架構設定

(3)尺寸與架構設定
(4)主要瀏覽族群: 任何人
(5)風格設定: 溫馨可愛
(6)主色調,輔助色調: 主-膚色/輔-淺咖啡色
(7)製作動機: 期末將近,課業壓力變重、生活也忙碌起來的時候,總感到壓抑和不愉快,想調適一下自己的精神狀態
(8)製作目的: 希望生活忙碌、壓力沉重的人們在看見此網站時能夠感到放鬆和療癒
預期效果: 可愛輕鬆的網站

(1)網站主題: The Beauty Inside
(2)導覽列架構設定
http://i.imgur.com/vqW3fOI.jpg
(4)主要瀏覽族群:喜歡看韓國電影的人
(5)風格設定: 優雅的感覺
(6)主色調,輔助色調:淡粉紅 淺紫
(7)製作動機:喜歡這部電影
(8)製作目的:想讓更堆人知道這部電影


(1)作業網址:http://mepopedia.com/~web104-2b/final/final-1035461133
1.製作作業的時間: 3天
2.有無遇到的問題: 雙欄左邊只有一小截
3.製作心得與感想: 這次的雙欄真的很有挑戰性我做了好久
4.本學期於網頁設計課程上的收穫:
在網頁設計課中學到了很多,從一開始的什麼都不會到現在可以做出一個屬於自己的網站
覺得很有成就感。對網頁設計也開始越來越感興趣了,雖然有時會做到頭很痛smiling smiley 但我還是會繼續努力的smiling smiley

(1)作業網址: http://mepopedia.com/~web104-2b/final/final-1035445014
(2).
1.製作作業的時間: 約四天
2.有無遇到的問題: 要設定得好多
3.製作心得與感想: 終於完成一個完整的網頁了覺得很開心
4.本學期於網頁設計課程上的收穫: 完成

http://mepopedia.com/~web104-2b/final/final-1035445014/01.png

-----------------------前置作業----------------------------
(1)網站主題:阿!設計
(2)導覽列架構設定

(3)主要瀏覽族群:全年齡
(4)風格設定:淡淡的感覺
(5)主色調,輔助色調:主色調淺紅,灰
(6)製作動機:想做設計相關
(7)製作目的:設計發想
預期效果:清楚明瞭

1035445014



Edited 1 time(s). Last edit at 01/07/2016 07:11PM by 藍道.
(編輯記錄)

(1)作業網址: http://mepopedia.com/~web104-2b/final/final-1035445149
(2). 1.製作作業的時間:3週
2.有無遇到的問題: 有時導覽列設定會一直跑掉
3.製作心得與感想: 雖然過程很複雜,但完成的當下蠻有成就感。
4.本學期於網頁設計課程上的收穫: 之前都沒什麼學過此課程的東西,在這學期的課程,我學會了Dreamweaver的許多操作,還有一些做網頁的技巧和設計等...


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



(4)主要瀏覽族群:對於VANS的鞋子有興趣的朋友前來參觀
(5)風格設定: 主要以紅色調為主
(6)主色調,輔助色調:主紅,輔白
(7)製作動機: 想介紹VANS這個牌子給他人,這是大眾鞋子裡我覺得平價又好搭的鞋子
(8)製作目的: 這是眾所皆知的品牌想藉由此製作來讓大家都了解此品牌
預期效果: 帥



Edited 9 time(s). Last edit at 01/06/2016 12:09AM by 1035445149.
(編輯記錄)

(1)作業網址: http://mepopedia.com/~web104-2b/final/final-1035445098
(2). 1.製作作業的時間:每週3~4小時
2.有無遇到的問題: 圖片常常位移
3.製作心得與感想:在製作的過程中很累也很麻煩,但完成後很有成就感。
4.本學期於網頁設計課程上的收穫:從對網頁設計什麼都不懂到能做出一個網站,很有收穫。
前置作業
(1)網站主題:JORDAN傳奇
(2)導覽列架構設定

(4)主要瀏覽族群:對JORDAN鞋子以及球迷有興趣可以觀看
(5)風格設定: 主要以深色調,深藍及黑色
(6)主色調,輔助色調:深藍、白色
(7)製作動機:讓想了解JORDAN的人能夠更加了解
(8)製作目的:讓觀者知道JORDAN的鞋型有多少種
預期效果: 能清楚知道網站想表達什麼



Edited 1 time(s). Last edit at 01/06/2016 12:17AM by 1035445098.
(編輯記錄)

(1)作業網址: http://mepopedia.com/~web104-2b/final/final-1035445152
(2). 1.製作作業的時間:6-7小時
2.有無遇到的問題: 虛線有時候無法貼其文字
3.製作心得與感想:完成後很有成就感。
4.本學期於網頁設計課程上的收穫:原來自己也能簡單架構出一個網站覺得很有成就感。
前置作業
(1)網站主題:LINE
(2)導覽列架構設定

(3)主要瀏覽族群:對LINE有興趣的人
(4)風格設定:大眾都能接受的風格
(5)主色調,輔助色調:亮綠色、白色
(6)製作動機:LINE現在是生活中不可或缺的要素,
因此想要藉由這個作業更加了解LINE的背景
(7)製作目的:想要藉由這個作業更加了解LINE的背景
預期效果:跟我一樣想更加認識我們每天用的APP的背景之類的

(1)網站主題:插畫家#南瓜子
(2)導覽列架構設定:
http://imgur.com/hhsSrrl
(4)風格設定:使用簡單系列的內容與配色為主。
(5)主色調,輔助色調:以粉色系列為主。
(6)製作動機:因為很喜歡插畫,平時也會關注許多的插畫家。
(7)製作目的:希望可以多了解插畫大師的作品與介紹。


(1)作業網址:http://mepopedia.com/~web104-2b/final/final-1035445200
1.製作作業的時間:1天
2.有無遇到的問題:無
3.製作心得與感想:比其中作業的網頁效果要好。
4.本學期於網頁設計課程上的收穫:原本一開始完全都搞不懂的網頁,到最後完整的做了專屬自己的網頁設計。

-------------------完成品(1/7前) -------------------------

(1)作業網址:http://mepopedia.com/~web104-2b/final/final-1035445134/
(2).
1.製作作業的時間: 超過24小時
2.有無遇到的問題: 雙欄部分的頁面要單獨設定content需要單獨重新設定,剛開始未獨立設定時,頁面會整個跑掉。
3.製作心得與感想: 雖然網頁設計需要耐心和時間,以及要特別注意細節,但是做完一個完整的網頁還是蠻開心。
4.本學期於網頁設計課程上的收穫: 一開始對網頁設計課程有許多畏難情緒,覺得網頁程式碼聽起來就十分複雜,
但是在老師的細心講解下,能夠一一克服每個難題,到後來也就比較得心應手。                


-----------------------前置作業----------------------------

(1)網站主題: Woods on fires專輯介紹
(2)導覽列架構設定
http://imgur.com/T984NX5
(3)尺寸與架構設定
http://imgur.com/RcDHX3J
(4)主要瀏覽族群: 喜歡一些小眾獨立音樂的人群
(5)風格設定: 從整張專輯的風格配色做發想
(6)主色調,輔助色調: 專輯色彩 灰色
(7)製作動機: 之前偶然聽到這張專輯中的一首音樂,覺得蠻喜歡,屬於小眾風格的獨立音樂
(8)製作目的: 希望可以分享給其他喜歡這類音樂的人
預期效果: 希望可以進步自己製作網頁的技巧,並且越來越熟練,並且能夠運用更多的設計元素
(9)資料蒐集分析
1.分析範例網站網址:http://www.dongliangchina.com/
2.網站名稱及主題:零售多品牌的創新概念店
3.主要消費族群: 追求時尚潮流并含有設計感的元素的人群
4.設計風格 簡約大方
5.色彩分析 以黑白為主呈現



Edited 1 time(s). Last edit at 01/06/2016 11:45PM by 1035445134.
(編輯記錄)

-------------------完成品(1/7前) -------------------------

(1)作業網址:http://mepopedia.com/~web104-2b/final/final-1035445059
(2)
1.製作作業的時間: 5天
2.有無遇到的問題: 雙欄一開始做不出來,格子又會亂跑
3.製作心得與感想: 有成就感!
4.本學期於網頁設計課程上的收穫: 一開始上這堂課根本聽不懂,但是經過老師慢慢地指導
才發現原來做網頁有心就能做出來了。

-----------------------前置作業----------------------------

(1)網站主題: 太陽番茄拉麵
(2)導覽列架構設定
http://i.imgur.com/wku5fBZ.jpg
http://imgur.com/CedHO18

(4)主要瀏覽族群: 喜歡插畫和可愛東西和角落的人
(5)風格設定: 番茄的顏色
(6)主色調,紅、白、橘
(7)製作動機: 自己在這間店上班
(8)製作目的: 讓大家知道這間好吃的拉麵店
預期效果: 跟我預期做出來的完全不一樣,但是經過這次的作業也讓我學到很多



Edited 2 time(s). Last edit at 01/06/2016 02:15AM by 1035445059.
(編輯記錄)

(1)作業網址:http://mepopedia.com/~web104-2b/final/final-1035445086
(2). 1.製作作業的時間:每週6小時
2.有無遇到的問題: 很多細節沒設定好 就整個跑掉
3.製作心得與感想:做得時候遇到不會真的會很不耐煩,然後整個不知所措,幸好還是有把它做出來。
4.本學期於網頁設計課程上的收穫:剛開始會蠻害怕的,因為是沒接觸過的東西,但現在做出來真的蠻有成就感的。
前置作業
(1)網站主題:Vintage改變你的生活
(2)導覽列架構設定
http://imgur.com/x8p38HW
(4)主要瀏覽族群:喜歡古著的小眾群,及文青掛等等。
(5)風格設定: 主要以復古色調,簡單卻帶有年代的歲月感。
(6)主色調,輔助色調:黑、白
(7)製作動機:讓更多人知道古著,並且愛上古著。
(8)製作目的:推廣古著給更大族群知道。
預期效果: 規劃每頁的排版。

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



風格設定: hip hop
主色調 : 黑白
製作動機:喜歡的品牌
預期效果:讓更多人知道這不同風格穿著


(1)作業網址:http://mepopedia.com/~web104-2b/final/final-1035445041/
1.製作作業的時間:好久
2.有無遇到的問題: 沒有
3.製作心得與感想: 這次完成了一個完整的網頁,有種成就感
4.本學期於網頁設計課程上的收穫:從完全部會到做完一個蠻爽的



Edited 2 time(s). Last edit at 01/06/2016 02:07PM by 1035445041.
(編輯記錄)

1035445170~
(1)網站主題:魔髮奇緣
(2)導覽列架構設定:

架構

(4)風格設定:神秘帶點華麗的公主
(5)主色調,輔助色調:主色調是紫色,補助色調是粉、藍、黃
(6)製作動機:超級愛這部迪士尼的公主電影
(7)製作目的:也想讓大家聽聽他的音樂看看他的故事~

預期效果:可以拿去跟別人炫耀我有做自己喜歡的魔髮奇緣電影的介紹網站~~

(1)作業網址:http://mepopedia.com/~web104-2b/final/final-1035445170
1.製作作業的時間:其實沒有很清楚去算自己做了多久,有分好幾天XD一天大概2個小時
2.有無遇到的問題:有一些小問題不過都解決了^^
3.製作心得與感想:感覺還不錯~不過還是有一些小細節需要再加強~
4.本學期於網頁設計課程上的收穫:一開始就覺得做網頁是超級難的任務QAQ覺得會走得很坎坷~不過老師教得很清楚還有錄影片!
真的超級好的拉XD謝謝老師~~spinning smiley sticking its tongue outspinning smiley sticking its tongue outthumbs upthumbs upthumbs up

1015445276 - 王星宇

(1).作業網址:http://mepopedia.com/~web104-2b/final/final-1015445276

(2).製作作業的時間:連續幾天幾小時
(3).有無遇到的問題:細節一直做調整,希望做得更好
(4).製作心得與感想:遇到不會的會嘗試解決,也會問問其他有相同經的人尋求協助
(5).本學期於網頁設計課程上的收穫:熟悉之後可以抓到訣竅,也可以明白架構網站需要長時間的調整與耐心

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

前置作業
(1).網站主題:DCH公司網站
(2).主要瀏覽族群:想與該公司作接洽的夥伴
(3).風格設定: 以灰色調穩重又大方、藍綠色點綴,柔和整體顏色、緩和嚴肅感
(4).主色調,輔助色調:藍綠、酒紅
(5).製作動機:使商業夥伴可以有接洽的管道
(6).製作目的:讓公司更有網路上的接洽方式
(7).預期效果: 讓公司具有商業的價值與聯繫的資訊

(1) 作業網址:http://mepopedia.com/~web104-2b/final/final-1035445137
(2).
 1. 製作作業的時間:超過二十四小時
 2. 有無遇到的問題:雙欄式的網頁一開始有點困難 後來就熟悉了
        
 3. 製作心得與感想:雙欄式的網頁真的困難重重
          但很高興我能從這樣的網頁中學會自己克服困難、解決問題
          做完之後很有成就感,很高興:)

-

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

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

http://i.imgur.com/MATbtWc.jpg
(4) 風格設定:因為是俄羅斯的先鋒品牌,充滿著很濃重的痞味和社會主義的影響,
所以用很低沉的大地色系配合主題的設定,表達gosha哥特般濃重的個人氣息。
(5) 主色調,大地色系
(6) 製作動機:
    平時就喜歡一些街頭品牌和時裝設計
(7) 製作目的:讓更多人了解gosha這個新進俄羅斯品牌,因為感覺在今年這個牌子
有趕超superme的趨勢

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

1035445137



Edited 2 time(s). Last edit at 01/05/2016 11:33PM by 2zzzcm.
(編輯記錄)

1)網站主題:vespa
(2)導覽列架構設定:
http://i.imgur.com/Ot9OOMh.jpg


(4)風格設定:用簡單的配色跟內容做結合
(5)主色調,輔助色調:以藍色 湖水綠 黑色 白色
(6)製作動機:喜歡vespa
(7)製作目的:讓大家認識vespa

預期效果:簡單明瞭

(1)作業網址:http://mepopedia.com/~web104-2b/final/final-1035445176/
1.製作作業的時間:9小時左右
2.有無遇到的問題:無
3.製作心得與感想:比較上手
4.本學期於網頁設計課程上的收穫:從不會到可以設計一個簡單的網站,學到很多~

(1) 作業網址:http://mepopedia.com/~web104-2b/final/final-1025445077
(2)1. 製作作業的時間:6小時
 2. 有無遇到的問題:難爆了
 3. 製作心得與感想:做完這著網頁之後非常感動!
(4)主要瀏覽族群: 想了解艾薇兒·拉維尼的人
(5)風格設定: 讓網頁有對比的效果
(6)主色調,輔助色調:白灰色調
(7)製作動機: 本身很喜歡艾薇兒·拉維尼這位歌手
(8)製作目的: 希望讓更多人認識艾薇兒·拉維尼
預期效果: 希望可以用網頁設計來展現他的風格 進而認識艾薇兒·拉維尼這個設計師。

(1)網站主題:辛普森家庭
(2)導覽列架構設定:
http://i.imgur.com/PtuhmU7.jpg
(4)風格設定:用黃色做配色
(5)主色調,輔助色調:以黃色.橘色
(6)製作動機:因為覺得辛普森這個卡通很有名,而且又很好笑就想做做他的網站。
(7)製作目的:想讓清楚了解他們幕後的製作跟獎項

預期效果:讓大家能清楚了解辛普森這部卡通

(1)作業網址:http://mepopedia.com/~web104-2b/final/final-1035445053
1.製作作業的時間:20 個小時左右
2.有無遇到的問題:因為語法打錯所以有重做一次
3.製作心得與感想:感覺越來越有網站的樣子了,希望之後能做出更精緻的網頁。
4.本學期於網頁設計課程上的收穫:在這個課程中我學到了很多網頁的製作與需要注意的地方,希望未來能自己完整的架構自己的網站。



Edited 1 time(s). Last edit at 01/06/2016 02:02AM by 1035445053.
(編輯記錄)

(1)作業網址:http://mepopedia.com/~web104-2b/final/final-1035445155
(2).
1.製作作業的時間: 25個小時左右
2.有無遇到的問題: 選的主題資料太少,有時style會跑掉但是都有找回來
3.製作心得與感想: 很有成就感。
4.本學期於網頁設計課程上的收穫: 第一次學到網頁設計,從老師教的一步一步來學,現在已經可以自己設計一個網站,雖然有時候還是會搞不清楚依些問題,但是我覺得非常的有用。

-----------------------前置作業----------------------------

(1)網站主題: 阿達一族
(2)導覽列架構設定


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

(4)主要瀏覽族群: 懷舊卡通的人
(5)風格設定:偏向綠色系
(6)主色調,輔助色調: 綠色 輝色
(7)製作動機: 喜愛的卡通跟電影
(8)製作目的: 懷舊
預期效果: 喜望可以讓大家認識這部電影,喜歡自己網站的配置。

(1)網站主題:插畫家白日夢
(2)導覽列架構設定:
http://imgur.com/98JWz3q
(4)風格設定:用一些暖色溫馨舒適顏色的感覺。
(5)主色調,輔助色調:淡墨綠色、粉色。
(6)製作動機:因為在網站上查插畫家,無意間發現的作者,覺得他的畫風令我喜歡就選他了。
(7)製作目的:想讓更多人知道這個厲害的作者。

預期效果:我從零開始學習網頁製作,雖然真的一開始讓我粉煩惱,因為有很多不了解的地方,但我還是盡我所能做出了這個網站,不知道做出來的效果好不好,但我喜歡做完的成就感。

(1)作業網址:http://mepopedia.com/~web104-2b/final/final-1035445125/index.html
1.製作作業的時間:總共30小時左右
2.有無遇到的問題:主業連結到內容的部分我還是搞不太清楚。
3.製作心得與感想:就是覺得都還是很不熟練,花我好多時間在煩惱。
4.本學期於網頁設計課程上的收穫:我終於知道一個好的網頁背後有多少過程。

(1)網站主題:LADYBABY
(2)導覽列架構設定:
http://imgur.com/edit
(4)風格設定:用粉色系
(5)主色調,輔助色調:粉紅色及米黃
(6)製作動機:因為我覺得LADYBABY很可愛
(7)製作目的:我想更了解她們

預期效果:可以讓看的人看見他們的可愛

(1)作業網址:http://mepopedia.com/~web104-2b/final/final-1035445029
1.製作作業的時間:20小時
2.有無遇到的問題:雙欄好難
3.製作心得與感想:覺得做的時候都不知道怎麼做,邊看教學影片慢慢做,做完超有成就感.
4.本學期於網頁設計課程上的收穫:看起來很簡單的東西其實做起來很難,我也學會了怎麼做某些部分,至少不是什麼都不會,學道滿多的。



Edited 1 time(s). Last edit at 01/06/2016 03:52PM by 1035445029.
(編輯記錄)

(1)作業網址:http://mepopedia.com/~web104-2b/final/final-1035445044
(2)
1.製作作業的時間:10小時
2.有無遇到的問題:連結問題
3.製作心得與感想:每次做都遇到許多難題,但每當完成時有種很大的成就感,總之就是非常的開心。

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

(4)主要瀏覽族群:喜愛臘腸狗的人
(5)風格設定:簡潔明瞭,簡簡單單
(6)主色調,輔助色調:黑灰白
(7)製作動機:家有臘腸,喜愛狗兒
(8)製作目的:希望大家跟我一樣喜愛臘腸



Edited 1 time(s). Last edit at 01/06/2016 04:11PM by 1035445044.
(編輯記錄)

1035445047 邱雅君

(1)作業網址:http://mepopedia.com/~web104-2b/final/final-1035445047
(2)
1.製作作業的時間:10小時
2.有無遇到的問題:連結問題
3.製作心得與感想:在做時有遇到許多問題,所以有請教別人教我,原本有很多不懂得也有慢慢理解。

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

(4)主要瀏覽族群:喜愛佐佐木希的人
(5)風格設定:簡單顏色統一
(6)主色調,輔助色調:咖啡色根深紅
(7)製作動機:因為喜歡佐佐木木希的清純長相
(8)製作目的:希望大家可以多多認識她

完成品(1/7前)
請將這項放置於文章最前面
(1)作業網址:http://mepopedia.com/~web104-2b/final/final-1035445206
(2).
1.製作作業的時間: 1天
2.有無遇到的問題:沒有
3.製作心得與感想: 要邊做邊想這樣排版和配色好不好
4.本學期於網頁設計課程上的收穫:從一開始的不會做網頁,到現在可以自己做出完整的網頁,也知道了很多的語法


前置作業(12/24)
(1)網站主題: Girls' Generation-少女時代
(2)導覽列架構設定

(4)主要瀏覽族群:對偶像團體或藝人有興趣的
(5)風格設定:可以黑暗性感又可以擁有少女的甜美
(6)主色調,輔助色調:黑和粉(主色調) 白(輔助)
(7)製作動機: 很喜歡他們
(8)製作目的: 希望能讓更多人知道他們
預期效果: 希望能展現出少女時代的風格

(1)網站主題:amazarashi (日本搖滾團體)
(2)導覽列架構設定:
http://imgur.com/vbBmy9k
(4)風格設定:用簡單的配色跟內容做結合
(5)主色調,輔助色調:黑色、灰色、白色
(6)製作動機:因為本身很喜歡這個團體,所以希望別人也可以知道他們的美好。
(7)製作目的:想讓更多人知道這個日本團體。

預期效果:可以讓觀看者更了解我想介紹的人事物。

(1)作業網址:http://mepopedia.com/~web104-2b/final/final-1035445119
1.製作作業的時間:總共8小時左右
2.有無遇到的問題:繞圖排文一直用不出來,最後發現原來是位置放錯。
3.製作心得與感想:與期中作業相比感覺網站的成熟度增加不少 。
4.本學期於網頁設計課程上的收穫:從對網頁設計一竅不通到能做出一個網站,學習到很多。

(1)作業網址:http://mepopedia.com/~web104-2b/final/final-1035445224/index.html
(2)
1.製作作業的時間:很久~
2.有無遇到的問題:有
3.製作心得與感想:做網頁都會遇到很多問題,但有問題都會問 吳季萩小老師。
4.本學期於網頁設計課程上的收穫: 覺得老師上覺得老師上超級認真但有點太快了,
但網頁設計真的很難,下學期又更進階了,希望我
可以跟得上。

-----------------------前置作業----------------------------

(1)網站主題:hush介紹
(2)導覽列架構設定
http://i.imgur.com/J6J33Zk.jpg

(4)主要瀏覽族群: 喜歡他音樂曲風的歌迷。
(5)風格設定: 用簡單的色系,簡單的設計 來凸顯 。
(6)主色調:輔助色調: 黃 灰 黑 白。
(7)製作動機: 我覺得他是一個很棒的歌手,但還不是很有名,希望藉由這次作業來讓更多人認識。
(8)製作目的: 希望讓更多人認識hush。
預期效果: 希望大家看完可以更喜歡他的音樂風格。

1035445224 鍾佳妮

(1)作業網址: http://mepopedia.com/~web104-2b/final/final-1035445185

(2)
1.製作作業的時間:12小時

2.有無遇到的問題: 有,紀萩小老師都會幫我解決難題 很感謝她 spinning smiley sticking its tongue out

3.製作心得與感想: 做完全部蠻有成就感的

4.本學期於網頁設計課程上的收穫:老師上課都很認真的在講解,也學習到了很多
以前沒有接觸過網頁設計,現在能自己設立一個網頁了,覺得很開心很有成就,希望以後能更進步



-----------------------前置作業----------------------------

(1)網站主題: 櫻桃小丸子
(2)導覽列架構設定
http://i.imgur.com/YNvXh6k.jpg


(4)主要瀏覽族群: 喜歡櫻桃小丸子的觀眾朋友們
(5)風格設定:使用可愛的粉紅色和一些柔和的顏色
(6)主色調,輔助色調: 粉紅色,白色
(7)製作動機: 超喜歡櫻桃小丸子的,覺得她很可愛
(8)製作目的: 希望做了這個網頁能讓更多人跟我一樣喜歡櫻桃小丸子
預期效果:覺得OK

(1)作業網址: http://mepopedia.com/~web104-2b/final/final-1045245001
(2)
1.製作作業的時間: 約7-8小時
2.有無遇到的問題: 沒有
3.製作心得與感想: 完成一個的網頁了,很有成功感
4.本學期於網頁設計課程上的收穫:學會一步步做網頁,之前很怕做不到,幸好結果不差
前置作業
(1)網站主題: 哈利波特
(2)導覽列架構設定
(3)主要瀏覽族群: 喜歡看哈利波特的人
(4)風格設定: 簡潔
(5)主色調,輔助色調: 黑,灰,白,紅色
(6)製作動機: 喜歡看哈利波特
(7)製作目的: 想整理他的資料
預期效果: 能夠列出資料



Edited 3 time(s). Last edit at 01/06/2016 08:46PM by 1045245001.
(編輯記錄)

Attachments:
開啟 | 下載 - 1045245001.jpg (943 KB)
(1)作業網址: http://mepopedia.com/~web104-2b/final/final-1035445056
(2). 1.製作作業的時間:至少一周
2.有無遇到的問題: 無
3.製作心得與感想: 製作雙欄導覽列真的很費心思,調整各種小地方,做完都精疲力竭!!還有做back鍵我覺得很棒!之前就一直想要知道
如何去做這個按鈕,現在終於知道了很開心!
4.本學期於網頁設計課程上的收穫: Dreamweaver之前有稍微碰過一點,現在是更了解它了,還有製作網頁雖然辛苦並且繁複,
但是製做自己喜歡的主題真的很棒,做完也很有成就感。

前置作業
(1)網站主題: 夏目友人帳
(2)導覽列架構設定

(3)尺寸與架構設定
(4)主要瀏覽族群: 任何人
(5)風格設定: 清雅
(6)主色調,輔助色調: 主色 : 綠色 輔住色 : 淺藍綠色
(7)製作動機: 自己很喜歡這部作品,他的風格就是淺淺淡淡的很和平,時不時插入一點笑點進去,溫馨和諧。
(8)製作目的: 讓人更了解這個作品。
預期效果: 清新


1035445056陳冠霖

完成品(1/7前)
(1)作業網址:http://mepopedia.com/~web104-2b/final/final-1035445080
(2).
1.製作作業的時間:不知道耶!
2.有無遇到的問題: 有,不過都解決了。
3.製作心得與感想: 做網頁很累,但是做完很爽。
4.本學期於網頁設計課程上的收穫: 只能說網頁這課程,真的難度很高。
前置作業(12/24)
(1)網站主題: Shinee
(2)導覽列架構設定:▲附加檔案裡
(4)主要瀏覽族群:青少年(?)
(5)風格設定:沉穩的顏色(?)
(6)主色調,輔助色調:主色以深藍為主,輔助色是以灰色和淺藍(?)
(7)製作動機:因為他們的歌不錯聽(?)
(8)製作目的:感覺比較好做。

Attachments:
開啟 | 下載 - 主圖.JPG (118 KB)
(1)作業網址: http://mepopedia.com/~web104-2b/final/final-1035445071
(2).
1.製作作業的時間:5天
2.有無遇到的問題:一開始不是做這個,因為之前做的content只要加padding就會往外面長,不知道什麼原因,後來只好整組重做.
3.製作心得與感想:把之前學的全部整合,才發現真的學了很多,很多細節要注意.
4.本學期於網頁設計課程上的收穫:覺得學了很多,老師會放教學影片真的對我們幫助很大,忘記了還可以回去看.
前置作業(12/24)
(1)網站主題:ONE ON ROCK
(2)導覽列架構設定http://imgur.com/f2Fh5Ln
(3)尺寸與架構設定http://imgur.com/XUnhITt
(4)主要瀏覽族群:喜歡ONE OK ROCK的人
(5)風格設定:個性
(6)主色調,輔助色調:黑、白、灰、黃、一點點紫
(7)製作動機:唱歌很好聽,喜歡他們的歌.
(8)製作目的:分享好樂團
預期效果:吸引更多人喜歡他們

(1)作業網址:http://mepopedia.com/~web104-2b/final/final-1035445179
(2)
1.製作作業的時間:約6~7小時
2.有無遇到的問題:無
3.製作心得與感想:完成一個完整的網頁了覺得
4.本學期於網頁設計課程上的收穫:可以自己做一個網頁,覺得很有成就感。

-----------------------前置作業----------------------------

(1)網站主題:大英雄天團
(2)導覽列架構設定

(4)主要瀏覽族群:喜歡大英雄天團或是導演的人
(5)風格設定:簡潔清楚
(6)主色調,輔助色調:黑、白色
(7)製作動機:很喜歡這部電影
(8)製作目的:希望可以讓更多人認識這部電影
預期效果:希望可以用網頁設計的成果吸引人來看,進而喜歡上這部作品

Attachments:
開啟 | 下載 - 列.jpg (1.09 MB)
(1)作業網址:http://mepopedia.com/~web104-2b/final/final-1035445140
(2). 1.製作作業的時間:一天
2.有無遇到的問題: 很多細節沒設定好
3.製作心得與感想:做得時候遇到不會的會很崩潰,但是總算是做好了
4.本學期於網頁設計課程上的收穫:做出來蠻有成就感的。
前置作業
(1)網站主題:哆啦a夢
(2)導覽列架構設定
http://imgur.com/TrOAQ24
(4)主要瀏覽族群:喜歡看動漫的群眾
(5)風格設定: 主要是歡樂的風格
(6)主色調,輔助色調:黑白
(7)製作動機:小時候非常喜歡的一部動畫片,希望能回憶童年。
(8)製作目的:重溫兒時的回憶
預期效果: 規劃每頁的排版。

(1)作業網址:http://mepopedia.com/~web104-2b/final/final-1035445191
(2).
1.製作作業的時間: 前後改來改去,應該快一禮拜了
2.有無遇到的問題: 大致上沒有很大的問題,有跑掉的還可以調回來,但是雙欄果然比以前任何版型西還要花時間又難做!
3.製作心得與感想: 雖然真的覺得雙欄很麻煩又耗工,但是有邁向更完整的網頁的感覺,按鈕變多變得更有趣。
4.本學期於網頁設計課程上的收穫: 以前有看別的科的同學有學過,一直以為它是比較沒有相關設計,單純就是語法程式的
無聊東西,但學過之後大大改觀,可以做出自想做的網頁真的很有趣,非常喜歡這堂課,很高興下學期還可以繼續學。            


-----------------------前置作業----------------------------


(1)網站主題: Kanahei 插畫家
(2)導覽列架構設定

http://imgur.com/XzaKsJx

(3)主要瀏覽族群: 喜歡日本插畫還有幽默小品的人
(4)風格設定: 可愛又療癒感覺
(5)主色調,輔助色調: 粉紅色 粉綠色
(6)製作動機: 在Line上看過她的貼圖,覺得很可愛
(7)製作目的: 希望能讓更多人知道作者, 大開知名度,然後就有出版社願意翻譯她的書了
預期效果: 希望能有更多人因此更注意這個作品和畫家



Edited 1 time(s). Last edit at 01/07/2016 03:22AM by 翁瑱真.
(編輯記錄)

(1)作業網址: http://mepopedia.com/~web104-2b/final/final-1035445023
(2).
1.製作作業的時間: 12個小時
2.有無遇到的問題: 無
3.製作心得與感想: 比期中複雜
4.本學期於網頁設計課程上的收穫:雖然很難,但成功做完一個網頁之後很有成就感,大致上能看懂一些語法了


(1)網站主題:摺紙
(2)導覽列架構設定
(4)主要瀏覽族群:對摺紙有興趣的人
(5)風格設定:簡潔清楚
(6)主色調,輔助色調:咖啡色、橘色為主
(7)製作動機:因為看到家裡裝魚骨的紙盒子
(8)製作目的:希望大家能多了解這個最容易接觸又常常忽視的藝術



Edited 1 time(s). Last edit at 01/07/2016 04:31AM by liyin0616.
(編輯記錄)

(1)作業網址: http://mepopedia.com/~web104-2b/final/final-1025445086
(2).
1.製作作業的時間: 24個小時
2.有無遇到的問題: 無
3.製作心得與感想: 雖然有些複雜,不過做出來很有成就感
4.本學期於網頁設計課程上的收穫:上完這學期網頁課,覺得更了解語法如何運用


(1)網站主題:About Time
(2)導覽列架構設定
(4)主要瀏覽族群:喜歡真愛美一天的人
(5)風格設定:質感
(6)主色調,輔助色調:咖啡色、墨綠色為主
(7)製作動機:因為自己非常喜歡這部電影
(8)製作目的:無