<h1>[color=#990000][期末作業] 以雙欄為主的網站設計[/color]</h1>

[hr]
<h2>製作說明：</h2>
<b>1.請參考期末之前教過的做法及講義，製作以雙欄(多欄)為主的網站。

2.題目自訂，可以延續期中作業的主題，也可以是全新的主題。

3.必須考慮設計風格與質感，並需自行設計圖片(尤其是頂圖，不可使用現成設計好的圖片），製作網站內容。

4.需以Float浮動的方式建立雙欄(多欄)(不限定每頁都須雙欄)、DIV搭配CSS的方式完成，設定尺寸、字體、顏色等等。

5.至少需包含
(1).Table：表格→匯整資料，
(2)Float→繞圖排文，
(3)臉書、噗浪等推文設定，
(4)圖片跳窗連結，
(5)導覽列設定。


6.製作完成上傳至FTP


[hr]

<h2>作業設計重點</h2>

<b>[color=#CC0000](1)能自行設計以DIV與CSS製作的網站
(2)利用float設計雙欄網站
(3)利用項目清單設計導覽列
(4)利用自已設計的圖片、色彩搭配與字體設定等設計出具有質感的網頁[/color]</b>


<h2>評分標準與製作檢核</h2>
1.雙欄的製作(Float的使用)，不同的連結方式
2.HTML的正確架構(DIV的使用)
3.整體設計美感(CSS運用，風格及配色，字體設定、圖片製作)
4.導覽列的正確性(含導覽超連結)
5.表格、繞圖排文、推文等設定
6.HTML Title的設定，Footer的版權宣告
7.內容的完整性
8.製作說明

[hr]

<h2>繳交作業方式</h2>
<b>[color=#CC0066]1.製作完成後，檔案命名方式：[/color]</b>

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

每位同學請將自己的資料夾命名為：final-學號
這個作業的網址則為:http://mepopedia.com/~css106-2a/final/final-10554452XX

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

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


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

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

[hr]

<h2>回覆說明</h2>

<b>[color=#0066CC]完成品[/color]</b>
[color=#FF0066]請將這項放置於文章最前面[/color]
(1)作業網址：
(2).
1.製作作業的時間：
2.有無遇到的問題：
3.製作心得與感想：
4.本學期於網頁設計課程上的收穫：



<b>[color=#0066CC]前置作業[/color]</b>
<b>(1)網站主題：
(2)導覽列架構設定
(3)主要瀏覽族群：
(5)風格設定：
(6)主色調，輔助色調：
(7)製作動機：
(8)製作目的：
預期效果：

</b>

[hr]

=================================================
[color=#CC0066]※期末作業無論如何請一定要繳交，否則以期末以零分計。※
※期末考當週請務必出席，無故缺席以零分計。※
※若經發現作業為直接複製同學檔案以零分計※[/color]
=================================================
http://youtu.be/JhWaXP7wCrI

<iframe width="853" height="480" src="//www.youtube.com/embed/JhWaXP7wCrI?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]
上傳圖片可使用
http://imgur.com/

若寬度太寬，請使用以下語法，將圖片網址帶入：
<xmp><img width="100%" src="圖片網址" border="0">
</xmp>

[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/~css106-2a/final/final-10554452XX

資料夾內含：
(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]
[color=#FF0066]請將這項放置於文章最前面[/color]
(1)作業網址：
(2).
1.製作作業的時間：
2.有無遇到的問題：
3.製作心得與感想：
4.本學期於網頁設計課程上的收穫：



[color=#0066CC]前置作業[/color]
(1)網站主題：
(2)導覽列架構設定
(3)主要瀏覽族群：
(5)風格設定：
(6)主色調，輔助色調：
(7)製作動機：
(8)製作目的：
預期效果：



[hr]

=================================================
[color=#CC0066]※期末作業無論如何請一定要繳交，否則以期末以零分計。※
※期末考當週請務必出席，無故缺席以零分計。※
※若經發現作業為直接複製同學檔案以零分計※[/color]
=================================================
http://youtu.be/JhWaXP7wCrI



[hr]
上傳圖片可使用
http://imgur.com/

若寬度太寬，請使用以下語法，將圖片網址帶入：
<img width="100%" src="圖片網址" border="0"> <br />