รวมบทความทั้งหมดในหมวดการพัฒนาเว็บไซท์ สอนสร้างเว็บไซต์

การพัฒนาเว็บไซท์

รวมบทความและหนังสืออธิบายเกี่ยวกับการพัฒนาเว็บไซท์ โดยนำเสนอวิธีใช้งานโปรแกรมต่างๆ ที่เกี่ยวข้องกับการสร้างโฮมเพจ เช่น การใช้งาน Dreamweaver ใช้งาน Joomla รวมเรื่องน่ารู้เกี่ยวกับการสร้างเว็บไซต์ ฯลฯ

การแก้ไขเทมเพลทใน Joomla 1.5
ตัวอย่างการแก้ไขเทมเพลทเพื่อให้เว็บไซต์ของเรามีหน้าตาที่เป็นเอกลักษณ์เฉพาะตัว ในเล่ม นี้ผมจะเลือกการแก้ไขเทมเพลมมาตรฐานที่ถูกเลือกใช้ เมื่อติดตั้งจูมล่าก็คือ rhuk_milkyway โทนสีน้ำเงิน (Blue) ดังภาพ

ทำความรู้จักเทมเพลท rhuk_milkyway
1. เทมเพลทนี้จะอยู่ในโฟลเดอร์ templates/rhuk_milkyway ตามลำดับ
2. จะมีโฟลเดอร์ย่อย css เก็บไฟล์ css ที่ควบคุมเรื่องการแสดงหน้าตาเทมเพลททั้งหมด ถ้าใช้งาน Dreamweaver คล่องๆ ก็ดาวน์โหลดไฟล์ css ไปแก้ไขได้เลย ในโฟลเดอร์นี้จะมีไฟล์ css หลายไฟล์ ไฟล์หลักๆ ที่ต้องแก้ไขก็คือ template.css, blue.css และ blue_bg.css
3. โฟลเดอร์ images และ images/blue ในโฟลเดอร์นี้จะเก็บภาพประกอบของเทมเพลท นี้ ถ้าได้ดาวน์โหลดไฟล์มาไว้ในเครื่อง ก็จะพอมองออกแล้วว่าแต่ละภาพคือส่วนใดของหน้าจอ เว็บไซต์ วิธีที่ง่ายที่สุดก็คือการแก้ไขภาพประกอบเหล่านี้ให้เป็นของเรา หน้าตาเว็บก็ไม่เหมือน ใครแล้ว

Details: Category: มือใหม่เจาะลึก Joomla!; Hits: 1071

A. แก้ไขภาพตำแหน่งพื้นหลัง ภาพกรอบนอกสุดของหน้าจอและโลโก้ Joomla
รายชื่อภาพพร้อมตำแหน่งเช่น images/mw_joomla_logo.png จะหมายถึงไฟล์ชื่อ mw_joomla_logo.png อยู่ในโฟลเดอร์ images เมื่อแยกภาพออกมาแบบนี้แล้ว หากลองมอง พิจารณาให้ดี แล้วปะติดปะต่อภาพเข้าด้วยกัน ก็จะพอมองออกว่าแต่ละภาพนั้นเป็นส่วนใดของ หน้าจอจูมล่า
1. images/blue/mw_shadow_r.png
2. images/blue/mw_shadow_l.png
3. images/blue/mw_header_t_r.png
4. images/blue/mw_header_t_l.png
5. images/blue/mw_footer_b.png
6. images/blue/mw_footer_t.png
7. images/blue/mw_footer_b_l.png
8. images/blue/mw_footer_b_r.png
9. images/mw_joomla_logo.png

Details: Category: มือใหม่เจาะลึก Joomla!; Hits: 1398

B. แก้ไขภาพตำแหน่งปุ่มในส่วน Top ของ Joomla
ด้านบนที่เป็นปุ่ม Aboutus Joomla! | Features | News | The Community ก็คือภาพ เหล่านี้
1. images/mw_header_b.png
2. images/mw_header_l_b.png
3. images/mw_header_r_b.png
4. images/mw_menu_cap_r.png
5. images/mw_menu_cap_l.png
6. images/mw_menu_separator.png
7. images/mw_menu_normal_bg.png
8. images/mw_footer_separator.png
9. images/blue/mw_menu_active_bg.png

Details: Category: มือใหม่เจาะลึก Joomla!; Hits: 1082

C. ตำแหน่งกรอบของเนื้อหา whitebox
เป็นตำแหน่งที่แสดงเนื้อหาแสดงโมดูลต่างๆ ของหน้าจอจูมล่า ภาพในตำแหน่งนี้
1. images/mw_content_b_l.png
2. images/mw_content_b_r.png
3. images/mw_content_b.png
4. images/mw_content_t.png
5. images/mw_content_t_l.png
6. images/mw_content_t_r.png
7. images/mw_line_grey.png