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-2b/hw07/hw07-103xxxxxxx

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

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



2.上傳至FTP

3.回覆本篇文章

(1).作業網址 :http://mepopedia.com/~web104-2b/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/16/2015 10:48PM by JinJin.
(編輯記錄)

(1)作業網址:http://mepopedia.com/~web104-2b/hw07/hw07-1035445209 (請點動圖進入)

(2)請回答以下問題:
1.網頁主題: 配色與風格設定:以Minecraft的風格簡單化,以草地色為主.白色
2.有無遇到的問題? 無
3.製作感想:雙欄頁的製作比較複雜一點。
4.製作作業的時間:2小時

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

(2).請回答以下問題:
1.網頁主題:辛普森家庭
配色與風格設定:使用黃色調去配色
2.有無遇到的問題? 因為之前語法錯所以全部重做一次

3.製作感想 :比之前的作業來的瑣碎許多,也有很多地方需要去修改,有挑戰性。


4.製作作業的時間: 4-5個小時

請按製作過程

(1)作業網址:http://mepopedia.com/~web104-2b/hw07/hw07-1035445113
(2)請回答以下問題:
1.網頁主題:Maplestory
配色與風格設定:我很喜歡遊戲的畫風與動畫等,所以做了一個介紹版面,配色為綠色和咖啡色
2.有無遇到的問題? 無
3.製作感想:爽
4.製作作業的時間:2小時

(1)作業網址:http://mepopedia.com/~web104-2b/hw07/hw07-1035445170
(2)請回答以下問題:
1.網頁主題:魔法奇緣
配色與風格設定:藍紫粉色夢幻的色調
2.有無遇到的問題? 稍微混亂了點
3.製作感想:想請問老師如何修改滑鼠游標~想要有整體的感覺
4.製作作業的時間:3小時 spinning smiley sticking its tongue outspinning smiley sticking its tongue out

1015448146

(1).作業網址 :http://mepopedia.com/~web104-2b/hw07/hw07-1015448146 (請點Van Gogh's Life)

(2).請回答以下問題:
1.網頁主題: 梵谷 van gogh 配色與風格設定: 這次修改了背景 用油畫的感覺來設計 整體維持藍紫色
2.有無遇到的問題? 目前沒有
3.製作感想 感覺快要完成了很開心
4.製作作業的時間 2小時多

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

(2).請回答以下問題:
1.網頁主題:飛利浦‧史塔克
配色與風格設定:無彩色和橙色搭配
2.有無遇到的問題? 無
3.製作感想 :雖然做起來很麻煩,不過瀏覽起來方便許多了!
4.製作作業的時間 :2.5小時



Edited 1 time(s). Last edit at 12/30/2015 04:49PM by 1034445002.
(編輯記錄)

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

1.網頁主題: 配色與風格設定: 暖色、溫馨可愛風
2.有無遇到的問題? 上面導覽列有點奇怪
3.製作感想 有點繁複
4.製作作業的時間 2個小時



Edited 1 time(s). Last edit at 01/02/2016 12:10AM by 1035445194.
(編輯記錄)

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

(2).請回答以下問題:
1.網頁主題:設計師介紹
配色與風格設定:依照設計師的設計專長與照片的顏色做成美化網頁的搭配。
2.有無遇到的問題? 目前無遇到問題。
3.製作感想 :這次又學習到了新的東西,在自己探索Dreamweaver當中,越來越了解網頁的基本架構與如何設定美化網頁的功能。
4.製作作業的時間 :2至3小時

(1).作業網址 :http://mepopedia.com/~web104-2b/hw07/hw07-1035445068 (進入後點選video)

(2).請回答以下問題:
1.網頁主題:小熊維尼歷險記
配色與風格設定:簡單風格
2.有無遇到的問題? 目前無遇到問題。
3.製作感想 :很累
4.製作作業的時間 :5小時



Edited 1 time(s). Last edit at 12/31/2015 02:04AM by _SHUAN.
(編輯記錄)

(1)作業網址:http://mepopedia.com/~web104-2b/hw07/hw07-1035445017
(2)請回答以下問題:
1.網頁主題:七龍珠
配色與風格設定:我很喜歡的卡通,配色為橘色家白色
2.有無遇到的問題? 有阿~但是看著老師的說明步驟慢慢解決
3.製作感想:做完了好累喔
4.製作作業的時間:2小時

(1)作業網址:http://mepopedia.com/~web104-2b/hw07/hw07-1035445017 (請點動圖進入)

(2)請回答以下問題:
1.網頁主題:我很喜歡的卡通七龍珠,配色為白與橘
2.有無遇到的問題?很多問題,但是看老師的教學網站解決了
3.製作感想:終於做完了!
4.製作作業的時間:2小時



Edited 1 time(s). Last edit at 12/30/2015 06:46PM by 1035445017.
(編輯記錄)

(1).作業網址 : http://mepopedia.com/~web104-2b/hw07/hw07-1035445134/ (Video)


(2).請回答以下問題:
1.網頁主題:Woods on fires專輯介紹
配色與風格設定:從整張專輯的風格配色做發想
2.有無遇到的問題: 雙欄部分的頁面要單獨設定content需要單獨重新設定,剛開始未獨立設定時,整個頁面變得很奇怪。
3.製作感想:其實雙欄表格製作並不難,只要肯花時間和耐心
4.製作作業的時間 :2小時

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

(2).請回答以下問題:
1.網頁主題:草間彌生
配色與風格設定:依照設計師的風格搭配。
2.有無遇到的問題? 看教學影片解決了
3.製作感想 :越來越複雜了 看教學影片看好幾次
4.製作作業的時間 :4小時



Edited 1 time(s). Last edit at 12/30/2015 07:53PM by 1035445074.
(編輯記錄)

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

(2).請回答以下問題:
1.網頁主題:星座
配色與風格設定:以深蓝色为主,代表星座的风格
2.有無遇到的問題? 看教學影片解決了
3.製作感想 :越來越複雜了 看教學影片看好幾次
4.製作作業的時間 :4小時

(1)作業網址:http://mepopedia.com/~web104-2b/hw07/hw07-1045245001
(2)請回答以下問題:
1.網頁主題:哈利波特
配色與風格設定:黑,灰,白,紅色
2.有無遇到的問題? 有,不久之前發現id打錯了
3.製作感想: 終於做完了
4.製作作業的時間:4小時

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

(2)請回答以下問題:
1.網頁主題:VANS 配色與風格設定:以簡單的風格,和VANS的紅色呈現

2.有無遇到的問題? 無
3.製作感想:雙欄頁的製作比較複雜一點。
4.製作作業的時間:2小時

(1).作業網址 :http://mepopedia.com/~web104-2b/hw07/hw07-1035445200(請點Zodiac)

(2).請回答以下問題:
1.網頁主題: 依舊是插畫家#南瓜子 配色與風格設定: 以背景色搭配方式為主
2.有無遇到的問題? 目前沒有
3.製作感想 :製作雙欄頁面較複雜,不過還是完成了。
4.製作作業的時間 3~4小時多

(1).作業網址 :http://mepopedia.com/~web104-2b/hw07/hw07-1035445104/tickets.html

1.網頁主題: See Russia 以俄羅斯為主的旅遊網頁
2.有無遇到的問題:在做表格的時候有有混亂
3.製作感想 有點繁複 ,可是又讓網頁更有旅遊網站的感覺
4.製作作業的時間 3.5個小時

1035445218 柯惠文


(1).作業網址:http://mepopedia.com/~web104-2b/hw07/hw07-1035445218
( 點進首頁圖片後的頁面 )

(2).請回答以下問題:
1.網頁主題: 配色與風格設定:同之前的角落生物,會一直到期末。
2.有無遇到的問題? 大致上多嘗試後就可以解決。
3.製作感想:超難做的我覺得。
4.製作作業的時間:4 - 5小時

(1).作業網址 : http://mepopedia.com/~web104-2b/hw07/hw07-1035445137 (進入網頁後,點video是這次的作業內容)

(2).請回答以下問題:
1.網頁主題:gosha
配色與風格設定:因為是俄羅斯的先鋒品牌,充滿著很濃重的痞味和社會主義的影響,
所以用很低沉的大地色系配合主題的設定,表達gosha哥特般濃重的個人氣息。
2.有無遇到的問題:目前無遇到問題。
3.製作感想 :可以更熟練的運用了
4.製作作業的時間 :1小時。

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

(2)請回答以下問題:
1.網頁主題:魔物獵人
配色與風格設定:魔物獵人的背景圖,暖色系,所以按鈕和表格也是同樣的色系
2.有無遇到的問題? :沒有
3.製作感想:很好玩,喜歡這種雙欄設計
4.製作作業的時間:一個小時

(1).作業網址 : http://mepopedia.com/~web104-2b/hw07/hw07-1035445185/video.html

(2).請回答以下問題:
1.網頁主題: 櫻桃小丸子
配色與風格設定:使用柔和可愛的顏色搭配櫻桃小丸子這個主題

2.有無遇到的問題? 有,無法用文字表達 confused smiley

3.製作感想 好累~~~~~~~~

4.製作作業的時間: 5-6個小時

(1).作業網址 : http://mepopedia.com/~web104-2b/hw07/hw07-1035445155/Introduction.html

(2).請回答以下問題:
1.網頁主題: 阿達一族
配色與風格設定:使用藍色跟綠色

2.有無遇到的問題? 無

3.製作感想 :滿好玩的

4.製作作業的時間: 4-5個小時

(1)作業網址:http://mepopedia.com/~web104-2b/hw07/hw07-1035445032
1.網頁主題:LEGO
配色與風格設定:底為白色,將其中LEGO紅藍綠配色應用在網頁上
2.有無遇到的問題? 無
3.製作感想:覺得越來越難了,要多練習
4.製作作業的時間:4小時

1035445032



Edited 2 time(s). Last edit at 12/31/2015 05:41AM by yii_.
(編輯記錄)

(1)作業網址:http://mepopedia.com/~web104-2b/hw07/hw07-1035445152
1.網頁主題:LINE
配色與風格設定:綠色
2.有無遇到的問題? 無
3.製作感想:越來越複雜
4.製作作業的時間:2小時

(1)作業網址:http://mepopedia.com/~web104-2b/hw07/hw07-1035445011
1.網頁主題:小王子
配色與風格設定:大地色
2.有無遇到的問題? 沒有
3.製作感想:加了雙欄後更加一目瞭然
4.製作作業的時間:2~3小時

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

(2).請回答以下問題:
1.網頁主題:阿!設計
配色與風格設定:使用紅調去配色
2.有無遇到的問題? 因為之前語法錯所以全部重做一次

3.製作感想 :花的時間更多,有挑戰性。


4.製作作業的時間: 6個小時

1035445014

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定:
主題: The Beauty Inside
配色與風格: 使用淡粉紅 淺紫帶出優雅的感覺
2.有無遇到的問題 雙欄左邊只有一小截
3.製作感想 雙欄真的好難
4.製作作業的時間 1天

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

(2).請回答以下問題:
1.網頁主題:vespa
配色與風格設定:藍色 綠色 黑色 白色
2.有無遇到的問題? 無
3.製作感想 :有難度但全部做完後一定會有成就感
4.製作作業的時間: 2.5個小時

(1) 作業網址:http://mepopedia.com/~web104-2b/final/final-1025445077/story.html
(2)請回答以下問題:
1.網頁主題: 配色與風格設定:以白色,灰色為主
2.有無遇到的問題? 無
3.製作感想:雙欄頁的製作比較複雜一點。
4.製作作業的時間:2小時



Edited 1 time(s). Last edit at 01/06/2016 01:47AM by ㄩㄩ.
(編輯記錄)

(1).作業網址 : http://mepopedia.com/~web104-2b/hw07/hw07-1035445029/video.html

(2).請回答以下問題:
1.網頁主題: LADYBABY
配色與風格設定:以可愛的粉色系為主

2.有無遇到的問題? 有,一直做不出來,不然就是格式都跑掉

3.製作感想 超級困難

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

(1).作業網址 : http://mepopedia.com/~web104-2b/hw07/hw07-1035445119/video.html

(2).請回答以下問題:
1.網頁主題:amazarashi (日本搖滾樂團)
配色與風格設定 : 以黑色、灰色、白色為主。

2.有無遇到的問題? 一直做不出來,出現在DW的時候還好好的,開起預覽網頁就跑掉了。

3.製作感想 : 覺得很有障礙

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

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

(2).請回答以下問題:
1.網頁主題:Linkin Park聯合公園 配色與風格設定:樂團的重色風格
2.有無遇到的問題? 無
3.製作感想 時間都花在整理資料上
4.製作作業的時間 零散的幾小時

(1)作業網址:
http://mepopedia.com/~web104-2b/hw07/hw07-1035445056 (請點works頁面)


(2)請回答以下問題:
1.網頁主題: 配色與風格設定:因主圖為綠色,所以配色都以綠色為主營造清新感
2.有無遇到的問題? 無
3.製作感想:製做時比其他頁面還要久一些,調整一些小地方.......等等。
4.製作作業的時間:2小時

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

(2).請回答以下問題:
1.網頁主題:Shinee
配色與風格設定:以藍色為主,沉穩
2.有無遇到的問題? 有,算是搞定了吧!!
3.製作感想:突然間輕鬆很多。
4.製作作業的時間:不知道耶!!

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

(2)請回答以下問題:
1.網頁主題:配色與風格設定:以代表正和邪的黑白兩色為主。
2.有無遇到的問題? 無
3.製作感想:雙欄頁的製作複雜很多。
4.製作作業的時間:2小時

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

(2).請回答以下問題:
1.網頁主題: 個性 配色與風格設定: 黑白黃
2.有無遇到的問題? 無
3.製作感想:不知道怎麼顏色搭比較有美感,需要思考很久.
4.製作作業的時間:3小時

(1).作業網址 :http://mepopedia.com/~web104-2b/hw07/hw07-1035445065(點登場人物)

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

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

(2).請回答以下問題:
1.網頁主題:about time
配色與風格設定:咖啡色.墨綠色
2.有無遇到的問題? 無
3.製作感想 :雙欄有些難度,花了點時間才搞懂
4.製作作業的時間 :3-4小時

(1).作業網址 : http://mepopedia.com/~web104-2b/hw07/hw07-1035445023
(2).請回答以下問題:
1.網頁主題:摺紙
配色與風格設定:咖啡色、橘色為主
2.有無遇到的問題? 無
3.製作感想 : 好累,但看到成品很有成就感
4.製作作業的時間 :4小時左右

1035445222

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

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

1.網頁主題:Minions

配色與風格設定: 白藍黃搭配出活潑的感覺。

2.有無遇到的問題? 有,可是看過講義後就可以了。

3.製作感想:從期中到期末學了很多之前都沒有學過的,覺得自己有一點一點的進步很有成就感。

4.製作作業的時間:5個多小時

(1).作業網址 : (我放期末的影片頁,另外有傳作業7了)
http://mepopedia.com/~web104-2b/final/final-1035445107/video.html

(2).請回答以下問題:
1.網頁主題: 配色與風格設定:詳情請見期末回覆
2.有無遇到的問題? 詳情請見期末回覆
3.製作感想 詳情請見期末回覆
4.製作作業的時間 這頁花了一小時半



Edited 1 time(s). Last edit at 01/09/2016 02:10AM by ttn0910.
(編輯記錄)

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

(2).請回答以下問題:
1.網頁主題:哆啦a夢
配色與風格設定:黑白
2.有無遇到的問題? 無
3.製作感想 :雖然做起來很麻煩,不過瀏覽起來方便許多了!
4.製作作業的時間 :2.5小時



Edited 1 time(s). Last edit at 01/09/2016 05:59AM by 1035445140.
(編輯記錄)

(1).作業網址 : http://mepopedia.com/~web104-2b/hw07/hw07-1035445191
(2).請回答以下問題:
1.網頁主題:kanahei
配色與風格設定:粉紅 粉綠為主
2.有無遇到的問題? 有時候會不小心讓大小跑掉,但都有調回來了
3.製作感想 : 雙欄真的難製作很多,但也會讓網頁看起來比較完整一些
4.製作作業的時間 :4小時多