Transparent Awesome Baby Blue Sharp Pointer

TECH & TIPs

การเพิ่ม code ใน Blog


1.เปิด แดชบอร์ด ไปที่ Setting หรือส่วนการตั้งค่า 

2.เลือกรายการ Layout หรือ รูปแบบ ที่ฝั่งซ้าย ดังภาพด้านล่าง เมื่อได้ Layout Page มาแล้ว ให้กำหนดตำแหน่งที่ท่านจะวาง ส่วนที่ใช้วาง code script


3. เมื่อกำหนดบริเวณได้แล้ว ให้คลิกเลือกรายการ Add a Gadget หรือ เพิ่ม Gadget ที่อยู่ในบริเวณนั้น ซึ่งจะเกิดหน้าต่าง Add a Gadget  เลือกหารายการ ที่ชื่อว่า HTML/Java Script  คลิกเลือกที่เครื่องหมาย +



4. จะเกิดกรอบหน้าต่างสำหรับวาง code script ดังภาพ


5. ทำการตั้งชื่อ และนำ code ที่ต้องการวางลงในพื้นที่เขียน script

6. คลิกปุ่ม บันทึก แล้วปิดหน้าต่างได้

7. ตรงตำแหน่งที่กำหนดไว้ ก็จะมีนาฬิการ หรือ ปฎิทิน แสดงผล ตามที่กำหนดไว้

การทำให้ Youtube เล่นอัตโนมัติ


เพียงแค่ไปใส่โค้ด ?&autoplay=1 ไว้หลัง URL ของไฟล์ Youtubeเช่น 
<iframe width="180" height="120" src="https://www.youtube.com/embed/VuNIsY6JdUw?&autoplay=1" frameborder="0" allowfullscreen></iframe>

การแทรกไฟล์เสียง


ขั้นตอนการทำ การแทรกไฟล์เสียง
1. เปิดไฟล์ใหม่ขึ้นมา หรือเปิดไฟล์ที่ save ไว้เรียบร้อยแล้ว คลิกตำแหน่งที่ต้องการจะแทรก
2. ไปที่ Insert > Media > Plugin จะมีหน้าต่างตามรูปภาพด้านล่างปรากฏ ให้เลือกไปที่ไฟล์ที่ต้องการแทรก
3. คลิก OK จะมีหน้าต่างปรากฏขึ้นมา
4. เราสามารถเปลี่ยนแปลงขนาดของพื้นที่เพลง ที่จะแสดงในหน้าเว็บเพจได้ เสียงเพลง ในเว็บเพจนั้น ถ้าไม่ใช่ไฟล์แบบ flash (flv) ตัวโปรแกรม Dreamweaver จะไม่รู้ขนาดที่ใช้ในการแสดง ทำให้ต้องกำหนดขนาดที่ต้องการให้แสดงผลเอง
5. เมื่อเราเลือกไฟล์เพลงที่แทรก ส่วน Property inspector จะมีรายละเอียดมีดังนี้
            1. ช่องแรกสุดทางซ้ายมือ สำหรับใส่ชื่ออ้างอิงให้กับไฟล์ที่เราแทรกลงไป
            2. W (Width) และ H (Height) กำหนดความกว้าง และความสูงของ ไฟล์ที่จะให้แสดงผล
            3. Class กำหนด Style Sheet ให้กับไฟล์นี้
            4. Src (Source) ตำแหน่งที่เก็บไฟล์
            5. Align จัดตำแหน่งของไฟล์
            6. Play button ใช้ทดลองเปิดไฟล์
            7. Plg URL ใช้กำหนดเว็บไซต์สำหรับโหลดโปรแกรม สำหรับเปิดไฟล์ที่เราแทรกจะปรากฏเมื่อเครื่องผู้ใช้ไม่สามารถเปิดไฟล์ของเราได้
            8. V Space (Vertical Space) กำหนดระยะห่างระหว่างไฟล์ flash กับวัตถุอื่นในเว็บเพจในตำแหน่งบนและล่าง
            9. H Space (Horizontal Space) กำหนดระยะห่างระหว่างไฟล์ flash กับวัตถุอื่นในเว็บเพจในตำแหน่งซ้ายและขวา
            10. Border กำหนดขอบให้กับไฟล์
            11. Parameters กำหนดค่าตัวแปรอื่น จะพูดถึงในบทอื่น การแสดงผลไฟล์เสียงที่เราแทรกลงไปนี้ จะแสดงผลก็ต่อเมื่อโหลดข้อมูลเสร็จเรียบร้อยแล้วเท่านั้น จะไม่มีการโหลดไฟล์พร้อมกับการเล่นไฟล์ อย่างในเว็บ YouTube ถ้าต้องการให้โหลดไปด้วยเล่นเป็นได้ต้องใช้งานในตัวเลือก Streaming ซึ่งจะต้องติดต่อกับ ผู้ดูแล server ว่าได้เปิด Streaming server ไว้หรือไม่


การทำแผนที่ Google Map

ขั้นตอนการทำ แผนที่ Google Map
1. เปิดไฟล์ใหม่ขึ้นมาในโปรแกรม Dreamweaver แล้วสร้างเฟรมขึ้นมา 3 เฟรม
2. สร้างหน้า HTML ขึ้นมาใหม่อีก 1 เพจ เพื่อจะทำการ link ข้อมูลจากเมนูไปยัง Google Map
ขั้นตอนการนำ Google Map มาใส่หน้าเว็บเพจ
            1. เข้าที่เว็บไซต์ https://maps.google.co.th/
            2. พิมพ์สถานที่ที่ต้องการจะให้แสดงบนหน้าเว็บ แล้วกดเลือก
            3. กำหนดตำแหน่ง และเส้นทางของสถานที่ที่ต้องการ
            4. ปรับขนาดในการแสดง Google Map ซึ่งสามารถปรับได้หลายขนาดทั้ง เล็ก ปานกลาง ใหญ่ หรือกำหนดเอง
            5. คลิกที่ตำแหน่ง A > ตำแหน่ง B > ตำแหน่ง C ตามลำดับ เพื่อรับโค้ดไปใส่ในโปรแกรม แล้วทำการ Copy โค้ดที่ได้ทั้งหมด
            6. นำโค้ดที่ได้มาวางไว้ในส่วนที่ต้องการให้แสดงผล
            7. เมื่อทำหน้าเพจของ Google Map เสร็จแล้ว ให้กลับมาหน้าหลักเพื่อทำการ Link ข้อมูลระหว่างคำว่า Google กับเพจที่ใส่ Google Map ไว้
            8. ทำการบันทึก และลองแสดงผลลัพธ์ทางหน้าจอ


การใส่โฆษณา ( แบบปิดได้ )

ขั้นตอนการทำ การใส่โฆษณา
1. เตรียมรูปภาพที่ต้องการ โดยอาจจะวาด หรือเขียนปุ่มปิดไว้ในรูปด้วยโปรแกรมให้เรียบร้อย
2. จากนั้นวาด Layer ลงในเว็บเพจ 1 Layer พร้อมตั้งชื่อ "ads"
3. จากนั้นนำรูปภาพที่เตรียมไว้วางใส่ลงไปใน Layer ใช้ Hotpots สร้างส่วนที่จะให้ผู้ใช้กดปุ่มปิดหน้าต่าง
4. เลือกเครื่องมือ Behaviors คลิกที่ Show-Hide Element สั่งให้ซ่อน Layer "ads"
5. จากนั้นให้สังเกตที่เครื่องมือ Behaviors สถานะของ Mouse อยู่ที่ on Mouse Over ให้เราทำกาเปลี่ยนเป็น on Click
6.จากนั้นก็ทำการใส่ Link ให้กับรูปภาพตามปกติ
7. ทำการ save และลองแสดงผลลัพธ์ทางหน้าจอ










ไม่มีความคิดเห็น:

แสดงความคิดเห็น