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

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

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



2.上傳至FTP

3.回覆本篇文章

(1).作業網址 :http://mepopedia.com/~web104-2a/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/

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 繽紛
2.有無遇到的問題? 圖一直跑掉,及時跟修改圖位置不一樣
3.製作感想 做完了
4.製作作業的時間 很久


學號:1035445211

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

(2).請回答以下問題:
1.網頁主題:KARNEVAL狂歡節
配色與風格設定:清涼歡樂
2.有無遇到的問題? ...因該沒吧...?!
3.製作感想 ...╮(╯v╰)╭
4.製作作業的時間 2~3 小時


學號:1035445214

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

(2).請回答以下問題:
1.網頁主題:質感
2.有無遇到的問題? 沒~
3.製作感想 每次做就都想認真做好所以都做很久屁股坐很痛
4.製作作業的時間3小~~時

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 黑灰白
2.有無遇到的問題 因為是雙欄網頁,所以真的有點困難,而且又一直跑掉格式,所以真的比較複雜
3.製作感想 做完就覺得雙欄是目前最複雜的一個段落
4.製作作業的時間 1個半小時

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 藍
2.有無遇到的問題 :格式一直跑掉,所以對很多次
3.製作感想 無
4.製作作業的時間 1小時

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

(2).請回答以下問題:
1.網頁主題:五月天 配色與風格設定: 藍色風格
2.有無遇到的問題? footer壞了
3.製作感想 footer壞了,救不活很難過confused smiley
4.製作作業的時間 footer壞了所以忘了spinning smiley sticking its tongue out

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 很多拉A夢
2.有無遇到的問題? 從做了3次才成功
3.製作感想 終於做完了
4.製作作業的時間 超級久很久


學號:1035445079

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 古風感
2.有無遇到的問題? 沒有
3.製作感想 越是深入,才發現其中的奧妙。
4.製作作業的時間 兩小時


學號:1035445115

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

(2).請回答以下問題:
1.網頁主題:韓國明星NU EST、粉色、灰色
2.有無遇到的問題? 無
3.製作感想:依照影片步驟操作 很清楚
4.製作作業的時間 兩小時


學號:1035445067

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

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

學號1035445199

(1).作業網址 :http://mepopedia.com/~web104-2a/hw07/hw07-1035445073/infor.html
(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 柴犬Maru,咖啡色系
2.有無遇到的問題? 一度不知道為什麼圖跟顏色都不見只剩字覺得崩潰
3.製作感想 :開心ˊˇˋ
4.製作作業的時間 :超級久



Edited 3 time(s). Last edit at 01/05/2016 08:47PM by 1035445073.
(編輯記錄)

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 水藍˙
2.有無遇到的問題? 圖一直跑掉
3.製作感想 no
4.製作作業的時間 30分鐘

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定:白灰黑
2.有無遇到的問題? 無
3.製作感想 做完很開心
4.製作作業的時間 1~2小時

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

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

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

(2).請回答以下問題
1.網頁主題: 配色與風格設定:配合圖片暗酒紅色系
2.有無遇到的問題?: 無
3.製作感想 :對於網頁架構有越來越熟悉
4.製作作業的時間:3-4小時

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 活力小孩的感覺
2.有無遇到的問題? 沒有
3.製作感想 漸漸比較了解了
4.製作作業的時間 兩小時


帶PO 學號:1035445046

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

(2).請回答以下問題:
1.網頁主題: 神奇寶貝-皮卡丘
2.有無遇到的問題?無
3.製作感想 有影片之後更熟悉上手
4.製作作業的時間 1h


學號:1035445001

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

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

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

(2).請回答以下問題:
網頁主題: star wars
配色與風格設定:簡單
有無遇到的問題;無
製作感想;好少
製作作業的時間 ;1小時吧

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

(2).請回答以下問題:
1.網頁主題:可口
2.有無遇到的問題? 整體編排的尺寸容易錯亂
3.製作感想 真的很有成就感 從無到有的感覺很棒
4.製作作業的時間 2小時

(1).作業網址 :http://mepopedia.com/~web104-2a/hw07/hw07-1035445148/
(2).請回答以下問題:
1.網頁主題:青春藍
2.有無遇到的問題? 還好
3.製作感想 好累
4.製作作業的時間:3小

(1).作業網址 :http://mepopedia.com/~web104-2a/hw07/hw07-1035445187/
(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 簡約
2.有無遇到的問題? 還好
3.製作感想 這部分比較簡單
4.製作作業的時間 1H

(1).作業網址 :http://mepopedia.com/~web104-2a/hw07/hw07-1035445028/
(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 粉嫩
2.有無遇到的問題? 有顏色設定一直鬼打牆哈哈
3.製作感想 很有成就感
4.製作作業的時間 一個半小時

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 延續之前
2.有無遇到的問題? 重做了2次
3.製作感想 好爽
4.製作作業的時間 3小時


學號:1035445010

(1).作業網址 :http://mepopedia.com/~web104-2a/hw07/hw07-1035445052
(2).請回答以下問題:
1.網頁主題: 配色與風格設定:山羊先生
2.有無遇到的問題?非常難
3.製作感想 很有成就感
4.製作作業的時間 一個半小時

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 科技感
2.有無遇到的問題 難翻了
3.製作感想 :要期末了.....
4.製作作業的時間 2小時


學號:1035445151

作業網址 :http://mepopedia.com/~web104-2a/hw07/hw07-1035445184



1.網頁主題:鬼燈的冷徹 配色與風格設定:與圖片相近之顏色

2.有無遇到的問題?

及時預覽顯示時事正常的但是在網頁上看有些設定卻會跑掉,但已經修正回來的


3.製作感想

看影片作可以自行做出,但一直跑掉真的讓人很崩潰。

4.製作作業的時間

3h以上

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 粉紅色 溫和的感覺
2.有無遇到的問題? 雙欄出了很大的問題,重複做了三次... 第四次才成功
3.製作感想: 很開心
4.製作作業的時間:五小時


學號:1035445088

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

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

(1).作業網址 :http://mepopedia.com/~web104-2a/hw07/hw07-1035445058/
(2).請回答以下問題:
1.網頁主題:米奇
2.有無遇到的問題? 編排尺寸難設定
3.製作感想 做完真的很爽
4.製作作業的時間 2小時

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

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


學號:1035445061

(1).作業網址 :http://mepopedia.com/~web104-2a/hw07/hw07-1035461022
(2).請回答以下問題:
1.網頁主題:katy perry 配色與風格設定: 比較粉嫩的顏色
2.有無遇到的問題? 我不會改字欄的顏色,所以只能用黑色
3.製作感想 蠻好玩的感覺很專業
4.製作作業的時間 1~2小時左右

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

(2).請回答以下問題:
1.網頁主題:我的自由年代 配色與風格設定: 黑灰白與紅色為主
2.有無遇到的問題? 無
3.製作感想 漸漸地越來越上手了
4.製作作業的時間 2小時

1035445169簡郡誼

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

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



Edited 1 time(s). Last edit at 01/05/2016 12:56PM by 1035445181.
(編輯記錄)

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

(2).請回答以下問題:
1.網頁主題:我的自由年代 配色與風格設定: 暖色系得維納斯
2.有無遇到的問題? 有些問題
3.製作感想 無
4.製作作業的時間 2小時

103544524

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

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


學號:1035445121

(1).作業網址 :http://mepopedia.com/~web104-2a/final/final-1035445130/plot.html

(2).請回答以下問題:
1.網頁主題:Jack and the Beanstalk
配色與風格設定: 藍綠色系,呈現大自然風格
2.有無遇到的問題? 無
3.製作感想 :好累
4.製作作業的時間: 4小時


學號:1035445130

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 灰 綠 深綠
2.有無遇到的問題? 圖會跑掉
3.製作感想 開心
4.製作作業的時間 1.5hr


學號:1035445202

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定:亮色系
2.有無遇到的問題? 圖會跑掉
3.製作感想 開心
4.製作作業的時間 1.5hr


學號:1035445094

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 黑白
2.有無遇到的問題? 途一直不能中間
3.製作感想 做完了
4.製作作業的時間 很久


學號:1035445118

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

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


學號:1035445034

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

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


視傳二A 10354445103

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

(2).請回答以下問題:
1.網頁主題: 哈利波特
配色與風格設定: 黑綠白
2.有無遇到的問題? 重做一次
3.製作感想 好複雜
4.製作作業的時間 3小時多

(1).作業網址 :http://mepopedia.com/~web104-2a/hw07/hw07-1035445055/
(2).請回答以下問題:
1.網頁主題、配色與風格設定:
以簡潔的方式呈現較為清楚的感覺,顏色是以深藍色作底色,讓主題能夠更加以凸顯。
2.有無遇到的問題?
有一點困難,不過經過同學講解後,大致上沒有問題。
3.製作感想
感覺有些難度,但是完成後感覺蠻有成就感。
4.製作作業的時間
2~3小時左右。

學號:1035445055

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

(2).請回答以下問題:
1.網頁主題:新海誠
配色與風格設定:綠綠der
2.有無遇到的問題? CC版有點不受控制搞有點久
3.製作感想 做出來的時候突然信上帝了
4.製作作業的時間 2 小時

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 粉色系
2.有無遇到的問題? 表格位置一直跑掉 東西複雜到一個極致 做起來真的要瘋掉
3.製作感想 終 於 做完了...
4.製作作業的時間 很久


學號:1035445196



Edited 1 time(s). Last edit at 01/09/2016 08:24PM by 1035445196.
(編輯記錄)

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

(2).請回答以下問題:
1.網頁主題:神奇寶貝
配色與風格設定:黃藍綠白粉系
2.有無遇到的問題?無
3.製作感想 有累
4.製作作業的時間 很久

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

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


學號:1035445178

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

(2).請回答以下問題:
1.網頁主題:謊言留聲機 專輯介紹 配色與風格設定: 黃+白+黑
2.有無遇到的問題? 有,雙欄網頁製作的不順利,明明弄好語法,卻還是沒顯示雙欄,覺得疑惑。
3.製作感想 還是覺得蠻難的.....語法都太複雜,有些都看不太懂。
4.製作作業的時間 2個半小時

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

(2).請回答以下問題:
1.網頁主題:史努比 配色與風格設定: 黃黃黃黃~
2.有無遇到的問題? 太多問題了....弄出來跟理想中的差很多,設置語法明明跟老師寫的一樣可是我還是錯的= . =
3.製作感想 我的眼睛...
4.製作作業的時間 3HR

學號:1035445031

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

(2).請回答以下問題:
1.網頁主題:TAEMIN網頁
2.有無遇到的問題? 有,不過已解決
3.製作感想 :加油
4.製作作業的時間:一個下午