基本網站自訂入門

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

您可以使用種類繁多的網站範本,快速並輕鬆地建立動態及專業外觀的網站 (包括小組網站、部落格網站,以及各種會議工作區網站)。利用這些網站範本所建立的網頁運作方式,就像它們是專門針對許多組織及目的所建立,但是有時您可能會想要自訂網站中的網頁,甚至網站中的所有網頁。例如,如果想要使用新的內部網路網站引起組織之銷售小組對新產品的興趣,並提供新產品的訓練,您可以根據小組網站範本來建立網站。然後,可以將文字或圖形新增至個別網頁、變更上方連結列、重新排列和編輯快速啟動上的項目,以及變更網站的字型和格式。

Microsoft Office SharePoint Designer 2007 是用來自訂 Windows SharePoint Services 3.0 網站及 Microsoft Office SharePoint Server 2007 網站的工具選擇。本文只是介紹一些您可以使用 Office SharePoint Designer 2007 來自訂 SharePoint 網站的基本方式。

附註: 本文中的所有範例都使用 SharePoint 小組網站範本。

本文內容

自訂頁面的快速簡介

將文字或圖形新增至頁面

自訂上方連結列

自訂 [快速啟動

變更字型及格式設定

建議的後續步驟

自訂網頁快速簡介

您開啟網頁並想要開始進行自訂,但是似乎無法選取想要的項目,而且指標大部分時間看來都像下列圖例中的樣子。

有指標指出不可編輯區域的網頁

看起來像這樣的指標表示區域是不可編輯的。區域是否可以編輯是由內容版面配置區所控制,而內容版面配置區是指定在網頁所根據的主版頁面上。因此,若要瞭解如何自訂網頁,則必須先瞭解主版頁面及內容版面配置區。

首頁從何處取得它的內容及格式?

首頁的內容及格式是來自預設主版頁面。主版頁面就是附加至網頁的網頁範本。主版頁面變更時,所有附加該主版頁面的網頁就會跟著變更。主版頁面簡化了在單一作業中更新許多網頁。主版頁面也可以輕鬆將一致外觀與風格 (包括圖形、字型及格式) 只套用至 SharePoint 網站中的一些網頁或所有網頁。

Windows SharePoint Services 3.0 網站中之預設主版頁面的名稱為 default.master,而且位在網站的 _catalogs/masterpage 資料夾中。Default.master 會控制首頁及所有其他預設網頁 (如清單表單) 的格式。若要自訂首頁的外觀與風格,則可以將內容新增至預設主版頁面指定為可編輯之首頁的區域,或您可以自訂網站的預設主版頁面。

附註: Office SharePoint Server 2007 中的網站首頁可能不是由 default.master 所控制,而是由不同主版頁面所控制。附加至首頁的主版頁面是由用來建立該網站的網站定義所決定。

何謂版面配置區?

第一次在 Office SharePoint Designer 2007 中開啟 SharePoint 網站的首頁時,會注意到首頁上的版面配置區,看起來就像這裏所示的一樣。

首頁上的版面配置區

主版頁面版面配置區會定義所附加網頁上的區域,而您可以在此區域中新增或編輯內容。版面配置區也會保留功能作用區,而這類功能已用於網頁或保留供其他程式 (如 Microsoft Office Forms Server 2007 或 Microsoft Office Project Server 2007) 以後使用。Office SharePoint Server 2007 網站中之主版頁面的預設必要版面配置區會多於 Windows SharePoint Services 3.0 網站中的主版頁面。

在區域標籤上,版面配置區名稱的後面是 (主版) 或 (自訂)。標示為 (主版) 的版面配置區包含網站中之主版頁面的預設內容,而標示為 (自訂) 的版面配置區則包含已新增至目前網頁的自訂內容。

若要自訂版面配置區內容 (如上方連結列或快速啟動),則必須先解除版面配置區的鎖定,才能進行編輯。若要執行此動作,請按一下版面配置區旁邊的箭號,然後按一下 [建立自訂內容]。

有功能表顯示 [建立自訂內容] 命令的版面配置區

您可以個別自訂主版頁面上的每個版面配置區,而不會彼此影響。例如,您可以變更套用至版面配置區的樣式、將它移至網頁上的另一個位置,或移除它。然而,移除內容版面配置區時,需要特別小心。如果移除主版頁面中的內容版面配置區,則每個提供該區域內容的內容網頁都會顯示錯誤。

發生錯誤時要怎麼辦?

在 [首頁] 頁面編輯時,甚至經驗豐富的使用者可以讓錯誤。當申訴自訂的 [首頁] 頁面時,您可以重設為原始的 [首頁] 頁面使用的網站建立的網站定義。若要瞭解作法,請參閱重設成網站定義的自訂的頁面。此外,如果您有開啟您的網站和頁面您所編輯的文件庫的版本設定已儲存的文件庫中,您可以隨時回復到網頁的舊版本如果發生問題。

網頁不是首頁時要怎麼處理?

與首頁相同,SharePoint 網站中的所有預設網頁都是由主版頁面所控制。如果想要自訂網頁,則可以在網頁的版面配置區中輸入自訂內容,開始進行。如果您無法使用版面配置區來變更網頁,則可以編輯控制網頁的主版頁面。

開啟 Office SharePoint Designer 2007 中的任何網頁時,只要查看 [網頁] 檢視右上角,就可以識別控制該網頁格式的主版頁面,在此處會指出網頁的位置及名稱 (如下圖所示)。

可識別主版頁面的 [網頁] 檢視右上角

在此情況下,會將 AllItems.aspx 網頁附加至預設主版頁面 (位在網站之 _catalogs 資料夾的 masterpage 資料夾中),並將它命名為 default.master。每次自訂網頁時,都可以決定要進行哪一種自訂 (共兩種):

  • 只自訂單一網頁,方法是新增或編輯內容版面配置區中的內容

  • 自訂主版頁面,這會反映在附加至該主版頁面的所有網頁上

頁面頂端

將文字或圖形新增至網頁

按一下內容版面配置區,並按一下 [建立自訂內容] 讓該區域變成可編輯之後,可以按一下版面配置區方塊內部,然後開始輸入。您也可以將網站中的圖像從 [資料夾清單] 拖曳至版面配置區。

頁面頂端

自訂上方連結列

上方連結列上的索引標籤會自動列出首頁並連結首頁。它們也會列出並連結任何此網站之子網站的首頁,但前提是使用瀏覽器建立子網站,並選取 [在上層網站的上方連結列顯示此網站] 選項。

含有首頁連結的上方連結列

您可以修改瀏覽器中的上方連結列 (按一下 [網站設定],然後前往 [上方連結列] 網頁),或在 Office SharePoint Designer 2007 中 (使用下列 步驟)。因為可以將網頁拖曳至連結列,所以修改 Office SharePoint Designer 2007 中的上方連結列是較視覺化的工作方式。而且,在 [導覽] 檢視中命名網頁時,顯示在瀏覽器視窗中的網頁標題會自動變更為新名稱。

  1. 在 Office SharePoint Designer 2007 中,開啟想要修改其上方連結列的網站。

  2. 按一下 [網站] 功能表上的 [導覽]。

    會開啟 [導覽] 檢視,以顯示網站的視覺化呈現。地球符號的方塊代表連結列。

    呈現有連結列的 [導覽] 檢視

將網站上之現有網頁的連結新增至上方連結列

  • 在 [資料夾清單] 中按一下想要從上方連結列連結的目標網頁,然後將它拖曳至 [SharePoint 上方導覽列] 方塊正下方的位置。網頁就定位後,會看到連接線,指出此網頁的連結已新增至上方連結列。

    附註: 

    • 主要的頁面清單的名稱為 AllItems.aspx,並且位於清單/名稱 / 目錄在您的網站 (清單名稱是清單的名稱,例如的相關公告、 行事曆、 連結、 工作或小組討論區)。主要文件庫的頁面名稱為 AllItems.aspx,並且位於文件庫名稱/表單/目錄在您的網站 (文件庫名稱是文件庫的名稱)。

    • 如果看不到 [資料夾清單],請按一下 [工作窗格] 功能表上的 [資料夾清單]。如果因為文字被截斷而無法在 [導覽] 檢視中讀取方塊上的標籤,請將指標放在方塊上。完整名稱會顯示在工具提示中。如果在 [SharePoint 上方導覽列] 方塊未顯示任何網頁,請按一下方塊底端的加號 (+) 以展開網頁清單。

將新網頁的連結新增至上方連結列

  • 以滑鼠右鍵按一下 [SharePoint 上方導覽列],並指向 [新增],然後按一下 [網頁]。

    會建立新的網頁。

    如果在 [資料夾清單] 中看不到新網頁,請按兩下開啟新網頁,以進行編輯,然後它就會出現。

重新命名上方連結列上的連結

  1. 在 [SharePoint 上方導覽列] 方塊下,以滑鼠右鍵按一下想要變更的網頁,然後按一下 [重新命名]。

  2. 輸入網頁的新名稱。只要按一下網頁以外的地方,連結列上的連結也會跟著變更。

    此變更只會影響 SharePoint 上方連結列上的連結,並不會影響檔案名稱或網頁標題。

刪除上方連結列中的連結

  • 在 [導覽] 檢視的 [SharePoint 上方導覽列] 方塊下,以滑鼠右鍵按一下想要刪除的網頁,然後按一下 [刪除]。

    會從上方連結列中刪除網頁的連結。並不會刪除網頁本身。

變更連結在上方連結列的順序

  • 您可以拖曳網頁來重新排列網頁的順序。例如,如果名為 Home 的網頁是列在第一個,而名為 Plans 的網頁是列在第二個,但是您想要顛倒該順序,則請在 [導覽] 檢視中,將 Home 拖曳至 Plans 的右邊。

    附註: 請確認這兩個方塊仍保留在 [SharePoint 上方導覽列] 方塊下方。

頁面頂端

自訂快速啟動

快速啟動會自動顯示網站上之所有 SharePoint 清單及程式庫的連結,而這些清單及程式庫是在 Office SharePoint Designer 2007 或瀏覽器 (在瀏覽器中,必須選擇 [在 [快速啟動] 顯示此清單 [或程式庫]] 選項) 中建立。[網站] 區段會自動提供網站之所有子網站的連結。[人員與群組] 區段會自動提供所有具有權存取此網站之使用者及群組的清單的連結。下列是您可以使用 Office SharePoint Designer 2007 來自訂快速啟動之 [文件]、[圖片]、[清單]、[討論區] 及 [問卷] 區段的步驟。

顯示預設設定的快速啟動

  1. 在 Office SharePoint Designer 2007 中開啟想要修改快速啟動的網站。

  2. 按一下 [網站] 功能表上的 [導覽]。

    會開啟 [導覽] 檢視,以顯示網站的視覺化呈現。地球符號的方塊代表連結列。

    顯示展開之 [快速啟動] 的 [導覽] 檢視

刪除快速啟動的區段

如果您未使用該區段所呈現的功能,則可能會想要刪除快速啟動的區段。例如,如果未使用討論區,則可以刪除 [討論區] 區段。

  • 以滑鼠右鍵按一下代表想要刪除之區段的方塊 (如 [討論區]),然後按一下快顯功能表上的 [刪除]。

將網站現有網頁的連結新增至快速啟動

  • 在 [資料夾清單] 中按一下想要從快速啟動連結的目標網頁,然後將網頁拖曳至 [快速啟動] 方塊下的位置。

附註: 

  • 清單的主頁面稱為 AllItems.aspx,並且位於清單/名稱 / 目錄在您的網站。文件庫的主頁面稱為 AllItems.aspx,位於文件庫名稱/表單/目錄在您的網站。

    如果想要連結出現在快速啟動上與標題相同的層級 (如 [文件]、[圖片] 及 [清單]),請確定將它直接拖曳到 [快速啟動] 方塊的下方。如果想要連結出現在現有標題的下方,請確定將它直接拖曳至該標題的下方。已將網頁的連結新增至快速啟動中。

  • 如果看不到 [資料夾清單],請按一下 [工作窗格] 功能表上的 [資料夾清單]。如果因為文字被截斷而無法在 [導覽] 檢視中讀取方塊上的標籤,請將指標放在方塊上。完整名稱會顯示在工具提示中。如果在 [快速啟動] 方塊下未顯示任何網頁,請按一下方塊底端的加號 (+) 以展開網頁的清單。

將新網頁的連結新增至快速啟動

  • 以滑鼠右鍵按一下 [快速啟動] 方塊,並指向快顯功能表上的 [新增],然後按一下 [網頁]。

    會建立新的網頁。

    此選項會建立新網頁及對應連結,做為與 [文件]、[圖片] 及 [清單] 相同層級的標題。如果想要在現有區段中建立新網頁,請以滑鼠右鍵按一下該區段標題的方塊 (而不是 [快速啟動] 方塊),並指向快顯功能表上的 [新增],然後按一下 [網頁]。

重新命名快速啟動上的連結

  1. 在 [快速啟動] 方塊下,以滑鼠右鍵按一下想要變更的網頁,然後按一下 [重新命名]。

  2. 輸入網頁的新名稱。只要按一下網頁以外的地方,連結列上的連結就會跟著變更。

    此變更只會影響快速啟動上的連結,並不會影響檔案名稱或網頁標題。

變更快速啟動上的連結順序

  • 在 [導覽] 檢視中,拖曳網頁來重新排列網頁的順序。例如,如果想要 [清單] 出現在 [文件] 的前面,則請按一下 [文件],然後將它拖曳至 [清單] 的右邊 (或按一下 [清單],然後將它拖曳至 [文件] 的左邊)。

    附註: 執行此動作時,請確定這些方塊仍保留在 [快速啟動] 方塊下方。

頁面頂端

變更字型及格式

字型和格式設定的每個網站控制業界標準階層式樣式表 (CSS)。Windows SharePoint Services 3.0網站 CSS 規則會指定稱為位於 http://my_server/_layouts/language 識別碼/樣式的 core.css 檔案中。(Office SharePoint Server 2007網站可能會使用不同的樣式表)。如果您有權限可編輯的 core.css,您可以修改以變更字型色彩、 字型大小、 段落間距、 背景圖像、 框線、 字元間距,以及其他更多。當您修改 core.css 時,core.css 的本機複本會自動建立在您的網站。本機 core.css 會覆寫伺服器 core.css 附加至頁面或主版頁面。但如果您時發生錯誤,並想要回到預設 core.css,很容易只刪除複製的 core.css 來執行。

使用網站的預設主版頁面,以及使用 [CSS 屬性] 及 [管理樣式] 工作窗格,都可以識別套用至想要變更之視覺化元素的樣式,然後修改那些樣式。如果想要變更出現在網站的所有網頁上,請確定使用的是網站的預設主版頁面,而不是 default.aspx 網頁。

從 [CSS 屬性] 開啟 [修改樣式] 對話方塊

例如,如果想要變更網頁的背景色彩,則需要找到定義背景色彩的樣式,然後變更那些樣式以套用想要的背景色彩。

通常是最好的方法直接建立 Default.master,而不是修改 Default.master 的複本。不過,如果您執行直接對 Default.master 進行變更,並不滿意您所做的變更,您可以隨時重設 Default.master 網站定義。如需詳細資訊,請參閱重設成網站定義的自訂的頁面的文件。

  1. 若要建立 Default.master 的複本,請在 [資料夾清單] 中,以滑鼠右鍵按一下 Default.master,然後按 [複製]。

  2. 以滑鼠右鍵按一下 [masterpage] 資料夾,然後按一下 [貼上]。

    [資料夾清單] 中預設主版頁面的複本

  3. 按兩下 default_copy(1).master 開啟,進行編輯。

  4. 在 [設計] 檢視中,在 default_copy(1).master 按一下您想要修改樣式的位置。

    附註: 出現在 [設計] 檢視中的部分內容區域不會套用樣式,因此在 [套用樣式] 工作窗格中不會出現對應的樣式。例如,如果選取內容版面配置區,則 [套用樣式] 工作窗格中不會出現任何樣式。然而,內容版面配置區會出現在 HTML 元素 (如 <td> 標籤) 內。

  5. 如果看不到 [套用樣式] 工作窗格,請在 [工作窗格] 功能表中按一下 [套用樣式]。

  6. 在 [套用樣式] 工作窗格中,按一下 [選項],然後按一下 [顯示選取範圍使用的樣式]。

    游標所在區域所套用的每一種樣式都會以藍色外框標示,且樣式的預覽會顯示在框內。

    下圖中,已在 [設計] 檢視中選取 div.ms-titleareaframe。在 [套用樣式] 工作窗格中,會出現三種套用至 div.ms-titleareaframe 的樣式。上方樣式 (Div.ms-titleareaframe) 會定義背景色彩。

    附註: 因為樣式會區分大小寫,因此大寫的 Div.ms-titleareaframe 與小寫的 div.ms-titleareaframe 不同。

    在 [設計] 檢視中選取的 Div.ms-titleareaframe 顯示 [套用樣式] 工作窗格中的對應樣式

    1. 此時在 [設計] 檢視中已選取 Div.ms-titleareaframe。

    2. 套用至 div.mstitleareaframe 的三種樣式會顯示在 [套用樣式] 工作窗格中。

  7. 以滑鼠右鍵按一下您要修改的樣式,然後按一下 [選取所有的 X 例項,其中 X 是在頁面套用的樣式的執行個體數目。

    在此範例中,請以滑鼠右鍵按一下上方樣式 Div.ms-titleareaframe

  8. 選取樣式的所有例項之後,再以滑鼠右鍵按一下樣式,然後按一下 [修改樣式]。

  9. 在 [修改樣式] 對話方塊中依您的意願進行變更,然後按一下 [確定]。

    若要追蹤的範例,請在 [類別] 底下的 [修改樣式] 對話方塊中按一下 [背景]。在 [背景色彩] 清單中,按一下紅色 紅色 ,,然後按一下[確定]

新的樣式就會套用至頁面。

[設計] 檢視中的修改樣式

繼續修改樣式直到主版頁面呈現您要的外觀為止。

如果在任何時候您決定您不滿意您對主版頁面所做的變更,您可以重設它的網站定義。如需詳細資訊,請參閱重設成網站定義的自訂的頁面的文件。

頁面頂端

建議的後續步驟

基本自訂是開始使用整個網站自訂的好起點,但是若要清除整個網站自訂,則必須先深入瞭解主版頁面及樣式表。如需詳細資訊,請參閱下列文章:

頁面頂端

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

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

這項資訊有幫助嗎?

感謝您的意見反應!

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

×