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

Microsoft SharePoint Designer
網頁美化與效能提升
District Cyber Centres Alliance
地區數碼中心聯網
CSS樣式表
• 把字型、字體、大小等文字格式，新增為
CSS樣式，可方便重複套用到其他文字上
• CSS(階層式樣式表)是HTML樣式的新標準
• 可控制網頁內容的外觀格式，如套用圖案
框線、文字樣式、表格樣式等
認識CSS樣式面板
• 套用樣式及CSS屬性工作窗格
認識CSS樣式面板
• 套用樣式工作窗格
– 包含了新樣式與附加樣式兩個
指令及選取套用CSS樣式清單
• CSS屬性工作窗格
– 可檢示CSS樣式中所有設定好
的個別元件資料
設定字型新樣式
•
•
•
•
•
點選套用樣式工作窗格中的新樣式
在選取器中輸入樣式名稱
在定義於中，選擇本頁
選擇字型類別，並設定字型屬性
按下確定
設定字型新樣式
• 選擇文字後，在套用樣式
工作窗格中點算剛新增的
樣式即可
• 如要移除樣式，先點選該
文字，在套用樣式工作窗
格中的樣式上按滑鼠右鍵
• 點選移除類別指令
設定附加樣式表
• 設定附加樣式表之前，必須先有一已儲存
的CSS樣式檔案（ .css）
• 儲存CSS樣式檔案（ .css）
• 在新增CSS樣式後，執行檔案＞另存新檔，
並於存檔類型中選擇CSS檔
設定附加樣式表
• 點選套用樣式工作窗格中的附加樣式表
• 按下瀏覽找尋已儲存的CSS樣式檔案並開啟
• 選擇附加至本頁，附加為匯入，按下確定
即可
修改樣式
• 在套用樣式工作窗格中樣式
列表上的樣式按下滑鼠右鍵
• 選擇入修改樣式，即可如新
增樣式般更改字型樣式
＊除字型外，其他的都可物
件如表格背景等都可用相同
方法設定
圖層
•
•
•
•
•
•
使用圖層的好處：
圖層內可放文字、圖片及動畫
可移動到任可位置
可顯示也可隱藏
可加上顏色及框線
可任意堆疊圖像
開啟圖層
• 點選插入＞HTML＞圖層即可立即插入圖層
圖層元件庫
• 按下工作窗格功能表＞
圖層可開啟圖層元件庫
• 圖層元件庫可管理及新
增圖層
圖層的顯示與隱藏
• 在圖層元件庫中的圖層名稱左側都有一個
眼睛圖示
• 按下眼睛圖示使其消失即可隱藏該圖層
• 多按一下即可重新顯示
圖層順序
• 在圖層元件庫中的圖層名稱左側，有一欄
Ｚ數值
• 數字愈大該圖層則處於愈上層
• 只需按下右鍵並選擇修改Ｚ軸高度即可更
改圖層順序
文字跑馬燈
• 將游標放在新增的圖
層中
• 點選插入＞Web元件
• 在元件類型中選擇動
態效果並點選跑馬燈
• 按下完成後在跑馬燈
內容視窗中輸入文字
• 設定跑馬燈屬性
• 按下確定即可
加入網站特殊效果
• 表現方式工作窗格
• 表現方式提供多種不同的表現方式，為網
頁加入特別指令
• 可到工作窗格功能表＞表現方式
加入網站特殊效果
• 交換圖像
• 首先以滑鼠選取要加入指令的
文字或物件
• 點選表現方式工作窗格中的插
入按鈕＞交換圖像
• 點算網頁現有的圖像，再點選
瀏覽按鈕找出要交換的圖像
加入網站特殊效果
• 交換圖像
• 勾選預先載入影像、滑鼠移出時還原事件
• 按下確定後，可到表現方式工作窗格中的
事件清單更改滑鼠操作的指令
加入網站特殊效果
• 快顯視窗訊息
• 選取要加入指令的文字或物
件
• 點選表現方式工作窗格中的
插入按鈕＞快顯視窗訊息
• 在訊息方塊中輸入內容
• 按下確定後，到事件清單更
改滑鼠操作的指令為onclick
加入網站特殊效果
• 開啟瀏覽器視窗
• 選取要加入指令的文字或物件
• 點選表現方式工作窗格中的插入按鈕＞開
啟瀏覽器視窗
• 在移至URL中輸入檔案名稱或網址
加入網站特殊效果
•
•
•
•
開啟瀏覽器視窗
在視窗名稱中輸入要顯示的視窗名稱
調整視窗高度、寬度
按下確定
加入網站特殊效果
• 加入背景聲音
• 在網頁空白處按下
滑鼠右鍵，點選網
頁內容
• 在背景聲音一項找
出音樂檔案並設定
播放次數即可
加入網站特殊效果
互動式按鈕
點選插入＞互動式按鈕
選擇你喜歡互動式按鈕
在文字方塊輸入要顯示
的文字並設定連結
• 然後在字型及圖像標籤
設定按鈕屬性
• 按下確定即可
•
•
•
•
加入網站特殊效果
•
•
•
•
•
網頁切換的效果
點選格式＞網頁切換
在事件中，點選進入網頁並設定期間秒數
選取合適的切換效果
按確定
發佈網站
• 網頁製作完成後，你可以把該網站的資料
夾放到上你的伺服器上即可
-完多謝!