Follow by Email

จำนวนการดูหน้าเว็บรวม

วันพุธที่ 9 กรกฎาคม พ.ศ. 2557

ผลงานภาพ Illustrator











วันจันทร์ที่ 19 ธันวาคม พ.ศ. 2554

JavaScript คือ อะไร ?

JavaScript คือ อะไร ?

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

JavaScript เป็นภาษา script ที่ใช้งานบนเว็บเพจต่างๆ ถูกสร้างขึ้นเพื่อทำให้เว็บเพจสามารถโต้ตอบกับผู้ใช้งานได้ดีขึ้น   มักใช้ JavaScript เขียนเป็นฟังก์ชั่นสำหรับใช้งานต่างๆ เช่น ตรวจสอบความถูกต้องของข้อมูลในแบบฟอร์ม, ตรวจสอบชนิดและรุ่นของโปรแกรมเว็บเบราเซอร์, สร้างไฟล์ cookie, สร้างลูกเล่นต่างๆ เช่น ปฏิทิน, หิมะตก เป็นต้น
JavaScript เป็นภาษาประเภท Interpreted Language กล่าวคือ คอมพิวเตอร์จะแปลคำสั่งที่ละบรรทัด โดยไม่ต้องมีการ compile ก่อน
JavaScript เป็น Client-side Script  ซึ่งจะประมวลผลบนเครื่องคอมพิวเตอร์ของผู้เยี่ยมชมเว็บไซต์ โดยใช้โปรแกรมเว็บเบราเซอร์ เช่น IE (version 3 ขึ้นไป), Netscape (version 2 ขึ้นไป), Firefox ซึ่งสนับสนุนการทำงานของ JavaScript ดีอยู่แล้ว   การที่ JavaScript ไม่ได้ถูกประมวลผลบนเครื่อง Web Server จะช่วยแบ่งเบาภาระการทำงานของ server และทำงานได้รวดเร็ว
JavaScript ไม่ใช่ภาษา Java แต่อย่างใด Java เป็นภาษาที่ถูกพัฒนาโดย Sun Microsystems เป็นภาษาประเภท programming สำหรับเขียนโปรแกรมที่สนับสนุนการเขียนโปรแกรมเชิงวัตถุ (OOP : Object-Oriented Programming) คล้ายกับภาษา C, C++

HTML คืออะไร?

HTML คืออะไร?

HTML (ย่อมาจาก Hyper Text Markup Language)   เป็นภาษาประเภท Markup Language ที่ใช้ในการสร้างเว็บเพจ   มีแม่แบบมาจากภาษา SGML (Standard Generalized Markup Language) ที่ตัดความสามารถบางส่วนออกไป เพื่อให้สามารถทำความเข้าใจและเรียนรู้ได้ง่าย   ปัจจุบันมีการพัฒนาและกำหนดมาตรฐานโดยองค์กร World Wide Web Consortium (W3C)
ภาษา HTML ได้ถูกพัฒนาขึ้นอย่างต่อเนื่องตั้งแต่ HTML Level 1, HTML 2.0, HTML 3.0, HTML 3.2 และ HTML 4.0    ในปัจจุบัน ทาง W3C ได้ผลักดัน รูปแบบของ HTML แบบใหม่ ที่เรียกว่า XHTML ซึ่งเป็นลักษณะของโครงสร้าง XML แบบหนึ่ง ที่มีหลักเกณฑ์ในการกำหนดโครงสร้างของโปรแกรมที่มีรูปแบบที่มาตรฐานกว่า   มาทดแทนใช้ HTML รุ่น 4.01 ที่ใช้กันอยู่ในปัจจุบัน

HTML มีโครงสร้างการเขียนโดยอาศัย Tag ในการควบคุมการแสดงผลของข้อความ รูปภาพ หรือวัตถุอื่น ๆ แต่ละ Tag อาจจะมีส่วนขยาย เรียกว่า Attribute สําหรับจัดรูปแบบเพิ่มเติม
การสร้างเว็บเพจ โดยใช้ภาษา HTML สามารถทำโดยใช้โปรแกรม Text Editor ต่างๆ เช่น Notepad, EditPlus หรือจะอาศัยโปรแกรมที่เป็นเครื่องมือช่วยสร้างเว็บเพจ เช่น Microsoft FrontPage, Dream Weaver ซึ่งอํานวยความสะดวกในการสร้างหน้า HTML ในลักษณะ WYSIWYG (What You See Is What You Get)
แต่มีข้อเสียคือ โปรแกรมเหล่านี้มัก generate code ที่เกินความจำเป็นมากเกินไป ทําให้ไฟล์ HTML มีขนาดใหญ่ และแสดงผลช้า ดังนั้นหากเรามีความเข้าใจภาษา HTML จะเป็นประโยชน์Sให้เราสามารถแก้ไข code ได้ตามความต้องการ และยังสามารถนำ script มาแทรก ตัดต่อ สร้างลูกเล่นสีสันให้กับเว็บเพจของเราได้
การเรียกใช้งานหรือทดสอบการทำงานของเอกสาร HTML จะใช้โปรแกรม Internet Web Browser เช่น Internet Explorer (IE), Mozilla Firefox, Safari, Opera, และ Netscape Navigator เป็นต้น

ส่วนประกอบที่สําคัญของภาษา HTML

ได้แก่ Tag และ Attribute
Tag คือ คําสั่งที่ใช้ในภาษา HTML อยู่ในเครื่องหมาย < และ > ใช้สําหรับจัดรูปแบบข้อความ ภาพหรือ วัตถุอื่นๆ ซึ่ง tag ในภาษา HTML ส่วนมาก จะมี tag เปิด และ tag ปิด เช่น
<h1>…</h1>  ใช้เน้นหัวข้อเรื่อง
<p>…</p>  ใช้จัดพารากราฟ
<b>…</b>  ใช้กำหนดให้ตัวอักษรเป็นตัวหนา
แต่บาง tag ก็ไม่มี tag ปิด เช่น 
<hr> ใช้สร้างเส้นคั่น
<br> ใช้สําหรับการขึ้นบรรทัดใหม่

Attribute เป็นส่วนขยายใน tag ใช้สําหรับจัดรูปแบบเพิ่มเติม เช่น ขนาด สี ระยะห่าง เป็นต้น ค่าของ attribute จะอยู่ในเครื่องหมาย "…"  เช่น
<p align="center">ข้อความในพารากราฟนี้จัดวางอยู่กึ่งกลางหน้าจอ</p>
<hr width="200" color="red" noshade> ใช้สร้างเส้นคั่นยาว 200 pixel สีแดงทึบ
ในการเขียน tag, attribute และค่าของ attribute  จะใช้์เป็นตัวอักษรพิมพ์เล็กหรือพิมพ์ใหญ่ก็ได้  แต่เพื่อให้เป็นไปตามมาตรฐานของ (X)HTML รุ่นใหม่ ขอให้ใช้เป็นตัวอักษรพิมพ์เล็กทั้งหมด และสำหรับ tag ที่ไม่มี tag ปิด ให้ใส่ เป็น " / >" เช่น <hr />, <br />

เริ่มต้นเขียน HTML5 ด้วย Dreamweaver CS5

เริ่มต้นเขียน HTML5 ด้วย Dreamweaver CS5

เรามาเริ่มต้นพัฒนาเว็บไซต์ด้วย HTML5 กันดีกว่าครับ หลังจากที่ทาง Adobe ได้เปิดตัว Dreamweaver CS5 ผมก็ได้ลองใช้งานมาได้สักพัก ก็ชอบในหลายๆ ฟังชั่นที่เพิ่มขึ้นมา และหนึ่งในที่เพิ่มขึ้นมาก็ขึ้นการรองรับ HTML5 มาด้วยนั้นเอง


ผมจึงจะมาแนะนำวิธีการเขียน HTML5 ในโปรแกรม Dreamweaver เวอร์ชั่นใหม่ เพียงแค่ตั้งค่านิดหน่อย เราก็จะสามารถพัฒนาเว็บไซต์ให้ถูกต้องตามมาตรฐาน HTML5 ได้แล้ว อย่ามัวช้ามาทำไปพร้อมกันเลยครับ

1. ไปที่เมนู Edit > Preferences..

เริ่มต้นเขียน HTML5

2. เลือกที่ New Document จากนั้นให้ตั้งค่าตั้งช่อง Default Document Type (DTD) เป็น HTML5 ตามภาพ

สอนเขียน HTML5

3.จากนั้นก็ OK

ได้แล้ว
เพียงเท่านี้ทุกครั้งที่เราสร้างไฟล์ใหม่ หรือพัมนาเว็บโดยใช้โปรแกรม Dreamweaver CS5 ไม่ว่าเราจะแทรกตารางหรือทำอะไรก็ตาม ก็จะเป็นไปตามมาตรญานของ HTML5 แล้วครับ เห็นไหมว่า พัฒนาเว็บไซต์โดยใช้มาตรฐานของ HTML5 มันง่ายนิดเดียว ลองนำเอาไปใช้ดูนะครับ รองรับว่าไม่ผิดหวังแน่นอน

ขอบคุณบทความจาก : http://www.html5.in.th

เปลี่ยน HTML เป็น XHTML

เปลี่ยน HTML เป็น XHTML

ขั้นตอนการเปลี่ยน HTML เป็นเอกสาร XHTML
HTML ( HyperText Markup Language) คือภาษาที่เอาไว้เขียนสร้างเว็บเพจ เป็นภาษาที่คนทั่วโลก รู้จักดี และมีเวบเพจนับล้านที่ใช้ภาษา HTML แต่ข้อเสียของภาษา HTML คือการแสดงผลผ่านบราวเซอร์ (browser)ของค่ายต่างๆ
เช่น Internet Explorer, Netscape, Opera, Mozilla และอื่นๆ อีกมากมาย การแสดงผลที่แตกต่างกัน โดยสิ้นเชิง โอมเพจที่ออกแบบสวยงาม ของคุณ อาจดูไม่ได้ หรือไม่สามารถเข้าดูได้ เมื่อเปิดผ่านบราวเซอร์ ค่ายอื่น
ทาง องค์กร W3C ได้นำเอา ภาษา HTML มาปรับปรุงใหม่ โดยยึดหลักการของ XML และได้เพิ่มกฎเกณฑ์บางอย่าง เพื่อให้การใช้งานมีความเข้มงวด และเป็นมาตรฐานยิ่งขึ้น และปูทางให้ตลาดบราวเซอร์ (browser) ปัจจุบัน และในอนาคต ที่ออกบราวเซอร์ใหม่ ให้ใช้มาตรฐานเดียวกัน ในการแสดงผล ได้อย่างถูกต้อง

และในอนาคต โฮมเพจของคุณ อาจจะไม่มีคำนี้ อีกต่อไป " โฮมเพจจะดูดีได้ ถ้าท่านเข้าชมด้วย Internet Explorer 5 ขึ้นไป " หรือ " Best view with Internet Explorer 5 or higher"


XHTML (Extensible HyperText Markup Language) มาตรฐานใหม่ 
และเป็นเรื่องที่ดียิ่ง หากท่านเริ่มต้น หรือปรับปรุงเวบเพจของท่าน ให้เป็น XHTML

เพื่อรองรับมาตรฐาน ในอนาคต
XHTML แปลงเอกสารด้วย Dreamweaver
Dreamweaver ตระกูล MX จะเครื่องมือ Convert ไฟล์ ให้เป็น XHTML
File > Convert > XHTML
ท่านสามารถ Convert ไฟล์ ASP, PHP ที่ใช้ไฟล์ร่วมกับภาษา HTML ได้
ข้อแตกต่าง ระหว่าง HTML กับ XHTML
อีลิเมนต์(element) และแอตทริบิวต์(attributes) จะต้องเขียนเป็นตัว พิมพ์เล็ก เท่านั้น
<body bgcolor="#cccccc">
อีลิเมนต์ ของ XHTML ที่ไม่ใช่อีลิเมนต์ว่าง (empty element)หรือไม่มีการเก็บข้อมูล
XHTML จะต้องเว้นช่องว่าง และมีแท็กปิด "< />" ด้วย
<br> ---------------> <br />
<hr> ---------------> <hr />
<form> จาก ของเดิม checked เปลี่ยนเป็น checked="checked"
<input type="checkbox" checked>
เป็น <input type="checkbox" checked="checked" />

จะต้องเว้นช่องว่าง และมีแท็กปิด "< />" ด้วย
<input type="text" name="formName" /> <img src="image.gif" />

การประกาศ DOCTYPE ของ XHTML ในส่วนบนสุดบรรทัดของทุกๆเพจ
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
DOCTYPE คือ การประกาศว่าเอกสารนี้ จัดอยู่ในประเภทใด และ
ตรวจสอบความถูกต้องกับ DTD เพื่อในกรณี กับ Browser ประเภทต่างๆ

ข้อมูลจาก : http://www.cannot.info/

การตั้งค่าภาษาไทยให้กับ Dreamweaver 8

หลายคนอาจสงสัย ว่าเวลาที่เราสร้างเอกสารด้วย Dreamweaver 8 แต่ละครั้งทำไมไม่สามารถพิมพ์ หรือแสดงผลภาษาไทยไม่ได้ ลองมาดูเทคนิคการตั้งค่าภาษาไทยให้กับ Dreamweaver 8 ซึ่งมีขั้นตอนง่ายๆ ดังนี้
ขั้นตอนการแก้ไข
1. เปิดโปรแกรม Dreamweaver 8 ดังภาพ
2. จากนั้นเลือกปุ่ม More... มนส่วนของ Create New ดังภาพ
3. จะพบหน้าต่างแสดงขึ้นมา ใ้ห้เลืิอกที่เมนู Preferences...
4. จากนั้นตั้งค่าดังภาพ
5. จากนั้นลองสร้างเอกสาร เพียงเท่านี้ในครั้งต่อไป เราก็จะใช้งานโปรแกรมในการทำเว็บภาษาไทย ได้อย่างไม่มีปัญหา ดังภาพ

การทำโฆษณาแบบพับเก็บได้

การทำโฆษณาแบบพับเก็บได้ หลายคนอาจจะสงสัยว่าเว็บดังๆ เขาทำโฆษณากันอย่างไรแบบที่วิ่งอยู่บนหน้าจอ แล้วยังสามารถพับเก็บได้ การทำก็มีด้วยกันหลายแบบเช่นรูปภาพ หรือไม่ก็ Flash ปัจจุบันก็ยังเป็นที่นิยมกันอยู่ มาดูการทำดีกว่าเดี๋ยวจะไม่เสร็จ
ขั้นตอนการทำ
1. เตรียมรูปภาพ โดยอาจจะวาด หรือเขียนปุ่มปิดไว้ในรูปด้วยโปรแกรมให้เรียบร้อย ดังภาพตัวอย่าง
2. จากนั้นวาด Layer ลงในเว็บเพจ 1 Layer พร้อมตั้งชื่อ "ads" ดังภาพ
3. จากนั้นนำรูปภาพที่เตรียมไว้วางใส่ลงไปใน Layer ใช้ Hotspot สร้างส่วนที่จะให้ผู้ใช้กดปุ่มปิดหน้าต่าง ดังภาพ
4. เลือกเครื่องมือ Behaviors (Shift+F3) ใช้ Action เครื่องมือ Show-Hide Layers สั่งให้ซ่อน Layer "ads" ดังภาพ
* ถ้า Show-Hide Layers ไม่ขึ้นให้เลือกที่จุด Hotspot ที่เราสร้างไว้ตอนแรกก่อน
5. จากนั้นให้สังเกตุที่เครื่องมือ Behaviors สถานะของ Mouse อยู่ที่ onMouseOver ให้เราทำการเปลี่ยนเป็น onClick ดังภาพ
* ถ้าไม่มีให้เลือกให้ไปแก้ที่โค้ดแทนก็ได้
 <== ก่อนที่ยังไม่ได้แก้
 <== หลังที่ได้ทำการแก้ไขโค้ดแล้ว
6. จากนั้นก็ทำการใส่ Link ให้กับรุปภาพตามปกติ (จะลิงค์มาที่ http://www.webthaidd.com/ ก็ได้นะครับ)
7. จากนั้นก็ลองทดสอบการทำงานดูครับ (รับรองว่าโปรแกรมอะไรก็มา Block ไม่อยู่)

การสร้างเงาให้ตารางใน Dremweaver

การสร้างเงาให้ตารางใน Dremweaver
1. ให้ทำการสร้างไฟล์ Pixels img ขึ้นมาก่อน โดยใช้ Photoshop สร้างไฟล์ใหม่
File --> New แล้วกำหนด Contents = Transparent และปรับความสูงความกว้าง เท่ากับ 5 จากนั้นเราก็จะได้ไฟล์ใหม่ที่มีลักษณะโปร่ง จากนั้นให้ทำการ Save For Web โดย กำหนดให้เป็นไฟล์เป็นนามสกุล Gif เราก็จะได้ไฟล์ pixels.gif (ให้บันทึกชื่อ
pixels)
2. ให้การเปิดโปรแกรม Dreamweaver ขึ้นมาจากนั้นให้ใส่Table 2 Columns โดยคลิ๊กไอค่อนรูป Table หรือใช้คำสั่ง Insert --> Table แล้วให้ตั้งค่าดังตัวอย่าง
3. จากนั้นให้ใส่ Table โดยใช้ขั้นตอนที่(หรือทำการคลิ๊กที่Table แล้วทำการ Copy แล้ว Paste อีก 2 บรรทัด) เพิ่มอีก 2 ดังตัวอย่าง
4. ให้ทำการใส่สีพื้นหลัง Table แถวที่ 1. ใน Columns ที่ 1เป็นสีพื้นหลังของเมนู Columns 2. ไม่ต้องใส่. ก็จะได้ดั่งตัวอย่าง.
5. ให้ทำการใส่สีพื้นหลัง Table แถวที่ 2. ใน Columns ที่ 1เป็นสีพื้นหลังของเมนู Columns 2. ไม่ต้องใส่. ก็จะได้ดั่ง ตัวอย่าง.
6. ให้ทำการใส่สีพื้นหลัง Table แถวที่ 2. Columns ที่ 2. เป็นสีพื้นของเงา (โคสสี #C0C0C0) แล้วใส่ Table แถวที่ 3. Columns 2. เป็นสีเงาเหมือน แถวที่ 2. ดังตัวอย่าง
7. เมื่อเราได้โครงร่าง Table ดังตัวอย่างแล้วหลังจากนั้นให้ทำการปรับแต่งโดยการกำหนดความกว้างภายใน Columns แต่ ละ Columns และ ใช้ pixels.gif กำหนดความสูงความกว้างในแต่ละ Columns โดยมีขั้นตอนดังต่อไปนี้
7.1 ให้การทำงานมาอยู่ที่ table แถวที่1. จากนั้นให้เคอร์เซอร์อยู่ใน Columns ที่1. แล้วให้ใส่ไฟล์pixels.gif ไป โดย คลิ๊กเลือกไอค่อนรูปภาพ แล้วปรับความกว้างในColumns ที่ 2. เท่ากับ 5 จากนั้น Table ก็จะหมดความขนาดของ pixels.gif ดังตัวอย่าง.
7.2 จากนั้นให้การทำงานอยู่ที่ Table แถวที่2. แล้วให้พิมพ์ข้อมูลลงไปใน Columns ที่1. แล้วใส่ Pixels.gif ลงไปใน Columns ที่2. แล้วใสความกว้างของ Columns = 5 ลักษณะ Table ก็จะหดตัวดังตัวอย่าง
7.3 จากนั้นให้การทำงานอยู่ที่ Table แถวที่3. แล้วให้ทำการใส่ Pixels.gif ลงไปในColumns ทั้งสองแล้วปรับค่าความ กว้างของ Colums แรก เท่ากับ 5 แล้ว Table ก็จะหดตัวเท่ากับความสูงของ pixels.gif


จากนั้นเราลองทำการแสดงผลที่ Browser ก็จะเห็นเมนูมีลักษณะมีเงาลอยออกมาจากพื้นดังตัวอย่าง ก็เป็นอันเสร็จกระบวนการ.

แนะนำเครื่องมือใหม่ Adobe Dreamweaver CS3

แนะนำเครื่องมือใหม่ Adobe Dreamweaver CS3
1. เริ่มจากเครื่องมือพื้นฐานการสร้างเว็บเพจกันก่อน เครื่องมือแรกที่ Adobe เตรียมมาให้สำหรับคนที่ชอบเขียนเว็บเพจด้วย CSS มี Template ให้เราได้เลือกใช้ตามความเหมาะสมของหน้าเว็บกันหลายรูปแบบ ดังภาพตัวอย่าง
2. เครื่องมือใหม่ที่ Adobe เตรียมมาให้นักพัฒนาเว็บไซต์ เพื่อช่วยในการจัด Content ภายในหน้าเว็บเพจให้เป็นระเบียบ และง่ายกว่าเดิมที่ต้องมานั่งเขียน Java Script นั่นก็คือเครื่องมือที่ชื่อว่า Spry มีด้วยกันหลายเครื่องมือตัวอย่างเช่น
เครื่องมือ Spry Menu Bar ดูจากรูปก็พอจะเดากันออกเลยใช่ไหมครับ เครื่องมือนี้ช่วยจัดการเมนูของเว็บไซต์
เครื่องมือ Spry Tabbed Panels
ยังมีเครื่องมือ Spry อื่นๆ อีกมากมายทั้งที่ใช้กับโปรแกรมมิ่งก็มี ฟอร์มต่างๆภายในเว็บไซต์ เอาไว้ผมจะรวบรวมทำเป็นบทความมาให้นำไปประยุกต์ใช้ในโอกาสต่อไปนะครับ
3. เครื่องมือที่แถบ Properties ที่จะช่วยเชื่อโยงรูปภาพกับโปรแกรมตบแต่งรูปภาพของ Adobe เข้าด้วยกัน ดังตัวอย่าง
4. เครื่องมือช่วยตรวจสอบ Script ที่เราเขียน หรือรูปแบบว่าสามารถใช้งานร่วมกันได้ทุก Browsers หรือไม่ ดังภาพตัวอย่าง
และเครื่องมืออื่นๆ อีกมากมาย ซึ่งผมและทีมงานจะทยอยเรียบเรียงเป็นบทความ เพื่อนำมาให้ศึกษา และประยุกต์ใช้งาน ให้เข้ากับเทคโนโลยีของ Software ปัจจุบันในโอกาสต่อไปครับ

Macromedia Deramweaver Coursebuilder 4

Macromedia Deramweaver Coursebuilder 4
การสร้าง Web-Base Instruction สิ่งที่จำเป็นและขาดเสียมิได้หากขาดไปแล้ว Web-Base Instruction นั้นก็จะไม่สมบรูณ์ตามกระบวนการระบบ สิ่งที่ขาดไม่ได้นั้นก็คือแบบทดสอบ แบบทดสอบจะช่วยให้ผู้สอนและผู้เรียนทราบผลสัมฤิทธิ์ในการเรียนการสอนนั้นๆ ชนิดของแบบทดสอบได้แก่ แบบทดสอบก่อนเรียน แบบทดสอบระหว่างเรียน และแบบทดสอบหลังเรียน นอกจากนี้ก็ยังมีอีกมากมายตามความเหมาะสมของการออกแบบการเรียนการสอน
(Instructional Design)
การสร้างแบบทดสอบ Online สามารถสร้างได้หลายวิธีเช่น สร้างโดยใช้ภาษา(Programming) โดยใช้หลักการ CGI (Common Gateway Interface) ซึ่งเป็นวิธีที่เหมาะสำหรับผู้ที่มีความชำนาญการเขียนโปรแกรมค่อนข้างสูง แต่ไม่เหมาะสมกับผู้ที่กำลังเริ่มต้น Macromedia Dreamweaver Course Builder เป็น Application หนึ่งที่ช่วยอำนวยความสะดวกสะบาย โดยที่ผู้ใช้ไม่จำเป็นต้องรู้เรื่องหรือมีความสามารถด้าน CGI Programming เลยโปรแกรม Dreamweaver CourseBuilder สามารถสร้างแบบทดสอบได้มากมายหลายชนิด อาธิเช่น แบบปรนัย แบบอัตนัย แบบจับคู่ แบบเติมคำ ฯลฯ สำหรับการอบรมครั้งนี้ขออนุญาตแนะนำเฉพาะการสร้างแบบทดสอบชนิดปรนัย (Multiple Choice ) เท่านั้นเนื่องจากข้อจำกัดด้านเวลา
เริ่มต้นการใช้โปรแกรม
การเข้าสู่โปรแกรม
1. เริ่ม Start แล้วเลือกโปรแกรม Dreamweaver 4.0 ดังภาพ
การเรียกใช้ Course Builder
2. จากนั้นโปรแกรมจะปรากฎดังภาพ ให้คลิกเมนู Insert Course Builder Interaction

การ Save งาน
3. หากยังไม่เคย Save งานเลย Programs จะสั่งให้ Save โดยคลิกปุ่ม OK

4. เลือก Directory ที่ต้องการจัดเก็บ 5. กำหนดชื่อ File

6. Programs จะทำการ Copy File ที่จำเป็น
ในการสร้างแบบทดสอบลงไปโดยจะสร้าง
Subdirectory script และ image ให้คลิก OK


เลือกแบบทดสอบ
7. จากนั้นจะแสดงกรอบสำหรับให้เลือกชนิดของแบบทดสอบ
8. เลือกลักษณะของแบบ Multiple Choice
9. เมื่อเลือกชนิดและลักษณะของทดสอบเสร็จสิ้นแล้ว ให้คลิก เมนู General

กำหนดข้อคำถาม
10  กำหนดข้อคำถามลงภายในกรอบ Question Text
11 จากนั้นคลิกเมนู Choices

กำหนดตัวเลือก
12  เลือก Choices หรือตัวเลือกที่ 1 ในช่อง Choices
13 เขียนข้อความของตัวเลือกในช่อง Text(Optional)
14 กำหนดข้อที่ต้องการให้ถูกหรือผิด ในช่อง Choice Is และกำหนดคะแนนในช่อง Score ดังภาพ

15 เลือก Choices หรือตัวเลือกที่ 2 ในช่อง Choices
16 เขียนข้อความของตัวเลือกในช่อง Text(Optional)
กำหนดข้อถูกหรือผิด
17 กำหนดข้อที่ต้องการให้ถูกหรือผิด ในช่อง Choice Is ดังภาพ

18. ทำเช่นนี้ต่อไปจนกว่าจนหมดตัวเลือก หากเพิ่มตัวเลือกให้คลิกที่ปุ่ม Add
19 และต้องการสลับตัวเลือกก็สามารถทำได้โดยคลิกปุ่ม Up หรือ Down ตามความต้องการ
20 เมื่อได้แบบทดสอบตามความพอใจแล้วให้คลิกปุ่ม OK

การออกจากโปรแกรม
การปิดโปรแกรมสามารถทำได้ 2 วิธีคือ
วิธีที่ 1. ไปที่ เมนู File แล้วเลือก แล้วเลือก Exit ดังภาพ 

วิธีที่ 2. คลิ๊กที่ปุ่ม Close 
จากขั้นตอนการใช้โปรแกรม Dreamweaver CourseBuilder ที่กล่าวไปพอสังเขป
ซึ่งพอจะเป็นแนวทางให้ท่านสร้างแบบทดสอบแบบ Online เบื้องต้น เพื่อประกอบการสร้าง Web-Based Instruction แต่สิ่งที่จำเป็นเหนืออื่นใดที่ท่านน่าจะให้ความสำคัญเป็นอย่างมากก็คือ การออกแบบบทเรียน (Instructional Design) หากขาดซึ่งการออกแบบบทเรียนแล้วก็เท่ากับเป็นการสร้างบ้านโดยไม่มีแบบแปลน