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

เข้าสู่ระบบ

วิธีนี้จะช่วยลดขั้นตอนการแก้ไขโค้ด HTML ทีหลัง และทำให้ได้หน้าเว็บที่เสร็จสมบูรณ์พร้อมใช้งานได้ทันที

สิ่งที่ต้องเตรียมก่อนเขียนคำสั่ง (Preparation)

Gemini ไม่สามารถอ่านไฟล์ภาพจากไดรฟ์หรือเครื่องคอมพิวเตอร์ของคุณได้โดยตรง มันต้องการ “ที่อยู่บนอินเทอร์เน็ต” (Direct Link / URL) ของไฟล์นั้นๆ

  1. สำหรับรูปภาพ (.jpg, .png, .webp):
    • ต้องเป็น Direct Link ที่คลิกแล้วเปิดขึ้นมาเป็นตัวรูปภาพเดี่ยวๆ
    • สามารถนำรูปภาพไปฝากไว้ที่เว็บฝากรูปฟรี เช่น Imgur หรือ imgbb แล้วคัดลอก Direct Image Link มาเตรียมไว้
  2. สำหรับวิดีโอ (YouTube):
    • ใช้ลิงก์ YouTube ปกติได้เลย เช่น [https://www.youtube.com/watch?v=](https://www.youtube.com/watch?v=)…
    • Gemini มีความฉลาดพอที่จะแปลงลิงก์ปกติให้กลายเป็นโค้ดฝัง <iframe> แบบ Responsive ได้โดยอัตโนมัติ

โครงสร้าง Prompt ที่ดีสำหรับการใส่สื่อภาพและวิดีโอ

การระบุสื่อลงใน Prompt ควรแบ่งออกเป็น 3 ส่วนหลัก ดังนี้:

[ส่วนที่ 1: ภาพรวมและสไตล์] + [ส่วนที่ 2: โครงสร้าง Sections] + [ส่วนที่ 3: ระบุเจาะจง Asset (URL รูป/คลิป ในแต่ละส่วน)]

ข้อควรระวัง: หลีกเลี่ยงการพิมพ์สั่งแค่ง่ายๆ ว่า “ช่วยใส่รูปให้หน่อย” เพราะ AI จะดึงรูปสุ่มจากอินเทอร์เน็ตมาใส่ให้ ให้ใช้การระบุ URL ตรงๆ ควบคู่กับตำแหน่งที่ต้องการวางเสมอ

3 ตัวอย่าง Prompt การเติมภาพและวิดีโอจริง

ตัวอย่างที่ 1: หน้า Landing Page สินค้า (ภาพปกใหญ่ + วิดีโอรีวิว)

Plaintext

ช่วยสร้างหน้า Landing Page สินค้าหูฟังแบบ Single Page สไตล์ Modern Dark Mode โทนสีดำตัดเขียวนีออน

โครงสร้างและลิงก์สื่อที่ต้องการ:

  1. Hero Section: ใช้ภาพพื้นหลังขนาดใหญ่จากลิงก์นี้: [วาง URL รูปภาพ .jpg สินค้าของคุณ] มีพาดหัวใหญ่ ‘สัมผัสเสียงที่เหนือกว่า’ และปุ่มสั่งซื้อ
  2. Features Section: แนะนำจุดเด่น 3 ข้อพร้อมไอคอน
  3. Video Review Section: พาดหัว ‘รีวิวจากผู้ใช้งานจริง’ ตรงกลางให้ฝังวิดีโอ YouTube จากลิงก์นี้: [วางลิงก์ YouTube ของคุณ] ขอให้ตั้งค่า iframe วิดีโอให้เป็นแบบ Responsive (aspect-ratio 16:9)
  4. Footer: ข้อมูลติดต่อสั้นๆ

ตัวอย่างที่ 2: หน้าแนะนำบริษัท / เกี่ยวกับเรา (รูปตึก + รูปทีมงาน)

Plaintext

สร้างหน้าเว็บ 'เกี่ยวกับเรา' (About Us) สไตล์คลีนๆ มินิมอล โทนสีขาว-น้ำเงิน

รายละเอียดโครงสร้างและรูปภาพ:

  1. ส่วนประวัติบริษัท: ด้านซ้ายเป็นข้อความ ด้านขวาเป็นรูปตึกบริษัท โดยใช้รูปจากลิงก์นี้: [วาง URL รูปตึกบริษัท]
  2. ส่วนแนะนำผู้บริหาร (Team Section): ขอโครงสร้างแบบ Grid 3 คอลัมน์ สำหรับผู้บริหาร 3 ท่าน
    •    คนที่ 1 (CEO): ชื่อ John Doe, ใช้รูปโปรไฟล์จากลิงก์: [วาง URL รูป CEO]
    •    คนที่ 2 (CTO): ชื่อ Jane Smith, ใช้รูปโปรไฟล์จากลิงก์: [วาง URL รูป CTO]
    •    คนที่ 3 (CMO): ชื่อ Bob Johnson, ใช้รูปโปรไฟล์จากลิงก์: [วาง URL รูป CMO]

ช่วยเขียน CSS ให้รูปโปรไฟล์ทั้ง 3 คน เป็นวงกลม (border-radius: 50%) และมีขนาดเท่ากันเป๊ะๆ

ตัวอย่างที่ 3: หน้าแกลลอรี่ผลงาน (เน้นรูปภาพหลายภาพ)

Plaintext

สร้างหน้าเว็บ Portfolio แกลลอรี่ภาพถ่าย สไตล์ Masonry Grid (จัดวางแบบสลับฟันปลาคล้าย Pinterest) พื้นหลังสีดำสนิท

ขอให้นำลิงก์รูปภาพต่อไปนี้ไปสร้างเป็น Grid แกลลอรี่ เมื่อนำเมาส์ไปชี้ (Hover) ให้รูปภาพขยายขึ้นเล็กน้อย และเมื่อคลิกให้เปิดดูภาพใหญ่แบบ Lightbox (ใช้ JavaScript เบื้องต้น):

รายการลิงก์รูปภาพ:

  1. [วาง URL รูปภาพที่ 1]
  2. [วาง URL รูปภาพที่ 2]
  3. [วาง URL รูปภาพที่ 3]
  4. [วาง URL รูปภาพที่ 4]
  5. [วาง URL รูปภาพที่ 5]
  6. [วาง URL รูปภาพที่ 6]

ขอให้จัดวางให้สวยงามและรองรับการแสดงผลบนมือถือ (บนมือถือให้เหลือ 1-2 คอลัมน์)

💡 สรุปทริคการทำงาน: การใส่ลิงก์รูปภาพและวิดีโอไปตั้งแต่ Prompt แรก จะทำให้ Gemini Canvas สามารถคำนวณการจัดช่องไฟ (Padding/Margin) และการย่อขยายขนาดภาพใน CSS ได้แม่นยำกว่าการนำลิงก์มาเปลี่ยนทีหลังมาก

คอร์ส: สร้างเว็บไซต์ด้วย Gemini Canvas