[color=#990000][期末作業] 以雙欄為主的網站設計[/color]
[hr]
製作說明:
1.請參考期末之前教過的做法及講義,製作以雙欄(多欄)為主的網站。
2.題目自訂,可以延續期中作業的主題,也可以是全新的主題。
3.必須考慮設計風格與質感,並需自行設計圖片,製作網站內容。
4.需以Float浮動的方式建立雙欄(多欄)(不限定每頁都須雙欄)、DIV搭配CSS的方式完成,設定尺寸、字體、顏色等等。
5.至少需包含
(1).Table:表格→匯整資料,
(2)Float→繞圖排文,
(3)臉書、噗浪等推文設定,
(4)圖片跳窗連結,
(5)導覽列設定。
6.製作完成上傳至FTP
[hr]
作業設計重點
[color=#CC0000](1)能自行設計以DIV與CSS製作的網站
(2)利用float設計雙欄網站
(3)利用項目清單設計導覽列
(4)利用自已設計的圖片、色彩搭配與字體設定等設計出具有質感的網頁[/color]
評分標準與製作檢核
1.雙欄的製作(Float的使用),不同的連結方式
2.HTML的正確架構(DIV的使用)
3.整體設計美感(CSS運用,風格及配色,字體設定、圖片製作)
4.導覽列的正確性(含導覽超連結)
5.表格、繞圖排文、推文等設定
6.HTML Title的設定,Footer的版權宣告
7.內容的完整性
8.製作說明
[hr]
繳交作業方式
[color=#CC0066]1.製作完成後,檔案命名方式:[/color]
[color=#669900]期中作業FTP上的資料夾為:final
每位同學請將自己的資料夾命名為:final-學號
這個作業的網址則為:http://mepopedia.com/~web104-2b/final/final-10354452XX
資料夾內含:
(1).首頁命名為index.html
(2).其他頁面請自行命名,但需注意命名為則,不可出現中文及全形字、特殊符號等等
(3).一個命名為style.css的css樣式檔
(4).存放圖檔的images資料夾
存放在 < final-學號 > 的資夾內[/color]
[color=#CC0066]2.全部完成後上傳至FTP[/color]
[color=#CC0066]3.依進度回覆本篇文章[/color]
[hr]
回覆說明
[color=#0066CC]完成品[/color](1/7前)
[color=#FF0066]請將這項放置於文章最前面[/color]
(1)作業網址:
(2).
1.製作作業的時間:
2.有無遇到的問題:
3.製作心得與感想:
4.本學期於網頁設計課程上的收穫:
[color=#CC0066]4.請務必在1/6前回覆,否則為遲交[/color]
[color=#0066CC]前置作業[/color](12/31)
[color=#0066CC]前置作業[/color](12/24)
(1)網站主題:
(2)導覽列架構設定
範例參考(可下載參考附檔的做法):
[IMG]http://i556.photobucket.com/albums/ss1/whc915/webtree.jpg[/IMG]
(3)尺寸與架構設定
範例參考:
[IMG]http://i556.photobucket.com/albums/ss1/whc915/web-layout.jpg[/IMG]
(4)主要瀏覽族群:
(5)風格設定:
(6)主色調,輔助色調:
(7)製作動機:
(8)製作目的:
預期效果:
(8)資料蒐集分析
[color=#CC0099]◎設計優良網站(風格)列表與分析
[作業] 優良設計網站蒐集與分析 http://mepopedia.com/forum/read.php?2023,68211
並將網站分析於12/17前回覆於前述網址[/color]
◎相關網站列表與分析:
[hr]
[color=#CC0066]
進階參考:ubuntu網頁設計規範手冊 ubuntu Web Design Guidelines[/color]
http://design.ubuntu.com/web
下載:http://design.canonical.com/brand/D.%20Ubuntu%20Web%20Guidelines.pdf
[hr]
學長姐作品參考
-
[size=small](1) 作業網址: http://mepopedia.com/~web100b/final/final-1001445022
(2).
1. 製作作業的時間:超過二十四小時
2. 有無遇到的問題:[color=#9999CC]同樣是跨瀏覽器的問題
還有關於 content 裡面的 L 跟 R 的問題
就算跟著老師的方法做也一樣不會跟著跑這樣[/color]
[color=#FF0000]這些問題已經從老師那裡得到解答,解決囉!:)[/color]
3. 製作心得與感想:雙欄式的網頁真的困難重重
但很高興我能從這樣的網頁中學會自己克服困難、解決問題
做完之後很有成就感,很高興:)
-
(1) 網站主題:金在中/東方神起
(2) 導覽列架構設定:
[IMG]http://i.imgur.com/E8uEV.jpg[/IMG]
(3) 尺寸與架構設定:
[IMG]http://i.imgur.com/FUmdw.jpg[/IMG]
(4) 風格設定:簡約、華麗、精緻
(5) 主色調,輔助色調:紅、黑;白、飽和度不依的紅、灰,等
(6) 製作動機:
喜歡一個人不能只是看外表,很多人因為他的長相而喜歡他
哪天他的髮型換了,身材變了,沒有了原本的帥氣,就不喜歡了
最討厭這種人‥
(7) 製作目的:讓更多人認識金在中這個人
預期效果: 呈現擁有自我風格的雙欄式網頁[/size]
[hr]
其他作品
作業參考
(1) http://mepopedia.com/~web100b/final/final-1001445022/
(2) http://mepopedia.com/~web100b/final/final-1001445042/
(3) http://mepopedia.com/~web101c/final/final-1015445243/
http://mepopedia.com/~web101c/final/final-1015445243-1/
(4) http://mepopedia.com/~web103-a/final/final-1025445124/
(5) http://mepopedia.com/~web103-a/final/final-1025445055/
(6) http://mepopedia.com/~web103-a/final/final-1025445001/
(7) http://mepopedia.com/~web103-a/final/final-1025445040/
(8) http://mepopedia.com/~web103-a/final/final-1025445043/
(9) http://mepopedia.com/~web103-a/final/final-1005445193/
(10) http://mepopedia.com/~web103-a/final/final-1025445070/
http://mepopedia.com/forum/read.php?2023,67943
[hr]
=================================================
[color=#CC0066]※期末作業無論如何請一定要繳交,否則以期末以零分計※
※若經發現作業為直接複製同學檔案以零分計※[/color]
=================================================
http://youtu.be/JhWaXP7wCrI
[hr]
上傳圖片可使用
http://imgur.com/
若寬度太寬,請使用以下語法,將圖片網址帶入: