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/~web104-2c/hw07/hw07-103xxxxxxx

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

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



2.上傳至FTP

3.回覆本篇文章

(1).作業網址 :http://mepopedia.com/~web104-2c/hw07/hw07-103xxxxxxx

(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 12/17/2015 08:26PM by JinJin.
(編輯記錄)

2.上傳至FTP

3.回覆本篇文章

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

(2).請回答以下問題:
陳浩田上課一直吵白目

(1).作業網址 :http://mepopedia.com/~web104-2c/hw07/hw07-1035445171/

(2).請回答以下問題:
1.網頁主題: 配色與風格設定:森林
2.有無遇到的問題? 表格一直跳掉 超煩
3.製作感想:標籤太多好亂
4.製作作業的時間:3小時

(1).作業網址 :http://mepopedia.com/~web104-2c/hw07/hw07-1035445054

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

(1).作業網址 :http://mepopedia.com/~web104-2c/hw07/hw07-1035445147

(2).請回答以下問題:
1.網頁主題: 灌籃高手
2.有無遇到的問題? 沒有
3.製作感想 困難重重
4.製作作業的時間 3小時

(1).作業網址 :http://mepopedia.com/~web104-2c/hw07/hw07-1035445078

(2).請回答以下問題:
1.網頁主題: 珍遊記
2.有無遇到的問題? 學習障礙
3.製作感想 我智商太高
4.製作作業的時間 24小時

1005445160 - 王思博

(1).作業網址 :http://mepopedia.com/~web104-2c/hw07/hw07-1005445160/

(2).請回答以下問題:

1.網頁主題:Family Guy
2.配色與風格設定: 舒適的
3.有無遇到的問題: 還好
4.製作感想:做完就能放鬆了
5.製作作業的時間:幾小時

(1).作業網址 :http://mepopedia.com/~web104-2c/hw07/hw07-1035445123

(2).請回答以下問題:

1.網頁主題:黑白色調的馬來貘

2.有無遇到的問題? 有喔 一堆

3.製作感想: 非常疲憊

4.製作作業的時間: 久到數不清

(1).作業網址 :http://mepopedia.com/~web104-2c/hw07/hw07-1035445108

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

(1).作業網址 :http://mepopedia.com/~web104-2c/hw07/hw07-1035445102

(2).請回答以下問題:
1.網頁主題:奈良美智 配色與風格設定: 溫暖舒服的
2.有無遇到的問題? 沒有
3.製作感想 有成就感
4.製作作業的時間 6個小時

(1).作業網址 :http://mepopedia.com/~web104-2c/hw07/hw07-1035445129

(2).請回答以下問題:

1.網頁主題:小鼠波波 配色與風格設定:以鮮豔的色彩吸引兒童觀看

2.有無遇到的問題:無,看教學影片學習

3.製作感想:網頁要認真學習,才有收穫

4.製作作業的時間:3小時

學號:1035445129

(1).作業網址: http://mepopedia.com/~web104-2c/hw07/hw07-1035445063
(2).請回答以下問題:
1.網頁主題:植物VS殭屍花園戰爭
2.有無遇到的問題:一切順利
3.製作感想:做完了很開心
4.製作作業的時間: 兩~三小時

(1).作業網址 :http://mepopedia.com/~web104-2c/hw07/hw07-1035445006

(2).請回答以下問題:

1.網頁主題:粉紅豬小妹。
配色與風格設定:柔和、曖昧不搶眼的色調以舒服為主。

2.有無遇到的問題:無,教學影片都有詳解。
3.製作感想:漸漸熟悉網頁設計這個詞了,但有些專業術語仍在用心記。

4.製作作業的時間:3小時

(1).作業網址 :http://mepopedia.com/~web104-2c/hw07/hw07-1035445189/

(2).請回答以下問題:
1.網頁主題: 醜筆頭
2.有無遇到的問題? 無
3.製作感想:剛開始有點搞不清楚,還好有老師的教學影片,才可以比較快完成
4.製作作業的時間:2小時

(1).作業網址 :http://mepopedia.com/~web104-2c/hw07/hw07-1035445153

(2).請回答以下問題:
1.網頁主題:薰衣草 配色與風格設定:以紫色調為主
2.有無遇到的問題? 無
3.製作感想:一步一步照著講義,做所以沒有問題
4.製作作業的時間:2小時半

(1).作業網址 :http://mepopedia.com/~web104-2c/hw07/hw07-1035445087

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 詭異的灰紫色
2.有無遇到的問題? 圖檔太大蓋住標題
3.製作感想 還行,我換個主題了
4.製作作業的時間 一小時

(1).作業網址 :http://mepopedia.com/~web104-2c/hw07/hw07-1035445168

2.請回答以下問題:

(1)網頁主題:貓咪 配色與風格設定:以黑灰白來表現出貓咪的冷豔個性

(2)有無遇到的問題:無

(3)製作感想:做網頁是一件很開心的事,不過需要的是多一點的耐心。

(4)製作作業的時間:三小時半

(1).作業網址 :http://mepopedia.com/~web104-2c/hw07/hw07-1035445057

2.請回答以下問題:

(1)網頁主題:哆啦A夢 配色與風格設定:藍色系與小叮噹相符
(2)有無遇到的問題 : 無
(3)製作感想 : 做完會很開心可是需要很多時間
(4)製作作業的時間 : 2小時

(1).作業網址 :http://mepopedia.com/~web104-2c/hw07/hw07-1035445093

2.請回答以下問題:

(1)網頁主題:嚕嚕米

(2)有無遇到的問題:無

(3)製作感想:有些地方還要在摸索

(4)製作作業的時間:兩小時半

學號:1035445093

(1).作業網址 :http://mepopedia.com/~web104-2c/hw07/hw07-1035445030

(2).請回答以下問題:

1.網頁主題: 以雪寶為主題: 深藍 淺藍 灰

2.有無遇到的問題? 很多

3.製作感想 有點累

4.製作作業的時間 很久很久

學號:1035445030



Edited 2 time(s). Last edit at 12/31/2015 11:16AM by blue6062.
(編輯記錄)

(1).作業網址 : http://mepopedia.com/~web104-2c/hw07/hw07-1035445035

(2).請回答以下問題:
1.導覽列配色與風格設定:冷色、黑色,營造美艷、冷酷、性感的風格。
2.有無遇到的問題?無太大的問題。
3.製作感想:我覺得老師很認真,但網頁這項科目真的需要花時間、耐心還有眼力哈哈。
4.製作作業的時間:大概花了1個多小時。

(1).作業網址 :http://mepopedia.com/~web104-2c/hw07/hw07-1035445207

(2).請回答以下問題:
1.網頁主題:Ladurée馬卡龍
配色與風格設定:淡粉x淺灰
2.有無遇到的問題:看完影片都已大致了解。
3.製作感想:雖然很累但每次都會弄到停不下來
有種特別的魔力也是蠻拚的。
4.製作作業的時間:2小時

(1).作業網址 :http://mepopedia.com/~web104-2c/hw07/hw07-1035445216

(2).請回答以下問題:
1.網頁主題: 配色與風格設定:男朋友
2.有無遇到的問題? 看著老師的影片還好
3.製作感想:累
4.製作作業的時間:佔期末作業的1~2小時吧

(1).作業網址 :http://mepopedia.com/~web104-2c/hw07/hw07-1025445115

(2).請回答以下問題:
1.網頁主題:義大利麵
2.有無遇到的問題? 都還好
3.製作感想:眼睛好痛!!
4.製作作業的時間:1小時

(1).作業網址 :http://mepopedia.com/~web104-2c/hw07/hw07-1035445051
(2).請回答以下問題:
1.網頁主題: 史帝芬宇宙 用它主要腳色身上的顏色來搭配

2.有無遇到的問題? 看著影片順利做完沒遇到很困難的問題

3.製作感想:感謝教學影片讓我順利做完作業

4.製作作業的時間: 2小時

(1).作業網址 :http://mepopedia.com/~web104-2c/hw07/hw07-1035445162
(2).請回答以下問題:
1.網頁主題: 小熊學校

2.有無遇到的問題? 不知道為什麼左欄前面的符號有時候會跑出來,有時候不會
3.製作感想:這個比之前難一點但看影片跟著做就做得出來

4.製作作業的時間: 2小時



Edited 1 time(s). Last edit at 01/04/2016 12:17PM by apple70825.
(編輯記錄)

(1).作業網址 :http://mepopedia.com/~web104-2c/hw07/hw07-1035445090

(2).請回答以下問題:
1.網頁主題:史努比, 配色與風格設定:草地園野風
2.有無遇到的問題? css開始有點多好複雜
3.製作感想:配色配到快瘋了
4.製作作業的時間:2小時

(1).作業網址 :http://mepopedia.com/~web104-2c/hw07/hw07-1035445033

(2).請回答以下問題:

1.網頁主題:探險活寶
配色與風格設定:以主角阿寶的顏色為配色
2.有無遇到的問題:footer會一直跑到上面。但已解決
3.製作感想:有時候對網頁設計還是不太熟練

4.製作作業的時間:2.5小時

(1).作業網址 :http://mepopedia.com/~web104-2c/hw07/hw07-1035445195

(2).請回答以下問題:
1.網頁主題:少女時代 配色與風格設定:粉紅色
2.有無遇到的問題? 每個都好難
3.製作感想:面臨崩潰狀態
4.製作作業的時間:3小時

(1).作業網址 :http://mepopedia.com/~web104-2c/hw07/hw07-1025445061

(2).請回答以下問題:
1.網頁主題:蠟筆小新劇場版
配色與風格設定:暖色系
2.有無遇到的問題? 無
3.製作感想:有成就感
4.製作作業的時間:2小時

(1).作業網址 :http://mepopedia.com/~web104-2c/hw07/hw07-1035445042

(2).請回答以下問題:
1.網頁主題:月亮忘記了
2.有無遇到的問題? 問題不大
3.製作感想 有慢慢地搞清楚要做什麼
4.製作作業的時間 3小時

1035445042

(1).作業網址 :http://mepopedia.com/~web104-2c/hw07/hw07-1035445024

(2).請回答以下問題:

1.網頁主題:史努比
配色與風格設定:紅黑灰史努比配色

2.有無遇到的問題:無

3.製作感想:已盡力

4.製作作業的時間:3小時

(1).作業網址 :http://mepopedia.com/~web104-2c/hw07/hw07-1035445150

(2).請回答以下問題:
1.網頁主題:Lana Del Rey 配色與風格設定: 粉色與灰藍色
2.有無遇到的問題? CSS一直跑掉
3.製作感想 看影片上手快
4.製作作業的時間 4個小時

(1).作業網址 :http://mepopedia.com/~web104-2c/hw07/hw07-1035445123

(2).請回答以下問題:

1.網頁主題:黑白色調的馬來貘

2.有無遇到的問題? 問題多多

3.製作感想:非常疲憊

4.製作作業的時間:久到數不清

(1).作業網址 :http://mepopedia.com/~web104-2c/hw07/hw07-1035445219

(2).請回答以下問題:

1.網頁主題:櫻桃小丸子

2.有無遇到的問題:有

3.製作感想:終於做好了

4.製作作業的時間:3小時半

學號:1035445219

(1).作業網址 :http://mepopedia.com/~web104-2c/hw07/hw07-1035445009

(2).請回答以下問題:
1.網頁主題:熊本熊 粉紅色
2.有無遇到的問題? 沒有
3.製作感想 有點不知道如何開始做
4.製作作業的時間 3小時

(1).作業網址 :http://mepopedia.com/~web104-2c/hw07/hw07-1035445081

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 橘色 蠟筆小新配色
2.有無遇到的問題? 目前沒有
3.製作感想 做出來的成果不錯看
4.製作作業的時間 3小時

(1).作業網址 :http://mepopedia.com/~web104-2c/hw07/hw07-1035445156

(2).請回答以下問題:
1.網頁主題: 龍貓的綠綠
2.有無遇到的問題? no~
3.製作感想 :脖子好痠阿...
4.製作作業的時間 2個半小時

(1).作業網址 :http://mepopedia.com/~web104-2c/hw07/hw07-1035445126

(2).請回答以下問題:

1.網頁主題:STAR WARS原力覺醒
配色與風格設定:黑色調為主搭配黃調

2.有無遇到的問題:很多

3.製作感想:慢慢看老師的影片做

4.製作作業的時間:2小時

(1).作業網址 :http://mepopedia.com/~web104-2c/hw07/hw07-1035445048/

(2).請回答以下問題:
1.網頁主題: 配色與風格設定:森林綠、阿爾卑斯山的少女
2.有無遇到的問題? 表格一直跑位
3.製作感想:覺得有點難度,有點混亂 但還是完成了
4.製作作業的時間:3小時

1).作業網址 :http://mepopedia.com/~web104-2c/hw07/hw07-1035445027

(2).請回答以下問題:
1.網頁主題: 配色與風格設定:清新
2.有無遇到的問題? 表格一直跳掉 標籤太多
3.製作感想:覺得很複雜
4.製作作業的時間:3~4小時

(1).作業網址 :http://mepopedia.com/~web104-2c/hw07/hw07-1035445072

(2).請回答以下問題:

1.網頁主題:湯姆貓與傑利鼠 配色與風格設定:灰色、藍色、咖啡色

2.有無遇到的問題:無

3.製作感想:做網頁需要很多耐心,但是完成後很有成就感。

4.製作作業的時間:三小時

(1).作業網址 :http://mepopedia.com/~web104-2c/hw07/hw07-1025445189

(2).請回答以下問題:
1.網頁主題: 南方四賤客
配色與風格設定:黃/藍綠,有點粗造的風格
2.有無遇到的問題:L-list的設定都跟老師一樣,包括清單none,但效果一直沒有出現!
3.製作感想:困難無法解決 很煩
4.製作作業的時間:3小時

(1).作業網址 :http://mepopedia.com/~web104-2c/hw07/hw07-1035445084

(2).請回答以下問題:
1.網頁主題:天涯明月刀 配色與風格設定:深藍色 深紫色 武俠風
2.有無遇到的問題? 沒有
3.製作感想:很有成就感
4.製作作業的時間:5小時

(1).作業網址 :http://mepopedia.com/~web104-2c/hw07/hw07-1035445180

(2).請回答以下問題:
1.網頁主題: 魔力紅
2.有無遇到的問題? 沒有
3.製作感想 困難重重
4.製作作業的時間 2.5小時

(1) 作業網址: http://mepopedia.com/~web104-2c/hw07/hw07-1035445120

 (2) 風格設定為以粉橘色調來搭配我可能不會愛你)

 (3) 有無遇到的問題? 有些亂碼看不懂

 (4) 製作感想? 好想睡
5 製作時間 三十分鐘

(1).作業網址 :http://mepopedia.com/~web104-2c/hw07/hw07-1035445201

(2).請回答以下問題:
1.網頁主題: 美國恐怖故事
2.有無遇到的問題? 表格一直跳
3.製作感想:標籤太多好亂
4.製作作業的時間:3小時

(1).作業網址 :http://mepopedia.com/~web104-2c/hw07/hw07-1035445060

(2).請回答以下問題:
1.網頁主題:九藏喵窩
配色與風格設定:暖色系
2.有無遇到的問題? 語法混淆
3.製作感想 多了一欄,CSS常設定錯誤
4.製作作業的時間 8小時

(1).作業網址 :http://mepopedia.com/~web104-2c/hw07/hw07-1035445111

(2).請回答以下問題:
1.網頁主題: Line
2.有無遇到的問題? 學習障礙
3.製作感想 後面做的比較上手
4.製作作業的時間 2小時

(1).作業網址 :http://mepopedia.com/~web104-2c/hw07/hw07-1035445183/

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 黑灰白
2.有無遇到的問題? 程式碼跑掉
3.製作感想 有點煩躁
4.製作作業的時間 3小時

1.作業網址則:http://mepopedia.com/~web104-2c/hw07/hw07-1035445096

2.請回答以下問題:

(1)網頁主題:魔鏡夢遊 配色與風格設定:以鮮豔的色彩吸引人目光

(2)有無遇到的問題:網頁設計好難 超級無敵難

(3)製作感想: 看到程式碼頭就好痛

(4)製作作業的時間:三小時半

學號:1035445096

(1).作業網址 :http://mepopedia.com/~web104-2c/hw07/hw07-1035445015/

(2).請回答以下問題:
1.網頁主題: 配色與風格設定:GinOy,歐陽靖 黑黃灰
2.有無遇到的問題? 眼睛乾眼睛痛眼睛痠
3.製作感想:我想去看眼科
4.製作作業的時間:2小時

(1).作業網址 :http://mepopedia.com/~web104-2c/hw07/hw07-1035445114/

(2).請回答以下問題:
1.網頁主題: 柴犬
2.有無遇到的問題? 還行
3.製作感想:心想事成
4.製作作業的時間:1小時

(1).作業網址 :http://mepopedia.com/~web104-2c/hw07/hw07-1035445141
(2).請回答以下問題:
1.網頁主題:宮崎駿生平介紹 配色與風格設定:龍貓公車的黃褐色
2.有無遇到的問題? 有 但看老師的講義很快就解決了
3.製作感想 想要製作可以展開的表格,但弄不出來只好一般的。
4.製作作業的時間 5小時。



Edited 1 time(s). Last edit at 01/10/2016 08:07PM by 1035445141.
(編輯記錄)

(1).作業網址 :http://mepopedia.com/~web104-2c/hw07/hw07-1035445105

(2).請回答以下問題:
1.網頁主題:神隱少女 配色與風格設定: 粉紅和米白
2.有無遇到的問題? 沒有不是問題的
3.製作感想 累
4.製作作業的時間 無法計算

(1).作業網址 :http://mepopedia.com/~web104-2c/hw07/hw07-1035445159/

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