| การเขียนโฮมเพจ หรือ การเขียนเว็บเพจ เบื้องต้น | |
|
บทเรียนหลัก
1. สอน Dreamweaver 2. สอน Graphic Application 3. สอน Java Script + แผนสอนเขียนเว็บ htm 49-05-02 + แผนสอนเขียนเว็บ txt 49-05-02 บทเรียนเสริม 1. สอนเขียน HTML (ใหม่ 12 Hr) 2. สอนเขียน HTML (เก่า) 3. Webserver Setup 4. PhotoShop 5. Flash by SwishMax 6. มาตรฐาน RGB 7. การใช้ Template 8. Programming 9. Java Script 10. โฆษณาเว็บไซต์ 11. จดโดเมน และเว็บโฮสติ้ง 12. website49.ppt (Health) 13. htmlslide49.zip (3 HTML + Thainame.net) ตัวอย่าง Java Script 1. นาฬิการอบ Mouse (ใต้ /body) 2. เมนูแบบ Dynamic (2.15) 3. ปฏิทินสวย (5.6) อื่น ๆ + สอนเขียน HTML 7 บทเรียน + แผนสอนเขียนเว็บ (doc) 49-05-02 + แผนสอนเขียนเว็บ (txt) 49-05-02 + แผนสอนเขียนเว็บ (doc) 48-05-12 + แผนสอนเขียนเว็บ (htm) 48-05-12 + DreamWeaver7 Screen 
Dream 8 (new) Dream 7 = Dream MX 2004 Dream 6 = Dream MX 
|
|
|
 |
1.1 สาระการเรียนรู้ : การติดตั้ง Dream
+ ติดตั้ง Macromedia Dreamweaver MX แบบฝึกหัด + ฝึกติดตั้งโปรแกรม Macromedia Dreamweaver MX |
 |
1.2 สาระการเรียนรู้ : การเรียกใช้ Dream
+ เปิดโปรแกรม Macromedia Dreamweaver MX แบบฝึกหัด + ฝึกเปิด Macromedia Dreamweaver MX |
 |
1.3 สาระการเรียนรู้ : การเปิดใช้ Dream ครั้งแรก
+ เลือก Workspace สำหรับทำงาน แบบฝึกหัด + ฝึกเปิด Macromedia Dreamweaver MX |
 |
1.4 สาระการเรียนรู้ : แนะนำส่วนต่าง ๆ ของ Dream
+ เรียนรู้ส่วนต่าง ๆ ของโปรแกรม แบบฝึกหัด + ฝึกเลือก Show/Hide ส่วนต่าง ๆ + ฝึกล้าง HTML ที่ไม่จำเป็น |
 |
1.5 สาระการเรียนรู้ : การแก้ปัญหาภาษาไทยใน Dream
+ ศึกษาการแก้ปัญหาภาษาไทยแบบ Manual + แนะนำการแก้ปัญหาด้วยโปรแกรม dream_thai_mx.exe จาก thaiware.com แบบฝึกหัด + ฝึกแก้ปัญหาภาษาไทยทั้ง 2 วิธี |
 |
1.6 สาระการเรียนรู้ : การเลือก Font ภาษาไทยใน Dream
+ ศึกษาการกำหนด Font ใน Preference + ศึกษาการกำหนด Font ให้กับตัวอักษร แบบฝึกหัด + ฝึกกำหนด Font ใน Preference + ฝึกกำหนด Font อย่างน้อย 3 Fonts สำหรับ 3 บรรทัด |
 |
1.7 สาระการเรียนรู้ : การกำหนดรูปแบบตัวอักษร
+ ศึกษาภาพที่เตรียมให้ใช้ + ศึกษาการใช้ตัวอักษรแบบต่าง ๆ แบบฝึกหัด + ฝึกใช้ตัวอักษรแบบต่าง ๆ + ฝึกตรวจสอบขนาดภาพ และการเก็บภาพเป็นที่เป็นทาง |
 |
1.8 สาระการเรียนรู้ : การแทรกภาพ
+ ศึกษาการแทรกภาพใน Dream โดยใช้ภาพที่เตรียมไว้แล้ว แบบฝึกหัด [ _elephant.jpg ] + ฝึกใช้ภาพหลายภาพในเว็บเพจ |
 |
1.9 สาระการเรียนรู้ : การสร้างลิงค์
+ ศึกษาการใส่ลิงค์ใน Dream + วางแผนสร้าง x2.htm จึงสร้างลิงค์ใน x1.htm ให้เชื่อมต่อกับ x2.htm แบบฝึกหัด + ฝึกใส่ลิงค์แบบต่าง ๆ |
 |
1.10 สาระการเรียนรู้ : การสร้างลิงค์สำหรับหลายเว็บเพจ
+ สร้างเว็บเพจชื่อ x1.htm + สร้างเว็บเพจชื่อ x2.htm + ใส่ลิงค์ x1.htm ไว้ในแฟ้ม x2.htm + ศึกษาความหมายของ target ( _self _blank _top thailand ) แบบฝึกหัด + ฝึกใส่ลิงค์ในเว็บเพจต่าง ๆ |
 |
1.11 สาระการเรียนรู้ : การสร้างลิงค์ใน index.html
+ สร้างเว็บเพจ index.html + สร้างลิงค์ต่าง ๆ ใน index.html แบบฝึกหัด + ฝึกสร้างความสัมพันธ์ระหว่างเว็บเพจต่าง ๆ |
 |
1.12 สาระการเรียนรู้ : การเปิด index.html ใน Internet Explorer
+ ศึกษาการเปิดเว็บเพจใน Internet Explorer + ศึกษาการกด F5 หรือ Ctrl-F5 + รวบรวมแฟ้ม ประกอบด้วย index.html x1.htm x2.htm และ _elephant.jpg + ศึกษาการนำผลงานไปเผยแพร่ เช่น บริการจากเครื่องของตนเอง หรือ Upload ไปไว้ในอินเทอร์เน็ต แบบฝึกหัด + ฝึกเปิดเว็บเพจด้วย Internet Explorer + ฝึกเผยแพร่ผลงาน |
 |
1.13 สาระการเรียนรู้ : การค้นหาข้อมูลใน Google.com
+ ศึกษาการสืบค้นจาก google.com + ศึกษาการสืบค้นจาก alltheweb.com + ศึกษาการสืบค้นจาก yahoo.com แบบฝึกหัด + ฝึกค้นหาภาพจากอินเทอร์เน็ต + ฝึกค้นหาวีดีโอจากอินเทอร์เน็ต |
 |
1.14 สาระการเรียนรู้ : การนำภาพจากอินเทอร์เน็ตมาไว้ในเครื่อง
+ ศึกษาการนำแฟ้มภาพ ไปเก็บในห้องที่เหมาะสม + ศึกษาความแตกต่างของภาพ และภาพพื้น แบบฝึกหัด + ฝึกคัดลอกภาพจากอินเทอร์เน็ต |
 |
1.15 สาระการเรียนรู้ : การคัดลอกเว็บเพจจากอินเทอร์เน็ต
+ เปิดเว็บเพจ http://www.thaiall.com/malee + ศึกษาการ Save As .. เว็บเพจ (Web Page, complete) เป็น malee.htm + ศึกษาแฟ้ม 4 แฟ้มที่มีในห้อง malee_files ซึ่งถูกสร้างอัตโนมัติ + ศึกษาการ View, Source แล้ว Save As (Web Page, HTML only) + ศึกษาการแก้ไขแฟ้ม ที่ได้จากอินเทอร์เน็ต แบบฝึกหัด + ฝึกนำแฟ้มที่จัดเก็บไว้ มาแก้ไข |
 |
1.16 สาระการเรียนรู้ : การกำหนด meta และแทรกภาพจากอินเทอร์เน็ต
+ ศึกษาความสำคัญของ Meta Tag + ศึกษาการเขียน charset + ศึกษาการเขียน keywords + ศึกษาการเขียน description แบบฝึกหัด + ฝึกเขียนเว็บเพจที่มี Meta Tag + ตัวอย่าง HTML Code |
 |
1.17 สาระการเรียนรู้ : การสร้างตาราง
+ ศึกษาการสร้างตาราง + ศึกษาการสร้างตารางหลายหลัก + ศึกษาการสร้างตารางหลายบรรทัด แบบฝึกหัด + ฝึกสร้างตาราง 3 หลัก + ตัวอย่าง HTML Code |
 |
1.18 สาระการเรียนรู้ : การสร้างตารางซ้อนตาราง
+ ศึกษาการสร้างตารางหลายแถว + ศึกษาการสร้างตารางหลายหลัก แบบฝึกหัด + ฝึกสร้างตารางซ้อนในตาราง + ตัวอย่าง HTML Code |
 |
1.19 สาระการเรียนรู้ : การสร้าง Layer
+ ศึกษาการสร้างแผ่นงาน ด้วยคำสั่ง DIV + ศึกษาการสร้างแผ่นงานหลายแผ่น และกำหนด z-index แบบฝึกหัด [ _elephant.jpg , ตัวอย่าง ] + ฝึกสร้างแผ่นงาน ซ้อนแผ่นงาน + ตัวอย่าง HTML Code |
 |
1.20 สาระการเรียนรู้ : การแทรกภาพ และการแก้ไข Code
+ ศึกษาการแทรกภาพ และการเปลี่ยน Code หลังจัดเก็บ ใน Dreamweaver แบบฝึกหัด + ฝึกเขียน Code แทรกภาพ + ตัวอย่าง HTML Code |
 |
1.21 สาระการเรียนรู้ : การสร้างเฟรม
+ ศึกษาการใช้ frame แบบต่าง ๆ แบบฝึกหัด + ฝึกเขียน Code เรียกใช้เฟรม + ตัวอย่าง HTML Code |
 |
1.22 สาระการเรียนรู้ : การสร้าง iframe
+ ศึกษาการใช้ iframe เรียกใช้เว็บเพจของตนเอง + ศึกษาการใช้ iframe เรียกใช้เว็บเพจจากอินเทอร์เน็ต แบบฝึกหัด + ฝึกใช้ iframe เรียกเว็บเพจจากอินเทอร์เน็ต + ตัวอย่าง HTML Code |
|
 |
2.1 สาระการเรียนรู้ : การลบ Background ด้วย PhotoShop
+ เปิดโปรแกรม Photoshop + Open ภาพ และเปลี่ยนประเภทของ Layer จาก Background เป็น Layer 0 + เลือกลบ Background ออกให้หมด แบบฝึกหัด [ _sing.jpg , _singn.gif , _singn.jpg ] + ฝึกลบ Background + ฝึกเปลี่ยนสี cube.jpg |
 |
2.2 สาระการเรียนรู้ : การจัดเก็บเป็น .gif
+ ศึกษาการจัดเก็บภาพ ให้เป็นภาพโปร่ง + จัดเก็บภาพนี้เป็น _singn.jpg + จัดเก็บภาพนี้เป็น _singn.gif แบบฝึกหัด + ฝึกจัดเก็บภาพให้เป็นภาพโปร่ง |
 |
2.3 สาระการเรียนรู้ : การนำภาพมาเรียงต่อกันในเว็บเพจ
+ เปิด Notepad แล้วพิมพ์คำสั่ง HTML เพื่อแสดงภาพ 4 ภาพ + ภาพแรก เป็นต้นฉบับ + ภาพที่สอง เป็น .gif แต่อยู่บนพื้นตารางสีเหลือง + ภาพที่สาม เป็น .gif แต่อยู่บนพื้นตารางสีน้ำเงิน + ภาพที่สอง เป็น .jpg แต่อยู่บนพื้นตารางสีแดง แบบฝึกหัด [ ตัวอย่าง ] + ฝึกเขียนเว็บเพจดังกล่าว แสดง 4 ภาพ + ตัวอย่าง HTML Code |
 |
2.4 สาระการเรียนรู้ : การลบ Background ด้วย MS Paint
+ เปิดโปรแกรมโดยกด Start, Run แล้วพิมพ์ mspaint ในช่อง open ตามด้วยกดปุ่ม Enter + ศึกษาการใช้ MS Paint เปิดแฟ้ม .jpg + ศึกษาการใช้ยางลบ ลบ Background แบบฝึกหัด [ _toon.jpg ] + ฝึกใช้ Paint ลบ Background |
 |
2.5 สาระการเรียนรู้ : การนำภาพจาก Desktop มาใช้
+ กด Print Screen หน้า Desktop แล้ว Paste ไปใน MSPaint + ตัดให้เหลือเฉพาะเครื่องคอมพิวเตอร์ โดยใช้เครื่องมือ Select + จัดเก็บเป็น .jpg หรือ .gif เพื่อนำไปใช้ในเว็บเพจ แบบฝึกหัด + ฝึดตัดภาพอื่น ๆ จากโปรแกรม Windows |
 |
2.6 สาระการเรียนรู้ : การสร้าง swf ด้วย Swish
+ ศึกษาการ Add Effect ตัวอักษร Zoom In แล้ว Export เป็น swf + ศึกษาการ Add Effect ภาพ แบบ Zoom In, Zoom Out + ศึกษาการ Add Effect ภาพ แบบ Move, Place และ Remove + กำหนดช่วงเวลาเป็น 10 วินาที แบบฝึกหัด [ _cindy.jpg , Download Program ] + ฝึกเลือก Effect แบบอื่น ๆ + ตัวอย่าง HTML Code |
 |
2.7 สาระการเรียนรู้ : การสร้าง Gallery ด้วย IrfanView
+ ศึกษาการ Retouch ภาพด้วย IrfanView + ศึกษา Rename, Conversion และ Slideshow + ศึกษาการสร้าง Gallery และ Thumbnail (File, Options, Select all) + ขณะ Save เป็น HTML File ให้เลือก Write relative path names แบบฝึกหัด [ Download Program] + ฝึก Retouch ภาพ + ฝึกสร้าง Gallery (นำ Thumbnails.html มาปรับปรุง) |
|
 |
3.1 สาระการเรียนรู้ : การเขียน Javascript ใน Body
+ ความรู้เบื้องต้นเกี่ยวกับ Javascript + เริ่มใช้ notepad เขียน JavaScript จาก Start, Run + การจัดเก็บแฟ้ม ชื่อ "c:\x.htm" + เปิดเว็บเพจ ชื่อ "c:\x.htm" ด้วย Internet Explorer + ศึกษาการเขียน HTML ร่วมกับ Javascript + ศึกษาคำสั่ง document.write แบบฝึกหัด [ ตัวอย่าง ] + ให้เปลี่ยนคำว่า test เป็นคำว่า thai + ให้เพิ่มบรรทัด document.write เป็น 3 บรรทัด |
 |
3.2 สาระการเรียนรู้ : การเขียน Javascript ใน Header
+ ศึกษาการเขียน Javascript ใน Head + ศึกษาการเรียกใช้ Function ที่ประกาศใน Head แบบฝึกหัด + ให้ copy function และเปลี่ยนชื่อเป็น yy + ให้ เรียกใช้ yy ในส่วนของ body ร่วมกับ xx |
 |
3.3 สาระการเรียนรู้ : การเรียก Javascript จาก External File
+ ศึกษาสร้างแฟ้มนามสกุล .js + ศึกษาการเรียกใช้แฟ้ม .js + ศึกษาการเรียกใช้ฟังก์ชันที่อยู่ในแฟ้ม .js แบบฝึกหัด + ให้ copy xx.js เป็น yy.js และเรียกใช้ใน yy.htm + แก้ไขการทำงานของฟังก์ชันใน yy.js และเรียกใช้ใน yy.htm + ตัวอย่าง HTML Code |
 |
3.4 สาระการเรียนรู้ : การใช้ Javascript กับ Button หรือ Link
+ ศึกษาการใช้ javascript ในปุ่ม button + ศึกษาการใช้ javascript ใน Link + ศึกษาคำสั่ง history.back() + ศึกษาคำสั่ง window.print() + ศึกษาคำสั่ง window.close() แบบฝึกหัด [ ตัวอย่าง ] + ฝึกใช้คำสั่งตามสาระ + ฝึกใช้คำสั่ง window.open('http://www.thaiall.com') + ฝึกใช้คำสั่ง window.open('http://www.thaiabc.com','_self') + อ่านจาก http://www.javascripter.net/faq/openinga.htm |
 |
3.5 สาระการเรียนรู้ : การใช้ Javascript กับ Form
+ ศึกษาการใช้ form, select และ onclick + ศึกษาคำสั่ง window.location + ศึกษาบริการสืบค้นจากลิสบล็อก ( List Box Search Engine ) แบบฝึกหัด [ ตัวอย่าง ] + ฝึกเพิ่ม URL ใน select + ฝึกใช้คำสั่ง window.open แทน window.location |
 |
3.6 สาระการเรียนรู้ : การ Download Script และแก้ไข
+ ศึกษาตัวอย่างจาก http://www.thaiall.com/java + ศึกษานาฬิกาตามเมาส์ (Clock on Mouse) [ ตัวอย่าง ] + ศึกษาการทำปฏิทินสวย (Calendar) [ ตัวอย่าง ] + ศึกษาเมนูแบบด็อปดาวน์ (Drop Down Menu) [ ตัวอย่าง ] + ศึกษาตัวอย่างใช้งานจริงของ www.lampang.go.th แบบฝึกหัด [ ตัวอย่าง ] + ฝึกนำ นาฬิกาตามเมาส์ (Clock on Mouse) มาใช้ + ฝึกนำ เมนูแบบด็อปดาวน์ (Drop Down Menu) มาใช้ + ฝึกนำ ปฏิทินสวย (Calendar) มาใช้ + ฝึกนำ Script ที่เตรียมให้มารวมกันในเว็บเพจเดียว + ฝึกนำ Script อื่นจาก http://www.thaiall.com/java มาใช้ + ตัวอย่าง HTML Code |
 |
3.7 สาระการเรียนรู้ : การสุ่มภาพมาแสดงในเว็บเพจ
+ ศึกษาการฟังก์ชัน Date() และ method ภายใน + ศึกษาการใช้ % เพื่อหาเศษจากการหาร + ศึกษาการประกาศ และใช้ตัวแปรอาร์เรย์ แบบฝึกหัด [ ตัวอย่าง ] + ฝึกสุ่มภาพที่หาได้จากอินเทอร์เน็ตมาแสดง เช่น thaiall.com/actress + ฝึกสุ่มกำหนดสีพื้น (body bgcolor=red หรือ body bgcolor=blue) + ตัวอย่าง HTML Code |
tagtag.com x.wml <?xml version="1.0"?> <wml> <card id="HTML" title="first"> <p>Hello</p> </card> </wml> |
