DOUBLE冠因為最近去忙公事、所以最近有幾天沒有發文,跟大家

說聲抱歉,這邊今天要分享的文章是關於設計網頁這部分,有時候

我們自己去摸索網頁、設計CSS等等,會發現有時候會花很多時間

在這上面,如果有一個好用的工具可以幫你了解別人怎麼設計網頁

,如何運用CSS,我想設計網頁會更加的得心應手!

CHROME瀏覽器

  • 瀏覽器名稱:CHROME(現在最新16版本)
  • 下載位置:按這裡

Firebug Lite for Google Chrome

  • 擴充功能名稱:Firebug Lite for Google Chrome
  • 語言:英文
  • 版本:1.4
  • 下載位置:按這裡

我想FIREBUG這款工具,應該是相當網頁設計的人在用,不過因為本身愛用CHROEM的關係,

所以去找了一款可以用的工具,就像現在看到的FIREBUGLITE,

第一步,我們先來到擴充功能所在位置、並且按下安裝到CHROME,

第二步 我拿自己網站來做測試,然後我按下很像昆蟲的圖示,就會出現一個空白的畫面,

這邊需要按下INSPECT,然後我選擇DOUBLE就是要升級的LOGO做測試,

第三步 這邊確定有沒有讀取到就是靠藍色框框判別,這邊點完LOGO之後,就會出現一個畫面,

然後你就會發現原始碼和CSS怎麼寫了,

第四步 我們也可以馬上來改CSS做測試,像有時候自己的網站,尤其是WORDPRESS像PHP

這種模組架的網站,用FIREBUGLITE這種工具相當重要,不然在後台有時候改一改,

可能整個網站就掛掉了,這邊我選擇高度來做測試,至於CSS部分,可能麻煩大家自己

花時間摸索了,

最後 我們把高度改為300px,就會發現LOGO和文章的距離整個拉長了,有興趣的朋友們,

趕快拿自己網站測試看看囉!

 

熱門相關文章

CHROME擴充功能好用系列-一键管理所有扩展幫你停掉擴充功能
今天要分享的CHROME擴充軟體,就是我們平常因為CHROME 擴充軟體相當好用,然後會安裝相當多個,然後發現這些擴充 功能不斷地吃掉你的記憶體,導致有時電腦跑起來就是怪怪的, 然後如果要去後台停掉擴充功能,好像又有點麻煩,所以這邊 教你一招如何快速停掉擴充功能的方式! CHROME   瀏覽器名稱:CHROME(現在最新16版本) 下載位置:按這裡   一键管理所有扩展   擴充功能名稱:一键管理所有扩展 語言:簡體中文 版本:1.3.3.5 下載位置:按這裡   首先我們先到擴充功能的位置,按右上方加到CHROME,因為我已經安裝了, 所以顯示已加到CHROME,   安裝完之後,按下小圖示,就會出現一個視窗,顯示白色就是還在用當中, 灰色就是停掉的部分,只要點擊一下就可以關閉或是啟用擴充功能, 是不是相當方便呢?  
繼續閱讀
CHROME擴充功能好用系列-用weebly快速架網站
今天DOUBLE冠要介紹的,是在昨天逛ㄚ逛,忽然發現一個擴充功能叫做weebly,想到之前看到有朋友拿這個架網站,很好奇的玩了一下,發現有時候如果要辦活動、讓人填一些報名表格等等,這個WEEBLY快速架站實在還滿方便的,還提供讓你可以自己選網域的設定! CHROME瀏覽器   瀏覽器名稱:CHROME(現在最新16版本) 下載位置:按這裡   Weebly - Website Builder   擴充功能名稱:Weebly - Website Builder 語言:簡體中文 版本:1.04 下載位置:按這裡 注意事項:要升級PRO每個月有不同費用,基本免費用戶就只能架一個網站而已,PRO可以架10個!   PS:此文章總共兩頁,大家記得注意一下喔! 第一步我們先來擴充功能的位置,並且左上方按加到CHROME, 第二步 就會看到一個畫面,然後請按"W"那個圖示,按進去, 第三步 然後會出現一個要不要授權的畫面,建議按不用謝謝了這個, 第四步  然後就會出現官網,然後麻煩請註冊一個帳號,註冊完就會進入新增網站畫 面,它會要你選二級網域還是新買一個網域或者用已有的網域來用,這邊就看你自己 怎麼選擇, 第五步 ...
繼續閱讀
CHROME擴充功能好用系列-用PHOTOLIVE下載FACEBOOK相片
今天DOUBLE冠要介紹的CHROME功能好用系列,就是有時候我們想要把FACEBOOK的相片搬到其它社群網站時,有時候慢慢下載感覺相當麻煩,這邊要介紹一個方式如何快速把FB的相片下載下來,讓你在搬FB相片時更能得心應手喔!   CHROME瀏覽器 瀏覽器名稱:CHROME(現在最新16版本) 下載位置:按這裡   PhotoLive 擴充功能名稱:PhotoLive 語言:英文 版本:2.0.1 下載位置:按這裡 第一步我們先到CHROME擴充功能位置,並且按右上方加到CHROME, 第二步 我們看到網頁有要把"DOWNLOAD PHOTO"給拉上去,就像圖片我已經拉上去 的框框一樣, 第三步 來到我要用的素材,就是我粉絲團的FB相片, 第四步 按下書籤列 DOWNLOAD圖示,就會出現一個藍色框框"DOWNLOAD PHOTO” 給它按下去, 第五步 就會出現下載畫面,就會下載成功, 最後就會發現很順利出現在我們的桌面當中了,
繼續閱讀
CHROME擴充功能好用系列-運用圖桌幫你截取網路圖片
今天DOUBLE冠要分享的,是要如何截取網路上的圖片,之前 DOUBLE冠剛用chrome瀏覽器的時候,我運用的截圖擴充功能 是截圖快手,不過用了一陣子之後,後來發現這個擴充功能感覺 怪怪的,不像以前這麼好用,而且它只能輸出PNG類型的圖片, 相當檔案比較大,還要另外轉,所以最近剛好DOUBLE冠有找到 一個更好用的截圖工具,讓你在網路截圖上能更加方便(不過還是要記得智慧財產權喔)! chrome瀏覽器   瀏覽器名稱:CHROME(現在最新16版本) 下載位置:按這裡   圖桌   CHROME擴充功能名稱:圖桌 下載位置:按這裡 聲明:這篇文章純粹教學分享用,無任何商業用途。   第一步  我們先來CHROME擴充功能所在位置,並按右上角加到CHROME! 第二步 我們來到想要截圖的地方,比如我覺得想截YAHOO首頁中間那一塊, 第三步 我們直接按安裝完的小圖示,選擇"選擇區域截圖",會變這個畫面, 把要截的框框選取好, 第四步  按打勾選項後,會出現這個畫面,如果要保存的話,直接按保存就可以, 不過這邊還要在介紹另外一個部分, 第五步 我們選擇右上方"標註"選項,點進去後會看到這個畫面, 第六步 接著我們按中間偏右上方的"保存與分享",會出現一個畫面,按左邊保存, 會出現一個網址,以後如果我們還想編輯這張圖片,就靠這個網址就可以了, 是不是很方便呢? 最後如果要存圖片,只要按左上方的"導出JPG"之後,就可以存圖了, 左邊還有一些工具列可以幫助你標記,真的滿方便的, 這款好用的擴充功能,就分享給大家啦!    
繼續閱讀
chrome擴充功能好用系列-Search Box幫你方便搜尋
今天要分享的chrome擴充功能系列呢,是因為最近的社群和 搜尋引擎實在很多,有時候我們要搜尋的時候,還要一個一個 打開網址來搜尋,有些搜尋位置還沒有那麼明顯,找的時間有 時候也滿花費心力的,今天要介紹一個好用的擴充功能,可以 幫助你在搜尋上更節省時間。 CHROME瀏覽器   瀏覽器名稱:CHROME 下載位置:按這裡   search Box   CHROME擴充功能名稱:Search Box 下載位置:按這裡   第一步 我們先來到Search Box所在位置,並且按右上方加到chrome, 第二步  加完之後,我們來"search box"圖示按進去,就是放大鏡那個圖示, 並按下方的Manage Search Engines... 第三步 這邊有很多可以搜尋的,這邊示範要如何新增,以現在還是滿夯的FB為例, 要新增的話需要這樣打, 網址/search?q=%s 不太清楚這邊有圖片可以看,然後按ADD, 第四步 ...
繼續閱讀
CHROME擴充功能好用系列-一键管理所有扩展幫你停掉擴充功能
CHROME擴充功能好用系列-用weebly快速架網站
CHROME擴充功能好用系列-用PHOTOLIVE下載FACEBOOK相片
CHROME擴充功能好用系列-運用圖桌幫你截取網路圖片
chrome擴充功能好用系列-Search Box幫你方便搜尋

DOUBLE冠就是愛升級

  • ※一起訂閱本站:按這裡
  • ※訂閱DOUBLE冠手機版本站:按這裡下載
  • ※引用網址:
  • ※如有發現圖檔無法預覽,請麻煩告知告知,將會盡速處理!謝謝~
  • ※請勿全文轉貼本站文章,歡迎「部份引用」與介紹,並註明出處~謝謝~~
  • 隨機文章

    FACEBOOK留言

    0 留言

    發表留言 »

    (姓名)
    (信箱)
    (網站)

    網站搜尋

    2015-DOUBLE冠就是愛升級 引用-Theme Sco v5.0 By:Scorpio

    本站不支援IE6以下的版本