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

Advanced

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

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



1. 一、製作說明:


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

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

3.題目自訂

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

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

6.至少完成三頁的內容(60分),若內容完整,沒有錯誤與法,且全部頁面完成(最少80分)。

[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.製作說明

加分:
1.完整內容,至少三頁連結頁面,60分。
2.內容完整,至少五頁連結頁面,全部做完最少八十分,設計感佳,無語法錯誤最多100分。


3. 三、繳交作業方式


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

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

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

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

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


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

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

[hr]

(1)作業網址 : http://mepopedia.com/~cg104-1a/midterm/midterm-104xxxxxxx

(1)網站主題:
(2)製作動機,對象:
(3)導覽列項目:
(3)風格設定:

(4)有無遇到的問題
(5)製作感想
(6)製作作業的時間


[hr]

4. 四、期中作業進度參考


第八週 04/07 頂圖、按鈕製作
第九週 04/14 超連結及多頁面編輯 前置作業,題目確定,資料蒐集與分析等
第十週 04/21 HTML DIV與CSS設定
第十一週04/28 期中作業繳交與討論


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



隨時補充:

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圖片資料夾裡

9.使用進階語法,需注意若直接以Dreamweaver製作,彈性較小,會比較難修改。

[hr]

6. 參考範例



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

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

[hr]
http://mepopedia.com/~web103-a/midterm/midterm-1025445001/
http://mepopedia.com/~web103-a/midterm/midterm-1025445070/
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/

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



Edited 3 time(s). Last edit at 04/21/2016 08:38AM by JinJin.
(編輯記錄)

(1)作業網址 http://mepopedia.com/~cg104-1a/midterm/midterm-1045440006
(2).
1有無遇到的問題 其實還好,看著影片就差不多了 哈哈
2.製作感想 第一次交作業,覺得抱歉。
3.製作作業的時間 大概一個禮拜,斷斷續續做

http://mepopedia.com/~cg104-1a/midterm/midterm-1045440019/

(1)網站主題:
G.E.M.

(2)製作動機,對象:
看了喜歡看了開心看了喜孜孜,鄧紫棋

(3)導覽列項目:
簡介/相片/專輯/影音/網站

(3)風格設定:
簡潔

(4)有無遇到的問題
有喔很多很多,可是我有神奇室友,加上神奇影片,就do re mi so了
然後奇怪的問題東湊西湊就偷吃步解決了
省了老師的時間與少了自己的麻煩

(5)製作感想
摁還蠻麻煩的,心血來潮一直做可是遇到問題無法解決就會整個煩躁,做完很有成就感

(6)製作作業的時間
兩個禮拜左右

絕對不要拿作業給理工科的看,好不容易用水泥建起的圍牆就這樣被一根手指頭給推垮了
切身經驗,提供給各位



Edited 2 time(s). Last edit at 04/27/2016 02:10PM by 1045440019.
(編輯記錄)

(1)作業網址 http://mepopedia.com/~cg104-1a/midterm/midterm-1045440028
(2).
1有無遇到的問題 看著影片做
2.製作感想 很有成就感
3.製作作業的時間 大概一個禮拜

(1)作業網址

http://mepopedia.com/~cg104-1a/midterm/midterm-1045440030

(2).

1有無遇到的問題

 有,但多看幾次影片就能找到答案。

2.製作感想

 第一次完整地做完一個網頁,感覺很特別,而且心情很好!

3.製作作業的時間

 將近一個多禮拜。

下面有重新發表



Edited 1 time(s). Last edit at 04/28/2016 08:33AM by 1045440002.
(編輯記錄)

(1)網站主題:尋人啟事
(2)製作動機:對象: 佳瑩唱歌豪好聽~
(3)導覽列項目:首頁 個人簡介 專輯 作品 翻唱
(3)風格設定:白白的
(4)資料蒐集分析:wiki百科


完成品
(1)
http://mepopedia.com/~cg104-1a/midterm/midterm-1045440044
1.有無遇到的問題 專輯那個我用了三個div 用了三個小時才成功
2.製作感想 累死我了我脖子好痛我要哭了我終於做完了感謝天感謝地感謝陽光照射著大地
3.製作作業的時間 2個禮拜



Edited 1 time(s). Last edit at 04/20/2016 09:53PM by 1045440044.
(編輯記錄)

http://mepopedia.com/~cg104-1a/midterm/midterm-1045440010

(1)網站主題:

夏天(清爽)風格截和喜愛的偶像。

(2)製作動機,對象:

因為天氣漸漸轉熱了,所以想製作清爽一點的風格;對象是喜愛的偶像,希望在瀏覽網頁時心情也能非常愉快。

(3)導覽列項目:

出道介紹/個人簡介/影視作品/作品/音樂作品。

(4)風格設定:

以藍色和白色為主要風格,以夏天的海邊下去做顏色設定。

(5)有無遇到的問題:

圖片在文繞圖時有出一些小狀況,但是後來有發現問題所以有解決;基本上都還可以。

(6)製作感想:

做成完整的網頁後,有種成就感;雖然花很多製作時間,但是有學習到很多事。

(7)製作作業的時間:

放學回家後就開始做,大概花了4~6小時。



Edited 1 time(s). Last edit at 04/22/2016 09:25PM by 1045440010.
(編輯記錄)

http://mepopedia.com/~cg104-1a/midterm/midterm-1045440013

(1)網站主題:

薯泥清爽懶洋洋。

(2)製作動機,對象:

因為很喜歡馬鈴薯,連綽號和行為都越來越像,而且又喜歡可愛的東西,所以便製作薯泥(馬鈴薯)的世界,而洋洋真智子有種慵懶感,也符合我想要的感覺。

(3)導覽列項目:

Home/About/Pic’s/Cartoon video/Contact。

(4)風格設定:

清爽、慵懶。

(5)有無遇到的問題:

還OK,沒有特別大的問題,基本上可以看老師的網路教學去處理。

(6)製作感想:

覺得有趣,雖然感覺有變得愈來愈難,製作時間也越拉越長,但做完作業總有種心情舒暢的感覺。

(7)製作作業的時間:

整體花了約三天的時間,因為我是斷斷續續一點一點做的。

(1)作業網址 : http://mepopedia.com/~cg104-1a/midterm/midterm-1045440051

(1)網站主題:The Script / 手創樂團
(2)製作動機,對象:因為本身很喜歡聽國外樂團的音樂,很久之前就很喜歡手創樂團了,就打算來做他們的網站!
(3)導覽列項目: 首頁、團員介紹、歷年專輯、錄音室、其他連結
(3)風格設定: 黑白風格

(4)有無遇到的問題:CC超難用,放影片進去的時候都沒辦法置中,可能老師有說可是我真的忘記了!
(5)製作感想:想把電腦丟到一樓
(6)製作作業的時間:除了首頁的話大概為1小時內

作業網址 : http://mepopedia.com/~cg104-1a/midterm/midterm-1045440046

網站主題:愛麗絲夢遊仙境
製作動機、對象:因為喜歡愛麗絲所以以這為主題。想更了解愛麗絲的人,裡面有一些我們不知道的祕密。
導覽列項目: 故事大綱、私人典故、變變變、關於作者、關於愛麗絲
風格設定:清爽、乾淨

有無遇到問題 :遇到問題都請同學幫忙,所以還能應付沒什麼大問題。
製作感想 :完成一項原本不會的東西後會很驚訝,覺得神奇。
製作作業的時間 :課堂上完成或在個人安排的時間完成

http://mepopedia.com/~cg104-1a/midterm/midterm-1045440011/index%20%E6%8B%B7%E8%B2%9D
網站主題:蘇打綠
製作動機、對象:最愛打綠!!!!!為打綠死!為打綠活!!!一輩子都愛
導覽列項目: 首頁 團員介紹 專輯 得獎 其他
風格設定:清爽、乾淨

有無遇到問題 :遇到問題都請同學幫忙,所以還能應付沒什麼大問題。

製作感想 :完成一項原本不會的東西後會很驚訝,覺得神奇。

製作作業的時間 :個人安排的時間完成



Edited 1 time(s). Last edit at 04/27/2016 12:18AM by GEE.
(編輯記錄)

(1)網站主題: http://mepopedia.com/~cg104-1a/midterm/midterm-1045440008
(2)製作動機,對象: 草東沒有派對
(3)導覽列項目: 簡介,影像,演出日期
(3)風格設定: 後代搖滾

(4)有無遇到的問題 :無
(5)製作感想 :為了喜歡的樂團製作網頁。
(6)製作作業的時間 :5小時

(1)作業網址 : http://mepopedia.com/~cg104-1a/midterm/midterm-1045440009

(1)網站主題: 韓國明星
(2)製作動機,對象: 朴有天
(3)導覽列項目: 簡介、東方神起、JYJ、音樂作品、演員身涯、獲獎紀錄
(3)風格設定: 紫色調

(4)有無遇到的問題 電腦BUG
(5)製作感想 雖累但有成就感
(6)製作作業的時間 5小時

 (1)作業網址 : http://mepopedia.com/~cg104-1a/midterm/midterm-1045440014

(1)網站主題: 少女時代

(2)製作動機,對象:喜歡少女時代,給一樣喜歡的人看

(3)導覽列項目:團體介紹、成員介紹、音樂作品、戲劇作品、專屬節目

(3)風格設定:以粉紅色為主色調,因為少女時代的代表色是玫瑰粉

(4)有無遇到的問題:沒有太大的問題

(5)製作感想:感覺越來越複雜了

(6)製作作業的時間:2個禮拜

(1)作業網址 : http://mepopedia.com/~cg104-1a/midterm/midterm-1045440032

(1)網站主題: 電影<自殺突擊隊>

(2)製作動機,對象: 最近喜歡的電影

(3)導覽列項目: 主要演員/電影預告/劇情內容/劇照/發行

(3)風格設定: 黑黑的有點恐怖

(4)有無遇到的問題 :問題多到不知從何說起.....
其中一個問題是不知道為什麼最後呈現的網頁會點不進去 一定要先點回主要演員才能點其他的導覽項目 不然他就出現無法
顯示我也不知道怎麼辦 還有嵌入youtube影片那個預覽居然是如此的龐大 嚇的我不知道如何改設定

(5)製作感想 :好難喔 哭 我以後絕對不要碰了 害我腦細胞死一堆 ㄌㄩㄝ

(6)製作作業的時間 :4個小時



Edited 1 time(s). Last edit at 04/27/2016 10:15PM by littlechih0828.
(編輯記錄)

(1)作業網址 : http://mepopedia.com/~cg104-1a/midterm/midterm-1025435233

(1)網站主題: 凱斯哈林
(2)製作動機,對象: 對凱斯哈林有興趣的人
(3)導覽列項目: 生平介紹.重點展品介紹.展覽資訊.熱門商品.交通資訊
(3)風格設定:以亮粉色為主

(4)有無遇到的問題 :沒有喔!!!!
(5)製作感想 :很上手了,不會卡關哈哈哈
(6)製作作業的時間 :2小時

(1)作業網址 : http://mepopedia.com/~cg104-1a/midterm/midterm-1045440002

(1)網站主題: THE 1975
(2)製作動機,對象: 讓大家認識the 1975
(3)導覽列項目: 個人資料/專輯/音樂/關於the 1975
(3)風格設定: 黑白簡約風

(4)有無遇到的問題 :有 太困難啦~一開始明明有設padding可是一直貼左邊
(5)製作感想 :做完真的很開心捏~
(6)製作作業的時間 :大概3天



Edited 1 time(s). Last edit at 04/27/2016 11:48PM by 1045440002.
(編輯記錄)

(1)作業網址 : http://mepopedia.com/~cg104-1a/midterm/midterm-1045440021

(1)網站主題:台灣明星
(2)製作動機,對象: 羅志祥
(3)導覽列項目: 簡介,相片,專輯,影片,個人網站
(3)風格設定: 黑白極簡

(4)有無遇到的問題: 超多問題,沒有軟體都要跟別人借電腦,還有有時小失誤就要重來很多步。
(5)製作感想 :看著做出來的東西越來越漂亮,就覺得很有成就感,雖然過程很麻煩又很累,因為太多英文無法理解。
(6)製作作業的時間 兩天,因為同學要使用電腦時就要歸還。

(1)作業網址 : http://mepopedia.com/~cg104-1a/midterm/midterm-1045440029/indx.html

(1)網站主題:小粉絲&蜷川実花
(2)製作動機,對象:蜷川実花
(3)導覽列項目:簡介、攝影作品、M/蜷川実花、導演作品、特別介紹
(3)風格設定: 米色白底 襯托出蜷川実花每張照片的艷麗,不搶眼但看了會覺得舒服和讚嘆她的每張照片

(4)有無遇到的問題 導覽列一直會閃爍、不好點又很醜、極度破壞整體呈現,卻找不出辦法
(5)製作感想 很開心自己能夠做出專屬於自己的作品,老師的講義也很好懂 非常感謝老師的用心
(6)製作作業的時間 大概花了一個禮拜的時間

(1)作業網址 : http://mepopedia.com/~cg104-1a/midterm/midterm-1045440007

(1)網站主題: chloe moretz
(2)製作動機,對象: chloe的粉絲
(3)導覽列項目: 主頁/個人經歷/電影作品/預告片/圖片
(3)風格設定:
簡約
(4)有無遇到的問題 還蠻難的
(5)製作感想 雖然很難,但還蠻有趣的
(6)製作作業的時間 斷斷續續6個多小時

(1)作業網址 : http://mepopedia.com/~cg104-1a/midterm/midterm-1045440015

(1)網站主題: 獨立樂團介紹
(2)製作動機,對象: 向16-28歲的年輕人介紹,我最喜歡的4個獨立樂團。
(3)導覽列項目: 草東沒有派對、法蘭黛、那我懂你意思了、好樂團。
(3)風格設定: 簡易、草根味。

(4)有無遇到的問題;網頁設計不簡單....
(5)製作感想 : 雖然以前有稍微碰過但這是我第一次完整製作一個網頁! 蠻有成就感的。
(6)製作作業的時間 : 1周

(1)作業網址 : http://mepopedia.com/~cg104-1a/midterm/midterm-1045440012
(1)網站主題:李聖經
(2)製作動機,對象:李聖經很美
(3)導覽列項目:首頁/個人資料/寫真集/演出作品/代言商品
(3)風格設定:美美的
(4)有無遇到的問題:製作過程都是問題
(5)製作感想:好難QAQ
(6)製作作業的時間:一整天

(1)作業網址 : http://mepopedia.com/~cg104-1a/midterm/midterm-1045440001

(1)網站主題: 魔力紅 MAROON 5
(2)製作動機,對象: 亞當李維很帥唱歌很好聽
(3)導覽列項目: 首頁/經歷/成員/專輯/影音
(3)風格設定:酷酷的 帥帥的

(4)有無遇到的問題 有圖片原本不會靠右
(5)製作感想 越做越熟練
亞當李維變更帥了

(6)製作作業的時間 一整天我快掛了

(1)作業網址 : http://mepopedia.com/~cg104-1a/midterm/midterm-1045440033

(1)網站主題: Wiz Khalifa
(2)製作動機,對象: 唱歌好聽
(3)導覽列項目: 個人介紹/專輯/歌曲
(3)風格設定: 就這樣

(4)有無遇到的問題 影片太多 要找到解決辦法太久了
(5)製作感想 累!
(6)製作作業的時間 6小時

(1)作業網址 : http://mepopedia.com/~cg104-1a/midterm/midterm-1045440050

(1)網站主題: BTS-(防彈少年團)
(2)製作動機,對象:喜歡它們的團體、歌曲、男生都很帥
(3)導覽列項目:首頁/成員/音樂/合作歌曲/經歷
(3)風格設定:潮流風格

(4)有無遇到的問題 很多問題,因為有段時間沒來上課所以很多都不會
很多問題都要問周遭的同學朋友,學得很辛苦,所以之後都要都要乖乖來上課
(5)製作感想 很累很辛苦,但很滿足充實
(6)製作作業的時間 六個小時

(1)作業網址 : http://mepopedia.com/~cg104-1a/midterm/midterm-1045440049

(1)網站主題: 貝克漢
(2)製作動機,對象: 他好帥!!
(3)導覽列項目: 首頁/介紹/職業生涯/紋身/名人生活
(3)風格設定: 看帥風

(4)有無遇到的問題 有~完全不會
(5)製作感想 好難QAQ
(6)製作作業的時間 好久好久

1)作業網址 : http://mepopedia.com/~cg104-1a/midterm/midterm-1045440022
(1)網站主題: 致命情人
(2)製作動機,對象: 朋友
(3)導覽列項目:首頁 風格/唱片/成員
(3)風格設定:黑黑的搖滾樂

(4)有無遇到的問題 有一開始甚麼都不會到處問同學
(5)製作感想 很累喔需要時間研究
(6)製作作業的時間 1整個夜晚

http://mepopedia.com/~cg104-1a/midterm/midterm-1045440020/

(1)網站主題:
Taylor Swift

(2)製作動機,對象:
看了非常喜歡很有成就感。

(3)導覽列項目:
簡介/相片/專輯/影音/網站

(3)風格設定:
以泰勒斯的專輯風格來製作。

(4)有無遇到的問題
起出沒時麼問題,但到中間就遇上了小事,但細心的檢查之後就解決了。

(5)製作感想
越做越上寫,做完之後非常有成就感

(6)製作作業的時間
3天



Edited 1 time(s). Last edit at 04/28/2016 02:12PM by 1045440020.
(編輯記錄)

1.作業網址:http://mepopedia.com/~cg104-1a/midterm/midterm~1045440003/

1.主題:一拳超人
2.對象:動漫迷
3.導覽列項目:關於 故事 角色 動漫影片連結
4.風格以簡單有趣為主

有超多問題的 語法大概在我名單上比數學簡單一點點而已哈哈
考多語法 有很多步驟要記 少了一個都不行 比如說按鈕的
雖說自己做得有點偷懶 但能做個網頁真的是不容易啊

(1)作業網址 http://mepopedia.com/~cg104-1a/midterm/midterm-1045440028
(2).
1有無遇到的問題 其實還好
2.製作感想 累
3.製作作業的時間 大概一個禮拜