Microsoft SharePoint Designer網頁美化與效能提升

District Cyber Centres Alliance

地區數碼中心聯網

SharePoint Designer 簡介

• Microsoft SharePoint Designer，是一款由微軟公司推出的網頁製作軟體，前身是Microsoft FrontPage

• 用戶可自行到Microsoft的網頁中免費下載Microsoft SharePoint Designer 2007版本

SharePoint Designer 操作環境功能表列 工具列

資料夾清單

網站或網頁標籤

網站或網頁編輯區

編輯區檢視列

工具箱

網站編輯區• SharePoint Designer除了可以編輯網站外，還可以管理網站

• 在網站編輯區檢視列，分別有資料夾、遠端網站、報告、導覽、超連結五個選項

• 可以依不同工作需要，選用不同的檢視模式

資料夾• 資料夾檢視可以顯示所開啟網站的資料夾清單• 直接點選檔案可以開啟該檔案進行編輯

報告• 報告檢視提供此網站的各種報告• 於報告項目上按下滑鼠可查看詳細內容

導覽• 導覽檢視可用來建立或查看網站的整體架構

超連結• 超連結檢視可查看已選取檔案的超連結的狀況

網頁編輯區• SharePoint Designer可以直覺式的方法編輯網頁內容

• 亦可以透過編寫 HTML程式碼來編輯網頁• 在網頁編輯區檢視列，分別有設計、分割、程式碼

設計• 設計檢視讓你直接在網頁編輯區中，進行網頁編輯與設計

分割／程式碼• 程式碼檢視讓高手們自行編寫 HTML程式碼

• 分割檢視同時顯示了程式碼與設計視窗

工具箱• 在工具箱上有多種不同的工具，你名以因應需要在網站上加入不同的工具，如表單、按鈕、圖片等

• 只需將該工具直接拉到編輯區上或雙擊工具即可

開啟檔案• 在檔案＞開新檔案中，分別有網頁及網站兩個選項

• 開啟網頁與網站有什麼不同？–一個網站可以有多個不同的網頁，開啟網站後可以分別編輯網站中的任何一個網站，還可以管理此網站

–開啟網頁只能編輯該網頁，此網頁可以不屬於任何網站，可隨時加到網站中

建立新網站• 開啟空白網站

• 點選檔案功能表>開新檔案>網站

• 選擇空白網站

建立網站架構• 繪製架構圖• 透過網站編輯的導覽檢視，可直接繪製網站的架構圖

• 首先切換到導覽視窗，並按下工具列上的新增頁面按鈕

• 畫面上會出現首頁圖示

建立網站架構• 繪製架構圖• 將滑鼠指到首頁圖示上並按下右鍵• 點選新增＞網頁• 在新加入的網頁上按下右鍵，並選擇重新命名可更改該頁名稱

建立網站架構• 繪製架構圖• 重複以上步驟可以逐一新增網頁，完成架構圖• 此部分新增的網頁，會在網頁資料夾中同時新增一個檔案

• 你亦可以回到資料夾檢視重新命名各個檔案

編修架構圖• 建立好整個架構圖後，你可以開始調整與編輯，例如新增、搬移或刪除

• 如果網頁有下層的其他網頁，可以按下方塊下方的＋／－號展開或摺疊該群組

• 利用拖曳的方式可以調整網頁的節點位置，放到其他位置

編修架構圖• 亦可利用複製貼上的功能把網頁貼到其他位置• 但複製的網站不會在資料夾清單上新增檔案• 亦可在架構圖下按下右鍵，新增一個上層頁面，加入一個新架構

編修架構圖• 如要刪除某些網頁節點，可先點選該網頁並按下Delete鍵

• 在刪除網頁的對話方塊選擇–將本網頁從所有導覽結構上移除• 只從結構圖中移除，不會刪除對應的檔案

–從網站刪除此網頁• 同時刪除在資料夾清單對應的檔案

構成優質網站的條件• 清楚的導覽列–在功能方面導覽列主要分單點式與展開式兩種–在位置方面又分水平式與直立式

建立導覽列• 在導覽檢視中建立好網頁的架構圖，再透過插入功能表＞Web元件，即可輕鬆建立導覽列

• 如網頁的架構圖有任何的變更，導覽列亦會同步更新

建立導覽列• 點選要加入導覽列的地方

• 選擇插入功能表＞Web元件

• 在元件類型中選擇連結列，並選擇根據導覽結構的列，按下下一步

建立導覽列• 然後選擇喜愛的導覽列樣式，再按下一步• 選擇要水平或垂直排列，按完成

建立導覽列• 會彈出一個連結列內容視窗

• 選擇導覽列要顯示網頁架構的那一層的網頁，並按下確定

構成優質網站的條件• 清晰的文字• 文字必須可辨識、可閱讀• 字型顏色要求協調• 減少使用太花俏的字型• 字型不要忽大忽小、長短不定• 重要文字不要放在圖片中

用心的編排• 統一網頁設計風格• 固定導覽列的位置• 可以文字輔助網頁中的圖片• 加入書籤

編輯網頁文字• 在網頁編輯視窗中，輸入文字的方法跟一般的文

書軟體的一樣• 輸入文字時，按下 ENTER鍵即可開啟新的段落• 若要在同一段落中換行，要同時按下 SHIFT +

ENTER鍵

• 選擇插入功能表>HMTL>水平線，可在游標的位置加入一條水平線

文字定位

• 利用對齊功能可以把文字靠左／右、置中對齊

• 而選取文字後，點選格式功能表＞位置

• 在位置視窗中的定位樣式選擇絕對

文字定位• 所選取的文字會出現８個控制點，你可以縮放文字方塊的大小及隨意移動文字方塊

字型、段落、框線與網底• 選取文字後可以進入格式功能表＞字型

• 除了設定字型外，在字型視窗中可以設定字型樣式、大小及色彩

字型、段落、框線與網底

• 而進入格式功能表＞段落，可設定字元間距改變文字、段落或每行之間的距離

字型、段落、框線與網底• 而進入格式功能表＞框線與網底，可以為文字方塊加入框線及背景色彩

編輯網頁圖片• 插入圖片• 首先點選要插入圖片的位置，點選插入功能表＞圖片＞從檔案

• 選擇要加入的圖片，按下插入

• 會出現一個協助工具內容視窗，若要針對圖片背景做說明，可在替代文字與詳細描述中輸入內容

編輯網頁圖片• 插入圖片• 插入圖片後，可以在該圖片上按下右鍵，點選自動影像目錄標籤

• 圖片會自動縮小，並變成超連結，連結到該圖片檔案

加入美工圖案• 首先點選要插入美工圖案的位置，點選插入功能表＞圖片＞美工圖案

• 在美工圖案工作窗格的搜尋文字方塊中輸入關鍵字

• 可以在搜尋結果中按下合適的圖片即可加入到網頁中

預覽網頁• 為網頁加入內容後，可點選檔案功能表＞在瀏覽器中預覽

• 選擇合適的瀏覽器即可

解析度• 製作網頁時應注意網頁的解析度是否能配

合現時常用螢幕的解析度• 避免太小或或太大• 可在網頁的左右邊緣加入空白位置

表格• 表格是網頁設計的一個重要的元件• 是版面配置的重要工具• 網頁上的表格可以分兩種：• 版面配置表格• 一般傳統表格

版面配置表格• 可快速地在進行網頁版面配置時建立好架構• 版面配置表格最重要的元件是儲存格，可以加入文字、圖片或其他元件

版面配置表格• 新增版面配置表

格• 選取表格功能表＞版面配置表格

• 會出現一個版面配置表格工作窗格

版面配置表格• 按下版面配置表格工作窗格中的插入版面配置表格

• 在工作窗格中選取合適的表格版面配置樣式

• 可以在工作窗格中設定表格的寬／高度

• 或直接拉動表格上的控制點

編修表格架構• 調整欄寬或列高• 除了拖曳滑鼠的方式外，亦可以直接按下表格上的欄列指示標籤，自行調整

編修表格架構• 新增儲存格• 可以按下繪製版面配置儲存格按鈕，在表格中拉出適當的大小

• 或按下工作窗格中的插入版面配置儲存格，點選內置，輸入寬、高度

編修表格架構• 刪除儲存格• 選取要刪除的儲存格，按下右鍵，選取刪除>刪除儲存格即可

• 分割儲存格• 選取要分割的儲存格，按下右鍵，選取修改>分割儲存格

• 選擇分割為欄／列

儲存格格式設定• 儲存格的框線設定• 選取要變更設定的儲

存格，按下滑鼠右鍵，選擇儲存格內容

• 在框線一項中的大小設定線條的粗幼及色彩

儲存格格式設定• 儲存格的背景設定• 而在背景一項中可在色彩一項中為儲存格加入

背景色• 亦可勾選使用背景圖片，將自訂的圖片加入儲

存格中成為背景

插入一般表格• 點選表格功能表＞插入表格

• 在插入表格視窗中輸入表格列與欄數

• 亦可同時設定高／寬度

插入一般表格• 在表格的邊緣位置按下右鍵，選擇表格內容可再次開啟表格內容視窗

• 如在版面配置工具一項中勾選啟用版面配置工具，然後按下確定

• 表格會顯示每個儲存格的欄寬及列高

編修一般表格架構• 插入儲存格– 在要插入儲存格的位置按一下滑鼠，點選表格功能表＞插入＞列或欄

– 選擇列／欄數及插入的方向

• 刪除儲存格– 選取要刪除的儲存格，點選表格功能表＞刪除＞刪除儲存格

編修一般表格架構• 合併儲存格– 選取要合併的儲存格，點選表格功能表＞修改＞合併儲存格

• 分割儲存格– 選取要分割的儲存格，點選表格功能表＞修改＞分割儲存格

– 選擇分割為列／欄，並選擇列／欄數

編修一般表格架構• 調整欄寬與列高• 可以直接用滑鼠拖曳表格的框線調整

• 亦可選取要調整的表格或儲存格範圍，點選表格功能表＞修改＞平均分配欄寬／列高

輸入資料• 輸入文字–可直接在游標的位置輸入文字–按下 TAB鍵可跳至下一個儲存格

• 插入圖片–方法與一般插入圖片一樣

超連結• 超連結就是一個從網頁的某個地方連結到

另一地方的工具• 網頁中的超連結，可以從某一段文字，或圖片的某一部分，連結到其他網頁或同一網頁的其他地方

文字的超連結• 連結到檔案• 首先將要連結的檔案複製到網站資料夾中

• 選取要設定超連結的文字，並選擇插入功能表＞超連結

文字的超連結• 在插入超連結視窗中選取該檔案• 按下確定即可，該段文字會變成藍色並加上底

線

超連結到書籤• 書籤是指在網頁中的特定區域加入記號，能讓超連結迅速去到該區域

• 建立書籤：– 選取要製作書籤的文字，並點選插入功能表＞書籤

– 在書籤視窗中輸入書籤名稱，按下確定

– 在其他重要的地方重複此步驟

超連結到書籤• 插入超連結到書籤：• 選取要插入超連結的文字，並點選插入功能表＞超連結

超連結到書籤

• 在插入超連結視窗的右方按下書籤按鈕

• 選取剛建立的書籤，按下確定即可

超連結到書籤• 上述的方法是超連結到同一網頁的書籤中• 如要超連結到其他網頁中的書籤，在插入超連結視窗中，先選取該網頁，然後才按下書籤按鈕

超連結到其他網站• 選取要設定超連結的文字，點選插入＞超連結• 直接在插入超連結的視窗底部輸入要連結到的網址，完成後按下確定

超連結到電子郵件• 同樣先選取要設定超連結的文字，並點選插入＞超連結

• 在連結到一列中點選電子郵件地址按鈕• 輸入電郵地址及主旨要連結到的網址

移除超連結• 如要移除超連結，可在該超連結上按下滑鼠右鍵，選擇超連結內容

• 在編輯超連結視窗的右下方按下移除超連結按鈕即可

圖片的超連結• 利用圖片作為超連結的起點方法跟文字一

樣，先選取該圖片然後重覆加入文字超連結的步驟

• 加入替代文字可在等待圖片下載的過程中先顯不替代文字，即使圖片未完全下載，亦能使用該超連結

圖片的超連結• 加入替代文字• 先選取圖片，按下滑鼠右鍵，選擇圖片內容

• 選擇一般頁籤，於替代文字的文字一項中輸入要顯示的文字即可

建立影像地圖• 影像地圖是指在一張圖片或影像中建立多個不同的區域及各自的超連結

• 首先在工具列上按下右鍵開出圖片工具列，並選取圖片

• 圖片工具列上分別有矩形作用區、圓形作用區、多邊形作用區、醒目提示作用區四個工具按鈕

建立影像地圖• 可分別利用矩形、圓形、多邊形作用區在圖片上要加入超連結的地方畫出適當形狀的作用區

• 放手後會立即顯示插入超連結的視窗，可如常加入超連結

建立影像地圖• 你可以隨時調整作用區的大小• 只需點選該作用區，拖曳四角的控制點即可• 亦可按下醒目提示作用區按鈕，查看該圖片上已繪製的作用區

- 完 -

多謝 !