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/~web103-a/hw07/hw07-102xxxxxxx

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

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



2.上傳至FTP

3.回覆本篇文章

(1).作業網址 :

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





3. 上課影音


以Float:浮動,製作雙欄網頁 雙欄Float:浮動、Table:表格、錨點、垂直導覽列
http://youtu.be/pj6f8GQKIu8



1.作業網址:http://mepopedia.com/~web103-a/hw07/hw07-1005445193
2.網頁主題:文具控的異想世界
3.配色與風格設定:簡約風,每頁都有不同的顏色,以粉色系為主。
4.有無遇到的問題?我的content-R不知道為什麼都沒辦法與上面對齊...
5.製作感想:變得很複雜,css要看很久才知道自己要找哪個東西要改什麼,不過抓到訣竅後就還好了。
6.製作作業的時間:1天

1005445193/徐芯儀

12/31:content-R的問題解決了!謝謝老師 thumbs up

1.作業網址:http://mepopedia.com/~web103-a/final/final-1025445217
2.網頁主題:速度與激情
3.配色與風格設定:簡約,
4.有無遇到的問題?
5.製作感想:變得很複雜,
6.製作作業的時間:2小時

1025445217 林樂洲

3.回覆本篇文章

(1).作業網址 :http://mepopedia.com/~web103-a/hw07/hw07-1025445064/links.html

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 主角的配色風格
2.有無遇到的問題? 設定右欄背景填滿顏色會讓別頁也跟著改
3.製作感想 :兩欄感覺又不一樣了!!,看似簡單的欄頁 搞好久O_______O
4.製作作業的時間 :3小時

1025445064

(1).作業網址 :http://mepopedia.com/~web103-a/hw07/hw07-1025445046/books.html
(2).請回答以下問題:
1.網頁主題: 配色與風格設定:以期中作業延續
2.有無遇到的問題?這次跟著影片一步一步慢慢做,都有仔細注意每個步驟,
所以沒什麼太大的困難,算做得很順利,只是花比較多時間,但是同樣的問題,
為什麼我上傳FileZilla內容就會亂掉,我自己從USB開起都沒問題,要怎麼處理才好?
同樣有多附一個"完整的樣子2"JPG檔給老師您看。
3.製作感想: 終於畫面有比之前做的再完整一點了!覺得很開心,接下來就是細修的部
分了,希望能再做的豐富一點。
4.製作作業的時間:8小時

1025445046



Edited 1 time(s). Last edit at 12/31/2014 10:08AM by Xin Lin.
(編輯記錄)

1.作業網址:http://mepopedia.com/~web103-a/hw07/hw07-1025445133
2.網頁主題:妖怪少爺,目前與之前的配置一樣
3.配色與風格設定:跟上次一樣,藍色系為主,淺黃色為輔
4.有無遇到的問題? 目前沒有
5.製作感想:終於了解錨點連結是如何製作的。
6.製作作業的時間:2小時

1025445133 林哲立

(1).作業網址 :http://mepopedia.com/~web103-a/hw07/hw07-1025445079
(2).請回答以下問題:
1.網頁主題: 奈良美智
2.有無遇到的問題?做完之後覺得被搞混,css太多東西要設定了到後面都忘記哪個是哪個
雖然我做完了但是網址跑出來的東西很奇怪=_=
3.製作感想: 累
4.製作作業的時間:一整天= =


表格在第二頁-->LIFE

(1).作業網址 : http://mepopedia.com/~web103-a/hw07/hw07-1005445196

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 粉嫩色系
2.有無遇到的問題? 字的間距一直調不好
3.製作感想 酸然很開心做想要的主題 可是因為語法常常搞混 所以還是會覺得麻煩
4.製作作業的時間 4小時


視傳4B 1005445196 張靜怡

1.作業網址:http://mepopedia.com/~web103-a/hw07/hw07-1025445169/people1.html
2.網頁主題:肥貓逗小強
3.配色與風格設定:以他的卡通配色
4.有無遇到的問題? 很多問題
5.製作感想:好難
6.製作作業的時間:5小時

1025445169/視傳2A/古佳綺



Edited 1 time(s). Last edit at 12/31/2014 02:23AM by chia chi.
(編輯記錄)

(1).作業網址 : http://mepopedia.com/~web103-a/hw07/hw07-1025445175

(2).請回答以下問題:
1.網頁主題: 配色與風格設定:kobits
2.有無遇到的問題? 表格一直歪歪的 對不上
3.製作感想 語法看不懂 覺得好難 有做的好掉漆 sor
4.製作作業的時間 4小時

1.作業網址:http://mepopedia.com/~web103-a/hw07/hw07-1025445223
2.網頁主題:JOJO的奇妙冒險
3.配色與風格設定:綠色系
4.有無遇到的問題? footer無法和上面對齊
5.製作感想:做網頁做到最想不做人的一次【笑
6.製作作業的時間:三個小時

1025445223 王芷漪

MEPOERs said:
1015445218: 你的footer放錯地方囉~是要包在weapper裡面,這樣就會對齊了哦^^
(1).作業網址 :http://mepopedia.com/~web103-a/hw07/hw07-1025445136

(2).請回答以下問題:
1.網頁主題:勇闖東方 郝毅博 配色與風格設定:東方黃土土風格
2.有無遇到的問題?期末戰事不斷,身心俱疲,急需殺出重圍
3.製作感想:愈想愈拖,不敢多想
4.製作作業的時間 :~4hr

1).作業網址 : http://mepopedia.com/~web103-a/hw07/hw07-1025445049/
(2).請回答以下問題:
1.網頁主題:我愛的名畫 配色與風格設定: 夢幻紫色風格
2.有無遇到的問題:有~表格設定後,及時候,東西會不見
3.製作感想 :有點小複雜
4.製作作業的時間 :兩小時

1025445049



Edited 1 time(s). Last edit at 12/31/2014 09:25AM by Angelina.
(編輯記錄)

(2).請回答以下問題:
1.網頁主題:
2.有無遇到的問題? 設定很容易設定錯
3.製作感想:做完很累
4.製作作業的時間 4小時

MEPOERs said:
1015445218: 作業網址:http://mepopedia.com/~web103-a/hw07/hw07-1025445037/
1015445218: 作業網址:http://mepopedia.com/~web103-a/hw07/hw07-1025445037/
(1).作業網址 : http://mepopedia.com/~web103-a/hw07/hw07-1025445139/team.html

(2).請回答以下問題:
1.網頁主題:排球少年-烏野高中
配色與風格設定:代表烏野的配色是黑橘白,整個網站的顏色都不會偏離這三種色。
2.有無遇到的問題? 主要還是css很容易跑掉啦,瑣碎的問題倒是還好…最上面有條黑色的玩意兒不知道怎麼消掉,很煩
3.製作感想 太爽啦~然後在頭像那裡我有藏小驚喜,嘿嘿
4.製作作業的時間:整個晚上噢啾咪☆

3.回覆本篇文章

(1).作業網址 :http://mepopedia.com/~web103-a/hw07/hw07-1025445091

(2).請回答以下問題:
1.網頁主題:Vincent van Gogh 在第5頁
配色與風格設定:藍綠色和灰色
2.有無遇到的問題? 應該沒有
3.製作感想 :花了很久設定兩欄的格式
4.製作作業的時間 :3小時

1025445091



Edited 1 time(s). Last edit at 12/31/2014 03:39PM by 小碧.
(編輯記錄)

(1).作業網址 : http://mepopedia.com/~web103-a/hw07/hw07-1025445037

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

1.作業網址:http://mepopedia.com/~web103-a/hw07/hw07-1005445195/
2.網頁主題:德國國家足球隊
3.配色與風格設定:使用德國國旗配色
4.有無遇到的問題?有 但很難用文字表達
5.製作感想:有點複雜,但完成後很有成就感
6.製作作業的時間:2H

1005445195/黃沛容

(1).作業網址 : http://mepopedia.com/~web103-a/hw07/hw07-1025445124/color.html

(2).請回答以下問題:
1.網頁主題: 配色與風格設定:插畫 簡單
2.有無遇到的問題? 一開始雙欄的時候有點亂格式一直跑掉
3.製作感想:很有成就感
4.製作作業的時間:3.5小時

http://mepopedia.com/~web103-a/hw07/hw07-1025445106/

請回答以下問題:
1.網頁主題: 配色與風格設定: 藍色為主
2.有無遇到的問題? 連結很長跑不出來
3.製作感想 :兩欄之間很難用了很久
4.製作作業的時間 :3天



Edited 2 time(s). Last edit at 01/06/2015 10:29PM by j840516.
(編輯記錄)

1.作業網址:http://mepopedia.com/~web103-a/hw07/hw07-1025445202
2.網頁主題:以期中作業延續
3.配色與風格設定:以期中作業延續
4.有無遇到的問題:按鈕下面有一條白線不知怎用掉
5.製作感想:解錨點連結如何製作,有些地方還不是很了解
6.製作作業的時間:4小時

1025445202 林彥希

1).作業網址 : http://mepopedia.com/~web103-a/hw07/hw07-1025445199/
(2).請回答以下問題:
1.網頁主題:喜歡的偶像 配色與風格設定: 深淺配色綠色風格
2.有無遇到的問題:有,表格會一直跑來跑去,東西過多,會不知道自己已經做到哪個步驟。
3.製作感想 :雖然有點小複雜,而且比之前還要來的難一些些,但是做完之後非常有成就感!
4.製作作業的時間 :一天

1025445199

1).作業網址 : http://mepopedia.com/~web103-a/hw07/hw07-1025445073/
(2).請回答以下問題:
1.網頁主題:老師下載檔
2.有無遇到的問題:有,依然不會插入影片。
3.製作感想 :頭好痛......我的腦容量已爆
4.製作作業的時間 :3小時

(1).作業網址 :http://mepopedia.com/~web103-a/hw07/hw07-1025445031
(2).請回答以下問題:
1.網頁主題: 無印良品 配色與風格設定:簡約
2.有無遇到的問題? 不知道怎麼改HOME顏色
3.製作感想:無
4.製作作業的時間:2天



Edited 1 time(s). Last edit at 01/07/2015 06:47PM by love0920dt.
(編輯記錄)

1.作業網址:http://mepopedia.com/~web103-a/hw07/hw07-1005445076
2.網頁主題:東京迪士尼樂園
3.配色與風格設定:簡單清晰
4.有無遇到的問題?要看影片很多設定都會找不到
5.製作感想:很難
6.製作作業的時間:半天


1025445076 葉珈妤

1.作業網址:http://mepopedia.com/~web103-a/hw07/hw07-1025445097
2.網頁主題:
3.配色與風格設定:
4.有無遇到的問題:
5.製作感想:語法比之前的還要複雜
6.製作作業的時間:1天

1025445097陳慶芳

1.作業網址:http://mepopedia.com/~web103-a/hw07/hw07-1025445076
2.網頁主題:東京迪士尼
3.配色與風格設定:簡潔明瞭
4.有無遇到的問題?語法很難..
5.製作感想:變得很複雜,要看教學
6.製作作業的時間:1天

作業網址 : http://mepopedia.com/~web103-a/hw07/hw07-1025445070/hisexperience.html

請回答以下問題:
1.網頁主題&配色與風格設定:2NE1&黑白兩色
2.有無遇到的問題:這次雙欄設定比較多,有點混亂,但大致上沒什麼大問題。
3.製作感想:因為加上雙欄的關係,網頁看起來質感比以前更好了,感覺頗有成就!
4.製作作業的時間:2小時

1025445070

(1).作業網址 : http://mepopedia.com/~web103-a/hw07/hw07-1025445082/

(2).請回答以下問題:
1.網頁主題:UNLIGHT遊戲 配色與風格設定:桃、紅、紫、黑等,哥德風
2.有無遇到的問題?那個List的!點!點!消不掉
3.製作感想 最後放了消除點點的語法還是沒有效果
4.製作作業的時間 2~3小時

/



Edited 1 time(s). Last edit at 01/11/2015 12:42AM by lele831230.
(編輯記錄)

(1).作業網址 ::http://mepopedia.com/~web103-a/hw07/hw07-1025445130 (在最後一頁)


(2).請回答以下問題:
1.網頁主題: 配色與風格設定:依照主要照片配色
2.有無遇到的問題? 按鈕部分浩很多時間
3.製作感想 無
4.製作作業的時間 4小時

1025445130



Edited 1 time(s). Last edit at 01/11/2015 12:43AM by lele831230.
(編輯記錄)

1.作業網址:http://mepopedia.com/~web103-a/hw07/hw07-1025445100
2.網頁主題:東京蚤之市
3.配色與風格設定:懷舊復古風
4.有無遇到的問題? 左側欄位的標示一直有底線,試了很久還是無法將它成功移除.
5.製作感想:雙欄真的好複雜又好難,雖然有講義的協助幫上了很大的忙,可是編排還有設定還是很花時間跟精力
6.製作作業的時間:8小時

1025445100 葉芳羽

作業網址 http://mepopedia.com/~web103-a/hw07/hw07-1025445067

網頁主題:食。客Diners
配色與風格設定: 走日本清新淡色彩
有無遇到的問題:做雙欄的時候東西一直跑掉,做的畫面跟即時的畫面都不一樣
製作感想:覺得網頁真的是需要超長~~~~~~~~~時間來做的....
製作作業的時間 :3h30

(1).作業網址: http://mepopedia.com/~web103-a/hw07/hw07-1025445001/album.html

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 同期中作業
2.有無遇到的問題:雙欄語法較多,有點混亂。
3.製作感想:比之前更要有質感,而且也能因為導覽列分得更清楚。
4.製作作業的時間:4個小時...(?

1025445001 蘇柔羽




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

1.作業網址:http://mepopedia.com/~web103-a/hw07/hw07-1025445085
2.網頁主題:小天使
3.配色與風格設定:復古卡通風
4.有無遇到的問題?上傳網頁一直不成功,快殺人了
5.製作感想:認真看影片就對了
6.製作作業的時間:數小時

1025445085 楊婷淵



Edited 1 time(s). Last edit at 01/12/2015 12:38PM by 1025445085.
(編輯記錄)

1.作業網址:http://mepopedia.com/~web103-a/hw07/hw07-1005445187
2.網頁主題:外星人
3.配色與風格設定:黑灰白色系為主。
4.有無遇到的問題?有時做好開起來又不一樣
5.製作感想:覺得複雜
6.製作作業的時間:3h

1005445187 戴靖庭

1.作業網址:http://mepopedia.com/~web103-a/hw07/hw07-1025445181
2.網頁主題: 迪士尼
3.配色與風格設定: 藍色系
4.有無遇到的問題: 很難很複雜
5.製作感想:語法比之前的還要複雜
6.製作作業的時間:1天

1025445181 徐鄀凡

http://mepopedia.com/~web103-a/hw07/hw07-1025445178/

1.網頁主題: 配色與風格設定:簡約
2.有無遇到的問題?
錨點要連的時候一直搞不清楚XD問了老師才了解
而且FOOTER一直跑掉>< 找了老師幾趟才知道問題出在哪><

3.製作感想 : 很累~~~但是有做出來而且是做自己喜歡的樂團~~很開心
4.製作作業的時間 : 好久喔(應該有四天) ~~

1.作業網址:http://mepopedia.com/~web103-a/hw07/hw07-1025445097
2.網頁主題:星巴克咖啡廳
3.配色與風格設定:簡約風,用星巴克深紅色與墨綠色還有灰色系做配色風格
4.有無遇到的問題:剛開始不知道怎麼連結後來用好了
5.製作感想:要邊看影片才想到要怎麼做,語法太複雜
6.製作作業的時間:1天半

視傳二A1025445097陳慶芳

1.作業網址:http://mepopedia.com/~web103-a/hw07/hw07-1025445160/index.html
2.網頁主題:以期中作業延續
3.配色與風格設定:簡潔乾淨
4.有無遇到的問題:照著老師步驟蠻順利的
5.製作感想:覺得又多學到一些東西 很有成就感
6.製作作業的時間:2-3小時

1025445160吳羽筑

1.作業網址:http://mepopedia.com/~web103-a/hw07/hw07-1025445043
2.網頁主題:電癮人工作室
3.配色與風格設定:簡約風,,以淡黃色跟黑白藍為主。
4.有無遇到的問題?title設定無法顯示
5.製作感想:越來越靠近想法中的樣子
6.製作作業的時間:6小時

1005445043

1.作業網址:http://mepopedia.com/~web103-a/hw07/hw07-1025445040
2.網頁主題:貓
3.配色與風格設定:粉 橘 白,簡單可愛。
4.有無遇到的問題? 放錯表格,一直無法移動,最後才發現。
5.製作感想:表格能清楚整理資料,善用表格會使網頁更方便閱讀。
6.製作作業的時間:2小時

1025445040 王淑瑜

1.作業網址:http://mepopedia.com/~web103-a/hw07/hw07-1025445055
2.網頁主題:YinCang個人網頁
3.配色與風格設定:白、簡約。
4.有無遇到的問題? 影片編碼有誤。
5.製作感想:簡約有優點也有缺點,過度則是單調。
6.製作作業的時間:三小時

1025445055 許淑雯

(1).作業網址 :http://mepopedia.com/~web103-a/hw07/hw07-1025445025/#.VLU74SuUffI
(2).請回答以下問題:
1.網頁主題: 龍貓
2.有無遇到的問題?字會跑位
3.製作感想: 難
4.製作作業的時間:下午時間



Edited 1 time(s). Last edit at 01/13/2015 11:38PM by 許函郁.
(編輯記錄)

1.作業網址:http://mepopedia.com/~web103-a/hw07/hw07-1025445178
2.網頁主題:酷玩樂團-我愛酷我在
3.配色與風格設定:簡約風,以藍綠深色系為主,一般的排版

4.有無遇到的問題?Content-R會跑到右邊QQ沒有辦法跟老師說的一樣在左邊做連結
5.製作感想:看了老師的作法,自己做有點手忙腳亂,從大招裡面一個一個仔細看慢慢改,就覺得沒那麼困難
6.製作作業的時間:2天

BY張祐寧 1025445178


1.作業網址:http://mepopedia.com/~web103-a/hw07/hw07-1025445184
2.網頁主題:superdry
3.配色與風格設定:黑橘色為主,白為輔
4.有無遇到的問題? 只要可以command+c+v都不是問題了
5.製作感想:終於完成了。
6.製作作業的時間:2小時

1.作業網址:http://mepopedia.com/~web103-a/hw07/hw07-1025445052/story.html
2.網頁主題:Lana Del Rey拉娜·德芮
3.配色與風格設定:簡約風,以黑白色系為主。
4.有無遇到的問題?看影片+問同學就可以解決問題
5.製作感想:變得很複雜,css要看很久才知道自己要找哪個東西要改什麼,不過抓到訣竅後就還好了。
6.製作作業的時間:5小時

1025445052 鄭博宇

1.作業網址:http://mepopedia.com/~web103-a/hw07/hw07-1025445205/
2.網頁主題:Minecraft
3.配色與風格設定:搭配上遊戲中的元素 採用綠色矽
4.有無遇到的問題:雙欄難用- -
5.製作感想:可以創造自己喜歡的網頁 有趣
6.製作作業的時間:3個禮拜拔 重一開始上課做~這樣

1.作業網址:http://mepopedia.com/~web103-a/hw07/hw07-1025445163
2.網頁主題:羅志祥官方網站
3.配色與風格設定:黑 粉紅
4.有無遇到的問題? 滿多的欸 有點困難
5.製作感想:做出來很有成就感
6.製作作業的時間:三小時

1025445163 曾國鼎

http://mepopedia.com/~web103-a/hw07/hw07-1025445217
1.網頁主題: 配色與風格設定: 同期末作業
2.有無遇到的問題:雙欄語法多,混亂。
3.製作感想:比之前更要有質感,而且也能因為導覽列分得更清楚。
4.製作作業的時間:2個小時..

1.作業網址:C:\Users\usercoert\Desktop\final-1035445142\index.html
2.網頁主題:多啦a夢
3.配色與風格設定:跟上次一樣,藍色系為主,減單淡色色系為主
4.有無遇到的問題? 步驟很複雜
5.製作感想:很難有成就感
6.製作作業的時間:3小時