การแก้ไขเทมเพลทต้นแบบ ส่วนที่เป็น Header |
ปัจจุบัน เทมเพลทต้นแบบ ใช้ CSS ในการสร้าง เพื่อให้ง่ายต่อการกำหนดส่วนต่างๆ ที่แสดงผลอย่างที่ควรจะเป็นไม่คลาดเคลื่อน อาจทำให้สมาชิกบางท่านที่ไม่คุ้นเคยกับเครื่องมือแก้ไข CSS ไม่ทราบว่าจะเข้าไปแก้ไขตรงจุดไหนถึงจะเปลี่ยนแปลงรูปภาพเดิมได้ ดังนั้นในบทความนี้จะกล่าวถึงการแก้ไข รูปภาพต่างๆ ที่ใช้ CSS
|
-
-
-
-
-
|
|
การแก้ไขเทมเพลทต้นแบบ ส่วนที่เป็น Header |
ขั้นตอน
1. คลิ๊กเมาส์ ที่ตำแหน่งภาพพื้นหลัง (สังเกตุ : ถ้าภาพพื้นหลังอยู่ภายในเซลล์ ภาพนั้นจะเต็มช่องพอดี แต่ ถ้าใช้ตารางซ้อนอยู่ภายในเซลล์ และกำหนดภาพพื้นหลังที่ตารางที่ซ้อนอยู่นั้น จะเห็นว่าจะเหลือช่องว่างระหว่างเซลล์กับตารางอยู่) ส่วนตัวอย่างที่เห็นด้านล่าง เป็นการกำหนดภาพพื้นหลังอยู่ภายในเซลล์
2. คลิ๊กขวา ภายในเซลล์ หรือขอบตาราง จากนั้นเมื่อมีเมนูลัดขึ้นมา ให้เลือกStyle Sheet Css หรือ จะคลิ๊กจากไอคอน Css ด้านบน แถบเครื่องมือ ก็ได้เช่นกัน |
ตัวอย่าง : ทดสอบว่าใช้ เซลล์ กำหนดภาพพื้นหลัง หรือไม่
|
ตัวอย่าง : ทดสอบว่าใช้ ตาราง กำหนดภาพพื้นหลัง หรือไม่
|
3. ถ้าคลิ๊กในตำแหน่งภาพพื้นหลัง ข้อที่1 ถูกต้อง
หน้าต่างที่แสดงขึ้นมา จะเห็นว่าตำแหน่งภาพพื้นหลัง จะมี url ปรากฎอยู่ จากนั้นถ้าต้องการเปลี่ยนภาพพื้นหลัง ตำแหน่ง Header
คลิ๊กที่ไอคอน |
|
เพื่ออัพโหลดภาพ Header เอง จากเครื่องที่ท่านใช้งานอยู่ |
|
เพื่อเลือกรูปภาพ จากที่ระบบ THTWEB เตรียมไว้ให้ |
repeat : กำหนดลักษณะ การแสดงภาพ Header |
none |
: เป็นค่าเริ่มต้นก่อนการเปลี่ยนแปลง |
repeat |
: แสดงภาพเดิมซ้ำจนกว่าเต็มพื้นที่ |
repeat -x |
: แสดงภาพเดิมซ้ำ เฉพาะตามแนวนอน ของขนาดภาพ |
repeat -y |
: แสดงภาพเดิมซ้ำ เฉพาะตามแนวตั้ง ของขนาดภาพ |
no - repeat |
: ไม่แสดงซ้ำ (แสดงเฉพาะภาพตามขนาดจริง) |
bgPosition : เป็นการกำหนดตำแหน่งรูปภาพ |
X : แนวนอน |
Y : แนวตั้ง |
Left |
ชิดซ้าย |
Top |
บน |
Center |
กึ่งกลาง |
Center |
กึ่งกลาง |
Right |
ชิดขวา |
Bottom |
ล่าง |
ตามตัวอย่างเทมเพลท ที่นำมาแสดง ตำแหน่งของ repeat กำหนดเป็น no-repeat เพื่อกำหนดภาพพื้นหลัง แสดงตามขนาดจริง ไม่มีการแสดงซ้ำไม่ว่า ตาราง หรือเซลล์ จะกว้างออกไปขนาดไหน |
|
ข้อแนะนำ อาจลองปรับเทมเพลท กลุ่มธรรมชาติ อย่างในตัวอย่าง จะเข้าใจมากขึ้นครับ และสามารถนำไปใช้กับเทมเพลทต้นแบบ ได้ทุกกลุ่ม โดยแต่ละกลุ่มจะใช้ทั้งเซลล์ และตาราง เป็นตัวกำหนดภาพพื้นหลัง |