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

Advanced

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

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

請參考

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


本講義範例網址
http://mepopedia.com/~jinjin/web/hw07/



的步驟製作,並符合以下條件:

1. 一、製作步驟


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

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

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

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

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

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




7.在title的部分打上『自己作業的命名』

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

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

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

(1 )認識多欄網頁。
(2 )雙欄網頁製作
(3 )製作垂直導覽列
(4 )複習表格的做法
(5 )利用CSS,做更細緻的網頁美化設定。 (





2. 二、繳交作業方式



1.製作完成後,檔案命名方式:

第七個平時作業FTP上的資料夾為:hw07

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

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

存放在 < hw07-學號 > 的資夾內



2.上傳至FTP

3.回覆本篇文章

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

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





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/



Edited 1 time(s). Last edit at 01/04/2018 08:32AM by JinJin.
(編輯記錄)

(1).作業網址: http://mepopedia.com/~css106-2a/hw07/hw07-1055445097
1.網頁主題:和菓子
2.配色與風格設定:淺色/可愛風格
2.有無遇到的問題? 沒有問題
3.製作感想:還不錯
4.製作作業的時間:4小時 (作業在 story按鈕)



Edited 4 time(s). Last edit at 12/30/2017 10:56PM by 1055445097 _(:3 」∠)_.
(編輯記錄)

(1).作業網址 :http://mepopedia.com/~css106-2a/hw07/hw07-1055445034
1.網頁主題:三月兔
2.有無遇到的問題:沒有
3.製作感想:過程雖然辛苦,但做完有成就感
4.製作作業的時間:半天



Edited 2 time(s). Last edit at 12/30/2017 09:06PM by 豆丁.
(編輯記錄)

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

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

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

(2).請回答以下問題:
1.網頁主題:配色與風格設定: 藍白色 清新可愛風格smileys with beer
2.有無遇到的問題? 不知道為什麼表格上面會多一大塊空白(第四頁)??confused smiley
3.製作感想 搞不懂為什麼上面會多一大塊哈哈(第四頁那裏)sad smiley
4.製作作業的時間 2-3小時thumbs up



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

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


(2).請回答以下問題:
1.網頁主題: 皮克斯 PIXAR,有種神秘感的配色效果。eye rolling smiley
2.有無遇到的問題:沒有遇到什麼大問題,就剩下連結文章,就完成期末作業了。smiling bouncing smiley
3.製作感想 :越做越有成就感,製作過程有些小問題,也會冷靜去檢查並做更正。smileys with beer
4.製作作業的時間 :3~4小時hot smiley



Edited 1 time(s). Last edit at 01/04/2018 12:33AM by 1055445082.
(編輯記錄)

(1).作業網址 :http://mepopedia.com/~css106-2a/hw07/hw07-1055445160
(2).請回答以下問題:
1.網頁主題: 卡娜赫拉
配色與風格設定: 可愛糖果顏色
2.有無遇到的問題? 邊框欄位設置很久,一直出錯
3.製作感想 :仔細看了很多遍的講義,成功解決,覺得很開心
4.製作作業的時間 5小時



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

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 簡約
2.有無遇到的問題:雙欄
3.製作感想 :比上次更進步
4.製作作業的時間 :3

(1).作業網址: http://mepopedia.com/~css106-2a/hw07/hw07-1055445037
1.網頁主題:賣衣服
2.配色與風格設定:簡約風
2.有無遇到的問題? 沒有問題
3.製作感想:還不賴
4.製作作業的時間:3小時

(1).作業網址: http://mepopedia.com/~css106-2a/hw07/hw07-1035443128
1.網頁主題:apple
2.配色與風格設定:簡約風 灰 白
2.有無遇到的問題? 沒有問題
3.製作感想:還不賴
4.製作作業的時間:2小時

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

(2).請回答以下問題:
1.網頁主題:Discovery
配色與風格設定: 綠色/非洲感
2.有無遇到的問題? 無
3.製作感想 看老師的步驟就會了
4.製作作業的時間 2小時

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

(2).請回答以下問題:
1.網頁主題: 義式冰淇淋
配色與風格設定: 簡約乾淨
2.有無遇到的問題? 好複雜......沒辦法順利做出來,要再多練習
3.製作感想 :遇到最難的部分
4.製作作業的時間 :3小時

1055445007 /吳郁婕


(1).作業網址:http://mepopedia.com/~css106-2a/hw07/hw07-1055445007
(2).請回答以下問題:
1.導覽列配色與風格設定:卡通
2.有無遇到的問題?沒
3.製作感想:更輕鬆製作
4.製作作業的時間:5小時

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

(2).請回答以下問題:
1.網頁主題:全家就是米家
配色與風格設定: 藍色/簡單
2.有無遇到的問題? 無
3.製作感想 看老師的步驟就會了
4.製作作業的時間 3小時

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

(2).請回答以下問題:
1.網頁主題:配色與風格設定:尼爾 黑白質感
2.有無遇到的問題? 做不太出想要的質感
3.製作感想 期末反而沒有之前那麼多時間投入心力了很難過
4.製作作業的時間 2~3小時

作業網址 :http://mepopedia.com/~css106-2a/hw05/hw05-1055445055

.請回答以下問題:
1.網頁主題:慕夏
配色與風格設定:依照作品配色
2.有無遇到的問題:沒有
3.製作感想:做久了比較熟悉,但還是覺得有難度。
4.製作作業的時間: 5小時

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

(2).請回答以下問題:
1.網頁主題: 趙麗穎 Zanilia Zhao 配色與風格設定: 暖橙、薔薇紅、灰靛
2.有無遇到的問題? 沒問題
3.製作感想 很有成就感
4.製作作業的時間 1小時

作業網址 :http://mepopedia.com/~css106-2a/hw05/hw05-1055445157

.請回答以下問題:
1.網頁主題:nba
配色與風格設定:黑色
2.有無遇到的問題:無
3.製作感想:我覺得有點難
4.製作作業的時間: 2小時

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定:劍俠情緣參 咖啡/灰/深紅 古風

2.有無遇到的問題? 設定

3.製作感想 設定欄位的問題

4.製作作業的時間 5小時

(1).作業網址: http://mepopedia.com/~css106-2a/hw07/hw07-1055445106
1.網頁主題:刺青文化
2.配色與風格設定:黑紫色神秘風格
2.有無遇到的問題? 沒有問題
3.製作感想:還不錯
4.製作作業的時間:2小時

(1).作業網址 :http://mepopedia.com/~css106-2a/hw07/hw07-1055445169
1.網頁主題:貓茶町
2.有無遇到的問題:沒有
3.製作感想:很有成就感
4.製作作業的時間:1天

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

(2).請回答以下問題:
1.網頁主題:hello kitty 配色與風格設定: 粉色調
2.有無遇到的問題? 無
3.製作感想 看網頁慢慢成形很有成就感
4.製作作業的時間 一天左右

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 只要一分鐘/米色系
2.有無遇到的問題:雙欄很有障礙
3.製作感想 :覺得很難,但蠻有成就感的
4.製作作業的時間 :1天

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

(2).請回答以下問題:
1.網頁主題: Netflix影集 配色與風格設定:單色調
2.有無遇到的問題? 分頁比較困難
3.製作感想 做完很有成就感
4.製作作業的時間 30分鐘

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

(2).請回答以下問題:
1.網頁主題:致我們單純的小美好
配色與風格設定: 褐色、溫馨、舒適
2.有無遇到的問題:我一直掉圖
3.製作感想:越來越順手,時間也越來越快
4.製作作業的時間:3小時

1055445178 陳宜宜
(1).作業網址 :http://mepopedia.com/~css106-2a/hw07/hw07-1055445178

(2).請回答以下問題:
1.網頁主題kurt hugo schneider 配色與風格設定:灰白紅
2.有無遇到的問題? 目前無
3.製作感想 :想讓畫面更好看所以調整很久
4.製作作業的時間 :4小時

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

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

(1).作業網址 :http://mepopedia.com/~css106-2a/hw07/hw07-1055445091
1.網頁主題:米羅
2.有無遇到的問題:雙欄蓋住footer
3.製作感想:必須花更多時間練習
4.製作作業的時間:2~3天

(1).作業網址 :http://mepopedia.com/~css106-2a/hw07/hw07-1055445181
1.網頁主題:粉紅屁桃
2.有無遇到的問題:沒有
3.製作感想:努力了老師 拜託給我高分
4.製作作業的時間:很久

1055445103林容渝
(1).作業網址 :http://mepopedia.com/~css106-2a/hw07/hw07-1055445103

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 溫和
2.有無遇到的問題? 無
3.製作感想 :越來越順手了
4.製作作業的時間 :3-4小時



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

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

(2).請回答以下問題:
1.網頁主題: 勞力士
2.有無遇到的問題? 無
3.製作感想 很有成就感
4.製作作業的時間 1小時

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

(2).請回答以下問題:
1.網頁主題: 咖啡
2.有無遇到的問題? 無
3.製作感想 很累
4.製作作業的時間 2小時

1055445112 徐坤煌
(1).作業網址 :http://mepopedia.com/~css106-2a/hw07/hw07-1055445112

(2).請回答以下問題:
1.網頁主題: 配色與風格設定:黑白灰
2.有無遇到的問題? 無
3.製作感想 :不太懂
4.製作作業的時間 :忘了