Microsoft SharePoint Designer 網頁美化與效能提升 - PowerPoint PPT Presentation

preston-byrd
microsoft sharepoint designer n.
Skip this Video
Loading SlideShow in 5 Seconds..
Microsoft SharePoint Designer 網頁美化與效能提升 PowerPoint Presentation
Download Presentation
Microsoft SharePoint Designer 網頁美化與效能提升

play fullscreen
1 / 69
Download Presentation
Microsoft SharePoint Designer 網頁美化與效能提升
557 Views
Download Presentation

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

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  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. 文字定位 • 所選取的文字會出現8個控制點,你可以縮放文字方塊的大小及隨意移動文字方塊

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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