คุณเบื่อไหม กับการที่อยากได้หน้าเว็บสวยๆ แต่หาไม่ได้
คุณเบื่อไหม กับการที่เว็บคุณมีหน้าเว็บซ้ำกับเว็บอื่นๆ
คุณอยากไหม ที่จะทำเทมเพลท เป็นของตัวเอง
วันนี้เราขอเสนอ
การสร้างเทมเพลท แบบกำปั้นทุบดิน- สวัสดีครับ ซาร่า เจอกันอีกแล้ว
- สวัสดีค่ะ จอร์ช วันนี้คุณมีอะไรมาอีกคะ
- แน่นอนครับซาร่า เมื่อคุณเจอกับผม ผมจะต้องมีสิ่งใหม่ๆ มาให้คุณอยู่เสมอ
- งั้นฉันอยากรู้แล้วล่ะค่ะว่า วันนี้คุณจะมีอะไรมาเซอไพรซ์ฉัน
- ผมจะมาสร้างเทมเพลทครับ
- โอ้วววว ไม่นะคะจอร์ช เทมเพลทสวยๆ ที่เค้าแจกกัน มีออกเกลื่อนค่ะ ทำไมต้องเสียเวลาสร้างเองด้วยคะ
- ซาร่าครับ คุณไม่รู้สึกบ้างหรอ ว่า ถ้าหากเว็บคุณ มีหน้าตาซ้ำกับเว็บอื่นๆ คุณจะรู้สึกยังไง
- คนอื่นเค้าจะคิดว่า "โห่ ไปเอาเทมเพลทจากเว็บนี้นี่เอง เด็กๆ"
- แล้วบางที คุณอยากเปลี่ยนให้เป็นสไตล์ของตัวเอง แต่คุณก็ไม่รู้จะไปแก้ที่ไหน เพราะคุณไม่ได้สร้างมันเอง
- คุณเกิดมาเพื่อใช้ของคนอื่นอย่างเดียวหรอครับ ซาร่า
-
ไม่ค่ะ ฉันไม่ได้เกิดมาเพื่อสิ่งนี้- น่านแหล่ะครับ คราวนี้ คุณถึงเวลาที่จะสร้างตัวตนของคุณเองขึ้นมาได้แล้ว เรามาเริ่มกันเลย
- เราจะเริ่มการสร้างเทมเพลท โดยใช้ photoshop ครับ โดยผมทำการ วาดเทมเพลท และตกแต่งมันขึ้นมาก่อน ขนาด 800x600 px
ได้หน้าตาแบบนี้ครับ
- แล้วผมก็จัดการ slide มันออกเป็นส่วนๆ ได้แบบนี้
- จากนั้น ผมก็จะ save โดยให้เลือกเป็นแบบ Save for web...
- อย่าลืมเลือก Save type as ให้เป็นแบบ HTML and Images ด้วยนะครับ ผมจะบันทึกมันไว้ที่ desktop เรามาตามดูน
- ทีนี้ เราก็จะได้ข้อมูล 2 ส่วนคือ ไฟล์ index.html และโฟลเดอร์ images
- ให้สร้างโฟลเดอร์มาอีก 1 โฟลเดอร์ โดยผมจะใช้ชื่อว่า temp_az
- แล้วให้นำไฟล์ index.html กับโฟลเดอร์ images ทั้ง 2 ไปไว้ในโฟลเดอร์ใหม่ที่สร้างขึ้น
- ซาร่า ตื่นๆๆ
- โอ้ว โทษทีคะ จอร์ช เมื่อคืนนอนดึกไปหน่อย
- เราจะทำการแก้ไขไฟล์ index.html กันเล็กน้อยครับ โดยให้เปิดไฟล์ขึ้นมาด้วย notepad หรือ text editor อื่นๆ ก็ได้ คุณจะเห็นข้อความที่ผมไฮไลท์ไว้นะครับ นั่นคือ ตำแหน่งที่เก็บรูปภาพของเทมเพลท
- เราจะต้องเปลี่ยนมันให้ตรงกับการใช้งานจริง โดยซาร่า คุณลองกด ctrl+h ขึ้นมาครับ มันจะเป็นการ replace ข้อความ ให้คุณทำการเปลี่ยนข้อความ images/ เป็น templates/
temp_az/images/ ทุกๆ บรรทัดเลย
- ซาร่า คุณอย่าลืม นี่คือกำปั้นทุบดิน ฉะนั้น ผมจะให้คุณนำ code นี้
<?php
defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not allowed.' );
// needed to seperate the ISO number from the language file constant _ISO
$iso = explode( '=', _ISO );
// xml prolog
echo '<?xml version="1.0" encoding="'. $iso[1] .'"?' .'>';
?>
<!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">
<head>
<?php mosShowHead(); ?>
<?php
if ( $my->id ) {
initEditor();
}
?>
<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />
<link href="<?php echo $mosConfig_live_site;?>/templates/
temp_az/css/template_css.css" rel="stylesheet" type="text/css"/>
</HEAD>
- ไปแทนที่ตั้งแต่ </head> ขึ้นไปทั้งหมดเลย
- มันคืออะไรหรอคะ จอร์ช
- code พวกนี้ ผมเอามาจาก template ที่ติดมากับแมมโบ้เดิมๆ เลยครับ ซึ่งมันจะถูกเขียนอยู่ส่วนบนของเทมเพลทอยู่แล้ว ผมเห็นว่ามันจะต้องใช้งาน ก็เลย copy มา
- แหม กำปั้นทุบดินจริงๆ เลยนะคะ จอร์ช ช่างไม่รู้เรื่องเอาซะเลย
- เอาล่ะ พอเราทำการเปลี่ยน path ของไฟล์รูปภาพ แล้วก็แทนที่ code ดังกล่าวเสร็จแล้ว ก็จะบันทึกเป็นแบบ html 1 ไฟล์ แล้วก็บันทึกเป็น .php อีก 1 ไฟล์
- ต่อไป คุณก็ไป copy โฟลเดอร์ css ของเทมเพลทไหนก็ได้ ที่คุณชอบ มาไว้ในโฟลเดอร์เทมเพลทของคุณ
- อีกอย่าง คุณก็ต้องสร้างไฟล์ .xml ขึ้นมาด้วย วิธีง่ายๆ ก็คือ คุณไป copy ไฟล์
templateDetails.xml ของเดิมมาก็ได้ แล้วก็จัดการนำ code เหล่านี้ ใส่ลงไปแทน
<?xml version="1.0" encoding="iso-8859-1"?>
<mosinstall type="template" version="1.0">
<name>
temp_az</name>
<creationDate>
date/month/year</creationDate>
<author>
avalance</author>
<copyright>
This template is released under GNU/GPL License.</copyright>
<authorEmail>
mail@mail.com </authorEmail>
<authorUrl>
www.avalance.name</authorUrl>
<version>
1.0</version>
<description>
My First Template </description>
<files>
<filename>index.php</filename>
<filename>template_thumbnail.png</filename>
</files>
</mosinstall>
ถึงตอนนี้ คุณจะได้ ไฟล์ทั้งหมด ดังนี้
ซึ่งทั้งหมดนี้ จะอยู่ในโฟลเดอร์เทมเพลทของคุณ
temp_az- และสิ่งต่อไปที่คุณต้องทำคือ แก้ไขไฟล์ index.php เพื่อให้การแสดงผล สมบูรณ์
- ซาร่า คุณลองนำไฟล์ index.php ไปเปิดใน dreamweaver สิครับ
- โอ้ว จอร์ชคะ เห็นแล้วค่ะ แล้วเราต้องทำไงต่อคะ
- เราจะจัดการทำให้ตารางทั้งหมดอยู่ตรงกลางก่อนครับ โดยใส่ <center> ลงไปภายใน <body> ครับ
- ซาร่าครับ คุณจะสังเกตไหมว่า มันมีแค่ 1 table
- ดูยังไงหรอคะ 1 table
- ก็ตรงเส้นกรอบเขียวๆ ไงล่ะครับ สีเขียวเรียกว่า table ส่วน สีฟ้า เราจะเรียกว่า cell
- แล้วมันต่างกันยังไงคะ
- table คือส่วนควบคุมครับ ว่าจะให้อยู่ในตำแหน่งไหน ส่วน cell จะใช้สำหรับใส่เนื้อหา รูปภาพ ครับ
- table สามารถสร้างซ้อนกันได้ แต่ cell ไม่สามารถสร้างซ้อนกันได้
- table ไม่สามารถสร้างซ้อนบน cell ได้ แต่ cell สามารถสร้างซ้อนบน table ได้
- ทีนี้ เราก็ต้องมาสร้าง table ควบคุม cell กันหน่อย เพื่อที่จะให้มันหน้าเว็บเบี้ยว เมื่อมีข้อความเยอะๆ ถ้าคุณไม่เชื่อ ลองขยับซัก 1 cell ดูก่อนสิ เทมเพลทคุณจะเบี้ยวไปเลย
- เบี้ยวจริงๆ ด้วยค่ะ
- เราจึงต้องสร้าง table ควบคุม cell ไว้ไง อะ ทีนี้ วิธีสร้าง ให้คลิกที่ table แล้วจัดการคลิกเม้าค้าง แล้วลาก คลุม คร่าวๆ นะ มันจะขึ้นกรอบสีชมพู เราจะสามารถสร้าง table คลุมไว้ได้ โดยไม่ต้องลบ cell ออก
- ผมได้ทำการสร้าง table คลุม ในตำแหน่งหลัก 3 ส่วนด้วยกัน
- ทีนี้ คุณมาดูนี่สิ ซาร่า ผมจะลองขยับ cell ดูนะ
- ส่วนกรอบแดงที่เห็น นั่นคือช่องว่าง ซึ่งผมไม่ต้องการ ก็สามารถลบออกได้ คุณจะเห็นว่า เมื่อผมขยับ cell ก็ไม่มีผลกระทบกับ cell อื่นๆ
- ต่อไป ผมจะทำการลบภาพแทรก และ cell ออก แล้วทำการวาด table ใหม่ ไปแทนที่
- ทำไมต้องลบออกแล้ววาด table แทนล่ะค่ะ
- ก็เพราะว่า คุณสมบัติของ cell นั้น เมื่อแทรกรูปภาพไปแล้ว จะไม่สามารถใส่เนื้อหาทับด้านบนได้ยังไงล่ะ ฉะนั้น เราจะใช้ table แทน โดยการใช้ table แล้วกำหนดรูปภาพเป็น background จากนั้นก็จะวาด cell ทับ เพื่อใส่เนื้อหา โดยคลิกที่ table นั้นแล้วแทรก code แบบนี้
<table width="100%" border="0" cellpadding="0" cellspacing="0"
background="templates/temp_az/images/index_04.png">
ซึ่งจะเหมือนกับที่เราสร้าง แบบตัวอย่างสั้นๆ นี้
- จากนั้นก็จะทำการวาด cell ทับลงที่ table
- มันก็จะกลายเป็น การแทรกรูปภาพให้เป็น background แล้วก็สามารถวางข้อความไว้ได้ด้วยยังไงล่ะ ดูตามตัวอย่างนี้ ผมได้ยืด table ที่เหลือ ให้เต็มพื้นที่ และ table ด้านบน ผมได้เยื้องมาหน่อย เอาไว้ให้เห็นว่า ผมได้วาดแบบไหน
- เอาล่ะ เราก็มาทำความเข้าใจได้ดังนี้ โดยผมจะแบ่งพื้นที่สี ออกเป็น 3 สี
- สีเขียว คือพื้นที่ table ที่ไม่มีอะไรเลย
- สีชมพู คือพื้นที่ table ที่ผมได้แทรก background ลงไป
- สีขาว คือพื้นที่ เอาไว้สำหรับใส่เนื้อหา
- เอาล่ะ จากนั้น ก็ทำการยืด table ให้กว้างเต็มพื้นที่ได้แล้ว
- และต่อมา ผมก็จะทำการ ย่อ table ที่ดูยาวยืดถึงด้านล่าง ให้มีขนาดสั้นลง แบบนี้
- ทำไมต้องย่อคะจอร์ช
- ก็เพราะว่า ส่วนของเนื้อหานั้น เราไม่จำเป็นต้องแทรก background เต็ม ก็ได้ เพราะถ้าหาก เนื้อหามีจำนวนมาก table ก็จะทำการยืดลงมาเองโดยอัตโนมัติ
- คุณดูนี่นะซาร่า background นี้
-เป็น background ที่อนาคต จะมีข้อความบนนี้ ซึ่ง ภาพนี้ไม่ว่ามันจะยาวลงมาแค่ไหน ภาพมันก็ยังมีลักษณะเหมือนเดิม ฉะนั้น ไม่จำเป็นต้องขยาย table ให้เต็มขนาดก็ได้
- ผมก็จะทำการย่อในส่วนที่ไม่จำเป็นล่ะนะ และ
- พร้อมกับใส่ตำแหน่งโมดูลลงไปที่ cell ด้วย
- เอ๊ะ จอร์ชคะ ทำไมพื้นที่ช่องสีฟ้า ถึงไม่ย่อลงมาด้วยล่ะคะ
- อ๋อ ก็เพราะว่า ตำแหน่งนั้น ถูกแทรกด้วย background รูปนี้ยังไงล่ะ
- ถ้าหากเราย่อล่ะก็ ขนาดของรูปภาพ ก็จะไม่ได้ขนาดตามที่เราต้องการ
- แล้วทำไม ถึงใช้รูปนี้ ทำเป็น background ของ table อีกล่ะ
- ก็เพราะว่า เราจะต้องการใส่ข้อความที่ตำแหน่งนี้ด้วยยังไงล่ะ เพื่อที่จะให้มี background เป็นรูปกระดาษพับได้ด้วย
- เมื่อใส่โมดูลแล้ว แน่นอนว่า ข้อความทั้งหมดอาจชิดซ้ายเกินไป เราสามารถขยับเซลเข้ามาได้อีก เพื่อจัดตำแหน่งให้สวยงาม
- และทาง table ด้านซ้าย ผมก็จัดการใส่สคริป , flash อื่นๆ ที่ผมอยากจะใส่ได้ ลงใน cell เลย
- จากนั้น เราก็ save ได้เลย
- ต่อมา เราจะสร้างภาพ thumnail ทำได้โดย capture ภาพเทมเพลทเราโดยรวม ให้เป็นไฟล์ .png ขนาดความกว้าง ไม่ควรเกิน 200px ด้วยนะ แล้ว save เป็นชื่อ template_thumbnail.png
- สำหรับไฟล์ .html เราไม่จำเป็นต้องใช้แล้ว และไฟล์ทั้งหมดที่เราได้ ก็มีดังนี้
- ซึ่งทั้งหมด อยู่ภายใต้โฟลเดอร์เทมเพลทของตนเอง
temp_az- เสร็จแล้วครับ ซาร่า
- จริงหรอคะจอร์ช
- เอาล่ะ เราจะนำโฟลเดอร์
temp_az อัพโหลดผ่าน ftp ขึ้น host เลยครับ โดยนำไปไว้ในโฟลเดอร์ templates ได้ทันที
- มาดูกันเลย
- โอ้ว ใช้ได้แล้วซาร่า คุณดูที่นี่สิ
www.avalance.name- ดีจังเลยค่ะจอร์ช
- มันไม่ใช่แค่นั้นนะครับ ซาร่า การสร้างเทมเพลทแบบนี้ เราจะสามารถสร้างเทมเพลทใดๆ ก็ได้ แล้วก็ยังสามารถนำฟรีเทมเพลท ที่แม้มีแค่ไฟล์ .psd ก็สามารถนำมาประยุกต์ ให้กลายเป็นเทมเพลทตามสไตล์เราได้ แบบไม่จำกัดอีกด้วย
- โหววว จอร์ชคะ ฉันไม่เคยรู้เลย ฉันเคยไปโหลดฟรีเทมเพลทสวยๆ แต่ก็ได้แค่ไฟล์ .psd ซึ่งฉันก็ไม่รู้ว่าจะเอาไปใช้ยังไง ทีนี้ ฉันรู้แล้วค่ะจอร์ช
- ทีนี้ คุณก็จะสามารถนำเทมเพลทสวยๆ นับล้านที่มีอยู่ในโลก มาสร้างเว็บคุณ ได้อย่างจินตนาการ ไร้ขีดจำกัดเลยแหล่ะ ซาร่า
-
โอ้วววว พระเจ้าจอร์ช มันยอดมาก เลยค๊า
- เอาล่ะ วันนี้ เราก็แพล่มมากแล้ว ได้เวลาจากกับท่านผู้ชมแล้วล่ะ
- แล้วพบกันใหม่ค่ะ บาย....
เนื่องจากช่วงเวลาที่ผ่านมา รูปภาพประกอบบทความ ได้ฝากไว้กับทาง uppic.net แต่ทว่า harddisk ของทางเว็บ uppic.net ได้เสีย ทำให้ไฟล์รูปภาพต้นฉบับไม่สามารถเอา้คืนมาได้ และมีสมาชิก ได้เก็บไฟล์ภาพ resize เอาไว้ ผมจึงได้นำมาผ่านโปรแกรมช่วยขยาย ซึ่งมันก็ขยายได้ไม่ดีกว่า photoshop เท่าไหร่นัก - -"
แต่ก็พอดูประกอบกันไปได้ ดีกว่าไม่มีอะไรให้ดูเลย ^ ^
ทำให้รูปภาพ อาจดูเลือน และแตกไปบ้าง แต่ภาพทุกภาพ ได้มีคำอธิบายไว้หมดแล้ว ว่ามันคืออะไร ก็คงจะไม่งงกันมากนัก หรือหากขัดข้องตรงไหน ก็โพสต์ถามไว้ได้ครับ
ต้องขอขอบคุณ คุณ kikkok ที่ได้เก็บรูปภาพสำคัญของบทความนี้ไว้ เป็นประโยชน์กับสมาชิกท่านอื่นมากๆเลย
