__TOC__ = 請確認您已經 [[How to Install X-Ray Goggles|安裝好 X-Ray Goggles]] = 在瀏覽到你想要「觀察」的網頁時，您隨時可以點擊書籤列中的 X-Ray Goggles 按鈕，開始「Hack」網頁。 =查看網頁元素= 當 X 光護目鏡啟動後，你會發現，當你的滑鼠移動時，網頁上會隨之顯示亮色框框。 這些框框都代表網頁元素。點擊任何一個，你就會進入程式編輯器，在此即可發揮自己的創意重新混搭這些元素。 = 開始混搭吧 = 根據您選擇的元素類型，您可以進行各種形式的混搭。 == 修改文字 == 選取一個文字區塊，並在程式碼編輯器中修改其內容。您將會在上方的主窗格中看到變更的預覽。 == 替換圖片 == 在 HTML 中，所有的圖片都使用 <code><<!-- -->img<!-- -->></code> 標籤。您會看到每個 <<!-- -->img<!-- -->> 標籤都指向一個 URL 位址，這個位址告訴標籤圖片的實際存放位置。 您可以將原始圖片換成任何您想要的圖片。只要開啟一個新的瀏覽器分頁，找到您想使用的圖片，按一下右鍵，然後選取 {button 複製圖片網址}。 將複製的圖片 URL 貼到程式碼編輯器中，您應該就會在預覽中看到變更。 == 修改超連結 == 您可以讓超連結指向任何您想要的地方。 所有的超連結都以 <code><<!-- -->a href="<!-- --></code> 開頭，後面接著超連結指向的 URL。只要修改引號之間的 URL，您就改變了連結的目的地。 您可能也會想變更所謂的「錨點文字」。這是帶有標籤的文字，為訪客提供關於目標頁面的線索，而且通常會以底線和藍色字體顯示。 = 提交並發佈！ = 如果您不小心弄錯了，可以點擊程式碼編輯器中的 {button Cancel} 按鈕。 如果您對變更感到滿意，請點擊綠色的 {button Update} 按鈕，看看您混搭後的頁面是什麼樣子。 當您準備好要發佈時，請按下鍵盤上的 {key p} 鍵，或右側工具列上的 {button Publish} 按鈕。 如果您已登入 teach.mozilla.org，您發佈的 Goggles 混搭作品將會被新增到 teach.mozilla.org 上的「Your Projects」頁面，您也會獲得一個專屬的 URL 以便與朋友分享。

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

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

查看網頁元素

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

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

開始混搭吧

根據您選擇的元素類型，您可以進行各種形式的混搭。

修改文字

選取一個文字區塊，並在程式碼編輯器中修改其內容。您將會在上方的主窗格中看到變更的預覽。

替換圖片

在 HTML 中，所有的圖片都使用 <img> 標籤。您會看到每個 <img> 標籤都指向一個 URL 位址，這個位址告訴標籤圖片的實際存放位置。

您可以將原始圖片換成任何您想要的圖片。只要開啟一個新的瀏覽器分頁，找到您想使用的圖片，按一下右鍵，然後選取 複製圖片網址。

將複製的圖片 URL 貼到程式碼編輯器中，您應該就會在預覽中看到變更。

修改超連結

您可以讓超連結指向任何您想要的地方。

所有的超連結都以 <a href=" 開頭，後面接著超連結指向的 URL。只要修改引號之間的 URL，您就改變了連結的目的地。

您可能也會想變更所謂的「錨點文字」。這是帶有標籤的文字，為訪客提供關於目標頁面的線索，而且通常會以底線和藍色字體顯示。

提交並發佈！

如果您不小心弄錯了，可以點擊程式碼編輯器中的 Cancel 按鈕。

如果您對變更感到滿意，請點擊綠色的 Update 按鈕，看看您混搭後的頁面是什麼樣子。

當您準備好要發佈時，請按下鍵盤上的 p 鍵，或右側工具列上的 Publish 按鈕。

如果您已登入 teach.mozilla.org，您發佈的 Goggles 混搭作品將會被新增到 teach.mozilla.org 上的「Your Projects」頁面，您也會獲得一個專屬的 URL 以便與朋友分享。