วันพุธที่ 5 ตุลาคม พ.ศ. 2554

CSS + PHP เบื้องต้น

CSS + PHP เบื้องต้น
     สวัสดีครับชาวไอทีทุกท่าน  วันนี้ผมมีบทความเกี่ยวกับ CSS  มาฝากครับ  ซึ่งถ้าใครเขียนเว็บอยู่แล้วนั้นจะรู้ว่าหลักการเขียนเป็นยังไงและใช้งานยังไง  แต่สำหรับคนที่พึ่งเริ่มต้นนั้นก็สามารถติดตามได้จากบทความนี้ครับ
       ก่อนอื่นนั้นเราต้องมี appsevr  และโปรแกรมที่จะใช้เขียนก่อนนะครับ  ในที่นี้ผมใช้ Dreamweaver ในการเขียนนะครับ  สำหรับ appsevr นั้นสามารถโหลดมาใช้งานได้ฟรีๆที่ http://www.appservnetwork.com/

ขั้นตอนการติดตั้ง
       มาดูขั้นตอนการติดตั้งกันเลยครับ  ดับเบิ้ลคลิกตัวที่โหลดมาเลยครับ


คลิก Next 



คลิก I Agree



คลิก Next



คลิก Next



       ตรงนี้ข้างบนจะเป็นชื่อ server  และข้างล่างจะต้องกรอก E-mail ของเราครับ  แล้ว Next 



กรอก password แล้ว Install  ครับ



กำลังทำการติดตั้ง



เสร็จสิ้นครับ



       ทดสอบว่าโปรแกรมสามาถรทำงานได้หรือไม่  โดยทำการกรอก 127.0.0.1 ที่ url ครับ  ถ้าไม่มีอะไรผิดพลาดจะขึ้นตามรูปข้างล่างครับ



       มากำหนด server ให้กับ Dw ครับ  โดยเลือก site > new site



1. พิมพ์ชื่อเว็บของเรา
2. เลือกที่เก็บเว็บของเรา



       กดเลือกมาที่ C:\AppServ\www แล้วก็ตั้ง folder ใหม่เป็นชื่องานของเรานะครับ  แล้วเลือก open ....



เลือก Select



       เลือก server  แล้วก็เลือกคลิก + 



เลือก Basic  ตั้งค่าตามภาพแล้วเลือก Advanced ครับ



ตั้งค่าตามภาพครับ



เลือก Testing  แล้ว Save ครับ



มาเริ่มต้นการเขียนกันเลยครับ  เลือก php



       ซื่งตอนนี้เรายังไม่สามารถใช้งานภาษาไทยได้นะครับ  ต้องมาตั้งค่าก่อน  เลือก Edit> preferences ครับ



ตั้งค่าตามภาพเลยครับ



แล้วก็กด ok ครับ



เริ่มตั้นการเขียน css ครับ  โดยการประกาศเรียกใช้งาน css ก่อน
<style type="text/css">
 #textbox{
               position:absolute;
        width:200px;
         height:200px;
               background:#309;
     left: 102px;
   top: 66px;
   }
 </style>







       สังเกตุว่าถ้าเราประกาศ  position:absolute;  กล่องใบนี้สามารถใช้เม้าส์ลากวาง หรือ ขยาย-ย่อ ขนาดได้ครับ



กด F12  เพื่อรันดูครับ



       เป็นไงบ้างครับสำหรับ CSS เบื้องต้น  ในความคิดของผมแล้ว CSS นั้นจะช่วยให้เราเขียนเว็บได้เร็วและสวยมากขึ้นเลยครับ  เด๋วบทความต่อไปเราจะมาเจาะลงลึกกว่านี้นะครับ  หวังว่าคงเป็นประโยชน์ไม่มากก็น้อยกับผู้ที่สนใจนะครับ  สำหรับวันนี้สวัสดีครับ....... _/l\_