About DwThai.Com 00

DwThai.Com Logo

DwThai.Com

Tip and Trick Dreamweaver

ก่อตั้งเมื่อปีพุทธศักราช ๒๕๔๖





ค้นหาข้อมูลใน DwThai.Com

เก็บ Code ที่ชื่นชอบไว้ใช้นาน ๆ (Snippets Panel) [Article ID : 50]


เรื่อง : การเก็บโค้ดโปรแกรมไว้ใช้กับโปรแกรม Dreamweaver

เคยมีแฟนเว็บบางท่านเข้ามาถามว่า
"พี่มีวิธีเก็บโค้ดที่เราต้องพิมพ์บ่อย ๆ ไว้ใช้บ้างไหม ผมขี้เกียจพิมพ์ซ้ำ ๆ ครับ...."
คราวนั้นผมก็กั๊กไว้ไม่ตอบเสียทีเดียว เพราะขนาดผู้ถามยังบอกขี้เกียจพิมพ์โค้ดซ้ำ ๆ จะให้ตอบยาว ๆ เราก็ขี้เกียจเหมือนกันนะ
(เพราะคำตอบมันยาวหนะครับ...คำถามเธอสั้น ๆ แต่คำตอบฉันนะยาววววววว)
...วันนี้เลยนำมาเขียนเป็นบทความให้อ่านกันจะดีกว่า คนอื่นจะได้เรียนรู้ไปด้วยกัน ถ้าได้อ่านกันแล้วก็ขอให้นำไปใช้กันนะครับ...

วิธีการเก็บโค้ดไว้ใช้กับ Snippets

หากผู้ใช้งานโปรแกรม Dreamweaver มีโค้ดโปรแกรม เช่น โค้ด JavaScript, PHP หรืออื่น ๆ ที่ต้องการเก็บโค้ดนั้นไว้ใช้กับโปรแกรม Dreamweaver ผู้ใช้งานโปรแกรมสามารถเก็บโค้ดนั้นไว้ได้กับ Snippets Panel ด้วยวิธีการ ดังนี้

1. เปิดไฟล์ที่มีโค้ดโปรแกรมขึ้นมากับ Dreamweaver ซึ่งโค้ดนี้เราต้องการใช้เป็นต้นฉบับเก็บไว้ใช้ต่อไป
2. จากนั้นไปที่ในส่วนของ Code View ดังรูป 3. ทำการเลือกโค้ดที่เราต้องการนำไปเก็บไว้ใช้
4. จากนั้นคลิกขวา (Right Click) แล้วเลือกที่เมนู Create New Snippet ดังรูป 5. โปรแกรมเปิดหน้าต่าง Snippet ขึ้นมาเพื่อให้กำหนดค่า ดังรูป การกำหนดค่า
Name : พิมพ์ชื่อโค้ดที่ต้องการ
Description : คำอธิบายโค้ด
Snippet Type : รูปแบบของโค้ดเลือกเป็น Insert Block *เนื่องจากโค้ดที่จัดเก็บเป็นโค้ดที่ไม่มีการเปิดปิด Tag เพื่อเขียนข้อมูลเพิ่ม
Insert Code : โค้ดที่จัดเก็บ
Preview type : Code

6. เมื่อกำหนดค่าดังในข้อ 5 แล้ว กดที่ OK ของหน้าต่าง เราก็จะได้โค้ดเก็บไว้ใช้แล้วครับ

การนำโค้ดจาก Snippets มาใช้งาน

เมื่อได้ทำการเก็บโค้ดไว้แล้ว หากเราต้องการนำโค้ดนั้นมาใช้งานกับเว็บเพจอื่น ๆ สามารถกระทำได้ ดังนี้

7. เปิดหน้าต่าง Snippets ขึ้นมา โดยไปที่ Menu -> Window -> Snippets ดังรูป 8. ที่ Snippets Panel จะพบว่ามีโค้ดที่เราเก็บไว้ปรากฎอยู่ ดังรูป 9. ที่ไฟล์ที่ต้องการนำโค้ดนี้ไปใช้ให้เปิดไปที่มุมมองโค้ด จากนั้นทำการลากโค้ดจาก Snippets Panel ไปวางยังตำแหน่งโค้ดที่ต้องการ ดังรูป 10. ซึ่งเมื่อวางโค้ดแล้วจะได้โค้ด ซึ่งเป็นโค้ดเดียวกับที่เราได้เก็บไว้จากขั้นตอนที่ผ่านมานั่นเอง ดังรูป
เราสามารถใช้วิธีการเดียวกันนี้ ไปใช้เก็บโค้ดใด ๆ ที่เราต้องการได้ ไม่ว่าจะเป็นโค้ด PHP, CSS, JavaScript, HTML หรืออื่นๆ ทำให้เราไม่ต้องเสียเวลาพิมพ์โค้ดขึ้นมาใหม่ทุกครั้ง หรือเสียเวลาไปเปิดไฟล์อื่นเพื่อ Copy โค้ดมาใช้ครับ... อย่างไรลองใช้งานกันดู...สวัสดีครับ.
About the Author
Mr.Sittichai Raksasuk

Mr.Sittichai Raksasuk

Sittichai is a Web Developer and Web Technology Instructor for over 10 yrs. He is also a webmaster of dwthai.com and author jQuery with Dreamweaver (2010). DwThai.Com is a website for web developer using Adobe Dreamweaver.

Contact with him : dwthai@gmail.com



บทความอื่นที่คุณอาจสนใจ

การแปลง CSS ในแบบ Inline Style Sheet ให้เป็น Internal หรือ External Style Sheet

เรื่อง : การใช้ Convert Inline CSS to Rule เปลี่ยน CSS การเขียน CSS เพื่อทำการตบแต่งเว็บเพจ บางครั้งนักพัฒนาเว็บชอบที่จ...  

วิธีการออกแบบเว็บในแบบ Responsive ด้วย Dreamweaver ตอนที่ 3 (จบ)

เรื่อง : การออกแบบ Responsive Web Design ด้วย Dreamweaver ตอนที่ 3 (จบ) กลับมาต่อกันอีกสักตอนสำหรับเรื่องของการใช้งานโป...  

เทคนิคการใช้หน้าต่าง CSS Designer ของ Dreamweaver CC

เรื่อง : แนะนำเทคนิคการใช้งาน CSS Designer Panel ของ Dreamweaver CC CSS Designer Panel เป็นหน้าต่างที่ใช้ใ...  

เปิดหน้าต่าง Code เพื่อแก้ไขโค้ดได้อย่างรวดเร็ว

เรื่อง : เปิดหน้าต่างเพื่อแก้ไข Source Code เว็บเพจ (Code Inspector) ทุกครั้งที่ผู้ใช้งานโปรแกรม Dreamweaver ...  


Copyright ©2003-2019 dwthai.com. All rights reserved.
This website was created by : S.raksasuk.

ติดต่อ DwThai.Com

e-mail : dwthai@gmail.com
mobile: 08-9495-7296

เขียน Guestbook : DwThai.Com

*
*
*