Jeab_Education: กรกฎาคม 2013

วันอังคารที่ 2 กรกฎาคม พ.ศ. 2556

การสร้างพื้นหลังblogger

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

1. คลิกที่ File ->New
2. จากนั้น ตรง Preset คลิกที่เครื่องหมายหัวกลับเลือก Web
3. Size คลิกที่เครื่องหมายหัวกลับ 1024x768 ซึ่งเป็นการแสดงผลบนเว็บหน้าจอมาตรฐาน
4. Color mode เลือก RGB Color
5. คลิก OK.

(คลิกที่นี่ดูภาพขนาดใหญ่)

เมื่อสร้างภาพได้ตามต้องการแล้ว ก็ทำการบันทึก โดย
1. คลิก file->Save for Web & Devices..
2. เลือก Preset PNG-24
3. คลิก Save
4. ตั้งชื่อ File เลือกชนิดไฟล์ *PNG

(คลิกที่นี่ดูภาพขนาดใหญ่)

เข้าไปที่เว็บไซด์ http://www.photobucket.com เพื่อฝากรูปภาพที่เราสร้าง
1. Log In
2. คลิก Upload images &Vidios

(คลิกที่นี่ดูภาพขนาดใหญ่)

จากนั้น Log In เข้าไปที่บัญชี Blogger เพื่อปรับแต่ง
1. เข้าไปเลือก Lay Out-> Pick New Template -> เลือก Mininaข -> Save New Template
2. เข้าไปเลือก Lay Out-> Edit Html
2. ค้นหา Code ดังต่อไปนี้ โดยอาจจะใช้ Ctrl+F ค้นหาคำว่า "background"

===========================================


body {
background:$bgcolor;
margin:0; color:$textcolor; font:x-small Georgia Serif; font-size/* */:/**/small; font-size: /**/small; text-align: center;

===========================================
3. แทนค่าด้วย Code ดังต่อไปนี้


body {

background:$bgcolor;background-image:url(direct link);background-position: center; background-repeat:no-repeat; background-attachment: fixed;

margin:0; color:$textcolor; font:x-small Georgia Serif; font-size/* */:/**/small; font-size: /**/small; text-align: center;

4. จากนั้นนำ Link ที่ได้จากการอัพโหลดจาก http://www.photobucket.com เข้าแทนที่ใน (direct Link) ก็จะได้เป็นรูปแบบดังนี้

==============================================================


body {

background:$bgcolor;background-image:url(http://i939.photobucket.com/albums/ad239/meomee/Background-Blogger-udate-png.png);background-position: center; background-repeat:no-repeat; background-attachment: fixed;

margin:0; color:$textcolor; font:x-small Georgia Serif; font-size/* */:/**/small; font-size: /**/small; text-align: center;

==============================================================

5.จากนั้นให้คลิก Preview เพื่อดูภาพ background ที่เราสร้าง
6.เมื่อทดสอบผลเป็นไปตามแผนแล้วให้คลิก Save Template

แสดงผลได้ดังนี้ค่ะ

(คลิกที่นี่ดูภาพขนาดใหญ่)

ข้อมูลอ้างอิง นำมาจากต้นฉบับที่นี่ค่ะ
http://teresabelle.blogspot.com/2009/01/add-your-own-background-video.html

ตัดต่อวีดีโอง่ายๆ ด้วย Windows Movie Maker

Download::คู่มือการตัดต่ออย่างละเอียด

หลายๆ ท่านคงไม่รู้ว่า Windows ของเราก็มีโปรแกรมตัดต่อวีดีโอด้วยเหมือนกัน แถมใช้งานง่ายกว่าโปรแกรมตัดต่อวีดีโอทั่วๆไปอีกตังหาก ถึงลูกเล่นจะไม่มากเท่ากับโปรแกรมตัดต่อวีดีโอตัวอื่นๆ ก็ตาม แต่ เมื่อเทียบกับขนาดของไฟล์ที่มีขนาดเล็ก ประสิทธิภาพ และการใช้งานที่ง่ายไม่ยุ่งยาก ก็ถือว่าเป็นโปรแกรมที่น่าใช้งานตัวนึงเลยทีเดียว
โปรแกรมจะอยู่ที่ Start --> All Program --> Accessories --> Entertainment --> Windows Movie Maker

หากใครไม่มีก็สามารถไปดาวน์โหลดได้ที่นี่ Windows Movie Maker 2.0

การใช้โปรแกรม Windows Movie Maker

1. เข้าไปที่ Manu Start
2. เลือกไปที่ Program File
3. เลือกไปที่โปรแกรม Windows Movie Maker

เมื่อเข้าสู่โปรแกรม Windows Movie Maker จะปรากฏหน้าจอดังนี้

4. เลือกภาพที่ต้องการจะตัดต่อ โดยเลือกที่ Manu Import Pictures
5. เลือกไปยัง File ที่จัดเก็บรูปภาพไว้ ตัวอย่างเช่นเก็บรูปภาพที่ต้องการจะตัดต่อไว้ที่ไดร์ D ให้เลือก ไดร์ D ตรง Look in
6. จะปรากฏ File ต่างๆ ที่จัดเก็บไว้ไดร์ D
7. เลือก File รูปภาพที่ต้องการตัดต่อ
8. เลือก Import

หลังจากที่เลือก Import จากข้อ 8 จะปรากฏรูปภาพที่เลือกบนหน้าจอดังนี้

9. จากนั้นให้เลือกภาพที่ต้องการตัดต่อมาว่างที่ Show storyboard โดยรูปภาพที่ต้องการตัดต่อนั้นให้วางตรงช่อง Video โดยการใช้เม้าล์คลิกแช่ไว้ตรงรูปภาพที่ต้องการแล้วลากมาตรงช่อง Video ตัวอย่างดังภาพต่อไปนี้

10. วิธีการเพิ่ม Video Effects ในภาพที่ต้องการตัดต่อ โดยการคลิกเม้าด้านซ้ายมือตรงภาพที่เลือกที่จะตัดต่อ จะมี Manu ปรากฎขึ้นให้เลือกจากนั้นให้เลือก Video Effects ดังภาพต่อไปนั้

11. หลังจากที่เลือก Video Effects บนหน้าจอจะโชว์ Effects ให้เลือก คลิกเลือก Effects ที่ต้องการ แล้วกด Add ตอบ OK ดังภาพต่อไปนี้

12. วิธีการใส่ Video Transitions ระหว่างภาพที่ต้องการตัดต่อ โดยการเลือกที่ Video Transitions บนหน้าจอ ดังนี้
]
13. จากนั้นหน้าจอจะปรากฎ Transitions ให้เลือก เลือก Transitions ที่ต้องการ ให้เม้าล์คลิกแช่ตรง Transitions ที่ต้องการแล้วลากไปวางระหว่างภาพที่จะตัดต่อ ดังภาพต่อไปนี้

14. การ Import audio or music (การลงเพลง) โดยการการเลือกไปที่ Manu Import audio or music จากนั้น เลือก ไดร์ที่จัดเก็บFile เพลง ตรง Lock In เลือก File เพลงที่ต้องการแล้วเลือก Import ดังภาพต่อไปนี้

หลังจาก Import audio or music แล้วจะปรากฎหน้าจอดังนี้

15. ใช้เม้าส์คลิกลากเพลงที่ต้องการมาวางตรงช่อง Audio Music ดังภาพต่อไปนี้

16. วิธีการแทรกข้อความบนภาพที่ต้องการตัดต่อโดยการ เลือกที่ Manu titles or cardits ดังนี้

จากนั้นหน้าจอจะปรากฏรูปแบบให้เลือก ให้เลือกรูปแบบตามที่ต้องการ เช่น เลือกรูปแบบ Title on the selected clip ดังนี้

จากนั้นพิมพ์ข้อความที่ต้องการแทรกลงบนภาพที่ต้องการตัดต่อ แล้วไปที่ Manu edit title text เลือกรูปแบบการโชว์ข้อความ ดังนี้

จากนั้นให้เลือกไปที่ Manu Change the text font and color เพื่อกำหนด แบบข้อความ / แบบตัวอักษร / ขนาดตัวอักษร / สีตัวอักษร ที่ต้องการแทรกลงในภาพที่ตัดต่อ

ขอขอบพระคุณ : http://www.dangdd.com/threads/windows-movie-maker.23426/

วันที่ : 2 กรกฎาคม พ.ศ 2556

การเขียนเว็บเพจด้วยภาษา HTML

วิธีที่ใช้ในการสร้างเว็บเพจ

ปัจจุบัน มีโปรแกรมสำเร็จรูปที่ช่วยในการสร้างเว็บเพจเกิดขึ้นอย่างมากมาย ทำให้ผู้ใช้ธรรมดาๆ ที่ไม่รู้เรื่องของการเขียนโปรแกรมก็สามารถสร้างเว็บเพจของตัวเองได้แล้ว การสร้างเว็บเพจในปัจจุบันสามารถทำได้ 2 วิธีคือ

1. สร้างขึ้นด้วยตนเอง โดยการใช้คำสั่งต่างๆ ของภาษา HTML แล้วสั่งงานผ่านทางโปรแกรม Text Editor เช่น Notepad และ Wordpad

ภาพที่ 1 -1 โปรแกรม notepad (ตัวอย่างของโปรแกรมที่เป็น Text Editor)

2. สร้างจากโปรแกรมสำเร็จรูป (Application) ทั่วไป โดยใช้โปรแกรมต่างๆ ที่มีความสามารถในการสร้างเว็บเพจ ซึ่งปัจจุบันมีให้เลือกใช้อย่างมากมาย เช่น Microsoft Frontpage, Macromedia Dreamweaver หรือแม้แต่โปรแกรม Microsoft Office ก็สามารถสร้างเว็บเพจได้ ผู้ที่ใช้โปรแกรมสำเร็จรูปพวกนี้ไม่จำเป็นต้องรู้คำสั่งต่างๆ ของภาษา HTML ให้ยุ่งยากเลย เพราะโปรแกรมเหล่านี้จะทำการเปลี่ยนข้อมูลต่างๆ ที่ทำไว้ให้เป็นภาษา HTML โดยอัตโนมัติ

ภาพที่ 1-2 โปรแกรม Macromedia Dreamweaver (ตัวอย่างของโปรแกรมสำเร็จรูป)

top

รู้จักกับภาษา HTML

ภาษา HTML (Hyper Text Markup Language) เป็นภาษาแรกที่ใช้ในการเขียนโปรแกรม เพื่อให้ข้อมูลที่เขียนไปแสดงผลบนเครือข่ายอินเทอร์เน็ตในลักษณะของข้อความ รูปภาพ เสียง และภาพเคลื่อนไหวต่างๆ

ภาษา HTML เป็นภาษาที่ง่ายต่อการเรียนรู้ สามารถกำหนดรูปแบบและโครงสร้างได้ง่าย ทำให้ได้รับความนิยมและมีการพัฒนาอย่างต่อเนื่องเพื่อให้ใช้งานง่ายขึ้น และตอบสนองต่องานด้านกราฟฟิกมากยิ่งขึ้น ซึ่งในปัจจุบันโปรแกรมภาษา HTML รุ่นใหม่ๆ มีข้อดีต่างๆ เพิ่มขึ้นอย่างมากมาย เช่น

- สามารถแสดงผลบนเว็บเบราเซอร์ทุกตัวที่สนับสนุน HTML เช่น Microsoft Internet Explorer (I.E.), Netscape Navigator และ American Online เป็นต้น

- HTML ที่ถูกบันทึกใน Text Editor จะมีชนิดไฟล์เป็น .htm สำหรับระบบปฏิบัติการ DOS และจะมีชนิดไฟล์เป็น .html หรือ .htm ในระบบปฏิบัติการ Windows หรือ ระบบปฏิบัติการ Linux

- สามารถใช้งานร่วมกับโปรแกรมสำเร็จรูปที่ใช้สำหรับสร้างเว็บเพจทั่วไปได้ง่าย และไฟล์ที่ได้จะมีขนาดเล็ก เช่น เมื่อเขียนโปรแกรม HTMl จาก Notepad แล้วสามารถนำไปเปิดแก้ไขหรือตกแต่งเพิ่มเติมในโปรแกรม FrontPage หรือ Dreamweaver และโปรแกรมอื่นๆ ได้อย่างสะดวกและรวดเร็ว

top

หลักการสร้างเว็บเพจด้วยตนเองโดยการใช้ภาษา HTML

การจะสร้างเว็บเพจด้วยตนเองโดยใช้ภาษา HTML ได้นั้น จะต้องมีเครื่องมือที่ใช้ในการสร้างเว็บเพจอยู่ 2 ประเทภคือ Text Editor และ Web Browser

1. Text Editor คือ โปรแกรมต่างๆ ที่ใช้ในการกำหนดข้อความ และรูปแบบคำสั่งต่างๆ ของภาษา HTML ซึ่งปัจจุบันผู้เขียนโปรแกรมส่วนใหญ่จะใช้โปรแกรม Notepad ในการเขียนโปรแกรม HTML เป็นหลัก

ภาพที่ 2-1 โปรแกรม notepad

วิธีการเรียกใช้โปรแกรม Notepad
ไปที่เมนู Start - - > Program - - > Accessories - - > Notepad

2. Web Browser คือ ส่วนที่ใช้สำหรับแสดงผลลัพธ์ของเอกสารที่เขียนด้วยภาษา HTML เหมือนกับการคอมไพล์ (Compiled) หรือ รัน (Run) โปรแกรมในภาษาทางคอมพิวเตอร์ทั่วๆ ไป ตัวอย่างของเว็บบราวเซอร์ที่นิยมใช้ ได้แก่ Internet Explorer และ Netscape Navigator

ภาพที่ 2-2 โปรแกรม Internet Explorer (I.E.)

วิธีการเรียกใช้โปรแกรม Internet Explorer
วิธีที่ 1 ไปที่เมนู Start - - > Program - - > Internet Explorer

วิธีที่ 2 ไปที่ Desktop - - > Internet Explorer

ขอขอบพระคุณ : ครูชณิชา เพชรปฐมชล cha_ni_cha@hotmail.com
: โรงเรียนชลกันยานุกูล www.chonkanya.ac.th
วันที่ : 3 กรกฎาคม พ.ศ 2556