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/~web100a/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]





Edited 1 time(s). Last edit at 11/30/2011 07:49AM by JinJin.
(編輯記錄)

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

(2).
1.網頁主題:莫內一生
配色與風格設定: 優雅的藍綠色調
2.有無遇到的問題:比上次難很多,在直欄的部份滑鼠過去不會變換字體顏色,我改了好久都不裡我。
3.製作感想 :其實很多都是重複一樣的設定,雖然是說做的進度就好,但會想一直做把網頁做的完整。
4.製作作業的時間 :一天做一點加起來應該有3~4小時~

MEPOERs said:
JinJin: 這是下次的進度,我會再仔細說明!
(1).作業網址 :http://mepopedia.com/~web100a/hw07/hw07-1001445098


(2).請回答以下問題:
1.網頁主題:安迪沃荷
配色與風格設定:普普風加上桃紅色系
2.有無遇到的問題? 沒有什麼太大問題
3.製作感想:這次動作比較複雜,有些還不是很熟悉,大致上還是可以。
4.製作作業的時間:1到2小時(包含找圖和內容)

MEPOERs said:
JinJin: 你做完了耶!其實比較複雜的部分是下次的進度,我還沒說明,但是你很聰明的自己做完了!^^
0零零0: 呵呵~我都是邊看邊做的!!謝謝老師=)
呵呵~我都是邊看邊做的!!謝謝老師spinning smiley sticking its tongue out

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

(2).請回答以下問題:
1.網頁主題:夏洛克˙福爾摩斯 / 配色與風格設定:咖啡色系
2.有無遇到的問題? 底下底下 為甚麼會歪掉???我該怎麼修改它 ?? 老師~拜託了 smiling smiley
3.製作感想 : 有些複雜,主要煩惱的還是上面我說的那個問題 ~
4.製作作業的時間 1~2小時

MEPOERs said:
JinJin: 在<div id="footer">前,多了一個</div>,把他刪除就可以了!
Marissa Yeh: 感謝老師~ 我修改好了 :D
http://mepopedia.com/~web100a/hw07/hw07-1001445074/

1.網頁主題:梵谷
配色與風格設定:藍色調
2.有無遇到的問題? 不知道是wrapper還是content會出現m這個無法連結的...
3.製作感想 表格的多種運用以及連結內文都很實用
4.製作作業的時間 2hrs

(1).作業網址 : http://mepopedia.com/~web100a/hw07/hw07-1001445132
(2).請回答以下問題:
1.網頁主題:電影魔法奇緣 / 配色與風格設定:粉色系配上主角的金色長髮的黃色
2.有無遇到的問題?無
3.製作感想 : 有比較複雜,但一步一步做就完成了
4.製作作業的時間 1~2小時

(1).作業網址 :
http://mepopedia.com/~web100a/hw07/hw07-1001445068
(2).請回答以下問題:
1.網頁主題:莫內 配色與風格設定: 這次是照老師的做
2.有無遇到的問題? 做到後來有點小亂不知道怎麼弄 這次有點小難
3.製作感想 雖然很難道是會一直想把他完成
4.製作作業的時間 2個多小時

http://mepopedia.com/~web100a/hw07/hw07-1001445058/

1.網頁主題:莫內
配色與風格設定:藍綠色
2.有無遇到的問題? 不知道為什麼怎麼調#content-R都會跑到下面去超奇怪的
3.製作感想 還是比較喜歡影片教學
4.製作作業的時間 3hrs

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


(2).請回答以下問題:
1.網頁主題:皮克斯動畫工作室
配色與風格設定:未來感深藍色系
2.有無遇到的問題? 問題很多= ="剛開始是雙欄弄不出來,再來是連結,之後思索了好幾天還是弄出來還是這樣,因為實在做不出來,所以有借學的來比較分析再製作。
3.製作感想 好難,好難,好難。可是我會盡力去做。
4.製作作業的時間 4天

MEPOERs said:
JinJin: 其實上次還沒有教導覽列的做法,明天才會教喔,你的進度已經超前了!
stu88153: 因為看同學的已經做到那裡就...一併做了...可是好像還是有點怪怪的唉...
(1).作業網址 : http://mepopedia.com/~web100a/hw07/hw07-1001445062


(2).請回答以下問題:
1.網頁主題:LADY GAGA天生完美專輯
配色與風格設定:和之前差不多是屬於個性...自己喜歡的配色
2.有無遇到的問題? 很難做...搞了很久...語法太多太多了....有些東西想移位但是不知道怎麼用...
3.製作感想: 好難...在努力...
4.製作作業的時間:4個多小時



Edited 1 time(s). Last edit at 12/06/2011 10:18PM by 蘇菜菜.
(編輯記錄)

(1).作業網址 :
http://mepopedia.com/~web100a/hw07/hw07-1001445072/
(2).請回答以下問題:
1.網頁主題:G-Dragon介紹 配色與風格設定: 黑白時尚簡約風
2.有無遇到的問題? 無
3.製作感想 越做越有成就感 因為版面已經可以越來越豐富了
4.製作作業的時間 半小時至一小時左右

(1).作業網址 :

http://mepopedia.com/~web100a/hw07/hw07-1001445001/

(2).請回答以下問題:
1.網頁主題: 介紹歐陽靖
配色與風格設定: 黑白簡單
2.有無遇到的問題? 有
我的content-R好像出了非常大的問題
就是我的內容不會出現在右方
而是在下方 所以只好插了一張圖在那空白的地方= =....
意思就是 我的content-R好像根本沒用到
3.製作感想
這次忘記有影片可以看了 所以是看圖片一個步驟一個步驟來= =
非常得吃力
4.製作作業的時間 三小時

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

(2).請回答以下問題:
1.網頁主題:Ed Hardy
配色與風格設定:同色系
2.有無遇到的問題? 目前沒有
3.製作感想:這次花比較多時間在研究,但很有成就感。
4.製作作業的時間:3個多小時

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

(2).請回答以下問題:
1.網頁主題:永遠的印象-莫內 配色與風格設定: 淺藍綠色系
2.有無遇到的問題? 看著講義一步步做還好沒什麼問題
3.製作感想 做的沒有很好但能做出來感覺就很開心
4.製作作業的時間 4小時

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

(2).
1.網頁主題:攝影作品集
配色與風格設定: 簡潔
2.有無遇到的問題:一切安好
3.製作感想 :恩....老師我先用數字代替,想到我會再改
4.製作作業的時間 :1~1.5小時

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

(2).
1.網頁主題:範例
配色與風格設定: 範例
2.有無遇到的問題:開啟作業就知道遇到什麼問題了
3.製作感想 :進度越來越難了.....
4.製作作業的時間 :1個小時多

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

(2).請回答以下問題:
1.網頁主題:楊丞琳 配色與風格設定:水藍清新風
2.有無遇到的問題? 無
3.製作感想 很累
4.製作作業的時間 2小時

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

(2).請回答以下問題:
1.網頁主題:五月天 / 配色與風格設定:灰藍簡約風
2.有無遇到的問題? 還行
3.製作感想: 花好多時間
4.製作作業的時間: 2小時

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

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

1.網頁主題:林俊傑的專輯介紹
配色與風格設定:灰階,簡單風格
2.有無遇到的問題? 沒什麼問題,希望講義可以做得簡單一點,這次有點複雜
3.製作感想:愈來愈複雜了orz
4.製作作業的時間 :2-3hr

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

(2).
1.網頁主題:Burberry Body 系列
配色與風格設定:米色吧'
2.有無遇到的問題:每個步驟都照著做,但是有先地方卻沒有顯示出來@@
3.製作感想 :難爆了
4.製作作業的時間 :兩個多小時

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

1.網頁主題: 配色與風格設定: 跟老師一樣
2.有無遇到的問題- 左欄背景不會填滿
3.製作感想 -................ㄜ 忘記做點左邊的標題 會跳到事蹟那...
4.製作作業的時間 2時

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

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

1.網頁主題:介紹宮崎駿
配色與風格設定:水藍色
2.有無遇到的問題:左邊那個條列很短OTZ...
3.製作感想:有時候在程式裡預覽的內容和上傳以後有些出入 ((汗
4.製作作業的時間:2小時

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

(2).請回答以下問題:
1.網頁主題:印象莫內 配色與風格設定:典雅藍綠色為主
2.有無遇到的問題? 此次作業複雜了點!!
3.製作感想:想到會愈上愈難就Orz....................
4.製作作業的時間:2~3小時

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

(2).
1.網頁主題:耶穌基督復活
配色與風格設定: 黑白風格
2.有無遇到的問題:還可以。
3.製作感想 :還好欸這樣..
4.製作作業的時間 :3~4小時

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

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

1.網頁主題: 配色與風格設定: 浪漫的風格~~溫暖的配色
2.有無遇到的問題? :還好~~雖然都有做出來 但是感覺怪怪的confused smiley
3.製作感想 :超有成就感耶~~原來看到的網頁都是這樣做出來的~~cool smiley
4.製作作業的時間 :2天

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


(2).請回答以下問題:
1.網頁主題:莫內
配色與風格設定:藍綠色.優雅
2.有無遇到的問題? 從頭到尾一直遇到問題,想用期中作頁去改但真的太難實在不知從何改起
3.製作感想: 真的好難,完全不知道期末作頁如何著手
4.製作作業的時間:5個小時

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

(2).
1.網頁主題:yoga
配色與風格設定: 黑灰色階
2.有無遇到的問題:左欄的背景圖無法延伸
3.製作感想 :一口氣趕上進度很開心,但也深深感覺到他的複雜性!
4.製作作業的時間 :兩小時

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

(2).
1.網頁主題:SNOOPY
配色與風格設定:簡單
2.有無遇到的問題:沒什麼問題
3.製作感想 :一切都還OK
4.製作作業的時間 :2-3小時

(1).作業網址:http://mepopedia.com/~web100a/hw07/hw07-1001445013/
(2).
1.網頁主題:莫內
2.配色與風格設定:藍綠色
3.有無遇到的問題:最上面不知道如何刪掉它
4.製作感想:花很多時間在研究它
5.製作作業的時間:2~3小時

(1).作業網址 :
http://mepopedia.com/~web100a/hw07/hw07-1001445050
(2).請回答以下問題:
1.網頁主題:莫內 配色與風格設定: 看講義做
2.有無遇到的問題? 有點不熟悉@@"
3.製作感想 痾.. 感覺越來越複雜
4.製作作業的時間 2 ~3 個小時

(1).作業網址 :http://mepopedia.com/~web100a/hw07/hw08-1001445003
(2).請回答以下問題:
1.網頁主題:楊丞琳 配色與風格設定:水藍清新風
2.有無遇到的問題? 無
3.製作感想 很累
4.製作作業的時間 2小時

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

(2).
1.網頁主題:光與影的大師-Claude Monnet 莫內
配色與風格設定: 跟老師的範本一樣為藍綠色調 但我也加入了深藍和中彩度的湖水綠
2.有無遇到的問題:可能是因為生病請假的關係 我比較看不懂講義 所以參考了一下朋友的程式碼 再一一自己作修改和作重覆重作的動作 也有問同學
3.製作感想 :感覺比較有成就感了 很希望也可以放入flash之類的效果 但我還是想先打好基本功再作花俏 現在自己的功力還不行
4.製作作業的時間 :作4~5小時 因為重作的關係所以花了多餘的時間

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定:粉嫩紫色系和鮮明的亮眼桃紅 ,風格則是可愛日系風格
2.有無遇到的問題? 有! 字體的顏色.....一開始改不出來,但是我後來自己隨便點一點就完成了!!!
3.製作感想 累!但是很開心因為我想要幫自己喜歡的明星做出一個是和她的網站 ㄎㄎ
4.製作作業的時間 6~8小時

http://mepopedia.com/~web100a/hw07/hw07-1001445088/profile.html
1.網頁主題: 配色與風格設定:黑白灰
2.有無遇到的問題?
顯示的時候都好奇怪我的籃會變成上下並排 但是上傳後就又好了
L-list li a 那邊我的名子會跳成 content p a 要改成 L-list li a 他就不顯示了...
還有我有做L-list li a:hover sad smiley怎麼會顯示不出來

3.製作感想 如果可以真的好想要整個砍掉重練喔...我把他用的好亂==
4.製作作業的時間 2hr

http://mepopedia.com/~web100a/hw07/hw07-1001445046
1.網頁主題:捉迷藏Hide and Seek
配色與風格設定:深色為主,風格簡單俐落,帶有陰森感
2.有無遇到的問題? : 還好,沒甚麼大礙,只是錨點連結有些奇怪
3.製作感想:有一點麻煩,不過還算應付得來
4.製作作業的時間:3.5hr



Edited 2 time(s). Last edit at 12/28/2011 12:02AM by DoNna.
(編輯記錄)

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

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

(1).作業網址 : http://mepopedia.com/~web100a/hw07/hw07-1001445017
(2).請回答以下問題:
1.網頁主題:五月天
2.有無遇到的問題?遇到一堆程式碼很亂
3.製作感想 : 程式碼很亂,可是請同學幫忙了
4.製作作業的時間 6小時

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

(2).請回答以下問題:
1.網頁主題:海底總動員
配色與風格設定:藍色
2.有無遇到的問題? 語法開始很複雜 容易出錯
3.製作感想
4.製作作業的時間 1天

http://mepopedia.com/~web100a/hw07/hw07-1001445114

1.網頁主題: 配色與風格設定: hollow kitty

2.有無遇到的問題? 無

3.製作感想 因為是期末改的所以無問題

4.製作作業的時間 30分鐘

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

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

1.網頁主題:2NE1
2.有無遇到的問題? :研究了很久,後來問了很多同學終於學會
3.製作感想 :很有成就感
4.製作作業的時間 :兩個星期

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

1.網頁主題: 配色與風格設定: 宮崎駿 蔚藍色調

2.有無遇到的問題 無

3.製作感想 因為是期末作業所以沒遇到什麼問題

4.製作作業的時間 30分鐘



Edited 1 time(s). Last edit at 01/04/2012 10:28PM by 李孟度.
(編輯記錄)