檢測並混搭出你的第一張網頁

請確認您已經 安裝好 X-Ray Goggles

在瀏覽到你想要「觀察」的網頁時,您隨時可以點擊書籤列中的 X-Ray Goggles 按鈕,開始「Hack」網頁。

如果您需要指令的相關說明,只需要按下鍵盤上的 h 鍵,或者螢幕右側的Help 按鈕即可。

查看網頁元素

當 X 光護目鏡啟動後,你會發現,當你的滑鼠移動時,網頁上會隨之顯示亮色框框。

這些框框都代表網頁元素。點擊任何一個,你就會進入程式編輯器,在此即可發揮自己的創意重新混搭這些元素。

如果沒有出現編輯器的界面,有可能網路出了一些問​​題。請重新載入頁面,並重新打開 X-Ray Goggles。

開始混搭吧

根據您選擇的元素類型,你可以做各種形式的修改。

修改文字

這是最簡單的一件事。選擇一個文字區塊,並在編輯器的左邊修改內容。你可以在編輯器的右邊預覽你的修改。

替換圖案

在 HTML 中,所有的圖片都以 <img> 標籤代表。你會看到每個 <img> 的標籤都有 <src="..."> 的屬性,告知這個標籤圖片實際位置的網址。

你可以將原本的圖片,換成任何你想要的圖。只要開一個新的分頁,找到你想要用的圖片,在圖片上點擊右鍵,選擇 複製圖片網址

將複製好的網址貼進編輯器的左邊,你就應該能在右側的看到預覽了。別忘記點擊 Update 以在頁面上保存你的戰果。

修改超連結

你可以修改頁面上的超連結,指向任何你想去的地方。

所有的超連結都以 <a href=" 開始,並包含連結的目標網址。只要修改 " 引號中的連結,你就能改變連結的目標。

你或許也想要更動「錨點文字」,在網頁上通常以底線與藍色字體顯示,提供訪客連結目標是什麼的文字。

提交並發佈!

如果你犯了什麼錯,只要點擊右上角的 Nevermind 即可。

當你準備好要發佈成果,點擊鍵盤上的 p 鍵,或右側工具列上的 Publish 按鈕即可。

如果你已登入 Webmaker,你發佈的 Goggles 混搭作品會自動加入你的 My Makes 藝廊中,你也會取得一個獨一無二的網址,讓你可以與朋友分享。

進一步提升自己

想要更進階一點嗎?嘗試編輯該頁面的 CSS。按住 c 鍵查看 CSS,然後按 空白鍵 開始編輯。

//這些人們幫忙撰寫了這篇文章:Irvin Chen, nizibaba您也可以幫忙 - 看看要怎麼作

這篇文章有幫助嗎? 請稍候...

成為 Mozilla 技術支援站的志工