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

Advanced

[作業02] HTML與CSS練習 --首頁實作篇

[作業02] HTML與CSS練習 --首頁實作篇

1. HTML與CSS練習--首頁實作篇作業說明


請參考
[講義] HTML與CSS練習--首頁實作篇

1. 作業目的

1.進一步熟悉HTML與CSS
2.練習將視覺與語法結合
3.學習如何修改HTML與CSS語法



2. 作業說明

1.請以範例網站為基模,使用其排版概念,重新改編為一新的網站設計,除了架構一樣,其他資訊皆要更新。
2.製作:(1)完成首頁,(2)設定滑鼠移過的效果,其他頁面將陸續完成。
3.因後續作業須持續完成其他它作業,請先設定好一特定主題後開始製作,並考慮其設計美感以及配色、風格與主題搭配之關係。



3. 作業步驟

1.參考http://mepopedia.com/~web102-c/hw03/hw03/
並以講義中的語法為參考http://mepopedia.com/forum/read.php?804,43670
2.重新設定一全新網站的主題,蒐集相關主題及內容資料
3.重新設定網站主題、使用對象、色彩計畫、圖片元素等。
4.製作背景圖片、整體色彩設定,標題及文字內容。
5.將HTML與CSS語法分別貼上後,修改HTML與CSS語法。
6.將資料夾命名為 hw02-學號,以FTP上傳至hw02資料夾
作業網址為http://mepopedia.com/~css105-2c/hw02/hw02-1045445XXX

並請回覆:

(1)作業網址:http://mepopedia.com/~css105-2c/hw02/hw02-1045445XXX
(2)網站主題/網站名稱:
(3)分類項目(導覽列):
(4)對象:
(5)色彩計畫:
(6)風格設定、網頁看點、預期成效:
(7)製作心得:




請於規定時間準時繳交作業,逾期不後。


4. 學長姐範例


http://mepopedia.com/~web103-2a/hw02/hw02-1025445205/
http://mepopedia.com/~web102-c/midterm/midterm-1015445215/
http://mepopedia.com/~web102-c/midterm/midterm-1015445212/
http://mepopedia.com/~web102-c/midterm/midterm-1015445219

(1)作業網址:http://mepopedia.com/~css105-2c/hw02/hw02-1045445117

(2)網站主題/網站名稱:Ελληνική Δημοκρατία-曦日風情.希臘

(3)分類項目:

●Introduction:為首頁,主要說明希臘簡介,包含地理位置、簡述、其它頁面連結等

●history:主要介紹希臘歷史發展簡述,及旅遊景點相關網站(維基百科、官方網站)。

●tourism:希臘旅遊景點概述,當然,這些景點不能完全代表希臘的風景或當地生活
民情,而是較富盛名、耳熟能詳的必去景點之一。

●story:希臘相關故事,如神話傳說,溫馨小品等。

●Video:希臘相關視頻,如旅遊指南,聖托里尼島風光、米洛斯島、 拉格尼西海灘,
雅典衛城等旅遊影音。

(4)對象:大眾

(5)色彩計畫:

●背景:海藍、米白
●區塊:明黃
●內容-深淺藍色系

網頁色系以藍白做為主色,使觀者看到色彩能在腦海中有個既定印象,背景則綴上藍
白相間條紋,呈現活潑感,並在上頭綴上橄欖果葉,內文字則使用深淺色系和背景搭
配,利用不同色調的藍,將主標與內文分明,增添藍色在頁面中的層次感,並在區塊
間加上奶黃色,營造陽光、活力的悠閒氣味~

(6)風格設定、網頁看點、預期成效:

風格設定:希臘藍白風(希臘國旗色彩),明黃為輔助色。
網頁看點:小葉果~
觀感營造:度假氛圍、輕鬆悠閒、蔚藍大海,活力城市
預期成效:希望觀者在閱覽內容時,能彷彿置身於愛琴海岸,並帶著輕鬆的心情閱
覽,能讓心中動起想前往希臘一趟的念頭~~~

(7)製作心得:本次的功課利用老師的版型並改造為主題相關性的網站,一樣的版型
能創造出各式具有特色的網頁,也是這次作業有趣的地方,在製作過程中, 較以往
不同的是css語法更為豐富,也會遇到在上一秒做完後,下一秒要修改時需要花時間
再次尋找語法;久而久之,自然可逐漸了解各版面的相應位置, 有時遇到不同頁面時
會想改變其背景色調,style也會誕生2與3,對我來說,將五頁以上版面分類, 使得
css語法不至於長串,可較快找到不同頁面的語法,練習了這些版型,並將不同元素
版型嘗試排列組合,也是製作過程中的樂趣。

在製作過程中,色調一直為需要加以調整的地方,而同學則為我提供了不同的指教及
建議,也使自己在配色方面能有一個參考對象,也包含了頁面的裝飾等,因此,觀摩
其他同學的作品也顯得重要,一能了解不同主題的色彩變化,也能看到舉一反三的版
型利用,彼此之間的互相交流能促使自己的成長,謝謝你們!!!



Edited 12 time(s). Last edit at 03/23/2017 10:24AM by 松本.豪.
(編輯記錄)

(1)作業網址:http://mepopedia.com/~css105-2c/hw02/hw02-1045445108
(2)網站主題/網站名稱:艾倫沃克
(3)分類項目(導覽列):
(4)對象:自己
(5)色彩計畫:黑
(6)風格設定、網頁看點、預期成效: 沒很好看
(7)製作心得: 我努力搶救沒存檔的網頁設計哈哈

(1)作業網址:http://mepopedia.com/~css105-2c/hw02/hw02-1045445201
(2)網站主題/網站名稱:plain me
(3)分類項目(導覽列):
(4)對象;大眾
(5)色彩計畫:綠
(6)風格設定、網頁看點、預期成效: 沒很好看
(7)製作心得: 好累

(1)作業網址:http://mepopedia.com/~css105-2c/hw02/hw02-1015445075
(3)分類項目(導覽列): 簡介 專輯說明 歌手介紹 歷年專輯 影音連結
(4)對象: 喜歡饒舌的人
(5)色彩計畫: 藍 紅 淺藍
(6)風格設定、網頁看點、預期成效: 用簡單的背景營造美式風格
(7)製作心得:還滿不錯的 希望可以做得更完整點

(1)作業網址:http://mepopedia.com/~css105-2c/hw02/hw02-1045445036

(2)網站主題/網站名稱: 魚乾 Annie

(3)分類項目(導覽列):

我是首頁 列出近期活動或影片,簡短介紹等等~
魚乾介紹 介紹魚乾是誰(之後會補更詳細)
紅石口袋 介紹魚乾所屬的紅石口袋~(畢竟他是團長嘛)
好友群們 介紹常常跟她一起拍影片的朋友們,他們大多也是大有來頭的!
影片連結 貼一些魚乾的經典影片給大家看~

(4)對象: 大眾

(5)色彩計畫: 用魚乾網路人設顏色"紫色與黃色還有白色"下去做整個網頁的色彩,
紫色看久有點沉重,搭點黃色可以帶點活潑感,白色會讓畫面舒服點~

(6)風格設定、網頁看點、預期成效:
風格設定:紫色黃色白色,帶點活潑感
網頁看點:網路上其實沒有對魚乾的介紹什麼的,就想讓跟我一樣喜歡魚乾的人更認識她~
預期成效:讓人了解魚乾是誰,介紹她的經歷,把她介紹給更多人認識~

(7)製作心得:
網頁的背景風格我做了大概一個多小時,做不出一個自己喜歡的樣式,
試了很多很多不一樣的風格,圖案等等的~
後來發現還是走簡約比較適合我自己~但太簡約不好,所以稍稍加一點紋路的圖案在上面,
中途有點放棄心態因為真的做太久啦!!!但後來還是做好了~
能夠再次把自己的偶像介紹給人家真的開心也很有成就感啊!!grinning smiley
但統共花的時間真的有點久啊~~希望下次做可以更有效率一點~



Edited 1 time(s). Last edit at 03/22/2017 07:34PM by Peiwei.
(編輯記錄)

(1)作業網址:http://mepopedia.com/~css105-2c/hw02/hw02-1045445212/
(2)網站主題/網站名稱:鹿西小姐麵包坊
(3)分類項目(導覽列):
商品專區
購買說明
門市據點
最新消息
企業情報
(4)對象:大眾
(5)色彩計畫:用一些深咖啡色、淺咖啡色來呈現,讓人看得很舒服,會覺得這些食物很美味。
(6)風格設定、古典風
網頁看點、???
預期成效:讓人更想吃這些食物
(7)製作心得: 花了3小時做完、做好覺得很美很開心。

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

(2)網站主題/網站名稱:角落生物 Sumikko Gurashi

(3)分類項目(導覽列):

首頁ホーム 初步介紹,選單按鈕等等可愛小物件

人物キャラクター 人物方面更深入讓大家了解

周邊周辺 推廣商品讓大家愛不釋手

宣傳プロパガンダ 發揚角落~傳播角落~

相關関連しました 角落的相關訊息都在這裡

(4)對象: 大眾

(5)色彩計畫: 使用較為可愛的色調加上圖片支援,使整體感覺舒適且想閱讀它~

(6)風格設定、網頁看點、預期成效:

風格設定:淡色系發展,可愛且具有活力感

網頁看點:吸引人對於萌萌物的喜愛

預期成效:發揚角落讓更多人認識~入這深深的角落坑

(7)製作心得:
這真的是男生做的...這真的是男生做的...這真的是男生做的...想製作這主題全權是為了女朋友的喜愛,時常都會為了這些萌物傷了不少荷包錢XD希望其他男生(有女友的)也遭受迫害~嘿嘿嘿ㄟ,製作這網站頁面大約花了3-4小時摸清楚,滿簡單的只是會一直找不到東西和搞混,總之過程都滿順利的~

(1)作業網址:http://mepopedia.com/~css105-2c/hw02/hw02-1045445135

(2)網站主題/網站名稱:和服 / 和服わふく

(3)分類項目(導覽列):

1.首頁
2.和服介紹
3.和服穿法教學
4.圖片
5.外部連結

(4)對象:

給想要更了解日本獨特文化與對和服有相關興趣者

(5)色彩計畫:藍與藍紫色的冷調系 帶些白與黑色

(6)1.風格設定、2.網頁看點、3.預期成效:
1.
還是偏向簡單風格
但會帶些和服上會有的花朵圖案
2.
可以了解和服的相關知識
3.
希望觀看者可以了解許多關於和服的事情
與解決自己不了解的地方

(7)製作心得:

覺得非常有趣,可以製作出自己想要的內容與風格
謝謝老師



Edited 1 time(s). Last edit at 03/22/2017 03:33PM by 廖芳如.
(編輯記錄)

(1)作業網址:http://mepopedia.com/~css105-2c/hw02/hw02-1045445015

(2)網站主題/網站名稱:喵星達meow meow star

(3)分類項目(導覽列):

1.關於喵星達
2.喵星少女
3.水彩插畫
4.人物肖像
5.婚紗作品

(4)對象:

讓喜歡插畫與設計的朋友們前來欣賞

(5)色彩計畫:粉色系協調感

(6)1.風格設定、2.網頁看點、3.預期成效:
1.
簡約的風格,又不失少女的雅緻
2.
可以給喜歡設計育繪畫的人激發靈感的創作
3.
希望可以把好的設計傳達給大家
(7)製作心得:

慢慢一步地摸索,使自己更容易上手,也找到一些訣竅,讓整個網頁設計的美感更突出。

(1)作業網址:http://mepopedia.com/~css105-2c/hw02/hw02-1045445042

(2)網站主題/網站名稱:馬爾地夫
(3)分類項目(導覽列):

介紹 介紹馬爾地夫這個地方
歷史 從以前到現在的歷史,包含為何要稱為馬爾地夫
交通資訊 如何去
旅遊景點 馬爾地夫有許多小島,介紹如如何旅遊
住宿資訊 推薦住宿

(4)對象: 大眾

(5)色彩計畫: 馬爾地夫是個海島國家,則已藍色系做為主題

(6)風格設定、網頁看點、預期成效:
風格設定:天藍色看起來舒服
網頁看點:我不太懂題目的意思
預期成效:讓人更想去馬爾地夫度假

(7)製作心得:
說實在這次的好複雜我做這個還是不太了解......頂多改些背景等部分

(1)作業網址:http://mepopedia.com/~css105-2c/hw02/hw02-1045445045
(2)網站主題/網站名稱: 歌手halsey
(3)分類項目(導覽列):
首頁
個人簡介
專輯介紹
音樂分享
得獎紀錄
(4)對象: 一樣喜歡她的人
(5)色彩計畫:她的風格大膽也特別,所以用了粉紅色為主的顏色
(6)風格設定:配合她專輯的顏色來設定
網頁看點:覺得顏色很少女
預期成效: 希望大家喜歡她
(7)製作心得:
雖然隔了整整一個寒假沒動網頁,但經過這兩次練習越來越上手

(1)作業網址:http://mepopedia.com/~css105-2c/hw02/hw02-1045445069
(2)網站主題/網站名稱:
天外奇蹟
(3)分類項目(導覽列):
首頁 劇情介紹 人物介紹 10件秘密 手稿
(4)對象:
跟我一樣喜歡皮克斯或迪士尼或喜歡這部電影的人

(5)色彩計畫: 藍色系

(6)風格設定、網頁看點、預期成效:
1.讓人舒服放鬆就像藍天
2.有天外奇蹟的手稿唷~
3.希望讓還沒看過或喜歡這部動畫電影的人喜歡

(7)製作心得:
真的越來越複雜呢!
光是背景就做了好久,更別說微調字的顏色或甚麼的了,
做到快崩潰了,還好找一找休息一下能夠找到語法的意思,
然後完成。

(1)作業網址:http://mepopedia.com/~css105-2c/hw02/hw02-1045445102
(2)網站主題/網站名稱: 豆豆先生
(3)分類項目(導覽列):
home
about
history
works
links
(4)對象:全部
(5)色彩計畫:綠色作為搭配
(6)風格設定:配合Rowan Atkinson飾演豆豆先生的風格
網頁看點:了解Rowan Atkinson飾演豆豆先生的特點
預期成效: 希望大家能了解
(7)製作心得:
有些難上手

(1)作業網址:http://mepopedia.com/~css105-2c/hw02/hw02-1045445189

(2)網站主題/網站名稱:日日田職務所

(3)分類項目(導覽列):

歡迎來到日日田--主要是日日田的小介紹、最新資訊、其他連結
關於日日田--一些常常被問到的小問題
設計師介紹--裡面將會有什麼厲害的設計師呢 敬請期待
活動花絮--有最新消息和活動
聯絡我們--來找我玩唄

(4)對象:視力好、年輕人、設計師

(5)色彩計畫:用田的綠結合藍灰色

(6)風格設定、網頁看點、預期成效:

風格設定:小清新風格
網頁看點:透過整體風格讓公告式網頁不會太無聊
觀感營造:日日田職務所的形象可以在人心中萌芽
預期成效:可以好好了解這個地方

(7)製作心得:這次有點小小無法接受背景跟導覽列要做一長條的設計
所以我還是留白了 不過我是放白色的圖唷!雖然看不出來但是我會做啦
我覺得應該好好思考清楚網頁的內容才不會有點手忙腳亂,想挑戰比較有設計風格的網頁製作

(1)作業網址:http://mepopedia.com/~css105-2c/hw02/hw02-1045445180

(2)網站主題/網站名稱: 關於蔬菜

(3)分類項目(導覽列):

in00 - 菜菜簡介
in01 - 菜菜好處
in02 - 菜菜食譜
in03 - 菜菜種類
in04 - 菜菜連結

(4)對象:一般社會大眾

(5)色彩計畫: 綠綠的喔

(6)風格設定、網頁看點、預期成效:希望大家都喜歡吃菜呢 !

(7)製作心得: 腰痠沒有背痛

(1)作業網址:http://mepopedia.com/~css105-2c/hw02/hw02-1045445003

(2)網站主題/網站名稱:THE WALKING DEAD

(3)分類項目(導覽列):
首頁   對整部戲劇做個簡短的介紹
劇情簡介 描述主要故事及人物之間複雜的關係
角色介紹 介紹出現的角色,幫助觀看者更加容易理解
內容分享 對各季做個介紹,勾起觀看者的興致
外部連結 同公司或別家電視台製作的精典美劇

(4)對象: 想以看美劇的方式學習美語或是單純喜歡看美劇的人

(5)色彩計畫: 因為是末日僵屍的題材,所以整體用最直觀的暗紅色來表現血,而黑灰色調則表現出了在這個世界裡無處可去只能拼死求生的悲哀

(6)風格設定、網頁看點、預期成效:
風格設定 帶點恐部卻不會嚇走觀看者的血腥風格
網頁看點 background的血做很久(*´(00)`)’
預期成效 與預期得差不多

(7)製作心得: background的血真的做很久(*´(00)`)’
但不管怎麼做都會有很明顯的銜接點讓我很挫敗_sad smiley´ཀ`」 ∠):_

(1)作業網址:http://mepopedia.com/~css105-2c/hw02/hw02-1045445105

(2)網站主題/網站名稱:LeTAO

(3)分類項目(導覽列):

1. LeTAO首頁
2.關於LeTAO
3.禮品
4.美味餐點
5.店鋪資訊

(4)對象:

大眾 為了讓更多甜點愛好者知道這家好吃的店

(5)色彩計畫:以粉色和粉藍色為主

(6)1.風格設定、2.網頁看點、3.預期成效:
1.
平靜.典雅.舒適 比較輕柔的風格
2.
可以得知這家甜點店的資訊
3.
希望可以有更多人去品嘗看看這家甜點

(7)製作心得:

覺得越做越順手 雖然沒有預期的好 但是可以累積自己的經驗 相信會一次比一次還來的更好!

(1)作業網址:http://mepopedia.com/~css105-2c/hw02/hw02-1045445141

(2)網站主題/網站名稱:Twitch

(3)分類項目(導覽列):
關於   有關Twitch的基本介紹
歷史  Twitch的源起及前身
影片  Twitch上一些熱門的影片
實況主  分享一些自己喜歡的實況主
連結  與Twitch合作或相關機關的連結

(4)對象: 跟我一樣吃飽撐著沒事看實況的宅宅

(5)色彩計畫: 紫色,紫色紫色紫色。
(6)風格設定、網頁看點、預期成效:
風格設定 很Twitch的風格(?
網頁看點 了解一下實況啊
預期成效 都來看實況吧(?

(7)製作心得:一如寄往,睏,真的睏。

(1)作業網址:http://mepopedia.com/~css105-2c/hw02/hw02-1045445198
(2)網站主題/網站名稱:Сою́з Сове́тских Социалисти́ческих Респу́блик
(3)分類項目(導覽列): 首頁 領導 軍事 科技 文化
(4)對象: 喜歡蘇聯的人
(5)色彩計畫: 大紅大黃
(6)風格設定、網頁看點、預期成效: 強烈的色彩
(7)製作心得: ypa!(萬歲!)

(1)作業網址:http://mepopedia.com/~css105-2c/hw02/hw02-1045445217

(2)網站主題/網站名稱:加減乘除

(3)分類項目(導覽列):
首頁   有關紅髮艾德
的基本介紹
個人簡介 簡單介紹 增加了解
專輯創作  專輯的概念及歌曲名稱
影片分享  將專輯歌曲MV分享給各位
外部連結  和紅髮艾德相關網站與新聞連結

(4)對象: 一樣是人

(5)色彩計畫:藍色藍色。
(6)風格設定、網頁看點、預期成效:
讚讚讚讚讚
(7)製作心得:今天有跟上腳步了 太棒了好感動

(1)作業網址:http://mepopedia.com/~css105-2c/hw02/hw02-1045445195
(2)網站主題/網站名稱: 绍兴
(3)分類項目(導覽列):
简介 绍兴概况
历史改革 名称演变
地理环境 地形地貌,气候,水文
美食 绍兴特产
旅游 著名景点
(4)對象: 不是绍兴人
(5)色彩計畫: 紫色,蓝色
(6)風格設定、網頁看點、預期成效:
(7)製作心得:
开始的时候以为就是只要改一改就好会很简单,真做起来还是碰到了很多不怎么会的
地方,不过看了同学的以及老师的讲义有点知道了。

(1)作業網址:http://mepopedia.com/~css105-2c/hw02/hw02-1045445081
(2)網站主題/網站名稱: 水墨畫
(3)分類項目(導覽列): 首頁、文房四寶、中國水墨、日本水墨、外部連結
(4)對象: 學生
(5)色彩計畫: 以黃色為底色 深灰為輔
(6) 風格設定:年代久遠的古老風格
網頁看點:水墨畫的相關知識
預期成效: 增廣見聞,使學生多增添文化素養
(7)製作心得:做了很長一段時間其中花了很多的時間在設定CSS的細節,很多東西調整起來滿繁瑣的,主要都在找錯誤跟問題,一一解決後發現已經天亮了~~ 不過最後出來還是很感動!!

(1)作業網址:http://mepopedia.com/~css105-2c/hw02/hw02-1045445051/

(2)網站主題/網站名稱:ジョジョの奇妙な冒険

(3)分類項目:

首頁

書籍情報

跨媒體作品

外部連接

(4)對象:大眾

(5)色彩計畫:

●背景:海藍、純黑
●區塊:透明白
●內容-深淺黑白

(6)風格設定、網頁看點、預期成效:

風格設定:時尚時尚最時尚
網頁看點:條理分明
觀感營造:設計感、輕鬆瀏覽、
預期成效:一起JOJO吧~~~

(7)製作心得:很累,但很有成就感。

(1)作業網址:http://mepopedia.com/~css105-2c/hw02/hw02-1045445174

(2)網站主題/網站名稱:科學動動腦

(3)分類項目(導覽列):
首頁
太空天文:宇宙知識
地球動脈:地球知識
環境生態:生態知識
化學物語:化學知識

(4)對象: 學生

(5)色彩計畫:知性藍
(6)風格設定、網頁看點、預期成效:
風格設定 有學術性的感覺
網頁看點 增廣見聞
預期成效 長知識

(7)製作心得:難度很高

(1)作業網址:http://mepopedia.com/~css105-2c/hw02/hw02-1045445147
(2)網站主題/網站名稱:fate grand order
(3)分類項目(導覽列): Home 、Story、Servant、Fate Series、Video
(4)對象: 全年齡
(5)色彩計畫: 遊戲背景是以闡述歷史為主的因此以深色來表現出。
(6)風格設定:現代風
網頁看點:簡單了解劇情
預期成效: 還可以
(7)製作心得: 雖然比起上學期有進步但還有許多不足,還有待進步。

(1)作業網址:http://mepopedia.com/~css105-2c/hw02/hw02-1045445018/
(2)網站主題/網站名稱:台北市兒童新樂園
(3)分類項目(導覽列):
關於我們
溫馨服務
遊樂設施
劇場資訊
美食商品
(4)對象:大眾
(5)色彩計畫:用了很鮮豔的藍,黃色等色來表現很活潑的感覺
(6)風格設定、網頁看點、預期成效:

風格設定:童趣的感覺
網頁看點:讓大家了解兒童新樂園
預期成效:希望能讓大家更了解兒童樂園好玩的地方,讓大家想去玩~

(7)製作心得: 花了一個晚上做好,這次沒有很難只要改改就好了~。

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

(2)網站主題/網站名稱: 台灣旅遊指南

(3)分類項目(導覽列): 首頁 / 介紹 / 天氣狀況 / 交通資訊 / 外部連結

(4)對象:觀光客

(5)色彩計畫: 冷色系 風格

(6)風格設定、網頁看點、預期成效: 風格想要一點文青的質感,還有冷冷的感覺,一種比較冷靜的感覺, 網頁看點的背景音樂是台灣觀光的英文宣傳曲,預期成效,比想像中的好一點,做完一直加減做修改跟摸索

(7)製作心得: 把一些學過的技巧用上去,圓角透明度那些的,新的版面還有技巧,希望步會做得太差~

(1)作業網址:http://mepopedia.com/~css105-2c/hw02/hw02-1055999320
(2)網站主題/網站名稱:陪安東尼渡過漫長歲月
(3)分類項目(導覽列):
首頁
作品目錄
繪本欣賞
作者簡介
經典段句
(4)對象:對繪本有興趣的人
(5)色彩計畫:由於這本繪本的绘图充满童幻色彩,所以用了清新的暖色調。
(6)風格設定、網頁看點、預期成效:
風格設定:溫馨、充满童幻色彩
網頁看點:超治愈系的啦
預期成效:讓大家了解這本繪本在講什麼並且都想去買這本繪本來看
(7)製作心得:因為是斷斷續續湊時間做的所以也不記得花了多久的的時間,但是這是我第一次接觸dreamweaver這個軟件,好像有點難......但好像又還挺簡單的,額最重要的是這個軟件似乎挺有趣的......明明做的還挺爛的但我那些別系的室友都覺得我很厲害哎,嘻嘻嘻嘻



Edited 1 time(s). Last edit at 03/30/2017 12:10PM by 盧姍娜.
(編輯記錄)

(1)作業網址:http://mepopedia.com/~css105-2c/hw02/hw02-1025445061
(2)網站主題/網站名稱:蠟筆小新
(3)分類項目(導覽列):
簡介
作品說明
人物介紹
劇場版
春日部都市傳說
(4)對象:喜歡蠟筆小新的人
(5)色彩計畫:溫暖又有活力的黃色、橘色調。
(6)風格設定、網頁看點、預期成效:
風格設定:乾淨簡約但給人溫暖的感覺
網頁看點:大家都看過卻不一定瞭解他~
預期成果:讓大家多點瞭解也可以去看看這經點不敗的卡通
(7)製作心得:花了一些時間做,做出來覺得有成就感

(1)作業網址:http://mepopedia.com/~css105-2c/hw02/hw02-1045445009
(2)網站主題/網站名稱: 庫洛魔法使//庫洛魔法異世界
(3)分類項目(導覽列):
庫洛魔法使:她是首頁-任何的最新消息都會在他的首頁公布
主要人物:人物介紹拉~都是歐霸跟歐尼
劇情介紹:主角的奇幻冒險故事
劇場版;就是電影版拉~有很多在原故事裡看不到的故事喔
精彩花絮:先講就不精彩拉~
(4)對象: 大眾
(5)色彩計畫: 粉嫩色調為主
(6)風格設定、網頁看點、預期成效:
粉嫩嫩少女心爆炸
激起大家的共鳴,畢竟這是經典中的經典阿~
讓心情差的人都能回想起天真美好的童年
(7)製作心得:
這一次東西超極多可是可是呢
雖然我找得頭暈腦脹的
可是做出來還是超有成就感的拉~

(1)作業網址:http://mepopedia.com/~css105-2c/hw02/hw02-1045445084
(2)網站主題/網站名稱:日日多肉
(3)分類項目(導覽列):
首頁
多肉圖鑑
多肉養護
日常生活
外部連結
(4)對象:對多肉植物有興趣的人
(5)色彩計畫:選用淡彩色,樸實的色調。
(6)風格設定:簡約
網頁看點:輕鬆療癒
預期成效:讓大家能多瞭解多肉植物!
(7)製作心得:希望自己能多善用表格做分類,讓網彥看起癌更成熟!

(1)作業網址:http://mepopedia.com/~css105-2c/hw02/hw02-1045445162

(2)網站主題/網站名稱: 日本女性攝影師Reylia Slaby

(3)分類項目(導覽列):
>>MENU:主頁連結、連到其他分頁去。
>>ABOUT:關於這位攝影師的相關介紹。
>>SERIES:有一系列經過報導的經典作品、也是因為這個報導才注意到她。
>>ART PICTURE:在他自己的部落格裡放的其他攝影作品。
>>BLOG:相關連結。

(4)對象: 大眾

(5)色彩計畫: 比較沉穩、深沉的顏色&不想加入太多花俏的顏色。圖案也盡量簡潔不搶到照片跟背景之間的視覺><

(6)風格設定、網頁看點、預期成效:
和風、攝影照片等等的元素,但又不能弄得太過雜亂,希望能讓大家多了解一位有個人風格的攝影師和喜歡上她的創作!

(7)製作心得:
因為這位日本攝影師的風格頗獨特、尤其又是攝影師,一開始有點抓不準如果要為他而作網站該怎麼設計,到現在也還在持續摸索,之後再做修改希望能找到一些能看起來稍稍活潑的元素////
然後這次又真的拖了太久TTTT好多CSS設定都不知道,雖然有影片但有時候跟實際操作變化的地方又不一樣TTTT到期中交最後完成的網站想再做大修改和多去筆記一下新增的功能、這次學到教訓了TTTTTTTTTTTTTT(((大哭

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

(2)網站主題/網站名稱: 家庭教師

(3)分類項目(導覽列):

首頁:介紹家庭教師的簡介,大綱等等。
相關人物:家庭教師裡的主要人物及出場的角色。
戒指介紹:算是家教裡面一大特色,所以特別分一個出來介紹各戒指。
音樂:所有動畫的片頭、片尾等,以及相關樂團。
動畫片段:一些有關家教的動畫影片

(4) 對象:誰都可以不要歧視宅宅啊xD

(5)色彩計畫:只用鮮明的橘黃色調,營造一種熱血的少年動漫感。

(6)風格設定、網頁看點、預期成效:
風格設定:橘、黃、白,就是熱血啊!
網頁看點:家教在幾年前雖然就完結了,雖然大家一直所不能接受他爛尾,
但是畢竟是我唯一一部全追完的漫畫,也是我的童年,所以想做看看。
預期成效:沒什麼期望啦,喜歡的自然會喜歡。

(7)製作心得:
........也是滿累的...
老師可以教慢一點嗎~進度太快了啊 ! 有些人跟不上餒。

(1)作業網址:http://mepopedia.com/~css105-2c/hw02/hw02-1045445138
(2)網站主題/網站名稱: 一頁台北
(3)分類項目(導覽列):
首頁:
劇情介紹
演員介紹
電影配樂
預告花絮
(4)對象: 一般心智年齡成熟的大眾
(5)色彩計畫: 黑、粉紅
(6)風格設定、網頁看點、預期成效: 想做出城市夜景的燈光朦朧感,用很多黑色配一點粉紅色想靜中取鬧,成效還可以
(7)製作心得:我以為會很難但其實也還好只是css稍微多了一點

(1)作業網址:http://mepopedia.com/~css105-2c/hw02/hw02-1045445057
(2)網站主題/網站名稱: 只想告訴你
(3)分類項目(導覽列):
1.首頁
2.劇情介紹
3.登場角色
4.精彩片段
5.相關連結
(4)對象:大眾
(5)色彩計畫:淡淡的淺藍色為主
(6)風格設定、網頁看點、預期成效:清爽的水彩風格,讓看到這個網頁的人會覺得很放鬆。
(7)製作心得:這次的變得比較複雜,相對的花的時間就更長了,不過做完還是有成就感,繼續加油!

(1)作業網址:http://mepopedia.com/~css105-2c/hw02/hw02-1045445030
(2)網站主題/網站名稱: 金太妍
(3)分類項目(導覽列):
首頁 簡介、近期活動
個人介紹 太妍的個人經歷
少女時代 介紹太妍的所屬女團
音樂作品 太妍的個人歌唱MV
個人代言 太妍的個人廣告代言
(4)對象: 大眾
(5)色彩計畫: 維持一慣的粉紅色調
(6)風格設定、網頁看點、預期成效:
風格設定:粉紅色的清純可愛風
網頁看點:因為是宅精靈阿
預期成效:希望做到最後還是可以維持初心好好做
(7)製作心得:
花了不少時間製作,但做出來的是我喜歡的風格,好開心。

(1)作業網址:http://mepopedia.com/~css105-2c/hw02/hw02-1045445099

(2)網站主題/網站名稱: 滾石愛情故事

(3)分類項目(導覽列): 首頁、單元劇系列、演員陣容、電視劇歌曲、影音專區

(4)對象:喜歡這些歌曲的大眾

(5)色彩計畫:以灰白色為主調

(6)風格設定、網頁看點、預期成效:締造了無數膾炙人口的不朽情歌,陪伴了一代又一代的男男女女。每個人生命中的暗戀、初戀、熱戀、失戀,都有一首專屬主題曲。每個人帶著這些情歌,在KTV唱了又唱,聽了又聽,在心愛歌手的演唱會上大聲跟著唱和,百轉千迴,念念不忘。

(7)製作心得:光是背景就做了好久, 雖然只是把內容給改寫,但是這次的CSS語法略顯多一些,在調整的部分上會混亂

(1)作業網址:http://mepopedia.com/~css105-2c/hw02/hw02-1045445120
(2)網站主題/網站名稱:天兵公園
(3)分類項目(導覽列):
首頁
劇情介紹
人物介紹
圖片分享
影片連結
(4)對象:喜歡天兵公園的人
(5)色彩計畫:藍粉
(6)風格設定:
網頁看點、???
預期成效:讓更多人更喜歡天兵公園
(7)製作心得: 做完覺得很開心。

(1)作業網址:http://mepopedia.com/~css105-2c/hw02/hw02-1045445150

(2)網站主題/網站名稱: 網球王子

(3)分類項目(導覽列): 首頁、青春學園、其他學園、全國大賽、影片

(4)對象:對網球喜愛者

(5)色彩計畫:藍黑灰為主要色調

(6)風格設定、網頁看點、預期成效:以成熟運動風為主要風格設定,希望大家能認識這部日本運動風的漫畫

(7)製作心得:只能說做得很久而且覺得有點複雜

(1)作業網址:http://mepopedia.com/~css105-2c/hw02/hw02-1045445177

(2)網站主題/網站名稱:台中介紹

(3)分類項目(導覽列):

1.首頁
2.景點
3.美食
4.美食
5.住宿推薦

(4)對象:
來台中地區旅遊的日本觀光客

(5)色彩計畫:粉色調

(6)1.風格設定、2.網頁看點、3.預期成效:
1.
給日本觀光客更好的選擇介紹
2.
可已到的了得文清景點及美食介紹都會放在裡頭方便觀看
3.
希望這些觀光客可以圓滿的達成台中之旅以及拍出美輪美奐的照片

(7)製作心得:
能夠做出一個代表台中的網站給日本的觀光客看非常高興
謝謝老師

(1)作業網址:http://mepopedia.com/~css105-2c/hw02/hw02-1045445144

(2)網站主題/網站名稱: 飛天小女警

(3)分類項目(導覽列):

飛天首頁 
劇情介紹 
登場腳色 
影片連結 
相關連結 

(4)對象: 大眾

(5)色彩計畫: 整體用粉紅色及一點點黃色點綴,呈現小女警活潑可愛的感覺

(6)風格設定、網頁看點、預期成效:

風格設定:粉紅色黃色白色,呈現活潑可愛的感覺

網頁看點:讓看過或沒看過這個卡通的人點進來都會洗換上飛天小女警

預期成效:讓大家了解這個卡通的劇情、認識可愛的腳色

(7)製作心得:
做首頁真的總是花了我非常久的時間,前置作業還要找非常多資料,前前後後可能就10個小時,我真的做得很慢吧!css設定超容易搞混的!!
但是做完第一頁就有很開心的乾覺雖然好累!滿有成就感的~~

(1)作業網址:http://mepopedia.com/~css105-2c/hw02/hw02-1045445072
(2)網站主題/網站名稱: ★☆閃電狼☆★

(3)分類項目(導覽列):

戰隊介紹 介紹閃電狼
選手資訊 介紹閃電狼內der選手smiling smiley
相簿影音 閃電狼相關的影片及照片
新聞報導 閃電狼的相關新聞
相關產品 閃電狼的相關廠品

(4)對象: 對電競有興趣的群眾

(5)色彩計畫: 採用閃電狼LOGO的藍色為主要,灰色為輔助色。

(6)風格設定、網頁看點、預期成效:
風格設定:因為閃電狼的LOGO是以藍色為主,帶有沉著理性。畢竟是打電競的麻~
網頁看點:全部都是看點!!
預期成效:還不錯.........吧?

(7)製作心得:做自己喜歡的題目真是開心,但是CSS樣式一直搞不定真是讓人森77

(1)作業網址:http://mepopedia.com/~css105-2c/hw02/hw02-1045445006

(2)網站主題/網站名稱:
傳說對決
(3)分類項目(導覽列):

1.故事起源
2.人物介紹
3.新手角色
4.遊戲特色
5.遊戲影片

(4)對象:

給想要更了解傳說對決的朋友們

(5)色彩計畫:深藍暗色系

(6)1.風格設定、2.網頁看點、3.預期成效:
1.
偏向暗色系
有種陰暗的感覺符合遊戲內容
2.
可以了解傳說對決的相關知識
3.
希望喜歡傳說的觀看者可以了解更多傳說對決的相關資訊

(7)製作心得:

覺得非常有趣,可以製作出自己想要的內容也很享受這種過程
真的很謝謝老師!!!!

(1)作業網址:http://mepopedia.com/~css105-2c/hw02/hw02-1025445159
(2)網站主題/網站名稱:鮑伯狄倫
(3)分類項目(導覽列): 簡介 專輯說明 歌手介紹 歷年專輯 自傳說明
(4)對象:青少年
(5)色彩計畫:紅跟黑相間
(6)風格設定、網頁看點、預期成效:像時尚雜誌的效果
(7)製作心得:花的時間比之前更久 所以做出來東西也慢慢越來越好

(1)作業網址:http://mepopedia.com/~css105-2c/hw02/hw02-1045445186
(2)網站主題/網站名稱: ENMIEM
(3)分類項目(導覽列):簡介 專輯說明 歌手介紹 歷年專輯 影音連結
(4)對象:喜歡饒舌音樂的
(5)色彩計畫: 黑 灰 白
(6)風格設定、網頁看點、預期成效:替這位歌手做介紹
(7)製作心得: 太久沒做有點忘記

(1)作業網址:http://mepopedia.com/~css105-2c/hw02/hw02-1045445129

(2)網站主題/網站名稱:金石工坊

(3)分類項目(導覽列):
1.首頁
2.金石日報
3.商品專區
4.店鋪索引
5.聯絡我們

(4)對象:
為喜歡金石工坊的人們提供資訊

(5)色彩計畫:紅/黑色調

(6)1.風格設定、2.網頁看點、3.預期成效:
1.
以黑色表達個性並以紅色表達熱情
2.
提供許多金石工坊的資訊
3.
希望能讓大家更了解金石工坊

(7)製作心得:
一開始感到很複雜,後來越做越上手了。

(1)作業網址:http://mepopedia.com/~css105-2c/hw02/hw02-1015445216
(3)分類項目(導覽列): 首頁、遊戲世界觀、截圖分享、影片欣賞、官方連結
(4)對象: 對劇情還未深入的人
(5)色彩計畫: 黑灰白
(6)風格設定、網頁看點、預期成效: 以黑灰白為主色調強調遊戲有些灰暗的風格
(7)製作心得:圖片來源全部都是自己的,有些還特別去拍了幾張拿來做資料,做得很開心

(1)作業網址:http://mepopedia.com/~css105-2c/hw02/hw02-1045445177

(2)網站主題/網站名稱:台中地區介紹

(3)分類項目(導覽列):
1.首頁
2.景點
3.食物
4.住宿
5.更多

(4)對象:
給來台灣的日本觀光客

(5)色彩計畫:粉色調

(6)1.風格設定、2.網頁看點、3.預期成效:
1.
以粉色代表日本的少女情懷
2.
提供許多台中地區克式各樣的資訊
3.
希望他們的旅程可以更順利

(7)製作心得:
有點小小成就感

1.網址:http://mepopedia.com/~css105-2c/midterm/midterm-1045445114/midterm-1045445114/

2.設計概念與製作心得:
我想用影片的地方但卻只能傳網址

3.何謂HTML、DIV及CSS:
HTML:網頁的基本架構
DIV:是特定區塊的標籤,可將文字、內容、圖片包起來
CSS:用來布置,美化網頁的外觀

4.附上至少一個覺得設計很有質感的網站,並說明原因
https://twitter.com/zara
簡單讓人有舒服明瞭的感覺~

5.期待這門課的學習成果與收穫為何?
能做完我就很感動了~覺得真的要看影片才會搞懂~

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

(2)網站主題/網站名稱:勤美學CMP Village

(3)分類項目(導覽列):
1.介紹
2.使命
3.交通資訊
4.常設作品
5.聯絡我們

(4)對象: 親子客群

(5)色彩計畫:粉色調暖色系適合親子同樂。

(6)1.風格設定、2.網頁看點、3.預期成效:
1. 簡約的風格。
2. 讓來的人們可以感受到溫,跟享受這裡的一切。
3. 希望可以把園區內的優點傳達給大家。

(7)製作心得:
能夠自己從頭到尾都自己來,沒有尋求別人的幫助把它完成,好有成就感。