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

1. 製作步驟及製作說明

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

2.每個同學記得在[color=#990033]title的部分打上"自訂的主題"[/color]
在#footer 註明 Designed by 某某某(可自行取名)

3.題目自訂，選擇自己有興趣的主題，如個人網站或介紹自己喜愛的某個事物

4.可單純以色彩配色或自行設計圖片，製作網站內容

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

6.至少完成兩頁的內容，若內容完整，且全部頁面完成，最多加6分。

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


8.製作完成上傳至FTP

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

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

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

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

加分：
1.內容完整度，連結頁面全部做完最多加6分，最多100分。

[hr]

3. 繳交作業方式

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

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

每位同學請將自己的資料夾命名為：midterm-學號
這個作業的網址則為:http://mepopedia.com/~web101c/midterm/midterm-10154452xx

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

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

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

[hr]

4. 回覆本篇文章

[color=#0066CC]完成品[/color](11/05前)
(1)作業網址：
(2).
1.設計風格：
2.色彩計畫：
3.有無遇到的問題：
4.製作感想：
5.製作作業的時間 ：

[hr]
[color=#0066CC]前置作業[/color](10/15前回覆)
(1)網站主題：
(2)製作動機：
(3)製作內容(分頁項目)：
(4)資料蒐集分析
◎設計優良網站(風格)：
◎相關網站列表與分析：
[hr]

5. 期中作業進度參考

第六週　10/15　前置作業，題目確定，資料蒐集與分析等
第七週　10/22　決定排版形式、尺寸、圖片製作
第八週　10/29　HTML DIV與CSS設定
11/02 問題討論
第九週　11/05　11/05之前將期中作業上傳繳交，評分


[hr]

6. 參考範例

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

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



(編輯記錄)

(1)網站主題： SS501 朴政珉 박정민
(2)製作動機： 支持他已經四年了,所以想做關於他的網頁
(3)製作內容(分頁項目)： 關於朴政珉、經歷、音樂、戲劇
(4)資料蒐集分析：
◎設計優良網站(風格)： http://www.p-jungmin.com/　整體看起來簡單清新，很符合朴政珉的個性
◎相關網站列表與分析： http://www.parkjungmin.com.cn/bbs/forum.php　大多資料來源出自在這裡面，內容確實且豐富

－－－－－－－－－－－－－－－－－－－－

(1)作業網址： http://mepopedia.com/~web101c/midterm/midterm-1015445203
(2)
1.設計風格： 簡單風格
2.色彩計畫： 利用白、灰色來設計整個版面的顏色
3.有無遇到的問題：無
4.製作感想： 在製作網頁的時候要花時間去想該怎麼製作滿有趣的，而且又是做自己喜歡滿久的歌手～
5.製作作業的時間 ： 兩天



(編輯記錄)

(1)作業網址：http://mepopedia.com/~web101c/midterm/midterm-1015445206
(2).
1.設計風格：簡約風
2.色彩計畫：咖啡色
3.有無遇到的問題：一樣很多 但都解決嘞~
4.製作感想： 很累阿~~~還好有達令
5.製作作業的時間 ： 一個禮拜八...

(1)網站主題：風靡全球 蔡依林 Jolin
(2)製作動機：因為蔡依林是我的偶像~~ 剛好他最近又出了新專輯
(3)製作內容(分頁項目)：專輯簡介 第一波主打 第二波主打
(4)資料蒐集分析
◎設計優良網站(風格)：http://channel.pixnet.net/ewon/music/album/hF3qmFaUitxhMo0F1Xpz0091
◎相關網站列表與分析：



(編輯記錄)

(1)作業網址： http://mepopedia.com/~web101c/midterm/midterm-1015445238
(2)
1.設計風格： 簡約
2.色彩計畫： 使用墨綠.橘色.藍色穿插營造出穩重的感覺
3.有無遇到的問題：無
4.製作感想： 製造時能了解DW功能的應用,以及語法的使用
5.製作作業的時間 ：1天

(1)網站主題： 達文西
(2)製作動機： 設計得先父
(3)製作內容(分頁項目)： 關於生平.貢獻.影片.作品
(4)資料蒐集分析：
◎設計優良網站(風格)：http://www.books.com.tw/activity/DAVINCI2/art11.htm內容豐富
◎相關網站列表與分析： http://www.books.com.tw/activity/DAVINCI2/art11.htm 內容大約出自這裡

(1)作業網址： http://mepopedia.com/~web101c/midterm/midterm-1015445216/index.html
(2).
1.設計風格： 清新
2.色彩計畫： 以藍色為主
3.有無遇到的問題： 剛開始用dw弄出來來文字都是亂碼... 卡了很久
4.製作感想： 問題處理完的瞬間很爽快(?)
5.製作作業的時間 ： ２天左右，一直在尋找亂碼的解決辦法與找圖

[hr]

(1)網站主題： うたの☆プリンスさまっ♪ マジLOVE1000%
(2)製作動機： 歌王子是我很喜歡的動畫、發現除了官方的網站後就找不到其他相關網站，所以想自己弄一個
(3)製作內容(分頁項目)： 內容介紹、角色介紹、系列概要、相關歌曲、動畫工作人員
(4)資料蒐集分析
◎設計優良網站(風格)： [url=http://utapri.tv/]歌王子日文官方網站[/url] 製作風格與色系會從官方這裡參考、或是參考其他動畫的官網
◎相關網站列表與分析： [url=http://zh.wikipedia.org/wiki/%E6%AD%8C%E4%B9%8B%E7%8E%8B%E5%AD%90%E6%AE%BF%E4%B8%8B]歌王子維基[/url]、[url=http://acg.gamer.com.tw/acgDetail.php?s=43733]巴哈[/url] 資料大多都從這裡蒐集，除了音樂檔要另外找之外還算是齊全的



(編輯記錄)