How to ตกแต่งนิยาย / ไอดี

ลำดับตอนที่ #13 : [CODE] วิธีลงและเลือกใช้บีจี

โปรแกรมที่ใช้ ทำลงแพดหรือจะทำที่หน้าเว็บเลยก็ได้
ระดับความยาก 1/5 (สำหรับโค๊ดอย่างเดียว) 3/5 (สำหรับรายละเอียดโค๊ด)
บทความที่ควรอ่านก่อน วิธีลงโค๊ดทั้งแบบดิบและสุก หากต้องการศึกษารายละเอียดเพิ่มเติม ควรอ่านเรื่อง CSS (style sheet) ด้วย

สารบัญย่อย

โค้ดและคำอธิบาย
ประเภทของบีจี
วิธีเลือกภาพ

โค้ดของบีจี

<style type="text/css">
body{
background-image: url(ที่อยู่ของรูปบีจี);
background-attachment:fixed;
}
</style>

นี่คือคำสั่งพื้นฐาน ตัวสีเขียวคือค่าที่เปลี่ยนได้ตามความต้องการค่ะ ปกติเปลี่ยนแค่ ที่อยู่ของรูปบีจี ก็พอค่ะ
** สำหรับพื้นหลังไอดี แนะนำให้เปลี่ยนผ่าน control panel ไม่ต้องใช้โค้ดหรอกค่ะ

คำอธิบาย

หากไม่ต้องการศึกษารายละเอียดเพิ่มเติม ข้ามหัวข้อนี้ไปเลยก็ได้ค่ะ เพราะแค่โค๊ดด้านบนก็ใส่บีจีได้แล้ว แต่ถ้าอ่าน จะสามารถเอาไปประยุกต์ใช้ต่อได้ และสามารถใส่ลูกเล่นเพิ่มเติมให้บีจีของคุณได้อีก ^^

<style type="text/css"></style>
เป็นแท็กเปิดปิดของ style sheet

body
เป็นคำสั่งบอกว่าไสตล์นี้ใช้กับแท็ก body ของภาษา html ซึ่งก็คือ มันจะมีผลครอบคลุมทั้งหน้า นอกจากแท็ก body แล้ว ยังสามารถเปลี่ยนเป็นอย่างอื่นได้แล้วแต่ว่าเราอยากจะใช้ไสตล์นี้กับแท็กไหน เช่นถ้าเป็น table ก็จะไปควบคุมที่ตัวตาราง ซึ่งเราจะค่อยๆ ทยอยบอกละกันนะคะ เพราะเราสามารถเล่นกับตรงนี้ได้เยอะเลยล่ะค่ะ ยิ่งถ้าคุณมีความรู้เรื่อง html ด้วยแล้วยิ่งเล่นได้มากจนคุณเบื่อ ขี้เกียจแต่งเลยทีเดียว (มั้ง)
เอ้อ แล้วหลังจากจบ คำสั่งที่บอกว่าจะใช้กับส่วนไหนแล้ว ให้ใส่เครื่องหมายปีกกา {} คลุมไว้ด้วยนะคะ มันเป็นคล้ายๆ ตัวกำหนดขอบเขตน่ะค่ะ

background-image: url(http://image.dek-d.com/4/728230/5734857jpg.);
background-image: url(...); เซตรูปบีจี โดยในเครื่องหมายวงเล็บจะเป็น url รูปค่ะ

background-attachment:fixed;
นี่คือตัวสั่งให้บีจีของคุณอยู่กับที่ ไม่เลื่อนลงตามหน้าเว็บค่ะ ถ้าอยากให้มันเลื่อนก็ใส่คำว่า scroll แทนค่ะ (ลองเล่นดูเองละกัน)

นอกจากนี้เราอาจแทรกลูกเล่นอื่นๆ ลงไปได้อีกเยอะเลยล่ะ เอาเฉพาะคำสั่งของบีจีก็มีประมาณนี้
(เอามาจาก http://www.w3schools.com/ แปลไทยโดยเราเอง)

Property	Description	Values
background-attachment	เซตว่าจะให้รูปอยู่กับที่ หรือเลื่อนขึ้นลงได้	scroll fixed
background-color	เซตสีพื้นหลัง (จะแสดงก็ต่อเมื่อไม่มีการเซตรูปบีจีเอาไว้ หรือมีการเซตใหรูปแสดงไม่เต็มหน้า โดยจะไปเติมสีส่วนที่รูปไม่คลุมอยู่)	โค้ดสี transparent
background-image	Url ของรูปที่จะแสดงเป็นพื้นหลัง หรือ ไม่แสดงรูปเลย (none)	url(URL) none
background-position	เซ็ตตำแหน่งของบีจี เช่น bottom right ก็คือรูปจะถูกจัดอยู่มุมล่างขวาของหน้า	top left top center top right center left center center center right bottom left bottom center bottom right x% y% xpos ypos
background-repeat	กรณีที่ภาพเล็กกว่าหน้าจอผู้ใช้ เซ็ตว่าจะให้วนภาพซ้ำไปมาจนเต็มหน้าจอรึเปล่า เช่น repeat-x คือให้วนซ้ำแค่ในแกน x เท่านั้น	repeat repeat-x repeat-y no-repeat

ลองเอาไปเล่นดูละกัน โดยให้ใส่เครื่องหมาย ":" คั่นระหว่าง Property กับ Values และให้ใส่เครื่องหมาย ";" คั่นระหว่างคำสั่ง (หลัง Values) ถ้างงว่าใส่ยังไงก็ดูที่ตัวอย่างเอาน้า มีอะไรสงสัยหรือลองใส่โค๊ดแล้วไม่ได้ ก็แปะไว้ในเมนท์น่อ เราจะมาดูให้

ตัวอย่าง นี่คือโค้ดที่เราใช้กับหน้านี้

<style type="text/css">
body{
background-color:#ffffe2; เซ็ตสีให้เป็น #ffffe2
background-image: url(http://image.dek-d.com/4/728230/5871982jpg.); รูปที่ใช้ทำบีจี
background-attachment:fixed; ไม่ให้เลื่อน
background-position:bottom right; จุดเริ่มต้นของภาพจะเริ่มที่มุมขวาล่าง
background-repeat:no-repeat; ไม่ให้วนภาพซ้ำ
}
td {background:none;} ไม่ให้ช่องตารางมีรูป (หรือก็คือ ทำให้มันใสนั่นเอง)
</style>

อยากรู้ความแตกต่าง ให้ลองเปลี่ยนขนาดหน้าจอดูค่ะ ถ้าหน้าจอใหญ่กว่าภาพนี้อาจเห็นมันขาดๆ ไปบ้างแต่เราขี้เกียจทำอ่ะ ตั้งใจให้ใช้เป็นกรณีศึกษาเฉยๆ ^^

ประเภทของบีจี

เราขอแบ่งออกเป็น 2 แบบแล้วกันก็คือ
- แบบที่เอาภาพเล็กๆ มาต่อกัน
- แบบที่เป็นภาพใหญ่ภาพเดียว

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

สำหรับการแก้ปัญหาภาพวนซ้ำนั้นอาจใช้แท็ก background-repeat:no-repeat; แก้ได้ค่ะ แต่ก็จะเห็นสีพื้นหลังของเว็บในส่วนที่บีจีคลุมไม่หมดกลับมาเป็นของตอบแทน ^^

วิธีเลือกภาพ

ก่อนอื่นต้องตัดสินใจก่อนว่าจะเลือกบีจีแบบไหน ถ้าหากจะเป็นภาพใหญ่ภาพเดียวควรเลือกที่มีขนาดประมาณ 1024x768 เพราะปัจจุบันผู้ใช้ส่วนใหญจะเลือกใช้หน้าจอขนาดนี้กัน แต่ไม่ว่าจะเลือกแบบไหน กฎเหล็กก็คือ

บีจีห้ามกลืนตัวหนังสือเด็ดขาด

เพราะอะไรน่ะรึ ก็เพราะมันมองไม่เห็นน่ะเซ่ เวลาเจอบีจีแบบนี้แล้ว 90 % จะทำให้คนอ่านเริ่มหมดความตั้งใจจะอ่าน (รวมทั้งเราด้วย) การเลือกบีจีไม่ควรเลือกที่มีลวดลายมากเกินไป เพราะจะทำให้ลายตา หากอยากได้ภาพนั้นจริงๆ อาจใช้วิธีทำให้ภาพจางลง (เช่นในนิยายเรา...แอบโฆษณา อิอิ)  ซึ่งการทำให้ภาพจางลงนั้นนอกจากจะได้ภาพที่ตั้งใจจะใช้แล้ว ยังไม่เป็นการรบกวนสายตาผู้อ่านมากจนเกินไปด้วย เป็นเทคนิคส่วนตัวค่ะ (แม้จะมีคนอื่นใช้อยู่ก็ตาม...หรอ)

คราวหน้าเราจะมาดูวิธีตกแต่งรูปไว้ทำบีจีกันนะ

ปล. ถ้าอ่านแล้วว่าดี ช่วยเมนท์ให้หน่อยนะคะ ช่วยเป็นกำลังใจและเชื้อไฟให้เราหน่อย