วิธีใช้ Live Preview ใน Adobe Edge Code และ Brackets

ปัญหาที่อยู่ในการทำงานออกแบบ Website ของเราทุกวัน

อย่างที่เราทำงานกันเป็นประจำ ในการออกแบบและสร้างหน้าเว็บไซต์ จำเป็นต้องเกี่ยวข้องกับภาษาหลักอย่างน้อย 2 ภาษา ก็คือ HTML และ CSS

เพียง แต่ถ้าเราไม่ได้ใช้ Adobe Dreamweaver วิธีแรกที่ทำกันเป็นประจำก็คือเปิด Text Editor คู่กับ Web Browser ขั้นตอนทั่วไปก็คือเขียน code, บันทึก, และเปิดดูบน Web Browser ถ้ามีการเขียนหรือแก้ไข code เพิ่มเติม ก็จะวนลูปแบบเดิมอีก ทำแบบนี้ไปเรื่อยๆ

กับอีกแบบก็คือการใช้ Inspector ที่อยู่ใน Web Browser สมัยใหม่เกือบทุกตัวแล้ว เช่น FireBug บน Mozilla FireFox, Chrome ของ Google, และ (อะแฮ่ม) Internet Explorer ของ Microsoft ซึ่งประกอบไปด้วยข้อดี และข้อเสีย

• ข้อดีก็คือเราสามารถเห็นผลลัพธ์ของการแก้ไขโค้ดได้บน Web Browser ได้โดยตรง
• ข้อเสียคือ พอเราได้ code ที่ทำให้เพจแสดงผลลัพธ์ที่น่าพอใจแล้ว มันไม่ได้ไปเปลี่ยน code ในไฟล์ HTML หรือ CSS โดยตรง ส่วนนี้เราต้องคัดลอก code ไปแปะไว้ใน File ต่างหากอีกที

Adobe Edge Code และ Brackets ขอเสนอ Live Preview

Live Preview ของ Edge Code และ Brackets เกิดจาก Web Designer ที่ใช้ Inspector เป็นประจำ (แล้วคงคิดเหมือนกัน) ว่าทำไมต้องแก้ code แล้วมานั่งคัดลอกไปไว้ที่ไฟล์ต้นฉบับทุกครั้ง

ทำไมตอนที่เราแก้ไข code ที่ไฟล์ HTML และ CSS พวก Web Browser ทำไมไม่เปลี่ยนตามไฟล์ต้นฉบับซะล่ะ?

นั่นแหละ คือสิ่งที่ Live Preview จะให้กับเราครับ

วิธีเปิดใช้งาน Live Preview

การ ใช้ Live Preview ในปัจจุบันสามารถทำงานกับ Web Browser เจ้าเดียวที่ชื่อ Google Chrome เท่านั้น เพราะตัว Google Chrome มีผู้ใช้จำนวนมาก และเปิดกว้างกว่าในการสร้างโปรแกรมเชื่อมต่อเข้าไปใช้ประโยชน์

วิธีการเปิดโหมด Live Preview มีดังนี้ครับ

1. เปิดไฟล์ HTML ที่ต้องการ

2. คลิกไอคอนรูปสายฟ้า

ผมชอบเรียกเล่นๆ ว่า “โหมดทอร์” (จาก The Avenger หนังยอดมนุษย์ของ Marvel)

3. ระบบจะเปิด Google Chrome ขึ้นมา

ในส่วนนี้ต้องมีการติดตั้ง Google Chrome ไว้ก่อนแล้ว คลิก download Google Chrome ได้ที่นี่

และ ถ้าเกิดเป็นการเชื่อมต่อครั้งแรก ไม่ว่าคุณจะใช้ Adobe Edge Code หรือ Brackets มันก็จะแจ้งให้เปิดปิด Google Chrome 1 ครั้ง ให้กดปุ่ม Re-launch ตามกล่องข้อความที่แจ้งขึ้นมา

4. ทำการแก้ไข Code HTML และ CSS

ระบบ ของ Edge Code และ Brackets จะเชื่อมต่อกับ Google Chrome โดยสมบูรณ์ ในปัจจุบัน Live Preview รองรับการอัพเดตอัตโนมัติเฉพาะ HTML และ CSS เท่านั้น และการอัพเดตจะเกิดขึ้นทันที ไม่จำเป็นต้องกดบันทึกไฟล์ HTML หรือ CSS เพื่อเห็นผลลัพธ์

ดูเนื้อหาเพิ่มเติม

• ดูเนื้อหาถัดไปคลิกที่นี่
• ดูเนื้อหาทั้งหมดคลิกที่นี่
• ดูหลักสูตรอบรมด้านการสร้างเว็บและเครื่องมือต่างๆ คลิกที่นี่