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,可參考影音步驟,但不可為一樣的設定

Dreamweaver中#content、#footer、h2、項目清單的CSS設定
http://www.youtube.com/watch?v=gvI0qYcn9ko




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/~web100b/hw07/hw07-100xxxxxxx

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

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


2.上傳至FTP

3.回覆本篇文章

(1).作業網址 :

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


[color=#CC0099]請務必在下次上課前回覆,否則為遲交[/color]



Attachments:
開啟 | 下載 - hw07-ex.rar (148.4 KB)
(1).作業網址 : http://mepopedia.com/~web100b/hw07/hw07-1001445042/

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 依其中設定
2.有無遇到的問題? 沒有太大問題
3.製作感想 :終於交雙欄了~作起來好有成就感,而且看起來更完整了呢*OWO/
4.製作作業的時間 4~5個小時(吧?

MEPOERs said:
JinJin: 頭香喔!很認真做的不錯喔!
(1).作業網址 : http://mepopedia.com/~web100b/hw07/hw07-1001445081

(2).請回答以下問題:
1.網頁主題: 黑白簡單色
2.有無遇到的問題? 沒有太大問題
3.製作感想 :雙欄感覺很專業哈
4.製作作業的時間 兩天

(1).作業網址 : http://mepopedia.com/~web100b/hw07/hw07-1001445123/

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 跟期中一樣
2.有無遇到的問題? 為什麼在DW 的排版完全練七扒遭的(header 跟footer都歪掉了),可是用網路檢視 卻很正常?
3.製作感想 :雙欄有點複雜 差點就hold不住了!! 不過做完很有成就感 !! 老師以後講義可不可以附影音檔阿 講義如果要先偷跑 好難看懂 confused smiley
4.製作作業的時間 大概3.4小時吧...


--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
老師,其實講義也很清楚拉!! 布知道那時後有點看不下去 今天卻好順利~ haha
我改好摟 smiling smiley

MEPOERs said:
JinJin: 我有空會做的(握拳)~感謝小多比的捧場
JinJin: DW我們就把它當成輔助參考工具好了,預覽有問題是正常的啊!
(1).作業網址 : http://mepopedia.com/~web100b/hw07/hw07-1001445049/flower.html


(2).請回答以下問題
1.網頁主題: 配色與風格設定:同期中
2.有無遇到的問題? 無
3.製作感想: 原來2欄式製作方式沒有自己想像的那麼複雜、困難。
4.製作作業的時間: 3小時多

(1).作業網址 :http://mepopedia.com/~web100b/hw07/hw07-1001445115

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 依期中設定
2.有無遇到的問題? 沒有什麼問題smiling smiley
3.製作感想 :雙欄方便多了, 資訊整理起來也更有系統了smiling smiley)
4.製作作業的時間:6個小時左右,因為我把其他連結都一起改了,所以雙欄的作業7都做在第二和第三的連結



Edited 1 time(s). Last edit at 12/02/2011 08:23PM by ryan40319.
(編輯記錄)

http://mepopedia.com/~web100b/hw07/hw07-1001445010

1.網頁主題: 我的貓貓樂園
配色與風格設定: 溫馨粉紅

2.有無遇到的問題? 應該沒啥問題
3.製作感想 :東西開始有點複雜~
4.製作作業的時間:3.5小時

http://mepopedia.com/~web100b/hw07/hw07-1001445026/

1.網頁主題: 配色與風格設定:照之前期中的做!
2.有無遇到的問題? 講義很詳細!超清楚!
3.製作感想 終於兩欄了!
4.製作作業的時間 五個小時+兩節課



Edited 1 time(s). Last edit at 12/03/2011 04:59PM by 1001445026.
(編輯記錄)

http://mepopedia.com/~web100b/hw07/hw07-1001445075

1.網頁主題: 同上一次主題

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

3.製作感想 雙欄架構讓網頁看起來更完整了 smiling smiley

4.製作作業的時間 約3小時

(1).作業網址 :
http://mepopedia.com/~web100b/hw07/hw07-1001445119/video.html

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: spinning smiley sticking its tongue out跟hw06一樣是自己的設計為主 黑暗風格 而這次雙欄頁面是介紹我喜歡的動畫家為主
2.有無遇到的問題? eye popping smiley為何我字總是跑出框框外 sad smiley而且字行跟在 DW 中差好多
moody smiley然後不同瀏覽器看到都不一樣 (IE瀏覽器連看都不能看????)

3.製作感想 eye rolling smiley很努力做出我的作業 但看似成效不佳(跟在DW中差好多QQQQQ) 謝謝老師~!!!
4.製作作業的時間 spinning smiley sticking its tongue out 3~4小時

MEPOERs said:
HP: 你把 #content 的 CSS 中的屬性設定 white-space: pre; 拿掉就可以了。原理是 pre 會讓文字不會自動換行(呈現原貌),所以表格就被撐大了。不過你目前的作法在 IE6 中看是正常的。
(1).作業網址 : http://mepopedia.com/~web100b/hw07/hw07-1001445008/black.html

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 由期中作業改
2.有無遇到的問題? 左邊的字有東西,不知如何用掉,可是自己預覽時沒有出現.
3.製作感想 很複雜,但是做完很有成就感 grinning smiley
4.製作作業的時間 2.5hr

(1).作業網址 : http://mepopedia.com/~web100b/hw07/hw07-1001445032/

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 老樣子粉紅色版面
2.有無遇到的問題?剛開始不太懂,摸索了一下就會了
3.製作感想 :舊的東西拿來改一改,不難
4.製作作業的時間 1~2小時

http://mepopedia.com/~web100b/hw07/hw07-1001445006/photo2.html

請回答以下問題:

1.網頁主題:期中作業
配色與風格設定:黑白灰

2.有無遇到的問題?
一不小心就會整個亂掉,老師我的content-L怪怪的...

3.製作感想
這也太累了吧!!!!感覺沒很難,但每個東西都要調,調到我都眼花了...
但有越來越精緻的感結~

4.製作作業的時間
6小時...晚安

-

(1). 作業網址 : http://mepopedia.com/~web100b/hw07/hw07-1001445022/

(2). 請回答以下問題:
1. 網頁主題:
   配色與風格設定: 黑白灰的搭配
2. 有無遇到的問題? :跨瀏覽器總是有許多問題存在
3. 製作感想:網頁跨瀏覽器的問題真的很傷腦筋
       在 IE 看有許多問題,有時間在重新處理一次之後上傳
4. 製作作業的時間:3 小時左右

-

http://mepopedia.com/~web100b/hw07/hw07-1001445030

1. 以藍色與白色搭肩,顯現出一種清爽的感覺

2. 一開始在設定左右攔框的時候,感覺有點複雜,就會覺得怎摸弄都怪怪的,還有再設定右邊按鈕的時候,也有些遲疑,命名的時候還要了解或是尋找一下。

3. 老師的講義做得很完整,所以一看就懂,然後慢慢操作,自然上手,不要講求快,用心看自然能體會。但只做了雙攔以前的東西都沒用上去ˊ口ˋ

4. 3H



Edited 1 time(s). Last edit at 12/07/2011 12:15PM by 貝珼.
(編輯記錄)

http://mepopedia.com/~web100b/hw07/hw07-1001445012/index.html

我連結全都重連了
但我的"產品代言"怪怪的
浮動我....不會對不起==""
3個小時...

http://mepopedia.com/~web100b/hw07/hw07-1001445004/

1.網頁主題: 配色與風格設定:和之前依樣
2.有無遇到的問題?
3.製作感想 有點難
4.製作作業的時間 :3小時

http://mepopedia.com/~web100b/hw07/hw07-1001445055
以上周的艾薇兒搖滾風依然呈現整體畫面
實做3個小時



Edited 2 time(s). Last edit at 12/09/2011 11:09PM by part2.
(編輯記錄)

http://mepopedia.com/~web100b/hw07/hw07-1001445051/

1.網頁主題: 攝影 跟之前差不多 tongue sticking out smiley
2.有無遇到的問題? 還是不太會用雙欄= =''我有照講意用 但邊邊就是空不出來
3.製作感想 用了很久 所以我改用另依種方式 (老師 我有做..不是沒做><
4.製作作業的時間 : 摸了很久..大概有3小時sad smiley

(1).作業網址 : http://mepopedia.com/~web100b/hw07/hw07-1001445095/index.html


1.網頁主題: 配色與風格設定:與期中相同
2.有無遇到的問題? 無
3.製作感想:2欄式製作方式真的有點困難,我看了好久講義,才了解一些
4.製作作業的時間: 4小時多

(1).作業網址 :http://mepopedia.com/~web100b/hw07/hw07-1001445036/about.html

(2).請回答以下問題:
1.網頁主題: 配色與風格設定:期中作業延續,塗鴉風格
2.有無遇到的問題?沒有
3.製作感想 一開始製作雙欄覺得有點困難,但是按造講義做就一一解決問題
4.製作作業的時間 3小時

作業網址 : http://mepopedia.com/~web100b/hw07/hw07-1001445063

1.由期中作業修改
2.超級無敵宇宙大爆炸困難!一直重做
3.整個好無力!不知道到底是哪裡做錯了!
4.5個小時

依樣畫葫蘆!
http://mepopedia.com/~web100b/hw07/hw07-9711443098

(1).作業網址 : http://mepopedia.com/~web100b/hw07/hwo7-1001445020/
(2).請回答以下問題:
1.網頁主題: 配色與風格設定:
和期中一樣
2.有無遇到的問題?
有點困難
3.製作感想 :
好難噢...
我的圖都依直跑掉..
4.製作作業的時間
3小時

(1).作業網址 :

http://mepopedia.com/~web100b/hw07/hw07-1001445107


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

1.網頁主題: 配色與風格設定: 以期中作業修改

2.有無遇到的問題? 覺得很複雜 confused smiley

3.製作感想 剛開始做覺得很亂,後來看了講義好久...

4.製作作業的時間: 3小時左右

http://mepopedia.com/~web100b/hw07/hw07-1001445099
網頁越來越難 這次花了兩個半小時
但我愛網頁 我也愛邊做網頁邊跟人聊天 我更愛jin jin
所以我會一直努力下去的~

(1).作業網址 : http://mepopedia.com/~web100b/hw08/hw07-1001445016



(2).請回答以下問題:
1.網頁主題:聖誕節
配色與風格設定: 色塊 綠色
2.有無遇到的問題? 沒
3.製作感想 很棒
4.製作作業的時間 兩天

(1).作業網址 :http://mepopedia.com/~web100b/hw07/hw07-1001445002

(2).請回答以下問題:
1.網頁主題: 星空
配色與風格設定: 幾米憂鬱藍
2.有無遇到的問題? 還好
3.製作感想 很累但完成很有成就感
4.製作作業的時間 3.4天

(1).作業網址 : http://mepopedia.com/~web100b/hw07/hw07-1001445105

(2).請回答以下問題:
1.網頁主題:偶像 配色與風格設定: 他們樂團的風格

2.有無遇到的問題? 有,用 http://mepopedia.com/~web100b/hw07/hw07-1001445105網址遊覽 會有很多美保的LOGO...

3.製作感想 慢慢一步步做了好久,感覺變強了很多,真的很有用。

4.製作作業的時間 3~4小時

(1)
http://mepopedia.com/~web100b/hw07/hw07-1001445109/

(2).請回答以下問題:
1.網頁主題:以老師的範例練習
配色與風格設定: 藍色調
2.有無遇到的問題? 沒
3.製作感想 沒有
4.製作作業的時間 1天

(1).作業網址 :http://mepopedia.com/~web100b/hw07/hw07-1001445024

(2).請回答以下問題:
1.網頁主題:顏水龍介紹
配色與風格設定:暖色
2.有無遇到的問題? 無
3.製作感想 雙欄不好掌握
4.製作作業的時間 2個小時

(1).作業網址 :

http://mepopedia.com/~web100b/hw07/hw07-1001445053


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

1.網頁主題: 配色與風格設定:可愛靴貓 黑底 橘底 穩重的顏色卻很可愛

2.有無遇到的問題? 重做好煩sad smiley 哀哀誰叫我沒確定檔案真的打不開 圖書館 ㄚㄚ電腦問題XD

3.製作感想 因為有老師多次講解 而且講一座很棒 所以我並沒有太大問題 不過就是有點花時間要做要調 技昨天做到早上六點起點多要起床上課之後 我今天做的都比較快了 我一併把期末一起做完

4.製作作業的時間: 2.5H

(1). 作業網址 : http://mepopedia.com/~web100b/hw07/hw07-1001445057

(2). 請回答以下問題:
1. 網頁主題:
   配色與風格設定: 紅紫色系
2. 有無遇到的問題? :很多,有關於雙欄的我弄了很久
3. 製作感想:網頁設計進行到雙欄的時候完全摸不著頭緒,我覺得我應該學好但是好困難
4. 製作作業的時間:很久

http://mepopedia.com/~web100b/hw07/hw07-1001445077/

1.網頁主題: 配色與風格設定: 接續上次的風格
2.有無遇到的問題? 因為一口氣把雙欄跟表格一起做完了所以大致上沒問題 這次也加了點圖可以另開的功能
3.製作感想 找到訣竅之後發現越來越容易做上癮!
4.製作作業的時間 1hr

(1).作業網址 : http://mepopedia.com/~web100b/hw07/hw07-1001445083/

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 拼色
2.有無遇到的問題?雙欄搞了好久才用出來好累啊!
3.製作感想 :終於交雙欄了~作起來好有成就感,能完成就謝天謝地了
4.製作作業的時間 4~5小時

http://mepopedia.com/~web100b/hw07/hw07-1001445040

我已經補交了!! 在你的筆電裡

(1).作業網址 :家裡不能傳,已經交給老師。

(2).請回答以下問題:
1.網頁主題:以文字對後人的影響為主題。

配色與風格設定:以復古風格為主,用古代寫文章的紙張為整個基底。

2.有無遇到的問題: 網頁預覽跟做好得不太一樣。

3.製作感想:我想我家的DW一定是中毒了。

4.製作作業的時間:3-4H

1.蔡依林
2.補回應
3.http://mepopedia.com/~web100b/hw07/hw07-1001445093/index3.html

(1).作業網址 : http://mepopedia.com/~web100b/hw07/hw07-1001445091/

1.網頁主題: 配色與風格設定: 依其中設定
2.有無遇到的問題? 沒有太大問題
3.製作感想 :雙蘭做了很久才終於做好smiling smiley
4.製作作業的時間 4~5hrs