โดย.....ไพฑูรย์   ปลอดอ่อน ศน.สพท.นครปฐม เขต 1

ขั้นตอนการออกแบบเว็บเพจด้วยโปรแกรม Namo

           เว็บเพจ (Webpage) คือหน้าเอกสาร  หน้าที่เราจัดทำด้วยโปรแกรมสำหรับการออกแบบเว็บไซต์ เช่น Namo ;Dream weaver;Flash ;Notepad เป็นต้น  ในการจัดทำ เว็บเพจ สักหนึ่งหน้านั้น เราควรกำหนดขั้นตอนการจัดทำดังนี้

           1. เตรียมข้อมูลที่จะนำเสนอให้พร้อม อาจจัดทำมาแล้วด้วยโปรแกรมประเภทอื่นๆ เช่น Word ;Excel หรือ Power point
           2. เตรียมภาพประกอบให้พร้อม  สำหรับภาพที่จำนำมาเป็นภาพประกอบ    ในการจัดทำเว็บเพจนั้น ควรเป็นภาพที่มีขนาด (size)        135×180;150×200;200×267 หรือ300×400 พิกเซล ซึ่งหากเป็นภาพที่ได้จากกล้องดิจิตอล ท่านต้องจัดการ Resize ภาพให้มีขนาดตามต้องการด้วยโปรแกรม AcdSee หรือ Photoshop
           3. ออกแบบหน้าเว็บเพจก่อน ในที่นี้ขอแนะนำให้ออกแบบเป็น 3 ส่วน คือ ส่วนหัว ส่วนเนื้อหา และส่วนท้าย ดังนี้

            6. ใช้เมนู  Create Table  สร้างตาราง 3 × 1 เพื่อกำหนดพื้นที่เนื้อหา 3 ส่วน ส่วนหัวใช้เป็นชื่อเรื่อง  ส่วนเนื้อหาเป็นรายละเอียดของสิ่งที่จะนำเสนอ ส่วนท้ายเป็นชื่อผู้จัดทำ ที่อยู่ หมายเลขโทรศัพท์ และ e-mail address

การออกแบบส่วนหัว          

           1. กำหนดข้อความที่จะใช้เป็นหัวเรื่อง เช่น  การออกแบบ CAI โดยกลุ่มงานส่งเสริมและพัฒนาสื่อ นวัตกรรมและเทคโนโลยีทางการศึกษา          2. วางเคอร์เซอร์ ในตำแหน่งของส่วนหัว  พิมพ์ข้อความตามที่กำหนด แล้วตกแต่งตัวอักษรด้วยการเปลี่ยนสี เปลี่ยนแบบ เปลี่ยนขนาดตามความชอบใจและสวยงาม          
        3. หากต้องการเปลี่ยนสีพื้นของตารางส่วนหัว ให้นำเมาส์ไปชี้ที่ เมนู Table แล้วคลิก 1 ครั้ง จะได้เมนูใหม่ ให้นำเมาส์ไปชี้ที่ คำสั่ง Cell properties จะได้หน้าต่างดังรูป   ที่คำสั่ง back ground ให้คลิกที่ color  แล้วเลือกสีพื้นที่ถูกใจ แล้วคลิก OK

    4. หากต้องการตัวหนังสือในส่วนหัวมีความสวยงามมากยิ่งขึ้น เราสามารถใช้เมนู Insert  คลิกเลือก smart button 

        5. เลือกแบบ Banner  ที่ถูกใจ เช่นให้คลิก OK  จะปรากฏหน้าต่างใหม่ให้เราแก้ไข ตัวอักษร โดยดับเบิลคลิกที่   banner  จะได้หน้าต่างดังรูปให้เราเลือกขนาดตัวอักษร  เลือกแบบตัวอักษร(ควรเลือกตระกูล UPC )

     6. วางตำแหน่งเคอร์เซอร์ไว้ที่ส่วนหัวของหน้าเว็บเพจแล้วกด Finish ตัวหนังสือที่แก้ไขแล้วจะมาอยู่ที่ส่วนหัวตามต้องการ

    การจัดทำส่วนเนื้อหา      

    1. แบ่งส่วนเนื้อหาออกเป็น 2 คอลัมน์ โดยวางเคอร์เซอร์ในพื้นที่ส่วนที่ 2 ใช้เมาส์ชี้ที่คำสั่ง Table คลิก 1 ครั้ง จะได้หน้าต่างใหม่ดังรูป เลือก  split into columns เลือกจำนวนคอลัมน์ เท่ากับ 2 คลิก OK จะได้พื้นที่ 2 คอลัมน์

    2. ในคอลัมน์ซ้ายมือ พิมพ์ข้อความที่ต้องการ วิธีการพิมพ์เหมือนการพิมพ์ด้วยโปรแกรม Ms word  ต่างกันที่หากต้องการขึ้นบรรทัดใหม่โดยการกด Enter ต้องกด Shift + Enter  แต่ถ้าพิมพ์ไปเรื่อยๆ เมื่อสิ้นสุดหน้ากระดาษ จะขึ้นบรรทัดใหม่ให้เอง

     ในการใช้ตารางเพื่อพิมพ์ข้อความหรือแทรกภาพ ตำแหน่งของเคอร์เซอร์มักจะอยู่กึ่งกลางตาราง (กึ่งกลางcell) หากต้องการให้ตำแหน่งของเคอร์เซอร์ อยู่ซ้ายมือสุด และบนสุด ให้วางเคอร์เซอร์ไว้ใน cell ที่ต้องการทำงาน คลิกที่ Table เลือกคำสั่ง  Cell properties  จะพบหน้าต่างดังรูป ในช่อง Horizaltal Aligment ให้เลือก Left เพื่อให้เคอร์เซอร์ อยู่ซ้ายมือสุด ในช่อง Vertical Aligment ให้เลือก Top เพื่อให้เคอร์เซอร์ อยู่แถวบนสุด  คลิก OK จากนั้นจึงพิมพ์์ข้อความหรือแทรกภาพตามต้องการ

    3. ในคอลัมน์ขวามือสำหรับการแทรกภาพประกอบ เมื่อจะแทรกภาพ ให้วางเคอร์เซอร์ในพื้นที่ที่ต้องการแทรกภาพ  ใช้เมาส์ชี้ที่คำสั่ง Insert คลิก 1 ครั้งจะได้หน้าต่างใหม่ ดังรูป 

    ใช้เมาส์ชี้ที่คำสั่ง Image คลิก 1 ครั้ง จะได้หน้าต่างใหม่ดังรูป

    ใช้เมาส์ชี้ที่ Icon รูปแว่นขยาย ดับเบิลคลิก โปรแกรมจะพาเราไปยังโฟลเดอร์ที่รูปภาพ เมื่อพบรูปภาพที่ต้องการ
คลิก 1 ครั้งแล้วกด Open ภาพที่เลือกจะมาปรากฏที่กรอบ preview  เมื่อเห็นว่าเป็นภาพที่ถูกต้อง ให้คลิก OK 

ภาพก็จะไปแทรกยังพื้นที่ที่ต้องการ

การจัดทำส่วนท้าย

   ในส่วนท้ายหรือเรียกว่า Footer ใช้การพิมพ์ธรรมดาเพื่อบอกรายละเอียดเกี่ยวกับผู้จัดทำ เบอร์โทรศัพท์ e-mail address เป็นต้น ดังตัวอย่างด้านบน

ขั้นตอนการออกแบบ
การออกแบบส่วนหัว
การจัดทำส่วนเนื้อหา
เอกสารนิเทศเรื่อง ICT ฉบับที่ 1