COMPRO

วันเสาร์ที่ 10 พฤศจิกายน พ.ศ. 2555

CSS - ตัวอย่างการทำฟอร์มกรอกข้อมูล

ในไฟล์ XHTML (ไฟล์ formtest.htm)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-874">
<title>แบบฟอร์ม</title>
<link rel="stylesheet" type="text/css" href="formtestcss.css">
</head>

<body>
การจัดหน้าตาของฟอร์มจะใช้ label แสดงข้อความ และใช้แท็ก p แทนการใช้ตาราง ซึ่ง p ทำหน้าที่เหมือนแท็ก tr ต่อไปเป็นโค้ดของฟอร์ม

<form action="#" method="post" enctype="multipart/form-data">
<p>
<label for="name">ชื่อ : </label>
<input type="text" name="name" id="name" />
</p>
<p>
<label for="mail"> อีเมลล์ : </label>
<input type="text" name="mail" id="mail" />
</p>
<p>
<label for="note">รายละเอียด : </label>
<textarea name="note" id="note" cols="50" rows="10"></textarea>
</p>
<p class="sub">
<input type="submit" name="submit" class="submit" value="ส่งข้อมูล" />
</p>
</form>
</body>
</html>

ในไฟล์ CSS (ไฟล์ formtestcss.css)

p {
padding: 0;
margin: 4px 0;
}

label {
float: left;
position: relative;
width: 145px;
line-height: 20px;
text-align: right;
padding-right: 5px;
}

p.sub {
padding-left: 150px;
}

CSS - เรื่องของ SEO

การทำ SEO ที่มีประสิทธิภาพมีหลายวิธี เช่น การจัดการหน้าเวปให้มีขนาดย่อมลง จัดการกับ content ให้เป็นระเบียบเรียบร้อย รวมไปถึงตัว code เองด้วย และ เนื้อหาที่ตรง ถูกต้องตามวัตถุประสงค์ของเวปไซท์ พยายามแทนที่ภาพด้วย text ให้มากที่สุด โดย text เหล่านั้นไม่ใช่การ spaming กับ search engine spiders

ความสัมพันธ์ ระหว่าง code และ เนื้อหา

Search Engine Spider นั้นทำงานค่อนข้างจะคล้าย ๆ กันทุกตัว ซึ่งก็คือ เหมือนกับตาของมนุษย์ และถ้ามันมี text ที่มันไม่มีประโยชน์มากๆ มันจะเป็นการยากที่จะทำให้มันหาเนื้อหา หรือ สรุปใจความบนหน้าเวปนั้นว่ากล่าวถึงอะไร ควรจะนำลงไปจัดในหมวดหมู่ใด เพราะฉะนั้นสรุปง่าย ๆ ว่า ต้องทำให้มันง่ายที่ผู้ใช้จะอ่าน และ ง่ายต่อเจ้า Search Engine Spider ที่จะเข้ามาอ่านด้วยเช่นกัน

ตัวอย่าง

<strong> <font color=”red” size=”20px”> CSS </font></strong>

ถ้าเป็น XHTML

<h1> CSS </h1>

และใน CSS

h1 {font-famaily: Arial; font-size: 24px; font-weight: bold; color: green;}

จากตัวอย่าง ใช้ H1 เพื่อที่จะบอกให้รู้ว่าเจ้า text ที่ตัวมันครอบอยู่นั้นหมายถึงหัวข้อที่สำคัญที่สุด โดยเจ้า Search Engine Spider ก็จะเข้าใจตามความหมายของ tag นั้น แล้วไปกำหนดคุณลักษณะของการแสดงผลของ H1 ด้วย CSS ในที่นี้ไม่ได้หมายความว่า จะต้องใช้ H1 กับหัวข้อเสมอไป ใน XHTML นั้นสามารถเรียกมาใช้ได้ตั้งแต่ H1 ไปจนถึง H6 ลำดับความสำคัญก็จะลดน้อยลงไปตามตัวเลขที่มากขึ้น เพราะฉะนั้นต้องเลือกใช้ให้เหมาะสม

การใช้รูปภาพ

สามารถใช้รูปภาพนั้นให้เป็น background picture แทนได้ ด้วยการใช้ CSS ตกแต่ง ข้อมูลที่อยู่ใน code จะต้องเหมือนกับสิ่งที่ตาของ user เห็น และ Search Engine Spider เห็น ไม่เช่นนั้นจะเข้าข่าย Black Hat และได้รับโทษแบนเวปได้

ตัวอย่าง ใน XHTML

<h1><span> TEST </span></h1>

และ ใน CSS

h1 {
width: 316px;
height: 158px;
background: url(../images/bg/h1_inner_logo.jpg) no-repeat;
}

h1 span {visibility: hidden;}

รูปภาพของคุณก็จะต้องมีคำว่า TEST ไม่ใช่รูปภาพอีกคำ ใน code เป็นอีกคำ ส่วนอื่น ๆ ก็เช่นกัน ไม่ใ่ช่จงใจซ่อนเนื้อหาบางอย่างไว้ เพื่อผลลัพธ์ทาง SEO ถ้าโดนจับได้ Search Engine ก็จะแบนเวปไซท์ที่กระทำการแบบนี้โดยทันที

CSS - เรื่องของตาราง

กำหนดในส่วนของแท็ก table

รูปแบบ  table-layout: value

เป็นการกำหนดขนาดของตารางให้เปลี่ยนแปลงตามเนื้อหา หรือไม่เปลี่ยนแปลงตามเนื้อหา โดยที่ค่า value มี

automatic คือ ให้เปลี่ยนขนาดตามความยาวของเนื้อหา
fixed คือ ให้ขนาดคงตัวไม่เปลี่ยนแปลง

กำหนดในส่วนของแท็ก td

รูปแบบ align : value;   (value มี left, right,center, justify)
vertical-align : value;   (value มี baseline, top, middle, bottom)

ใช้จัดรูปแบบเนื้อหาในตาราง จะมีผลกับรูปภาพและข้อความเท่านั้น

<thead>, <tfoot> และ <tbody>

เป็นแท็กที่ใช้ในแท็ก table เพื่อแบ่งส่วนของตาราง โดย <thead> </thead> เป็นส่วนหัวของตาราง <tbody> </tbody> เป็นส่วนเนื้อหาของตาราง และ <tfoot> </tfoot> เป็นส่วนท้ายของตาราง

CSS - การกำหนดรูปแบบตัวอักษร

มี property ดังต่อไปนี้

font-family : font_name ฟอนท์ ใส่เป็นชื่อฟอนต์ กรณีที่มีมากกว่า 1 ฟอนต์ ต้องคั่นด้วย ,
font-size : value ขนาดตัวอักษร มีค่า small, medium, large, 1-7, ตัวเลขความสูงพร้อมหน่วย เช่น px (pixel), pt (point)
font-weight : value ความหนาของตัวอักษร มีค่า normal, extra-light (บางพิเศษ), light (ตัวบาง), medium, bold (หนา), extra-bold (หนาพิเศษ)
font-style : value รูปทรงของตัวอักษร มีค่า normal, italic (ตัวเอียง), smallcaps (ตัวพิมพ์เล็ก)
font-height : value ความสูงของบรรทัด มีค่า 1-7 หรือตัวเลขความสูงพร้อมหน่วย

color : value สีของตัวอักษร ใส่ชื่อสี หรือ ตัวเลขฐานสิบหกต่อหลังเครื่องหมาย #
background : value พื้นหลังของตัวอักษร ใส่ชื่อสี หรือ ตัวเลขฐานสิบหกต่อหลังเครื่องหมาย #
word-spacing : length ระยะห่างระหว่างคำ ใส่ค่าตัวเลขความห่างพร้อมหน่วย
letter-spacing : length ระยะห่างระหว่างตัวอักษร ใส่ค่าตัวเลขความห่างพร้อมหน่วย

text-decoration : value การขีดเส้นข้อความ มีค่า underline (ขีดเส้นใต้), none (ไม่ขีดเส้นใต้), line-through (ขีดเส้นพาดกลางข้อความ)
text-align : value จัดย่อหน้าข้อความ มีค่า left (ชิดซ้าย), right (ชิดขวา), center (กึ่งกลาง), justify (เท่ากันทั้งสองด้าน)
text-transform: value แปลงอักษรภาษาอังกฤษ มีค่า uppercase (ตัวพิมพ์ใหญ่), lowercase (ตัวพิมพ์เล็ก), capitalize (ให้ตัวแรกของประโยคเป็นตัวใหญ่)
text-indent: value การจัดย่อหน้า ค่าคือตัวเลขพร้อมหน่วย (บอกระยะย่อหน้า)

หน่วยของตัวอักษร มี in (นิ้ว) , cm (เซ็นติเมตร) , mm (มิลลิเมตร) , pt (พอยท์) , pc (ไพก้า) (1 ไพก้า = 12 พอยท์)

การขึ้นบรรทัดใหม่ ที่ไม่ใช่ย่อหน้าใหม่

แท็ก br จะทำให้ขึ้นบรรทัดใหม่ โดยระยะห่างระหว่างบรรทัดจะกว้างตามปกติเหมือนตัวหนังสือสองบรรทัด พิมพ์ <br /> ในตำแหน่งที่ต้องการขึ้นบรรทัดใหม่ โดยไม่ต้องมี tag ปิด

เพิ่มเติม
- เครื่องหมาย slash ( / ) จำเป็นเฉพาะใน XHTML เท่านั้น และจะต้องไม่ลืมว่าต้องเว้นช่องว่างระหว่างคำว่า br และเครื่องหมาย / โดยการเคาะ spacebar 1 ทีด้วย
- สามารถใช้ br ได้หลายครั้ง ถ้าต้องการเว้นหลายๆบรรทัด

CSS - div กับ span

แท็ก div และ span เป็นแท็กที่ใช้ในการแบ่งกลุ่มข้อมูล เพื่อกำหนดการแสดงผลบนหน้าเว็บเพจ ทั้งสองมีความแตกต่างกันตรงที่ผลลัพธ์ของการแสดงผลบนเว็บเพจ ซึ่งแตกต่างกันดังต่อไปนี้

div เป็นแท็กที่ใช้กำหนดรูปแบบข้อความให้แตกต่างจากข้อความอื่นๆ ในบรรทัดนั้น โดยที่แท็ก div จะแบ่งกลุ่มข้อมูลออกจากกัน โดยขึ้นบรรทัดใหม่ทุกครั้งที่โปรแกรมพบแท็กดังกล่าว

span ใช้เพื่อกำหนดรูปแบบข้อความให้มีรูปแบบที่แตกต่างจากข้อความอื่นๆ ในบรรทัดนั้น โดยไม่ขึ้นบรรทัดใหม่

CSS - float และ clear

float
float แปลว่า ลอย มีคุณสมบัติทำให้ element กลายสภาพจากสถานะปกติให้สามารถลอยไป ณ ตำแหน่งที่เรากำหนด และอนุญาติให้ text หรือ element อื่น ๆ ล้อมรอบมันได้ แต่ส่วนมากแล้วมักถูกใช้กำหนดกับรูปภาพ มันก็คือคำสั่ง css ที่สร้างมาเพื่อแทน align="left" กับ align="right"

เมื่อใช้คุณสมบัติ float จะทำให้ element ที่รับคุณสมบัตินี้ไป สามารถ float ไปทางซ้ายและทางขวาของ element ที่เป็น container ของมันเอง แต่ไม่สามารถ float ไปอยู่บนสุดและล่างสุดได้ และทุก ๆ element นั้นสามารถดึงเอาคุณสมบัติ float ไปใช้ได้

ตัวอย่างการนำไปใช้

body { font-family: Arial, Helvetica, sans-serif; font-size: 100%; }
.contentStyle01 { width: 550px; font-size: 0.75em; }
.contentStyle01 img {float: left; margin: 0.625em; border: 1px solid #666;}

จัดตำแหน่งด้วย float และ clear

การวางตำแหน่ง layout ของ div แต่ละอัน จะใช้ float และ clear เป็นประจำ ทำให้วางตำแหน่งได้อิสระมากขึ้น ในกรณีที่ต้องการมีหลายคอลัมน์ ใน 1 หน้า

float นั้นจะคล้าย align ที่เราใส่ใน table เมื่อต้องการให้อยู่ชิดซ้ายก็ใส่ float: left ถ้าชิดขวาใส่ float: right

clear นั้น clear: left คือ ไม่ยอมให้มีอะไรอยู่ด้านซ้าย clear: right คือ ไม่ยอมให้มีอะไรอยู่ด้านขวา ที่มักใช้เป็นประจำคือ clear: both คือไม่ยอมให้มีอะไรอยู่ทั้ง 2 ด้าน มักใช้กับส่วน footer

CSS - Position

รูปแบบ position : value

คือ การวางเลย์เอาท์หน้าเว็บ ด้วยการกำหนดให้วัตถุย้ายไปในตำแหน่งต่างๆ

ค่า value มีดังนี้

static
เป็นค่าปกติของ position คือ ถ้าในกรณีที่เราไม่ได้กำหนด position ให้ element ใดๆ css จะเลือกค่า static ให้โดยปริยาย และการใช้ static คือไม่สามารถสั่งได้ว่าให้ห่างจาก ซ้าย ขวา หน้า หลัง ได้เท่าไหร่

fixed
ทำให้ element ที่ถูกกำหนดอยู่กับที่ มันจะไม่ย้ายไปไหน แม้ว่าหน้าต่างจะเลื่อนไป โดยหากจะกำหนดตำแหน่งของวัตถุบนจอภาพก็ให้ใช้กับ top bottom left และ right เช่น
position: fixed;
top: 30px;
left: 100px;

relative
ถ้ากำหนด position ให้เป็น relative สามารถจะให้ element นี้ อยู่ถัดจาก element ก่อนหน้า โดยกำหนด กับคำสั่ง top bottom left right เช่น position: relative; top: 20px; left: -50px; หมายความว่า element ที่ถูกกำหนดนี้ ให้ด้านบนอยู่ห่างจาก element ก่อนหน้านี้ 20px และ เขยื้อนไปทางซ้าย 50px เมื่อเทียบกับ element ก่อนหน้านี้

absolute
ถ้า position ของ element ใดๆ โดนสั่งแบบ absolute การทำงานคือ ไม่ว่าจะสั่งให้ไปอยู่ที่ไหนในหน้า absolute จะไปตามสั่งโดยไม่ได้มีการอ้างอิงค่าจาก element ก่อนหน้านี้ คือแยกออกไปเลย โดยการอ้างอิงตำแหน่ง แกน x,y ตามหน้าจอ เช่น position: absolute; top: 20px; left: 80px; ตำแหน่งของวัตถุจะอยู่ห่างจากขอบจอของบราวเซอร์ด้านบน 20px ด้านซ้าย 80px

การซ้อน position แบบซ้อน absolute ใน relative ซึ่งค่า absolute อยู่ใน element ของ relative ค่า absolute แบบนี้ จะอ้างอิงค่า x,y ของ element ที่ถูกสั่ง position เป็น relative แทนที่การอ้างค่า x,y ของหน้าเว็บแทน

เช่น

.box1 {
position: relative;
left: 100px;
top: 30px;
background: #ff9900;
height: 150px;
width: 700px;
}

.box2 {
position: absolute;
top: 20px;
right: 5px;
background: #FFFFFF;
}

โดย

<div class="box1">
<div class="box2">
</div>
</div>

คลาส box2 จะอ้างค่า x,y จาก คลาส box1 แทนการอ้างค่าจากหน้าจอ