JinJin 的視覺設計專區 - 100-2《中國》竹進視傳一A-網頁設計

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

JinJin — Fri, 06 Jul 2012 19:41:08 +0800

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

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

1. 一、製作說明：

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

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

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

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

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

6.製作完成上傳至FTP

2. 作業設計重點

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

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

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

4. 三、繳交作業方式

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

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

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

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

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

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

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

5. 回覆說明

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

[hr]

[color=#0066CC]前置作業[/color]
(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]

◎相關網站列表與分析：

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

第十六週06/08 圖片製作，內容建構
第十七週06/15 完成與上傳，檢討與修正
第十八週06/22 成績確認與最後修改

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

[遠距教學講義03] 以Float：浮動，製作雙欄網頁 (雙欄Float：浮動、Table：表格、錨點、垂直導覽列) (2 replies)

JinJin — Thu, 14 Jun 2012 15:50:32 +0800

1. 一、製作說明：
2. 作業設計重點
3. 二、評分標準與製作檢核
4. 三、繳交作業方式
5. 回覆說明
6. 四、期末作業進度參考
7. 雙欄網頁概述
8. 雙欄網頁，float：浮動屬性做法概述
8.1 左側欄位：固定寬度，靠左浮動；右側欄位：設定左邊的margin(左邊間距)，不設定浮動
8.2 左側欄位：固定寬度，靠左浮動；右側欄位：設定靠左浮動，寬度可以設定也可以不設定，但寬度不可大於總寬度減左側欄位的寬度，建議更小一點，以免造成欄位崩壞的問題
8.3 左側欄位：固定寬度，靠左浮動；右側欄位：設定靠右浮動，寬度可以設定也可以不設定，但寬度不可大於總寬度減左側欄位的寬度，建議更小一點，以免造成欄位崩壞的問題
9. 本單元雙欄網頁範例，float：浮動屬性做法概述
10. 雙欄網頁，float：浮動屬性做法步驟
10.1 在#content內，加入兩個DIV：#content-L：靠左邊，#content-R：則在右邊
10.2 在CSS新增插入#content-L?以及#content-R (可手動加入，也可以Dreamweaver指令插入
10.3 新增ID CSS，命名為content-L
10.4 Float浮動設定Left，靠左對齊；寬度設為?180px
10.5 設定#content-L，Padding:6px
10.6 新增ID CSS，命名為content-R
10.7 Margin：間距，設定180px (#content-L的寬度)
10.8 #content-R?的字型設定
10.9 #content-R?背景設為白色
10.10 #content-R?，Padding內距?上右下設定為30px，使視覺效果更舒服
10.11 #content?設定底圖，會顯現在#content-L，(因#content-R設為白色右邊蓋住底圖)
10.12 於#content-L?插入影像
10.13 於#content-L，貼上記事本的清單列文字，做為左列的清單按鈕文字
10.14 選取，設成清單項目
10.15 Back回上行?Enter段落?成為清單li
10.16 將ul的id命名為L-list (可自行命名)新增ID CSS命名為L-list
10.17 新增ID CSS命名為L-list
10.18 #L-list?的字型設定
10.19 將#L-list,清單樣式設為none(無樣式)
10.20 將#L-list,Margin、Padding 皆設為0，清除清單預設距離
10.21 雙欄式網頁及左側的L-list,清單樣式大致設定完成
11. 表格設定的步驟
11.1 於#content-R插入表格
11.2 插入27列1欄，無框線、100%的表格(隨著DIV寬度調整表格寬度)，若設為100% ,IE6會有表格往下的問題
11.3 將資料分別整理至表格之中
11.4 將表格自行命名為monent-table
11.5 在程式碼欄，將所有表格標題，由改為
11.6 在table下插入表格大標題
11.7 新增.monent-table tr th 標題CSS樣式
11.8 設定表格標題字型、設定表格標題底色
11.9 新增.monent-table tr td 表格內文CSS樣式
11.10 .monent-table tr td 表格內文，Padding內距與邊框底線的設定
11.11 新增.monent-table caption 表格大標題CSS樣式
11.12 .monent-table tr td 表格內文，底色與邊框底線的設定
12. 錨點連結設定的步驟
12.1 在標題欄前，插入→命名錨點，並自行命名
12.2 於每個標題前，分別命名錨點
12.3 在header標題欄，插入→命名錨點，並自行命名為top
12.4 分別選取左側清單，設定錨點超連結，錨點超連結前為#，如#m-01
12.5 分別設定完成
12.6 插入回前一動作#top 的連結│BACK│
12.7 │BACK│設置靠右對齊
13. 左側清單列按鈕設定的步驟
13.1 新增 #L-list li a 左側清單超連結CSS設定
13.2 設定#L-list li a ，字型及底部邊框的設定
13.3 設定#L-list li a ，的區塊為block
13.4 新增 #L-list li a:hover 左側清單超連結，滑鼠滑入的CSS設定
13.5 設定#L-list li a:hover ，字型、底色、底部邊框的設定
13.6 設定後，滑鼠移過的效果
13.7 設定#L-list li a:hover ，加入底圖的設定
13.8 設定#L-list li a:hover 高度
13.9 設定後，滑鼠移過的底圖效果

遠距教學的影音原始檔
放在學校 ican系統→教材區→推薦網站區
要記得去下載喔!
大家試試看是否可順利下載
若有問題請回報

[hr]
本週請大家一樣將期中作業往下繼續製作
把至少其中一頁一講義做法製作成雙欄
先同樣回覆在作業06即可
後續的作業下次上課會再往下講
請大家回家務必觀看影音及講義
並製作練習
[hr]

[hr]
http://youtu.be/VG1aWLHNh7g

[hr]

7. 雙欄網頁概述

本單元範例網頁：http://mepopedia.com/~jinjin/web/hw07/

多欄式的網頁配置，可以透過float：浮動屬性或position：定位屬性來處理。這兩種方法對版塊造成的影響也相當大。

float：浮動屬性，使區塊浮動的做法，優點是可以依照內容改變區塊的高度，缺點是較容易引起「欄位崩壞」等重大版面顯示的問題。

position：定位屬性，執行絕對配置的做法，雖沒有往下方調整的彈性，但因未完全固定在特地位置上，則容易維持版面的外觀。

[hr]

8. 雙欄網頁，float：浮動屬性做法概述

本單元則要以要float：浮動屬性的做法，來講解製作多欄(雙欄)網頁的方法。

以float：浮動屬性製作多欄網頁的做法有很多種，分別敘述如下：

1. 左側欄位：固定寬度，靠左浮動；右側欄位：設定左邊的margin(左邊間距)，不設定浮動

2. 左側欄位：固定寬度，靠左浮動；右側欄位：設定靠左浮動，寬度可以設定也可以不設定，但寬度不可大於總寬度減左側欄位的寬度，建議更小一點，以免造成欄位崩壞的問題

3. 左側欄位：固定寬度，靠左浮動；右側欄位：設定靠右浮動，寬度可以設定也可以不設定，但寬度不可大於總寬度減左側欄位的寬度，建議更小一點，以免造成欄位崩壞的問題

9. 本單元雙欄網頁範例，float：浮動屬性做法概述

本範例是以先前的範例#content內，加入兩個DIV：#content-L：靠左邊，#content-R：則在右邊，如圖所示：

HTML的架構語法如下：

<div id="wrapper"> <div id="header"></div> <ul id="button"></ul> <div id="content"> <div id="content-L"></div> <div id="content-R"></div> </div> </div>

CSS的設定如下：

#content-L{ width: 180px; /*#content-L的寬度*/ float: left; /*#content-L設定靠左邊浮動*/ } #content-R{ background-color: #FFF; /*設定底色為白色*/ margin-left: 180px; /*間距設定為180px，(#content-L的寬度)*/ } #content{ background-image: url(images/left-bg.gif); /*設定背景圖片，會顯示在#content-L*/ } #footer{ clear:both; /*清除浮動設定*/ }
[hr]

10. 雙欄網頁，float：浮動屬性做法步驟

以下則為製作雙欄浮動的圖解步驟：

1. 在#content內，加入兩個DIV：#content-L：靠左邊，#content-R：則在右邊

[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-001.jpg[/IMG]

2. 在CSS新增插入#content-L?以及#content-R (可手動加入，也可以Dreamweaver指令插入

[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-03.jpg[/IMG]

3. 新增ID CSS，命名為content-L

[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-04.jpg[/IMG]

4. Float浮動設定Left，靠左對齊；寬度設為?180px

[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-05.jpg[/IMG]

[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-06.jpg[/IMG]

5. 設定#content-L，Padding:6px

[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-24.jpg[/IMG]

6. 新增ID CSS，命名為content-R

[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-07.jpg[/IMG]

7. Margin：間距，設定180px (#content-L的寬度)

[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-08.jpg[/IMG]

8. #content-R?的字型設定

[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-09.jpg[/IMG]

9. #content-R?背景設為白色

[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-10.jpg[/IMG]

10. #content-R?，Padding內距?上右下設定為30px，使視覺效果更舒服

[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-11.jpg[/IMG]

[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-12.jpg[/IMG]

[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-13.jpg[/IMG]

[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-10.jpg[/IMG]

11. #content?設定底圖，會顯現在#content-L，(因#content-R設為白色右邊蓋住底圖)

[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-15.jpg[/IMG]

[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-16.jpg[/IMG]

12. 於#content-L?插入影像

[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-17.jpg[/IMG]

13. 於#content-L，貼上記事本的清單列文字，做為左列的清單按鈕文字

[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-18.jpg[/IMG]

14. 選取，設成清單項目

[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-19.jpg[/IMG]

15. Back回上行?Enter段落?成為清單li

[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-20.jpg[/IMG]

16. 將ul的id命名為L-list (可自行命名)新增ID CSS命名為L-list

[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-21.jpg[/IMG]

17. 新增ID CSS命名為L-list

[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-22.jpg[/IMG]

18. #L-list?的字型設定

[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-23.jpg[/IMG]

19. 將#L-list,清單樣式設為none(無樣式)

[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-27.jpg[/IMG]

20. 將#L-list,Margin、Padding 皆設為0，清除清單預設距離

[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-25.jpg[/IMG]

[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-26.jpg[/IMG]

21. 雙欄式網頁及左側的L-list,清單樣式大致設定完成

[hr]

11. 表格設定的步驟

1. 於#content-R插入表格

[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-28.jpg[/IMG]

2. 插入27列1欄，無框線、100%的表格(隨著DIV寬度調整表格寬度)，若設為100% ,IE6會有表格往下的問題

[color=#CC0066]此處改為固定寬度(約小於 650px，視整體寬度而定)[/color]

[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-29.jpg[/IMG]

3. 將資料分別整理至表格之中

[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-30.jpg[/IMG]

4. 將表格自行命名為monent-table

[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-31.jpg[/IMG]

5. 在程式碼欄，將所有表格標題，由改為

[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-32.jpg[/IMG]

6. 在table下插入表格大標題

[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-33.jpg[/IMG]

[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-34.jpg[/IMG]

7. 新增.monent-table tr th 標題CSS樣式

[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-35.jpg[/IMG]

[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-36.jpg[/IMG]

8. 設定表格標題字型、設定表格標題底色

[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-37.jpg[/IMG]

[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-38.jpg[/IMG]

[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-39.jpg[/IMG]

9. 新增.monent-table tr td 表格內文CSS樣式

[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-40.jpg[/IMG]

10. .monent-table tr td 表格內文，Padding內距與邊框底線的設定

[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-41.jpg[/IMG]

[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-42.jpg[/IMG]

[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-43.jpg[/IMG]

11. 新增.monent-table caption 表格大標題CSS樣式

[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-44.jpg[/IMG]

12. .monent-table tr td 表格內文，底色與邊框底線的設定

[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-45.jpg[/IMG]

[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-46.jpg[/IMG]

[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-47.jpg[/IMG]

[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-48.jpg[/IMG]

[hr]

12. 錨點連結設定的步驟

1. 在標題欄前，插入→命名錨點，並自行命名

[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-49.jpg[/IMG]

[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-50.jpg[/IMG]

2. 於每個標題前，分別命名錨點

[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-51.jpg[/IMG]

3. 在header標題欄，插入→命名錨點，並自行命名為top

[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-52.jpg[/IMG]

4. 分別選取左側清單，設定錨點超連結，錨點超連結前為#，如#m-01

[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-53.jpg[/IMG]

5. 分別設定完成

[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-54.jpg[/IMG]

6. 插入回前一動作#top 的連結│BACK│

[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-55.jpg[/IMG]

7. │BACK│設置靠右對齊

[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-56.jpg[/IMG]

[hr]

13. 左側清單列按鈕設定的步驟

1. 新增 #L-list li a 左側清單超連結CSS設定

[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-57.jpg[/IMG]

2. 設定#L-list li a ，字型及底部邊框的設定

[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-58.jpg[/IMG]

[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-59.jpg[/IMG]

3. 設定#L-list li a ，的區塊為block

[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-60.jpg[/IMG]

[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-61.jpg[/IMG]

4. 新增 #L-list li a:hover 左側清單超連結，滑鼠滑入的CSS設定

[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-62.jpg[/IMG]

5. 設定#L-list li a:hover ，字型、底色、底部邊框的設定

[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-63.jpg[/IMG]

[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-64.jpg[/IMG]

[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-65.jpg[/IMG]

6. 設定後，滑鼠移過的效果

[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-66.jpg[/IMG]

7. 設定#L-list li a:hover ，加入底圖的設定

[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-67.jpg[/IMG]

8. 設定#L-list li a:hover 高度

[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-68.jpg[/IMG]

9. 設定後，滑鼠移過的底圖效果

[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-69.jpg[/IMG]

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

JinJin — Sun, 27 May 2012 02:23:20 +0800

1. 一、製作說明：
2. 作業設計重點
3. 二、評分標準與製作檢核
4. 三、繳交作業方式
5. 回覆說明
6. 四、期末作業進度參考
7. 雙欄網頁概述
8. 雙欄網頁，float：浮動屬性做法概述
8.1 左側欄位：固定寬度，靠左浮動；右側欄位：設定左邊的margin(左邊間距)，不設定浮動
8.2 左側欄位：固定寬度，靠左浮動；右側欄位：設定靠左浮動，寬度可以設定也可以不設定，但寬度不可大於總寬度減左側欄位的寬度，建議更小一點，以免造成欄位崩壞的問題
8.3 左側欄位：固定寬度，靠左浮動；右側欄位：設定靠右浮動，寬度可以設定也可以不設定，但寬度不可大於總寬度減左側欄位的寬度，建議更小一點，以免造成欄位崩壞的問題
9. 本單元雙欄網頁範例，float：浮動屬性做法概述
10. 雙欄網頁，float：浮動屬性做法步驟
10.1 在#content內，加入兩個DIV：#content-L：靠左邊，#content-R：則在右邊
10.2 在CSS新增插入#content-L?以及#content-R (可手動加入，也可以Dreamweaver指令插入
10.3 新增ID CSS，命名為content-L
10.4 Float浮動設定Left，靠左對齊；寬度設為?180px
10.5 設定#content-L，Padding:6px
10.6 新增ID CSS，命名為content-R
10.7 Margin：間距，設定180px (#content-L的寬度)
10.8 #content-R?的字型設定
10.9 #content-R?背景設為白色
10.10 #content-R?，Padding內距?上右下設定為30px，使視覺效果更舒服
10.11 #content?設定底圖，會顯現在#content-L，(因#content-R設為白色右邊蓋住底圖)
10.12 於#content-L?插入影像
10.13 於#content-L，貼上記事本的清單列文字，做為左列的清單按鈕文字
10.14 選取，設成清單項目
10.15 Back回上行?Enter段落?成為清單li
10.16 將ul的id命名為L-list (可自行命名)新增ID CSS命名為L-list
10.17 新增ID CSS命名為L-list
10.18 #L-list?的字型設定
10.19 將#L-list,清單樣式設為none(無樣式)
10.20 將#L-list,Margin、Padding 皆設為0，清除清單預設距離
10.21 雙欄式網頁及左側的L-list,清單樣式大致設定完成
11. 表格設定的步驟
11.1 於#content-R插入表格
11.2 插入27列1欄，無框線、100%的表格(隨著DIV寬度調整表格寬度)，若設為100% ,IE6會有表格往下的問題
11.3 將資料分別整理至表格之中
11.4 將表格自行命名為monent-table
11.5 在程式碼欄，將所有表格標題，由改為
11.6 在table下插入表格大標題
11.7 新增.monent-table tr th 標題CSS樣式
11.8 設定表格標題字型、設定表格標題底色
11.9 新增.monent-table tr td 表格內文CSS樣式
11.10 .monent-table tr td 表格內文，Padding內距與邊框底線的設定
11.11 新增.monent-table caption 表格大標題CSS樣式
11.12 .monent-table tr td 表格內文，底色與邊框底線的設定
12. 錨點連結設定的步驟
12.1 在標題欄前，插入→命名錨點，並自行命名
12.2 於每個標題前，分別命名錨點
12.3 在header標題欄，插入→命名錨點，並自行命名為top
12.4 分別選取左側清單，設定錨點超連結，錨點超連結前為#，如#m-01
12.5 分別設定完成
12.6 插入回前一動作#top 的連結│BACK│
12.7 │BACK│設置靠右對齊
13. 左側清單列按鈕設定的步驟
13.1 新增 #L-list li a 左側清單超連結CSS設定
13.2 設定#L-list li a ，字型及底部邊框的設定
13.3 設定#L-list li a ，的區塊為block
13.4 新增 #L-list li a:hover 左側清單超連結，滑鼠滑入的CSS設定
13.5 設定#L-list li a:hover ，字型、底色、底部邊框的設定
13.6 設定後，滑鼠移過的效果
13.7 設定#L-list li a:hover ，加入底圖的設定
13.8 設定#L-list li a:hover 高度
13.9 設定後，滑鼠移過的底圖效果
14. 二、繳交作業方式

請參考 [url=http://mepopedia.com/forum/read.php?976,22438][遠距教學講義] 表格的製作[/url]

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

的步驟製作

以期中作業主題延續，製作其中一頁，以表格資料整理為主的頁面

[hr]
請每位同學依步驟完成本單元後，上傳至FTP

本次作業的重點在於：

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

[hr]

14. 二、繳交作業方式

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

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

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

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

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

[color=#CC0000]也可以持續期中作業的網址直接上傳於同一資料夾，於網址中備註即可[/color]

2.上傳至FTP

3.回覆本篇文章

(1).作業網址：

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

請於下次上課前(6/8)製作完成

[遠距教學講義] 表格的製作 (no replies)

JinJin — Fri, 18 May 2012 07:13:42 +0800

1. 一、製作說明：
2. 作業設計重點
3. 二、評分標準與製作檢核
4. 三、繳交作業方式
5. 回覆說明
6. 四、期末作業進度參考
7. 雙欄網頁概述
8. 雙欄網頁，float：浮動屬性做法概述
8.1 左側欄位：固定寬度，靠左浮動；右側欄位：設定左邊的margin(左邊間距)，不設定浮動
8.2 左側欄位：固定寬度，靠左浮動；右側欄位：設定靠左浮動，寬度可以設定也可以不設定，但寬度不可大於總寬度減左側欄位的寬度，建議更小一點，以免造成欄位崩壞的問題
8.3 左側欄位：固定寬度，靠左浮動；右側欄位：設定靠右浮動，寬度可以設定也可以不設定，但寬度不可大於總寬度減左側欄位的寬度，建議更小一點，以免造成欄位崩壞的問題
9. 本單元雙欄網頁範例，float：浮動屬性做法概述
10. 雙欄網頁，float：浮動屬性做法步驟
10.1 在#content內，加入兩個DIV：#content-L：靠左邊，#content-R：則在右邊
10.2 在CSS新增插入#content-L?以及#content-R (可手動加入，也可以Dreamweaver指令插入
10.3 新增ID CSS，命名為content-L
10.4 Float浮動設定Left，靠左對齊；寬度設為?180px
10.5 設定#content-L，Padding:6px
10.6 新增ID CSS，命名為content-R
10.7 Margin：間距，設定180px (#content-L的寬度)
10.8 #content-R?的字型設定
10.9 #content-R?背景設為白色
10.10 #content-R?，Padding內距?上右下設定為30px，使視覺效果更舒服
10.11 #content?設定底圖，會顯現在#content-L，(因#content-R設為白色右邊蓋住底圖)
10.12 於#content-L?插入影像
10.13 於#content-L，貼上記事本的清單列文字，做為左列的清單按鈕文字
10.14 選取，設成清單項目
10.15 Back回上行?Enter段落?成為清單li
10.16 將ul的id命名為L-list (可自行命名)新增ID CSS命名為L-list
10.17 新增ID CSS命名為L-list
10.18 #L-list?的字型設定
10.19 將#L-list,清單樣式設為none(無樣式)
10.20 將#L-list,Margin、Padding 皆設為0，清除清單預設距離
10.21 雙欄式網頁及左側的L-list,清單樣式大致設定完成
11. 表格設定的步驟
11.1 於#content-R插入表格
11.2 插入27列1欄，無框線、100%的表格(隨著DIV寬度調整表格寬度)，若設為100% ,IE6會有表格往下的問題
11.3 將資料分別整理至表格之中
11.4 將表格自行命名為monent-table
11.5 在程式碼欄，將所有表格標題，由改為
11.6 在table下插入表格大標題
11.7 新增.monent-table tr th 標題CSS樣式
11.8 設定表格標題字型、設定表格標題底色
11.9 新增.monent-table tr td 表格內文CSS樣式
11.10 .monent-table tr td 表格內文，Padding內距與邊框底線的設定
11.11 新增.monent-table caption 表格大標題CSS樣式
11.12 .monent-table tr td 表格內文，底色與邊框底線的設定
12. 錨點連結設定的步驟
12.1 在標題欄前，插入→命名錨點，並自行命名
12.2 於每個標題前，分別命名錨點
12.3 在header標題欄，插入→命名錨點，並自行命名為top
12.4 分別選取左側清單，設定錨點超連結，錨點超連結前為#，如#m-01
12.5 分別設定完成
12.6 插入回前一動作#top 的連結│BACK│
12.7 │BACK│設置靠右對齊
13. 左側清單列按鈕設定的步驟
13.1 新增 #L-list li a 左側清單超連結CSS設定
13.2 設定#L-list li a ，字型及底部邊框的設定
13.3 設定#L-list li a ，的區塊為block
13.4 新增 #L-list li a:hover 左側清單超連結，滑鼠滑入的CSS設定
13.5 設定#L-list li a:hover ，字型、底色、底部邊框的設定
13.6 設定後，滑鼠移過的效果
13.7 設定#L-list li a:hover ，加入底圖的設定
13.8 設定#L-list li a:hover 高度
13.9 設定後，滑鼠移過的底圖效果
14. 二、繳交作業方式
15. 表格的概述
16. 表格中的標記
17. 表格的邊框
17.1 設定儲存格的邊框

遠距教學的表格製作影音原始檔
共三個檔案
放在學校 ican系統→教材區
這次前兩個檔案是直接上傳到ican
下載會有下載紀錄，請大家下載

但因空間不足還是放到推薦網站區
要記得去下載喔!
大家試試看是否可順利下載
若有問題請回報

[hr]
本講義的範例
http://mepopedia.com/~jinjin/web/hw06-ex/

[hr]

在進入表格之前，先複習一下基本的設定，大家可以下載練習檔來練習，希望可以透過影片讓大家對於CSS基本的設定更佳的熟練，也先把基本的部分做好設定。

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

[hr]

15. 表格的概述

表格是網頁中常出現的元素，在傳統的網頁設計中表格除了有整理資料的功能外，還常被使用為整個頁面排版的工具，但是在CSS逐步展開WEB標準設定後，表格逐漸不再擔任重要的版面配置任務，而以DIV取代，但表格仍然在整理資料上，扮演重要的角色，本單元也以CSS搭配表格，講述如何以表格整理資料，並同時展現美感的部分，包含：色彩、標題、邊框、背景等。

16. 表格中的標記

最常用的與表格相關的標記為、、

。

：定義整個表格。
：定義一列

：定義一個儲存格

如以下是三列兩欄表格的HTML語法：

另外為了使CSS可以更活用的設計表格樣式，還有兩個常用的標記：

：定義表格的大標題，該標記可以出現在
之間的任意位置，不過通常出現在第一排標記之後。

和改為
11.6 在table下插入表格大標題
11.7 新增.monent-table tr th 標題CSS樣式
11.8 設定表格標題字型、設定表格標題底色
11.9 新增.monent-table tr td 表格內文CSS樣式
11.10 .monent-table tr td 表格內文，Padding內距與邊框底線的設定
11.11 新增.monent-table caption 表格大標題CSS樣式
11.12 .monent-table tr td 表格內文，底色與邊框底線的設定
12. 錨點連結設定的步驟
12.1 在標題欄前，插入→命名錨點，並自行命名
12.2 於每個標題前，分別命名錨點
12.3 在header標題欄，插入→命名錨點，並自行命名為top
12.4 分別選取左側清單，設定錨點超連結，錨點超連結前為#，如#m-01
12.5 分別設定完成
12.6 插入回前一動作#top 的連結│BACK│
12.7 │BACK│設置靠右對齊
13. 左側清單列按鈕設定的步驟
13.1 新增 #L-list li a 左側清單超連結CSS設定
13.2 設定#L-list li a ，字型及底部邊框的設定
13.3 設定#L-list li a ，的區塊為block
13.4 新增 #L-list li a:hover 左側清單超連結，滑鼠滑入的CSS設定
13.5 設定#L-list li a:hover ，字型、底色、底部邊框的設定
13.6 設定後，滑鼠移過的效果
13.7 設定#L-list li a:hover ，加入底圖的設定
13.8 設定#L-list li a:hover 高度
13.9 設定後，滑鼠移過的底圖效果
14. 二、繳交作業方式
15. 表格的概述
16. 表格中的標記
17. 表格的邊框
17.1 設定儲存格的邊框
18. 一、製作步驟
19. 二、繳交作業方式請參考

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

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

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

18. 一、製作步驟

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 ）繞圖排文
（2 ）推文設定
（3 ）利用CSS，做更細緻的內文設定
（4 ）如何利用圖片與文字的編排搭配出有質感的網頁。[/color]

[hr]

19. 二、繳交作業方式

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

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

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

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

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

2.上傳至FTP

3.回覆本篇文章

(1).作業網址：

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

參考範例
http:/mepopedia.com/forum/read.php?851,17879
http://mepopedia.com/forum/read.php?855,17880

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

JinJin — Fri, 11 May 2012 16:55:04 +0800

1. 一、製作說明：
2. 作業設計重點
3. 二、評分標準與製作檢核
4. 三、繳交作業方式
5. 回覆說明
6. 四、期末作業進度參考
7. 雙欄網頁概述
8. 雙欄網頁，float：浮動屬性做法概述
8.1 左側欄位：固定寬度，靠左浮動；右側欄位：設定左邊的margin(左邊間距)，不設定浮動
8.2 左側欄位：固定寬度，靠左浮動；右側欄位：設定靠左浮動，寬度可以設定也可以不設定，但寬度不可大於總寬度減左側欄位的寬度，建議更小一點，以免造成欄位崩壞的問題
8.3 左側欄位：固定寬度，靠左浮動；右側欄位：設定靠右浮動，寬度可以設定也可以不設定，但寬度不可大於總寬度減左側欄位的寬度，建議更小一點，以免造成欄位崩壞的問題
9. 本單元雙欄網頁範例，float：浮動屬性做法概述
10. 雙欄網頁，float：浮動屬性做法步驟
10.1 在#content內，加入兩個DIV：#content-L：靠左邊，#content-R：則在右邊
10.2 在CSS新增插入#content-L?以及#content-R (可手動加入，也可以Dreamweaver指令插入
10.3 新增ID CSS，命名為content-L
10.4 Float浮動設定Left，靠左對齊；寬度設為?180px
10.5 設定#content-L，Padding:6px
10.6 新增ID CSS，命名為content-R
10.7 Margin：間距，設定180px (#content-L的寬度)
10.8 #content-R?的字型設定
10.9 #content-R?背景設為白色
10.10 #content-R?，Padding內距?上右下設定為30px，使視覺效果更舒服
10.11 #content?設定底圖，會顯現在#content-L，(因#content-R設為白色右邊蓋住底圖)
10.12 於#content-L?插入影像
10.13 於#content-L，貼上記事本的清單列文字，做為左列的清單按鈕文字
10.14 選取，設成清單項目
10.15 Back回上行?Enter段落?成為清單li
10.16 將ul的id命名為L-list (可自行命名)新增ID CSS命名為L-list
10.17 新增ID CSS命名為L-list
10.18 #L-list?的字型設定
10.19 將#L-list,清單樣式設為none(無樣式)
10.20 將#L-list,Margin、Padding 皆設為0，清除清單預設距離
10.21 雙欄式網頁及左側的L-list,清單樣式大致設定完成
11. 表格設定的步驟
11.1 於#content-R插入表格
11.2 插入27列1欄，無框線、100%的表格(隨著DIV寬度調整表格寬度)，若設為100% ,IE6會有表格往下的問題
11.3 將資料分別整理至表格之中
11.4 將表格自行命名為monent-table
11.5 在程式碼欄，將所有表格標題，由
改為
11.6 在table下插入表格大標題
11.7 新增.monent-table tr th 標題CSS樣式
11.8 設定表格標題字型、設定表格標題底色
11.9 新增.monent-table tr td 表格內文CSS樣式
11.10 .monent-table tr td 表格內文，Padding內距與邊框底線的設定
11.11 新增.monent-table caption 表格大標題CSS樣式
11.12 .monent-table tr td 表格內文，底色與邊框底線的設定
12. 錨點連結設定的步驟
12.1 在標題欄前，插入→命名錨點，並自行命名
12.2 於每個標題前，分別命名錨點
12.3 在header標題欄，插入→命名錨點，並自行命名為top
12.4 分別選取左側清單，設定錨點超連結，錨點超連結前為#，如#m-01
12.5 分別設定完成
12.6 插入回前一動作#top 的連結│BACK│
12.7 │BACK│設置靠右對齊
13. 左側清單列按鈕設定的步驟
13.1 新增 #L-list li a 左側清單超連結CSS設定
13.2 設定#L-list li a ，字型及底部邊框的設定
13.3 設定#L-list li a ，的區塊為block
13.4 新增 #L-list li a:hover 左側清單超連結，滑鼠滑入的CSS設定
13.5 設定#L-list li a:hover ，字型、底色、底部邊框的設定
13.6 設定後，滑鼠移過的效果
13.7 設定#L-list li a:hover ，加入底圖的設定
13.8 設定#L-list li a:hover 高度
13.9 設定後，滑鼠移過的底圖效果
14. 二、繳交作業方式
15. 表格的概述
16. 表格中的標記
17. 表格的邊框
17.1 設定儲存格的邊框
18. 一、製作步驟
19. 二、繳交作業方式
20. [color=#663300]一、製作說明：[/color]
21. [color=#663300]二、繳交作業方式[/color]
[color=#990000][作業04] 網頁導覽列的製作[/color]

20. [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]

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

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

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

每位同學請將自己的資料夾命名為：hw04-學號
這個作業的網址則為:http://mepopedia.com/~web100-a/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.製作作業的時間

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

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

JinJin — Mon, 30 Apr 2012 10:15:14 +0800

1. 一、製作說明：
2. 作業設計重點
3. 二、評分標準與製作檢核
4. 三、繳交作業方式
5. 回覆說明
6. 四、期末作業進度參考
7. 雙欄網頁概述
8. 雙欄網頁，float：浮動屬性做法概述
8.1 左側欄位：固定寬度，靠左浮動；右側欄位：設定左邊的margin(左邊間距)，不設定浮動
8.2 左側欄位：固定寬度，靠左浮動；右側欄位：設定靠左浮動，寬度可以設定也可以不設定，但寬度不可大於總寬度減左側欄位的寬度，建議更小一點，以免造成欄位崩壞的問題
8.3 左側欄位：固定寬度，靠左浮動；右側欄位：設定靠右浮動，寬度可以設定也可以不設定，但寬度不可大於總寬度減左側欄位的寬度，建議更小一點，以免造成欄位崩壞的問題
9. 本單元雙欄網頁範例，float：浮動屬性做法概述
10. 雙欄網頁，float：浮動屬性做法步驟
10.1 在#content內，加入兩個DIV：#content-L：靠左邊，#content-R：則在右邊
10.2 在CSS新增插入#content-L?以及#content-R (可手動加入，也可以Dreamweaver指令插入
10.3 新增ID CSS，命名為content-L
10.4 Float浮動設定Left，靠左對齊；寬度設為?180px
10.5 設定#content-L，Padding:6px
10.6 新增ID CSS，命名為content-R
10.7 Margin：間距，設定180px (#content-L的寬度)
10.8 #content-R?的字型設定
10.9 #content-R?背景設為白色
10.10 #content-R?，Padding內距?上右下設定為30px，使視覺效果更舒服
10.11 #content?設定底圖，會顯現在#content-L，(因#content-R設為白色右邊蓋住底圖)
10.12 於#content-L?插入影像
10.13 於#content-L，貼上記事本的清單列文字，做為左列的清單按鈕文字
10.14 選取，設成清單項目
10.15 Back回上行?Enter段落?成為清單li
10.16 將ul的id命名為L-list (可自行命名)新增ID CSS命名為L-list
10.17 新增ID CSS命名為L-list
10.18 #L-list?的字型設定
10.19 將#L-list,清單樣式設為none(無樣式)
10.20 將#L-list,Margin、Padding 皆設為0，清除清單預設距離
10.21 雙欄式網頁及左側的L-list,清單樣式大致設定完成
11. 表格設定的步驟
11.1 於#content-R插入表格
11.2 插入27列1欄，無框線、100%的表格(隨著DIV寬度調整表格寬度)，若設為100% ,IE6會有表格往下的問題
11.3 將資料分別整理至表格之中
11.4 將表格自行命名為monent-table
11.5 在程式碼欄，將所有表格標題，由
改為
11.6 在table下插入表格大標題
11.7 新增.monent-table tr th 標題CSS樣式
11.8 設定表格標題字型、設定表格標題底色
11.9 新增.monent-table tr td 表格內文CSS樣式
11.10 .monent-table tr td 表格內文，Padding內距與邊框底線的設定
11.11 新增.monent-table caption 表格大標題CSS樣式
11.12 .monent-table tr td 表格內文，底色與邊框底線的設定
12. 錨點連結設定的步驟
12.1 在標題欄前，插入→命名錨點，並自行命名
12.2 於每個標題前，分別命名錨點
12.3 在header標題欄，插入→命名錨點，並自行命名為top
12.4 分別選取左側清單，設定錨點超連結，錨點超連結前為#，如#m-01
12.5 分別設定完成
12.6 插入回前一動作#top 的連結│BACK│
12.7 │BACK│設置靠右對齊
13. 左側清單列按鈕設定的步驟
13.1 新增 #L-list li a 左側清單超連結CSS設定
13.2 設定#L-list li a ，字型及底部邊框的設定
13.3 設定#L-list li a ，的區塊為block
13.4 新增 #L-list li a:hover 左側清單超連結，滑鼠滑入的CSS設定
13.5 設定#L-list li a:hover ，字型、底色、底部邊框的設定
13.6 設定後，滑鼠移過的效果
13.7 設定#L-list li a:hover ，加入底圖的設定
13.8 設定#L-list li a:hover 高度
13.9 設定後，滑鼠移過的底圖效果
14. 二、繳交作業方式
15. 表格的概述
16. 表格中的標記
17. 表格的邊框
17.1 設定儲存格的邊框
18. 一、製作步驟
19. 二、繳交作業方式
20. [color=#663300]一、製作說明：[/color]
21. [color=#663300]二、繳交作業方式[/color]
22. 製作說明：
23. 繳交作業方式
24. 回覆本篇文章
25. 期中作業進度參考
26. 參考範例
[color=#990000][期中作業] 以單欄為主的網站設計[/color]

22. 製作說明：

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

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

3.題目自訂，選擇自己有興趣的主題，如個人網站或介紹自己喜愛的某個事物

4.可單純以色彩配色或自行設計圖片，製作網站內容

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

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

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

8.製作完成上傳至FTP

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

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

23. 繳交作業方式

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

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

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

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

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

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

24. 回覆本篇文章

[color=#0066CC]前置作業[/color](4/20)
(1)網站主題：
(2)製作動機：
(3)製作內容(含各分頁項目)：
(4)資料蒐集分析

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

[color=#CC0066]4.請務必在4/27前回覆[/color]

25. 期中作業進度參考

第八週　4/13　前置作業，題目確定，資料蒐集與分析等
第九週　4/20　決定排版形式、尺寸、圖片製作,HTML DIV與CSS設定
第十週　4/27　4/27之前將期中作業上傳繳交

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

26. 參考範例

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

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

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

JinJin — Sat, 09 Jun 2012 12:55:44 +0800

1. 一、製作說明：
2. 作業設計重點
3. 二、評分標準與製作檢核
4. 三、繳交作業方式
5. 回覆說明
6. 四、期末作業進度參考
7. 雙欄網頁概述
8. 雙欄網頁，float：浮動屬性做法概述
8.1 左側欄位：固定寬度，靠左浮動；右側欄位：設定左邊的margin(左邊間距)，不設定浮動
8.2 左側欄位：固定寬度，靠左浮動；右側欄位：設定靠左浮動，寬度可以設定也可以不設定，但寬度不可大於總寬度減左側欄位的寬度，建議更小一點，以免造成欄位崩壞的問題
8.3 左側欄位：固定寬度，靠左浮動；右側欄位：設定靠右浮動，寬度可以設定也可以不設定，但寬度不可大於總寬度減左側欄位的寬度，建議更小一點，以免造成欄位崩壞的問題
9. 本單元雙欄網頁範例，float：浮動屬性做法概述
10. 雙欄網頁，float：浮動屬性做法步驟
10.1 在#content內，加入兩個DIV：#content-L：靠左邊，#content-R：則在右邊
10.2 在CSS新增插入#content-L?以及#content-R (可手動加入，也可以Dreamweaver指令插入
10.3 新增ID CSS，命名為content-L
10.4 Float浮動設定Left，靠左對齊；寬度設為?180px
10.5 設定#content-L，Padding:6px
10.6 新增ID CSS，命名為content-R
10.7 Margin：間距，設定180px (#content-L的寬度)
10.8 #content-R?的字型設定
10.9 #content-R?背景設為白色
10.10 #content-R?，Padding內距?上右下設定為30px，使視覺效果更舒服
10.11 #content?設定底圖，會顯現在#content-L，(因#content-R設為白色右邊蓋住底圖)
10.12 於#content-L?插入影像
10.13 於#content-L，貼上記事本的清單列文字，做為左列的清單按鈕文字
10.14 選取，設成清單項目
10.15 Back回上行?Enter段落?成為清單li
10.16 將ul的id命名為L-list (可自行命名)新增ID CSS命名為L-list
10.17 新增ID CSS命名為L-list
10.18 #L-list?的字型設定
10.19 將#L-list,清單樣式設為none(無樣式)
10.20 將#L-list,Margin、Padding 皆設為0，清除清單預設距離
10.21 雙欄式網頁及左側的L-list,清單樣式大致設定完成
11. 表格設定的步驟
11.1 於#content-R插入表格
11.2 插入27列1欄，無框線、100%的表格(隨著DIV寬度調整表格寬度)，若設為100% ,IE6會有表格往下的問題
11.3 將資料分別整理至表格之中
11.4 將表格自行命名為monent-table
11.5 在程式碼欄，將所有表格標題，由
改為
11.6 在table下插入表格大標題
11.7 新增.monent-table tr th 標題CSS樣式
11.8 設定表格標題字型、設定表格標題底色
11.9 新增.monent-table tr td 表格內文CSS樣式
11.10 .monent-table tr td 表格內文，Padding內距與邊框底線的設定
11.11 新增.monent-table caption 表格大標題CSS樣式
11.12 .monent-table tr td 表格內文，底色與邊框底線的設定
12. 錨點連結設定的步驟
12.1 在標題欄前，插入→命名錨點，並自行命名
12.2 於每個標題前，分別命名錨點
12.3 在header標題欄，插入→命名錨點，並自行命名為top
12.4 分別選取左側清單，設定錨點超連結，錨點超連結前為#，如#m-01
12.5 分別設定完成
12.6 插入回前一動作#top 的連結│BACK│
12.7 │BACK│設置靠右對齊
13. 左側清單列按鈕設定的步驟
13.1 新增 #L-list li a 左側清單超連結CSS設定
13.2 設定#L-list li a ，字型及底部邊框的設定
13.3 設定#L-list li a ，的區塊為block
13.4 新增 #L-list li a:hover 左側清單超連結，滑鼠滑入的CSS設定
13.5 設定#L-list li a:hover ，字型、底色、底部邊框的設定
13.6 設定後，滑鼠移過的效果
13.7 設定#L-list li a:hover ，加入底圖的設定
13.8 設定#L-list li a:hover 高度
13.9 設定後，滑鼠移過的底圖效果
14. 二、繳交作業方式
15. 表格的概述
16. 表格中的標記
17. 表格的邊框
17.1 設定儲存格的邊框
18. 一、製作步驟
19. 二、繳交作業方式
20. [color=#663300]一、製作說明：[/color]
21. [color=#663300]二、繳交作業方式[/color]
22. 製作說明：
23. 繳交作業方式
24. 回覆本篇文章
25. 期中作業進度參考
26. 參考範例
27. [color=#663300]一、製作說明：[/color]
28. [color=#663300]二、繳交作業方式[/color]
[color=#990000][作業03] 利用Div標籤與CSS建立基本網頁版型--Dreamweaver圖片篇[/color]

27. [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 某某某(可自行取名)

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

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

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

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

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

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

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

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

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

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

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

2. 上傳至FTP

3.回覆本篇文章

　(1) 作業網址

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

　(3) 有無遇到的問題

　(4) 製作感想

　(5) 製作作業的時間

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

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

利用Div標籤與CSS建立基本網頁版型--以單純色塊為例 (no replies)

Huang jun shien — Tue, 03 Apr 2012 13:27:12 +0800
作業網址:C:\Users\Huang\Desktop\hw01-1006445013\inde.html

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

JinJin — Fri, 04 May 2012 14:05:28 +0800

1. 一、製作說明：
2. 作業設計重點
3. 二、評分標準與製作檢核
4. 三、繳交作業方式
5. 回覆說明
6. 四、期末作業進度參考
7. 雙欄網頁概述
8. 雙欄網頁，float：浮動屬性做法概述
8.1 左側欄位：固定寬度，靠左浮動；右側欄位：設定左邊的margin(左邊間距)，不設定浮動
8.2 左側欄位：固定寬度，靠左浮動；右側欄位：設定靠左浮動，寬度可以設定也可以不設定，但寬度不可大於總寬度減左側欄位的寬度，建議更小一點，以免造成欄位崩壞的問題
8.3 左側欄位：固定寬度，靠左浮動；右側欄位：設定靠右浮動，寬度可以設定也可以不設定，但寬度不可大於總寬度減左側欄位的寬度，建議更小一點，以免造成欄位崩壞的問題
9. 本單元雙欄網頁範例，float：浮動屬性做法概述
10. 雙欄網頁，float：浮動屬性做法步驟
10.1 在#content內，加入兩個DIV：#content-L：靠左邊，#content-R：則在右邊
10.2 在CSS新增插入#content-L?以及#content-R (可手動加入，也可以Dreamweaver指令插入
10.3 新增ID CSS，命名為content-L
10.4 Float浮動設定Left，靠左對齊；寬度設為?180px
10.5 設定#content-L，Padding:6px
10.6 新增ID CSS，命名為content-R
10.7 Margin：間距，設定180px (#content-L的寬度)
10.8 #content-R?的字型設定
10.9 #content-R?背景設為白色
10.10 #content-R?，Padding內距?上右下設定為30px，使視覺效果更舒服
10.11 #content?設定底圖，會顯現在#content-L，(因#content-R設為白色右邊蓋住底圖)
10.12 於#content-L?插入影像
10.13 於#content-L，貼上記事本的清單列文字，做為左列的清單按鈕文字
10.14 選取，設成清單項目
10.15 Back回上行?Enter段落?成為清單li
10.16 將ul的id命名為L-list (可自行命名)新增ID CSS命名為L-list
10.17 新增ID CSS命名為L-list
10.18 #L-list?的字型設定
10.19 將#L-list,清單樣式設為none(無樣式)
10.20 將#L-list,Margin、Padding 皆設為0，清除清單預設距離
10.21 雙欄式網頁及左側的L-list,清單樣式大致設定完成
11. 表格設定的步驟
11.1 於#content-R插入表格
11.2 插入27列1欄，無框線、100%的表格(隨著DIV寬度調整表格寬度)，若設為100% ,IE6會有表格往下的問題
11.3 將資料分別整理至表格之中
11.4 將表格自行命名為monent-table
11.5 在程式碼欄，將所有表格標題，由
改為
11.6 在table下插入表格大標題
11.7 新增.monent-table tr th 標題CSS樣式
11.8 設定表格標題字型、設定表格標題底色
11.9 新增.monent-table tr td 表格內文CSS樣式
11.10 .monent-table tr td 表格內文，Padding內距與邊框底線的設定
11.11 新增.monent-table caption 表格大標題CSS樣式
11.12 .monent-table tr td 表格內文，底色與邊框底線的設定
12. 錨點連結設定的步驟
12.1 在標題欄前，插入→命名錨點，並自行命名
12.2 於每個標題前，分別命名錨點
12.3 在header標題欄，插入→命名錨點，並自行命名為top
12.4 分別選取左側清單，設定錨點超連結，錨點超連結前為#，如#m-01
12.5 分別設定完成
12.6 插入回前一動作#top 的連結│BACK│
12.7 │BACK│設置靠右對齊
13. 左側清單列按鈕設定的步驟
13.1 新增 #L-list li a 左側清單超連結CSS設定
13.2 設定#L-list li a ，字型及底部邊框的設定
13.3 設定#L-list li a ，的區塊為block
13.4 新增 #L-list li a:hover 左側清單超連結，滑鼠滑入的CSS設定
13.5 設定#L-list li a:hover ，字型、底色、底部邊框的設定
13.6 設定後，滑鼠移過的效果
13.7 設定#L-list li a:hover ，加入底圖的設定
13.8 設定#L-list li a:hover 高度
13.9 設定後，滑鼠移過的底圖效果
14. 二、繳交作業方式
15. 表格的概述
16. 表格中的標記
17. 表格的邊框
17.1 設定儲存格的邊框
18. 一、製作步驟
19. 二、繳交作業方式
20. [color=#663300]一、製作說明：[/color]
21. [color=#663300]二、繳交作業方式[/color]
22. 製作說明：
23. 繳交作業方式
24. 回覆本篇文章
25. 期中作業進度參考
26. 參考範例
27. [color=#663300]一、製作說明：[/color]
28. [color=#663300]二、繳交作業方式[/color]
29. [color=#663300]一、製作說明：[/color]
30. [color=#663300]二、繳交作業方式[/color]
[color=#990000][作業02] 利用Div標籤與CSS建立基本網頁版型--以單純色塊為例[/color]

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

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

與[url=http://mepopedia.com/forum/read.php?976,20857][遠距教學] 利用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]

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

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

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

每位同學請將自己的資料夾命名為：hw02-學號
這個作業的網址則為:http://mepopedia.com/~web100-a/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]
===========================================

[遠距教學] 利用Div標籤與CSS建立基本網頁版型 (1 reply)

JinJin — Sat, 14 Apr 2012 00:19:10 +0800

1. 一、製作說明：
2. 作業設計重點
3. 二、評分標準與製作檢核
4. 三、繳交作業方式
5. 回覆說明
6. 四、期末作業進度參考
7. 雙欄網頁概述
8. 雙欄網頁，float：浮動屬性做法概述
8.1 左側欄位：固定寬度，靠左浮動；右側欄位：設定左邊的margin(左邊間距)，不設定浮動
8.2 左側欄位：固定寬度，靠左浮動；右側欄位：設定靠左浮動，寬度可以設定也可以不設定，但寬度不可大於總寬度減左側欄位的寬度，建議更小一點，以免造成欄位崩壞的問題
8.3 左側欄位：固定寬度，靠左浮動；右側欄位：設定靠右浮動，寬度可以設定也可以不設定，但寬度不可大於總寬度減左側欄位的寬度，建議更小一點，以免造成欄位崩壞的問題
9. 本單元雙欄網頁範例，float：浮動屬性做法概述
10. 雙欄網頁，float：浮動屬性做法步驟
10.1 在#content內，加入兩個DIV：#content-L：靠左邊，#content-R：則在右邊
10.2 在CSS新增插入#content-L?以及#content-R (可手動加入，也可以Dreamweaver指令插入
10.3 新增ID CSS，命名為content-L
10.4 Float浮動設定Left，靠左對齊；寬度設為?180px
10.5 設定#content-L，Padding:6px
10.6 新增ID CSS，命名為content-R
10.7 Margin：間距，設定180px (#content-L的寬度)
10.8 #content-R?的字型設定
10.9 #content-R?背景設為白色
10.10 #content-R?，Padding內距?上右下設定為30px，使視覺效果更舒服
10.11 #content?設定底圖，會顯現在#content-L，(因#content-R設為白色右邊蓋住底圖)
10.12 於#content-L?插入影像
10.13 於#content-L，貼上記事本的清單列文字，做為左列的清單按鈕文字
10.14 選取，設成清單項目
10.15 Back回上行?Enter段落?成為清單li
10.16 將ul的id命名為L-list (可自行命名)新增ID CSS命名為L-list
10.17 新增ID CSS命名為L-list
10.18 #L-list?的字型設定
10.19 將#L-list,清單樣式設為none(無樣式)
10.20 將#L-list,Margin、Padding 皆設為0，清除清單預設距離
10.21 雙欄式網頁及左側的L-list,清單樣式大致設定完成
11. 表格設定的步驟
11.1 於#content-R插入表格
11.2 插入27列1欄，無框線、100%的表格(隨著DIV寬度調整表格寬度)，若設為100% ,IE6會有表格往下的問題
11.3 將資料分別整理至表格之中
11.4 將表格自行命名為monent-table
11.5 在程式碼欄，將所有表格標題，由
改為
11.6 在table下插入表格大標題
11.7 新增.monent-table tr th 標題CSS樣式
11.8 設定表格標題字型、設定表格標題底色
11.9 新增.monent-table tr td 表格內文CSS樣式
11.10 .monent-table tr td 表格內文，Padding內距與邊框底線的設定
11.11 新增.monent-table caption 表格大標題CSS樣式
11.12 .monent-table tr td 表格內文，底色與邊框底線的設定
12. 錨點連結設定的步驟
12.1 在標題欄前，插入→命名錨點，並自行命名
12.2 於每個標題前，分別命名錨點
12.3 在header標題欄，插入→命名錨點，並自行命名為top
12.4 分別選取左側清單，設定錨點超連結，錨點超連結前為#，如#m-01
12.5 分別設定完成
12.6 插入回前一動作#top 的連結│BACK│
12.7 │BACK│設置靠右對齊
13. 左側清單列按鈕設定的步驟
13.1 新增 #L-list li a 左側清單超連結CSS設定
13.2 設定#L-list li a ，字型及底部邊框的設定
13.3 設定#L-list li a ，的區塊為block
13.4 新增 #L-list li a:hover 左側清單超連結，滑鼠滑入的CSS設定
13.5 設定#L-list li a:hover ，字型、底色、底部邊框的設定
13.6 設定後，滑鼠移過的效果
13.7 設定#L-list li a:hover ，加入底圖的設定
13.8 設定#L-list li a:hover 高度
13.9 設定後，滑鼠移過的底圖效果
14. 二、繳交作業方式
15. 表格的概述
16. 表格中的標記
17. 表格的邊框
17.1 設定儲存格的邊框
18. 一、製作步驟
19. 二、繳交作業方式
20. [color=#663300]一、製作說明：[/color]
21. [color=#663300]二、繳交作業方式[/color]
22. 製作說明：
23. 繳交作業方式
24. 回覆本篇文章
25. 期中作業進度參考
26. 參考範例
27. [color=#663300]一、製作說明：[/color]
28. [color=#663300]二、繳交作業方式[/color]
29. [color=#663300]一、製作說明：[/color]
30. [color=#663300]二、繳交作業方式[/color]
31. 利用Div標籤與CSS建立基本單欄網頁版型--第一步驟-基本概念說明與html基本DIV標籤設定
32. 利用Div標籤與CSS建立基本單欄網頁版型--第二步驟-Html架構及內容設定
33. 利用Div標籤與CSS建立基本單欄網頁版型--第三步驟-CSS美化設定今天的課程是複習上週Html架構的部分，加上ＣＳＳ美化設定的部分

分成三個影片檔來說明：

[hr]

31. 利用Div標籤與CSS建立基本單欄網頁版型--第一步驟-基本概念說明與html基本DIV標籤設定

http://youtu.be/4T7yrtgy3us

[hr]

32. 利用Div標籤與CSS建立基本單欄網頁版型--第二步驟-Html架構及內容設定

http://youtu.be/PX50f0hkovA

[hr]

33. 利用Div標籤與CSS建立基本單欄網頁版型--第三步驟-CSS美化設定

http://youtu.be/jkzsZXfdjVU

[hr]

完整看完課程說明後，是不是可以自己製作利用Div標籤與CSS建立基本單欄網頁版型呢？

若可獨力完成，請將檔案上傳，並回覆在[url=http://mepopedia.com/forum/read.php?976,20858][作業02] 利用Div標籤與CSS建立基本網頁版型--以單純色塊為例[/url]

還可以參考以前同學的範例喔！

http://mepopedia.com/~web100b/hw02/hw02-1001445055/

http://mepopedia.com/~web100b/hw02/hw02-1001445042/

http://mepopedia.com/~web100b/hw02/hw02-1001445022/

http://mepopedia.com/~web100b/hw02/hw02-1001445123/

http://mepopedia.com/~web100b/hw02/hw02-1001445083/

http://mepopedia.com/~web100b/hw02/hw02-1001445095/

http://mepopedia.com/~web100b/hw02/hw02-1001445077/

http://mepopedia.com/~web100a/hw02/hw02-1001445015/

http://mepopedia.com/~web100a/hw02/hw02-1001445118/

http://mepopedia.com/~web100a/hw02/hw02-1001445021/

大家一起加油囉！

100-2《中國》竹進視傳一A-網頁設計林綺欣 1006445002 (no replies)

林綺欣 — Fri, 09 Mar 2012 16:30:50 +0800
1.是否已安裝好軟體及瀏覽器，有遇到甚麼問題嗎? (請試著安裝完之後再回答，不要還沒安裝就開始填寫，謝謝)
A: 我的電腦灌爆了，整理好後就可以灌了，一定是沒問題的:)-D

2.請將本週瀏覽的不錯的及值得推薦的網站，網站名稱及網址列出
　千萬不可寫googl、yahoo等大型網站或入口網站
(1)網站名稱：設計魔力設計資訊與設計社群網站
網址：http://hamgallerystore.blogspot.com/
設計風格：
以黑灰白為主色調，字以黑體字為主，重點輔以粗體，分類編排，襯托時尚感。

(2)網站名稱：元伸網頁設計公司
網址：http://www.ozchamp.com/
設計風格：
以產品跳色的不同來搭配，大致上都以亮色系為主

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

JinJin — Fri, 04 May 2012 20:32:49 +0800

1. 一、製作說明：
2. 作業設計重點
3. 二、評分標準與製作檢核
4. 三、繳交作業方式
5. 回覆說明
6. 四、期末作業進度參考
7. 雙欄網頁概述
8. 雙欄網頁，float：浮動屬性做法概述
8.1 左側欄位：固定寬度，靠左浮動；右側欄位：設定左邊的margin(左邊間距)，不設定浮動
8.2 左側欄位：固定寬度，靠左浮動；右側欄位：設定靠左浮動，寬度可以設定也可以不設定，但寬度不可大於總寬度減左側欄位的寬度，建議更小一點，以免造成欄位崩壞的問題
8.3 左側欄位：固定寬度，靠左浮動；右側欄位：設定靠右浮動，寬度可以設定也可以不設定，但寬度不可大於總寬度減左側欄位的寬度，建議更小一點，以免造成欄位崩壞的問題
9. 本單元雙欄網頁範例，float：浮動屬性做法概述
10. 雙欄網頁，float：浮動屬性做法步驟
10.1 在#content內，加入兩個DIV：#content-L：靠左邊，#content-R：則在右邊
10.2 在CSS新增插入#content-L?以及#content-R (可手動加入，也可以Dreamweaver指令插入
10.3 新增ID CSS，命名為content-L
10.4 Float浮動設定Left，靠左對齊；寬度設為?180px
10.5 設定#content-L，Padding:6px
10.6 新增ID CSS，命名為content-R
10.7 Margin：間距，設定180px (#content-L的寬度)
10.8 #content-R?的字型設定
10.9 #content-R?背景設為白色
10.10 #content-R?，Padding內距?上右下設定為30px，使視覺效果更舒服
10.11 #content?設定底圖，會顯現在#content-L，(因#content-R設為白色右邊蓋住底圖)
10.12 於#content-L?插入影像
10.13 於#content-L，貼上記事本的清單列文字，做為左列的清單按鈕文字
10.14 選取，設成清單項目
10.15 Back回上行?Enter段落?成為清單li
10.16 將ul的id命名為L-list (可自行命名)新增ID CSS命名為L-list
10.17 新增ID CSS命名為L-list
10.18 #L-list?的字型設定
10.19 將#L-list,清單樣式設為none(無樣式)
10.20 將#L-list,Margin、Padding 皆設為0，清除清單預設距離
10.21 雙欄式網頁及左側的L-list,清單樣式大致設定完成
11. 表格設定的步驟
11.1 於#content-R插入表格
11.2 插入27列1欄，無框線、100%的表格(隨著DIV寬度調整表格寬度)，若設為100% ,IE6會有表格往下的問題
11.3 將資料分別整理至表格之中
11.4 將表格自行命名為monent-table
11.5 在程式碼欄，將所有表格標題，由
改為
11.6 在table下插入表格大標題
11.7 新增.monent-table tr th 標題CSS樣式
11.8 設定表格標題字型、設定表格標題底色
11.9 新增.monent-table tr td 表格內文CSS樣式
11.10 .monent-table tr td 表格內文，Padding內距與邊框底線的設定
11.11 新增.monent-table caption 表格大標題CSS樣式
11.12 .monent-table tr td 表格內文，底色與邊框底線的設定
12. 錨點連結設定的步驟
12.1 在標題欄前，插入→命名錨點，並自行命名
12.2 於每個標題前，分別命名錨點
12.3 在header標題欄，插入→命名錨點，並自行命名為top
12.4 分別選取左側清單，設定錨點超連結，錨點超連結前為#，如#m-01
12.5 分別設定完成
12.6 插入回前一動作#top 的連結│BACK│
12.7 │BACK│設置靠右對齊
13. 左側清單列按鈕設定的步驟
13.1 新增 #L-list li a 左側清單超連結CSS設定
13.2 設定#L-list li a ，字型及底部邊框的設定
13.3 設定#L-list li a ，的區塊為block
13.4 新增 #L-list li a:hover 左側清單超連結，滑鼠滑入的CSS設定
13.5 設定#L-list li a:hover ，字型、底色、底部邊框的設定
13.6 設定後，滑鼠移過的效果
13.7 設定#L-list li a:hover ，加入底圖的設定
13.8 設定#L-list li a:hover 高度
13.9 設定後，滑鼠移過的底圖效果
14. 二、繳交作業方式
15. 表格的概述
16. 表格中的標記
17. 表格的邊框
17.1 設定儲存格的邊框
18. 一、製作步驟
19. 二、繳交作業方式
20. [color=#663300]一、製作說明：[/color]
21. [color=#663300]二、繳交作業方式[/color]
22. 製作說明：
23. 繳交作業方式
24. 回覆本篇文章
25. 期中作業進度參考
26. 參考範例
27. [color=#663300]一、製作說明：[/color]
28. [color=#663300]二、繳交作業方式[/color]
29. [color=#663300]一、製作說明：[/color]
30. [color=#663300]二、繳交作業方式[/color]
31. 利用Div標籤與CSS建立基本單欄網頁版型--第一步驟-基本概念說明與html基本DIV標籤設定
32. 利用Div標籤與CSS建立基本單欄網頁版型--第二步驟-Html架構及內容設定
33. 利用Div標籤與CSS建立基本單欄網頁版型--第三步驟-CSS美化設定
34. 參考講義
35. 需下載的軟體
36. 繳交作業的方式
37. 參考範例
34. 參考講義

1.[url=http://mepopedia.com/forum/read.php?804,16668][講義01] 以 HTML 與 CSS 完成第一個網頁[/url]
2.[url=http://mepopedia.com/forum/read.php?976,20200][講義] FileZila FTP上傳圖例教學[/url]

35. 需下載的軟體

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

FileZilla 免費又好用的FTP軟體，供客戶端和伺服器端使用
官方下載網頁：http://filezilla-project.org/

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

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

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

36. 繳交作業的方式

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

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

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

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

2.至少兩個可以互相連結的html檔，其中首頁命名為index.html，另一檔案可命名為about.html
3.以及一個命名為style.css的css樣式檔

存放在hw01-學號的資夾內

並請回覆本篇文章

1.作業網址：

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

37. 參考範例

1.http://mepopedia.com/forum/read.php?855,15612
2.http://mepopedia.com/forum/read.php?851,15597

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

JinJin — Sat, 03 Mar 2012 12:06:27 +0800

1. 一、製作說明：
2. 作業設計重點
3. 二、評分標準與製作檢核
4. 三、繳交作業方式
5. 回覆說明
6. 四、期末作業進度參考
7. 雙欄網頁概述
8. 雙欄網頁，float：浮動屬性做法概述
8.1 左側欄位：固定寬度，靠左浮動；右側欄位：設定左邊的margin(左邊間距)，不設定浮動
8.2 左側欄位：固定寬度，靠左浮動；右側欄位：設定靠左浮動，寬度可以設定也可以不設定，但寬度不可大於總寬度減左側欄位的寬度，建議更小一點，以免造成欄位崩壞的問題
8.3 左側欄位：固定寬度，靠左浮動；右側欄位：設定靠右浮動，寬度可以設定也可以不設定，但寬度不可大於總寬度減左側欄位的寬度，建議更小一點，以免造成欄位崩壞的問題
9. 本單元雙欄網頁範例，float：浮動屬性做法概述
10. 雙欄網頁，float：浮動屬性做法步驟
10.1 在#content內，加入兩個DIV：#content-L：靠左邊，#content-R：則在右邊
10.2 在CSS新增插入#content-L?以及#content-R (可手動加入，也可以Dreamweaver指令插入
10.3 新增ID CSS，命名為content-L
10.4 Float浮動設定Left，靠左對齊；寬度設為?180px
10.5 設定#content-L，Padding:6px
10.6 新增ID CSS，命名為content-R
10.7 Margin：間距，設定180px (#content-L的寬度)
10.8 #content-R?的字型設定
10.9 #content-R?背景設為白色
10.10 #content-R?，Padding內距?上右下設定為30px，使視覺效果更舒服
10.11 #content?設定底圖，會顯現在#content-L，(因#content-R設為白色右邊蓋住底圖)
10.12 於#content-L?插入影像
10.13 於#content-L，貼上記事本的清單列文字，做為左列的清單按鈕文字
10.14 選取，設成清單項目
10.15 Back回上行?Enter段落?成為清單li
10.16 將ul的id命名為L-list (可自行命名)新增ID CSS命名為L-list
10.17 新增ID CSS命名為L-list
10.18 #L-list?的字型設定
10.19 將#L-list,清單樣式設為none(無樣式)
10.20 將#L-list,Margin、Padding 皆設為0，清除清單預設距離
10.21 雙欄式網頁及左側的L-list,清單樣式大致設定完成
11. 表格設定的步驟
11.1 於#content-R插入表格
11.2 插入27列1欄，無框線、100%的表格(隨著DIV寬度調整表格寬度)，若設為100% ,IE6會有表格往下的問題
11.3 將資料分別整理至表格之中
11.4 將表格自行命名為monent-table
11.5 在程式碼欄，將所有表格標題，由
改為
11.6 在table下插入表格大標題
11.7 新增.monent-table tr th 標題CSS樣式
11.8 設定表格標題字型、設定表格標題底色
11.9 新增.monent-table tr td 表格內文CSS樣式
11.10 .monent-table tr td 表格內文，Padding內距與邊框底線的設定
11.11 新增.monent-table caption 表格大標題CSS樣式
11.12 .monent-table tr td 表格內文，底色與邊框底線的設定
12. 錨點連結設定的步驟
12.1 在標題欄前，插入→命名錨點，並自行命名
12.2 於每個標題前，分別命名錨點
12.3 在header標題欄，插入→命名錨點，並自行命名為top
12.4 分別選取左側清單，設定錨點超連結，錨點超連結前為#，如#m-01
12.5 分別設定完成
12.6 插入回前一動作#top 的連結│BACK│
12.7 │BACK│設置靠右對齊
13. 左側清單列按鈕設定的步驟
13.1 新增 #L-list li a 左側清單超連結CSS設定
13.2 設定#L-list li a ，字型及底部邊框的設定
13.3 設定#L-list li a ，的區塊為block
13.4 新增 #L-list li a:hover 左側清單超連結，滑鼠滑入的CSS設定
13.5 設定#L-list li a:hover ，字型、底色、底部邊框的設定
13.6 設定後，滑鼠移過的效果
13.7 設定#L-list li a:hover ，加入底圖的設定
13.8 設定#L-list li a:hover 高度
13.9 設定後，滑鼠移過的底圖效果
14. 二、繳交作業方式
15. 表格的概述
16. 表格中的標記
17. 表格的邊框
17.1 設定儲存格的邊框
18. 一、製作步驟
19. 二、繳交作業方式
20. [color=#663300]一、製作說明：[/color]
21. [color=#663300]二、繳交作業方式[/color]
22. 製作說明：
23. 繳交作業方式
24. 回覆本篇文章
25. 期中作業進度參考
26. 參考範例
27. [color=#663300]一、製作說明：[/color]
28. [color=#663300]二、繳交作業方式[/color]
29. [color=#663300]一、製作說明：[/color]
30. [color=#663300]二、繳交作業方式[/color]
31. 利用Div標籤與CSS建立基本單欄網頁版型--第一步驟-基本概念說明與html基本DIV標籤設定
32. 利用Div標籤與CSS建立基本單欄網頁版型--第二步驟-Html架構及內容設定
33. 利用Div標籤與CSS建立基本單欄網頁版型--第三步驟-CSS美化設定
34. 參考講義
35. 需下載的軟體
36. 繳交作業的方式
37. 參考範例
38. 第一週講義
39. 第一週須完成的任務：
40. 請在下次上課前，註冊完畢，並回答以下問題
38. 第一週講義

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

2.網站基本概念

3.Dreamweaver 環境介紹

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

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

[hr]

39. 第一週須完成的任務：

一、安裝Dreamweaver軟體（最好是CS5版本）

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

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

四、FileZilla 免費又好用的FTP軟體，供客戶端和伺服器端使用
本學期作業都需透過FTP上傳，直接從網路上看到作品
請同學務必下載並學會如何使用

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

五、安裝目前主流的三個瀏覽器：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/

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

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

40. 請在下次上課前，註冊完畢，並回答以下問題

(回答時請註明學號(姓名))

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

2.請將本週瀏覽的不錯的及值得推薦的網站，網站名稱及網址列出
　千萬不可寫googl、yahoo等大型網站或入口網站

範例：

(1)網站名稱：J-period
網址：http://www.j-period.com/jp/

從日本全國嚴選的日式餐具到精美擺飾
融合日本古典美與現代時尚美，提倡全新和風的品牌。不受時代潮流左右的日本之美與精神性，帶領現代生活進入嶄新的舒適生活樣式。

設計風格：
簡約的日式風格，以黑灰白為主色調，漢字以細黑體字應為以羅馬字為主，重點輔以粗體，優雅的簡潔的編排，襯托出古典時尚感。

(2) 網站名稱：our great adventure 音樂網站
網址：http://www.ourgreatadventure.co.uk/

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

：是table header的縮寫，即表頭的意思，在表格中用於列或欄的名稱，跟
很類似，主要是針對他們進行樣式設定。

例如表格也可以這樣表現：

各部位如圖所示

17. 表格的邊框

1. 設定儲存格的邊框

border-collapse:collapse;

HTML屬性中：
cellpadding：設置儲存格內容和邊框之間的距離
cellspacing：設置相鄰儲存格邊框之間的距離

以CSS實現cellpadding的作用，只要對td使用padding就可以，而對儲存格使用margin是無用的，必須在table使用專門屬性：border-spacing來代替他。

接下來則以實例來解說表格的應用：

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]

[作業05] 繞圖排文與推文按鈕的應用 (1 reply)

JinJin — Mon, 14 May 2012 15:58:22 +0800

1. 一、製作說明：
2. 作業設計重點
3. 二、評分標準與製作檢核
4. 三、繳交作業方式
5. 回覆說明
6. 四、期末作業進度參考
7. 雙欄網頁概述
8. 雙欄網頁，float：浮動屬性做法概述
8.1 左側欄位：固定寬度，靠左浮動；右側欄位：設定左邊的margin(左邊間距)，不設定浮動
8.2 左側欄位：固定寬度，靠左浮動；右側欄位：設定靠左浮動，寬度可以設定也可以不設定，但寬度不可大於總寬度減左側欄位的寬度，建議更小一點，以免造成欄位崩壞的問題
8.3 左側欄位：固定寬度，靠左浮動；右側欄位：設定靠右浮動，寬度可以設定也可以不設定，但寬度不可大於總寬度減左側欄位的寬度，建議更小一點，以免造成欄位崩壞的問題
9. 本單元雙欄網頁範例，float：浮動屬性做法概述
10. 雙欄網頁，float：浮動屬性做法步驟
10.1 在#content內，加入兩個DIV：#content-L：靠左邊，#content-R：則在右邊
10.2 在CSS新增插入#content-L?以及#content-R (可手動加入，也可以Dreamweaver指令插入
10.3 新增ID CSS，命名為content-L
10.4 Float浮動設定Left，靠左對齊；寬度設為?180px
10.5 設定#content-L，Padding:6px
10.6 新增ID CSS，命名為content-R
10.7 Margin：間距，設定180px (#content-L的寬度)
10.8 #content-R?的字型設定
10.9 #content-R?背景設為白色
10.10 #content-R?，Padding內距?上右下設定為30px，使視覺效果更舒服
10.11 #content?設定底圖，會顯現在#content-L，(因#content-R設為白色右邊蓋住底圖)
10.12 於#content-L?插入影像
10.13 於#content-L，貼上記事本的清單列文字，做為左列的清單按鈕文字
10.14 選取，設成清單項目
10.15 Back回上行?Enter段落?成為清單li
10.16 將ul的id命名為L-list (可自行命名)新增ID CSS命名為L-list
10.17 新增ID CSS命名為L-list
10.18 #L-list?的字型設定
10.19 將#L-list,清單樣式設為none(無樣式)
10.20 將#L-list,Margin、Padding 皆設為0，清除清單預設距離
10.21 雙欄式網頁及左側的L-list,清單樣式大致設定完成
11. 表格設定的步驟
11.1 於#content-R插入表格
11.2 插入27列1欄，無框線、100%的表格(隨著DIV寬度調整表格寬度)，若設為100% ,IE6會有表格往下的問題
11.3 將資料分別整理至表格之中
11.4 將表格自行命名為monent-table
11.5 在程式碼欄，將所有表格標題，由