การใส่รูปภาพบน Wave Maker

| ไอที | WaveMaker | 2228

การใส่รูปภาพในหน้าเว็บไซต์โดยใช้ Wave Maker


เรามาดูวิธีการใส่รูปภาพในโปรแกรม Wave Maker กันดีกว่าครับ

อันดับแรกสร้างโปรเจ็คขึ้นมาก่อนครับ

ต่อไปให้ดูแถบทางขวามือจะมีปุ่มทีมีชื่อว่า Picture อยู่ให้ทำการลากมาวางในหน้าเว็บครับ ดังรูปด้านล่าง


ต่อไปให้มาดูแถบทางด้านขวามือครับ ในส่วนของ Property ในส่วนของ Source ให้ใส่ที่อยู่ของรูปภาพเข้าไปครับ ซึ่งในที่นี้ผมใส่ที่อยู่รูปภาพของผม ซึ่งเป็น URL ครับ ตามรูปด้านล่าง


วิธีใส่รูปอีกวิธีหนึ่ง คือ ใส่รูปที่อยู่ในโปรเจ็คเรา ให้ทำการคลิก รูปโซ่ ด้านหลัง ในแถว Source จะปรากฏหน้าต่างขึ้นมาหนึ่งหน้าต่าง ดังรูปด้านล่าง

ในโปรแกรม Wave Maker นั้นจะสร้างโฟลเดอร์สำหรับเก็บไฟล์ต่าง ๆ ที่ใช้ในโปรเจ็คไว้ เป็นหมวดหมู่ เวลาเราต้องการเก็บรูปภาพไว้ใช้ในโปรเจ็คให้นำมาเก็บไว้ในโฟลเดอร์เหล่านี้ตามหมวดหมู่ครับ

แล้วโฟลเดอร์เหล่านี้อยู่ในส่วนไหนของโปรเจ็คละ ???

ตามด้านล่างเลยครับ

ปกตินะครับ จะอยู่ตามนี้
C:UsersAsDocumentsWaveMaker 6.4.5GAprojectsAddPicturewebapproot esources
อยู่ใน Document แล้วก็โฟลเดอร์ WaveMaker แล้วอยู่ในโปรเจ็ค ชื่อโปรเจ็คของเรา webapproot แล้วก็ resource ครับ
เช่น เมื่อต้องการเก็บรูปภาพให้นำมาเก็บใน image แล้วก็เลือกที่อยู่ครับ จากนั้นเมื่อเราต้องการใช้รูปภาพ ก็เข้าไปกดตรง รูปโซ่ ด้านหลัง resource ครับ ตามด้านบนครับ


เมื่อรันมาจะไดัดังรูปด้านล่างครับ

จากรูปด้านบน ปรากฏว่ารูปที่ผมนำมาใส่มีขนาดใหญ่กว่า กรอบ

มีหลายวิธีที่จะแก้ปัญหานี้ เช่น ขยายกรอบให้เท่ากับขนาดของรูป เมื่อรันแล้วจะได้ดังรูปด้านล่าง


อีกวิธีหนึ่งครับ ให้ไปกำหนด ตรง aspect ซึ่งมีอยู่ 3 ตัวเลือกครับ นั่นคือ

- none ค่านี้ เป็นการกำหนดขนาดของรูปเป็นขนาดของรุปต้นแบบ
- h ค่านี้ รูปจะถูกปรับขนาด ให้มีความกว้างเท่ากับขนาดของกรอบ
- v ค่านี้ รูปจะถูกปรับขนาด ให้มีความสูงเท่ากับขนาดของกรอบ


เมื่อลองรันดูจะได้ดังรูปด้านล่างครับ



comments