Design Template Joomla 1.5

Page 1

Joomla! 1.5 Template Design By joomla thai club

จัดทําโดย joomlathaiclub.com

Joomla! 1.5 Template Design By joomla thai club สั่งสมประสบการณมาพอสมควร joomla แบบเบสิกคงจะไดกันหมดแลว คราวนี้มาพูดถึงเรื่องการออกแบบ joomla 1.5 template กันดีกวา ความจริงผมก็ไมไดเกงกาจอะไรนักหนานะครับเพียงแตไดใชงาน joomla บอย มาก ๆ ตั้งแตกอนเริ่มที่จะมาเปน joomla ดวยซ้ํา เลยมีความชํานาญสักหนอย แตเรื่องเขียนโคดโปรแกรม ของผมนี่คงจะไมคอย ไดเรื่องเทาไหร อาศัยแบบงู ๆ ปลา ๆ ไปเรื่อย ๆ จะใหเขียนโคดแบบผูท ี่เขาเรียนมาโดยตรงคงไมไดครับ ผมเองก็ไมได เรียนมาโดยตรงทางนี้ซะดวย อาศัยศึกษาดวยตนเอง มีเวลาวางเมื่อไหรก็จะมานั่งศึกษากัน สวนใหญก็จะไมคอยวางมานั่ง ศึกษาการเขียนโปรแกรมอยางจริงจัง เพราะตองทํางานหาเงินดวยอะ พอดีไดหนังสือมาเลมหนึ่ง เปนของตางประเทศ ฝรั่งเขียนเรื่องการออกแบบ joomla 1.5 template design ก็เลยนั่งอาน ๆ ก็ ออ ๆ เออ มันเปนอยางนี้ ตองเอาตรงนี้มาใส ตรงนั้น เอาตรงนั้นไปใสจะเปนอยางนี้ อืม ๆ พอได ๆ ก็เลยเอามาเลาสูกันฟง เอาละโมมาก็มาก มาดูกอนควรจะมีพื้นฐาน อะไรบางสําหรับการที่จะออกแบบ joomla 1.5 template ไดนี่ ไมตองเอาเกงนะครับ (หรือจะเกงก็ไดไมวากัน) อันที่จริง จะไดคยุ กันรูเรื่องไงครับวาที่ผมสื่อไปนี้มันคืออะไร พื้นฐานที่ควรมี 1.ความรูพื้นฐานดาน HTML, XHTML 2.ความรูพื้นฐานดาน php 3.ความรูพื้นฐานดาน CSS แนะนําเว็บศึกษาเรื่อง css ครับ http://www.divland.com/blog/ หวังเปนอยางยิ่งวา เอกสารฉบับนี้จะเปนประโยชนแกผูที่สนใจศึกษาการสราง joomla template ผูจัดทํามิไดหวัง ผลทางการคา แตอยางใด และไมสงวนลิขสิทธิ์ สําหรับขอความ รูปประกอบ ในทุกสวนของเอกสารฉบับนี้ หากผูใ ด ตองการนําไปเผยแพรตอ ก็สามารถทําได แตขอใหระบุแหลงที่มาของเอกสารนี้

เริ่มตน พื้นฐานที่ควรมี 1.ความรูพื้นฐานดาน HTML, XHTML 2.ความรูพื้นฐานดาน php 3.ความรูพื้นฐานดาน CSS แนะนําเว็บศึกษาเรื่อง css ครับ http://www.divland.com/blog/ 4.การใชงานโปรแกรม Dreamweaver หรือโปรแกรมอื่น ๆ สําหรับออกแบบเว็บเพจ 5.การใชงานโปรแกรม editor สําหรับแกไขโคด เชน edit plus, rapid CSS 6.การใชงานโปรแกรม photo shop ใชในการตกแตงรูปภาพ โปรแกรมที่จาํ เปนตองใช 1.edit plus, rapid CSS 2.photoshop 3.Macromedia Dreamweaver (เดี๋ยวนี้เขาเปลี่ยนเปน adobe แลวมั้ง) 4.โปรแกรมเบราเซอร Mozilla Firefox, Internet Explorer 6, 7, 8 เอาไวทดสอบ หนาเว็บเพจ กอนอื่นก็ตองมีไฟลพื้นฐานที่ตองมีกอนก็คือ สามารถดาวนโหลด template ตัวอยางในเอกสารนี้ไดที่ http://cid2e42788f51f66ec7.skydrive.live.com/self.aspx/.Public/Templates/ex/Template-ex.zip

Joomla 1.5 Core Template Files - templateName/index.php - templateName/templateDetails.xml - templateName/template_thumbnail.png - templateName/images/… /* สําหรับเก็บไฟลรูปที่ใชกับ template - templateName/css/… /* สําหรับเก็บไฟล css

ไฟล template_thumbnail.png สําหรับแสดงรูปยอแบบนีค้ รับ โคดพื้นฐานทีต่ องมีในไฟล index.php

1 <?php 2 defined('_JEXEC') or die('Restricted access'); 3 ?> 4 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 5 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 6 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang=" 7 <?php echo $this->language; ?>"> 8 <head> 9 <jdoc:include type="head" /> 10 11 <link rel="stylesheet" href="/joomla/<?php echo $this->baseurl ?>/templates/system/css/system.css" 12 type="text/css" /> 13 <link rel="stylesheet" href="/joomla/<?php echo $this->baseurl ?>/templates/system/css/general.css" 14 type="text/css" /> 15 <link rel="stylesheet" href="/joomla/<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?> 16 /css/template.css" type="text/css" />

</head> <body> </body> </html> Template Modules (& code to call modules) สําหรับเรียกวางตําแหนงโมดูล 1 <jdoc:include type="modules" name="user1" style="xhtml" /> 2 <jdoc:include type="modules" name="user2" style="xhtml" /> 3 <jdoc:include type="modules" name="user3" style="xhtml" /> 4 <jdoc:include type="modules" name="user4" style="xthml" /> 5 <jdoc:include type="modules" name="user5" style="xthml" /> 6 <jdoc:include type="modules" name="user6" style="xthml" /> 7 <jdoc:include type="modules" name="user7" style="xthml" /> 8 <jdoc:include type="modules" name="top" style="xhtml" /> 9 <jdoc:include type="module" name="breadcrumbs" style="none" /> 10 <jdoc:include type="component" /> <!-- Main Content --> 11 <jdoc:include type="modules" name="footer" style="none" /> 12 <jdoc:include type="modules" name="debug" style="none" /> การใสคําสั่งโหลดโมดูลก็จะเปนประมาณนี้ 1 <?php if ($this->countModules('user1')) : ?> 2 <jdoc:include type="modules" name="user1" style="xhtml" /> 3 <?php endif; ?> 4 templateDetails.xml 1 <?xml version="1.0" encoding="utf-8"?> 2 <install version="1.5.1" type="template"> 3 <name>templateName</name> 4 <creationDate>Month Date Year</creationDate> 5 <author>Authors Name</author> 6 <copyright>GPL</copyright> 7 <authorEmail> 8 name@mySite.com </authorEmail> 9 <authorUrl>www.mySite.ca</authorUrl>

10 <version>1.0</version> 11 <description>Brief description of template design here</description> 12 <files> 13 <filename>index.php</filename> 14 <filename>templateDetails.xml</filename> 15 <filename>template_thumbnail.png</filename> 16 <filename>images/logo.gif</filename> 17 <filename>images/header.jpg</filename> 18 <filename>css/template.css</filename> 19 </files> 20 <positions> 21 <position>user1</position> 22 <position>top</position> 23 <position>left</position> 24 <position>banner</position> 25 <position>right</position> 26 <position>footer</position> 27 </positions> </install>

สําหรับตรวจสอบไฟลและบอกพาธสําหรับติดตั้ง

1 <files> 2 <filename>index.php</filename> 3 <filename>templateDetails.xml</filename> 4 <filename>template_thumbnail.png</filename> 5 <filename>images/logo.gif</filename> 6 <filename>images/header.jpg</filename> 7 <filename>css/template.css</filename> 8 </files>

สวนกําหนดตําแหนงโมดูลตาง ๆ 1 <positions> 2 <position>user1</position> 3 <position>top</position> 4 <position>left</position> 5 <position>banner</position> 6 <position>right</position> 7 <position>footer</position> 8 </positions> 9 </install> เริ่มแรกก็มารางแบบกันกอนวาตองการโมดูลในตําแหนงไหนบาง ใชรางงาย ๆ ในกระดาษก็ไดครับ อยางของผมก็ตองการ การวางตําแหนงโมดูลแบบนี้ (อาจจะบูด ๆ เบี้ยว ๆ ไปหนอย)

กอนอื่นก็วางแบบโครงสรางกอนโดยใช <div> ยังไมตองใสคําสั่งโหลดโมดูล แลวใช css เปนตัวกําหนดรูปแบบของ <div> 1 <?php 2 defined('_JEXEC') or die('Restricted access'); 3 ?> 4 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 5 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 6 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang=" 7 <?php echo $this->language; ?>"> 8 <head> 9 <jdoc:include type="head" /> 10 11 <link rel="stylesheet" href="/joomla/<?php echo $this->baseurl ?>/templates/system/css/system.css" 12 type="text/css" /> 13 <link rel="stylesheet" href="/joomla/<?php echo $this->baseurl ?>/templates/system/css/general.css" 14 type="text/css" /> 15 <link rel="stylesheet" href="/joomla/<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?> 16 /css/template.css" type="text/css" /> 17 </head> 18 <body> 19 20 <a name="top"></a><!--anchor for top--> 21 <div id="mainbody"><!---start mainbody--> 22 23 <div id="user1"> 24 <em> พื้นทีส่ ําหรับแสดงuser1</em> 25 </div><!---end user1--> 26 27 <div id="header"> 28 <em> พื้นทีส่ ําหรับแสดง head</em> 29 </div><!---end header--> 30 31 <div id="user2">

32 <em>user2</em> 33 </div><!---end user2--> 34 35 <div id="user3"> 36 <em>user3</em> 37 </div><!---end user3--> 38 39 40 41 <div id="content"> 42 <em>main content พื้นที่สําหรับแสดงบทความในหนา front page</em> 43 </div><!---end content--> 44 45 <div id="breadcrumbs"> 46 <em>breadcrumbs</em> 47 </div><!---end breadcrumbs--> 48 49 <div id="user4"> 50 <em>user4</em> 51 </div><!---end user4--> 52 53 <div id="user5"> 54 <em>user5</em> 55 </div><!---end user5--> 56 57 <div id="user6"> 58 <em>user6</em> 59 </div><!---end user6--> 60 61 <div id="footer1"> 62 <div id="user7"> 63 <em>user7</em> 64 </div><!---end user7--> 65 66 <div id="footer">

67 <em>footer</em> 68 </div><!---end footer--> 69 70 </div> 71 </div><!---end mainbody--> <div id="debug"> <em>debug</em> </div><!---end footer--> </body> </html> ไฟล template.css แบบวางโครงรางไวกอน 1 /*////////// GENERAL //////////*/ 2 body { 3 border: 1px solid #008080; อันนี้จะมีในทุกบรรทัดคําสั่งเพื่อใหแสดงแสดงใหเห็นขอบเขตของขอมูล 4 margin: 0 auto; 5 min-width: 750px; 6 max-width: 960px; 7 height: 0 auto; 8} 9 10 /*////////// TYPEOGRAPHY //////////*/ 11 h1, h4 { 12 font-family: Georgia, Times, serif; 13 } 14 15 h2, h3{ 16 17 font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; 18 } 19 20 h1 { 21 font-size: 32px; 22 } 23

24 h2 { 25 font-size: 22px; 26 } 27 28 h3 { 29 font-size: 16px; 30 } 31 32 h4 { 33 font-size: 14px; 34 } 35 36 p { 37 margin-bottom: 18px; 38 } 39 40 41 a { 42 text-decoration: none; 43 font-weight: bold; 44 } 45 46 a:hover { 47 text-decoration: underline; 48 } 49 50 a:visited {} 51 52 /*////////// HEADERS //////////*/ 53 #header { 54 border: 1px solid #000000; 55 padding: 3px; 56 margin: 5px; 57 height: 0 auto; 58

59 } 60 61 /*////////// CONTENT //////////*/ 62 #content { 63 border: 1px solid #FF00FF; 64 margin-top: auto; 65 margin: 2% 66 67 } 68 69 #mainbody { 70 border: 1px solid #ff0000; 71 margin: 5px; 72 /*padding-top: 250px;*/ 73 74 } 75 76 #user1 { 77 border: 1px solid #00ffff; 78 margin: 5px; 79 } 80 81 #user2 { 82 border: 1px solid #ff0000; 83 margin: 5%; 84 min-width: 375px; 85 max-width: 480px; 86 height: 0 auto; 87 float: left; 88 margin-bottom: auto; 89 } 90 91 #user3 { 92 border: 1px solid #ff0000; 93 margin: 5%;

94 min-width: 375px; 95 max-width: 480px; 96 height: 0 auto; 97 float: left; 98 margin-bottom: auto; 99 } 100 101 #user4 { 102 border: 1px solid #660000; 103 margin: 5px; 104 height: 0 auto; 105 float: left; 106 } 107 108 #user5 { 109 border: 1px solid #660000; 110 margin: 5px; 111 height: 0 auto; 112 float: left; 113 } 114 115 #user6 { 116 border: 1px solid #660000; 117 margin: 5px; 118 height: 0 auto; 119 float: left; 120 121 } 122 123 #user7 { 124 border: 1px solid #009900; 125 margin: 10px; 126 height: 10%; 127 128

129 } 130 131 #breadcrumbs { 132 border: 1px solid #CC0033; 133 height: 33px; 134 margin: 5px; 135 padding-left: 32px; 136 padding-top: 8px; 137 background: url(../images/homei.gif) 0 0 no-repeat; 138 } 139 140 /*////////// SIDEBARS //////////*/ 141 142 /*////////// NAV //////////*/ 143 144 145 /*////////// FORMS //////////*/ 146 147 148 /*////////// FOOTER //////////*/ 149 #footer { 150 border: 1px solid #009900; 151 margin: 10px; 152 height: 10%; 153 154 } 155 156 #footer1 { 157 border: 1px solid #009900; 158 margin: 5px; 159 margin-top: 50px 160 } 161 162 #footer2 { 163 border: 1px solid #000000;

164 margin: 5px; 165 166 } 167 168 #debug { 169 border: 1px solid #cc0033; 170 clear:both; 171 } 172 173 /*////////// IMAGES //////////*/

ก็จะไดหนาตาแบบนี้

ในตอนแรกกลาวถึงการรางโครงรางและวางโครงสรางใหเห็นวา template มีหนาตาอยางไร โดยยังไมใสคําสั่งสําหรับ โหลดโมดูล และทําการกําหนดคา css ใหไดขนาดโครงสรางตามตองการ

จะเห็นวาการกําหนดหนาตาของ template นั้น ขึ้นอยูก ับการออกแบบใน css เปนสวนใหญ คราวนีก้ ็ทําการใสคําสั่ง สําหรับโหลดโมดูล ใหกับ template คําสั่งที่จะใช jdoc:include รูปแบบ Component <jdoc:include type="component" /> องคประกอบนี้ควรจะปรากฏในองคประกอบ <body> ของ template เพื่อแสดงเนื้อหา/บทความของ เว็บไซต รูปแบบ Head 1 <jdoc:include type="head" /> 2 องคประกอบนี้ควรจะปรากฏในองคประกอบ <head> ของ template เพื่อแสดงลักษณะสคริปตและองคประกอบของ meta ที่ใชเชื่อมโยงกับเพจปจจุบัน รูปแบบ Installation 1 <jdoc:include type="installation" /> องคประกอบนี้จะใชเฉพาะในการติดตั้ง joomla template ใชแสดงเนื้อหาหลักขั้นตอนการติดตั้ง รูปแบบ Message 1 <jdoc:include type="message" /> 2 องคประกอบนี้ควรจะปรากฏในองคประกอบ <body> ของ template เพื่อใชแสดงขอความผิดพลาดและขอความในคํา ขออื่น ๆ สไตล CSS สําหรับขอความ ระบบสามารถพบไดใน template\system\css\system.css รูปแบบ Module 1 <jdoc:include type="module" name="breadcrumbs" /> 2 <jdoc:include type="module" name="menu" /> 3 <jdoc:include type="module" name="submenu" style="rounded" id="submenu-box" /> องคประกอบนี้แสดงผลโมดูลเดียว โดยอางอิงชื่อโมดูล

รูปแบบ Modules 1 <jdoc:include type="modules" name="debug" /> 2 <jdoc:include type="modules" name="icon" /> 3 <jdoc:include type="modules" name="left" style="rounded" /> 4 <jdoc:include type="modules" name="left" style="xhtml" /> 5 <jdoc:include type="modules" name="right" style="xhtml" /> 6 <jdoc:include type="modules" name="status" /> 7 <jdoc:include type="modules" name="syndicate" /> 8 <jdoc:include type="modules" name="title" /> 9 <jdoc:include type="modules" name="toolbar" /> 10 <jdoc:include type="modules" name="top" /> 11 <jdoc:include type="modules" name="top" style="xhtml" /> 12 <jdoc:include type="modules" name="user1" style="xhtml" /> 13 <jdoc:include type="modules" name="user2" style="xhtml" /> 14 <jdoc:include type="modules" name="user3" /> 15 <jdoc:include type="modules" name="user4" /> คําสั่งแทรกโมดูลมาแสดงยังพื้นที่นั้น ๆ แยกเปนพืน้ ที่ ๆ แตกตางกันไปตาม template และตําแหนงที่กําหนดในไฟล templatedetails.xml การใชงาน jdoc:include's name="[template position name]" ทําการแทรกตําแหนงโมดูล (module position) 1 ตําแหนง 1 <?php if ($this->countModules('user1')) : ?> 2 <div id="user1"> ใช div ครอบไว ปรับแตงคา id ของ div ที่ template.css 3 <jdoc:include type="modules" name="user1" style="xhtml" /> 4 </div><!---end user1--> 5 <?php endif; ?> วางตําแหนงโมดูล (module position) 2 หรือ 3 ตําแหนง 1 <?php if ($this->countModules('user2 or user3')) : ?> 2 <?php if ($this->countModules('user2')) : ?> 3 <div id="user2"> 4 <jdoc:include type="modules" name="user2" style="xhtml" /> 5 </div><!---end user2--> 6 <?php endif; ?> 7 8 <?php if ($this->countModules('user3')) : ?>

9 <div id="user3"> <jdoc:include type="modules" name="user3" style="xhtml" /> 10 11 </div><!---end user3--> 12 <?php endif; ?> 13 <?php endif; ?>

คราวนี้ผมก็ใส ตําแหนงโมดูล (module position) ตามรูปแบบที่ไดรางไวใน

1 <?php 2 defined('_JEXEC') or die('Restricted access'); 3 ?> 4 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 5 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 6 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang=" 7 <?php echo $this->language; ?>" lang="<?php echo $this->language; ?>"> 8 <head> 9 <jdoc:include type="head" /> 10 11 <link rel="stylesheet" href="/joomla/<?php echo $this->baseurl ?>/templates/system/css/system.css" 12 type="text/css" /> 13 <link rel="stylesheet" href="/joomla/<?php echo $this->baseurl ?>/templates/system/css/general.css" 14 type="text/css" /> 15 <link rel="stylesheet" href="/joomla/<?php echo $this->baseurl ?>/templates/ 16 <?php echo $this->template ?>/css/template.css" type="text/css" /> 17 </head> 18 <body> 19 20 <a name="top"></a><!--anchor for top--> 21 <div id="mainbody"><!---start mainbody--> 22 23 <?php if ($this->countModules('user1')) : ?> 24 <div id="user1"> 25 <jdoc:include type="modules" name="user1" style="xhtml" />

26 </div><!---end user1--> 27 <?php endif; ?> 28 29 <?php if ($this->countModules('header')) : ?> 30 <div id="header"> 31 <jdoc:include type="modules" name="header" style="xhtml" /> 32 </div><!---end header--> 33 <?php endif; ?> 34 35 <?php if ($this->countModules('user2 or user3')) : ?> 36 <?php if ($this->countModules('user2')) : ?> 37 <div id="user2"> 38 <jdoc:include type="modules" name="user2" style="xhtml" /> 39 </div><!---end user2--> 40 <?php endif; ?> 41 42 <?php if ($this->countModules('user3')) : ?> 43 <div id="user3"> 44 <jdoc:include type="modules" name="user3" style="xhtml" /> 45 </div><!---end user3--> 46 <?php endif; ?> 47 <?php endif; ?> 48 49 <div id="content"> 50 <jdoc:include type="message" /> 51 52 <jdoc:include type="component" /> 53 54 </div><!---end content--> 55 56 <div id="breadcrumbs"> 57 <jdoc:include type="modules" name="breadcrumb" style="raw" /> 58 </div><!---end breadcrumbs--> 59 60 <?php if ($this->countModules('user4 or user5 or user6')) : ?>

61 <?php if ($this->countModules('user4')) : ?> 62 <div id="user4"> 63 <jdoc:include type="modules" name="user4" style="xhtml" /> 64 </div><!---end user4--> 65 <?php endif; ?> 66 67 <?php if ($this->countModules('user5')) : ?> 68 <div id="user5"> 69 <jdoc:include type="modules" name="user5" style="xhtml" /> 70 </div><!---end user5--> 71 <?php endif; ?> 72 73 <?php if ($this->countModules('user6')) : ?> 74 <div id="user6"> 75 <jdoc:include type="modules" name="user6" style="xhtml" /> 76 </div><!---end user6--> 77 <?php endif; ?> 78 <?php endif; ?> 79 80 81 <div id="footer1"> 82 <div id="user7"> 83 <jdoc:include type="modules" name="user7" style="xhtml" /> 84 </div><!---end user7--> 85 86 <div id="footer"> 87 <jdoc:include type="modules" name="footer" style="none" /> 88 </div><!---end footer--> 89 90 </div> 91 </div><!---end mainbody--> 92 <div id="debug"> <jdoc:include type="modules" name="debug" style="none" /> </div><!---end footer-->

</body> </html>

template.css 1 /*////////// GENERAL //////////*/ 2 body { 3 border: 1px solid #008080; 4 margin: 0 auto; 5 min-width: 750px; 6 max-width: 960px; 7 height: 0 auto; 8} 9 10 /*////////// TYPEOGRAPHY //////////*/ 11 h1, h4 { 12 font-family: Georgia, Times, serif; 13 } 14 15 h2, h3{ 16 17 font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; 18 } 19 20 h1 { 21 font-size: 32px; 22 } 23 24 h2 { 25 font-size: 22px; 26 } 27 28 h3 { 29 font-size: 16px; 30 }

31 32 h4 { 33 font-size: 14px; 34 } 35 36 p { 37 margin-bottom: 18px; 38 } 39 40 41 a { 42 text-decoration: none; 43 font-weight: bold; 44 } 45 46 a:hover { 47 text-decoration: underline; 48 } 49 50 a:visited {} 51 52 /*////////// HEADERS //////////*/ 53 #header { 54 /* border: 1px solid #000000; */ 55 padding: 3px; 56 margin: 5px; 57 height: 0 auto; 58 59 } 60 61 /*////////// CONTENT //////////*/ 62 #content { 63 /* border: 1px solid #FF00FF; */ 64 margin-top: auto; 65 margin: 2%

66 67 } 68 69 #mainbody { /*border: 1px solid #ff0000; */ 70 71 margin: 5px; 72 /*padding-top: 250px;*/ 73 74 } 75 76 #user1 { 77 /* border: 1px solid #00ffff; */ 78 margin: 5px; 79 } 80 81 #user2 { 82 /*border: 1px solid #ff0000; */ 83 margin: 5%; 84 min-width: 375px; 85 max-width: 480px; 86 height: 0 auto; 87 float: left; 88 margin-bottom: auto; 89 } 90 91 #user3 { 92 /*border: 1px solid #ff0000;*/ 93 margin: 5%; 94 min-width: 375px; 95 max-width: 480px; 96 height: 0 auto; 97 float: left; 98 margin-bottom: auto; 99 } 100

101 #user4 { border: 1px solid #660000;*/ 102 /* 103 margin: 5px auto; 104 height: 0 auto; 105 float: left; 106 } 107 108 #user5 { 109 /* border: 1px solid #660000;*/ 110 margin: 5px auto; 111 height: 0 auto; 112 float: left; 113 } 114 115 #user6 { 116 /*border: 1px solid #660000;*/ 117 margin: 5px auto; 118 height: 0 auto; 119 float: left; 120 121 } 122 123 #user7 { 124 /* border: 1px solid #009900; */ 125 margin: 10px; 126 height: 10%; 127 128 } 129 130 #breadcrumbs { 131 /* border: 1px solid #CC0033;*/ 132 height: 33px; 133 margin: 5px; 134 padding-left: 32px; 135 padding-top: 8px;

136 background: url(../images/homei.gif) 0 0 no-repeat; 137 } 138 139 /*////////// SIDEBARS //////////*/ 140 141 /*////////// NAV //////////*/ 142 143 144 /*////////// FORMS //////////*/ 145 146 147 /*////////// FOOTER //////////*/ 148 #footer { border: 1px solid #009900; */ 149 /* 150 margin: 10px; 151 height: 10%; 152 153 } 154 155 #footer1 { 156 /*border: 1px solid #009900; */ 157 margin: 5px; 158 margin-top: 50px 159 } 160 161 #footer2 { 162 /*border: 1px solid #000000;*/ 163 margin: 5px; 164 165 } 166 167 #debug { 168 /* border: 1px solid #cc0033; */ 169 clear:both; 170 }

171 172 /*////////// IMAGES //////////*/ 173 สวนคา css ก็ปรับแตงเรียบรอยแลวในตอนที่ 1 ก็ไมตองปรับอะไรมากมายเพียงแคเอาเสนออกแคนั้นเอง /*border: 1px solid #cc0033; */ โดยใชแท็กคอมเมนตปด ไว คราวนี้กล็ อง preview ดู เขาทาแคไหน

จากที่ไดออกแบบโครงสรางเรียบรอยแลวคราวนี้ก็มาใสลวดลาย ให template กันเพือ่ ใหเกิดความสวยงาม

จาก template เปลา ๆ หนาขาว ๆ ก็จะเติมพื้นหลังใหกับ template โดยใชรูป โดยการกําหนดที่ <body> โดยใส id ของ css ลงไป <body id="page_bg"> ตั้งชื่อเปน page_bg css กําหนดเปน ออ เกือบลืม เอารูป ใสไวในโฟลเดอร images ดวยนะครับ ชื่อของไฟลรูปคือ page_bg.png 1 #page_bg { 2 background: #fff url(../images/page_bg.png) repeat-x top left; 3} สวยขึ้นมาหนอย พื้นหลังเปนสีเทา ๆ

กําหนดพื้นหลังเปนอยางอื่นก็ไดนะครับ เชนกําหนดพืน้ หลังเปนสี

1 #page_bg { 2 background: #000000; <---เปลี่ยนเปนโคดสี 3}

จากนั้นก็จะใสรูปสักหนอย โดยเอารูปดานลางนี้ใสที่บริเวณ header คลุมไปถึง user1

ชื่อรูป headerimg.jpg ขนาด 960*340 px เชนเดิมก็เอารูปนี้ใสไวในโฟลเดอร images

โดยจะเอา <div id="header1"> </div> ครอบสวน header, user1 ไว 1 <div id="header1"> 2 <?php if ($this->countModules('user1')) : ?> 3 <div id="user1"> 4 <jdoc:include type="modules" name="user1" style="xhtml" /> 5 </div><!---end user1--> 6 <?php endif; ?> 7 8 9 <?php if ($this->countModules('header')) : ?> 10 <div id="header"> 11 <jdoc:include type="modules" name="header" style="xhtml" /> 12 </div><!---end header--> 13 <?php endif; ?> 14 </div> <!---end header1--->

เขียน css "header1" เพิ่ม ดังนี้ 1 #header1 { position:relative; 2 margin:0 auto; 3 height:301px; 4 width:744px; 5 padding:64px 0 0 216px; 6 background: transparent url(../images/headerimg.jpg) no-repeat top center; 7 8}

ก็จะออกมาเปนแบบนี้ครับ

หัวโลง ๆ แบบนี้ไมดีแน เติมตนคริสมาส เขาไปที่หัวเว็บสักหนอย โดยใชรูปนี้

โดยการเพิ่ม <div id="headerimage"></div> เขาไปใตแท็ก <div id="header1"> เปนแบบนี้ <div id="header1"> <div id="headerimage"></div> <------ที่ไดเพิ่มเขาไป <?php if ($this->countModules('user1')) : ?> <div id="user1"> <jdoc:include type="modules" name="user1" style="xhtml" /> </div><!---end user1--> <?php endif; ?> <?php if ($this->countModules('header')) : ?> <div id="header"> <jdoc:include type="modules" name="header" style="xhtml" /> </div><!---end header--> <?php endif; ?> </div><!---end header1--->

เขียน css "headerimage" เพิม่ ดังนี้

1 #headerimage { 2 position:absolute; 3 top:0; 4 left:0; 5 width:216px; 6 height:365px; 7 background: transparent url(../images/img.jpg) no-repeat top left; 8}

เริ่มดูดีขึ้นมาทันที

เพื่อใหรูปสามารถเปนลิ้งกเพือ่ กลับสูหนาแรกไดดว ยก็ใส <a href="/joomla/index.php" title="กลับสูหนาแรก"></a> ครอบ <div id="headerimage"></div>

1 <a href="index.php" title="กลับสูหนาแรก"><div id="headerimage"></div></a>

ในสวน footer ดูโลง ๆ ใสเสนไปซักหนอย โดยใชรูปนี้

เหมือนเดิมครับใช <div> ครอบ footer ไว 1 <div id="footer_holder"> <jdoc:include type="modules" name="footer" style="none" /> 2 3 </div><!---end footer_holder--->

คราวนี้ ผมจะเอาเสนที่ระบุขอบเขตของพื้นที่ออก border: 1px solid #008080; ที่อยูในสวนตาง ๆ ของ css จากนี้กใ็ สเสนของที่ main content โดยใชรูปภาพที่ทําไวแลว เปนลักษณะเสนเล็ก ๆ ดังในรูปดานลาง

โดยใส <div id="maincolumn_full"> ครอบ <jdoc:include type="component" /> ไว 1 <div id="maincolumn_full"> <jdoc:include type="message" /> 2 3 <jdoc:include type="component" /> 4 </div> เขียน css maincolumn_full โดยใชรูปเสนเล็ก ๆ 1 #maincolumn_full { 2 width:960px; 3 margin:0 0 10px 0; 4 background: transparent url(../images/content_m_full.gif) repeat-y top center; 5} จากนั้นก็ใสเสนลอมรอบ main content ไว ซาย ขวา บน ลาง 1 <div id="maincolumn_full"> 2 <div class="top_full"> 3 <div class="bottom_full"> 4 5 </div> 6 7 </div> 8 </div>

<jdoc:include type="message" /> <jdoc:include type="component" />

เขียน css ดังนี้

1 .top_full { 2 background: transparent url(../images/content_t_full.gif) no-repeat top center; 3} 4 5 .bottom_full { 6 padding: 10px; 7 background: transparent url(../images/content_b_full.gif) no-repeat bottom center; 8} ก็จะไดผลดังนี้

รูปแบบ template แบบเต็ม ๆ หนา ขนาดความกวางสูงสุด 960px

เอาเปนวา วางรูปแบบตางเสร็จเรียบรอยหมดแลว คราวนี้ก็ลอง enable โมดูลใหอยูต ามตําแหนงตาง ๆ บน template ให หมดแลวดูวา ผิดเพี้ยนหรือไม ถาไมไดตามตองการใหไปปรับแกที่ css เอา ในการดูตําแหนง module position ของ joomla ใหเติม ?tp=1 ตอทาย url ลงไป ก็จะเห็นตําแหนง module ทั้งหมดบนหนา template เชน http://www.you.com/?tp=1

คราวนี้ก็ลอง preview ดู กับหลาย ๆ เบราเซอร วาการแสดงผลเปนปกติหรือไม ดังรูปบน เปนการ ดูใน firefox ปกติดี

สวนอันนี้เปนการดูใน IE6 (Internet Explorer 6) จะเห็นวาในสวนของ content นั้น ชิดซายอยู สวน head นั้นอยูที่เดิม วิธีแกไขคือ สรางไฟล CSS อีกชุดหนึ่งเอาไวใชกับ เฉพาะ ie6 โดยเฉพาะ โดยการก็อปป โคด css อันเดิมที่ใช (template.css) แลวนํามาตั้งชื่อใหม เปน ie6.css

แลวเพิ่มโคดนีล้ งไปใน index.php ของ template ในแท็ก <head> เพื่อเรียก css ตัวนีข้ ึ้นมาเฉพาะเมื่อเปดกับ ie6 1 <!--[if lte IE 6]> 2 <link href="/joomla/<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?> 3 /css/ie6.css" rel="stylesheet" type="text/css" /> <![endif]-->

ก็จะเปนแบบนี้ 1 <?php 2 defined('_JEXEC') or die('Restricted access'); 3 ?> 4 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org 5 /TR/xhtml1/DTD/xhtml1-transitional.dtd"> 6 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang=" 7 <?php echo $this->language; ?>"> 8 <head> 9 <jdoc:include type="head" /> 10 11 <link rel="stylesheet" href="/joomla/<?php echo $this->baseurl ?>/templates/system/css/system.css" 12 type="text/css" /> 13 <link rel="stylesheet" href="/joomla/<?php echo $this->baseurl ?>/templates/system/css/general.css" 14 type="text/css" /> 15 <link rel="stylesheet" href="/joomla/<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?> 16 /css/template.css" type="text/css" /> 17 <?php if ($this->countModules('user1')): ?> 18 <?php if ($this->params->get('user1Type') == 'css'): ?> 19 <link rel="stylesheet" href="/joomla/<?php echo $this->baseurl ?>/css/sosdmenu.css" type="text/css" /> 20 <script language="javascript" type="text/javascript" src="/joomla/<?php echo $this->template ?> 21 /js/cssmenu.js"></script> 22 <?php else: ?> 23 <link rel="stylesheet" href="/joomla/<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?> 24 /css/sosdmenu.css" type="text/css" /> 25 <script language="javascript" type="text/javascript" src="/joomla/<?php echo $this->template ?>/templates/ 26 <?php echo $this->template ?>/js/moomenu.js"></script> 27 <?php endif; ?> 28 <?php endif; ?> 29 <!--[if lte IE 6]> 30 <link href="/joomla/<?php echo $this->baseurl ?>/templates/<?php echo $this->template 31 ?> 32 /css/ie6.css" rel="stylesheet" type="text/css" /> 33 <![endif]--> 34

35 </head> 36 <body id="page_bg"> 37 38 <a name="top"></a> 39 40 <div id="mainbody"> 41 <div id="header1"> 42 <div class="logo"><a href="/joomla/index.php"><?php echo $mainframe->getCfg('sitename') ;?></a></div> 43 <a href="/joomla/index.php" title="กลับสูหนาแรก"><div id="headerimage"></div></a> 44 <?php if ($this->countModules('user1')) : ?> 45 <div id="user1"> 46 <div id="mainnav"> 47 <jdoc:include type="modules" name="user1" style="xhtml" /> 48 </div> 49 </div> 50 <?php endif; ?> 51 52 53 <?php if ($this->countModules('header')) : ?> 54 <div id="header"> 55 <jdoc:include type="modules" name="header" style="xhtml" /> 56 </div> 57 <?php endif; ?> 58 </div> 59 <?php if ($this->countModules('user2 or user3')) : ?> 60 <?php if ($this->countModules('user2')) : ?> 61 <div id="user2"> 62 <jdoc:include type="modules" name="user2" style="xhtml" /> 63 </div> 64 <?php endif; ?> 65 66 <?php if ($this->countModules('user3')) : ?> 67 <div id="user3"> 68 <jdoc:include type="modules" name="user3" style="xhtml" /> 69 </div>

70 <?php endif; ?> 71 <?php endif; ?> 72 73 <div id="maincolumn_full"> 74 <div class="top_full"> 75 <div class="bottom_full"> 76 <jdoc:include type="message" /> 77 <?php if($this->params78 >get('showComponent')) : ?> 79 <jdoc:include type="component" /> 80 <?php endif; ?> 81 </div> 82 </div> 83 </div> 84 <div id="userall"> 85 <div id="breadcrumbs"> 86 <jdoc:include type="modules" name="breadcrumb" style="raw" /> 87 </div> 88 </div> 89 <div id="userall"> 90 <table width="980"> 91 <tr> 92 <?php if ($this->countModules('user4 or user5 or user6')) : ?> 93 <?php if ($this->countModules('user4')) : ?> 94 <td> 95 <jdoc:include type="modules" name="user4" style="raw" 96 /> 97 </td> 98 <?php endif; ?> 99 100 <?php if ($this->countModules('user5')) : ?> 101 <td> 102 <jdoc:include type="modules" name="user5" style="raw" 103 /> 104 </td>

105 <?php endif; ?> 106 107 <?php if ($this->countModules('user6')) : ?> 108 <td> 109 <jdoc:include type="modules" name="user6" style="raw" 110 /> 111 </td> 112 <?php endif; ?> 113 <?php endif; ?> 114 </tr> 115 </table> 116 </div> 117 118 <div id="userall"> 119 <div id="user7"> 120 <jdoc:include type="modules" name="user7" style="xhtml" /> 121 </div> 122 </div> <div id="userall"> <div id="footer"> <div id="footer_holder"> Powered by <a href="http://www.joomlathaiclub.com/" target="_blank">Joomla!</a> and designed by joomlathaiclub <a href="http://www.joomlathaiclub.com/" target="_blank">joomla thai</a> </div> </div> </div> </div> <div id="userall"> <div id="debug"> <jdoc:include type="modules" name="debug" style="none" /> </div> </div> </body> </html>

css ของ ie6 1 /*////////// GENERAL //////////*/ 2 body { 3 margin: 0 auto; 4 height: 0 auto; 5 6 font-family: Tahoma, Verdana, Arial, sans-serif; 7 line-height: 1.3em; 8 font-size: 11px; 9 color: #666666; 10 background: #fff; 11 } 12 13 /*////////// TYPEOGRAPHY //////////*/ 14 h1, h4, h2, h3{ 15 font-family: Georgia, Times, serif; 16 } 17 18 h1, h2, h3, h4, h5, h6, 19 h1 a, h2 a, h3 a, h4 a, h5 a, h6 a 20 h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover 21 h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited 22 { 23 font-weight: normal; 24 font-style: normal; 25 text-decoration: none; 26 } 27 28 a img, a img.preview { 29 border: none; 30 text-decoration: none; 31 } 32 33 /*////////// HEADERS //////////*/ 34

35 .logo { 36 position:absolute; 37 top:26px; 38 right:0; 39 width:800px; 40 height:25px; 41 padding:0; 42 margin:0; 43 overflow:hidden; 44 text-align:right; 45 } 46 47 48 49 #page_bg { 50 background: #fff url(../images/page_bg.png) repeat-x top left; 51 } 52 53 #header { 54 padding-top: 118px; 55 margin: 5px; 56 height: 0 auto; 57 58 } 59 60 #header1 { 61 position:relative; 62 margin:0 auto; 63 height:301px; 64 width:744px; 65 padding:64px 0 0 216px; 66 background: transparent url(../images/headerimg.jpg) no-repeat top center; 67 } 68 69 #headerimage {

70 position:absolute; 71 top:0; 72 left:0; 73 width:216px; 74 height:365px; 75 background: transparent url(../images/img.jpg) no-repeat top left; 76 } 77 78 /*////////// CONTENT //////////*/ 79 #content { 80 margin-top: auto; 81 margin: 2% 82 83 } 84 85 #mainbody { 86 margin: 5px; 87 } 88 89 #user1 { 90 margin: 0 auto; 91 } 92 93 #user2 { 94 margin: 0 0 0 14%; 95 min-width: 375px; 96 max-width: 480px; 97 height: 0 auto; 98 float: left; 99 margin-bottom: 2%; 100 } 101 102 #user3 { 103 margin: 0 0 0 14%; 104 min-width: 375px;

105 max-width: 480px; 106 height: 0 auto; 107 float: left; 108 margin-bottom: 2%; 109 } 110 111 #userall { 112 margin: 0 0 0 14%; 113 } 114 115 #breadcrumbs { 116 height: 33px; 117 margin: 5px; 118 width:770px; 119 padding-left: 32px; 120 padding-top: 8px; 121 background: url(../images/homei.gif) 0 0 no-repeat; 122 } 123 124 /*////////// SIDEBARS //////////*/ 125 126 /*////////// NAV //////////*/ 127 #maincolumn_full { 128 width:960px; 129 margin: 0 0 0 14%; 130 background: transparent url(../images/content_m_full.gif) repeat-y top center; 131 } 132 133 .top_full { 134 background: transparent url(../images/content_t_full.gif) no-repeat top center; 135 } 136 137 .bottom_full { 138 padding: 10px; 139 background: transparent url(../images/content_b_full.gif) no-repeat bottom center;

140 } 141 142 /*////////// FORMS //////////*/ 143 144 145 /*////////// FOOTER //////////*/ 146 #footer { 147 width:960px; 148 height:44px; 149 text-align:center; 150 margin:0 0 20px; 151 background: transparent url(../images/footer.png) no-repeat top center; 152 153 } 154 155 #footer_holder { 156 height:26px; 157 width:936px; 158 color: #fff; 159 font-weight:400; 160 line-height: 25px; 161 padding:0 12px; 162 margin:0 auto; 163 overflow:hidden; 164 } 165 166 #footer a { 167 color: #fff; 168 font-weight:400; 169 text-decoration: none; 170 } 171 172 173 #footer a:hover { 174 text-decoration:underline;

175 } 176 177 a.footer123:link, a.footer123:visited { 178 color: #000; 179 font-family: Tahoma, Arial, sans-serif; 180 text-decoration: underline; 181 } 182 183 #f123 { 184 text-align: right; 185 width: 100%; 186 margin: 0 auto; 187 font-family: Tahoma, Arial, sans-serif; 188 } 189 .f123 { 190 text-align: right; 191 font-family: Tahoma, Arial, sans-serif; 192 text-decoration: none; 193 } 194 .f123_bg { 195 background:url(../images/123_bg.png); 196 width:134px; 197 height:30px; 198 text-align:center; 199 padding: 0 3px; 200 } 201 .f123_1 { 202 display: block; 203 font-size: 10px; 204 font-family: Tahoma, Arial, sans-serif; 205 color: #666; 206 text-align: left; 207 padding: 0 0 2px 4px; 208 } 209

210 211 a.link_123:link, a.link_123:visited { 212 font-size: 15px; 213 font-family: Tahoma, Verdana,Arial,Helvetica,sans-serif; 214 color: #797979; 215 text-decoration:none; 216 font-weight: 700; 217 } 218 a.link_123:hover { 219 font-size: 15px; 220 font-family: Tahoma, Verdana,Arial,Helvetica,sans-serif; 221 color: #797979; 222 text-decoration:none; 223 font-weight: 700; 224 } 225 226 227 #debug { 228 padding: 2px 229 } /*////////// IMAGES //////////*/

multiple IE โปรแกรมที่บรรจุ Internet Explorer หลาย ๆ เวอรชั่นเอาไวขางใน ทําใหคุณสามารถใช ie หลายๆ เวอรชั่น เพื่อทดสอบเว็บไซตไดในเครื่องเดียวกัน ดูรายละเอียดเพิม่ เติมที่นี่ http://tredosoft.com/Multiple_IE

เมื่อดูในทุกเบราเซอรลงตัวดีแลว จากนั้นก็มาสรางรูปยอ สําหรับ template โดยใชโปรแกรม photoshop ขนาดรูปไมตอง ใหญนักประมาณ 200*150px บันทึกเปนไฟลชื่อ template_thumbnail.png เก็บไวในโฟลเดอรเดียวกัน

จากนั้นก็สรางรายชื่อไฟล วาใน template มีไฟลอะไรมั่ง เพื่อใชในการติดตั้ง แลวทําการบันทึกรายชือ่ ไฟลตาง ๆ ที่มีใน template ไวใน templateDetails.xml

บางทานอาจจะมีไฟลรูปภาพเยอะมาก อาจจะตกหลนในการเก็บรายชื่อ มีเครื่องมือที่ชวยลิสตรายชื่อไฟล ใหก็อปปโคด ดานลางแลว เซฟเปนไฟลชอื่ remove.php

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org 2 /TR/xhtml1/DTD/xhtml1-transitional.dtd"> 3 <html> <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>templateDetails.xml generator REMOVE PRIOR TO PACAKGING!!</title> 6 </head> 7

<body> 8 9 <h2>Remove this file prior to packaging your template!</h2> 10 11 <?php 12 13 $dir="html"; // change this to template directory where files are stored. "." = root. 14 15 if ($dir_list = opendir($dir)){ 16 17 if ($dir == "."){ $dir = ""; 18 }else{ 19 $dir = $dir."/"; 20 }//if/else 21 22 while(($filename = readdir($dir_list)) !== false){ 23 if ($filename != ".DS_Store" && $filename != "." && $filename != ".." && $filename != "remove.php" 24 25 && $filename != "css" && $filename != "html" && $filename != "images" && $filename != "js"){ ?> 26 27 28 <filename></filename><br/> 29 30 <?php }//if 31 32 }//while 33 closedir($dir_list); 34 }//if 35 36 ?> 37 38 </body> </html>

นําไปวางไวในโฟลเดอรของ template จากนั้นก็รนั ไฟลนี้ผานทางเบราเซอร แกไขสวนนีน้ ิดหนอยเพื่อใหเขาไปลิสต รายชื่อไฟลในโฟลเดอรที่ลึกกวา นี้

1 $dir="html"; // change this to template directory where files are stored. "." = root. 2

แกไขที่ "html" ใหเปนชื่อโฟลเดอรที่ตองการจะลิสตรายชื่อไฟล หรือกําหนด เปน (.) จุด เพื่อเปน root โฟลเดอร

ก็จะแสดงผลลิสตรายชื่อไฟลออกมาใหแถมใสแท็กคําสั่งใหอีกตางหากก็ทํา การก็อปปรายชื่อไฟลดงั กลาวมาใสไวใน ไฟล templateDetails.xml

จากนั้นก็ทําการบีบไฟลทั้งหมดใหเปนไฟลซิป (zip)

จากนั้นก็ลองติดตั้งดู

ถาขึ้น Install Template Success ก็แสดงวาผาน ถา error ลองตรวจสอบวาไฟลอะไรขาดไปหรือเปลาครับ จบครับ ขอใหสนุกกับการออกแบบเว็บไซต

tip

การแทรกไฟลแฟลชใหแสดงใน template

1 <div id="flashHeader"> 2 <object data="<?php echo $this->baseurl; ?>/templates/ 3 <?php echo $this->template; ?>/green-flash-sample.swf" 4 type="application/x-shockwave-flash" 5 width="320" 6 height="75" 7 FlashVars="itemID=<?php echo $newItemid;?>"> 8 <param name="movie" value="<?php echo $this->baseurl; ?> 9 /templates/<?php echo $this->template; ?>/green-flash-sample.swf" /> 10 <param name="menu" value="false" /> 11 <param name="FlashVars" value="itemID=<?php echo $newItemid;?>"/> 12 <param name="wmode" value="transparent" /> 13 <param name="quality" value="best" /> 14 </object> css (หรือไมจําเปนตองใช css ก็ได)

1 #flashHeader{ 2 margin: 0; 3 margin-top: 1px; 4 width: 320px; 5 height: 75px; 6} เปลี่ยนตรงชื่อไฟลแฟลช green-flash-sample.swf เปนของคุณเอง กําหนดความกวางความสูงตามใจชอบ

Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.