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

Advanced

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

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

[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



Edited 3 time(s). Last edit at 10/21/2012 11:05AM by JinJin.
(編輯記錄)

Attachments:
開啟 | 下載 - midterm-sample.rar (3.1 MB)
(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.製作作業的時間 : 兩天



Edited 3 time(s). Last edit at 11/03/2012 04:07PM by 1015445203.
(編輯記錄)

(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
◎相關網站列表與分析:



Edited 1 time(s). Last edit at 11/04/2012 11:39PM by 1015445206.
(編輯記錄)

(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.製作作業的時間 : 2天左右,一直在尋找亂碼的解決辦法與找圖

[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] 資料大多都從這裡蒐集,除了音樂檔要另外找之外還算是齊全的



Edited 1 time(s). Last edit at 11/04/2012 11:36PM by sp39678910.
(編輯記錄)