PostNuke หน้าเว็บตรงกลาง

  การจัดการเกี่ยวกับ หน้าเว็บที่อยู่ตรงกลางของ PostNuke และเวลาลิ้งค์แล้วไม่เปิดเป็นหน้าเว็บเพจใหม่
คือให้อยู่ใน PostNuke เหมือนเดิมนั้น ผมได้ศึกษาจากท่านอาจารย์หลายท่าน และ ทดลองทำ จนเป็นที่พอใจ(ของผมเอง) ดูตัวอย่างที่ www.sritani.ac.th  ครับ


ภาพตัวอย่างหน้าเว็บโรงเรียนโนนสูงศรีธานี

    ขั้นตอนการทำ ผมทำแบบนี้ครับ(ท่านอื่นอาจจะมีวิธีที่ดีกว่าก็มาแลกเปลี่ยนกันนะครับ)
1.  สร้างเว็บเพจที่เราต้องการให้ขึ้นในช่องตรงกลางของ PostNuke ครับ แล้ว Save ในโฟลเดอร์ที่เราต้องการ อย่างเช่น ผมตั้งชื่อโฟลเดอร์เป็น new-web ภายในโฟลเดอร์นี้ก็จะมี โฟลเดอร์ย่อยอีก 1 โฟลเดอร์ ชื่อ image เพื่อเก็บรูปภาพ และก็ไฟล์ html 1 ไฟล์ ผมตั้งชื่อว่า home ครับ (การตั้งชื่อนั้นก็แล้วแต่ละคนจะตั้งครับ แต่ที่สำคัญต้องจำให้ได้ครับโดยเฉพาะผมเองชอบลืม)


รูปภาพแสดงโฟลเดอร์ ภายใต้โฟลเดอร์ new-web

2.  ในการจัดการหน้าเว็บเพจชื่อ home.html ของผมนั้นจะใช้ตารางครับ โดยตั้งค่าของตารางดังนี้ครับ


รูปแสดงการตั้งค่าตาราง

        การตั้งค่าความกว้างของตาราง ผมตั้งให้เป็น 100% เพราะว่าเวลาที่เข้าไปอยู่ในชองกลางของ PostNuke ก็จะยืดหดได้พอดีกับหน้ากลาง ส่วนอื่นๆ ก็แล้วแต่ละคนจะออกแบบครับ

3.  การจัดการรูปภาพที่เรานำมาใส่ไว้ในตาราง ปกติแล้วรูปภาพที่เรานำมาแสดงนั้นจะอยู่ที่ โฟลเดอร์ชื่อ image เวลาที่เราทำงานกับเครื่องที่เราสร้างหน้าเว็บเพจขณะนั้น เราจะเห็นรูปภาพที่เรานำมาวางในช่องที่เป็นตารางตามปกติ แต่เมื่อเรา Upload ขึ้นไปใน PostNuke แล้วกลับมองไม่เห็นภาพครับ เนื่องจาก Path ไม่ถูกต้องครับ เราต้องทำการเปลี่ยน Path ใหม่ เป็นดังนี้ครับ ./new-web/image/xxxxx.jpg (xxxxxเป็นชื่อไฟล์ภาพของแต่ละภาพนะครับ)ทำให้เกิดมองไม่เห็นภาพในโปรแกรมสร้างเว็บ ดังในภาพด้านล่างครับ


รูปแสดง เวลาเราเปลี่ยนPath เป็น ./new-web/image/xxxxx.jpg

4.  ทำการ Upload ทั้ง Folder เลยนะครับซึ่งถ้าเป็นของผมก็คือ new-web ครับนำไปไว้ในตำแหน่งที่เราวาง web site ของเราครับผม ถ้าคนที่ทำ Web Server เองที่เป็น LinuxSIS 5.5 ก็จะเป็นว่าวางที่ /var/www/html ก็คือในตำแหน่งเดียวกับที่เราวาง PostNuke ของเรานั่นเองครับ

5.  ต่อไปเราก็เข้าไปใน PostNuke ของเราครับ โดยเข้าระบบเป็น admin เพื่อจัดการระบบ แล้วเลือก Blocks ต่อด้วยการเลือกหัวข้อ โปรแกรมใหม่  ต่อไปเลือก Core/HTML  ในช่องชื่อนั้นห้ามใส่ข้อความใดๆลงไปนะครับ เพราะจะมีผลต่อขนาดหน้าจอที่แสดงตรงกลาง  ต่อไปในช่องตำแหน่งให้เราเลือก ตรงกลาง  ภาษา ไทย แล้วก็ตอบตกลงครับ ดูในรูปด้านล่างประกอบครับ


รูปภาพแสดงแผงเมนู แล้วเลือกที่ Blocks

รูปแสดงการเพิ่ม Block Core/HTML

6.  copy code จากหน้าเว็บเพจที่ชื่อ home.html ที่เราสร้างเสร็จจากข้อที่ผ่านมาแล้วข้างต้นครับ แล้วนำมาวางในช่องเนื้อหา ดังในรูปด้านล่าง แล้วตอบตกลง ก็เป็นอันเสร็จพิธีครับ


รูปแสดงตำแหน่งการวาง Code HTML

   จากความรู้ และ ประสบการณ์ อันน้อยนิดของผม อาจจะมีประโยชน์อยู่บ้างไม่มากสำหรับผู้ที่สนใจกำลังเริ่มศึกษา CMS PostNuke หรือ ท่านที่มีความเชียวชาญ มีประสบการณ์ ก็เรียนเชิญนะครับร่วมกันสร้างแหล่งเรียนรู้  ส่วนขั้นต่อไปก็จะเป็นการ Link จากรูปภาพหน้ากลาง ไปยังไฟล์รายละเอียดในเรื่องนั้นๆ โดยให้ยังแสดงอยู่ในหน้ากลางของ PostNuke ผมจะมาต่อวันหลังนะครับ

มาดูต่อกันนะครับ(21 ส.ค.2551)
    ต่อไปก็จะเป็นการสร้างลิงค์จาก หน้า home.html ไปยังหน้าที่แสดงรายละเอียดในเรื่องนั้นๆ อย่างเช่น ผมต้องการสร้าง ลิงค์ จากแห่เทียนเข้าพรรษา ไปที่หน้าแสดงรายละเอียดของกิจกรรมแห่เทียนเข้าพรรษาแล้วให้หน้าที่ลิงค์ไปนั้นยังคงแสดงอยู่ในเฟรมของ PostNuke เหมือนเดิมไม่ให้แสดงเป็นหน้าใหม่ดังแสดงในรูปด้านล่าง

    จากรูปที่อยู่ด้านบนจะเห็นว่าไฟล์ที่ถูกลิงค์มาแสดงนั้นยังคงอยู่ใน หน้ากลางของ PostNuke เหมือนเดิม มีขั้นตอนการทำดังนี้ครับ 
    -  สร้างโฟล์เดอร์ใหม่ขึ้นมา ข้างในก็มีโฟลเดอร์ image เพื่อเก็บรูปภาพกิจกรรมที่เราต้องการนำเสนอ ตัวอย่าง เป็นกิจกรรมแห่เทียนเข้าพรรษาปี2551 ผมเลยตั้งโฟลเดอร์ว่า pansa51 และนำภาพกิจกรรมนี้ไปไว้ในโฟลเดอร์ image ซึ่งอยู่ในโฟลเดอร์หลักคือ pansa51 จากนั้นก็ทำการสร้างไฟล์ pansa51.html จากโปรแกรม Web-Editor ตามแต่ถนัด
    -  ทำการ Upload โฟลเดอร์ pansa51 ไปเก็บไว้ที่ PostNuke/module/Static_Docs/data
    -  Login เข้า web ของเราเป็น admin เพื่อเข้าไปจัดการนำเอาลิงค์มาใส่ในภาพหรือ ข้อความที่เราต้องการทำ ลิงค์ในหน้า new-web/home.html ก็คือ เราต้องเปิดไฟล์นี้ขึ้นมาเพื่อทำการแก้ไขลิงค์ ซึ่งข้างต้นนั้นเรายังไม่ได้ทำการลิงค์ครับ
    -  เข้าเมนูของผู้ดูแลระบบ ไปเลือก Module  Static_Docs ดังในรูปด้านล่าง
ให้เลือก Root directory เพื่อเข้าไปแก้ไขเปลี่ยนแปลงการแสดงผลของไฟล์นี้ 


    -  ต่อไปจะเห็นกลุ่มของ Directory ที่เราได้ทำการ Upload ขึ้นมาไว้แล้ว ในที่นี้คือ pansa51

                 คลิกเลือก ไฟล์ pansa51.html 

     -  ขั้นต่อไปให้เลือก Display Header เป็น No เพื่อไม่ให้แสดงหัวของเว็บที่เป็นรูปกระดาษกับลูกโลกครับจากนั้นให้ คลิกที่ปุ่ม Update ที่อยู่ด้านล่างของหน้านี้ แล้วให้คลิกเลือกเข้าที่เดิมใหม่อีกรอบเพื่อทำการ copy HTML URL นำไปวางในลิงค์ที่เราเปิดหน้า /new-web/home.html  ไว้ในโปรแกรม Web-Editor ของท่านอยู่

     -  สุดท้ายก็คือการนำเอา code ของไฟล์ home.html ไปวางใน block ที่เราทำในข้อ 6 ที่ผ่านมาแล้วอีกรอบครับ เพราะในข้อ 6 นั้นเรายังไม่ได้ทำการลิงค์มายังหน้าที่ แสดงรายละเอียด ครับ ใน Blog นี้ผมขอจบเพียงแค่นี้นะครับ ขอคุณทุกท่านที่เข้ามาอ่านและเยี่ยมชม