ปรับปรุง : 2549-05-27 แนวการสอน 8-10 พฤษภาคม 2549 1. ถ่ายภาพ เพื่อใช้ประกอบการอบรม กับน้องสงวน นอกห้อง 2. วิทยากร และผู้ช่วยมี 5 คน บุรินทร์ พิมาย สมพบ สงวน เจน http://thaiall.com/update.htm http://thaiall.com/me/burin.htm 3. ขอพื้นที่ฟรีจาก WEBLAMPANG.COM เช่น http://www.weblampang.com/oho 4. เอกสารประกอบที่ http://yn1.yonok.ac.th/html http://thaiall.com/html/html.htm http://www.weblampang.com/html http://thaiall.com/php/training49.htm 5. แนะนำ วิทยากร Sheet Website และหลักสูตรหน้า 6. พิมพ์ชื่อตนเอง 3 บรรทัด ๆ ละสี 7. Right Click บน _elephant.jpg เลือก Save Target ไปไว้ที่ c:\ 8. Save เป็น x1.htm ไว้ที่ c:\ 9. File,New,Create พิมพ์ประวัตินิดหน่อย แล้วเก็บเป็น x2.htm สร้างจุด link ว่า go name ไป x1.htm 10. เปิด Internet Explorer แล้วพิมพ์ c:\index.html ในช่อง Address 11. เปิด www.weblampang.com login แล้วส่ง 4 แฟ้มเข้าไป .. ผมรอดู www.weblampang.com/disaster 12. แจกภาพ 959 ที่ lovelampang.com/nw 13. สามารถเขียนในเครื่องเรา แล้วส่งเข้า server ต่าง ๆ เช่น thai.net thcity.com geocities.com 14. ค้นข้อมูลภาพ เช่น google.com alltheweb.com yahoo.com 15. copy ด้วย save picture as กำหนดชื่อเป็นรูปทักษิณเป็น a.jpg ใส่ลงไปใน index.html 16. http://thaiall.com/malee Copy URL ของภาพ อ.มาลี ใส่ใน index.html <img src=http://www.sut.ac.th/sut/admin/picture/88i.jpg> ทดสอบด้วยการกด F12 17. copy มาได้ 2 วิธี จาก http://thaiall.com/malee เป็น malee.htm และ malee_files เป็น maleeb.htm ให้เปลี่ยนสีพื้นของตาราง และสีตัวอักษร 18. ให้ส่ง malee.htm เข้าห้องตนเอง - เปิด weblampang.com แล้ว Login - ส่ง malee.htm เข้า weblampang.com - สร้างห้อง malee_files - ส่งอีก 4 แฟ้มเข้าห้อง malee_files - ทดสอบ weblampang.com/disaster/malee.htm 19. การประชาสัมพันธ์เว็บไซต์ http://www.thaiall.com/article/promote.htm 20. รูปทุกคนที่ http://www.yonok.ac.th/training49 21. สร้างตารางด้วย Dream - ตาราง 3 rows 3 cols - ตาราง 2 rows 2 cols มีสีพื้น cell ละ สี - ตาราง 1 rows 1 cols กว้าง 100% พื้นแดง - ตาราง 1 rows 1 cols กว้าง 50% center พื้นน้ำเงิน - ตาราง 2 cols 150+630=780 ไม่มีขอบ พื้นเหลืองอ่อน ตรงกลาง 22. สร้างตารางด้วย HTML - เปิด http://yn1.yonok.ac.th/html - เปิด notepad - copy ตัวอย่างจาก 1.17 ลงไป แล้ว Save เป็น x101.htm - เปิดแฟ้ม x101.htm ใน c:\ ด้วย Internet Explorer - copy ตัวอย่างจาก 1.18 ลงไป แล้ว Save เป็น x101.htm - เปิดดูอีกรอบ 23. นำ 1.18 มาแก้ไข - ให้มีแบบสีเหลืองทั้ง 4 ช่อง - เปลี่ยนสีแต่ละช่องไม่ให้เหมือนกัน 24. นำ 1.19 มาแก้ไข ชุดที่ 2 มาแทน x101.htm - ทดสอบให้ผ่าน _elephant.jpg - 4 แผ่นเหลื่อมกัน มีสีพื้นต่างกัน คนละภาพ - มาตรฐาน RGB (Red Green Blue) - #440000 แดง - #00ff00 เขียว - #0000ff น้ำเงิน 25. copy layer จาก x101.htm ไปเพิ่มใน index.html - เพิ่ม counter ตามตัวอย่าง 1.20 - แล้ว Upload index.html ไปที่ weblampang.com 26. ดูตัวอย่าง frame ที่ www.thaiall.com/cartoon - สร้าง f.htm เรียก fl.htm และ fr.htm 200,* <frameset cols="200,*"> <frame src=fl.htm> <frame src=fr.htm name=r> </frameset> - fl.htm มีเมนูเรียก index.html และ x1.htm <body bgcolor=yellow> <a href=index.html target=r>main</a><br> <a href=x1.htm target=r>x1 page</a><br> - fr.htm มีคำว่ายินดีต้อนรับ <body bgcolor=#ddffdd> wow wow wow oho - เปิด f.htm ด้วย Internet Explorer 27. แก้ fl.htm ให้แสดงภาพเล็ก แล้วแสดงภาพใหญ่ทางขวา หลายภาพ เช่น <a href=x.jpg target=r><img src=xt.jpg></a> รูปทุกคนที่ http://www.yonok.ac.th/training49 28. ดู www.lampang.net - http://www.thaiabc.com/tourlampang/main.htm - เปิด index.html แล้วพิมพ์ iframe เข้าไป <iframe src='' width=500 height=600> </iframe> 29. ดู http://thaiall.com/article/header.htm - copy code จาก Expert Script มาใส่ใน index.html - upload แล้วทดสอบ 30. เปิด http://www.yonok.ac.th/training49 - เก็บภาพ thumbnail และ enlarge ใน C:\ สัก 3 คน - ใช้ Save Picture As และ Save Target As เช่น DSC02591_t.jpg และ DSC02591.jpg 31. เปิด Dream นำภาพ Thumbnail มาเป็น Background - ใน Dream เลือก File, Modify, Page Properties - สร้างตาราง 2 Cell กำหนดภาพพื้นให้แต่ละ Cell 32. เปิด Photoshop - เปิดภาพตนเอง หรือเพื่อน มา 1 ภาพ ได้ 2 วิธี - ดูขนาด 100 % โดย Double click ที่แว่นขยาย ลดด้วยกด alt + click - ลบ Background หรือเปลี่ยนชื่อ Background เป็น Layer - ลบพื้นด้วยไม้เท้าวิเศษ แล้ว Select, Similar + delete - Crop และ Transform - ต้องการภาพขนาด 100 * 150 ด้วย Image size - Canvas size 150 * 200 - New Layer และเทขาวเป็นพื้น - Blending Option เลือก Drop Shadow - Save As เป็น me1.jpg 33. ทบทวนเรื่องภาพโปร่ง - เปิดภาพด้วย Photoshop - ลบพื้น แล้ว Save for web เป็น me1.gif - เปิด Notepad ด้วย Start, Run, พิมพ์ Notepad - สร้างเว็บเพจ me1.htm ด้วย notepad เก็บใน c:\ <table> <td bgcolor=blue><img src=me1.gif height=50></td> <td bgcolor=red><img src=me1.gif></td> <td bgcolor=green><img src=me1.gif></td> </table> <img src=me2.jpg> 34. ใช้ภาพตนเอง 1 เป็น 4 ภาพใน 4 Layer - Crop, เปลี่ยน Background เป็น Layer - copy layer, canvas size, move layer, filter - ฝึกใช้ Filter ดูจาก http://www.thaiall.com/face/filter.htm 35. เปิด lovelampang.com/nw - Save view ในลำปางมาเป็น Background - ทำให้เหมือนท่านยืนอยู่ในวิวนั้น ร่วมกับเพื่อน - เช่น http://www.thaiabc.com/nw/nw0930.jpg - copy 3 ภาพมารวมกันในภาพเดียว แล้วลบให้เหลือที่ต้องการ 36. Start, run, พิมพ์ mspaint (jpg, gif และ png) - ตัดภาพเครื่องมือใน mspaint (Print Screen, Ctrl-V) - ไปเรียงลงมาใน webpage ชื่อ tool.htm <img src=tool1.gif> <br> <img src=tool2.gif> <br> <img src=tool3.gif> <br> 37. อีกวิธีในการ copy icon ด้วยตนเอง หรือจาก iconbazaar.com - print screen, paste - เลือก copy เฉพาะ icon - file, new, paste, save as 38. ดูตัวอย่าง http://www.thaiall.com/flash/indexo.html - ตัวอักษรไหวไปมา มีคำว่า welcome สีเหลืองบนพื้นสีดำ - insert text, พิมพ์ welcome แล้วลดขนาดให้พอดีกับเฟรม - click welcome ใน time line, add effect, fade in แล้ว play - ใส่แฟ้ม w.swf ลงไปใน w.htm ที่มีพื้นสีดำ <body bgcolor=black> <embed src=w.swf width=500 height=100 bgcolor="#000000"> </embed> 39. ทำเหมือนเดิม แต่ทำกับภาพ เก็บเป็น i.swf - เพิ่ม i.swf ใน w.htm 40. ดูตัวอย่าง http://www.thaiall.com/flash/gov.jpg - ดู 4.1 แล้วทำภาพไหล 41. เตรียมภาพ - สร้างห้องชื่อ photo ใน c:\ - เปิด http://www.yonok.ac.th/training49 - copy เฉพาะ enlarge ด้วย Right Click + Save Target as - มาไว้ใน photo นำมา 10 ภาพ - Right Click คำว่า Start เลือก explorer แล้วดูรายชื่อแฟ้มในห้อง photo 42. เปิด irfanview รุ่น 351 - crop ทุกภาพอย่างรวดเร็ว (เลือก, Ctrl+Y, S, Enter) - เข้า Explorer ลบภาพที่มีขนาดใหญ่กว่า ถ้ามี 2 ภาพเหมือนกัน - กด Ctrl ค้างไว้ แล้วใช้ mouse Click ภาพที่ต้องการลบ แล้วกด Del 43. ฝึกปรับปรุงภาพด้วย iview - enhance color, negative, effect - rename แบบกลุ่ม เช่น i001.jpg ถึง i020.jpg 44. thumbnail ของ iview 45. ทบทวน (อย่าลืม copy แฟ้มที่เกี่ยวข้องเข้าห้อง photo) - เปลี่ยนชื่อ Thumbnails.htm เป็น index.html - เปลี่ยนสีพื้นเป็นสีดำ - เพิ่ม flash welcome แทน title ของเดิม - เชื่อมต่อไปยัง x1.htm และ x2.htm - ใส่ภาพของตนเองที่โปร่งใส บนตารางที่มีสีพื้นต่างกัน - ใส่ icon ที่ท่านสร้างด้วยตนเอง ทั้ง 3 icon - บรรทัดสุดท้าย โดย ..... (สีขาว) - upload เข้าไปใน weblampang.com - ตัวอย่างดูได้จาก weblampang.com/html/photo.html 46. ทบทวน HTML - เปิด http://www.thaiall.com/html/html.htm - ศึกษา body, font, a href, img - ใส่ภาพพื้นดาว และ link ภาพ kyoko ไป thaiall.com ตาม c02 47. ทบทวน - copy _elephant.jpeg มาไว้ใน c:\ - copy พื้นดาวมาเป็น star.gif มาไว้ใน c:\ - เขียนตามตัวอย่างแล้ว save ชื่อ star.htm มาไว้ใน c:\ - ดูผลใน ie ด้วยการกด f12 - เพิ่มเรื่อง border, background ในการนำภาพมาใช้ - แฟนของเคียวโกะ http://www.thaiall.com/fanofkyoko - http://www.thaiall.com/php/training49.htm - http://www.thaiall.com/html/html.htm - http://www.thaiall.com/html/indexo.html - http://www.thainame.net/weblampang/html 48. พื้นฐานเว็บเซิร์ฟเวอร์ - เขียนไว้ในเครื่อง - ส่งเข้า weblampang.com - ทำเครื่องตัวเองเป็น webserver ใน intranet (thaiabc.com) PWS => IIS == ASP APACHE thaiabc4b.zip http://127.0.0.1 http://192.168.1.86 c:\thaiabc\apache\apache2\htdocs\index.php start,run,cmd or command และ ipconfig - ทำเครื่องตัวเองเป็น webserver ใน internet 49. พื้นฐาน javascript - http://www.thaiall.com/article/teachpro.htm - http://www.thaiall.com/html/indexo.html 50. ฝึกเขียน javascript - สร้างฟังก์ชัน yy เพื่อพิมพ์ bb - แล้วเรียกใช้ 3 ครั้งใน body - ผลลัพธ์คือ aabbbbbbcc 51. ฝึกเรียกจากข้างนอก - เขียน x.js - เรียกใช้ x.js มาใช้ใน x.htm <script src=x.js></script> <script language=javascript>xx();</script> - เรียกใช้แฟ้ม และเรียกใช้ฟังก์ชัน 52. ตัวอย่าง iframe จาก http://www.thaiall.com/article/header.htm <iframe src="http://www.radionewsprd.com/break1test.php" width=450 height=65> </iframe> เช่น tourlampang.com หรือ lampang.net <iframe src="http://www.thaiabc.com/tourlampang/main.htm" width=450 height=600> </iframe> 53. ตัวอย่างเรียกใช้ javascript <script type="text/javascript" src="http://www.norsorpor.com/news.php?category=1&n=15"> </script> 54. ให้สร้างเว็บเพจใหม่ชื่อ news.htm - เป็นตารางกว้าง 700 pixels มี 2 เซล (200,500) ตรงกลาง - cell ซ้ายมีพื้นเหลือง เซลขวาพื้นขาว มีพื้นของ body เป็นสีเทา - Save ให้เรียบร้อยแล้วพิมพ์ 2 บรรทัด หลัง </body> แล้วกด F12 <script src="http://www.lampang.go.th/navig/dmenu_array.js"></script> <script src="http://www.lampang.go.th/navig/dmenu.js"></script> <body bgcolor=gray> <table width=700 align=center> <td bgcolor=yellow width=200> </td> <td bgcolor=white> </td> </table> เปิด http://www.thaiall.com/html/indexo.html <script src="dmenulp_array.js"></script> <script src="dmenulp.js"></script> 55. เปลี่ยนสีใน style1 ของ dmenulp_array.js "ff0000", // Mouse Off Background Color "000000", // Mouse On Font Color "ff0000", // Mouse On Background Color - แล้วลบ 103 ถึง 107 ให้เหลือตัวเลือกหลัก 2 ตัวเลือก - แก้บรรทัดที่ 82 เป็น left แทน center 56. copy ปุ่ม back close จาก 3.4 มาใช้ใน news.htm - http://www.thaiall.com/java 57. เปิด dream แล้วเปิด news.htm - ใส่ dropdown menu - นาฬิกา - ปฏิทิน - สุ่มตัวเลข <body><script> var now = new Date(); var ran = (now.getMilliseconds() % 99); document.write(ran); </script></body> - สุ่มภาพมาแสดง <script> var now = new Date(); var ran = (now.getSeconds() % 4); var r = new Array(); r[0] = "http://www.thaiall.com/face/baby01.jpg"; r[1] = "http://www.thaiall.com/face/baby02.jpg"; r[2] = "http://www.thaiall.com/face/baby03.jpg"; r[3] = "http://www.thaiall.com/face/baby04.jpg"; document.write("<img src=" + r[ran] + ">"); </script> - หารูปจาก lovelampang.com/nw เฉพาะรูปเล็ก - tree menu จาก http://www.thaiall.com/java/javatree.htm - เปิดจาก http://www.thainame.net/weblampang/yourname เอกสารชุดนี้อยู่ที่ http://www.thainame.net/weblampang/html เอกสารชุดนี้อยู่ที่ http://www.weblampang.com/html - ใช้ Erase Tool ลบส่วนที่เหลือ