การสร้างเว็บไซต์นั้น นอกจาก notepad หรือ gedit ที่เป็น text editor มาพร้อมระบบปฏิบัติการ(OS)ที่ติดตั้งแล้วนั้น ยังมีโปรแกรมอีกมากมายหลายตัวที่ช่วยให้เราเขียนโค๊ด HTML ได้ง่ายขึ้น
จึงทำให้การสร้างเว็บเพจขึ้นมาแต่ละหน้านั้น ง่ายขึ้นกว่าการเขียนเว็บด้วยซอร์สโค๊ด HTML ล้วนๆเพียงอย่างเดียว
สำหรับโปรแกรมที่ผมจะนำเสนอควบคู่ไปกับทุกบทความที่เกี่ยวกับการสร้างเว็บไซต์ ผมจะใช้โปรแกรมที่ชื่อว่า BlueGriffon ซึ่งเป็นโปรแกรมที่เรียกว่า WYSIWYG คือสามารถปรับแต่งหน้าเว็บของเราผ่านการคลิกที่เมนูต่างๆ ได้สะดวกยิ่งขึ้นโดยไม่ต้องเสียเวลากับการพิมพ์โค๊ดแท็กต่างๆ
โปรแกรมที่ใช้ออกแบบหน้าเว็บเหล่านี้ (รวมถึง Dreamweaver ด้วย) จะมีข้อเสียอยู่เล็กน้อยคือ การสร้างโค๊ดที่เกินความจำเป็นให้กับหน้าเว็บเพจของเรามากเกินไป เช่นการกำหนดสไตล์ต่างๆ มักจะกำหนดลงไปที่แท็กแต่ละแท็กไปเลย ที่จริงปัญหานี้เราสามารถแก้ไขได้โดยการเขียน css ควบคุมหน้าเว็บเอง แล้วมากำหนด class ให้กับแท็กต่างๆที่ต้องปรับเปลี่ยนสไตล์แทนการแทรกไปตรงๆที่แท็กนั้น
2) จากภาพผมเก็บไฟล์เว็บเพจไว้ที่ /var/www/html/web_design และผมได้จำลองเว็บเซิร์ฟเวอร์ไว้ในเครื่องตัวเองแล้วโดยสามารถเข้าถึงหน้าเว็บผ่านแอดเดรส http://localhost/web_design
3) สำหรับท่านใดที่ยังไม่ได้ติดตั้งโปรแกรมเว็บเซิร์ฟเวอร์ในเครื่องตัว แนะนำให้ลองดูวิดีโอจากลิงค์ต่อไปนี้ครับ ติดตั้ง xampp สำหรับส่วนนี้ถ้าจะเขียนแค่ html ก็รันได้เลยครับโดยดับเบิ้ลคลิกที่ไฟล์ index.html เพื่อเปิดโปรแกรมเว็บบราวเซอร์ใช้แสดงผลหน้าเว็บของเรา
ให้ทำการลบ index.html ออกไปจากช่องแอดเดรสของเว็บบราวเซอร์แล้วกดปุ่ม Enter บนคีย์บอร์ดจะพบไฟล์ทั้งหมดในโฟลเดอร์ รวมถึงไฟล์ index.html ด้วย
4) คราวนี้ก็เปิดโปรแกรม BlueGriffon ที่ดาวน์โหลดมา และติดตั้งเรียบร้อยแล้วขึ้นมาแก้ไขไฟล์ index.html เมื่อโปรแกรมเปิดขึ้นมาก็ให้ไปที่เมนู File > Open แล้วไปที่โฟลเดอร์ web_design ที่เราสร้างขึ้นมาแล้วเปิดไฟล์ index.html
5) หลังจากเปิดขึ้นมาก็จะเจอหน้าเปล่าๆ ไม่ต่างจากที่เราพรีวิวผ่านหน้าเว็บบราวเซอร์เพราะเรายังไม่ได้เขียนอะไรลงไปเลย แต่ถ้าเปิดในโหมด source code จะเห็นว่าโปรแกรม BlueGriffon ได้เตรียมโครงสร้าง HTML ให้เราเรียบร้อยแล้ว
6) ในส่วนที่ 2. จะเป็นการกำหนดรูปแบบอักขระที่ใช้ในหน้าเว็บปัจจุบันนิยมใช้เป็น utf-8 เราสามารถที่จะพิมพ์เข้าไปโดยตรง หรือจะสลับโหมดเป็น Wysiwyg แล้วเข้าไปที่เมนู Format > Page Properties แล้วกำหนดค่าในส่วนของ Character Set: ก็สะดวกดีครับ อีกอย่างคือสามารถเพิ่ม Tag ต่างๆในส่วนของแท็ก Head ได้จากหน้ต่างนี้เลย
7) ทดลองกำหนดส่วนต่างๆ ให้ครบ แล้วสลับไปดูในโหมด source จะเห็นว่าโครงสร้างต่างๆ ในแท็ก head สมบูรณ์ขึ้น
8) สลับกลับไปที่โหมด Wysiwyg หรือโหมด Design อีกครั้งเพื่อทดสอบพิมพ์ข้อความลงไป และจัดรูปแบบให้เป็นหัวข้อขนาด H1 ซึ่งเป็นขนาดใหญ่สุดและจะใช้กับชื่อเว็บเสมอ
9) อย่าลืมที่จะกดบันทึกข้อมูลทุกครั้ง แล้วก็ไปพรีวิวกันที่หน้าเว็บบราวเซอร์กันเลยครับ (ดูที่ขั้นตอนที่ 2 และ 3 นะครับ)
จะพบข้อความที่เราพิมพ์เอาไว้แสดงบนหน้าเว็บไซต์ได้อย่างถูกต้อง (แต่ยังไม่สมบูรณ์ ^ ^' ) และทั้งหมดนี้คือตัวอย่างการเตรียมไฟล์เพื่อใช้ออกแบบหน้าเว็บอย่างง่ายๆ(แต่ทำไมใช้เวลานานจังเนี่ย) และทำได้อย่างรวดเร็วเมื่อลองฝึกใช้งานโปรแกรมบ่อยๆนะครับ
ไว้บทความหน้าเราจะมาแบ่งองค์ประกอบต่างๆที่จะแสดงบนหน้าเว็บไซต์ของเรากัน ซึ่ง HTML ที่จะได้ใช้ในบทความต่อไปก็จะเป็นแท็ก table เพื่อสร้างตาราง และแท็ก div สำหรับสร้างกล่องข้อความ รวมถึงแท็กพื้นฐานต่างๆ ที่เราไม่จำเป็นต้องพิมพ์เอง เมื่อเราออกแบบหน้าเว็บไซต์ของเราด้วยโปรแกรม BlueGriffon ตัวนี้นะครับ
PHP CI MANIA - PHP Code Generator
สำหรับโปรแกรมที่ผมจะนำเสนอควบคู่ไปกับทุกบทความที่เกี่ยวกับการสร้างเว็บไซต์ ผมจะใช้โปรแกรมที่ชื่อว่า BlueGriffon ซึ่งเป็นโปรแกรมที่เรียกว่า WYSIWYG คือสามารถปรับแต่งหน้าเว็บของเราผ่านการคลิกที่เมนูต่างๆ ได้สะดวกยิ่งขึ้นโดยไม่ต้องเสียเวลากับการพิมพ์โค๊ดแท็กต่างๆ
โปรแกรมที่ใช้ออกแบบหน้าเว็บเหล่านี้ (รวมถึง Dreamweaver ด้วย) จะมีข้อเสียอยู่เล็กน้อยคือ การสร้างโค๊ดที่เกินความจำเป็นให้กับหน้าเว็บเพจของเรามากเกินไป เช่นการกำหนดสไตล์ต่างๆ มักจะกำหนดลงไปที่แท็กแต่ละแท็กไปเลย ที่จริงปัญหานี้เราสามารถแก้ไขได้โดยการเขียน css ควบคุมหน้าเว็บเอง แล้วมากำหนด class ให้กับแท็กต่างๆที่ต้องปรับเปลี่ยนสไตล์แทนการแทรกไปตรงๆที่แท็กนั้น
เตรียมเครื่องมือที่ต้องใช้
BlueGriffon (ดาวน์โหลดโปรแกรมได้ที่นี่ http://bluegriffon.org/pages/Download)ขั้นตอนการเตรียมไฟล์
1) สร้างโฟลเดอร์สำหรับเก็บไฟล์เว็บเพจของเราชื่อ web_design และสร้างโฟลเดอร์ย่อยต่างๆที่ใช้เก็บรูปภาพ และซอร์สโค๊ดเพิ่มเติมเช่น css และ javascript |
| จะสร้างโฟลเดอร์ web_design ไว้ที่ไหนก็ได้นะครับ เพราะเป็นเว็บแบบ html เท่านั้นสามารถรันได้ทุกที่ แต่ถ้าหากต้องการเขียน PHP เพิ่มเข้าไปด้วยการที่จะรันหน้าเว็บได้ จะต้องนำไปวางไว้ที่โฟลเดอร์ เว็บเซอร์เวอร์ในเครื่องเรานะครับ |
2) จากภาพผมเก็บไฟล์เว็บเพจไว้ที่ /var/www/html/web_design และผมได้จำลองเว็บเซิร์ฟเวอร์ไว้ในเครื่องตัวเองแล้วโดยสามารถเข้าถึงหน้าเว็บผ่านแอดเดรส http://localhost/web_design
 |
| สำหรับท่านใดที่ยังไม่ได้ติดตั้งเว็บเซิร์ฟเวอร์ในเครื่องตัวเองผมแนะนำให้ติดตั้งก่อนนะครับ จะได้เขียนเว็บได้ง่ายขึ้น |
3) สำหรับท่านใดที่ยังไม่ได้ติดตั้งโปรแกรมเว็บเซิร์ฟเวอร์ในเครื่องตัว แนะนำให้ลองดูวิดีโอจากลิงค์ต่อไปนี้ครับ ติดตั้ง xampp สำหรับส่วนนี้ถ้าจะเขียนแค่ html ก็รันได้เลยครับโดยดับเบิ้ลคลิกที่ไฟล์ index.html เพื่อเปิดโปรแกรมเว็บบราวเซอร์ใช้แสดงผลหน้าเว็บของเรา
 |
| แต่จะเห็นเพียงความว่างเปล่า เพราะเรายังไม่ได้เขียนโค๊ดใดๆลงไปเลยครับ |
4) คราวนี้ก็เปิดโปรแกรม BlueGriffon ที่ดาวน์โหลดมา และติดตั้งเรียบร้อยแล้วขึ้นมาแก้ไขไฟล์ index.html เมื่อโปรแกรมเปิดขึ้นมาก็ให้ไปที่เมนู File > Open แล้วไปที่โฟลเดอร์ web_design ที่เราสร้างขึ้นมาแล้วเปิดไฟล์ index.html
5) หลังจากเปิดขึ้นมาก็จะเจอหน้าเปล่าๆ ไม่ต่างจากที่เราพรีวิวผ่านหน้าเว็บบราวเซอร์เพราะเรายังไม่ได้เขียนอะไรลงไปเลย แต่ถ้าเปิดในโหมด source code จะเห็นว่าโปรแกรม BlueGriffon ได้เตรียมโครงสร้าง HTML ให้เราเรียบร้อยแล้ว
6) ในส่วนที่ 2. จะเป็นการกำหนดรูปแบบอักขระที่ใช้ในหน้าเว็บปัจจุบันนิยมใช้เป็น utf-8 เราสามารถที่จะพิมพ์เข้าไปโดยตรง หรือจะสลับโหมดเป็น Wysiwyg แล้วเข้าไปที่เมนู Format > Page Properties แล้วกำหนดค่าในส่วนของ Character Set: ก็สะดวกดีครับ อีกอย่างคือสามารถเพิ่ม Tag ต่างๆในส่วนของแท็ก Head ได้จากหน้ต่างนี้เลย
7) ทดลองกำหนดส่วนต่างๆ ให้ครบ แล้วสลับไปดูในโหมด source จะเห็นว่าโครงสร้างต่างๆ ในแท็ก head สมบูรณ์ขึ้น
8) สลับกลับไปที่โหมด Wysiwyg หรือโหมด Design อีกครั้งเพื่อทดสอบพิมพ์ข้อความลงไป และจัดรูปแบบให้เป็นหัวข้อขนาด H1 ซึ่งเป็นขนาดใหญ่สุดและจะใช้กับชื่อเว็บเสมอ
9) อย่าลืมที่จะกดบันทึกข้อมูลทุกครั้ง แล้วก็ไปพรีวิวกันที่หน้าเว็บบราวเซอร์กันเลยครับ (ดูที่ขั้นตอนที่ 2 และ 3 นะครับ)
จะพบข้อความที่เราพิมพ์เอาไว้แสดงบนหน้าเว็บไซต์ได้อย่างถูกต้อง (แต่ยังไม่สมบูรณ์ ^ ^' ) และทั้งหมดนี้คือตัวอย่างการเตรียมไฟล์เพื่อใช้ออกแบบหน้าเว็บอย่างง่ายๆ(แต่ทำไมใช้เวลานานจังเนี่ย) และทำได้อย่างรวดเร็วเมื่อลองฝึกใช้งานโปรแกรมบ่อยๆนะครับ
ไว้บทความหน้าเราจะมาแบ่งองค์ประกอบต่างๆที่จะแสดงบนหน้าเว็บไซต์ของเรากัน ซึ่ง HTML ที่จะได้ใช้ในบทความต่อไปก็จะเป็นแท็ก table เพื่อสร้างตาราง และแท็ก div สำหรับสร้างกล่องข้อความ รวมถึงแท็กพื้นฐานต่างๆ ที่เราไม่จำเป็นต้องพิมพ์เอง เมื่อเราออกแบบหน้าเว็บไซต์ของเราด้วยโปรแกรม BlueGriffon ตัวนี้นะครับ
ความคิดเห็น
แสดงความคิดเห็น