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

Advanced

[作業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/~web104-2a/hw07/hw07-103xxxxxxx

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

存放在 < hw07-學號 > 的資夾內



2.上傳至FTP

3.回覆本篇文章

(1).作業網址 :http://mepopedia.com/~cg104-1a/hw07/hw07-104xxxxxxx

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





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/~cg104-1a/hw07/hw07-1045440046

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 甜甜的
2.有無遇到的問題? 影片置中文字也會跟著置中
3.製作感想 開心
4.製作作業的時間 3-4小時,上課完當天回家做完。

(1).作業網址 : http://mepopedia.com/~cg104-1a/final/final-1045440012/
(2).請回答以下問題:
1.網頁主題:~咩咩咩生先羊山
配色與風格設定:飽和度高,繽紛的顏色smiling smiley
2.有無遇到的問題? 左右欄一直互相蓋到,然後微調就又都不見angry smiley
3.製作感想: 快瘋了真的是宇宙世界超級無敵難
4.製作作業的時間:幾世紀

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

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

1.網頁主題:

EXO為主,然後介紹離隊的團員。

配色與風格設定:

暗色系。風格是設定有三人是離隊;所以要讓氣氛看起來比較沉重。

2.有無遇到的問題?

頁面差點無法置頂,但是後來有找到問題。

3.製作感想

感覺這次的作業比較難一點。

4.製作作業的時間

6小時。

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

(2).請回答以下問題:
1.網頁主題:熊本熊。
配色與風格設定:簡約。以黑、白、紅代表屬於熊本熊之特色。
2.有無遇到的問題? 為了table class差點胃出血。
3.製作感想: 終於做完了!我愛熊本熊!
4.製作作業的時間:零散的時間做,大約三天。

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

(2).請回答以下問題:
1.網頁主題:右手超人。
配色與風格設定:暖色 舒服的照片。
2.有無遇到的問題? back沒辦法往右。
3.製作感想: 眼睛快瞎了! 累死寶寶了
4.製作作業的時間:六小時。

作業網址:http://mepopedia.com/~cg104-1a/hw07/hw07-1045440003

1網頁主題:一拳超人
2.我只做了一小格雙欄就夠讓我頭疼了
3.多了作者介紹 網頁好看多了
4.零零散散的 3天

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

(2).請回答以下問題:
1.網頁主題:卡莉怪妞
配色與風格設定:可愛的
2.有無遇到的問題?我一直想讓側邊欄跟隨頁面滑動
3.製作感想:我終於都做完了
4.製作作業的時間:兩個禮拜



Edited 2 time(s). Last edit at 06/13/2016 02:08AM by 1045440044.
(編輯記錄)

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定:粉紅色,以少女時代為主題
2.有無遇到的問題? 沒
3.製作感想 :越來越麻煩了
4.製作作業的時間 :期中的直接改所以沒花很多時間

作業網址:http://mepopedia.com/~cg104-1a/hw07/hw07-1045440003

1..一拳超人
2.有設定了一小塊不怎麼樣(作者介紹那
3.別問了 很恐怖
4.天荒地老沒啦~沒算時間ㄟ

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

(2).請回答以下問題:
1.網頁主題:鸚鵡人
配色與風格設定:簡單亮色系
2.有無遇到的問題? 難!!!!!
3.製作感想: 累可以昏睡3天
4.製作作業的時間:1小時

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

(2).請回答以下問題:
1.網頁主題:picture
配色與風格設定:藍色與綠色
2.有無遇到的問題?我想不到晚餐要吃什麼
3.製作感想:我終於做完了
4.製作作業的時間:2小

http://mepopedia.com/~cg104-1a/hw07/hw07-1045440019

1.網頁主題: 配色與風格設定: 這次改了邊框,色調一樣
2.有無遇到的問題? 有喔!那個List我已放棄,我也不知道我怎麼做出來的?
3.製作感想 雙欄真是個麻煩的東西!做到一半氣到去睡覺
4.製作作業的時間  2天多

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 海底總動員
2.有無遇到的問題? 沒
3.製作感想 開心
4.製作作業的時間 3-4小時

(1)作業網址:

http://mepopedia.com/~cg104-1a/hw07/hw07-1045440028

(2).請回答以下問題:
1.網頁主題:美國隊長3:英雄內戰
配色與風格設定:輔助色調:紅 藍 白 美國國旗顏色/灰
2.有無遇到的問題? 無
3.製作感想: 好累
4.製作作業的時間:7

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

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

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 皮克斯黑白風格
2.有無遇到的問題? 沒有
3.製作感想 好玩
4.製作作業的時間 3-4小時

老師雙欄網頁是Founder因為我一直無法個別放就全部一起放。

(1).作業網址 :http://mepopedia.com/~cg104-1a/hw07/hw07-1045440029/video.html

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

1.網頁主題:
Perfume為主,介紹她們的特色。

配色與風格設定:

鮮豔。風格在藍色中沉穩中,不失少女的桃紅。

2.有無遇到的問題?

無法置頂,後來有找到問題。

3.製作感想

比較難一點。

4.製作作業的時間

6小時。



Edited 1 time(s). Last edit at 06/19/2016 01:20AM by 1045440029-yu.
(編輯記錄)

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

(2).請回答以下問題:
1.網頁主題:初音 配色與風格設定: 藍色主調
2.有無遇到的問題 :還好
3.製作感想 :漸漸了解,蠻有意思
4.製作作業的時間 6小時