Easyhome 2010
IsanGate.net
Basic HTML Navigation Bar

CMS Web 2.0
Appserv (Windows)
Xampp (Linux)
Mamp (Mac)
phpMyAdmin
WordPress
Joomla!
Drupal
Concrete
 

Basic HTML Menu
Start here
References
10 Commands
Quick Launch
Programs & Tools
Get a basic
Free! Free!
Homesite 4.5
Step by Step
 

Text Links DD for You!
24แนะนำเว็บดีๆ ของคุณที่นี่
24ซื้อคอมพิวเตอร์ดีดีที่อุบลฯ
24บอกเว็บไซต์ดีดีของคุณที่นี่!

 

 

ADS 250x250

 

Web Design

 

 

Easyhome in Daily Web ครั้งที่ 2
ขอบคุณ เดลี่@web
ที่แนะนำเราครั้งที่ 2

 

Web Design

มื่อคิดจะสร้างบ้าน (Homepage) เป็นของตัวเองสักหลัง มือใหม่หัดสร้างทั้งหลายมักจะมีคำถามอยู่เสมอว่า

 
  • "เราจะเริ่มต้นอย่างไรดีนะ...?"
  • "จะทำเกี่ยวกับอะไร เรื่องอะไรดีล่ะนี่...?"
  • "เขาใช้โปรแกรมอะไรสร้างกันล่ะ สวยจัง... เห็นมีตั้งหลายตัว งง ??????"

คุณมาถูกที่แล้วครับ ผมก็เคยเป็นแบบนี้ล่ะเห็นเขาทำสวยอยากทำมั่งแต่ไม่รู้จะเริ่มต้นอย่างไรดี ต้องลองถูกลองผิดอยู่หลายรอบกว่าจะสรุปออกมาได้ นี่คือการรวบรวมเรื่องราวของการสร้างบ้านจากประสบการณ์อันน้อยนิดของผม (แต่อยากอวด) ด้วยเครื่องมือที่ง่ายๆ มีแล้วในเครื่องคุณเอง บวกกับความขยัน ตั้งใจและใฝ่หาอีกนิด และฝีมือทางศิลปะอีกหน่อย บ้านหลังน้อยก็จะเป็นรูปเป็นร่างไม่ยากเย็น โดยการศึกษาไปทีละหัวข้อ (คำแนะนำของผมคือ คุณสั่งปริ้นท์ออกทางเครื่องพิมพ์ไปอ่านเถอะ จะได้ไม่เสียเวลาและสะดวกกว่า) มีปัญหาก็อีเมล์มาสอบถามกันได้ครับ


 

เมื่อยุคสมัยเปลี่ยนไป การสร้างเว็บง่ายดายยิ่งขึ้น ด้วยการใช้ซอฟท์แวร์จัดการบริหารเว็บไซต์ ที่มีผู้พัฒนาออกมาให้ใช้งานกันมากขึ้น ซึ่งมีปฏิสัมพันธ์กับผู้ชมหลากหลายยิ่งขึ้น บางส่วนเป็นแบบพัฒนาขึ้นมาขายบริการพ้อมให้เช่าพื้นที่ และจดโดเมนได้เลย บางส่วนพัฒนาขึ้นมาแจกจ่ายให้ใช้งานกันฟรีๆ ไม่ต้องเสียสตางค์ เราเรียกกันง่ายๆ ว่า เว็บไซต์สำเร็จรูป CMS (Content Management System) ซึ่งของฟรีก็มีหลายรายเช่น WordPress, Joomla, Drupal, Concrete เป็นต้น

วันนี้จะนำเสนอเทคนิคการติดตั้ง การบำรุงรักษาข้อมูล การปรับแต่งเสริมเพิ่มเติมประสิทธิภาพ สำหรับเว็บไซต์สำเร็จรูปต่างๆ ติดตามกันได้เลยจะทยอยนำมาอัพเดทเป็นระยะๆ ไปเรื่อยๆ

  • Appserv : จำลองเครื่องให้เป็นเครื่องแม่ข่ายเพื่อทดสอบเว็บไซต์สำเร็จรูปบนวินโดว์ (Windows)
  • Xampp : จำลองเครื่องให้เป็นเครื่องแม่ข่ายเพื่อทดสอบเว็บไซต์สำเร็จรูปบนลินุกซ์ (Linux)
  • Mamp : จำลองเครื่องให้เป็นเครื่องแม่ข่ายเพื่อทดสอบเว็บไซต์สำเร็จรูปบนแม็ค (Mac)
  • phpMyAdmin : การจัดการฐานข้อมูล MySQL สำหรับเว็บไซต์ CMS
  • WordPress : เขียนบล็อกของเราให้กระจาย
  • Joomla : สร้างเว็บไซต์นำเสนอข่าวสารได้ทั้งเว็บส่วนตัว องค์กร หน่วยงาน
  • Drupal : สร้างเว็บไซต์นำเสนอข่าวสารได้ทั้งเว็บส่วนตัว องค์กร หน่วยงาน
  • Concrete : สร้างเว็บไซต์นำเสนอข่าวสารได้ทั้งเว็บส่วนตัว องค์กร หน่วยงาน

DomainSearch .
ค้นหาชื่อโดเมนเนมได้ที่นี่ ชื่อที่เราชอบมีคนจองหรือยัง? คลิกตรงนี้ไปจดทะเบียนเลย

 

star " เราจะเริ่มต้นอย่างไรดี? "


" เราจะเริ่มต้นอย่างไรดี? " คือ คำถามที่ผมได้รับจากเพื่อนๆ อยู่เสมอ ผมก็คงย้อนถามกลับคืนว่า "คุณมีเป้าหมายที่จะทำเรื่องอะไร ? " ถ้าคุณมีเป้าหมายแล้ว เรื่องก็คงจะง่ายขึ้นใช่ไหมครับ คุณน่าจะหลับตานึกหรือฝันได้ว่า คุณต้องการให้คนอื่นๆ เห็นหน้าตาโฮมเพจของคุณเป็นแบบใด เหมือนกับที่คุณอยากเห็นหน้าตาโฮมเพจของคนอื่นนั่นเอง ถ้าเรามีเป้าหมายแล้ว สิ่งที่เราต้องเตรียมในการสร้างบ้านก็มีดังนี้ครับ

  1. กำหนดเนื้อหาที่จะนำเสนอ ควรเป็นเรื่องที่เรามีความรู้ มีความเชี่ยวชาญ หรือมีแหล่งอ้างอิงที่จะคอยช่วยเหลือได้ ไม่จำกัดว่าเป็นเนื้อหาทางวิชาการ สาระบันเทิง เพลง เกมส์ หรืออื่นๆ และเชื่อว่าจะมีคนเข้ามาชมเว็บไซต์ของเราแน่ๆ อย่าให้กลายเป็นบ้านร้างหรือที่หลายคนเรียกว่า "ป่าช้าบนอินเทอร์เน็ต" ที่สำคัญเราต้องมีความสามารถในการปรับเปลี่ยนข้อมูลให้ใหม่ทันสมัยอยู่เสมอ
  2. ไม่ใช่ผ่านไปเป็นปีก็ยังคงเหมือนเดิม แบบนี้อย่าทำดีกว่า (เรื่องอะไร วางรายละเอียดเนื้อหาก่อน-หลัง เอาเฉพาะหัวข้อหลัก ๆ)
  3. ร่างโครงสร้างของโฮมเพจ ในกระดาษอย่างคร่าวๆ เพื่อให้มองเห็นภาพรวมทั้งหมด แล้วจึงทำรายละเอียดการเชื่อมโยงระหว่างหน้าต่างๆ (เพื่อป้องกันการสับสนและการเกิด Link ตาย คลิกหาไม่เจอ)
  4. เตรียมรูปภาพประกอบต่าง ๆ ที่เกี่ยวข้อง ทำการสแกนเก็บไว้เป็นไฟล์ชนิด *.jpg หรือ *.gif แล้วแต่ชนิดของภาพ กำหนดพื้นฉากหลัง (background) ให้เหมาะสม อาจเป็นรูปภาพหรือสีพื้นธรรมดาก็ตามใจคุณ (ซึ่งมีเทคนิคที่เกี่ยวข้องดูได้ใน บัญญัติ 10 ประการ)
  5. เตรียมเครื่องมือที่จำเป็นต้องใช้ จากบ้านหลังนี้ในหัวข้อ "Download" (หรือจะหาจากแหล่งรวมโปรแกรมหลายๆ ที่ ทั้งของไทยอย่าง ThaiWare.Com และของเทศ ถาม Google ด้วยคำว่า webeditor)
  6. ศึกษาการใช้คำสั่ง HTML ให้เข้าใจหลักเบื้องต้นที่สำคัญ ซึ่งจะเป็นพื้นฐานที่ดีสำหรับการสร้างเว็บเพจในขั้นสูงขึ้น ดังคำกล่าวของชาวยุทธ์ (นิยายกำลังภายใน) ว่า "สูงสุดคืนสู่ สามัญ" หมายความว่า ไม่ว่าคุณจะใช้โปรแกรมที่วิเศษวิโสเพียงใดก็ตามในการเขียนโฮมเพจ สุดท้ายก็ต้องมาตาย (แก้ไข) ด้วย Notepad โปรแกรมที่เป็นของแถมในวินโดว์ หรือใช้ Text Editor สำหรับแก้ไขคำสั่ง HTML อยู่ดี แล้วทำไม? เราไม่ศึกษาให้มันแตกฉาน เสียแต่เริ่มต้นล่ะครับ
  7. ต่อไปก็เรียนรู้ บัญญัติ 10 ประการ ในการออกแบบเว็บเพจ ก่อนลงมือสร้าง นี่อาจเป็นจุดเริ่มต้นของนักสร้างเว็บเพจที่ประสบความสำเร็จได้
  8. จากนั้นก็คงได้เวลาลงมือสร้างกันเลย (แน่นอนว่าตอนนี้คุณควรจะรู้วิธีการใช้โปรแกรมบางตัวดีแล้ว ยังไม่รู้ ? ไม่เป็นไร ติดตามเราต่อไป)
  9. สร้างบ้านเสร็จดูในเครื่องจนเราพอใจ ภูมิใจ สุดจ๊าบและฝันว่า "นี่ล่ะ! เว็บเพจที่เยี่ยมยอด ที่สุดในโลกนี้" ก็ถึงเวลาที่จะต้องหาที่ดินปลูกบ้านกันเสียที (Server ที่เราจะฝากโฮมเพจไว้ ซึ่งมีทั้งของฟรีและต้องจ่ายเงิน) ก็คลิกไปดูได้ในหัวข้อ การหาพื้นที่ ครับ
  10. ได้ที่ดินปลูกบ้านหลังงามแล้ว จะขนย้ายบ้านจากเครื่องเราไปยังพื้นที่ได้อย่างไร ก็ต้องดู ในหัวข้อ การจัดส่งไฟล์ ซิครับ

ม่ยากเกินไปใช่ไหมครับ ใจเย็นๆ ครับ ค่อยๆ ศึกษาเรียนรู้กันไป อยากได้บ้านสวยต้องใจเย็นๆ คำแนะนำที่ดีอย่างหนึ่งก็คือ คุณควรท่องไปตามเว็บไซต์ต่างๆ ทั้งของไทยและเทศ เพื่อศึกษารูปแบบ รูปร่างหน้าตาของเว็บไซต์ที่คุณสนใจ เมื่อพบแล้วก็จัดเก็บภาพจากหน้าจอ เหล่านั้นไว้ พร้อม Source ของไฟล์ HTML ไซต์นั้นๆ โดยคลิกเมาท์ขวาลงบนหน้าเว็บเพจเลือก View Page (Frame) Source (กรณี Netscape และเลือก View Source (กรณี IE) แล้วคัดลอก ไปวางลงในโปรแกรม Notepad เซฟไฟล์ไว้ศึกษาทีหลังได้

มีเว็บไซต์สวยๆ หลายที่อยากให้คุณลองไปดู เผื่อจะได้ไอเดียใหม่ๆ มาพัฒนาเว็บไซต์บ้านเราให้สวยงามครับ

  • www.cartier.com สุดยอดของการใช้เทคนิคจากโปรแกรม Macromedia Flash
  • www.designsbymark.com เว็บของมือหนึ่งในเรื่องเทคนิคพื้นฐานด้านกราฟิก โดยเฉพาะการใช้โปรแกรม Photoshop ตกแต่งภาพแบบไร้ Plug-in สร้างผลงานน่าทึ่ง สุดยอดจริงๆ นายมาร์ก
Add Me! สร้างเว็บไซต์เสร็จแล้วแต่ไม่ดังสักที ต้องโปรโมทซิครับ คลิกที่แบนเนอร์ซ้ายมือเพื่อลงทะเบียนกับ Search Engine ชื่อดังกว่า 15 แห่ง ไม่ลองไม่รู้นะ

Top
red line
Home | What's new? | Basic HTML | Reviews Programs | Tip&Tricks | Download | Site Map
red line

 

Home Basic HTML Review Software More Tip & Tricks Download Software Site Map