JinJin 的視覺設計專區 - 100-1《中國》北視傳一A-網頁設計

Re: [期中作業 ] 以單欄為主的網站設計 (no replies)

ffga3307 — Fri, 18 Nov 2016 01:30:16 +0800

網站主題:bring me the horizon
(1)網址:file:///C:/Users/user/Desktop/hw03-1045445107/index.html
(2) 學號 1045445107
(3)製作動機：最喜歡的樂團
(4)製作內容：
image
style.css
1.html - 樂團介紹
2.html-團員介紹
3.html-專輯
4.html-音樂
5.html-團照

(5)資料蒐集分析
設計優良網站(風格)列表與分析：
http://www.elle.com.tw/entertainment/music/midnight-music-2015-june
因為喜歡簡約素素的風格

(6)
有無遇到的問題:做的很焦慮
製作感想:雖然不是第一次碰到但還是覺得好傷腦細胞
製作作業的時間:大概一天

相關網站列表與分析：
官方FB
https://zh-tw.facebook.com/bmthofficial/

[作業08] 雙欄垂直導覽列製作 (43 replies)

JinJin — Wed, 04 Jan 2012 22:30:30 +0800

1. 二、繳交作業方式

請延續 [作業07] 以Float：浮動，製作雙欄網頁
或者直接以期末做為開始製作

參考[color=#CC3300][講義07] 以Float：浮動，製作雙欄網頁
http://mepopedia.com/forum/read.php?804,18255[/color]

[color=#CC0066]本講義範例網址
http://mepopedia.com/~jinjin/web/hw07/[/color]

的步驟製作，將垂直導覽列設定的部分製作完成。

[color=#CC0099]可以連結到不同頁面或外部連結，也可以如範例以錨點連結至同一頁面。[/color]

[hr]

1. 二、繳交作業方式

[color=#CC0099]若作業七已經全部完成，則貼上作業七網址即可[/color]

1.製作完成後，檔案命名方式：

[color=#669900]第八個平時作業FTP上的資料夾為：hw08

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

資料夾內含：
1.首頁命名為index.html
2.一個命名為style.css的css樣式檔
3.images圖檔資料夾

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

2.上傳至FTP

3.回覆本篇文章

(1).作業網址：

(2).請回答以下問題：
1.網頁主題：配色與風格設定：
2.有無遇到的問題?
3.製作感想
4.製作作業的時間

[color=#CC0099]請務必在下次上課前回覆，否則為遲交[/color]

[期末作業] 以雙欄為主的網站設計 (65 replies)

JinJin — Wed, 04 Jan 2012 00:48:48 +0800

1. 二、繳交作業方式
2. 一、製作說明：
3. 作業設計重點
4. 二、評分標準與製作檢核
5. 三、繳交作業方式
6. 回覆說明
7. 四、期末作業進度參考

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

2. 一、製作說明：

1.請參考期末之前教過的做法及講義，製作以雙欄(多欄)為主的網站。

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

3.需自行設計圖片，製作網站內容。

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

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

6.製作完成上傳至FTP

3. 作業設計重點

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

4. 二、評分標準與製作檢核

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

5. 三、繳交作業方式

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

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

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

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

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

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

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

6. 回覆說明

[color=#0066CC]完成品[/color](12/28前)
[color=#FF0066]請將這項放置於文章最前面[/color]
(1)作業網址：
(2).
1.製作作業的時間：
2.有無遇到的問題：
3.製作心得與感想：
[color=#CC0066]4.請務必在12/28前回覆，否則為遲交[/color]

[color=#0066CC]前置作業[/color](10/19)
(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)資料蒐集分析

[color=#CC0099]◎設計優良網站(風格)列表與分析
請參考：http://mepopedia.com/forum/read.php?804,18412
並將網站分析回覆於前述網址[/color]

◎相關網站列表與分析：

7. 四、期末作業進度參考

第十五週　12/14　題目及網站架構確定，版型、ˋ尺寸確定，資料蒐集與網站分析
第十六週　12/21　圖片製作，內容建構
第十七週　12/28　完成與上傳，檢討與修正
第十八週　01/04　成績確認與最後修改

=================================================
[color=#CC0066]※期末作業無論如何請一定要繳交，否則以期末以零分計※
※若經發現作業為直接複製同學檔案以零分計※[/color]
=================================================

[作業07] 以Float：浮動，製作雙欄網頁 (41 replies)

JinJin — Wed, 04 Jan 2012 22:27:06 +0800

1. 二、繳交作業方式
2. 一、製作說明：
3. 作業設計重點
4. 二、評分標準與製作檢核
5. 三、繳交作業方式
6. 回覆說明
7. 四、期末作業進度參考
8. 一、製作步驟
9. 二、繳交作業方式

請參考

[color=#CC3300][講義07] 以Float：浮動，製作雙欄網頁
http://mepopedia.com/forum/read.php?804,18255[/color]

[color=#CC0066]本講義範例網址
http://mepopedia.com/~jinjin/web/hw07/[/color]

的步驟製作，並符合以下條件：

8. 一、製作步驟

1.下載附件的練習檔(或由期中作業修改製作，但必須是全新的內容的一頁，不要與範例內容相同)

2.找文字及圖片資料，並設定#header的標題與副標題

3.重新設定#content及#footer的CSS，可參考影音步驟，但不可為一樣的設定

Dreamweaver中#content、#footer、h2、項目清單的CSS設定
http://www.youtube.com/watch?v=gvI0qYcn9ko

4.在#content中插入#content-L及#content-R利用Float:浮動屬性，製作雙欄網頁。

5.在#content-L放入垂直檔覽列。

6.將#content-R的資料以表格整理，複習表格的做法。

[hr]

7.在[color=#990033]title的部分打上『自己作業的命名』[/color]

8.在#footer打上自己的版權聲明

9.請每位同學依步驟完成本單元後，上傳至FTP

10.本次作業的重點在於：

[color=#CC0066]（1 ）認識多欄網頁。
（2 ）雙欄網頁製作
（3 ）製作垂直導覽列
（4 ）複習表格的做法
（5 ）利用CSS，做更細緻的網頁美化設定。 ([/color]

[hr]

9. 二、繳交作業方式

1.製作完成後，檔案命名方式：

[color=#669900]第七個平時作業FTP上的資料夾為：hw07

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

資料夾內含：
1.首頁命名為index.html
2.一個命名為style.css的css樣式檔
3.images圖檔資料夾

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

2.上傳至FTP

3.回覆本篇文章

(1).作業網址：

(2).請回答以下問題：
1.網頁主題：配色與風格設定：
2.有無遇到的問題?
3.製作感想
4.製作作業的時間

[color=#CC0099]請務必在下次上課前回覆，否則為遲交[/color]

[作業06] 表格的製作美化與資料整理 (39 replies)

JinJin — Wed, 04 Jan 2012 22:29:35 +0800

1. 二、繳交作業方式
2. 一、製作說明：
3. 作業設計重點
4. 二、評分標準與製作檢核
5. 三、繳交作業方式
6. 回覆說明
7. 四、期末作業進度參考
8. 一、製作步驟
9. 二、繳交作業方式
10. 一、製作步驟
11. 二、繳交作業方式

請參考

[color=#CC3300][講義06] 表格的製作
http://mepopedia.com/forum/read.php?804,18062[/color]

[color=#CC0066]本講義範例網址
http://mepopedia.com/~jinjin/web/hw06-ex/[/color]

的步驟製作，並符合以下條件：

10. 一、製作步驟

1.下載附件的練習檔(或由期中作業修改製作，但必須是全新的內容的一頁，不要與範例內容相同)

2.找文字及圖片資料，並設定#header的標題與副標題

3.重新設定#content及#footer的CSS，可參考影音步驟，但不可為一樣的設定

Dreamweaver中#content、#footer、h2、項目清單的CSS設定
http://www.youtube.com/watch?v=gvI0qYcn9ko

4.製作並以美化表格，將資料以表格做整理

Dreamweaver表格製作-TABLE,TR TD TH caption的CSS設定

http://www.youtube.com/watch?v=3gPx_YYE1yI

[hr]

Dreamweaver表格製作-細部調整、圖片開啟新視窗、超連結等CSS的設定

http://www.youtube.com/watch?v=69CMaum2WPY

[hr]

Dreamweaver中表格CSS設定以及影音嵌入

http://www.youtube.com/watch?v=lXMUKwYmBqQ

[hr]

5.在[color=#990033]title的部分打上『自己作業的命名』[/color]

6.在#footer打上自己的版權聲明

7.請每位同學依步驟完成本單元後，上傳至FTP

8.本次作業的重點在於：

[color=#CC0066]（1 ）表格製作與美化
（2 ）利用CSS，做更細緻的網頁美化設定
（4 ）如何利用表格，將圖片、影音與文字的編排搭配出有質感的網頁。[/color]

[hr]

11. 二、繳交作業方式

1.製作完成後，檔案命名方式：

[color=#669900]第六個平時作業FTP上的資料夾為：hw06

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

資料夾內含：
1.首頁命名為index.html
2.一個命名為style.css的css樣式檔
3.images圖檔資料夾

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

2.上傳至FTP

3.回覆本篇文章

(1).作業網址：

(2).請回答以下問題：
1.網頁主題：配色與風格設定：
2.有無遇到的問題?
3.製作感想
4.製作作業的時間

[color=#CC0099]請務必在下次上課前回覆，否則為遲交[/color]

[作業05] 網頁導覽列、繞圖排文與推文按鈕的應用 (52 replies)

JinJin — Wed, 04 Jan 2012 22:25:14 +0800

1. 二、繳交作業方式
2. 一、製作說明：
3. 作業設計重點
4. 二、評分標準與製作檢核
5. 三、繳交作業方式
6. 回覆說明
7. 四、期末作業進度參考
8. 一、製作步驟
9. 二、繳交作業方式
10. 一、製作步驟
11. 二、繳交作業方式
12. 一、製作步驟
13. 二、繳交作業方式

請參考

[color=#CC3300][講義05] 繞圖排文與推文按鈕的應用
http://mepopedia.com/forum/read.php?804,17878,17878[/color]

[color=#CC0066]本講義範例網址
http://mepopedia.com/~jinjin/web/hw05/story.html　[/color]

的步驟製作，並符合以下條件：

12. 一、製作步驟

1.下載附件的練習檔(或由期中作業修改製作，但必須是全新的內容的一頁)

2.找文字及圖片資料，並設定#header的標題與副標題

3.重新設定#content及#footer的CSS，可參考圖示步驟，但不可為一樣的設定

(1)
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/text004.jpg[/IMG]

(2)
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/text005.jpg[/IMG]

(3)
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/text006.jpg[/IMG]

4.設定內文的主標題h2，可參考圖示步驟，但不可為一樣的設定
(1)
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/img-10-2.jpg[/IMG]

(2)
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/img-10.jpg[/IMG]

5.設定類別作者介紹的CSS，可參考圖示步驟，但不可為一樣的設定

(1)
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/text001.jpg[/IMG]

(2)
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/text002.jpg[/IMG]

(3)
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/text003.jpg[/IMG]

6.設定繞圖排文

7.設定臉書、噗浪以及推特的按鈕及分享語法

8.製作圖片跳出視窗的設定

9.在[color=#990033]title的部分打上『自己作業的命名』[/color]

10.在#footer打上自己的版權聲明

11.請每位同學依步驟完成本單元後，上傳至FTP

12.本次作業的重點在於：

[color=#CC0066]（1 ）善用CSS導覽列功能
（2 ）繞圖排文
（3 ）推文設定
（4 ）利用CSS，做更細緻的內文設定
（5 ）如何利用圖片與文字的編排搭配出有質感的網頁。[/color]

[hr]

13. 二、繳交作業方式

1.製作完成後，檔案命名方式：

[color=#669900]第五個平時作業FTP上的資料夾為：hw05

每位同學請將自己的資料夾命名為：hw05-學號
這個作業的網址則為:http://mepopedia.com/~web101c/hw05/hw05-10154452xx

資料夾內含：
1.首頁命名為index.html
2.一個命名為style.css的css樣式檔
3.images圖檔資料夾

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

2.上傳至FTP

3.回覆本篇文章

(1).作業網址：

(2).請回答以下問題：
1.網頁主題：配色與風格設定：
2.有無遇到的問題?
3.製作感想
4.製作作業的時間

[系統公告] FTP 上傳單一檔案大小上限為 5MB (no replies)

mepoadm — Wed, 09 Nov 2011 16:04:44 +0800

因近日部份同學上傳檔案過大 (其中一位同學單一資料夾共上傳了 300MB 的檔案)，超過合理使用的範圍，因此目前系統
FTP 上傳時加上「單一檔案不得超過 5MB」的限制。

一般網頁檔案(例如圖片)大小以不超過 100KB 為宜，檔案大小 100KB 之內，使用者能以流暢的速度瀏覽。但若超過 500KB，網頁速度會非常緩慢並對伺服器造成較大的負載。

目前設定的 5MB 上限，是由於考量網頁檔案上傳可能有 Flash 動畫上傳的需要，而一般 Flash 檔案較大，若設定 1MB 或 500KB 的限制，可能造成同學上傳 Flash 的合理使用的限制。因此目前上限訂為 5MB。

同時，也希望同學不要上傳不相關之檔案 (例如上傳 300MB 的同學上傳了疑似整個影音編輯軟體的安裝檔)，不要上傳 Photoshop 的 ai 檔等網頁不相關之檔案。

最後，盼各位同學配合，讓這個提供各位學習的網路空間能運作得更順利。

網站管理員

[講義] 網頁文字連結的CSS設定 (no replies)

JinJin — Tue, 08 Nov 2011 23:25:33 +0800

很多同學使用了文字的連結，為了使畫面看起來更有設計感，可以由ＣＳＳ做簡單的設定，即可有不同的視覺效果。
另外若從網頁或ＷＯＲＤ上複製文字，不想整個格式及連結一起複製，可至

編輯→偏好設定→複製/貼上　　設定

預設為具有結構與基本格式，可改為只有文字

如圖所示，網頁上就不會有太多文字連結

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/copy-01.jpg[/IMG]

[hr]

14. 網頁文字連結的CSS設定步驟

1. 1.

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/link-01.jpg[/IMG]

2. 2.

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/link-02.jpg[/IMG]

3. 3.

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/link-03.jpg[/IMG]

4. 4.

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/link-04.jpg[/IMG]

5. 5.

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/link-05.jpg[/IMG]

6. 6.

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/link-06.jpg[/IMG]

如範例檔的連結，預設及滑鼠移過都有不同的視覺改變
http://mepopedia.com/~jinjin/web/hw04-1/links.html

[講義] 圖檔尺寸調整《圖片請盡量縮小至100K以下》 (no replies)

JinJin — Tue, 08 Nov 2011 21:54:44 +0800

很多人喜歡使用圖片來美化網頁，增加網站的吸引力，可是大量圖片，以及大量體積龐大的圖片，卻會讓網站像大象一樣很難行走，越來越慢，降低瀏覽效率，也會讓人缺乏耐心，即使設得再好看，也達不到網站瀏覽效果。

因此網站瘦身是很重要的事，如何讓網站既美麗又有效率，請執行以下步驟：

15. 檢視與修改圖檔大小的步驟：

1. 1.準備好圖片之後，請開啟資料夾檢查檔案大小

開始資料夾→檢視→詳細資料

若發現超過100K 的圖檔就要執行瘦身動作，單一檔案最好能降低到50K以下，圖檔寬度，非必要不要超過500px

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/resize-00.jpg[/IMG]

2. 2.若超過100K以上檔案，請以Photoshop開啟

檔案→儲存為網頁與裝置用

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/resize-01.jpg[/IMG]

3. 3.檢視目前檔案檔格式、大小及速率

範例圖檔原為ＰＮＧ檔，521.7Ｋ，以2M的上網速度，下載本圖需要4秒

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/resize-04.jpg[/IMG]

4. 4.以其他格式或降低色彩數目，來調整圖片檔案大小

選擇ＪＰＧ圖檔，品質60，則檔案降低為80.67K，以2M的上網速度，下載本圖需要1秒

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/resize-05.jpg[/IMG]

[hr]

請同學務必牢記網頁圖檔瘦身的原則，隨時檢查有無檔案尺寸過大的圖檔，發現即將之修改，如此將更能朝更有效率也更專業的網站前進。

[網頁] 常見問題之注意事項 (no replies)

JinJin — Tue, 01 Nov 2011 09:07:58 +0800

16. 同學常見問題之注意事項

隨時補充：

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.圖片連結路徑的問題，若圖檔為01.jpg存放於images資料夾中，則路徑則為＜img src="images/01.jpg"＞

修改圖片路徑方法

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/img01.jpg[/IMG]

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

11.檔案被刪除的問題非常嚴重，尤其是B班，請再仔細檢查有無被刪檔，若有麻煩再上傳

[作業04] 網頁導覽列的製作 (40 replies)

JinJin — Tue, 20 Dec 2011 14:26:57 +0800

1. 二、繳交作業方式
2. 一、製作說明：
3. 作業設計重點
4. 二、評分標準與製作檢核
5. 三、繳交作業方式
6. 回覆說明
7. 四、期末作業進度參考
8. 一、製作步驟
9. 二、繳交作業方式
10. 一、製作步驟
11. 二、繳交作業方式
12. 一、製作步驟
13. 二、繳交作業方式
14. 網頁文字連結的CSS設定步驟
14.1 1.
14.2 2.
14.3 3.
14.4 4.
14.5 5.
14.6 6.
15. 檢視與修改圖檔大小的步驟：
15.1 1.準備好圖片之後，請開啟資料夾檢查檔案大小
15.2 2.若超過100K以上檔案，請以Photoshop開啟
15.3 3.檢視目前檔案檔格式、大小及速率
15.4 4.以其他格式或降低色彩數目，來調整圖片檔案大小
16. 同學常見問題之注意事項
17. [color=#663300]一、製作說明：[/color]
18. [color=#663300]二、繳交作業方式[/color]

[color=#990000][作業04] 網頁導覽列的製作[/color]

17. [color=#663300]一、製作說明：[/color]

1.請參考 [url=http://mepopedia.com/forum/read.php?804,17032][講義04] 以CSS製作網頁導覽列[/url]
的步驟製作，從三種方式中，選擇其中一種製作方式，目前只先教了圖片按鈕的做法可先以這個為主，也可自行嘗試其他做法。

[color=#CC0099]2.請重新下載附件檔案製作，內有圖檔，index.html以及style.css檔，請將自己的期中作業內容套入附件的HTML的架構，再修改CSS設定以及導覽列的連結設定。[/color]

3.每個同學記得在[color=#990033]title的部分打上『自己作業的命名』[/color]

4.記得在＃ＦＯＯＴＥＲ打上自己的版權聲明

[color=#CC0099]5.ＨＴＭＬ及ＣＳＳ可直接套用下載後的附件範例，修改為自己的內容。

6.#header、#button、#content及#footer內，請自行放入不同圖片與文字內容，以期末作業內容為主。[/color]

7.請每位同學依步驟完成本單元後，上傳至FTP

8.本次作業的重點在於：

[color=#CC0066]（1 ）導覽列的製作
（2 ）製作可以互相連結的網頁
（3 ）如何將導覽列設計成畫龍點睛的作用，並兼具網頁整體風格與設計質感
（4 ）如何將圖片與色彩搭配出有質感的網頁。[/color]

18. [color=#663300]二、繳交作業方式[/color]

1.製作完成後，檔案命名方式：

[color=#669900]第四個作業FTP上的資料夾為：hw04

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

資料夾內含：
1.首頁命名為index.html
2.一個命名為style.css的css樣式檔
3.至少一個連結的頁面，如：works.html
4.images圖檔資料夾

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

2.上傳至FTP

3.回覆本篇文章

(1).作業網址：

(2).請回答以下問題：
1.網頁與導覽列配色與風格設定：
2.有無遇到的問題?
3.製作感想
4.製作作業的時間

[color=#CC0099]請務必在下次上課前回覆，否則為遲交[/color]

[hr]
[color=#0033CC]永遠的印象--莫內，範例網址：[/color]

[color=#CC3366]1.透過CSS，以清單＜ul＞及＜li＞製作網頁導覽列[/color]
http://mepopedia.com/~jinjin/web/hw04/　（滑入僅文字變色的導覽列）
http://mepopedia.com/~jinjin/web/hw04-1/　（滑入底色變色及文字置中的導覽列）

[color=#CC3366]2.以圖片按鈕製作的導覽列[/color]
http://mepopedia.com/~jinjin/web/hw04-2/　
[hr]
===========================================
[color=#CC0066]若經發現作業為直接複製同學檔案以零分計[/color]
===========================================

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

JinJin — Sun, 01 May 2016 22:01:53 +0800

1. 二、繳交作業方式
2. 一、製作說明：
3. 作業設計重點
4. 二、評分標準與製作檢核
5. 三、繳交作業方式
6. 回覆說明
7. 四、期末作業進度參考
8. 一、製作步驟
9. 二、繳交作業方式
10. 一、製作步驟
11. 二、繳交作業方式
12. 一、製作步驟
13. 二、繳交作業方式
14. 網頁文字連結的CSS設定步驟
14.1 1.
14.2 2.
14.3 3.
14.4 4.
14.5 5.
14.6 6.
15. 檢視與修改圖檔大小的步驟：
15.1 1.準備好圖片之後，請開啟資料夾檢查檔案大小
15.2 2.若超過100K以上檔案，請以Photoshop開啟
15.3 3.檢視目前檔案檔格式、大小及速率
15.4 4.以其他格式或降低色彩數目，來調整圖片檔案大小
16. 同學常見問題之注意事項
17. [color=#663300]一、製作說明：[/color]
18. [color=#663300]二、繳交作業方式[/color]
19. 一、製作說明：
20. 二、評分標準與製作檢核
21. 三、繳交作業方式
22. 四、期中作業進度參考
23. 五、同學常見問題之注意事項

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

19. 一、製作說明：

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

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

3.題目自訂

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

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

6.至少完成兩頁的內容，若內容完整，且全部頁面完成，最多加6分。

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

8.製作完成上傳至FTP

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

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

20. 二、評分標準與製作檢核

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分。

21. 三、繳交作業方式

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

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

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

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

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

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

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

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

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

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

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

第七週　10/19　前置作業，題目確定，資料蒐集與分析等
第八週　10/26　決定排版形式、尺寸、圖片製作
第九週　11/02　HTML DIV與CSS設定
第十週　11/09　11/8之前將期中作業上傳繳交

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

隨時補充：

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製作，彈性較小，會比較難修改。

10.檔案被刪除的問題非常嚴重，尤其是B班，請再仔細檢查有無被刪檔，若有麻煩再上傳

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

[作業02] 利用Div標籤與CSS建立基本網頁版型--以單純色塊為例 (49 replies)

JinJin — Tue, 08 Nov 2011 22:05:36 +0800

1. 二、繳交作業方式
2. 一、製作說明：
3. 作業設計重點
4. 二、評分標準與製作檢核
5. 三、繳交作業方式
6. 回覆說明
7. 四、期末作業進度參考
8. 一、製作步驟
9. 二、繳交作業方式
10. 一、製作步驟
11. 二、繳交作業方式
12. 一、製作步驟
13. 二、繳交作業方式
14. 網頁文字連結的CSS設定步驟
14.1 1.
14.2 2.
14.3 3.
14.4 4.
14.5 5.
14.6 6.
15. 檢視與修改圖檔大小的步驟：
15.1 1.準備好圖片之後，請開啟資料夾檢查檔案大小
15.2 2.若超過100K以上檔案，請以Photoshop開啟
15.3 3.檢視目前檔案檔格式、大小及速率
15.4 4.以其他格式或降低色彩數目，來調整圖片檔案大小
16. 同學常見問題之注意事項
17. [color=#663300]一、製作說明：[/color]
18. [color=#663300]二、繳交作業方式[/color]
19. 一、製作說明：
20. 二、評分標準與製作檢核
21. 三、繳交作業方式
22. 四、期中作業進度參考
23. 五、同學常見問題之注意事項
24. [color=#663300]一、製作說明：[/color]
25. [color=#663300]二、繳交作業方式[/color]

[color=#990000][作業02] 利用Div標籤與CSS建立基本網頁版型--以單純色塊為例[/color]

24. [color=#663300]一、製作說明：[/color]

1.請參考 [url=http://mepopedia.com/forum/read.php?804,16481][講義] 利用Div標籤與CSS建立基本單欄網頁版型--以單純色塊為例[/url]
的步驟製作

2.每個同學記得在[color=#990033]title的部分打上"視傳一A-學號-以色塊建構的網頁單欄排版"[/color]

3.在#wrapper寬度上打上 px的數值

4.#header、#content及#footer內，自行打入不同的內容文字，自行隨意設定

5.請每位同學依步驟完成本單元─網頁版面基本架構與背景色及字體設定後，上傳至FTP

6.本次作業的重點在於：

[color=#CC0000](1)DIV與CSS的設定
(2)利用單純色彩搭配與字體設定設計出具有質感的網頁[/color]

25. [color=#663300]二、繳交作業方式[/color]

1.製作完成後，檔案命名方式：

[color=#669900]第二個作業FTP上的資料夾為：hw02

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

資料夾內含：
1.首頁命名為index.html
2.一個命名為style.css的css樣式檔

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

2.上傳至FTP

3.回覆本篇文章

(1).作業網址

(2).請回答以下問題：
1.配色風格設定：
2.有無遇到的問題?
3.製作感想
4.製作作業的時間

4.請務必在下次上課前回覆，否則為遲交

===========================================
[color=#CC0066]若經發現作業為直接複製同學檔案以零分計[/color]
===========================================
本週補充講義：
[color=#330066]1.網站設計解析
2.實做第一個網頁
3.利用 CSS 與 Div 標籤建立網頁版型[/color]

[color=#006600]以上PDF講義請至學生系統下載
http://192.192.78.86/student_portal/[/color]
===========================================

[作業03] 利用Div標籤與CSS建立基本網頁版型--Dreamweaver圖片篇 (46 replies)

JinJin — Tue, 08 Nov 2011 22:36:01 +0800

1. 二、繳交作業方式
2. 一、製作說明：
3. 作業設計重點
4. 二、評分標準與製作檢核
5. 三、繳交作業方式
6. 回覆說明
7. 四、期末作業進度參考
8. 一、製作步驟
9. 二、繳交作業方式
10. 一、製作步驟
11. 二、繳交作業方式
12. 一、製作步驟
13. 二、繳交作業方式
14. 網頁文字連結的CSS設定步驟
14.1 1.
14.2 2.
14.3 3.
14.4 4.
14.5 5.
14.6 6.
15. 檢視與修改圖檔大小的步驟：
15.1 1.準備好圖片之後，請開啟資料夾檢查檔案大小
15.2 2.若超過100K以上檔案，請以Photoshop開啟
15.3 3.檢視目前檔案檔格式、大小及速率
15.4 4.以其他格式或降低色彩數目，來調整圖片檔案大小
16. 同學常見問題之注意事項
17. [color=#663300]一、製作說明：[/color]
18. [color=#663300]二、繳交作業方式[/color]
19. 一、製作說明：
20. 二、評分標準與製作檢核
21. 三、繳交作業方式
22. 四、期中作業進度參考
23. 五、同學常見問題之注意事項
24. [color=#663300]一、製作說明：[/color]
25. [color=#663300]二、繳交作業方式[/color]
26. [color=#663300]一、製作說明：[/color]
27. [color=#663300]二、繳交作業方式[/color]

[color=#990000][作業03] 利用Div標籤與CSS建立基本網頁版型--Dreamweaver圖片篇[/color]

26. [color=#663300]一、製作說明：[/color]

1.請參考 [url=http://mepopedia.com/forum/read.php?804,16271][講義] 利用Div標籤與CSS建立基本網頁版型[/url]
的步驟製作

2.下載附件

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

4. 在#wrapper寬度上打上 px的數值

5. #content內，自行打入不同的內容文字，自行隨意設定

6. 以本單元的架構下，文字、圖片及設定，可依講義或自行發揮

7. 本次作業的重點在於：

　[color=#CC0000](1) 練習 Dreamweaver 的操作與使用
　(2) 透過 Dreamweaver 的練習，比較藉由 Dreamweaver 輔助與直接編輯「HTML/CSS原始碼」的優缺點。
　(3) 利用圖片設計加上CSS色彩搭配，營造網頁整體風格（加分）[/color]

27. [color=#663300]二、繳交作業方式[/color]

1.製作完成後，檔案命名方式：

[color=#669900]第三個作業FTP上的資料夾為：hw03

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

資料夾內含：
1.首頁命名為index.html
2.一個命名為style.css的css樣式檔
3.images圖檔資料夾

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

2. 上傳至FTP

3.回覆本篇文章

　(1) 作業網址

　(2) 風格設定（色彩設定部份）（加分）

　(3) 有無遇到的問題

　(4) 製作感想

　(5) 製作作業的時間

4.請務必在下次上課前回覆，否則為遲交

[color=#CC3300]範例參考網站：[/color]
http://mepopedia.com/~jinjin/web/hw03/

===========================================
[color=#CC0066]若經發現作業為直接複製同學檔案以零分計[/color]
===========================================
本週補充講義：
[color=#330066]1.網站設計解析
2.實做第一個網頁
3.利用 CSS 與 Div 標籤建立網頁版型[/color]

[color=#006600]以上PDF講義請至學生系統下載
http://192.192.78.86/student_portal/[/color]
===========================================

[作業01] 以HTML與CSS完成第一個網頁 (55 replies)

JinJin — Wed, 02 Nov 2011 14:15:51 +0800

前言：

基本的網頁是由html與css所組成
希望大家在進入Dreamweaver之前，能夠先對html與css有基礎的概念
所以我們的第一個網頁先由單純的html與css出發
希望大家這一個星期回去能反覆練習，自己寫出html及css語法的簡單網頁
這樣未來在做網頁的時候，能更如虎添翼，舉一反三了!

Let's go!!!大家一起加油吧!!!!

===========================================

[color=#990000]建議需先安裝的軟體[/color]

---------------------------------------------------------------------------------------

[color=#0033CC]FileZilla[/color] 免費又好用的FTP軟體，供客戶端和伺服器端使用

官方下載網頁：http://filezilla-project.org/

---------------------------------------------------------------------------------------

好用的免費記事本軟體
[color=#990000]Notepad++[/color]官方網頁：http://notepad-plus-plus.org/

---------------------------------------------------------------------------------------

FireFox火狐瀏覽器 http://moztw.org/
超好用檢視網頁語法插件: [color=#0033CC]FireBug[/color] ，五星級強力推薦插件之一。它集HTML查看和編輯、Javascript控制台、網絡狀況監視器於一體，是開發JavaScript、CSS、HTML和 Ajax的得力助手。Firebug如同一把精巧的瑞士軍刀，從各個不同的角度剖析Web頁面內部的細節層面，給Web開發者帶來很大的便利。

在FireFox裡的附加元件裡搜尋 FireBug 下載安裝即可

---------------------------------------------------------------------------------------

[color=#990000]推薦很棒的CSS網站[/color]

---------------------------------------------------------------------------------------

[color=#CC6600]CSS-TRICKS[/color] http://css-tricks.com/

HTML & CSS基礎教學影音(必看，雖然是英文，但若耐著性看完會有非常多的收穫喔!)
http://css-tricks.com/video-screencasts/58-html-css-the-very-basics/

---------------------------------------------------------------------------------------

其他HTML & CSS相關網站
有空可多多研讀，增加自己的功力

[color=#663300]HTML[/color]
1.HTML教學導覽 http://www.powmo.com/
2.HTML 簡介與應用 http://neural.cs.nthu.edu.tw/jang/books/html/
3.HTML Tutorial http://www.w3schools.com/html/
4.HTML教學 http://www.pcnet.idv.tw/pcnet/html/html.htm
5.HTML教學示範 http://www.csie.nctu.edu.tw/~jglee/teacher/content.htm
6.HTML 語言簡介 http://203.71.199.2/HTML/%E4%BD%95%E8%AC%82HTML.htm
7.HTML教學 http://m7.dfps.tp.edu.tw/chen/main5/ahtml/01.asp

[color=#663300]CSS[/color]
CSS語法教學攻略篇　http://andyliudesign.idv.tw/31
CSS 語法教學 http://css.1keydata.com/tw/
語法 | 基本的css語法縮寫　http://blog.mukispace.com/css-shorthand/
CSS 樣式表簡介　http://www.pt.ntu.edu.tw/hmchai/ptcomputer03_2/hcss/cssintroduction.htm
ＣＳＳ教程（簡體）http://www.dreamdu.com/css/

---------------------------------------------------------------------------------------

HTML的最基本結構

<html> <head> <title> </title> </head> <body> 您所要在瀏覽器顯示的內容 </body> </html>
---------------------------------------------------------------------------------------

[color=#CC0000]網頁所有檔案命名原則：[/color]

1.只能取半形的英文、數字、-(中線) 、_(底線)
2.絕對不能出現中文和全行字
3.index為首頁的內定命名(會自動判別為首頁)，依序為index.html index.php等
4.所以有網頁檔案必須儲存於某一網站專屬資料夾內，資料夾請以學號命名，每一個作業請依序以:
hw01-學號，為資料夾名稱，若有圖檔，請於網站資料夾內另開圖檔專屬資料夾( img 或 images )

---------------------------------------------------------------------------------------

[color=#660099]作業一的步驟與要求：[/color]
請自行以自己的內容，完成以下需求

1.於記事本上打入第一行你要打的字(中英文皆可，如：WELCOME MYWEB!!!!)

2.儲存為index.html於桌面，可直接將檔案拉入Firefox，觀看預覽效果

3.如果想[color=#006600]把字體變得又大又粗，可以用<標題1>的語法[/color]，於字的前後加上
<h1> 大標題 </h1>

大標題

儲存後，一樣於Firefox重整觀看效果

4.接下來，打入我們的[color=#006600]第二行文字，用以下p 語法來換行[/color]

<h1>嗨!大家好</h1> <p>welcome to my website!!!</p>

嗨!大家好

welcome to my website!!!

5.接著我們[color=#006600]另存新檔為: about.html，製作第二個頁面[/color]，新增如下文字:

<h1>嗨!大家好</h1> <p>welcome to my website!!! 想要再多學一點嗎?......</p>
接著加入超連結語法 a ，如下：

<h1>嗨!大家好</h1> <p>welcome to my website!!! <a>想要再多學一點嗎?......</a> </p>
拉入Firefox預覽效果

6.要出現[color=#006600]連結效果[/color]還要加入以下語法:

index.html
<h1>嗨!大家好</h1> <p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
about.html
<h1>嗨!大家好</h1> <p>welcome to my website!!! <a href="index.html">回到首頁</a> </p>
即可以呈現互相連結的效果
重整Firefox預覽效果

7.如果想要在標題字增加不同的視覺效果，如改變顏色
就要開始進行簡單的CSS設定
我們可以先直接[color=#006600]在h1中直接加入style的語法[/color]

如

<h1 style="color:red;">嗨!大家好</h1> <p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
重整預覽，index的標題則會出現紅色的字，可是about則還是黑色

8.接著我們要在html網頁架構上，讓他更加的完整
首先加入body的語法
補充：BODY之間則為主要語法所在，也是網頁的主要呈現部分。

<body> <h1 style="color:red;">嗨!大家好</h1> <p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p> </body>
重整之後，看起來沒甚麼不同

9.接著再把html語法的架構寫的更完整
把最外層的html包進去，再加入於body之上，設定頂部head語法的部分，如下
其中 [color=#006600]tilte語法呈現的視網頁標題的部分，會出現在瀏覽器上，並便於搜尋[/color]

<html> <head> <title>歡迎來到JinJin的網頁</title> </head> <body> <h1 style="color:red;">嗨!大家好</h1> <p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p> </body> </html>
10.接著我們開一個新的文件檔，將之命名為style.css
沒錯，CSS要登場了
甚麼是CSS呢?
[color=#669900]CSS 是 Cascading Style Sheets 的縮寫, 我們中文稱為「串接樣式表」
CSS 的特色:
(1)它能讓我們更精確的控制網頁版面的文字、背景、字型等網頁外觀及美化...
(2)它能只修正一個 CSS 文件，便可同時更新眾多的網頁版面外觀及格式。
(3)它可以使 html 的文件內碼更精簡，縮小檔案下載的速度。
(4)適用於各種作業平台。[/color]

(1).首先先在index.html的title底下打入如下語法(這比較難背，可以直接貼上):
<link rel="stylesheet" href="style.css" media="screen" />
(2).把index.html裡h1後的style設定剪下，預覽一下，紅色不見了
<html> <head> <title>歡迎來到JinJin的網頁</title> <link rel="stylesheet" href="style.css" media="screen" /> </head> <body> <h1>嗨!大家好</h1> <p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p> </body> </html>
(3).接著在新的style.css檔案裡鍵入

h1{ color:red; }
接著重整FireFox會看到甚麼效果呢?在about打入一樣的設定，結果如何呢?

11.接著，可以自己改變顏色，可參考:
網頁色碼選擇器: http://rhinejo.myweb.hinet.net/home/color/color-cord.html
Adobe Kuler: http://kuler.adobe.com/
調色盤-色票產生器: http://cowwu.myweb.hinet.net/note/js/Color.htm
MyChat 調色盤 http://mychat.to/pub_java/selcolor.htm

也可以改變字體大小，於style.css設定如下

h1{ color:#AC5C52; font-size:12px; }
重整FireFox看效果

12.接著於文字的外層包上一層div

[color=#669900]補充說明：
被DIV或SPAN標籤包起來的文字、圖片...任何東西，瀏覽器都會將之視作一個物件。

被DIV包住的網頁元件會變成一個「區塊物件」，也就是會「自成一塊」，旁邊的東西的會被擠到上一行或下一行去，自己獨立成一行。
而被SPAN包住的物件則可以和大夥和樂融融的擺在一起，不會斷行，也不會自成一塊。可以視不同的狀況，使用不同的標籤。[/color]

index.html
<html> <head> <title>歡迎來到JinJin的網頁</title> <link rel="stylesheet" href="style.css" media="screen" /> </head> <body> <div id="main"> <h1>嗨!大家好</h1> <p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p> </div> </body> </html>
style.css
h1{ color:#AC5C52; font-size:16px; } #main{ /*div id前面要加上#*/ width:500px; /*寬度*/ margin:0 auto; /*置中語法*/ background-color:#eee; /*背景色*/ padding:10px; /*div內部距離*/ } body{ background-color:#004EA0; /*body的背景色*/ margin:0px; /*貼緊頂部底部以及左右*/ }
重整會發現在新版的FireFox以及Chrome是正常的居中，IE卻無法置中

13.
關鍵在於DOCTYPE 的官方宣告
一定要放上去
可以從正常的網站鍵是原始碼，一般會有，直接貼上即可

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > <html xmlns="http ://www.w3.org/1999/xhtml" > <head> <title>歡迎來到JinJin的網頁</title> <link rel="stylesheet" href="style.css" media="screen" /> </head> <body> <div id="main"> <h1>嗨!大家好</h1> <p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p> </div> </body> </html> ==========================================================

補充:
標籤說明:網頁其實就是一堆標籤（所謂標籤就是指被<>包起來的語法）集合起來的，透過瀏覽器的消化整理，就便成了美侖美奐的網頁了。

簡單而言，通常一份完整的網頁包含了二個部份：標頭（HEAD）、文件主體（BODY）。也就是在上面所看到的以及。

---------------------------------------------------------------------------------------

[color=#CC0066]繳交作業的方式：[/color]

1.以FTP上傳至老師指定位置，每一個作業都會有一個相對應的資料夾
如：[color=#CC3300]第一個作業的資料夾為：hw01[/color]
每位同學請將自己的資料夾命名為：[color=#993300]hw01-學號[/color]
這個作業的網址則為:http://mepopedia.com/~web100a/hw01/hw01-100xxxxxxx

2.切勿擅改別人的資料檔案，若經發現則以零分計

---------------------------------------------------------------------------------------

這禮拜請同學按照以上做法，
以自己設定的文字內容，字體大小、文字、背景顏色等等
做html與css的設定

至少兩個可以互相連結的html檔，其中首頁命名為index.html，
以及一個命名為style.css的css樣式檔
存放在hw01-學號的資夾內

並請回覆本篇文章

1.作業網址

2.有無遇到的問題，製作作業的時間

完全達成要求即有100分

[站務公告] 已啟用帳號名單及 Email 填寫錯誤帳號 (最後更新2011/10/5)) (no replies)

mepoadm — Wed, 07 Sep 2011 15:48:25 +0800

下列帳號 Email 填寫錯誤，煩請重新註冊(可以用同樣帳號註冊)：

1005445001
a22176635
day_1212
deborah@yahoo.com.tw
yuwei_chen
素玉
迪西o_o
戴妤芳012
林佩誼

下列帳號原未啟用，現已手動啟用（原則上除了上述帳號外，其餘已全部啟用）：

1001445045
1001445107
1001445026
1005445047
Jane Lin
a22176635
AgiStr
Alley
Aria
Carol Chen
Cesyadvanny
cy66868
day_12
day_1992
deborah
jack810926
jacky13601
john0522
LIN AN
memotw
people3016
ruby82814
shuyipeng
YanLiou
yaya0127
小芝
林瑞瑩
廖若琪
怡華
林哲宇
陳小飛
薇珺 :)
骸蒼Aoi
徐佑東
錢琪
龔琇瑋

網站管理員 2011.09.22

[第一週] 課程規範與網站基本概念 (58 replies)

JinJin — Wed, 19 Oct 2011 00:48:47 +0800

本週講義

1.網頁設計?課程規範與課程目標

2.網站基本概念

3.Dreamweaver 環境介紹

4.網站的概念與開發流程

以上PPT講義請至學生系統下載
[url=http://192.192.78.86/student_portal/]http://192.192.78.86/student_portal/[/url]

==================================================================

第一週須完成的任務：

一、安裝Dreamweaver軟體

二、開始閱讀關於html、css相關書籍，建立起基本概念 (請多多利用圖書館或網路資源)

三、填寫期初安置性評量問卷，讓老師了解大家。
https://docs.google.com/a/mepopedia.com/spreadsheet/viewform?formkey=dDRkZnlLbEZrTGN1dmd6djl5dGZiSlE6MQ

四、請進入老師教學網站註冊
http://mepopedia.com/forum/register.php?851
註冊完畢後，請至右上角『設定』→『個人資訊（編輯）』至少填寫學號
每位同學都必須註冊，有任何註冊問題請隨時反應。可以寄信到 mepo@mepopedia.com 申請開通帳號，或於課堂上留下帳號及 email 由老師統一申請開通。

五、安裝目前主流的三個瀏覽器：IE、Google Chrome、FireFox至少三種瀏覽器。

Internet Explorer (IE)
特色：是目前全球使用人口最多的瀏覽器，因為是Microsoft開發的軟體，因為有許多先天的優勢，也因為最多人使用，所以大部分的網站、論壇甚至是一些php或java程式編碼都採用IE可以普遍認得的編碼。在其他不同瀏覽器上觀看這些網頁的時候，有可能發生網頁顯示不正常或者部分功能無法使用的情況。現階段而言，聰明的網頁編輯人員都會在製作網站的時候，根據這三種瀏覽器作為測試的平台，基本上以符合三種瀏覽器使用為原則。。
缺點：速度慢、網頁編碼方式不符合html發佈的官方寫法，因此較容易出現網頁顯示異常。
下載 Internet Explorer
http://windows.microsoft.com/zh-TW/internet-explorer/products/ie/home

Google Chrome特色：
快速啟動?Google Chrome 瞬間即可啟動。
迅速載入?Google Chrome 的網頁載入速度飛快。
高速搜尋?直接從網址列搜尋網頁。
下載Google Chrome
http://www.google.com/chrome?hl=zh-TW

Firefox特色：
可以根據使用者的習慣與需要按裝Firefox套件，其功能可以加強瀏覽器實用性與安全性。
假使你正在網站站上發文，一不小心按錯上一頁或者回首頁的按鍵，分頁功能可以讓你救回辛苦打的網頁。
多元的套件雖然可以補足你想要的功能，不過套件安裝太多也會影響其使用的效能。
下載FireFox
http://moztw.org/

六、瀏覽網站時可隨時觀察或記錄不同瀏覽器閱讀時的差異。

七、多看多觀摩美觀且優良網站的設計，並隨時記錄優良網站的網址，以供後續設計的參考。

八、請在下次上課前，註冊完畢，填妥問卷，並回答以下問題(回答時請註明班級及學號)：

1.是否已安裝好軟體及瀏覽器，有遇到甚麼問題嗎? (請試著安裝完之後再回答，不要還沒安裝就開始填寫，謝謝)

2.請將本週瀏覽的不錯的及值得推薦的網站，網站名稱及網址列出
範例：
(1) 網站名稱：our great adventure 音樂網站
網址：http://www.ourgreatadventure.co.uk/

(2) 網站名稱：Hollister Co. - Shop Official Site
網址：https://www.hollisterco.com/webapp/wcs/stores/servlet/HomePage?storeId=18157&catalogId=10201&langId=-1

[color=#CC0000]未達要求的同學，請按編輯修改[/color]

JinJin 的視覺設計專區 - 100-1《中國》北視傳一A-網頁設計

Re: [期中作業 ] 以單欄為主的網站設計 (no replies)

[作業08] 雙欄垂直導覽列製作 (43 replies)

1. 二、繳交作業方式

[期末作業] 以雙欄為主的網站設計 (65 replies)

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

2. 一、製作說明：

3. 作業設計重點

4. 二、評分標準與製作檢核

5. 三、繳交作業方式

6. 回覆說明

7. 四、期末作業進度參考

[作業07] 以Float：浮動，製作雙欄網頁 (41 replies)

8. 一、製作步驟

9. 二、繳交作業方式

[作業06] 表格的製作美化與資料整理 (39 replies)

10. 一、製作步驟

11. 二、繳交作業方式

[作業05] 網頁導覽列、繞圖排文與推文按鈕的應用 (52 replies)

12. 一、製作步驟

13. 二、繳交作業方式

[系統公告] FTP 上傳單一檔案大小上限為 5MB (no replies)

[講義] 網頁文字連結的CSS設定 (no replies)

14. 網頁文字連結的CSS設定步驟

1. 1.

2. 2.

3. 3.

4. 4.

5. 5.

6. 6.

[講義] 圖檔尺寸調整《圖片請盡量縮小至100K以下》 (no replies)

15. 檢視與修改圖檔大小的步驟：

1. 1.準備好圖片之後，請開啟資料夾檢查檔案大小

2. 2.若超過100K以上檔案，請以Photoshop開啟

3. 3.檢視目前檔案檔格式、大小及速率

4. 4.以其他格式或降低色彩數目，來調整圖片檔案大小

[網頁] 常見問題之注意事項 (no replies)

16. 同學常見問題之注意事項

[作業04] 網頁導覽列的製作 (40 replies)

[color=#990000][作業04] 網頁導覽列的製作[/color]

17. [color=#663300]一、製作說明：[/color]

18. [color=#663300]二、繳交作業方式[/color]

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

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

19. 一、製作說明：

20. 二、評分標準與製作檢核

21. 三、繳交作業方式

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

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

[作業02] 利用Div標籤與CSS建立基本網頁版型--以單純色塊為例 (49 replies)

[color=#990000][作業02] 利用Div標籤與CSS建立基本網頁版型--以單純色塊為例[/color]

24. [color=#663300]一、製作說明：[/color]

25. [color=#663300]二、繳交作業方式[/color]

[作業03] 利用Div標籤與CSS建立基本網頁版型--Dreamweaver圖片篇 (46 replies)

[color=#990000][作業03] 利用Div標籤與CSS建立基本網頁版型--Dreamweaver圖片篇[/color]

26. [color=#663300]一、製作說明：[/color]

27. [color=#663300]二、繳交作業方式[/color]

[作業01] 以HTML與CSS完成第一個網頁 (55 replies)

大標題

嗨!大家好

[站務公告] 已啟用帳號名單及 Email 填寫錯誤帳號 (最後更新2011/10/5)) (no replies)

[第一週] 課程規範與網站基本概念 (58 replies)