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

Advanced

Re: [作業04] 網頁導覽列的製作

[作業04] 網頁導覽列的製作

[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.記得在 #FOOTER打上自己的版權聲明

[color=#CC0099]5.HTML及CSS可直接套用下載後的附件範例,修改為自己的內容。

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]
===========================================



Edited 3 time(s). Last edit at 10/26/2011 08:47PM by JinJin.
(編輯記錄)

Attachments:
開啟 | 下載 - hw04-100.rar (97 KB)
http://mepopedia.com/~web100b/hw04/hw04-1001445010
風格:按鈕變成粉紅色
沒甚麼問題
花3小時

MEPOERs said:
HP: 同學,我建議可以多加 padding,讓文字和網頁整個感覺不會那麼擁擠。而且老師原本的範例就有 padding,要多體會與練習 padding 老師設的用意。同時很重要的是,老師有說要「至少一個東連結的頁面,如 work.html」。你這個沒有作啊,這樣不算完成作業!
改好了= =
連結的部分我以為只要做到老師上次交的地方
所以就沒做連結了
現在有了

-

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

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

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

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

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

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

-



Edited 1 time(s). Last edit at 10/27/2011 08:04PM by hughero1314.
(編輯記錄)

MEPOERs said:
HP: 給你一個讚!很漂亮。
JinJin: 做得好效率好~問題也很好喔!只要在h1的CSS裡多加 margin: 0px; 就可以囉~可以試試看
hughero1314: 謝謝老師 , 我會試試看 =)
我已經補交了!! 在你的筆電裡

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

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

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

2.有無遇到的問題?

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

3.製作感想

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


4.製作作業的時間

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

MEPOERs said:
JinJin: 圖片要另外存在圖片資料夾中喔!如images資料夾
(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:
骸蒼Aoi: 謝謝><我會在努力試試看
骸蒼Aoi: 已經改成功了^口^/感謝老師花時間教我
Attachments:
開啟 | 下載 - Firefox7-hw04-1001445042.gif (970.4 KB)
http://mepopedia.com/~web100b/hw04/hw04-1001445055
主題:母親的部落格 :">

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

做了3個小時吧~

MEPOERs said:
JinJin: #header的圖片路徑要改為background-image:images/mom_01.gif; 然後圖片檔名不能出現中文,否則會無法顯示圖片
HP: Hello, 老師的意思是,你原來圖片路徑寫的是 url(file:///C|/Users/user/Desktop/hw04-1001445055/images/mom_01.gif);,要改為 url(images/mom_01.gif);,這樣知道意思嗎?
http://mepopedia.com/~web100b/hw04/hw04-1001445129

音樂鋼琴都市風格

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

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

上課時間+3個小時

MEPOERs said:
JinJin: 要記得加上padding增加內距,還有文字的設定,看起來會更好喔!不會的部分,上課記得提出喔!加油!
http://mepopedia.com/~web100b/hw04/hw04-1001445075

1.跟生態有關,我用綠色森林風格 smiling bouncing smiley

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

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

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

MEPOERs said:
JinJin: 不錯喔!不過#FOOTER版權的部分可以放上自己的資料!
HP: 真得很不錯!而且看得出來你是個很環保的人。網頁而很有氣質而且內容也有深度。
HP: 對了,我發現你的網頁 <title> 部分沒有加上標題。
sintp23: 標題加上了,謝謝老師! : )
http://mepopedia.com/~web100b/hw04/hw04-1001445026/


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

MEPOERs said:
JinJin: 視覺效果還不錯,把body裡的width:900px;拿掉就可以了
(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:
HP: 請將 <h1> 加上 margin: 0; 的設定,這樣就不會「多一截」了。也可以看這個當見問題的第三點說明:http://mepopedia.com/forum/read.php?804,17300
Re: [作業04] 網頁導覽列的製作

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

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


2.有無遇到的問題?

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


3.製作感想

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


4.製作作業的時間

3H到4H

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

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

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

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

約4天。

MEPOERs said:
HP: 雖然的確看出來是初學者作的,但我覺得作得不錯。另外,圖片置中的語法是 align=center。
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)的話就會出現下面的畫面:





Edited 1 time(s). Last edit at 11/02/2011 08:19PM by HP.
(編輯記錄)

Attachments:
開啟 | 下載 - CASE_Incorrect_Captical_Filename.gif (25.9 KB)
http://mepopedia.com/~web100b/hw04/hw04-1001445123/


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

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

MEPOERs said:
HP: 嗯,不錯。用粉紅也很有整體感。
(1).作業網址 :http://mepopedia.com/~web100b/hw04/hw04-1001445119


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

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:
JinJin: 你的圖片資料夾用了中文名稱圖片,要改成英文喔!不然圖片會無法顯示
(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.製作感想:製作整個完整網頁不容易 利用老師給的樣本去慢慢改 才跟著了解smiling smiley
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天

Re: [作業04] 網頁導覽列的製作

(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