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/~web105-2b/final/final-10454452XX

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

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



2.全部完成後上傳至FTP

3.依進度回覆本篇文章




5. 回覆說明



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


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

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

(3)尺寸:


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

(8)資料蒐集分析

◎設計優良網站(風格)列表與分析
[作業] 優良設計網站蒐集與分析 http://mepopedia.com/forum/read.php?2023,68211

◎相關網站列表與分析:





[color=#CC0066]進階參考: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">

Attachments:
開啟 | 下載 - ex-finallayout.ai (1.14 MB)
(1)作業網址:http://mepopedia.com/~web105-2b/final/final-1045445017

(2).
1.製作作業的時間:一週

2.有無遇到的問題:無

3.製作心得與感想:完成這次的網頁後,技巧提升了很多,過程中有遇到一些小問題,但
是都靠自己解決了,主要就是不斷摸索和嘗試,慢慢理解網頁的架構、軟體的操作和語法
等,而製作時,也要為了不要讓每一頁都太過相近,而去想圖與文要如何去編排,搭配表
格來更加豐富、具有層次感,但也發現自己有很多地方需要加強,不管是色彩的搭配或是
整體美感,都還要再努力,不過我知道自己有盡力去做了,所以下次只要在花更多時間練
習,並去看看別人是如何去做網頁的,一定能越來越進步。

4.本學期於網頁設計課程上的收穫:從一開始要用什麼軟體來做都不知道,直到現在懂了
很多基礎架構和技巧,可以說是收穫很多,也要感謝老師細心教導,不管是影片,還是講
義都做得很完整,所以我才能跟上進度,有時還自己發現一些老師沒有教的東西,最後期
望自己在下學期能學到更多,並做出屬於自己的網頁,而不是參考別人的資料。

前置作業
(1)網站主題:SHERIIDAN

(2)導覽列架構設定:


(3)尺寸:


(4)主要瀏覽族群:男女老少皆宜

(5)風格設定:因為是做國外有海邊的度假村,所以用藍色為主,有沉靜、自由的意象。

(6)主色調,輔助色調:主色調為藍色,輔助色是較淺的藍或是較深的藍,

(7)製作動機:度假村是能放鬆身心的地方,我非常嚮往,希望自己以後有機會能去,所
以用此主題來設計成網頁。

(8)製作目的:讓更多人知道這個度假村,也讓自己能了解更多國外的樣貌。
預期效果: 打開網頁後,會想去一趟這個度假村。

(9)資料蒐集分析:http://www.sheridanbeachresort.com/overview-page/about-the-resort/



Edited 1 time(s). Last edit at 01/04/2017 11:28PM by lemon2016.
(編輯記錄)

(1)作業網址:http://mepopedia.com/~web105-2b/final/final-1045445155/
(2).
1.製作作業的時間: 4-5小時
2.有無遇到的問題: 最後順利完成了
3.製作心得與感想: 雖然途中有遇到困難
4.本學期於網頁設計課程上的收穫:越做越順手ㄌ


前置作業
(1)網站主題:草間彌生
(2)導覽列架構設定:about/work/photo/video/story
(3)尺寸: 800px


(4)主要瀏覽族群:欣賞草間彌生的人
(5)風格設定: 圓點點
(6)主色調,輔助色調:南瓜黃色
(7)製作動機:喜歡草間彌生 覺得他很特別
(8)製作目的:一起瞭解草間彌生
(9)資料蒐集分析:https://zh.wikipedia.org/wiki/%E8%8D%89%E9%96%93%E5%BD%8C%E7%94%9F



Edited 1 time(s). Last edit at 01/05/2017 01:41PM by 1045445155.
(編輯記錄)

(4)主要瀏覽族群: 15~30之間
(5)風格設定: 簡約風
(6)主色調,輔助色調:暖色調
(7)製作動機:好像找的網頁資料以這為主題的都以繽紛為主
(8)製作目的: 在找的資料裡很少是介紹電影和連結,而大都是放一個照片或文章
預期效果:還算完整,但在連結那一頁,文字置中試了很多次還是沒有解決到。

(8)資料蒐集分析 http://rose86321.pixnet.net/blog 右欄有放置影片跟問卷是目前沒學過的

(1)作業網址:http://mepopedia.com/~web105-2b/final/final-1045445035/
(2
1.製作作業的時間: 9小時
2.有無遇到的問題: 重做了好幾次
3.製作心得與感想: 天哪!網頁設計師不是人做的 好累喔! 但做完就是成就感
4.本學期於網頁設計課程上的收穫:總算是有點點會做網頁了(但還是會有問題)


前置作業
(1)網站主題:JJ 林俊傑
(2)導覽列架構設定:JJ Lin works awards vid
(3)尺寸: 720px


(4)主要瀏覽族群:JJ的歌迷
(5)風格設定: 簡單低調
(6)主色調,輔助色調:黑白灰
(7)製作動機:自己本身就很喜歡JJ
(8)製作目的:想多了解JJ
(9)資料蒐集分析:https://www.jjlin.com/
https://zh.wikipedia.org/zh-tw/%E6%9E%97%E4%BF%8A%E6%9D%B0

1、作業網址:http://mepopedia.com/~web105-2b/final/final-1045445170
2、
1.製作作業的時間: 4-5小時
2.有無遇到的問題: 難,一直卡。
3.製作心得與感想:做到一半超想哭的。
4.本學期於網頁設計課程上的收穫:認真的體會做網頁的辛苦,辛酸。

前置作業
(1)網站主題:星座
(2)導覽列架構設定:http://imageshack.com/a/img922/5121/bnFAu1.jpg
(3)尺寸: http://imageshack.com/a/img923/8642/iwYBOi.jpg
(4)主要瀏覽族群:喜歡研究星座的人grinning smiley
(5)風格設定: 星空
(6)主色調,輔助色調:藍綠調
(7)製作動機:喜歡星座grinning smiley
(8)製作目的:認識星座
(9)資料蒐集分析:
http://www.astrology-zodiac-signs.com/
http://pinpei.pixnet.net/blog/post/24463257-%E9%A2%A8%E8%B1%A1%E3%80%81%E7%81%AB%E8%B1%A1%E3%80%81%E6%B0%B4%E8%B1%A1%E3%80%81%E5%9C%9F%E8%B1%A1%E6%98%9F%E5%BA%A7%E5%90%84%E4%BB%A3%E8%A1%A8%E4%BB%80%E9%BA%BC%E6%84%8F%E7%BE%A9
http://www.ai5429.com/17/t08/003.htm



Edited 1 time(s). Last edit at 01/13/2017 06:31PM by 1045445170.
(編輯記錄)

(1)作業網址: http://mepopedia.com/~web105-2b/final/final-1045445044
(2).
1.製作作業的時間:總共六七個小時
2.有無遇到的問題:在css設定的時候有遇到一些問題
3.製作心得與感想:做完都筋疲力盡
4.本學期於網頁設計課程上的收穫:學習怎麼做個網頁



前置作業
(1)網站主題:小丸子
(2)導覽列架構設定:about story video links character
(3)尺寸: 900px


(4)主要瀏覽族群:喜歡小丸子的人
(5)風格設定: 粉色可愛的
(6)主色調,輔助色調:粉紅色 紫色
(7)製作動機:喜歡小丸子
(8)製作目的:讓更多人了解這個卡通
預期效果:希望讓其他人也會喜歡這個
(8)資料蒐集分析:https://zh.wikipedia.org/wiki/%E6%AB%BB%E6%A1%83%E5%B0%8F%E4%B8%B8%E5%AD%90

(1)作業網址: http://mepopedia.com/~web105-2b/final/final-1035443110/
(2).
1.製作作業的時間:總共六七個小時
2.有無遇到的問題:在css設定的時候有遇到一些問題
3.製作心得與感想:每次都在統整的時候出問題,但好險都解決了,也知道設定新的CSS的方法
4.本學期於網頁設計課程上的收穫:雖然之前已經修過進階網頁設計了,但還是學習到許多不一樣的東西



前置作業
(1)網站主題:監獄兔
(2)導覽列架構設定:首頁(關於) 角色介紹 故事介紹 相關影片 相關連結
(3)尺寸: 800px


(4)主要瀏覽族群:喜歡監獄兔的人 喜歡卡通的人
(5)風格設定: 清爽 監獄兔的配色
(6)主色調,輔助色調:藍綠色及監獄兔皮膚的顏色
(7)製作動機:喜歡監獄兔~~超可愛
(8)製作目的:讓更多人喜歡這個卡通 喜歡這個網站~
預期效果:希望讓其他人也會喜歡這個
(8)資料蒐集分析:https://zh.wikipedia.org/zh-tw/%E7%9B%A3%E7%8D%84%E5%85%94

(1)作業網址: http://mepopedia.com/~web105-2b/final/final-1045445068
(2).
1.製作作業的時間: 3~4天
2.有無遇到的問題: 最後檔案名稱改掉 導致要重新置入圖片...
3.製作心得與感想: 很複雜,但最後一番爆炸後終於用好了...
4.本學期於網頁設計課程上的收穫:從0開始 ...慢慢做得出來網頁,覺得大概就是這學期學到最有成就感的課程了。




(1)網站主題:Ariana Grande
(2)導覽列架構設定
(圖01)
(3)尺寸:
(圖02)
(4)主要瀏覽族群:各年齡層
(5)風格設定:淡紫色調
(6)主色調,輔助色調:淡紫色與深紫色對比
(7)製作動機: Ariana Grande每首歌都很經典,想要把她的歌聲美妙之處傳給大家。
(8)製作目的: 為了讓大家認識並了解Ariana Grande
預期效果:讓大眾家了解Ariana Grande

(8)資料蒐集分析
https://zh.wikipedia.org/wiki/%E7%88%B1%E8%8E%89%E5%AE%89%E5%A8%9C%C2%B7%E6%A0%BC%E5%85%B0%E5%BE%B7



Edited 1 time(s). Last edit at 01/12/2017 11:13AM by 1045445068.
(編輯記錄)

http://mepopedia.com/~web105-2b/final/final-1045445149
1.導覽列配色與風格設定:

以可樂的紅白調為主色調,有歡樂活潑暢快的感覺。

2.有無遇到的問題?

3.製作感想(你認為導覽列的意義為何?)
很累

4.製作作業的時間
1星期

(1) 作業網址:http://mepopedia.com/~web105-2b/final/final-1045445014
(2)
 
1. 製作作業的時間:10~12小時

2. 有無遇到的問題:只有表格問題,但已經找老師問過問題也解決了spinning smiley sticking its tongue out
當初原本還用超久都找不出問題哈哈~至於其他的都有看過老師很詳細的講義,
所以大致上事都沒什麼問題~~

3. 製作心得與感想:覺得雙欄式的網頁真的比之前的還要再複雜、困難許多,
也是經過了一番研究才做出來,但也是因為有老師之後的指導,讓我更加了解許多thumbs up
希望做網頁能一次又比一次更好更進步~


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

(2) 導覽列架構設定:




(3)尺寸




(4)主要瀏覽族群:喜愛卡通的任何一個人

(5)風格設定:因要符合小熊維尼的主題,主要顏色都是以咖啡,澄黃為主,讓人有溫馨舒適的感覺

(6)主色調,輔助色調:主色調為澄黃,輔助色是較淺的黃跟咖啡

(7)製作動機:因為本身就很喜歡很可愛的東西,所以才想以卡通為主題,
然後覺得小熊維尼這個題材應該還滿好做的,所以把它做成網站應該也不錯~

(8)製作目的:讓更多人更加了解小熊維尼的故事與歷史淵源。

(1)作業網址: http://mepopedia.com/~web105-2b/final/final-1045445068
(2).
1.製作作業的時間: 3~4天
2.有無遇到的問題: 最後檔案名稱改掉 導致要重新置入圖片...
3.製作心得與感想: 很複雜,但最後一番爆炸後終於用好了...
4.本學期於網頁設計課程上的收穫:從0開始 ...慢慢做得出來網頁,覺得大概就是這學期學到最有成就感的課程了。




(1)網站主題:Ariana Grande
(2)導覽列架構設定
(圖01)
(3)尺寸:
(圖02)
(4)主要瀏覽族群:各年齡層
(5)風格設定:淡紫色調
(6)主色調,輔助色調:淡紫色與深紫色對比
(7)製作動機: Ariana Grande每首歌都很經典,想要把她的歌聲美妙之處傳給大家。
(8)製作目的: 為了讓大家認識並了解Ariana Grande
預期效果:讓大眾家了解Ariana Grande

(8)資料蒐集分析
https://zh.wikipedia.org/wiki/%E7%88%B1%E8%8E%89%E5%AE%89%E5%A8%9C%C2%B7%E6%A0%BC%E5%85%B0%E5%BE%B7

完成品(1/10前)
請將這項放置於文章最前面
(1)作業網址: http://mepopedia.com/~web105-2b/final/final-1045445002
(2).
1.製作作業的時間:大概5天左右
2.有無遇到的問題:有些間距或是顏色設定的問題,不過都能在講義跟網路上查到
3.製作心得與感想:
因為這次和期中是完全不同的主題,風格比上次難掌握,所以在設計上花了比較多的心思,也查了許多網路上的教學,做了各種嘗試,希望能讓整體看起來比較符合主題的感覺
4.本學期於網頁設計課程上的收穫:
一開始覺得網頁設計很可怕!!!!!!!!!全是英文跟數字!!!!!!!!!都是些什麼外星文啊根本要我死((被打
但真的開始做的時候就覺得很有趣,尤其是想嘗試老師上課沒教的東西時
雖然常常會忘記一些小東西要重複翻筆記跟講義,但真的做完之後會有很大的成就感((征服了英文跟數字哼哼

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


(3)尺寸:




(4)主要瀏覽族群: 青少年~中年、該作品讀者
(5)風格設定: 日式,簡單,藍、白色調(配合角色)
(6)主色調,輔助色調: 主色調是白色及藍色,輔助使用淺灰色、深藍色
(7)製作動機: 喜歡這部作品
(8)製作目的: 能讓其他人認識這部作品
預期效果: 讓進入網站的人對作品產生興趣,或是讓原本的作品讀者得到關於作品的新消息

(8)資料蒐集分析
http://www.sunrise-inc.co.jp/gintama/
http://www.tv-tokyo.co.jp/anime/gintama/index2.html



Edited 3 time(s). Last edit at 01/08/2017 03:04AM by 1045445002.
(編輯記錄)

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

1.製作作業的時間: 2-3小時
2.有無遇到的問題: 很複雜
3.製作心得與感想: 太複雜了 但做完很有成就感
4.本學期於網頁設計課程上的收穫:學到很多

請將這項放置於文章最前面
(1)作業網址:http://mepopedia.com/~web105-2b/final/final-1045445008
(2).
1.製作作業的時間:3~4天
2.有無遇到的問題:沒有
3.製作心得與感想: 做完很有成就感在座的過程中慢慢摸索,喜歡這樣可以讓自己動腦的東西
4.本學期於網頁設計課程上的收穫: 超棒的因為之前在高職沒有做過DW,所以這是新的一個學習!!很喜歡


前置作業
(1)網站主題: 想個人的愛情故事

(2)導覽列架構設定

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

(3)尺寸:


http://i.imgur.com/dd-01.jpg

(4)主要瀏覽族群: 大學生
(5)風格設定: 簡潔乾淨
(6)主色調,輔助色調: 灰色白色
(7)製作動機: 因為喜歡畫插畫所以想呈現一個完全自己風格設計作品

(8)製作目的: 想嘗試一個屬於自己的東西

預期效果:還滿開心的

(8)資料蒐集分析

◎設計優良網站(風格)列表與分析
[作業] 優良設計網站蒐集與分析

◎相關網站列表與分析:http://www.books.com.tw/products/0010723543



Edited 1 time(s). Last edit at 01/09/2017 10:24PM by 1045445008.
(編輯記錄)

(1)作業網址:http://mepopedia.com/~web105-2b/final/final-1045445146
(2)
1.製作作業的時間:三至四天
2.有無遇到的問題:沒有大問題
3.製作心得與感想:我覺得好像慢慢的可以設計出有質感且美感的網站了,雖然在製作的過程中還是會有小碰壁,但是自己摸索一下就又解決了,最後希望下學期我可以更進步,設計出更完整的網站
4.本學期於網頁設計課程上的收穫:第一次自己設計出一個網站,從基本的到現在加入一些比較深的技巧,真的是提升了不少也收穫良多

網站主題:MAMAMOO
(2)導覽列架構設定:
http://i.imgur.com/Y5H48Rd.jpg
(3)尺寸:
http://i.imgur.com/vpdb9gt.jpg

(4)主要瀏覽族群:想認識MAMAMOO的歌迷朋友們
(5)風格設定:復古
(6)主色調,輔助色調:酒紅,暗紅、粉紅
(7)製作動機:自從在Youtube上看了MAMAMOO表演的影片之後,覺得他們的歌唱實力真的很厲害,而且四個人都有各自不同的魅力所在
(8)製作目的:希望可以讓更多人認識實力不容小覷的MAMAMOO,歌曲真的都很好聽
預期效果:放了很多表演的影片,也有成員各自的簡介,瀏覽完之後應該會想要再多認識MAMAMOO

完成品(1/10前)
作業網址:http://mepopedia.com/~web105-2b/final/final-1045445161
1.製作作業的時間:3天
2.有無遇到的問題:雙欄的時候會有小卡住,但看講義多次練習就會了。
3.製作心得與感想:從挫敗中找出解決方法很有成就感,希望下學期做的網頁設計完全用的是自己的東西。
4.本學期於網頁設計課程上的收穫: 從中練習多次的配色及版面編排,算是另種的收穫。


前置作業
(1)網站主題:LOUISA COFFEE
(2)導覽列架構設定
http://i.imgur.com/aBc9gwT.png
(3)尺寸
http://i.imgur.com/GPe5rZ3.png
(4)主要瀏覽族群:任何想吃早午餐及下午茶的人。
(5)風格設定:溫暖,以刺激食慾。
(6)主色調,輔助色調: 主色調 - 咖啡色和橘色,輔助色調 - 黃色灰色黑色。
(7)製作動機:因為沒課的早上會很晚起床,想吃早餐,但又接近中午,所以決定看看有沒有輕食可以吃,當作早午餐,
而在外頭亂晃時,發現這家的咖啡輕食店氣氛不錯,餐點也可口,因此決定幫這家店做網頁。
(8)製作目的:讓更多因為晚起而想吃早午餐或下午放學想休息輕鬆喝個下午茶的人知道這家店是一個早午餐的好選擇。
預期效果:讓大家可以清楚這家店的經營理念,和餐點。

(8)資料蒐集分析:https://zh-tw.facebook.com/louisacoffeeofficial/



Edited 8 time(s). Last edit at 01/10/2017 04:50PM by 1045445161.
(編輯記錄)

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

(2).
1.製作作業的時間:三天

2.有無遇到的問題:無 老師的教學影片都很清楚

3.製作心得與感想:看老師的影片一步一步完成,做完都很有成就感,會一直想盡力修改到最好。

4.本學期於網頁設計課程上的收穫:第一次接觸到這個軟體,從完全不會到能做出一套的樣子,好險有老師的影片,上課漏掉的還可以從影片中慢慢摸索,也感受到日常生活中每天接觸的這些網頁,都需要背後這些複雜的程序,才能呈現給大家這些清楚的資訊。

前置作業

(1)網站主題:南方四賤客(South Park)

(2)導覽列架構設定: 簡介(Introduction),歷史(History),作品型態(Features),人格特質(Personality),音樂品味(Music taste)。

(4)主要瀏覽族群:all

(5)風格設定: 以上方最主要的圖片,來選顏色。

(6)主色調,輔助色調:黃綠橘。

(7)製作動機:喜歡南方四賤客。

(8)製作目的:讓更多人能注意。
預期效果: 去了解他們的歷史 。

(9)資料蒐集分析:https://zh.wikipedia.org/wiki/%E5%8D%97%E6%96%B9%E5%85%AC%E5%9C%92

吼呦網頁打開都錯誤,老師口以從我的資料夾打開來看嗎sad smiley

(1)作業網址: http://mepopedia.com/~web105-2b/final/final-1045445077
(2).
1.製作作業的時間:一整天
2.有無遇到的問題:在css設定的時候有遇到一些問題
3.製作心得與感想:很有成就感
4.本學期於網頁設計課程上的收穫:雖然高中有學過網頁設計,但我還是對這個不是很在行。


前置作業
(1)網站主題:ARASHI 嵐
(2)導覽列架構設定:首頁(關於) 音樂 照片 相關影片 相關連結
(3)尺寸: 800px


(4)主要瀏覽族群:喜歡日本偶像的人
(5)風格設定: 活潑、亮麗
(6)主色調,輔助色調:紅色跟黃色
(7)製作動機:我很喜歡這個偶像團體
(8)製作目的:讓更多人知道他們
預期效果:讓其他人也會喜歡這個
(8)資料蒐集分析:無



Edited 1 time(s). Last edit at 01/10/2017 05:38PM by 1045445077.
(編輯記錄)

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

(2).
1.製作作業的時間:一週

2.有無遇到的問題:無

3.製作心得與感想:一學期下來,學到了很多,說真的一開始真的會怕自己做不做得來,因為都是英文;學了幾個禮拜後,看程式的時候就不會那麼生疏了。

前置作業

(1)網站主題:日本神道教

(2)導覽列架構設定:



(3)尺寸:




(4)主要瀏覽族群: 青、中年

(5)風格設定:簡單、乾淨

(6)主色調,輔助色調: 主色調 : 紅色與白色,輔助色調 : 灰色

(7)製作動機: 喜歡宗教充滿著神祕的感覺,讓人更想深入了解

(8)製作目的:讓觀看著了解神道教的文化

(8)資料蒐集分析:http://www.isejingu.or.jp/



Edited 4 time(s). Last edit at 01/10/2017 10:09PM by 1045445062.
(編輯記錄)

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

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

2.有無遇到的問題:無

3.製作心得與感想:期末做完非常有成就感!!!

前置作業

(1)網站主題:侏儸紀世界

(2)導覽列架構設定:


(3)尺寸:


(4)主要瀏覽族群: 喜歡這部電影的人

(5)風格設定:暗色系

(6)主色調,輔助色調: 主色調 : 黑、白、暗藍,輔助色調 : 灰

(7)製作動機: 喜歡這部電影

(8)製作目的:希望大家都可以更喜歡更了解這部電影

(8)資料蒐集分析:https://zh.wikipedia.org/wiki/%E4%BE%8F%E7%BD%97%E7%BA%AA%E4%B8%96%E7%95%8C



Edited 2 time(s). Last edit at 01/10/2017 10:58PM by 1045445131.
(編輯記錄)

(1)作業網址: http://mepopedia.com/~web105-2b/final/final-1045445095
(2).
1.製作作業的時間:4~5個小時
2.有無遇到的問題:有些文字間距問題,像是LINKS那頁文字就不會調整。
3.製作心得與感想:
因為這次和期中是完全不同的主題,風格比上次難掌握,所以在設計上花了比較多的心思,也查了許多網路上的教學,做了各種嘗試,希望能讓整體看起來比較符合主題的感覺
4.本學期於網頁設計課程上的收穫:
一開始完全不懂,到後來持續漸進的學會了語法構造,要怎麼編排設計,而在當製作的時候忘了什麼步驟也能很快在講義找出問題,雖然對網頁不算已經專精但至少會基本的操作了。
前置作業
(1)網站主題: 美國小天后Selena gomez
(2)導覽列架構設定



(3)尺寸:






(4)主要瀏覽族群: 15~30之間
(5)風格設定: 簡約風
(6)主色調,輔助色調: 暖色調,輔助色調黃色褐色
(7)製作動機: 喜歡這位偶像
(8)製作目的: 讓想了解這位偶像的人
預期效果: 大至上和自己想做的樣子差不多,但有些文字間距蠻有問題的。

(8)資料蒐集分析
http://rose86321.pixnet.net/blog
https://www.google.com.tw/search?client=ms-android-htc-rev&hl=zh-Hant-TW&oe=utf-8&safe=images&q=gomezselena+skyrock+com&source=browser-suggest&qsubts=1484037333350&action=devloc



Edited 1 time(s). Last edit at 01/10/2017 11:41PM by 1045445095.
(編輯記錄)

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

(2).
1.製作作業的時間:一週

2.有無遇到的問題:無

3.製作心得與感想:終於做完了~~~~~smileys with beer 超開心的超有成就感

4.本學期於網頁設計課程上的收穫:第一次接觸到網頁,從原本一竅不通到現在能製作出一個網站,覺得自己學習到很多而且很扎實,希望下學期繼續努力做出更多更理想的設計,老師辛苦了~教學超棒的thumbs up
前置作業
(1)網站主題:bravest warriors

(2)導覽列架構設定:
http://imgur.com/a/vuQJR

(4)主要瀏覽族群:青年

(5)風格設定:是個比較科技化的美國動畫,所以已比較鮮艷活潑的色彩設計。

(6)主色調,輔助色調:豐富鮮豔的色系

(7)製作動機:這是我很喜歡的動畫,但知名度不高,也沒有太多的網站介紹。

(8)製作目的:讓更多人知道這個動畫,並且收看。
預期效果: 增加這部動畫的粉絲

(9)資料蒐集分析:https://zh.wikipedia.org/wiki/%E7%84%A1%E6%87%BC%E5%8B%87%E5%A3%AB



Edited 1 time(s). Last edit at 01/11/2017 12:53AM by OuO1045445125.
(編輯記錄)

完成品
(1)作業網址:http://mepopedia.com/~web105-2b/final/final-1045445137
(2)
1.製作作業的時間: 很多天
2.有無遇到的問題:很多問題 但還是硬做完了
3.製作心得與感想: 學到更多的東西了
4.本學期於網頁設計課程上的收穫:原來網頁是這樣出來的
前置作業
(1)網站主題: MARVEL
(2)導覽列架構設定: http://imgur.com/sXXS3DP
(3)尺寸:http://imgur.com/fpFE7EL
(4)主要瀏覽族群:各年齡層
(5)風格設定:美式 (6)主色調:紅 黃
(7)製作動機:因個人喜歡MARVEL
(8)製作目的:讓大家可以更了解MARVEL
預期效果:MARVEL 永遠贏過DC

(9)資料蒐集分:呃.......很多

完成品
(1)作業網址:http://mepopedia.com/~web105-2b/final/final-1045445080
(2)
1.製作作業的時間: 2天
2.有無遇到的問題:製作表格時偶爾會出現一些小問題但後來都解決了
3.製作心得與感想: 學到更多的東西了,而且可以替自己喜歡的偶像製作出一個網頁覺得頗有成就感的
4.本學期於網頁設計課程上的收穫: 以前沒有接觸過網頁設計,所以剛開始學的時候覺得蠻新鮮蠻好玩的,但在網頁中我學到了要細心不然一個小錯誤就無法呈現出自己想要的樣子。
前置作業
(1)網站主題: LADY GAGA
(2)導覽列架構設定:
(3)尺寸:
(4)主要瀏覽族群:各年齡層
(5)風格設定:活潑、簡單
(6)主色調,輔助色調:酒紅色與橘色
(7)製作動機:因個人喜歡LADY GAGA
(8)製作目的:讓大家可以更了解LADY GAGA
預期效果:希望藉由自己做的網頁讓大家可以更喜歡LADY GAGA

(9)資料蒐集分析:https://zh.wikipedia.org/zh-hk/Lady_Gaga



Edited 2 time(s). Last edit at 01/11/2017 05:05AM by 1045445080.
(編輯記錄)

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

(2).
1.製作作業的時間: 一天

2.有無遇到的問題:一開始製作雙欄時,很多東西都跑位,之後重新在做一次後,
把遇到的問題都解決完了。

3.製作心得與感想:希望能更了解網頁,經過這次雙欄的製作,讓我更加的知道網頁的趣味
如果有時間,花上一天時間研究,我覺得一定會更好,

4.本學期於網頁設計課程上的收穫:原本看到程式碼真的很畏懼哈哈,經過老師的指導跟老師的教學影片
在家也能夠好好的學習網頁,並且慢慢自己去找出更多不一樣的東西,
每當設定到比較特別的東西時,都覺得非常有趣,我很喜歡上網頁課,
但精神一定要很好才行。

/


(1)網站主題: 別相信任何人 (電影)
(2)導覽列架構設定 http://imgur.com/mUNr2VQ

(4)主要瀏覽族群:學生、中年人

(5)風格設定:懸疑感帶點小小小驚悚。

(6)主色調,輔助色調:深藍色、淺灰色、水藍色

(7)製作動機: 非常喜歡這部電影,以及主角,並且買這本書來看。

(8)製作目的:希望能藉由網頁設計來設計這個主題的版面。

預期效果:呈現擁有自我風格的雙欄式網頁 ,很有成就感。



Edited 4 time(s). Last edit at 01/11/2017 11:13PM by 1045445074.
(編輯記錄)

(1)作業網址:http://mepopedia.com/~web105-2b/final/final-1045445092
(2).
1.製作作業的時間:超過24小時
2.有無遇到的問題: Actor演員的頁面的back沒辦法靠右,雙欄部分的命名苗點在網路上查,大家都說cc版的命名苗點被移除掉了,所以雙欄部分沒辦法做命名苗點。
3.製作心得與感想:感覺愈到後面,雖然學得越多,但問題也會跟著變多。
有時候在做網頁時真的精神要非常好,不然都會搞錯或是看程式碼看到眼睛花掉sad smiley
4.本學期於網頁設計課程上的收穫:
剛開始碰'ˇ葉時會有一種新鮮感,但後來也快被程式碼給搞瘋了sad smiley
在幾次的作業裡又學到了不一樣的東西,感覺很好玩,雖然在做的方面有點花時間,也會遇到很多問題,但完成後也會小有成就感。

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

範例參考(可下載參考附檔的做法):
http://imgur.com/ZE8FDHU

(4)主要瀏覽族群:大眾皆可
(5)主色調,輔助色調,風格設定: 以背景的紫色來呈現出神秘而奇幻的感覺,則黃色是想呈現華麗的感覺,這兩種顏色都是去吸header圖片裡的顏色。
(7)製作動機:喜歡看魔鏡夢遊的電影,也喜歡提姆波頓的創作。
(8)製作目的: 想以夢遊仙境的風格來做做看網頁的設計。
預期效果:還有很多地方需要再改進,東西還沒有很完整。

(8)資料蒐集分析
https://zh.wikipedia.org/zh-tw/%E9%AD%94%E5%A2%83%E5%A4%A2%E9%81%8A



Edited 2 time(s). Last edit at 01/11/2017 02:52PM by 1045445092.
(編輯記錄)

(1)作業網址: http://mepopedia.com/~web105-2b/final/final-1045445119
(2).
1.製作作業的時間:1天~2天
2.有無遇到的問題: 熟悉的做很快,但不會的還是不會
3.製作心得與感想: 做出來很開心,中途一直反覆著改,做這個好累壓~
4.本學期於網頁設計課程上的收穫: 學會網頁設計, 知道如何做出一個網站,收穫良多!


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

(3) 尺寸與架構設定:

(4) 風格設定:可愛、簡單
(5) 主色調 : 淺色系(淺藍、淺黃、粉紅...)
(6) 製作動機:
大家都喜歡的插畫家,我也很喜歡,因為很可愛所以想製作出來
(7) 製作目的:希望讓更多人知道kanahei很可愛~

預期效果: 有雙欄又有可愛風格的網站
(9)資料蒐集分析:http://www.newii.com.tw/index.php?type=top&arem=103

(1)作業網址:http://mepopedia.com/~web105-2b/final/final-1045445053
(2).
1.製作作業的時間: 3~4天
2.有無遇到的問題: 雙欄設定會做的不順,但都順利解決了
3.製作心得與感想: 除了雙欄的部分之外,都可以~
4.本學期於網頁設計課程上的收穫: 熟悉了很多的語法,雖然還有很多要學,但會努力的!


前置作業
(1)網站主題: 月歌。(ツキウタ。)
(2)導覽列架構設定


(3)尺寸:



(4)主要瀏覽族群:大眾
(5)風格設定: 依團體形象去做
(6)主色調,輔助色調: 黑白,灰
(7)製作動機:因為喜歡Idol(偶像)
(8)製作目的:可以了解更多Idol(偶像)~~

資料蒐集分析
相關網站列表與分析:
http://tsukiuta.com/
https://zh.moegirl.org/zh-hant/%E6%9C%88%E6%AD%8C

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

(2).
1.製作作業的時間:一週

2.有無遇到的問題:無

3.製作心得與感想:多學了不一樣的東西hot smiley

4.本學期於網頁設計課程上的收穫:從一開始什麼都不會到現在學會了許多語法,也不斷的在增加spinning smiley sticking its tongue out
前置作業
(1)網站主題 Jimmy幾米
(2)導覽列架構設定:
(3)尺寸:
(4)主要瀏覽族群:大人小孩都適合
(5)風格設定:可愛童話風格
(6)主色調,輔助色調: 粉色
(7)製作動機:讓大家更認識幾米和作品
(8)製作目的: 看見不一樣的風格

(9)資料蒐集分析:http://www.jimmyspa.com/



Edited 5 time(s). Last edit at 01/12/2017 10:31AM by 089.
(編輯記錄)

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

(2).
1.製作作業的時間:5天

2.有無遇到的問題:有,但多虧老師都解決了smiling smiley

3.製作心得與感想:覺得這次做得有比上次更進步一點了,也懂更多網頁方面上的知識,但
還是有很多需要加強與了解的地方,網頁是個很深奧的東西,希望能夠慢慢消化它們,學習
更多網頁上的編排設計,做完後覺得很有成就感,期待下學期的網頁能夠更進步,也希望之
後也可以幫自己設計一個專屬的網頁。

4.本學期於網頁設計課程上的收穫:多學習到一個新的領域覺得很開心,而且也又多認識了
一個軟體,以前一直很好奇網頁是怎麼做的,現在自己做出來才覺得沒那麼簡單,老師也教
得很詳細,不懂也有影音跟講義可以看,解決我很多問題,覺得收穫良多。

前置作業
(1)網站主題:哈士奇husky

(2)導覽列架構設定:


(3)尺寸:


(4)主要瀏覽族群:給喜歡husky的人

(5)風格設定: 因為哈士奇是屬於寒帶犬所以在配色及風格上用於較冷色調,搭配寒帶
溫暖的陽光讓畫面看起來更舒服。
(6)主色調,輔助色調:主色調為藍色、黑色 ,輔助色為淺黃、咖啡

(7)製作動機:因為本人非常喜歡哈士奇,不管是牠的個性還是外表都深得我心,所以決定
為牠做個網站

(8)製作目的:讓喜歡哈士奇的人們在飼養前可以多做一點功課,多了解他們,不要再衝動下養他們

(9)資料蒐集分析:http://www.twwiki.com/wiki/%E5%93%88%E5%A3%AB%E5%A5%87



Edited 2 time(s). Last edit at 01/11/2017 07:45PM by 1045445188.
(編輯記錄)

(1)作業網址:http://mepopedia.com/~web105-2b/final/midterm-1045445035
(2).
1.製作作業的時間:9hr
2.有無遇到的問題: 重做了很多次
3.製作心得與感想: 天啊!網頁設計師不是人做的 好累!但完成時就是成就感
4.本學期於網頁設計課程上的收穫: 總算是會做一點點了

前置作業
(1)網站主題: JJ 林俊傑

(4)主要瀏覽族群: JJ的歌迷
(5)風格設定: 簡單低調
(6)主色調,輔助色調: 黑灰白
(7)製作動機: 自己本身就很喜歡JJ
(8)製作目的: 想多了解JJ



Edited 1 time(s). Last edit at 01/11/2017 10:18PM by 1045445035.
(編輯記錄)

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

(2).
1.製作作業的時間:一週

2.有無遇到的問題:無

3.製作心得與感想:做網頁真的超好玩啦thumbs up

4.本學期於網頁設計課程上的收穫:第一次接觸網頁就遇到這麼認真的老師 就此愛上網頁設計 希望下學期進階網頁可以更加厲害ㄎㄎspinning smiley sticking its tongue out
前置作業
(1)網站主題:畢卡索

(2)導覽列架構設定:


(4)主要瀏覽族群:all

(5)風格設定:畢卡索作品顏色來設計

(6)主色調,輔助色調:粉藍黃

(7)製作動機:喜歡畢卡索的風格。

(8)製作目的:讓更多人能注意。
預期效果: 深入地去瞭解畢卡索

(9)資料蒐集分析:畢卡索網頁

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

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


2.有無遇到的問題:無

3.製作心得與感想:對網頁的架構更佳熟悉了,雖然過程中由遇到一些小問題,但還是靠自己解決了,
在製作雙欄的時候最麻煩,是看著老師的影片一步一步做的,最後做完真的很有成就感。

4.本學期於網頁設計課程上的收穫:一開始做最簡單的網頁都有問題,還好有老師的一步一步細心指導,
讓甚麼都不熟悉的我現在做網頁比較有樣子了,雖然有些是慢慢摸索,但還好有老師的影片,真的收穫很多。

前置作業
(1)網站主題:super junior

(2)導覽列架構設定:

(3)尺寸:


(4)主要瀏覽族群:男女老少

(5)風格設定:活婆可愛的風格

(6)主色調,輔助色調:只要是粉色系

(7)製作動機:從國中就很喜歡他們,雖然現在的主流團體不是他們,但還是想讓更多人知道他們。

(8)製作目的:讓更多人了解他們



Edited 4 time(s). Last edit at 01/15/2017 07:56PM by kiki2007810.
(編輯記錄)

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

(2).
1.製作作業的時間:一週

2.有無遇到的問題:無

3.製作心得與感想:原本都不會做的網頁越來越看得懂程式碼
4.本學期於網頁設計課程上的收穫:學會如何做網頁
前置作業
(1)網站主題:綠洲合唱團

(2)導覽列架構設定:


(4)主要瀏覽族群:all

(5)風格設定:軍綠

(6)主色調,輔助色調:黑

(7)製作動機:給熱愛搖滾的人

(8)製作目的:讓綠洲合唱團發揚光大

預期效果: 能聆聽綠洲的完美

(9)資料蒐集分析:維基百科

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

(2).
1.製作作業的時間:3HR

2.有無遇到的問題:無

3.製作心得與感想:小難

4.本學期於網頁設計課程上的收穫:收穫滿滿
前置作業
(1)網站主題:MAZDA

(2)導覽列架構設定:


(4)主要瀏覽族群:全部

(5)風格設定:MAZDA風

(6)主色調,輔助色調:黑紅

(7)製作動機:我愛MAZDA

(8)製作目的:我愛MAZDA
預期效果: 希望大家都買MAZDA

(9)資料蒐集分析:MAZDA官網

完成品
(1)作業網址:http://mepopedia.com/~web105-2b/final/final-1045445104
(2)
1.製作作業的時間: 很多天
2.有無遇到的問題:很多問題 但還是硬做完了 回覆的網頁和交的檔案開起來不同,回覆的網頁圖片跑不出來,但交在FZ的檔案又是正常的
3.製作心得與感想: 學到更多的東西了
4.本學期於網頁設計課程上的收穫:原來網頁是這樣出來的
前置作業
(1)網站主題: 名偵探柯南
(2)導覽列架構設定: http://imgur.com/sXXS3DP
(3)尺寸:http://imgur.com/fpFE7EL
(4)主要瀏覽族群:各年齡層
(5)風格設定:日式
(6)主色調:綠
(7)製作動機:因個人喜歡柯南
(8)製作目的:讓大家知道柯南的故事
預期效果:完整的沒有問題的網頁

(9)資料蒐集分:呃.......很多



Edited 1 time(s). Last edit at 01/12/2017 11:59AM by 1045445104.
(編輯記錄)

(1) 作業網址: http://mepopedia.com/~web105-2b/final/final-1045445065
(2).
 1. 製作作業的時間:2d
 2. 有無遇到的問題:N
 3. 製作心得與感想:老師都留得很明確



Edited 2 time(s). Last edit at 01/12/2017 12:12PM by 1045445065.
(編輯記錄)

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

(2).
1.製作作業的時間:3HR

2.有無遇到的問題:無

3.製作心得與感想:難

4.本學期於網頁設計課程上的收穫:學會網頁
前置作業
(1)網站主題:ONE PIECE

(2)導覽列架構設定:


(4)主要瀏覽族群:全部

(5)風格設定:神秘

(6)主色調,輔助色調:黑灰白

(7)製作動機:愛看 ONE PIECE

(8)製作目的:想成為航海王
預期效果: 還不錯

(9)資料蒐集分析:GOOGLE

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

製作作業的時間:不知道到底幾小時
有無遇到的問題:雙欄的地方搞很久
製作心得與感想:第一次做網頁做到挫折感超重
本學期於網頁設計課程上的收穫:還是覺得網頁設計很好玩,有事沒事還是會想自己做喜歡的網頁當練習

(1)作業網址: http://mepopedia.com/~web105-2b/final/final-1045445086
(2).
1.製作作業的時間: 2天
2.有無遇到的問題: 連結跑掉
3.製作心得與感想: 很複雜
4.本學期於網頁設計課程上的收穫:網頁真的好難喔 下學期希望可以加油



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

(3)尺寸:

(4)主要瀏覽族群:各年齡層
(5)風格設定:黃色
(6)主色調,輔助色調:白色
(7)製作動機: 我很喜歡他們
(8)製作目的: 讓大家更加認識他們
預期效果:讓大眾家了解

(1) 作業網址:http://mepopedia.com/~web105-2b/final/final-1045445152
(2)
 
1. 製作作業的時間:5~6小時

2. 有無遇到的問題:基本上是沒什麼問題
3. 製作心得與感想:覺得雙欄式真的會使頁面更加精美 很棒的的感覺 覺得學會了很多


(1) 網站主題:步步系列

(2) 導覽列架構設定:

(3)尺寸 :


(4)主要瀏覽族群:喜愛步步系列以及古裝劇的人

(5)風格設定:神秘
(6)主色調,輔助色調:主色調為灰紫,輔助色是淺灰以及一些淺紫色

(7)製作動機:因為我很喜歡看古裝劇,因而聯想到部部有出許多系列,所以就來做做看

(8)製作目的:讓更多人了解步步系列的事




Edited 2 time(s). Last edit at 01/13/2017 12:33AM by 1045445152.
(編輯記錄)

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

1.製作作業的時間: 4天 
2.有無遇到的問題: 都有順利解決 
3.製作心得與感想: 很多細部的東西很久 
4.本學期於網頁設計課程上的收穫:常常小改一個地方,很多其他的碼就要跟著改...崩潰 


前置作業
(1)網站主題:gogoro
(2)導覽列架構設定:
http://imgur.com/4GWjZdX
http://imgur.com/J8MBNdA
(3)尺寸: 1200px 
(4)主要瀏覽族群:喜歡科技跟機車的人 
(5)風格設定: 低調 明瞭
(6)主色調:黑色 輔助色調:紫色粉色 
(7)製作動機:喜歡gogoro
(8)製作目的:用喜歡的東西學網頁設計...
(9)資料蒐集分析:www.gogoro.com



Edited 1 time(s). Last edit at 01/14/2017 12:48AM by 1045445122.
(編輯記錄)

(1)作業網址: http://mepopedia.com/~web105-2b/final/final-1045445110
(2).
1.製作作業的時間:一天半
2.有無遇到的問題:在css設定有遇到一些問題 ,連結太多,容易搞亂
3.製作心得與感想:在中間幾度陷入崩潰,做完很有成就感
4.本學期於網頁設計課程上的收穫:原來語法的每個指令都是相關聯的,了解稻作網頁也是很不容易

前置作業
(1)網站主題:星座
(2)導覽列架構設定:簡介(inend).個性(character).特質(story).愛情(love).影片(film)
(3)尺寸: 900px
(4)主要瀏覽族群:針對對星座感興趣的人
(5)風格設定: 配合星座以星空的顏色(紫色.水藍色.粉色...)
(6)主色調,輔助色調:紫色.水藍色.粉色
(7)製作動機:對星座很感興趣,所以決定做這類的
(8)製作目的:讓大眾了解我們也跟自己星座的特質與影響息息相關 ,做為參考用
預期效果:讓大家對星座有基本的認識
(8)資料蒐集分析:http://www.starsignhk.com/horoscope/



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

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 冷酷風格
2.有無遇到的問題 N
3.製作感想 N
4.製作作業的時間 2hr

(1)作業網址: http://mepopedia.com/~web105-2b/final/final-1045445107
(2).
1.製作作業的時間: 2天半
2.有無遇到的問題: 幾乎都是問題
3.製作心得與感想: 一定要好好學習 不可以再偷懶
4.本學期於網頁設計課程上的收穫:雖然常常偷懶 不過還是有稍微的認識了DW這個東西,也知道其實做完網頁是非常具有成就感的