2008年1月30日
2008年1月26日
設計報名問卷的畫面
在上一篇的文章裡面,我們已經先為問卷設計好我們要的欄位,這些欄位也就是我們要蒐集的資料,下一步驟我們要進行畫面的設計。如果使用過論壇的人應該對於BBCode很熟悉,我們這裡使用的就是這種概念,要叫他ISUCode嗎?大概只有我們自己看得懂囉。
1. 設計報名或者填寫畫面
點選填寫畫面時候,可以看到畫面分成兩個部份。一個是網頁編輯器,畫面拉到下方則是系統已經替你預先填好的「自由欄位」
操作的方法就是將自由欄位內的文字貼到編輯區,再依照需要排版報名畫面可以使用報名系統了。將自由欄位內的文字貼到編輯區就像以下的畫面。
完成後他所呈現的報名表格式就會以線上報名表的方式呈現,不過畫面設計就還是要靠一些美工技巧囉。
2.設計成功畫面
設計成功畫面的功能是用在使用者完成資料填寫之後出現的成功畫面。但在成功畫面的地方多了兩個自由欄位分別是[報名序號]與[修改密碼]。這兩個欄位是在使用者填寫完資料之後,系統自動產生的序號。
報名序號:系統自動產生,給系統辨識用的獨立代碼,也就是日後使用者需要返回登錄資料時候的登錄帳號。
修改密碼:系統自動產生,使用者返回系統時候需要的密碼。由系統自動產生不重複的獨立密碼。 如果要讓使用者可以查詢密碼的話,則在自由欄位設計時候務必記得設計email欄位讓使用者填寫,系統才能夠寄送回函。
完成成功畫面之後,使用者填寫完資料之後就可以看到下圖的成功畫面。
建立學術研討會論文投稿系統
現在網頁平台已經有了支援「全國力學會議」的執行研討會的能力。如何使用網頁平台製作具有投稿功能的研討會網站?要製作學術研討會網站我們會針對報名,問卷投稿等流程分別使用問卷系統。
一般來說研討會網站會需要以下的流程:
報名投稿 --> 摘要上傳 --> 論文定稿上傳 --> 出席研討會報名
而剛好網頁平台的報名與問卷系統就可以針對流程加以修改。由於平台內的報名之間目前還沒有辦法設定關聯性,也就是摘要上傳之後,沒有辦法同一個人在另外一份問卷(論文定稿上傳)的部份有關連性。因此我們把摘要上傳與定稿上傳設定在同一份問卷裡面。
首先先切換到二級單位的角色中有個「報名與問卷」的功能。在報名與問卷的功能內啟用建立問卷。
在畫面裡面要設定好問卷標題之後就可以開始使用了。在這個畫面同樣的提供了三個內部網址,這三個內部網址就是讓您連結到網頁上的任何位置之用。問卷網址提供使用者填寫報名的位置,如果您有開放讓使用者修改資料的話就可以使用修改問卷。
由於在emap2008國際研討會裡面,我們期望使用者用同一份問卷系統來完成摘要上傳與定稿上傳,因此要開啟可以修改問卷的功能。
接著設定報名系統要收集的資料欄位,在此建議製作欄位的時候儘量思考讓使用者填寫愈少的資料愈好,一方面是為了系統負載考量,其次是經驗顯示讓使用者填寫的資料愈多,出錯的機會就會更大。
點選「自由欄位設定」之後就可以新增需要的欄位。在自由欄位中我們設計幾個關鍵需要的欄位。分別是姓名、email、意見、摘要、全文等五種欄位。在五種欄位中特地選用不同的欄位類型。
a. 選定姓名欄位為文字格式,並指定為摘要欄位,主要作為日後顯示資料的時候的關鍵欄位。收集問卷的格式裡面務必要保留一筆摘要欄位。
b. email 欄位選定為email格式,作用在於填寫者填入正確email時候系統會發送確認信件給該用戶,而該用戶收到信件的格式則在「成功畫面」設定。此欄位也可作為使用者修改表單的時候「取得密碼」的email欄位。
c. 分別選用 fileabs, filefull 兩個欄位作為檔案上傳欄位。可以讓使用者在第一次摘要上傳的時候先上傳摘要檔案。並在第二次上傳的時候在修改報名表成為全文檔案。
...請繼續閱讀報名與問卷的畫面設計...
建立不同顏色的最新消息
發佈最新消息的時候若想呈現不同的顏色,或者加上HOT! NEW!等圖樣的時候該怎麼作?請先參考應日系的作法。
1. 作法在發佈最新消息的時候加上<span>的語法。例如
<span class="hot_news2_img">消息標題</span>
其中 ajnewsimg1 就是用來設定顏色與圖片的icon.做好之後就像下圖的呈現方式。
2. 接著我們要先把檔案上傳到網頁平台的網頁空間位置去,再把圖片設定到CSS的位置。點選「網頁空間」之後上傳圖片。並取得圖片的內部網址。
3. 複製完成後請到網站的參數設定 > CSS樣式設定為 剛才編輯的最新消息加上標示。請加上以下的語法
.hot_news2_img{
background: url(../upload/84203/icon/new03.gif) no-repeat;
padding-left: 2em;
}
其中 hot_news2_img 就是步驟1裡面設定的class內所包起來的標籤名稱,最新消息可以在此用不同的樣式設定畫面呈現的方式。而剛才複製起來的站內網址 就是 url( )括號內所填入的圖片網址。
如果想要為最新消息放上不同的顏色的話,只要把語法加上color的屬性為:
.hot_news2_img{
background: url(../upload/84203/icon/new03.gif) no-repeat;
padding-left: 2em;
color: blue;
}
這樣就可以呈現不同的最新消息顏色。如果要作更多的變化,則可以開啟frongpage或者 dreamweaver等工具尋找CSS的語法就可以再做出更多的變化。
最新消息標題變化參考範例