WordPress คืออะไร?

WordPress คืออะไร?

WordPress คือโปรแกรมชนิดหนึ่ง ที่มีระบบในการช่วยจัดการเนื้อหาบนเว็บ ได้อย่างง่ายดาย หรือที่หลายๆ คนใช้คำว่า Contents Management System (CMS) ซึ่งจริงๆ แล้ว โปรแกรมประเภท CMS มีเยอะแยะ อย่างเช่น PHP Nuke, Joomla, Mambo, OScommerce, Magento เป็นต้น

WordPress เป็น CMS ประเภท Blogซึ่งพัฒนาขึ้นโดยภาษา PHP และทำงานบนฐานข้อมูล MySQL ภายในสัญญาอนุญาตใช้งานแบบ General Public License (GNU) มีเวปไซต์หลักอยู่ที่ http://www.wordpress.org และมี free hosting สำหรับขอรับบริการฟรีที่ http://www.wordpress.com

WordPress เป็นโปรแกรมที่ใช้งานง่าย สำหรับคนที่ต้องการมีบล็อกส่วนตัว เป็นที่โปรแกรมที่นิยมกันทั่วโลก รวมทั้งในประเทศไทยเราด้วยเช่นกัน นอกจากการติดตั้งง่ายแล้ว WordPress ยังมีข้อดีก็คือ เราสามารถหาดาวน์โหลดธีม (Themes) หรือหน้าตาของเว็บรูปแบบต่างๆ

ที่โหลด WordPress  >>

เว็บหลักของผู้พัฒนา http://www.wordpress.org

Plugins Directory ที่โหลดโปรแกรมเสริม http://wordpress.org/extend/plugins/

ธีม หรือหน้ากากของ wordpress ซึ่งมีกว่า 1500 แบบ

1. http://themes.wordpress.net/
2. http://topwpthemes.com/
3. http://www.wpthemespot.com/

วิธีการติดตั้ง wordpress >>

1.เริ่มด้วยการโหลดไฟล์ติดตั้งเวิร์ดเพรสภาษาไทยรุ่นล่าสุดที่ http://th.wordpress.org

 

2.นำไฟล์ติดตั้งที่ดาวน์โหลดมา อัปโหลดขึ้นใน root directory ของโดเมนนั้น ๆ ผ่าน ftp หรือ file manager ของ control panel

 

3.แตกไฟล์ซิบออกมาใน directory นั้น

 

4.สร้างฐานข้อมูลและผู้ใช้สำหรับฐานข้อมูลนั้น

 

5.เข้าเว็บที่เราจะทำการติดตั้ง ในกรณีนี้คือ http://tullaya.com จะพบว่าหน้าเว็บเป็นแบบนี้ ให้ทำตามขั้นตอน

 

6.เตรียมข้อมูลรายละเอียดที่การติดตั้งต้องการให้พร้อม

 

7.ใส่ข้อมูลเพื่อเชื่อมต่อการติดตั้งเวิร์ดเพรสและฐานข้อมูล

 

8.เชื่อมต่อสำเร็จแล้ว ก็เริ่มทำการติดตั้ง

 

9.ใส่รายละเอียดของเว็บเวิร์ดเพรสที่ทำการติดตั้ง

 

10.ติดตั้งสำเร็จแล้วแล้ว

 

11.เมื่อติดตั้งสำเร็จ ระบบจะพาคุณมายังหน้า login เพื่อเข้าสู่ระบบและหน้าจัดการของเวิร์ดเพรสเพื่อตั้งค่าหรือเขียนหน้าเว็บ

 

12.หน้าเว็บที่ทำการติดตั้งสำเร็จแล้ว

 

หน้า WordPress ที่เเก้ไข >>
เลือดจระเข้

 

การทำตัวการ์ตูน

 

การสร้างการ์ตูน

 

 

ขั้นตอนการทำการ์ตูน >>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 
ผลงาน  >>
 

 
ทำตัวการ์ตูน ” โดเรมี ”  >>
 
ตัวเเรก >>
 

 
แก้ตัวการตูน >>
 

 

การออกแบบนามบัตร

การออกแบบนามบัตร

ส่วนประกอบของนามบัตร

     1.ชื่อเจ้าของนามบัตร

     2.เบอร์โทร, Fax, E-mail

     3.สถานที่ทำงาน

     4.ที่อยู่ของเจ้าของนามบัตร

     5.ชื่อเว็บไซต์

     6.รูปภาพที่สอดคล้องกับข้อความ

     7.สัญลักษณ์ของหน่อยงาน

     8.อื่นๆ

ขั้นตอนการออกแบบนามบัตร

     1. ศึกษารายละเอียดและวิเคราะห์ข้อมูลที่จำเป็นที่ต้องการสื่อสาร

     2. นำข้อมูลที่ต้องการสื่อสารมาออกแบบร่าง

     3. เลือกรูปแบบและการวางผัง (Layout) ที่เหมาะสมกับงาน

     4. ทำการวางแบบเลย์เอ้าท์ นำส่วนประกอบต่างๆมาลองวางลงในหน้ากระดาษ เพื่อดูว่ามีมากพอหรือไม่

     5. กำหนดลักษณะของส่วนประกอบต่างๆของงานที่เหมาะสม

หลักการออกแบบนามบัตร

     1. ตัวอักษรต้องตัดกับพื้นหลัง

     2. ไม่ควรใส่ข้อความแน่นหรือมีจำนวนมากเกินไป

     3. ควรคำนึงถึงหลักทฤษฎีสีและศิลปะในการออกแบบ

     4. ตัวอักษรไม่ควรเกิน 2-3 ชนิดใน 1 นามบัตร

     5. ควรเว้นระยะขอบประมาณ 0.5 ซ.ม.

     6. ภาพให้เหมาะสมกับเนื้อหา

ผลงาน  >>

สัปดาห์ที่ 3 วันที่ 25-29 ก.ค 2554

1 ศึกษา แะ แก้ไข หน้าเว็บของ worddpress

2 ศึกษา worddpress ได้งานเพิ่ม คือออกแบบโบว์ชัว ครีม แอ๊บเปิ้ล 

สัปดาห์ ที่่ 2 วันที่ 18 – 22 ก.ค 2554

ได้ประโยชน์ ได้เว็บไซร์สำหรับหารูปภาพเพื่อนำมาใ้ช้งาน ได้รู้ ถึงองค์ประกอบของ นามบัตร เรื่อง font สี การจ ัดวาง

ได้ ฝึกการ วาด การ์ตูน ใส่สี ให้ ดู มี มิติ โดยใช้โปรแกรม photosh ทำออกมาให้เหมือนมากที่สุด ที่ ทำ คือ โดเรม่อน

ส่งนามบัตร ส่งการ์ตูน ดาวน์โหลด wordpress  มาศึกษา

สร้างเว็บ พรมมิ ศึกษาแก้ไขหน้าเว็บของ wordpress

สัปดาห์แรก 11-14ก.ค2554

วันแรกที่มา 11 ก.ค 2554 ตอนแรกเขียนโค๊ด แต่เรียนไปเรียนมา งง ฮ่า ๆ เรย บอกพี่ต้องว่า อยากออกแบบงานด้านกราฟฟิกส์  พี่ต้องเรยมอบงาน ออกแบบ นามบัตร ของ marumoil ให้มาทำ ทำโดย ใช้โปรแกรม Adobe Photosshop  และก็  Adobe illustrator  วันนี้ ก็ ให้พี่ดู พี่ให้มาปรับแต่งเรื่องฟ้อน ของ logo และ ก็ สีของ นามบัตร

วันที่ 12 ก.ค 2554 วันที่สอง นั่งแก้นามบัตรทั้งวัน ^^ แอบเล่นเฟรสด้วย

วันที่ 13 ก.ค 2554 วันนี้นั่งอกแบบ logo  เฉพาะ logoเฉยๆ นามบัตร ก็แก้ไปเลื่อย ๆ พี่ต้องให้หาเว็บที่เรา คิดว่า เราชอบมากที่สุด เอาไว้สำหรับ โหลดรูปภาพเวลาทำงาน หาเว็บที่คิดว่าดีที่สุดมาให้คะเเนนว่าเว็บไหนหาแร้วได้ตามที่เราต้องการมากที่สุด ก๊อได้เว็บ http://www.dremtime.com รูปภาสวยมาก ลายน้ำแก้ไขง่าย

วันที่ 14 ก.ค 2554 พี่ต้องให้งานกลับไปทำคือ ทำรูปอะไรก๊อได้ ทำให้เหมือนภาพจริง ทำภาพเป็น สามมิติ งานที่ทำ คือ รูป โดเรม่อน

การค้นหาข้อมูล Mysql ผ่าน PHP และ HMTL

ในคำสั่ง Mysql มี 4 อย่างคือ select  insert  update และ delete

โดยที่ผมจะนำเสนอคือการ นำคำสั่ง select  เพื่อการค้นหาและแสดงรายชื่อลูกค้าโดยผ่าน การควบคุมของ php ดังนี้

 

<?
require_once(‘include/config.php’);
require_once(‘include/mysql.php’);
require_once(‘include/const.php’);
$search = $_REQUEST[“txtsearch”];function show_provice()
{
echo “<table border=\”1\” cellspacing=\”0\” width = \”100%\” >”;
echo “<tr >”;
echo “<td width=\”55\”   align = \”center\”>”.”รหัสลูกค้า”.”</td>”;
echo “<td width=\”200\”   align = \”center\” >”.”ชื่อลูกค้า”.”</td>”;
echo “<td width = \”300\” align = \”center\” >”. “ที่อยู่”.”</td>”;
echo “<td width = \”100\” align = \”center\” >”. “เบอร์โทรศัพท์”.”</td>”;
echo “<td width = \”150\” align = \”center\” >”. “E_MAIL”.”</td>”;
echo “<td width = \”55\” align = \”center\” >”. “สถานะ”.”</td>”;
echo “<td width = \”100\” align = \”center\” >”. “หมายเหตุ”.”</td>”;
echo “<td width = \”55\” align = \”center\” >”. “Edit”.”</td>”;
echo “</tr>”;
global $search;
$connect = new Mysql();

การสร้าง layout ด้วย cs

CSS คือ ชุดคำสั่งที่ใช้สำหรับการกำหนดการแสดงผลข้อมูลหน้าเว็บพจ ซึ่งคำเต็ม ๆ ของ CSS คือ Cascading Style Sheets เป็นมาตราฐานหนึ่งของ W3C ที่กำหนดขึ้นมา เพื่อใช้ในการตบแต่งหน้าเอกสารเว้บเพจโดยเฉพาะ การใช้งาน CSS จะเข้ามาช่วยเพิ่มความสามารถให้กับ HTML

ความสามารถของ CSS

ความสามารถของ CSS ถ้าจะยกตัวอย่างให้เห็นภาพกันชัด ๆ ผมก็ขอยกตัวอย่างดังนี้แล้วกันครับ

– CSS สามารถทำให้ TEXT ที่เป็นจุด Link ไม่ให้มีการขีดเส้นใต้ได้
– CSS สามารถกำหนดการ Fix ขนาดของ Font อักษรได้ นั้นคือ เมื่อผู้เยี่ยมชมปรับขนาด Font ที่ Browser ที่ขนาดเท่าใด CSS ก็ยังคงแสดงผลขนาด Font ที่ขนาดที่เรากำหนดไว้เสมอ ส่งผลให้ทำให้เว็บเพจเราไม่เละตามขนาดของ Font ที่ผู้ใช้ปรับเปลี่ยนที่ Browser
– CSS สามารถทำการกำหนดภาพพื้นหลัง (Image Background) ให้ได้ตำแหน่งและมีรูปแบบตามที่เราต้องการได้
– CSS ทำให้การปรับปรุงเว็บเพจในส่วนของการแสดงผลทำได้อย่างรวดเร็วขึ้น เนื่องจากเราสามารถปรับปรุงคุณสมบัติของการแสดงผลได้จากจุด ๆ เดียวแล้วส่งผลให้ทั้งหน้าเพจที่มีการใช้งาน CSS นั้นปรับปรุงให้เป็นไปตามที่เราแก้ไข
– CSS ทำให้เว็บเพจเราโหลดเร็วขึ้น

หน้า html
<link href ="table5.css" rel="stylesheet" type="text/css">
<BODY>
 <div id="ground">
<div id="head">header</div>
<div style="overflow:hidden">
<div id="body">body</div>
<div id="sidebar">sidebar</div>
</div>
<div id="footer"> footer</div> 
 </div>
 </BODY>
หน้า css
#ground {
	background-color:black;
	width:1024px;
	margin:0px auto;
	}
#head{
background-color:green;
width:1024px;
height:300px;
border:2px solid black; 
font-size:50px;
text-align:center;

}
#body{
background-color:red;
width:700px;
height:600px;
 font-size:50px;
 text-align:center;
float:left
 
}
#sidebar{
background-color:yellow;
width:320px;
height:600px;
 font-size:50px;
text-align:center;
float:right;
border:2px solid black; 
}
#footer{
background-color:purple;
width:1024px;
height:100px;
font-size:50px;
text-align:center;
border:2px solid black; 
}

 

960 Grid System คือ ??

960 Grid system เนี่ย มันคือ CSS Framework ที่เราเอามาต่อยอดได้ง่ายและเร็ว โดยมีการวางพื้นฐานมาเพื่อการจัด layout โดยเฉพาะ โดยมี css ให้ download มาใช้ (ที่ติดตัว CSS reset มาด้วย) และนอกเหนือจากนั้นก็ยังมี layout design สำหรับคนที่ทำงาน design ติดมาด้วย ไม่ว่าจะเป็น Photoshop, Firework, Illustrator และโปรแกรมอื่นๆอีกมากมาย เรียกว่าเตรียมพร้อมกันทั้ง design และ คน coding เลยทีเดียว

ทำความเข้าใจกับ พื้นฐาน 960 gird system ก่อน โดยเจ้าตัวนี้ จะขนาดกว้างรวม 960 Pixel ซึ่งดูสวย ในหน้าจอที่มีขนาดตั้งแต่ 1024 x 768 หรือใหญ่กว่า (ถือว่าเป็นคนส่วนใหญ่ในปัจจุบัน) โดยความกว้างนี้ เราจะสามารถแบ่ง column ได้หลายแบบ ตั้งแต่ 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 และ 480 ช่องเลย (ละเอียดจริงๆ) แต่ว่าคนส่วนใหญ่ ก็จะใช้การแบ่งที่ 12 หรือ 16 ช่อง

เพื่อนลองโหลด นำไปลองใช้ดูได้ที่นี้  http://960.gs/

มาเขียน CSS กันดีกว่า

มีน้องอยากให้สอน CSS ซึ่งเป็นส่วนเพิ่มเติมใช้ในตกแต่ง ออกแบบเว็บไซต์ให้สวยงามและแ้ก้ไขง่าย และเป็นสิ่งที่โปรแกรมเมอร์และนักออกแบบเว็บจำเป็นจะต้องรู้จัก

จริงๆแล้ว CSS นั้นไม่ยาก ให้น้องๆลองฝึกตามเว็บข้างล่างนี้ รับรองว่าเข้าใจชัวร์

http://www.w3.org/Style/Examples/011/firstcss.th.html

http://www.css-learning.com/css_syntax.html

“ความรู้เกิดจากการอ่าน ความชำนาญเกิดจากการฝึกฝน”

ใครอยากเก่งก็ขยันนะครับ