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

資料夾內含:
(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/10前)
[color=#FF0066]請將這項放置於文章最前面[/color]
(1)作業網址:
(2).
1.製作作業的時間:
2.有無遇到的問題:
3.製作心得與感想:
4.本學期於網頁設計課程上的收穫:
[color=#CC0066]4.請務必在1/0前回覆,否則為遲交[/color]


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

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

(3)尺寸:


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

(8)資料蒐集分析

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

◎相關網站列表與分析:



[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]

6. 學長姐作品參考


-

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


作業參考
(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

[hr]

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

http://youtu.be/JhWaXP7wCrI



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

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

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

2.網頁主題:Summer story-金魚

● 欲呈現風格:水墨、灑脫、自在、現代

● 網頁架構與內容主色系:

背景-白色,黑色
導覽列-白底黑字、橘底白字
分隔線-橘色
內容-灰色

● 網頁配色重點為效仿金魚身上標準色系,分別為白色、橘色、黑色等色系, 運用
重點色系分布於網頁中,以亮色系橘色作為標題色系,內文則以灰色表現, 與背景
黑白分明,呈現潑墨色彩,並帶有現代感,整體網頁欲呈現風格為灑脫、自在, 如
同金魚自在悠遊的樣貌,心境自然而然的平靜,水面如鏡,清澈見底之意。

● 製作動機:看著悠游自在的金魚,心境感到暢快,在一片翠綠下悠然而游, 格外
典雅, 在夏日歡樂的慶典下,可謂夏季風物詩,因此網頁取名為夏天的故事,在這
個網頁中,將 會呈現金魚簡介,品種、照顧方式、關於金魚的相關藝術作品,以及
視頻,夏日的故事不會因冬天的到來而結束,故事才正要開始。

3.有無遇到的問題:老師講義詳細描述,並無遇到問題

4.製作感想 :

本次作業重點為雙欄導覽列的製作,因為之前先行嘗試製作導覽列,按照老師講義
逐步製作,剛開始會因為雙欄導覽列的CSS分別設定,會有些繁複,做了兩三頁後
,自然而然地會了解每個設定的功能,學期即將結束,一個學期的學習與製作,從
一開始的單欄網頁,逐漸進階成有系統的雙欄導覽列,配色上也會因之前的經驗和
網頁的主題而越顯豐富,配色方面也是製作網頁時較花時間的地方,網頁編排倒是
有一貫的風格,配色則要因應網頁的主題以及呈現的質感,這次網頁較為簡潔,運
用大量的留白,並穿插橘、黑等金魚標準色系,使簡潔的網頁更加豐富,也因為留
白因素,有幾頁較為空洞,因此用標題做小變化,使網頁加以變化,簡單俐落的設
計並不會比較好做,反而要考慮主題與內容的關係,包含配置,配色等,以免網頁
空虛,每個不同風格的網頁皆有可以學習參考的依據與目標,網頁設計的製作是歡
新愉悅的,保持著歡喜的心情,將壓力化為動力,也能讓自己更投入在這個作業上

5.製作作業的時間:24小時以上


(1) 導覽列架構設定:



(2) 尺寸與架構設定:



(3) 製作內容:

A. Story (檔名:index.html)

介紹金魚歷史以及習性、品種等基本簡介

B. Variety (檔名:works.html)

介紹常見金魚尾鰭以及常見品種,如朱文錦、扇尾金魚、彗星金魚、琉金金魚
獅頭金魚、蘭壽金魚、 貓熊金魚等

C. Care (檔名:story.html)

介紹飼養金魚所需準備的相關用品以及過濾器等,並且簡述飼養金魚時所需注
意的事項

D. Works (檔名:links.html)

介紹藝術家深堀隆介-3D金魚藝術,深堀隆介熱愛金魚,他以樹酯層疊的方式,
畫出具有立體感,悠游自在的金魚, 網頁主要介紹深堀隆介的繪畫過程以及相
關影音。

E. Video (檔名:video.html)

金魚相關視頻,內容包含金魚欣賞以及養殖照顧等相關影片,網頁後段有金魚
相關網站的連結。

(4) 主要瀏覽族群:大眾



Edited 18 time(s). Last edit at 12/24/2016 04:39PM by 松本.豪.
(編輯記錄)

(1)作業網址: http://mepopedia.com/~web105-2c/final/final-1045445015
(2).
1.製作作業的時間: 超過一個禮拜~~~每天有每天的進度
2.有無遇到的問題: 一開始會有一些問題~但陸續慢慢找到解決的方法 或問老師以及同學
3.製作心得與感想: 了解到網頁的基礎與設計技能,一開始會覺得很複雜,不太理解,但後面之後慢慢地上手,也陸續耐心的一個個找到問題的解決方法,發現網頁設計其實很多變化,挺有趣的,
4.本學期於網頁設計課程上的收穫:連結的應用,雙欄的設計,表格整理的方法與配置,基本的技能與設計

前置作業

(1)網站主題:藏物市集

(2)導覽列架構設定



(3)尺寸:




(4)主要瀏覽族群: 大眾族群都皆可觀賞,喜歡市集的朋友們更是歡迎前來參觀

(5)風格設定: 簡單,融入插畫風

(6)主色調,輔助色調: 以粉嫩系為主,以明度高且不搶眼的色系來做以輔助

(7)製作動機: 因為我很喜歡悠閒的時刻去逛逛市集,欣賞別人的創作設計,了解別人設計的理念與故事,從中學習更多元文化的創意與巧思,希望將自己喜歡做的事情,分享給大家一同前去參觀,還有很多不同的主題市集,等著大家發現~!

(8)製作目的: 我覺得逛市集可以激發自己很多的創作靈感,也可以同時了解到每一個人身上不同的故事,希望偷過網路導覽,能讓更多人了解市集的資訊,而對我們學設計這方面也可以激發我們的腦力與創意,創作出更多不同的獨特創作作品!!



Edited 7 time(s). Last edit at 01/11/2017 11:18AM by 王宜雯.
(編輯記錄)

(1)作業網址: http://mepopedia.com/~web105-2c/final/final-1045445015
(2).
1.製作作業的時間: 超過一個禮拜~~~每天有每天的進度
2.有無遇到的問題: 一開始會有一些問題~但陸續慢慢找到解決的方法 或問老師以及同學
3.製作心得與感想: 了解到網頁的基礎與設計技能,一開始會覺得很複雜,不太理解,但後面之後慢慢地上手,也陸續耐心的一個個找到問題的解決方法,發現網頁設計其實很多變化,挺有趣的,
4.本學期於網頁設計課程上的收穫:連結的應用,雙欄的設計,表格整理的方法與配置,基本的技能與設計

前置作業

(1)網站主題:藏物市集

(2)導覽列架構設定



(3)尺寸:


(4)主要瀏覽族群: 大眾族群都皆可觀賞,喜歡市集的朋友們更是歡迎前來參觀

(5)風格設定: 簡單,融入插畫風

(6)主色調,輔助色調: 以粉嫩系為主,以明度高且不搶眼的色系來做以輔助

(7)製作動機: 因為我很喜歡悠閒的時刻去逛逛市集,欣賞別人的創作設計,了解別人設計的理念與故事,從中學習更多元文化的創意與巧思,希望將自己喜歡做的事情,分享給大家一同前去參觀,還有很多不同的主題市集,等著大家發現~!

(8)製作目的: 我覺得逛市集可以激發自己很多的創作靈感,也可以同時了解到每一個人身上不同的故事,希望偷過網路導覽,能讓更多人了解市集的資訊,而對我們學設計這方面也可以激發我們的腦力與創意,創作出更多不同的獨特創作作品!!



Edited 5 time(s). Last edit at 01/11/2017 11:19AM by 王宜雯.
(編輯記錄)

(1)作業網址: http://mepopedia.com/~web105-2c/final/final-1045445018
(2).
1.製作作業的時間: 好幾天
2.有無遇到的問題: 一開始覺得非常難聽不懂,後來慢慢看講義自己摸索
3.製作心得與感想: 我終於自己架構出一個完整的網頁了!
4.本學期於網頁設計課程上的收穫:基本的網頁製作及美觀設計

前置作業

(1)網站主題:蘑菇人方吉

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


(3)尺寸:
http://imgur.com/a/X6z9A


(4)主要瀏覽族群: 每個年齡層均可觀看,偏向女性族群
(5)風格設定: 療癒簡單

(6)主色調,輔助色調:以暖色調為主

(7)製作動機: 當時很紅的手機遊戲,受大家喜歡
(8)製作目的:可以讓大家更瞭解方吉的可愛spinning smiley sticking its tongue out

(1)作業網址: http://mepopedia.com/~web105-2c/final/final-1045445036/topp.html
(2).
1.製作作業的時間: 超過一個禮拜!!!!
2.有無遇到的問題: 都解決了~
3.製作心得與感想: 這次又做了自己喜歡的東西,學到了雙欄,發現雙欄的好處是可以讓人更清楚簡潔表達網頁,
而錨點連結的可以讓網頁更便捷,結合期中前與期中後學的東西,網頁更美更好用了,謝謝老師用心的指導~
也希望大家看到我的網頁可以更了解蛋黃哥RRRRRRRsmileys with beer
4.本學期於網頁設計課程上的收穫: 雙欄網頁的用處,表格整理的便利,錨點連結的便捷~

前置作業

(1)網站主題:蛋黃哥 Gudetama

(2)導覽列架構設定
[img]http://i.imgur.com/5DVdv2Y.jpg[/img]

(3)尺寸:
[img]http://i.imgur.com/eJ1ACOe.jpg[/img]

(4)主要瀏覽族群: 普羅大眾

(5)風格設定: 簡單,整潔,好觀賞smiling smiley

(6)主色調,輔助色調: 蛋黃哥黃色,少許橘色,大概K90的黑色

(7)製作動機: 本人太喜歡蛋黃哥的慵懶人生,覺得他跟我很像,所以決定來介紹,並透過網頁讓大家更了解他的一切!

(8)製作目的: 讓大家不要只看見蛋黃哥的懶,要知道他為什麼懶,還有他的生活態度,讓大家一起歡樂放鬆。
預期效果: 呈現有雙欄也有單欄,但不複雜,簡單好瀏覽的網頁。smiling bouncing smiley



Edited 3 time(s). Last edit at 01/09/2017 03:30AM by Peiwei.
(編輯記錄)

(1)作業網址: http://mepopedia.com/~web105-2c/final/final-1045445189
(2).
1.製作作業的時間: 一周一周的累積並不會太費時
2.有無遇到的問題: 我的晴耕雨讀啊sad smiley
3.製作心得與感想: 這次的製作想法是來自於自己,跟以往找來的都是網路資料、圖片比起來更有成就感
4.本學期於網頁設計課程上的收穫: 從一開始連html是什麼都不知道,到現在也會自己設定css樣式了覺得很不容易。
老師一開始感覺講超級快有些還聽不懂,越來越熟悉網頁之後甚至可以超前進度,這堂課真的學到很多關於網頁設定、再變成自己的設計的過程。
希望下學期的網頁設計可以真正的做出屬於自己的網頁。

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



(3)尺寸:


(4)主要瀏覽族群: 青少年、成年人
(5)風格設定: 小文青又帶點俏皮的網頁
(6)主色調,輔助色調: 天藍色、灰色
(7)製作動機: 最近的人們都跟3C日夜相處著,可能時常因為臉書等社交軟體而感到空虛,希望藉由我的推薦可以重拾書本讓閱讀撫慰心情
(8)製作目的: 可以的話,一起進入閱讀的世界吧
預期效果: 藉由我的網頁讓一點點一點點的人們重溫書本的懷抱



Edited 6 time(s). Last edit at 01/03/2017 10:57PM by 1045445189.
(編輯記錄)

(1)作業網址: http://mepopedia.com/~web105-2c/final/final-1045445045
(2).
1.製作作業的時間: 六小時
2.有無遇到的問題: 本來覺得caption的問題很麻煩,後來看久就習慣這樣也蠻好看的
3.製作心得與感想: 終於做完,完全是心血
4.本學期於網頁設計課程上的收穫: 講義跟影片說明得很仔細,不會的可以去那邊看很方便,老師教的也很用心,會了之後真的信心大增。
(1)網站主題: THE1975
(2)導覽列架構設定

(3)尺寸:


(4)主要瀏覽族群:青少年
(5)風格設定: 有點神秘感兼小叛逆
(6)主色調,輔助色調: 主色調為紫色,輔色調是粉色跟藍色
(7)製作動機:讓大家偶爾沉醉在這個歌聲裡
(8)製作目的:想要讓大家知道這個團體
預期效果: 更多人喜歡這個團體



Edited 1 time(s). Last edit at 01/04/2017 12:16AM by 1045445045.
(編輯記錄)

(1)作業網址: http://mepopedia.com/~web105-2c/final/final-1045445162
(2).
1.製作作業的時間:二個禮拜再多一點吧(爆
2.有無遇到的問題:熟練了作業的練習其實都還好
3.製作心得與感想:
從期中後半其實有段時間不想做平常練習,覺得老師講好快啊聽不懂wwwwwww每次都覺得要聽個兩三遍才能上手,雖然講義裡說明得很清楚也不難操作,可是就是不太想動它呢........(乾,不過每節還是有好好的到課喔!
從二個禮拜前開始慢慢地追回進度,也發現越學越有趣,很多CSS語法的細微設定都是我很感興趣的地方,抄筆記的過程中也可以複習和發現以前沒注意到的//不過人以後還是乖乖照著進度走吧XDDDDD不然這次作業太密集了好想放飛他們。
這次依舊做得很有成就感!!雖然資料整理方面花了很多時間、而且還沒能做到最完整有點可惜><><>

4.本學期於網頁設計課程上的收穫:學到架一個網站需要耗費多少心神跟心力,英文的程度感覺也提高不少(笑) 當成果出來的同時也非常感動,如果可以的話希望再繼續精進這一塊,未來想做出專屬於自己的網頁設計!!




前置作業
(1)網站主題: NICONICO網站介紹

(2)導覽列架構設定:


(3)尺寸:


(4)主要瀏覽族群: 大眾族群,或對日本動畫有興趣者。

(5)風格設定: 簡單明瞭、又不會太過單調。

(6)主色調,輔助色調: 黑白兩調為主,加入一些其他較溫暖活潑的顏色!(如:暗紅、咖啡...等等。)

(7)製作動機:

很喜歡NICO網站上一些歌手和一些繪師的歌曲及畫風,也有些是從中誕生出的音樂系統,想為了他們做一次介紹看看讓更多人知道(雖然很多資料看得密密麻麻。

(8)製作目的: 雖然製作主題感覺有些偏日本動漫那類型,但歌真的很好聽!

可是最主要目的是想讓大家認識這些歌手和他們吸引人的嗓音,不能所有人都介紹到真的好痛苦(因為太多),日本也會有團體將歌曲上傳到這個網站上喔,可以去搜尋看看!!



Edited 4 time(s). Last edit at 01/11/2017 12:54AM by j29927381.
(編輯記錄)

(1)作業網址: http://mepopedia.com/~web105-2c/final/final-1045445212
(2).
1.製作作業的時間:2天
2.有無遇到的問題:目前沒有
3.製作心得與感想:有點難複雜
4.本學期於網頁設計課程上的收穫:學會如果架構網頁,還有布置網頁內容的小東西
前置作業
(1)網站主題:三峽老街
(2)導覽列架構設定


(3)尺寸:

(4)主要瀏覽族群:所有的人
(5)風格設定: 灰色、簡潔、復古
(6)主色調,輔助色調:深灰色、淺灰、白色
(7)製作動機:因為三峽很美、也很多吃的,很適合與家人一起去走走
(8)製作目的:想讓大家知道三峽老街有多好玩

完成品(1/10前)
請將這項放置於文章最前面
(1)作業網址: http://mepopedia.com/~web105-2c/final/final-1045445042
(2).
1.製作作業的時間: 一週
2.有無遇到的問題: 很多...都是小問題
3.製作心得與感想: 終於做完了...
4.本學期於網頁設計課程上的收穫:至少我好好的把網頁做出來了,覺得有成就
4.請務必在1/0前回覆,否則為遲交


前置作業
(1)網站主題:蘇打綠
(2)導覽列架構設定
http://imgur.com/a/7cAhd

(3)尺寸:


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

(8)資料蒐集分析

完成品(1/10前)
請將這項放置於文章最前面
(1)作業網址: http://mepopedia.com/~web105-2c/final/final-1045445042
(2).
1.製作作業的時間: 一週
2.有無遇到的問題: 很多...都是小問題
3.製作心得與感想: 終於做完了...
4.本學期於網頁設計課程上的收穫:至少我好好的把網頁做出來了,覺得有成就
4.請務必在1/0前回覆,否則為遲交


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

(3)尺寸:


(4)主要瀏覽族群:各年齡層
(5)風格設定: 宇宙
(6)主色調,輔助色調:暗色與亮色對比
(7)製作動機: 喜歡蘇打綠
(8)製作目的: 目的是為了讓自己做網頁不要太過煩躁
預期效果: 讓大眾家了解蘇打綠

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

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

(2).
 1. 製作作業的時間:超過二十四小時
 2. 有無遇到的問題:表格的對齊問題 已解決
 3. 製作心得與感想:雙欄式的網頁真的比較難
          但是做完真的超級開心的



(1) 網站主題:少女時代
(2) 導覽列架構設定:

(3) 尺寸與架構設定:

(4) 風格設定:復古神秘
(5) 主色調,輔助色調:酒紅、藍、;白
(6) 製作動機: 很喜歡這個團體
(7) 製作目的:讓更多人認識少女時代

預期效果: 呈現擁有神秘的少女時代



Edited 5 time(s). Last edit at 01/09/2017 07:49PM by 1045445009.
(編輯記錄)

1.作業網址: http://mepopedia.com/~web105-2c/final/final-1045445084/commodity.html

2.網頁主題:larva逗逗蟲

● 風格:活潑溫暖

● 網頁架構與內容主色系: 主要色系為橘黃色


3.有無遇到的問題:沒有

4.製作感想 : 這堂課的收穫很多!


5.製作作業的時間:24小時以上


(1) 導覽列架構設定:

[img]http://i.imgur.com/I0GHeAR.jpg?1[/img]

(2) 尺寸與架構設定:

[img]http://i.imgur.com/icZN5x2.jpg?3[/img]


6.主要瀏覽族群:各年齡層

7.製作動機: 喜歡larva

8.製作目的: 學習架設網頁

預期效果:大家會覺得有趣!



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

(1)作業網址: http://mepopedia.com/~web105-2c/final/final-1045445174
(2).
1.製作作業的時間: 兩週
2.有無遇到的問題:有
3.製作心得與感想: 很辛苦
4.本學期於網頁設計課程上的收穫:學會如何架設一個好看的網站


前置作業
(1)網站主題:一風堂
(2)導覽列架構設定
http://imgur.com/a/yOkFx
(3)尺寸:

http://imgur.com/a/S7Y8C

((4)主要瀏覽族群:大眾
(5)風格設定: 可口美食
(6)主色調,輔助色調: 主要色調為粉橘色,輔助為紅色、桃色、橘色
(7)製作動機: 想幫熱門拉麵品牌製做一個網頁
(8)製作目的: 整理品牌資訊
預期效果: 提供大家一風堂的相關資訊

(8)資料蒐集分析
[url=http://www.ippudo.com.tw/]http://www.ippudo.com.tw/[/url]



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

(1)作業網址: http://mepopedia.com/~web105-2c/final/final-1045445120
(2).
1.製作作業的時間: 5-6小
2.有無遇到的問題:有
3.製作心得與感想: 很辛苦
4.本學期於網頁設計課程上的收穫:對網頁越來越有興趣


前置作業
(1)網站主題:犬夜叉
(2)主要瀏覽族群:喜歡犬夜叉的人
(3)風格設定: 動漫
(4)主色調,輔助色調: 藍色
(5)製作動機: 一起喜歡犬夜叉
(6)製作目的: 讓更多人知道犬夜叉多好看
預期效果: 讚讚

(7)資料蒐集分析
https://zh.wikipedia.org/zh-tw/%E7%8A%AC%E5%A4%9C%E5%8F%89

(1)作業網址: http://mepopedia.com/~web105-2c/final/final-1045445141/
(2).
1.製作作業的時間: 半天左右吧
2.有無遇到的問題: 沒
3.製作心得與感想: 小有成就感,可是好累
4.本學期於網頁設計課程上的收穫: 從甚麼都不會到現在可以做出一個看起來煞有其事的網站感覺很不錯。



前置作業
(1)網站主題: 沒事啦。
(2)導覽列架構設定
[img]http://i.imgur.com/QcaJrCe.jpg[/img]
(3)尺寸:
[img]http://i.imgur.com/08D4J4J.jpg[/img]
(4)主要瀏覽族群: 都可以
(5)風格設定: 黑白、簡潔
(6)主色調,輔助色調: 白、黑
(7)製作動機: 消費自己
(8)製作目的: 消費自己
預期效果:看上去不會醜醜的



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

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

(2).請回答以下問題:

1.導覽列配色與風格設定:

《Mr. Pickles》
這次的主題比較偏向恐怖風格~他是一隻撒旦養過的牧羊犬,
卡通隱含(其實都很明刀明槍)了太多撒旦教、光明會和神秘學的訊息,
和每集必有的血腥殺人或惡魔祟拜鏡頭,
所以很快就吸引了數以萬計的陰謀論者的愛戴和觀看。
背景就放跟牧羊犬相似的配底~
一開始也是因為純黑色對於眼睛太過刺激,
所以用比較緩和的灰色~~~~
希望觀看的人都跟我一樣喜愛他~

2.有無遇到的問題?

對於到現在雖然網頁設計基本上是沒有太大的困難,
但真的好亂...時常會忘記要做甚麼然後開始放空...哈哈
但是一有問題同學就是最好的維基百科,
真的很謝謝他~

3.製作感想

這次用我一直很喜歡的國外限制級動畫,
《Mr. Pickles》絕對是一部兒童不宜的動畫,
充斥各種噴血、猥褻的畫面,
隨著劇情發展每每都有一種「God!我到底看了什麼!」的感覺,
雖然獵奇到不行,但這樣的美式幽默真的很舒壓呢!

4.製作作業的時間

大概1~2天,扣除吃喝玩樂

(3).導覽列架構設定



(4).尺寸與架構設定




(5).製作內容:

A.(檔名:index.html)

第一頁主要是開頭,
希望藉由此頁心讓大家初步了解《Mr. Pickles》。

B.(檔名:works.html)

第二頁則是介紹《Mr. Pickles》動畫中幾位基本重要腳色。

C.(檔名:video.html)

第三頁展示出每篇作品的大綱介紹,
讓人不知道內容但可以稍微的看一下,
知道對於此篇有沒有興趣。

D.(檔名:links.html)

第四頁也就是貼心的超連接,
基本上我設計這網站的風格都差不多,
因為他很單純,雖然看似簡單色調,
但我在視覺方面做了不少努力以及調整。

E.(檔名:story.html)

最後就是整理,
還有對於這個作品的看法和推薦的內容。



Edited 5 time(s). Last edit at 01/06/2017 04:39PM by Hus,Ching-Chiech.
(編輯記錄)

(1)作業網址: http://mepopedia.com/~web105-2c/final/final-1045445003
(2).
1.製作作業的時間: 我只能說很久很久.......
2.有無遇到的問題: 中途很多問題,但試著在網路上尋找到解決辦法了 (ง •̀_•́)ง
3.製作心得與感想: 做出完整的得網頁真的超開心,尤其又是自己喜歡的主題
4.本學期於網頁設計課程上的收穫:
在還沒接觸到網頁設計時其實是有點抗拒的,但學習了之後就會想要學到更多的功能或效果,希望有一天真的能製做出一般在網路上瀏覽到那種很美觀的網站。
前置作業
(1)網站主題: 美劇 HUMANS
(2)導覽列架構設定

(3)尺寸:

(4)主要瀏覽族群: 同樣有在追美劇的人 (o´ω`o)ノ
(5)風格設定: 由於主題是一部在敘述機器人與人類之間的種種矛盾,基本上都盡量選用帶有些微科技感又穩重的顏色。
(6)主色調,輔助色調: 主要色調是藍綠色,輔助色調有白色及偏白的藍
(7)製作動機:原本就有在追美劇,這部有提到人類未來與機器人之間的矛盾,當機器人擁有人類的情感,那他有沒有權力去爭取"人權"。
(8)製作目的:想藉由網頁介紹更多人去看這部美劇,可以一起進行討論。
預期效果: 總是期望能在美觀一些,像是回頂部時有滑動的效果之類的,待研究.....
(8)資料蒐集分析
http://www.amc.com/shows/humans/exclusives/about



Edited 3 time(s). Last edit at 01/07/2017 01:58AM by 朱盈穎.
(編輯記錄)

(1)作業網址: http://mepopedia.com/~web105-2c/final/final-1045445069
(2).
1.製作作業的時間: 很久
2.有無遇到的問題: 很多問題,看講義再慢慢摸索,問同學就解決了~
3.製作心得與感想: 網頁設計完全做完真的很有成就感,
雖然設定什麼的很多很麻煩,有時候都會搞混,只要搞懂了那個成就感大爆增,也更開心做完網頁~
4.本學期於網頁設計課程上的收穫: 一開始只有知道一點點,到現在我可以完成網頁,真的超級開心~~~



前置作業
(1)網站主題: 愛麗絲夢遊仙境
(2)導覽列架構設定

View post on imgur.com



View post on imgur.com


(4) 風格設定:可愛
(5) 主色調,輔助色調:藍色
(6) 製作動機: 愛麗絲超級可愛,超級棒~
(7) 製作目的:因為我很喜歡愛麗絲,想讓大家更知道~

預期效果: 可愛的愛麗絲



Edited 4 time(s). Last edit at 01/07/2017 06:49PM by 1045445069.
(編輯記錄)

1025445200-4B-連怡婷
(1) 作業網址:http://mepopedia.com/~web105-2c/final/final-1025445200
(2).
 1. 製作作業的時間:超過十二小時
 2. 有無遇到的問題:一直搞混設定,越做越多東西的時候設定越複雜,一直搞混欄位的設定

 3. 製作心得與感想:雙欄是真的好複雜,很仍一少打一個甚麼就整個網站壞掉,找半天才找到哪裡打錯,真的好難><

-

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

(4) 風格設定:簡約、清爽

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

(6) 製作動機:
    因為我很喜歡史努比、他真的非常可愛,所以希望製作介紹他的網站~讓更多人可以了解他的可愛

(7) 製作目的:讓更多人知道史努比

預期效果: 呈現擁有配得上史努比的雙欄式網頁



Edited 1 time(s). Last edit at 01/09/2017 06:48AM by 1025445200.
(編輯記錄)

(1)作業網址: http://mepopedia.com/~web105-2c/final/final-1025445186/index.html
(2).
1.製作作業的時間: 一星期
2.有無遇到的問題: 無
3.製作心得與感想: 做了自己喜歡的東西 熟能生巧
4.本學期於網頁設計課程上的收穫: 雙欄網頁的用處,表格整理的便利,錨點連結的便捷

前置作業

(1)網站主題:fate

(2)導覽列架構設定
[img]http://i.imgur.com/UW4rIc3.jpg[/img]

(3)尺寸:
[img]http://i.imgur.com/JjuwkW1.jpg[/img]

(4)主要瀏覽族群: 大眾

(5)風格設定: 簡單,整潔,好觀賞

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

(7)製作動機: 喜歡動漫,所以決定來介紹

(8)製作目的: 讓大家了解fate



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

(1)作業網址:http://mepopedia.com/~web105-2c/final/final-1045445120
(2).
1.製作作業的時間: 5-6小
2.有無遇到的問題:有
3.製作心得與感想: 很辛苦
4.本學期於網頁設計課程上的收穫:對網頁越來越有興趣


前置作業
(1)網站主題:犬夜叉
(2)主要瀏覽族群:喜歡犬夜叉的人
(3)風格設定: 動漫
(4)主色調,輔助色調: 藍色
(5)製作動機: 一起喜歡犬夜叉
(6)製作目的: 讓更多人知道犬夜叉多好看
預期效果: 讚讚

(7)資料蒐集分析
https://zh.wikipedia.org/zh-tw/%E7%8A%AC%E5%A4%9C%E5%8F%89

(1)作業網址:http://mepopedia.com/~web105-2c/final/final-1045445102/about.html
(2).
1.製作作業的時間:24小時以上
2.有無遇到的問題:目前沒有
3.製作心得與感想:有點難複雜
4.本學期於網頁設計課程上的收穫:對於網頁的了解,小有成就
前置作業
[img]http://i.imgur.com/suPNiot.jpg[/img]
[img]http://i.imgur.com/D2kddbK.jpg[/img]
(1)網站主題:moomin
(2)導覽列架構設定
(4)主要瀏覽族群:12歲以上
(5)風格設定:可愛
(6)主色調,輔助色調: 主色調為藍綠,輔色調是灰色白色
(7)製作動機:moomin獨特的故事吸引到我
(8)製作目的:想要讓大家知道moomin的故事
預期效果: 更多人喜歡上moomin



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

1.作業網址: http://mepopedia.com/~web105-2c/final/final-1045445195

2.網頁主題:谁的青春不迷茫

● 欲呈現風格:天空蓝

● 網頁架構與內容主色系:

背景-蓝
導覽列-蓝底白字、蓝底蓝字
內容-灰色

3.有無遇到的問題:开始因为顶图大小没设好跑出去了自己还没发现问了同学才知道,
然后又因为图片文件夹名字不对图片不见了,过了好久才发现。

4.製作感想 : 有时候不够仔细,明明一个很简单的错误却要好久才发现。


5.製作作業的時間:好几天


(1) 導覽列架構設定:



(2) 尺寸與架構設定:



(3) 製作內容:

A.剧情介绍 (檔名:index.html)


B.主角(檔名:works.html)


C.影片(檔名:video.html)


D.刘同说过的话(檔名:links.html)


E. 同名小说 (檔名:story.html)
(4) 主要瀏覽族群:大众

(1)作業網址: http://mepopedia.com/~web105-2c/final/final-1045445180
(2).
1.製作作業的時間:有段時間
2.有無遇到的問題: 配色花比較久
3.製作心得與感想: 很有成就感
4.本學期於網頁設計課程上的收穫:學到蠻多東西的


(1)網站主題: 阿里山森林小火車

(2)導覽列架構設定 :


(3)尺寸:


(4)主要瀏覽族群:一般大眾
(5)風格設定:小火車風格
(6)主色調,輔助色調: 紅.淡紅
(7)製作動機: 喜歡阿里山小火車
(8)製作目的:更加熟悉
預期效果: 還行拉有點樣子



Edited 14 time(s). Last edit at 01/10/2017 01:19AM by 時尚時尚最時尚.
(編輯記錄)

(1) 作業網址: http://mepopedia.com/~web100b/final/final-1045445030
(2).
 1. 製作作業的時間:超過二十四小時
 2. 有無遇到的問題:無
 3. 製作心得與感想:雙欄式的網頁真的困難許多,但很開心我玩成了它,克服了許多問題和困難,做完之後很有成就感。

-

(1) 網站主題:BTS 防彈少年團
(2) 導覽列架構設定:

(3) 尺寸與架構設定:

(4) 風格設定:神秘 男性魅力
(5) 主色調,輔助色調:酒紅、白;各種灰色
(6) 製作動機:
    因為喜歡這個團體,他們在舞台上跳舞的時候很吸引我的目光。
(7) 製作目的:讓更多人認識這個團體

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



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

(1)作業網址: http://mepopedia.com/~web105-2c/final/final-1045445147
(2).
1.製作作業的時間: 三天
2.有無遇到的問題: 有
3.製作心得與感想: 本來不是很了解網站製作 現在經過老師指導以及網路商教學 終於有所斬獲了。


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




(3)尺寸:

(4)主要瀏覽族群: 全年齡
(5)風格設定:深色帶點暖色調 別有新海誠作品的風格之感
(6)主色調,輔助色調 : 黑色 深藍色
(7)製作動機: 從高中時代到現在對新海誠導演的作品情有獨鍾,它的作品能夠完美抓住年輕人的心 因此設計之。
(8)製作目的: 可以讓大家多了解新海誠。
預期效果: 因為還有點不熟悉DW的介面因此並無法完美重現腦子的網頁。

1.作業網址: http://mepopedia.com/~web105-2c/final/final-1045445051

2.網頁主題:多啦A夢

● 欲呈現風格:天空蓝

● 網頁架構與內容主色系:

背景-蓝
導覽列-蓝底黑字、蓝底黑字
內容-灰色

3.有無遇到的問題:顶图大小不合,導致圖片無法顯示。

4.製作感想 : 雖然有許多累人的地方,但完成後的成就感也非常大。


5.製作作業的時間:好几天


(1) 導覽列架構設定:


" border="0">




(2) 尺寸與架構設定:



(3) 製作內容:

A.About (檔名:index.html)


B.Works(檔名:works.html)


C.Video(檔名:video.html)


D.Links檔名:links.html)


E.Story (檔名:story.html)
(4) 主要瀏覽族群:大众



Edited 2 time(s). Last edit at 01/10/2017 09:07PM by 曾慶恩.
(編輯記錄)

(1) 作業網址: http://mepopedia.com/~web105-2c/final/final-1045445150
(2)
1. 製作作業的時間:很久
2. 有無遇到的問題:已解決
3. 製作心得與感想:雖然一開始覺得很難,但做完後覺得學習到很多


(1) 網站主題:HURTS
(2) 導覽列架構設定:
[img]http://i.imgur.com/MNn8Yzo.jpg[/img]
(3) 尺寸:
[img]http://i.imgur.com/ulSAJkG.jpg[/img]
(4)主要瀏覽族群:大眾
(5)風格設定:簡約神秘
(6)主色調,輔助色調:黑,灰、白
(7)製作動機:喜歡這個樂團
(8)製作目的:希望更多人能認識HURTS
預期效果:符合這個樂團帶給大眾的感覺



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

(1)作業網址:http://mepopedia.com/~web105-2c/final/final-1045445135/index.html
(2).
1.製作作業的時間:8天
2.有無遇到的問題:無 已解決
3.製作心得與感想: 這次又做了自己喜歡的樂團,真的非常開心,其實做網頁蠻有趣的,可以自己排版想要的樣子,超酷的!
也謝謝老師的努力教導,才可以讓我學得這麼愉快,很期待下學期的課程內容,老師謝謝您! 希望可以讓許多人更認識 hyukoh!
4.本學期於網頁設計課程上的收穫: 了解網頁設計的製作方法

前置作業

(1)網站主題: hyukoh

(2)導覽列架構設定 :




(3)尺寸與架構設定:




(4)主要瀏覽族群: 大眾

(5)風格設定: 簡約和整齊

(6)主色調,輔助色調: 主色調:溫暖的土黃色與大地咖啡色 輔助色調:白色

(7)製作動機: 因為很喜歡他們的歌曲,非主流音樂其實很棒,請一定要聽聽看!

(8)製作目的: 讓大家更加的認識hyukoh這個特別的團體。

(9)預期效果:符和理想的樣子



Edited 10 time(s). Last edit at 01/10/2017 10:57PM by 廖芳如.
(編輯記錄)

(1)作業網址:http://mepopedia.com/~web105-2c/final/final-1045445198
(2).
1.製作作業的時間:好幾天
2.有無遇到的問題:能解決的都解決了
3.製作心得與感想:好麻煩
4.本學期於網頁設計課程上的收穫:至少可以做個有些許樣子的網頁

前置作業
(1)網站主題:東方プロジェート
(2)導覽列架構設定
http://i.imgur.com/MWzK4a1.jpg
(3)尺寸:上表已統一
(4)主要瀏覽族群:核心族群
(5)風格設定:粉色
(6)主色調,輔助色調:粉 紫 紅 白
(7)製作動機:純粹想做
(8)製作目的:想讓更多人知道
預期效果:一個OK的雙欄網站



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

(1)作業網址: http://mepopedia.com/~web105-2c/final/final-1045445018
(2).
1.製作作業的時間: 好幾天
2.有無遇到的問題: 一開始非常不會做,後來看講義自己慢慢摸索
3.製作心得與感想: 我終於自己完成一個網頁了!
4.本學期於網頁設計課程上的收穫:製作出一個算完整的網頁及美觀設計

前置作業

(1)網站主題:蘑菇人方吉

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


(3)尺寸:
http://imgur.com/a/X6z9A


(4)主要瀏覽族群: 各個年齡層均可觀看,主要偏向女性族群

(5)風格設定: 療癒簡單
(6)主色調,輔助色調:以大地色為主,暖色調為輔
(7)製作動機: 是當時很熱門的手機遊戲,受到大家喜歡
(8)製作目的: 可以讓大家更了解方吉的魅力

(1)作業網址: http://mepopedia.com/~web105-2c/final/final-1045445057
1.製作作業的時間: 一週
2.有無遇到的問題: 有 但是大部分都能在講義上找到解答
3.製作心得與感想: 成就感200%,但是覺得能在更好
4.本學期於網頁設計課程上的收穫:其實我不喜歡做網頁,可是可以做自己喜歡的主題就讓我覺得做網頁不會那麼疲憊!而且老師的講義都寫得非常清楚,就算在家做出現問題也可以解決!

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


(3)尺寸:



(4)主要瀏覽族群: 青年族群或音樂愛好人士
(5)風格設定: 清新簡單、天空、海洋
(6)主色調,輔助色調: 水藍色、灰色
(7)製作動機: 王詩安是我很喜歡的一位女歌手,他的歌都非常的好聽!她的歌聲對我來說有療癒的效果!
(8)製作目的: 希望這麼有實力的歌手可以讓更多人知道。
預期效果: 有人因為這個網站去搜尋他的歌或資訊

(8)資料蒐集分析 :https://zh.wikipedia.org/wiki/%E7%8E%8B%E8%A9%A9%E5%AE%89



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

(1)作業網址: http://mepopedia.com/~web105-2c/final/final-1045445177
(2).
1.製作作業的時間: 超過一個禮拜 有時間就做啊
2.有無遇到的問題: 雙欄阿~~~~需要放慢影片速度慢慢慢慢做
3.製作心得與感想: 做完還是覺得好難好難喔
4.本學期於網頁設計課程上的收穫:按鈕按鈕還是按鈕

前置作業

(1)網站主題:愛犬荳荳

(2)導覽列架構設定
http://s3.imgs.cc/img/Ea4wuDD.jpg

(3)尺寸:
http://s2.imgs.cc/img/ogiflHe.jpg

(4)主要瀏覽族群: 大眾族群都皆可觀賞,喜歡毛孩的主人以及對糖尿病的毛還想了解的主人

(5)風格設定: 粉嫩少女荳荳風

(6)主色調,輔助色調: 以粉嫩系為主,再以淡淡的色彩來輔助

(7)製作動機: 因為我家的荳荳患有糖尿病所以希望別人在這方面有問題的話可以照到他們想要的答案

(8)製作目的: 因為荳荳可愛想讓大家知道他有多可愛 也希望家中有糖尿病毛孩的主人可以在我的網站看到我的經歷及分享

(9)ie不知為何會跑為其他都不會ˋˊ

(1)作業網址: http://mepopedia.com/~web105-2c/final/final-1045445099
(2).
1.製作作業的時間:很久很久超級久
2.有無遇到的問題:一開始會有一些問題~但有慢慢找解決的方法或看老師的講義
3.製作心得與感想: 終於自己完成一個完整的網頁了
4.本學期於網頁設計課程上的收穫: 雙欄的用處,表格整理的簡潔便利和錨點連結的方便

前置作業

(1)網站主題:烤焦麵包

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

(3)尺寸:http://imgur.com/a/hVbV6

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

(5)風格設定: 可愛的味道多一點和活潑感

(6)主色調,輔助色調:主色為橘色為基準,輔助色調以咖啡色

(7)製作動機: 是小時候滿紅的漫畫書,內容簡潔又生動

(8)製作目的: 讓大家回味童年看漫畫書的快樂時光
預期效果: 藉由我的網頁讓一點一點的重溫快樂時光



Edited 2 time(s). Last edit at 01/11/2017 01:53AM by 簡瑜萱.
(編輯記錄)

(1)作業網址:
(2) http://mepopedia.com/~web105-2c/final/final-1045445138
1.製作作業的時間:三天
2.有無遇到的問題:非常多
3.製作心得與感想:好累
4.本學期於網頁設計課程上的收穫: 學到很多網頁設計的排版方式,和css設定的建構


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

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

(3)尺寸:
[img]http://i.imgur.com/je3Dku5.jpg[/img]

(4)主要瀏覽族群:喜歡養寵物,尤其是刺蝟的人
(5)風格設定:簡潔明瞭
(6)主色調,輔助色調: 黑色、藍色為主,灰色、白色為輔(框線及字)
(7)製作動機:很喜歡刺蝟,覺得刺蝟的呆臉很可愛,所以想做有關刺蝟的網站。
(8)製作目的:讓大家更了解刺蝟的相關資訊
預期效果:讓更多人了解刺蝟的可愛之處

(8)資料蒐集分析

http://www.pet910.com/%E5%8F%A6%E9%A1%9E%E5%AF%B5%E7%89%A9/p1019045180.html

http://qna.gvet.tw/viewthread.php?tid=125

http://apple5921.pixnet.net/blog/post/248365070-%E5%88%BA%E8%9D%9F%E8%89%B2%E5%BD%A9%E6%8C%87%E5%8D%97



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

(1)作業網址: http://mepopedia.com/~web105-2c/final/final-1045445105
(2).
1.製作作業的時間: 一個禮拜
2.有無遇到的問題: 在排版方面還是很弱,操作方面還好
3.製作心得與感想: 在這門課學到了很多樣的網頁設計操作,原本一開始學的時候很吃力但在老師細心的指導下有逐漸跟上腳步了,可以用自己的方式做出屬於自己的網頁真的很開心,做完後的成就感會特別高,因為是花許多時間才完成的一樣東西,雖然成果不是說非常的好但能在過程中學習到才是最重要的,感謝老師每次都那麼細心的指導我們.
4.本學期於網頁設計課程上的收穫: 學到了雙欄表格覺得整理起來會較為輕鬆.

前置作業

(1)網站主題:豆豆先生

(2)導覽列架構設定
View post on imgur.com


(3)尺寸:
View post on imgur.com


(4)主要瀏覽族群: 大眾

(5)風格設定: 以豆豆先生的主要風格去設計

(6)主色調,輔助色調: 綠色 淡綠色

(7)製作動機: 因為豆豆先生是我從小看到大的卡通,看到這部卡通會別有親切感所以會想要利用這個網站分享給大家.

(8)製作目的: 在忙碌的生活中,偶爾也可以放慢腳步放鬆一下心情,看這部卡通來紓解壓力
預期效果: 看起來可以簡單明瞭,且吸引人注意.



Edited 4 time(s). Last edit at 01/11/2017 02:41AM by 1045445105.
(編輯記錄)

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

(2).
1.製作作業的時間:一個多禮拜
2.有無遇到的問題: 有,從講義找答案
3.製作心得與感想: 蠻不錯的,希望下學期能學到更多不同的東西
4.本學期於網頁設計課程上的收穫:按鈕、雙欄、影片崁入、命名髦點....等等

前置作業

(1)網站主題:RWBY

(2)導覽列架構設定:

http://imgur.com/EKZSL3R

(3)尺寸:

http://imgur.com/8RhPGDm

(4)主要瀏覽族群: 全年齡向
(5)風格設定:2D動畫

(6)主色調,輔助色調: 紅+灰階

(7)製作動機:因為該動畫的導演英年早逝,所以決定做他的作品為主題。

(8)製作目的:讓更多人知道RWBY。



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

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

(2)
1.製作作業的時間: 好幾天吧,沒去算
2.有無遇到的問題:都還好,都是小問題,我的問題 ( 喂
3.製作心得與感想:我難過的是Running man 要收了ˊ ˋ
4.本學期於網頁設計課程上的收穫: 可以做自己喜歡的主題,不設限,會讓我更有動力。

前置作業
(1)網站主題: Running man
(2)導覽列架構設定
http://imgur.com/VLZYN7I
(2) 尺寸與架構設定: 
http://imgur.com/lrh8I71
(4)主要瀏覽族群: 大眾、RM粉絲
(5)風格設定:黃色、紫色等明亮暖色系
(6)主色調,輔助色調: 黃、紫
(7)製作動機:自己的私心感觸
(8)製作目的: 紀念RM
預期效果:比我想像中好很多了...



Edited 1 time(s). Last edit at 01/11/2017 03:08AM by Jieru.
(編輯記錄)

(1)作業網址: http://mepopedia.com/~web105-2c/final/final-1045445036/topp.html
(2).
1.製作作業的時間: 8天七夜
2.有無遇到的問題:我有很給力的室友,上輩子修的福氣。
3.製作心得與感想: 我現在很無奈因為我剛剛打好了就差發表文章誰知道我手殘案到X鍵,我X你X的【預覽】<---VUL3NL JCI404UR04
4.本學期於網頁設計課程上的收穫: 與我的Dw CC版本好好相處

前置作業

(1)網站主題:豔漢

(2)導覽列架構設定
http://ppt.cc/LBbTX

(3)尺寸:
http://ppt.cc/fhGx5

(4)主要瀏覽族群:腐女.喜歡華麗細膩畫風的各位

(5)風格設定: 用簡約優雅的色塊,襯托圖片,提升整個網頁的美感

(6)主色調,輔助色調: 用偏粉和偏咖啡色的紅達到"豔"的視覺效果

(7)製作動機: 因為想讓更多人看到這麼華麗優雅的美圖,讓更多人知道這個作者

(8)製作目的: 因賞美圖
預期效果: 不要出現亂碼就好了

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

1.製作作業的時間: 很長 數不清了~

2.有無遇到的問題:footer....一直研究不出問題在哪啊啊!!!!!真的要瘋掉了,除了這個沒解決,其他都解決了 Q_Q

3.製作心得與感想: 真的是又創了自己的巔峰了,製作出自己喜歡的成品真的很開心啊~就算沒睡覺也值得了啊~希望二下之後的作業也會順利XD

4.本學期於網頁設計課程上的收穫: 收穫滿滿啊!!只是每次好像學了新的,就忘記舊的~怕一個寒假之後沒碰,全部忘光啊啊啊,真的要一直複習,持續做才會記得~

-------

(1)網站主題:大家好!我們是CRAFTHOLIC~

(2)導覽列架構設定



(3)尺寸:


(4)主要瀏覽族群: 全年齡!!可愛的東西大家都要看~

(5)風格設定:粉嫩 可愛 少女心

(6)主色調,輔助色調: 淡粉紅 鵝黃色 都是少女心的不可或缺!!,內文的深咖啡是不想用黑色那麼沈重的色調~

(7)製作動機:喜歡CRAFTHOLIC很久了~發現好像大家看過他們,但是不知道他是誰xd,趁機推廣~然後剛好自己很喜歡,做起來也開心>///<

(8)製作目的: 期末考~(開玩笑的啦),讓大家更讓是可愛的CRAFTHOLIC(愛心),順便把該做的事完成啊~

預期效果:
跟想像的差不多,粉粉嫩嫩可愛的風格,但是那個版權頁.....我真的束手無策了(哭)


(9)資料蒐集分析:
最主要當然是老師的講義~再來就是google,輸入關鍵字~馬上解決了一半的疑難雜症啊~



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

(1)作業網址: http://mepopedia.com/~web105-2c/final/final-1045445186
1.製作作業的時間: 好幾天
2.有無遇到的問題: 一開始覺得非常難聽不懂,慢慢回家看講義自己摸索
3.製作心得與感想: 我終於架構出屬於自己一個完整的網頁了!
4.本學期於網頁設計課程上的收穫:基本的網頁製作及美觀設計

前置作業

(1)網站主題:潮流藝術

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




(3)尺寸:
http://imgur.com/TZ0uYG2


(4)主要瀏覽族群: 每個年齡層均可觀看,偏向男性族群
(5)風格設定: 簡單明瞭

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

(7)製作動機: 因為本身很喜歡攝影,所以才想要製作關於攝影的網頁主題
(8)製作目的:可以讓大家更瞭解其實攝影也很有趣!可以多培養欣賞的美感!!!



Edited 3 time(s). Last edit at 01/11/2017 11:25AM by loveelise1021.
(編輯記錄)

(1)作業網址:
(2) http://mepopedia.com/~web105-2c/final/final-1045445144/moomin.html
1.製作作業的時間:24小時以上
2.有無遇到的問題:非常多 ,但同學都很熱心幫助我幫我找出問題我很感謝他們
3.製作心得與感想:很累 但也很有成就感
4.本學期於網頁設計課程上的收穫: 學到很多網頁設計的排版方式,和css設定的建構,練習自己排版,
能夠自己做出一個網頁是我以前不可能會的事,而且對於未來很有幫助 ,收穫良多。


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

[img]http://i.imgur.com/6w0mm6d.jpg[/img]




(3)尺寸:

[img]http://i.imgur.com/5Y9KbKl.jpg[/img]

(4)主要瀏覽族群:喜歡嚕嚕米 看動畫的人
(5)風格設定:繽紛活潑可愛
(6)主色調,輔助色調: 亮色、黃色白色淡灰為主、其他粉色系為輔(框線及字)
(7)製作動機:很喜歡嚕嚕米,想介紹給大家知道,所以想做有關嚕嚕米的網站。
(8)製作目的:讓大家更了嚕嚕米的相關資訊
預期效果:讓更多人了解嚕嚕米並喜歡我做的網站

(8)資料蒐集分析
http://www.yoshi850.com/pages/%E8%8A%AC%E8%98%AD%E7%B2%BE%E9%9D%88%EF%BC%9A%E5%9A%95%E5%9A%95%E7%B1%B3

http://anita6426.pixnet.net/blog/post/42325297-%E3%80%90%E5%B1%95%E8%A6%BD%EF%BC%8E%E5%8F%B0%E5%8C%97%E3%80%91%E4%BE%86%E8%87%AA%E8%8A%AC%E8%98%AD%E6%9C%80%E6%BA%AB%E6%9A%96%E4%BA%BA%E5%BF%83%E7%9A%84%E5%9A%95%E5%9A%95%E7%B1%B3

http://jessie73319.pixnet.net/blog/post/427418234-moomin%E5%9A%95%E5%9A%95%E7%B1%B3%E7%B2%BE%E9%9D%88%E7%89%B9%E5%B1%95[code]



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

(1)作業網址:http://mepopedia.com/~web105-2c/final/final-1045445075
(2).
[url=http://imgs.cc/image/EG1Uhqo][img]http://s3.imgs.cc/img/EG1Uhqo.jpg[/img][/url]
1.製作作業的時間:好幾天
2.有無遇到的問題:都解決了
3.製作心得與感想:好複雜
4.本學期於網頁設計課程上的收穫:有成就感
前置作業
(1)網站主題:小賈斯汀
(2)導覽列架構設定
http://imgs.cc/image/7Rnuxdz

(3)尺寸:上表已統一
(4)主要瀏覽族群:核心族群
(5)風格設定:潮流
(6)主色調,輔助色調:藍黑色
(7)製作動機:粉絲
(8)製作目的:想了解
預期效果:還不錯



Edited 7 time(s). Last edit at 01/11/2017 11:23AM by 1045445075.
(編輯記錄)

(1)作業網址: http://mepopedia.com/~web105-2c/final/final-1045445129
(2).
1.製作作業的時間: 全部弄好大概2個晚上
2.有無遇到的問題: 遇到問題就看講義或是問老師、同學
3.製作心得與感想: 一開始覺得網頁超難的!!現在雖然還沒有很厲害但至少看得懂基本語法~~~
4.本學期於網頁設計課程上的收穫:雙欄、表格的設計超實用!

(1)網站主題:My Melody

(2)導覽列架構設定




(3)尺寸:



(4)主要瀏覽族群: 老少咸宜,皆可觀賞。
(5)風格設定:粉嫩、簡單

(6)主色調,輔助色調: 以粉色系為主,粉嫩系的顏色為輔

(7)製作動機: 因為我非常喜歡美樂蒂,所以這次決定以美樂蒂作為主題。

(8)製作目的:希望能讓更多人了解美樂蒂。

作業網址:http://mepopedia.com/~web105-2c/final/final-1045445081
1.製作作業的時間: 24小時
2.有無遇到的問題: 原本完成後突然出現表格跑掉的問題,最後解決了。
3.製作心得與感想: 一做網頁就停不下來一直做下去,做完的成就感很高。
4.本學期於網頁設計課程上的收穫: 有了基礎架設網站的能力,對於網頁基本架構更清楚。

(1)網站主題: 月薪嬌妻
(2)導覽列架構設定



(3)主要瀏覽族群: 大眾
(4)風格設定: 日系清新風
(5)主色調,輔助色調: 粉紅,淺藍
(6)製作動機: 因為喜歡看日劇
(7)製作目的: 分享給更多人看
(8)預期效果: 得到做完網頁的成就感

(1)作業網址:
(2) http://mepopedia.com/~web105-2c/final/final-1045445144/moomin.html
1.製作作業的時間:24小時以上
2.有無遇到的問題:非常多
3.製作心得與感想:很累 但也很有成就感
4.本學期於網頁設計課程上的收穫: 學到很多網頁設計的排版方式,和css設定的建構


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





(3)尺寸:


(4)主要瀏覽族群:喜歡嚕嚕米 看動畫的人
(5)風格設定:繽紛活潑可愛
(6)主色調,輔助色調: 亮色、黃色白色淡灰為主、其他粉色系為輔(框線及字)
(7)製作動機:很喜歡嚕嚕米,想介紹給大家知道,所以想做有關嚕嚕米的網站。
(8)製作目的:讓大家更了嚕嚕米的相關資訊
預期效果:讓更多人了解嚕嚕米並喜歡我做的網站

(8)資料蒐集分析
http://www.yoshi850.com/pages/%E8%8A%AC%E8%98%AD%E7%B2%BE%E9%9D%88%EF%BC%9A%E5%9A%95%E5%9A%95%E7%B1%B3

http://anita6426.pixnet.net/blog/post/42325297-%E3%80%90%E5%B1%95%E8%A6%BD%EF%BC%8E%E5%8F%B0%E5%8C%97%E3%80%91%E4%BE%86%E8%87%AA%E8%8A%AC%E8%98%AD%E6%9C%80%E6%BA%AB%E6%9A%96%E4%BA%BA%E5%BF%83%E7%9A%84%E5%9A%95%E5%9A%95%E7%B1%B3

http://jessie73319.pixnet.net/blog/post/427418234-moomin%E5%9A%95%E5%9A%95%E7%B1%B3%E7%B2%BE%E9%9D%88%E7%89%B9%E5%B1%95

(1)作業網址: http://mepopedia.com/~web105-2c/final/final-1045445217/index2.html
(2).
1.製作作業的時間: 很久
2.有無遇到的問題: 很多問題
3.製作心得與感想: 做了好久好多問題 但最後都完成了好感動
4.本學期於網頁設計課程上的收穫:
老師真的很棒很用心愛你~

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


(3)尺寸:


(4)主要瀏覽族群:
(5)風格設定: 簡單
(6)主色調,輔助色調:灰黑
(7)製作動機: 喜歡他們~
(8)製作目的: 自己認為喜歡
預期效果:

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

(1) 網站主題:宮崎駿
(2) 導覽列架構設定:
[img]http://i.imgur.com/Q3JD17Q.jpg[/img]
(3) 尺寸與架構設定:
[img]http://i.imgur.com/kmMYAjj.jpg[/img]
(4) 風格設定:素色簡約
(5) 主色調,輔助色調:白、藍、灰。
(6) 製作動機:
    一直以來都很喜歡宮崎駿的作品,
  他的作品都讓我一再的回味,但是認
  識他的人很,但卻未必了解它吧,讓
  我帶著你們一起了解宮崎駿吧!
(7) 製作目的:讓更多人認識宮崎駿。



Edited 1 time(s). Last edit at 01/11/2017 12:27PM by 蔡薰緯.
(編輯記錄)

(1)作業網址: http://mepopedia.com/~web105-2c/final/final-1045445006
(2).
1.製作作業的時間:非常非常非常非常久,超過一個星期,有幾天會熬夜
2.有無遇到的問題:有問題時找同學諮詢,請朋友教我
3.製作心得與感想:我覺得非常的困難,在做的時候常常想放棄,遇到困難也一直問朋友看影片,不過等到真正做完時會非常的有成就感,非常開心,比平常別的作業來的更有成就感,而且能擺出自己的網頁,整理出自己喜歡的東西也是非常幸福的
4.本學期於網頁設計課程上的收穫:連結的用法,雙欄設計,基本的設計 ,表格的整理方法與配置

前置作業

(1)網站主題:喵喵日記

(2)導覽列架構設定
[img]http://i.imgur.com/AhAvkWb.jpg[/img]
(3)尺寸:
[img]http://i.imgur.com/sXgBXdD.jpg[/img]
(3)尺寸:
(4)主要瀏覽族群: 大眾族群都皆可觀賞,喜歡貓咪的朋友們更是歡迎前來參觀

(5)風格設定: 簡單又可愛

(6)主色調,輔助色調: 以粉藍色系為主

(7)製作動機: 因為我很喜歡貓咪,所以就做有關貓咪的網頁,以後在看之前做的網頁也會很高興,畢竟做的是自己喜歡的作品,我也很喜歡紀錄小貓生活的點點滴滴

(8)製作目的: 因為非常喜歡貓咪,而且剛好家裡又剛養貓,所以就想到要做貓咪的網頁,做出來的成品以後也會常常看!!



Edited 1 time(s). Last edit at 01/11/2017 01:23PM by 許華芳.
(編輯記錄)

(1)作業網址:file:///C:/Users/tr558/Desktop/midterm-1025445108/index.html
(2).
1.製作作業的時間: 3
2.有無遇到的問題:
3.製作心得與感想:
4.本學期於網頁設計課程上的收穫:
4.請務必在1/0前回覆,否則為遲交