การเขียนโฮมเพจ ด้วย Netscape Composer

 

เริ่มต้นที่นี่

เริ่มจากการเปิดโปรแกรม   Netscape โดยดับเบิ้ลคลิกที่ Icon ของ Netscape

รูปที่ 1 Icon ของ Netscape

รอสักครู่ …. จะเข้าสู่โปรแกรม Netscape
 

รูปที่ 2 Netscape Communicator
 
จากนั้น เปิดโปรแกรม Netscape Composer (สำหรับเขียนโฮมเพจ) โดยคลิก ที่ปุ่มด้านล่างสุด ทางขวามือ หรือ เรียกจากเมนู File > New > Blank Page ก็ได้  จะเข้าสู่ Netscape Composer….
 
รูปที่ 3 Netscape Composer
 
เริ่มต้นด้วยการกำหนดคุณสมบัติให้กับเอกสารก่อน  (สามารถเปลี่ยนแปลงคุณสมบัตินี้ได้ในภายหลัง) เมนู  Format > Page Colors and Properties
 
  
รูปที่ 4 และ 5 การกำหนด Properties
 
  รูปที่ 6 ผลที่ได้จากการใส่ Title
 
กำหนดสีให้กับเอกสาร คลิกที่ โฟลเดอร์ Colors and Background

 
รูปที่ 7 และ 8  การปรับแต่งสี

สามารถเลือกได้จาก Drop Down List (ปุ่มลูกศรลง) ซึ่งมีรูปแบบอยู่แล้ว หรือคลิกที่ไดอะล็อกบ็อกซ์ ของสีจะปรากฎสี ให้เราได้เลือกมากมาย เสร็จแล้ว ตอบ OK
 

ความหมายของสีที่กำหนดให้กับเอกสาร
Normal Text  สีปรกติของตัวอักษรในหน้าเอกสารนั้น
Link Text สีของตัวเชื่อมโยง (Link)
Active Link Text สีของตัวเชื่อมโยง (Link) ในขณะที่ใช้ Mouse กดไปยัง เอกสารหรือ โฮมเพจ นั้น
Follow Link Text สีของ Link ที่บราวเซอร์ได้ไปโฮมเพจหรือเอกสารหน้านั้นมาแล้ว
Background สีพื้นหลัง
****  การเปลี่ยนคุณสมบัติของสี เราสามารถเปลี่ยนได้ตามความเหมาะสม  (โดยต้องคำนึงถึงว่าคนอื่นต้องชอบด้วย เนื่องจากเราทำให้คนอื่นดู) และในหน้าเอกสารเดียวกัน หรือ เอกสารชุดเดียวกันไม่ควรใช้สีให้มากจนเกินไป เพราะจะทำให้การสื่อความหมายผิดไปได้
 
การปรับแต่งเพื่อให้ โปรแกรมสามารถ ใชัภาษาไทยได้   Edit > Preferences 
 
รูปที่ 9 การปรับแต่ง ภาษาไทย
 
เสร็จแล้วตอบ  OK
จากนั้นไปที่    View > Encoding > User-Defined  จะถามว่าเราต้องการเปลี่ยนการเข้ารหัสหรือไม่ ตอบ OK
 
  รูปที่ 10 เปลี่ยนการเข้ารหัส ให้ตอบ OK
 

เริ่มลงมือสร้าง

ต่อไปเราจะมาสร้างเอกสารกัน โดยการพิมพ์ข้อความที่ต้องการลงไป เช่น ...
 
การเขียนโฮมเพจ 
ชื่อ    นามสกุลของผู้เข้าอบรม 
อีเลคทรอนิกส์เมล์ (E-Mail) 
 
เราสามารถเปลี่ยนรูปแบบตัวอักษรได้ ตามความสวยงาม โดยการทำแถบสี ให้กับตัวอักษรที่ต้องการก่อน
 
 
รูปที่ 11 ทำแถบสีให้กับตัวอัษร
 
จากนั้นกำหนดรูปแบบจาก เมนูด้านบน เช่น ตัวหนา เอียง เป็นต้น
 
รูปที่ 12 การกำหนดให้เป็นตัวหนา ตัวเอียง และตัวขีดเส้นใต้ตามลำดับ
 
รูปที่ 13 การจัด ชิดซ้าย กึ่งกลาง และชิดขวา
 
รูปที่ 14 การกำหนดสีเฉพาะให้กับตัวอักษร (อยู่ใกล้ๆ กับปุ่มกำหนดตัวอักษร)
 
การกำหนดขนาดของตัวอักษรที่จะใช้เป็น  Header ไปที่เมนู   Format > Heading โดย 1 หมายถึงใหญ่ที่สุด 6 เล็กที่สุด
 
รูปที่ 15 การกำหนดขนาดของตัวอักษรที่ใช้เป็น  Header
 
 
 รูปที่ 16 ลองกำหนดให้ได้ตามตัวอย่าง
 

การบันทึกข้อมูล

เหนื่อยกับการเขียนมามากแล้ว ถ้าไฟดับ เครื่องแฮงค์ แย่เลย ลองบันทึกข้อมูลดูซิ   File > Save หรือ Ctrl+s หรือ ปุ่มบันทึก
 
 
 รูปที่ 17 - 18 การบันทึกข้อมูล
 
 
 รูปที่ 19 ไดอะล็อกโต้ตอบการบันทึก
 
สร้างโฟลเดอร์ 1train ตั้งชื่อแฟ้ม โดยส่วนมากนิยมตั้งเป็น index.html ถ้าไม่ป้อนนามสกุล โปรแกรม จะสร้างนามสกุลเป็น html ให้เอง
 
ถ้าชื่อแฟ้มไปตรงกับแฟ้มข้อมูลเดิมที่มีอยู่แล้ว โปรแกรมจะถามว่า เราต้องการบันทึกข้อมูลใหม่ ทับลงไปหรือไม่ ถ้าตอบ Yes หมายถึง บันทึกทับข้อมูลเดิมไปเลย ถ้าตอบ No โปรแกรมจะให้โอกาสเราตั้งชื่อใหม่
 
 
  รูปที่ 20 ตอบ yes บันทึกทับข้อมูลเดิม
 

การสร้างลิสต์

ต่อไปสร้างลิสต์ สร้างลิสต์โดยใช้ข้อความจากด้านล่างนี้ (เพื่อไม่ให้เสียเวลา ให้ทำแถบสีจากด้านล่างนี้ แล้ว ใช้ Ctrl+C แล้วไปคลิกที่ Netscape Composer  หลังจากนั้น ใช้ Ctrl+V ซึ่งหมายถึงเอาข้อความไป  Paste)
 
 เอาข้อความจากใต้สีชมพูนี้
บัณฑิตวิทยาลัย รับสมัครนักศึกษาระดับ ป.โท - เอก
ข่าวอบรมคอมพิวเตอร์จากศูนย์ฝึกอบรมสำนักวิจัยและบริการคอมพิวเตอร์
สถาบันฯเปลี่ยนการให้บริการโมเด็มเป็นแบบ Real PPP
KMITL Open System     (เรื่องน่ารู้เกี่ยวกับ คอมพิวเตอร์ระบบเปิด)
ถาม-ตอบ ปัญหาคอมพิวเตอร์
แหล่งรวบรวมเว็บไซท์ ของคนไทย
ประมวลภาพ สถาบันฯ ร่วมกีฬาบุคลากร ณ. ม.อุบลฯ ๓-๘ พ.ค. ๒๕๔๑
การเขียนโฮมเพจ สำหรับ User ที่มี Account ของ สถาบันฯ
แนะนำวิทยาเขตชุมพร
 มาจนถึงบันทัดก่อนสีชมพูนี้จ้ะ
 
การสร้างลิสต์นี้ มี 2 แบบคือ
    1. Bullet List (แบบปุ่ม)
    2. Number List (แบบตัวเลข)
 
Bullet List (แบบปุ่ม)
รูปที่ 21 ให้ทำแถบสีที่กลุ่มตัวอักษร แล้วคลิกที่ Bullet  List
 
จะได้ผลดังนี้ครับท่าน Number List (แบบตัวเลข)
รูปที่ 22 ทำแถบสีที่กลุ่มตัวอักษร แล้วคลิกที่ Number  List (ถ้าทำอยูแล้วให้กดปุ่ม Number List ได้เลย)จะเปลี่ยนให้เอง
 
 
รูปที่ 23  หน้ากลุ่มตัวอักษร จะเห็นเป็นเครื่องหมาย # แสดงว่าใช้ได้
 
เราลองมาพรีวิวดูผลงาน
รูปที่ 24  ปุ่ม Preview
 
รูปที่ 25  ถามว่าต้องการบันทึกการแก้ไข ทับข้อมูลเดิมหรือไม่ ให้ตอบ YES
 
รูปที่ 26  โปรแกรมจะเปิด Netscape Communicator เพิ่มมาอีกอัน จะเห็นทางขวามือสุด
 
และจะได้ผลดังนี้ อีกแล้วครับท่าน
  1. บัณฑิตวิทยาลัย รับสมัครนักศึกษาระดับ ป.โท - เอก
  2. ข่าวอบรมคอมพิวเตอร์จากศูนย์ฝึกอบรมสำนักวิจัยและบริการคอมพิวเตอร์
  3. สถาบันฯเปลี่ยนการให้บริการโมเด็มเป็นแบบ Real PPP
  4. KMITL Open System     (เรื่องน่ารู้เกี่ยวกับ คอมพิวเตอร์ระบบเปิด)
  5. ถาม-ตอบ ปัญหาคอมพิวเตอร์
  6. แหล่งรวบรวมเว็บไซท์ ของคนไทย
  7. ประมวลภาพ สถาบันฯ ร่วมกีฬาบุคลากร ณ. ม.อุบลฯ ๓-๘ พ.ค. ๒๕๔๑
  8. การเขียนโฮมเพจ สำหรับ User ที่มี Account ของ สถาบันฯ
  9. แนะนำวิทยาเขตชุมพร
มีทั้งหมด 9 หัวข้อ เห็นไหมครับว่า ท่านไม่ต้องพิมพ์ เลข 1 2 3 ...... หน้าหัวข้อให้เมื่อยเลย
ต่อไปจะแทรกหัวข้อเข้าไป ..............
ไม่ต้อง มานั่งทำแทบสี และ List ใหม่ให้เสียเวลา ลองคิดดูนะครับ  ถ้ามี สัก เป็นร้อยๆ หัวข้อ ก็ลำบากในการทำ แถบสี เอาการทีเดียว แต่นี่เพียง เคาะปุ่ม Enter  จะสังเกตุเห็น เครื่องหมาย # หน้าหัวข้อ เราก็สามารถ เพิ่มตรงที่ว่างนั้นได้ เลย....
 
 
รูปที่ 27  เพิ่มหัวข้อใหม่เข้าไป
 
เมื่อมีหัวข้อใหม่เพิ่มเข้ามา  ก็ไม่ต้องมานั่งพิมพ์เลขอีก สังเกตุหัวข้อที่ 4 แต่ก่อนเป็นของ KMITL Open System เมื่อผมเพิ่มเข้าไปในที่ตรงนั้น KMITL จะเป็นหัวข้อที่ 5 ส่วนที่เพิ่มเข้าไปจะเป็น หัวข้อที่ 4 แทน

และหัวข้อรวมทั้งหมด จาก 9 ก็จะเป็น 10 ให้อัตโนมัติ ไม่ต้องไปเสียเวลาเปลี่ยน หัวข้อที่ 5 เป็น 6 หัวข้อที่ 6 เป็น 7 และ ................ ถ้ามีสัก 50 หัวข้อแย่เลย

ผลที่ได้ ..................
  1. บัณฑิตวิทยาลัย รับสมัครนักศึกษาระดับ ป.โท - เอก
  2. ข่าวอบรมคอมพิวเตอร์จากศูนย์ฝึกอบรมสำนักวิจัยและบริการคอมพิวเตอร์
  3. สถาบันฯเปลี่ยนการให้บริการโมเด็มเป็นแบบ Real PPP
  4. ผมเพิ่มหัวข้อใส่ตรงนี้เข้าไป
  5. KMITL Open System     (เรื่องน่ารู้เกี่ยวกับ คอมพิวเตอร์ระบบเปิด)
  6. ถาม-ตอบ ปัญหาคอมพิวเตอร์
  7. แหล่งรวบรวมเว็บไซท์ ของคนไทย
  8. ประมวลภาพ สถาบันฯ ร่วมกีฬาบุคลากร ณ. ม.อุบลฯ ๓-๘ พ.ค. ๒๕๔๑
  9. การเขียนโฮมเพจ สำหรับ User ที่มี Account ของ สถาบันฯ
  10. แนะนำวิทยาเขตชุมพร
*** หมายเหตุ การเปลี่ยน ระหว่าง List ทั้งสองแบบ สามารถ คลิกที่ปุ่ม List สลับกันไปมาได้***
ถ้าต้องการยกเลิกก็ให้คลิกที่ ปุ่ม List ที่ต้องการยกเลิกนั้น
 

การสร้างตาราง

 
 
รูปที่ 28 -29 คลิกที่ปุ่ม Insert Table  หรือจาก Menu
 
 
รูปที่ 30 ไดอะล็อกบอกซ์ของตาราง
 
จุดน่าสนใจและการกำหนด (เปลี่ยนแปลงได้ภายหลัง)
  • ใส่จำนวนแถว (Row) และ สะดมภ์ (Column)
  • การวางตำแหน่งของ ตาราง  ซ้าย กลาง หรือ ชิดขวา
  • กรอบของตาราง (ฺBorder Line Width) ถ้า เป็น 0 หมายถึงไม่มีกรอบ
  • ความกว้างของตารางคิดเทียบกับหน้าเอกสาร เป็น % หรือจะกำหนดเป็น จำนวน Pixel ก็ได้
  • Equal Column Width คือความกว้างของแต่ละ สะดมภ์ ถ้าเป็นเครื่องหมายถูก คือ เท่ากันทุกสะดมภ์
  • User Color ทำตารางให้เป็นสี (ในตาราง)
    •  
    รูปที่ 31 เมื่อตอบ OK แล้วจะได้ดังรูป
     
     ตารางกว้าง 30 % ชิดซ้าย
       
     
     ตารางกว้าง 40 % กึ่งกลาง
       
     
     ตารางกว้าง  50 % ชิดขวา
      
       
      
     
     
    รูปที่ 32 เมื่อต้องการเปลี่ยนคุณสมบัติของตาราง ให้นำเมาส์ไปวางที่คาราง แล้วคลิกขวา
     
    ลอง คลิกที่ เปลี่ยนสี Use Color เลือกสีตามใจชอบ
     
     รูปที่ 33 เมื่อเปลี่ยนสี
     
     
     รูปที่ 34 เอากรอบออกโดยการคลิกให้เครื่องหมายถูกหน้า Border Line Widh หายไป
     
     
     รูปที่ 35   เมื่อตอบ OK  จะเห็นเป็นเส้นประ  แสดงว่า เส้นกรอบจะไม่แสดงเมื่อพรีวิว
     
    ดังตัวอย่าง
     
       
     
     
     
    รูปที่ 36   เมื่อต้องการแทรก ตาราง แถว สะดมภ์ หรือ เซลล์
    (การแทรกแถวสามารถทำได้โดยง่าย คือ นำ Cursor ไปที่ แถวสุดท้าย แล้วกดปุ่ม Tab)
     
     
    รูปที่ 37   เมื่อต้องการลบ ตาราง แถว สะดมภ์ หรือ เซลล์
     
    ******** หมายเหตุ  เมื่อท่านหลงลบ และต้องการย้อนคำสั่งคืนให้ไปที่ Menu   Edit > Undo หรือ กด Ctrl+Z
     
     
    รูปที่ 38   เราสามารถเลือกแก้ไข้เฉพาะ  ตาราง แถว และ เซลล์ ได้
     
    เช่นตัวอย่างข้างล่าง
     
           
           
         
     
    *** อย่าลืมคีย์ตัวอักษรลงในแต่ละ เซลล์ด้วย ***
    เพราะไม่เช่นนั้น จะไม่แสดงเซลล์นั้น
    (การเคาะ แป้น Space Bar ก็ถือว่าเป็นการ คีย์ตัวอักษร เพียงแต่เป็นอักษรว่างเท่านั้นเอง)
     

    การเชื่อมโยง(Link)ข้อมูลหรือเอกสาร

    สามารถแบ่งเป็น
    *** การเชื่อมโยง เราสามารถใช้ ตัวอักษร หรือ รูปภาพ เป็นตัวช่วยในการเชื่อมโยงก็ได้ ***
     
     พิมพ์ข้อความต่อไปนี้ และลองจัด List ให้ได้ดังตัวอย่าง

    สถาบันการศึกษาในประเทศไทย
    โรงเรียน
    สถาบันราชภัฏ
    มหาวิทยาลัย
    ข่าวและสื่อ
    เรื่องเกี่ยวกับสุขภาพ

    E-mail

     สถาบันการศึกษาในประเทศไทย
     
     เริ่มจาก ....
    การเชื่อมโยงกับข้อความภายในเอกสารหน้าเดียวกัน
     
    รูปที่ 39  การ Link ภายในเอกสาร
     
    1. นำ Cursor ไปไวัที่หน้าข้อความที่ ต้องการ Link ไปหา (ปลายทาง) (ไม่ต้องทำแถบสี)
    2. คลิกที่ปุ่ม Target
    3. ที่ Target Properties พิมพ์ ชื่อ ที่ ต้องการ (ในที่นี้คือ education)
    4. ตอบ OK
    รูปที่ 40  ผลทั่ได้ จะมีสัญญลักษณ์ Target หน้าข้อความ
     
    หลังจากนั้น...

    5. ทำแถบสีที่ ข้อความต้นทาง
    6. นำเมาส์ไปวาง จะเกิดรูปมือ คลิกปุ่มขวา
    7. เลือก Create Link Using Selected...

     
     
    รูปที่ 41  ผลทั่ได้ จะมีสัญญลักษณ์ Target หน้าข้อความ

     8. ป้อนตำแหน่ง ชื่อปลายทาง (Target) ที่เราได้กำหนดในตอนแรก (#education)

     
    รูปที่ 42  พิมพ์ #education
     
     
    การเชื่อมโยงไปยังเอกสาร (แฟ้มข้อมูล) อื่นๆ (ไม่ต้องใส่เครื่องหมาย #)
    1. ทำแถบสีที่ ข้อความต้นทาง (เนื่องจากปลายทางเป็นหน้าเอกสารอื่นจึงไม่ต้องทำอะไร)
    2. นำเมาส์ไปวาง จะเกิดรูปมือ คลิกปุ่มขวา
    3. เลือก Create Link Using Selected...
    4. ถ้าภายใน User เดียวกัน และ ไดเรกตอรีเดียวกัน ....ให้พิมพ์ชื่อแฟ้มข้อมูลได้เลย
    5. ถ้าภายใน User เดียวกัน แต่ ต่างไดเรกตอรีกัน .... ให้พิมพ์ชื่อไดเรกตอรี/ชื่อแฟ้มข้อมูล
    6. ถ้าต่าง Server หรือ ต่าง User   ให้พิมพ์   URL เช่น http://www.kmitl.ac.th
    7. ถ้าต่าง Server หรือ ต่าง User  และมีไดเรกตอรีซ้อนอยู่  ให้พิมพ์   URL เช่น http://www.kmitl.ac.th/direcory/filename

      8.  
    การเชื่อมโยงกับ อีเลคทรอนิคส์เมล์ (E-Mail)
    1. ทำแถบสีที่ หมายเลข E-mail ของท่าน
    2. นำเมาส์ไปวาง จะเกิดรูปมือ คลิกปุ่มขวา
    3. เลือก Create Link Using Selected...
    4. สมมติ E-mail เป็น kswaiyav@kmitl.ac.th  ให้พิมพ์ mailto:kswaiyav@kmitl.ac.th
    5. kswaiyav@kmitl.ac.th
    การเปลี่ยนตัวเชื่อมโยง
    1. ทำแถบสีที่  Link นั้น
    2. นำเมาส์ไปวาง จะเกิดรูปมือ คลิกปุ่มขวา
    3. เลือก Link Properties
    4. เปลี่ยนใหม่
     
      รูปที่ 43  เปลี่ยน Link
     
     การยกเลิกตัวเชื่อมโยง(Link)   Edit > Remove Link
    1. ทำแถบสีที่ ตัวเชื่อมโยงที่ต้องการจะยกเลิก
    2. นำเมาส์ไปวาง จะเกิดรูปมือ คลิกปุ่มขวา
    3. เลือก Remove Link
    4. สมมติ E-mail เป็น kswaiyav@kmitl.ac.th  ให้พิมพ์ mailto:kswaiyav@kmitl.ac.th
    5. kswaiyav@kmitl.ac.thสมมติ E-mail เป็น kswaiyav@kmitl.ac.th  ให้พิมพ์ mailto:kswaiyav@kmitl.ac.th

    การแทรกรูปภาพ

     เลือกได้จาก  Insert > Image...  หรือจาก รูป Image ก็ได้
     
     รูปที่ 44  รูปของ Image
     
     
     
      รูปที่ 45 ไดอะล็อก ของ Image
     
    คีย์ชื่อแฟ้มข้อมูล หรือ ค้นหาแฟ้มข้อมูล จาก Choose File...

    Leave Image at the original location

     จะได้ ดังภาพข้างล่าง
     
     
     
    1. นำเมาส์ไปวางบนรูปที่ต้องการ (ได้ครั้งละ 1 รูป)
    2. คลิกที่ปุ่มขวา
    3. เลือก Save Image As...
     
    การเชื่อมโยงโดยใช้รูปภาพ (เหมือนกับการเชื่อมโยงด้วยตัวอักษร)
    1. นำเมาส์ไปวางบนรูปที่ต้องการ จะเกิดรูปมือ คลิกปุ่มขวา
    2. เลือก Create Link Using Selected...
    3. ถ้าภายใน User เดียวกัน และ ไดเรกตอรีเดียวกัน ....ให้พิมพ์ชื่อแฟ้มข้อมูลได้เลย
    4. ถ้าภายใน User เดียวกัน แต่ ต่างไดเรกตอรีกัน .... ให้พิมพ์ชื่อไดเรกตอรี/ชื่อแฟ้มข้อมูล
    5. ถ้าต่าง Server หรือ ต่าง User   ให้พิมพ์   URL เช่น http://www.kmitl.ac.th

      6. ถ้าต่าง Server หรือ ต่าง User  และมีไดเรกตอรีซ้อนอยู่  ให้พิมพ์   URL เช่น http://www.kmitl.ac.th/direcory/filename
     

    ตัดต่อ-ดัดแปลงเพื่อเป็นแหล่งการเรียนรู้ของท่านโดย .. พินิจ พันธ์ชื่น
    แหล่งข้อมูล : http://www.kmitl.ac.th/manual/composer.html