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-c/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



作業網址 : http://mepopedia.com/~web103-c/hw07/hw07-1025445072/


1.網頁主題:蔡健雅
配色與風格設定: 粉紅色
2.有無遇到的問題? 無
3.製作感想 覺得自己更進一步
4.製作作業的時間 3小時

1025445072 王人永

1).作業網址 : http://mepopedia.com/~web103-c/hw07/hw07-1025445096

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 灰色
2.有無遇到的問題? css很複雜
3.製作感想: 很慶幸做成功了
4.製作作業的時間:一天

1025445096 徐琬凌

(1).作業網址 :http://mepopedia.com/~web103-c/hw07/hw07-1025443044/introduction.html

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 紅黑白
2.有無遇到的問題 還是會搞混一些東西
3.製作感想 做完後有成就感
4.製作作業的時間 1天

1025443044 王薏茹



Edited 1 time(s). Last edit at 12/30/2014 04:23AM by 1025443044.
(編輯記錄)

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 白灰藍紅
2.有無遇到的問題? 語法搞混
3.製作感想 雙欄有點混亂
4.製作作業的時間 5小時

1025445090 鍾婷玟

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定:以 g dragon 為主題
2.有無遇到的問題? 看影片
3.製作感想 恩 很複雜
4.製作作業的時間 5小時

1025445141 王心仁

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定:g dragon
2.有無遇到的問題? 語法搞混
3.製作感想 雙欄有點混亂
4.製作作業的時間 5小時

1025445141 王心仁

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定:灰藍紅
2.有無遇到的問題?語法越來越多 會搞混
3.製作感想 滿有成就感的
4.製作作業的時間 4~5小時

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


(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 最後的八三夭
2.有無遇到的問題? 過程一直無法向右對齊,但後來問老師解決了
3.製作感想: 雙欄變得比之前難,語法很多很複雜
4.製作作業的時間:三天


1025445060 黃淯婷

(1).作業網址 : http://mepopedia.com/~web103-c/final/final-1025445051/

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 美式配日式/紅黑白
2.有無遇到的問題:一定要用opera不然怪怪的
3.製作感想: 雙欄變得很複雜
4.製作作業的時間:四小時


1025445051 林芳伃

(1).作業網址 : http://mepopedia.com/~web103-c/hw07/hw07-1025445153/about.html

1.網頁主題:SELENA GOMEZ魅力非凡 配色與風格設定: 以黑色為主,炫麗的感覺
2.有無遇到的問題? 還好雙欄還算簡單
3.製作感想 跟老師做得不一樣,想用自己的想法去用。
4.製作作業的時間 很多天

1025445153 廖敏君

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

(2).請回答以下問題:
1.網頁主題: lana del rey
2.有無遇到的問題? 要新增好多標籤,語法也變多了。
3.製作感想: 看著影片一步一步做。
4.製作作業的時間 :4h



1025445123姚育慈

作業網址 : http://mepopedia.com/~web103-c/hw07/hw07-1025445180


1.網頁主題:魔法奇緣
配色與風格設定: 柔色系
2.有無遇到的問題? 語法太多都會搞混
3.製作感想 :很有成就感
4.製作作業的時間 3小時

1025445180 謝芷寧

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 黑白灰色調
2.有無遇到的問題? 即時和做的不同
3.製作感想 有點亂
4.製作作業的時間 5小時

1025445129 王嬿婷

作業網址 : http://mepopedia.com/~web103-c/hw07/hw07-1025445039/

請回答以下問題:
1.網頁主題: 麵包店
2.有無遇到的問題? 表格製作還不熟練
3.製作感想 過程很辛苦但很有成就感
4.製作作業的時間 一天


1025445039 何佳霖



Edited 1 time(s). Last edit at 01/07/2015 05:41AM by cici.
(編輯記錄)

作業網址 : http://mepopedia.com/~web103-c/hw07/hw07-1025445009

1.網頁主題:海綿寶寶
配色與風格設定: 深藍大海風
2.有無遇到的問題? 亂碼
3.製作感想 雖然複雜但是做完很爽 我都少活30年了
4.製作作業的時間 一晚

作業網址 : http://mepopedia.com/~web103-c/hw07/hw07-1025445018/


1.網頁主題:BIGBANG
配色與風格設定:黑白灰紅
2.有無遇到的問題:沒有
3.製作感想:學到更多更多
4.製作作業的時間:2小時 30分鐘

1025445018 陳怡融

作業網址 : http://mepopedia.com/~web103-c/hw07/hw07-1025445132


1.網頁主題:snoopy
配色與風格設定: 藍色系
2.有無遇到的問題? 無
3.製作感想 雙攔得有時會搞混
4.製作作業的時間 5小時

1025445132 羅雅嫚

作業網址 : http://mepopedia.com/~web103-c/hw07/hw07-1025445102/


1.網頁主題:韓國女子團體少女時代子團TAETISEO
配色與風格設定: 粉、紫色系
2.有無遇到的問題? 語法有時候沒注意到就會用錯
3.製作感想 做出來有成就感但是好累~~
4.製作作業的時間 5小時 左右

1025445102 邱筱惠



Edited 3 time(s). Last edit at 01/13/2015 09:27PM by 筱.
(編輯記錄)

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定:REDBULL
2.有無遇到的問題?語法很多很雜亂
3.製作感想 成就感
4.製作作業的時間 一天

http://mepopedia.com/~web103-c/hw07/hw07-1025445156

1.導覽列配色與風格設定:死魚眼 / 淺灰藍
2.有無遇到的問題:有
3.製作感想:非常花時間的作業
4.製作作業的時間:N小時

1025445156 蔡佳芬

作業網址 : http://mepopedia.com/~web103-c/hw07/hw07-1025445192/


1.網頁主題:優格女孩 郭采潔
配色與風格設定: 白 咖啡色
2.有無遇到的問題? 在電腦做完檢查完沒問題上傳後有些東西出不來或變調就很困惑
3.製作感想 更了解些
4.製作作業的時間 4小時

1025445192 黃婷萱



Edited 1 time(s). Last edit at 01/12/2015 10:06PM by 黃婷萱.
(編輯記錄)

作業網址 : http://mepopedia.com/~web103-c/hw07/hw07-1025445162


1.網頁主題:宮崎駿
配色與風格設定: 粉色系
2.有無遇到的問題? 一直遇到奇怪的問其
3.製作感想 :很有趣
4.製作作業的時間 2小時

1025445162陸怡潔

作業網址 : http://mepopedia.com/~web103-c/hw07/hw07-1025445165


1.網頁主題:[Alexandros]
配色與風格設定: 藍白色
2.有無遇到的問題? 無
3.製作感想 越來越順
4.製作作業的時間 2小時

1025445165

作業網址 : http://mepopedia.com/~web103-c/hw07/hw07-1025445108


1.網頁主題:小熊維尼
配色與風格設定: 咖啡色
2.有無遇到的問題? 影片一開始不會用,但後來懂了
3.製作感想 覺得自己學到了更多
4.製作作業的時間 5小時

1025445108 張惟婷

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

1.網頁主題: 配色與風格設定: 粉色調/碎花
2.有無遇到的問題:沒有
3.製作感想 :想吃下午茶
4.製作作業的時間:4小時


1025445135李品萱

作業網址 : http://mepopedia.com/~web103-c/hw07/hw07-1025445111


1.網頁主題:yoga
配色與風格設定: 棕色
2.有無遇到的問題? 沒有
3.製作感想 覺得慢慢熟悉
4.製作作業的時間 2小時

1025445111 莊于萱

作業網址 : http://mepopedia.com/~web103-c/hw07/hw07-1025445039

1.網頁主題:佐藤のパン
配色與風格設定:深紅色
2.有無遇到的問題? 沒有
3.製作感想 有成就感
4.製作作業的時間 2小時

1025445039 何佳霖

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

(2)
1.網頁主題: 配色與風格設定:ARASHI 黑、灰、白
2.有無遇到的問題?沒什麼問題
3.製作感想 慢慢地做其實可以做得很完整的
4.製作作業的時間 二至三小時


1025445147 張 郁

作業網址 : http://mepopedia.com/~web103-c/hw07/hw07-1025445054/


1.網頁主題:秋赤音
配色與風格設定:桃紅色 天藍
2.有無遇到的問題? 無
3.製作感想 要檢查仔細
4.製作作業的時間 4小時

1025445054 許雅筑

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

(2).請回答以下問題:
網頁主題:Audrey Kawasaki 配色與風格設定: 木頭質感 灰 咖啡
2.有無遇到的問題? :卡卡的
3.製作感想 :連來連去會怕沒做到其中一小部分
4.製作作業的時間 :很久

洪筠真 1025445063



Edited 1 time(s). Last edit at 01/15/2015 01:36PM by Annie真.
(編輯記錄)

(1)作業網址:http://mepopedia.com/~web103-c/final/final-1025445195/creation.html


1.製作作業的時間:斷續幾天吧
2.有無遇到的問題: 有 因為有很多重複的語法 我會搞錯
3.製作心得與感想: 當看到做好的網頁時 會很有成就感
4.本學期於網頁設計課程上的收穫: 對網頁設計有了新的認知 也略懂 希望未來可以更加深入


(1)網站主題:1顆心裡面的第3個世界
(2)主要瀏覽族群:喜歡插畫的同好們
(3)風格設定: 粉色
(4)主色調,輔助色調: 也是粉色色調的淺灰 淺藍
(5)製作動機:希望能夠推廣我的插畫作品

1025445195古馥瑜

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


(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 藍色系
2.有無遇到的問題? 不太熟
3.製作感想: 有點難
4.製作作業的時間:很多天

1025445174 黃琪雅

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

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



1025445144 李欣翰



Edited 1 time(s). Last edit at 01/16/2015 11:00AM by 1025445144.
(編輯記錄)

(1).作業網址 :http://mepopedia.com/~web103-c/final/final-1025445012

1.網頁主題:玩命關頭
2.有無遇到的問題:語法 煩
3.製作感想:有成就感
4.製作作業的時間:4小時

戴嫻淳

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

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

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

(2)
1.製作作業的時間:很多天
2.有無遇到的問題:語法太多太複雜會搞混
3.製作心得與感想:雖然遇到很多瓶頸可是當作玩的時候還是很有成就感
4.本學期於網頁設計課程上的收穫:是一堂令人壓力很大可是卻充實的課程

1025445010 謝佳蓁