Embed Size (px)
DESCRIPTION
How to Design Template Joomla 1.5 from Beginner
Citation preview
จัดทําโดย joomlathaiclub.com
Joomla! 1.5 Template Design By joomla thai club
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://cid-2e42788f51f66ec7.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
123456789
10111213141516
<?php defined('_JEXEC') or die('Restricted access'); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang=" <?php echo $this->language; ?>"> <head> <jdoc:include type="head" /> <link rel="stylesheet" href="/joomla/<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" /> <link rel="stylesheet" href="/joomla/<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" /> <link rel="stylesheet" href="/joomla/<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?> /css/template.css" type="text/css" />
</head> <body> </body> </html>
Template Modules (& code to call modules) สําหรับเรียกวางตําแหนงโมดูล 123456789
101112
<jdoc:include type="modules" name="user1" style="xhtml" /> <jdoc:include type="modules" name="user2" style="xhtml" /> <jdoc:include type="modules" name="user3" style="xhtml" /> <jdoc:include type="modules" name="user4" style="xthml" /> <jdoc:include type="modules" name="user5" style="xthml" /> <jdoc:include type="modules" name="user6" style="xthml" /> <jdoc:include type="modules" name="user7" style="xthml" /> <jdoc:include type="modules" name="top" style="xhtml" /> <jdoc:include type="module" name="breadcrumbs" style="none" /> <jdoc:include type="component" /> <!-- Main Content --> <jdoc:include type="modules" name="footer" style="none" /> <jdoc:include type="modules" name="debug" style="none" />
การใสคําสั่งโหลดโมดูลก็จะเปนประมาณนี้ 1234
<?php if ($this->countModules('user1')) : ?> <jdoc:include type="modules" name="user1" style="xhtml" /> <?php endif; ?>
templateDetails.xml 123456789
<?xml version="1.0" encoding="utf-8"?> <install version="1.5.1" type="template"> <name>templateName</name> <creationDate>Month Date Year</creationDate> <author>Authors Name</author> <copyright>GPL</copyright> <authorEmail> [email protected] </authorEmail> <authorUrl>www.mySite.ca</authorUrl>
101112131415161718192021222324252627
<version>1.0</version> <description>Brief description of template design here</description> <files> <filename>index.php</filename> <filename>templateDetails.xml</filename> <filename>template_thumbnail.png</filename> <filename>images/logo.gif</filename> <filename>images/header.jpg</filename> <filename>css/template.css</filename> </files> <positions> <position>user1</position> <position>top</position> <position>left</position> <position>banner</position> <position>right</position> <position>footer</position> </positions> </install>
สําหรับตรวจสอบไฟลและบอกพาธสําหรับติดตั้ง
12345678
<files> <filename>index.php</filename> <filename>templateDetails.xml</filename> <filename>template_thumbnail.png</filename> <filename>images/logo.gif</filename> <filename>images/header.jpg</filename> <filename>css/template.css</filename> </files>
สวนกําหนดตาํแหนงโมดูลตาง ๆ
123456789
<positions> <position>user1</position> <position>top</position> <position>left</position> <position>banner</position> <position>right</position> <position>footer</position> </positions> </install>
เร่ิมแรกก็มารางแบบกันกอนวาตองการโมดูลในตําแหนงไหนบาง ใชรางงาย ๆ ในกระดาษก็ไดครับ
อยางของผมก็ตองการ การวางตําแหนงโมดูลแบบนี้ (อาจจะบดู ๆ เบี้ยว ๆ ไปหนอย)
กอนอื่นกว็างแบบโครงสรางกอนโดยใช <div> ยังไมตองใสคําสั่งโหลดโมดูล แลวใช css เปนตัวกาํหนดรูปแบบของ <div>
123456789
10111213141516171819202122232425262728293031
<?php defined('_JEXEC') or die('Restricted access'); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang=" <?php echo $this->language; ?>"> <head> <jdoc:include type="head" /> <link rel="stylesheet" href="/joomla/<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" /> <link rel="stylesheet" href="/joomla/<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" /> <link rel="stylesheet" href="/joomla/<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?> /css/template.css" type="text/css" /> </head> <body> <a name="top"></a><!--anchor for top--> <div id="mainbody"><!---start mainbody--> <div id="user1"> <em> พื้นทีสํ่าหรับแสดงuser1</em> </div><!---end user1--> <div id="header"> <em> พื้นทีสํ่าหรับแสดง head</em> </div><!---end header--> <div id="user2">
3233343536373839404142434445464748495051525354555657585960616263646566
<em>user2</em> </div><!---end user2--> <div id="user3"> <em>user3</em> </div><!---end user3--> <div id="content"> <em>main content พื้นที่สําหรับแสดงบทความในหนา front page</em> </div><!---end content--> <div id="breadcrumbs"> <em>breadcrumbs</em> </div><!---end breadcrumbs--> <div id="user4"> <em>user4</em> </div><!---end user4--> <div id="user5"> <em>user5</em> </div><!---end user5--> <div id="user6"> <em>user6</em> </div><!---end user6--> <div id="footer1"> <div id="user7"> <em>user7</em> </div><!---end user7--> <div id="footer">
6768697071
<em>footer</em> </div><!---end footer--> </div> </div><!---end mainbody--> <div id="debug"> <em>debug</em> </div><!---end footer--> </body> </html>
ไฟล template.css แบบวางโครงรางไวกอน 123456789
1011121314151617181920212223
/*////////// GENERAL //////////*/ body { border: 1px solid #008080; อันนี้จะมีในทุกบรรทัดคําสั่งเพื่อใหแสดงแสดงใหเห็นขอบเขตของขอมูล margin: 0 auto; min-width: 750px; max-width: 960px; height: 0 auto; } /*////////// TYPEOGRAPHY //////////*/ h1, h4 { font-family: Georgia, Times, serif; } h2, h3{ font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; } h1 { font-size: 32px; }
2425262728293031323334353637383940414243444546474849505152535455565758
h2 { font-size: 22px; } h3 { font-size: 16px; } h4 { font-size: 14px; } p { margin-bottom: 18px; } a { text-decoration: none; font-weight: bold; } a:hover { text-decoration: underline; } a:visited {} /*////////// HEADERS //////////*/ #header { border: 1px solid #000000; padding: 3px; margin: 5px; height: 0 auto;
5960616263646566676869707172737475767778798081828384858687888990919293
} /*////////// CONTENT //////////*/ #content { border: 1px solid #FF00FF; margin-top: auto; margin: 2% } #mainbody { border: 1px solid #ff0000; margin: 5px; /*padding-top: 250px;*/ } #user1 { border: 1px solid #00ffff; margin: 5px; } #user2 { border: 1px solid #ff0000; margin: 5%; min-width: 375px; max-width: 480px; height: 0 auto; float: left; margin-bottom: auto; } #user3 { border: 1px solid #ff0000; margin: 5%;
949596979899
100101102103104105106107108109110111112113114115116117118119120121122123124125126127128
min-width: 375px; max-width: 480px; height: 0 auto; float: left; margin-bottom: auto; } #user4 { border: 1px solid #660000; margin: 5px; height: 0 auto; float: left; } #user5 { border: 1px solid #660000; margin: 5px; height: 0 auto; float: left; } #user6 { border: 1px solid #660000; margin: 5px; height: 0 auto; float: left; } #user7 { border: 1px solid #009900; margin: 10px; height: 10%;
129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163
} #breadcrumbs { border: 1px solid #CC0033; height: 33px; margin: 5px; padding-left: 32px; padding-top: 8px; background: url(../images/homei.gif) 0 0 no-repeat; } /*////////// SIDEBARS //////////*/ /*////////// NAV //////////*/ /*////////// FORMS //////////*/ /*////////// FOOTER //////////*/ #footer { border: 1px solid #009900; margin: 10px; height: 10%; } #footer1 { border: 1px solid #009900; margin: 5px; margin-top: 50px } #footer2 { border: 1px solid #000000;
164165166167168169170171172173
margin: 5px; } #debug { border: 1px solid #cc0033; clear:both; } /*////////// IMAGES //////////*/
ก็จะไดหนาตาแบบนี ้
ในตอนแรกกลาวถึงการรางโครงรางและวางโครงสรางใหเห็นวา template มีหนาตาอยางไร โดยยังไมใสคําสั่งสําหรับโหลดโมดูล และทําการกําหนดคา css ใหไดขนาดโครงสรางตามตองการ
จะเห็นวาการกําหนดหนาตาของ template นั้น ขึ้นอยูกับการออกแบบใน css เปนสวนใหญ คราวนีก้็ทําการใสคําสั่งสําหรับโหลดโมดูล ใหกับ template
คําสั่งที่จะใช jdoc:include
รูปแบบ Component <jdoc:include type="component" /> องคประกอบนี้ควรจะปรากฏในองคประกอบ <body> ของ template เพื่อแสดงเนื้อหา/บทความของ เว็บไซต
รูปแบบ Head
12
<jdoc:include type="head" />
องคประกอบนี้ควรจะปรากฏในองคประกอบ <head> ของ template เพื่อแสดงลักษณะสคริปตและองคประกอบของ meta ที่ใชเชื่อมโยงกับเพจปจจุบัน
รูปแบบ Installation
1 <jdoc:include type="installation" />
องคประกอบนี้จะใชเฉพาะในการติดตั้ง joomla template ใชแสดงเนื้อหาหลักขั้นตอนการติดตั้ง
รูปแบบ Message
12
<jdoc:include type="message" />
องคประกอบนี้ควรจะปรากฏในองคประกอบ <body> ของ template เพื่อใชแสดงขอความผิดพลาดและขอความในคําขออื่น ๆ สไตล CSS สําหรับขอความ ระบบสามารถพบไดใน template\system\css\system.css
รูปแบบ Module
123
<jdoc:include type="module" name="breadcrumbs" /> <jdoc:include type="module" name="menu" /> <jdoc:include type="module" name="submenu" style="rounded" id="submenu-box" />
องคประกอบนี้แสดงผลโมดูลเดียว โดยอางอิงชื่อโมดูล
รูปแบบ Modules
123456789
101112131415
<jdoc:include type="modules" name="debug" /> <jdoc:include type="modules" name="icon" /> <jdoc:include type="modules" name="left" style="rounded" /> <jdoc:include type="modules" name="left" style="xhtml" /> <jdoc:include type="modules" name="right" style="xhtml" /> <jdoc:include type="modules" name="status" /> <jdoc:include type="modules" name="syndicate" /> <jdoc:include type="modules" name="title" /> <jdoc:include type="modules" name="toolbar" /> <jdoc:include type="modules" name="top" /> <jdoc:include type="modules" name="top" style="xhtml" /> <jdoc:include type="modules" name="user1" style="xhtml" /> <jdoc:include type="modules" name="user2" style="xhtml" /> <jdoc:include type="modules" name="user3" /> <jdoc:include type="modules" name="user4" />
คําสั่งแทรกโมดูลมาแสดงยังพื้นที่นั้น ๆ แยกเปนพืน้ที่ ๆ แตกตางกนัไปตาม template และตําแหนงที่กําหนดในไฟล templatedetails.xml การใชงาน jdoc:include's name="[template position name]"
ทําการแทรกตาํแหนงโมดูล (module position) 1 ตําแหนง
12345
<?php if ($this->countModules('user1')) : ?> <div id="user1"> ใช div ครอบไว ปรับแตงคา id ของ div ที่ template.css <jdoc:include type="modules" name="user1" style="xhtml" /> </div><!---end user1--> <?php endif; ?>
วางตําแหนงโมดูล (module position) 2 หรือ 3 ตําแหนง
12345678
<?php if ($this->countModules('user2 or user3')) : ?> <?php if ($this->countModules('user2')) : ?> <div id="user2"> <jdoc:include type="modules" name="user2" style="xhtml" /> </div><!---end user2--> <?php endif; ?> <?php if ($this->countModules('user3')) : ?>
910111213
<div id="user3"> <jdoc:include type="modules" name="user3" style="xhtml" /> </div><!---end user3--> <?php endif; ?> <?php endif; ?>
คราวนี้ผมก็ใส ตําแหนงโมดลู (module position) ตามรูปแบบที่ไดรางไวใน
123456789
10111213141516171819202122232425
<?php defined('_JEXEC') or die('Restricted access'); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang=" <?php echo $this->language; ?>" lang="<?php echo $this->language; ?>"> <head> <jdoc:include type="head" /> <link rel="stylesheet" href="/joomla/<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" /> <link rel="stylesheet" href="/joomla/<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" /> <link rel="stylesheet" href="/joomla/<?php echo $this->baseurl ?>/templates/ <?php echo $this->template ?>/css/template.css" type="text/css" /> </head> <body> <a name="top"></a><!--anchor for top--> <div id="mainbody"><!---start mainbody--> <?php if ($this->countModules('user1')) : ?> <div id="user1"> <jdoc:include type="modules" name="user1" style="xhtml" />
2627282930313233343536373839404142434445464748495051525354555657585960
</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; ?> <?php if ($this->countModules('user2 or user3')) : ?> <?php if ($this->countModules('user2')) : ?> <div id="user2"> <jdoc:include type="modules" name="user2" style="xhtml" /> </div><!---end user2--> <?php endif; ?> <?php if ($this->countModules('user3')) : ?> <div id="user3"> <jdoc:include type="modules" name="user3" style="xhtml" /> </div><!---end user3--> <?php endif; ?> <?php endif; ?> <div id="content"> <jdoc:include type="message" /> <jdoc:include type="component" /> </div><!---end content--> <div id="breadcrumbs"> <jdoc:include type="modules" name="breadcrumb" style="raw" /> </div><!---end breadcrumbs--> <?php if ($this->countModules('user4 or user5 or user6')) : ?>
6162636465666768697071727374757677787980818283848586878889909192
<?php if ($this->countModules('user4')) : ?> <div id="user4"> <jdoc:include type="modules" name="user4" style="xhtml" /> </div><!---end user4--> <?php endif; ?> <?php if ($this->countModules('user5')) : ?> <div id="user5"> <jdoc:include type="modules" name="user5" style="xhtml" /> </div><!---end user5--> <?php endif; ?> <?php if ($this->countModules('user6')) : ?> <div id="user6"> <jdoc:include type="modules" name="user6" style="xhtml" /> </div><!---end user6--> <?php endif; ?> <?php endif; ?> <div id="footer1"> <div id="user7"> <jdoc:include type="modules" name="user7" style="xhtml" /> </div><!---end user7--> <div id="footer"> <jdoc:include type="modules" name="footer" style="none" /> </div><!---end footer--> </div> </div><!---end mainbody--> <div id="debug"> <jdoc:include type="modules" name="debug" style="none" /> </div><!---end footer-->
</body> </html>
template.css
123456789
101112131415161718192021222324252627282930
/*////////// GENERAL //////////*/ body { border: 1px solid #008080; margin: 0 auto; min-width: 750px; max-width: 960px; height: 0 auto; } /*////////// TYPEOGRAPHY //////////*/ h1, h4 { font-family: Georgia, Times, serif; } h2, h3{ font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; } h1 { font-size: 32px; } h2 { font-size: 22px; } h3 { font-size: 16px; }
3132333435363738394041424344454647484950515253545556575859606162636465
h4 { font-size: 14px; } p { margin-bottom: 18px; } a { text-decoration: none; font-weight: bold; } a:hover { text-decoration: underline; } a:visited {} /*////////// HEADERS //////////*/ #header { /* border: 1px solid #000000; */ padding: 3px; margin: 5px; height: 0 auto; } /*////////// CONTENT //////////*/ #content { /* border: 1px solid #FF00FF; */ margin-top: auto; margin: 2%
66676869707172737475767778798081828384858687888990919293949596979899
100
} #mainbody { /*border: 1px solid #ff0000; */ margin: 5px; /*padding-top: 250px;*/ } #user1 { /* border: 1px solid #00ffff; */ margin: 5px; } #user2 { /*border: 1px solid #ff0000; */ margin: 5%; min-width: 375px; max-width: 480px; height: 0 auto; float: left; margin-bottom: auto; } #user3 { /*border: 1px solid #ff0000;*/ margin: 5%; min-width: 375px; max-width: 480px; height: 0 auto; float: left; margin-bottom: auto; }
101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135
#user4 { /* border: 1px solid #660000;*/ margin: 5px auto; height: 0 auto; float: left; } #user5 { /* border: 1px solid #660000;*/ margin: 5px auto; height: 0 auto; float: left; } #user6 { /*border: 1px solid #660000;*/ margin: 5px auto; height: 0 auto; float: left; } #user7 { /* border: 1px solid #009900; */ margin: 10px; height: 10%; } #breadcrumbs { /* border: 1px solid #CC0033;*/ height: 33px; margin: 5px; padding-left: 32px; padding-top: 8px;
136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170
background: url(../images/homei.gif) 0 0 no-repeat; } /*////////// SIDEBARS //////////*/ /*////////// NAV //////////*/ /*////////// FORMS //////////*/ /*////////// FOOTER //////////*/ #footer { /* border: 1px solid #009900; */ margin: 10px; height: 10%; } #footer1 { /*border: 1px solid #009900; */ margin: 5px; margin-top: 50px } #footer2 { /*border: 1px solid #000000;*/ margin: 5px; } #debug { /* border: 1px solid #cc0033; */ clear:both; }
171172173
/*////////// IMAGES //////////*/
สวนคา css กป็รับแตงเรียบรอยแลวในตอนที่ 1 ก็ไมตองปรับอะไรมากมายเพยีงแคเอาเสนออกแคนั้นเอง /*border: 1px solid #cc0033; */ โดยใชแทก็คอมเมนตปดไว คราวนี้กล็อง preview ดู เขาทาแคไหน
จากที่ไดออกแบบโครงสรางเรียบรอยแลวคราวนี้ก็มาใสลวดลาย ให template กันเพือ่ใหเกดิความสวยงาม
จาก template เปลา ๆ หนาขาว ๆ ก็จะเติมพื้นหลังใหกับ template โดยใชรูป
โดยการกําหนดที่ <body> โดยใส id ของ css ลงไป <body id="page_bg"> ตั้งชื่อเปน page_bg
css กําหนดเปน ออ เกือบลืม เอารูป ใสไวในโฟลเดอร images ดวยนะครับ ช่ือของไฟลรูปคือ page_bg.png
123
#page_bg { background: #fff url(../images/page_bg.png) repeat-x top left; }
สวยขึ้นมาหนอย พื้นหลังเปนสีเทา ๆ
กําหนดพื้นหลังเปนอยางอื่นก็ไดนะครับ เชนกําหนดพืน้หลังเปนสี
123
#page_bg { background: #000000; <---เปลี่ยนเปนโคดสี }
จากนั้นก็จะใสรูปสักหนอย โดยเอารูปดานลางนี้ใสที่บริเวณ header คลุมไปถึง user1
ช่ือรูป headerimg.jpg ขนาด 960*340 px เชนเดิมก็เอารปูนี้ใสไวในโฟลเดอร images
โดยจะเอา <div id="header1"> </div> ครอบสวน header, user1 ไว
123456789
1011121314
<div id="header1"> <?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 "header1" เพิ่ม ดังนี้
12345678
#header1 { position:relative; margin:0 auto; height:301px; width:744px; padding:64px 0 0 216px; background: transparent url(../images/headerimg.jpg) no-repeat top center; }
ก็จะออกมาเปนแบบนี้ครับ
หัวโลง ๆ แบบนี้ไมดีแน เตมิตนคริสมาส เขาไปที่หัวเวบ็สักหนอย โดยใชรูปนี ้
โดยการเพิ่ม <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" เพิม่ ดังนี ้
12345678
#headerimage { position:absolute; top:0; left:0; width:216px; height:365px; background: transparent url(../images/img.jpg) no-repeat top left; }
เร่ิมดูดีขึ้นมาทนัที
เพื่อใหรูปสามารถเปนล้ิงกเพือ่กลับสูหนาแรกไดดวยก็ใส <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 ไว
123
<div id="footer_holder"> <jdoc:include type="modules" name="footer" style="none" /> </div><!---end footer_holder--->
คราวนี้ ผมจะเอาเสนที่ระบุขอบเขตของพื้นที่ออก border: 1px solid #008080; ที่อยูในสวนตาง ๆ ของ css
จากนี้กใ็สเสนของที่ main content โดยใชรูปภาพที่ทําไวแลว เปนลักษณะเสนเล็ก ๆ ดังในรูปดานลาง
โดยใส <div id="maincolumn_full"> ครอบ <jdoc:include type="component" /> ไว
1234
<div id="maincolumn_full"> <jdoc:include type="message" /> <jdoc:include type="component" /> </div>
เขียน css maincolumn_full โดยใชรูปเสนเล็ก ๆ
12345
#maincolumn_full { width:960px; margin:0 0 10px 0; background: transparent url(../images/content_m_full.gif) repeat-y top center; }
จากนั้นก็ใสเสนลอมรอบ main content ไว ซาย ขวา บน ลาง
12345678
<div id="maincolumn_full"> <div class="top_full"> <div class="bottom_full"> <jdoc:include type="message" /> <jdoc:include type="component" /> </div> </div> </div>
เขียน css ดังนี้
12345678
.top_full { background: transparent url(../images/content_t_full.gif) no-repeat top center; } .bottom_full { padding: 10px; background: transparent url(../images/content_b_full.gif) no-repeat bottom center; }
ก็จะไดผลดังนี ้
รูปแบบ 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
123
<!--[if lte IE 6]> <link href="/joomla/<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?> /css/ie6.css" rel="stylesheet" type="text/css" /> <![endif]-->
ก็จะเปนแบบนี้
123456789
10111213141516171819202122232425262728293031323334
<?php defined('_JEXEC') or die('Restricted access'); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org /TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang=" <?php echo $this->language; ?>"> <head> <jdoc:include type="head" /> <link rel="stylesheet" href="/joomla/<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" /> <link rel="stylesheet" href="/joomla/<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" /> <link rel="stylesheet" href="/joomla/<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?> /css/template.css" type="text/css" /> <?php if ($this->countModules('user1')): ?> <?php if ($this->params->get('user1Type') == 'css'): ?> <link rel="stylesheet" href="/joomla/<?php echo $this->baseurl ?>/css/sosdmenu.css" type="text/css" /> <script language="javascript" type="text/javascript" src="/joomla/<?php echo $this->template ?> /js/cssmenu.js"></script> <?php else: ?> <link rel="stylesheet" href="/joomla/<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?> /css/sosdmenu.css" type="text/css" /> <script language="javascript" type="text/javascript" src="/joomla/<?php echo $this->template ?>/templates/ <?php echo $this->template ?>/js/moomenu.js"></script> <?php endif; ?> <?php endif; ?> <!--[if lte IE 6]> <link href="/joomla/<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?> /css/ie6.css" rel="stylesheet" type="text/css" /> <![endif]-->
3536373839404142434445464748495051525354555657585960616263646566676869
</head> <body id="page_bg"> <a name="top"></a> <div id="mainbody"> <div id="header1"> <div class="logo"><a href="/joomla/index.php"><?php echo $mainframe->getCfg('sitename') ;?></a></div> <a href="/joomla/index.php" title="กลับสูหนาแรก"><div id="headerimage"></div></a> <?php if ($this->countModules('user1')) : ?> <div id="user1"> <div id="mainnav"> <jdoc:include type="modules" name="user1" style="xhtml" /> </div> </div> <?php endif; ?> <?php if ($this->countModules('header')) : ?> <div id="header"> <jdoc:include type="modules" name="header" style="xhtml" /> </div> <?php endif; ?> </div> <?php if ($this->countModules('user2 or user3')) : ?> <?php if ($this->countModules('user2')) : ?> <div id="user2"> <jdoc:include type="modules" name="user2" style="xhtml" /> </div> <?php endif; ?> <?php if ($this->countModules('user3')) : ?> <div id="user3"> <jdoc:include type="modules" name="user3" style="xhtml" /> </div>
707172737475767778798081828384858687888990919293949596979899
100101102103104
<?php endif; ?> <?php endif; ?> <div id="maincolumn_full"> <div class="top_full"> <div class="bottom_full"> <jdoc:include type="message" /> <?php if($this->params->get('showComponent')) : ?> <jdoc:include type="component" /> <?php endif; ?> </div> </div> </div> <div id="userall"> <div id="breadcrumbs"> <jdoc:include type="modules" name="breadcrumb" style="raw" /> </div> </div> <div id="userall"> <table width="980"> <tr> <?php if ($this->countModules('user4 or user5 or user6')) : ?> <?php if ($this->countModules('user4')) : ?> <td> <jdoc:include type="modules" name="user4" style="raw" /> </td> <?php endif; ?> <?php if ($this->countModules('user5')) : ?> <td> <jdoc:include type="modules" name="user5" style="raw" /> </td>
105106107108109110111112113114115116117118119120121122
<?php endif; ?> <?php if ($this->countModules('user6')) : ?> <td> <jdoc:include type="modules" name="user6" style="raw" /> </td> <?php endif; ?> <?php endif; ?> </tr> </table> </div> <div id="userall"> <div id="user7"> <jdoc:include type="modules" name="user7" style="xhtml" /> </div> </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
123456789
10111213141516171819202122232425262728293031323334
/*////////// GENERAL //////////*/ body { margin: 0 auto; height: 0 auto; font-family: Tahoma, Verdana, Arial, sans-serif; line-height: 1.3em; font-size: 11px; color: #666666; background: #fff; } /*////////// TYPEOGRAPHY //////////*/ h1, h4, h2, h3{ font-family: Georgia, Times, serif; } h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited { font-weight: normal; font-style: normal; text-decoration: none; } a img, a img.preview { border: none; text-decoration: none; } /*////////// HEADERS //////////*/
3536373839404142434445464748495051525354555657585960616263646566676869
.logo { position:absolute; top:26px; right:0; width:800px; height:25px; padding:0; margin:0; overflow:hidden; text-align:right; } #page_bg { background: #fff url(../images/page_bg.png) repeat-x top left; } #header { padding-top: 118px; margin: 5px; height: 0 auto; } #header1 { position:relative; margin:0 auto; height:301px; width:744px; padding:64px 0 0 216px; background: transparent url(../images/headerimg.jpg) no-repeat top center; } #headerimage {
707172737475767778798081828384858687888990919293949596979899
100101102103104
position:absolute; top:0; left:0; width:216px; height:365px; background: transparent url(../images/img.jpg) no-repeat top left; } /*////////// CONTENT //////////*/ #content { margin-top: auto; margin: 2% } #mainbody { margin: 5px; } #user1 { margin: 0 auto; } #user2 { margin: 0 0 0 14%; min-width: 375px; max-width: 480px; height: 0 auto; float: left; margin-bottom: 2%; } #user3 { margin: 0 0 0 14%; min-width: 375px;
105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139
max-width: 480px; height: 0 auto; float: left; margin-bottom: 2%; } #userall { margin: 0 0 0 14%; } #breadcrumbs { height: 33px; margin: 5px; width:770px; padding-left: 32px; padding-top: 8px; background: url(../images/homei.gif) 0 0 no-repeat; } /*////////// SIDEBARS //////////*/ /*////////// NAV //////////*/ #maincolumn_full { width:960px; margin: 0 0 0 14%; background: transparent url(../images/content_m_full.gif) repeat-y top center; } .top_full { background: transparent url(../images/content_t_full.gif) no-repeat top center; } .bottom_full { padding: 10px; background: transparent url(../images/content_b_full.gif) no-repeat bottom center;
140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174
} /*////////// FORMS //////////*/ /*////////// FOOTER //////////*/ #footer { width:960px; height:44px; text-align:center; margin:0 0 20px; background: transparent url(../images/footer.png) no-repeat top center; } #footer_holder { height:26px; width:936px; color: #fff; font-weight:400; line-height: 25px; padding:0 12px; margin:0 auto; overflow:hidden; } #footer a { color: #fff; font-weight:400; text-decoration: none; } #footer a:hover { text-decoration:underline;
175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209
} a.footer123:link, a.footer123:visited { color: #000; font-family: Tahoma, Arial, sans-serif; text-decoration: underline; } #f123 { text-align: right; width: 100%; margin: 0 auto; font-family: Tahoma, Arial, sans-serif; } .f123 { text-align: right; font-family: Tahoma, Arial, sans-serif; text-decoration: none; } .f123_bg { background:url(../images/123_bg.png); width:134px; height:30px; text-align:center; padding: 0 3px; } .f123_1 { display: block; font-size: 10px; font-family: Tahoma, Arial, sans-serif; color: #666; text-align: left; padding: 0 0 2px 4px; }
210211212213214215216217218219220221222223224225226227228229
a.link_123:link, a.link_123:visited { font-size: 15px; font-family: Tahoma, Verdana,Arial,Helvetica,sans-serif; color: #797979; text-decoration:none; font-weight: 700; } a.link_123:hover { font-size: 15px; font-family: Tahoma, Verdana,Arial,Helvetica,sans-serif; color: #797979; text-decoration:none; font-weight: 700; } #debug { padding: 2px } /*////////// IMAGES //////////*/
multiple IE โปรแกรมที่บรรจุ Internet Explorer หลาย ๆ เวอรช่ันเอาไวขางใน ทําใหคุณสามารถใช ie หลายๆ เวอรช่ันเพื่อทดสอบเวบ็ไซตไดในเครื่องเดียวกัน ดรูายละเอียดเพิม่เติมที่นี่ http://tredosoft.com/Multiple_IE
เมื่อดูในทกุเบราเซอรลงตัวดีแลว จากนั้นกม็าสรางรูปยอ สําหรับ template โดยใชโปรแกรม photoshop ขนาดรูปไมตองใหญนักประมาณ 200*150px บันทึกเปนไฟลช่ือ template_thumbnail.png เก็บไวในโฟลเดอรเดียวกนั
จากนั้นก็สรางรายชื่อไฟล วาใน template มีไฟลอะไรมั่ง เพื่อใชในการตดิตั้ง แลวทําการบันทึกรายชือ่ไฟลตาง ๆ ที่มีใน template ไวใน templateDetails.xml
บางทานอาจจะมีไฟลรูปภาพเยอะมาก อาจจะตกหลนในการเก็บรายชื่อ มีเครื่องมือที่ชวยลิสตรายชื่อไฟล ใหก็อปปโคดดานลางแลว เซฟเปนไฟลช่ือ remove.php
1234567
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org /TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>templateDetails.xml generator REMOVE PRIOR TO PACAKGING!!</title> </head>
89
1011121314151617181920212223242526272829303132333435363738
<body> <h2>Remove this file prior to packaging your template!</h2> <?php $dir="html"; // change this to template directory where files are stored. "." = root. if ($dir_list = opendir($dir)){ if ($dir == "."){ $dir = ""; }else{ $dir = $dir."/"; }//if/else while(($filename = readdir($dir_list)) !== false){ if ($filename != ".DS_Store" && $filename != "." && $filename != ".." && $filename != "remove.php" && $filename != "css" && $filename != "html" && $filename != "images" && $filename != "js"){ ?> <filename></filename><br/> <?php }//if }//while closedir($dir_list); }//if ?> </body> </html>
นําไปวางไวในโฟลเดอรของ template จากนั้นก็รันไฟลนี้ผานทางเบราเซอร แกไขสวนนีน้ิดหนอยเพื่อใหเขาไปลิสตรายช่ือไฟลในโฟลเดอรที่ลึกกวา นี้
12
$dir="html"; // change this to template directory where files are stored. "." = root.
แกไขที่ "html" ใหเปนชื่อโฟลเดอรที่ตองการจะลิสตรายช่ือไฟล หรือกําหนด เปน (.) จุด เพื่อเปน root โฟลเดอร
ก็จะแสดงผลลิสตรายช่ือไฟลออกมาใหแถมใสแท็กคําสั่งใหอีกตางหากก็ทํา การก็อปปรายช่ือไฟลดงักลาวมาใสไวในไฟล templateDetails.xml
จากนั้นก็ทําการบีบไฟลทั้งหมดใหเปนไฟลซิป (zip)
จากนั้นก็ลองติดตั้งด ู
ถาขึ้น Install Template Success ก็แสดงวาผาน ถา error ลองตรวจสอบวาไฟลอะไรขาดไปหรือเปลาครับ
จบครับ ขอใหสนุกกับการออกแบบเว็บไซต
tip
การแทรกไฟลแฟลชใหแสดงใน template
123456789
1011121314
<div id="flashHeader"> <object data="<?php echo $this->baseurl; ?>/templates/ <?php echo $this->template; ?>/green-flash-sample.swf" type="application/x-shockwave-flash" width="320" height="75" FlashVars="itemID=<?php echo $newItemid;?>"> <param name="movie" value="<?php echo $this->baseurl; ?> /templates/<?php echo $this->template; ?>/green-flash-sample.swf" /> <param name="menu" value="false" /> <param name="FlashVars" value="itemID=<?php echo $newItemid;?>"/> <param name="wmode" value="transparent" /> <param name="quality" value="best" /> </object>
css (หรือไมจําเปนตองใช css ก็ได)
123456
#flashHeader{ margin: 0; margin-top: 1px; width: 320px; height: 75px; }
เปลี่ยนตรงชื่อไฟลแฟลช green-flash-sample.swf เปนของคุณเอง กําหนดความกวางความสูงตามใจชอบ
