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

Advanced

Re: [作業07]以Float:浮動,製作雙欄網頁

[作業07]以Float:浮動,製作雙欄網頁

請參考

[color=#CC3300][講義07] 以Float:浮動,製作雙欄網頁
http://mepopedia.com/forum/read.php?804,18255[/color]


[color=#CC0066]本講義範例網址
http://mepopedia.com/~jinjin/web/hw07/[/color]


的步驟製作,並符合以下條件:

1. 一、製作步驟


1.下載附件的練習檔(或直接由期末作業方式製作成其中一頁,但必須是全新的內容的一頁,不要與範例內容相同)

2.找文字及圖片資料,並設定#header的標題與副標題

3.重新設定#content及#footer的CSS

4.在#content中插入#content-L及#content-R利用Float:浮動屬性,製作雙欄網頁。

5.在#content-L放入垂直檔覽列。

6.將#content-R的資料以表格整理,複習表格的做法。

[hr]

7.在[color=#990033]title的部分打上『自己作業的命名』[/color]

8.在#footer打上自己的版權聲明

9.請每位同學依步驟完成本單元後,上傳至FTP

10.本次作業的重點在於:

[color=#CC0066](1 )認識多欄網頁。
(2 )雙欄網頁製作
(3 )製作垂直導覽列
(4 )複習表格的做法
(5 )利用CSS,做更細緻的網頁美化設定。 ([/color]


[hr]

2. 二、繳交作業方式



1.製作完成後,檔案命名方式:

[color=#669900]第七個平時作業FTP上的資料夾為:hw07

每位同學請將自己的資料夾命名為:hw07-學號
這個作業的網址則為:http://mepopedia.com/~web105-2b/hw07/hw07-104xxxxxxx

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

存放在 < hw07-學號 > 的資夾內[/color]


2.上傳至FTP

3.回覆本篇文章

(1).作業網址 :http://mepopedia.com/~web105-2b/hw07/hw07-104xxxxxxx

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



[hr]

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/~web105-2b/hw07/hw07-1035443110

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 監獄兔配色及簡單的風格
2.有無遇到的問題? 右欄的標題沒有很整齊的對在位子上
3.製作感想 學到新東西,但還是有困難沒搞懂的地方
4.製作作業的時間 三到四小時

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 以豆豆先生的主色調去搭配
2.有無遇到的問題? 連結的時候格式都會跑掉
3.製作感想 感覺每次的作業都越來越有挑戰性
4.製作作業的時間 5~6小時

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

(2).請回答以下問題:
1.網頁主題:SHERIIDAN
配色與風格設定:因為是做國外有海邊的度假村,所以用藍色為主,有沉靜、自由的意象。

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

3.製作感想: 這次製作的時間比較長,因為我每一頁都改成雙欄,所以很多圖片尺寸和編
排都要再修改,加上很多之前沒看過的語法,而花了很多時間吸收,一開始也遇到一些問
題,所以一直重複看老師的講義和影片,然後自己也一直思考哪裡做錯,之後才慢慢的做
出來,並解決了問題,最後很開心能夠完成這個作業,也發現這真的需要時間的琢磨。

4.製作作業的時間:7~8小時。

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

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

1.網頁主題:小熊維尼(導覽列在第2頁character)

配色與風格設定:一樣以咖啡,澄黃去做整體的搭配,
不只符合小熊維尼主題,也讓人有種溫馨舒服的感覺。

2.有無遇到的問題? 無

3.製作感想:基本上是沒什麼問題,但是在做導覽列的時候,
前面連接的首頁那些不知為何會跟著跑掉,所以之後只好再另存新的style,
而且中間不知道為何傳到隨身碟還整個檔案不見,然後又重做花了好多的時間 sad smiley(


4.製作作業的時間: 8~9小時



Edited 1 time(s). Last edit at 01/03/2017 01:26PM by janny.
(編輯記錄)

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

(2).請回答以下問題:
1.網頁主題:MAMAMOO
配色與風格設定:暗紅,復古風
2.有無遇到的問題?暫無
3.製作感想:錨點的運用讓整個頁面更有趣了一點,可以直接按自己設計的Back按鈕回到頂層,不必一直滑滾輪
4.製作作業的時間:3~4小時

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定:日本神道教
2.有無遇到的問題? 無
3.製作感想 : 雙欄跟表格調整真的好久,css多到快看不懂喇~confused smiley
4.製作作業的時間 6小時

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 因為哈士奇是屬於寒帶犬所以在配色及風格上用於較冷色調,搭配寒帶
溫暖的陽光讓畫面看起來更舒服。
2.有無遇到的問題?
我的雙欄的導覽列我還是沒辦法把旁邊的標示弄掉,求解!
我的back一直沒辦法改顏色sad smiley
3.製作感想
講義寫得很詳細,基本看影音就會懂,原本都滿順利的,自從遇到我上面那兩個
問題後就卡關了, 自今無法解決。

4.製作作業的時間
8-9小時



Edited 2 time(s). Last edit at 01/04/2017 11:27PM by 1045445188.
(編輯記錄)

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

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

1.網頁主題: 手繪關於兩個人的愛情的主題

配色與風格設定:配色風格以簡單穩重的感覺表現

2.有無遇到的問題? 沒有!!

3.製作感想 很開心可以做完他,因為這是屬於自己的東西,不管是繪畫還是編排,做出來很有成就感,但是還會修得更好,想當成期末作品

4.製作作業的時間 3,4天

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

(2).請回答以下問題:
1.網頁主題:美國小天后Selena
配色與風格設定:暖色調
2.有無遇到的問題?一開始座浮動一直不知道怎麼做css
3.製作感想:後來看了兩三次影片就清楚多了
4.製作作業的時間:2~3小時

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

(2).請回答以下問題:
1.網頁主題:畢卡索
配色與風格設定:利用他的作品配色來完成。

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

3.製作感想:雙欄第一次接觸 比想像中的難很多 一直遇到格子跑掉的問題 或是content-L的背景是要在content設定
可是怎麼用都用不好真是氣死 但看了老師的影片真的很清楚讚讚

4.製作作業的時間:一天。

作業網址 :http://mepopedia.com/~web105-2b/hw07/hw07-1045445161


1.網頁主題:路易莎咖啡
配色與風格設定:配色暖系,以LOGO的標準色來配色,想要塑造出溫暖幸福的感覺

2.有無遇到的問題?
content-L content-R 一開始設定不出來,會慌,但看影片一步一步重新來過可以解決

3.製作感想
越來越像一個真正的網站了! 期待下學期的進階網頁設計 !

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

(1).作業網址 :http://mepopedia.com/~web105-2b/hw07/hw07-1045445080
(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 簡介的地方用比較簡單的色彩歷程的地方用比較活潑的顏色
2.有無遇到的問題? 無
3.製作感想 :很有成就感
4.製作作業的時間: 2~3小時

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 黑白,依團體形象去做
2.有無遇到的問題? 雙攔的個別設定~
3.製作感想 :雖然花比較多的時間去設定,但做完有些成就感喇~
4.製作作業的時間 : 3~4小時

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

(2).請回答以下問題:
1.網頁主題:銀魂
配色與風格設定: 配合角色風格,藍色、白色
2.有無遇到的問題? 還好欸
3.製作感想: 網頁....嗯
4.製作作業的時間: 2小時

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

(2).請回答以下問題:
1.網頁主題:Ariana Grande
配色與風格設定:紫色調
2.有無遇到的問題?無
3.製作感想:BACK那邊有遇到一點小問題,不過後來有發現雖然有點小難度不過還是順利做好了。
4.製作作業的時間:3~4小時

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

(2).請回答以下問題:
1.網頁主題: 暗色系
2.有無遇到的問題? 無
3.製作感想 : 做得好累 可是很有成就感
4.製作作業的時間 4.5小時

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 可愛幾米
2.有無遇到的問題? 沒有吧
3.製作感想 又多了很多新功能spinning smiley sticking its tongue out
4.製作作業的時間 3~4小時

1).作業網址:http://mepopedia.com/~web105-2b/hw07/hw07-1045445155
(2).請回答以下問題:
1.網頁主題:草間彌生
配色與風格設定:圓點點
2.有無遇到的問題?有 雙欄部分 搞了很久
3.製作感想:有遇到一點小問題,後來解決了 也感謝朋友的協助
4.製作作業的時間:3~4小時

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

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

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

(2).請回答以下問題:
1.網頁主題:慢慢說樂團
2.有無遇到的問題?
我的雙蘭一直跑掉很奇怪後來改好了
3.製作感想
講義很清楚,幫助我做作業

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

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

(2).請回答以下問題:
1.網頁主題:Ariana Grande
配色與風格設定:紫色調
2.有無遇到的問題?無
3.製作感想:BACK那邊有遇到一點小問題,不過後來有發現雖然有點小難度不過還是順利做好了。
4.製作作業的時間:3~4小時

作業網址 :http://mepopedia.com/~web105-2b/hw06/hw06-1045445149

請回答以下問題:
1.網頁主題: 配色與風格設定:
紅白可樂風
2.有無遇到的問題?

3.製作感想
雙欄真的很難,複雜,繁瑣,費時,號精神,但我還是做完了
4.製作作業的時間
2hr

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定:
可愛、鮮明&淺色系為主,風格可愛
2.有無遇到的問題?
第一次做雙欄,做到快爆炸,有時候會不知道要點哪個
3.製作感想
花了時間努力做出來了,覺得心情很好,學會新東西很開心
4.製作作業的時間
3~4小時(搞了很久哈哈)

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定:
可愛、鮮明&淺色系為主,風格可愛
2.有無遇到的問題?
第一次做雙欄,做到快爆炸,有時候會不知道要點哪個
3.製作感想
花了時間努力做出來了,覺得心情很好,學會新東西很開心
4.製作作業的時間
3~4小時(搞了很久哈哈)

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定:
可愛、鮮明&淺色系為主,風格可愛
2.有無遇到的問題?
第一次做雙欄,做到快爆炸,有時候會不知道要點哪個,做完發現index的CSS不見了 難怪點進去是亂的
3.製作感想
花了時間努力做出來了,覺得心情很好,學會新東西很開心~
4.製作作業的時間
3~4小時(搞了很久哈哈)

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定:暗黑
2.有無遇到的問題? 雙欄很麻煩
3.製作感想 複雜
4.製作作業的時間 2小時

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

(2).請回答以下問題:
1.網頁主題:super junior
配色與風格設定:粉色系
2.有無遇到的問題? 雙欄的css設定一直無法很好看
3.製作感想 : 雙欄的架構是所有作業最麻煩的,好險有老師的教學影片,讓我可以邊看邊做。
4.製作作業的時間 5小時

(1).作業網址 :http://mepopedia.com/~web105-2b/hw07/hw07-1045445077
(2).請回答以下問題:
1.網頁主題:ARASHI嵐
配色與風格設定:黃色紅色為主
2.有無遇到的問題? 雙欄的css設定一直無法很好看
3.製作感想 :雙欄有點難做
4.製作作業的時間 3小時



Edited 16 time(s). Last edit at 01/11/2017 02:27PM by 1045445077.
(編輯記錄)

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

(2).請回答以下問題:
11.網頁主題:Bravest Warriors
配色與風格設定:是個比較科技化的美國動畫,所以已比較鮮艷活潑的色彩設計。
2.有無遇到的問題? 基本上沒有太大的問題
3.製作感想 : 覺得越來越熟練QQ
4.製作作業的時間 5小時

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

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

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

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

1.網頁主題: 配色與風格設定: 懸疑感 。

2.有無遇到的問題? 找到問題已經解決了。

3.製作感想 : 雙欄比較複雜,剛開始做雙欄時,設定錯誤,導致後續幾頁都跑位,
經過重新在做過一次後,問題都解決了,也更了解雙欄的東西。

4.製作作業的時間:1天

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

(2).請回答以下問題:
1.網頁主題:魔鏡夢遊
配色與風格設定: 以背景的紫色來呈現出神秘而奇幻的感覺,則黃色是想呈現華麗的感覺,這兩種顏色都是去吸header圖片裡的顏色。
2.有無遇到的問題?
Actor演員的頁面的back沒辦法靠右,雙欄部分的命名苗點在網路上查,大家都說cc版的命名苗點被移除掉了,所以雙欄部分沒辦法做命名苗點。
3.製作感想
感覺愈到後面,雖然學得越多,但問題也會跟著變多。
4.製作作業的時間 5~6小時

(1).作業網址 :http://mepopedia.com/~web105-2b/hw07/hw07-1045445152
[color=#666666]
(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 步步系列與篇紫色神秘色彩
2.有無遇到的問題? 應該沒有
3.製作感想 又學到新的了 不過覺得腦容量快裝不下了....
4.製作作業的時間 三到四小時[/color]

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

(2).請回答以下問題:
1.網頁主題:名偵探柯南
配色與風格設定:沉穩 簡單

2.有無遇到的問題? 回覆的網頁和交的檔案開起來不同,回覆的網頁圖片跑不出來,但交在FZ的檔案又是正常的

3.製作感想: 覺得終於有一點成就感了

4.製作作業的時間:7~8小時。



Edited 1 time(s). Last edit at 01/12/2017 11:50AM by 1045445104.
(編輯記錄)

作業網址 :http://mepopedia.com/~web105-2b/hw07/hw07-1025445119

網頁主題:鄭秀晶
配色與風格設定:看起來舒服乾淨的感覺
有無遇到的問題:用不起來.....
製作感想:雙欄不好調整
製作作業的時間:四五小時

作業網址 :http://mepopedia.com/~web105-2b/hw07/hw07-1045445065

1.網頁主題: 配色與風格設定:宇宙黑風格
2.有無遇到的問題: N
3.製作感想 : N
4.製作作業的時間 : 2days

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

(2).請回答以下問題:
1.網頁主題:KAKAO
配色與風格設定:活潑的撞色

2.有無遇到的問題? 顏色跑掉

3.製作感想: 網頁真的好難

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

(1).作業網址 :http://mepopedia.com/~web105-2b/hw07/hw07-1045445122/cast

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

1、作業網址:http://mepopedia.com/~web105-2b/hw07/hw07-1045445170
2、.請回答以下問題:
網頁主題:星座
配色與風格設定: 基本以藍綠為基底,對應火象星座,所以content-Rm用紅粉為主。
2.有無遇到的問題? 表格怪怪的
3.製作感想:雖然做出來很有成就感,但中間遭遇的挫折也很多。
4.製作作業的時間:1~2小時

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

(2).請回答以下問題:
1.網頁主題:星座 配色與風格設定:以星空的紫色和藍色帶點粉色為主
2.有無遇到的問題? 當中的設定有點混亂,旁邊的雙欄很難有反應,但還可以改善
3.製作感想:因為本身對星座感興趣,所以製作過程中蠻快樂的
4.製作作業的時間:6小時

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

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