[color=#990000][作業04] 網頁導覽列的製作[/color]

1. [color=#663300]一、製作說明：[/color]

1.請參考 [url=http://mepopedia.com/forum/read.php?804,17032][講義04] 以CSS製作網頁導覽列[/url]
的步驟製作，從三種方式中，選擇其中一種製作方式，目前只先教了圖片按鈕的做法可先以這個為主，也可自行嘗試其他做法。

[color=#CC0099]2.請下載附件檔案製作，內有圖檔，index.html以及style.css檔，請將自己的期中作業內容套入附件的HTML的架構，再修改CSS設定以及導覽列的連結設定。[/color]

3.每個同學記得在[color=#990033]title的部分打上『自己作業的命名』[/color]

4.記得在 ＃ＦＯＯＴＥＲ打上自己的版權聲明

[color=#CC0099]5.ＨＴＭＬ及ＣＳＳ可直接套用下載後的附件範例，修改為自己的內容。

6.#header、#button、#content及#footer內，請自行放入不同圖片與文字內容，以期末作業內容為主。[/color]

7.請每位同學依步驟完成本單元後，上傳至FTP

8.本次作業的重點在於：

[color=#CC0066]（1 ）導覽列的製作
（2 ）製作可以互相連結的網頁
（3 ）如何將導覽列設計成畫龍點睛的作用，並兼具網頁整體風格與設計質感
（4 ）如何將圖片與色彩搭配出有質感的網頁。[/color]

2. [color=#663300]二、繳交作業方式[/color]

1.製作完成後，檔案命名方式：

[color=#669900]第四個作業FTP上的資料夾為：hw04

每位同學請將自己的資料夾命名為：hw04-學號
這個作業的網址則為:http://mepopedia.com/~web100b/hw04/hw04-100xxxxxxx

資料夾內含：
1.首頁命名為index.html
2.一個命名為style.css的css樣式檔
3.至少一個連結的頁面，如：works.html
4.images圖檔資料夾

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


2.上傳至FTP

3.回覆本篇文章

(1).作業網址 ：

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


[color=#CC0099]請務必在下次上課前回覆，否則為遲交[/color]


[hr]
[color=#0033CC]永遠的印象--莫內，範例網址：[/color]

[color=#CC3366]1.透過CSS，以清單 ＜ul＞及＜li＞製作網頁導覽列[/color]
http://mepopedia.com/~jinjin/web/hw04/　（滑入僅文字變色的導覽列）
http://mepopedia.com/~jinjin/web/hw04-1/　（滑入底色變色及文字置中的導覽列）

[color=#CC3366]2.以圖片按鈕製作的導覽列[/color]
http://mepopedia.com/~jinjin/web/hw04-2/　
[hr]
===========================================
[color=#CC0066]若經發現作業為直接複製同學檔案以零分計[/color]
===========================================



(編輯記錄)

http://mepopedia.com/~web100b/hw04/hw04-1001445010
風格:按鈕變成粉紅色
沒甚麼問題
花3小時

MEPOERs said:

改好了= =
連結的部分我以為只要做到老師上次交的地方
所以就沒做連結了
現在有了

-

(1).作業網址 ：
　　http://mepopedia.com/~web100b/hw04/hw04-1001445022

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

　1. 網頁與導覽列配色與風格設定：
　　　我將整個版面的顏色更換成藍色
　　　滑鼠變換的色彩也在百分之五十和百分之八十之間做切換

　2. 有無遇到的問題：
　　　無。
　　　另外想問一下老師，關於標題的問題
　　　大標題我們用 h1 但是他等同於 p 那下面那行副標題就會被往下擠
　　　如果要改善這個問題，是不是就只能夠分開設定 CSS 標籤 ?

　3. 製作感想：
　　　可以獨立用 CSS 設計網頁感到很開心

　4. 製作作業的時間：
　　　兩個小時

-



(編輯記錄)

MEPOERs said:

我已經補交了!! 在你的筆電裡

http://mepopedia.com/~web100b/hw04/hw04-1001445051/

1.網頁與導覽列配色與風格設定：

★ 我喜歡自己攝影的作品! 所以用自己攝影照片風格來製作網頁 :'D

2.有無遇到的問題?

★有點煩雜 邊看老師講義邊做
還是很難上手 (TAT)

3.製作感想

♥ 發現其實自己製作另一感覺網頁滿好玩的 !
不過一開始還是很難下手


4.製作作業的時間

3小時吧 截圖用按鈕 排版 找資料

MEPOERs said:

(1).作業網址 ： http://mepopedia.com/~web100b/hw04/hw04-1001445042/

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

1.網頁與導覽列配色與風格設定： 用自己做的圖案來製作，整體風格是可愛的風格

2.有無遇到的問題? 老師教的很明瞭，都會做了

3.製作感想 老師我要求救!!!我想要做出在書上看到的效果，在WORK的頁面，在用滑鼠碰到圖片時會轉換，但是為什麼後面板面不會跟著變長??言就好久還是沒辦法，就算用p換行也還是一樣???

4.製作作業的時間 好幾個晚上?

同學 骸蒼Aoi 您好：

我用你的網頁試作了一個你想要的效果，你看看如何：

http://mepopedia.com/~jinjin/web/hw04-1001445042-HP/work.html

我在 IE6、Firefox7測試過，應該都沒有問題。


我想先說的是，因為看到您作的網頁(作業)實在是很用心，就試了一陣幫你把效果作出來。

在說明我是怎麼改到現在的效果前，我還是要先講，底下的修改真得比較難。這是由於雖然 Dreamweaver 內建的一些動態功能雖然很好用，對非理工科系背景的設計師來說很好用，但內建的語法基本上就會比較沒有彈性，一遇到問題就很難改。不過因為我想你應該會想要學，所以我還是試著用你原來的作法作為基礎和你講解。如果太難的話，你直接用也可以。以下就「理論部份」和「實作部份」都和你作解說，希望你能在理論上和實作上都有一些收獲。

在開始之前，請記得將 work.html 的原始碼備份。


說明 1：「絕對定位」會讓 DIV 脫離原本排版，自成一格，因此會讓 DIV 重疊

目前最主要是問題在於你的網頁裡面用到了「絕對定位」(position: absolute)的定位語法，這種語法會讓 DIV 和原本排版中的其他 DIV 「重疊」，或者你也可以想成是在版面中不占高度，像是浮起來一樣。簡而言之，就是你現在遇到的問題。(註：一般的排版模式屬於是「自然流動」，也就是 DIV 會由上而下一個接一個，不會重疊。)

解決方法就是：不要用 position:absolute;。

我知道你應該是用 Dreamweaver 作的，所以應該也不知道什麼是「絕對定位」，不過沒關係，反正就是不要用就對了。我猜在你所用的 Dreamweaver 書裡面應該是叫作 AP DIV，基本上只要是有 AP DIV 的步驟不要用就對了。後面會再作處理。

解法步驟 1：在原始碼中刪去所有 AP DIV 的設定，在你的例子中就是把大約 37~86 行的原始碼全部刪除。

要詳細了解的話，其實只要刪那六張圖片 DIV 的 position: absolute; 和 height: 115px; 這二行 (共12行) 就可以了。但事實上全部刪除比較正確。

作完這個步驟後，你會發現六張圖片很乖地一張接一張由上往下排列，然後滑鼠移到縮圖後，全圖會出現，而其他五張會消失，但其他五張圖片雖然消失，但還是占有位置。這個狀況我們由下一個說明處理。

說明 2：「隱藏顯示性」(visibility: hidden) 只會讓 DIV「看不見，但依舊在」

「看不見，但依舊在」的意思是 DIV (或圖片) 只是看不見，但還是會占有版面。也就是造成上面的問題的主因。

要讓 DIV 看不見，也不占版面要使用：display: none;，而回復原貌要使用：display: block;

因為 Dreamweaver 內建的 Javascript 動態程式是使用「顯示性」 visibility 作為動態置換的語法，而非「呈現狀態」 display。因此我們要手動修改 Javascript 的程式部份。

解法步驟 2：在原始碼第32~33行中，將 visibility 改為 display，visible 改為 block，hidden 改為 none

如果行數沒有問題的話，請將第 32 行的 visible 改為 block。同一行後面的 hidden 改為 none (注意，是 hidden 不是 hide)。再將第 33 行的 visibility 改為 display。

原理上就要作下面的修改：
visibility: visible; → display: block;
visibility: hidden; → display: none;

這和 Javascript 程式和 CSS 語法的「互動」有關，我只寫上來，事際上怎麼運作因過於進階就先不說明了。

作完這個步驟後，當滑鼠移到縮圖上時，圖片就會照預期的方式置換，而且你可以注意到，整個網頁的畫面會隨著圖片的大小動態調整。

現在最後的問題就是，網頁載入時，六張圖片還是一次全部呈顯，還不能只顯示其中一張。

說明 3：修改 body onload="..." 可以達到頁面載入時的效果控制

有關在 Dreamweaver 中控制頁面載入時的效果的操作方法我不太清楚，也許書上有寫。我這邊就直接以原始碼的方式加入。不過，我也是使用你目前用的 Dreamweaver 內建語法。讓 Pancake.jpg 這張圖作入頁面載入時的預設圖片。

解法步驟 3：修改第42行 onload 語法
目標是在 body onload="..." 中加入以下這一行： MM_showHideLayers('Thumbelina','','hide','Pancake','','show','Maccha','','hide','Alice','','hide','strawberrysundae','','hide','Macaron','','hide') 修改標的第42行原本語法： <body onload="MM_preloadImages('images/images/btn_01-1.gif','images/images/btn_02-2.gif','images/images/btn_03-3.gif','images/images/btn_04-4.gif','images/images/btn_05-5.gif');"> 修改後語法 (直接以此覆蓋原本第42行語法即可)： <body onload="MM_preloadImages('images/images/btn_01-1.gif','images/images/btn_02-2.gif','images/images/btn_03-3.gif','images/images/btn_04-4.gif','images/images/btn_05-5.gif');MM_showHideLayers('Thumbelina','','hide','Pancake','','show','Maccha','','hide','Alice','','hide','strawberrysundae','','hide','Macaron','','hide')">

原則上，改到這裡就大功告成了！

不知會不會太困難？不過裡面要仔細一些應該還可以吧。其中要注意第二步驟，少打一個字，多打一個字可能都會有問題。

最後，如果要在「縮圖」和「全圖」之間加上一些空隙的話，可以很簡單地在 #Pancake 之前加上 <br/> 就會有一些 padding 的效果出來了。

MEPOERs said:

http://mepopedia.com/~web100b/hw04/hw04-1001445055
主題:母親的部落格 :">

還好經過上次的作業 有比較熟悉
唯一個問題是 自製的圖片 在網頁跑不出來
後來解決了

做了3個小時吧~

MEPOERs said:

我改好了!!

http://mepopedia.com/~web100b/hw04/hw04-1001445129

音樂鋼琴都市風格

有許多問題但應該是操作還不夠純熟的緣故

真的需要多加練習才能更熟練

上課時間+3個小時

MEPOERs said:

http://mepopedia.com/~web100b/hw04/hw04-1001445075

1.跟生態有關，我用綠色森林風格

2.照老師講義做，沒甚麼問題~~

3.自己還不夠熟練，感覺蠻複雜@@，但很開心學會如何放圖片!

4.製作時間約3小時多~

MEPOERs said:

http://mepopedia.com/~web100b/hw04/hw04-1001445026/


1.用自己攝影照片當網站，顏色就已攝影照片顏色為主
2.用老師的來改，可是我無法置中。
想放照片也放不進去，想明天問老師。
3.語法還有英文的意思還是忘光光了，要看老師講義才會想起來
4.一小時半，語法好難懂

MEPOERs said:

(1).作業網址 ：http://mepopedia.com/~web100b/hw04/hw04-1001445113

1.網頁與導覽列配色與風格設定：一樣是藍色~~~
2.有無遇到的問題? 目前沒有
3.製作感想 不夠熟練
4.製作作業的時間 約三小時

http://mepopedia.com/~web100b/hw04/hw04-1001445077
1.網頁與導覽列配色與風格設定： 搭配主題的畫風選用較不搶走作品風采的配色
2.有無遇到的問題? 上課太趕了很多東西都沒能聽仔細
3.製作感想 剛開始做有些困難之後回去看以前的作業跟講義才慢慢找回感覺
4.製作作業的時間 大約三小時

http://mepopedia.com/~web100b/hw04/hw04-1001445008

1.網頁與導覽列配色與風格設定： 藍色

2.有無遇到的問題? 弄了好久,不知道為什麼上面會多ㄧ截

3.製作感想

真的越來越複雜..需要再好好鑽研 ...

4.製作作業的時間

4hr

MEPOERs said:

1.網頁與導覽列配色與風格設定：

以"墨"為主題，想呈現較沉穩的風格。


2.有無遇到的問題?

我家的FTP一直出現錯誤...


3.製作感想

...按鈕沒有DW不知道該怎麼做
...要切割圖片換PS鬧脾氣...！
((仰天長歎


4.製作作業的時間

3H到4H

http://mepopedia.com/~web100b/hw04/hw04-1001445049/

以薰衣草為主軸概念做整體配色，加強北海道及薰衣草的印象結合。

照片使用align="middle"仍無置中效果，最後只能用空白鍵推到接近置中。

不是一步驟的跟著做網頁時，會有點手足無措，很多設定要注意的地方會漏、會忘。

約4天。

MEPOERs said:

http://mepopedia.com/~web100b/hw04/hw04-1001445063

1.以藍色為主!想呈現自然、輕鬆的感覺!讓人在閱讀起來比較不會沉重
2.英文還是很不熟練!字體大小還沒抓到感覺!要不停調整!
3.photoshop不熟練，修圖剪裁花較長的時間!已有試著用works連結第一個按鈕!成功!但works還沒製作
目前嘗試用更多不同的樣式做搭配!內文的部分也再努力當中!
4.四小時整

http://mepopedia.com/~web100b/hw04/hw04-1001445055
我改好了 ((倒

(1).作業網址 ：
　　http://mepopedia.com/~web100b/hw04/hw04-1001445057

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

　1. 網頁與導覽列配色與風格設定：
　　　粉紅色系,讓整體搭配起來感到俏皮可愛

　2. 有無遇到的問題：
　　　檢視上好像發生問題了 QQ
IE和GOOGLE有點不太一樣....

　3. 製作感想：
　　　覺得還是有點不太熟練


　4. 製作作業的時間：
　　　四個小時

Hello,

你犯了一個很典型的錯誤：檔名不能有大寫（尤其是 index.html 主頁）。你現在寫的是 index.HTML，伺服器是認不得的，所以你的網頁現在出不來。要改成 index.html。

我針對你的問題整理出二點，放在這篇文章中（目前的第一點與第二點就是以你目前的問題寫的）：

http://mepopedia.com/forum/read.php?804,17300

主頁寫成大寫（index.HTML）的話就會出現下面的畫面：





(編輯記錄)

http://mepopedia.com/~web100b/hw04/hw04-1001445123/


1.網頁與導覽列配色與風格設定：復古風
2.有無遇到的問題? 大致上沒有
3.製作感想 希望能趕快完成完整的網頁 !!
4.製作作業的時間 製圖設計＋網頁製作 大約4小時

http://mepopedia.com/~web100b/hw04/hw04-1001445032
改成粉紅系的梵谷的網站
恩......問題不大
花約3小時

MEPOERs said:

(1).作業網址 ：http://mepopedia.com/~web100b/hw04/hw04-1001445119


(2).請回答以下問題：
1.網頁與導覽列配色與風格設定： 黑白ˊ黑暗詭異><
2.有無遇到的問題? 還好
3.製作感想 得多多練習才是 不過越碰越熟悉了
4.製作作業的時間 四五小時((因為摸很久

http://mepopedia.com/~web100b/hw04/hw04-1001445036/
1.網頁與導覽列配色與風格設定：利用老師給的作業4的圖檔做。
2.有無遇到的問題?header那邊怪怪的不知道為什麼
3.製作感想-要參考之前的講義做不然會有點忘記
4.製作作業的時間-上課2節

http://mepopedia.com/~web100b/hw04/hw04-1001445004/

1.網頁與導覽列配色與風格設定： 喜歡的韓國女子團體2ne1
風格:粉紅高彩度
2.有無遇到的問題 沒有
3.製作感想 有點複雜
4.製作作業的時間再上課2小時
不知道為什麼照片無法顯示??

MEPOERs said:

(1).作業網址 ：
http://mepopedia.com/~web100b/hw04/hw04-1001445024
(2).請回答以下問題：
1.網頁與導覽列配色與風格設定：深藍
2.有無遇到的問題? 無
3.製作感想 對於連結有初步了解
4.製作作業的時間 2小時

http://mepopedia.com/~web100b/hw04/hw04-9711443098


works的表格不會做，語法也不太懂，所以摸了很久，但最後結果還是有點不像！

http://mepopedia.com/~web100b/hw04/hw04-1001445095
1.網頁與導覽列配色與風格設定： 我走比較活潑俏皮的風格
2.有無遇到的問題? 目前還好
3.製作感想 剛開始做有些困難之後回去看講義才慢慢了解
4.製作作業的時間 大約三小時

http://mepopedia.com/~web100b/hw04/hw04-1001445091
1.網頁與導覽列配色與風格設定:幾米-淡淡的色調.那種感覺
2.有無遇到的問題?還好囉
3.製作感想:製作整個完整網頁不容易 利用老師給的樣本去慢慢改 才跟著了解
4.製作作業的時間:三小時

http://mepopedia.com/~web100b/hw04/hw04-1001445047
1.網頁與導覽列配色與風格設定:亮色調展現活潑感
2.有無遇到的問題?無
3.製作感想:終於有點知道該怎麼做了~
4.製作作業的時間:大慨三小時

http://mepopedia.com/~web100b/hw04/hw04-1001445105


1.網頁與導覽列配色與風格設定:黑色
2.有無遇到的問題:無
3.製作感想:無
4.製作作業的時間:30分鐘

http://mepopedia.com/~web100b/hw04/hw04-1001445030

1. 紫色神話森林

2. 發現有打置中的指令，卻沒有反應，但後來重打的時候有成功。

3. 有種想就想讓她更好的衝動，就會很努力地想點子，讓他進入我的畫面中。

4. 5H，光按鍵就用了好久，還要加上思考時間，真是費盡心思-口-!!

(1).作業網址 ： http://mepopedia.com/~web100b/hw04/hw04-1001445083/

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

1.網頁與導覽列配色與風格設定： 韓國團體但以拼色為主

2.有無遇到的問題? 沒有

3.製作感想 我覺得做這個很有去 雖然某些CSS還是看不懂因為我英文很爛=_=

4.製作作業的時間 2hr

(1).作業網址 ：http://mepopedia.com/~web100b/hw04/hw04-1001445002


(2).請回答以下問題：
1.網頁主題： 星空
配色與風格設定： 幾米憂鬱藍
2.有無遇到的問題? 還好
3.製作感想 很累但完成很有成就感
4.製作作業的時間 3.4天

(1).作業網址 ： http://mepopedia.com/~web100b/hw04/hw04-1001445081

(2).請回答以下問題：
1.網頁與導覽列配色與風格設定： 簡單黑白
2.有無遇到的問題 調整頁面時有點麻煩
3.製作感想 我覺得我做得不錯哈哈
4.製作作業的時間 兩天

(1).作業網址 ： http://mepopedia.com/~web100b/hw04/hw04-1001445065/


1.網頁與導覽列配色與風格設定： 紫色和綠色還有點點!!

2.有無遇到的問題? 我的botten不會變換到我設的圖片

3.製作感想 我還是覺得我有很多地方不太會，還事需要多多練習

4.製作作業的時間 3小時

http://mepopedia.com/~web100b/hw04/hw04-1001445079/index.html
1.網頁與導覽列配色與風格設定：利用PS設計圖片製作成導覽列
2.有無遇到的問題? 無
3.製作感想 看到到覽列套上自己挑選和設計的圖片 感覺很有成就感
4.製作作業的時間 2hr