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

Advanced

Re: [作業07] 以Float:浮動,製作雙欄網頁

[作業07] 以Float:浮動,製作雙欄網頁

請參考

[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/~web106-2b/hw07/hw07-105xxxxxxx

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

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


2.上傳至FTP

3.回覆本篇文章

(1).作業網址 :http://mepopedia.com/~web106-2b/hw07/hw07-105xxxxxxx

(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/~css106-2b/hw07/hw07-1055445017/about.html

網頁主題:SUSHI ‧ 寿司
配色與風格設定: 日系風格
製作時間 : 一個晚上

http://mepopedia.com/~css106-2b/hw07/hw07-1055445014

1.網頁主題:GIBSON
2.配色與風格設定:紅棕
2.有無遇到的問題? 問朋友
3.製作感想 超級霹靂恐怖的東西
4.製作作業的時間 EVER



Edited 1 time(s). Last edit at 01/17/2018 10:11PM by a0936280046.
(編輯記錄)

http://mepopedia.com/~css106-2b/hw07/hw07-1055445014


1.網頁主題:GIBSON
2.配色與風格設定:紅棕
2.有無遇到的問題? 問朋友
3.製作感想 超級霹靂恐怖的東西
4.製作作業的時間 EVER

作業網址 :http://mepopedia.com/~css106-2b/hw07/hw07-1055445191


網頁主題:爽爽貓
配色與風格設定:以亮色和粉色為主



Edited 1 time(s). Last edit at 01/03/2018 11:41PM by 1055445191.
(編輯記錄)

(1).作業網址 :

http://mepopedia.com/~css106-2b/hw07/hw07-1055445104



1.網頁主題:
MINI
配色與風格設定:
意識讀 白底
2.有無遇到的問題?

左側分類項的點點不知怎用掉
這次作業與風格比較不相符... 不知怎搞好看
3.製作感想
so sad
4.製作作業的時間
few days



Edited 1 time(s). Last edit at 01/04/2018 01:15AM by MEATBALL HONG.
(編輯記錄)

(1).作業網址 : http://mepopedia.com/~css106-2b/hw07/hw07-1055445086

1.網頁主題: 海賊王

配色與風格設定:大海的藍(清新)
2.有無遇到的問題? 研究太久...
3.製作感想: 我的網頁更完整了~好棒!
4.製作作業的時間: 共8小時左右

(1).作業網址 :http://mepopedia.com/~css106-2b/hw07/hw07-1055445095

(2).請回答以下問題:
1.網頁主題:EXILE 配色與風格設定: 黑白簡約。
2.有無遇到的問題? 有些地方會跑掉。
3.製作感想:很有趣。
4.製作作業的時間:約兩小時。



Edited 1 time(s). Last edit at 01/04/2018 10:34AM by Daniel Wang.
(編輯記錄)

1).作業網址 :http://mepopedia.com/~css106-2b/hw06/hw07-1055445032

(2).請回答以下問題:
1.網頁主題:珍珠美人魚
2.配色與風格設定:海洋
2.有無遇到的問題? :
3.製作感想:難到躺平
4.製作作業的時間:5~6小時

(1).作業網址 :http://mepopedia.com/~web106-2b/hw07/hw07-1055445023

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 夜市/黑/咖啡
2.有無遇到的問題? 連結不成功
3.製作感想 很有趣但很累
4.製作作業的時間 三小時



Edited 1 time(s). Last edit at 01/11/2018 06:59AM by 1055445023.
(編輯記錄)

(1).作業網址 :http://mepopedia.com/~web106-2b/hw07/hw07-1055445107

(2).請回答以下問題:
1.網頁主題: 配色與風格設定:繽紛歐
2.有無遇到的問題? 已解決
3.製作感想 累累DER
4.製作作業的時間 3小

(1).作業網址 :http://mepopedia.com/~web106-2b/hw07/hw07-1055445008

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

作業網址 :http://mepopedia.com/~web106-2b/hw07/hw07-1045445101

作業網址 :http://mepopedia.com/~web106-2b/hw07/hw07-1045445101
網頁主題: 怪物
配色與風格設定:怪怪暗暗粉粉

作業網址
http://mepopedia.com/~css106-2b/hw07/hw07-1045445101

網頁主題: 怪物
配色與風格設定:怪怪暗暗粉粉

作業網址 :http://mepopedia.com/~css106-2b/hw07/hw07-1055445041

(1).作業網址 :http://mepopedia.com/~css106-2b/hw07/hw07-1055445023
(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 夜市/黑/咖啡
2.有無遇到的問題? 連結不成功
3.製作感想 很有趣但很累
4.製作作業的時間 三小時



Edited 1 time(s). Last edit at 01/11/2018 11:27AM by 1055445023.
(編輯記錄)

(1).作業網址 :http://mepopedia.com/~css106-2b/hw07/hw07-1055445185

(2).
1.網頁主題:夏目有人帳
配色與風格設定:鮮橘色搭配淺紫色
2.有無遇到的問題?沒有
3.製作感想:還可以
4.製作作業的時間:2小時



Edited 1 time(s). Last edit at 01/11/2018 11:53AM by 1055445185.
(編輯記錄)

http://mepopedia.com/~css106-2b/hw07/hw07-1055445080

[color=#FF33CC]網頁主題:安怡的粉色存錢桶
配色與風格設定: 少女風格
製作時間 : 一個晚上連到早上smoking smiley[/color]

http://mepopedia.com/~css106-2b/hw07/hw07-1055445047

網站主題: 擋車

風格設定: 活潑

主色調 : 黃綠色

製作時間 : 3小時

(1).作業網址 :http://mepopedia.com/~css106-2b/hw07/hw07-1055448122

(2).請回答以下問題:
1.網頁主題: 介紹文鳥
2.配色與風格設定: 粉粉嫩嫩的感覺
2.有無遇到的問題? 忘記太多語法 中間很卡
3.製作感想 越來越難了
4.製作作業的時間 一天



Edited 1 time(s). Last edit at 01/11/2018 09:13PM by Liuyucian.
(編輯記錄)

作業網址 : http://mepopedia.com/~css106-2b/hw07/hw07-1055445056

1. 網頁主題 :小小兵
2. 配色與風格設定 :藍 / 黃 / 黑
3. 有無遇到的問題 ? 有些地方會跑掉
4. 製作感想 :感覺很有趣
5. 製作作業的時間 :約一小時

(1).作業網址 :

http://mepopedia.com/~css106-2b/hw07/hw07-1055445176



1.網頁主題:
菇菇巢穴
配色與風格設定:
可愛、吸引力
2.有無遇到的問題?

3.製作感想

4.製作作業的時間
忘了

http://mepopedia.com/~css106-2b/hw07/hw07-1055445134/about.html

網頁主題:海綿寶寶
配色與風格設定: 鮮豔俏皮
製作時間 : 一個晚上

作業網址: http://mepopedia.com/~css106-2b/final/final-1055445125/about.html

1.網頁主題:配色與風格設定:蠟筆小新 卡通風格
2.有無遇到的問題? 無
3.製作感想 很難很難非常難
4.製作作業的時間三個小時



Edited 1 time(s). Last edit at 01/15/2018 11:55PM by 1055445134.
(編輯記錄)

http://mepopedia.com/~css106-2b/hw07/hw07-1055445038

作業網址 : http://mepopedia.com/~css106-2b/hw07/hw07-1055445071

1.網頁主題: AUNTIE’S Barber Shop
2.配色與風格設定: 美式 復古
3.有無遇到的問題? 無
4.製作感想 越來越熟ㄌ
5.製作作業的時間 忘ㄌ



Edited 1 time(s). Last edit at 01/17/2018 04:38PM by Chen pinrong.
(編輯記錄)

作業網址 : http://mepopedia.com/~css106-2b/hw07/hw07-1055445107

1.網頁主題: 飛天小女警
2.配色與風格設定:彩色
3.有無遇到的問題? 無
4.製作感想:越來越熟練\
5.製作作業的時間:1小時左右

http://mepopedia.com/~web106-2b/hw07/hw07-1055445092

http://mepopedia.com/~css106-2b/hw07/hw07-1055445119

1.網頁主題: まふまふ
2.配色與風格設定:黑灰白
2.有無遇到的問題? 很多地方一直卡關
3.製作感想 改的沒有想像中簡單
4.製作作業的時間 忘了OAO

http://mepopedia.com/~css106-2b/hw07/hw07-1055445059

1.網頁主題:天命6
2.配色與風格設定:酷黑
2.有無遇到的問題? 表格無法變色
3.製作感想 有一開始進步,但是還事很多不會,卡好久。
4.製作作業的時間 6小時以上



Edited 1 time(s). Last edit at 01/17/2018 11:39PM by jolin82145.
(編輯記錄)

(1).作業網址 : http://mepopedia.com/~css106-2b/hw07/hw07-1055445182

1.網頁主題: Super Junior-D&E

配色與風格設定:天空藍,想做出清爽的感覺
2.有無遇到的問題? 有,但是解決了
3.製作感想: 很有趣
4.製作作業的時間: 很久,但是後來發現挺簡單的

(1).作業網址 :http://mepopedia.com/~css106-2b/hw07/hw07-1055445044/about.html

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 簡約黑白藍
2.有無遇到的問題? 無
3.製作感想 很好
4.製作作業的時間 兩小時

http://mepopedia.com/~css106-2b/hw07/hw07-1055445083/about.html

http://mepopedia.com/~css106-2b/hw07/hw07-1055445002

網頁主題: 自強號40年

風格:以初代自強號的配色為網頁的主色調

作業於第五頁



Edited 1 time(s). Last edit at 01/19/2018 10:05PM by 1055445002.
(編輯記錄)

http://mepopedia.com/~css106-2b/hw07/hw07-1055445110

1.網頁主題:CHOCHOCO
2.配色與風格設定:黑、金
2.有無遇到的問題: 雙欄錨點問題
3.製作感想:這裡好難...
4.製作作業的時間:久到忘記了QQ

http://mepopedia.com/~css106-2b/hw07/hw07-1055445164

網頁主題:我們這一家
配色與風格設定: 紫色風格
製作時間 : 一個晚上

作業網址 http://mepopedia.com/~css106-2b/hw07/hw07-1055445113/

(1).作業網址 :http://mepopedia.com/~css106-2b/hw07/hw07-1055445143

(2).請回答以下問題:
1.導覽列配色與風格設定:配合刊頭使用深色
2.有無遇到的問題? 無
3.製作感想(你認為導覽列的意義為何?) 無
4.製作作業的時間 沒印象



Edited 1 time(s). Last edit at 01/20/2018 12:50AM by 1055445143.
(編輯記錄)