โครงงานกลุ่ม3 ม5/8

โครงงานคอมพิวเตอร์ระดบั มธั ยมศึกษาตอนตน้ ประเภทโครงงาน การสร้างโปรแกรม 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 ด้วยตนเองได้