ตอนที่ 10 ตกแต่งหน้าตาด้วย CSS

ข้อดีของโปรแกรมยุกต์ใหม่ คือ การแยกการทำงานของแต่ละส่วนออกอย่างชัดเจน
ไม่ว่าจะเป็นส่วนของการติดต่อฐานข้อมูล ฟอร์ม การประมวลผล รวมถึงส่วนติดต่อผู้ใช้

ใน HTML ก็ไม่มีเว้น เราสร้างฟอร์ม จากฟอร์มของ HTML ติดต่อฐานข้อมูลผ่าน ODBC , MySQL โดยใช้ PHP หรือ ASP
และตกแต่งหน้าตาด้วย CSS

ถึงขั้นตอนเกือบท้ายสุดแล้ว นั่นคือการเก็บรายละเอียดและตกแต่งหน้าตา มาเริ่มกันเลยครับ
ถ้าสังเกตที่ไฟล์ HelloWorld.html เราได้นำเข้าไฟล์ที่ชื่อ sample.css มาไว้แล้วภายใต้แท็ก head วันนี้เราจะปรับแต่งไฟล์ sample.css

เพื่อให้แสดงผลโปรแกรมของเราให้ออกมาดูดีหน่อย โดยส่วนที่จะปรับแต่งประกอบด้วย
id ของ div แท็ก ที่ชื่อ testMootools และ
id ของ div แท็ก ที่ชื่อ AjaxResult เป็นหลัก

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

body
{
font-family: Arial, Helvetica, Tahoma, sans-serif;
font-size:14px;
width:100%;
}

a
{
text-decoration:none;
padding:2px 3px 2px 10px;
text-align:center;
}

a:hover
{
color:green;
text-decoration:overline underline;
}

#testMooTools
{
font-size:36px;
text-align:center;
border:1px solid #ddd;
padding:30px 5px 30px 5px;
background-color:#69c;
color:#ffffff;
width:100%;

}

#AjaxResult
{
padding:10px 10px 10px 30px;
border:1px solid #69c;
width:90%;
text-align:left;
}

สรุปหน้าตาโปรแกรมที่เสร็จสมบูรณ์แล้วจะออกมาประมาณนี้


ครับตั้งแต่ต้นมาถึงตอนนี้ผมเพียงแนะนำให้รู้จักระบบการทำงานและการสร้างโปรแกรมขั้นพื้นฐานเท่านั้น
แต่โดยความเป็นจริงแล้ว โปรแกรมแค่นี้ยังนำไปใช้ประโยชน์ไม่ได้เลย
ตอนต่อไปผมจะแนะนำในส่วนของ การสร้างโปรแกรมเพื่อใช้งานจริง ระหว่างรอขอให้ท่านได้เตรียมเครื่องมือต่อไปนี้เพิ่มเติม
1. Web Server หากคุณอยู่บน Windows ก็ใช้ Appserv ได้โปรแกรมของคนไทยทำให้ใช้ฟรี ๆ แล้ว
2. PHP อันที่จริงก็ติดมากับ Web Server แล้ว แต่ใครยังไม่ได้ติดตั้งก็ขอให้ติดตั้งและทดสอบให้เรียบร้อยเสียก่อน
คราวหน้าผมจะพาไปลุยของจริงกันครับ