Error message

Notice: Undefined offset: 1 in counter_get_browser() (line 70 of /volume1/librarythings/www/sites/all/modules/counter/counter.lib.inc).

輔仁大學學輔中心「輔大生命之美.守護生命網 」網站

Categories : 

網站名稱:輔大生命之美 ‧ 守護生命網

網址:http://life.scc.fju.edu.tw

建置時間:2014年2月至7月

上線日期:2014年7月9日


今年年初的時候(2014),陳主任說學輔中心有一個新網頁要製作,問我有沒有興趣幫忙,我當然義不容辭的接下了這個工作,因為這都是在累積自己的工作經驗,以及增加網站建置的成品。

這次製作的網站主題是「輔大生命之美.守護生命網」,是學輔中心為了防護自我傷害,而建立的一個網站,希望同學們可以享受生命之美,珍惜生命。

網站需要的功能包含:活動公告、照片影片上傳、內容即時編修等,但網站的首頁連結想要有當滑鼠滑過時,可以呈現說明文字等,因此這次的網站架設,決定將首頁另外製作,另外內容的部分再搭配CMS的功能,來幫助進行管理。


首頁的照片輪播,使用了jQuery Cycle的外掛功能

首先,需下載jQuery Cycle Plugin 與 jQuery

可以自己選擇要下載哪個版本的Plugin,接著在<head></head>之間,加入下面兩句語法

<script type="text/javascript" src="./js/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="./js/jquery.cycle.all.js"></script>

接著,在<body></body>之間,寫上網頁內容

<div id="slider">
<img src="img/slide/1.JPG" width="525" height="350" border="0" alt="slide" />
<img src="img/slide/2.JPG" width="525" height="350" border="0" alt="slide" />
<img src="img/slide/3.JPG" width="525" height="350" border="0" alt="slide" />
</div>

CSS的部分,則是要如下面語法這樣寫,當然可以加入其他的變化,如background, border, margin, padding ...等

#slider {
width: 525px;
height: 350px;
overflow: hidden;
position: relative;
}

#slider img{
width: 525px;
height: 350px;
display: block;
}

再來,依據使用的效果,在</head>標籤之前,加上下列語法

<script type="text/javascript">
 jQuery(document).ready(function($) {   
$('#slider').cycle({   
     fx: 'fade', //特效名稱
     speed: 7500,
     timeout: 7200,
     random: 1
         });
 }); </script>

如此,照片就會開始以fade的型式,開始輪播了!

更詳細的說明,可以參考香腸部落格中的介紹jQuery Cycle Plugin 網頁圖片輪播特效


 Animate CSS

網站的名稱圖檔,搭配了animate css的特效,讓網站可以不使用flash也能有一些簡單的特效

網站網址:http://daneden.github.io/animate.css

詳細的說明,可以參考另一篇介紹文章


 Worrpress

網站的整體架構以Html搭配CSS來呈現,

而內容細節的部分,則是搭配Wordpress架站工具,

每個頁面進入資料庫撈取所建立的資料。

以Wordpress作為內容管理系統,協助未來更新網站內容與維護上更為方便


小結

每一次在製作網站時,除了是對以前使用過的一些功能加以複習與修正外,也都會學到一些新的功能或新發現,像是這次就新發現了animate css。最後,就來看一下網站的全貌吧。