|
วันเสาร์ที่ 17 ธันวาคม พ.ศ. 2554
ประโยชน์ของคอมพิวเตอร์
การทำ Flash เขียนหนังสือ
การทำ Flash เขียนหนังสือ
บทความนี้เหมาะำสำหรับ ผู้ที่จะทำ E-learning หรือ สอนการวาดรูป นะครับ ม่ะ!!! เริ่มทำกันเลยดีกว่าครับ
1. วาดภาพดินสอหรือปากกาเตรียมไว้ก่อนเลยครับ (หรือไม่ต้องการก็ไม่ต้องทำก็ได้นะครับ)
2. เปิดเอกสาร Flash เตรียมภาพขึ้นมา แนะนำให้ Frame rate ให้เป็น 25 ขึ้นไปนะครับ เพื่อความไหลลื่นของภาพ แต่มากไปก็ไม่ดีนะครับเพราะภาพจะเร็วเกินไป ผมใช้ 27 ครับ
3. พิมพ์อักษรหรือวาดภาพลงบนเอกสาร ผมใช้การพิมพ์ตัวอักษรนะครับ
3.1 สำหรับคนที่พิมพ์ตัวอักษรโดยเฉพาะครับให้ทำการ Break Apart โดยการไปที่ Modify > Break Apart หรือ กด Ctrl+B ก่อน สังเกตุว่าเมื่อทำการ Break Apartเสร็จแล้ว กรอบ สี่เหลี่ยมรอบตัวอักษรจะหายไปนะครับ
>>>
4. Insert Layer ขึ้น มาแล้ว ไปเลือกสี ที่ Colors ไม่ต้องสนใจว่าจะเป็นสีอะไรนะครับเพราะมันไม่เห็นแน่ๆ อยู่แล้ว แต่ควรเลือกสีที่ทำให้มองง่าย ในขั้นตอนการทำไม่ควรใช้สีเดียวกันกับ ตัวกอักษรหรือภาพ เพราะจะทำให้ งง เอง นะครับ
>>>
5. เตรียมเครื่องมือ 
Brush Tool (B) แล้ว ไปที่ Layer 1 Insert Frames ให้มันไกลๆ ไปก่อน ลองกะดู ว่ามันจะอยู่ใกล้ไกล แค่ไหนนะครับ จากนั้นไปที่ Layer 2Insert Frames ให้มันไกลๆเท่ากับ Layer 1 กลับกลับมาที่ Frames 1 กด Insert Key Frames 1 ครับแต้ม จุด Brush Tool 1 ครั้ง ทำแบบนี้ซ้ำๆกันไปเรื่อยๆ กับ อักษรหรือรูปภาพของคุณ
Brush Tool (B) แล้ว ไปที่ Layer 1 Insert Frames ให้มันไกลๆ ไปก่อน ลองกะดู ว่ามันจะอยู่ใกล้ไกล แค่ไหนนะครับ จากนั้นไปที่ Layer 2Insert Frames ให้มันไกลๆเท่ากับ Layer 1 กลับกลับมาที่ Frames 1 กด Insert Key Frames 1 ครับแต้ม จุด Brush Tool 1 ครั้ง ทำแบบนี้ซ้ำๆกันไปเรื่อยๆ กับ อักษรหรือรูปภาพของคุณ
>>>
>>>
>>>
>>>
>>>
** สำหรับการ Insert Key Frames กด F6 เอาก็ได้ ครับ ไม่ต้องไปคลิกขวาที่ Frames เสมอไป
เมือถึงขั้นตอนนี้ สมมุติว่า Insert Key Frames และแต้มจุดกันเสร็จแล้วนะครับถ้า Frames ที่ Layer 2 ยาวไม่ถึงที่ Layer 1 มี ก็ ลบ Frames 1 ส่วนที่เกินทิ้งนะครับ(แบบรายการทำอาหารใน TV อ่ะครับ "สมมุติว่า ครับ 1 ชม. แล้วนะครับ" อะไรประมาณนะ) จะได้ภาพแบบนี้ครับ
6. ขั้นตอนต่อไปก็ไม่ยากครับไปที่ Layer ที่ 2 คลิกขวา กด Mask
7. จำดินสอแท่งที่ทำไว้เมื่อตอนแรกได้มั้ยครับ เอามาใส่ในเอกสารนี้ได้เลยครับ ไว้ใน Layer ที่ 3 วิธีทำแทบไม่ต่างจากเมื่อ ครู่นี้เลยครับ แค่เปลี่ยนจากการแต้มจุดเป็นเลื่อนดินสอเท่านั้นเองครับ ขั้นตอนนี้ไม่ต้อง Mask นะครับ
>>>
>>>
ทำเช่นนี้ไปเรื่อยๆ จนสุดจุดที่เราแต้ม เมื่อครบแล้ว กด Ctrl+Enter จะได้ผลลัพธ์ ดังนี้ครับ
ตัวอย่าง
โทษของการใช้คอมพิวเตอร์
โทษของการใช้คอมพิวเตอร์
ประโยชน์และโทษของการใช้คอมพิวเตอร์ในชีวิตประจำวัน
ระบบ 3G ( UMTS )
ระบบ 3G ( UMTS )
ระบบ 3G ( UMTS ) นั้นคือการนำเอาข้อดีของ ระบบ CDMA มาปรับใช้กับ GSM เรียกว่า W-CDMA ซึ่งถูกพัฒนาโดยบริษัท NTT DoCoMo ของญี่ปุ่น
สำหรับเมืองไทยนั้น ระบบ 3G จะเป็น เทคโนโลยีแบบ HSPA ซึ่งแยกย่อยได้เป็น HSDPA , HSUPA และ HSPA+
HSDPAนั้นจะสามารถ รับส่งข้อมูลได้สูงสุดที่ Download 14.4 Mbps / Upload 384 Kbps. ( ปัจจุบันผู้ให้บริการทั่วโลกยังให้บริการอยู่ที่ Download 7.2Mbps เท่านั้น )
HSUPAจะเหมือนกับ HSDPA ทุกอย่างแต่การ Upload ข้อมูลจะวิ่งที่ความเร็วสูงสุด 5.76 Mbps
HSPA+ เป็นระบบในอนาคต การ Download ข้อมูลจะอยู่ที่ 42 Mbps / Upload 22 Mbps
สำหรับในเมืองไทยนั้น ระบบ 3G ( HSPA ) ที่ Operator AIS หรือ DTAC นำมาใช้จะเป็น HSDPA โดยการ Download จะอยู่ที่ 7.2Mbps ซึ่งน่าจะได้ใช้กันในไม่ช้า
ข้อควรระวังในการเลือกซื้อ AirCard แบบที่รองรับ 3G คลื่นความถี่ 3G ที่ใช้กันทั่วโลก จะใช้อยู่ 3 ความถี่ที่เป็นมาตราฐานคือ 850 , 1900 และ 2100 ซึ่งเมืองไทยจะแบ่งเป็นดังนี้
คลื่นความถี่ ( band ) 850 จะถูกพัฒนาโดย Dtac และ True
คลื่นความถี่ ( band ) 900 จะถูกพัฒนาโดย AIS (ใช้ชั่วคราวที่เชียงใหม่ และ Central World)
คลื่นความถี่ ( band ) 2100 กำลังรอ กทช. ทำการประมูลเพื่อจัดสรรคลื่นความถี่
คลื่นความถี่ ( band ) 1900 และ 2100 จะถูกพัฒนาโดย TOT
ดังนั้นการเลือกซื้อ AirCard , Router หรือ โทรศัพท์มือถือ และต้องการให้รอบรับ 3G ควร check ให้ดีก่อนว่าสามารถรองรับได้ทั้ง 3 คลื่นหรือเพียงบางคลื่นเท่านั้น
ประวัติความเป็นมาของภาษา PHP
ประวัติความเป็นมาของภาษา PHP
|
PHP เป็นภาษาจำพวก scripting language คำสั่งต่างๆจะเก็บอยู่ในไฟล์ที่เรียกว่าสคริปต์ (script) และเวลาใช้งานต้องอาศัยตัวแปลชุดคำสั่ง ตัวอย่างของภาษาสคริปก็เช่น JavaScript, Perl เป็นต้น ลักษณะของ PHP ที่แตกต่างจากภาษาสคริปต์แบบอื่นๆ คือ PHP ได้รับการพัฒนาและออกแบบมา เพื่อใช้งานในการสร้างเอกสารแบบ HTML โดยสามารถ สอดแทรกหรือแก้ไขเนื้อหาได้โดยอัตโนมัติ ดังนั้นจึงกล่าวว่า PHP เป็นภาษาที่เรียกว่า server-side หรือ HTML-embedded scripting language เป็นเครื่องมือที่สำคัญชนิดหนึ่ง ที่ช่วยให้เราสามารถสร้างเอกสารแบบ Dynamic HTML ได้อย่างมีประสิทธิภาพและมีลูกเล่นมากขึ้น
ถ้าใครรู้จัก Server Side Include (SSI) ก็จะสามารถเข้าใจการทำงานของ PHP ได้ไม่ยาก สมมุติว่า เราต้องการจะแสดงวันเวลาปัจจุบันที่ผู้เข้ามาเยี่ยมชมเว็บไซด์ในขณะนั้น ในตำแหน่ง ใดตำแหน่งหนึ่งภายในเอกสาร HTML ที่เราต้องการ อาจจะใช้คำสั่งในรูปแบบนี้ เช่น <!--#exec cgi="date.pl"--> ไว้ในเอกสาร HTML เมื่อ SSI ของ web server มาพบคำสั่งนี้ ก็จะกระทำคำสั่ง date.pl ซึ่งในกรณีนิ้ เป็นสคริปต์ที่เขียนด้วยภาษา perl สำหรับอ่านเวลาจากเครื่องคอมพิวเตอร์ แล้วใส่ค่าเวลาเป็นเอาพุท (output) และแทนที่คำสั่งดังกล่าว ลงในเอกสาร HTML โดยอัตโนมัติ ก่อนที่จะส่งไปยังผู้อ่านอีกทีหนึ่ง อาจจะกล่าวได้ว่า PHP ได้รับการพัฒนาขึ้นมา เพื่อแทนที่ SSI รูปแบบเดิมๆ โดยให้มีความสามารถ และมีส่วนเชื่อมต่อกับเครื่องมือชนิดอื่นมากขึ้น เช่น ติดต่อกับคลังข้อมูลหรือ database เป็นต้น PHP ได้รับการเผยแพร่เป็นครั้งแรกในปีค.ศ.1994 จากนั้นก็มีการพัฒนาต่อมาตามลำดับ เป็นเวอร์ชั่น 1 ในปี 1995 เวอร์ชั่น 2 (ตอนนั้นใช้ชื่อว่า PHP/FI) ในช่วงระหว่าง 1995-1997 และเวอร์ชั่น 3 ช่วง 1997 ถึง 1999 จนถึงเวอร์ชั่น 4 ในปัจจุบัน PHP เป็นผลงานที่เติบโตมาจากกลุ่มของนักพัฒนาในเชิงเปิดเผยรหัสต้นฉบับ หรือ OpenSource ดังนั้น PHP จึงมีการพัฒนาไปอย่างรวดเร็ว และแพร่หลายโดยเฉพาะอย่างยิ่งเมื่อใช้ร่วมกับ Apache Webserver ระบบปฏิบัติอย่างเช่น Linux หรือ FreeBSD เป็นต้น ในปัจจุบัน PHP สามารถใช้ร่วมกับ Web Server หลายๆตัวบนระบบปฏิบัติการอย่างเช่น Windows 95/98/NT เป็นต้น รายชื่อของนักพัฒนาภาษา PHP ที่เป็นแก่นสำคัญในปัจจุบันมีดังต่อไปนี้
ในกรณีของ Apache เราสามารถใช้ PHP ได้สองรูปแบบคือ ในลักษณะของ CGI และ Apache Module ความแตกต่างอยู่ตรงที่ว่า ถ้าใช้ PHP เป็นแบบโมดูล PHP จะเป็นส่วนหนึ่งของ Apache หรือเป็นส่วนขยายในการทำงานนั่นเอง ซึ่งจะทำงานได้เร็วกว่าแบบที่เป็น CGI เพราะว่า ถ้าเป็น CGI แล้ว ตัวแปลชุดคำสั่งของ PHP ถือว่าเป็นแค่โปรแกรมภายนอก ซึ่ง Apache จะต้องเรียกขึ้นมาทำงานทุกครั้ง ที่ต้องการใช้ PHP ดังนั้น ถ้ามองในเรื่องของประสิทธิ ภาพในการทำงาน การใช้ PHP แบบที่เป็นโมดูลหนึ่งของ Apache จะทำงานได้มีประสิทธิภาพมากกว่า ต่อไปเราจะมาทำความรู้จักกับภาษา PHP และทำความเข้าใจการทำงาน รวมถึงคำสั่งพื้นฐานต่าง ๆ |
การสร้างตารางด้วย css
Table
ต้องใช้กับเว็บเบราเซอร์รุ่นใหม่ๆ เช่น IE6 เป็นต้นไป
*บาง property เมื่อทดสอบแล้วไม่เห็นผล
| Property | Description | Values | |
|---|---|---|---|
| table-layout | ใช้กำหนดความกว้างของตารางและคอลัมน์ | automatic fixed | Default กว้างตามที่ำกำหนดเท่านั้น |
| caption-side | ใช้กำหนดตำแหน่งของชื่อตาราง | top bottom left right | Default |
| empty-cells | ใช้กำหนดว่าจะแสดง/ไม่แสดง เส้นขอบ เมื่อ cell นั้นไม่มีข้อความ (empty) | hide show | Default |
| border-spacing | ใช้กำหนดระยะระหว่างตาราง และขอบ แนวนอน และแนวตั้ง | length length | เช่น 2px 5px |
| border-collapse | ใช้กำหนดลักษณะเส้นขอบ | separate collapse | Default แยกเป็น 2 เส้น เป็นเส้นเดียว |
Example
<html>
<head>
<style type="text/css">
table.one{
table-layout:automatic;
width:100%;
border:1px solid #666666
}
table.two{
table-layout:fixed;
empty-cells:show;
border-collapse:collapse;
width:100%;
border:1px solid #666666
}
td {
border:1px solid #666666
}
</style>
</head>
<body>
<table class="one">
<caption>ตารางแสดงตัวเลข</caption>
<tr>
<td width="20%">1000000000000000000000000000</td>
<td width="40%">10000000</td>
<td width="40%"></td>
</tr>
</table>
<br />
<table class="two">
<caption>ตารางแสดงตัวเลข</caption>
<tr>
<td width="20%">1000000000000000000000000000</td>
<td width="40%">10000000</td>
<td width="40%"></td>
</tr>
</table>
</body>
</html>
Output
| 1000000000000000000000000000 | 10000000 |
| 1000000000000000000000000000 | 10000000 |
สังเกต ตารางที่สอง จะ fix ความกว้างของช่องตารางไว้ ทำให้แสดงข้อความไม่พอ นอกจากนี้มีการกำหนด cell ว่างให้แสดงด้วย และให้แสดงเส้นขอบรวมเป็นเส้นเดียว
Exampleลองจัดรูปแบบอื่นๆ ให้กับตาราง โดยใช้ CSS บทที่ผ่านๆ มา ดูค่ะ
<html>
<head>
<style type="text/css">
table.three{
width:60%;
border:0;
}
table.three th { font-weight:bold;
border-bottom:1px solid #CCC;
border-top:1px solid #CCC;
background-color:#F2F9FF ;
color:#0000CC;
}
table.three td { padding:5px;
border-bottom:1px dotted #CCC;
}
</style>
</head>
<body>
<table class="three" cellspacing="0">
<tr>
<th>รหัสพนักงาน</th>
<th>ชื่อ</td>
<th>เงินเดือน</th>
</tr>
<tr>
<td>01</td>
<td>อำนาจ</td>
<td align="right">30,000</td>
</tr>
<tr>
<td>02</td>
<td>สมชาย</td>
<td align="right">25,000</td>
</tr>
<tr>
<td>03</td>
<td>วีระ</td>
<td align="right">20,000</td>
</tr>
</table>
</body>
</html>
Output
| รหัสพนักงาน | ชื่อ | เงินเดือน |
|---|---|---|
| 01 | อำนาจ | 30,000 |
| 02 | สมชาย | 25,000 |
| 03 | วีระ | 20,000 |
โครงสร้างคำสั่ง css
โครงสร้างคำสั่ง css
คำสั่งของ CSS ประกอบด้วย selector, property และ value
selector { property:value }
selector { property1:value1; property2:value2 }
selector { property1:value1; property2:value2 }
- selector สามารถเป็น HTML Tag ต่างๆ เช่น <body>, <p> หรือเป็น Class name หรือ ID ที่เราตั้งชื่อให้ก็ได้
- property คือ คุณสมบัติในการจัดรูปแบบการแสดงผล เช่น color สำหรับกำหนดสี, font-size สำหรับกำหนดขนาดตัวอักษร
- value เป็น ค่า ที่เรากำหนดให้กับ property ต่างๆ เช่น color:white, font-size:14px
- property คือ คุณสมบัติในการจัดรูปแบบการแสดงผล เช่น color สำหรับกำหนดสี, font-size สำหรับกำหนดขนาดตัวอักษร
- value เป็น ค่า ที่เรากำหนดให้กับ property ต่างๆ เช่น color:white, font-size:14px
ตัวอย่างคำสั่ง CSS
กำหนดให้ข้อความที่อยู่ใน Tag <p> เป็นสีดำ และวางอยู่กึ่งกลาง
/* selector ที่เป็น HTML Tag */
p {
color:#000000;
text-align:center
}
p {
color:#000000;
text-align:center
}
กำหนดให้ข้อความที่ class name topic เป็นสีแดง ชนิดอักษรเป็น Arial ตัวหนา และจัดวางอยู่กึ่งกลาง
/* selector ที่เป็น Class name */
.topic{
color:red;
font-family:Arial;
font-weight:bold;
text-align:center
}
.topic{
color:red;
font-family:Arial;
font-weight:bold;
text-align:center
}
กรณีที่ selector มีค่า property เหมือนกัน สามารถเขียนรวมกันได้ โดยใช้เครื่องหมาย "," คั่นระหว่าง selector
กำหนดให้ข้อความใน Tag <h1>,<h2> และ <h3> เป็นสีแดง ชนิดตัวอักษรเป็น sans-serif
h1, h2, h3 {
color:red;
font-family:sans-serif
}
color:red;
font-family:sans-serif
}
สำหรับเรื่อง property และ value จะได้ศึกษาอย่างละเอียดในหัวข้อต่อๆ ไป
Comment
ใน Style Sheet Comment จะใช้เครื่องหมาย "/*" เป็นการเปิด และ "*/" เป็นการปิด เช่น
/* นี่คือ comment กำหนดสีตัวอักษรเป็นสีดำ ขนาด14px */
body {
color:#000000;
font-size:14px
}
body {
color:#000000;
font-size:14px
}
CSS คืออะไร
CSS คืออะไร
CSS ได้จัดเตรียมวิธีการแก้ปัญหานี้ไว้ แทนที่จะกำหนดรูปแบบเวบไซท์ในแต่ละเวบเพจ คุณสามารถใช้ CSS ควบคุมข้ามผังการจัดหน้าของเวบไซท์คุณได้ แล้วถ้าคุณต้องการเปลี่ยนแปลงมุมมองของเวบไซท์ คุณก็สามารถแก้ไขได้ที่แฟ้ม CSS เพียงอย่างเดียว
ก่อนที่จะเริ่มต้นเรียนคุณคงได้อ่านคำแนะนำด้านบนแล้ว คราวนี้ให้ตรวจสอบว่าตัวคุณพร้อมที่จะเรียนรู้ตามคำแนะนำต่อไปนี้หรือไม่
หากคุณมีความพร้อมตามคำแนะนำด้านบนแล้วก็เรียนรู้ในบทต่อไปได้เลย หากคุณยังไม่ทราบหรือยังไม่มีพื้นฐานดีพอเราแนะนำให้เรียนรู้กับ บทเรียน HTML ของเราก่อนที่จะเริ่มเรียนรู้ต่อไป
การสร้างตารางด้วย HTML
การสร้างตาราง
|
| การสร้างตาราง ลงใน เว็บเพจมีประโยชน์มหาศาล เราสามารถ ประยุกต์ นำไปใช้ได้หลายอย่าง เพื่อเป็นการเพิ่มสีสันความสวยงามของเว็บเพจ การสร้างตาราง ในเว็บเพจก็ไม่แตกต่างจากการสร้างตารางบนแผ่นกระดาษทั่ว ๆ ไป เราเคยทำตารางอย่างไร ก็สามารถสั่งให้เว็บเพจของเรา ทำอย่างนั้นได้ เช่นกัน ต่างกันที่ว่าในเว็บเพจเราไม่สามารถที่จะ นำเอาปากกา ดินสอ ไม้บรรทัด หรืออุปกรณ์ สำหรับเขียนตารางเข้าไปเขียนบนจอภาพได้ เราใช้ นิ้วมือของเรา เป็นผู้พิมพ์คำสั่ง สำหรับสร้างตารางขึ้นมา โครงสร้างตาราง <TABLE> <TR> <TH>หัวข้อตาราง <TD>รายละเอียดย่อย <TR> <TH>หัวข้อตาราง <TD>รายละเอียดย่อย </TABLE>
คุณสมบัติของตาราง <TABLE> ALIGN=align-type BACKGROUND=url BGCOLOR=color BORDER=n CELLPADDING=n CELLSPACING=n WIDTH=n HEIGHT=n โดย
<TR> ALIGN=align-type BACKGROUND=url BGCOLOR=color BORDERCOLOR=color VALIGN=align-type โดย
ALIGN=align-type BACKGROUND=url BGCOLOR=color BORDERCOLOR=color COLSPAN=n ROWSPAN=n VALIGN=align-type โดย
ALIGN=align-type BACKGROUND=url BGCOLOR=color BORDERCOLOR=color COLSPAN=n ROWSPAN=n VALIGN=align-type โดย
มีอยู่ บ่อยครั้ง ที่เรา จำเป็น ที่จะต้อง สร้างตาราง ให้ มีลักษณะ ของตาราง ทับซ้อน กันได้ เพื่อ ผล ทางการ แสดงผล ข้อมูล ข้อมูล ให้แบบ ละเอียด ของข้อมูล ได้มาก ที่สุด รูปแบบ การเขียน ก็เหมือน กับเมื่อ สร้าง list ซ้อน list นั่นคือ ในส่วน ของ บรรทัด <TR> จะมี การสร้าง ตาราง ใหม่ <TABLE>.....</TABLE> ก่อนที่ จะมี ตัวเปิด </TR> ในบรรทัด นั้น ๆ เช่น
ซึ่งมีโคดดังนี้ <HTML> <HEAD><TITLE>Table with and Neted tables</HEAD></TITLE> <BODY> <H1>Table with and Neted tables</H1> <TABLE BORDER WIDTH=50%> <TR><TD>A</TD><TD>B</TR></TR> <TR><TD><TABLE BORDER WIDTH=100%> <TR><TD>C</TD><TD>D</TR></TR> </TABLE><TD> <TD>E</TD></TR> </TABLE > </BODY> </HTML> การใส่รูปภาพลงในตารางเรา สามารถ นำรูปภาพ ที่มี อยู่บรรจุ ลงใน ตาราง ที่สร้าง ขึ้นได้ โดย การ บรรจุคำสั่ง สำหรับการ แสดงรูปภาพ <IMG SRC=รูปภาพ>เข้าไป ในส่วน หนึ่งของ ตาราง เช่น <TABLE BORDER="2" CELLPADDING="5" CELLSPACING="5" WIDTH="60%"> <TR> <TD VALIGN="bottom" WIDTH="30%"><IMG SRC="Aq.gif" WIDTH="108" HEIGHT="108"></TD> <TD WIDTH="30%"><IMG SRC="34.gif" WIDTH="20" HEIGHT="20"></TD> <TR> <TR> <TD VALIGN="bottom" WIDTH="30%"><IMG SRC="direc.gif" WIDTH="200" HEIGHT="44"></TD> <TD WIDTH="30%"><IMG SRC="pencil.gif" WIDTH="50" HEIGHT="50"></TD> <TR> </TABLE>
การปรับขนาดรูปภาพให้พอดีกับตาราง เราเคยเรียน มาแล้ว ว่า เรานั้น สามารถ ปรับขนาด รูปภาพได้ ในการนำ รูปภาพ ใส่เข้า ไปในตาราง เราก็ กำหนด ขนาดของ รูปภาพ กว้าง ยาว ให้เท่ากัน ทุกด้าน จะทำให้ภาพ ที่แสดง ออกมา มีขนาด เท่ากัน เช่น <TABLE BORDER="2" CELLPADDING="5" CELLSPACING="5" WIDTH="60%"> <TR> <TD VALIGN="bottom" WIDTH="30%"><IMG SRC="Aq.gif" WIDTH="80" HEIGHT="80"></TD> <TD WIDTH="30%"><IMG SRC="34.gif" WIDTH="80" HEIGHT="80"></TD> <TR> <TR> <TD VALIGN="bottom" WIDTH="30%"><IMG SRC="direc.gif" WIDTH="80" HEIGHT="80"></TD> <TD WIDTH="30%"><IMG SRC="pencil.gif" WIDTH="80" HEIGHT="80"></TD> <TR> </TABLE>
การเชื่อมโยงข้อมูลในตาราง เหมือนกับ ข้อมูลที่อยู่ นอกตาราง ข้อมูลที่อยู่ในตาราง ก็สามารถ ไปเชื่อม โยงกับข้อ มูล จากแหล่ง ข้อมูล อื่นได้ เช่น เดียวกัน เมื่อเรานำ ส่วนเชื่อม โยงข้อมูล ทั้งตัว อักษร รูปภาพ หรือผสมกัน ก็ได้ มาบรรจุในตารางเท่านั้น เช่น <table border=2 cellpadding=5 cellspacing=5 width="50%"> <tbody> <tr> <td width="50%"><a href="../index.asp"><img height=20 src="34.gif" width=20 border=0></a></td> <td width="50%"><a href="../index.asp">กลับไปหน้าแรก</a></td> </tr> </tbody> </table>
|
การสร้างแบบฟอร์มด้วย html
การสร้างแบบฟอร์ม
|
| สำหรับฟอร์มใน HTML ถือว่าเป็น สิ่งที่โต้ตอบกับผู้ใช้ ในแบบ interactive คือ เราสามารถ ใช้ฟอร์ม ในการตอบโต้ กับผู้อ่านไซต์ ของเราได้ ทันที เมื่อพูดถึง ฟอร์มก็คง ต้องพูด ถึงคำว่า CGI (Common Gateway Interface) ซึ่งก็คือ โปรแกรม หรือ สคริปท์ตัวหนึ่ง ที่คอยตรวจสอบ และจัดการ กับแบบฟอร์ม รวมทั้ง การประมวลผล ตาม แบบที่เจ้าของ ไซต์ต้องการ โดยมากมัก เขียนขึ้นด้วยภาษา C หรือ Perl แต่ในการใช้ CGI นี้ เป็นเรื่องที่ยุ่งยาก กล่าวคือ ถ้าเราไม่ใช่ ผู้ดูแลระบบ แล้วถือว่ าไม่มีสิทธิ์ ซึ่งก็หมาย ความว่า เราต้อง ตัดคุณสมบัติ แบบ Interactive ออกไป แล้วเรา หันมาใช้ Mailto: แทน ซึ่งเราก็ยัง สามารถที่ จะสร้างฟอร์ม ได้เช่นเดิม หรือไม่ ก็ใช้ภาษ าจาวาสคริปท์ มาช่วย โดยเรา ต้องเขียน สคริปท์ขึ้นมา แล้วปะติด ไปกับไฟล์ HTML การประมวลผล ต่าง ๆ ไม่จำเป็น ต้องส่งไปที่ เซิร์ฟเวอร์ แต่สามารถ ประมวลผล บนเครื่อง ของผู้ชม ไซต์ได้ ทันที แต่ในที่นี้ ผมจะขอกล่าว ในส่วน ของการใช้ mailto: รูปแบบของฟอร์ม รูปแบบ < FORM METHOD="..." ACTION="..." ENCTYPE"..."></FORM> METHOD=GET/POST โดย GET จะส่งได้ไม่เกิน 255 ตัวอักษร ส่วนใหญ่ใช้ส่งค่าตัวแปรและ URL และ POST จะส่งข้อความไปได้ไม่จำกัด ซึ่งนิยมใช้มากกว่า GET ACTION="mailto:myaddress@mysite.co.th" ซึ่งเป็นรูปแบบของการส่งข้อมูลจากฟอร์มไปยังเมล์บ็อกซ์ของเรา ENCTYPE= "application/x-www-form-urlencoded" เป็นการกำหนด รูปแบบการเก็บข้อมูลของฟอร์ม เพื่อที่จะส่งข้อมูลไปยังเซิร์ฟเวอร์ จะใส่หรือไม่ใส่ก็ได้ แต่ถ้าใส่ จะทำให้โปรแกรม mailto: สามารถใช้โปรแกรมเมล์ บางโปรแกรมอ่านข้อมูลที่ถูกเก็บในรูปแบบนี้ได้ทันที เช่น <FORM METHOD=POST ACTION="mailto:info@np.a-net.net.th" ENCTYPE= "application/x-www-form-urlencoded"> </FORM>Tip ถ้าผู้กรอกแบบฟอร์มใช้บราวเซอร์จาก Netscape หัวข้อหรือ Subject ของเมล์ที่ส่งมายัง เมล์บ็อกซ์นั้นจะมีหัวข้อว่า"Form posted from Mozilla" แต่ถ้าเป็นตัวอื่นจะเป็น "Form Response" ถ้าคุณไม่ชอบก็สามารถเปลี่ยนได้ในส่วนของ ACTION ดังนี้ <FORM METHOD=POST ACTION="mailto:email@myaddress.com?subject="Answer from Product Questonaire"> โดยในส่วนของ Subject นั้นสามารถเปลี่ยนได้ตามใจเรา การสร้างแบบฟอร์ม รูปแบบ < INPUT TYPE=TEXT NAME="..." SIZE=n MAXLENGTH=n VALUE="..."> • TYPE=TEXT เป็นการกำหนดค่าให้แสดงตัวรับข้อมูลแบบ TEXT • NAME="..." ชื่อหัวข้อ เพื่อบอกให้รู้ว่า ค่าที่ได้รับกลับมานั้น เกี่ยวกับอะไร • SIZE=n เป็นจำนวนขนาดของช่องรับข้อความค่าปกติ 20 ตัวอักษร • MAXLENGTH=n เป็นจำนวนตัวอักษรที่รับได้สูงสุดในช่องรับนั้น ๆ • VALUE="..." ข้อความที่อยู่ระหว่างเครื่องหมายคำพูดจะ ปรากฎอยู่ในช่อรับข้อมูลให้โดยอัตโนมัติ
ช่องป้อนรหัสผ่าน รูปแบบ < INPUT TYPE=PASSWORD NAME="..." SIZE=n MAXLENGTH=n VALUE="...">รูปแบบคล้ายกับกับการ INPUT ด้วย TEXT ต่างกันเพียงแค่ เปลี่ยนคำว่า TEXT ให้เป็น PASSWORD เท่านั้น ในช่องที่กรอกรหัสหน้าจอ จะแสดงเป็นสัญลักษณ์ "*" เครืองหมายดอกจันแทน เพื่อป้องกันไม่ให้คนอื่นมองเห็น Password : ปุ่ม Radio Botton รูปแบบ <INPUT TYPE=RADIO NAME="..." VALUE="..." CHECKED>ปุ่มเลือกแบบนี้สามารถเลือกได้เพียง ปุ่มเดียวเท่านั้น คำสั่ง CHECKED นั้นมีไว้ เพื่อกำหนด ให้ตัวเลือก ถูกเลือก ไว้ก่อนแล้ว โดยเป็นตัวเลือกที่เราคิดว่าผู้กรอกแบบฟอร์มน่าจะเลือก สามารถกำหนดได้ตำแหน่งเดียว ชาย หญิง เช็คบ็อกซ์ รูปแบบ < INPUT TYPE=CHECKBOX NAME="..." VALUE="..." CHECKED>ปุ่มเลือก แบบนี้ สามารถเลือก หลายปุ่ม คำสั่ง CHECKED สามารถกำหนด ได้หลายตัว ส่วนการตั้งค่าอื่น ๆ เหมือนแบบ Radio Botton ค่าของ name และ value ไม่มีรูปแบบ กำหนดตายตัว ว่าเป็นแบบใด จะกำหนดname ให้เหมือนกันแต่ value ต่างกันหรือ กำหนด name ต่างกัน ส่วน value เหมือนกัน อย่างไรก็ได้ ขอให้เราเข้าใจและประเมินผล ข้อมูลที่ส่งมาได้เท่านั้นเอง คณิตศาสตร์ ฟิสิกส์ ชีววิทยา เคมี ตัวรับข้อมูลแบบ TEXTAREA รูปแบบ < TEXTAREA NAME="..." ROWS=n COLS=n WRAP=OFF/VIRTUAL/SOFT/PHYSICAL/HARD > .........TEXT .........TEXT </TEXTAREA> เราสามารถกำหนดขนาดของกรอบรับข้อความได้ด้วยตัวเอง • ROWS=n n หมายถึง จำนวนบรรทัดที่ต้องการ • COLS=n n หมายถึง จำนวนความกว้างของกรอบรับข้อความ มีหน่วยเป็น 50 ตัวอักษร • รูปแบบการปัดคำ(Wrap) ปกติไม่ได้ตั้งไว้เราสามารถกำหนดได้ 3 วิธี คือ 1. WRAP=OFF ค่าปกติ ไม่มีการปัดคำขึ้นบรรทัดใหม่ ข้อความจะถูกพิมพ์ไปเรื่อย ๆ จนกว่าผู้กรอกจะกด Enter 2. WRAP=VITUAL หรือ WRAP=SOFT ปัดคำเมื่อสิ้นสุดกรอบข้อความ แต่เป็นการปัดคำแบบหลอก ๆ เฉพาะต่อหน้าผู้กรอกเท่านั้น 3. WRAP=PHYSICAL หรอื WRAP=HARD ปักคำเมื่อสิ้นสุดกรอบรับข้อความ ซึ่งเป็นการปัดจริง ๆ การใช้งานเบราเซอร์บางรุ่นไม่สนับสนุน VITUAL และ PHYSICAL ฉะนั้นทางแก้คือให้ใช้ SOFT และ HARD จะดีกว่า การเลือกรายการ (แบบ Drop down menu) รูปแบบ < SELECT NAME="..." > <OPTION SELECTED>คำอธิบายหัวข้อหรือตัวเลือก <OPTION >คำอธิบายหัวข้อหรือตัวเลือก <OPTION >คำอธิบายหัวข้อหรือตัวเลือก </SELECT> • SELECT เป็นค่าปกติที่ใช้ • OPTION เป็นตัวเลือกที่เราต้องการให้ปรากฎ • SELECTED เป็นตัวเลือกที่ถูกกำหนดเลือกไว้ก่อน มีได้เพียงตัวเดียว ส่วนเมนูแบบ Scrolling นั้น ำได้โดยการใส่ SIZE=n เข้าไปในส่งนของ <SELECT> ซึ่งค่าของ SIZE=n นั้นจะใส่เท่าไรก็ได้ เช่น ถ้าคุณมีตัวเลือก 5 ตัว แต่ใส่ SIZE=2 คุณก็สามารถเห็นได้แค่ 2 บรรทัด เท่านั้น SIZE จะมีค่ามากน้อยขึ้นอยู่กับ OPTION ก็ได้ แล้วแต่ความสวยงามของฟอร์ม สำหรับเมนูแบบนี้ มักใช้กับหัวข้อที่มีตัวเลือกไม่มากนัก ปุ่มยกเลิก และ ตกลง รูปแบบ < INPUT TYPE=SUBMIT VALUE="..." > < INPUT TYPE=RESET VALUE="..." > • Submit มีหน้าที่ไว้ส่งแบบฟอร์มกลับไปยังเจ้าของฟอร์ม • Reset มีไว้สำหรับเคลียร์ค่าฟอร์มทั้งหมดให้กลับอยู่ในรูปแบบเดิมก่อนมีการกรอก • Vaule เป็นการกำหนดคำอธิบายปุ่มแทนค่าปกติคือ Submit Query กับ Reset จะมีหรือไม่มีก็ได้ | ||||||||||||||
โครงสร้างพื้นฐานของ HTML
โครงสร้างพื้นฐานของ HTML
โครงสร้างของ HTML จะประกอบไปด้วยส่วนของคำสั่ง 2 ส่วน คือ ส่วนที่เป็น ส่วนหัว (Head) และส่วนที่เป็นเนื้อหา (Body) โดยมีรูปแบบคำสั่งดังนี้
<HTML>
<HEAD>
<TITLE> ชื่อโปรแกรมหรือข้อมูลที่ต้องการแสดงในส่วนหัว </TITLE>
</HEAD>
<BODY>
คำสั่งหรือข้อความที่ต้องการให้แสดง
</BODY>
</HTML>
แนวคิดพื้นฐานของนวัตกรรมทางการศึกษา
แนวคิดพื้นฐานของนวัตกรรมทางการศึกษา
ปัจจัยสำคัญที่มีอิทธิพลอย่างมาก ต่อวิธีการศึกษา ได้แก่แนวความคิดพื้นฐานทางการศึกษาที่เปลี่ยนแปลงไป อันมีผลทำให้เกิดนวัตกรรมการศึกษาที่สำคัญๆ พอจะสรุปได้4 ประการ คือ
1. ความแตกต่างระหว่างบุคคล (Individual Different) การจัดการศึกษาของไทยได้ให้ความสำคัญในเรื่องความแตกต่างระหว่างบุคคลเอาไว้อย่างชัดเจนซึ่งจะเห็นได้จากแผนการศึกษาของชาติ ให้มุ่งจัดการศึกษาตามความถนัดความสนใจ และความสามารถ ของแต่ละคนเป็นเกณฑ์ ตัวอย่างที่เห็นได้ชัดเจนได้แก่ การจัดระบบห้องเรียนโดยใช้อายุเป็นเกณฑ์บ้าง ใช้ความสามารถเป็นเกณฑ์บ้าง นวัตกรรมที่เกิดขึ้นเพื่อสนองแนวความคิดพื้นฐานนี้ เช่น
1. ความแตกต่างระหว่างบุคคล (Individual Different) การจัดการศึกษาของไทยได้ให้ความสำคัญในเรื่องความแตกต่างระหว่างบุคคลเอาไว้อย่างชัดเจนซึ่งจะเห็นได้จากแผนการศึกษาของชาติ ให้มุ่งจัดการศึกษาตามความถนัดความสนใจ และความสามารถ ของแต่ละคนเป็นเกณฑ์ ตัวอย่างที่เห็นได้ชัดเจนได้แก่ การจัดระบบห้องเรียนโดยใช้อายุเป็นเกณฑ์บ้าง ใช้ความสามารถเป็นเกณฑ์บ้าง นวัตกรรมที่เกิดขึ้นเพื่อสนองแนวความคิดพื้นฐานนี้ เช่น
- การเรียนแบบไม่แบ่งชั้น (Non-Graded School)
- แบบเรียนสำเร็จรูป (Programmed Text Book)
- เครื่องสอน (Teaching Machine)
- การสอนเป็นคณะ (TeamTeaching)
- การจัดโรงเรียนในโรงเรียน (School within School)
- เครื่องคอมพิวเตอร์ช่วยสอน (Computer Assisted Instruction)
- แบบเรียนสำเร็จรูป (Programmed Text Book)
- เครื่องสอน (Teaching Machine)
- การสอนเป็นคณะ (TeamTeaching)
- การจัดโรงเรียนในโรงเรียน (School within School)
- เครื่องคอมพิวเตอร์ช่วยสอน (Computer Assisted Instruction)
2. ความพร้อม (Readiness) เดิมทีเดียวเชื่อกันว่า เด็กจะเริ่มเรียนได้ก็ต้องมีความพร้อมซึ่งเป็นพัฒนาการตามธรรมชาติ แต่ในปัจจุบันการวิจัยทางด้านจิตวิทยาการเรียนรู้ ชี้ให้เห็นว่าความพร้อมในการเรียนเป็นสิ่งที่สร้างขึ้นได้ ถ้าหากสามารถจัดบทเรียน ให้พอเหมาะกับระดับความสามารถของเด็กแต่ละคน วิชาที่เคยเชื่อกันว่ายาก และไม่เหมาะสมสำหรับเด็กเล็กก็สามารถนำมาให้ศึกษาได้ นวัตกรรมที่ตอบสนองแนวความคิดพื้นฐานนี้ได้แก่ ศูนย์การเรียน การจัดโรงเรียนในโรงเรียน นวัตกรรมที่สนองแนวความคิดพื้นฐานด้านนี้ เช่น
- ศูนย์การเรียน (Learning Center)
- การจัดโรงเรียนในโรงเรียน (School within School)
- การปรับปรุงการสอนสามชั้น (Instructional Development in 3 Phases)
- ศูนย์การเรียน (Learning Center)
- การจัดโรงเรียนในโรงเรียน (School within School)
- การปรับปรุงการสอนสามชั้น (Instructional Development in 3 Phases)
3. การใช้เวลาเพื่อการศึกษา แต่เดิมมาการจัดเวลาเพื่อการสอน หรือตารางสอนมักจะจัดโดยอาศัยความสะดวกเป็นเกณฑ์ เช่น ถือหน่วยเวลาเป็นชั่วโมง เท่ากันทุกวิชา ทุกวันนอกจากนั้นก็ยังจัดเวลาเรียนเอาไว้แน่นอนเป็นภาคเรียน เป็นปี ในปัจจุบันได้มีความคิดในการจัดเป็นหน่วยเวลาสอนให้สัมพันธ์กับลักษณะของแต่ละวิชาซึ่งจะใช้เวลาไม่เท่ากัน บางวิชาอาจใช้ช่วงสั้นๆ แต่สอนบ่อยครั้ง การเรียนก็ไม่จำกัดอยู่แต่เฉพาะในโรงเรียนเท่านั้น นวัตกรรมที่สนองแนวความคิดพื้นฐานด้านนี้ เช่น
- การจัดตารางสอนแบบยืดหยุ่น (Flexible Scheduling)
- มหาวิทยาลัยเปิด (Open University)
- แบบเรียนสำเร็จรูป (Programmed Text Book)
- การเรียนทางไปรษณีย์
- มหาวิทยาลัยเปิด (Open University)
- แบบเรียนสำเร็จรูป (Programmed Text Book)
- การเรียนทางไปรษณีย์
4. ประสิทธิภาพในการเรียน การขยายตัวทางวิชาการ และการเปลี่ยนแปลงของสังคม ทำให้มีสิ่งต่างๆ ที่คนจะต้องเรียนรู้เพิ่มขึ้นมาก แต่การจัดระบบการศึกษาในปัจจุบันยังไม่มีประสิทธิภาพเพียงพอจึงจำเป็นต้องแสวงหาวิธีการใหม่ที่มีประสิทธิภาพสูงขึ้น ทั้งในด้านปัจจัยเกี่ยวกับตัวผู้เรียน และปัจจัยภายนอก นวัตกรรมในด้านนี้ที่เกิดขึ้น เช่น
- มหาวิทยาลัยเปิด
- การเรียนทางวิทยุ การเรียนทางโทรทัศน์
- การเรียนทางไปรษณีย์ แบบเรียนสำเร็จรูป
- ชุดการเรียน
- การเรียนทางวิทยุ การเรียนทางโทรทัศน์
- การเรียนทางไปรษณีย์ แบบเรียนสำเร็จรูป
- ชุดการเรียน
ประโยชน์ของระบบสารสนเทศ
ประโยชน์ของระบบสารสนเทศ
ประโยชน์ที่ได้จากการจัดการทรัพยากรสารสนเทศคือ
- รวบรวมข้อมูลจากภายในและภายนอกที่มีความจำเป็นต่อหน่วยงาน
- ประมวลผลข้อมูลเพื่อให้ได้สารสนเทศที่มีประโยชน์นำไปใช้งานได้
- มีระบบการจัดเก็บข้อมูลให้เป็นหมวดหมู่ สะดวกต่อการค้นหาและนำไปใช้
- ปรับปรุงข้อมูลให้อยู่ในสภาพที่ถูกต้อง ทันสมัยอยู่เสมอ
ประโยชน์ที่ได้จากระบบสารสนเทศที่มีต่อการบริหารงานในองค์กร คือ
- เพื่อการวางแผน กำหนดเป้าหมายและนโยบายในการบริหารองค์กร
- สามารถวิเคราะห์และแก้ไขปัญหาที่เกิดขึ้นได้อย่างรวดเร็ว
- ช่วยเพิ่มประสิทธิภาพในการทำงานของบุคลากรในองค์กร
- ช่วยให้การทำงานรวดเร็ว ถูกต้อง การบริหารงานในองค์กรมีประสิทธิภาพ
- ใช้ควบคุมระบบการทำงานในองค์กรให้ดำเนินไปตามนโยบายที่กำหนดไว้
- องค์กรมีมาตรฐานและคุณภาพในการดำเนินงาน ทำให้ได้รับความเชื่อถือ
- สร้างโอกาสในการลงทุน ทำให้มีการขยายองค์กรให้เจริญเติบโตยิ่งขึ้น
- สามารถแข่งขันกับองค์กรอื่น ๆ ได้
ประเภทของระบบสารสนเทศ
ประเภทของระบบสารสนเทศ
ปัจจุบันจะเห็นความสัมพันธ์ระหว่างองค์กร กับระบบสารสนเทศ และเทคโนโลยีสารสนเทศชัดเจนมากขึ้น และเนื่องจากการบริหารงานในองค์กรมีหลายระดับ กิจกรรมขององค์กรแต่ละประเภทอาจจะแตกต่างกัน ดังนั้นระบบสารสนเทศของแต่ละองค์กรอาจแบ่งประเภทแตกต่างกันออกไป
(สุชาดา กีระนันทน์, 2541)
ถ้าพิจารณาจำแนกระบบสารสนเทศตามการสนับสนุนระดับการทำงานในองค์กร จะแบ่งระบบสารสนเทศได้เป็น 4 ประเภท ดังนี้ (Laudon & Laudon, 2001)
1. ระบบสารสนเทศสำหรับระดับผู้ปฏิบัติงาน (Operational – level systems) ช่วยสนับสนุนการทำงานของผู้ปฏิบัติงานในส่วนปฏิบัติงานพื้นฐานและงานทำรายการต่างๆขององค์กร เช่นใบเสร็จรับเงิน รายการขาย การควบคุมวัสดุของหน่วยงาน เป็นต้น วัตถุประสงค์หลักของระบบนี้ก็เพื่อช่วยการดำเนินงานประจำแต่ละวัน และควบคุมรายการข้อมูลที่เกิดขึ้น
2. ระบบสารสนเทศสำหรับผู้ชำนาญการ (Knowledge-level systems) ระบบนี้สนับสนุนผู้ทำงานที่มีความรู้เกี่ยวข้องกับข้อมูล วัตถุประสงค์หลักของระบบนี้ก็เพื่อช่วยให้มีการนำความรู้ใหม่มาใช้ และช่วยควบคุมการไหลเวียนของงานเอกสารขององค์กร
3. ระบบสารสนเทศสำหรับผู้บริหาร (Management - level systems) เป็นระบบสารสนเทศที่ช่วยในการตรวจสอบ การควบคุม การตัดสินใจ และการบริหารงานของผู้บริหารระดับกลางขององค์กร
4. ระบบสารสนเทศระดับกลยุทธ์ (Strategic-level system) เป็นระบบสารสนเทศที่ช่วยการบริหารระดับสูง ช่วยในการสนับสนุนการวางแผนระยะยาว หลักการของระบบคือต้องจัดความสัมพันธ์ระหว่างสภาพแวดล้อมภายนอกกับความสามารถภายในที่องค์กรมี เช่นในอีก
5 ปีข้างหน้า องค์กรจะผลิตสินค้าใด
สมัครสมาชิก:
บทความ (Atom)