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

Advanced

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

[期中作業] 以單欄為主的網站設計

[color=#990000][期中作業] 以單欄為主的網站設計[/color]



1. 一、製作說明:


1.請參考期中之前教過的做法及講義,製作以單欄為主的網站

2.每個同學記得在[color=#990033]title的部分打上"自訂的主題"[/color]

在#footer 註明 Designed by 某某某(可自行取名) 1045445ooo

3.題目自訂,請設計出符合網站主題的配色及設計風格。

4.需自行設計圖片,製作網站內容。

5.需以DIV搭配CSS的方式完成,設定尺寸、字體、顏色等等。

6.頁數要求:
(1)至少完成三頁的內容,語法無錯誤(60分),若內容完整,設計精美可再加分至多80。
(2)至少完成五頁的內容,語法無錯誤(80分),若內容完整,設計質感高,最多100分。

[color=#993300]7.若真的不會做,可下載附檔,參考老師的檔案,加以修改完成,但圖片及文字內容不可一樣。
(附檔有兩組:
一組是以圖片按鈕為主,需自行製作圖片
一組是以導覽列為主(色彩編排),請選擇一組參考製作)[/color]

8.製作完成上傳至FTP

9.本次作業的重點在於:

[color=#CC0000](1)能自行設計以DIV與CSS製作的網站
(2)利用自已設計的圖片、色彩搭配與字體設定等設計出具有質感的網頁[/color]



2. 二、評分標準與製作檢核


1.HTML的正確架構(DIV的使用)
2.整體設計美感(CSS運用,風格及配色,字體設定、圖片製作)
3.導覽列的正確性(含導覽超連結)
4.h1或h2的使用
5.class(類別)的運用
6.HTML Title的設定
7.Footer的版權宣告
8.內容完整的兩頁(至少)的連結
9.製作說明


3. 三、繳交作業方式


[color=#CC0066]1.製作完成後,檔案命名方式:[/color]

[color=#669900]期中作業FTP上的資料夾為:midterm

每位同學請將自己的資料夾命名為:midterm-學號
這個作業的網址則為:http://mepopedia.com/~web105-2c/midterm/midterm-104xxxxxxx

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

存放在 < midterm-學號 > 的資夾內[/color]


[color=#CC0066]2.全部完成後上傳至FTP[/color]

[color=#CC0066]3.依進度回覆本篇文章[/color]


[color=#0066CC]前置作業[/color](11/09)
(1)網站主題:
(2)製作動機:
(3)製作內容:
(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:
◎相關網站列表與分析:



[color=#0066CC]完成品[/color](11/16前)
[color=#FF0066]請將這項放置於文章最前面[/color]
(1)作業網址
(2)
1有無遇到的問題
2.製作感想
3.製作作業的時間


[color=#CC0066]4.請務必在11/16前回覆,否則為遲交[/color]


4. 五、同學常見問題之注意事項



隨時補充:

1.網頁圖檔不宜太大,否則網頁開啟速度會變慢,請盡量在Photoshop或Illustrator的『儲存為網頁與裝置用』的功能裡,修改圖檔的大小至100KB以下,100KB會佔1Mb頻寬(每秒鐘),以此類推。

2.有文字出現的區塊,要記得設定padding,文字才不會跟邊框黏在一起。

3.導覽列的超連結


請記得先將第一頁所有的連結都先設定好,再以另存新檔的方式,存成其他檔案,如此就不用每次都要設定超連結。

4.亂碼問題,放在 <head> </head> 之間
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 編碼方式記得存utf-8

5.CSS檔案的路徑,放在 <head> </head> 之間
<link rel="stylesheet" href="style.css" media="screen" />
6.檔案宣告,在HTML檔最前面放 <!DOCTYPE html>
7.任何出現在網頁裡的命名不能出現中文及全形字。

8.圖片必須放在images圖片資料夾裡

[hr]

5. 參考範例



http://mepopedia.com/forum/read.php?851,16485

http://mepopedia.com/forum/read.php?855,16484

[hr]
http://mepopedia.com/~web100b/midterm/midterm-1001445022/
http://mepopedia.com/~web100b/midterm/midterm-1001445042/
http://mepopedia.com/~web100b/midterm/midterm-1001445006/
http://mepopedia.com/~web100a/midterm/midterm-1001445068/
http://mepopedia.com/~web100a/midterm/midterm-1001445096/
http://mepopedia.com/~web100a/midterm/midterm-1001445015/
http://mepopedia.com/~web100b/midterm/midterm-1001445049/
http://mepopedia.com/~web100b/midterm/midterm-1001445123/
http://mepopedia.com/~web100b/midterm/midterm-1001445026/
http://mepopedia.com/~web100a/midterm/midterm-1001445072/
http://mepopedia.com/~web100a/midterm/midterm-1001445080/

http://mepopedia.com/~web103-a/midterm/midterm-1025445001/
http://mepopedia.com/~web103-a/midterm/midterm-1025445070/
http://mepopedia.com/~web103-c/midterm/midterm-1025445069/

=================================================
[color=#CC0066]若經發現作業為直接複製同學檔案以零分計[/color]
=================================================



Edited 1 time(s). Last edit at 11/02/2016 09:09AM by JinJin.
(編輯記錄)

完成品(11/16前)
請將這項放置於文章最前面
(1)作業網址:
http://mepopedia.com/~web105-2c/midterm/midterm-1045445036

(2)
有無遇到的問題:

有問題,但已看講義跟GOOGLE資料查詢解決了~

製作感想:
成就感超高~幫自己的偶像做網頁真的太好玩了~很多東西都很想放上去~
製作過程如果遇到不會的,看講義或者上網查到,學會了就覺得自己又收穫到一個好知識這樣,
過程雖然有時候會不太順利,會覺得很煩,但做出來超級令人開心的~
真的是越來越喜歡做網頁了grinning smileygrinning smileygrinning smiley

3.製作作業的時間 :
三~四天晚上


[hr]

前置作業(11/09)

(1)網站主題: Hajime社長(介紹)

(2)製作動機
我平常就很喜歡上YOUTUBE看影片,它是我第一個關注的日本Youtuber,超喜歡看他無理頭的影片,於是藉由這次期中來做個網頁介紹他spinning smiley sticking its tongue out

(3)製作內容
首頁(檔名:index)
A.關於Hajime社長 (檔名:top)
B.關於個人Youtube (檔名:about)
C.Hajime特殊紀錄 (檔名:special)
D.合作過的Youtuber (檔名:together)
E.影片連結 (檔名:video)

(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:
bydeux - http://www.bydeux.com/
個人本身就喜歡這種簡單的灰黑白配色,分類淺顯易懂,排版清晰,所以我網頁的配色也會偏簡單 不要過花俏~


◎相關網站列表與分析:
http://www.ilanbnb.com.tw/bnb/mins.htm
http://www.ilanbnb.com.tw/bnb/fm.htm
http://www.ilanbnb.com.tw/bnb/ezmeet.htm 
民宿普遍的網頁都跟我們現在做的網頁差不多,只是有些會加上一些動畫,然後內容多一些,
或者是導覽列不是在上方而是靠左或靠右(直的)這樣。
第三個網址的網頁我覺得很酷的事,他把最底的背景跟前面三個的背景融為一體,
整個沒有什麼違和感而且很美,雖然仔細看會看的出來一點瑕疵,但我覺得這個創意方法是可以學起來的,很棒~grinning smiley
但前兩個也不錯啦,只是就是配色跟圖方面都有點花~



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

完成品(11/16前)
請將這項放置於文章最前面
(1)作業網址:
http://mepopedia.com/~web105-2c/midterm/midterm-1045445051

(2)
有無遇到的問題:
雖然問題有很多,但看講義跟GOOGLE就可以解決~

製作感想:
做完很有成就感,也藉由這次作業知道了許多網頁設計的知識,
雖然過程有許多不順,但最後也靠同學老師的幫助,順利做完。
讓我覺得自己真的還有許多不足之處。

3.製作作業的時間 :
三~五天晚上




前置作業(11/09)

(1)網站主題: 張大千

(2)製作動機:
以前看阿公對張大千的畫十分著名,但小時候完全不知道哪裡好,直到長大後,自己對繪畫有一 定的了解,也才慢慢得對張大千的畫開始著名。

(3)製作內容:

A.經歷 (檔ˋ名:index)
B.風格 (檔名:wow)
C.作品 (檔名:work)
D.感想 (檔名:feeling)
E.關於張大千 (檔名:about)

(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:
https://www.pinterest.com/
很喜歡簡單的配色和不會干擾視覺的網頁,看的心情愉悅,而且搜尋資料方便快捷,不會被畫面搞得一個頭兩個大,所以我製作的網頁也想朝這個目標邁進。


◎相關網站列表與分析:
https://www.kfcorder.com.tw/web/Index.aspx?gclid=Cj0KEQiAvNrBBRDe3IOwzLn6_O4BEiQAmbK-DsCGHJC_FNtjAGKEi6fO3FdWJl4k63_oG9lp88lieS0aAp8c8P8HAQ
http://www.pizzahut.com.tw/
http://www.yakiyan.com/index.html
現在許多網頁都講求方便快捷,功能也都很強大,像食品素食店的網站很多還會設上網訂票和會員專區,跟我們現在做的網頁功能差距很大。
配色跟圖方面都做得讓顧客一目了然,很往消費者的方向想,這些都是網頁設計師需要注意的地方,也是值得我們去學習的方向。
參考維基和google已經非常足夠,
使我很慶幸自己是生在這個年代。



Edited 2 time(s). Last edit at 11/25/2016 04:05PM by 曾慶恩.
(編輯記錄)

(1)網站主題:日本和風文化

(2)製作動機:
一直都對日本的和風插畫及文化有很大的興趣,抓出一些自己感興趣的小題作介紹,並想藉此結合日本傳統歷史悠久的家紋圖樣做介紹順便整理出屬於自己的網頁資料,和大家分享~~!

(3)製作內容:
●關於日本大和文化+家紋由來(檔名:index.html)
●大和文化分類(檔名:nippon.html)
●日本傳統家紋(檔名:kamon.html)
●和歌、俳句(檔名:waka.html)
●圖形連結網站(檔名:design.html)

(4)資料蒐集分析

◎設計優良網站(風格)列表與分析:
http://tsukiuta.com/
雖然是一個日本企劃網站,但我喜歡他每點進去一次人物會不同的驚喜感,而且主題跟宣傳小標清楚分明,不會錯亂,
喜歡有這種小圖配字和色塊的感覺>
http://www.cw.com.tw/blog/index.action
一個集合生活國際大小事的網站,字級大小分明,很請楚他的分類標的,期中網頁就跟這種感覺差不多!


◎相關網站列表與分析:
http://www.hanakomon.jp/
http://depressytrouble.tw/index.php/information/
http://www.benricho.org/kamon/
因為最主要有一半主題是日本的家紋,所以想用圖一半和字一半的方式做穿插介紹,之後如果有機會,希望能教放入搜尋語法的功能,因為我這次的主題比較雜呢。
想說參考這些日本網站做出來能方便統整和搜尋的網站也很快就能有製作方向><!



Edited 2 time(s). Last edit at 11/12/2016 12:05AM by j29927381.
(編輯記錄)

(1)作業網址

http://mepopedia.com/~web105-2c/midterm/midterm-1045445069

(2)
1有無遇到的問題

按鈕連結要很細心,預覽有時候會連不出來,結果發現是打錯字。
類別花很久的時間設定,不太曉得怎麼設定,設定了有時候跑不出來
,看講義上網查一下才用好~

2.製作感想

真的還好是可以做自己喜歡的主題,不然找資料這關就會不耐煩了spinning smiley sticking its tongue out
雖然有很多語法不太懂,但經過慢慢摸索,有比較了解。

3.製作作業的時間

共8小時





前置作業(11/09)
(1)網站主題: 輕晨電

(2)製作動機:因為喜歡劉以豪,認識輕晨電,喜歡上他們輕柔的後搖音樂。

(3)製作內容:

首頁 - 簡單介紹輕晨電(index.html)
關於輕晨電 - 輕晨電&作品歷程(about.html)
成員介紹(Introduction.html)
音樂作品(music.html)
聯絡輕晨電(Connection.html)


(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:

https://www.cartoonbank.com/
上面都會分享幽默的小圖片,圖片列表編排的很有趣,列表分類很清楚
,風格很簡潔,用色黑灰。

◎相關網站列表與分析:
http://www.eelin.com.tw/page/band.html
伊林輕晨電官網,時尚的感覺,類別分類也跟我們教的類似~
http://www.look-in.com.tw/channel/article/1350
輕晨電的專訪,用色黑灰,成員照片也是來自裡面的照片。

(1)作業網址

http://mepopedia.com/~web105-2c/midterm/midterm-1045445009

(2)
1有無遇到的問題

剛開始按鈕跟網頁無法連結,結果後來是發現檔名打錯嘞

2.製作感想
可以做自己喜歡的主題,很開心,但是找問題就頭就很暈
3.製作作業的時間

共7小時



(1)網站主題:庫洛魔法使

2)製作動機: 因為小時候很喜歡看小狼跟桃矢哥哥,而且他最近聽說有新翻,就想做做看和大家分享童年回憶。

(3)製作內容:
1故事大綱
2人物介紹
3庫洛牌
4劇場版
5精彩片段

(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:
https://www.tokichoi.com.tw/MainBrower.aspx?pmmNo=Topic05&houseno=event&utm_source=AsiaPac_google&utm_medium=ROI&utm_campaign=BRAND
喜歡這種小一點的架構
http://www.pazzo.com.tw/
顏色比較柔和 少女的感覺
◎相關網站列表與分析:
http://www.ettoday.net/dalemon/post/17436
在這個網站上看到的訊息,所以讓我有了動機



Edited 1 time(s). Last edit at 11/16/2016 10:53AM by 1045445009.
(編輯記錄)

完成品(11/16前)
請將這項放置於文章最前面
(1)作業網址http://mepopedia.com/~web105-2c/midterm/midterm-1045445003

(2)
1有無遇到的問題 :中途出現很多問題,但就GOOGLE一下,在自己亂搞一下就莫名其妙的OK了 smileys with beer

2.製作感想 :能做自己喜愛的事物真的很開心,但在作的途中會因為遇到瓶頸而變得有點心情煩躁,有時候腦中所想的畫面,在用好HTML跟CSS時,出來的畫面卻不如所想像得如此完美,甚至會出現像是字跑掉很多這種窘境,這種時候就真的要用耐心去慢慢研究加嘗試,好險是自己有興趣的東西(●´∀`●)

3.製作作業的時間 :沒有在計算,但很久,因為時不時就會卡住...(´ཀ`」 ∠):_


[hr]


前置作業(11/09)
(1)網站主題:THE WALKING DEAD 陰屍路

(2)製作動機: 原本就是帶著可能被嚇到一兩集就會放棄的心態去看的,但他不愧為最高收視美劇的名號,不只是一堆殭屍,也寫實的剖析了人在絕境時所做出的反應,可以說是將現在經過美化的社會血淋淋的攤在面前,就是如此真實才讓人喜歡。

(3)製作內容:
A.劇情大綱(檔名:index)
B.主要角色(檔名:main)
C.次要角色(檔名:cast)
D.系列簡介(檔名:view)
E.相關影片(檔名:video)

(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:
印傻子 http://app.inkfool.com/
運用黃色與黑色建構出一個醒目而清爽的畫面,利用單欄版面搭配上方導覽列做出適合客戶的設計,按導覽列時會直接在同個頁面下拉至該區塊,非常方便又快速。

◎相關網站列表與分析:
AMC http://www.amc.com/
利用滿版的劇照來顯示節目的特色,加上左邊文字顯示節目目前更新到第幾集,讓想追劇的人一目瞭然。



Edited 2 time(s). Last edit at 11/22/2016 11:32PM by 朱盈穎.
(編輯記錄)

1025445200-連怡婷
(1)作業網址:
http://mepopedia.com/~web105-2c/midterm/midterm-1025445200

(2)網站主題:kikilala網站介紹
(3)製作動機:
因為非常喜歡三麗鷗裡面的kikilala,所以想做他的相關介紹

(4)製作內容:
●關於kikilala的資訊(檔名:index.html)
●關於三麗鷗公司的介紹(檔名:about.html)
●kikilala的圖片介紹(檔名:image.html)
●kikilala的官方商品介紹(檔名:commodity.html)
●kikilala的影片介紹(檔名:video.html)
(5)資料蒐集分析

◎相關網站列表與分析:
以老師上課教的網頁版型為主要架構切割簡單閱讀也很方便,在圖片地方加入fancebox ( http://fancyapps.com/fancybox/#license )讓圖片能放大觀賞使得圖片顯示更清楚
內容參考三麗鷗裡的資訊圖片為主( http://www.sanrio.com.tw/Characters/Characters.aspx ),youtube影片崁入

完成品(11/16前)
請將這項放置於文章最前面
(1)作業網址:
http://mepopedia.com/~web105-2c/midterm/midterm-1045445141

(2)
有無遇到的問題:


製作感想:
小成就,只是沒睡覺有點睏。
3.製作作業的時間 :
一晚,約莫六小時。




前置作業(11/09)

(1)網站主題: LNG workshop

(2)製作動機:
廢人如我沒事就喜歡窩在家看實況,LNG是我很喜歡的實況團隊,想藉這次機會介紹下。

(3)製作內容:
首頁(檔名:index)
A.關於 (檔名:about)
B.成員 (檔名:member)
C.歷程 (檔名:history)
D.影片 (檔名:video)
E.連結 (檔名:link)

(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:



◎相關網站列表與分析:
https://www.facebook.com/pg/smily0347/photos/?ref=page_internal
子子Smily 圖片出處

完成品(11/16前)
請將這項放置於文章最前面
(1)作業網址:
http://mepopedia.com/~web105-2c/midterm/midterm-1045445177

(2)
有無遇到的問題:
按鈕那裏太複雜只好看老師影片

製作感想: 好友好有成就感ˇ-ˇ

3.製作作業的時間 :
三-四天

1045445177 Wrote:
-------------------------------------------------------
完成品(11/16前)
請將這項放置於文章最前面
(1)作業網址:
http://mepopedia.com/~web105-2c/midterm/midterm-1045445177
(2)
1有無遇到的問題:
開始做得時候迷迷糊糊的,看影片才懂。

2.製作感想:
小美人魚是我最喜歡的公主能做出他的網站我覺得很高興。

3.製作作業的時間:
不知道,每天做一點每天做一點好多天好多天


前置作業
(1)網站主題: Princess Ariel
(2)製作動機:因為所有公主裡我最喜歡小美人魚了~~~~~

(3)製作內容:

首頁 -劇情簡介(index.html)
人物介紹(people.html)
照片分享(pic.html)
得獎經歷(get.html)


(4)資料蒐集分析
維基百科及許多網站上

完成品(11/16前)
請將這項放置於文章最前面
(1)作業網址 http://mepopedia.com/~web105-2c/midterm/midterm-1045445198

(2)
1有無遇到的問題 :NO
2.製作感想 :
好累
3.製作作業的時間: 1W

1.作業網址:C:\Users\user\Desktop\midterm-1045445120\1.html

2.有無遇到的問題:超多問題 爬文爬很久QQ

3.製作時間:5天



Edited 1 time(s). Last edit at 11/16/2016 12:49PM by zxzx10110774.
(編輯記錄)

1045445174-林宣妤 smileys with beer

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

(2)
有無遇到的問題:


製作感想:
有成就感,風格很可愛很夢幻很滿意



前置作業(11/09)

(1)網站主題: 甜點食譜

(2)製作動機:
想要做一個風格夢幻的網站,又剛好喜歡甜點

(3)製作內容:
波士頓派 (檔名:index)
提拉米蘇 (檔名:index2)
檸檬塔 (檔名:index3)
烤布蕾 (檔名:index4)
千層蛋糕 (檔名:index5)

(4)資料蒐集分析
https://www.ytower.com.tw/recipe/recipe-search.asp?MAINFOOD=%A6%E8%A6%A1%C2I%A4%DF



Edited 1 time(s). Last edit at 11/16/2016 01:30PM by 1045445174.
(編輯記錄)

(1)作業網址 : http://mepopedia.com/~web105-2c/midterm/midterm-1045445180
(2)
1有無遇到的問題 : 問題很多,但是很好玩,影片幫助也很大。
2.製作感想 : 覺得很有成就感,老師講得很清楚。
3.製作作業的時間 : 每個晚上兩小時起跳。


(1)網站主題: 鋼鐵人
(2)製作動機: 因為很喜歡小勞勃道尼,裡面的男主角。
(3)製作內容:
> 劇情介紹>index.html
>演員介紹>actor.html
>能力介紹>ability.html
>出版歷史>history.html
>幕後花絮>highlights.html

(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:
https://www.buzzfeed.com/tasty
用短時間與食材當作影片一開始的封面,一目了然,就算不會英文也能讓觀看者知道是在做什麼。

◎相關網站列表與分析:
http://app2.atmovies.com.tw/film/fien00371746/
主要是讓還沒看過這部片的人會有想看的慾望,但是他只有文字比較多,所以我加很多圖片。

前置作業(11/09)
<1.>網站主題:金智媛
<2.>製作動機:之前就有看過她拍的韓劇,覺得她很漂亮。
<3.>製作內容:檔名a-她的音樂作品
檔名b-她拍過的電視電影
檔名c-她網拍得的帽子衣服
檔名d-她代言的廣告
<4.>資料蒐集分析:https://zh.wikipedia.org/wiki/%E9%87%91%E6%99%BA%E5%AA%9B

完成品(11/16前)
<1.>作業網址: http://mepopedia.com/~web105-2c/midterm/midterm-1045445212
<2.>有無遇到的問題:一直無法連結到下一個,還有圖文環繞。
<3.>製作感想:雖然做完很有成就感,可是真的覺得好累喔有點壓力。
<4.>製作時間:一個禮拜以上

完成品(11/16前)

作業網址:http://mepopedia.com/~web105-2c/midterm/midterm-1045445057

有無遇到的問題:
有遇到問題,但是老師的講義和影片很詳細,可以在裡面找到幫助。

製作感想 :
這是從高中以來第一次讓我自己會有意願打開dreamweaver做作業,因為是自己喜歡的東西,做起來也特別有勁!雖然做的時候常常步驟錯或是語法錯會很鬱卒,可是為了我的美少女戰士...一切都是值得的!!!

製作作業的時間:大約6-8小時

前置作業(11/09)
(1)網站主題: 美少女戰士
(2)製作動機: 因為美少女戰士是許多8年級生的童年回憶,想要做一個特別介紹這部動畫的網站。
(3)製作內容:
〃劇情簡介
〃登場角色
〃動畫歌曲
〃作者介紹
〃相關連結

(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:http://kiito.jp/chibikkobe/
這種日式的風格我很喜歡,一開網頁進去就會是很大張的圖片,很清楚明瞭,圖片也跟文字放在一起很容易看懂,視線不會混亂。
◎相關網站列表與分析:
http://sailormoon-official.com/
就像動畫裡一樣用不同顏色分出分頁的按鈕,公佈官方的消息、商品,充滿童年回憶的地方!

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

1有無遇到的問題: :老師講義中資料詳細,並無遇到問題。
2.製作感想 : 期中作業是由hw03作為延伸,網頁設計一個有趣的地方就在於,會越做越上癮,或
許是自己喜歡的主題,做起來特別感到愉快,也藉由期中作業,也讓我自己更認識了蝴蝶蘭,雖然
自己只有養兩盆,也因本次查詢資料的過程,更加掌握對於濕度、水分的控制等,蝴蝶蘭也是年節
常見花卉,色彩豐富,喜氣吉祥,廣泛用於喜慶布置,繽紛或帶有紋路的花型,使蝴蝶蘭成為「蘭
花皇后」,在作業過程中,真的令我感到困難的地方並非是網頁架構,而是網頁配色,最初在做hw
03時,使用了綠、紫、棕色作為標題色彩,後來發現,區別標題與內容也可使用標題裝飾或是系列
色彩對比,能使網頁乾淨便且有一致性,真的厲害的人不是網頁架構清楚明瞭,而是如何善用架構
及裝飾,舉一反三設計獨具個人風格的網頁,以及適合主題的配色,總之,本次期中作業也使自己
了解基本架構清晰,並且使用自己學過的技巧,融合在自己的網頁中,以及一再嘗試的經驗累積,
而使往後的作業,熟悉明瞭,生動變化。



●欲呈現風格:自然、生態、優雅、精緻

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

背景-藕紫色,淡黃綠色。

標題-深藕紫色,暗綠色。

內容-中灰色。

3.製作作業的時間:2~3天(每天晚上時間約3~4小時)



前置作業
(1)網站主題:雅緻蝶舞-蝴蝶蘭
(2)製作動機: 蝴蝶蘭為蘭科中最普遍及如飄灑蝶舞的花朵,廣受人們歡迎, 常布置於喜慶場合,
一般花凋謝後,總會被丟棄,但經由後續整理及照顧,每年都將有花可賞,蝴蝶蘭堅毅挺拔的生長
將會為花園、陽台帶來不同的樣貌,也經由本次作業也讓自己更認識了蝴蝶蘭,也藉由這個網頁,
讓更多人認識並且了解優雅飛舞的蝴蝶蘭。

(3)製作內容:

首頁(檔名:index)
A.蝴蝶蘭簡介 (檔名:ction)

主要介紹蝴蝶蘭概述以及蝴蝶蘭屬,資料參考為維基百科-蝴蝶蘭。

B.選購妙方 (檔名:about)

介紹在選購蝴蝶蘭時,須留意的細節,如葉片,花瓣,及根系的健
康與否,都會影響往後蝴蝶蘭的觀賞期及後續管理。資料參考為蘋
果日報新聞-專家教蝴蝶蘭挑選照顧妙方

C.照顧方法 (檔名:care)

主要介紹蝴蝶蘭照顧方式,可分為場所、日照、溫度、濕度及植具
等鄉光資料。資料參考為蘭花情報局-蘭科植物園。

D.圖片欣賞 (檔名:image)

主圖為台灣原生種白蝴蝶蘭,「台灣阿嬤」,以及簡介和其他品種
蝴蝶蘭圖片,也可知道蝴蝶蘭種類、花色繁多。

E.種植影片教學 (檔名:film)

為蝴蝶蘭換盆,澆水相關影片。

(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:
https://kmweb.coa.gov.tw/subject/ct.asp?xItem=6742&ctNode=1482&mp=31&kpi=0&hashid=

同一色系,深淺變化,使網頁畫面具有一致性,並且利用色彩分層不同的欄位,錯落有致,網頁塊
面排列,色調清晰舒服, 以淺藍~深藍的變化, 不會使得網頁色調過於雜亂,特別喜歡主頁內容與
標題類別畫面色彩分明,內容使用色底稱景,使文字與背景清晰易瞭,整體典雅,中華圖騰結合現
代流線造型,具有東西方風格融合,畫面優雅平和,段落分明。

◎相關網站列表與分析:
http://kmweb.coa.gov.tw/knowledge/knowledge_cp.aspx?ArticleId=298414&ArticleType=A&CategoryId=A&kpi=0&dateS=&dateE=

http://www.appledaily.com.tw/appledaily/article/supplement/20100108/32217016/



Edited 7 time(s). Last edit at 11/22/2016 12:50PM by 松本.豪.
(編輯記錄)

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

1有無遇到的問題: :老師講義中資料詳細,上課詳細解說,遇到問題時,同時解決,與同學一同討論。
2.製作感想 : 這次的作業是以HW03來做延伸,而且網頁設計會越做越上癮,慢慢的發現一些有趣的變化,即使過程可能要花上時間來探討,但都是值得。


●欲呈現風格:粉嫩 插畫 色彩

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

背景-淡黃色。
色彩溫和

3.製作作業的時間:2~3天(每天晚上時間約2~3小時)



前置作業
(1)網站主題:Nathalie Lete插畫家
(2)製作動機: 我很喜歡這個外國藝術家,所以想要藉由這次的作業,分享給各位同學及老師
(3)製作內容:

1.插畫家介紹
2.插畫家的作品介紹
3.自創的品牌與規劃
4.創意周邊商品
5.藝術家語錄篇
(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:
http://sanwen8.cn/p/4bb6X2h.html

◎相關網站列表與分析:
https://www.facebook.com/notes/funzakkacom%E5%A5%BD%E7%8E%A9%E9%9B%9C%E8%B2%A8/%E6%B3%95%E5%9C%8B%E7%9F%A5%E5%90%8D%E6%8F%92%E7%95%AB%E5%AE%B6_nathalie-lete/10151981857907172?__mref=message_bubble

http://www.marieclaire.com.hk/articles/39/zhe-jiu-shi-wo-xiang-wang-de-chuang-yi-ren-sheng
圖片
https://www.pinterest.com/search/pins/?q=nathalie%20lete&rs=rs&etslf=2897&eq=&term_meta[]=nathalie%7Crecentsearch%7C1&term_meta[]=lete%7Crecentsearch%7C1

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

1有無遇到的問題:有一些
2.製作感想 :很有趣
3.製作作業的時間:1~2天

前置作業
(1)網站主題:Standing Egg
(2)製作動機:很喜歡他們的音樂風格,所以想讓大家認識 。

(3)製作內容:
1.關於介紹
2.創作理念、意義
3.專輯列表
4.音樂影片
5.相關網站

檔名:
關於介紹 . (檔名:index)
創作理念、意義 (檔名:about)
專輯列表 (檔名:music)
音樂影片(檔名:video)
相關網站 (檔名:link)

(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:
http://www.books.com.tw/exep/activity/activity.php?id=0000058285&sid=0000058285&page=1
關於他們的詳細資料,一目瞭然。

◎相關網站列表與分析:
https://www.kkbox.com/tw/tc/artist/r7l9-3aJ8465cr0F01.TC08K-index-1.html
關於他們的專輯資訊與圖片。

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

1,有無遇到的問題:一邊看著老師的講義製作,然後有遇到問題就估狗,或是問老師,所以問題都解決了~只是DW有時候很不聽話而已~~~

2.製作感想 :是以作業三繼續製作,然後前前後後又改了許多的東西,都是細節的部分,但是自己做滿意之後也比較開心哈哈,本來作業一二都做超爛的,後來整個投入心力下去,感覺有大大進步~~~~~,果然用心處理,成果就會不一樣~~希望未來能學到更多技巧,因為搞到後來,發現網頁設計也蠻有趣的啊~~~~一頭埋進去,就出不來了!


3.製作作業的時間:返家的火車上、數不清的夜晚、上課時間......不知怎麼計算XD



前置作業
(1)網站主題:現代生活中的預言者、唱遊說書人:Easy Shen

(2)製作動機:因為是自己喜歡的音樂人,所以製作起來比較有趣,通常一遍做的時候都一邊聽他的歌~遇到困難和瓶頸的時候,真的是蠻有動力的~而且我想要將他的音樂分享給更多的人~~~~

(3)製作內容:

1.首頁(檔名:index.html)
2.音樂介紹 (檔名:aboutmusict.html)
3.音樂錄影帶 (檔名:mv.html)
4.詞曲創作 (檔名:songrite.html)
5.演出照片 (檔名:photo.html)

(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:
http://easyshen.net 他本人的網站,但是內容很精簡,是以白色為背景,很簡單、乾淨,所以我保留了白色的部分沿用。

http://www.youcool.com.tw/index.php 這間名宿的網站側記很有趣生動,雖然跟我要做的不同,但是還是蠻喜歡的~

◎相關網站列表與分析:

https://www.indievox.com/easy

https://tw.streetvoice.com/ezshen/



Edited 2 time(s). Last edit at 11/21/2016 02:14AM by sharon111688.
(編輯記錄)

完成品(11/16前)
請將這項放置於文章最前面
(1)作業網址:
http://mepopedia.com/~web105-2c/midterm/midterm-1045445042

(2) 有無遇到的問題:
都是些小問題,基本上在檢查一下語法就ok了

製作感想:
雖然製作過程滿痛苦的,因為在做好時總會出現一兩個小問題......,但解決後一看到網頁成行成就感超高!
沒想過原來我也能做完完整的網頁~

3.製作作業的時間 :
這次只差作分頁,花了兩三個小時吧


前置作業(11/09)

(1)網站主題: 練習,喜歡自己

(2)製作動機:
因為最近很喜歡肆一的作品,剛好買了他這本書想說就介紹他吧

(3)製作內容:
A.一個人練習 (檔名:index)
B.喜歡自己的練習(檔名:like)
C.好朋友的練習 (檔名:friend)
D.好好生活的練習 (檔名:life)
E.作者介紹 (檔名:author)

(4)資料蒐集分析
◎設計優良網站(風格)列表與分析、相關網站:
http://fourone41.pixnet.net/blog
https://www.facebook.com/fourone4141
http://search.books.com.tw/search/query/cat/all/key/%E8%82%86%E4%B8%80/adv_author/1
本身就喜歡有照片的版面,所以製作時都是丟圖,也沒特別參考。

(1)作業網址 : http://mepopedia.com/~web105-2c/midterm/midterm-1045445189
(2)
1有無遇到的問題 : 看影片加上以前的概念大致可以完成,但是字會跑掉,幸好老師有教我再設定好
2.製作感想 : 這次的作業我融合了前面的作業,每個分頁上面的插圖也是自己畫的,做完很感動也讓我知道網頁設計其實不是那麼難那麼遙遠,雖然沒有做得很厲害但是用心做好真的很有成就感
3.製作作業的時間 : 3個晚上 還有2堂課(老師教我設定讓字不會亂跑)


(1)網站主題: 介紹大溪
(2)製作動機: 原先我想繼續做汽車總動員的主題,但是可以介紹的內容太少,靈光一閃可以來介紹我的家鄉,做一個實用的網站
(3)製作內容:
這次我用彩虹輕柔的配色,雖然大溪是個古色古香的地方,但是對我來說就像是彩虹一樣美麗,而且不會太搶眼
按鈕的部分有豆干跟陀螺的小插圖,每一頁也都有可愛的小插圖
大溪的介紹(index.html)這頁有按鈕頁,也比較無聊,算是大溪的基本資料
大溪的景點(see.html)這頁有滑鼠可以變換影像,因為我想這樣會比較豐富,然後還有景點的簡介,可以連到下個分頁(see2.html)這頁也是景點介紹,但是可以連到桃園市的觀光導覽網站看更多的地方
大溪的美食(eat.html)這頁也有滑鼠可以變換影像,這裡都是介紹我私心推薦好吃的店家,可以連到下個分頁(eat2.html)這頁也是美食,也能連到部落客的推薦,看看其他人推薦的好滋味
影片欣賞(video.html)我本來想放文化局拍得美美的宣傳影片不料文化局居然沒拍...不過也讓我找到高中生的介紹影片口條很清晰也能讓大家認識這美麗的地方,還有節目拍的大溪老街也很有趣
大溪文藝季(season.html)這頁是大溪的特色,我放了一些圖片還有影片和介紹的文字,想讓大家更了解這個屬於大溪人的第二個過年,而且真的很熱鬧喔(還容易塞車...)
交通資訊(traffic.html)這頁就是交通資訊但是點開圖片還會變大喔讓人看得更清楚

(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:
介紹網頁:ㄇㄞˋ點子
網址:www.mydesy.com
這個網站有分很多區塊,文章下面也會有標籤,讓人清楚及快速的可以找到自己要的靈感
有非常多關於設計的內容,可以讓人每天閱讀,而且網頁不複雜
也用了一些配色去區分區塊
◎相關網站列表與分析:
http://travel.tycg.gov.tw/zh-tw/Travel/Attraction/414
有詳細的資訊去介紹大溪 但是不單單只有大溪而已

(1)作業網址

http://mepopedia.com/~web105-2c/midterm/midterm-1045445018

(2)
1有無遇到的問題
有時候要換圖片的時候會整個跑掉,找不到為什麼會這樣

2.製作感想
半夜一直看食物圖好自虐阿

3.製作作業的時間
一個晚上





前置作業(11/09)
(1)網站主題:台灣夜市小吃

(2)製作動機:因為很喜歡台灣的小吃,夜市小吃是台灣的驕傲

(3)製作內容:
每一頁都是個別介紹一樣小吃


(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:
http://www.ntm.gov.tw/tw/index.aspx
很中規中矩的網站,是老師教過的進化版

◎相關網站列表與分析:
http://travel.network.com.tw/nightmarket/taiwan-snacks.asp
整個很有夜市風,還有會動的可愛招牌,列舉了非常多小吃
還有精選夜市介紹

(1)作業網址 :http://mepopedia.com/~web105-2c/midterm/midterm-1045445162
一、前置作業:
(1)網站主題:日本和風文化

(2)製作動機:
一直都對日本的和風插畫及文化有很大的興趣,抓出一些自己感興趣的小題作介紹,並想藉此結合日本傳統歷史悠久的家紋圖樣做介紹順便整理出屬於自己的網頁資料,和大家分享~~!

(3)製作內容:
●關於日本大和文化+家紋由來(檔名:index.html)
●大和文化分類(檔名:nippon.html)
●日本傳統家紋(檔名:kamon.html)
●和歌、俳句(檔名:waka.html)
●圖形連結網站(檔名:design.html)

(4)資料蒐集分析

◎設計優良網站(風格)列表與分析:
http://tsukiuta.com/
雖然是一個日本企劃網站,但我喜歡他每點進去一次人物會不同的驚喜感,而且主題跟宣傳小標清楚分明,不會錯亂,
喜歡有這種小圖配字和色塊的感覺>
http://www.cw.com.tw/blog/index.action
一個集合生活國際大小事的網站,字級大小分明,很請楚他的分類標的,期中網頁就跟這種感覺差不多!


◎相關網站列表與分析:
http://www.hanakomon.jp/
http://depressytrouble.tw/index.php/information/
http://www.benricho.org/kamon/
因為最主要有一半主題是日本的家紋,所以想用圖一半和字一半的方式做穿插介紹,之後如果有機會,希望能教放入搜尋語法的功能,因為我這次的主題比較雜呢。
想說參考這些日本網站做出來能方便統整和搜尋的網站也很快就能有製作方向><!

二、期中完成品:
1有無遇到的問題:
基本沒有,作業3熟練了之後其實很好上手呢!就是整理資料花了一些時間哈哈
2.製作感想:
頭一次做了這麼完整的網頁,雖然很多地方只要出了小差錯整個網頁可能就出不來了,但是漸漸上手後其實也沒這麼難嘛!就是要花點時間跟英文還有語法培養感情XDDDDD

3.製作作業的時間:
(不算上課時間及找資料的時間) 7~8小時←前面有很長時間再弄懂語法跟調整

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

2網站主題:文青書店介紹

3製作動機: 想讓大家知道更多不一樣的書店風格

4製作內容: ●關於書店簡介(檔名:index.html)
●關於台灣時事相關的書店介紹(檔名:about.html)
●<書店裡的影像書>影片介紹(檔名:image.html)
●關於國際上的書店(檔名:commodity.html)
●新興書店的介紹與位置分享(檔名:video.html)

5資料蒐集分析:參考網站http://clickme.net/26546
https://www.klook.com/zh-TW/blog/香港獨立書店/

(1)網站主題: 辛普森
(2)製作動機: 蠻喜歡辛普森的所以就以他最為主題
(3)製作內容:
首頁-劇情介紹(index.html)
電影介紹(movie.html)
角色介紹(simpson.html)
幕後團隊(team.html)
周邊商品(universal studios.html)
(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:
https://www.inside.com.tw/2011/05/13/pinterest
這個網站內容簡潔又明瞭讓人一目瞭然
◎相關網站列表與分析:
https://zh.wikipedia.org/wiki/%E8%BE%9B%E6%99%AE%E6%A3%AE%E4%B8%80%E5%AE%B6
裡面有很多辛普森資訊
(1)作業網址 http://mepopedia.com/~web105-2c/midterm/midterm-1045445045
(2)
1有無遇到的問題:無
2.製作感想:從無到有中間遇到一些小挫折,不過最後做出來非常有成就感
3.製作作業的時間5-6小時



Edited 1 time(s). Last edit at 11/22/2016 07:40PM by 1045445045.
(編輯記錄)

(1)作業網址

http://mepopedia.com/~web105-2c/midterm/midterm-1045445072

(2)
1有無遇到的問題

因為本人的網頁程式是CC版本跟CS6有點落差所以找東西改東西都弄超久的。
最後不得已只好到學校圖書館做,但學校電腦滑鼠真是非常不靈敏(不知道是不是因為沒滑鼠墊的關係)
加上程式非常傲嬌很有個性,他就是不讓你做超連結....
恩,可能是我人品數值沒有點滿被3C產品討厭,我會自行檢討。

2.製作感想

原本是做自己喜歡的主題應該是件開心的事....現在我不這麼認為了呵呵eye rolling smiley

3.製作作業的時間

也許可能應該大概是10小時....吧?confused smiley

前置作業(11/09)
(1)網站主題:Siv HD

(2)製作動機:喜歡Siv HD所以想做關於他的網站

(3)製作內容:

首頁 - 介紹Siv HD
Youtube連結
twitter連結
twitch連結
Facebook粉絲專業


(4)資料蒐集分析

https://www.facebook.com/sivhdonline/?fref=ts
他個人的facebook粉絲頁
https://www.google.com.tw/search?q=siv+hd+%E4%BB%8B%E7%B4%B9&espv=2&biw=1536&bih=760&source=lnms&tbm=isch&sa=X&ved=0ahUKEwi-ip3vprzQAhUJF5QKHZHwAacQ_AUIBygC
他的圖片來源
https://guild.gamer.com.tw/wiki.php?sn=5259&n=Siv%20HD%E7%9A%84%E5%80%8B%E4%BA%BA%E8%B3%87%E6%96%99
他的介紹來源

(1)作業網址

http://mepopedia.com/~web105-2c/midterm/midterm-1045445027

(2)
1有無遇到的問題:
剛開始不知道怎麼做按鈕連結的時候有點不知道怎麼起手,會有點亂,但會了之後就滿順的。

2.製作感想:
做自己喜歡的B.A.P 就算是期中其實也做得滿開心的ˊ3ˋ
圖片要放哪張都好猶豫啊~

3.製作作業的時間:
沒仔細計算過欸...


前置作業
(1)網站主題: B.A.P
(2)製作動機:從高中開始就喜歡的團體,看著他們6個人的坦率個性,
表示一輩子不脫飯,所以想為他們做個網頁。

(3)製作內容:

首頁 - B.A.P簡介(index.html)
代言(endor.html)
成員介紹(member.html)
音樂作品(Music.html)
經歷(experience.html)


(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:

http://www.stunden.org/category/portfolios/
知名插畫網站,在裡面可以看到很多風格的繪圖,我很喜歡,
網站的排版也很簡單明瞭,讓人一目了然。

◎相關網站列表與分析:
http://www.tsenter.co.kr/index.asp
B.A.P經紀公司TS的官方網站,一點進去就是播放B.A.P的最新MV,主題明瞭。

http://www.koreastardaily.com/tc/tags/B.A.P
B.A.P的KSD韓星網,裡面介紹了很多關於韓國的明星,不管是演員還是藝人都包含其中。



Edited 1 time(s). Last edit at 11/22/2016 08:14PM by Jieru.
(編輯記錄)

(1)網站主題:蠟筆小新
http://mepopedia.com/~web105-2c/midterm/midterm-1045445033

(2)製作動機:

其實跟第三次作業想法差不多,
基本想法是由童年而設計,
童年時因為從小是由外公.外婆帶大,
所以大部分的時間不是在家裡附近玩耍不然就是自己一個人看電視,
可以說小時候都是這些卡通帶著我成長,
算是一個無法抹滅的回憶,
我十分的珍惜,
但也因為現在的進步,
很少小朋友看卡通.玩玩具都把時間花在3C上,
實在非常可惜,
變得卡通和玩具已經落伍,
也希望能做做這主題來回味我的童年吧,
也實在看到有些捨不得,
時間過得很快很快。

(3)製作內容:

風格用最最引小朋友且同樣色系的方式呈現,
蠟筆小新雖然很色很懶惰,
但看過他許多影片.卡通後就會發現,
他是個十分有正義感,
又熱心助人的小朋友,
看他的作品有時熱血,
有時感傷,但大多數他帶給許多人歡笑,
雖然這些比較偏理念,
但在設計時,
我還是以簡約,大眾,鮮明為主要搭配。

1.首頁 (檔名:index.html)
2.主角 (檔名:protagonist.html)
3.人物 (檔名:character.html)
4.作品 (檔名:works.html)
5.歌曲 (檔名:music.html)

最後的問題還是在英文這方面...受到些微阻礙,但實際上做得滿順手的,大概花了1天吧~中間摸了不少下XD

(4)資料蒐集分析

◎相關網站列表與分析:
基本上都是參考維基和google居多,
其實參考這些就很足夠了,
方便方便又快速也很清楚製作方向。



Edited 1 time(s). Last edit at 11/22/2016 10:05PM by Hus,Ching-Chiech.
(編輯記錄)

(1)作業網址 :http://mepopedia.com/~web105-2c/midterm/midterm-1045445105
(2)
有無遇到的問題 :這次遇到的問題大多都是在連結的時候會有些不順,在置入影片的時候一開始還不會用但後來慢慢自己有摸出來
製作感想 :雖然製作過程相當繁雜但覺得會越做越有成就感
製作作業的時間 :3~5天

前置作業
(1)網站主題: 東京迪士尼樂園
(2)製作動機: 因為之前有去過東京迪士尼玩一直很念念不忘,去到那邊彷彿進入了童話故事裡,每個遊樂設施都非常好玩,所以想要藉由這個網頁推薦給大家
(3)製作內容:
首頁(檔名:index)
東京迪士尼樂園(檔名:tokyodisineyland)
東京迪士尼海洋(檔名:tokyodisineysea)
影片介紹(檔名:tokyodisineyvideo)
票券諮詢(檔名:tokyodisineytickets)
交通指南(檔名:tokyodisineydirection)
(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:
http://81-web.com/這個網頁分類的相當清楚一目了然,畫面非常清晰
http://blog.dbcut.com/m這個網頁給人一種非常舒適的感覺,一進去的畫面非常柔和
◎相關網站列表與分析: http://www.tokyodisneyresort.jp/tc/tdl/東京迪士尼的官方網站

前置作業(11/09)
(1)網站主題: 金太妍
(2)製作動機: 因為太妍非常漂亮又很吸引人注目,她唱的歌也非常好聽,又很喜歡她的個性和綜藝感,所以想要為她製作網頁。
(3)製作內容:
1個人介紹
2個人經歷
3個人作品
4廣告代言
5得獎獎項
(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:
http://www.airspace.com.tw/
一打開網站就有許多漂亮的照片和粉紅色色塊,相當簡潔可愛,簡直要少女心爆發了,這網站圖片配置很好,讓消費者相當明瞭。
◎相關網站列表與分析:
https://www.smtown.com/
這是太妍的經紀公司的官網,可以透過這個了解到太妍的訊息。
完成品(11/16前)
請將這項放置於文章最前面
(1)作業網址 http://mepopedia.com/~web105-2c/midterm/midterm-1045445030
(2)
1有無遇到的問題 無
2.製作感想 製作出來的成果實在讓我太驚艷了,非常有成就感!
3.製作作業的時間 七小時

作業網址 http://mepopedia.com/~web105-2c/midterm/midterm-1045445102


(1)網站主題: 菜鳥新移民
(2)製作動機: 在看電視的時候發現菜鳥新移民是一部很有趣的美劇
(3)製作內容:

1劇情介紹 (about
2主要角色 (maincast
3常設角色 (recurr
4發展製作 (production
5影片觀賞 (video

(4)資料蒐集分析

http://lenachen9999.pixnet.net/blog/post/328828714-%5B%E7%BE%8E%E5%8A%87%5D-%E8%8F%9C%E9%B3%A5%E6%96%B0%E7%A7%BB%E6%B0%91%EF%BC%81%E5%BE%88%E6%9C%89%E6%84%9F%E7%9A%84%E4%BA%9E%E8%A3%94%E7%A7%BB%E6%B0%91%E5%AE%B6%E5%BA%AD-

1有無遇到的問題 需要加強練習
2.製作感想 有趣
3.製作作業的時間 10小時

完成品(11/16前)
請將這項放置於文章最前面
(1)作業網址:
http://mepopedia.com/~web105-2c/midterm/midterm-1045445153

(2) 有無遇到的問題:
我個人的進度跟不太上,但是老師網路上的教學真的很完整,但某些部分還是需要詢問同學,
但同學也很任心的幫忙我,我很感謝他5042。

製作感想:
雖然製作過程滿痛苦的,因為在做好時總會出現一兩個小問題......,但解決後一看到網頁成行成就感超高!
沒想過原來我也能做完完整的網頁~

3.製作作業的時間 :
5個小時,但因為我自己沒有軟體,但同學的軟體是英文版,所以花了點時間。


前置作業(11/09)

(1)網站主題:老鷹音樂公司

(2)製作動機:
因為我一直都很喜歡他們公司的歌手,但一直沒有機會能好好介紹他們,想藉由這次的作業來做自己喜歡的事物。

(3)製作內容:
A.老鷹音樂 (檔名:index)
B.認識書盡(檔名:about)
C.認識俐靜 (檔名:works)
D.認識玉璽(檔名:videoo)
E.認識彥允 (檔名:link)

(4)資料蒐集分析
資料基本上都是從維基百科取得。

(1)作業網址

http://mepopedia.com/~web105-2c/midterm/midterm-1045445081

(2)
1有無遇到的問題:
開始做得時候迷迷糊糊的,看影片才懂。

2.製作感想:
這是我最喜歡的日本搖滾樂團,所以我做得很開心。

3.製作作業的時間:
一整晚


前置作業
(1)網站主題: SPYAIR
(2)製作動機:從小就聽到他們的歌,想自己為他們打造一個網頁。

(3)製作內容:

首頁 -樂團簡介(index.html)
成員介紹(member.html)
樂團經歷(experience.html)
專輯介紹(album.html)
相關連結(link.html)

(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:

https://www.pinterest.com/
知名圖片網站,我常常瀏覽這個,對於自己的設計有很大的幫助,也喜歡它的排版。

◎相關網站列表與分析:
https://zh.wikipedia.org/zh-tw/SPYAIR
SPYAIR詳細的基本資料,簡潔有力的排版
http://www.spyair.net/
SPYAIR官方網站裡面排版井然有序

(1)作業網址 :file:///C:/Users/user/Desktop/midterm-1045445217/index.html
(2)
1有無遇到的問題 很多問題 格式都都設定不好
2.製作感想 雖然做的沒有很美觀 但是真的很認真很努力在做
3.製作作業的時間 三天三夜

(1)網站主題: 簡單
(2)製作動機: 我喜歡這個卡通
(3)製作內容: 介紹皮克斯製作的卡通
(4)資料蒐集分析
◎設計優良網站(風格)列表與分析: https://www.pinkoi.com/?gclid=CKH40bD-vdACFQsQvQodQjYEZw 一目了然
◎相關網站列表與分析: http://www.nmh.gov.tw/zh/News_7_1_1_718.htm 豐富又有內涵 讚喔

完成品(11/16前)
請將這項放置於文章最前面
(1)作業網址http://mepopedia.com/~web105-2c/midterm/midterm-1045445099
(2)
1有無遇到的問題
有,連結連不起來

2.製作感想
一開始覺得很複雜很難懂,做起來又卡卡的
雖然有很多語法不太懂,但經過慢慢摸索,有比較了解。

3.製作作業的時間
沒有在計算,但很久,因為會卡住

------------------------------------------------------------------------------------------------------------------------
前置作業(11/09)
(1)網站主題: dance flow

(2)製作動機: 喜歡在youtube聽音樂看影片,突然看到他們之前的舞蹈表演
覺得很厲害,所以就想介紹他們
(3)製作內容:首頁 (index.html)
關於(about.html)
成員介紹(member.html)
音樂作品(music.html)
比賽(race.html)
影片(movie.html)

(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:
http://www.funtape.com.tw/index.html
介紹知音文創所出版的紙膠帶與相關商品,簡約的白色風格,以繽紛多彩的紙膠帶為色彩。
http://www.masking-tape.jp/mtcasa/product.html#product_seal
簡約的風格設計,簡潔的編排,襯托可愛典雅感覺。

◎相關網站列表與分析:
https://zh.wikipedia.org/wiki/Dance_Flow
http://blog.xuite.net/b912393/blog/36368002-Dance+flow

(1)作業網址 : http://mepopedia.com/~web105-2c/midterm/midterm-1045445129
(2)
1有無遇到的問題 : 排版上稍感困難,其他部分還好。
2.製作感想 : 一開始覺得網頁很難,但是越做越好玩!
3.製作作業的時間 : 大概2個晚上


(1)網站主題:卡莉怪妞
(2)製作動機:很喜歡卡莉怪妞的風格跟穿搭。
(3)製作內容:
> 關於卡莉>index.html
>歷年專輯>album.html
>廣告代言>cf.html
>音樂影片>music.html

(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:
https://www.kkbox.com/tw/tc/artist/sRmi3qVo.WWMUsA0F0hiB08J-index-1.html

◎相關網站列表與分析:
http://www.niusnews.com/index.php/main/view/7370
裡面有很多卡莉怪妞的介紹,資料很齊全很豐富。

(1)網站主題: 玩具總動員
(2)製作動機: 熱愛玩具總動員
(3)製作內容:
第一集(Untitled-1.html)
第二集(Untitled-2.html)
第三集(Untitled-3.html)
人物介紹(Untitled-4.html)
幕後團隊(Untitled-5.html)
(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:
http://toystory.disney.com/
喜歡他的風格
◎相關網站列表與分析:
https://zh.wikipedia.org/wiki/%E7%8E%A9%E5%85%B7%E6%80%BB%E5%8A%A8%E5%91%98
https://zh.wikipedia.org/wiki/%E7%8E%A9%E5%85%B7%E7%B8%BD%E5%8B%95%E5%93%A12
https://zh.wikipedia.org/wiki/%E7%8E%A9%E5%85%B7%E7%B8%BD%E5%8B%95%E5%93%A13
資料都是這裡查的
完成品(11/16前)
請將這項放置於文章最前面
(1)作業網址 :http://mepopedia.com/~web105-2c/midterm/midterm-1045445114
(2)
1有無遇到的問題 有但解決了
2.製作感想 做完有成就感
3.製作作業的時間 5天
PS.我的帳號無法回復,我是1045445114

(1)作業網址 http://mepopedia.com/~web105-2c/midterm/midterm-1045445093
(2)
1有無遇到的問題
表格的製作,但是上網找資料解決了
2.製作感想
雖然遇到很多困難,不過都順利解決了
3.製作作業的時間
3~4天晚上

前置作業(11/09)
(1)網站主題:Pentatonix (介紹)
(2)製作動機:喜歡他們的音樂
(3)製作內容:
●關於Pentatonix(檔名:index.html)
●出道經歷(檔名:hisexperience.html)
●成員介紹(檔名:member.html)
●專輯介紹(檔名:music.html)
●得獎紀錄(檔名:awards.html)
●歌曲欣賞(檔名:titlesong.html)

(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:
◎相關網站列表與分析:


完成品(11/16前)
請將這項放置於文章最前面
(1)作業網址
(2)
1有無遇到的問題
2.製作感想
3.製作作業的時間

完成品

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

1有無遇到的問題:
沒有

2.製作感想:
有點挑戰性,有時候做到一半會很煩躁。

3.製作作業的時間:約7小時



前置作業(11/09)

(1)網站主題:星空 (幾米作品改編電影)

(2)製作動機:最近在看原著,覺得有趣。

(3)製作內容:
劇情簡介(index)
原著作品(sophia)
電影特展(anna)
周邊商品(jimmy)
精采預告(fuuu)


(4)資料蒐集分析

◎部分維基百科

◎設計優良網站(風格)列表與分析:
https://material.io/
設計的顏色偏暗、黑,版面乾淨簡潔,一眼就可以明瞭大意

◎相關網站列表與分析:
http://sidleecollective.com/
https://ddsks.dk/
視覺效果強烈,能馬上吸引使用者注意

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

(2)
有無遇到的問題:
有....放背景時,flash被排擠了

製作感想:
蠻有趣的,喜歡的作者如果可以讓別人看到就更開心了

3.製作作業的時間 :
3天




前置作業(11/09)

(1)網站主題:志水雪

(2)製作動機:
個人覺得一步神作為何總是紅不起來?
反而是看起來還好的劇情總是熱賣呢@@

(3)製作內容:
首頁/index)
A.作者/writer
B.另外收錄/anotherbooks
C.是-ze-/isze
D.花鳥風月/birdandflowers
E.聯絡方式/ask

(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:
http://matayosi.oops.jp/gallery.html
低彩度、低亮度的方式去呈現整體的網頁、以及優雅的圖片相襯,使整體更加勻配。


◎相關網站列表與分析:
http://www.shinshokan.com/dearplus/
那種簡約又不會太嚴肅、有點活潑的排版與優雅的配色,素晴らしい~

完成品(11/16前)
請將這項放置於文章最前面
(1)作業網址http://mepopedia.com/~web105-2c/midterm/midterm-1045445150
(2)
1有無遇到的問題
連結連不起來

2.製作感想
剛開始做的時候覺得挺複雜的,但後來慢慢熟悉後就比較上手

3.製作作業的時間
1-2天

------------------------------------------------------------------------------------------------------------------------
前置作業(11/09)
(1)網站主題: DJ Kygo

(2)製作動機:
因為本身喜歡EDMTropical House的曲風,而Kygo就是這曲風的代表人物,加上平時大部分都在聽他的歌。
(3)製作內容:
介紹(index.html)
經歷(experience.html)
風格(gnere.html)
音樂(music.html)
品牌(brand.html)

(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:
http://thedesigninspiration.com/
設計創作的靈感來源,畫面簡潔乾淨。
https://pick.mydesy.com/royalty-free-image
一些素材圖庫,排版簡單乾淨。

◎相關網站列表與分析:
https://aestw.wordpress.com/2016/01/16/kygo%EF%BC%8C%E4%BB%96%E6%98%AF%E8%AA%B0/
http://www.roxyrocker.com/2016/01/14/5-%E4%BB%B6%E9%97%9C%E6%96%BC-tropical-house-%E6%96%B0%E7%A7%80-kygo-%E7%9A%84%E5%B0%8F%E6%95%85%E4%BA%8B/



Edited 1 time(s). Last edit at 11/25/2016 08:59PM by 1045445150.
(編輯記錄)

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

1有無遇到的問題:
過程遇到很多問題,但是朋友們很願意教我,在製作時我也能漸漸自己找到錯誤的地方
2.製作感想 :
因為我不太喜歡用電腦做作業,除了電繪以外,而且我電腦真的不是很好,一開始只覺得做的很煩,尤其當我一直做錯的時候,還好做完大概2頁的時候覺得越來越熟悉了,做到後來反而開始覺得有趣,剛好我做的是充滿搞笑影片的渡邊直美,讓我忘記了原本痛苦的感覺,而且點開自己做的網頁的感覺,真有成就感!



●欲呈現風格:
甜美可愛、搞笑、有趣、看完心情會很好!

●網頁架構與內容主色系: 我整體用粉紅色來呈現,製造甜美可愛的風格


背景-淡粉色

標題-桃粉色

內容-明亮的感覺。



3.製作作業的時間:一到兩個禮拜分散(每次晚上時間約1~2小時)



前置作業
(1)網站主題:渡邊直美
(2)製作動機:
渡邊直美是一個讓我敬佩又喜愛的搞笑女藝人~
渡邊直美的身材雖然胖胖的,胖胖的她並沒有覺得人生就暗無天日,尤其當人們堅持認為胖子沒前途,只有瘦下來才能征服男神和世界的時候,她把你浪費在糾結減肥身問題上的時間,用來自信從容地過著自己喜歡的生活。
她對自己充滿自信而且能歌善舞又放得開、搞笑不怕扮醜,對時尚又很有自己的風格,深受大家的喜愛!擺脫大家對美的定義!想到她的第一個感覺就是粉紅色,所以我用粉紅色來營造這個網頁,整體是明亮活潑的!

(3)製作內容:


A.關於渡邊直美(About)


B.模仿影片(Imitate)


C.ピカルの定理 (Picaru的定理)


D.品牌設計(Design)


E.其他影片 (Other)



(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:

http://www.marieclaire.com.tw/fashion/news/17856

http://istyle.ltn.com.tw/article/4342

◎相關網站列表與分析:

https://zh.wikipedia.org/wiki/%E6%B8%A1%E9%82%8A%E7%9B%B4%E7%BE%8E

https://www.youtube.com/results?search_query=%E6%B8%A1%E9%82%8A%E7%9B%B4%E7%BE%8E



Edited 1 time(s). Last edit at 11/28/2016 03:15PM by 1045445144.
(編輯記錄)

1045445186 視傳2C黃森宜

Attachments:
開啟 | 下載 - index.html (3.5 KB)
開啟 | 下載 - style.css (1 KB)
1045445186黃森宜視傳2C

Attachments:
開啟 | 下載 - index.html (3.5 KB)
開啟 | 下載 - style.css (1 KB)
(1)作業網址:
http://mepopedia.com/~web105-2c/midterm/midterm-1045445108

(2)
有無遇到的問題:
當然有

製作感想:
做這個網頁好複雜,我的頭都快昏了,還好有影片教學

3.製作作業的時間 :
兩天

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

1有無遇到的問題:有一點
2.製作感想 :很有趣
3.製作作業的時間:1~2天

前置作業
(1)網站主題:流星花園
(2)製作動機:我最愛的戲劇,對我來說是經典中的經典 。

(3)製作內容:
1.介紹演員
2.劇情發展
3.劇照
4.歌曲
5.預告片

檔名:
介紹演員 . (檔名:index)
劇情發展 (檔名:about)
劇照 (檔名:picture)
歌曲(檔名:song)
預告片 (檔名tongue sticking out smileyrevue)

(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:
https://zh.wikipedia.org/wiki/%E6%B5%81%E6%98%9F%E8%8A%B1%E5%9C%92_(%E5%8F%B0%E7%81%A3%E9%9B%BB%E8%A6%96%E5%8A%87)
關於他們的詳細資料,一目瞭然。

◎相關網站列表與分析:
http://blog.xuite.net/yym216/drama/21805932-%E9%9F%93%E7%89%88%E3%80%8A%E8%8A%B1%E6%A8%A3%E7%94%B7%E5%AD%90%E6%B5%81%E6%98%9F%E8%8A%B1%E5%9C%92%E3%80%8B%E5%8A%87%E6%83%85%E7%89%B9%E8%89%B2+%E4%BA%BA%E7%89%A9%E4%BB%8B%E7%B4%B9+%E6%BC%94%E5%93%A1%E5%90%8D%E5%96%AE+
關於他們的戲劇資訊與圖片。

完成品(11/16前)
請將這項放置於文章最前面
(1)作業網址:
http://mepopedia.com/~web105-2c/midterm/midterm-1045445054

(2)
有無遇到的問題:
有 蠻多

製作感想: 網頁不簡單


3.製作作業的時間 :一個晚上




前置作業(11/09)

(1)網站主題: 超人

(2)製作動機:喜歡


(3)製作內容:超人介紹

A.首頁 (檔ˋ名:index)
B.緣起 (檔名:about)
C.能力 (檔名:ability)
D.電影 (檔名:movie)
E.音樂 (檔名:music]

(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:


◎相關網站列表與分析:

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

(2)
有無遇到的問題:
有問題,但已看講義跟GOOGLE資料查詢解決了

製作感想:




(1)網站主題: g-dragon粉絲專頁

(2)製作動機:
很喜歡這個明星 覺得做完感覺還不錯
(3)製作內容:
首頁(檔名:index)
A.藝名含意 (檔名:01)
B.音樂作品 (檔名:02)
C.介紹 (檔名:index)
D.獎項 (檔名:03)
E.周邊商品 (檔名:001)

(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:
運用無彩色加一些比較跳的顏色 展現出比較高貴的質感

(1)網站主題: star wars
(2)製作動機: 因為是我以前最喜歡的電影所以把他製作成網頁
(3)製作內容: 星際大戰相關內容
(4)資料蒐集分析
https://zh.wikipedia.org/wiki/%E6%98%9F%E9%9A%9B%E5%A4%A7%E6%88%B0