【火蟲-初次見面】

第一次使用Firebug, 還記得在出作業的那幾個禮拜完全不知道要怎麼使用

後來詢問多問同學以及google一下才初步跟火蟲認識

 

●除錯debug

首先, 必須說找了有一段時間才找到有可以監測到錯誤跟警告的網頁

不過到debug的部分因為是要使用JavaScript來做debug的動作

也試著跟同學詢問如何寫JavaScript(  http://www.w3schools.com/ )

但由於自己的能力不是很足沒辦法進行debug的動作

只能作最簡單的觀察動作

 

 ●排版

在HTML中有個排版功能可以觀察這個網頁的整個排版過程

點下去還會在網頁的左及上方會有比例尺以方便做編輯

以下是拿GOOGLE SEARCH首頁作為觀察

(黃框框為觀察部分)

 

●Net網路

 可以藉此觀察一個網站需要的所有元素有要花的時間

雖然不是看得頗懂可能看了很久還是大概只知道ms

 

【阿噗-火蟲-初次見面】

今天拿阿噗來實驗WWWW

主題是自己最喜歡的樂器-VIOLA中提琴

並加以惡搞和模擬出一個正常使用者在使用噗浪的狀態

 

●改圖

 

　　STEP 1-先去GOOGLE出自己想要的圖片

      (圖片來源: https://www.google.com/search?q=VIOLA&hl=zh-TW&site=webhp&prmd=imvns&sou...)

      選好圖片以後-->右鍵-->複製圖片網址

 

　　STEP 2-修改HTML圖片網址

      開啟噗浪啟動火蟲(firebug)

      將html的圖片網址改成剛在google到的圖片網址替代

      原圖

       修改過後

 

 

 

 

●改字

只要將html的相對位置的文字改掉即可

我也嘗試著把原本的內容幾乎全改掉

(黃色箭頭指示地方)

 

 

●改HTML樣式

 

在HTML中在右邊有個樣式的功能

我將原本噗浪說話的地方網底橘色我把它改成了紫色

 

(黃色箭頭指示地方)

原本是橘色的

 

 改成紫色了!!!!

也順便把網底顏色-W-

名稱的字體顏色也做了修改

 

 

 

 

 

 

-----------------------------------------------------------------------------------------------------

原圖

 

修改後

 

 

【阿噗-火蟲-自己-三者交會】

藉由阿噗使用Firebug對於HTML有慢慢的認識

一開始在做的時候根本都沒有頭緒

也是先參考並且詢問同學才大致了解

其實改HTML網頁還不錯玩

不過不知道為甚麼修改改到一半的時候原本改好的設定都會消失不見

我想這可能是我還要再繼續鑽研的地方

而且在做的過程中也學到要小心翼翼謹慎行事

因為自己後來的粗心大意導致重做了兩次

 

做作業的過程中

也試著去了解JavaScript甚至還詢問同學以及上網蒐集資料

雖然結果還是不是很清楚

但也學習到自主學習的精神

 

在不久前還是無名小站的天下時

也曾經因為不能改用樣式兒很困擾不服氣

如今現在也可以自己學會並做修改

讓CSS語法不再對我是個陌生困難的事物

 

 

【後記】

做完Firebug使用後,後來也發現Google Chrome瀏覽器也有相似的功能

而且感覺也很人性化,只要按一下F12就會有了!!!!!!!

以後也可以找個時間再作詳細的研究

 

【引用】

圖片:GOOGLE SEARCH

https://www.google.com/search?hl=zh-TW&biw=1920&bih=955&site=webhp&tbm=i...

 

色卡:RGB配色表

http://www.wahart.com.hk/rgb.htm

 

Javascript教學網站

http://www.w3schools.com/ 

 

Firebug教學使用

http://design2u.me/blog/153/%E7%B6%B2%E9%A0%81%E8%A8%AD%E8%A8%88-firebug...