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

Advanced

Change History

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

Changed By: JinJin
Change Date: November 12, 2014 10:44AM

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

<h2>一、製作說明:</h2>
<b>1.請參考期中之前教過的做法及講義,製作以單欄為主的網站

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

3.題目自訂

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

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

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

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

8.製作完成上傳至FTP

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

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


<h2>二、評分標準與製作檢核</h2>
1.HTML的正確架構(DIV的使用)
2.整體設計美感(CSS運用,風格及配色,字體設定、圖片製作) \
3.導覽列的正確性(含導覽超連結)\
4.h1或h2的使用
5.class(類別)的運用
6.HTML Title的設定
7.Footer的版權宣告
8.內容完整的兩頁(至少)的連結
9.製作說明

加分:
1.內容完整度,連結頁面全部做完最少八十分,最多100分。


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

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

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

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

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


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

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


<b>[color=#0066CC]前置作業[/color]</b>(11/05)
<b>(1)網站主題:
(2)製作動機:
(3)製作內容:
(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:
◎相關網站列表與分析:</b>


<b>[color=#0066CC]完成品[/color]</b>(11/18前)
[color=#FF0066]請將這項放置於文章最前面[/color]
(1)作業網址
(2).
1有無遇到的問題
2.製作感想
3.製作作業的時間


<b>[color=#CC0066]4.請務必在11/18前回覆,否則為遲交[/color]</b>


<h2>四、期中作業進度參考</h2>
第七週 10/29 前置作業,題目確定,資料蒐集與分析等
第八週 11/05 決定排版形式、尺寸、圖片製作
第九週 11/12 HTML DIV與CSS設定
第十週 11/19 期中作業上傳繳交與討論

</b>


<h2>五、同學常見問題之注意事項</h2>

隨時補充:

1.網頁圖檔不宜太大,否則網頁開啟速度會變慢,請盡量在Photoshop或Illustrator的『儲存為網頁與裝置用』的功能裡,修改圖檔的大小至100KB以下,100KB會佔1Mb頻寬(每秒鐘),以此類推。

2.有文字出現的區塊,要記得設定padding,文字才不會跟邊框黏在一起。

3.導覽列的超連結
<img width=70% src=http://i1136.photobucket.com/albums/n481/parkparkyang/li01.jpg />

請記得先將第一頁所有的連結都先設定好,再以另存新檔的方式,存成其他檔案,如此就不用每次都要設定超連結。

4.亂碼問題,放在 <head> </head> 之間
<xmp><meta http-equiv="Content-Type" content="text/html; charset=utf-8"></xmp>
編碼方式記得存utf-8

5.CSS檔案的路徑,放在 <head> </head> 之間
<xmp><link rel="stylesheet" href="style.css" media="screen" /></xmp>

6.檔案宣告,在HTML檔最前面放 <xmp><!DOCTYPE html></xmp>

7.任何出現在網頁裡的命名不能出現中文及全形字。

8.圖片必須放在images圖片資料夾裡

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

[hr]
<h2>參考範例</h2>

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

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

[hr]
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]
=================================================
Changed By: JinJin
Change Date: October 28, 2014 10:55PM

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

<h2>一、製作說明:</h2>
<b>1.請參考期中之前教過的做法及講義,製作以單欄為主的網站

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

3.題目自訂

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

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

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

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

8.製作完成上傳至FTP

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

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


<h2>二、評分標準與製作檢核</h2>
1.HTML的正確架構(DIV的使用)
2.整體設計美感(CSS運用,風格及配色,字體設定、圖片製作) \
3.導覽列的正確性(含導覽超連結)\
4.h1或h2的使用
5.class(類別)的運用
6.HTML Title的設定
7.Footer的版權宣告
8.內容完整的兩頁(至少)的連結
9.製作說明

加分:
1.內容完整度,連結頁面全部做完最少八十分,最多100分。


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

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

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

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

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


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

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


<b>[color=#0066CC]前置作業[/color]</b>(11/05)
<b>(1)網站主題:
(2)製作動機:
(3)製作內容:
(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:
◎相關網站列表與分析:</b>


<b>[color=#0066CC]完成品[/color]</b>(11/18前)
[color=#FF0066]請將這項放置於文章最前面[/color]
(1)作業網址
(2).
1有無遇到的問題
2.製作感想
3.製作作業的時間


<b>[color=#CC0066]4.請務必在11/18前回覆,否則為遲交[/color]</b>


<h2>四、期中作業進度參考</h2>
第七週 10/29 前置作業,題目確定,資料蒐集與分析等
第八週 11/05 決定排版形式、尺寸、圖片製作
第九週 11/12 HTML DIV與CSS設定
第十週 11/19 期中作業上傳繳交與討論

</b>


<h2>五、同學常見問題之注意事項</h2>

隨時補充:

1.網頁圖檔不宜太大,否則網頁開啟速度會變慢,請盡量在Photoshop或Illustrator的『儲存為網頁與裝置用』的功能裡,修改圖檔的大小至100KB以下,100KB會佔1Mb頻寬(每秒鐘),以此類推。

2.有文字出現的區塊,要記得設定padding,文字才不會跟邊框黏在一起。

3.導覽列的超連結
<img width=70% src=http://i1136.photobucket.com/albums/n481/parkparkyang/li01.jpg />

請記得先將第一頁所有的連結都先設定好,再以另存新檔的方式,存成其他檔案,如此就不用每次都要設定超連結。

4.亂碼問題,放在 <head> </head> 之間
<xmp><meta http-equiv="Content-Type" content="text/html; charset=utf-8"></xmp>
編碼方式記得存utf-8

5.CSS檔案的路徑,放在 <head> </head> 之間
<xmp><link rel="stylesheet" href="style.css" media="screen" /></xmp>

6.檔案宣告,在HTML檔最前面放 <xmp><!DOCTYPE html></xmp>

7.任何出現在網頁裡的命名不能出現中文及全形字。

8.圖片必須放在images圖片資料夾裡

9.使用進階語法,需注意若直接以Dreamweaver製作,彈性較小,
=================================================
[color=#CC0066]若經發現作業為直接複製同學檔案以零分計[/color]
=================================================
會比較難修改。

[hr]
<h2>參考範例</h2>

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

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

[hr]
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]
=================================================

Original Message

作者: JinJin
Date: October 28, 2014 10:40PM

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

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



一、製作說明:


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

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

3.題目自訂

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

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

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

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

8.製作完成上傳至FTP

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

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



二、評分標準與製作檢核


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

加分:
1.內容完整度,連結頁面全部做完最少八十分,最多100分。


三、繳交作業方式


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

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

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

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

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


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

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


[color=#0066CC]前置作業[/color](11/05)
(1)網站主題:
(2)製作動機:
(3)製作內容:
(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:
◎相關網站列表與分析:



[color=#0066CC]完成品[/color](11/18前)
[color=#FF0066]請將這項放置於文章最前面[/color]
(1)作業網址
(2).
1有無遇到的問題
2.製作感想
3.製作作業的時間


[color=#CC0066]4.請務必在11/18前回覆,否則為遲交[/color]


四、期中作業進度參考


第七週 10/29 前置作業,題目確定,資料蒐集與分析等
第八週 11/05 決定排版形式、尺寸、圖片製作
第九週 11/12 HTML DIV與CSS設定
第十週 11/19 期中作業上傳繳交與討論




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



隨時補充:

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製作,彈性較小,
=================================================
[color=#CC0066]若經發現作業為直接複製同學檔案以零分計[/color]
=================================================會比較難修改。

[hr]

參考範例



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

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

[hr]
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]
=================================================