เริ่มต้นการพัฒนา การออกแบบ

หามาฝากจากอินเตอร์เน็ตครับ .....ลืมแล้วว่าจากเว็บไซต์ใด...ก็ขออภัยไว้ ณ ที่นี้ครับเพื่อการศึกษาเท่านั้นครับ...มาเริ่มกันเลยนะครับ!!!

สอนการสร้าง Template Mambo

สอนการสร้าง Template Mambo โดยใช้โปรแกรม  Macromedia Dreamweaver MX

 วันนี้เราจะมาดูวิธี  การสร้าง Template Mambo แบบกำปั้นทุบดินกันเลย ขอบอกก่อนนะครับว่า วิธีการสร้าง Template Mambo ให้ดูออกมาสวยงามนั้น มันเป็นเรื่องของ ไอเดีย หรือการออกแบบ  ของแต่ละคน ผมคงจะสอนได้แค่แนวทางในการสร้างเท่านั้นนะครับ อย่าลืมนะครับ ถ้าผมสอนแล้ว ใครที่สร้างเป็นก็อย่าเก็บเอาไว้ คนเดียว ส่งมาให้คนอื่นได้ชมผลงานของท่านบ้างนะครับ  ทีนี้เรามาดูวิธี  การสร้าง Template Mambo แบบกำปั้นทุบดินกันเลย

คำสั่ง โหลด Module
                ในการสร้าง Template Mambo นั้นเราต้องรู้คำสั่งในการเรียก Module มาใช้งานนะครับ เรามาดูดีกว่าว่า คำสั่งในการเรียก Module มีอะไรบ้าง
คำสั่ง ในการโหลด Module จะถูกเขียนโดยภาษา PHP  ตรงนี้ถ้าท่านไม่มีความรู้ ในการเขียนโปรแกรมด้วย PHP ก็ไม่เป็นไรนะครับ  ให้ทำตามผมแล้วกัน   Mambo  เวอร์ชั่น 5.4.1-5.4.2  นั้น จะมีคำสั่ง โหลด  มีอะไรบ้าง มาดูกัน
·        เมนู  left               ใช้คำสั่ง   <?php mosLoadModules ( 'left' );  ?>
·        เมนู  right             ใช้คำสั่ง   <?php mosLoadModules ( 'right' ); ?>
·        เมนู  top               ใช้คำสั่ง   <?php mosLoadModules ( 'top' ); ?>
·        เมนู  bottom         ใช้คำสั่ง   <?php mosLoadModules ( 'bottom' ); ?>
·        เมนู  inset             ใช้คำสั่ง   <?php mosLoadModules ( 'inset' ); ?>
·        เมนู  banner         ใช้คำสั่ง   <?php mosLoadModules ( 'banner' ); ?>
·        เมนู  header         ใช้คำสั่ง   <?php mosLoadModules ( 'header' ); ?>
·        เมนู  footer           ใช้คำสั่ง   <?php mosLoadModules ( 'footer' ); ?>
·        เมนู  newsflash     ใช้คำสั่ง   <?php mosLoadModules ( 'newsflash' ); ?>
·        เมนู  legals           ใช้คำสั่ง   <?php mosLoadModules ( 'legals' ); ?>
·        เมนู  pathway       ใช้คำสั่ง   <?php mosLoadModules ( 'pathway' ); ?>
·        เมนู  toolbar         ใช้คำสั่ง   <?php mosLoadModules ( 'toolbar' ); ?>
·        เมนู  cpanel          ใช้คำสั่ง   <?php mosLoadModules ( 'cpanel' ); ?>
·        เมนู  user1           ใช้คำสั่ง   <?php mosLoadModules ( 'user1' ); ?>
                              ถึง
·        เมนู  user9          ใช้คำสั่ง   <?php mosLoadModules ( 'user9' ); ?>
·        เมนู  advert1       ใช้คำสั่ง   <?php mosLoadModules ( 'advert1' ); ?>
                              ถึง
·        เมนู  advert3       ใช้คำสั่ง   <?php mosLoadModules ( 'advert3' ); ?>
·        เมนู  icon             ใช้คำสั่ง   <?php mosLoadModules ( 'icon' ); ?>
·        เมนู  debug          ใช้คำสั่ง   <?php mosLoadModules ( 'debug' ); ?>
·        เมนู ที่ใช้ในการแสดง sitename   ใช้คำสั่ง   <?php echo $mosConfig_sitename; ?>
·        เมนู ที่ใช้ในการแสดง  path หรือทางเดินของหน้าเว็บนั้น   ใช้คำสั่ง   <?php mosPathWay(); ?>
·        เมนู ที่ใช้ในการแสดง  หน้า Fontpage  ใช้คำสั่ง   <?php mosMainBody(); ?>

เมื่อเราทราบ คำสั่งในการ โหลดโมดูลต่างๆ ขึ้นมาใช้งาน แล้ว ทีนี้ก็มาถึง การออกแบบ Template Mambo กันนะครับ

1.       ขั้นแรก ก็เปิดโปรแกรม  Macromedia Dreamweaver MX ขึ้นมาใช้งานเลย แต่ถ้ายังไม่มี ให้ไป ดาวน์โหลดโปรแกรม ได้ที่ www.macromedia.com 

2.       ไปที่  เมนูคำสั่ง File > New...    เพื่อเตรียมสร้างหน้าเว็บเพจ และทำการบันทึก ไว้ใน ไดเร็คทรอรี่  C:\AppServ\www\Mambo\templates  (สำหรับคนที่ติดตั้ง โปรแกรม Appserv แล้ว ใครที่ยังไม่ติดตั้ง ให้ไป ดาวน์โหลดได้ที่  ) เออ! อย่าลืมสร้างโฟล์เดอร์ใหม่ ก่อนนะครับ การตั้งชื่อโฟลเดอร์ ก็แล้วแต่คุณนะครับ ส่วนชื่อไฟล์ ตั้งชื่อว่า index.php

3.        สร้าง ไตเติ้ลเว็บ
การสร้างไตเติ้ลเว็บ ให้ใส่ข้อความ อะไรก็ได้ที่เราต้องการ ในช่อง Title ตามรูปที่ 1

 

 

 

รูปที่ 1
4.    
การใส่ตาราง หรือ สร้าง Teble ให้กับหน้าเว็บเพจ  ตามรูปที่ 2

 


รูปที่ 2
5.   
การใส่ตารางซ้อนตาราง และการ รวมเซลล์
การใส่ตารางซ้อน ตารางก็ทำคล้ายกับข้อ 4 เพียงแต่ให้เคอร์เซอร์  กระพริบอยู่ในช่องนั้นๆ (เคอร์เซอร์ คือ จุดที่กระพริบ อยู่บนหน้าจอ เวลาที่เราเอาเมาส์ไปวางไว้)


รูปที่ 3

6.  
การเพิ่มเซลล์ในตาราง
-    คลิกที่เซลล์ ที่ต้องการเพิ่มเซลล์ และทำตามขั้นตอนดังรูป ที่ 4



  รูปที่ 4

7.    
ทำการสร้าง หน้าเว็บ ให้เป็นดังรูป ที่ 5


  รูปที่ 5
เมื่อ เราได้โครงสร้างเว็บ แล้ว ขั้นตอนต่อไปเป็นการ  ใส่คำสั่ง โหลด Module ให้กับเว็บ ของเรานะครับเพื่อความง่าย ในการเขียนคำสั่ง ให้สังเกตุ ว่าหน้าโปรแกรม  Macromedia Dreamweaver MX  เป็นเหมือนรูปที่ 5 หรือเปล่า ถ้าไม่เหมือน ให้คลิ๊กที่รูป 


   นะครับ แล้วก็ คลิ๊กตกลง  ทีนี่ก็พร้อม แล้วในการ  ใส่คำสั่ง โหลด Module ให้กับเว็บ ครับ


-          ให้คลิ๊ก ที่ตำแหน่ง ที่เราต้องการใส่  คำสั่ง โหลด Module แล้วสังเกตุ ด้านบน  จะขึ้น เคอร์เซอร์ ที่บรรทัด ที่เราต้องแทรก คำสั่ง โหลด Module  ที่นี้เราก็เอาโมดูลที่เราต้องการ จะแสดง  มาใส่ ในบรรทัดนั้น  อย่างเช่น เราต้องการ แสดง Module โหลด banner ก็ให้ใส่ <? php mosLoadModules ( 'banner' ); ?> เป็นต้น  และทีนี้ อยากจะใส่ Module อื่นตรงไหน ก็ตามใจ ท่านละครับ
ตัวอย่าง



            ยังไม่จบนะครับ ยังไม่เสร็จ  เหลืออีกขั้นตอนสุดท้าย  ให้สร้างไฟล์ใหม่ขึ้นมา ตั้งชื่อไฟล์ ว่า  templateDetails.xml และใส่คำสั่ง เหล่านี้เข้าไป


<?xml version="1.0" encoding="iso-8859-1"?>
<mosinstall type="template" version="4.5.1">
  <name>oa2</name> //แก้ไขตามชื่อของเรา เองได้
  <creationDate>01/04/2005</creationDate> > //แก้ไขวันที่ของเรา เองได้
  <author>oa2</author> //แก้ไข
  <copyright>This template is released under GNU/GPL License.</copyright>
  <authorEmail> [email protected]อีเมลนี้จะถูกป้องกันจากสแปมบอท แต่คุณต้องเปิดการใช้งานจาวาสคริปก่อน</authorEmail> //แก้ไขเมล์ของเรา เองได้
  <authorUrl>www.mambothailand.com</authorUrl> //แก้ไขตามฃื่อเว้บของเรา เองได้
  <version>1.0</version> //แก้ไขเวอร์ชั่นของเรา เองได้
  <description> EASY YOUR STYLE</description>  //แก้ไขของเรา เองได้
  <files>
    <filename>index.php</filename>
  </files>
</mosinstall>

 

จบแล้วครับ จะหามาฝากใหม่นะครับ  (ทดลองครับ)