123

โครงงานคอมพวิ เตอร์ระดบั มธั ยมศึกษาตอนตน้ ประเภทโครงงาน การสร้างโปรแกรม Dreamweaver MX เร่ือง การสร้าง Web Site เช่ือมโยงไปยงั Web Site อื่นๆ ผจู้ ดั ทา นางสาวภทั ฐิตา ถนอมสตั ย์ ช้นั มธั ยมศึกษาปี ที่ 3 / 1 เลขที่ 33 ครูท่ีปรึกษา คุณครูณฐั มน เเสงจารัส โครงงานเล่มน้ีเป็ นส่วนหน่ึงของกลุ่มสาระเทคโนโลยี และการงานอาชีพ ภาคเรียนที่ 2 ปี การศึกษา 2548 โรงเรียนปรีชานุศาสน์ ชลบุรี

โครงงานคอมพิวเตอร์ระดบั มธั ยมศึกษาตอนตน้ ประเภทโครงงาน การสร้างโปรแกรม Dreamweaver MX เรื่อง การสร้าง Web Site เช่ือมโยงไปยงั Web Site อ่ืนๆ ผจู้ ดั ทา นางสาวภทั ฐิตา ถนอมสตั ย์ ช้นั มธั ยมศึกษาปี ที่ 3 / 1 เลขท่ี 33 ครูที่ปรึกษา คุณครูณฐั มน เเสงจารัส โครงงานเล่มน้ีเป็นส่วนหน่ึงของกลุ่มสาระเทคโนโลยแี ละการงานอาชีพ โรงเรียนปรีชานุศาสน์ ชลบุรี ..................................................................... บทคดั ยอ่ โครงงานน้ีมุ่งหมายเพ่ือจะศึกษาเกี่ยวกับวิธีและข้ันตอนการ สร้างโปรแกรม Dreamweaver MX เพ่ือจะไดน้ าไปใชใ้ นการเป็นการ สื่อการเรียนการสอนเพราะว่ามีท้งั เน้ือหาและแบบฝึ กหัดโดยไดล้ องใช้ ประโยชน์ท้งั ทางตรงและทางออ้ มเพราะนอกจากน้ียงั สามารถไปใชใ้ น การเรียนการสอนอีกดว้ ย

กิตติกรรมประกาศ โครงงานคอมพิวเตอร์เล่มน้ีจะกล่าวถึงเร่ือง การสร้าง Web Site เพื่อ เช่ือมโยงไปยงั Web Site อ่ืนๆ โดยใชโ้ ปรแกรม Dreamweaver MX จนประสบ ความสาเร็จเป็ นอย่างดี และตลอดมาไดร้ ับความอนุเคราะห์จาก คุณครูณัฐมน แสงจารัสเป็ นอยา่ งดี ที่ไดใ้ ห้ขอ้ เสนอ และคาแนะนาในการแกไ้ ขปัญหาต่างๆ ในการทาโครงงาน ตลอดจนได้เสนอแนวทางการศึกษาค้นควา้ ตาราใน การศึกษาโปรแกรม Dreamweaver MX จนประสบความสาเร็จลุล่วงไปได้ ดว้ ยดี - ขอขอบพระคุณห้องสมุด ท่ีไดใ้ ห้ผจู้ ดั ทาไดศ้ ึกษา และคน้ หาขอ้ มูล ต่างๆในการจดั ทาโครงงาน - ขอขอบพระคุณคุณครูที่ปรึกษา ท่ีไดใ้ ห้คาแนะนา และแนวทางใน การแกไ้ ขปัญหาต่างๆในการจดั ทาโครงงานเล่มน้ี

บทที่ 1 บทนา 1. แนวคิด และความสาคญั ของโครงงาน 1.1 ท่ีมา และความสาคญั ของโครงงาน คอมพิวเตอร์เป็นอุปกรณ์ชนิดหน่ึงที่ใชใ้ นการศึกษา คน้ ควา้ ขอ้ มลู ที่มีความ จาเป็นอยา่ งมากในปัจจุบนั และรวมถึงประโยชนท์ ่ีมีความจาเป็นต่อการศึกษา ต่างๆมากมาย เหมาะสาหรับท่ีจะทาผลงานเสนอโดยผา่ นโปรแกรมที่ช่วยสอน คอมพิวเตอร์น้นั มีโปรแกรม หรือขอ้ มูลท่ีใหเ้ ราตอ้ งศึกษาอีกมากมาย ใน บางคร้ังที่เราอ่านหนงั สือกอ็ าจจะรู้สึกเบื่อหน่าย และถา้ เรามีความสนใจในการ ดา้ นคอมพิวเตอร์กจ็ ะทาใหเ้ รามีความรู้ความเขา้ ใจในโปรแกรมต่างๆมากยง่ิ ข้ึน เน้ือหาของโครงงานเลม่ น้ีจะเป็นในเร่ืองการสร้าง W e b S i t e เพื่อ เช่ือมโยงไปยงั Web Site อื่นๆโดยใชโ้ ปรแกรม Dreamweaver MX เป็นตวั ที่ทา หนา้ ที่เป็นตวั ช่วยสอนในการจดั ทาโครงงาน 2. จุดมุ่งหมายของการศึกษาคน้ ควา้ 2.1 เพ่ือศึกษาคน้ ควา้ เกี่ยวกบั การใชโ้ ปรแกรม Dreamweaver MX 2.2 เพื่อศึกษาคน้ ควา้ ในการสร้าง Web Site เช่ือมโยง Web Site อ่ืนๆ 2.3 เพ่ือศึกษาข้นั ตอนในการสร้างโปรแกรม Dreamweaver MX เป็น Web Site ของตนเอง 3. ขอบเขตในการศึกษา 3.1 ไดศ้ ึกษาคน้ ควา้ เกี่ยวกบั การสร้าง Web Site เป็นของตนเอง 3.2 ไดศ้ ึกษาถึงข้นั ตอนในการสร้าง Web Site มากยง่ิ ข้ึน 3.3 มีความรู้ความเขา้ ใจในโปรแกรม Dreamweaver MX เพิ่มข้ึน

4. ประโยชน์ที่คาดวา่ จะไดร้ ับ 4.1 ทาใหท้ ราบถึงเร่ืองราวเก่ียวกบั การสร้าง Web Site ของตนเอง 4.2 มีความเขา้ ใจเก่ียวกบั โปรแกรม Dreamweaver MX มากยง่ิ ข้ึน 4.3 เป็นการเสริมสร้างทกั ษะในการสร้าง Web Site เพ่ิมมากข้ึน 5. ปัญหา และอุปสรรค 5.1 บางขอ้ มูลกไ็ ม่สามารถคน้ ควา้ ขอ้ มูลไม่ไดห้ มด 5.2 ขอ้ มูลที่ไดร้ ับจากแหล่งขอ้ มูลไม่เพียงพอ 5.3 บางคร้ังสบั สนคาสงั่ ในการกาหนดใชง้ าน

ประเด็นท่ศี กึ ษา วธิ ีการศึกษา แหล่งข้อมูล ผู้รับผดิ ชอบ ศึกษาค้นคว้าเกย่ี วกบั การ -สอบถามจาก -สอบถามจากคุณครู นางสาวจิรานุช ช่ืนชม เขยี นโปรแกรมการสร้าง คุณครูณฐั มน แสง ณฐั มน แสงจารัส นางสาวจริ านุช ช่ืนชม บทเรียน จารัส -คู่มือ นางสาวจริ านุช -คู่มือ ชื่นชม ศึกษาค้นคว้าเกย่ี วกบั การ -สอบถามจาก -สอบถามจากคุณครู นางสาวจริ านุช ชื่นชม เขยี นโปรแกรมการสร้าง คุณครูณฐั มน แสง ณฐั มน แสงจารัส บทเรียนคอมพวิ เตอร์ จารัส -คู่มือ ช่วยสอนด้วยโปรแกรม -คู่มือ Dreamweaver MX ศึกษาค้นคว้าเกย่ี วกบั -สอบถามจาก -สอบถามจากคุณครู ภาษาในการเขยี น คุณครูณฐั มน แสง ณฐั มน แสงจารัส โปรแกรมการสร้าง จารัส -คู่มือ บทเรียนคอมพวิ เตอร์ -คู่มือ ช่วยสอนด้วยโปรแกรม Dreamweaver MX ส่ิงทเ่ี หลือจากการเขยี น -สอบถามจาก -สอบถามจากคุณครู โปรแกรมการสร้าง คุณครูณฐั มน แสง ณฐั มน แสงจารัส บทเรียนคอมพวิ เตอร์ จารัส -คู่มือ ช่วยสอนด้วยโปรแกรม -คู่มือ Dreamweaver MX บทที่ 2 ข้นั ตอนการปฏิบตั ิงาน อุปกรณ์ที่ใชใ้ นการปฏิบตั ิงาน 1. แผน่ โปรแกรม Dreamweaver MX 2. เคร่ืองคอมพิวเตอร์ 3. เครื่อง Printer 4. โปรแกรมที่ใชใ้ นการเช่ือมโยง

ข้นั ตอนการปฏิบตั ิงาน การเชื่อมโยง Web page Link เป็นการกาหนดส่วนของขอ้ ความหรือรูปภาพที่เราจะเชื่อมโยงไปใน web page เดียวกนั หรือคนละ web page หรือ web site ส่วนประกอบของการเช่ือมโยงมสี ่วนสาคญั 2 ส่วน 1.จุดเช่ือมโยง <Link> เป็นส่วนของเอกสารที่ใชใ้ นการเชื่อมโยงไปยงั ส่วนอ่ืนๆของเอกสาร จุด เช่ือมโยงน้ีเป็นขอ้ ความหรือรูปภาพกไ็ ด้ 2.เป้าหมาย <Target> ส่วนที่เราใชก้ าหนดใหเ้ ช่ือมโยง เพราะเมื่อคลิกที่จุดเช่ือมโยงน้ีจะมี รูปสญั ลษั ณ์เหมือนรูปมือและเป้าหมายน้ีอาจจะอยใู่ น web page เดียวกนั คนละ web page หรือ web site ใน Internet กไ็ ด้ รูปแบบการสร้างจุดเช่ือมโยง 1.รูปแบบ <A HREF =URL> ข้อความ </A> เป็นการเชื่อมโยงใหก้ บั จุดขอ้ ความ เรียกวา่ “ Text Link ” 2.การสร้างจุดเชื่อมโยงให้กบั รูปภาพ เรียกว่า “ Graphic Link ” รูปแบบ < A HREF=URL><Img Src= “ ชื่อไฟส์.นามสกลุ ”></A> เป็นการสร้างจดุ เช่ือมโยงกบั web อื่นๆ <A HREF=URL>ขอ้ ความ </A> ช่ือ web site การสร้างเฟรม การแบ่งส่วนของหนา้ ต่างออกเป็นส่วนๆ เรียกวา่ “ Frame ” จะเป็ นการ กาหนดพ้ืนท่ีส่ีเหล่ียมจตั ุรัส เพื่อแบ่งส่วนของหน้าต่าง โปรแกรม Browswe ออกเป็นส่วนๆโดยแต่ละ Frame จะประกอบดว้ ยเอกสาร HTML ท่ีเป็นอิสระ ต่อกนั โดยที่เราสามารถกาหนดขนาดของ Frame และเช่ือมโยงเอกสารถึงกนั ได้

คาสง่ั ในการกาหนด “ Frame ” 1. <Frameset> ใชก้ าหนดจานวนกรอบ และขนาดส่วนของหนา้ ต่างที่ กาหนดไว้ 2. <Frame> คือการกาหนดวา่ จะให้ Frame แสดงขอ้ มูลอะไร การใช้ “ Frame ” มีขอ้ กาหนดวา่ ไม่ตอ้ งใชค้ าสง่ั <Body>…</Body> แต่ใหใ้ ชค้ าสง่ั <Frameset>…</Frame> แทนแลว้ ตามดว้ ยคาสงั่ “ Frame ”

การแบ่ง “ Frame ” มี 4 ประเภท คือ 1. แบบแนวต้งั 2. แบบแนวนอน 3. แบบออกเป็น 3 ส่วนตามมาตรฐานนิยม 4. สามารถแบ่งหนา้ ต่างจะออกเป็น 4 ส่วนไดต้ ามตอ้ งการ รูปแบบ <Frameset คาสงั่ เสริม= “ค่าตวั เลข 1 , คา่ ตวั เลข 2 …> คาสง่ั เสริม 1. Rows ใช้แบ่งส่วนของหน้าต่างตามแนวแถวขนาดของหน้าต่าง ข้ึนอยกู่ บั คา่ ของตวั เลข 2. Cols ใช้แบ่งส่วนของหน้าต่างตามแนวแถวขนาดขแถวหน้าต่าง ข้ึนอยกู่ บั ค่าตวั เลข

3. ค่าตวั เอง จะกาหนดเป็ นตวั เลขบอกขนาด ซ่ึงอาจเป็ นจานวนจุด หรือระบุเป็ นเปอร์เซ็นต์ท้งั หมดก็ได้ หรืออาจใช้เคร่ืองหมายดอก จนั ทร์ < * > เขา้ ช่วยในการกาหนดค่าของตวั เลขรวมกนั ใน Rows Colum จะตอ้ งรวมกนั แต่ละอยา่ งใหเ้ ท่ากบั 100 เปอร์เซ็นต์ คาสงั่ เสริมประกอบดว้ ย 1. Src=URL เป็นการอา้ งถึง File HTML หรือ File รูปภาพมาตรฐาน การขอใชบ้ ริการใน INTERNET 2. Name=ชื่อเฟรม เป็นการต้งั ช่ือใชก้ บั ส่วนของหนา้ ต่าง เพ่ือใชใ้ นการ อา้ งอิง นาขอ้ มูลรูปภาพ หรือเอกสารมาไวใ้ นเฟรม โครงสร้างของ “ Frame ” <HTML> <HEAD><TITLE> โครงสร้างของเฟรม </TITLE></HEAD> <Frameset คาสงั่ เสริม = “ คา่ ตวั เลข ” > <Frame คาสง่ั เสริม> <Frame คาสง่ั เสริม> </Frameset> </HTML> ตวั อยา่ ง <HTML> <HEAD><TITLE> การสร้างเฟรมแบบแนว แถว</TITLE></HEAD> <Frameset Rows = “ 50 ” > <Frame Src=M.31-50.HTML Name=fr 1>

<Frame Src=Link 3.HTML Name=fr 2> </Frameset> </HTML> โปรแกรม Dreamweaver MX เป็ นโปรแกรมท่ีใช้ในการสร้างสรรค์การพฒั นา และยงั เป็ น เครื่องมือท่ีใชใ้ นการสร้าง Web page โดยสามารถเห็นส่วนต่างๆของ Object และ Code ต่างๆของการจดั การ File ซ่ึงมีรูปร่างหนา้ ต่างของ Web page ที่ควรรู้จกั อยู่ 3 ส่วน 1. Show Code Views เป็นการดู Code ของโปรแกรมท้งั หมด 2. Show Code and Design Views. เป็นการดู Code และผลลพั ธข์ อง Web page 3. Show Design Views จะเป็ นการดูผลลพั ธ์ของ Web page อย่างเดียวส่วนการทดสอบ โปรแกรมเป็ นส่วนที่สร้างเกี่ยวกบั Web Applimation คือ เมื่อเรา ส ร้ า ง เ ส ร็ จ แ ล้ว ส า ม า ร ถ ท ด ส อ บ โ ป ร แ ก ร ม ไ ด้เ ล ย ใ น โ ป ร แ ก ร ม Dreamweaver MX โดยไม่ตอ้ งเปิ ด Browser โดยใช้ 2 ป่ ุมน้ี - Server Debug มีรูปไอคอนเป็นรูปลูกโลก เม่ือกดป่ ุมน้ีเหมือนการดู Web ผา่ น Browser หรือกดฟังคช์ นั่ F12 - Live Data View ป่ ุมน้ีใชก้ บั มาแกไ้ ขในหนา้ เดิมบน Web page บทที่ 3 วิเคราะห์โครงงานคอมพิวเตอร์ ใบงานตารางวเิ คราะห์จุดประสงคโ์ ครงงานคอมพิวเตอร์ 1. ทาโครงงานคอมพิวเตอร์การสร้าง Web Site โดยใชโ้ ปรแกรม Dreamweaver MX

2. แนวคิด และแรงจูงใจ เสนอผลงานใหผ้ ทู้ ี่สนใจไดศ้ ึกษา 3. การสร้าง Web Site โดยใชเโปรแกรม Dreamweaver MX ประโยชน์ที่ทาใหผ้ ทู้ ่ีศึกษามีความรู้ความเขา้ ใจมากข้ึน 4. วตั ถุประสงคใ์ นการทางานโครงงาน 4.1 นาเสนอผลงานที่จดั ทาข้ึน 4.2 นาความรู้มาใชง้ านไดอ้ ยา่ งเหมาะสม 4.3 เป็นการใชเ้ วลาวา่ งใหเ้ กิดประโยชน์ บทที่ 4 สรุปผล จากการสร้าง Web Site โดยใชโ้ ปรแกรม Dreamweaver MX เป็นตวั ช่วยในการจดั ทาโครงงาน พบวา่ เราน้นั สามารถสร้าง Web Site ไดด้ ว้ ยตนเอง

สะดวก ไม่ยงุ่ ยาก แต่บางคร้ังกไ็ ม่สามารถแกไ้ ขปัญหาได้ ตอ้ งอาศยั คะแนะนา จากผูเ้ ชี่ยวชาญ หรือจากอาจารยผ์ ูส้ อนและสามารตรวจสอบข้นั ตอนในการ สร้าง Web Site ไดอ้ ีกดว้ ย บรรณานุกรม เอกสารที่ใชป้ ระกอบในการเรียนการสอน และโปรแกรม Dreamweaver MX ที่ทาหนา้ ที่ในการสร้างWeb Site

คานา โครงงานเล่มนีจ้ ดั ทาขึน้ เพ่อื ใช้ศกึ ษาเก่ียวกับโปรแกรม Dreamweaver MX โครงงานเล่มนีจ้ ะกล่าวถงึ วธิ ีขัน้ ตอนการ

ปฏบิ ัตงิ านต่างๆท่ีน่าสนใจเม่ือผู้อ่านได้อ่านแล้วอาจทาให้ผู้อ่าน สามารถสร้างโปรแกรม Dreamweaver MX ด้วยตนเองได้