Ê͹ Dreamweaver CS3 µÍ¹·Õè 06 : ¡ÒÃÊÃéÒ§ Libraries áÅÐ Server Side Includes

㹵͹¹Õé ¼ÁÍÂÒ¡¨Ðá¹Ð¹ÓÇÔ¸Õ·Õè¨ÐªèÇÂãËé¡Òà update ˹éÒµèÒ§æã¹àÇç»ä«´ì¢Í§¤Ø³ ·Óä´éÊдǡáÅÐÃÇ´àÃçÇ¢Öé¹ ¹Í¡à˹×ͨҡ¡ÒÃãªé template 㹡ÒÃÊÃéÒ§µé¹áººË¹éÒàÇç»áÅéÇ ¡ÒÃãªé Library áÅÐ Server Side Includes ¨ÐªèÇ»ÃÐËÂÑ´àÇÅÒãËé¤Ø³ã¹¡Òà update àÇç»ä«´ì àÃÒÁÒàÃÕ¹¡Ñ¹µèÍàŤÃѺ



¡ÒÃãªé Server Side Includes

àÇÅÒ·Õè¤Ø³Í͡ẺàÇç»ä«´ì ¤Ø³¤ÇÃÍ͡ẺãËéÁѹ§èÒÂ㹡ÒÃà»ÅÕè¹á»Å§ËÃ×Íà¾ÔèÁ¢éÍÁÙÅä´éÀÒÂËÅѧ µÑÇÍÂèÒ§àªè¹ àÇÅÒ·Õè¤Ø³·Ó˹éÒà¾ÔèÁà¢éÒä»ã¹àÇç»ä«´ì ¤Ø³¡ç¤§ÍÂÒ¡¨ÐãËéàÁ¹Ùã¹àÇç»ä«´ì¢Í§¤Ø³à¾ÔèÁµÒÁä»´éÇ à¾×èÍ·Õè¨ÐÊÒÁÒö link ä»Âѧ˹éÒãËÁè·Õèà¾ÔèÁà¢éÒÁÒ¹Ñé¹ä´é áÅéǤس¡çÍÒ¨¨ÐÍÂÒ¡à»ÅÕè¹á»Å§Êèǹ·ÕèàËÁ×͹¡Ñ¹ã¹áµèÅÐ˹éÒ àªè¹ Êèǹ·Õèà»ç¹ footer «Öè§â´ÂÊèǹãË­èáÅéǨÐàÍÒäÇéµÃ§ÅèÒ§ÊØ´¢Í§Ë¹éÒ à¾×èÍãÊè¢éÍÁÙÅà¡ÕèÂǡѺÅÔ¢ÊÔ·¸Ôì(copyright)¢Í§àÇç»ä«´ì¤Ø³ â´Â·ÕèäÁèµéͧä»à»ÅÕè¹Áѹ㹷ءæ˹éÒ·ÕèÁÕÊÔ觹ÕéÍÂÙè Áѹ¨Ö§à»ç¹¡ÒôշÕè¤Ø³¨ÐãªéÊÔ觷ÕèàÃÕ¡ÇèÒ server side include(ssi) ¢éʹբͧÁѹ¡ç¤×ÍàÁ×èͤسà»ÅÕè¹á»Å§ÊÔ觷Õè¤Ø³µÑé§à»ç¹ include ËÃ×͵ÑÇ·Õè¤Ø³à»ÅÕè¹á»Å§ä´é ¤Ø³¡çäÁè¨Óà»ç¹µéͧà¢éÒä»à»ÅÕè¹á»Å§·Ø¡æ˹éÒ·ÕèÁÕÊÔ觹Ñé¹ÍÂÙè Áѹ¨Ðà»ÅÕè¹á»Å§·Ø¡æ˹éÒ·ÕèãªéÊÔ觹Ñé¹ÃèÇÁ¡Ñ¹ãËé¤Ø³â´ÂÍѵâ¹ÁÑµÔ áÅéǤس¡çäÁè¨Óà»ç¹µéͧ upload ˹éÒ·Õèà»ÅÕè¹á»Å§àËÅèÒ¹Ñé¹·ÕèãªéµÑÇ include ä»Âѧ server ·Ø¡¤ÃÑ駷Õè¤Ø³·Ó¡ÒÃà»ÅÕè¹á»Å§ ¤Ø³á¤è upload µÑÇä¿Åì include ·Õè¤Ø³à»ÅÕè¹á»Å§µÑǹÑé¹µÑÇà´ÕÂÇ ä»Âѧ server

¢éÍ·Õè¤Ø³¤ÇÃÃÙé : ·Ø¡Ë¹éÒ html ·Õè¤Ø³ÊÃéÒ§¢Öé¹áÅÐãÊè Template ·ÕèÁÕµÑÇ include Å§ä» ¤Ø³µéͧµÑé§ extension ËÃ×͹ÒÁÊ¡ØÅà»ç¹ .shtml ËÃ×Í .shtm áÅÐ server ·Õè¤Ø³ãªéÊÓËÃѺà¡çº¢éÍÁÙÅàÇçºä«´ì¢Í§¤Ø³ ¨ÐµéͧÃͧÃѺ¡ÒÃãªé§Ò¹ server side include(ssi) ´éÇ ¡ÒÃÊ͹㹵͹¹Õé¨Ð¾Ù´¶Ö§ÇÔ¸Õ·ÓÍÂèÒ§¤ÃèÒÇæ à¾×èÍãËé¤Ø³à¢éÒã¨ÇÔ¸Õ·Ó§Ò¹ ssi áµè¡Ò÷Õè¤Ø³¨Ð·ÓãËéÁѹãªé§Ò¹ä´é¨ÃÔ§æã¹àÇç»ä«´ì¢Í§¤Ø³ ¤Ø³µéͧ¶ÒÁ¤Ó¶ÒÁàËÅèÒ¹Õé¡ÑººÃÔÉÑ··ÕèÃѺ Host àÇç»ä«´ì¢Í§¤Ø³

- server ·Õè¤Ø³ãªéÍÂÙèÊÒÁÒöãªé§Ò¹ server side include ä´éËÃ×Íà»ÅèÒ ?
- ¶éÒä´é ¨ÐµéͧàÍÒä¿Åì·Õèà»ç¹µÑÇ include ä»äÇéã¹â¿Åà´ÍÃìª×èÍÍÐäà áÅÐÍÂÙèã¹ directory ä˹
- ¨ÐµéͧµÑ駪×èͧ͢ extension ËÃ×͹ÒÁÊ¡ØŢͧä¿Åì·ÕèãÊèµÑÇ include ŧä»à»ç¹ÍÐäà (â´ÂÊèǹãË­èáÅéÇ ¨Ðà»ç¹ .shtml ËÃ×Í .shtm) áÅШеéͧµÑ駪×èÍ extension ËÃ×͹ÒÁÊ¡ØŢͧä¿Åì ssi à»ç¹ÍÐäà «Ö觵ÑǹÕé áÅéÇáµè¼ÙéãËéºÃÔ¡Òà server áµèÅзÕè ºÒ§·Õè¡çà»ç¹ .ssi .inc ËÃ×Í .txt

´Ñ§¹Ñé¹ ¤Ø³µéͧÃÙé¢éÍÁÙžǡ¹Õé¡è͹ ¨Ö§¨ÐÊÒÁÒöãªé§Ò¹ server side include ä´é

¡ÒÃãªé Server Side Include ¨ÐÁÕ»ÃÐ⪹ì áÅЪèÇ»ÃÐËÂÑ´àÇÅÒä´éÁÒ¡ ¶éҤسÊÃéÒ§ä¿Åì·ÕèÁÕµÑÇ include ¡ÑºÊÔè§àËÅèÒ¹Õé

- header ËÃ×͵ÑÇËÑÇ¢éÍàÃ×èͧ
- footer ËÃ×ÍÊèǹ·Õèà»ç¹ÊÔ觷ÕèÍÂÙè·Ò§ÅèÒ§ÊØ´¢Í§Ë¹éÒ ÊèǹãË­è¨ÐàÍÒäÇéãÊè¢éÍÁÙÅà¡ÕèÂÇÅÔ¢ÊÔ·¸ÔìËÃ×Í copyright ¢Í§àÇçºä«´ì
- àÁ¹ÙËÅÑ¡¢Í§àÇç»ä«´ì
- àÁ¹ÙÂèÍ¢ͧàÇç»ä«´ì



¡ÒÃÊÃéÒ§µÑÇ include ·Óä´éâ´Â

1. Copy Êèǹã´Êèǹ˹Öè§ã¹Ë¹éÒàÇç»·Õè¤Ø³µéͧ¡ÒèзÓà»ç¹µÑÇ include
2. ÊÃéҧ˹éÒ html ¢Öé¹ãËÁè â´Âä»·ÕèàÁ¹Ù File áÅéÇàÅ×Í¡ Blank Page µÃ§ªèͧ Page Type: àÅ×Í¡ HTML µÃ§ªèͧ Layout: àÅ×Í¡ áÅéǤÅÔ¡ Create ẺÃÙ»µÑÇÍÂèÒ§¢éÒ§ÅèÒ§






3. à¢éÒä»´Ù·Õè code html ¢Í§Ë¹éÒãËÁè·Õèà¾Ôè§ÊÃéÒ§¢Öé¹ â´Âä»·ÕèàÁ¹Ù View áÅéÇàÅ×Í¡ Code ËÃ×Í¡´»ØèÁ Code ´Ñ§ÃÙ»µÑÇÍÂèÒ§¢éÒ§ÅèÒ§ ËÅѧ¨Ò¡¹Ñ鹡çàÅ×Í¡ code ·Ñé§ËÁ´·Õè dreamweaver ÊÃéÒ§äÇéãËé áÅéÇ¡ç delete ÁѹÍÍ¡ä»





4. ¡ÅѺ价Õè design view â´Â¡´»ØèÁ Design ËÃ×Íä»·ÕèàÁ¹Ù View áÅéÇàÅ×Í¡ Design ËÅѧ¨Ò¡¹Ñ鹡ç paste ÊÔ觷Õè¤Ø³ä´é copy ÁÒ¨Ò¡¢éÍ·Õè 1 ŧä»

5. ¶éҤسÁÕÊÔ觷Õèà»ç¹ link áÅÐÃÙ»ÀÒ¾ ÍÂÙèã¹ÊÔ觷Õè¨Ðà»ç¹µÑÇ include ¤Ø³µéͧàªç¤ãËéá¹èã¨ÇèÒ·Ñé§ link áÅÐÃÙ»ÀÒ¾·Ñé§ËÁ´¢Í§ÊÔ觷ÕèÍÂÙèã¹¹Ñé¹ ¨ÐµÑé§à»ç¹áºº Relative to: Site Root äÁèãªèẺ Document ¤Ø³ÊÒÁÒöàªç¤ä´éâ´ÂàÅ×Í¡ÊÔ觷Õèãªéà»ç¹µÑÇ link ËÃ×ÍÃÙ»ÀÒ¾ áÅéǤÅÔ¡·ÕèÃÙ»â¿Åà´ÍÃìà¾×èÍà»Ô´ dialog box ¢Í§ Select File ¤Ø³ÊÒÁÒö´ÙµÑÇÍÂèÒ§ÇÔ¸Õ·Óä´é¨Ò¡ÃÙ»¢éÒ§ÅèÒ§ ÃÙ»ááà»ç¹áºº·ÕèÊÔ觷Õèãªé link à»ç¹µÑÇ˹ѧÊ×Í ÊèǹÃÙ»·ÕèÊͧà»ç¹áºº·ÕèÊÔ觷Õèãªé link à»ç¹ÃÙ»ÀÒ¾ «Ö觵ÑǹÕé¤Ø³µéͧµÑ駷Ñ駵çªèͧ Src áÅÐ Link ãËÁè ËÅѧ¨Ò¡·Õè dialog box ¢Í§ Select File à»Ô´¢Öé¹ÁÒáÅéÇ ¤Ø³¡çàÅ×Í¡µÃ§ªèͧ Relative to: à»ç¹ Site Root











¶éҤسäÁèä´éµÑé§ address ¢Í§ site ¤Ø³ã¹ªèͧ HTTP address: ¢Í§ dialog Site Definition Áѹ¡ç¨ÐÁÕ Dialog ¢Öé¹ÁÒàµ×͹ÇèÒ ¡Ò÷Õè¨Ð·ÓãËé link àËÅèÒ¹Õé·Ó§Ò¹ä´éÍÂèÒ§¶Ù¡µéͧ ã¹àÇÅÒ·Õèãªé§Ò¹¨ÃÔ§ ¤Ø³µéͧµÑ駪×èͧ͢·ÕèÍÂÙèàÇç»ä«´ì·Õè¶Ù¡µéͧ 㹪èͧ HTTP address: ¢Í§ dialog box ¢Í§ Site Definition «Ö觤س¡çÊÒÁÒö¡ÅѺ仵Ñé§ä´é â´Âä»·ÕèàÁ¹Ù Site áÅéÇàÅ×Í¡ Manage Sites ËÅѧ¨Ò¡¹Ñ鹡çàÅ×Í¡ site ·Õè¤Ø³¡ÓÅѧ·Ó§Ò¹ÍÂÙè¨Ò¡ list ·ÕèÁÕ áÅéÇ¡ç¤ÅÔ¡·Õè»ØèÁ Edit… ¨Ò¡¹Ñ鹡ç¾ÔÁ¾ì·ÕèÍÂÙè¢Í§àÇç»ä«´ì¤Ø³ 㹪èͧ HTTP address: ÍÂèÒ§àªè¹ //www.dw3thai.com ËÃ×Í·ÕèÍÂÙèÍ×è¹æ ·Õè¤Ø³ä´é¨´·ÐàºÕ¹àÍÒäÇé à¾ÃÒЩйÑ鹡Ò÷ӧҹâ´Âãªé Server Side Includes ¤Ø³¨Óà»ç¹µéͧŧ·ÐàºÕ¹ª×èÍàÇç»ä«´ì áÅÐÃÙé·ÕèÍÂÙè¢Í§àÇç»ä«´ì¤Ø³ÍÂÙè¡è͹áÅéÇ








6. ¢Ñ鹵͹ÊØ´·éÒ¤×ͤسµÑ駪×èÍä¿ÅìµÑǹÕé áÅéÇ save Áѹà»ç¹ä¿Åì .html ËÃ×Í .ssi ËÃ×͹ÒÁÊ¡ØÅÍ×è¹(¢Öé¹ÍÂÙè¡ÑºÇèÒºÃÔÉÑ··ÕèÃѺ host àÇç»ä«´ì¤Ø³¨ÐãËéµÑé§à»ç¹¹ÒÁÊ¡ØÅÍÐäÃ) äÇéã¹â¿Åà´ÍÃìãËÁè â´ÂµÑ駪×èÍâ¿Åà´ÍÃìÇèÒ includes ËÃ×ͪ×èÍÍ×è¹·ÕèºÃÔÉÑ··ÕèÃѺ host àÇç»ä«´ì¤Ø³¨ÐãËéµÑé§áÅÐãËéàÍÒä»äÇéã¹ directory ä˹



¡ÒÃãÊèÊÔ觷ÕèÍÂÙèã¹ä¿Åì include ŧä»ã¹ template

1. ¤ÅÔ¡ä»ã¹ºÃÔàdz·Õè¤Ø³µéͧ¡ÒÃãÊèÊÔ觷ÕèÍÂÙèã¹ä¿Åì include ã¹ template
2. ä»·ÕèàÁ¹Ù Insert áÅéÇàÅ×Í¡ Server Side Include ËÅѧ¨Ò¡¹Ñ鹤س¡ç Browse ËÒä¿Åì include ã¹â¿Åà´ÍÃì includes àÅ×Í¡Áѹ áÅéÇ¡ç¤ÅÔ¡ OK


µÍ¹¹Õé Êèǹ·Õèà»ç¹µÑÇ include ¡çä´éà¢éÒÁÒÍÂÙèã¹ template ¢Í§¤Ø³áÅéÇ ¶éҤسµéͧ¡ÒÃà»ÅÕè¹á»Å§ÊÔ觷ÕèÍÂÙèã¹ä¿Åì include ÀÒÂËÅѧ àªè¹ ã¹ä¿Åì include ÍÒ¨¨ÐÁÕàÁ¹Ù·Õè link ä»ËÒ˹éÒÍ×è¹ÍÂÙè 10 ˹éÒ áµè¤Ø³ä´éà¾ÔèÁ˹éÒ¢Öé¹ÍÕ¡ã¹ÀÒÂËÅѧÍÕ¡ 2 ˹éÒ ¤Ø³¡çá¤èä»à¾ÔèÁàÁ¹Ùã¹ä¿Åì·Õèà»ç¹µÑÇ include à»ç¹ 12 ˹éÒ ËÅѧ¨Ò¡¹Ñé¹ Ë¹éÒàÇç»·Õè link ¡Ñº template µÑǹÕé¡çÁÕàÁ¹Ù 12 ˹éÒàËÁ×͹¡Ñ¹ËÁ´ áÅФس¡çá¤è upload ä¿Åì·Õèà»ç¹µÑÇ include ·Õè¤Ø³à»ÅÕè¹á»Å§Áѹ价Õè server µÑÇà´ÕÂÇ ¡ç¨ÐàË繡ÒÃà»ÅÕè¹á»Å§¡ÑºË¹éÒµèÒ§æ·Õèãªé template µÑǹÕé ¤Ø³äÁè¨Óà»ç¹µéͧ upload ˹éÒ·Õèãªé template µÑǹÕé¢Öé¹ä»ãËÁè «Ö觡çªèÇ»ÃÐËÂÑ´àÇÅҤسä´éÁÒ¡



¡ÒÃãªé Library Items ã¹ Dreamweaver

¶éҤسäÁèµéͧ¡Ò÷Õè¨ÐÊÃéÒ§ä¿Åì·ÕèÁÕ¹ÒÁÊ¡ØÅ .shtml ËÃ×Í server ·Õè¤Ø³ãªéºÃÔ¡ÒÃÍÂÙèäÁèÃͧÃѺ¡ÒÃãªé§Ò¹ server side includes ¤Ø³¡çÊÒÁÒöãªé Library items ã¹ Dreamweaver ÊÓËÃѺà¡çºÊèǹ·ÕèãªéºèÍÂæã¹ËÅÒÂæ˹éҢͧàÇç» à¾×èÍãËé§èÒµèÍ¡Òà update ˹éÒàËÅèÒ¹Ñé¹ àªè¹ Êèǹ·Õèà»ç¹àÁ¹Ù àÁ¹ÙÂèÍ ¡ÒÃà»ÅÕè¹á»Å§ÊÔè§àËÅèÒ¹Õé·ÕèÍÂÙèã¹ Library ¡ç¨Ð update ¢éÍÁÙÅã¹áµèÅÐ˹éÒ·Õèãªé Library µÑǹÑé¹ áµè¤Ø³µéͧ upload áµèÅÐ˹éÒ·Õèà»ÅÕè¹á»Å§ä»Âѧ server ãËÁè·Ñé§ËÁ´¶Ö§¨ÐàË繼ŷÕèà»ÅÕè¹á»Å§


¡ÒÃÊÃéÒ§ Library item ·Óä´éâ´Â :

1. àÅ×Í¡ áÅéÇ copy Êèǹ·Õè¤Ø³ÍÂÒ¡·Óà»ç¹ Library items ã¹ template
2. ä»·ÕèàÁ¹Ù File àÅ×Í¡ New áÅéÇ¡ç Blank Page áÅéÇ¡ç Library item áÅéǤÅÔ¡ Create
3. ä¿Åì Library ¡çà»Ô´¢Öé¹ÁÒ ¤Ø³¡ç paste ÊÔ觷Õè¤Ø³ copy ÁÒ ä»ã¹¹Ñé¹
4. ¤Ø³¡ç save áÅéÇ¡çµÑ駪×èÍ·ÕèàËÁÒÐÊÁãËé¡Ñºä¿Åì


ËÅѧ¨Ò¡·Õè¤Ø³ÊÃéÒ§ Library item áÅéÇ ¤Ø³¡çÊÒÁÒö insert ËÃ×ÍàÍÒÁѹä»ãÊèã¹ template ËÃ×Íã¹Ë¹éÒàÇ绵èÒ§æä´é â´ÂãªéÇÔ¸Õ¢éÒ§ÅèÒ§¹Õé

1. ä»·ÕèàÁ¹Ù Window áÅéÇàÅ×Í¡ Assets
2. ¤ÅÔ¡·Õèäͤ͹¢Í§ Library(´ÙÃÙ»¢éÒ§ÅèÒ§)ã¹ panel Assets
3. àÅ×Í¡ª×èͧ͢ library ·Õè¤Ø³µéͧ¡ÒÃãªé
4. ¡´»ØèÁ Insert ·ÕèÍÂÙè¢éÒ§ÅèÒ§¢Í§ panel ¹Õé





µÍ¹µèÍä»àÃҨоٴ¶Ö§àÃ×èͧ¡ÒáÓ˹´ Editable Regions ã¹ Template


ÊÓËÃѺ¼Ùé·Õèµéͧ¡ÒèÐàÃÕ¹ÃÙéâ»Ãá¡ÃÁ Dreamweaver CS3 ã¹áºº·ÕèÊ͹à»ç¹ÇÕ´ÕâÍ ¤Ø³ÊÒÁÒö仴ÙÃÒÂÅÐàÍÕ´áÅÐÇÕ´Õâ͵ÑÇÍÂèÒ§ ä´é·ÕèàÇç»ä«´ì¹Õé //www.dw3thai.com «Ö觨ÐÁÕ´ÕÇÕ´ÕÊ͹¡ÒÃãªé§Ò¹â»Ãá¡ÃÁ â´ÂÅÔ¹´Ò´Í·¤ÍÁ à»ç¹àÇÍÃìªÑè¹ÀÒÉÒä·Â (¾Ò¡Éìä·Â) ´éǤÇÒÁÂÒÇ¡ÇèÒ 10 ªÑèÇâÁ§ ã¹ÃÒ¤Òà¾Õ§ 150 ºÒ· (ÃÇÁ¤èÒÊ觷ҧä»ÃɳÕÂìŧ·ÐàºÕ¹) áÅе͹¹Õé¡çÁÕ·Ò§àÅ×Í¡ÍÕ¡·Ò§ã¹¡ÒêÓÃÐà§Ô¹ â´ÂãªéºÃÔ¡ÒÃàÃÕ¡à¡çºà§Ô¹»ÅÒ·ҧ¨Ò¡¡ÃÁä»ÃɳÕÂì «Ö觡çªèÇÂãËé¤Ø³ÊдǡáÅÐÁÑè¹ã¨ÂÔ觢Öé¹ ¤Ø³ÊÒÁÒöà¢éÒä»´ÙÃÒÂÅÐàÍÕ´ä´é¨Ò¡ link ¹Õé¤ÃѺ

Create Date : 20 ¸Ñ¹ÇÒ¤Á 2550		5 comments
Last Update : 20 ¸Ñ¹ÇÒ¤Á 2550 10:06:27 ¹.
Counter : 2213 Pageviews.
Share Tweet