[作業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

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/~web105-2c/hw07/hw07-104xxxxxxx

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

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


2.上傳至FTP

3.回覆本篇文章

(1).作業網址 :http://mepopedia.com/~web105-2c/hw07/hw07-104xxxxxxx

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



[hr]

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/~web105-2c/hw07/hw07-1045445117

2.網頁主題：Summer story-金魚

● 欲呈現風格：水墨、灑脫、自在、現代

● 網頁架構與內容主色系：

背景-白色，黑色
導覽列-白底黑字、橘底白字
分隔線-橘色
內容-灰色

網頁配色重點為效仿金魚身上標準色系，分別為白色、橘色、黑色等色系， 運用重
點色系分布於網頁中，以亮色系橘色作為標題色系，內文則以灰色表現， 與背景黑
白分明，呈現潑墨色彩，並帶有現代感，整體網頁欲呈現風格為灑脫、自在， 如同
金魚自在悠遊的樣貌，心境自然而然的平靜，水面如鏡，清澈見底之意。

3.有無遇到的問題:老師講義詳細描述,並無遇到問題

4.製作感想 :

本次作業重點為雙欄導覽列的製作，因為之前先行嘗試製作導覽列，按照老師講義
逐步製作，剛開始會因為雙欄導覽列的CSS分別設定，會有些繁複，做了兩三頁後
，自然而然地會了解每個設定的功能，學期即將結束，一個學期的學習與製作，從
一開始的單欄網頁，逐漸進階成有系統的雙欄導覽列，配色上也會因之前的經驗和
網頁的主題而越顯豐富，配色方面也是製作網頁時較花時間的地方，網頁編排倒是
有一貫的風格，配色則要因應網頁的主題以及呈現的質感，這次網頁較為簡潔，運
用大量的留白，並穿插橘、黑等金魚標準色系，使簡潔的網頁更加豐富，也因為留
白因素，有幾頁較為空洞，因此用標題做小變化，使網頁加以變化，簡單俐落的設
計並不會比較好做，反而要考慮主題與內容的關係，包含配置，配色等，以免網頁
空虛，每個不同風格的網頁皆有可以學習參考的依據與目標，網頁設計的製作是歡
新愉悅的，保持著歡喜的心情，將壓力化為動力，也能讓自己更投入在這個作業上

5.製作作業的時間:一小時至兩小時



(編輯記錄)

(1).作業網址 :http://mepopedia.com/~web105-2c/hw07/hw07-1045445045

(2).請回答以下問題：
1.網頁主題： 配色與風格設定： 樂團主視覺
2.有無遇到的問題? 有些地方開始搞混
3.製作感想 語法越來越多有時候都會找不太到甚至會有點搞混
4.製作作業的時間 1小時

(1).作業網址 :http://mepopedia.com/~web105-2c/hw07/hw07-1045445189

(2).請回答以下問題：
1.網頁主題：閱讀實驗室
配色與風格設定：因為閱讀給人帶來寧靜的感覺，所以我用藍、白、灰為主題設計。
2.有無遇到的問題? 這次還是因為晴耕雨讀那頁跑掉
3.製作感想:我終於完成了好感動 ,其實老師的影片真的拍得很好講解也很仔細讓我可以看得懂
4.製作作業的時間 :2個小時

(1).作業網址 ：http://mepopedia.com/~web105-2c/hw07/hw07-1045445174
(2).請回答以下問題：
網頁主題：一風堂拉麵
配色與風格設定：可口
有無遇到的問題：右邊的按鈕不太好改
製作感想：蠻難的，第二頁美味菜單是表格
製作作業的時間 ：4小時



(編輯記錄)

(1).作業網址 :http://mepopedia.com/~web105-2c/hw07/hw07-1045445212

(2).請回答以下問題：
1.網頁主題：三峽老街
配色與風格設定： 灰色、簡潔
2.有無遇到的問題? 目前沒有
3.製作感想 ：有點難
4.製作作業的時間 ：3小時˙

(1).作業網址 :http://mepopedia.com/~web105-2c/hw07/hw07-1045445135

(2).請回答以下問題：
1.網頁主題：Hyukoh
配色與風格設定： 土黃與深咖啡色 簡單和溫暖的風格
2.有無遇到的問題? 有些
3.製作感想: 這次內容比較難 / 這次內容在Album
4.製作作業的時間 :3個多小時

(1).作業網址 :http://mepopedia.com/~web105-2c/hw07/hw07-1045445015

(2).請回答以下問題：
1.網頁主題：藏物市集
配色與風格設定： 粉色系為主
2.有無遇到的問題? 有一些問題 慢慢去發現怎麼改~
3.製作感想: 這次內容比較多東西需要去調整
4.製作作業的時間 :3個多小時

(1).作業網址 :http://mepopedia.com/~web105-2c/hw04/hw04-1045445217/index2.html

(2).請回答以下問題：
1.網頁主題：頑童
配色與風格設定： 黑白灰為主
2.有無遇到的問題? 很大ㄉ問題
3.製作感想: 這次做的好多 花了好多時間
4.製作作業的時間 :3天3夜

(1).作業網址 :http://mepopedia.com/~web105-2c/hw07/hw07-1045445003

(2).請回答以下問題：
1.網頁主題：美劇 HUMANS
配色與風格設定：基本上都盡量選用帶有些微科技感又穩重的顏色，推文按鈕及返回頂部的按鈕各做在兩側，覺得應該比較方便....應該啦哈哈( ´ ▽ ` )ﾉ
目前只生出 about、cast 兩頁，之後會慢慢補齊的
2.有無遇到的問題? 左邊導覽列如果在 hover 設定 boder 滑鼠滑過去時下面的導覽列就會有被頂開的感覺，要如何讓他們不會小小的浮動?
3.製作感想：有想要做出的效果，但網路上的教學有一大半都看不懂，希望能學得更多
4.製作作業的時間：3小時吧