เทคนิคการใช้งาน BBCode ในเว็บบอร์ด
หน้า 1 จาก 1
เทคนิคการใช้งาน BBCode ในเว็บบอร์ด
BBCode คืออะไร?
BBCode มาจากคำว่า Bulletin Board Code เป็นภาษา Markup แบบย่อที่ถูกนำมาใช้เพื่อจัดรูปแบบการแสดงผลในเว็บบอร์ด โดยจะใช้แท็ก (Tag) ในวงเล็บรูปสี่เหลี่ยม
( [ ] ) ซึ่งแท็กต่างๆในเว็บบอร์ดจะถูกเขียนขึ้นมาเพื่อแทนภาษา HTML โดยมันจะถูกวิเคราะห์ด้วยระบบของเว็บบอร์ด และแปลงไปเป็นภาษา HTML เพื่อให้เบราเซอร์เข้าใจและสามารถแสดงผลออกมาได้อย่างถูกต้อง
#BBCode ในแต่ละเว็บบอร์ดอาจจะแตกต่างกันออกไป ทั้งนี้แล้วแต่ว่าผู้พัฒนาจะกำหนดแท็กของ BBCode ให้แทนภาษา HTML ในลักษณะไหน เช่น ถ้าเราต้องการจัดรูปภาพ หรือข้อความให้อยู่กึ่งกลาง เราอาจจะกำหนดแท็กดังนี้
แต่ในบางเว็บบอร์ด เราอาจจะต้องกำหนดแท็กดังนี้ (หรือบางบอร์ดก็อาจจะไม่มีแท็ก Center ให้ใช้งาน)
จากแท็ก BBCode ด้านบน เว็บบอร์ดจะนำไปแปลงเป็นภาษา HTML ได้ดังนี้
และจะแสดงค่าออกมาดังนี้
BBCode มาจากคำว่า Bulletin Board Code เป็นภาษา Markup แบบย่อที่ถูกนำมาใช้เพื่อจัดรูปแบบการแสดงผลในเว็บบอร์ด โดยจะใช้แท็ก (Tag) ในวงเล็บรูปสี่เหลี่ยม
( [ ] ) ซึ่งแท็กต่างๆในเว็บบอร์ดจะถูกเขียนขึ้นมาเพื่อแทนภาษา HTML โดยมันจะถูกวิเคราะห์ด้วยระบบของเว็บบอร์ด และแปลงไปเป็นภาษา HTML เพื่อให้เบราเซอร์เข้าใจและสามารถแสดงผลออกมาได้อย่างถูกต้อง
#BBCode ในแต่ละเว็บบอร์ดอาจจะแตกต่างกันออกไป ทั้งนี้แล้วแต่ว่าผู้พัฒนาจะกำหนดแท็กของ BBCode ให้แทนภาษา HTML ในลักษณะไหน เช่น ถ้าเราต้องการจัดรูปภาพ หรือข้อความให้อยู่กึ่งกลาง เราอาจจะกำหนดแท็กดังนี้
- Code:
[center]ข้อความ[/center]
หรือ
[center][img]ลิงก์รูปภาพ[/img][/center]
แต่ในบางเว็บบอร์ด เราอาจจะต้องกำหนดแท็กดังนี้ (หรือบางบอร์ดก็อาจจะไม่มีแท็ก Center ให้ใช้งาน)
- Code:
[align=center]ข้อความ[/align]
หรือ
[align=center][img]ลิงก์รูปภาพ[/img][/align]
จากแท็ก BBCode ด้านบน เว็บบอร์ดจะนำไปแปลงเป็นภาษา HTML ได้ดังนี้
- Code:
<center>ข้อความ</center>
หรือ
<center><img src="ลิงก์รูปภาพ" /></center>
และจะแสดงค่าออกมาดังนี้
ข้อความ
หรือ
แก้ไขล่าสุดโดย TonyWins เมื่อ Thu 20 Jul 2017, 15:09, ทั้งหมด 11 ครั้ง
การใช้งาน BBCode
การใช้งาน BBCode
การทำอักษรตัวหนา
วิธีการใส่แท็ก
ผลลัพธ์
การทำอักษรตัวเอียง
วิธีการใส่แท็ก
ผลลัพธ์
การขีดเส้นใต้ข้อความ
วิธีการใส่แท็ก
ผลลัพธ์
การขีดคร่อมข้อความ
วิธีการใส่แท็ก
ผลลัพธ์
การจัดให้ข้อความหรือรูปภาพให้ชิดซ้าย (ปกติมันก็ชิดซ้ายอยู่แล้วนินา)
วิธีการใส่แท็ก
ผลลัพธ์
การจัดให้ข้อความหรือรูปภาพอยู่กึ่งกลาง
วิธีการใส่แท็ก
ผลลัพธ์
การจัดให้ข้อความหรือรูปภาพอยู่ชิดขวา
วิธีการใส่แท็ก
ผลลัพธ์
การจัดให้ข้อความเสมอกันทั้งด้านหน้าและด้านหลัง
วิธีการใส่แท็ก
ผลลัพธ์
การจัดรายการข้อความแบบใส่เครื่องหมายจุดไว้ที่หน้าข้อความ
วิธีการใส่แท็ก
ผลลัพธ์
การจัดรายการข้อความแบบใส่ตัวเลขไว้ที่หน้าข้อความ
วิธีการใส่แท็ก
ผลลัพธ์
การใส่เส้นคั่นแนวนอน
วิธีการใส่แท็ก
ผลลัพธ์
การสร้างตาราง
วิธีการใส่แท็ก
ผลลัพธ์
การกำหนดข้อความแบบข้อความอ้างอิง
วิธีการใส่แท็ก
ผลลัพธ์
การกำหนดข้อความเพื่อแสดงผลแบบโค้ด (ใช้สำหรับแสดงผลโค้ด HTML หรือ BBCode เป็นต้น)
วิธีการใส่แท็ก
ผลลัพธ์
การใส่รูปภาพ
วิธีการใส่แท็ก
ผลลัพธ์:
การใส่ลิงก์ URL
วิธีการใส่แท็ก
ผลลัพธ์
การใส่ Flash Animation
วิธีการใส่แท็ก
ผลลัพธ์
การใส่วิดีโอจาก Youtube
ถ้า URL ของวิดีโอคือ https://www.youtube.com/watch?v=a69dgQWyJtY รหัสของวิดีโอจะอยู่ด้านหลังเครื่องหมาย = จะได้เป็น a69dgQWyJtY หรือจะใช้วิธีใส่แท็ก Flash Animation ด้วย URL เต็มก็ได้ ซึ่งจะสามารถกำหนดขนาดของวิดีโอได้ด้วย โดยจะต้องแก้ไข URL ด้วยการลบคำว่า watch? ทิ้งไป และแทนที่เครื่องหมาย = ด้วยเครื่องหมาย /
วิธีการใส่แท็ก
ผลลัพธ์
การกำหนดหัวข้อ (Header)
วิธีการใส่แท็ก
ผลลัพธ์
การกำหนดขนาดอักษร
วิธีการใส่แท็ก
ผลลัพธ์
การใส่สีให้กับตัวอักษร
วิธีการใส่แท็ก
ผลลัพธ์
รายชื่อสีมาตราฐาน 140 สี
ดาวน์โหลดไฟล์รูปแบบ PDF: 140 Web Colors by tDsigns.com
การกำหนดรูปแบบของตัวอักษร
วิธีการใส่แท็ก
ผลลัพธ์
การแสดงผลข้อความแบบตัวพ่วงท้าย
วิธีการใส่แท็ก
ผลลัพธ์
การแสดงผลข้อความแบบตัวยกระดับ
วิธีการใส่แท็ก
ผลลัพธ์
การใส่ข้อความใน Spoiler
วิธีการใส่แท็ก
ผลลัพธ์
การกำหนดให้ข้อความเลื่อนในแนวนอน
วิธีการใส่แท็ก
ผลลัพธ์
การกำหนดให้ข้อความเลื่อนในแนวตั้ง
วิธีการใส่แท็ก
ผลลัพธ์
การสุ่มตัวเลข
วิธีการใส่แท็ก
ผลลัพธ์
การทำอักษรตัวหนา
วิธีการใส่แท็ก
- Code:
[b]ตามด้วยข้อความ[/b]
เช่น [b]ข้อความตัวหนา[/b]
ผลลัพธ์
ข้อความตัวหนา
การทำอักษรตัวเอียง
วิธีการใส่แท็ก
- Code:
[i]ตามด้วยข้อความ[/i]
เช่น [i]ข้อความตัวเอียง[/i]
ผลลัพธ์
ข้อความตัวเอียง
การขีดเส้นใต้ข้อความ
วิธีการใส่แท็ก
- Code:
[u]ตามด้วยข้อความ[/u]
เช่น [u]ข้อความขีดเส้นใต้[/u]
ผลลัพธ์
ข้อความขีดเส้นใต้
การขีดคร่อมข้อความ
วิธีการใส่แท็ก
- Code:
[strike]ตามด้วยข้อความ[/strike]
เช่น [strike]ข้อความขีดคร่อม[/strike]
ผลลัพธ์
ข้อความขีดคร่อม
การจัดให้ข้อความหรือรูปภาพให้ชิดซ้าย (ปกติมันก็ชิดซ้ายอยู่แล้วนินา)
วิธีการใส่แท็ก
- Code:
[left]ตามด้วยข้อความหรือแท็กรูปภาพ[/left]
เช่น [left]ข้อความชิดด้านซ้าย[/left]
หรือ [left][img]https://lh3.googleusercontent.com/-Jv2w4WUW2DE/VjVZPyNu0-I/AAAAAAAASWo/yI3o7ywbe_k/s200-Ic42/Avatar%252520%252526%252520Icon.png[/img][/left]
ผลลัพธ์
ข้อความชิดด้านซ้าย
การจัดให้ข้อความหรือรูปภาพอยู่กึ่งกลาง
วิธีการใส่แท็ก
- Code:
[center]ตามด้วยข้อความหรือแท็กรูปภาพ[/center]
เช่น [center]ข้อความอยู่กึ่งกลาง[/center]
หรือ [center][img]https://lh3.googleusercontent.com/-Jv2w4WUW2DE/VjVZPyNu0-I/AAAAAAAASWo/yI3o7ywbe_k/s200-Ic42/Avatar%252520%252526%252520Icon.png[/img][/center]
ผลลัพธ์
ข้อความอยู่กึ่งกลาง
การจัดให้ข้อความหรือรูปภาพอยู่ชิดขวา
วิธีการใส่แท็ก
- Code:
[right]ตามด้วยข้อความหรือแท็กรูปภาพ[/right]
เช่น [right]ข้อความชิดขวา[/right]
หรือ [right][img]https://lh3.googleusercontent.com/-Jv2w4WUW2DE/VjVZPyNu0-I/AAAAAAAASWo/yI3o7ywbe_k/s200-Ic42/Avatar%252520%252526%252520Icon.png[/img][/right]
ผลลัพธ์
ข้อความชิดขวา
การจัดให้ข้อความเสมอกันทั้งด้านหน้าและด้านหลัง
วิธีการใส่แท็ก
- Code:
[justify]ตามด้วยข้อความ[/justify]
เช่น [justify]BBCode มาจากคำว่า Bulletin Board Code เป็นภาษา Markup แบบย่อที่ถูกนำมาใช้เพื่อจัดรูปแบบการแสดงผลในเว็บบอร์ด โดยจะใช้แท็ก (Tag) ในวงเล็บรูปสี่เหลี่ยม ( [ ] ) ซึ่งแท็กต่างๆในเว็บบอร์ดจะถูกเขียนขึ้นมาเพื่อแทนภาษา HTML โดยมันจะถูกวิเคราะห์ด้วยระบบของเว็บบอร์ด และแปลงไปเป็นภาษา HTML เพื่อให้เบราเซอร์เข้าใจและสามารถแสดงผลออกมาได้อย่างถูกต้อง[/justify]
ผลลัพธ์
BBCode มาจากคำว่า Bulletin Board Code เป็นภาษา Markup แบบย่อที่ถูกนำมาใช้เพื่อจัดรูปแบบการแสดงผลในเว็บบอร์ด โดยจะใช้แท็ก (Tag) ในวงเล็บรูปสี่เหลี่ยม ( [ ] ) ซึ่งแท็กต่างๆในเว็บบอร์ดจะถูกเขียนขึ้นมาเพื่อแทนภาษา HTML โดยมันจะถูกวิเคราะห์ด้วยระบบของเว็บบอร์ด และแปลงไปเป็นภาษา HTML เพื่อให้เบราเซอร์เข้าใจและสามารถแสดงผลออกมาได้อย่างถูกต้อง
การจัดรายการข้อความแบบใส่เครื่องหมายจุดไว้ที่หน้าข้อความ
วิธีการใส่แท็ก
- Code:
[list][*]ตามด้วยข้อความ[/list]
เช่น [list][*]ข้อความ
[*]ข้อความ
[*]ข้อความ[/list]
ผลลัพธ์
- ข้อความ
- ข้อความ
- ข้อความ
การจัดรายการข้อความแบบใส่ตัวเลขไว้ที่หน้าข้อความ
วิธีการใส่แท็ก
- Code:
[list=1][*]ตามด้วยข้อความ[/list]
เช่น [list=1][*]ข้อความ
[*]ข้อความ
[*]ข้อความ
[*]ข้อความ[/list]
ผลลัพธ์
- ข้อความ
- ข้อความ
- ข้อความ
การใส่เส้นคั่นแนวนอน
วิธีการใส่แท็ก
- Code:
ข้อความ
[hr]
ข้อความ
ผลลัพธ์
ข้อความ
ข้อความ
การสร้างตาราง
วิธีการใส่แท็ก
- Code:
[table border="ค่าความหนาของเส้นตาราง" (0 = ไม่มีเส้น) width="ความกว้างของตาราง"]
[tr][td]ข้อความ[/td][td]ข้อความ[/td][td]ข้อความ[/td][/tr]
[tr][td]ข้อความ[/td][td]ข้อความ[/td][td]ข้อความ[/td][/tr][/table]
เช่น [table border="1" width="50%"][tr][td]ข้อความ[/td][td]ข้อความ[/td][td]ข้อความ[/td][/tr]
[tr][td]ข้อความ[/td][td]ข้อความ[/td][td]ข้อความ[/td][/tr]
[tr][td]ข้อความ[/td][td]ข้อความ[/td][td]ข้อความ[/td][/tr][/table]
ผลลัพธ์
ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ
การกำหนดข้อความแบบข้อความอ้างอิง
วิธีการใส่แท็ก
- Code:
[quote]ตามด้วยข้อความ[/quote] หรือ [quote="ชื่อผู้ใช้ หรือ ข้อความ"]ตามด้วยข้อความ[/quote]
เช่น [quote]ข้อความอ้างอิง[/quote]
[quote="tDsigns"]ที่นี่เรามอบสิ่งดีดีให้คุณ...ด้วยใจ[/quote]
ผลลัพธ์
ข้อความอ้างอิงtDsigns พิมพ์ว่า:ที่นี่เรามอบสิ่งดีดีให้คุณ...ด้วยใจ
การกำหนดข้อความเพื่อแสดงผลแบบโค้ด (ใช้สำหรับแสดงผลโค้ด HTML หรือ BBCode เป็นต้น)
วิธีการใส่แท็ก
- Code:
[code]ตามด้วยข้อความ, โค้ด HTML, BBCode, โค้ด Java[/code]
เช่น [code]<b>ข้อความตัวหนา</b> [i]ข้อความตัวเอียง[/i][/code]
ผลลัพธ์
- Code:
<b>ข้อความตัวหนา</b> [i]ข้อความตัวเอียง[/i]
การใส่รูปภาพ
วิธีการใส่แท็ก
- Code:
[img]ลิงก์รูปภาพ[/img]
เช่น [img]https://lh3.googleusercontent.com/-Jv2w4WUW2DE/VjVZPyNu0-I/AAAAAAAASWo/yI3o7ywbe_k/s200-Ic42/Avatar%252520%252526%252520Icon.png[/img]
ผลลัพธ์:
การใส่ลิงก์ URL
วิธีการใส่แท็ก
- Code:
[url=ตามด้วยลิงก์ URL]ข้อความหรือคำอธิบาย[/url]
เช่น [url=https://www.tdsigns.com/forum]tDsigns Forum[/url]
ผลลัพธ์
การใส่ Flash Animation
วิธีการใส่แท็ก
- Code:
[flash(ความกว้าง,ความสูง)]Flash URL[/flash]
เช่น [flash(480,50)]http://www.123-banner.com/preview/p_turns.swf[/flash]
ผลลัพธ์
การใส่วิดีโอจาก Youtube
ถ้า URL ของวิดีโอคือ https://www.youtube.com/watch?v=a69dgQWyJtY รหัสของวิดีโอจะอยู่ด้านหลังเครื่องหมาย = จะได้เป็น a69dgQWyJtY หรือจะใช้วิธีใส่แท็ก Flash Animation ด้วย URL เต็มก็ได้ ซึ่งจะสามารถกำหนดขนาดของวิดีโอได้ด้วย โดยจะต้องแก้ไข URL ด้วยการลบคำว่า watch? ทิ้งไป และแทนที่เครื่องหมาย = ด้วยเครื่องหมาย /
วิธีการใส่แท็ก
- Code:
[youtube]รหัสวิดีโอของ Youtube[/youtube]
เช่น
[youtube]a69dgQWyJtY[/youtube]
ผลลัพธ์
การกำหนดหัวข้อ (Header)
วิธีการใส่แท็ก
- Code:
[hตัวเลข2-4]ข้อความ[/hตัวเลขที่เหมือนกับแท็กเริ่มต้น]
เช่น
[h2]หัวข้อขนาด H2[/h2]
[h3]หัวข้อขนาด H3[/h3]
[h4]หัวข้อขนาด H4[/h4]
ผลลัพธ์
หัวข้อขนาด H2
หัวข้อขนาด H3
หัวข้อขนาด H4
การกำหนดขนาดอักษร
วิธีการใส่แท็ก
- Code:
[size=ตัวเลข]ข้อความ[/size]
เช่น [size=7]ข้อความ[/size] หรือ [size=9]ข้อความ[/size] หรือ [size=12]ข้อความ[/size] หรือ [size=18]ข้อความ[/size] หรือ [size=24]ข้อความ[/size]
ผลลัพธ์
ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ
การใส่สีให้กับตัวอักษร
วิธีการใส่แท็ก
- Code:
[color=รหัสสีหรือชื่อสีมาตราฐาน]ข้อความ[/color]
เช่น [color=#22bb99]ข้อความ[/color] หรือ [color=red]ข้อความ[/color]
ผลลัพธ์
ข้อความ ข้อความ
รายชื่อสีมาตราฐาน 140 สี
ดาวน์โหลดไฟล์รูปแบบ PDF: 140 Web Colors by tDsigns.com
การกำหนดรูปแบบของตัวอักษร
วิธีการใส่แท็ก
- Code:
[font=ชื่อแบบอักษร]ข้อความ[/font]
เช่น [font=Arial]Arial[/font] หรือ [font=Arial Black]Arial Black[/font] หรือ [font=Comic Sans Ms]Comic Sans Ms[/font] หรือ [font=Impact]Impact[/font]
ผลลัพธ์
Arial Arial Black Comic Sans Ms Impact
การแสดงผลข้อความแบบตัวพ่วงท้าย
วิธีการใส่แท็ก
- Code:
[sub]ข้อความ[/sub]
เช่น ไฮโดรเจนโมโนออกไซด์ หรือ น้ำ (H[sub]2[/sub]O)
ผลลัพธ์
ไฮโดรเจนโมโนออกไซด์ หรือน้ำ (H2O)
การแสดงผลข้อความแบบตัวยกระดับ
วิธีการใส่แท็ก
- Code:
[sup]ข้อความ[/sup]
เช่น x = 10[sup]2[/sup]
ผลลัพธ์
x = 102
การใส่ข้อความใน Spoiler
วิธีการใส่แท็ก
- Code:
[spoiler]ข้อความ[/spoiler]
เช่น [spoiler]Password: tDsigns[/spoiler]
ผลลัพธ์
- Spoiler:
Password: tDsigns
การกำหนดให้ข้อความเลื่อนในแนวนอน
วิธีการใส่แท็ก
- Code:
[scroll]ข้อความ[/scroll]
เช่น [scroll]ข้อความเลื่อนในแนวนอน[/scroll]
ผลลัพธ์
การกำหนดให้ข้อความเลื่อนในแนวตั้ง
วิธีการใส่แท็ก
- Code:
[updown]ข้อความ[/updown]
เช่น [updown]ข้อความเลื่อนในแนวตั้ง[/ubdown]
ผลลัพธ์
การสุ่มตัวเลข
วิธีการใส่แท็ก
- Code:
[rand]จำนวนตัวเลข[/rand]
หรือ [rand]ตัวเลขเริ่มต้น,ตัวเลขสิ้นสุด[/rand]
เช่น [rand]50[/rand] หรือ [rand]20,90[/rand]
ผลลัพธ์
- Random number (1,50) : 39
- Random number (20,90) : 83
แก้ไขล่าสุดโดย TonyWins เมื่อ Thu 20 Jul 2017, 15:37, ทั้งหมด 21 ครั้ง
การใช้แท็ก BBCode แบบผสม
การใช้แท็ก BBCode แบบผสม
การใส่แท็กให้กับข้อความเช่น ตัวหนา+เอียง ตัวเอียง+ขีดเส้นใต้ ตัวหนา+เอียง+จัดไว้กึ่งกลาง เป็นต้น
วิธีการใส่แท็ก ให้ใส่แท็กเปิดเรียงตามลำดับ และใส่แท็กปิดเรียงย้อนกลับไปตามลำดับ
ผลลัพธ์
การกำหนดลิงก์ให้กับรูปภาพ
วิธีการใส่แท็ก
ผลลัพธ์
การใส่แท็กให้กับข้อความเช่น ตัวหนา+เอียง ตัวเอียง+ขีดเส้นใต้ ตัวหนา+เอียง+จัดไว้กึ่งกลาง เป็นต้น
วิธีการใส่แท็ก ให้ใส่แท็กเปิดเรียงตามลำดับ และใส่แท็กปิดเรียงย้อนกลับไปตามลำดับ
- Code:
เช่น [b][i]ตัวหนา+เอียง[/i][/b]
[i][u]ตัวเอียง+ขีดเส้นใต้[/u][/i]
[b][i][center]ตัวหนา+เอียง+จัดกึ่งกลาง[/center][/i][/b]
ผลลัพธ์
ตัวหนา+เอียง
ตัวเอียง+ขีดเส้นใต้ตัวหนา+เอียง+จัดกึ่งกลาง
การกำหนดลิงก์ให้กับรูปภาพ
วิธีการใส่แท็ก
- Code:
[url=URL ของเว็บ][img]URL ของรูปภาพ[/img][/url]
เช่น [url=https://www.tdsigns.com/forum][img]https://lh3.googleusercontent.com/-Jv2w4WUW2DE/VjVZPyNu0-I/AAAAAAAASWo/yI3o7ywbe_k/s200-Ic42/Avatar%252520%252526%252520Icon.png[/img][/url]
ผลลัพธ์
แก้ไขล่าสุดโดย TonyWins เมื่อ Thu 20 Jul 2017, 15:45, ทั้งหมด 7 ครั้ง
Re: เทคนิคการใช้งาน BBCode ในเว็บบอร์ด
การแสดงผลรูปภาพขนาดใหญ่
การแสดงผลรูปภาพในเว็บบอร์ด tDsigns ความกว้างที่เหมาะสมไม่ควรที่จะเกิน 1024 pixels (สำหรับหน้าจอที่มีความละเอียด 1600 x 900) ซึ่งถ้าภาพต้นฉบับมีขนาดใหญ่เกิน 1024 pixels เวลาแสดงผลมันจะเกินเนื้อที่การแสดงข้อมูลบนเว็บบอร์ด ซึ่งทำให้แสดงองค์ประกอบของภาพได้ไม่ครบ เช่นภาพด้านล่าง
ดังนั้นการนำรูปภาพมาใช้งานในเว็บบอร์ดควรที่จะย่อขนาดของภาพลงมาก่อนอัปโหลด (สำหรับเว็บฝากไฟล์ทั่วไป ซึ่งผมไม่ค่อยแนะนำให้ฝากไฟล์ภาพเอาไว้ตามเว็บเหล่านี้) แล้วถึงจะนำลิงก์ของไฟล์รูปภาพมาใช้งาน
แต่ถ้าเราเป็นสมาชิกของ Picasa Web Album ก็สามารถอัปโหลดไฟล์รูปภาพขนาดใหญ่ขึ้นไปได้ทันทีโดยไม่จำเป็นต้องลดขนาดภาพก่อน และสามารถที่จะนำภาพจาก Picasa มาใช้ได้ง่ายๆ กับเว็บบอร์ด โดยสามารถกำหนดขนาดของการแสดงผลได้ตามต้องการ
Picasa Web Album คืออะไร?
Picasa Web Album เป็นพื้นที่จัดเก็บไฟล์รูปภาพส่วนตัวสำหรับผู้ที่มีแอคเคาท์ของ Google โดยมันจะลิงก์กับ Google+ ในการใช้เป็นที่จัดเก็บรูปภาพที่เราแชร์ รวมไปถึงการซิงค์ข้อมูลรูปภาพกับมือถือระบบปฏิบัติการแอนดรอยด์ มีเนื้อที่สำหรับจัดเก็บรูปภาพได้ฟรีถึง 1.5GB นอกจากนี้ยังมีโปรแกรมจัดการไฟล์รูปภาพที่สนับสนุนการทำงานที่สามารถค้นหา จัดระเบียบ และแบ่งปันรูปภาพ และอัปโหลดไปยัง Picasa Web Albumได้ทันทีโดยไม่ต้องเปิดหน้าเว็บด้วย Picasa สามารถดาวน์โหลดได้ที่ picasa.google.com
การนำภาพจาก Picasa มาใช้งาน
หลังจากที่อัปโหลดภาพไว้ที่ Picasa แล้วให้คลิกเข้าไปดูภาพที่ต้องการนำมาใช้งาน ที่ด้านขวาจะแสดงรายละเอียดของภาพขนาดปกติเอาไว้ ดังภาพตัวอย่างขนาดปกติของภาพจะมีความละเอียดอยู่ที่ 1600x900 pixels ส่วนภาพที่แสดงผลในหน้าเว็บจะขึ้นอยู่กับความละเอียดของหน้าจอ เช่นถ้าหน้าจอของเรามีความละเอียด 1600x900 pixels ภาพที่แสดงผลในหน้าเว็บของ Picasa จะแสดงผลอยู่ที่ 912x513 pixels เป็นต้น (ขนาดการแสดงผลจะแตกต่างกันไปตามขนาดและสัดส่วนของภาพ)
การนำภาพมาใช้งาน ให้คลิกขวาที่ภาพแล้วเลือกคำสั่ง Copy Picture (สำหรับ Microsoft Edge) หรือ Copy Image URL (สำหรับ Chrome)
นำโค้ดที่ได้มาใส่ในแท็ก img ดังนี้
จากโค้ดให้สังเกตที่ URL ของภาพโดยดูจากชื่อไฟล์ด้านขวาไล่ย้อนไปจนเห็นตัวเลขที่มีตัว S นำหน้า ค่าตัวเลขหลังตัว S จะเป็นตัวกำหนดการแสดงผลของภาพ เช่นถ้าเราต้องการกำหนดให้ภาพมีความกว้าง 1024 ก็เปลี่ยนตัวเลขจาก s912 ไปเป็น s1024 ดังโค้ดด้านล่าง
ผลลัพธ์
ภาพขนาด s912
ภาพขนาด s1024
ในกรณีที่เราต้องการแสดงภาพขนาดใหญ่ให้ใช้วิธีใส่แท็ก URL นำหน้าแท็ก img แล้วกำหนดขนาดของรูปภาพของแท็ก URL เป็นภาพขนาดใหญ่ และแท็ก img กำหนดขนาดให้เหมาะสมกับการแสดงผลในเว็บบอร์ด เช่น
ผลลัพธ์
การแสดงผลรูปภาพในเว็บบอร์ด tDsigns ความกว้างที่เหมาะสมไม่ควรที่จะเกิน 1024 pixels (สำหรับหน้าจอที่มีความละเอียด 1600 x 900) ซึ่งถ้าภาพต้นฉบับมีขนาดใหญ่เกิน 1024 pixels เวลาแสดงผลมันจะเกินเนื้อที่การแสดงข้อมูลบนเว็บบอร์ด ซึ่งทำให้แสดงองค์ประกอบของภาพได้ไม่ครบ เช่นภาพด้านล่าง
ดังนั้นการนำรูปภาพมาใช้งานในเว็บบอร์ดควรที่จะย่อขนาดของภาพลงมาก่อนอัปโหลด (สำหรับเว็บฝากไฟล์ทั่วไป ซึ่งผมไม่ค่อยแนะนำให้ฝากไฟล์ภาพเอาไว้ตามเว็บเหล่านี้) แล้วถึงจะนำลิงก์ของไฟล์รูปภาพมาใช้งาน
แต่ถ้าเราเป็นสมาชิกของ Picasa Web Album ก็สามารถอัปโหลดไฟล์รูปภาพขนาดใหญ่ขึ้นไปได้ทันทีโดยไม่จำเป็นต้องลดขนาดภาพก่อน และสามารถที่จะนำภาพจาก Picasa มาใช้ได้ง่ายๆ กับเว็บบอร์ด โดยสามารถกำหนดขนาดของการแสดงผลได้ตามต้องการ
Picasa Web Album คืออะไร?
Picasa Web Album เป็นพื้นที่จัดเก็บไฟล์รูปภาพส่วนตัวสำหรับผู้ที่มีแอคเคาท์ของ Google โดยมันจะลิงก์กับ Google+ ในการใช้เป็นที่จัดเก็บรูปภาพที่เราแชร์ รวมไปถึงการซิงค์ข้อมูลรูปภาพกับมือถือระบบปฏิบัติการแอนดรอยด์ มีเนื้อที่สำหรับจัดเก็บรูปภาพได้ฟรีถึง 1.5GB นอกจากนี้ยังมีโปรแกรมจัดการไฟล์รูปภาพที่สนับสนุนการทำงานที่สามารถค้นหา จัดระเบียบ และแบ่งปันรูปภาพ และอัปโหลดไปยัง Picasa Web Albumได้ทันทีโดยไม่ต้องเปิดหน้าเว็บด้วย Picasa สามารถดาวน์โหลดได้ที่ picasa.google.com
การนำภาพจาก Picasa มาใช้งาน
หลังจากที่อัปโหลดภาพไว้ที่ Picasa แล้วให้คลิกเข้าไปดูภาพที่ต้องการนำมาใช้งาน ที่ด้านขวาจะแสดงรายละเอียดของภาพขนาดปกติเอาไว้ ดังภาพตัวอย่างขนาดปกติของภาพจะมีความละเอียดอยู่ที่ 1600x900 pixels ส่วนภาพที่แสดงผลในหน้าเว็บจะขึ้นอยู่กับความละเอียดของหน้าจอ เช่นถ้าหน้าจอของเรามีความละเอียด 1600x900 pixels ภาพที่แสดงผลในหน้าเว็บของ Picasa จะแสดงผลอยู่ที่ 912x513 pixels เป็นต้น (ขนาดการแสดงผลจะแตกต่างกันไปตามขนาดและสัดส่วนของภาพ)
การนำภาพมาใช้งาน ให้คลิกขวาที่ภาพแล้วเลือกคำสั่ง Copy Picture (สำหรับ Microsoft Edge) หรือ Copy Image URL (สำหรับ Chrome)
นำโค้ดที่ได้มาใส่ในแท็ก img ดังนี้
- Code:
[img]https://lh3.googleusercontent.com/-ZYHESwJvDBc/VjWeJgvwawI/AAAAAAAASW4/kzqa_DWXpG0/s912-Ic42/2015-09-17_00004.jpg[/img]
จากโค้ดให้สังเกตที่ URL ของภาพโดยดูจากชื่อไฟล์ด้านขวาไล่ย้อนไปจนเห็นตัวเลขที่มีตัว S นำหน้า ค่าตัวเลขหลังตัว S จะเป็นตัวกำหนดการแสดงผลของภาพ เช่นถ้าเราต้องการกำหนดให้ภาพมีความกว้าง 1024 ก็เปลี่ยนตัวเลขจาก s912 ไปเป็น s1024 ดังโค้ดด้านล่าง
- Code:
[img]https://lh3.googleusercontent.com/-ZYHESwJvDBc/VjWeJgvwawI/AAAAAAAASW4/kzqa_DWXpG0/s1024-Ic42/2015-09-17_00004.jpg[/img]
ผลลัพธ์
ภาพขนาด s912
ภาพขนาด s1024
ในกรณีที่เราต้องการแสดงภาพขนาดใหญ่ให้ใช้วิธีใส่แท็ก URL นำหน้าแท็ก img แล้วกำหนดขนาดของรูปภาพของแท็ก URL เป็นภาพขนาดใหญ่ และแท็ก img กำหนดขนาดให้เหมาะสมกับการแสดงผลในเว็บบอร์ด เช่น
- Code:
[url=https://lh3.googleusercontent.com/-ZYHESwJvDBc/VjWeJgvwawI/AAAAAAAASW4/kzqa_DWXpG0/s1600-Ic42/2015-09-17_00004.jpg][img]https://lh3.googleusercontent.com/-ZYHESwJvDBc/VjWeJgvwawI/AAAAAAAASW4/kzqa_DWXpG0/s1024-Ic42/2015-09-17_00004.jpg[/img][/url]
คลิกเพื่อดูภาพขนาดใหญ่
ผลลัพธ์
หน้า 1 จาก 1
Permissions in this forum:
คุณไม่สามารถพิมพ์ตอบ
|
|