รวมบทความทั้งหมดในหมวดการพัฒนาเว็บไซท์ สอนสร้างเว็บไซต์

การพัฒนาเว็บไซท์

รวมบทความและหนังสืออธิบายเกี่ยวกับการพัฒนาเว็บไซท์ โดยนำเสนอวิธีใช้งานโปรแกรมต่างๆ ที่เกี่ยวข้องกับการสร้างโฮมเพจ เช่น การใช้งาน Dreamweaver ใช้งาน Joomla รวมเรื่องน่ารู้เกี่ยวกับการสร้างเว็บไซต์ ฯลฯ

การสร้างเว็บบอร์ดเอง เป็นเรื่องยุ่งยาก และยากในการสร้างอย่างมาก มือใหม่หรือแม้แต่มือ เก่าก็มึนตึ๊บเหมือนกัน เพราะฉะนั้นขอฟรีเว็บบอร์ดมาใช้งาน เป็นเรื่องง่ายกว่ากันเยอะ ในตัวอย่างนี้ จะเป็นการลงทะเบียนขอฟรีเว็บบอร์ดที่ www.212cafe.com
1. เข้าอินเตอร์เน็ตแล้วไปยังเว็บไซท์ www.212cafe.com
2. คลิกลิงค์ free webboard
3. คลิกที่ สมัครขอใช้บริการ

4. ป้อนข้อมูลที่จำเป็นลงไป บรรทัดที่ต้องใส่ใจมากเป็นพิเศษ ก็คือช่อง Username และ Password พยายามเลือก User Name ที่ไม่ซ้ำใคร และควรจดรหัสผ่านไว้ด้วย กันลืม
5. เสร็จแล้วคลิกปุ่ม Submit

6. ถ้าการลงทะเบียนเป็นไปด้วยดี ก็จะปรากฏหน้าจอแจ้งรายละเอียดเกี่ยวกับเว็บบอร์ดของเรา จาก ตัวอย่างลิงค์สำหรับการเรียกใช้เว็บบอร์ด ก็คือ http://board.212cafe.com/bluesoft

7. ในการใช้งานจริง เมื่อได้อัพโหลดไปไว้บนเว็บไซท์แล้ว และคลิกที่หัวข้อ เว็บบอร์ด.. ก็จะ ปรากฏหน้าตาของเว็บบอร์ดคล้ายดังตัวอย่าง

8. หลังจากลงทะเบียนเสร็จแล้ว ทางเว็บไซท์จะแจ้งข้อมูลเพิ่มเติมเกี่ยวกับเว็บบอร์ดไปยังอีเมล์ ที่คุณระบุไว้ในขั้นตอนการลงทะเบียนด้วย จากตัวอย่าง ผู้เขียนใช้อีเมล์ของ Hotmail เมื่อไปตรวจ เช็คเมล์ ก็จะพบจดหมาย ซึ่งมีรายละเอียดเกี่ยวกับเว็บบอร์ดที่ได้ลงทะเบียนขอไว้ (FreeWebboard from 212cafe เป็นชื่อจดหมายที่ส่งมา)

Details: Category: การสร้างเว็บไซต์เบื้องต้น; Hits: 1518

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

1. สร้างไฟล์เว็บเพจหน้าจอหลัก index.htm
ไฟล์ index.htm เป็นหน้าจอหลักของเว็บไซท์ ที่เราจะพบเมื่อเข้าเว็บไซท์นั้นเป็นครั้งแรก หน้า นี้เรียกว่าโฮมเพจ ในหน้านี้จะมีหัวข้อย่อยให้คลิกเลือก
1. เข้าโปรแกรม Notepad โดยคลิกปุ่ม Start>>All Programs>>Accessories>>Notepad
2. เมื่อเข้าโปรแกรมแล้วให้พิมพ์ข้อมูลลงไปตามตัวอย่าง

3. ผลงานที่ได้ เมื่อดูผ่านโปรแกรมดูข้อมูลบนอินเตอร์เน็ตหรือ Internet Explorer จะพบ ว่า ข้อมูลที่เราต้องการให้ปรากฏบนจอ มีนิดเดียว แต่ต้องเขียนโปรแกรมตั้งหลายบรรทัด

4. คำสั่ง <title>Fiat fan Club</title> เป็นส่วนแสดงชื่อเว็บไซท์ของเรา
5. คำสั่ง <p aling=”center”><img src=”banner1.jpg” width=”640” height=”80”></p> เป็นคำสั่งแสดงภาพแบนเนอร์ชื่อ banner1.jpg โดยจัดไว้ตรงกลาง (center)
6. คำสั่ง <p aling=”center”><font face=... ส่วนนี้เป็นคำสั่งแสดงหัวข้อ โดยใช้ตัวหนังสือ แบบ Microsoft Sans Serif ขนาด 2
7. คำสั่ง <a href=”http://board.212cafe.com/bluesoft” target=”blank”> เว็บบอร์ด สนทนา ปัญหาเฟียต</a> เป็นการกำหนดให้หัวข้อนี้เชื่อมโยงไปยังเว็บบอร์ดที่ผู้เขียนได้ลงทะเบียนขอ ไว้ที่ www.212cafe.com ท่านใดที่ได้ฝึกทำตามตัวอย่างเหล่านี้แนะนำให้เปลี่ยนลิ้งค์เป็น
http://www.siamebook.com/wbmanoi/index.html
เพื่อเชื่อมโยงไปยังเว็บบอร์ดของผู้เขียนที่ www.siamebook.com
8. ส่วนคำสั่ง < a href=”aboutus.htm” target=”blank”> เกี่ยวกับผู้จัดทำ </a> เป็นการ ลิ้งค์ไปหาไฟล์ชื่อ aboutus.htm เมื่อคลิกหัวข้อ เกี่ยวกับผู้จัดทำ ก็จะปรากฏหน้าใหม่ขึ้นมา
9. ข้อความในส่วนนี้ เฉพาะที่เป็นภาษาไทย เป็นย่อหน้าที่อธิบายเกี่ยวกับวัตถุประสงค์ของ การสร้างเว็บไซท์

10. ในการสร้างเว็บไซท์ของคุณเอง อยากให้ทดลองตามตัวอย่างง่ายๆ นี้ก่อน โดยดัดแปลง เฉพาะส่วนข้อความที่เป็นภาษาไทย พิมพ์ข้อความใหม่ของคุณเองลงไป
11. เสร็จแล้วก็บันทึกไฟล์เก็บไว้ โดยคลิกเมนู File>>Save
12. คลิกเลือกที่เก็บ คลิกและพิมพ์ชื่อไฟล์ index.htm แล้วคลิกปุ่ม Save

13. ดูผลงานที่ได้ โดยเข้าโปรแกรม Windows Explorer ชี้ลูกศรที่ไฟล์ index.htm ที่ได้สร้าง ขึ้นมา แล้วคลิกปุ่มขวาของเมาส์
14. คลิกคำสั่ง Open With>>Internet Explorer เพื่อดูผลงานที่ได้

2. สร้างเว็บเพจย่อย aboutus.htm
เว็บเพจย่อยจะมีเพียงไฟล์เดียวคือ aboutus.htm
1. ในหน้าจอโปรแกรม Notepad ให้คลิกเมนู File>>New เริ่มสร้างงานใหม่
2. พิมพ์ข้อมูลคล้ายตัวอย่าง

3. ส่วนต่างๆ ของข้อมูล เมื่อเปรียบเทียบกับผลงานที่ได้ เมื่อดูผ่านอินเตอร์เน็ต
4. การแก้ไขหรือดัดแปลงส่วนหนึ่งส่วนใด ก็จัดการเฉพาะส่วนที่เป็นข้อความภาษาไทย
5. เสร็จแล้วบันทึกไฟล์เก็บไว้ ตั้งชื่อไฟล์ aboutus.htm

3. สร้างเว็บบอร์ด
ส่วนที่เป็นเว็บบอร์ดแนะนำให้ไปลงทะเบียนขอฟรีเว็บบอร์ดกับเว็บไซท์ต่างๆ ลองไปค้นหา ที่ www.sanook.com มีให้เลือกหลายที่ ส่วนท่านใดที่ไม่อยากยุ่งยาก ก็ทดลองใช้เว็บบอร์ดของผู้เขียน ไปก่อนก็ได้ http://www.siamebook.com/webboard/index.php พิมพ์ลงไปในไฟล์ index.htm แทนตำแหน่ง <a href=”http://board.212cafe.com/bluesoft” target=”blank”>

Details: Category: การสร้างเว็บไซต์เบื้องต้น; Hits: 1479

มาถึงขั้นตอนสุดท้าย ก็คือการอัพโหลดหรือก็อปปี้ไฟล์เว็บเพจที่เราได้สร้างขึ้นมา ไปไว้บนเว็บ ไซท์ที่ได้ขอฟรีไว้ จะมีเพียง 4 ไฟล์เท่านั้น
index.htm เป็นไฟล์หลักของเว็บไซท์ ในหนึ่งเว็บไซท์จะมีเพียงไฟล์เดียว
aboutus.htm เป็นไฟล์เว็บเพจย่อย ในแต่ละเว็บไซท์อาจมีเป็นร้อยเป็นพันไฟล์
banner1.jpg และ banner2.jpg เป็นภาพประกอบของไฟล์ index.htm และ aboutus.htm

ตัวอย่างการอัพโหลด
เว็บไซท์ฟรีส่วนใหญ่จะมีโปรแกรมประเภทไฟล์เมเนเจอร์ช่วยในการก็อปปี้หรืออัพโหลดข้อมูลไป เก็บไว้ในเว็บ แต่การอัพโหลดค่อนข้างยุ่งยากกว่า ลองมาดูตัวอย่างการอัพโหลดที่ www.thcity.com
1. เข้าอินเตอร์เน็ต แล้วไปยังเว็บไซท์ www.thcity.com
2. คลิกและพิมพ์ User Name และ Password เพื่อล็อกอินเข้าไปในระบบ
3. ถ้าเข้าได้แล้วก็จะปรากฏหน้าจอแสดงข้อมูลภายในเว็บไซท์ พร้อมทั้งมีปุ่มให้เลือกการทำงาน เช่น Browse ส่ง ลบ สร้างห้อง (สร้างโฟลเดอร์)
4. ให้คลิกที่ลิงค์ Up หลาย Files

5. จะเข้าสู่หน้าจอให้เลือกไฟล์ที่ต้องการอัพโหลด ให้คลิกปุ่ม Browse ไปเลือกไฟล์ แล้วคลิก ปุ่ม Up เพื่ออัพโหลดไฟล์
6. ไฟล์ที่อัพโหลดมาแล้ว เช่น php.jpg ถ้าต้องการลบ ก็คลิกติ๊กถูกแล้วคลิกปุ่ม ลบ
7. เสร็จแล้วคลิกปุ่ม Back เพื่อออก

Details: Category: การสร้างเว็บไซต์เบื้องต้น; Hits: 1260

หลังจากอัพโหลดเสร็จแล้ว ก็สามารถเข้าไปเยี่ยมชมเว็บไซท์ของเราได้โดย
1. เชื่อมต่อเข้าสู่อินเตอร์เน็ต
2. ไปยังเว็บไซท์ของเราเช่น http://siteth.com/ แล้วกด Enter

เทคนิคพิเศษ
การอัพโหลดไฟล์ด้วยโปรแกรมประเภทนี้โดยเฉพาะ เช่น CuteFTP จะดีกว่า ทำได้เร็วกว่า และถ้าสายหลุดก็สามารถเริ่มต้นอัพโหลดต่อได้ ไม่ต้องเริ่มใหม่ในกรณีที่ไฟล์มีขนาดใหญ่

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