|
ก่อนเริ่มต้นทำ จะขออธิบายหลักการทำงานก่อน เพื่อความเข้าใจ คือ
- Code จะประกอบด้วย 2 ส่วน คือส่วนของ CSS และ HTML จะต้องนำ Code ไปวางในส่วนของ CSS และ HTML ไม่ใช่วางที่เดียวเหมือนกับการทำเว็บไซต์สีขาวดำ
- จะต้องมีการนำรูปภาพที่เป็นแถบริบบิ้นจำนวน 4 ภาพไปวางในพื้นที่ของเว็บไซต์ที่สามารถทำการเรียกได้ เพื่อกำหนดตำแหน่งที่จะทำการเรียกภาพใน Code HTML ซึ่งสามารถดาวน์โหลดรูปภาพได้จาก black_ribbons.zip (รูปภาพริบบิ้นดำจากเว็บไซต๋ http://nuuneoi.com/blog/blog.php?read_id=884)
ขั้นตอนการติดแถบริบบิ้นสีดำบนเว็บไซต์ประเภทต่าง ๆ มีวิธีการดังนี้
1. หากเว็บของเรามี Base ไฟล์ CSS และ HTML
1.1 ในส่วนของไฟล์ CSS ให้เปิดขึ้นมาแล้วนำ Code ลงไปตามด้านล่าง
.black-ribbon {
position: fixed;
z-index: 9999;
width: 70px;}
@media only all and (min-width: 768px) {
.black-ribbon {
width: auto;
}
}
.stick-left { left: 0; }
.stick-right { right: 0; }
.stick-top { top: 0; }
.stick-bottom { bottom: 0; }
1.2 ในส่วนของไฟล์ HTML ให้เลือกตำแหน่งที่ต้องการจาก Code ด้านล่าง (เลือกแค่ 1 ตำแหน่ง) แล้วนำไปวางบนสุดหลังเปิด Tag <body>
<!-- Top Left -->
<img src="/images/black_ribbon_top_left.png" class="black-ribbon stick-top stick-left"/>
<!-- Top Right -->
<img src="/images/black_ribbon_top_right.png" class="black-ribbon stick-top stick-right"/>
<!-- Bottom Left -->
<img src="/images/black_ribbon_bottom_left.png" class="black-ribbon stick-bottom stick-left"/>
<!-- Bottom Right -->
<img src="/images/black_ribbon_bottom_right.png" class="black-ribbon stick-bottom stick-right"/>
และที่สำคัญอย่าลืมเปลี่ยนพาธของภาพให้เป็นไปตามพาธที่ได้วางภาพไว้ในเว็บไซต์ด้วย อย่างในโค้ดตัวอย่างด้านบนนี้ใส่ภาพไว้ใน /images
2. หากเว็บของเราไม่มี Base CSS ให้นำ Code ไปวางในทุกหน้าของไฟล์ HTML
2.1 ใส่ Code CSS ในส่วนของ <head> *ข้อสังเกตจะมีการใช้ tag <style></style> ด้วย
<style>
.black-ribbon {
position: fixed;
z-index: 9999;
width: 70px;}
@media only all and (min-width: 768px) {
.black-ribbon {
width: auto;
}
}
.stick-left { left: 0; }
.stick-right { right: 0; }
.stick-top { top: 0; }
.stick-bottom { bottom: 0; }
</style>
2.2 ให้เลือกตำแหน่งที่ต้องการจาก Code ด้านล่าง (เลือกแค่ 1 ตำแหน่ง) แล้วนำไปวางบนสุดหลังเปิด Tag <body>
<!-- Top Left -->
<img src="/images/black_ribbon_top_left.png" class="black-ribbon stick-top stick-left"/>
<!-- Top Right -->
<img src="/images/black_ribbon_top_right.png" class="black-ribbon stick-top stick-right"/>
<!-- Bottom Left -->
<img src="/images/black_ribbon_bottom_left.png" class="black-ribbon stick-bottom stick-left"/>
<!-- Bottom Right -->
<img src="/images/black_ribbon_bottom_right.png" class="black-ribbon stick-bottom stick-right"/>
และที่สำคัญอย่าลืมเปลี่ยนพาธของภาพให้เป็นไปตามพาธที่ได้วางภาพไว้ในเว็บไซต์ด้วย อย่างในโค้ดตัวอย่างด้านบนนี้ใส่ภาพไว้ใน /images
|
หน้าแรก
