เข้าสู่ระบบและสมัครคอร์สนี้เพื่อดูเนื้อหา

เข้าสู่ระบบ

Part 1: 5 ขั้นตอนสร้างเว็บไซต์แรกด้วย Gemini Canvas

ขั้นตอนที่ 1: เข้าสู่โหมด Gemini Canvas

  1. เปิดเบราว์เซอร์ไปที่ gemini.google.com แล้วล็อกอินด้วยบัญชี Google
  2. สังเกตที่มุมขวาล่างหรือแถบป้อนข้อความ พิมพ์ค้นหา หรือกดปุ่ม Canvas (หรือเข้าลิงก์ตรง gemini.google.com/canvas)
  3. หน้าจอจะเปลี่ยนเป็นโหมดแบ่งสองฝั่ง (ฝั่งแชตสำหรับสั่งงาน และฝั่ง Canvas สำหรับดูโค้ด/Preview) พร้อมใช้งานทันที

ขั้นตอนที่ 2: ป้อนคำสั่ง (Prompt) ร่างโครงสร้าง

หัวใจของการสร้างเว็บด้วย AI คือ “สั่งให้ครบในครั้งเดียว” เพื่อให้ Gemini เข้าใจบริบททั้งหมด

สูตรโครงสร้าง Prompt ที่ดี:
[บทบาท] + [เป้าหมาย] + [โครงสร้างหน้าเว็บ] + [สไตล์ดีไซน์] + [การรองรับมือถือ]
ช่วยสร้างหน้าเว็บไซต์แบบ HTML และ CSS รวมในไฟล์เดียว สำหรับธุรกิจ [ใส่ประเภทธุรกิจของคุณ เช่น ร้านกาแฟสด] 
ดีไซน์สไตล์มินิมอล โทนสีอบอุ่น โดยมีโครงสร้างดังนี้:
1. Header ด้านบน มีโลโก้และเมนู navigation
2. Banner หลัก มีข้อความต้อนรับและปุ่มกด
3. ส่วนแสดงบริการหรือสินค้า 3 รายการพร้อมรูปและคำอธิบาย
4. ฟอร์มสำหรับติดต่อ (ชื่อ, อีเมล, ข้อความ)
5. Footer ด้านล่างสุด
และต้องทำเป็น Responsive Design ที่แสดงผลได้สวยงามทั้งบนคอมพิวเตอร์และมือถือ

ขั้นตอนที่ 3: ตรวจสอบและสั่งปรับแต่ง (Refine)

เมื่อ Gemini สร้างโค้ดเสร็จ หน้าต่าง Preview ฝั่งขวาจะแสดงหน้าเว็บขึ้นมาทันที คุณสามารถสั่งปรับแก้ด้วยภาษาพูดทั่วไปได้ เช่น:

  • “ช่วยเปลี่ยนสีปุ่มในฟอร์มติดต่อให้เป็นสีเขียวเข้ม”
  • “ขอเพิ่มไอคอนหน้าหัวข้อบริการทั้ง 3 รายการ”
  • “ปรับระยะห่างระหว่างส่วนบริการกับฟอร์มติดต่อให้กว้างขึ้นอีกนิด”

ขั้นตอนที่ 4: ใส่ระบบ JavaScript ฝั่งหน้าบ้าน

เมื่อดีไซน์สวยงามตามต้องการแล้ว ให้พิมพ์คำสั่งเพื่อเตรียมระบบรับส่งข้อมูล:

ช่วยเขียนโค้ด JavaScript เพิ่มเติมในไฟล์นี้ สำหรับฟอร์มติดต่อ เพื่อให้เมื่อผู้ใช้กดส่งข้อมูล 
ระบบจะไม่รีเฟรชหน้าเว็บ แต่จะส่งข้อมูลไปยัง Webhook หรือ Google Apps Script URL ผ่าน Fetch API

ขั้นตอนที่ 5: บันทึกโค้ดออกเป็นไฟล์ index.html

  1. มองหาปุ่ม Copy (คัดลอก) หรือ Export บริเวณมุมขวาบนของหน้าต่าง Canvas
  2. เปิดโปรแกรมบันทึกข้อความในเครื่อง เช่น Notepad (Windows) หรือ TextEdit (Mac)
  3. วางโค้ดที่คัดลอกมาลงไป
  4. กด Save As (บันทึกเป็น) ตั้งชื่อไฟล์ว่า index.html
    (ข้อสังเกต: ต้องเป็นตัวพิมพ์เล็กทั้งหมด และใช้นามสกุล .html)

Part 2: การเตรียมไฟล์และเลือกโฮสติ้งสำหรับเว็บไซต์

1. ทำความเข้าใจเรื่อง หน้าบ้าน (Frontend) และ เซิร์ฟเวอร์ (Hosting)

โค้ดที่เราบันทึกออกมาเป็นไฟล์ index.html นั้นคือส่วน “หน้าบ้าน (Frontend)” ซึ่งทำงานอยู่บนเครื่องคอมพิวเตอร์ของเราคนเดียว หากต้องการให้คนอื่นทั่วโลกเปิดเข้ามาดูเว็บเราผ่านอินเทอร์เน็ตได้ เราจำเป็นต้องนำไฟล์นี้ไปฝากไว้บน “โฮสติ้ง (Hosting / Server)”

2. รูปแบบโฮสติ้งที่เหมาะกับงานแต่ละประเภท

รูปแบบโฮสติ้งรายละเอียด & เหมาะสำหรับตัวเลือกแนะนำ
1. Static Web Hosting
(แนะนำสำหรับมือใหม่)		นำไฟล์ HTML/CSS ไปฝากไว้บนเซิร์ฟเวอร์โดยตรง ไม่ต้องมีฐานข้อมูลเบื้องหลัง เหมาะกับ Landing Page, Portfolio, ฟอร์มรับข้อมูลNetlify, GitHub Pages, Vercel, Cloudflare Pages (ฟรี!)
2. แทรกใน WordPressสำหรับคนที่มีเว็บ WordPress อยู่แล้ว นำโค้ดเฉพาะส่วนที่ต้องการไปวางใน Custom HTML หรือ Elementor ได้ทันทีWordPress (เดิมที่มีอยู่)
3. Custom Domain Hosting (สายธุรกิจ)เช่าโฮสติ้งรายปีและจดชื่อโดเมนเนมส่วนตัว เช่น [www.yourcompany.com](https://www.yourcompany.com) เหมาะกับบริษัทหรือร้านค้าที่ต้องการความเป็นทางการCloudflare, Hostinger, Namecheap

💡 คำแนะนำสำหรับการเรียนในคอร์สนี้:

  • หากต้องการทดสอบอัปโหลดเว็บขึ้นอินเทอร์เน็ตให้เร็วที่สุด แนะนำ Netlify (ลากโฟลเดอร์วางแล้วจบเลย)
  • หากมีเว็บ WordPress เดิมอยู่แล้ว ให้ศึกษาเพิ่มเติมใน หน้า 6 และ หน้า 7
คอร์ส: สร้างเว็บไซต์ด้วย Gemini Canvas