ตัวอย่างการสร้างเว็บเพจ

ตัวอย่างการสร้างเว็บเพจไฟล์ index.php


          ไฟล์แรกที่จะใส่ข้อความ ภาพหรือเนื้อหาอื่นๆ ลงไป ก็คือไฟล์เมนูหลักของเว็บไซต์ ซึ่งเว็บไซต์แบบ PHP จะใช้ไฟล์ที่ชื่อว่า index.php (ไฟล์เมนูหลักอาจมีชื่ออื่นก็ได้เช่นindex.htm, index.html ...)

1. ดับเบิ้ลคลิกไฟล์ index.php เพื่อเปิดไฟล์ขึ้นมาแก้ไข
2. พิมพ์ข้อความและวางภาพตามตัวอย่าง 
3. เริ่มต้นด้วยการแทรกภาพเข้ามา โดยคลิก Insert>>Image




4. คลิกเลือกภาพ จากตัวอย่างภาพจะอยู่ในโฟลเดอร์ images ให้ดับเบิ้ลคลิกเข้าข้างใน ซึ่งภาพ ประกอบต่างๆ ได้นำไปเก็บไว้ในไดเรคทอรีหลักที่เก็บไฟล์เว็บเพจแล้ว
5. คลิกเลือกไฟล์ภาพที่ต้องการ แล้วคลิกปุ่ม OK
6. พิมพ์ชื่อภาพ 
7. คลิกปุ่ม OK ถ้าไม่ต้องการคลิกและพิมพ์ชื่อภาพก็คลิก Cancel ข้ามไปก็ได้




8. แทรกภาพเข้ามาแล้วก็กด Enter ลงไปบรรทัดใหม่ ภาพที่แทรกเข้ามาให้คลิกแล้วจัดตำแหน่ง ไว้กลางจอ
9. พิมพ์ตามตัวอย่าง กลับหน้าหลัก ถึง ติดต่อสอบถาม แล้วกด Enter ลงบรรทัดใหม่ ข้อความ ก็จัดไว้กลางหน้าจอเช่นกัน โดยป้ายเป็นแถบสีแล้วคลิกปุ่มจัดกลาง
10. แทรกภาพและพิมพ์ข้อความที่เหลือตามตัวอย่าง
11. ช่อง Title คลิกและพิมพ์สโลแกนของเว็บไซต์ เช่น ป่าสักรีสอร์ท มุมสงบในการพักผ่อน 
12. สร้างลิงค์เชื่อมโยงไปยังไฟล์เว็บเพจต่างๆ เริ่มจาก สร้างแถบสี กลับหน้าหลัก ช่อง Link ให้ คลิกและพิมพ์ index.php ถ้าคลิกที่ลิงค์นี้ก็จะข้ามไปยังไฟล์ดังกล่าว
13. ช่อง Target คลิกเลือก _self เป็นการแสดงลิงค์ในหน้าเดิม




14. ลิงค์เกี่ยวกับเรา Link = aboutus.php, Target = _blank
15. อัลบัมภาพ Link = album.php, Target = _blank
16. โปรโมชันพิเศษ Link = promotion.php, Target = _blank
17. แผนที่และการเดินทาง Link = map.php, Target = _blank
18. ติดต่อสอบถาม Link = contact.php, Target = _blank
19. เสร็จแล้ว บันทึกงานเก็บไว้ โดยคลิก File>>Save




ตัวอย่างการสร้างไฟล์เว็บเพจอื่นๆ ที่เหลือ 


          เป็นการสร้างไฟล์เว็บเพจที่เหลือ เช่น aboutus.php, album.php, contact.php, map.php และ promotion.php วิธีการก็คล้ายๆ กัน ขอยกตัวอย่างสักหนึ่งไฟล์

1. ดับเบิ้ลคลิกเปิดไฟล์ aboutus.php
2. คลิกและพิมพ์ข้อความลงไป ส่วนลิงค์ตั้งแต่ กลับหน้าหลัก ถึง ติดต่อสอบถาม แนะนำให้ก็อปปี้ จากไฟล์ index.php ไม่ต้องเสียเวลาสร้างใหม่
3. พิมพ์ข้อความและแทรกภาพลงไป
4. เสร็จแล้วบันทึกไฟล์เก็บไว้




5. ไฟล์อื่นๆ ที่เหลือก็ทำตามตัวอย่าง
          - อัลบัมภาพ = album.php




           - โปรโมชันพิเศษ = promotion.php




           - แผนที่และการเดินทาง = map.php




           - ติดต่อสอบถาม contact.php




ดูผลงานที่ได้


          ถ้าได้ติดตั้งโปรแกรมเว็บเซิร์ฟเวอร์ไว้ แล้วก็สามารถดูผลงานได้เหมือนกับการดูผ่านอินเตอร์เน็ต จริงๆ ส่วนใครที่ไม่ได้ติดตั้งโปรแกรมนี้ ก็ต้องอัพโหลดไฟล์ไปไว้ในเว็บไซต์จริง แล้วจึงทดสอบการทำงาน

1. เข้าโปรแกรม Internet Explorer
2. คลิกและพิมพ์ http://localhost/pasakresort แล้วกด Enter
3. ผลงานที่ได้
4. หรืออาจใช้การพิมพ์ชื่อไฟล์เว็บเพจเลยก็ได้เช่น
http://localhost/pasakresort/aboutus.php




ความคิดเห็น