Download
1 / 52
520 likes | 611 Views
อินเทอร์เน็ตเพื่อสังคมแห่งการเรียนรู้ www.smileschool-whitenet.com. การสร้างเว็บไซท์เบื้องต้น. รองศาสตราจารย์ธีรวัฒน์ ประกอบผล kpteeraw@kmitl.ac.th www.kmitl.ac.th~kpteeraw. สถาบันเทคโนโลยีพระจอมเกล้าเจ้าคุณทหารลาดกระบัง. วิธีการเชื่อมต่ออินเทอร์เน็ต. Server. I n t e r n e t.
E N D
อินเทอร์เน็ตเพื่อสังคมแห่งการเรียนรู้ อินเทอร์เน็ตเพื่อสังคมแห่งการเรียนรู้ www.smileschool-whitenet.com
การสร้างเว็บไซท์เบื้องต้นการสร้างเว็บไซท์เบื้องต้น รองศาสตราจารย์ธีรวัฒน์ ประกอบผล kpteeraw@kmitl.ac.th www.kmitl.ac.th\~kpteeraw สถาบันเทคโนโลยีพระจอมเกล้าเจ้าคุณทหารลาดกระบัง
วิธีการเชื่อมต่ออินเทอร์เน็ตวิธีการเชื่อมต่ออินเทอร์เน็ต Server I n t e r n e t Local Area Network Corporate User Lease Line or ISDN High Speed Connection Server Individual User Internet Service Provider : ISP Dial-up Connection via Telephone Line
หลักสูตรการอบรม • แนวทางการสร้างเว็บไซด์สำหรับงานด้านการศึกษา • รู้จักกับภาษา HTML • เริ่มต้นสร้างเว็บเพจด้วยโปรแกรม Dreamweaver • การออกแบบ แต่งเติมหน้าเว็บ • เฟรม เลเยอร์ • การอัพโหลดไฟล์
Basic Knowledge Client • Computer Network Server
การติดต่อแบบ Client-Server บนอินเตอร์เน็ต ขอใช้บริการ โครงข่ายโทรศัพท์ ผู้ให้บริการอินเตอร์เน็ต modem
โดเมนเนม IP Address kmitl.ac.th 161.246.10.21 DNS Server
Seven common elements of design principleบัญญัติ 7 ประการในการออกแบบบทเรียนบนเครือข่ายอินเตอร์เน็ต(Dick & Reiser,1989) 1. Motivating the learner 2. Specifying what is to be learn 3. Prompting the learner to recall and apply previous knowledge (with new knowledge) 4. Providing new information 5. Offering guidance and feedback 6. Testing comprehensing 7. Supplying enrichment or remediation
1. Motivating the learnerให้แรงจูงใจแก่ผู้เรียน • การใช้การออกแบบบทเรียนโดยการวาง layout ที่น่าสนใจ และการใส่ภาพที่สวยงาม การเลือกใช้สีที่ไม่มากจนเกินไป • การใช้ภาพเคลื่อนไหวเป็นบางครั้ง • การใช้คำถามนำก่อนการเข้าหาบทเรียน เพื่อจูงใจให้ผู้เรียนอยากทราบคำตอบ
2. Specifying what is to be learnบอกผู้เรียนให้ทราบว่าเขาจะเรียนรู้อะไรได้บ้าง • บอกจุดประสงค์เชิงพฤติกรรมของบทเรียน • ในบทเรียนไม่ควรมีลิงค์ไปหน้าอื่น ๆ มากเกินไป เพราะจะทำให้ผู้เรียนหลุดเป้าหมายเดิม
3. Reminding learners of past knowledgeการเชื่อมโยงความรู้เก่า กับความรู้ใหม่ • ออกแบบเว็บให้สามารถลิงค์ข้อมูลที่มีความเกี่ยวข้องกับสิ่งที่ผู้เรียนได้เรียนมาแล้วเพื่อเป็นการทบทวน หรือเปรียบเทียบกับเนื้อหาที่กำลังเรียนอยู่
4. Providing new informationนำเสนอเนื้อหาใหม่ • การเสนอเนื้อหาของบทเรียนควรออกแบบเว็บอย่างรอบครอบ โดยพิจารณาจากคุณลักษณะต่อไปนี้
พฤติกรรมการใช้เว็บที่ส่งผลต่อการออกแบบเว็บไซด์(ถนอมพร เลาหจรัสแสง, 2545)
พฤติกรรมการใช้เว็บที่ส่งผลต่อการออกแบบเว็บไซด์(ต่อ)พฤติกรรมการใช้เว็บที่ส่งผลต่อการออกแบบเว็บไซด์(ต่อ)
5. Offering guidance and feedbackการให้ข้อเสนอแนะ และตอบข้อมูลกลับ • การให้ข้อมูลตอบกลับของโปรแกรมที่ทำบนเว็บนั้นค่อนข้างทำได้ยาก เมื่อเปรียบเทียบกับบทเรียนคอมพิวเตอร์ช่วยสอน แต่ก็สามารถทำได้โดยใช้ภาษาที่ซับซ้อนขึ้น • สามารถให้คำแนะนำและตอบกลับโดยการตั้งกระทู้ในหน้าเว็บ หรือ e-mail แทน
6. Testingการทดสอบ • ต้องทดสอบว่าผู้เรียนมีความรู้ถึงจุดหมายหรือไม่ • การทำข้อสอบสามารถทำได้บนบทเรียนแบบออนไลน์ แต่ก็ไม่สามารถทราบได้ง่ายว่าผู้ทำข้อสอบเป็นผู้เรียนจริงหรือไม่
7. Supplying enrichment or remediationให้ข้อมูลเพิ่มเติมหรือการซ่อมเสริม • การให้ข้อมูลเพิ่มเติม อาจทำโดยการสร้างลิงค์ที่เกี่ยวข้อง • การซ่อมเสริมอาจทำได้โดยลิงค์ไปยังเว็บไซด์ที่เกี่ยวข้องที่มีเนื้อหาง่ายลงไปอีก สำหรับผู้เรียนที่เรียนอ่อน
รู้จักกับภาษา HTML • HTML ย่อมาจาก HyperText Makeup Language เป็นภาษาที่ใช้ในการสร้างเว็บเพจ และเอกสารในเวิลด์ไวด์เว็บ (World Wide Web) • สามารถเขียนได้โดยใช้โปรแกรม Notepad และ save เป็นนามสกุล .html หรือ .htm เท่านั้น • โครงสร้างคำสั่งประกอบด้วยสองส่วนคือ ส่วนเริ่มต้น และส่วนจบ โดยจะอยู่ในเครื่องหมาย < > มีรูปแบบดังนี้ <คำสั่ง> ข้อความ </คำสั่ง>
ส่วนประกอบของโปรแกรม HTML ส่วนประกอบใหญ่ ๆ ของ HTML มีดังนี้ • Head เป็นคำสั่งอธิบายชนิดของเว็บเพจที่สร้าง และบอกว่าเว็บเพจนี้สร้างจากโปรแกรมใด • Body เป็นส่วนที่ใช้เขียนส่วนต่าง ๆ ของโปรแกรม สามารถปรับปรุงให้สวยงามได้โดยใช้ Property ต่าง ๆ • Font เป็นคำสั่งที่ใช้กำหนดขนาดและชนิดของตัวหนังสือ • Paragraph เป็นคำสั่งสำหรับสร้างข้อความที่เป็น Paragraph
การเขียน HTML อย่างง่าย ส่วนที่ 1 --> <HTML> ส่วนที่ 2 --> <HEAD> …….. ข้อมูลต่าง ๆ ที่เกี่ยวกับส่วนหัวเรื่องของเว็บเพจ…... </HEAD> ส่วนที่ 3 --> <BODY> ……… ข้อมูลต่าง ๆ ที่จะแสดงบนเว็บเพจ……… </BODY> ส่วนที่ 4 --> </HTML>
ตัวอย่างโปรแกรม EX1.html <html> <head> <title>Welcome to Teerawat's Homepage</title> </head> <body> <h1><B>Welcome to T-WAT Homepage</h1> </body> </html> ตัวหนา
แท็ก HTML คำสั่งต่าง ๆ จะอยู่ในสัญลักษณ์ <…> เรียกว่า “แท็ก” <HTML>…</HTML> กำหนดจุดเริ่มต้นและจุดสิ้นสุดของเอกสาร HTML <Title> ข้อความ </Title> ระบุหัวเรื่อง (Title bar) ของโปรแกรม <Body>ข้อความ</Body> แท็กที่ใช้ในส่วนเนื้อหา <Font>ข้อความ</Font> แท็กที่ใช้กำหนดแบบของตัวอักษร <Table>…</Table> แท็กที่ใช้ในการสร้างตาราง <Tr>…</Tr> แท็กกำหนดแถวให้กับตาราง <Th>…</Th> แท็กกำหนดส่วนหัวของข้อมูล <Td>…</Td> แท็กกำหนดส่วนของข้อมูล
แท็ก HTML <Form>…</Form> แท็กกำหนดให้โปรแกรมบราว์เซอร์ ทำการสร้าง แบบฟอร์ม <Frameset>...</Frameset> แท็กในการใช้เฟรมช่วยแบ่งหน้าจอให้เป็น สัดส่วน และสามารถกำหนดการลิงค์ได้ <Layer>...</Layer> แท็กสำหรับนำข้อความมาแสดงซ้อนบนรูปภาพ <lmg Scr = “ชื่อไฟล์รูป> แท็กที่ใช้สำหรับนำรูปภาพมาใส่บนเว็บเพจ <A Href=“URL”>…</A> แท็กที่ใช้เชื่อมโยงไปในเอกสารอื่น <Embed Src = “filename”> แท็กที่ใช้ในการนำภาพเคลื่อนไหวมาใส่ใน เว็บเพจ
คำสั่งเบื้องต้นใน Body • กำหนด Background เป็นรูปภาพ <BODY BACKGROUND = “Image.gif”> โดยรูปภาพจะเป็น .gif หรือ .jpg ก็ได้ • กำหนด Background ให้เป็นสี <BODY BGCOLOR = “#rrggbb”> โดยสามารถใช้ชื่อสีมาตรฐานเป็น Red , Green , Blue หรือใช้เป็นรหัสเลขฐานสิบหกเช่น “FFCCFF” , “808000” ก็ได้
คำสั่งเบื้องต้นใน Body • การใส่ภาพในเว็บเพจ <IMG SRC> = “Image.gif” ALIGN = “Position”> WIDTH = No HEIGHT = No BORDER = No> เมื่อ Image เป็นไฟล์รูปภาพนามสกุล .jpg หรือ .gif Position เป็นตำแหน่งที่ต้องการให้ภาพอยู่ Width เป็นความยาวของรูปภาพ Height เป็นความกว้างของภาพ Border เป็นความหนาของกรอบรูปภาพ
คำสั่งเบื้องต้นใน Body • กำหนดขนาดตัวอักษร <H1> ตัวใหญ่ที่สุด </H1> <H6> ตัวเล็กที่สุด </H6> • กำหนดรูปแบบตัวอักษร • ขนาดตัวอักษร <FONT SIZE = No> โดย No เป็นตัวเลขตั้งแต่ 1 ถึง 7
คำสั่งเบื้องต้นใน Body • สีตัวอักษร <FONT COLOR = “#rrggbb” • ลักษณะตัวอักษร <B> ข้อความ </B> ตัวหนา <i> ข้อความ </Bi> ตัวเอียง <u> ข้อความ </Bu> ตัวขีดเส้นใต้ • ชนิดของตัวอักษร <FONT FACE = “Type”> ควรใช้ MS San Serif
คำสั่งเชื่อมโยง • การเชื่อมโยงในเอกสารเดียวกัน • กำหนดชื่อเป้าหมาย <A NAME = ชื่อเป้าหมายที่อ้างอิง > จุดเชื่อมโยง </A> • การเชื่อมโยงไปเป้าหมาย <A HREF = “#ชื่อจุดเชื่อมโยง”> ข้อความที่ใช้เชื่อมโยง </A> • การเชื่อมโยงไปยังเว็บเพจอื่นแต่ยังอยู่ในเว็บไซต์ • อยู่ไดเร็กทอรี่เดียวกัน <A HREF = ชื่อเว็บ .html> • อยู่ต่างไดเร็กทอรี่ <A HREF = ../ชื่อเว็บ .html>
คำสั่งเชื่อมโยง • การเชื่อมโยงไปเว็บไซต์อื่น สามารถทำได้โดยระบุที่อยู่ของเว็บไซต์ปลายทาง <A HREF = “http://www.kmitl.ac.th”> </A> • การเชื่อมโยงด้วยรูปภาพ <A HREF = “URL ของเว็บไซต์ปลายทาง”> <IMG SRC = “Image.gif> </A> • การเชื่อมโยงไปยัง Email <A HREF = “mailto: ชื่อ Email Address”>..</A> ตัวอย่าง <A HREF = “mailto: kpteeraw@hotmail.com” Contact Web Master </A>
โปรแกรมสำเร็จรูปในการสร้างเว็บไซต์โปรแกรมสำเร็จรูปในการสร้างเว็บไซต์ โปรแกรมเหล่านี้จะเป็นโปรแกรมช่วยสร้างเอกสาร HTML มีอยู่หลายโปรแกรมเช่น • โปรแกรม FrontPage เป็นของบริษัท Microsoft มีลักษณะคล้ายกับ Microsoft Office • โปรแกรม Macromedia Dreamwaver เป็นโปรแกรมที่ได้รับความนิยมอย่างมาก สามารถสร้างเว็บเพจได้เร็ว และยังสามารถเขียนเป็นคำสั่ง HTML ได้อีกด้วย
ส่วนประกอบของหน้าจอหลักส่วนประกอบของหน้าจอหลัก เมนูบาร์ (Menu Bar) ทูลบาร์ (Tool Bar) พื้นที่ทำงาน(Document Window) ในการเริ่มต้นสร้างเว็บเพจ ให้เลือก File ->New จากนั้นเลือกเมนู Modify และเลือก Page Properties เพื่อกำหนดลักษณะ ต่าง ๆ ดังต่อไปนี้
การกำหนดคุณสมบัติก่อนการทำงานการกำหนดคุณสมบัติก่อนการทำงาน • Setting Page Properties) Title : ข้อความบนหน้าต่างเว็บ Background Image :เลือกภาพแบล็กกราวด์ของเว็บ Background : สีพื้นหลัง Text : สีตัวอักษรปกติบนเว็บ Link : สีตัวอักษรที่เป็นข้อความลิงค์ Visited Links : สีของลิงค์หลังคลิก Active Links : สีของลิงค์ขณะคลิก Margin : ระยะห่างขอบต่าง ๆ Document Encoding : เลือกฟอนต์ตัวอักษร
การปรับแต่งหน้าต่าง ความสูงของพื้นที่ทำงาน ความกว้างของพื้นที่ทำงาน ความสามารถของโมเด็ม ในการสร้างเว็บเพจ ควรจะกำหนด ขนาดของเว็บที่จะปรากฎบนเครื่องด้วย ถ้าหากเป็นเครื่อง PC ทั่วไปควรกำหนด เป็น 800 x 600 นอกจากนี้ยังสามารถเข้าไป ปรับใน Edit Size ได้อีก ดังรูป
ส่วนประกอบของหน้าจอหลักส่วนประกอบของหน้าจอหลัก พื้นที่ทำงานสำหรับออกแบบเว็บ พาเนล Objects (Objects Panel) ประกอบด้วยเครื่องมือต่าง ๆ เช่นการสร้างตาราง การใส่รูป การสร้างเฟรม เป็นต้น ปรับขนาดของเว็บเพจ
การบันทึกเว็บเพจ ในการบันทึกเว็บเพจ สามารถทำ ได้โดยเลือกเมนู File > Save หรือ File>Save As ซึ่งจะได้เมนูดังรูป ทางด้านขวามือนี้ โดยไฟล์ที่จะบันทึก นั้นจะต้องมีนามสกุลเป็น .html สำหรับหน้า ”โฮมเพจ” ควรบันทึก เป็น index.html
การใช้ภาพเป็นฉากหลัง เลือกไฟล์ภาพ เลือกสีฉากหลัง ฉากหลังของเว็บเพจนอกจากจะให้เป็น สีโดยทั่วไปแล้ว ยังสามารถใช้รูปเป็นฉาก หลังได้อีกด้วย โดยเลือกเมนู Modify > Page Properties และเลือกภาพที่ปุ่ม Browse ภาพที่ใช้จะเป็นนามสกุล .jpg หรือ .gif ก็ได้ แต่ภ้าหากภาพมีขนาดใหญ่เกินไปจะทำให้ เปิดเว็บเพจได้ช้า
ตัวอักษรบนเว็บ คลิกเพื่อเลือกสี การกำหนดสีตัวอักษรทำได้โดยเลือกเมนู Page Properties การกำหนดสีสามารถกำหนด เลขฐานสิบหก หรือเลือกสีโดยตรงได้ โดยสี ต่าง ๆ เป็นดังนี้ 1. Text เป็นสีของตัวอักษรหลัก 2. Link เป็นสีของตัวอักษรหรือข้อความที่มีการ ลิงค์ไปยังไฟล์อื่นๆ 3. Visited Link เป็นสีของตัวอักษรหรือข้อความ ลิงค์ที่เคยเข้าไปแล้ว 4. Active Link เป็นสีตัวอักษรหรือข้อความ ขณะที่กำลังที่กำลังคลิกเมาส์
การกำหนดฟอนต์ให้ตัวอักษรการกำหนดฟอนต์ให้ตัวอักษร ข้อความภาษาไทยที่พิมพ์เข้าไป เมื่อโปรแกรมถูกนำไปแสดงผล อาจจะเป็นภาษา ที่อ่านไม่รู้เรื่อง ดังนั้นจะต้องเลือกฟอนต์ตัวอักษรที่สามารถแสดงเป็นภาษาไทยได้ เช่น MS Sans Serif , Microsoft Sans Serif หรือฟอนต์อื่น ๆ ที่แสดงภาษาไทยได้
ถ้าหากต้องการใช้ชุดฟอนต์แบบอื่น ๆ ให้เข้าไปที่ Edit Font List ในช่อง Fonts จากนั้นเลือกตัวอักษรที่ต้องการ แล้วคลิก ปุ่ม << หรือปุ่ม Enter การเลือกฟอนต์นั้นสามารถเลือกได้ มากกว่าหนึ่งรูปแบบ แต่โปรแกรมบราว เซอร์จะเรียกใช้ฟอรต์ตามรูปแบบที่เรียงเอา ไว้ ถ้าหากในเครื่องไม่มีฟอนต์ชนิดแรก โปรแกรมบราวเซอร์จะข้ามไปเรียกฟอนต์ ชุดถัดไป
การใช้ตัวอักษรภาษาไทยการใช้ตัวอักษรภาษาไทย การให้เครื่องแสดงผลภาษาไทย ได้นั้นจะต้องเลือกในไดอะล๊อก Page Properties แล้วเลือก Document Encoding ให้เป็น Other แล้วคลิก OK
ต่อไปให้ไปที่เมนู Edit > Preferences เลือกโหมด Fonts/Encoding แล้วเลือก Other เลือก Proportional Font เป็น MS Sans Serif ขนาด 12 pt และเลือก Code Inspector ให้เป็น Microsoft Sans Serif (Thai) ขนาด 10 pt จากนั้นคลิก OK
การสร้างลิงค์ไปยังไฟล์อื่น ๆ การสร้างลิงค์จากข้อความ ไปยังไฟล์อื่น ๆ สามารถทำ ได้โดยลากแถบดำบนข้อความ นั้น ๆ และเลือก Link ไปยัง ไฟล์ที่ต้องการ
การสร้างอีเมลลิงค์ (Email Link) ลิงค์โดยทั่วไปจะไปเปิดไฟล์เว็บเพจ หรือไฟล์ที่กำหนดไว้ แต่ถ้าหากเป็น Email Link ถ้าหากมีการคลิกที่ปุ่ม Email Link เครื่องจะไปเปิดโปรแกรมแก้ไข-จัดการอีเมล์ประจำเครื่อง เช่นโปรแกรม Outlook Express เป็นต้น เลือกปุ่ม Insert Email Link จากนั้นจะปรากฎไดอะล๊อกให้ใส่ข้อความ
การแทรกตาราง การใช้ตารางนอกจากจะใช้ในการแสดงผลแบบตารางแล้ว ยังสามารถใช้ในการออกเบบหน้าจอเว็บเพจได้อีกด้วย ถ้าหากมีการเลือก Insert>Table เครื่องจะให้ใส่ขนาดของตารางลงไป แถวและคอลัมน์ ความกว้างตาราง ความหนาของเส้นตาราง ความสูงและระยะระหว่างเซล
เมื่อมีการกำหนดขนาดของตารางแล้ว เครื่องจะแสดงเครื่องมือในการปรับแต่งตารางออกมา สีเส้นขอบ สีช่องตาราง รูปภาพพื้นฉากของตารางที่สร้างขึ้น
การออกแบบหน้าจอ • ในการออกแบบหน้าเว็บเพจที่มีความซับซ้อนนั้นควรจะใช้ตารางมาช่วยในการสร้างเว็บเพจ สำหรับอีกรูปแบบหนึ่งที่นิยมใช้กันคือการนำเฟรมมาช่วยในการออกแบบ การแบ่งเฟรมนั้นนิยมใช้กับเว็บไซต์ ที่มีหน้าหลายหน้า ที่ส่วนประกอบของแต่ละหน้าซ้ำ ๆกัน เมื่อมีการแบ่งเฟรมแล้ว ไฟล์ที่สร้างขึ้นจะประกอบด้วยไฟล์หลายไฟล์ โดย main.html จะเป็นไฟล์หลัก และไฟล์ของแต่ละเฟรม
ตัวอย่างการจัดโครงสร้างของเว็บตัวอย่างการจัดโครงสร้างของเว็บ Section 1 Section 1.1 Section 1.2 Section 2 Section 2.1 Section 2.2 Section 2.2.1 Section 2.2.2 Section 2.3 Section 3
เว็บเซิร์ฟเวอร์ เว็บเพจจะสามารถเผยแพร่ในระบบอินเตอร์เน็ตได้จะต้องนำไฟล์ต่าง ๆ ไปไว้ยังเว็บเซิร์ฟเวอร์เสียก่อน โดยเว็บเซิร์ฟเวอร์จะมี 3 ประเภทดังนี้ • ติดตั้งเว็บเซิร์ฟเวอร์ด้วยต้นเอง จะต้องมีเราท์เตอร์ (Router) และ Lease Line • เช่าพื้นที่ในเว็บเซิร์ฟเวอร์อื่น • ขอพื้นที่ฟรี เช่น www.thai.net , www, se-ed.net เป็นต้น
การ Upload ด้วยโปรแกรม WS_FTP PRO ใส่ชื่อ Host ของเครื่อง ใส่ชื่อ และรหัสผ่าน ติดต่อไปยังเครื่อง
เลือกไดเร็กทอรี่ที่เก็บไฟล์ที่พัฒนขึ้นเลือกไดเร็กทอรี่ที่เก็บไฟล์ที่พัฒนขึ้น คลิกปุ่ม -> เพื่อย้ายไฟล์ไปยังเครื่อง Server
