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

1. Microsoft SharePoint Designer網頁美化與效能提升 District Cyber Centres Alliance 地區數碼中心聯網

2. SharePoint Designer 簡介 • Microsoft SharePoint Designer，是一款由微軟公司推出的網頁製作軟體，前身是Microsoft FrontPage • 用戶可自行到Microsoft的網頁中免費下載Microsoft SharePoint Designer2007版本

3. SharePoint Designer 操作環境 功能表列 工具列 網站或網頁標籤 工具箱 資料夾清單 網站或網頁編輯區 編輯區檢視列

4. 網站編輯區 • SharePoint Designer除了可以編輯網站外，還可以管理網站 • 在網站編輯區檢視列，分別有資料夾、遠端網站、報告、導覽、超連結五個選項 • 可以依不同工作需要，選用不同的檢視模式

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

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

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

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

9. 網頁編輯區 • SharePoint Designer可以直覺式的方法編輯網頁內容 • 亦可以透過編寫HTML程式碼來編輯網頁 • 在網頁編輯區檢視列，分別有設計、分割、程式碼

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

11. 分割／程式碼 • 程式碼檢視讓高手們自行編寫HTML程式碼 • 分割檢視同時顯示了程式碼與設計視窗

12. 工具箱 • 在工具箱上有多種不同的工具，你名以因應需要在網站上加入不同的工具，如表單、按鈕、圖片等 • 只需將該工具直接拉到編輯區上或雙擊工具即可

13. 開啟檔案 • 在檔案＞開新檔案中，分別有網頁及網站兩個選項 • 開啟網頁與網站有什麼不同？ • 一個網站可以有多個不同的網頁，開啟網站後可以分別編輯網站中的任何一個網站，還可以管理此網站 • 開啟網頁只能編輯該網頁，此網頁可以不屬於任何網站，可隨時加到網站中

14. 建立新網站 • 開啟空白網站 • 點選檔案功能表>開新檔案>網站 • 選擇空白網站

15. 建立網站架構 • 繪製架構圖 • 透過網站編輯的導覽檢視，可直接繪製網站的架構圖 • 首先切換到導覽視窗，並按下工具列上的新增頁面按鈕 • 畫面上會出現首頁圖示

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

17. 建立網站架構 • 繪製架構圖 • 重複以上步驟可以逐一新增網頁，完成架構圖 • 此部分新增的網頁，會在網頁資料夾中同時新增一個檔案 • 你亦可以回到資料夾檢視重新命名各個檔案

18. 編修架構圖 • 建立好整個架構圖後，你可以開始調整與編輯，例如新增、搬移或刪除 • 如果網頁有下層的其他網頁，可以按下方塊下方的＋／－號展開或摺疊該群組 • 利用拖曳的方式可以調整網頁的節點位置，放到其他位置

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

20. 編修架構圖 • 如要刪除某些網頁節點，可先點選該網頁並按下Delete鍵 • 在刪除網頁的對話方塊選擇 • 將本網頁從所有導覽結構上移除 • 只從結構圖中移除，不會刪除對應的檔案 • 從網站刪除此網頁 • 同時刪除在資料夾清單對應的檔案

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

22. 建立導覽列 • 在導覽檢視中建立好網頁的架構圖，再透過插入功能表＞Web元件，即可輕鬆建立導覽列 • 如網頁的架構圖有任何的變更，導覽列亦會同步更新

23. 建立導覽列 • 點選要加入導覽列的地方 • 選擇插入功能表＞Web元件 • 在元件類型中選擇連結列，並選擇根據導覽結構的列，按下下一步

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

25. 建立導覽列 • 會彈出一個連結列內容視窗 • 選擇導覽列要顯示網頁架構的那一層的網頁，並按下確定

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

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

28. 編輯網頁文字 • 在網頁編輯視窗中，輸入文字的方法跟一般的文書軟體的一樣 • 輸入文字時，按下ENTER鍵即可開啟新的段落 • 若要在同一段落中換行，要同時按下SHIFT+ENTER鍵 • 選擇插入功能表>HMTL>水平線，可在游標的位置加入一條水平線

29. 文字定位 • 利用對齊功能可以把文字靠左／右、置中對齊 • 而選取文字後，點選格式功能表＞位置 • 在位置視窗中的定位樣式選擇絕對

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

31. 字型、段落、框線與網底 • 選取文字後可以進入格式功能表＞字型 • 除了設定字型外，在字型視窗中可以設定字型樣式、大小及色彩

32. 字型、段落、框線與網底 • 而進入格式功能表＞段落，可設定字元間距改變文字、段落或每行之間的距離

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

34. 編輯網頁圖片 • 插入圖片 • 首先點選要插入圖片的位置，點選插入功能表＞圖片＞從檔案 • 選擇要加入的圖片，按下插入 • 會出現一個協助工具內容視窗，若要針對圖片背景做說明，可在替代文字與詳細描述中輸入內容

35. 編輯網頁圖片 • 插入圖片 • 插入圖片後，可以在該圖片上按下右鍵，點選自動影像目錄標籤 • 圖片會自動縮小，並變成超連結，連結到該圖片檔案

36. 加入美工圖案 • 首先點選要插入美工圖案的位置，點選插入功能表＞圖片＞美工圖案 • 在美工圖案工作窗格的搜尋文字方塊中輸入關鍵字 • 可以在搜尋結果中按下合適的圖片即可加入到網頁中

37. 預覽網頁 • 為網頁加入內容後，可點選檔案功能表＞在瀏覽器中預覽 • 選擇合適的瀏覽器即可

38. 解析度 • 製作網頁時應注意網頁的解析度是否能配合現時常用螢幕的解析度 • 避免太小或或太大 • 可在網頁的左右邊緣加入空白位置

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

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

41. 版面配置表格 • 新增版面配置表格 • 選取表格功能表＞版面配置表格 • 會出現一個版面配置表格工作窗格

42. 版面配置表格 • 按下版面配置表格工作窗格中的插入版面配置表格 • 在工作窗格中選取合適的表格版面配置樣式 • 可以在工作窗格中設定表格的寬／高度 • 或直接拉動表格上的控制點

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

44. 編修表格架構 • 新增儲存格 • 可以按下繪製版面配置儲存格按鈕，在表格中拉出適當的大小 • 或按下工作窗格中的插入版面配置儲存格，點選內置，輸入寬、高度

45. 編修表格架構 • 刪除儲存格 • 選取要刪除的儲存格，按下右鍵，選取刪除>刪除儲存格即可 • 分割儲存格 • 選取要分割的儲存格，按下右鍵，選取修改>分割儲存格 • 選擇分割為欄／列

46. 儲存格格式設定 • 儲存格的框線設定 • 選取要變更設定的儲存格，按下滑鼠右鍵，選擇儲存格內容 • 在框線一項中的大小設定線條的粗幼及色彩

47. 儲存格格式設定 • 儲存格的背景設定 • 而在背景一項中可在色彩一項中為儲存格加入背景色 • 亦可勾選使用背景圖片，將自訂的圖片加入儲存格中成為背景

48. 插入一般表格 • 點選表格功能表＞插入表格 • 在插入表格視窗中輸入表格列與欄數 • 亦可同時設定高／寬度

49. 插入一般表格 • 在表格的邊緣位置按下右鍵，選擇表格內容可再次開啟表格內容視窗 • 如在版面配置工具一項中勾選啟用版面配置工具，然後按下確定 • 表格會顯示每個儲存格的欄寬及列高

50. 編修一般表格架構 • 插入儲存格 • 在要插入儲存格的位置按一下滑鼠，點選表格功能表＞插入＞列或欄 • 選擇列／欄數及插入的方向 • 刪除儲存格 • 選取要刪除的儲存格，點選表格功能表＞刪除＞刪除儲存格