PowerPoint 簡報

Size: px

Start display at page:

Download "PowerPoint 簡報"

齐寇
5 years ago
Views:

1 系所網頁教學研習

2 子單位網頁配置 Logo 圖片主視覺輪播圖片 Header 上方功能列公告事項網頁左選單中央內容區 Footer 下方網站資訊

3 美化網頁左選單插入標題項目利用標題項目區分網頁左選單區塊登入網頁後台網站管理編輯網站內容新增子項目內容類型選標題項目上移下移到適當位置

4 美化網頁有顏色的左選單文字利用文字顏色標註重點登入網頁後台網站管理編輯網站內容新增子項目不限內容類型名稱欄位輸入 <FONT color=#0000ff> 文字 </FONT> 色碼表可以參考大小文字不同 <FONT size=+2> 文字 </FONT> 強迫換行 </BR>

5 美化網頁有閃閃圖的左選單文字利用閃閃圖加強效果登入網頁後台網站管理編輯網站內容新增子項目不限內容類型名稱欄位輸入 <FONT color=#900000><strong> 招生入學 </STRONG></FONT><IMG alt=new5 src=" w5.gif" width=25 height=9>

6 美化網頁用圖片取代左選單文字利用圖片加強視覺效果登入網頁後台網站管理編輯網站內容新增子項目不限內容類型名稱欄位輸入 <IMG height=35 alt="facebook 社團 " src=" book.jpg" border =0 >

7 補充如何上傳圖片到主機上 (1) 登入網頁後台網站管理編輯網站內容新增子項目, 勾選不顯示切到相關檔案頁籤, 點擊編輯並上傳檔案檔案位置如左上所述填入 <IMG height=35 alt= facebook 社團 src= 位置 " border =0 >

8 補充如何上傳圖片到主機上 (2) 登入網頁後台網站管理網站資訊的網頁編輯器區塊, 點選插入圖片 1 瀏覽檔案位置 2 上傳檔案 3 複製檔案位置路徑在來源文字框 4 點選取消填入 <IMG height=35 alt= facebook 社團 src= 位置 " border =0 >

9 美化網頁 -- 插入下方網站資訊在網站資訊區塊放置相關介紹登入網頁後台網站管理建立網站資訊內容

10 美化網頁 -- 插入左上方 logo 圖片在左上角 logo 圖片區塊插入特色圖片登入網頁後台網站管理建立網站資訊內容

11 範例特教系人文藝術中心獸醫系資管系水生系應化系理工院

12 美化網頁 -- 主視覺輪播圖片 ( 其他功能 ) 登入網頁後台點選其他功能的主視覺輪播圖片點選左上角新增配合圖片大小上傳圖檔填入圖片描述適需求填入超連結位置填寫排序欄位 ( 數字越小在越前面 )

13 美化網頁 -- 公告事項 ( 其他功能 )

14 美化網頁 -- 公告事項 ( 跑馬燈 ) 在發表主題插入 html 語法, 但不是每種瀏覽器都支援 <marquee> 跑馬燈文字 </marquee> 參考電物系網頁 <marquee> 內的屬性 : bgcolor= #aaff00 背景顏色 direction= 行進的方向 {right/up/ down} scrollamount= 數字控制行進的快慢 width= 數字設定行進的寬度 height= 數字設定行進的高度

15 如何插入宣傳影片 ( 方法 1) 參考

16 如何插入宣傳影片 ( 方法 1) 方法 1: 插入公告事項 1. 先在 youtube 上傳影片 ( 生機系宣傳影片 watch?v=2fj7utkxefu#) 2. 點選分享, 嵌入 3. 複製文字, 插入公告事項

17 如何插入宣傳影片 ( 方法 2) 參考點擊 click

18 如何插入宣傳影片 ( 方法 2) 方法 2: 插入圖片於網頁左選單登入網頁後台網站管理編輯網站內容新增第一個子項目內容類型選擇內容不要勾選顯示於樹狀層級切到網頁內容頁籤上傳方式 1 點選插入 windows 媒體填入對應的資料 ( 要設定長寬 ) 上傳方式 2 切到 HTML 格式從 YOUTUBE 貼入嵌入的 HTML 碼按下儲存點選預覽取得網址

如何插入宣傳影片 ( 方法 2) 方法 2: 插入圖片於網頁左選單新增第 2 個子項目內容類型選擇連結先把縮圖上傳到網頁上名稱輸入 <IMG src=https://www.

19 如何插入宣傳影片 ( 方法 2) 方法 2: 插入圖片於網頁左選單新增第 2 個子項目內容類型選擇連結先把縮圖上傳到網頁上名稱輸入 <IMG src= files/site_content/biotech/ 生化.jpg width=160 alt= 生化系宣傳影片 > 連結網址輸入剛取得的預覽網址勾選顯示設定按下儲存

招生資訊系所招生資訊頁面網址為 http://www.ncyu.edu.tw/ 單位名稱 /enroll.

aspx 請務必定期更新後臺網頁資料, 以利匯整相關資料報部備查全校匯整頁面 http://www.

20 招生資訊系所招生資訊頁面網址為單位名稱 /enroll.aspx 以教育學系為例, 網址為 enroll.aspx 請務必定期更新後臺網頁資料, 以利匯整相關資料報部備查全校匯整頁面 ite/content.aspx?site_content _sn=47957

21 招生資訊操作方式登入網頁後台點選新功能系所招生資訊 ( 只有系所網頁帳號才有此功能 ) 點擊進行編輯填入對應的資料目前其他欄位不會顯示於網頁上

22 補充說明 -- 剪取工具 WIN7 內建的剪取工具 ( 附屬應用程式裡 ) Windows+7%E5%89%AA%E5%8F%96%E5%B7%A5%E5%85%B 7

23 補充說明即將上線的 rwd 版本什麼是響應式網頁設計 (Responsive Web Design)? 簡稱 RWD, 又稱適應性網頁自適應網頁設計回應式網頁設計多螢網頁設計這是一項被公認在 2014 年網頁設計開發技術的趨勢, 網站使用 CSS3, 以百分比的方式以及彈性的畫面設計, 在不同解析度下改變網頁頁面的佈局排版, 讓不同的設備都可以正常瀏覽同一網站, 提供最佳的視覺體驗, 是個因移動平台的用戶大量增加而想出的一個對應方法

24 預覽位址為單位名稱 /indexrwd11.aspx

25 新推出的 10 種配色登入網頁後台網站管理版本

26 補充說明 ODF(Open Document Format) 源起 : 為配合政府資訊公開政策及因應資訊平台載具多元化趨勢, 便利民眾於網站下載政府資訊及政府機關間政府與企業之資料交換, 推動相容性高適用於各種作業系統及有利於長久保存之開放性檔案格式, 行政院於 104 年資字第號函分行推動 ODF-CNS15251 為政府文件標準格式實施計畫, 希各界共同推動 ODF 文書格式, 並響應政府開放文件標準格式, 提升我國軟實力推動時程 104 年至 106 年 104 年各機關網站提供下載的可編輯文件應支援 ODF 文書格式, 非可編輯者則採用 PDF 的文書格式 ; 105 年各機關系統間政府與企業的資料交換, 須支援 ODF 文書格式 ; 106 年則全面推動各機關使用可編輯 ODF 文書軟體

27 補充說明 ODF( 存檔示範 ) Word PowerPoint Excel

28 短網址研究成果 thrid=a0709 課程地圖 al.aspx?dn= 系所代碼 + 學籍分組代碼例如 : 農藝學系 (331) 不分組 (0) al.aspx?dn=3310

29 表格製作加入 <table>, 在 <table> 的標籤內可以控制整個表格的長度和外框的粗細 <table width= 80% border= 1 cellspacing= 0 cellpadding= summary= 表格摘要文字 > width= 控制表格長度, 建議用百分比 cellspaing= 控制儲存格與邊框距離 cellpadding= 儲存格間距 border= 控制外框粗細, 不外框便設成 0

30 表格製作加入 <table>, 在 <table> 的標籤內可以控制整個表格的長度和外框的粗細 <table width= 80% borde r= 1 cellspacing= 0 cellpadding= 0 summary= 表格摘要文字 > width= 控制表格長度, 建議用百分比 cellspaing= 控制儲存格與邊框距離 cellpadding= 儲存格間距 border= 控制外框粗細, 不外框便設成 0

31 <table border=1> <td> 儲存格 1</td> <td> 儲存格 2</td> </table> <table border=1> <tr> <td> 儲存格 1</td> <td> 儲存格 2</td> </tr> <tr> <td> 儲存格 3</td> <td> 儲存格 4</td> </tr> /table>

32 配合無障礙標題列改 th <table border=1> <th> 儲存格 1</th> <th> 儲存格 2</th> <tr> <td> 儲存格 3</td> <td> 儲存格 4</td> </table> 加 caption 標明整個表格的主題 <table border=1> <caption> 公佈欄 </caption> <td> 儲存格 1</td> <td> 儲存格 2</td> <tr> <td> 儲存格 3</td> <td> 儲存格 4</td> </table>

33 <td><th> 內的屬性如下 : align= 控制水平是 left( 靠左 )/right( 靠右 )/center( 置中 ) valign= 控制垂直是 top( 靠上 )/middle( 置中 )/bottom( 靠下 ) background= 背景圖檔 colspan= 使一個儲存格橫跨 N 個欄位 rowspan= 使一個儲存格下跨 N 個列

34 合併欄 <td><th> 內的屬性如下 : colspan= 使一個儲存格橫跨 N 個欄位 <table border=1> <tr> <td colspan=3 align=center> 儲存格 A1</td> </tr> <tr> <td> 儲存格 B1</td> <td> 儲存格 B2</td> <td> 儲存格 B3</td> </tr></table>

35 合併列 <td><th> 內的屬性如下 : rowspan= 使一個儲存格下跨 N 個列 <TABLE border=1> <TR> <TD rowspan=3 align=center> 儲存格 A1</TD> <TD> 儲存格 B1</TD></TR> <TR> <TD> 儲存格 B2</TD></TR> <TR> <TD> 儲存格 B3</TD></TR></TABLE>

36 比較簡單的方法在 word 排好版, 抓圖片方法 1: 利用內建的剪取工具方法 2: 按下 print screen 在 word 按右鍵貼上圖片上按右鍵另存成圖片在網頁編輯器按插入圖片備註 word 要先關掉換行符號 ( 檔案選項顯示段落標記 )

A-1 HTML A-1-1 HTML 1 HTML JSP HTML HTML HTML JSP A HTML HTML HTML HTML HTML HTML HTML HTML.htm.html HTML Windows NotePad HTML IE [ / ] NotePad A-2

HTML A-1 HTML A-2 A-2 HTML A-8 A-3 A-14 A-4 A-26 A-5 A-30 A-6 A-42 A-1 HTML A-1-1 HTML 1 HTML JSP HTML HTML HTML JSP A HTML HTML HTML HTML HTML HTML HTML HTML.htm.html HTML Windows NotePad HTML IE [ /