[作業07]以Float：浮動，製作雙欄網頁 1. 一、製作步驟2. 二、繳交作業方式3. 上課影音請參考 [color=#CC3300][講義07] 以Float：浮動，製作雙欄網頁 http://mepopedia.com/forum/read.php?804,18255[/color] [color=#CC0066]本講義範例網址 http://mepopedia.com/~jinjin/web/hw07/[/color] 的步驟製作，並符合以下條件： 1. 一、製作步驟 1.下載附件的練習檔(或直接由期末作業方式製作，但必須是全新的內容的一頁，不要與範例內容相同) 2.找文字及圖片資料，並設定#header的標題與副標題 3.重新設定#content及#footer的CSS 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] 2. 二、繳交作業方式 1.製作完成後，檔案命名方式： [color=#669900]第七個平時作業FTP上的資料夾為：hw07 每位同學請將自己的資料夾命名為：hw07-學號 這個作業的網址則為:http://mepopedia.com/~web104-2a/hw07/hw07-103xxxxxxx 資料夾內含： 1.首頁命名為index.html 2.一個命名為style.css的css樣式檔 3.images圖檔資料夾 存放在 < hw07-學號 > 的資夾內[/color] 2.上傳至FTP 3.回覆本篇文章 (1).作業網址 :http://mepopedia.com/~cg104-1a/hw07/hw07-104xxxxxxx (2).請回答以下問題： 1.網頁主題： 配色與風格設定： 2.有無遇到的問題? 3.製作感想 4.製作作業的時間 [hr] 3. 上課影音 以Float：浮動，製作雙欄網頁 雙欄Float：浮動、Table：表格、錨點、垂直導覽列 http://youtu.be/pj6f8GQKIu8 2.作業參考 (1) http://mepopedia.com/~jinjin/web/hw07/ (2) http://mepopedia.com/~web103-a/hw07/hw07-1005445193/ (3) http://mepopedia.com/~web103-a/hw07/hw07-1025445139/team.html (4) http://mepopedia.com/~web103-a/hw07/hw07-1005445195/ (5) http://mepopedia.com/~web103-a/hw07/hw07-1025445001/album.html (6) http://mepopedia.com/~web103-a/hw07/hw07-1025445040/ http://mepopedia.com/forum/read.php?2563,81474,81474#msg-81474 Tue, 28 Jul 2026 09:02:33 +0800 Phorum 5.2.7 http://mepopedia.com/forum/read.php?2563,81474,82120#msg-82120 Re: [作業07]以Float：浮動，製作雙欄網頁 http://mepopedia.com/forum/read.php?2563,81474,82120#msg-82120
(2).請回答以下問題：
1.網頁主題：初音 配色與風格設定： 藍色主調
2.有無遇到的問題 :還好
3.製作感想 :漸漸了解，蠻有意思
4.製作作業的時間 6小時]]> 1045440050 104-2《中國》竹影視一A-電腦繪圖實作(一) Sun, 19 Jun 2016 20:42:07 +0800 http://mepopedia.com/forum/read.php?2563,81474,82110#msg-82110 Re: [作業07]以Float：浮動，製作雙欄網頁 http://mepopedia.com/forum/read.php?2563,81474,82110#msg-82110
(2).請回答以下問題：

1.網頁主題：
Perfume為主，介紹她們的特色。

配色與風格設定：

鮮豔。風格在藍色中沉穩中，不失少女的桃紅。

2.有無遇到的問題?

無法置頂，後來有找到問題。

3.製作感想

比較難一點。

4.製作作業的時間

6小時。]]> 1045440029-yu 104-2《中國》竹影視一A-電腦繪圖實作(一) Sun, 19 Jun 2016 01:19:50 +0800 http://mepopedia.com/forum/read.php?2563,81474,82065#msg-82065 Re: [作業07]以Float：浮動，製作雙欄網頁 http://mepopedia.com/forum/read.php?2563,81474,82065#msg-82065
(2).請回答以下問題：
1.網頁主題： 配色與風格設定： 皮克斯黑白風格
2.有無遇到的問題? 沒有
3.製作感想 好玩
4.製作作業的時間 3-4小時

老師雙欄網頁是Founder因為我一直無法個別放就全部一起放。]]> 蘇美蓉 104-2《中國》竹影視一A-電腦繪圖實作(一) Thu, 16 Jun 2016 19:07:24 +0800 http://mepopedia.com/forum/read.php?2563,81474,82055#msg-82055 Re: [作業07]以Float：浮動，製作雙欄網頁 http://mepopedia.com/forum/read.php?2563,81474,82055#msg-82055
(2).請回答以下問題：
1.網頁主題： 配色與風格設定： 深色
2.有無遇到的問題 沒有
3.製作感想 恩
4.製作作業的時間 3-4小時]]> afd78949 104-2《中國》竹影視一A-電腦繪圖實作(一) Thu, 16 Jun 2016 15:20:03 +0800 http://mepopedia.com/forum/read.php?2563,81474,82039#msg-82039 Re: [作業07]以Float：浮動，製作雙欄網頁 http://mepopedia.com/forum/read.php?2563,81474,82039#msg-82039
http://mepopedia.com/~cg104-1a/hw07/hw07-1045440028

(2).請回答以下問題：
1.網頁主題：美國隊長3：英雄內戰
配色與風格設定：輔助色調：紅 藍 白 美國國旗顏色/灰
2.有無遇到的問題? 無
3.製作感想： 好累
4.製作作業的時間：7]]> 1045440028 104-2《中國》竹影視一A-電腦繪圖實作(一) Thu, 16 Jun 2016 14:22:26 +0800 http://mepopedia.com/forum/read.php?2563,81474,82037#msg-82037 Re: [作業07]以Float：浮動，製作雙欄網頁 http://mepopedia.com/forum/read.php?2563,81474,82037#msg-82037
(2).請回答以下問題：
1.網頁主題： 配色與風格設定： 海底總動員
2.有無遇到的問題? 沒
3.製作感想 開心
4.製作作業的時間 3-4小時]]> 1045440020 104-2《中國》竹影視一A-電腦繪圖實作(一) Thu, 16 Jun 2016 13:55:29 +0800 http://mepopedia.com/forum/read.php?2563,81474,82017#msg-82017 Re: [作業07]以Float：浮動，製作雙欄網頁 http://mepopedia.com/forum/read.php?2563,81474,82017#msg-82017 (2).請回答以下問題：
1.網頁主題：~咩咩咩生先羊山
配色與風格設定：飽和度高，繽紛的顏色:)
2.有無遇到的問題? 左右欄一直互相蓋到，然後微調就又都不見:X
3.製作感想： 快瘋了真的是宇宙世界超級無敵難
4.製作作業的時間：幾世紀]]> 小花蛀牙 104-2《中國》竹影視一A-電腦繪圖實作(一) Thu, 16 Jun 2016 11:45:01 +0800 http://mepopedia.com/forum/read.php?2563,81474,81975#msg-81975 Re: [作業07]以Float：浮動，製作雙欄網頁 http://mepopedia.com/forum/read.php?2563,81474,81975#msg-81975
1.網頁主題： 配色與風格設定： 這次改了邊框，色調一樣
2.有無遇到的問題? 有喔！那個List我已放棄，我也不知道我怎麼做出來的?
3.製作感想 雙欄真是個麻煩的東西！做到一半氣到去睡覺
4.製作作業的時間 　２天多]]> 1045440019 104-2《中國》竹影視一A-電腦繪圖實作(一) Thu, 16 Jun 2016 01:39:15 +0800 http://mepopedia.com/forum/read.php?2563,81474,81950#msg-81950 Re: [作業07]以Float：浮動，製作雙欄網頁 http://mepopedia.com/forum/read.php?2563,81474,81950#msg-81950
(2).請回答以下問題：
1.網頁主題：picture
配色與風格設定：藍色與綠色
2.有無遇到的問題？我想不到晚餐要吃什麼
3.製作感想：我終於做完了
4.製作作業的時間：2小]]> 1045440031 104-2《中國》竹影視一A-電腦繪圖實作(一) Wed, 15 Jun 2016 23:12:18 +0800 http://mepopedia.com/forum/read.php?2563,81474,81938#msg-81938 Re: [作業07]以Float：浮動，製作雙欄網頁 http://mepopedia.com/forum/read.php?2563,81474,81938#msg-81938
(2).請回答以下問題：
1.網頁主題：鸚鵡人
配色與風格設定：簡單亮色系
2.有無遇到的問題? 難!!!!!
3.製作感想： 累可以昏睡3天
4.製作作業的時間：1小時]]> 1025435233 104-2《中國》竹影視一A-電腦繪圖實作(一) Wed, 15 Jun 2016 22:42:41 +0800 http://mepopedia.com/forum/read.php?2563,81474,81836#msg-81836 Re: [作業07]以Float：浮動，製作雙欄網頁 http://mepopedia.com/forum/read.php?2563,81474,81836#msg-81836
1..一拳超人
2.有設定了一小塊不怎麼樣(作者介紹那
3.別問了 很恐怖
4.天荒地老沒啦~沒算時間ㄟ]]> king4221029 104-2《中國》竹影視一A-電腦繪圖實作(一) Tue, 14 Jun 2016 01:48:31 +0800 http://mepopedia.com/forum/read.php?2563,81474,81789#msg-81789 Re: [作業07]以Float：浮動，製作雙欄網頁 http://mepopedia.com/forum/read.php?2563,81474,81789#msg-81789
(2).請回答以下問題：
1.網頁主題： 配色與風格設定：粉紅色，以少女時代為主題
2.有無遇到的問題? 沒
3.製作感想 ：越來越麻煩了
4.製作作業的時間 ：期中的直接改所以沒花很多時間]]> 1045440014 104-2《中國》竹影視一A-電腦繪圖實作(一) Mon, 13 Jun 2016 20:54:23 +0800 http://mepopedia.com/forum/read.php?2563,81474,81730#msg-81730 Re: [作業07]以Float：浮動，製作雙欄網頁 http://mepopedia.com/forum/read.php?2563,81474,81730#msg-81730
(2).請回答以下問題：
1.網頁主題：卡莉怪妞
配色與風格設定：可愛的
2.有無遇到的問題？我一直想讓側邊欄跟隨頁面滑動
3.製作感想：我終於都做完了
4.製作作業的時間：兩個禮拜]]> 1045440044 104-2《中國》竹影視一A-電腦繪圖實作(一) Sun, 12 Jun 2016 16:29:06 +0800 http://mepopedia.com/forum/read.php?2563,81474,81684#msg-81684 Re: [作業07]以Float：浮動，製作雙欄網頁 http://mepopedia.com/forum/read.php?2563,81474,81684#msg-81684
1網頁主題:一拳超人
2.我只做了一小格雙欄就夠讓我頭疼了
3.多了作者介紹 網頁好看多了
4.零零散散的 3天]]> king4221029 104-2《中國》竹影視一A-電腦繪圖實作(一) Fri, 10 Jun 2016 21:04:30 +0800 http://mepopedia.com/forum/read.php?2563,81474,81559#msg-81559 Re: [作業07]以Float：浮動，製作雙欄網頁 http://mepopedia.com/forum/read.php?2563,81474,81559#msg-81559
(2).請回答以下問題：
1.網頁主題：右手超人。
配色與風格設定：暖色 舒服的照片。
2.有無遇到的問題? back沒辦法往右。
3.製作感想： 眼睛快瞎了！ 累死寶寶了
4.製作作業的時間：六小時。]]> GEE 104-2《中國》竹影視一A-電腦繪圖實作(一) Wed, 01 Jun 2016 23:23:39 +0800 http://mepopedia.com/forum/read.php?2563,81474,81543#msg-81543 Re: [作業07]以Float：浮動，製作雙欄網頁 http://mepopedia.com/forum/read.php?2563,81474,81543#msg-81543
(2).請回答以下問題：
1.網頁主題：熊本熊。
配色與風格設定：簡約。以黑、白、紅代表屬於熊本熊之特色。
2.有無遇到的問題? 為了table class差點胃出血。
3.製作感想： 終於做完了！我愛熊本熊！
4.製作作業的時間：零散的時間做，大約三天。]]> 1045440013 104-2《中國》竹影視一A-電腦繪圖實作(一) Wed, 01 Jun 2016 07:15:14 +0800 http://mepopedia.com/forum/read.php?2563,81474,81489#msg-81489 Re: [作業07]以Float：浮動，製作雙欄網頁 http://mepopedia.com/forum/read.php?2563,81474,81489#msg-81489
(2).請回答以下問題：

1.網頁主題：

EXO為主，然後介紹離隊的團員。

配色與風格設定：

暗色系。風格是設定有三人是離隊；所以要讓氣氛看起來比較沉重。

2.有無遇到的問題?

頁面差點無法置頂，但是後來有找到問題。

3.製作感想

感覺這次的作業比較難一點。

4.製作作業的時間

6小時。]]> 1045440010 104-2《中國》竹影視一A-電腦繪圖實作(一) Fri, 27 May 2016 15:33:50 +0800 http://mepopedia.com/forum/read.php?2563,81474,81486#msg-81486 Re: [作業07]以Float：浮動，製作雙欄網頁 http://mepopedia.com/forum/read.php?2563,81474,81486#msg-81486
(2).請回答以下問題：
1.網頁主題： 配色與風格設定： 甜甜的
2.有無遇到的問題? 影片置中文字也會跟著置中
3.製作感想 開心
4.製作作業的時間 3-4小時，上課完當天回家做完。]]> 1045440046 104-2《中國》竹影視一A-電腦繪圖實作(一) Thu, 26 May 2016 21:14:20 +0800 http://mepopedia.com/forum/read.php?2563,81474,81474#msg-81474 [作業07]以Float：浮動，製作雙欄網頁 http://mepopedia.com/forum/read.php?2563,81474,81474#msg-81474
  1. 1. 一、製作步驟
  2. 2. 二、繳交作業方式
  3. 3. 上課影音
請參考

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

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


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

1. 一、製作步驟


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

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

3.重新設定#content及#footer的CSS

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]

2. 二、繳交作業方式



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

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

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

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

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


2.上傳至FTP

3.回覆本篇文章

(1).作業網址 :http://mepopedia.com/~cg104-1a/hw07/hw07-104xxxxxxx

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



[hr]

3. 上課影音


以Float：浮動，製作雙欄網頁 雙欄Float：浮動、Table：表格、錨點、垂直導覽列
http://youtu.be/pj6f8GQKIu8




2.作業參考
(1) http://mepopedia.com/~jinjin/web/hw07/
(2) http://mepopedia.com/~web103-a/hw07/hw07-1005445193/
(3) http://mepopedia.com/~web103-a/hw07/hw07-1025445139/team.html
(4) http://mepopedia.com/~web103-a/hw07/hw07-1005445195/
(5) http://mepopedia.com/~web103-a/hw07/hw07-1025445001/album.html
(6) http://mepopedia.com/~web103-a/hw07/hw07-1025445040/]]> JinJin 104-2《中國》竹影視一A-電腦繪圖實作(一) Wed, 25 May 2016 21:36:59 +0800