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

Re: [期末作業] 以雙欄為主的網站設計

張佳惠 — Fri, 06 Jul 2012 19:41:08 +0800

(1)作業網址：http://mepopedia.com/~web100-a/final/final-1006445019/
(2).
1.製作作業的時間：3小時
2.有無遇到的問題：跟著老師的講義做，內容很清楚，不會的地方以詢問過同學解決了
3.製作心得與感想：雖然沒有完全做完但製作網頁中，還滿有趣的。

(4)風格設定：以白色簡單為主
(5)主色調：白色輔助色調：天空藍黑色
(6)製作動機：很喜歡這個卡通人物
(7)製作目的：想嘗試做一個敵一無二的網站設計

Re: [期末作業] 以雙欄為主的網站設計

陳君雯 — Sat, 23 Jun 2012 20:07:34 +0800

(1)作業網址：

http://mepopedia.com/~web100-a/final/final-1006445006/

(2).

1.製作作業的時間：兩天
2.有無遇到的問題：圖片沒有顯示出來(以解決)
3.製作心得與感想：剛開始什麼都不會,也不懂,本來想完蛋了我,後來有詢問同學,東弄西弄就弄出來了,本來一直想
我可能做不出來了,後來有做出來還覺得滿不可思議的說!!

(3)網站主題：

奶茶世界

(4)風格：

樸素
(5)主色調：

紅色

輔助色調：

白色 -咖啡色

(6)製作動機：

因為很喜歡喝奶茶,有興趣想去多了解一些奶茶的東西,也因為這份作業讓我多認識它不少

Re: [期末作業] 以雙欄為主的網站設計

林綺欣 — Sat, 23 Jun 2012 12:59:07 +0800

感謝同學幫我解決問題，也謝謝老師>:D<

林綺欣 Wrote:
-------------------------------------------------------
> 老師:我的圖還是跳掉了..><"
> 我查不出原因來...老師SOS
>
> 我上傳我最原始的資料hw03-1006445002

Re: [期末作業] 以雙欄為主的網站設計

林綺欣 — Sat, 23 Jun 2012 09:28:51 +0800

老師:我的圖還是跳掉了..><"
我查不出原因來...老師SOS
我上傳我最原始的資料hw03-1006445002

Re: [期末作業] 以雙欄為主的網站設計

林綺欣 — Sat, 23 Jun 2012 01:10:45 +0800

(1)作業網址：http://mepopedia.com/~web100-a/final/final-1006445002

1.製作時間：沒去計算時間，只知光很多時間在上面。

2.有無遇到的問題：網頁做到越後面越複雜，不懂得地方有詢問同學，也從老師您那邊得到解答。

3.製作心得與感想：網頁真的要常練習才行，一兩個星期沒用就可忘光光，好險有老師的講義和自己做的筆記，另外還和同學互相討論，
不然真的是"一顆頭兩顆大"，學會真的很有成就感，原來網頁是這樣做出來的，也謝謝老師這麼努力得教導。

4 風格設定：認識Teddy Bear---->介紹主題的事由
幸運月份---------->表格放入圖片介紹
限量典藏---------->表格放入圖片介紹
主題餐廳---------->雙欄介紹關於Teddy餐廳
博物館------------>加入連結語法

5 主色調，輔助色調：
　主色調：茶色
　輔助色調：黃色、粉膚色

6 製作動機：會製作Teddy Bear這想法是在網頁上看閱到的，最主要原因是當初是要做藝術風格的，因為自己的不小心把圖片全部存成中文字，
要修改太麻煩又加上沒有這麼多時間，所以就放棄了。跟大家說聲不好意思，無法介紹藝術風格給你們分享，希望你們會喜愛Teddy Bear。

7 製作目的：Teddy Bear不管是大人、小孩都超喜愛的，連我也不例外。所以製作網頁分享給大家認識。

8 資料蒐集分析： http://www.teddy-family.com.tw/product-list.asp?page=1&id=992&brand=Hermann-G
http://www.vrwalker.net/tw/scenery_view.php?tbname=scenerys&serno=193

Re: [期末作業] 以雙欄為主的網站設計

潘布丁 — Fri, 22 Jun 2012 22:56:01 +0800

(1)作業網址：http://mepopedia.com/~web100-a/final/final-1006445010

1.製作時間：因陸續在做，沒有ㄧ定的時間。

2.有無遇到的問題：先前Header歪歪的，和老師詢問已經解決！

3.製作心得與感想：網頁真的很需要有細膩的心，不然很容易因為小小的錯誤就會讓整體看起來很不順。
ㄧ開始製作時，因為Header歪歪的、整體看起來很失敗，弄得很不開心。後來詢問老師修正後就有比較好，現在弄到一個段落，雖然很簡單，但還滿有成就感的。學這堂課我覺得很開心！

4 風格設定：因為一開始找的圖就是藍色的天、藍色的海，所以整體的顏色就是深淺不同的藍色系為主。可以給人ㄧ種舒服的感覺。

5 主色調，輔助色調：
　主色調：藍色
　輔助色調：白色

6 製作動機：
喜歡幾米的作品

7 製作目的：
嘗試架構一個自己設計的網站

8 資料蒐集分析：
http://www.jimmyspa.com/
http://www.facebook.com/jmy.spa

Re: [期末作業] 以雙欄為主的網站設計

范姜慈賢 — Fri, 22 Jun 2012 21:53:22 +0800

(1)作業網址：http://mepopedia.com/~web100-a/final/final-9822445046

1.製作時間:1星期
2.有無遇到的問題:
看老師的講義部會的問同學

3.製作心得與感想:
還蠻頭大的但是幸好做完了!!

4 風格設定：
喜歡糖果的色彩

5 主色調，輔助色調：
主色調:粉紅色粉綠色
輔助色調:白色紫色

6 製作動機：
應為現在馬卡龍非常火紅色彩又很可愛~

7 製作目的：
我太愛甜點了~好吃又可愛

8 資料蒐集分析：

http://www.ytower.com.tw/prj/prj_317/p1.asp

Re: [期末作業] 以雙欄為主的網站設計

HeySmile — Fri, 22 Jun 2012 21:51:52 +0800

作業網址：http://mepopedia.com/~web100-a/final/final-9621471158/

1. 網站主題:紅貴賓介紹
2. 製作作業時間:兩天
3. 有無遇到的問題:
看了很多遍講義很多部分還是不清楚，沒有做得很完整...
4. 製作心得與感想:
從完全不會做網頁到至少可以做出基本東西出來，很有成就感
5. 風格設定：以白色簡單為主
6. 主色調，輔助色調：白色、藍色
7. 製作動機：養一年多紅貴賓，介紹一下
8. 製作目的：紅貴賓雖然可愛其實缺點也不不少 ex毛打結、很愛吃人類食物、過動
9. 資料蒐集分析：http://teddy.34c.cc/teddydogdetial.php

Re: [期末作業] 以雙欄為主的網站設計

薛穆凱 — Fri, 22 Jun 2012 21:44:59 +0800

(1)作業網址：http://mepopedia.com/~web100-a/final/final-9822445048

1.製作時間:1星期
2.有無遇到的問題:
跟老師講議製作.跟同學討論

3.製作心得與感想:
趣味性製作.蠻寫真的一堂課

4 風格設定：
加入自己喜愛車系.動力寫真.以黑色風格製作

5 主色調，輔助色調：
主色調:黑色.灰色
輔助色調:亮紅.亮黃.

6 製作動機：
本身是車隊業餘跑車手.也熱愛速度.

7 製作目的：
架設屬於自己的網站

8 資料蒐集分析：

http://www.galant.club.tw/forum.php

Re: [期末作業] 以雙欄為主的網站設計

Huang jun shien — Fri, 22 Jun 2012 21:44:20 +0800

作業網址:http://mepopedia.com/~web100-a/final/final-1006445013/

1.製作作業的時間：2.5hr
2.有無遇到的問題：最後一頁還是一樣
3.製作心得與感想：做到最後有點亂
(4)風格設定：用 Hello kitty 身上的顏色作為我的網頁風格
(5)主色調，輔助色調：紅色藍色黃色白色黑色

Re: [期末作業] 以雙欄為主的網站設計

蘇俊智 — Fri, 22 Jun 2012 21:43:23 +0800

(1)作業網址：http://mepopedia.com/~web100-a/final/final-9822445020

1.製作時間:1星期
2.有無遇到的問題:
跟著老師的講義做其實蠻容易的，大部分都能理解，不過還是有些不太能理解。

3.製作心得與感想:
就是學會說要如何做一個網頁以及架設網站
4 風格設定：
深色帶點復古感

5 主色調，輔助色調：
主色調:黑色.
輔助色調:紅色
6 製作動機：
因為自己很喜歡這個品牌，所以我就設計一個自己喜歡的網站。
7 製作目的：
就是推廣品牌讓大家都能看見
8 資料蒐集分析：
http://www.istayreal.com/blog/

Re: [期末作業] 以雙欄為主的網站設計

立宏 — Fri, 22 Jun 2012 21:29:38 +0800

(1)作業網址：http://mepopedia.com/~web100-a/final/final-1006445022/
(1)網站主題:色色世界
1.製作作業時間:一天
2.有無遇到的問題:
製作過程,有很多都不是很懂,利用電話詢問同學.看看瀏覽~做的不是很完整
3.製作心得與感想:
這門課讓我有學到東西,也讓我嘗試到網頁製作的過程~還不錯
(4)風格設定：加入色彩繽紛的色票,以大自然的底來襯托
(5)主色調，輔助色調：藍天主色調,黑色.綠色.輔助色調
(6)製作動機：因為本身自己喜歡色彩.從小對色彩有興趣
(7)製作目的:想讓大家了解色彩的美.色彩分析
(8)資料蒐集分析:http://content.edu.tw/vocation/art/ks_hc/htm/content/ch06/newpage1.htm

Re: [期末作業] 以雙欄為主的網站設計

嘉俊 — Fri, 22 Jun 2012 21:25:06 +0800

(1)作業網址：http://mepopedia.com/~web100-a/final/final-1006445014/

1.製作時間:4小時
2.有無遇到的問題:
跟著老師的講義做其實蠻容易的，大部分都能理解

3.製作心得與感想:
擁有自己的網頁蠻棒的，有了基本版型未來若真的要放別的內容也很方便

4 風格設定：
加入了電音,現代感,艷麗色彩,夜店元素

5 主色調，輔助色調：
主色調:暗色系.黑色.暗灰色
輔助色調:亮色系,亮粉紅,黃色

6 製作動機：
我想製作有個性的網頁，
剛好本身也很喜歡聽電子音樂，
風格上搭起來應該不錯。

7 製作目的：
讓大家了解夜店與電音密不可分的文化(主要是國外)

8 資料蒐集分析：
關於電子音樂:http://zh.wikipedia.org/zh-tw/%E9%9B%BB%E5%AD%90%E9%9F%B3%E6%A8%82

Re: [期末作業] 以雙欄為主的網站設計

官佳霖 — Fri, 22 Jun 2012 21:20:26 +0800

(1)作業網址： http://mepopedia.com/~web100-a/final/final-9822445040

(2).
1.製作作業的時間：一天
2.有無遇到的問題：已向老師問清楚
3.製作心得與感想：
非常有成就感
太棒了!!!!!
我愛你dw

(1)網站主題：甜在心舔
(2)導覽列架構設定
首頁
中式,西式,法式,日式

(3)尺寸與架構設定
950px
header
使用photoshop用刀叉湯匙說明這是食物的網站
粉粉的底色來表現女生喜愛的甜美風格
button
用五個連結各種不同形式的甜點
content
使用我認為可愛的圓花圖案看到就會開心
content-L
180PX
用多個連結敘述情人節可自製的甜食
conter-R
以文字敘述食譜
footer
以更淺的粉紅色跟PHOTOSHOP修圖
(4)風格設定：甜美女生最愛的甜甜甜風
(5)主色調，
C:0
M:29
Y:14
K:0
輔助色調：
C:0
M:74
Y:28
K:0
(6)製作動機：為了喜歡自己動手做美食的我(7)製作目的:可以更快速找到我愛吃的食譜

預期效果：有達到我想要的感覺
但不知道顏色是否符合

(8)資料蒐集分析
http://www.christinesrecipes.com/ (簡易食譜中西個式)
http://icook.tw/ (icook愛料理)
http://food.tank.tw/default.asp (食譜大權)
http://www.meishij.net/hongpei/tianpindianxin/(甜品點心做法)
http://dessertfmtv.pixnet.net/blog(用點心做點心)
http://www.wretch.cc/blog/EmilyHH/11222329(美式甜點)
http://happymcy.blogspot.com/2011/07/black-forest-cake.html(The tree hole)
http://www.wretch.cc/blog/HappySewing&category_id=13521880(維多利亞廚房)
http://mypaper.pchome.com.tw/berrynini/category/4/1(點心製作)
http://www.wretch.cc/blog/mitong/22956215(甜蜜小點心)
http://www.masa.tw/(簡易點心食譜)
http://loveafternoontea.pixnet.net/blog/category/1828945(美味食譜)
http://blog.yam.com/homeeconomics/category/1679846(周老師點心)
http://blog.sina.com.cn/s/articlelist_1278045382_3_1.html(甜點
http://sweetmilk0429.pixnet.net/blog/category/286913(烘培甜點)

Re: [期末作業] 以雙欄為主的網站設計

黃正綱 — Fri, 22 Jun 2012 21:14:25 +0800

(1)作業網址：http://mepopedia.com/~web100-a/final/final-1006445018/
(2).
1.製作作業的時間：4小時
2.有無遇到的問題：沒問題講義很實用
3.製作心得與感想：做好後很有成就感
(4)風格設定：灰色調的介紹網頁
(5)主色調，輔助色調：(主)淺灰色，(輔)深灰色、白色
(6)製作動機：介紹貓咪的資訊
(7)製作目的：我想養ˊ_>ˋ
預期效果：乾淨俐落

(8)資料蒐集分析
http://st.popo.idv.tw/~aids/pp/Untitled-3.htm
http://www.oscar-pet.com.tw/webnews/view.php?SN=1157
http://happy2000.idv.tw/NEW_PAGE_13.HTM

Re: [期末作業] 以雙欄為主的網站設計

朱少華 — Fri, 22 Jun 2012 18:07:31 +0800

(1)作業網址：

http://mepopedia.com/~web100-a/final/final-1006445001/

(2).

1.製作作業的時間：3小時
2.有無遇到的問題：網頁亂碼問題(已解決)
3.製作心得與感想：製作網頁蠻好玩的，按圖索驥蠻容易懂的

(3)網站主題：

MARVEL-驚奇漫畫

(4)風格：

漫畫風格

(5)主色調：

紅色

輔助色調：

白色

(6)製作動機：

從小就喜歡這些英雄電影，最近又看到電影復仇者聯盟，所以就以它為主題

(7)資料蒐集分析：

維基百科 http://zh.wikipedia.org/zh-tw/Wikipedia:%E9%A6%96%E9%A1%B5

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

官佳霖 — Thu, 14 Jun 2012 15:50:32 +0800

請老師看我的檔案
我該怎麼解決這問題呢?
作業網址:http://mepopedia.com/~web100-a/hw06/hw06-9822445040

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

官佳霖 — Thu, 14 Jun 2012 13:27:12 +0800

老師我想問一下喔
網站複製下來的文字
要如何貼在dw上也只有文字沒有其他網站原本的設定的東西

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

潘布丁 — Sat, 09 Jun 2012 12:06:50 +0800

http://mepopedia.com/~web100-a/hw03/hw03-1006445010/

我弄了好久喔！可是整體看起來很奇怪
Header也歪歪的:(
老師可幫我看一下嗎?

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

JinJin — Fri, 08 Jun 2012 14:19:14 +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：表格、錨點、垂直導覽列)

JinJin — Fri, 01 Jun 2012 14:28: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 在程式碼欄，將所有表格標題，由改為
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] 表格的製作美化與資料整理

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)製作完成

[遠距教學講義] 表格的製作

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] 網頁導覽列的製作

JinJin — Fri, 04 May 2012 15: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]
[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]
===========================================

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

朱少華 — Fri, 04 May 2012 14:05:28 +0800
(1)作業網址
http://mepopedia.com/~web100-a/hw02/hw02-1006445001

(2).請回答以下問題：
1.配色風格設定：
紫色

2.有無遇到的問題:
好像沒有大太的問題

3.製作感想:
講義很清楚，跟著做就對了

4.製作作業的時間:
約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]

Re: [作業05] 繞圖排文與推文按鈕的應用

官佳霖 — Mon, 14 May 2012 15:58:22 +0800
(1).作業網址：http://mepopedia.com/~web100-a/hw05/hw05-9822445040

(2).請回答以下問題：
1.網頁主題：甜在心舔
配色與風格設定：粉色甜美風
2.有無遇到的問題? 沒有
3.製作感想
發現如果要做成我想要的網頁要有好多好多個html檔天阿!!!
原來網頁不是我想的那麼簡單
每一個不一樣的新視窗都要開一個html檔
真的好可官
4.製作作業的時間
1小時

Re: [作業04] 網頁導覽列的製作

官佳霖 — Fri, 11 May 2012 16:55:04 +0800
(1).作業網址： http://mepopedia.com/~web100-a/hw04/hw04-9822445040

(2).請回答以下問題：
1.網頁與導覽列配色與風格設定：粉色系
風格:甜美風(因為是做女生愛吃的美食)
2.有無遇到的問題? 有遇到問題!
content的背景調了超久才剛剛好
一度完全無法用上背景,圖片也是用進去時看不見

但都重做就解決了
3.製作感想
非常有成就感!!!愛上了網頁
4.製作作業的時間
5小時因為一直重做哈哈

Re: [作業04] 網頁導覽列的製作

Huang jun shien — Mon, 07 May 2012 02:58:46 +0800
1.網頁與導覽列配色與風格設定：配合Hello kitty 的顏色作配色
2.有無遇到的問題? 大置上還可以
3.製作作業的時間:1.5hr

Re: [作業01] 以HTML與CSS完成第一個網頁

朱少華 — Fri, 04 May 2012 20:32:49 +0800
一.作業網址：

http://mepopedia.com/~web100-a/midterm/midterm-1006445001/index.html

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

3小時，參考導師講義資料，再自己摸索，目前沒碰到問題

三.參考資料

http://zh.wikipedia.org/wiki/%E9%A9%9A%E5%A5%87%E6%BC%AB%E7%95%AB

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

JinJin — Fri, 04 May 2012 15:33:18 +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 在程式碼欄，將所有表格標題，由

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

Re: [期末作業] 以雙欄為主的網站設計

Re: [期末作業] 以雙欄為主的網站設計

Re: [期末作業] 以雙欄為主的網站設計

Re: [期末作業] 以雙欄為主的網站設計

Re: [期末作業] 以雙欄為主的網站設計

Re: [期末作業] 以雙欄為主的網站設計

Re: [期末作業] 以雙欄為主的網站設計

Re: [期末作業] 以雙欄為主的網站設計

Re: [期末作業] 以雙欄為主的網站設計

Re: [期末作業] 以雙欄為主的網站設計

Re: [期末作業] 以雙欄為主的網站設計

Re: [期末作業] 以雙欄為主的網站設計

Re: [期末作業] 以雙欄為主的網站設計

Re: [期末作業] 以雙欄為主的網站設計

Re: [期末作業] 以雙欄為主的網站設計

Re: [期末作業] 以雙欄為主的網站設計

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

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

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

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

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

1. 一、製作說明：

2. 作業設計重點

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

4. 三、繳交作業方式

5. 回覆說明

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

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

7. 雙欄網頁概述

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

14. 選取，設成清單項目

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

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

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

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

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

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

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

11. 表格設定的步驟

1. 於#content-R插入表格

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

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

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

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

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

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

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

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

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

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

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

12. 錨點連結設定的步驟

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

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

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

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

5. 分別設定完成

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

7. │BACK│設置靠右對齊

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

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

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