คู่มือการใช้งานโปรแกรม drupal 7...

โครงการพฒันาความรู้ทางคอมพิวเตอรแ์ก่บุคลากรคณะฯ ประจ าปี 2557

คู่มือการใช้งานโปรแกรม Drupal 7 ขัน้สงู

จดัท าโดย

งานเทคโนโลยีสารสนเทศ คณะเวชศาสตรเ์ขตร้อน

มหาวิทยาลยัมหิดล

คู่มอืการใชง้านโปรแกรม Drupal 7 ขัน้สงู

จดัท าโดยงานเทคโนโลยสีารสนเทศ คณะเวชศาสตรเ์ขตรอ้น มหาวทิยาลยัมหดิล หน้า 1

การเพ่ิม Publication และการเพ่ิมปี

1. หน้าแกไ้ข Publication

2. น าเมา้มาไวท้ีห่น้าปี 2013 และกด Enter เพื่อใหม้พีืน้ทีว่่างส าหรบัการวาง Publication ของปี 2014



3. ท าการ Copy สว่นของปี 2013 และน าเมา้มาวางไวต้รงพืน้ทีว่่าง และท าการวาง จะไดข้อ้มลูปี 2013 มา 2 ชุด

4. ท าการแกไ้ขเลขจาก 2013 เป็น 2014 และดบัเบิล้คลกิทีธ่งสแีดงหลงั 2014

5. ท าการเปลีย่นจาก 2013 เป็น 2014 และกดตกลง

6. การเปลีย่นเลขปีในเมนูลสิจาก 2013 เป็น 2014



7. กดปุม่ ดรูหสั HTML

8. ท าการแกไ้ขโคด้ จาก 2013 เป็น 2014

<option selected="selected" value="?q=publication#2014">2014</option>

และเพิม่โคด้ ดา้นล่างนี้ไปไวห้ลงัโคด้ดา้นบน

<option value="?q=publication#2013">2013</option>

รปูการแกไ้ขและเพิม่โคด้

กด Save เพื่อบนัทกึขอ้มลู



9. จะได ้Publication ปี 2014

การสรา้ง Gallery ในเวบ็ไซต ์

1. สรา้งหน้าใหม ่

2. ใสช่ื่อ Title และเลอืก Text format เป็น PHP code และกดปุม่ ดรูหสั HTML

3. น าสคปิดา้นล่าง

 <script type="text/javascript" src="http://www.tm.mahidol.ac.th/gallery/script_gallery/highslide-with-gallery.js"></script> <link rel="stylesheet" type="text/css" href=" http://www.tm.mahidol.ac.th /gallery/script_gallery/highslide.css" /> <script type="text/javascript"> hs.graphicsDir = 'http://www.tm.mahidol.ac.th/gallery/graphics/'; hs.align = 'center'; hs.transitions = ['expand', 'crossfade']; hs.outlineType = 'rounded-white';

hs.fadeInOut = true; //hs.dimmingOpacity = 0.75; // Add the controlbar hs.addSlideshow({ //slideshowGroup: 'group1', interval: 5000, repeat: false, useControls: true, fixedControls: 'fit', overlayOptions: { opacity: .75, position: 'bottom center', hideOnMouseOut: true } }); </script>



4. กลบัสูห่น้าปกต ิโดยคลิก๊ปุม่ ดรูหสั HTML ท าการเพิม่รปูภาพทีต่อ้งการ (ขอ้แนะน า ควรปรบัขนาดของรปู

ใหม้คีวามเหมาะสมกบัเวบ็ไซต)์



5. เลอืกรปูทีต่อ้งการจากทีม่อียูใ่น File name หรอืเพิม่รปูใหม่โดยคลิก๊ปุม่ Upload

6. เมื่อไดร้ปูทีต่อ้งการ ใหท้ าการปรบัขนาดของรปู ใหพ้อเหมาะกบัหน้าเวบ็ไซต ์โดยตวัอย่างไดเ้ปลีย่นขนาด

ของความสงูของรปูเป็น 95 ทุกรปู กดปุม่ตกลง



7. เพิม่รปูทีต่อ้งการทัง้หมด และปรบัความสงูตามความเหมาะสม

8. คลิก๊ปุม่ ดรูหสั HTML เพื่อท าการคดัลอกโคด้ทัง้หมด

9. น าโคด้ทีค่ดัลอกมาไวใ้น Notepad โดย คอืรปูภาพ โคด้สว่นสสีม้<p><script type="text/javascript" src="http://www.tm.mahidol.ac.th/gallery/script_gallery/highslide-with-

gallery.js"></script></p>

<link href=" http://www.tm.mahidol.ac.th /gallery/script_gallery/highslide.css" rel="stylesheet" type="text/css" /><script

type="text/javascript">

hs.graphicsDir = 'http://www.tm.mahidol.ac.th/gallery/graphics/';

hs.align = 'center';

hs.transitions = ['expand', 'crossfade'];

hs.outlineType = 'rounded-white';

hs.fadeInOut = true;

//hs.dimmingOpacity = 0.75;

// Add the controlbar

hs.addSlideshow({

//slideshowGroup: 'group1',

interval: 5000,

repeat: false,

useControls: true,

fixedControls: 'fit',

overlayOptions: {

opacity: .75,

position: 'bottom center',

hideOnMouseOut: true

}

});

</script>

<p><img alt="" src="/social-environment/sites/default/files/uploads/1/i-tmse-research-activities-001.jpg" style="width: 150px;

height: 95px;" /> <img alt="" src="/social-environment/sites/default/files/uploads/1/i-tmse-research-activities-

005.jpg" style="width: 151px; height: 95px;" /> <img alt="" src="/social-environment/sites/default/files/uploads/1/i-

tmse-research-activities-007.jpg" style="width: 151px; height: 95px;" /> <img alt="" src="/social-

environment/sites/default/files/uploads/1/i-tmse-research-activities-006.jpg" style="width: 151px; height: 95px;" /></p>

10. ท าการจดัเรยีงโคด้ในสว่นสสีม้ใหม่ เพื่องา่ยต่อการเพิม่โคด้ ตามดา้นล่าง

<p><img alt="" src="/social-environment/sites/default/files/uploads/1/i-tmse-research-activities-001.jpg" style="width:

150px; height: 95px;" />

<img alt="" src="/social-environment/sites/default/files/uploads/1/i-tmse-research-activities-005.jpg" style="width:




151px; height: 95px;" /></p>

11. เพิม่โคด้สว่น สฟ้ีา ไวห้น้าโคด้รปูภาพทลีะรปูของการลิง้เพื่อขยายรปู

<a class="highslide" href="/social-environment/sites/default/files/uploads/1/i-tmse-research-activities-001.jpg"

onclick="return hs.expand(this)"><img alt="" src="/social-environment/sites/default/files/uploads/1/i-tmse-research-

</a> activities-001.jpg" style="width: 150px; height: 95px;" />

12. เพิม่โคด้การลิง้รปูและเปลีย่นชื่อทีล่ิง้ตามรปูทัง้หมด 4 รปู



</a>activities-001.jpg" style="width: 150px; height: 95px;" />









</a> activities-006.jpg" style="width: 151px; height: 95px;" />



13. น าโคด้ทีท่ าการเพิม่ลิง้เรยีบรอ้ยแลว้ไปวางไวใ้นหน้าเวบ็ สว่นของ ดรูหสั HTML หลงั Script End Gallery

และกดปุม่ Save

14. ท าการตรวจสอบ



การท ารปูให้เปล่ียนหมุนไปเรือ่ยๆ

1. สรา้งหน้าใหม ่

2. ใสช่ื่อ Title และเลอืก Text format เป็น PHP code

3. ท าการเพิม่รปูทีต่อ้งการ ส าหรบัการดชูื่อพาธของรปูนัน้ๆ



4. ท าการคดัลอก ทีอ่ยู่อา้งองิ URL น าไปวางไวท้ี ่Notepad ก่อน และกดปุม่ยกเลกิ ท าแบบนี้ตามจ านวนรปูที่

ตอ้งการ

5. ทีอ่ยู่ของรปูทีเ่ราตอ้งการมาใสไ่วใ้น Notepad จ านวน 3 รปู

6. แกโ้คด้ด่านล่างนี้ ใสส่ว่นของ พาธรปู ตรงสว่นโคด้สสีม้ จาก ตย. ท ารปูหมุน 3 รปู ใหค้ดัลอกพาธทลีะรปูมา

วางในสว่นโคด้สสีม้ และน าโคด้ทีไ่ดไ้ปวางไวใ้นสว่นของ HTML

<p> </p>

<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type" />

<title></title>

<script type="text/javascript">// <![CDATA[



var fadeimages=new Array()

fadeimages[0]=[" ", "", ""] /social-environment/sites/default/files/uploads/1/i-tmse-mollusk-museum-001.jpg

fadeimages[1]=[" ", "", ""] /social-environment/sites/default/files/uploads/1/i-tmse-lab-001.jpg

fadeimages[2]=[" ", "", ""] /social-environment/sites/default/files/uploads/1/i-tmse-research-activities-002.jpg

var fadebgcolor="white"

var fadearray=new Array()

var fadeclear=new Array()

var dom=(document.getElementById)

var iebrowser=document.all

function fadeshow(theimages, fadewidth, fadeheight, borderwidth, delay, pause, displayorder){

this.pausecheck=pause

this.mouseovercheck=0

this.delay=delay

this.degree=10

this.curimageindex=0

this.nextimageindex=1

fadearray[fadearray.length]=this

this.slideshowid=fadearray.length-1

this.canvasbase="canvas"+this.slideshowid

this.curcanvas=this.canvasbase+"_0"

if (typeof displayorder!="undefined")

theimages.sort(function() {return 0.5 - Math.random();})

this.theimages=theimages



this.imageborder=parseInt(borderwidth)

this.postimages=new Array()

for (p=0;p<theimages.length;p++){

this.postimages[p]=new Image()

this.postimages[p].src=theimages[p][0]

}

var fadewidth=fadewidth+this.imageborder*2

var fadeheight=fadeheight+this.imageborder*2

if (iebrowser&&dom||dom)

document.write('<div id="master'+this.slideshowid+'"

style="position:relative;width:'+fadewidth+'px;height:'+fadeheight+'px;overflow:hidden;"><div

id="'+this.canvasbase+'_0"

style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransfor

m.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-

color:'+fadebgcolor+'"></div><div id="'+this.canvasbase+'_1"

style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransfor

m.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-

color:'+fadebgcolor+'"></div></div>')

else

document.write('<div><img name="defaultslide'+this.slideshowid+'" src="'+this.postimages[0].src+'"></div>')

if (iebrowser&&dom||dom)

this.startit()

else{

this.curimageindex++

setInterval("fadearray["+this.slideshowid+"].rotateimage()", this.delay)

}



}

function fadepic(obj){

if (obj.degree<100){

obj.degree+=10

if (obj.tempobj.filters&&obj.tempobj.filters[0]){

if (typeof obj.tempobj.filters[0].opacity=="number")

obj.tempobj.filters[0].opacity=obj.degree

else //else if IE5.5-

obj.tempobj.style.filter="alpha(opacity="+obj.degree+")"

}

else if (obj.tempobj.style.MozOpacity)

obj.tempobj.style.MozOpacity=obj.degree/101

else if (obj.tempobj.style.KhtmlOpacity)

obj.tempobj.style.KhtmlOpacity=obj.degree/100

else if (obj.tempobj.style.opacity&&!obj.tempobj.filters)

obj.tempobj.style.opacity=obj.degree/101

}

else{

clearInterval(fadeclear[obj.slideshowid])

obj.nextcanvas=(obj.curcanvas==obj.canvasbase+"_0")? obj.canvasbase+"_0" : obj.canvasbase+"_1"

obj.tempobj=iebrowser? iebrowser[obj.nextcanvas] : document.getElementById(obj.nextcanvas)

obj.populateslide(obj.tempobj, obj.nextimageindex)

obj.nextimageindex=(obj.nextimageindex<obj.postimages.length-1)? obj.nextimageindex+1 : 0



setTimeout("fadearray["+obj.slideshowid+"].rotateimage()", obj.delay)

}

}

fadeshow.prototype.populateslide=function(picobj, picindex){

var slideHTML=""

if (this.theimages[picindex][1]!="")

slideHTML='<a href="'+this.theimages[picindex][1]+'" target="'+this.theimages[picindex][2]+'">'

slideHTML+='<img src="'+this.postimages[picindex].src+'" border="'+this.imageborder+'px">'

if (this.theimages[picindex][1]!="")

slideHTML+='</a>'

picobj.innerHTML=slideHTML

}

fadeshow.prototype.rotateimage=function(){

if (this.pausecheck==1)

var cacheobj=this

if (this.mouseovercheck==1)

setTimeout(function(){cacheobj.rotateimage()}, 100)

else if (iebrowser&&dom||dom){

this.resetit()

var crossobj=this.tempobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)

crossobj.style.zIndex++

fadeclear[this.slideshowid]=setInterval("fadepic(fadearray["+this.slideshowid+"])",50)

this.curcanvas=(this.curcanvas==this.canvasbase+"_0")? this.canvasbase+"_1" : this.canvasbase+"_0"



}

else{

var ns4imgobj=document.images['defaultslide'+this.slideshowid]

ns4imgobj.src=this.postimages[this.curimageindex].src

}

this.curimageindex=(this.curimageindex<this.postimages.length-1)? this.curimageindex+1 : 0

}

fadeshow.prototype.resetit=function(){

this.degree=10

var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)

if (crossobj.filters&&crossobj.filters[0]){

if (typeof crossobj.filters[0].opacity=="number")

crossobj.filters(0).opacity=this.degree

else

crossobj.style.filter="alpha(opacity="+this.degree+")"

}

else if (crossobj.style.MozOpacity)

crossobj.style.MozOpacity=this.degree/101

else if (crossobj.style.KhtmlOpacity)

crossobj.style.KhtmlOpacity=this.degree/100

else if (crossobj.style.opacity&&!crossobj.filters)

crossobj.style.opacity=this.degree/101

}



fadeshow.prototype.startit=function(){

var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)

this.populateslide(crossobj, this.curimageindex)

if (this.pausecheck==1){

var cacheobj=this

var crossobjcontainer=iebrowser? iebrowser["master"+this.slideshowid] :

document.getElementById("master"+this.slideshowid)

crossobjcontainer.onmouseover=function(){cacheobj.mouseovercheck=1}

crossobjcontainer.onmouseout=function(){cacheobj.mouseovercheck=0}

}

this.rotateimage()

}// ]]></script><script type="text/javascript">// <![CDATA[

new fadeshow(fadeimages, 523, 273, 0, 3000, 0)

// ]]></script>

<p> </p>

7. น าโคด้มาวางในสว่นของ HTML และกดปุม่ Save



8. สามารถปรบัขนาดของบล๊อกทีแ่สดงรปูได ้โดยใหด้สูว่นด่านล่างสดุของโคด้ 523 ความกวา้ง, 273 ความสงู,

3000 ช่วงเวลาในการเปลีย่นรปู

new fadeshow(fadeimages, 523, 273, 0, 3000, 0)

9. ผลลพัท ์รปูจะมกีารเปลีย่นไปเลื่อยๆ ตามจ านวนของรปู

คู่มือการใช้งานโปรแกรม drupal 7...

Documents