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

Advanced

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

103-1《中國》竹視傳二C-網頁設計 文章列表 發表文章 PDF 列印（下載）
JinJin [ 站內寄信 / PM ]
[作業07] 以Float：浮動，製作雙欄網頁

分類標籤: 103-1《中國》竹視傳二C-網頁設計
  1. 1. 一、製作步驟
  2. 2. 二、繳交作業方式
  3. 3. 上課影音
請參考

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

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

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


2.上傳至FTP

3.回覆本篇文章

(1).作業網址 ：

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



[hr]

3. 上課影音


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



推薦 / 評論　 分享到Facebook     回應文章 Quote
1025445072 [ 站內寄信 / PM ]
Re: [作業07] 以Float：浮動，製作雙欄網頁

分類標籤: 103-1《中國》竹視傳二C-網頁設計
作業網址 ： http://mepopedia.com/~web103-c/hw07/hw07-1025445072/


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

1025445072 王人永

推薦 / 評論　 分享到Facebook     回應文章 Quote
1025445096 [ 站內寄信 / PM ]
Re: [作業07] 以Float：浮動，製作雙欄網頁

分類標籤: 103-1《中國》竹視傳二C-網頁設計
1).作業網址 ： http://mepopedia.com/~web103-c/hw07/hw07-1025445096

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

1025445096 徐琬凌

推薦 / 評論　 分享到Facebook     回應文章 Quote
1025443044 [ 站內寄信 / PM ]
Re: [作業07] 以Float：浮動，製作雙欄網頁

分類標籤: 103-1《中國》竹視傳二C-網頁設計
(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.
(編輯記錄)

推薦 / 評論　 分享到Facebook     回應文章 Quote
1025445090 [ 站內寄信 / PM ]
Re: [作業07] 以Float：浮動，製作雙欄網頁

分類標籤: 103-1《中國》竹視傳二C-網頁設計
(1).作業網址 ： http://mepopedia.com/~web103-c/hw07/hw07-1025445090/

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

1025445090 鍾婷玟

推薦 / 評論　 分享到Facebook     回應文章 Quote
1025445141 [ 站內寄信 / PM ]
Re: [作業07] 以Float：浮動，製作雙欄網頁

分類標籤: 103-1《中國》竹視傳二C-網頁設計
(1).作業網址 ： http://mepopedia.com/~web103-c/hw07/hw07-1025445141

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

1025445141 王心仁

推薦 / 評論　 分享到Facebook     回應文章 Quote
1025445141 [ 站內寄信 / PM ]
Re: [作業07] 以Float：浮動，製作雙欄網頁

分類標籤: 103-1《中國》竹視傳二C-網頁設計
(1).作業網址 ： http://mepopedia.com/~web103-c/hw07/hw07-1025445141/

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

1025445141 王心仁

推薦 / 評論　 分享到Facebook     回應文章 Quote
KUPEIRU [ 站內寄信 / PM ]
Re: [作業07] 以Float：浮動，製作雙欄網頁

分類標籤: 103-1《中國》竹視傳二C-網頁設計
(1).作業網址 ：http://mepopedia.com/~web103-c/hw07/hw07-1025445069

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

推薦 / 評論　 分享到Facebook     回應文章 Quote
黃淯婷 [ 站內寄信 / PM ]
Re: [作業07] 以Float：浮動，製作雙欄網頁

分類標籤: 103-1《中國》竹視傳二C-網頁設計
(1).作業網址 ： http://mepopedia.com/~web103-c/hw07/hw07-1025445060


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


1025445060 黃淯婷

推薦 / 評論　 分享到Facebook     回應文章 Quote
XuanSong [ 站內寄信 / PM ]
Re: [作業07] 以Float：浮動，製作雙欄網頁

分類標籤: 103-1《中國》竹視傳二C-網頁設計
(1).作業網址 ： http://mepopedia.com/~web103-c/final/final-1025445051/

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


1025445051 林芳伃

推薦 / 評論　 分享到Facebook     回應文章 Quote
小累 [ 站內寄信 / PM ]
Re: [作業07] 以Float：浮動，製作雙欄網頁

分類標籤: 103-1《中國》竹視傳二C-網頁設計
(1).作業網址 ： http://mepopedia.com/~web103-c/hw07/hw07-1025445153/about.html

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

1025445153 廖敏君

推薦 / 評論　 分享到Facebook     回應文章 Quote
Yuchi [ 站內寄信 / PM ]
Re: [作業07] 以Float：浮動，製作雙欄網頁

分類標籤: 103-1《中國》竹視傳二C-網頁設計
(1).作業網址 ：http://mepopedia.com/~web103-c/hw07/hw07-1025445123

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



1025445123姚育慈

推薦 / 評論　 分享到Facebook     回應文章 Quote
1025445009 [ 站內寄信 / PM ]
Re: [作業07] 以Float：浮動，製作雙欄網頁

分類標籤: 103-1《中國》竹視傳二C-網頁設計
作業網址 ： http://mepopedia.com/~web103-c/hw07/hw07-1025445180


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

1025445180 謝芷寧

推薦 / 評論　 分享到Facebook     回應文章 Quote
王嬿婷 [ 站內寄信 / PM ]
Re: [作業07] 以Float：浮動，製作雙欄網頁

分類標籤: 103-1《中國》竹視傳二C-網頁設計
(1).作業網址 ： http://mepopedia.com/~web103-c/hw07/hw07-1025445129

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

1025445129 王嬿婷

推薦 / 評論　 分享到Facebook     回應文章 Quote
cici [ 站內寄信 / PM ]
Re: [作業07] 以Float：浮動，製作雙欄網頁

分類標籤: 103-1《中國》竹視傳二C-網頁設計
作業網址 ： 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.
(編輯記錄)

推薦 / 評論　 分享到Facebook     回應文章 Quote
1025445009 [ 站內寄信 / PM ]
Re: [作業07] 以Float：浮動，製作雙欄網頁

分類標籤: 103-1《中國》竹視傳二C-網頁設計
作業網址 ： http://mepopedia.com/~web103-c/hw07/hw07-1025445009

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

推薦 / 評論　 分享到Facebook     回應文章 Quote
謝芷寧 [ 站內寄信 / PM ]
Re: [作業07] 以Float：浮動，製作雙欄網頁

分類標籤: 103-1《中國》竹視傳二C-網頁設計
作業網址 ： http://mepopedia.com/~web103-c/hw07/hw07-1025445018/


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

1025445018 陳怡融

推薦 / 評論　 分享到Facebook     回應文章 Quote
yaman [ 站內寄信 / PM ]
Re: [作業07] 以Float：浮動，製作雙欄網頁

分類標籤: 103-1《中國》竹視傳二C-網頁設計
作業網址 ： http://mepopedia.com/~web103-c/hw07/hw07-1025445132


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

1025445132 羅雅嫚

推薦 / 評論　 分享到Facebook     回應文章 Quote
筱 [ 站內寄信 / PM ]
Re: [作業07] 以Float：浮動，製作雙欄網頁

分類標籤: 103-1《中國》竹視傳二C-網頁設計
作業網址 ： 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 筱.
(編輯記錄)

推薦 / 評論　 分享到Facebook     回應文章 Quote
1025445030 [ 站內寄信 / PM ]
Re: [作業07] 以Float：浮動，製作雙欄網頁

分類標籤: 103-1《中國》竹視傳二C-網頁設計
(1).作業網址 ：http://mepopedia.com/~web103-c/hw07/hw07-1025445030

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

推薦 / 評論　 分享到Facebook     回應文章 Quote
fanny40721 [ 站內寄信 / PM ]
Re: [作業07] 以Float：浮動，製作雙欄網頁

分類標籤: 103-1《中國》竹視傳二C-網頁設計
http://mepopedia.com/~web103-c/hw07/hw07-1025445156

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

1025445156 蔡佳芬

推薦 / 評論　 分享到Facebook     回應文章 Quote
黃婷萱 [ 站內寄信 / PM ]
Re: [作業07] 以Float：浮動，製作雙欄網頁

分類標籤: 103-1《中國》竹視傳二C-網頁設計  1025445192  黃婷萱
作業網址 ： 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 黃婷萱.
(編輯記錄)

推薦 / 評論　 分享到Facebook     回應文章 Quote
陸怡潔 [ 站內寄信 / PM ]
Re: [作業07] 以Float：浮動，製作雙欄網頁

分類標籤: 103-1《中國》竹視傳二C-網頁設計
作業網址 ： http://mepopedia.com/~web103-c/hw07/hw07-1025445162


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

1025445162陸怡潔

推薦 / 評論　 分享到Facebook     回應文章 Quote
砂兒 [ 站內寄信 / PM ]
Re: [作業07] 以Float：浮動，製作雙欄網頁

分類標籤: 103-1《中國》竹視傳二C-網頁設計
作業網址 ： http://mepopedia.com/~web103-c/hw07/hw07-1025445165


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

1025445165

推薦 / 評論　 分享到Facebook     回應文章 Quote
1025445108 [ 站內寄信 / PM ]
Re: [作業07] 以Float：浮動，製作雙欄網頁

分類標籤: 103-1《中國》竹視傳二C-網頁設計
作業網址 ： http://mepopedia.com/~web103-c/hw07/hw07-1025445108


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

1025445108 張惟婷

推薦 / 評論　 分享到Facebook     回應文章 Quote
艾希 [ 站內寄信 / PM ]
Re: [作業07] 以Float：浮動，製作雙欄網頁

分類標籤: 103-1《中國》竹視傳二C-網頁設計
(1)作業網址 ： http://mepopedia.com/~web103-c/hw07/hw07-1025445135/

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


1025445135李品萱

推薦 / 評論　 分享到Facebook     回應文章 Quote
1025445111 [ 站內寄信 / PM ]
Re: [作業07] 以Float：浮動，製作雙欄網頁

分類標籤: 103-1《中國》竹視傳二C-網頁設計
作業網址 ： http://mepopedia.com/~web103-c/hw07/hw07-1025445111


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

1025445111 莊于萱

推薦 / 評論　 分享到Facebook     回應文章 Quote
cici [ 站內寄信 / PM ]
Re: [作業07] 以Float：浮動，製作雙欄網頁

分類標籤: 103-1《中國》竹視傳二C-網頁設計
作業網址 ： http://mepopedia.com/~web103-c/hw07/hw07-1025445039

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

1025445039 何佳霖

推薦 / 評論　 分享到Facebook     回應文章 Quote
詠月吾熹 [ 站內寄信 / PM ]
Re: [作業07] 以Float：浮動，製作雙欄網頁

分類標籤: 103-1《中國》竹視傳二C-網頁設計
(1).作業網址 ：http://mepopedia.com/~web103-c/hw07/hw07-1025445147

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


1025445147 張 郁

推薦 / 評論　 分享到Facebook     回應文章 Quote
許雅筑 [ 站內寄信 / PM ]
Re: [作業07] 以Float：浮動，製作雙欄網頁

分類標籤: 103-1《中國》竹視傳二C-網頁設計  103-1《中國》竹視傳二C-網頁設計
作業網址 ： http://mepopedia.com/~web103-c/hw07/hw07-1025445054/


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

1025445054 許雅筑

推薦 / 評論　 分享到Facebook     回應文章 Quote
Annie真 [ 站內寄信 / PM ]
Re: [作業07] 以Float：浮動，製作雙欄網頁

分類標籤: 103-1《中國》竹視傳二C-網頁設計
(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真.
(編輯記錄)

推薦 / 評論　 分享到Facebook     回應文章 Quote
1025445195 [ 站內寄信 / PM ]
Re: [作業07] 以Float：浮動，製作雙欄網頁

分類標籤: 103-1《中國》竹視傳二C-網頁設計
(1)作業網址：http://mepopedia.com/~web103-c/final/final-1025445195/creation.html


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


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

1025445195古馥瑜

推薦 / 評論　 分享到Facebook     回應文章 Quote
lia_820925 [ 站內寄信 / PM ]
Re: [作業07] 以Float：浮動，製作雙欄網頁

分類標籤: 103-1《中國》竹視傳二C-網頁設計
(1).作業網址 ： http://mepopedia.com/~web103-c/hw07/hw07-1025445174


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

1025445174 黃琪雅

推薦 / 評論　 分享到Facebook     回應文章 Quote
1025445144 [ 站內寄信 / PM ]
Re: [作業07] 以Float：浮動，製作雙欄網頁

分類標籤: 103-1《中國》竹視傳二C-網頁設計
(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.
(編輯記錄)

推薦 / 評論　 分享到Facebook     回應文章 Quote
戴嫻淳 [ 站內寄信 / PM ]
Re: [作業07] 以Float：浮動，製作雙欄網頁

分類標籤: 103-1《中國》竹視傳二C-網頁設計
(1).作業網址 ：http://mepopedia.com/~web103-c/final/final-1025445012

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

戴嫻淳

推薦 / 評論　 分享到Facebook     回應文章 Quote
邊緣人 [ 站內寄信 / PM ]
Re: [作業07] 以Float：浮動，製作雙欄網頁

分類標籤: 103-1《中國》竹視傳二C-網頁設計
(1).作業網址 ：http://mepopedia.com/~web103-c/hw07/hw07-1025445138

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

推薦 / 評論　 分享到Facebook     回應文章 Quote
1025445010 [ 站內寄信 / PM ]
Re: [作業07] 以Float：浮動，製作雙欄網頁

分類標籤: 103-1《中國》竹視傳二C-網頁設計
(1).作業網址 ：http://mepopedia.com/~web103-a/hw07/hw07-1025445010/

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

1025445010 謝佳蓁

推薦 / 評論　 分享到Facebook     回應文章 Quote
Newer Topic Older Topic