วิธีเขียนโค้ด

วิธีแต่งโค้ดใช้ใน hi5 (ฉบับของพี่นู๋แหวน nuwan นะ)
ก่อนจะเริ่มแต่งโค้ดได้เราต้องมาทำความรู้จักกับส่วนต่างๆ ของ hi5
และคำสั่งที่จะนำมาใส่โค้ดกันก่อนนะ
1. ส่วนต่างๆ ของ Hi5 (พอสังเขปนะ)
body คือ หน้าใหญ่สุดของเพจรองจาก html

#top_header คือ แท็บบนสุด
#search_table คือ ช่องด้านบนขวามือที่ค้นหา
#p_nav_header คือ แท็ปบนสุดที่ลองจาก header
#p_nav_primary คือ แถบข้างบนที่ลิ้งไปส่วนต่างๆของ Hi5
#profile-name คือ ส่วนของชื่อโปรไฟล์เรา
.profile-name .name strong คือ ชื่อโปรไฟล์เรา
.profile-nav .name span คือ ตัวนับคนที่ดู Hi5 ของเรา
#profile-nav คือ แท็ปที่อยู่ใต้โปรไฟล์เน็มที่ลิ้งไปส่วนต่างๆของ Hi5
.about-column คือช่องข้อมูลส่วนตัวหรือที่เราเรียกโปรไฟล์กัน มี 3 ส่วนใหญ่คือ
#about-left ช่องซ้ายที่มีรูปเรา
#about-center ช่องกลางที่มีข้อมูลส่วนตัวของเรา
#about-right ช่องขวาที่มีแถบสถิติอยู่
#user-details .footer คือ footer ที่อยู่ใต้โปรไฟล์ส่วนตัวของเรา กำหนดรูปลงไปเองได้( ปกติจะไม่เห็น)
#recent-updates คือ ช่อง update ข้อมูลแต่ล่ะครั้ง(บางคนปิดทิ้งเพราะรกป่าวๆ)
#lifestyle คือ กล่อง lifestyle ปกติอยู่ทางด้านซ้ายมือ
#Interests คือ กล่อง Interests อยู่ทางด้านซ้ายมือ
#user-fives คือ กล่อง fives ของเรา
#friends คือ กล่องเพื่อนของเรา
#photoAlbums คือ ช่องอัลบั้มรูปของเรา
#comments คือส่วนของคอมเม้น
TEXTAREA คือ ส่วนของช่องที่เพื่อนเขียนข้อความหาเราหรือกล่องคอมเม้นนั่นเอง
#footer คือ ช่องที่อยู่ล่างสุดของ page เราสามารถใส่รูปเข้าแทนที่ได้
2. คำสั่งที่จะนำมาใส่ในโค้ด

2.1 คำสั่งพื้นหลังรูปภาพ Background
พื้นหลัง รูปภาพ Background

ใส่รูปหรือ พื้นหลัง
background-image:url (------)

ทำ-ไม่ทำ ซ้ำภาพให้เต็ม selector
background-repeat: repeat ,no-repeat

ล็อกพื้นหลัง - เลื่อนตาม scrollbar
background-attachment: fixed ,srcoll

กำหนดสีพื้น - ทำใส
background-color: color, transparent

กำหนดตำแหน่งรุปภาพ
background-position:
ตำแหน่งของรูปภาพ กำหนด % ,px เทียบแกน x y เช่น 50% 0%; จะแสดงที่บน กลาง

กำหนด top right left bottom เทียบ y x เช่น top center; จะแสดงที่ บน กลาง top

การใส่รวมคำสั่ง
background:url(---) color fixed repeat 50% 0%;
2.2 เส้นกรอบ
เส้นกรอบ Border

border-color: สีกรอบ ;
boder-width: ความกว้างของเส้น ;
border-style: รูปแบบ;

การใส่รวมคำสั่ง
border:style width color;
2.3 สี Color
สี Color กำหนดได้ 3 แบบ

กำหนดตามชื่อภาษาอังกฤษ
color:red, white, black, gray, yellow, green......

กำหนดตามเลขฐาน 16
color:#CC0055 ....

กำหนดตามเลขฐานสิบ
color:rgb(200,50,0)

2.4 อักษร Font
ตัวอักษร Font

font-family: รูปแบบตัวอักษร ดูได้จาก word

font-size: ขนาด เป็น px pt pc em mm cm in ...

กำหนดความหนา บาง font-weight: normal, lighter, bold, bolder

กำหนด ปกติ - เอียง 45 องศา - เอียง font-style: normal, oblique, italic

กำหนดพิมพ์เล็ก พิมพ์ใหญ่ ในภาษาอังกฤษ font-variant: normal, small-caps

การใส่รวม
font: family variant weight style size;

2.5 การจัดวางรูปแบบ

จัดกลาง ซ้าย ขวา เต็มพื้นที่ text-align: center, left, right, justify

จัดตามแนวตั้ง บน ล่าง กลาง vertical-align: top, bottom, middle
การจัดตำแหน่งของ selector
position:relative จะใช้คู่กับ left: --px, em, %, pt, in, .....
top:
right:
bottom:

จัดตำแหน่งห่ างจากขอบ
margin-left:
margin-right:
margin-top:
margin-bottom:

การใส่คุณสมบัติรวม
margin:top right bottom left;
margin: 5px 40px 2px 9px;


2.6 คำสั่งอื่นๆ
letter-spacing: 3px; ตัวอักษรห่ าง 3px
word-spacing: 5px; คำห่ าง 5px
display: none; ไม่แสดง selector นั้นๆเลย
visibility: hidden; ไม่แสดง selector นั้นๆ แต่เหลือพื้นที่ไว้
display: block; ให้ selector นั้นเป็น block ห้ามซ้อน selector


3. รูปแบบการวางโค้ด




4. ตัวอย่างของการแต่งโค้ดนะคะ
สมมุติเราต้องการที่จะใส่พื้นหลังให้กล่องคอมเม้นท์
ด้วยการใส่รูป ใส่ชนิดกรอบ ใส่สีเส้นกรอบ ความกว้าง ความสูง แบบอักษร
ขนาดและสีอักษรที่กล่องคอมเม้นท์
วิธีเขียน 1. เราต้องกลับขึ้นไปดูว่ากล่องคอมเม้นท์เค้าเรียกกันว่าอะไร
คำตอบคือ TEXTAREA
2. คำสั่งของการใส่รูปเป็นพื้นหลังคือ background-image:url (…..)
3. คำสั่งที่ใช้เกี่ยวกับกรอบ คือ border – style : ใส่ชนิดกรอบ สีของเส้นกรอบ
ความกว้างของเส้นกรอบ border – width: ระบุความกว้าง px
4. ขนาดและสีอักษรคำสั่งคือ font – size: ระบุขนาดอักษร px ;color: # ใส่รหัสสี
5. กำหนดความสูงให้กล่อง height : ความสูง px
กำหนดความกว้างให้กล่อง width : ความกว้าง px
6. ระหว่างคำสั่งของแต่ละคำสั่งต้องคั่นด้วย ;

เมื่อนำคำสั่งมาวางรวมในรูปแบบโค้ด
โค้ดที่ได้ที่จะนำไปวางใน customize profile




จากโค้ดที่ได้ถ้าเราจะเอาไปใช้กับโปร์ไฟล์ช่องซ้ายมือ (ที่มีรูปเรา)
ก็เพียงแค่เปลี่ยนจาก textarea เป็น #about-left แค่นี้เองค่ะ

วิธีการทำโค้ดอื่นๆ ก็เป็นแบบเดียวกัน ดังนั้นถ้าใครอยากแต่ง hi5 เป็นก็ต้องศึกษาส่วนต่างๆ ของ
hi5 และคำสั่งต่างๆก่อนนะคะ

หาข้อมูลเพิ่มเติมที่นี่นะ
รหัสสี
http://board.zuzaaclub.com/index.php?topic=63.0
วิธีหา url
http://board.zuzaaclub.com/index.php?topic=554.0
ชนิดกรอบ
http://board.zuzaaclub.com/index.php?topic=246.0
ของตกแต่ง
http://board.zuzaaclub.com/index.php?board=16.0