<IT> Basic

ตัวอย่างป้ายแบบ dynamic นะครับจะมีลักษณะแบบนี้ <เอาเมาส์วางที่รูป>

 *แสดงผลใน IE7,IE8,firefox,opera,google chrome

*การแสดงผลแบบนี้จะไม่เกิดขึ้นในผู้ใช้ IE6 ,safari นะครับ หากท่านใดยังใช้ IE6 อยู่แนะนำว่าปัจจุบันนี้หากต้องการเข้าชมบล็อกอย่างมีประสิทธิภาพให้โหลด Firefox มาใช้แทนดีกว่าจ้า หริอจะอัพเดทให้เป็น IE8 เลยก็ได้ ^ ^

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

สำหรับ entry นี้จะค่อนข้างไปเร็ว และ เนื้อหาช่วงล่างๆ อาจจะยากพอสมควรสำหรับมือใหม่นะครับ 

เนื้อหาแรก:วิธีการทำป้าย(banner)แปะ links หรือ sidebar แบบปกติธรรมด๊าธรรมดา

Step 1: เตรียมรูป

สร้างขนาดรูปให้พอเหมาะกับขนาดของ sidebar ของเราอย่าทำยาวมากเดี๋ยวบล็อกแหก ขนาดปกติไม่ควรเกิน 225 px ส่วนความสูงแล้วแต่ความชอบ จะทำยาวๆ เป็นป้ายโฆษณาก็ได้ 

ตัวอย่างป้ายที่เตรียมมา ขนาด 200*40 px และ 196*48 px (กว้าง*สูง) จำนวนสองรูป

  *ขอขอบคุณรูปจาก อาหมวย  จ้า

Step 2: อัพรูปขึ้นบล็อก

เมื่อมีรูปแล้วให้อัพรูปใส่ในเว็บรับฝากรูปก่อน หรือจะอัพที่ exteen นี้ก็ได้เพราะขนาดไฟล์ไม่น่าเยอะ

จากนั้นให้นำลิงค์รูปมาใช้ โดยจะมีสองวิธีหลักๆ คือ แปะใน links และใส่ตรงใน widget

สำหรับ links ก่อนตรงช่อง url นั้น ให้ใส่ลิงค์ที่เราจะเชื่อมไปลงไป อย่าลืมว่าไม่ต้องมี http:// ในลิงค์นะ

สำหรับตรงช่อง description  ให้ใส่โค้ดแบบนี้ลงไป

ตัวอย่าง

จากนั้นก็กด Add แค่นี้เราก็ได้รูปมาประกอบลิงค์แล้ว

ในส่วน widget จะมีข้อดีคือเราสามารถส่ง banner ไปไว้ในตำแหน่งที่ต้องการได้ง่ายๆ ไม่ต้องมาอยู่ใต้ links นั่นเอง

วิธีให้ใส่โค้ดนี้ลงไป  

แค่นี้ก็ได้ป้าย banner ธรรมด๊าธรรมดามาประดับบล็อกกันแล้ว

เนื้อหาที่สอง:Dynamic Banner

STEP 1: การตั้ง class

จากเนื้อหาแรกนั่นคือการใส่โค้ดแบบปกติธรรมดา แต่ก่อนที่เราจะทำ banner แบบ dynamic นั้นเราต้องตั้ง class ให้กับ banner ก่อน 

โดยการใส่ class="ชื่อคลาส" แทรกเข้าไปในส่วนของแท็ก

เช่นใส่ใน links จะมีลักษณะแบบนี้

จะเห็นว่าเราแค่เพิ่มส่วน class เข้าไปเท่านั้นไม่ยากเลยใช่มั้ยล่ะ? 

เราสามารถตั้งชื่อคลาสได้เอง แนะนำว่าให้ใช้ชื่อคลาสที่ง่ายต่อการจำสำหรับเราจะได้ปรับแก้ได้ง่ายขึ้น

ตัวอย่าง code แบบใส่ใน widget  

STEP 2:จัดการรูป banner ด้วย css และ การใส่ border

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

เราจะใส่โค้ดแบบนี้ลงไป   .ชื่อคลาส{...;} (มีจุด . ด้านหน้าด้วยนะครับ)

ชื่อคลาส หมายถึง คลาสชื่อนี้จะแสดงผลตามค่าใน {...}

ตัวอย่างโค้ด

.banner{

border:3px solid #000;

} 

ความหมายของโค้ดข้างต้นคือ คลาสชื่อ banner จะมีเส้นขอบขนาด 3px รูปแบบ solid สีดำ

สำหรับคนที่ไม่รู้จัก border ลองศึกษาและใส่ border ดูก่อนจะได้เข้าใจ  

ในส่วนโค้ด border นั้นแบ่งเป็นสามส่วน

border:ขนาดของขอบ ลักษณะของขอบ สี; 

ขนาดของขอบ : ปกติจะใส่ค่าเป็น px แต่ก็มีกำกับด้วยอย่างอื่นแทนได้คือ thin(บาง) medium(ปานกลาง) thick(หนา)

ลักษณะของขอบ :มีดังนี้

dotted                    

dashed                    

solid                    

double                    

groove                    

ridge                    

inset                    

outset                    

สี:นิยมใช้ทั้งชื่อสี เช่น red white black หรือ โค้ดสีตัวอย่างโค้ดสีดูได้จากที่นี่ http://www.colorschemer.com/online.html  

การใช้ border จะสามารถช่วยเราตกแต่งรูปต่างๆ ได้มากใช้ให้ชำนาญจะดีที่สุดครับ และเรายังสามารถใส่ border เฉพาะขอบแต่ละด้านได้ด้วย 

border-top,border-right,border-bottom,border-left    เลือกใส่ได้เลยจะใส่ด้านเดียวก็ได้ หรือหลายด้านก็ได้ เช่น

.banner{

border-bottom:3px dotted #000;

}

STEP3: การใช้ :hover

เราจะเติมโค้ดใหม่ลงไป แต่คราวนี้ให้เพิ่ม :hover ลงไปด้วย ลักษณะโค้ดจะเป็นแบบนี้

.ชื่อคลาส:hover{...;}

ความหมายก็คือ เมื่อมีการ hover ที่คลาสนี้แล้วจะแสดงผลตาม {...;}

การ hover คือการที่เราเอาเมาส์ไปวางไว้บนเป้าหมายที่เรากำหนด (ในที่นี้คือ banner) ลักษณะของ :hover จะมีดังนี้

1. ค่า hover คือค่าแสดงผลเมื่อเราเอาเมาส์ไปวางไว้ในพื้นที่ที่เรากำกับไว้  
2. จะเปลี่ยนค่าต่างๆ จากค่าปกติให้เป็นไปตามค่าใน hover 
3. ค่าใดไม่มีใน hover จะคงค่าเดิมไว้

ตัวอย่างโค้ด(ใส่ลงไปทั้งคู่)

.banner2{

border:3px solid #fff;

padding:5px 5px 5px 5px;

background:#000 ;

}

.banner2:hover{

border:3px dotted #00f;

}

จากโค้ดข้างต้น ตัวรูป banner  จะมีเส้นขอบ solid สีขาว 3px และค่า padding แผ่ออกมาข้างละ 5px พร้อม bg สีดำ

และหากเราเอาเมาส์ไปวางไว้บน banner ตัวนี้เส้นขอบจะเปลี่ยนเป็นแบบ dotted สีน้ำเงินขนาด 3px ในส่วน padding และ bg ยังเหมือนเดิม 

*ตัวอย่างลองเอาเมาส์วางดูสิ 

ถึงตรงนี้น่าจะรู้จักการใช้ hover กันแล้วนะครับ ใครยังงงๆ ลองแก้ banner ตัวเองแล้วฝึกดูหน่อยนะจ้า

STEP4: การทำกล่องข้อความให้ banner

ก่อนอื่นเราต้องเตรียมรูปที่จะเข้ากับ banner ของเราให้ดี โดยให้เว้นพื้นที่ให้ตัว banner อยู่ด้วยนะ

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

จากรูปตัวอย่าง ex1 จะเขียนโค้ดได้ดังนี้

banner ex1:ความสูงของกล่องข้อความที่เตรียมมาคือ 140px ลบออกจากความสูงของ banner จะได้ 100px พอดี(140px - 40px) จากนั้นนำลิงค์ของกล่องข้อความไปใส่เป็น background

ex1:hover{

background:url(ลิงค์กล่องข้อความ) no-repeat;

padding:0px 0px 100px 0px;

}

นำกล่องข้อความที่เตรียมมาไปเป็น background ใส่ค่า no-repeat จะทำให้ไม่แสดงรูป background ซ้ำ

และทำให้เกิดการแผ่ padding  เพื่อขยาย background ออกไปทางด้านล่างอีก 100px (ให้พอดีขนาดรูปกล่องข้อความ) 

*ค่า padding คิดจาก ขนาดของ BG  - ขนาดของ banner 

ค่า padding มีความสำคัญมากในเอนทรี่นี้ลองปรับแต่งฝึกฝนกันดูนะครับ

ลักษณะของการใส่ค่าคือ padding:บน  ขวา ล่าง ซ้าย;  หรือลองอ่านจาก entry มือใหม่บทที่ 2 

ต่อมาดูรูปตัวอย่าง  ex2 จะมีการขยายออกไปด้านข้างด้วย

ขอบขอบคุณรูป background MuayAtTheMuseum จาก ไทโย นะครับ 

banner ex2:banner ตัวนี้จะแผ่ padding ออกไปด้านซ้ายด้วย แต่การแผ่ออกไปทางด้านซ้ายตามปกติจะถูกขอบของ sidebar ดันตกขอบบล็อกไป  ซึ่งเราสามารถแก้ไขได้ด้วย margin 

คำนวณค่า padding ด้านกว้าง 344-196 =  148px  ด้านสูง 419 - 48 = 371px  เอาไปใส่ในค่า padding

ex2:hover{

background:url(ลิงค์กล่องข้อความ) no-repeat;

padding:0px 0px 371px 148px;

margin:0 0 0 -148px;

}

• เราเพิ่มค่า padding ออกไปด้านซ้าย 148px
• ใส่ค่า margin ดันไปทางด้านซ้าย -148px;

ค่า margin ที่ติดลบจะทำให้กล่องข้อความทะลุขอบ sidebar ออกไปทางด้านซ้ายได้  ซึ่งค่านี้สามารถปรับเปลี่ยนได้ตามรูปแบบของกล่องข้อความเรา  เช่น หากเรามี sidebar อยู่ด้านซ้ายเราอยากให้รูปแผ่ออกไปด้านขวา เราก็เปลี่ยนเป็น margin:0 -148px 0 0; แทน

ค่า margin จะมีลักษณะโค้ดเหมือนกับ padding นั่นคือ margin:บน ขวา ล่าง ซ้าย;  แต่ค่า margin จะไม่ขยายส่วนของ bg ออกไป ซึ่งสามารถเรียนรู้ได้จาก entry มือใหม่บทที่ 2 เช่นเดียวกัน

เพียงแค่นี้เราก็สามารถทำรูป banner พิเศษๆ ไว้ได้แล้ว

อาจจะทำเป็นพอวางไว้บนรูปเพื่อนก็โชว์ประวัติออกมา หรือเป็นรูปสวยๆ ประกอบ banner

แน่นอนว่าผู้ที่ชำนาญหน่อยสามารถประยุกต์รูปแบบได้อีกหลากหลายเลยล่ะครับ  

 ==========================================

 ตอนแรกตั้งใจว่าทำ banner ลดโรคร้อนจำนวนหนึ่งแจกในวัน blog action day แต่ดันทำไม่ทัน + ขี้เกียจ  งานเยอะ เลยไม่ได้ทำมาเขียน entry นี้แทน

ตั้งใจจะเขียนบล็อกสัปดาห์ละหน แต่ตอนนี้มันชักจะเลื่อนไปเรื่อยๆ ดองบล็อกเหมือนดองงานเลยเรา =..= 

 ไว้เจอกันใหม่เอนทรี่หน้าจ้า คราวนี้จะไม่ดองแล้วแน่นอนนนนนน (มั้ง)