建立 HTML 編輯器樣式

重要:  本文係由機器翻譯而成,請參閱免責聲明。本文的英文版本請見這裡,以供參考。

使用 Microsoft Office SharePoint Server 2007 發佈的網站,內容擁有者僅需使用網頁瀏覽器即可在網站中建立和更新網頁。例如,部門經理可使用瀏覽器直接張貼公告和其他資訊至網站,如以下圖例所示。

瀏覽器中的發佈頁面

網站的開發人員或設計者可協助內容建立者讓所建立的網頁更好看,方法是建立樣式,以套用至從版面配置建立的部分網頁。建立自訂樣式也可協助這些網頁的外觀與風格標準化。本文說明網站開發人員或設計者如何使用 Microsoft Office SharePoint Designer 2007 來建立自訂樣式,以套用至在瀏覽器中建立或編輯的發佈網頁。

重要: 本文僅適用於位在執行 Office SharePoint Server 2007 的伺服器上之網站。此外,網站集合中最上層網站的發佈必須開啟。而且,您必須具有最上層網站的製作權限,才可以開啟和編輯版面配置。

本文內容

發佈網站中如何使用 HTML 編輯器?

建立樣式的 HTML 編輯器

如何在發佈網站中使用 HTML 編輯器?

要為發佈網頁建立自訂樣式必須要瞭解 Office SharePoint Server 2007 中的一些主要概念。以下將迅速檢閱這些概念。

發佈網頁與版面配置的關連為何?

版面配置是網頁範本,可控制網頁外觀、可用頁面欄位和內容欄位,以及應顯示在網頁上的元素 (例如清單和文件庫)。舉例來說,您可以設定一種版面配置用於出差報告、一種版面配置用於電子報文章,另一種用於計劃更新。授權的使用者就可以根據這些版面配置來建立新的發佈網頁。他們所建立的各個網頁都遵循所包含特定類型內容的一致格式。使用者可以在他們的瀏覽器中建立發佈網頁,每一次建立網頁時都可以選取一種版面配置。

對話方塊顯示發佈網頁版面配置清單

可以在Office SharePoint Designer 2007編輯版面配置。如需詳細資訊,請參閱自訂發佈網頁版面配置的文件。

版面配置從何處取得格式設定?

版面配置從主版頁面取得格式設定,主版頁面是網頁範本,可定義共用內容的區域 (例如頁首、頁尾和左方導覽),並使用樣式表來控制文字、超連結、儲存格、表格和許多其他元素的格式設定。版面配置也可從直接套用的樣式表取得格式設定。例如,版面配置可能從主版頁面取得初始的格式設定規則,但是您永遠可以在版面配置上附加其他樣式表,以便更精確的定義從其建立之網頁的格式設定。舉例來說,版面配置所根據的主版頁面可能會指定所有一般文字均為 Verdana 字型,但是您可以在版面配置上附加樣式表,指定所有附加的網頁使用 Arial 做為一般文字字型。在發佈網頁上,所有格式設定和標記 — 除了內容欄位之外 — 均直接來自建立它的版面配置。

如何在發佈網頁中編輯內容?

當您建立發佈網頁時,會在瀏覽器中建立。在您建立網頁之後,可以瀏覽到該網頁、按一下 [網站動作] 功能表,然後按一下 [編輯網頁] 即可編輯網頁。

[網站動作] 功能表顯示 [編輯網頁] 命令

網頁開啟之後,可以按一下 [編輯內容] 以開啟 HTML 編輯器來編輯任何 RTF 文字欄位。

開啟的網頁上之 [編輯內容] 命令

附註: 不包含 RTF 文字的欄位有自己的編輯器 — 例如,日期欄位有自己的編輯器。

HTML 編輯器會開啟,您便可以新增或編輯內容、手動變更字型和格式設定,或選擇其他選項。若要在文字上套用樣式,請選取文字、按一下 [樣式],然後按一下要套用的樣式。

顯示 [樣式] 清單的 HTML 編輯器

HTML 編輯器從何處取得樣式?

HTML 編輯器可用的樣式來自兩個樣式表,位於您網站或子網站的 _layouts 目錄內:

  • HtmlEditorCustomStyles.css 定義自訂樣式的格式設定,它位於:

    http://your_site/_layouts/1033/styles/HtmlEditorCustomStyles.css

  • HtmlEditorTableFormats.css 定義表格的格式設定,它位於:

    http://your_site/_layouts/1033/styles/HtmlEditorTableFormats.css

因為這些樣式表位於您網站中受保護的 _layouts 目錄內,因此無法在 Office SharePoint Designer 2007 中加以修改。但是,您可以套用其他樣式到您用來建立發佈網頁的版面配置,以覆寫這些樣式表內的樣式。

頁面頂端

建立 HTML 編輯器的樣式

您可以在 Office SharePoint Designer 2007 中開啟網站,然後使用下列程序為 HTML 編輯器建立新樣式。

尋找並開啟版面配置

如果您已經建立版面配置,而且現在想要建立新的樣式以在瀏覽器中的 HTML 編輯器內使用,可從尋找並開啟版面配置開始。您可以按兩下版面配置或任何從該版面配置建立的發佈網頁來開啟該版面配置。

  1. 在 Office SharePoint Designer 2007 中,開啟包含您要修改之版面配置的網站。

  2. 在 [資料夾清單] 中,尋找使用您要套用新樣式之版面配置的網頁,然後按兩下該網頁。

    附註: 發佈網頁儲存在網站的 [網頁] 文件庫中。按兩下發佈網頁是快速尋找並開啟發佈網頁附加之版面配置的方法。如果您已經知道要為之建立新樣式的版面配置名稱,可以按兩下版面配置,而不需要按兩下網頁。

    資料夾清單顯示關於編輯網頁或基礎版面配置訊息

    因為發佈網頁只能夠在瀏覽器中編輯,會有一個訊息詢問您要在瀏覽器中編輯網頁,或是編輯基礎版面配置。

  3. 按一下 [編輯版面配置]。

    版面配置便會開啟。

覆寫現有的樣式

如果您要覆寫現有的樣式,可以從 HtmlEditorCustomStyles.css 或 HtmlEditorTableFormats.css 將現有的樣式複製到網頁使用的另一個樣式表,然後再修改樣式。因為會先套用 _layouts 目錄中的樣式表,版面配置所使用的任何其他樣式表上的樣式將會覆寫來自 HtmlEditorCustomStyles.css 或 HtmlEditorTableFormats.css 的樣式。

  1. 在網頁瀏覽器中,在瀏覽器的 [位址] 列輸入以下其中一個位置,移至要複製其一或多個樣式之樣式表的位置:

    http://your_site/_layouts/1033/styles/HtmlEditorCustomStyles.css

    —或—

    http://your_site/_layouts/1033/styles/HtmlEditorTableFormats.css

  2. 當您收到訊息詢問要對檔案做什麼時,按一下 [開啟]。

    樣式表會在 Office SharePoint Designer 2007 中開啟。

  3. 選取要修改的樣式、使用滑鼠右鍵按一下,然後按一下快顯功能表上的 [複製]。

    樣式表的快顯功能表開啟並選取 [複製] 命令

  4. 繼續在 Office SharePoint Designer 2007 中,開啟 (或返回) 要覆寫樣式的版面配置,然後按一下 [管理樣式] 工作窗格中的 [選項]。

    附註: 如果看不到 [管理樣式] 工作窗格,請按一下 [工作窗格] 功能表上的 [管理樣式]。

  5. 確定選取 [顯示目前網頁使用的樣式]。

    [選項] 功能表中已選取 [顯示目前網頁使用的樣式] 命令

  6. 在 [管理樣式] 工作窗格中,按兩下此網頁使用的其中一個樣式表 (如 pageLayout.css) 以開啟樣式表進行編輯。

    套用到目前網頁的各個樣式表會在 [管理樣式] 工作窗格中的 [CSS 樣式] 清單內顯示為區段標題。您可以按兩下任何樣式表的標題以編輯該樣式表。

  7. 捲動到樣式表的底部,在您要貼上樣式的地方按一下滑鼠右鍵,然後在快顯功能表上按一下 [貼上]。

  8. 視您的需要編輯樣式。

    附註: [CSS 屬性] 工作窗格提供較視覺化的方法來編輯樣式。如果看不到此工作窗格,請在 [工作窗格] 功能表上按一下 [CSS 屬性]。

  9. 若要儲存樣式表,按一下 [檔案] 功能表上的 [儲存檔案]。

下一次使用 HTML 編輯器來編輯由此版面配置建立的文章時,修改的樣式便可使用並會出現在 [樣式] 清單中。

顯示修改樣式的樣式清單

建立新樣式

您也可以建立新的樣式,並使其可在 HTML 編輯器的 [樣式] 清單中使用。因為從現有的樣式開始比輸入新的樣式容易,本章節說明如何透過複製現有的樣式並重新命名來建立新樣式。

  1. 在網頁瀏覽器中,在瀏覽器的 [位址] 列輸入以下其中一個位置,移至要複製其樣式的樣式表位置:

    http://your_site/_layouts/1033/styles/HtmlEditorCustomStyles.css

    —或—

    http://your_site/_layouts/1033/styles/HtmlEditorTableFormats.css

  2. 當您收到訊息詢問要對檔案做什麼時,按一下 [開啟]。樣式表會在 Office SharePoint Designer 2007 中開啟。

  3. 選取要修改的樣式、使用滑鼠右鍵按一下,然後按一下快顯功能表上的 [複製]。

    樣式表的快顯功能表開啟並選取 [複製] 命令

  4. 繼續在 Office SharePoint Designer 2007 中,開啟 (或返回) 要新增樣式的版面配置,然後按一下 [管理樣式] 工作窗格中的 [選項]。

    附註: 如果看不到 [管理樣式] 工作窗格,請按一下 [工作窗格],然後按一下 [管理樣式]。

  5. 確定選取 [顯示目前網頁使用的樣式]。

    [選項] 功能表中已選取 [顯示目前網頁使用的樣式] 命令

  6. 在 [管理樣式] 工作窗格中,按兩下此網頁使用的其中一個樣式表 (如 pageLayout.css) 以開啟樣式表進行編輯。

    套用到目前網頁的各個樣式表會在 [管理樣式] 工作窗格中的 [CSS 樣式] 清單內顯示為區段標題。您可以按兩下任何樣式表的標題以編輯該樣式表。

  7. 捲動到樣式表的底部,在您要貼上樣式的地方按一下滑鼠右鍵,然後在快顯功能表上按一下 [貼上]。

  8. 視您的需要編輯樣式。

    如果您不想覆寫所複製的現有樣式,必須變更樣式的名稱。例如,如果您想要將新的樣式命名為 redHeadline,請變更下列 CSS 程式碼。

.ms-rteCustom-ArticleTitle, .ArticleTitle{font-weight: bold;font-family: Arial;font-size: 14pt;color: #8C0000;text-transform: capitalize;}

成為下列程式碼:

.ms-rteCustom-redHeadline, .redHeadline{font-weight: bold;font-family: Arial;font-size: 14pt;color: #8C0000;text-transform: capitalize;}

附註: [CSS 屬性] 工作窗格提供較視覺化的方法來編輯樣式。如果看不到此工作窗格,請在 [工作窗格] 功能表上按一下 [CSS 屬性]。

  1. 若要儲存樣式表,按一下 [檔案] 功能表上的 [儲存檔案]。

    下一次使用 HTML 編輯器來編輯由此版面配置建立的文章時,修改的樣式便可使用並會出現在 [樣式] 清單中。

    顯示修改樣式的樣式清單

頁面頂端

附註: 機器翻譯免責聲明︰本文係以電腦系統翻譯而成,未經人為介入。Microsoft 提供此等機器翻譯旨在協助非英語系使用者輕鬆閱讀 Microsoft 產品、服務及技術相關內容。基於本文乃由機器翻譯而成,因此文中可能出現詞辭、語法、文法上之錯誤。

擴展您的技能
探索訓練
優先取得新功能
加入 Office 測試人員

這項資訊有幫助嗎?

感謝您的意見反應!

感謝您的意見反應! 我們將協助您與其中一位 Office 支援專員連絡以深入了解您的意見。

×