About DwThai.Com 00

DwThai.Com Logo

DwThai.Com

Tip and Trick Dreamweaver

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





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

��������������������������������������������������������������������������������������� Web Page ������������ Dreamweaver [Article ID : 103]


เรื่อง : การใส่รูปภาพให้กับ Web Page ด้วยโปรแกรม Dreamweaver

การจัดทำ Web Page แน่นอนสิ่งหนึ่งที่จะขาดไม่ได้นอกจากตัวหนังสือหรือข้อความแล้ว รูปภาพ (Images) ก็เป็นสิ่งจำเป็น เช่นเดียวกัน การที่จะนำไฟล์รูปภาพต่าง ๆ เข้ามาใช้งานภายใน Web Page นั้น เราควรจะมีข้อคำนึงถึงในเบื้องต้นอยู่ 2 -3 ประการด้วยกัน คือ
1. ประเภทของไฟล์รูปภาพ ไฟล์รูปภาพนั้น เราควรจะใช้เป็นนามสกุล *.gif or *.jpg or *.png จึงจะเหมาะสมกับงานบน Website
2. ขนาดของไฟล์รูปภาพ (ไม่ใช่ขนาดของรูปภาพ) ควรมีการ Optimize ก่อนการนำมาใช้งาน
3. ควรมีการใช้งานรูปภาพเท่าที่จำเป็น อย่าใส่ให้มากเกินไป เพราะจะทำให้เว็บเพจโหลดนานขึ้น
* 3 ประการนี้ให้เราพิจารณาตามความเหมาะสมกับงานของเรา

วิธีการใช้โปรแกรม Dreamweaver ในการ Insert Image

ก่อนจะไปเริ่มดูขั้นตอนต่าง ๆ ให้ทำการจัดเตรียมรูปภาพที่ต้องการใช้กับเว็บเราเสียก่อนครับ เมื่อจัดเตรียมไว้เรียบร้อยแล้ว ก็ให้ปฏิบัติตามขั้นตอนต่าง ๆ นี้ได้ ดังนี้

1. นำ Cursor ไปวางไว้ในตำแหน่งที่เราต้องการใส่รูปภาพให้ปรากฎบนเว็บเพจ
2. จากนั้นไปที่หน้าต่าง Insert เลือกที่ Image: Image ดังรูป 3. เมื่อคลิกตามข้อ 2 แล้ว โปรแกรมจะเปิดหน้าต่างขึ้นมาเพื่อให้เราเลือกไฟล์รูปภาพที่ต้องการ ให้เราทำการเลือกรูปภาพตามต้องการ ดังรูป เมื่อเลือกได้แล้ว กดที่ปุ่ม OK

4. โปรแกรมจะทำการใส่รูปภาพให้เรายังตำแหน่งที่ Cursor ที่เราวางไว้ตามข้อ 1 ดังรูป

ถ้าเป็นการเลือกไฟล์รูปภาพจากภายนอกไซต์

ในตัวอย่างข้างต้นเป็นการเลือกไฟล์รูปภาพที่ได้วางไว้ใน Folder เดียวกับไซต์งานของเรา ซึ่งจะสามารถเลือกรูปภาพมาใช้ได้โดยง่าย แต่ถ้าหากเราทำการเลือกไฟล์รูปภาพที่อยู่ภายนอกไซต์ หรือเป็นไฟล์ที่ไม่ได้อยู่ใน Folder เดียวกับเว็บไซต์ โปรแกรม Dreamweaver จะมีการแจ้งเตือนขึ้นมา ดังรูป ที่หน้าต่างแจ้งเตือนดังรูปนี้ เป็นการแจ้งให้เรา Copy ไฟล์รูปภายนอกเข้ามาไว้ภายในไซต์
ให้ทำการกดที่ปุ่ม Yes เท่านั้นครับ ห้ามกดที่ปุ่มอื่น เนื่องจาก ไฟล์รูปภาพจะเกิดปัญหาในการใช้งานได้ครับ ทำการกดปุ่ม Save เพื่อบันทึกไฟล์ลงไซต์ของเรา

การกำหนดคุณสมบัติของรูปภาพที่ Insert เข้ามา

หากต้องการกำหนดค่าคุณสมบัติต่าง ๆ ของรูปภาพ เช่น กำหนดค่าความกว้าง-สูง เราสามารถกำหนดค่าได้ที่หน้าต่าง Properties ดังนี้

1. เลือกที่รูปภาพที่ต้องการกำหนดคุณสมบัติ
2. จากนั้นไปที่ Properties Panel ทำการกำหนดคุณสมบัติตามต้องการ ดังรูป จากรูปข้างต้น มีการกำหนดคุณสมบัติของรูป ดังนี้
- ID : img1
- W : 80% *Width
- H : 80% *Height
ซึ่งเป็นการกำหนดคุณสมบัติเบื้องต้น

คลิปประกอบบทความ

*คลิกที่โลโก้ YouTube เพื่อเข้าดูที่ยูทูปนะครับ จะสามารถขยายจอดูได้

เนื้อหาบทความข้างต้น เป็นภาพรวมของการ Insert ไฟล์รูปภาพนำมาใช้งานกับเว็บเพจด้วยโปรแกรม Dreamweaver ซึ่งรายละเอียดปลีกย่อยต่าง ๆ นั้น ท่านลองศึกษาการใช้ด้วยตัวท่านเองได้ต่อไป และเว็บ DwThai.Com ก็จะค่อย ๆ มีบทความแนะนำการใช้งานต่อ ๆ ไปครับ คอยติดตามกันครับ.
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



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

สร้างจุด Link ภายในเว็บเพจเดียวกัน (Named Anchor)

เรื่อง : การสร้างจุด Link ภายในเว็บเพจเดียวกันด้วย Dreamweaver Web Page เราสามารถกำหนดจุด หรือตำแห...  

ว่าด้วยเรื่อง Tag Selectors ของ Dreamweaver

เรื่อง : แนะนำการใช้ Tag Selectors ใน Dreamweaver Tag Selectors มีประโยชน์อย่างมากในการใช้งานโปรแกรม ในกา...  

การสร้างจุด Link (Text Link)

การสร้าง Link ในแบบ Text Link Link หรือ ลิงค์ เป็นจุดเชื่อมโยงที่ปรากฎบนหน้าเว็บ เพื่อให้ผู้ใช้งานเว็บสามารถคลิกหรือกด...  

การ Insert ไฟล์ Flash Video มาใช้กับเว็บ (FLV)

เรื่อง : การ Insert ไฟล์ Flash Video มาใช้งานกับเว็บเพจด้วย Dreamweaver Dreamweaver สามารถนำไฟล์ Media...  


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

*
*
*