เมื่อดูไฟล์ต้นฉบับของ Web Designer สำหรับโฆษณาและหน้า HTML คุณจะสลับไปมาระหว่างมุมมองโค้ดและมุมมองการออกแบบได้ การแก้ไขที่คุณทำในมุมมองโค้ดจะแสดงในมุมมองการออกแบบ ซึ่งช่วยให้คุณทดสอบได้ทันทีว่าการเปลี่ยนแปลงโค้ดจะส่งผลต่อการออกแบบของคุณอย่างไรบ้าง
วิธีเปลี่ยนเป็นมุมมองโค้ด
คลิกปุ่มมุมมองโค้ด
ที่มุมขวาบนของหน้าต่าง
แผงมุมมองการออกแบบและคำสั่งเมนูบางรายการจะใช้ไม่ได้ในมุมองโค้ด
ที่มุมขวาบนของหน้าต่างการตั้งค่ามุมมองโค้ด
คุณปรับตัวเลือกของการจัดรูปแบบและตัวแก้ไขสำหรับมุมมองโค้ดในค่ากำหนดได้ ซึ่งรวมถึงการตั้งค่าต่อไปนี้
- ธีมสี
- คีย์แมป
- การตัดบรรทัดไปขึ้นบรรทัดใหม่
- ขนาดการเยื้อง
- การเยื้องอัตโนมัติ
- การเติมโค้ดอัตโนมัติ
- การใช้เว้นวรรคสำหรับแท็บ
- การแสดงแผนที่ขนาดเล็ก
สำหรับรายการตัวเลือกทั้งหมด โปรดดูหน้าเว็บเกี่ยวกับการตั้งค่ากำหนด
การทำงานกับโค้ด
ฟีเจอร์ต่อไปนี้ช่วยให้การเขียนและแก้ไขโค้ดง่ายขึ้น และคุณยังดูวิธีไปยังส่วนต่างๆ ในมุมมองโค้ดภายในเอกสารหรือระหว่างไฟล์ได้อีกด้วย
ซูม
หากต้องการเปลี่ยนขนาดข้อความของโค้ด ให้ใช้คำสั่งซูม (- และ +) ทางด้านขวามือของแถบส่วนท้าย โดยค่าเริ่มต้น Google Web Designer จะจำระดับการซูมที่คุณตั้งค่าไว้สำหรับมุมมองโค้ด
ยุบบล็อกโค้ด
ใช้ลูกศรในขอบซ้ายมือเพื่อยุบหรือขยายบล็อกโค้ด
การเยื้อง
โดยค่าเริ่มต้น Google Web Designer จะทำการเยื้องในบรรทัดใหม่ให้ขณะที่คุณพิมพ์ หากบล็อกโค้ดไม่ได้เยื้องอย่างถูกต้อง (เช่น หากคุณคัดลอกและวางโค้ดจากไฟล์อื่น) คุณจะเลือกโค้ดและกด Tab เพื่อทำการเยื้องได้
การเติมโค้ดอัตโนมัติ
โดยค่าเริ่มต้น Google Web Designer จะแสดงคำแนะนำระหว่างที่คุณพิมพ์ หากคุณปิดค่ากําหนดนี้ไว้ ให้กด Ctrl+Space เพื่อเรียกใช้การเติมโค้ดอัตโนมัติได้
โหมดภาษา
การให้สีไวยากรณ์และการเติมโค้ดอัตโนมัติใน Google Web Designer จะขึ้นอยู่กับนามสกุลไฟล์ หากต้องการลบล้างโหมดภาษาเริ่มต้น ให้คลิกภาษาปัจจุบันในส่วนท้ายและเลือกภาษาใหม่จากเมนูป๊อปอัป
ไลบรารีของ GreenSock JavaScript
คุณเพิ่มเครื่องมือสร้างภาพเคลื่อนไหวยอดนิยมอย่าง GreenSock ผ่านคำสั่งเมนูได้หากตั้งค่าสภาพแวดล้อมเป็น Display & Video 360 หรือโครงการเป็นหน้า HTML
วิธีแทรกไลบรารี GreenSock
- ตรวจสอบว่าคุณอยู่ในมุมมองโค้ด
- จากเมนูไฟล์ ให้เลือกรวมไลบรารี JS > GreenSock
- เลือกไลบรารีจากรายการ
คุณจะทำขั้นตอนซ้ำเพื่อเพิ่มไลบรารีหลายรายการได้
ความแตกต่างจากโค้ดที่เผยแพร่
มุมมองโค้ดอาจไม่ได้แสดงโค้ดที่คุณเขียนทั้งหมดเมื่อคุณเผยแพร่เอกสาร โค้ดที่คุณเห็นขณะเขียนเอกสารอาจได้รับการบีบอัดเพื่อให้ใช้พื้นที่น้อยลงและโค้ดบางส่วนอาจไม่สามารถมองเห็นได้ในมุมมองโค้ดเลย แต่จะรวมอยู่ในไฟล์ที่นำไปใช้จริง