มี 506 บุคคลทั่วไป และ 1 สมาชิก ออนไลน์

Template Design for joomla 1.5
การออกแบบ joomla 1.5 template ตอนที่ 1 PDF พิมพ์ อีเมล
( 3 Votes )
เขียนโดย Administrator   
วันพุธที่ 06 มกราคม 2010 เวลา 20:23 น.

เอาล่ะ สั่งสมประสบการณ์มาพอสมควร joomla แบบเบสิกคงจะได้กันหมดแล้ว คราวนี้มาพูดถึงเรื่องการออกแบบ joomla 1.5 template กันดีกว่า ความจริงผมก็ไม่ได้เก่งกาจอะไรนักหนานะครับเพียงแต่ได้ใช้งาน joomla บ่อย มาก ๆ ตั้งแต่ก่อนเริ่มที่จะมาเป็น joomla ด้วยซ้ำ เลยมีความชำนาญสักหน่อย แต่เรื่องเขียนโค๊ดโปรแกรม ของผมนี่คงจะไม่ค่อยได้เรื่องเท่าไหร่ อาศัยแบบงู ๆ ปลา ๆ ไปเรื่อย ๆ จะให้เขียนโค๊ดแบบผู้ที่เขาเรียนมาโดยตรงคงไม่ได้ครับ ผมเองก็ไม่ได้เรียนมาโดยตรงทางนี้ซะด้วย อาศัยศึกษาด้วยตนเอง มีเวลาว่างเมื่อไหร่ก็จะมานั่งศึกษากัน ส่วนใหญ่ก็จะไม่ค่อยว่างมานั่งศึกษาการเขียนโปรแกรมอย่างจริงจัง เพราะต้องทำงานหาเงินด้วยอ่ะ พอดีได้หนังสือมาเล่มหนึ่ง เป็นของต่างประเทศฝรั่งเขียนเรื่องการออกแบบ joomla 1.5 template design ก็เลยนั่งอ่าน ๆ ก็ อ๋อ ๆ เออ มันเป็นอย่างนี้ ต้องเอาตรงนี้มาใส่ตรงนั้น เอาตรงนั้นไปใส่จะเป็นอย่างนี้ อืม ๆ พอได้ ๆ ก็เลยเอามาเล่าสู่กันฟัง เอาล่ะโม้มาก็มาก มาดูก่อนควรจะมีพื้นฐานอะไรบ้างสำหรับการที่จะออกแบบ joomla 1.5 template ได้นี่ ไม่ต้องเอาเก่งนะครับ (หรือจะเก่งก็ได้ไม่ว่ากัน) อันที่จริงจะได้คุยกันรู้เรื่องไงครับว่าที่ผมสื่อไปนี้มันคืออะไร

 

พื้นฐานที่ควรมี

1.ความรู้พื้นฐานด้าน HTML, XHTML (เอกสารที่เกี่ยวกับโค๊ด HTML, XHTML หาอ่านได้ที่นี่)

2.ความรู้พื้นฐานด้าน php

3.ความรู้พื้นฐานด้าน CSS (เอกสารที่เกี่ยวกับโค๊ด 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 เอาไว้ทดสอบ หน้าเว็บเพจ

 

ก่อนอื่นก็ต้องมีไฟล์พื้นฐานที่ต้องมีก่อนก็คือ

 

 

แก้ไขล่าสุด ใน วันพุธที่ 28 เมษายน 2010 เวลา 21:10 น.
 
การออกแบบ joomla 1.5 template ตอนที่ 2 PDF พิมพ์ อีเมล
( 1 Vote )
เขียนโดย Administrator   
วันศุกร์ที่ 08 มกราคม 2010 เวลา 22:13 น.

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

จะเห็นว่าการกำหนดหน้าตาของ template นั้น ขึ้นอยู่กับการออกแบบใน css เป็นส่วนใหญ่ คราวนี้ก็ทำการใส่คำสั่งสำหรับโหลดโมดูล ให้กับ template

คำสั่งที่จะใช้ jdoc:include

รูปแบบ Component

View source
<jdoc:include type="component" />

องค์ประกอบนี้ควรจะปรากฏในองค์ประกอบ <body> ของ template เพื่อแสดงเนื้อหา/บทความของ เว็บไซต์

 

รูปแบบ Head

View source
<?php
defined('_JEXEC') or die('Restricted access');
?>

จะเห็นว่าในไฟล์ index.php หรือในเกือบทุก ๆ ไฟล์ของ joomla จะมีบรรทัดนี้อยู่บนส่วนต้นของหน้าโค๊ด มีไว้ทำอะไร มีไว้เพื่อป้องกันการรันไฟล์นี้จากเบราเซอร์โดยตรง
เช่น เมื่อคุณพิมพ์ URL ในเบราเซอร์เป็น http://www.youdomain.com/templates/youtemplate/index.php จะขึ้นหน้าขาว ๆ แล้วมีคำว่า Restricted access อยู่เท่านั้น
เหตุผลด้านความปลอดภัยนั้นเอง

และส่วนที่จะแสดงผลใน เบราเซอร์

องค์ประกอบนี้ควรจะปรากฏในองค์ประกอบ <head> ของ template เพื่อแสดงลักษณะสคริปต์และองค์ประกอบของ meta ที่ใช้เชื่อมโยงกับเพจปัจจุบัน

View source
<jdoc:include type="head" />

 

แก้ไขล่าสุด ใน วันพุธที่ 28 เมษายน 2010 เวลา 22:22 น.
 
การออกแบบ joomla 1.5 template ตอนที่ 3 PDF พิมพ์ อีเมล
( 1 Vote )
เขียนโดย Administrator   
วันเสาร์ที่ 09 มกราคม 2010 เวลา 20:34 น.

ต่อจากตอนที่ 2

 

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

 

 

 

 

แก้ไขล่าสุด ใน วันพุธที่ 28 เมษายน 2010 เวลา 22:33 น.
 
การออกแบบ joomla 1.5 template ตอนที่ 4 จบ PDF พิมพ์ อีเมล
( 0 Votes )
เขียนโดย Administrator   
วันอังคารที่ 12 มกราคม 2010 เวลา 20:24 น.

ต่อจากตอนที่ 3

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

 

 

 

แก้ไขล่าสุด ใน วันพุธที่ 28 เมษายน 2010 เวลา 22:59 น.
 
รูปแบบโมดูลโครม Module chrome PDF พิมพ์ อีเมล
( 1 Vote )
เขียนโดย Administrator   
วันศุกร์ที่ 07 พฤษภาคม 2010 เวลา 22:11 น.

คราวที่แล้วกล่าวถึง การจัดรูปแบบ menu ซึ่งเป็นเมนูแบบ style XHTML จะประกอบไปด้วย ul li

View source
 
 <div id="user1">
 <jdoc:include type="modules" name="user1" style="xhtml" />
 </div>
 

คราวนี้มาดูว่าตรง style="....." แต่ละอันมีรูปแบบการแสดงผล (output) ออกมาเป็น html อย่างไร มีกี่ style เพื่อเป็นแนวทางในการออกแบบ joomla template 1.5

Module chrome โมดูลโครมคืออะไร (เกิดมาพึ่งเคยได้ยิน) พออ่านดูคราว ๆ เขาบอกว่าเป็นรูปแบบที่ใช้ควบคุม output ที่แสดงออกทาง html เพื่อให้ง่ายต่อการกำหนดรูปแบบและออกแบบ

View source
<jdoc:include type="modules" name="user1" style="custom" />

ใช้กำหนดใน 'style' attribute  ตรง custom คือ Module chrome
name="user1" คือชื่อของตำแหน่ง (position)

 

แก้ไขล่าสุด ใน วันเสาร์ที่ 08 พฤษภาคม 2010 เวลา 15:53 น.
 
เครื่องมือสำหรับนักพัฒนา PDF พิมพ์ อีเมล
( 2 Votes )
เขียนโดย Administrator   
วันศุกร์ที่ 07 พฤษภาคม 2010 เวลา 20:17 น.

google chrome ie opera

  พูดถึงเครื่องมือที่นักพัฒนาเว็บชอบกัน ก็คือ firebug เพราะสามารถทำการกำหนดค่าต่าง ๆ ลงบนหน้าเว็บเพื่อทำสอบ ได้เลยก็ก่อนที่จะไปเปลี่ยนโค๊ดจริงๆ ในไฟล์ ทำให้ผู้ออกแบบเห็นถึงสภาพจริง ๆ ในขณะนั้นว่าหน้าตาหรือส่วนนั้น ๆ จะออกมาเป็นอย่างไรในสภาพจริง ไม่ต้องมานั่งทางในดู (นึกเอา) ว่าควรจะกำหนดค่าเท่าไหร่เห็น ๆ กันไปเลย ณ ขณะนั้น แต่นอกจาก firebug แล้วมีอย่างอื่นอีกไหม ตอบว่ามีครับ พึ่งค้นพบเหมือนกัน (พึ่งเปิดเจอครับปกติใช้แต่ firefox ก็เลยใช้แต่ firebug) เครื่องมือนี้ถูกเรียกว่า developer tools ซึ่งมีใน google chrome, opera และ ie

 

 

แก้ไขล่าสุด ใน วันเสาร์ที่ 08 พฤษภาคม 2010 เวลา 15:54 น.
 
การจัดรูปแบบ menu PDF พิมพ์ อีเมล
( 3 Votes )
เขียนโดย Administrator   
วันจันทร์ที่ 26 เมษายน 2010 เวลา 13:18 น.

บทความที่เกี่ยวข้อง การออกแบบ joomla template 1.5

คราวที่แล้วได้เสนอการออกแบบ template ไป ซึ่งเป็นรายละเอียดโดยรวมใหญ่ ซึ่งไม่ได้ลงรายละเอียดการออกแบบ เล็ก ๆ ที่มีรายละเอียดปลีกย่อยเกี่ยวกับ css มากนักคราวนี้มาดูกันว่า จะกำหนด css อย่างไรให้กับ main menu ที่เป็นเมนูธรรมดา ๆ ของเดิม ๆ ของ joomla แสดงเป็นแบบ list หรือเป็นแบบเรียงแถวลงมา โมดูลที่ใช้คือ mod_mainmenu กำหนด Menu Style เป็นแบบ list

menu style

 

ที่ template กำหนด position ให้เป็น user1

View source
<?php if($this->countModules('user1')) { ?>
 <div id="user1">
 <jdoc:include type="modules" name="user1" style="xhtml" />
 </div>
<?php } ?>

โดยในไฟล์ index.php ของ template จะกำหนดไว้แค่นี้ ต่อจากนี้ไปก็เป็นส่วน ของการออกแบบ css เท่านั้น

 

แก้ไขล่าสุด ใน วันพฤหัสบดีที่ 29 เมษายน 2010 เวลา 21:56 น.
 
ว่าด้วยเรื่อง countModules PDF พิมพ์ อีเมล
( 3 Votes )
เขียนโดย Administrator   
วันเสาร์ที่ 27 มีนาคม 2010 เวลา 14:39 น.

เคยสงสัยหรือไม่เวลาเปิดใช้งานโมดูลในตำแหน่ง position นั้นแล้ว preview ดู โมดูลพื้นที่นั้นก็โผล่ขึ้นมา พอปิดการทำงาน พื้นที่นั้น กลับหายไป module position อื่น ๆ กลับขึ้นมาแทน

เช่น เปิดใช้งาน (enable) module position 1 และ module position 2 ไว้ดังรูป

 

 

แก้ไขล่าสุด ใน วันศุกร์ที่ 28 พฤษภาคม 2010 เวลา 00:42 น.
 
การใช้งาน firebug PDF พิมพ์ อีเมล
( 2 Votes )
เขียนโดย Administrator   
วันอังคารที่ 02 มีนาคม 2010 เวลา 13:13 น.

เห็นถามเกี่ยวกับการเพิ่มลด อะไรต่อมิอะไรใน template กันมามากพอสมควร ไอ้เราก็บอกไม่ถูก ต้องมีไฟล์ template ให้พินิจวิเคราะห์ ถึงจะบอกได้ถูกว่าควรจะเพิ่มที่ตำแหน่งไหนบ้าง ก็เลยแนะนำโปรแกรมนี้เอาไว้ใช้งานกันโปรแกรมนี้ชื่อว่า firebug เป็นโปรแกรมติดตั้งก็มีแต่ที่ผมใช้เป็น add on ของ fire fox จะสะดวกมากกว่า ก่อนอื่นก็เข้าไปดาวน์โหลดแล้วติดตั้งที่  https://addons.mozilla.org/en-US/firefox/addon/1843

คลิ๊กที่ add to firefox โปรแกรมก็จะดาวน์โหลดและติดตั้งให้จากนั้นก็ restart fire fox ก็จะสามารถใช้งานโปรแกรมได้แล้วครับ

 

แก้ไขล่าสุด ใน วันศุกร์ที่ 05 มีนาคม 2010 เวลา 00:38 น.
 
การใช้ css ควบคุมรูปแบบใน content blog PDF พิมพ์ อีเมล
( 2 Votes )
เขียนโดย Administrator   
วันพฤหัสบดีที่ 28 มกราคม 2010 เวลา 21:19 น.

 

หัวข้อที่เกี่ยวข้อง (การออกแบบ joomla 1.5 template)

content blog คือส่วนที่เป็นเนื้อหา มีส่วนของหัวข้อของบทความ พื้นที่แสดงเนื้อหา ชื่อผู้เขียน วันที่ทำการสร้างบทความ วันที่ทำหารอัพเดทบทความ และ read more...

 

 

แก้ไขล่าสุด ใน วันพุธที่ 28 เมษายน 2010 เวลา 23:32 น.
 
RSS 2.0 Joomla Articles
twitter
Creative Commons License