[color=#990000][期中作業] 以單欄為主的網站設計[/color] 一、製作說明： 1.請參考期中之前教過的做法及講義，製作以單欄為主的網站 2.每個同學記得在[color=#990033]title的部分打上"自訂的主題"[/color] 在#footer 註明 Designed by 某某某(可自行取名) 1055445ooo 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] 二、評分標準與製作檢核 1.HTML的正確架構(DIV的使用) 2.整體設計美感(CSS運用，風格及配色，字體設定、圖片製作) 3.導覽列的正確性(含導覽超連結) 4.h1或h2的使用 5.class(類別)的運用 6.HTML Title的設定 7.Footer的版權宣告 8.內容完整的兩頁(至少)的連結 9.製作說明 三、繳交作業方式 [color=#CC0066]1.製作完成後，檔案命名方式：[/color] [color=#669900]期中作業FTP上的資料夾為：midterm 每位同學請將自己的資料夾命名為：midterm-學號 這個作業的網址則為:http://mepopedia.com/~css106-2b/midterm/midterm-105xxxxxxx 資料夾內含： (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/16) (1)網站主題： (2)製作動機： (3)製作內容： （每個導覽列的中文及（英文檔名）） (4)風格設定: (5)資料蒐集分析 ◎設計優良網站(風格)列表與分析： [color=#0066CC]完成品[/color](11/23/30前) [color=#FF0066]請將這項放置於文章最前面[/color] (1)作業網址 (2) 1有無遇到的問題 2.製作感想 3.製作作業的時間 [color=#CC0066]4.請務必在11/23前回覆，否則為遲交[/color] 寫法參考：http://mepopedia.com/forum/read.php?2603,82673 五、同學常見問題之注意事項 隨時補充： 1.網頁圖檔不宜太大，否則網頁開啟速度會變慢，請盡量在Photoshop或Illustrator的『儲存為網頁與裝置用』的功能裡，修改圖檔的大小至100KB以下，100KB會佔1Mb頻寬(每秒鐘)，以此類推。 2.有文字出現的區塊，要記得設定padding，文字才不會跟邊框黏在一起。 3.亂碼問題，放在　＜head＞ ＜/head＞ 之間 編碼方式記得存utf-8 5.CSS檔案的路徑，放在　＜head＞ ＜/head＞　之間 6.檔案宣告，在HTML檔最前面放 7.任何出現在網頁裡的命名不能出現中文及全形字。 8.圖片必須放在images圖片資料夾裡 [hr] 參考範例 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] ================================================= http://mepopedia.com/forum/read.php?2690,86200,86200#msg-86200 Wed, 29 Jul 2026 05:02:04 +0800 Phorum 5.2.7 http://mepopedia.com/forum/read.php?2690,86200,87588#msg-87588 http://mepopedia.com/forum/read.php?2690,86200,87588#msg-87588 1055445113 106-1《中國》竹視傳二B-網頁設計 Fri, 19 Jan 2018 04:03:03 +0800 http://mepopedia.com/forum/read.php?2690,86200,86717#msg-86717 http://mepopedia.com/forum/read.php?2690,86200,86717#msg-86717 (2)
1有無遇到的問題:有 解決了
2.製作感想:桌機做起來比較方便
3.製作作業的時間:沒有計算]]> 1055445143 106-1《中國》竹視傳二B-網頁設計 Fri, 08 Dec 2017 15:51:28 +0800 http://mepopedia.com/forum/read.php?2690,86200,86715#msg-86715 http://mepopedia.com/forum/read.php?2690,86200,86715#msg-86715 litttle dot 106-1《中國》竹視傳二B-網頁設計 Fri, 08 Dec 2017 02:43:40 +0800 http://mepopedia.com/forum/read.php?2690,86200,86714#msg-86714 http://mepopedia.com/forum/read.php?2690,86200,86714#msg-86714 重新修改過的]]> litttle dot 106-1《中國》竹視傳二B-網頁設計 Fri, 08 Dec 2017 02:42:14 +0800 http://mepopedia.com/forum/read.php?2690,86200,86713#msg-86713 http://mepopedia.com/forum/read.php?2690,86200,86713#msg-86713 (2)
1.有無遇到的問題:有
2.製作感想:好像感覺到他的規則
3.製作作業的時間:好久

(1)網站主題： 北京故宮
(2)製作動機： 很喜歡中國風、歷史文物
(3)製作內容： 簡單的故宮介紹
(4)風格設定: 極簡]]> 1055445083 106-1《中國》竹視傳二B-網頁設計 Fri, 08 Dec 2017 01:42:20 +0800 http://mepopedia.com/forum/read.php?2690,86200,86708#msg-86708 http://mepopedia.com/forum/read.php?2690,86200,86708#msg-86708 (2)
1.有無遇到的問題:無。
2.製作感想:完成了
3.製作作業的時間:忘了

(1)網站主題： 我的旅遊館
(2)製作動機： 單純分享生活經驗與旅遊照片
(3)製作內容： 個人資料、攝影作品、比賽資訊、旅遊景點
(4)風格設定: 另類、自我]]> 1055445176 106-1《中國》竹視傳二B-網頁設計 Thu, 07 Dec 2017 11:51:17 +0800 http://mepopedia.com/forum/read.php?2690,86200,86706#msg-86706 http://mepopedia.com/forum/read.php?2690,86200,86706#msg-86706 (2)
1.有無遇到的問題:有~~連結我有做錯可是我找不到為啥麼QQ我還是先上傳了
2.製作感想:有點搞混
3.製作作業的時間:約兩天。

(1)網站主題： 飛天小女警
(2)製作動機：很喜歡這個卡通]]> hihi 106-1《中國》竹視傳二B-網頁設計 Thu, 07 Dec 2017 11:43:16 +0800 http://mepopedia.com/forum/read.php?2690,86200,86705#msg-86705 http://mepopedia.com/forum/read.php?2690,86200,86705#msg-86705 (2)
(1)網頁主題:偉士牌介紹
(2)製作動機:喜歡復古檔車
(3)製作內容:
<品牌故事>
<車系介紹>
<我愛VESPA>
專屬零配件>

(4)風格設定:簡約沉穩感
(5)作業網址:
(6)有無遇到甚麼問題:一大堆 只是解決了
製作感想:剛開始真的完全看不懂 好險有好同學互助 做完了真的想哭]]> 1055445023 106-1《中國》竹視傳二B-網頁設計 Thu, 07 Dec 2017 11:42:08 +0800 http://mepopedia.com/forum/read.php?2690,86200,86701#msg-86701 http://mepopedia.com/forum/read.php?2690,86200,86701#msg-86701 有無遇到的問題:除了忘記存檔重作之外其他都沒問題
製作感想:還是蠻有趣的拉
製作時間:漫長的歲月]]> litttle dot 106-1《中國》竹視傳二B-網頁設計 Thu, 07 Dec 2017 03:59:19 +0800 http://mepopedia.com/forum/read.php?2690,86200,86700#msg-86700 http://mepopedia.com/forum/read.php?2690,86200,86700#msg-86700 litttle dot 106-1《中國》竹視傳二B-網頁設計 Thu, 07 Dec 2017 03:54:49 +0800 http://mepopedia.com/forum/read.php?2690,86200,86699#msg-86699 http://mepopedia.com/forum/read.php?2690,86200,86699#msg-86699 litttle dot 106-1《中國》竹視傳二B-網頁設計 Thu, 07 Dec 2017 03:54:28 +0800 http://mepopedia.com/forum/read.php?2690,86200,86691#msg-86691 http://mepopedia.com/forum/read.php?2690,86200,86691#msg-86691 (2)
1.有無遇到的問題:無。
2.製作感想:終於完成了
3.製作作業的時間:4小時。

(1)網站主題： 怪物插畫
(2)製作動機：喜歡怪物
(3)製作內容： 怪物插畫]]> 蘇雁祺 106-1《中國》竹視傳二B-網頁設計 Wed, 06 Dec 2017 22:33:46 +0800 http://mepopedia.com/forum/read.php?2690,86200,86690#msg-86690 http://mepopedia.com/forum/read.php?2690,86200,86690#msg-86690
(1)網站主題:醜比頭
(2)製作動機:喜歡醜比頭
(3)製作內容：
NEWS>NEWS
KOBITOS>KOBITOS
BOOKS>BOOKS
MOVIES>MOVIES
RESTAURANT>RESTAURANT
(4)風格設定: 整個版面顏色是粉屁桃配色，咖啡色是樹木的顏色


1遇到的問題:剛開始滿多問題的，但影片幫助很多
2.製作感想：雖然有些地方會卡到，但看完影片，問了老師同學後理解很多，完成了就很有成就感
3.製作時間：3天]]> 1055445201 106-1《中國》竹視傳二B-網頁設計 Wed, 06 Dec 2017 22:32:22 +0800 http://mepopedia.com/forum/read.php?2690,86200,86686#msg-86686 http://mepopedia.com/forum/read.php?2690,86200,86686#msg-86686 (2)
1.有無遇到的問題:無。
2.製作感想:終於完成了
3.製作作業的時間:4小時。

(1)網站主題： 怪物插畫
(2)製作動機：喜歡怪物
(3)製作內容： 怪物插畫]]> 蘇雁祺 106-1《中國》竹視傳二B-網頁設計 Wed, 06 Dec 2017 18:00:33 +0800 http://mepopedia.com/forum/read.php?2690,86200,86680#msg-86680 http://mepopedia.com/forum/read.php?2690,86200,86680#msg-86680 1)網站主題：INFINITE
(2)製作動機： 介紹INIFINTE
(3)製作內容：INFINITE簡單介紹
（每個導覽列的中文及（英文檔名））
(4)風格設定: 簡約]]> 1055445188 106-1《中國》竹視傳二B-網頁設計 Wed, 06 Dec 2017 13:09:47 +0800 http://mepopedia.com/forum/read.php?2690,86200,86669#msg-86669 http://mepopedia.com/forum/read.php?2690,86200,86669#msg-86669 (2)
1.有無遇到的問題:好累
2.製作感想:超累
3.製作作業的時間:5小時up]]> 1055445143 106-1《中國》竹視傳二B-網頁設計 Tue, 05 Dec 2017 23:56:05 +0800 http://mepopedia.com/forum/read.php?2690,86200,86664#msg-86664 http://mepopedia.com/forum/read.php?2690,86200,86664#msg-86664 (2) 1.有無遇到的問題:有最後問題都解決了。
2.製作感想:還不錯。
3.製作作業的時間:忘記了。]]> 1055445185 106-1《中國》竹視傳二B-網頁設計 Tue, 05 Dec 2017 17:57:30 +0800 http://mepopedia.com/forum/read.php?2690,86200,86642#msg-86642 http://mepopedia.com/forum/read.php?2690,86200,86642#msg-86642
(1)網站主題：自強號40周年
(2)製作動機： 製作介紹台灣火車的網站
(3)製作內容：
電氣化與自強號 1970 (index)
電氣化的通車 1980 (002)
與公路的競爭 1990 (003)
PP新世代 2000 (004)
東部傾斜的新市場 2006 (005)]]> 1055445002 106-1《中國》竹視傳二B-網頁設計 Thu, 30 Nov 2017 11:17:27 +0800 http://mepopedia.com/forum/read.php?2690,86200,86641#msg-86641 http://mepopedia.com/forum/read.php?2690,86200,86641#msg-86641 (2)製作動機：因為本身就很愛聽歌まふまふ的聲音又非常的特別
(3)製作內容：
關於まふまふ(index)
合作對象(partner)
歌曲影片(movie)
專輯(discography)
相關網站(websites)
(4)風格設定: 以灰白為主又不失可愛
(5)資料蒐集分析

https://www.bonnyread.com.tw/

(1)作業網址 : http://mepopedia.com/~css106-2b/midterm/midterm-1055445119
(2)
1有無遇到的問題? 有，但是後來花了些時間解決了
2.製作感想 比起以前做的更有成就感
3.製作作業的時間 3天以上]]> lovecatandyou 106-1《中國》竹視傳二B-網頁設計 Thu, 30 Nov 2017 11:16:24 +0800 http://mepopedia.com/forum/read.php?2690,86200,86638#msg-86638 http://mepopedia.com/forum/read.php?2690,86200,86638#msg-86638 (2)
1.有無遇到的問題:無。
2.製作感想:終於完成了功能更多的網站了!
3.製作作業的時間:約兩天。]]> surgyebs 106-1《中國》竹視傳二B-網頁設計 Thu, 30 Nov 2017 10:35:39 +0800 http://mepopedia.com/forum/read.php?2690,86200,86637#msg-86637 http://mepopedia.com/forum/read.php?2690,86200,86637#msg-86637 (2)
1.有無遇到的問題:無。
2.製作感想:終於完成了功能更多的網站了!
3.製作作業的時間:約兩天。]]> surgyebs 106-1《中國》竹視傳二B-網頁設計 Thu, 30 Nov 2017 10:33:30 +0800 http://mepopedia.com/forum/read.php?2690,86200,86636#msg-86636 http://mepopedia.com/forum/read.php?2690,86200,86636#msg-86636 (2)
1.有無遇到的問題:無。
2.製作感想:終於完成了功能更多的網站了!
3.製作作業的時間:約兩天。]]> surgyebs 106-1《中國》竹視傳二B-網頁設計 Thu, 30 Nov 2017 10:33:07 +0800 http://mepopedia.com/forum/read.php?2690,86200,86632#msg-86632 http://mepopedia.com/forum/read.php?2690,86200,86632#msg-86632 (1)http://mepopedia.com/~css106-2b/midterm/midterm-1055445014
(2)
1.我部會繞圖排文
2.部會還是很好玩
3.3小時吧


前置作業(11/16)
(1)網站主題：山畝的網頁
(2)製作動機： 介紹YOUTUBER
(3)製作內容：YOUTUBER的影片內容
（每個導覽列的中文及（英文檔名））
(4)風格設定: YOUTUBE的配色 設計
(5)資料蒐集分析 YOUTUBE]]> a0936280046 106-1《中國》竹視傳二B-網頁設計 Thu, 30 Nov 2017 10:23:03 +0800 http://mepopedia.com/forum/read.php?2690,86200,86618#msg-86618 http://mepopedia.com/forum/read.php?2690,86200,86618#msg-86618 終於做完一個屬於自己的網頁了，其實做完挺帥的，之後要做一個更完整的籃球網頁，繼續努力]]> litttle dot 106-1《中國》竹視傳二B-網頁設計 Thu, 30 Nov 2017 05:58:25 +0800 http://mepopedia.com/forum/read.php?2690,86200,86617#msg-86617 http://mepopedia.com/forum/read.php?2690,86200,86617#msg-86617
1遇到的問題：原始碼太長，有些不小心沒分到行就找不到了...
2.製作感想：過程一點也不暢快，但完成後真的很感動
3.製作時間：上下課＋一個熬夜到晚點去上早八的時間...
（ 因為筆電沒有DW所以耗很多時間搞破解版，下載很久所以就先去上班，回來看電腦還安裝失敗好崩潰...）


(1)網站主題：CHOCHOCO
(2)製作動機：是一家很有質感的巧克力專賣店 所以推薦
(3)製作內容：
品牌概念（About Us）
經典商品（Chocolate）
主打商品（Special）
購物問題（Others）
門市查詢（Contact）
(4)風格設定: 以黑色及金色襯托質感
(5)資料蒐集分析
http://www.chochoco.com/
雖然很有質感，但畫面東西有點太多顯得有些雜亂，整體來說簡潔明瞭就是很棒的網站]]> 1055445110 106-1《中國》竹視傳二B-網頁設計 Thu, 30 Nov 2017 05:54:41 +0800 http://mepopedia.com/forum/read.php?2690,86200,86616#msg-86616 http://mepopedia.com/forum/read.php?2690,86200,86616#msg-86616 litttle dot 106-1《中國》竹視傳二B-網頁設計 Thu, 30 Nov 2017 05:50:46 +0800 http://mepopedia.com/forum/read.php?2690,86200,86613#msg-86613 http://mepopedia.com/forum/read.php?2690,86200,86613#msg-86613 (2)
1.有無遇到的問題:無。
2.製作感想:終於完成了功能更多的網站了!
3.製作作業的時間:約4天。

(1)網站主題： 陳奕迅
(2)製作動機： 很喜歡陳奕迅 覺得他的歌都是經典
(3)製作內容：
簡介(introduction)>> 介紹 陳奕迅
音樂獎項紀錄(awards)>>陳奕迅得獎紀錄
音樂作品(musical)>>陳奕迅音樂作品
演出作品(movie)>>陳奕迅演出作品
影片(film)>>影片連結
(4)風格設定: 簡約的黑灰白三色。]]> 11 106-1《中國》竹視傳二B-網頁設計 Thu, 30 Nov 2017 02:24:29 +0800 http://mepopedia.com/forum/read.php?2690,86200,86612#msg-86612 http://mepopedia.com/forum/read.php?2690,86200,86612#msg-86612 1有無遇到的問題 :沒有
2.製作感想 :有待加強
3.製作作業的時間 :2017/11/30

網站主題:HONDA本田重機
製作動機:喜歡本田的各式重機
網站內容:首頁:本田歷史
CBR1000RR
CB1000R
X-ADV
VFR800
GoldWing
風格設定:唯美 簡潔俐落
參考資料:https://motocity.tw/menu/]]> kevin613 106-1《中國》竹視傳二B-網頁設計 Thu, 30 Nov 2017 01:57:09 +0800 http://mepopedia.com/forum/read.php?2690,86200,86610#msg-86610 http://mepopedia.com/forum/read.php?2690,86200,86610#msg-86610 (1)網站主題：認識貓咪
(2)製作動機： 想讓更多人了解貓咪
(3)製作內容： 貓咪飲食及習慣禁忌cat's diet/
貓奴注意!人類對貓咪的10大誤解Misunderstanding of cats/
貓咪的尾巴Cat's tail/
貓咪的叫聲Cat's call
(4)風格設定: 穩重色調
(5)資料蒐集分析
◎設計優良網站(風格)列表與分析： https://pet.talk.tw/Article.aspx?ClassID=2&Article_ID=165
清楚明瞭


完成品
(1)作業網址 http://mepopedia.com/~css106-2b/midterm/midterm-1055445137
(2)
1有無遇到的問題 有，檔案位置亂掉
2.製作感想 有點難，但做完有成就感
3.製作作業的時間 四天]]> 1055445137 106-1《中國》竹視傳二B-網頁設計 Wed, 29 Nov 2017 22:43:54 +0800 http://mepopedia.com/forum/read.php?2690,86200,86609#msg-86609 http://mepopedia.com/forum/read.php?2690,86200,86609#msg-86609 (2)
1.有無遇到的問題:果然改成黑色一切就會有質感
2.製作感想:終於做完了 (開心
3.製作作業的時間:第一頁做滿久的，底色白色很不好看，後來改成白色就做比較快了
(1)網站主題：帥氣炫砲的LOL角色厚重毛毛毯網站
(2)製作動機：新竹這裡很冷 需要毛毛毯 我想要件帥氣的毛毛毯
(3)製作內容：
第一頁 毛毛毯介紹 /璃璃寶寶超柔柔軟毛毛毯/仿真毛皮的運用 優缺介紹
第二頁 雷葛爾超帥氣大毛毯
第三頁 BAGOBAGO吶兒毛毯/在冰域需要的酷炫毛毛毯
第四頁 金毛毯/探險家的毛毛毯
第五頁 Ｆizz精細時尚毛毛毯
(4)風格設定:成熟 穩重 帥氣
(5)資料蒐集分析： https://lol.garena.tw/preindex 維基百科 LOL
讚讚 帥氣 他的音樂有點太吵]]> 1055445026 106-1《中國》竹視傳二B-網頁設計 Wed, 29 Nov 2017 22:22:58 +0800