สอนทำเว็บขั้นพื้นฐานCSS
ขั้นตอนที่ 1) ทำรูปพื้นหลัง
1.1 ) ทำรูปพื้นหลังด้วยโปรแกรมตกแต่งภาพ เช่น PhotoShop หรือ GIMP (ของฟรี หาดาวโหลดจากเน็ตได้ฟรี) ฯลฯ ในที่นี้ขออธิบายด้วยโปรแกรม Photoshop โดยเปิดพื้นที่สร้างงานรูปภาพใหม่ ให้มีขนาด ความกว้าง 10-50 พิกเซล และ ความสูง 300-500 พิกเซล
1.2 ) เลือกใช้เครื่องมือ Gradient โดยกำหนด Gradient ให้ค่าสีแรกเป็นสีขาวเท่านั้น และ ค่าที่สองเป็นแบบโปร่งใส
1.3) เพิ่ม Layer ใหมเข้าไปในพื้นที่สร้างรูปภาพจะได้ชื่อว่า Layer 1
1.3) ทำการเทสีแบบ Gradient ลงบน Layer 1 จากบนลงล่าง ตามแนวตั้งของพื้นที่สร้างรูปภาพ
1.4) ลบ Layer ที่ชื่อ Background ออกจาก Panel Layer ก็จะเหลือไว้แต่ Layer 1
1.5) บันทึกรูปสำหรับใช้งานบนเว็บไซต์ ด้วยการเลือกชนิดรูปเป็นแบบ PNG เท่านั้น
1.6) อัพโหลดรูปขึ้นไปไว้บน Server แล้วเรียกดูผ่าน URL คัดลอก URL ของรูปภาพมาครับ
ขั้นตอนที่ 2) เรียกใช้ด้วย CSS
ให้แทรกโค้ดต่อไปนี้ ไว้ในระหว่างแทค
นะครับ
ตัวอย่าง
โดยจุดสำคัญอยู่ที่สีฟ้านะครับ, ให้ทำการเปลี่ยนไปตามที่เราต้องการ ดังนี้
#000000 คือ รหัสสีของพื้นหลังเว็บไซต์ที่เราต้องการให้เป็น เช่น ต้องการไล่จากฟ้าเข้มไปหาโทนสีขาว ก็ให้ใส่รหัสสีฟ้าลงไป
http://www.webite.com/photo/bg-08.png คือ URL ที่อยู่ของรูปภาพที่คุณอัพโหลดไปไว้บน Server แล้ว
สาเหตึที่พื้นจะไม่แสดงสีตามที่ต้องการ
1) แทรกโค้ดไว้ผิดที่ ผิดตำแหน่ง
2) ไม่ได้อัพโหลดรูปภาพที่ทำไปไว้บนเซิฟเวอร์
3) ไม่ได้ใส่รหัสสี หรือ ใส่รหัสสีผิด (รหัสสีต้องมีเครื่องหมาย # นำหน้าเสมอ และรหัสสีจะมีแค่ 6 หลัก ตัวอักษรและตัวเลขผสมกัน)
4) ใส่ URL ของรูปภาพผิด ตรวจสอบการสะกดดีดี
5) แคชของบราวเซอร์โดยเฉพาะ IE9 ให้ปิด IE ทุกหน้าต่างแล้วเปิดขึ้นมาใหม่
ทดสอบแล้วว่าใช้ได้กับบราวเซอร์ FireFox 3.x , Chrome 9.x , IE 8-9 , Opera 11 , Maxthon 2.x
แนะนำโซเชียลของนักเขียน
