Transcript 下載 - 地區數碼中心計劃

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鍵可跳至下一個儲存格
• 插入圖片
– 方法與一般插入圖片一樣
超連結
• 超連結就是一個從網頁的某個地方連結到
另一地方的工具
• 網頁中的超連結，可以從某一段文字，或
圖片的某一部分，連結到其他網頁或同一
網頁的其他地方
文字的超連結
• 連結到檔案
• 首先將要連結的檔案複
製到網站資料夾中
• 選取要設定超連結的文
字，並選擇插入功能表
＞超連結
文字的超連結
• 在插入超連結視窗中選取該檔案
• 按下確定即可，該段文字會變成藍色並加上底
線
超連結到書籤
• 書籤是指在網頁中的特定區域
加入記號，能讓超連結迅速去
到該區域
• 建立書籤：
– 選取要製作書籤的文字，並點選
插入功能表＞書籤
– 在書籤視窗中輸入書籤名稱，按
下確定
– 在其他重要的地方重複此步驟
超連結到書籤
• 插入超連結到書籤：
• 選取要插入超連結的文字，並點選插入功能表
＞超連結
超連結到書籤
• 在插入超連結視窗的
右方按下書籤按鈕
• 選取剛建立的書籤，
按下確定即可
超連結到書籤
• 上述的方法是超連結到同一網頁的書籤中
• 如要超連結到其他網頁中的書籤，在插入超連
結視窗中，先選取該網頁，然後才按下書籤按
鈕
超連結到其他網站
• 選取要設定超連結的文字，點選插入＞超連結
• 直接在插入超連結的視窗底部輸入要連結到的
網址，完成後按下確定
超連結到電子郵件
• 同樣先選取要設定超連結的文字，並點選插入
＞超連結
• 在連結到一列中點選電子郵件地址按鈕
• 輸入電郵地址及主旨要連結到的網址
移除超連結
• 如要移除超連結，可在該超連結上按下滑鼠右
鍵，選擇超連結內容
• 在編輯超連結視窗的右下方按下移除超連結按
鈕即可
圖片的超連結
• 利用圖片作為超連結的起點方法跟文字一
樣，先選取該圖片然後重覆加入文字超連
結的步驟
• 加入替代文字可在等待圖片下載的過程中
先顯不替代文字，即使圖片未完全下載，
亦能使用該超連結
圖片的超連結
• 加入替代文字
• 先選取圖片，按下滑
鼠右鍵，選擇圖片內
容
• 選擇一般頁籤，於替
代文字的文字一項中
輸入要顯示的文字即
可
建立影像地圖
• 影像地圖是指在一張圖片或影像中建立多個不
同的區域及各自的超連結
• 首先在工具列上按下右鍵開出圖片工具列，並
選取圖片
• 圖片工具列上分別有矩形作用區、圓形作用區、
多邊形作用區、醒目提示作用區四個工具按鈕
建立影像地圖
• 可分別利用矩形、圓形、多邊形作用區在圖片
上要加入超連結的地方畫出適當形狀的作用區
• 放手後會立即顯示插入超連結的視窗，可如常
加入超連結
建立影像地圖
• 你可以隨時調整作用區的大小
• 只需點選該作用區，拖曳四角的控制點即可
• 亦可按下醒目提示作用區按鈕，查看該圖片上
已繪製的作用區
-完多謝!