วันพฤหัสบดีที่ 28 กุมภาพันธ์ พ.ศ. 2551

การใส่ Background หรือ พื้นหลัง

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



เพื่อนๆทุกคนยังคงจำแท็ก <BODY> ได้ใช่ไหมครับ แต่จำเรื่องแอตทริบริวได้ด้วยหรือเปล่า
รูปแบบการใส่สีพื้นให้กับ Background คือ

<BODY bgcolor="ค่าสี"></BODY>

ว่าแต่ค่าสีที่ได้นั้นเอามาจากไหนกันหล่ะ เรามาทำความรู้จักกับค่าสีกันดีก่า ค่าสี RGB
ตามนี้เลย คลิก

ทีนี้พอเราได้สีที่ต้องการมาแล้วนะครับก็ให้เอาโค้ทสีไปใส่แทนที่ "ค่าสี" ได้เลยสมมุตติ ผมจะใช้สีแดงตะแล๊ดแปร๊ด โค้ทคือ #FF0000 หรือ red ตัวอย่างการใส่โค้ทก็จะเป็น

<BODY bgcolor="red"></BODY>

หรือ

<BODY bgcolor="#FF0000"></BODY>

นั่นเองครับ ลองเซฟเป็น .html ดูครับพอเปิดมาก็จะพบว่าพื้นหลังได้เปลี่ยนสีไปแล้ว

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

รูปแบบ

<BODY background="ชื่อไฟล์ภาพ.นามสกุล"></BODY>

ภาพในที่นี้ถ้าเรามีโฮสของตัวเองเราสามารถอ้างอิงไฟล์ภาพจากชื่อได้เลยถ้ารูปภาพนั้น อยู่แฟ้มเดียวกันกับไฟล์ .html ที่เราสร้างขึ้น สมมุติว่าภาพชื่อ image.gif ก็จะเป็น

<BODY background="image.gif"></BODY>

แต่ถ้าอยู่ต่างแฟ้มกันเราจะต้องอ้างถึง แฟ้มนั้นก่อนด้วย ยกตัวอย่างเช่น เราเก็บไฟล์ภาพไว้ในแฟ้ม /picture/image.gif รูปแบบก็จะเปลี่ยนไปเป็น

<BODY background="picture/image.gif"></BODY>

แต่ถ้าเราไม่มีโฮสหล่ะ (กรณีที่เราทำบล๊อกหรือว่าใช้บริการพวก hi5 หรือที่อื่นๆ ที่ให้เราสามารถเข้าไปแแก้ไขหน้าเพจได้ เราก็สามารถอ้างอิงภาพจากผู้ให้บริการเว็บฟากไฟล์ภาพนั้นๆได้ด้วยนะครับ) งงแหงม มาดูตัวอย่างกันดีกว่า

สมมุตติว่าผมจะเอาภาพ Background โดยค้นหาจากกูเกิ้ล เจ้าเก่า โดยเลือกขนาด 800*600 แล้วผมนำไปฝากไฟล์ไว้กับผู้ให้บริการหนึ่ง(uppic) ได้ Link มาดังนี "http://www.uppic.net/if/ffvii08l.jpg"

ทีนี้ผมก็เอาโค้ทที่ได้ไปใส่แทนที่ชื่อภาพ.นามสกุลเลย รูปแบบที่ได้ก็จะเป็น

<BODY background="http://www.uppic.net/if/ffvii08l.jpg"></BODY>

แล้วเซฟไฟล์เป็น .html แล้ว Run ดูก็จะพบว่าพื้นหลังเราได้เปลี่ยนไปแล้วโดยจะมีรูปนาย could(เกม Final Fantasy VII) ที่ผมอัพโหลดเอาไว้แทนครับ

*** หมายเหตุ ***

1.ภาพที่เราฝากไฟล์ไว้ อย่างใน ต.ย.นี้ http://www.uppic.net/if/ffvii08l.jpg วันดีคืนดีอาจจะหายไปได้ถ้าเว็บ Uppic ที่ผมใช้บริการเกิดลบไฟล์นี้ออกไป

2.การทำภาพพื้นหลังจะทำให้หน้าเพจนั้นโหลดช้ากว่าปกตินะครับ อันนี้เป็นข้อเสียสำหรับคนเน็ตช้ามาก

3.เมื่อหน้าเพจเรายาวลงมาเรื่อยๆ จะพบว่า เมื่อเราเลื่อน ScrollBar ด้านขวามือเราลงไปเนี๊ยะ ภาพจะเลื่อนขึ้นไปด้วย ถ้าใครไม่อยากให้ภาพเลื่อนนะครับก็ให้เพิ่ม แอทริบริวต์ bgproperties="fixed" เข้าไป

<BODY background="http://www.uppic.net/if/ffvii08l.jpg" bgproperties="fixed"></BODY>

ภาพที่ออกมาก็จะไม่เลื่อนใหลไปตามแล้วครับ ***และฟังก์ชั่นนี้ใช้ได้ในเฉพาะ Browser ของ IE(Internet Explorer)เท่านั้นนะครับ ถ้าเปิดด้วย Firefox หรือ Opera ก็จะเลื่อนตาม ScorllBar ครับ

วันนี้พอแค่นี้ก่อนละกันนะครับ เด๋วจะเบลอซะเปล่าๆ สงสัยตรงไหนก็ถามได้นะครับ ผมก็มือใหม่แต่ถ้าตอบได้หรือไม่ได้ ก็จะพยายามเสาะหามาตอบให้จงได้ครับ อิอิ บายๆครับ

5 ความคิดเห็น:

Unknown กล่าวว่า...

ขอบคุณค่ะ

Unknown กล่าวว่า...

ขอขอบคุณนะค่ะ

ไม่ระบุชื่อ กล่าวว่า...

โทดนะคับผมอยากจะถามอะไรหน่อย ทำไมเวลาใส่ bg แล้วภาพที่ใส่เป็น 2 ภาพละคับ ทำยังไงให้เป็นภาพเดียวแล้วเต็มหน้าจอ

Unknown กล่าวว่า...

มีประโยชน์ ขอบคุณครับ

ไม่ระบุชื่อ กล่าวว่า...

ทำพื้นหลังเป็น gif ไม่ได้เลยค่ะ ต้องทำงานส่งอาจารย์พอดี แต่ขอบคุณที่เอามาลงนะคะ 555