註解:

Adobe Muse 不再增加新功能,並將於 2020 年 3 月 26 日停止支援。如需詳細資訊和協助,請參閱 Adobe Muse 終止服務頁面

使用嵌入式 HTML 在 Muse 網站顯示部落格

嵌入式 HTML 意指由 Google、YouTube、Flickr 或 Picasa 等第三方網站所產生的原始碼。您可以在這些網站建立帳戶並登入,然後從其網站拷貝嵌入原始碼,並將其新增至您的網站。

將嵌入式 HTML 貼入頁面時,就好像在網站頁面放入一個視窗,並在視窗內顯示第三方網站的內容。

嵌入式 HTML 是輕鬆快速地新增複雜資訊 (如地圖、天氣預報、股價等) 及豐富媒體 (如數位視訊、幻燈片展示、音效檔案等) 的絕佳方式。此做法另外的好處是,讓您將第三方網站當作代管服務兼上傳介面。例如,若您在 YouTube 建立免費帳戶,就可以建立自己的 YouTube 頻道,並為您的網站上傳視訊內容。YouTube 提供了一個簡化上傳流程的網頁,並在其網站為您代管視訊檔案。當您要更新網站時,只要在您的 YouTube 頻道新增視訊、拷貝嵌入原始碼,再將其貼上至頁面,即可在您的 Muse 網站新增視訊。

在本節中,您將要從 Tumblr 拷貝原始碼。這是一個免費的線上服務,您必須建立帳戶並登入,接著張貼可公開存取的部落格文章。部落格簡單易用,不熟悉電腦操作的人也能夠輕鬆更新自己的網站。大多數的部落格網站均提供線上介面,可使用任何瀏覽器登入帳戶並張貼新文章,不需要任何 HTML 知識或額外軟體。

註解:訪客檢視您的網站時,不需要擁有 Tumblr 帳戶即可閱讀您嵌入頁面的部落格。僅您需要建立帳戶,因為您負責設計網站,需要擁有帳戶才能建立自訂部落格,並產生要加入至網站的嵌入原始碼。

  1. 在本教學課程中,您不需要建立 Tumblr 帳戶亦可隨堂操作。請直接拷貝以下 Tumblr 網站建立免費部落格後所產生的程式碼:

<iframe src="http://katiescafe.tumblr.com/" width="910" height="1400" marginwidth="0" marginheight="0" frameborder="no" scrolling="yes" style="border:0px;"></iframe>

  1. 在「規劃」視圖中,按兩下「events」(活動) 頁面縮圖以在「設計」視圖中將其開啟並編輯。
  2. 按一下空白頁面中央,並用以下其中一種方法來嵌入 HTML 程式碼:
  • 選擇「編輯 > 貼上」,或使用鍵盤快速鍵 (Mac 用 Command+V,Windows 用 Control+V),將原始碼直接貼上頁面。
  • 選擇「物件 > 插入 HTML」。在出現的「編輯 HTML」視窗欄位內按一下,將內容貼上。按一下「確定」,關閉「編輯 HTML」視窗。

註解:大多數情況下,Muse 可識別 HTML 原始碼並會自動將您貼上的 HTML 直接嵌入頁面。不過,若您在頁面上看到原始碼而非第三方網站上的內容,則請嘗試改用「物件 > 插入 HTML」的方法。

嵌入 HTML 程式碼後,會在 Katie's Cafe (凱蒂咖啡館) Tumblr 帳戶部落格文章周圍看到具有控制點的藍色邊界方框。

  1. 使用「選取」工具拖移控制點,調整部落格內容的尺寸,使其約佔頁面寬度的 80%。將部落格內容置中於頁面,以利並排顯示的背景圖形能夠在左右兩側出現。藍色的測量矩形顯示其與其他物件的距離。當選取的物件垂直置中時,會短暫顯示紅色對齊參考線。
調整頁面的尺寸與位置
在「events」(活動) 頁面調整 Tumblr 部落格的尺寸與位置。

這就是在 Muse 頁面嵌入 HTML 所需的步驟。若您要編輯其 HTML 原始碼,可在嵌入的 HTML 元素按一下滑鼠右鍵,從顯示的環境選單選擇「編輯 HTML」。如此將開啟「編輯 HTML」視窗,讓您存取先前貼上的原始碼。

接下來,我們將檢閱您在「events」(活動) 頁面所做的變更:

  1. 選擇「檔案 > 在瀏覽器中預視網頁」,以新的瀏覽器視窗查看「events」(活動) 頁面的顯示結果。

請注意當您向下捲動瀏覽部落格文章清單時,頁首會顯示於其他頁面內容的上方。這是因為「events」(活動) 頁面採用「前景」主版頁面,而該主版頁面的頁首內容已設定在前景顯示。

現在已完成「events」(活動) 頁面。在下一節,您將學習如何將嵌入式 HTML 內容貼入至 Widget,以控制第三方內容依據使用者互動的顯示方式。

在 Muse 網站內嵌入視訊

目前目標容器中是填入灰色填色顏色。不過,您可以在目標容器置入各種內容,包括不同的影像檔案、填色的矩形、文字或是您從其他網站拷貝的嵌入式 HTML。

在本範例中,您將貼入 YouTube 產生的嵌入式 HTML。

想像一下,您造訪了 YouTube.com 的網頁,觀看您用自己的帳戶上傳的視訊。按一下「分享」按鈕,再按下「嵌入」,即可存取並拷貝該視訊的嵌入原始碼。

嵌入視訊
選擇想要的視訊大小後,拷貝 YouTube 產生的嵌入原始碼。

在本教學課程中,Katie's Cafe 視訊的嵌入原始碼已從網站上拷貝,所以您不需要造訪 YouTube。請拷貝下面的嵌入原始碼,以將其存入您的剪貼簿:

<iframe title="YouTube video player" width="640" height="390" src="http://www.youtube.com/embed/krqjM5GmqzQ" frameborder="0" allowfullscreen></iframe>

上面的原始碼採用 iFrame 標籤包覆張貼於 YouTube 的視訊檔連結。iFrame 是一種 HTML 容器,讓您可以加入網頁內,於網頁上以「視窗」形式顯示內容。

拷貝上面的原始碼後,請返回 Muse。

  1. 使用「選取」工具按一下頁面的灰色邊框,使左上角的「選取指示器」顯示「頁面」一詞。這代表目前選取了整張頁面。
  2. 按一下具有灰色填色顏色的較大目標容器。左上角的「選取指示器」會顯示「排版」一詞。再按一次灰色目標容器,使「選取指示器」顯示「容器」一詞。再按一次 (顯示為「目標」),然後再一次,直到「選取指示器」列出「影像框」一詞。按 Backspace (Windows) 或 Delete (Mac),從目標容器移除影像框。

在仍然選取內層目標容器的狀況下,下一步即是將您在前面複製的 HTML 程式碼貼入目標容器。

註解:在目標容器內貼上原始碼,與之前在觸發容器貼上主體影像一樣容易出錯,因為目的是要將原始碼貼在 Widget 的目標容器「裡面」。此時有可能 (視您目前選取的元素而定) 會將視訊原始碼貼在 Widget 之外,變成直接嵌入於頁面。所以此處請小心進行...若您按下「預視」以測試影像預視燈箱,發現即使未按下主體影像,視訊也會顯示,就代表視訊原始碼並未成功貼入容器,所以視訊才會立即顯示。視訊應該僅在按下主體影像之後顯示。

請依下列步驟將視訊原始碼貼入目標容器 (此時「選取指示器」顯示「容器」一詞)。

  1. 選擇「物件 > 插入 HTML」。在出現的視窗中,選取預設的預留位置文字,並按下 Delete (Mac) 或 Backspace (Windows) 將其移除。選擇「編輯 > 貼上」,將您在前面拷貝的 YouTube 原始碼貼入「HTML 程式碼」欄位。按一下「確定」,關閉「HTML 程式碼」視窗。

註解:在大部分的情況下,Muse 會在您貼上 HTML 程式碼時自動偵測,並且理解這是 HTML 而非純文字。因此,您也可以不選擇「物件 > 插入 HTML」開啟 HTML 視窗,而改為在選取內層目標容器的狀況下,以滑鼠右鍵按一下 (或按住 Control 的同時按一下),再從出現的環境選單選擇「貼上」。(或者選擇「編輯 >貼上」或用鍵盤捷徑,將原始碼貼至目標容器內)。Muse 提供許多方法,可達成將視訊原始碼貼入目標容器的目的。

將原始碼貼入目標容器後,即可看到視訊的第一格 (一杯咖啡)。看到視訊的第一格,即代表您成功貼上 HTML 嵌入原始碼。在「設計」視圖中編輯頁面時,視訊並不能播放。您必須要按下「控制」面板的「預視」按鈕,或以瀏覽器預視頁面,才能播放視訊。

  1. 視需要使用「選取」工具調整目標容器大小,放大尺寸使之符合嵌入式 HTML 視訊內容的大小。寬度應為 670 像素左右,高度則應為 415 像素左右。在選取視訊的情況下,「選取指示器」會顯示「HTML 項目」一詞。
  2. 在選取目標容器的狀態下,按一下 Escape 以選取外層容器。或者,您也可以在別處按一下以取消選取「影像預視燈箱顯示」Widget,然後再連按它兩次:第一次選取「排版」,第二次選取較大容器。使用「選取」工具拖移容器的控制點,使目標容器在裡面置中。調整容器尺寸至寬 710 像素、高 460 像素。
  3. 用「填色」選單將容器的填色顏色設為棕色 (#63301B),並將填色顏色的不透明度設為 100。
「填色」選單
在「填色」選單設定容器的填色顏色與不透明度。

  1. 選取容器底部的文字框,按下 Delete (Mac) 或 Backspace (Windows) 將其移除。此文字框可填入目標內容的註解,但是在本專案中並不使用。
  2. 選取容器右上角的「關閉」方塊 (顯示「X」)。在「關閉」方塊內按一下,以選取其標籤並加以刪除。用「填色」選單設定填色顏色為「無」。在「填色」選單中,按一下「影像」區段旁的檔案夾圖示,並瀏覽以選取名為 icon-close.png 的檔案。使用「選取」工具調整「關閉」方塊大小,以顯示整個關閉圖示影像。
  3. 使用「選取」工具調整目標容器及觸發容器的位置,將此兩項目移至您要在頁面上顯示的位置。
  4. 在選取「排版」的情況下,按一下藍色箭頭按鈕開啟「選項」面板。本範例中使用下列設定:
    • 位置:影像預視燈箱
    • 切換效果:淡化
    • 自動播放:停用
    • 隨機排列:停用
    • 最初全部隱藏:停用
    • 啟用撥動:啟用
    • 在上方時觸發:停用
    • 關閉按鈕:啟用
    • 編輯時顯示影像預視燈箱組件:啟用
    • 在設計模式中全部顯示:啟用
「排版」選項
更新「選項」選單中的設定以控制 Widget 運作方式。

在「選項」選單以外之處按一下將其關閉。至此,Widget 即已完成設定,可供測試。

您已從本教學課程學會如何將 HTML 嵌入頁面,並在「events」(活動) 頁面中加入 Tumblr 部落格。您也已瞭解如何在「影像預視燈箱排版」Widget 中貼上嵌入式 HTML,以便在訪客按下按鈕時,於預視燈箱視窗中顯示 YouTube 視訊。在本節中,您將探索「Google 地圖」網站提供的另一種嵌入式 HTML 類型。請依照下列步驟操作:

  1. 如果「visit」(位置) 頁面尚未在「設計」視圖中開啟,請按一下「規劃」,再按兩下「visit」(位置) 頁面的縮圖來編輯。

此原始碼是從 maps.google.com 網站拷貝的。您可以建立通往單一地址的自訂地圖 (本範例中是多個地點)。這是免費的服務,您只需提供一個地址 (或多個地址) 再按一下「建立地圖」按鈕即可。

按一下「建立地圖」
按一下「建立地圖」,以根據您輸入的地址產生地圖。

建立地圖後,「Google 地圖」介面會讓您輸入標題和說明。接下來,您可以按一下「連結」按鈕存取程式碼。選取「貼上 HTML 以嵌入您的網站」標籤欄位提供的 HTML 程式碼,接下來就可以返回 Muse,將 HTML 嵌入網頁。

在網頁上新增 HTML 程式碼
使用「Google 地圖」介面產生地圖的 HTML 程式碼。

在本教學課程中,您不需要自行建立新地圖。如果您想自己測試,可以輸入任何地址建立地圖,並拷貝程式碼來進行實驗。假如您只是想單純測試地圖運作的方式,可以使用一些預先產生的 HTML 程式碼。

  1. 拷貝以下原始碼:

<iframe width="887" height="298" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps/ms?ie=UTF8&amp;hl=en&amp;msa=0&amp;msid=218302982680021663941.00049fcd9cf93276f540e&amp;ll=37.7737,-122.43782&amp;spn=0.067844,0.098877&amp;z=12&amp;output=embed"> </iframe>

  1. 將原始碼貼到「visit」頁面頂端。使用「選取」工具在頁面靠近頂端的部分垂直置中擺放嵌入的 HTML,讓地圖的四分之一與頁首區域重疊。請確定地圖與地圖下方的花朵圖形之間有保留一些空間,這樣您才能加入文字敘述。
  2. 使用「文字」工具在嵌入的地圖下方拖移建立一個文字框。拷貝以下文字並將其貼到文字框內:

While each of our bakeries embodies the unique attributes of its neighborhood, they are all bound together by Katie's impeccable attention to detail, commitment to service, and, above all, enjoyment of good food.

  1. 使用「文字」面板套用下列設定,以設定文字樣式:
    • 字體:Droid Serif (或任何 serif 字體)
    • 字體大小:14
    • 字體顏色:#222222
    • 字體對齊方式:靠左
    • 行距:120%

加入地圖敘述後,就完成了「visit」(位置) 頁面。

  1. 選擇「檔案 > 在瀏覽器中預視網頁」,以查看「visit」(位置) 頁面在瀏覽器中的顯示結果。
具有地圖的網頁
完成的「visit」(位置) 頁面包括一個功能齊全的 Google 地圖。

請注意,嵌入的 HTML Google 地圖是互動式的。您可以在視窗中按一下箭頭平移地圖,也可以按一下 + 和 – 按鈕進行縮放。

現在網站中的所有頁面都已設計完成。在本教學課程剩下的部分,您將瞭解如何對網站做最後編修,以及發佈免費的試用版網站。

 在 Adobe Muse 頁面嵌入 HTML

您可以在網站的頁面中嵌入 HTML 程式碼來新增複雜的網站功能,這些功能會從第三方網頁伺服器中動態顯示。您可以從任何數量的網頁服務提供者 (例如 Google、Yahoo!、YouTube 以及其他許多提供者) 拷貝這些程式碼區塊,然後便利地貼上至 Muse 頁面中。在本節中,您將看到兩個不同的嵌入 HTML 範例,並看到您可以如何將社交媒體內容與互動式 Google 地圖快速新增至用 Muse 建立的網站。

您將以完成「首頁」內容開始操作。如果您已依照前述步驟操作,「首頁」可能已經在「設計」視圖中開啟。如果沒有開啟,請按兩下「規劃」視圖中的「首頁」縮圖來將其開啟,在「設計」視圖中進行編輯。您將在先前新增至「首頁」的幻燈片展示頂端,新增嵌入的 HTML。

新增嵌入式 HTML Twitter 摘要來顯示最近的文章

您可以使用許多不同的網頁服務設定免費帳戶 (包括 Twitter),這可讓您張貼顯示在其網站上的訊息。但是,除了顯示 Twitter.com 上的資訊之外,您還可以使用您的帳戶登入並拷貝嵌入程式碼來在您建立的網站上顯示相同訊息。

在此範例中,虛構帳戶設定為 Kevin's Koffee Kart。這包括以新使用者身份登入 Twitter 並完成註冊表單。完成之後,您可以使用網站的介面來張貼訊息,並拷貝您可在網頁上其他位置顯示的嵌入程式碼。這是您共用部落格文章、視訊內容、RSS 摘要、庫存資訊、氣象預報、遊戲分數以及其他許多動態資料類型的相同程序。如果您正在為客戶建置網站,請詢問他們是否已在使用這些服務,以協助與其他客戶分享資訊。在許多情況下,您可以使用其帳戶資訊登入,然後取得您要顯示之所需資料的嵌入程式碼。

為了使您不必登入 Twitter 來建立自己的帳戶,這裡是從 Twitter 中為 Kevin's Koffee Kart (凱文的咖啡車) 帳戶拷貝的嵌入程式碼:

<script type="text/javascript" src="http://www.gtaero.net/twitter/twitter.php?user=kevinkoffee"></script>

<div id="twitFeed">選用預留位置文字</div>

<script type="text/javascript">twitter2id("twitFeed");</script>

 

  1. 拷貝上方顯示的程式碼。

  2. 返回 Muse。在許多情況下,您可以直接在頁面上的所需位置按一下,然後按一下滑鼠右鍵,並從出現的環境選單中選擇「貼上」。或者,您還可以使用貼上鍵盤快速鍵 (Mac 是 Command-V,Windows 是 Ctrl-V),Muse 將會識別您貼上的文字是原始程式碼,而非正常文字內容。

    註解:

    在極少數情況下,當未將程式碼識別為 HTML 時,您可以選擇「物件 > 插入 HTML」來開啟「HTML 程式碼」視窗。然後只將您拷貝的原始碼貼上到視窗中,並按一下「確定」來關閉視窗並嵌入程式碼。

  3. 嵌入原始碼 (這實際上是在您的網站頁面中建立視窗來顯示第三方網站的連結內容) 之後,它可能不會完全像您想要的方式顯示在頁面上。即會顯示 Twitter 嵌入 HTML 內容的預設顯示。

    嵌入原始碼
    Twitter 摘要資料如預期般顯示,但是文字未設計樣式或格式化。

  4. 按一下嵌入式 HTML 周圍的控制點來增加 Twitter 摘要文字區域的大小,並將其展開以填滿頁面的大部分寬度,以及大約三分之一的高度。

    展開嵌入程式碼方塊
    將 Twitter 摘要資料視窗的寬度與高度伸展至更大的大小。

    雖然此時文字仍然是預設大小,但這可讓文字顯示在更大的空間內。

    接下來,您將更新「HTML 程式碼」視窗中的程式碼來新增某些將會定義動態文字顯示方式的 CSS 樣式。此操作將不會影響張貼之訊息在 Twitter.com 上的顯示方式,但是這將變更您網站上的文字格式。

  5. 拷貝以下 CSS 樣式程式碼:

    <style type="text/css">

    #twitFeed { font-family: Helvetica Neue,Helvetica,sans-serif; font-size: 54px; line-height: 1; color: white; text-align: left }

    a:link, a:hover { font-size: 14; color: white; text-decoration: none }

    </style>

    註解:

    花一點時間來熟悉以上程式碼,並注意樣式包在指定程式碼為何之開始標籤內 (),以及可讓瀏覽者知道 CSS 樣式規則已完成的結束標籤 ()。設計您自己的嵌入 HTML 程式碼樣式時,您將會使用這些標籤作為您要影響之樣式周圍的括弧。在此情況下,Twitter 網站會代管張貼的訊息並使用名為 #twitFeed 的 CSS ID 選取器來控制文字出現在其網站上的方式。因此,上述程式碼實際上是使用該樣式名稱 (從 Twitter 網站取得),然後新增某些定義文字如何顯示在您網站上的規則,置換 Twitter.com 套用的樣式。若要瞭解有關格式設定文字內容之 CSS 規則的詳細資訊,請造訪 W3C Schools 網站。

  6. 在嵌入的「HTML 程式碼」視窗中按一下滑鼠右鍵並從出現的環境選單中選擇「HTML」。這可開啟「HTML 程式碼」視窗,讓您查看先前貼上的原始碼。當編輯網站時,您隨時可以開啟此視窗並更新 HTML 來源內容。在視窗最頂端,您先前嵌入的 HTML 程式碼上方按一下。貼上您在步驟 5 中拷貝的新樣式程式碼。

    嵌入 HTML 程式碼
    將樣式程式碼貼上至「HTML 程式碼」視窗中,在您先前貼上之 Twitter 原始碼上方。

  7. 按一下「確定」以關閉 HTML 視窗。對 Twitter 文字樣式進行此變更之後,從 Twitter 網站連結的文章現在會在「首頁」的幻燈片展示頂端以白色文字顯示,且會變得更大。

    網頁顯示 Twitter 文字
    更新 HTML 物件大小與設定文字樣式格式之後的 Twitter 摘要成品。

「首頁」已幾乎完成。只剩最後一個元素要新增至頁面。

  1. 選擇「檔案 > 置入」。在「讀入」對話方塊中,瀏覽以選取 Kevins_Koffee_Kart 檔案夾內名為 DailyDrip.png 的檔案。按一下「選取」。

  2. 將影像置入「Home」(首頁) 頁面之後,使用「選取」工具來將影像置於幻燈片展示頂部左側附近,使其與幻燈片展示的頂部部分重疊。

  3. 按一下「預視」來查看幻燈片展示動畫,並查看其顯示在 Daily Drip (生活點滴) 與棕色滴水影像下方的方式。

    「Home」(首頁) 頁面的設計成品
    「Home」(首頁) 頁面的設計成品。

檢閱完「Home」(首頁) 頁面之後,請按一下「規劃」連結來返回「規劃」視圖。

接下來,您要將不同類型的嵌入式 HTML 新增至「KART MAP」(咖啡車地圖) 頁面。

  1. 按兩下「KART MAP」(咖啡車地圖) 縮圖來在「設計」視圖中開啟頁面,並開始進行編輯。

  2. 使用「文字」工具來拖移「KART MAP」(咖啡車地圖) 頁面上的文字框,此文字框就在頁首下方,頁面內容的頂端附近。

  3. 輸入下列這行文字:Looking for the Koffee Kart? Check here for real-time location updates throughout the day. (要尋找 Koffee Kart 嗎?隨時到這裡來都能找到即時位置更新。)

  4. 在選取此段文字的情況下,開啟「段落樣式」面板。按一下名為 Georgia Body Medium 的樣式,將「段落樣式」套用至 KART MAP 頁面上的頁首文字上。

使用嵌入式 HTML 在 Muse 網頁中插入 Google 地圖

教學課程影片

教學課程影片
lynda.com - James Fritz

在本節中,您將透過新增嵌入 HTML (此 HTML 會載入由 Google 地圖所產生的地圖),將內容新增至 KART MAP 頁面。這只是在網站中使用嵌入 HTML 各種可能性的另一個小範例。您可以從 YouTube、Flickr 或 Picasa 等其他許多第三方網站整合內容,以及新增您可以控制的表單、部落格和其他複雜網站功能,只需存取您的帳戶並將內容張貼至對應網站即可。

  1. 開啟一個新的瀏覽器視窗,並造訪 Google 地圖

  2. 輸入位址或搜尋字詞,例如 Adobe SF,來尋找要用來建立地圖的實際位置。

  3. 按一下顯示在介面右上角的「連結」按鈕,然後按一下「自訂及預視嵌入地圖」的選項。

  4. 在顯示的「自訂」視窗中,將自訂地圖大小設定為寬 850,高 470。將地圖重新放置到視窗中,以確保地址文字完全可見。

  5. 從 Google 視窗拷貝產生的 HTML。或者,如果您不想產生您自己的 Google 地圖程式碼,您可以直接拷貝以下原始碼:

    <! -- Google Public Location Badge -->

    <iframe src="http://www.google.com/latitude/apps/badge/api?user=3988005937557250144&type=iframe&maptype=roadmap" width="872

    " height="600" frameborder="0"></iframe>

    <! -- To disable location sharing, you *must* visit https://www.google.com/latitude/apps/badge and disable the Google Public Location badge.Removing this code snippet is not enough! -->

    從 Google 地圖視窗拷貝 HTML 原始碼
    從 Google 地圖視窗拷貝 HTML 原始碼。

  6. 返回 Muse。在頁面中按一下滑鼠右鍵,並選擇「貼上」來放置程式碼。您也可以選擇「物件 > 插入 HTML」來開啟「HTML 程式碼」視窗,或使用標準鍵盤快速鍵來貼上程式碼 (Mac 為 Command-V,Windows 為 Ctrl-V)。

  7. 使用「選取」工具將地圖置於頁面的左側。

  8. 按一下「預視」來查看 Google 地圖在即時上線網站中對訪客顯示的樣子。按一下地圖的導覽按鈕,並注意它是完全互動的,您可以放大或在嵌入視窗中四處移動地圖。

將 iframes 新增至您的網站以顯示包含嵌入 HTML 的其他網站頁面

除了使用嵌入 HTML 來插入您已從第三方網站貼上的程式碼以外,您也可以使用相同方法將整個網頁嵌入在 iframe 中。例如,您可以輸入類似以下的程式碼片段:

<iframe title="A Title for this Content" src="http://yoururlhere.com" width="900" height="500" style="border: 0;"></iframe>

在上述程式碼中,將 title=""url="" 中的文字取代為所需的外部網頁標題及 URL。您也可以將 iframe 視窗的寬度與高度自訂為所需值,以符合您網站的設計。

或者,您也可以透過將以下內容新增至開放的 iframe 標籤,來新增可確保 iframe 不會顯示捲軸的屬性:

scrolling="no"

透過選擇「物件 > 插入 HTML」,您可以開啟新的「HTML 程式碼」視窗,並在您網站的任意位置嵌入 iframe,然後再於其中設定任何 URL (網址,例如 www.google.com) 來顯示網際網路上已實際上線的網站。

您也可以使用 iframe 來嵌入動畫,例如使用 Adobe Edge 建立的 HTML5 動畫。找到 Adobe Edge 所建立之 HTML 檔案的名稱,並在您 iframe 的 URL 屬性中使用該檔案名稱:

<iframe src="Project-Header-r1v1.html" width="100%" height="100%" scrolling="no">

</iframe>

接下來,您需要將 Adobe Edge HTML 檔案 (及從屬檔案) 以及您的 Muse 網站檔案一起上傳至相同的主機伺服器。如果您要將網站轉存至 FTP,可以在轉存過程中將 HTML 檔案拷貝到 Muse 所產生的檔案夾中。如果您藉由按一下 Muse 中的「發佈」連結來直接發佈至 Adobe Business Catalyst® 主控伺服器,可以使用 Adobe Dreamweaver® 軟體或任何 FTP 用戶端來上傳檔案。若要瞭解有關透過 FTP 將檔案上傳至 Business Catalyst 主控伺服器的詳細資訊,請參閱發佈網站

格式化聯絡表單的元素

利用標準的 CSS 規則,您可格式化您在 Business Catalyst 管理主控台介面中建立的聯絡表單各個元素。您可調整表單與表單元素的顯示方式,來配合您的頁面設計。

將表單原始碼從管理主控台貼至 Muse 中的頁面後,表單即會以預設樣式顯示。

貼上任意 HTML 程式碼
貼上任意 HTML 程式碼後,頁面即顯示表單。

與其他任何元素相同,您可以利用側邊的控制點調整表單尺寸,並將其移動至頁面合適位置。

以滑鼠右鍵按一下 (或按住 Ctrl 的同時按一下) 表單,從顯示的清單選擇「HTML」。

使用環境選單來選取 HTML
使用環境選單從選項清單中選擇「HTML」。

畫面顯示 HTML 程式碼視窗。如此即顯示您從管理主控台複製至頁面的程式碼。將游標置於頂端,在程式碼第一行之前,按下 Enter (Windows) 或 Return (Mac) 數次,以將表單程式碼下移,留空行加入樣式。

按下 Enter 或 Return,在現有程式碼上方添加數行空間
按下 Enter 或 Return,在現有程式碼上方添加數行空間。

表單程式碼上方的此區域即是要貼上或輸入 CSS 規則之處,將影響表單元素的外觀。

要實際見證其運作,請複製以下程式碼:

<style type="text/css">

input.cat_textbox, textarea { background-color: #fff; border: 1px solid #cacaca; padding: 3px; margin: 2px 0 8px 0; width: 300px; font: 12px Georgia, Times, serif; }

input.cat_textbox { height: 16px; }

input.cat_button { background-color: #eee; font: 12px Helvetica, Arial, sans-serif; border: 1px solid #cacaca; padding: 14px 0; width: 150px; font-weight: bold; text-transform: uppercase; }

.form label, .webform label { font: 14px Georgia, Times, serif; }

table.webform td { padding: 0; }

</style>

將程式碼貼上至 HTML 視窗上方,在表單之上。

將 CSS 樣式貼上至 HTML 視窗的頂端
將 CSS 樣式貼上至 HTML 視窗的頂端。

按一下「確定」以關閉 HTML 視窗。注意此時表單外觀已更新使用新的格式。按一下「預視」或選擇「檔案 > 在瀏覽器中預視網頁」,查看頁面在發佈後的網站如何顯示。

新增從 Business Catalyst 複製的聯絡表單程式碼時,會包含各種表單元素,此相同方法也可用於控制這些元素。

請稍停查看您在視窗頂端貼上的程式碼。注意在 CSS 規則上下包覆住所有規則的「style」標籤。這一點非常重要;沒有起始與終結的 style 標籤,CSS 規則就無效。以下獨自列出這兩個 style 標籤:

<style type="text/css">

</style>

這一對起始與終結 style 標籤告知瀏覽器,其中所含程式碼為 CSS 格式化規則。貼上 CSS 規則之前,請務必確定這些標籤已存在於視窗頂端。

當您要修改表單元素以更新其外觀時,僅需要叫出其「class」(即是指定給表單中各個元素的名稱),指定您要更新的屬性,然後設定其數值即可。

請參考下面程式碼:

input.textarea {

background-color: #fff;

}

其中「input.textarea」即是指定給特定一種文字欄位的名稱 (稱為它的「class」)。接著,下一行指定您要修改的屬性。在此例中,「background-color」代表文字欄位的背景顏色。最後在分號後面,「#fff」是 CSS 程式碼中「#ffffff」的縮寫 (這是代表白色的十六進位顏色值)。

換句話說,上面規則指定:將此類的文字欄位背景顏色設定為白色。

要更新表單,您也可以將文字欄位的背景顏色設定為常見網頁顏色值:「red」(紅色)。下面程式碼將此文字欄位背景顏色設定為紅色:

input.textarea {

background-color: red;

}

CSS 規則是以其獨自的語言寫成。就像學習任何語言一樣,這是熟而能生巧的。若要瞭解有關語法 (撰寫這些規則所使用的文法) 的詳細資訊,請參閱 W3Schools 線上免費提供的極佳教學課程與 CSS 參考指南。

待您準備好要編輯自己的聯絡表單時,可用下面清單辨別各個表單元素的 class 名稱與可調整的相關屬性。

註解:

請務必記得將您的 CSS 規則使用起始及終結標籤包覆,否則瀏覽器 (及「設計」視圖) 將無法繪製這些規則:

<style type="text/css">

</style>

從聯絡表單頂端移除預設元素

依照預設,當您將表單貼上至頁面時,會從下列兩個元素開始。

若您想要移除其中一個或兩個元素,請開啟 HTML 視窗查看您貼上的原始碼 (就在您已加入的 CSS 樣式標籤正下方)。

要移除「*必填」文字,請找到此行程式碼將其刪除:

<span class="req">*</span> 必填

要移除「稱謂」標籤與選單,請找到下列程式碼將其刪除:

<td><label for="Title">稱謂</label><br /><select name="Title" id="Title" class="cat_dropdown_smaller"><option value="301457">博士</option><option value="301456">小姐</option><option value="301453" selected="selected">先生</option><option value="301454">太太</option><option value="301455">女士</option></select></td>

註解:

編輯 HTML 程式碼請小心勿意外移除上述幾行之外的標籤。即使僅移除單一個字元,如「>」,也可能導致表單損毀。發生此問題時,您可以返回管理主控台,重新複製程式碼再貼上,取代您編輯的程式碼。

新增 CSS 規則並格式化聯絡表單可用的 class 及屬性清單

當您指定顏色值時,使用線上工具如 kular 或是影像編輯程式 (Photoshop 或 Fireworks) 指定十六進位顏色值,可獲得更多樣的顏色。16 進位顏色值一律以「#」開頭,其後接著一組 3 至 6 個英數字母 (0-9 及 A-F) 的組合。

在 Muse 您或許會發現使用「滴管」工具從現有設計選取顏色較簡單。您可以從「檢色器」的色域複製十六進位顏色值後,將其貼上至程式碼內。不過,以下 16 個網頁顏色可以用名稱指定。這些在您測試規則時非常實用:

Aqua (水色)、Black (黑色)、Blue (藍色)、Fuchsia (紛紫)、Gray (灰色)、Green (綠色)、Lime (萊姆)、Maroon (紅褐)、Navy (海軍藍)、Olive (橄欖綠)、Purple (紫色)、Red (紅色)、Silver(銀色)、Teal (藍綠色)、White (白色) 及 Yellow (黃色)。

當您以名稱指定顏色時,請勿在顏色前加上 # 字號。

下面清單非全部,仍有其他許多不同組合 (及許多可用屬性) 會影響設計。請利用這些建議開始著手設計。按兩下選取程式碼片段,再複製至您的剪貼簿。

若要瞭解更多關於使用 Muse 的秘訣,請務必造訪 Muse 說明和教學課程頁面,或 Muse 活動頁面的即時網路研討會和影片。

此産品由 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License 授權  Creative Commons 條款未涵蓋 Twitter™ 與 Facebook 文章。

法律說明   |   線上隱私權政策