ปรับปรุง : 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 ลบส่วนที่เหลือ