社團社群網站設計競賽 說明會 南台科技大學計網中心.

Presentation on theme: "社團社群網站設計競賽 說明會 南台科技大學計網中心."— Presentation transcript:

1 社團社群網站設計競賽 說明會 南台科技大學計網中心

2 目錄 宣導事項、登入、發問、教學網站 我可以在My做甚麼 ? 教學：班版基礎設定+版面編排設定 把握製作網站 4要點 網站範例

3 請由「南台首頁」右方→「本校學生」→「MY數位學習」登入

4 2.計網中心聯絡人：嚴尹晨、盧怡臻、蔡全峰，分機2605。
1.有問題可在系統意見反應發表文章。 2.計網中心聯絡人：嚴尹晨、盧怡臻、蔡全峰，分機2605。 進入服務台預設為系統意見反應的畫面 這裡可以觀看以前的討論 有任何問題請點選發表討論

5 教學網站與PPT 你可以由服務台連結到「社群教學網站」 參考計中的使用教學，或下載本份PPT。 可由「服務台」點選「使用教學網站」資料夾，再點選 「社群網站使用教學」。 PPT下載 教學

6 請一定要加入RSS訂閱資訊 網站首頁加入RSS訂閱，各項資訊不漏接！ RSS網址： [學務處] 社團公告 (可直接複製網址貼上) 相關教學請見後面

7 可來計網中心修改網址 例如：嘻哈社是沿用BEPRO的編號 http://my.stut.edu.tw/club/breaking
目前各社團網址編號是用跟BEPRO一樣的，但如果BEPRO沒有就會先用計中的編號，你可以來計中要求更改這個編號。 例如：嘻哈社是沿用BEPRO的編號 斥堠童軍社使用計中的編號

8 請將「閱讀權限」一律設成「開放」、「不限成員」 評審委員才能夠進行評審

9 我可以在My做甚麼 ?

10 1. 我的首頁 整合我的參與資訊 (班版、社團、實驗室、計畫)及個人資料

11 2. 社群(每個社群500MB) 班版、社團、實驗室、計畫，與同學老師互動。 (問卷、活動、行事曆、塗鴉牆、討論區、相簿、文件)

12 教學 1 班版基礎設定 版面編排設定

13 版主交接 完成版主交接後，你將成為該版的副版主，且無法再取得版主的權限。 版主與副版主的差異： 版主可以指定誰擔任副版主。
副版主不能刪除版主、不能做版主交接。

14 社群首頁 為了滿足各類社群的需求，並讓不同樣式呈現不同資訊，社群首頁可以非常彈性地在不同區塊安排內容
甚至選單的呈現方式也可以依社群的性質做變更

15 套用版面樣式 南台校園社群提供幾種版面樣式，可直接套用即可置換新版型，適合簡單、方便套用之使用者。

16 版面配置 社群首頁的版面是由不同的區塊配置而成，每個區塊都可以彈性地變更內容位置或安排文字、影片、小遊戲等不同型態的資訊。 PS：版面配置在換版面樣式後會不見

17 版面配置-加入RSS 2.跳至「版面配置」頁面後在想要的「區塊」中點「新增功能」。 1.點選「社群管理」中的「版面配置」

18 版面配置-加入RSS 4.區塊中會出現「訂閱RSS」，按「編輯」會跳出編輯視窗。 5.輸入標題，貼上RSS網址後按下確定。
6.完成後便可看到學校發佈的公告

19 選單管理 功能列表很彈性，可以透過連結來放置想呈現的資訊，例如: 編輯好的文件、對外的連結等，也可以透過目錄，將相關的內容以子選單的方式呈現。

20 新增文件分類 建立文件分類，例如: 班務、筆記專區、好文分享等，成員在新增文件時可以直接選擇分類。
此外，社群管理者可以設定分類的權限 (閱讀、寫入) 及顯示方式 ( 列表、全文展開)。

21 新增文件與文章編輯 新增文件 * 3種不同的貼上功能 * 在文件中插入圖片 表格編輯 * 書籤與超連結 在文件中插入Flash
新增文件要講解 3種不同的貼上功能 只要宣導貼上請使用編輯視窗中的「貼上MS Word 內容」 表格編輯 只要宣導功能設定較多，而且藏的比較裡面，請學生務必要看說明

22 相簿 班聚、活動、比賽相片都可以輕鬆地上傳及編輯，同時每本相簿可以設定不同的上傳及閱讀權限，方便版主和副版主進行管理。
照片輪播也是在此設定! 新增步驟如下：  * 相簿功能請參考  A.新增相簿  |  B.上傳相片  |  C.編輯/刪除相片  |   D.相簿輪播設定

23 成果呈現方式 新增一個分類，命名為成果。 在成果分類中新增一個文件。 輸入活動名稱、活動內容。 將活動相關檔案用附件的方式上傳。
活動照片上傳到相簿(不同活動可分不同相簿)。 在文件中插入相簿的照片。

24 建立成果分類 2.跳出分類視窗後點選「新增」 1.點選「管理」 3.輸入分類名稱 4.點選「確定」

25 6.進入分類頁面後點「新增」，會跳出新增文件視窗
7.輸入標題、內容 8.點選「附件」會跳出附件上傳視窗 5.點選「成果」分類

26 9.點選「上傳」 10.在瀏覽視窗中選擇要的檔案 11.點選「開啟舊檔」 12.上傳完成後會出現「close」， 在文件中加入附件

27 13.點小圖可以在文件中插入超連結 14.已插入的超連結、FLASH 13.已上傳的檔案列表 15.點選「相簿」

28 16.選擇從哪一本相簿插入 17.選擇尺寸 18.點選要插入的圖片，可連續點選 19.已插入的圖片 20.點選「確定」 從相簿插入圖片
，後點選的會在先點選的上面。 19.已插入的圖片 20.點選「確定」

29 完成

30 外掛元件套用 「外掛元件」可藉由社群首頁的「自由欄位」置入網站，或是插入至文件。 常見的外掛元件：

31 除了預設的樣式外，也可以透過 [社群管理 / 編輯樣式] 設計社群呈現的樣子
css 編輯設定 除了預設的樣式外，也可以透過 [社群管理 / 編輯樣式] 設計社群呈現的樣子 教學網頁 Css是比較進階的功能這部分不教 只帶學生瀏覽網頁 請學生自行學習

32 Div標籤就像收納盒，裡面可以裝網頁內容。
大的收納盒裡面還可以裝小收納盒。 <div id=“sysbar”> <div id=“login”>網頁內容</div> <div id=“search”>網頁內容</div> </div>

33 CSS程式碼 HTML程式碼 <div id= " sysbar " class= "title-blue" > <div id= "login" >網頁內容</div> <div id= "search" >網頁內容</div> </div> # → 唯一的 id 名稱 . → 可套用到多處的 class {} → 裡面寫著css的設定項目與值

34 色碼表 (可搭配開發者工具使用) http://rhinejo.myweb.hinet.net/home/color/csrf.html
色碼表 (可搭配開發者工具使用)

35 IE8 開發者工具 協助你更方便的修改css

36 把握製作網站 4要點

37 1.豐富的內容

38 2.內容的編排創意 一批資料百種呈現 創意讓你與眾不同

39 3.注意個人資料的使用 個人資料之定義 姓名 出生年月日 國民身分證統一編號 護照號碼 病歷 特徵 醫療 指紋 基因 婚姻 性生活 家庭
(個人資料保護法修正草案第二條第一款) 姓名 出生年月日 國民身分證統一編號 護照號碼 特徵 指紋 婚姻 家庭 教育 職業 病歷 醫療 基因 性生活 健康檢查 犯罪前科 聯絡方式 財務情況 社會活動 其他得以直接或間接方式識別該個人之資料。

40 4.注意智慧財產權 不提供非法軟體的下載 不將他人的文章、照片隨便張貼或移花接木 不將他人的流行歌曲或音樂拿來在部落格使用

41 網站範例 我不會美工… 我沒做過網站… 怎麼辦 ?? 來看看別人怎麼做 ^-^

42 簡單的文字圖片 展現網站標題

43 GIF動畫圖片 創造動感

44 「套用版面樣式」+ 自製美工圖片 打造特色班版網站
「套用版面樣式」+ 自製美工圖片 打造特色班版網站

45 「套用版面樣式」+ 自製美工圖片 打造特色班版網站
「套用版面樣式」+ 自製美工圖片 打造特色班版網站

46 運用自由欄位 + 照片 也能讓平凡樣版不一樣

47 套用外掛元件 創造超活潑的網站氣氛

48 運用CSS做整體設計 令人驚艷的網站

49 比賽規定項目

50 社團網站須具備的內容 (內容格式格式可自由發揮)
社團網站須具備的內容 (內容格式格式可自由發揮) 社團簡介：社團沿革、組織及特色介紹 幹部簡介：姓名、職稱、自我介紹、照片或頭像 社團校內、外競賽或評鑑榮譽榜： 個人或團隊參加校內、外競賽獲獎榮譽，可分類或是列年表。 例如：社團評鑑或競賽活動、全國性競賽得獎、服務活動感謝狀（如教育優先區、帶動中小學、國際志工服務、寒暑假營隊）、志工等。 照片輪播：上傳相片到相簿，並完成輪播設定。 成果：活動計畫文件、照片、影片整理(稍後做示範) RSS：加入社團公告RSS

51 加分項目 社團網誌：社團活動記錄、社團團練心得、社團團聚出遊…。 討論區的使用率與成員互動成果。 活動訊息發佈率。 社團行事曆的建置。

52 比賽時程 製作：100/4/28 ~ 100/7/29 評選：100/8/8 ~ 100/8/19 公告競賽結果：100/9/10
頒獎：100學年第一學期開學典禮實施。

53 評分標準 網站內容豐富性佔40%。 美工版面設計、內容呈現創意度及使用便利性佔30%。 社群互動及社團參與佔30%。