1. 1
รายงาน
เรือง วิธีการใช้งาน COMMON
เสนอ
อาจารย์ส ุชาติ นาดี
จัดทําโดย
นางสาวพรรณนิดา มาศทอง เลขที 19
นางสาววราภรณ์ ประท ุมศรี เลขที 21
ชันมัธยมศึกษาปที 5/3
ี
รายงานเล่มนีเปนส่วนหนึงของวิชาคอมพิวเตอร์
็
โรงเรียนรมย์บ ุรีพิทยาคม รัชมังคลาภิเษก
ปการศึกษา 2554/2
ี 2554/2

2. 2
คํานํา
รายงานฉบับนีได้จดทําขึน เพือประกอบการศึกษาวิชา คอมพิวเตอร์ เรื อง วิธีการใช้งาน Common
ั
ซึ งผูจดทําได้ศึกษาค้นคว้าหาข้อมูลจากแหล่งข้อมูลต่างๆ เพือให้ผทีสนใจได้ประโยชน์จากการศึกษารายงาน
้ั ู้
เรื องวิธีการใช้งาน Commonฉบับนี ซึ งได้รวบรวบสาระน่ารู ้เกียวกับการใช้ Common ในการทําเว็บไซต์ไว้
มากมาย โดยมี อาจารย์สุชาติ นาดี เป็ นผูให้คาปรึ กษาแนะนําประกอบการทํารายงานนี หากผิดพลาด
้ ํ
ประการใด ทางคณะผูจดทําต้องขออภัยมา ณ ทีนีด้วย
้ั
ผู ้จัดทํา

3. 3
สารบัญ
เรือง หน้ า
Common 4
การใช้งาน Common 4

4. 4
Common
เป็ นกลุ่มคําสังทีใช้แทรกออบเจ็คทีใช้งานบ่อย ๆ ในการสร้างเว็บเพจ เช่น ภาพกราฟิ ก ตาราง และ
ไฟล์มลติมีเดีย เป็ นต้น
ั
รูปภาพ ชือเครืองมือ วิธีการใช้ งาน
การเชือมโยงไฟล์ หรื อการเชื อมโยงเข้าสู่ เว็บไซค์ต่าง ๆ และ
Hyperlink สามารถกําหนดข้อมูลว่าต้องการให้เปิ ดหน้าต่างเบราเซอร์
ใหม่ หรื อเชือมโยงในหน้าต่างปั จจุบนก็ได้
ั
Text พิมพ์ขอความทีต้องเชื อมโยง
้
Link กําหนดไฟล์ หรื อเว็บทีเชือมโยง
Target กําหนดการปรากฏของข้อมูล
_blank ่
เปิ ดหน้าต่างเบราเซอร์ วางเปล่าขึนมา
_parent เปิ ดหน้าต่างเบราเซอร์ และกลับไปหน้าต่างปั จจุบนั
_self เปิ ดหน้าต่างเบราเซอร์ ทีมีการตกลงขึนมา
_top เปิ ดหน้าต่างเบราเซอร์ ใหม่ขึนมาแทนทีทังหมด
Tab Index พิมพ์ป้อนจํานวนแท็บ
_Title พิมพ์ขอความทีต้องการให้ปรากฏเมือนําเมาส์ไปชี
้
Access Key พิมพ์แป้ นคียบอร์ ดทีใช้ในการเชื อมโยง
์
Email Link การเชือมโยงข้อมูลฝ่ านทางอินเตอร์ เน็ต โดยใช้อีเมล์เปนตัวก
ลางในการติดต่อ ด้วยสร้างตัว Link ด้วยปู่ ม Email Link และที
ช่อง Link จะปรากฏคําว่า mailto: และตามด้วย อีเมล์แอดเดรส
ทีใช้ในการติดต่อ
Text พิมพ์ขอความทีต้องเชื อมโยงทางอีเมล์
้
E-Mail พิมพ์อีเมล์แอดเดรสทีใช้ในการเชื อมโยง
Named Anchor จุดอ้างอิง ใช้ในการทําลิงค์ในหน้าเว็บเดียวกัน โดยสามารถ
่
เลือกกําหนดได้วา จะให้เปิ ดทีส่ วนไหนของหน้านันๆ
Table ใช้ในการสร้างตาราง

5. 5
Table ld ั
เป็ นการตังชือให้กบตาราง
Align คือการกําหนดทิศทางของตาราง
Bg Color กําหนดสี พืนหลังของตาราง
Brdr กําหนดสี ของกรอบตาราง
Bg Image กําหนดพืนหลลังของตารางโดยใช้รูป
Horz กําหนดทิศทางของข้อความหรื อรู ปทีเราได้ใส่ ไป Columns
นัน โดยมี ซ้าย ขวา กลาง
Vert กําหนดทิศทางของข้อความหรื อรู ปทีเราได้ใส่ ไป Columns
นัน โดยมี บน กลาง ล่าง
สามารถใช้เพือเพิมทีว่างเปล่า div ทีตําแหน่งของเคอร์ เซอร์ บน
Insert Div Tag หน้าเว็บ Dreamweaver แทรกบางข้อความ dummy เมือแทรก
div ทีทีตําแหน่งเคอร์ เซอร์ ซึงจะมีประโยชน์เพราะช่วยให้คุณ
บางสิ งบางอย่างทีจะคว้าเมือมีการเพิมเนื อหาของคุณเอง
Image การแทรกรู ปภาพ
Image ตัวยึดรู ปภาพ
Placeholder
Rollover Image คือ การทําเทคนิคภาพบนเว็บเพจให้ดูแปลก
ตาไป กล่าว คือ รู ปจะแสดงผลเปลียนไป เมือเราลากเมาส์
ผ่าน โดยเราจะต้องมีรูป 2 รู ป ทีมีขนาดเท่าๆกัน ให้รูป 2 รู ปมี
Rollover Image
ขนาดเท่าๆกัน ให้รูปนึงเป็ นรู ปปกติและมีอีกรู ปถูกเรี ยกขึนมา
แทนเมือลากเมาส์ผาน ่
Original Image ภาพต้นฉบับ สําหรับแสดงเป็ นรู ปปกติ
Rollover Image ภาพทีใช้สลับขึนมา
Alternate text ข้อความทีแสดงขึนมาตอนนําเมาส์ไปวาง
When Clicked,Go to กําหนดปลายทางทีจะลิงค์ไป
url
Fireworks สามารถแก้ไขภาพได้ ภาพจะถูกปรับในเว็บเพจโดยอัตโนมัต
HTML เมือสังบันทึกไฟล์
Navigation Bar คือ การสร้างปรับเปลียนแบบ 4 ลักษณะ คือ
Navigation Bar 1. เมือนําภาพปกติ 2. เมือนําเมาส์ไปวาง 3. เมือแทรกการคลิก

6. 6
เมาส์ 4. เมือคลิกเสร็ จภาพจะปรากฏขึนมา
Nav bar elements ชือของภาพ
Element name ชือของภาพ
Up image ภาพปกติก่อนนําเมาส์ไปวาง
Over image ภาพทีเปลียนเมือนําเมาส์ไปวาง
Down image ภาพทีเปลียนเมือคลิกเมาส์ไปวาง
Over while Down ภาพทีเปลียนเมือคลิกเมาส์แล้วปล่อย
Alternate text กําหนดข้อความทีปรากฏเมือนําเมาส์ไปวาง
Go to URL กําหนดลิงค์ไปเว็บเพจอืนๆ
Draw Rectangle ใช้สาหรับการวาดรู ปสี เหลียมหรื อสี เหลียม
ํ
Hotspot
Draw Oval ใช้สาหรับการวาดรู ปวงรี หรื อวงกลมเกียวกับเรื องยากทีจะ
ํ
Hotspot แผนทีภาพ
Draw Polygon ใช้สาหรับรายละเอียดทีซับซ้อนมากขึนของฮอตสปอตทีชอบ
ํ
Hotspot วาดรู ปทัวประเทศหรื อรู ปร่ าง
การใช้มลติมีเดียต้องใช้เทคโนโลยีสาคัญได้แก่ Flash Java
ั ํ
Media Java applet Shockwave Plugin และ ActiveX Control ซึ ง
ปั จจุบนได้กลายเป็ นมาตรฐาน สําหรับสร้างเว็บเพจทัวไป
ั
Flash เป็ นไฟล์ภาพเคลือนไหวทีเกิดจากโปรแกร
จากโปรแกรMacromedia
Flash ขนาดไฟล์ค่อนข้างเล็กเพราะเป็ นภาพแบบ Vector-
Based ใช้ลายเส้นสร้างภาพ มีนามสกุลไฟล์แบบ .swf โดยผูใช้ ้
Flash
ต้องติดตังโปรแกรม Flash Player กับเว็บเบราว์เซอร์ ก่อนจึง
จะใช้งานได้
Flash Button เป็ นการสร้างปุ่ มกดด้วยไฟล์ Flash เพือให้เกิด
Flash Button การเคลือนไหวต่างๆ บนปุ่ ม เช่น เลือนบางส่ วน เปลียนสี การ
เชือมโยง ฯลฯ ซึ งจะมีแบบสําเร็ จให้เลือกใช้อตโนมัติ
ั
Sample แสดงตัวอย่างของรู ปแบบ Flash Button ทีเราต้องการ
Style เลือกรู ปแบบของ Button
Button Tex ทําการพิมพ์ขอความทีต้องการให้ปรากฏบน Button
้
Font เลือกรู ปแบบ Font ทีต้องการ

7. 7
Size เลือกขนาดของ Font
Link ่
ทําการกําหนด Link ทีต้องการ ในกรณี ทีอยูใน Site เดียวกัน
ให้ทา Browser.. ไปยังเพจทีต้องการได้ทนที แต่หากอยูนอก
ํ ั ่
Site ให้ทาการพิมพ์ URL ในแบบต็มลงไป
ํ
Target เลือกกําหนดการเปิ ด Link ไปยัง Window ทีต้องการ
Bg Color เลือกสี พืน Background
Save As เลือก หรื อ พิมพ์ชือไฟล์ทีต้องการบันทึกไฟล์ Button นี
Flash Text เป็ นการสร้างข้อความเพือลิงก์ไปยังจุดหมายที
Flash Text ต้องการโดย Flash จะเป็ นข้อความแบบเคลือนไหว หรื อมี
ลูกเล่นต่างๆ
Flashpaper ไฟล์รูปแบบของ Flash คือมีนามสกุลเป็ น SWF
Flash Video ไฟล์ทีมีลกษณะเป็ นภาพยนต์ในรู ปแบบ Format ของ Flash
ั
การทําภาพเคลือนไหว
Video Type เลือกรู ปแบบของการแสดงไฟล์ ให้เราเลือกแป็ น Progressive
URL ทําการ Browser เลือกไฟล์ Flv ทีเราจัดเตรี ยมไว้
Skin เลือกหน้าตาของ Control
Width และ Hight กําหนดความกว้างและสู งของ Movie ทีเราต้องการแสดง หาก
ต้องการให้โปรแกรมหาค่าความกว้างและสู งของ Movie ให้
ทําการกดปุ่ ม Detect Size
Auto Play กําหนดให้เล่น Movie โดยอัตโนมัติ
Auto Rewind ั ่
กําหนดให้หวอ่าน Movie กลับมาอยูในจุดเริ มต้นของ Movie
Propt Users…. กําหนดการแจ้งให้ผชมทราบถึงการ Dowload Flash Player
ู้
เวอร์ ชนใหม่ ทีสามารถรับชมไฟล์ Flash Video นีได้
ั
Shockwave เกิดจากการแปลงไฟล์จากโปรแกรม
Macromedia Director และ Autoware เพือให้ไฟล์มีขนาดเล็ก
ลงเหมาะ กับการแสดงบนเว็บเพจ โดยโปรแกรม Director
ั
เหมาะ ให้กบการสร้างเกมส์ และงานมัลติมีเดียพรี เซนเตชัน
Shockwave
ส่ วนโปรแกรม Autoware เหมาะสําหรับสร้างงานมัลติมีเดีย
ช่วยสอน หรื อ CAI (Computer Aids Instruction)เมือแปลง
เป็ นไฟล์Shockwave แล้วจะต้องติดตังโปรแกรม Shockwave

8. 8
Player กับเว็บเบราว์เซอร์ ก่อนจึงจะใช้งานได้
Java applet เป็ นโปรแกรมขนาดเล็กสร้างเกมส์ทีสร้างด้วย
Applet ภาษา Java ทําหน้าทีเฉพาะเจาะจง เช่น เกมส์ ภาพเคลือนไหว
ฯลฯ โปรแกรม Java appletจะถูกดาวน์โหลดมาจากเว็บ
เซิ ร์ฟเวอร์ พร้อมกับเนือหาและทํางานอัตโนมัติบนเว็บ
เบราว์เซอร์
Param
ActiveX เป็ นโปรแกรมขนาดเล็กซึ งเรี ยกว่า "คอลโทรล
Activex (Control)" ทําหน้าทีเฉพาะตามทีเขียนโปรแกรมไว้ ถูกเรี ยกใช้
โดยดาวน์โหลดจากเซิ ร์ฟเวอร์ มา ทํางานบนเครื องอัตโนมัติ
เช่น การสร้างภาพ 3 มิติ การหมุนภาพแบบ 360 องศา ฯลฯ
Plugin Plugin เป็ นโปรแกรมเสริ มทีทํางานร่ วมกับเว็บเบราว์เซอร์
Date การแทรกวันที
บนเว็บแม่ข่าย Apache สามารถใช้ SSI (Server Side Includes)
Server-Side คือ คําสังทีวางในเพจ HTML และได้รับการประเมินบนแม่
ข่ายขณะทีให้บริ การกับเพจ สําหรับการสร้างข้อมูลอย่างไดนา
Include
มิคส์ โดยปราศจากการบริ การผ่านโปรแกรม CGI หรื อ
เทคโนโลยีแบบไดนามิคส์อืน
Comment แทรกข้อคิดเห็นทีจุดแทรก
Make Template การสร้าง Template ในDreamweaver เพือเป็ นต้นแบบของ
หน้าเว็ป
Make Nested ทําให้แม่แบบทีซ้อนกัน
Template
Editable Region แทรกขอบเขตทีแก้ไขได้
แทรกตัวเลือกภูมิภาค
1ใช้พืนทีทีจําเป็ นเพือควบคุมเนือหาทีอาจจะหรื ออาจจะไม่
ปรากฏในเอกสารทียึดตามแม่แบบ มีสองประเภทของพืนทีที
เลือกคือ :ไม่สามารถแก้ไขได้ในภูมิภาคจําเป็ นซึ งจะช่วยให้
ผูใช้แม่แบบในการแสดงและซ่อนพืนทีพิเศษโดยไม่ตองมีการ
้ ้

9. 9
ทําเครื องหมายช่วยให้พวกเขาเพือแก้ไขเนือหาแท็บแม่แบบ
่ ั
Optional Region ของพืนทีทีเลือกจะนําหน้าด้วยคําว่าถ้า ขึนอยูกบเงือนไขที
กําหนดในแม่แบบทีผูใช้แม่แบบทีสามารถกําหนดว่าพืนทีนัน
้
สามารถดูได้ในหน้าพวกเขาสร้าง2ภูมิภาคทีสามารถแก้ไขได้
ไม่จาเป็ นซึ งจะช่วยให้ผใช้แม่แบบการตังค่าการแสดงให้เห็น
ํ ู้
ว่าภูมิภาคหรื อซ่อนและช่วยให้พวกเขาเพือแก้ไขเนื อหาใน
ภูมิภาคนีตัวอย่างเช่นถ้าในภูมิภาคไม่จาเป็ นรวมถึงภาพหรื อ
ํ
ข้อความทีผูใช้แม่แบบทีสามารถกําหนดว่าเนือหาทีจะแสดง
้
เช่นเดียวกับทําการแก้ไขเนื อหาได้ถาต้องการขอบเขตทีแก้ไข
้
ได้จะถูกควบคุมโดยคําสังเงือนไข
Repeating การเพิมลบและเปลียนลําดับของรายการพืนทีทําซํา
Region
ตังค่าสําหรับพืนทีทีไม่จาเป็ น
ํ
Editabble สามารถแก้ไขการตังค่าตัวเลือกภูมิภาคหลังจากทีคุณได้แทรก
่
Optional Region ภูมิภาคในแม่แบบ ตัวอย่างเช่นคุณสามารถเปลียนได้ไม่วาจะ
เป็ นค่าเริ มต้นสําหรับเนือหาทีจะแสดงหรื อไม่ทีจะเชื อมโยง
่
พารามิเตอร์ ไปยังภูมิภาคจําเป็ นทีมีอยูหรื อการปรับเปลียนการ
แสดงออกของแม่แบบ
แทรกตารางการทําซํา ใช้ตารางการทําซําเพือขอบเขตทีแก้ไข
Repeating Table ได้ (ในรู ปตาราง ) ทีมีแถวซํา สามารถกําหนดคุณลักษณะของ
ตารางและการตังค่าทีเซลล์ตารางสามารถแก้ไขได้
Rows กําหนดจํานวนแถวของตารางได้
Columns กําหนดจํานวนคอลัมน์ของตารางทีมี
Cell Padding กําหนดจํานวนของพิกเซลระหว่าเนื อหาของเซลล์และ
ขอบเขตเซลล์
Cell Spacing กําหนดจํานวนของจุดภาพพิกเซลระหว่างเซลล์ตารางทีอยู่
ติดกัน
Width ระบุความกว้างของตารางเป็ นพิกเซลหรื อเป็ นเปอร์ เซ็นต์ของ
ความกว้างของหน้าต่างเบราว์เซอร์
Border ระบุความกว้างในพิกเซลของเส้นขอบของตาราง
่ ่
Repeat Rows of ระบุวาแถวในตารางจะรวมอยูในพืนทีทําซํา

10. 10
the Table
Starting Row ่
จํานวนแถวทีป้ อนเป็ นแถวแรกทีจะรวมอยูในภูมิภาคทําซําชุด
Ending Row จํานวนแถวทีป้ อนเป็ นแถวสุ ดท้ายทีจะรวมในพืนทีการทําซํา
ชุด
Region Name ช่วยให้ตงชือไม่ซาสําหรับพืนทีทําซํา
ั ํ
Tag Chooser แทรกแท็กทีมีตวเลือกแท็ก
ั
บรรณานุกรม
http://www.google.co.th/
http://livedocs.adobe.com/en_US/Dreamweaver/9.0/WSc78c5058ca073340dcda9110b1f693f21-7bc2.html
http://livedocs.adobe.com/en_US/Dreamweaver/9.0/help.html?content=WScbb6b82af5544594822510a94
ae8d65-7aad.html