Transcript 社團競賽說明會簡報_new.pptx

社團社群網站設計競賽
說明會
南台科技大學計網中心
1
目錄
• 宣導事項、登入、發問、教學網站
• 我可以在My做甚麼 ?
• 教學：班版基礎設定+版面編排設定
• 把握製作網站 4要點
• 網站範例
2
登入
請由「南台首頁」右方→「本校學生」→「MY數位學習」登入
3
1.有問題可在系統意見反應發表文章。
2.計網中心聯絡人：嚴尹晨、盧怡臻、蔡全峰，分機2605。
進入服務台預設為系統意見反應的畫面
這裡可以觀看以前的討論
有任何問題請點選發表討論
4
教學網站與PPT
你可以由服務台連結到「社群教學網站」 http://my.stut.edu.tw/class/demo2 參考計中
的使用教學，或下載本份PPT。
可由「服務台」點選「使用教學網站」
資料夾，再點選 「社群網站使用教
學」。
PPT下載
教學
5
請一定要加入RSS訂閱資訊
網站首頁加入RSS訂閱，各項資訊不漏接！
RSS網址：
[學務處] 社團公告 (可直接複製網址貼上)
http://news.stut.edu.tw/user/showcontentrss.aspx?deptid=E200&classid=0010&classchid=52
相關教學請見後面
6
可來計網中心修改網址
目前各社團網址編號是用跟BEPRO一樣的，但如果BEPRO沒有就會先用計中的
編號，你可以來計中要求更改這個編號。
例如：嘻哈社是沿用BEPRO的編號
http://my.stut.edu.tw/club/breaking
斥堠童軍社使用計中的編號
http://my.stut.edu.tw/club/12
7
請將「閱讀權限」一律設成「開放」、「不限成員」
評審委員才能夠進行評審
8
我可以在My做甚麼 ?
9
1. 我的首頁
整合我的參與資訊 (班版、社團、實驗室、計畫)及個人資料
10
2. 社群(每個社群500MB)
班版、社團、實驗室、計畫，與同學老師互動。
(問卷、活動、行事曆、塗鴉牆、討論區、相簿、文件)
11
教學
1
班版基礎設定
版面編排設定
12
版主交接
完成版主交接後，你將成為該版的副版主，且無法再取得版主的權限。
版主與副版主的差異：
1. 版主可以指定誰擔任副版主。
2. 副版主不能刪除版主、不能做版主交接。
13
社群首頁
•為了滿足各類社群的需求，並讓不同樣式呈現不同資訊，
社群首頁可以非常彈性地在不同區塊安排內容
•甚至選單的呈現方式也可以依社群的性質做變更
14
套用版面樣式
南台校園社群提供幾種版面樣式，可直接套用即可置換新版型，適合簡單、
方便套用之使用者。
15
版面配置
社群首頁的版面是由不同的區塊配置而成，每個區塊都可以彈性地變更內容
位置或安排文字、影片、小遊戲等不同型態的資訊。
PS：版面配置在換版面樣式後會不見
16
版面配置-加入RSS
2.跳至「版面配置」頁面後在想要的「區塊」中點「新增
功能」。
1.點選「社群管理」
中的「版面配置」
3.選「訂閱RSS」後按「確定」
17
版面配置-加入RSS
4.區塊中會出現「訂閱RSS」，按「編輯」會跳出編輯視窗。
5.輸入標題，貼上RSS網址後按下確定。
6.完成後便可看到學校發佈的公告
18
選單管理
功能列表很彈性，可以透過連結來放置想呈現的資訊，例如: 編輯好的文件、
對外的連結等，也可以透過目錄，將相關的內容以子選單的方式呈現。
19
新增文件分類
•
•
建立文件分類，例如: 班務、筆記專區、好文分享等，成員在新增文件時可以
直接選擇分類。
此外，社群管理者可以設定分類的權限 (閱讀、寫入) 及顯示方式 ( 列表、全
文展開)。
20
新增文件與文章編輯
•
•
•
•
•
•
新增文件 *
3種不同的貼上功能 *
在文件中插入圖片
表格編輯 *
書籤與超連結
在文件中插入Flash
21
相簿
班聚、活動、比賽相片都可以輕鬆地上傳及編輯，同時每本相簿可以設
定不同的上傳及閱讀權限，方便版主和副版主進行管理。
照片輪播也是在此設定!
22
成果呈現方式
1.
新增一個分類，命名為成果。
2.
在成果分類中新增一個文件。
3.
輸入活動名稱、活動內容。
4.
將活動相關檔案用附件的方式上傳。
5.
活動照片上傳到相簿(不同活動可分不同相簿)。
6.
在文件中插入相簿的照片。
23
建立成果分類
2.跳出分類視窗後點選「新增」
1.點選「管理」
3.輸入分類名稱
4.點選「確定」
24
新增文件
6.進入分類頁面後點「新增」，會跳出新增文件視窗
7.輸入標題、內容
8.點選「附件」會跳出附件上傳視窗
5.點選「成果」分類
25
9.點選「上傳」
10.在瀏覽視窗中選擇要的檔案
11.點選「開啟舊檔」
在文件中加入附件
12.上傳完成後會出現「close」，
按一下「close」關閉視窗。
26
13.點小圖可以在文件中插入超連結
或是插入圖片、FLASH等等
14.已插入的超連結、FLASH
13.已上傳的檔案列表
15.點選「相簿」
27
16.選擇從哪一本相簿插入
從相簿插入圖片
17.選擇尺寸
18.點選要插入的圖片，可連續點選
，後點選的會在先點選的上面。
19.已插入的圖片
20.點選「確定」
28
完成
29
外掛元件套用
•
•
「外掛元件」可藉由社群首頁的「自由欄位」置入網站，或是插入至文件。
常見的外掛元件：
30
css 編輯設定
除了預設的樣式外，也可以透過 [社群管理 / 編輯樣式] 設計社群呈現的樣子
教學網頁
http://sites.powercam.cc/board.php?courseID=81&f=doc&folderID=352&cid=1901
31
Div標籤就像收納盒，裡面可以裝網頁內容。
大的收納盒裡面還可以裝小收納盒。
<div id=“sysbar”>
<div id=“login”>網頁內容</div>
<div id=“search”>網頁內容</div>
</div>
32
HTML程式碼
CSS程式碼
<div id= " sysbar " class= "title-blue" >
<div id= "login" >網頁內容</div>
<div id= "search" >網頁內容</div>
</div>
# → 唯一的 id 名稱
. → 可套用到多處的 class
{} → 裡面寫著css的設定項目與值
33
色碼表
(可搭配開發者工具使用)
http://rhinejo.myweb.hinet.net/home/color/csrf.html
34
IE8 開發者工具
協助你更方便的修改css
35
把握製作網站
4要點
36
1.豐富的內容
37
2.內容的編排創意
一批資料百種呈現
創意讓你與眾不同
38
3.注意個人資料的使用
個人資料之定義
(個人資料保護法修正草案第二條第一款)
•姓名
•出生年月日
•國民身分證統一編號
•護照號碼
•特徵
•指紋
•婚姻
•家庭
•教育
•職業
•病歷
•醫療
•基因
•性生活
•健康檢查
•犯罪前科
•聯絡方式
•財務情況
•社會活動
•其他得以直接或間接方式識別該個人之資料。
39
4.注意智慧財產權
•不提供非法軟體的下載
•不將他人的文章、照片隨便張貼或移花接木
•不將他人的流行歌曲或音樂拿來在部落格使用
40
網站範例
我不會美工…
我沒做過網站…
怎麼辦 ??
來看看別人怎麼做 ^-^
41
簡單的文字圖片
展現網站標題
http://lms.ctl.cyut.edu.tw/project/98201
42
GIF動畫圖片
創造動感
http://lms.ctl.cyut.edu.tw/board.php?courseID=7633
43
「套用版面樣式」+ 自製美工圖片
打造特色班版網站
http://lms.ctl.cyut.edu.tw/project/98207
44
「套用版面樣式」+ 自製美工圖片
打造特色班版網站
http://my2.tmu.edu.tw/project/across
45
運用自由欄位 + 照片
也能讓平凡樣版不一樣
http://my2.tmu.edu.tw/club/tmuo
46
套用外掛元件
創造超活潑的網站氣氛
http://my2.tmu.edu.tw/club/tmucsf
47
運用CSS做整體設計
令人驚艷的網站
http://my2.tmu.edu.tw/club/tmuwe
48
比賽規定項目
49
社團網站須具備的內容
(內容格式格式可自由發揮)
• 社團簡介：社團沿革、組織及特色介紹
• 幹部簡介：姓名、職稱、自我介紹、照片或頭像
• 社團校內、外競賽或評鑑榮譽榜：
個人或團隊參加校內、外競賽獲獎榮譽，可分類或是列年表。
例如：社團評鑑或競賽活動、全國性競賽得獎、服務活動感謝狀（如教育優先區、帶動
中小學、國際志工服務、寒暑假營隊）、志工等。
• 照片輪播：上傳相片到相簿，並完成輪播設定。
• 成果：活動計畫文件、照片、影片整理(稍後做示範)
• RSS：加入社團公告RSS
50
加分項目
• 社團網誌：社團活動記錄、社團團練心得、社團團聚出遊…。
• 討論區的使用率與成員互動成果。
• 活動訊息發佈率。
• 社團行事曆的建置。
51
比賽時程
• 製作：100/4/28 ~ 100/7/29
• 評選：100/8/8 ~ 100/8/19
• 公告競賽結果：100/9/10
• 頒獎：100學年第一學期開學典禮實施。
52
評分標準
• 網站內容豐富性佔40%。
• 美工版面設計、內容呈現創意度及使用便利性佔30%。
• 社群互動及社團參與佔30%。
53