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

Advanced

Re: [作業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/~web106-2c/hw07/hw07-105xxxxxxx

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

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



2.上傳至FTP

3.回覆本篇文章

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

1).作業網址:http://mepopedia.com/~css106-2c/hw07/hw07-1055445033/about.html

(2).請回答以下問題:
1.網頁主題:探險活寶-老皮 配色與風格設定: 黃 與 橘 與 黑 與 灰
2.有無遇到的問題? :無
3.製作感想 :過程中有點卡住,但看了影片有解決問題。
4.製作作業的時間 :2小半

1).作業網址:http://mepopedia.com/~css106-2c/hw07/hw07-1055445078/index.html

(2).請回答以下問題:
1.網頁主題:米奇 配色與風格設定: 黃 與 橘 與 黑
2.有無遇到的問題? :無
3.製作感想 :過程中有點卡住,但看了影片有解決問題。
4.製作作業的時間 :4小時



Edited 1 time(s). Last edit at 01/12/2018 06:03PM by 林笠瑄1055445078.
(編輯記錄)

(1).作業網址 :http://mepopedia.com/~css106-2c/hw07/hw07-1055445015/links.html
(2).請回答以下問題:
1.網頁主題: 配色與風格設定:原本想走成熟風,但不知道為何又變得有點可愛了spinning smiley sticking its tongue out
2.有無遇到的問題? 目前沒有
3.製作感想 這次比之前花了多一點時間完成,照著自己喜歡的樣子編排,做出來真開心呢smileys with beer
4.製作作業的時間 5小時左右或許



Edited 1 time(s). Last edit at 01/09/2018 09:42PM by 大漢堡王.
(編輯記錄)

(1).作業網址 ::http://mepopedia.com/~css106-2c/hw07/hw07-1055445039/links.html

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 簡約巧克力風
2.有無遇到的問題? 目前還好
3.製作感想 其實不錯好玩
4.製作作業的時間 約45分鐘



Edited 2 time(s). Last edit at 01/19/2018 12:31AM by 1055445039.
(編輯記錄)

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

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



Edited 1 time(s). Last edit at 01/09/2018 09:55PM by 吳晉瑋.
(編輯記錄)

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

(2).請回答以下問題:
1.網頁主題:配色與風格設定:藍色調
2.有無遇到的問題?語法障礙
3.製作感想做完真的很開心
4.製作作業的時間三小時半

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

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

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

(2).請回答以下問題:
1.網頁主題: Ghost in the shell
2.配色與風格設定: 藍灰現代感
2.有無遇到的問題? 大致上都ok
3.製作感想 :越來越順手
4.製作作業的時間 :2小時



Edited 1 time(s). Last edit at 01/09/2018 10:34PM by 1055445150.
(編輯記錄)

(1).作業網址 :http://mepopedia.com/~css106-2c/hw07/hw07-1055445102/Album.html

1.網頁主題: LADY GAGA
2.配色與風格設定: 清新的簡單的
2.有無遇到的問題?一直重複看影片好多次才做完
3.製作感想 好難!超難!
4.製作作業的時間 1個禮拜



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

(1).作業網址 :http://mepopedia.com/~css106-2c/hw07/hw07-1055445075/making.html

(2).請回答以下問題:
1.網頁主題: 玩具總動員 (我的作業7是在"making"那一頁)
配色與風格設定: 藍色系列
2.有無遇到的問題? 一直把這個caption的CSS語法 寫錯 後來去看講義檢查,才知道要怎麼寫
3.製作感想 :在製作過程中有一直卡住,但看講義之後有解決我的問題了 做完成時感覺很開心
4.製作作業的時間:3~5小時



Edited 4 time(s). Last edit at 01/10/2018 10:27AM by 林宥柔.
(編輯記錄)

(1).作業網址 : http://mepopedia.com/~css106-2c/hw07/hw07-1055445129/works.html

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 粉嫩系
2.有無遇到的問題? 有,不過看影片解決問題了
3.製作感想 :眼睛看到很酸痛QQ
4.製作作業的時間 :很久,我忘記了...



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

1).作業網址:http://mepopedia.com/~css106-2c/hw07/hw07-1055445141/index.html

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



Edited 1 time(s). Last edit at 01/10/2018 01:35AM by 1055445141.
(編輯記錄)

1).作業網址:http://mepopedia.com/~css106-2c/hw07/hw07-1055445156/index.html

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

(1).作業網址: http://mepopedia.com/~css106-2c/hw07/hw07-1055445021/links.html

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 主題是深町NAKA 配色屬暖色系粉橘粉紅 風格溫馨風

2.有無遇到的問題? 語法越變越多 有時候找不到在哪 哈哈

3.製作感想 一樣很開心~~~ 做得好不好不是重點 開心就好~

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



Edited 2 time(s). Last edit at 01/10/2018 05:22AM by exe99703.
(編輯記錄)

(1).作業網址: http://mepopedia.com/~css106-2c/hw07/hw07-1055445132/About.html
(2).請回答以下問題:
1.網頁主題:配色與風格設定:暖色風格
2.有無遇到的問題?沒有太大的問題
3.製作感想 得到了製作網頁的樂趣
4.製作作業的時間3小時半

(1).作業網址:http://mepopedia.com/~css106-2c/hw07/hw07-1055440122/guild.html
(2).請回答以下問題:
1.網頁主題: 新楓之谷
配色與風格設定: 淡色系
2.有無遇到的問題? 右邊表格設定摸索研究了很久...
一直在想要如何搭配讓畫面變得更好看
3.製作感想:很開心能做跟自己有相關的主題,至今仍在摸索當中
表格讓人又愛又恨......
4.製作作業的時間 :5小時



Edited 3 time(s). Last edit at 01/10/2018 04:41PM by Ch2254.
(編輯記錄)

1).作業網址 :http://mepopedia.com/~css106-2c/hw07/hw07-1055445186/video.html
(2).請回答以下問題:
1.網頁主題: 麵包超人
配色與風格設定:橘黃色調
2.有無遇到的問題? 目前沒有
3.製作感想 :這次花了一點時間做 但是做出來還是很開心 有成就感
4.製作作業的時間 :2~3個小時

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

(2).請回答以下問題:
1.網頁主題:BARRY 配色與風格設定: 黑白
2.有無遇到的問題? 無
3.製作感想 中間遇到很多困難 但老師的教學影片很有幫助
4.製作作業的時間 2小時

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

(2).請回答以下問題:
1.網頁主題:oystermusic 配色與風格設定: 咖啡色調
2.有無遇到的問題? 無
3.製作感想:CSS越來越多,容易搞混
4.製作作業的時間 :1小時多

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

(2).請回答以下問題:
1.網頁主題:春艷 配色與風格設定:冷色調
2.有無遇到的問題? 無
3.製作感想:超級複雜超難
4.製作作業的時間 :3小時多

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

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

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

(2).請回答以下問題:
1.網頁主題:p714星球 配色與風格設定:淡藍色與可愛風
2.有無遇到的問題? 忘了怎麼不跟作業六的表格重複到
3.製作感想 還好有找出問題了
4.製作作業的時間 2天



Edited 1 time(s). Last edit at 01/13/2018 10:32PM by 1055445177.
(編輯記錄)

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

(2).請回答以下問題:
1.網頁主題 古老黑魔法 配色與風格設定:暗黑系
2.有無遇到的問題?目前沒事
3.製作感想 好棒喔很有成就感
4.製作作業的時間 1天

(1).作業網址 :http://mepopedia.com/~css106-2c/hw06/hw06-1055443120
(2).請回答以下問題:
1.網頁主題 :决战平安京手游
2.配色與風格設定: 紫色玄幻
2.有無遇到的問題? 无
3.製作感想 累
4.製作作業的時間 7H

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

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

1.網頁主題:林珉萱(小威老師)
配色與風格設定: 粉紫色想走華麗風格
2.有無遇到的問題? 剖成兩半有時候會忘記哪邊是哪邊
3.製作感想:會想加新的東西(但怕壞了XD
4.製作作業的時間 分2天做



Edited 1 time(s). Last edit at 01/14/2018 01:57AM by gigiteng.
(編輯記錄)

(1).作業網址 :http://mepopedia.com/~css106-2c/hw07/hw07-1055445111
1.網頁主題:動物之森
配色與風格設定: 綠色風格
2.有無遇到的問題? 連結問題?!!總之後來解決了XD
3.製作感想 覺得越做越有成就感吧~~
雖然很多東西還是參考老師的
但是參考的過程中學到了不少的東西
4.製作作業的時間
恩........2天?!



Edited 1 time(s). Last edit at 01/15/2018 10:00AM by 1055445111.
(編輯記錄)

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

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

1.網頁主題:B.A.P
配色與風格設定: 灰黑色調 深紅 符合新專輯配色
2.有無遇到的問題? 問題可大了 好不容易才做完 分兩邊之後會一直搞混掉
3.製作感想:應該可以再更豐富..但是我不知道加什麼
4.製作作業的時間 3小時

(1).作業網址 :http://mepopedia.com/~css106-2c/hw07/hw07-1055445063
(2).請回答以下問題:
1.網頁主題: 福山雅治
2.配色與風格設定: 黑灰白色調
2.有無遇到的問題? 無
3.製作感想 難
4.製作作業的時間 2~3小時

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定:
2.有無遇到的問題? 不知道为什么该设定的都做了但是网页没有出现包括颜色什么的,content-R在软件里都正常,到网页上就往下跑,Back也不知道为什么多了很多个
3.製作感想 不会做
4.製作作業的時間 3小时左右

http://mepopedia.com/~css106-2c/hw07/hw07-1055443135
(2).請回答以下問題: 
1.網頁主題: 配色與風格設定: 
2.有無遇到的問題? 不知道为什么该设定的都做了但是网页没有出现包括颜色什么的,content-R在软件里都正常,到网页上就往下跑,Back也不知道为什么多了很多个 
3.製作感想 不会做 
4.製作作業的時間 3小时左右 

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


1.網頁主題:海賊王 ONE PICE

配色與風格設定:黑灰白+紅色系 暗紅色 淺紅色

2.有無遇到的問題? CSS設定錯好幾次 因為覺得有一些長的時在太像了 改一個地方的顏色設定TR TDTH等 結果其他地方也跟著改了eye popping smiley 發現在CSS做的更改是不能按CTRL Z回去的 有些傷心 因為這樣錯的地方就得自己慢慢找慢慢改了

3.製作感想 找資料也很花時間 打了好多字 改好多圖  做錯時覺得心好累 完成時又覺得很有成就感 要花很多時間常常做不完很擔心sad smiley 

感謝老師的教學網站 謝謝老師指導~

4.製作作業的時間 約2天



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

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



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



Edited 2 time(s). Last edit at 01/16/2018 01:00AM by stelas0309.
(編輯記錄)

1).作業網址: http://mepopedia.com/~web106-2c/hw07/hw07-1055445003/member.html



(2).請回答以下問題:
1.網頁主題:one ok rock成員介紹
配色與風格設定:黑白橘紅
2.有無遇到的問題? :剛開始右邊欄位跑不出來 打掉重練後出現了
3.製作感想 : 有時候會冒一些小問題卡住
4.製作作業的時間 :很久



Edited 5 time(s). Last edit at 01/16/2018 01:06AM by i19980730.
(編輯記錄)

作業網址 :http://mepopedia.com/~web106-2c/hw07/hw07-1035471056/personal.html

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

作業網址 :http://mepopedia.com/~web106-2c/hw07/hw07-1035471056/presonal.html
上個鏈接打錯地址 這個是真的 謝謝
(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 時尚
2.有無遇到的問題? 無
3.製作感想 眼睛好雞兒痛
4.製作作業的時間 二十個小時

作業網址 :http://mepopedia.com/~web106-2c/hw07/hw07-1035471056/Presonal.html

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

作業網址 :http://mepopedia.com/~web106-2c/hw07/hw07-1035471056

(2).請回答以下問題:
1.網頁主題: 配色與風格設定:
2.有無遇到的問題? 為什麼我每次回復都看不見 我傳的這是第四次了 老師!這世界還有愛嗎
3.製作感想
4.製作作業的時間 二十小時

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

1.網頁主題: mili
配色與風格設定: 青色舒服
2.有無遇到的問題? 不會做
3.製作感想 好難
4.製作作業的時間 6小時

1).作業網址:http://mepopedia.com/~css106-2c/hw07/hw07-1055445120/Awards.html

(2).請回答以下問題:
1.網頁主題:貓咪飼養
配色與風格設定:黃 橘黃
2.有無遇到的問題? :有些還是不熟
3.製作感想 :至少努力完成了 很開心
4.製作作業的時間 :4小

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

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

(1).作業網址 :http://mepopedia.com/~web106-2c/hw07/hw07-1055445087
(2).請回答以下問題:
1.網頁主題:蠟筆小新 溫馨可愛風格
2.有無遇到的問題? 找不到命名錨點.......
3.製作感想:很難
4.製作作業的時間 很久.....

(1).作業網址 :http://mepopedia.com/~web106-2c/hw07/hw07-1055445042
(2).請回答以下問題:
1.網頁主題:刺客教條 配色與風格設定:黑暗風
2.有無遇到的問題? 目前沒有
3.製作感想 喔YA
4.製作作業的時間 2小時

(1).作業網址 :http://mepopedia.com/~css106-2c/hw07/hw07-1055445168
(2).請回答以下問題:
1.網頁主題:小熊維尼 配色與風格設定:紅白色調
2.有無遇到的問題? : 有 但看講義和影片解決了
3.製作感想 : 感覺比較難一點
4.製作作業的時間 : 忘記時間了~



Edited 1 time(s). Last edit at 01/17/2018 01:49AM by 1055445168.
(編輯記錄)

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

(2).請回答以下問題:
1.網頁主題: blackpink
2.有無遇到的問題? 文字下要用線,但只有有字的地方又線 不能用一整條線
3.製作感想 頭腦要爆炸
4.製作作業的時間 三小時半

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

(2).請回答以下問題:
1.網頁主題: Troye Sivan
配色與風格設定:Blue
2.有無遇到的問題? 雙欄設定上卡住一下
3.製作感想 雙欄式網頁讓整體看起來更加豐富,很有用
4.製作作業的時間 2小時

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

1.網頁主題: 配色與風格設定藍白淺綠可愛
2.有無遇到的問題? 有,外框一直設定不好
3.製作感想 有挫折,因為一直沒辦法改成正確的外框。
4.製作作業的時間 6個小時

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: nba
2.有無遇到的問題? 尽力了
3.製作感想
4.製作作業的時間 三天 真的好难啊