วันอาทิตย์ที่ 30 สิงหาคม พ.ศ. 2552

การใช้งาน dreamweaver cs3




โปรแกรม Dreamweaver ซึ่งได้ออกมาหลายรุ่นด้วยกัน ตั้งแต่ Dreamweaver3, Dreamweaver4,Dreamweaver MX,Dreamweaver 8 และปัจจุบันเป็นรุ่น Adobe Dreamweaver CS3 โปรแกรม Adobe Dreamweaver CS3 ได้รับการพัฒนาความสามารถในการสร้างเว็บไซต์ โดยยังยึดหลักของ “WYSIWYG” ( What you see is what you get) กล่าวคือ คุณเห็นอะไรและคุณต้องการจะเอาอะไรมาใส่ในเว็บไซต์ สามารถนำมาวางได้ทันที โดยโปรแกรม Adobe Dreamweaver CS3 จะทำการแปลงเป็นภาษา HTML ให้อัตโนมัติ แม้ตัวเราเองจะไม่มีความรู้ทางด้านภาษา HTML ก็ตาม เราก็สามรถสร้างเว็บไซต์ได้



เมื่อเราต้องการเปิดโปรแกรม Adobe Dreamweaver CS3 ให้คลิกที่ปุ่ม แล้วเลือก แล้วเลือก Programs > Adobe Dreamweaver CS3 ดังรูปที่ 2
รูปที่ 2 การเปิด Adobe Dreamweaver CS3 เมื่อคลิกที่ Adobe Dreamweaver CS3 ในครั้งแรกของการใช้ โปรแกรม Adobe Dreamweaver CS3 จะแสดงให้เราเลือก Select All > OK ดังรูปที่ 3
รูปที่ 3 การเปิดครั้งแรก Dreamweaver CS3 โดยเลือกทั้งหมด และเมื่อเลือก OK โปรแกรม Adobe Dreamweaver CS3 จะแสดงดังรูปที่ 4

รูปที่ 4 หน้าตาของ Adobe Dreamweaver CS3


เมื่อเราเปิด Adobe Dreamweaver CS3 ขึ้นมาจะเข้าสู่ Start Page สำหรับใช้กำหนดสถานะของหน้าเว็บเพจ โดยใน Start Page ได้แบ่งออกเป็น 3 ส่วนด้วยกัน คือ Open Recent Item, Create New และ Create from Sample โดยรายละเอียดของ Start Page มีดังนี้

รูปที่ 5 แสดงหน้าจอ Start Page


เป็นส่วนที่ใช้แสดงงานเก่าที่เราได้สร้างเอาไว้ โดยโปรแกรม Adobe Dreamweaver CS3 จะแสดงรายชื่อไฟล์ไว้ให้เราเลือกเปิด แต่สำหรับกรณีนี้โปรแกรมไม่แสดงรายชื่อไฟล์ เพราะเรายังไม่เคยเปิดการใช้งาน จึงไม่มีชื่อไฟล์แสดงให้เห็น
รูปที่ 6 แสดงหน้า Open Recent Item เป็นการสร้างหน้าเว็บเพจขึ้นมาใหม่ โดยจะมีไฟล์ให้เลือกใช้งาน โดยปกติภาษาที่ใช้ในการสร้างเว็บเพจ จะใช้ภาษา HTML นอกจากนี้โปรแกรม Dreamweaver CS3 ยังสนับสนุนภาษาอื่น ๆอีก เช่น PHP, ASP VBScript, JavaScript, CSS, XMLฯลฯ โดยปกติการเปิดใช้งานครั้งแรก ส่วนมากจะเลือกที่ HTML เป็นอันดับแรก

รูปที่ 7 แสดงหน้า (Create New)

รูปที่ 8 แสดงหน้า Create from Sample

หากเรายังไม่รู้ว่าจะเลือกการสร้างเว็บเพจขึ้นมาใหม่ แล้วจะตกแต่งอย่างไร โปรแกรม Adobe Dreamweaver CS3 มีรูปแบบสำเร็จรูปไว้ให้เลือกใช้งาน รูปที่ 9 แสดงส่วนประกอบของ Adobe Dreamweaver CS3 คำอธิบาย 1. Menu bar : เป็นแถบเมนูใช้เก็บคำสั่งทั้งหมดของโปรแกรม Adobe Dreamweaver CS3 2. Insert bar : เป็นแถบเครื่องมือที่ใช้ในการจัดองค์ประกอบเว็บเพจ 3. Tool bar : เป็นแถบเครื่องมือที่กำหนดสถานะหน้าเว็บ 4. Status bar : เป็นแถบสถานะที่แสดงข้อมูลเกี่ยวกับงานที่กำลังทำอยู่ 5. Property Inspector : การกำหนดองค์ประกอบหน้าเว็บไซต์แสดงค่าการปรับองค์ประกอบ ต่าง ๆบนหน้าเว็บไซต์ 6. Panel Group : เป็นกลุ่มหน้าต่างพาเนลช่วยเพิ่มความสามารถในการจัดการและออกแบบหน้าเว็บไซต์ รูปที่ 10 กลุ่มเครื่องมือ Menu Bar เป็นคำสั่งที่เห็นอยู่ทั่วไปในโปรแกรมทั่วไป เช่น File, Edit, View เป็นต้น ซึ่งเราสามารถเลือกใช้เมนูคำสั่งได้ตามต้องการ
เครื่องมือ Insert Bar หรือแถบเครื่องมือ Insert เป็นเครื่องมือสำคัญอันดับแรก ๆที่ต้องทำความรู้จัก ต้องเรียกใช้งานอยู่เป็นประจำ เพราะเป็นที่สำหรับ จัดเก็บเครื่องมือต่าง ๆ จำเป็นสำหรับการสร้างเว็บไซต์ แยกเครื่องมือออกเป็น 7 กลุ่ม เพื่อสะดวกต่อการใช้งานดังนี้ 1. กลุ่ม Common เป็นกลุ่มเครื่องมือหลักในการสร้างเว็บไซต์ที่มักจะถูกเรียกใช้งานอยู่เป็นประจำ เช่น ปุ่มสร้างตาราง, ปุ่มสำหรับสร้างอีเมล์ลิงค์ เป็นต้น รูปที่ 11 กลุ่มเครื่องมือ Common 2. กลุ่ม Layout เป็นกลุ่มเครื่องมือสำหรับสร้างตารางในแบบเลย์เอาต์หรือสร้างตารางสำหรับออกแบบเว็บเพจ
รูปที่ 12 กลุ่มเครื่องมือ Layout 3. กลุ่ม Forms เป็นกลุ่มเครื่องมือสำหรับสร้างคำสั่งฟอร์ม และช่องรับข้อมูลในแบบต่าง ๆ รูปที่ 13 กลุ่มเครื่องมือ Forums 4. กลุ่ม Data เป็นกลุ่มเครื่องมือที่ใช้สำหรับการติดต่อระหว่างหน้าเว็บเพจกับฐานข้อมูล ใน Adobe Dreamweaver CS3 สามารถทำงานกับฐานข้อมูลได้อย่างสมบรูณ์ รูปที่ 14 กลุ่มเครื่องมือ Data 5. กลุ่ม Spry เป็นกลุ่มเครื่องมือที่ใช้ในการจัดการหน้าเว็บเพจ ซึ่งเครื่องมือนี้ได้เพิ่มขึ้นมาใน Adobe Dreamweaver CS3 จะช่วยในการทำงานเพิ่มเติมหรือแก้ไขได้สะดวกยิ่งขึ้น รูปที่ 15 กลุ่มเครื่องมือ Spry 6. กลุ่ม Text เป็นกลุ่มเครื่องมือสำหรับทำงานเกี่ยวกับตัวอักษรและสัญลักษณ์แบบพิเศษที่ใช้ในการเขียนเว็บไซต์

รูปที่ 16 กลุ่มเครื่องมือ Text 7. กลุ่ม Favorites เป็นกลุ่มเครื่องมือสำหรับรวบรวมเครื่องมือที่ใช้งานบ่อยไว้ในเครื่องมือ Favorites เพื่อความสะดวกรวดเร็วในการเรียกใช้งานครั้งต่อไป รูปที่ 17 กลุ่มเครื่องมือ Favorites รูปที่ 18 กลุ่มเครื่องมือ Tool Bar ทางซ้ายมือสุดจะเป็นคำสั่ง ใช้เปลี่ยนการแสดงผลของ document window อันแรกจะแสดงเฉพาะ Code (Code View) อันต่อมาจะแสดงทั้ง Code และ หน้าออกแบบ (Split View) อันสุดท้ายจะแสดงหน้าออกแบบ (Design View) เท่านั้น และยังมีเครื่องมือที่ใช้กำหนด Title ของหน้าเว็บเพจอีกด้วย ซึ่งในรายละเอียดจะกล่าวถึงในหัวข้อมุมมองการทำงานของ Adobe Dreamweaver CS3 อีกครั้งหนึ่ง

รูปที่ 19 กลุ่มเครื่องมือ Status Bar ถือว่าเป็นเครื่องมือที่มีประโยชน์มาก ทางขวาของแถบนี้จะเป็นตัวเลขที่บอกเวลาในการโหลดหน้านี้ ขนานของ Document window เครื่องมือย่อ/ขยาย ส่วนทางขวาจะเป็น Tag select ของ HTML จะแสดงคำสั่งของ HTML เราสามารถแก้ไขคำสั่งต่างๆได้จากหน้าต่างนี้
รูปที่ 20 กลุ่มเครื่องมือ Property inspector
Property inspector เป็นแถบเครื่องมือที่จะเปลี่ยนแปลงตามวัตถุที่เราเลือกอยู่เช่น ถ้าคลิกที่รูป Property inspector ก็จะเป็นคุณสมบัติเกี่ยวกับรูปนั้นเช่น ขนาดรูป , ชื่อรูป , ลิงค์ของรูป ถ้าเลือกที่ตารางอยู่ ก็จะเป็นคุณสมบัติของตาราง เช่น ขนาดตาราง , จำนวนแถวและหลักของตาราง เป็นต้น

รูปที่ 21 กลุ่มหน้าต่าง Panel Group หน้าต่างพาเนลต่าง ๆ นั้นจะช่วยเพิ่มความสามารถในการจัดการและการออกแบบหน้าเว็บไซต์ ซึ่งในแต่ละพาเนลนั้นจะจัดการกับหน้าเว็บไซต์ได้ไม่เหมือนกัน การเรียกพาเนล (Panel) ให้คลิกที่เมนู Windowsแล้วเลือกพาเนล (Panel) ที่ต้องการ ดังตัวอย่าง กรณีเลือก CSS

รูปที่ 22 เลือก CSS

1. พาเนล CSS (Panel CSS) เป็นพาเนลที่ใช้กำหนดแบบตัวอักษรและใช้เพิ่มลูกเล่นให้กับเว็บเพจ
รูปที่ 23 เครื่องมือพาเนล CSS 2. พาเนล Application เป็นพาเนลสำหรับให้เว็บไซต์ติดต่อกับฐานข้อมูลบนเว็บเซิร์ฟเวอร์ โดยทำงานกับ Database และ Bindings
รูปที่ 24 เครื่องมือพาเนล Application 3. พาเนล Tag Inspector เป็นพาเนลที่ใช้ใส่ Code ของ Javascript, VBscript ลงไปในส่วนต่าง ๆของเว็บเพจ หรือเป็นการใส่ลูกเล่นลงในเว็บเพจ รูปที่ 25 เครื่องมือพาเนล Tag Inspecto 4. พาเนล Files พาเนล File เป็นส่วนที่ใช้กำหนดตำแหน่งของเว็บเพจที่เราได้สร้างขึ้นและใช้แสดงแผนผังของเว็บไซต์ทำให้ง่ายต่อการเชื่อมโยงเว็บเพจ รูปที่ 26 เครื่องมือ File Adobe Dreamweaver CS3 นั้นจะมีมุมมองในการทำงานอยู่ 3 แบบ คือ Code View, Split View และ Design View ซึ่งมีไอคอนให้เลือกอยู่ที่ Toolbar ในแถบเครื่องมือ ซึ่งมีรายละเอียดการใช้งานดังนี้ การให้มุมมองนี้ให้คลิกที่ จะแสดงโค้ด HTML หรือ Script ในหน้าเว็บที่กำลังทำงานอยู่ ซึ่งมุมมองนี้สามารถใช้ในการเพิ่มเติมหรือแก้ไขโค้ดให้เว็บไซต์ รูปที่ 27 มุมมอง Code View การใช้มุมมองนี้ให้คลิกที่ จะแสดงทั้งโค้ดและหน้าเว็บเพจ (Design) ที่กำลังทำงานอยู่พร้อม ๆกันทำให้สามารถเปรียบเทียบดูผลลัพธ์ของโค้ดที่ได้สร้างขึ้นมาในรูปแบบของเว็บเพจ (การทำงานกับโค้ดต้องมีความรู้เกี่ยวกับภาษา HTML)

รูปที่ 28 มุมมอง Split View


การใช้มุมมองนี้ให้คลิกที่ เพื่อแสดงหน้าจอสำหรับการออกแบบและจัดองค์ประกอบของเว็บเพจ ซึ่งสามารถทำการตกแต่งสีสันของหน้าเว็บเพจได้อย่างอิสระโดยไม่ต้องทำงานกับภาษา HTML หรือกับคำสั่งสคริปต์ต่าง ๆ
รูปที่ 29 มุมมอง Design View

หากต้องการออกจากโปรแกรม Adobe Dreamweaver CS3 มีช่องทางให้เลือกใช้งานอยู่ 4 แบบ และเมื่อปิดโปรแกรมจะมีหน้าจอสอบถามว่าต้องการบันทึกงานหรือไม่ 1. คลิกเมนู File > Exit จากนั้นโปรแกรมจะยืนยันการปิดโปรแกรม 2. กดปุ่ม บนคีย์บอร์ด 3. คลิกปุ่ม ที่บริเวณ Title Bar 4. คลิกปุ่ม เลือกคำสั่ง Close
รูปที่ 30 ยืนยันการบันทึกก่อนออกจากโปรแกรม เมื่อคลิกปุ่ม Yes หรือ No เพื่อบันทึกหน้าเว็บเพจไว้หรือไม่ตามต้องการ


หลังจากที่ได้เรียนรู้องค์ประกอบที่สำคัญ Adobe Dreamweaver CD3 แล้วมาเริ่มต้นใช้งานจากการสร้าง หน้าเว็บเพจ และกำหนดตำแหน่งจัดเก็บเว็บเพจด้วย Manage Site การเปิดหน้าเว็บเพจนั้นก็เหมือนกับการสร้างหน้ากระดาษเปล่า สำหรับออกแบบเว็บเพจ ซึ่งสามารถทำได้ โดยการนำเมาส์ไปคลิกเมนู File > New หรือกดปุ่ม บนคีย์บอร์ดเพื่อเปิดหน้าเว็บเพจใหม่ขึ้นมา ดังตัวอย่างต่อไปนี้
รูปที่ 31 เปิดหน้าเว็บเพจใหม่
- คลิกเมนู File > New จากนั้นโปรแกรมจะเลือก Page Type แล้วเลือก Create - กดปุ่ม บนคีย์บอร์ด จากนั้นโปรแกรมจะเลือก Page Type แล้วเลือก Create
รูปที่ 32 การเลือกเปิดเว็บเพจใหม่


รูปที่ 34 แสดงผลผ่าน Internet Explorer


เมื่อเปิดเว็บเพจใหม่ขึ้นมาเราสามารถตั้งค่าของเว็บเพจจากชุดคำสั่ง Page Properties โดยสามารถตั้งค่า ของสีพื้นหลัง สีตัวอักษร สีของลิงค์ ฯลฯ ดังนี้

การปรับแต่งระบบ Adobe Dreamweaver CS3 ให้ทำงานกับภาษาไทยได้ เมื่อเปิดโปรแกรม Adobe Dreamweaver CS3 ขึ้นมาแล้ว เริ่มแรกเข้าไปที่ Edit > Preference
รูปที่ 35 ขั้นตอนการปรับเพื่อรับภาษาไทย

จากนั้นจะมีหน้าจอดังรูปด้านล่างให้ท่านเลือกที่เมนูทางด้านซ้ายมือในหัวข้อ Fonts และเปลี่ยนตามรูปที่ 36 รูปที่ 36 การปรับรองรับภาษาไทย อาจเปลี่ยนตามที่ผู้ใช้ต้องการก็ได้แต่ ต้องเป็น font ที่สามารถใช้กับภาษาไทยได้โดยมีรายละเอียดดังนี้ Proportional font เป็นตัวอักษรที่ใช้แสดงผลในหน้าแสดงผล (Design) Fixed font เป็นตัวอักษรที่ใช้แสดงผลในหน้าแสดงผล เหมือนกัน เพียงแต่ว่าจะแสดงตัวอักษรที่อยู่ใน pre tag, code tag และ tt tag Code view เป็นตัวอักษรที่แสดงผลในหน้า code ซึ่งเราจะใช้บ่อยมากๆควรปรับให้ตัวใหญ่เพื่อความสะดวก ในการอ่าน code จากนั้นเลือก New Document จากเมนูทางซ้ายมีจะเป็นดังรูปที่ 37 รูปที่ 37 การเปลี่ยนแบบอักษร เมื่อเราเลือกที่ New document แล้วจะปรากฏหน้าตาดังภาพด้านล่าง ซึ่งให้เราเลือกที่ Default document เป็น HTML และเปลี่ยนDefault encoding เป็น Thai ดังรูปที่ 37 เสร็จแล้วก็ให้ไปที่ Default document อีกทีเลือก CSS และเปลี่ยน Default encodingเป็น Thai อีกเช่นเดียวกัน การตั้งชื่อเว็บเพจนั้นส่วนหนึ่งก็เพื่อให้เว็บเพจที่สร้างขึ้นมามีชื่อเป็นตัวระบุให้เราได้ทราบว่าเว็บเพจนั้นชื่อว่าอะไร ซึ่งชื่อของเว็บเพจที่ตั้งขึ้นนั้นจะปรากฏที่แถบ Title Bar ของบราวเซอร์ขณะแสดงผล ส่วนวิธีตั้งชื่อเว็บเพจสามารถทำได้ด้วย การคลิกเมนู Modify > Page Propreties หรือกดปุ่ม ดังรูปที่ 38
รูปที่ 38 ขั้นตอนการตั้งชื่อเว็บเพจ
รูปที่ 39 กำหนดหัวเรื่องเว็บเพจที่เราต้องการ
รูปที่ 40 การแสดงหัวเรื่องเว็บเพจ



เริ่มต้นด้วยการสร้างหน้าเว็บเพจ การสร้างเอกสารใหม่ของ Adobe Dreamweaver CS3 นั้น ทำได้ง่ายมากเมื่อเปิดโปรแกรมขึ้นมาจะเห็นว่ามีหน้าจอดังรูปด้านล่าง เราสร้างเอกสารได้จากหน้าจอนี้ดังรูปที่ 66 รูปที่ 66 การสร้างเอกสารใหม่
นอกเหนือจากการใช้หน้าจอเริ่มต้นเมื่อเปิดโปรแกรมเรายังสามารถสร้างเอกสารใหม่ได้ดังนี้.-1. ให้ไปที่ Menu เลือก File > New… จะมีหน้าจอให้เลือกดังรูปด้านล่าง 2. เลือก Blank Page > HTML 3. เลือก Create จะได้เอกสาร HTML ขึ้นมา








รูปที่ 67 ขั้นตอนการสร้างเอกสารใหม่
รูปที่ 68 การเลือกสร้างเอกสารใหม่รูปที่ 69 การเปิดเอกสารใหม่
ก่อนที่เราจะพิมพ์ข้อความลงไป เราต้องเตรียมข้อมูลมาไว้เรียบร้อยแล้ว จากนั้นจึงนำข้อมูลที่เตรียมไว้พิมพ์ลงในเว็บเพจที่เราสร้างขึ้น การพิมพ์ข้อความลงไปให้พิมพ์หลังเคอร์เซอร์ หรือ ที่กระพริบอยู่ ดังรูปที่ 69
เมื่อเราพิมพ์อักษรแล้ว เรายังสามารถแก้ไขสีตัวอักษรได้ โดยการตั้งค่าสีได้ดังนี้.- 1. คลิกลากเคอร์เซอร์คลุมตัวอักษร 2. เลือกที่เมนู Modify > Page Properties3. คลิกเลือก Appearance 4. คลิกเลือกช่อง Text Color5. เลือกสีที่ต้องการ6. คลิก OK7. คลิกเมาส์ในพื้นที่เว็บเพจอีกครั้ง
รูปที่ 70 การใส่สีตัวอักษร

รูปที่ 71 การเลือกสีตัวอักษร
รูปที่ 72 การแสดงสีตัวอักษร
การใส่สีให้กับตัวอักษรที่อยากแนะนำ สะดวก รวดเร็ว โดยมีวิธีการดังนี้.- 1. คลิกลากเคอร์เซอร์คลุมตัวอักษร 2. เลือก Properties ที่อยู่ด้านล่างของโปรแกรม แล้วคลิกที่รูป 73 3. เลือกสีที่ต้องการ


รูปที่ 73 แสดงการคลุมตัวอักษร รูปที่ 74 การเลือกสีตัวอักษร


รูปที่ 75 การแสดงสีตัวอักษร
ในการเลือกรูปแบบตัวอักษรที่ไม่มีมาตรฐานนั้น อาจจะเกิดปัญหาได้ในกรณีที่มีผู้เข้าชมเว็บไซต์แล้ว อ่านยาก ไม่สวย หรือเป็นภาษาที่อ่านไม่ออก ดังนั้นจึงควรใช้รูปแบบตัวอักษรที่เป็น มาตรฐาน เช่น MS Sans Serif เนื่องจากสามารถแสดงผลบนเบราเซอร์ทุกชนิด โดยการเลือกรูปแบบตัวอักษร (Font) มีขั้นตอนดังนี้ 1. เลือกเมนู Modify > Page Properties 2. เลือก Appearance 3. เลือกแบบตัวอักษร (font) ตามที่ต้องการ 4. คลิก OK
รูปที่ 76 ขั้นตอนเลือกแบบตัวอักษร

นอกจากนี้ยังมีอีกวิธีหนึ่งที่ค่อนข้างสะดวก รวดเร็ว ง่ายมาก โดยการทำดังนี้.- 1. เลือก Properties ที่อยู่ด้านล่างของโปรแกรม แล้วคลิกที่รูป 782. เลือก Font 3.เลือกแบบตัวอักษรที่ต้องการ

รูปที่ 78 ขั้นตอนเลือกแบบอักษร
ในการเปลี่ยนขนาดตัวอักษร สามารถทำได้โดยขั้นตอนดังนี้.-1. เลือกเมนู Modify > Page Properties2. เลือก Appearance 3. เลือก Size ตัวอักษร (font) ตามที่ต้องการ4. คลิก OK รูปที่ 79 ขั้นตอนการเปลี่ยนขนาดอักษร
รูปที่ 80 การเลือกขนาดอักษร
นอกจากนี้ยังมีอีกวิธีหนึ่งที่ค่อนข้างสะดวก รวดเร็ว ง่ายมาก โดยการทำดังนี้.- 1. เลือก Properties ที่อยู่ด้านล่างของโปรแกรม แล้วคลิกที่รูป 81 2. เลือก Size 3.เลือกขนาดตัวอักษรที่ต้องการ
1. เลือกเมนู Edit >Preference 2. ใน Category เลือก General 3. เลือก Allow multiple consecutive Spaces 4. เลือก OK
รูปที่ 82 การตั้งค่าเว้นวรรคระหว่างข้อความแบบถาวร


ภายในเว็บเพจของเรานอกจากจะมีเนื้อหาที่มีประโยชน์แก่ผู้เข้าชมแล้ว หากมีการเพิ่มรูปภาพกราฟิก ต่างๆ ก็จะช่วยให้เว็บเพจมีสีสันสวยงาม น่าสนใจมากยิ่งขึ้น ดังนั้นเราจะเห็นได้ว่า เว็บไซต์จํานวนมากจึงนิยมนํา รูปภาพมาใช้ตกแต่งและอธิบายเนื้อหาเพื่อให้ผู้เข้ามาเยี่ยมชมเว็บไซต์ได้เห็นภาพและเข้าใจ เนื้อหามากขึ้น

ในการนําภาพมาประกอบข้อความบนเว็บเพจนั้น ควรพิจารณาและเลือกรูปภาพที่นํามาใช้ให้เหมาะสม โดยมีข้อพิจารณาดังนี้ 1. ไม่ควรเน้นรูปภาพภายในเว็บเพจมากจนเกินไป ควรจะมีข้อความและรูปภาพที่สมดุลกัน 2. การใช้รูปภาพที่เป็นไฟล์ขนาดใหญ่จะทําให้การโหลดเว็บเพจใช้เวลานานกว่าจะแสดงภาพ ดังนั้น จึงควรใช้ภาพที่มีพอเหมาะกับสิ่งที่เราต้องการ สื่อกับผู้ชม หรืออาจใช้โปรแกรมทางกราฟิก เช่น Photoshop หรือ ACDSee ทําการลดขนาดภาพ (Resize) ก่อนนํามาลงบนเว็บเพจก็ได้ 3. ปัจจุบันการนํารูปภาพลงเว็บเพจควรคํานึงถึงที่มาและลิขสิทธิ์ของรูปภาพนั้นด้วย แต่บางเว็บไซต์ก็มีการแจกรูปภาพให้ฟรี ซึ่งสามารถนํามาใช้ประโยชน์โดยไม่ต้องเสียค่าลิขสิทธิ์ 4. ควรเลือกใช้ภาพที่มีโทนเดียวกับส่วนประกอบอื่นภายในเว็บเพจ เพื่อความกลมกลืนไม่แตกต่างกัน

รูปภาพที่ใช้ในเว็บเพจมีอยู่ 3 ชนิดด้วยกัน ซึ่งแต่ละชนิดมีรายละเอียดและลักษณะที่แตกต่างกันดังนี้ 1. GIF (Graphic Interchange Font) เป็นรูปแบบของไฟล์รูปภาพที่เป็นที่นิยมอย่างมาก สามารถกําหนดสีได้สูงสุด 256 สี ทําภาพโปร่งและสร้างภาพเคลื่อนไหวได้ 2. JPEG (Joint Photographic Experts Group) เป็นรูปแบบของไฟล์รูปภาพที่สามารถกําหนดสี ได้เป็นล้านสี เหมาะสําหรับภาพถ?าย รูปภาพจากการสแกน 3. PNG (Portable Network Graphic) เป็นรูปแบบของไฟล์รูปภาพที่ใช้บนเว็บ แต่อาจใช้ไม่ได้ กับทุกบราวเซอร์สามารถใส่เอฟเฟ็กต์ได้

ในตัวอย่างต่อไปนึ้ได้เก็บไฟล์ต่าง ๆเก็บไว้ที่ D:\Nfebanbung\Image\ 1. วางเคอร์เซอร์ตรงตําแหน่งที่ต้องการใส่รูปภาพ 2. เลือก เมนู Insert แล้วเลือกคำสั่ง Image 3. ในช่อง Look in ให้เลือกโฟลเดอร์ที่เก็บไฟล์ภาพ 4. เลือกรูปภาพที่ต้องการ 5. คลิกปุ่ม OK 6. ปรากฏหน้าต่างแสดงข้อความว่า “ให้พิมพ์ข้อความแทนรูปภาพ” เมื่อพิมพ์เสร็จ คลิกปุ่ม OK 7. ปรับแต่งขนาดรูปภาพให้เหมาะสม


รูปที่ 83 ขั้นตอนการใส่รูปภาพเว็บเพจ

รูปที่ 84 ตำแหน่งที่ต้องการใส่รูปภาพ

รูปที่ 85 การเลือกรูปภาพ

รูปที่ 86 ใส่ข้อความให้กับรูปภาพ








รูปที่ 87 ใส่รูปภาพในตำแหน่งที่กำหนดไว้
นอกจากนี้ยังมีอีกวิธีหนึ่งที่ค่อนข้างสะดวก รวดเร็ว ง่ายมาก โดยการทำดังนี้.- 1. คลิกที่ Insert 2.เลือก Common 3. เลือกรูป 4.ในช่อง Look in ให้เลือกโฟลเดอร์ที่เก็บไฟล์ภาพ 5. เลือกรูปภาพที่ต้องการ 6. คลิกปุ่ม OK 7.ปรากฏหน้าต่างแสดงข้อความว่า “ให้พิมพ์ข้อความแทนรูปภาพ” เมื่อพิมพ์เสร็จ 8. คลิกปุ่ม OK 9. ปรับแต่งขนาดรูปภาพให้เหมาะสม



รูปที่ 88 ขั้นตอนใส่รูปภาพอย่างเร็ว











รูปที่ 89 การเลือกรูปภาพอย่างเร็ว
รูปที่ 90 ใส่ข้อความให้กับรูปภาพ







รูปที่ 91 ตำแหน่งรูปภาพที่กำหนด

1. คลิกที่รูปภาพที่จะปรับขนาด จะปรากฏจุดยืด (Handle) ที่ขอบล่างขวา และมุมขวา ล่างของรูป 2. ลากจุดยืดเพื่อปรับขนาดตามต้องการ สามารถลากจุดยืดเพื่อปรับขนาดได้เล็กที่สุด 8x8 พิกเซลล์ และหาก ต้องการขนาดเล็กกว่านี้ให้ ใส่ค่าลงในส่วนของ W และ H ใน พาเนล Properties
รูปที่ 92 การปรับรูปภาพในเว็บเพจ

1. คลิกที่รูปภาพที่จะจัดวาง 2. ในส่วนของ Align ของพาเนล Properties 3. เลือกลักษณะการจัดวางตามต้องการ

รูปที่ 93 การวางตำแหน่งรูปภาพ
คำอธิบาย
Default = วางบนขอบล่าง (เป็นค่าปกติ) Baseine = วางขอบล่างของภาพเสมอแนวขอบล่างของข้อความ Middle = วางกึ่งกลางของภาพเสมอกับขอบล่างของข้อความ Top = วางขอบบนของภาพเสมอกับขอบบนที่สูงที่สุดของข้อความ Text Top = วางขอบบนของภาพเสมอกับขอบบนของข้อความ Absolute Middle = วางกึ่งกลางของภาพเสมอกับกึ่งกลางของข้อความ Absolute Bottom = วางขอบล่างของภาพเสมอกับแนวขอบล่างของข้อความ Left = วางภาพไว้ทางขอบซ้าย และจัดข้อความไว้ทางขอบขวา Right = วางภาพไว้ทางขอบขวา และจัดข้อความไว้ทางซ้ายของภาพ


1. คลิกที่รูปภาพที่จะปรับระยะให้ห่างจากข้อความ 2. ในพาเนล Properties กําหนดค่าในส่วนของ V Space และ H Space


รูปที่ 94 วางตำแหน่งรูปภาพ

1. คลิกที่รูปภาพที่จะใส่กรอบ 2. กําหนดค่าความหนาของเส้นกรอบในส่วนของ Border ในพาเนล Properties แล้ว กด Enter
รูปที่ 95 การใส่กรอบรูปภาพ
การใส่รูปภาพเป็นฉากหลัง (Background) ถือว่าเป็นการเพิ่มความสวยงามและน่าสนใจให้กับ เว็บเพจ ซึ่งภาพที่น่าจะนํามาเป็นฉากหลังต้องไม่มีลวดลายหรือสีสันมากเกินไป เพื่อไม่ให้ผู้ชมเว็บไซต์สับสน หรือสีของพื้นหลังอาจตัดกับสีของข้อความทําให้ลำบากในการอ่านได้ ดังนั้นภาพที่นํามาเป็นฉากหลังต้องเป็นสีที่ กลมกลืนกับข้อความหรือรูปภาพที่วางไว้ในเว็บเพจ ซึ่งการใส่รูปภาพเป็นฉากหลังมีขั้นตอนดังนี้ 1. คลิกที่เมนู Modify >Page Properties 2. คลิกที่หัวข้อ Apperance 3. คลิกที่ปุ่ม Browse... 4. เลือก Look in ที่เก็บเว็บเพจ 5. เลือกไฟล์รูปภาพที่ต้องการนํามาเป็นฉากหลัง 6. คลิกที่ปุ่ม OK 7. จะปรากฏไฟล์ภาพที่เลือกไว้ 8. คลิกที่ปุ่ม OK ที่หน้าต่าง Page Properties อีกครั้ง 9. ปรากฏภาพที่นํามาเป็นฉากหลังเรียบร้อยแล้ว
รูปที่ 96 ขั้นตอนใส่รูปภาพฉากหลัง

รูปที่ 97 การใส่รูปภาพฉากหลัง

รูปที่ 98 การเลือกรูปภาพฉากหลัง รูปที่ 100 การแสดงผลเลือกรูปภาพฉากหลัง นอกจากนี้ยังมีอีกวิธีหนึ่งที่ค่อนข้างสะดวก รวดเร็ว ง่ายมาก โดยมีวิธีทำดังนี้.- 1. คลิกที่ ปุ่ม Pageroptis 2. คลิกที่หัวข้อ Apperance 3. คลิกที่ปุ่ม Browse... 4. เลือก Look in ที่เก็บเว็บเพจ 5. เลือกไฟล์รูปภาพที่ต้องการนํามาเป็นฉากหลัง 6. คลิกที่ปุ่ม OK 7. ปรากฏภาพที่นํามาเป็นฉากหลังเรียบร้อยแล้ว

รูปที่ 102 ขั้นตอนเลือกรูปภาพฉากหลังอย่างรวดเร็ว

รูปที่ 103 การเลือกรูปภาพอย่างเร็ว

รูปที่ 104 การแสดงรูปภาพตามตำแหน่งที่กำหนดไว้

ไฮเปอร์ลิงค์ (Hyperlink) หรือที่เรียกว่า “ลิงค์” เป็นการเชื่อมโยงเว็บไซต์บนอินเตอร์เน็ต จากจุดหนึ่งโยงไปยังอีกจุดหนึ่ง การเชื่อมโยงในลักษณะนี้นับว่ามีประโยชน์อย่างมาก เนื่องจากทําให็ผู้เข้าชม สามารถเข้าถึงข้อมูลและเนื้อหาทุกหน้า เว็บเพจภายในเว็บไซต์ของเราได้
ในการทํางานของไฮเปอร์ลิงค์มีส่วนประกอบดังนี้ 1. ต้นทาง (Source Anchor) หมายถึง ส่วนประกอบบนเว็บที่เป็นจะลิงค์ ซึ่งเมื่อเลื่อนเมาส์ ไปชี้ พอยเตอร์จะเปลี่ยนเป็นรูปมือ และเมื่อคลิกเลือกหน้าเว็บหรือข้อมูลปลายทางจะปรากฏขึ้นมา ซึ่งอาจเป็นข้อความหรือรูปภาพก็ได้ 2. ปลายทาง (Destination Anchor) หมายถึง เนื้อหาข้อมูลต่างๆ ไม่ว่าจะเป็นข้อความหรือ รูปภาพ ซึ่งถูกเรียกให้ปรากฏขึ้นมาเมื่อมีผู้ชมคลิกที่ลิงค์ต้นทาง ซึ่งลิงค์ปลายทางแบ่งได้เป็นหลาย รูปแบบ ดังนี้ - ตําแหน่งเฉพาะบนเว็บเพจ คือการสั่งให้เบราเซอร์เปิดเว็บเพจพร้อมทั้งเลื่อนไปยัง ตําแหน่งที่ระบุไว้โดยทันที - เว็บเพจหรือเว็บไซต์ โดยส่วนมากลิงค์บนเว็บเพจจะใช้สําหรับเปิดไปยังหน้าเว็บ เพจอื่นภายในเว็บไซต์เดียวกัน หรือเปิดไปยัง หน้าเว็บไซต์อื่น - ไฟล์เอกสารอื่นๆ สามารถลิงค์ไปยังเนื้อหาหรือข้อมูลต่าง ๆ บนอินเตอร์เน็ตได้ หากรู้ ตําแหน่งที่อยู่ โดยวธีการทํางาน ของเบราเซอร์จะขึ้นอยู่กับประเภทของไฟล์เหล่านั้น - คําสั่งส่งอีเมลล์ คือการสั่งให้เปิดโปรแกรมอีเมลล์บนเครื่องคอมพิวเตอร์ของผู้ชม เพื่อเตรียมเขียนข้อความส่งอีเมลล์ - การรันโปรแกรมจาวาสคริปต์ สําหรับใช้ในการโต้ตอบบนเว็บเพจ การปิดวินโดว์ เบราเซอร์ การเปิดลิงค์ก็เป็นวินโดว์ใหม่ แบบป๊อบอัพ
ในการลิงค์ข้อความนั้นสามารถทําได้ 2 วิธี คือ วิธีที่ 1 การลิงค์ข้อความไปยังส่วนต่าง ๆ ในหน้าเว็บเพจเดียวกัน มีขั้นตอนดังนี้ 1. วางเคอร์เซอร์หน้าข้อความที่ต้องการลิงค์ไปหา 2. คลิกเมนู Insert > Common 3. คลิกที่รูป 4.ปรากฎหน้าต่าง Named Anchor จากนั้น พิมพ์ชื่อลิงค์ โดยในที่นี้พิมพ์คําว่า Top 5. คลิกปุ่ม OK 6. จะปรากฏเป็นไอคอน 7. เลือกข้อความที่ใช้เป็นจุดลิงค์ 8. พิมพ์ข้อความดังนี้ #top 9. เลือกเมนู File > Save 10.จากนั้นทดลองเปิด Internet Explorer โดยกด F12
รูปที่ 105 จุดสำหรับการสร้างลิงค์ รูปที่ 106 เลือก Common ในเมนู Insert
รูปที่ 107 ใส่ข้อความจุดทำลิงค์

รูปที่ 108 การแสดงจุดลิงค์
รูปที่ 109 การสร้างจุดลิงค์

รูปที่ 110 การใส่ข้อความจุดลิงค์
รูปที่ 111 การแสดงผลจุดลิงค์

วิธีที่ 2 การลิงค์ข้อความไปยังหน้าเว็บเพจอื่นในเว็บไซต์เดียวกัน มีขั้นตอนดังนี้ 1. เลือกข้อความที่ต้องการ สร้างจุดลิงค์ 2. คลิกที่ปุ่ม 3.ปรากฎหน้าต่าง Select File จากนั้นคลิกเลือกเว็บเพจปลายทางที่ต้องการลิงค์ 4. คลิกปุ่ม OK 5. ที่เมนู File เลือก Save
รูปที่ 112 การสร้างจุดลิงค์เว็บเพจอื่น

รูปที่ 113 ขั้นตอนสร้างจุดลิงค์
รูปที่ 114 การ เลือกเว็บเพจเป้าหมายสร้างจุดลิงค์










รูปที่ 116 การแสดงจุดลิงค์


1. ใส่รูปภาพลงไปในเว็บเพจ โดยคลิกที่เมนู Insert > Image หรือคลิกที่รูป 2. คลิกเลือกรูปภาพที่ต้องการ แล้วคลิกปุ่ม OK 3. ใส่ข้อความแทนรูปภาพ แล้วคลิกปุ่ม OK 4. กำหนดหน้าเว็บเพจที่ต้องการลิงค์ไป โดยคลิกที่ 5. จากนั้นเลือกรูปภาพที่ต้องการทำลิงค์ แล้วคลิก OK 6. เลือกเมนู File > Save 7. กดปุ่ม F12 เพื่อดูผลการสร้างลิงค์ แล้วคลิกที่รูปทำลิงค์
รูปที่ 117 ขั้นตอนการสร้างลิงค์จากรูปภาพ

รูปที่ 118 เลือก Common ในเมนู Insert
รูปที่ 119 การเลือกรูปภาพลิงค์

รูปที่ 120 การใส่ข้อความรูปภาพลิงค์
รูปที่ 121 การเปิดรูปภาพลิงค์
รูปที่ 122 การเลือกเว็บเพจเป้าหมาย
รูปที่ 123 การบันทึกเว็บเพจ
รูปที่ 124 การแสดงผลผ่าน Browser
อีเมล์ลิงค์เป็นลิงค์ที่เมื่อเราคลิกแล้วจะเปิดหน้าต่างใหม่พร้อมกับเรียกโปรแกรมส่งอีเมล์ที่ เรากําหนดไว้ในเว็บเบราเซอร์ ซึ่งในช่องที่ให้กรอกที่อยู่ของผู้รับของโปรแกรมส่งอีเมล์จะแสดง อีเมล์แอดเดรส (Email Address) ที่กําหนดไว้ในอีเมล์ลิงค์ ซึ่งการแทรกอีเมล์ลิงค์ในเอกสารทําได้ ดังนี้ 1. เลือกตําแหน่ง ที่ต้องการเพิ่มอีเมล์ลิงค์ลงในเว็บเพจ 2. เลือกเมนู Insert -> E-mail Link หรือ คลิกที่ปุ่ม 3. หลังจากขั้นตอนที่ 2 จะปรากฎไดอะล็อก Email Link ดังรูปที่ ให้พิมพ์อีเมล์แอดเดรสที่ใช้ตอนคลิกอีเมล์ลิงค์ เช่น mailto:naunggate@yahoo.co.th เป็นต้น 4. เลือกเมนู File > Save จากนั้นทดลองโดยกดที่ F12 จะปรากฏดังรูปที่ 125
รูปที่ 125 การคลุมข้อความอีเมล์ลิงค์
รูปที่ 126 ขั้นตอนการสร้างอีเมล์ลิงค์
หรือเลือกตรง Common Tab ใน Insert Bar
รูปที่ 127 การเลือก Common ในเมนู Insert
รูปที่ 128 ข้อความอีเมล์ลิงค์

รูปที่ 129 การบันทึกเว็บเพจ
เราสามารถที่จะทําเว็บของเราเป็นเว็บบริการหรือรวมลิงค์ให้ผู้อื่นสามารถลิงค์ไปยังเว็บไซต์อื่นได้อีกด้วยเพื่อสร้างความหลากหลายในเว็บของเรา และยังสะดวกกับเจ้าของเว็บเองอีกด้วยโดยไม่ต้องพิมพ์ URL เข้าไปใหม่ แต่สามารถคลิกที่เว็บของตัวเองก็สามารถไปยังเว็บที่ต้องการได้มีวิธีทำดังนี้.- 1. พิมพ์ข้อความที่ต้องการทําลิงค์ ตัวอย่างต้องการลิงค์ไปยังเว็บ สำนักบริหารงานการศึกษานอกโรงเรียน ให้พิมพ์ สำนักบริหารงานการศึกษานอกโรงเรียน 2. ให้แดรกเม้าส์ทับข้อความ สำนักบริหารงานการศึกษานอกโรงเรียน จากนั้นที่ Properties inspector ในช่อง Link ให้พิมพ์URL เข้าไปคือ http://www.nfe.go.th/ 3. เลือกเมนู File > Save จากนั้นกด F12 เพื่อดูผ่าน Browser ใ ช้ Mouse ชี้ที่ข้อความ สำนักบริหารงานการศึกษานอกโรงเรียน ให้สังเกตจาก Status bar ด้านล่างจะระบุเว็บไซต์ที่ถูกเชื่อมโยง แล้วทดสอบคลิกที่ลิงค์ที่ทําไว้
รูปที่ 130 คลุมข้อความสร้างลิงค์เว็บไซต์เป้าหมาย

รูปที่ 131 บันทึกเว็บเพจ

รูปที่ 132 การแสดงผลผ่าน Browser



เมื่อก่อนคำสั่ง ตาราง (Table) ถือว่าเป็นคำสั่งที่จำเป็น และสำคัญมากในการสร้างเว็บเพจ เพราะการจัดตำแหน่งของหน้า Layout นั้นจำเป็นจะต้องใช้คำสั่งตารางทั้งหมด ทำให้มีเทคนิคมากมายที่นำมาใช้เกี่ยวกับตาราง แต่ด้วยข้อเสียของคำสั่งตาราง คือจะเปลี่ยนขนาดตัวเองตามวัตถุที่อยู่ภายใน ทำให้โครงสร้างของเว็บไซต์เปลี่ยนแปลงไป และยังยุ่งยากในการจัดรูปแบบหน้า ปัจจุบันนี้คำสั่ง CSS กำลังได้รับความนิยมในการจัดรูปแบบหน้า Layout มากกว่า คำสั่งตารางมาก ทำให้คำสั่งตารางลดความสำคัญลงไป เนื่องจาก CSS นั้นจัดรูปแบบหน้าได้เร็วกว่า ง่ายกว่า และเปลี่ยนแปลงได้ง่ายกว่า ทำให้ในปัจจุบันนั้น คำสั่งตารางจะใช้เพียงแสดงข้อมูลในรูปแบบตารางเท่านั้น

เมื่อได้เปิดตารางขึ้นมาแล้ว ก่อนที่จะทำงานกับตารางควรจะทำความรู้จักกับส่วนประกอบต่าง ๆของตาราง ซึ่งมีรายละเอียดดังนี้.- 1.Cell Padding : ระยะห่างของข้อความหรือรูปภาพจากขอบในช่องเซลล์ 2. เซลล์ (Cell) : ช่องแต่ละชองที่อยู่ในตาราง 3. แถว ( Row) : ช่องแนวนอก 4.คอลัมน์ (Column) : ช่องแนวตั้ง
ขั้นตอนการสร้างตารางมีดังนี้ 1. คลิกที่ปุ่มรูปตารางดังรูปที่ 133 รูปที่ 133 การสร้างตารางเว็บเพจ 2. จะมีหน้าต่างขึ้นมาดังรูปที่ 134


รูปที่ 134 การเลือกสร้างตารางเว็บเพจ คำอธิบาย 1. Rows จำนวนแถวของตาราง 2.Columns จำนวนหลักของตาราง 3.Table width ความกว้างของตาราง จะใส่เป็น Pixel เพื่อกำหนดความกว้างให้คงที่ หรือ Percent (%) เพื่อกำหนดความกว้างตามขนาดหน้าจอ ก็ได้ 4.Border thickness ความหนาของเส้นขอบตาราง ถ้าเราไม่ต้องการให้มีเส้นขอบให้ใส่เป็น 0 5.Cell padding ระยะห่างระหว่างขอบตาราง กับเนื้อหาภายในตาราง 6.Cell spacing ระยะห่างระหว่างช่อง 7.Header จัดหัวข้อของตาราง ข้อความที่อยู่ในช่องที่เป็นหัวข้อจะเป็นตัวหนา จะมี 3 แบบ คือ 7.1 left ให้หลักที่อยู่ทางซ้ายมือเป็นหัวข้อตาราง 7.2 top แถวบนสุดเป็นหัวข้อ 7.3 Both แถวบนสุด และหลักซ้ายสุดเป็นหัวข้อ 8.Caption ใส่ชื่อตาราง 9.Align caption จัดตำแหน่งของชื่อตาราง 10.Summary บรรยายตาราง รายละเอียดที่เราจะเป็นต้องกรอกจะอยู่ในหัวข้อ Table size หรือรายการ 1-6 เท่านั้นนอกจากนั้นไม่จำเป็นต้องกรอกก็ได้ 3.เมื่อเลือกที่ตารางจะเห็นว่า Property inspector เป็นดังรูปที่ 135
ู รูปที่ 135 Properties ของตาราง คำอธิบาย 1. Table id กำหนดชื่ออ้างอิงให้กับตาราง 2. Rows กำหนดจำนวนแถวของตาราง ถ้าคุณเปลี่ยนจำนวนแถวให้น้อยลง โปรแกรมจะลบจากแถวล่างสุด 3. Cols กำหนดจำนวนหลักของตาราง ถ้าคุณเปลี่ยนจำนวนหลักให้น้อยลง โปรแกรมจะลบจากหลักขวาสุด 4. W (Width) กำหนดความกว้างของตาราง 5. H (Height) กำหนดความสูงของตาราง ไม่แนะนำให้กรอกค่านี้ เพราะคำสั่งนี้ยังไม่สนับสนุน XHTML 1.0 6.CellPad ระยะห่างระหว่างขอบตาราง กับเนื้อหาภายในตาราง 7.CellSpaceระยะห่างระหว่างช่อง 8.Align จัดตำแหน่งของตาราง 9.Borderกำหนดความหนาของขอบ 10.Class กำหนด Class ใน CSS 11.Clear and Convert ปุ่มทางล่างซ้ายจะมีอยู่ 2 ประเภท คือ



รูปที่ 136 รูปภาพไอคอนตาราง 11.1.ปุ่ม clear ใช้ในการลบความกว้างและความสูงของตาราง 11.2.ปุ่ม convert สลับหน่วยของความสูง,ความกว้างของตาราง เป็น px หรือ % 12.Bg Color กำหนดสีพื้นหลังของตาราง คลิกที่ช่องสีเหลี่ยมด้านหน้าเพื่อ เลือกสี 13.Bg Image กำหนดภาพพื้นหลังของตาราง 14.Brdr Color กำหนดสีขอบ คลิกที่ช่องสีเหลี่ยมด้านหน้าเพื่อเลือกสี
สามารถเพิ่มจำนวนช่องให้มากขึ้น หรือลดจำนวนช่องให้น้อยลงได้ ในแถวหรือหลักของตาราง ดังรูปที่ 137 รูปที่ 137 แสดงการเลือกตาราง รูปที่ 138 แสดงการผสานตาราง
รูปที่ 139 ขั้นตอนการผสาน Cell
1.เลือกช่องที่ต้องการผสาน โดยการคลิกเมาส์แล้วลากผ่านช่องที่ต้องการให้ผสานกัน 2.คลิกที่สัญลักษณ์ทางซ้ายล่างดังรูปที่ 139
การแยกช่องจากช่องเดิมที่มีอยู่ ในตัวอย่างเป็นการแยกจำนวนช่องในแถว (rows) ให้มากขึ้น รูปที่ 140 แสดงการแยก Cell รูปที่ 141 การแสดงผลแยก Cell
รูปที่ 142 แสดงสัญลักษณ์แยกเซล 1.เลือกช่องที่ต้องการแยก 2.คลิกที่สัญลักษณ์ทางซ้ายมือดังรูปที่ 142 3.จะมีหน้าต่างขึ้นมาดังรูปที่ 143
รูปที่ 143 การกำหนดเซล ให้เราเลือกว่าต้องการแยกใน แถว หรือ หลัก และแยกเป็นกี่ช่อง

เมื่อเราเลือกช่องในตาราง ไม่ว่าจะช่องเดียว หรือหลายช่องแต่ไม่ใช่ทั้งตาราง Property inspector จะเปลี่ยนไปดังรูปที่ 144

รูปที่ 144 การแสดงคุณสมบัติช่องในตาราง จะมีคุณสมบัติให้เราเปลี่ยนได้ โดยมีรายละเอียดดังนี้ 1.ปุ่มผสานช่อง Merge Cells จะใช้งานได้เมื่อเลือกช่อง มากกว่า 1 ช่อง โดยคลิกที่รูป 2.ปุ่มแยกช่อง Split Cell จะใช้งานได้เมื่อเราเลือกช่อง เพียงช่องเดียว โดยคลิกที่รูป 3.Horz ใช้จัดตำแหน่งของวัตถุในแนวราบ เช่น ชิดซ้าย , ชิดขวา , จัดเข้ากลาง 4.Vert ใช้จัดตำแหน่งของวัตถุในแนวตั้ง เช่น บน , ล่าง 5.W กำหนดความกว้างของช่อง 6.H กำหนดความสูงของช่อง 7.No Wrap ตามปรกติตัวอักษรจะขึ้นบรรทัดใหม่ ถ้ายาวเกินกว่าความยาวของตาราง แต่ถ้าเลือก no wrap จะไม่ขึ้นบรรทัดใหม่ 8.Header ทำให้ช่องนั้นเป็นหัวข้อของตาราง แสดงตัวหนา 9.Bg (Image) ใส่ภาพพื้นหลังช่อง 10.Bg (Color) ใส่สีพื้นหลังช่อง 11.Brdr (Color) เปลี่ยนสีขอบสามารถเปลี่ยนคุณสมบัติต่าง ๆได้ง่ายและรวดเร็ว พร้อมกันหลายๆช่องโดย เลือกช่องที่เราต้องการเปลี่ยนคุณสมบัติ จากนั้นคลิกขวาจะมีเครื่องมือดังรูปที่ 145
รูปที่ 145 การผสานเซลหลาย ๆเซล


รูปที่ 146 ขั้นตอนการผสานเซลอย่างเร็ว

รูปที่ 147 การแสดงผลผสานเซลอย่างเร็ว
รูปที่ 148 การเลือกเซลหลาย ๆเซล ในกรณีที่เราต้องการลบแถวหรือคอลัมน์ที่ไม่ต้องการออก ให้นำเมาส์ไปคลิกในช่องเซลล์ที่ต้องการลบ จากนั้นให้คลิกขวาเลือกคำลั่ง Table > Delete Row หรือกดปุ่ม โดยโปรแกรมจะลบแถวให้โดยอัตโนมัติ และหากต้องการยกเลิกคำสั่ง Delete Row สามารถใช้คำสั่ง Undo ย้อนการทำงานได้ โดยคลิกที่เมนู Edit > Undo Delete Table Row หรือกดปุ่ม การลบแถวมีขั้นตอนดังนี้
รูปที่ 149 ขั้นตอนการลบเซล


รูปที่ 150 แสดงแถวที่ถูกลบออกจากตาราง

รูปที่ 151 การเลือกคอลัมน์ หลาย ๆคอลัมน์ ส่วนการลบคอลัมน์ ให้นำเมาส์ไปคลิกที่ในคอลัมน์ที่ต้องการ จากนั้นคลิกขวาเลือกคำสั่งTable > Delete Column หรือกดปุ่ม โปรแกรมจะลบคอลัมน์ที่เลือกอัตโนมัติ


รูปที่ 152 ขั้นตอนการลบคอลัมน์

รูปที่ 153 แสดงคอลัมน์ที่ถูกลบออกจากตาราง เมื่อเรานำรูปภาพหรือข้อความวางในเซลล์ สามารถที่จะกำหนดตำแหน่งของภาพที่วางในช่องเซลล์ทางด้านซ้าย ขวากึ่งกลาง บน และล่าง ส่วนวิธีการใช้งานให้ไปที่แถบ Properties กำหนดค่าในช่อง Horz (เป็นการกำหนดวัตถุในแนวนอน) ส่วนค่า Vert (เป็นการกำหนดวัตถุในแนวตั้ง) ซึ่งการจัดวางตำแหน่งของรูปภาพมีดังนี้.-
รูปที่ 154 แสดงการจัดรูปภาพด้านซ้ายของเซล




รูปที่ 155 แสดงการจัดรูปภาพกึ่งกลางของเซล




รูปที่ 156 แสดงการจัดรูปภาพด้านขวาของเซล


รูปที่ 157 แสดงการจัดรูปภาพด้านบนของเซล


รูปที่ 158 แสดงการจัดรูปภาพด้านล่างของเซล
รูปที่ 159 แสดงการจัดรูปภาพกึ่งกลางของเซล


รูปที่ 160 แสดงการจัดรูปภาพช่องกึ่งกลางของเซล



Jump Menu เป็นเมนูตัวเลือกรูปแบหนึ่งที่มีลักษณะพิเศษ เพราะว่าในแต่ละตัวเลือกสามารถใช้เป็นตัวลิงค์ไปยังเว็บเพจอื่น หรือเว็บไซต์อื่นได้ ส่วนขั้นตอนการสร้าง Jump Menu มีดังนี้.- 1.คลิกที่ From 2. เลือก Jump Menu หรือรูป 3. พิมพ์รายการในช่อง Text 4. พิมพ์ที่อยู่เว็บเพจ หรือเว็บไซต์ที่ต้องการทำลิงค์ 5. เลือกปุ่ม สามารถเพิ่มรายการลิงค์ได้ 6. เลือกปุ่ม สามารถปรับ/เปลี่ยนรายการลิงค์ขึ้น/ลงได้ 7. คลิก OK 8. ทุกครั้งต้องบันทึก (Save) ที่แก้ไข เพิ่มเติม 9. กด F12 ที่แป้นพิมพ์ เพื่อแสดงผล

รูปที่ 177 ขั้นตอนการสร้าง Jump Menu

รูปที่ 178 การเพิ่มชื่อ Jump Menu




รูปที่ 179 การบันทึกทั้งหมด

ปุ่ม Rollover Image สามารถตอบโต้กับผู้ใช้งานโดยมีสถานการณ์ใช้งานอยู่ 3 รูปแบบ คือ =Normal เป็นสถานะเริ่มต้น =Over เป็นสถานะโต้ตอบเมื่อนำเมาส์ไปในบริเวณปุ่ม =Down เป็นสถานะลิงค์ไปเว็บเพจ หรือเว็บไซต์ปลายทาง ก่อนอื่นเราต้องมีรูปภาพที่มีขนาดใกล้เคียงกัน ส่วนวิธีการสร้างดังนี้.- 1. วางเคอร์เซอร์ในตำแหน่งที่ต้องการสร้าง 2. ที่เมนู Insert > Image Object > Rollover Image 3. ใส่ข้อมูลตามรูปที่ 183 แล้วคลิกที่ Browse 4. คลิกเลือกรูปภาพ 5. คลิก OK 6. ทำเหมือนขั้นตอนที่ 3 ตามรูปที่ 185 7. หากต้องการให้แสดงที่หน้า Main Frame ทำตามรูปที่ 186 8. ที่เมนู Flie > Save All 9. จากนั้นกด F12 ที่แป้นพิมพ์ เพื่อแสดง

รูปที่ 181 การวางเคอร์เซอร์ในตำแหน่งที่สร้าง

รูปที่ 182 ขั้นตอนการสร้าง Rollover


รูปที่ 183 การใส่รูปภาพโต้ตอบ

รูปที่ 184 การเลือกรูปภาพ

รูปที่ 185 การเลือกรูปภาพโต้ตอบ
รูปที่ 186 การใส่ตำแหน่งแสดงผล



รูปที่ 187 การบันทึกทั้งหมด
รูปที่ 18ค การแสดงผลผ่าน Browser

ถึงแม้ว่ารูปจะมีข้อดีมากมาย แต่ถ้าเรามีรูปในเว็บเพจมากเกินไป หรือไฟล์รูปที่ใหญ่เกินไปจะทำให้เว็บไซต์ของเราโหลดได้ช้ามาก ซึ่งแน่นอนว่าไม่สามารถมีใครอดทนรอได้นานๆ ในหัวข้อนี้จะกล่าวถึงเครื่องมือที่ใช้ในการบีบอัดไฟล์รูปให้เล็กลงโดยไม่โดยภาพไม่เสียความชัดเจนไป
รูปที่ 189 การบีบอัดด้วยโปรแกรม Photoshop
1. เปิดภาพนั้นขึ้นมาด้วยโปรแกรม Photoshop 2. เลือกรูปภาพที่ต้องการบีบอัด 3. ปรับเปลี่ยนความสูง/ความกว้างของรูปภาพได้ตามเหมาะสม ในตัวอย่างได้ปรับเปลี่ยนรูปภาพให้มีขนาด 400 X 300 pixels
รูปที่ 190 การปรับขนาดรูปภาพ 4. จากนั้นที่เมนู File > Save for Web แล้วคลิก ดังรูปที่ 191

รูปที่ 191 การบันทึกเพื่อใช้ใน Web
รูปที่ 192 การเลือกภาพขนาดที่เหมาะสมกับ Web 5. ปรับเปลี่ยนชนิดไฟล์รูปภาพ และขนาดของรูปภาพได้ตามความเหมาะสม ดังรูปที่ 192 6. ตั้งชื่อไฟล์ใหม่หรือใช้ชื่อเดิมก็ได้ และควรนำไฟล์รูปภาพที่ได้บีบอัดแล้วบันทึกไว้โฟลเดอร์ที่จัดสร้างเว็บไซต์ 7. คลิก Save
รูปที่ 193 การบันทึกรูปภาพ การปรับแต่งเทคนิคพิเศษที่ได้ยกตัวอย่างนี้เป็นเพียงแนวทางให้เห็นว่ามีวิธีการปรับแต่งให้เว็บเพจมีความสนใจมากขึ้น ซึ่งยังมีอีกหลากหลายวิธีหากสนใจต้องค้นคว้าหาข้อมูลเพิ่มเติมได้
หลังจากที่เราได้ลองทำเว็บเพจ ซึ่งก็คงพอทำให้นึกภาพรวมของเว็บไซต์ได้ ขอสรุปการทำเว็บเพจไว้อีกครั้งดังนี้.- 1. ภาษา HTML เว็บเพจนั้นสร้างมาจากภาษา HTML ซึ่งจะใช้ในการจัดรูปแบบของเว็บเพจว่าต้องการให้ ตัวอักษรมีขนาดเท่าไหร่ จัดวางอยู่ในตำแหน่งไหน ให้รูปภาพอยู่ที่ตำแหน่งใดซึ่งจำเป็นมากในการสร้างเว็บ ดังนั้นเราจึงควรรู้พื้นฐานของ HTML บ้างถึงแม้ว่าจะมีโปรแกรมอย่าง Adobe Dreamwerver CS3 ที่เข้ามาอำนวยความสะดวกในการเขียนHTML ให้เราแต่ตัวของ Adobe Dreamwerver CS3 เองก็ยังมีข้อจำกัดอยู่ ดังนั้นถ้าเรารู้ภาษา HTML ก็จะทำให้ข้อจำกัดนั้นหายไป 2. รูปภาพ ภาพเพียงภาพเดียว อาจแทนคำพูด หลายล้านคำ ด้วยเหตุนี้การทำเว็บจึงไม่ขาดรูปภาพได้ เพราะนอกจากจะบรรยายเรื่องราวได้ดีแล้ว ยังทำให้เว็บของเราดูสวยงามขึ้นอีกด้วย ถึงแม้ว่าภาพจะบรรยายคำพูดได้ดี แต่ด้วยขนาดของมันก็ใหญ่กว่าตัวอักษรมากเช่นเดียวกัน ซึ่งถ้าเราใส่รูปในเว็บของเรามากก็จะทำให้เว็บของเราเปิดได้ช้าลงการเปิดเว็บไซต์ได้ช้าหรือเร็วเป็นเรื่องที่สำคัญมาก ดังนั้นเราจึงควรเลือกรูปภาพที่สามารถสื่อความหมายได้ดี ตกแต่งให้รูปสวยงาม และมีขนาดเล็กลงโดยไม่ทำให้เราภาพของรูปเสียไป ซึ่งปัจจุบันมีโปรแกรมมากมายที่เข้ามาจัดการรูปภาพเช่น Photoshop , Gimp ดังนั้นเราจึงควรศึกษาข้อมูลเกี่ยวกับโปรแกรมพวกนี้เอาไว้ด้วยเพื่อเว็บของเราจะได้มีประสิทธิภาพ และความสวยงาม 3. การใช้โปรแกรมสร้างเว็บเพจ โปรแกรมที่ใช้ในการสร้างเว็บเพจอย่าง Adobe Dreamwerver CS3 เป็นโปรแกรมที่ใช้งานได้ง่าย และทำให้เราสร้างเว็บเพจได้เร็วขึ้น นอกจากนั้นยังมีตัวช่วยและเครื่องมือต่างคอยอำนวยความสะดวกเรา เช่น FTP ซึ่งเป็นการดีที่เราจะเรียนรู้โปรแกรมพวกนี้เอาไว้ สำหรับผู้เริ่มต้น เราอาจศึกษาจากตัวของ Adobe Dreamwerver CS3 เองก็จะทำให้เราเรียนรู้ได้เร็วขึ้น และรู้วิธีการเขียน HTML ที่ดี เพราะ Adobe Dreamwerver CS3 นั้นจะแสดง HTML ที่โปรแกรมสร้างขึ้นมา ซึ่งเป็นการเขียนที่เรียบร้อยละดูง่าย 4. Web Server Web Server ก็คือเครื่องคอมพิวเตอร์เครื่องหนึ่งซึ่งเชื่อมต่ออยู่กับอินเทอร์เน็ต เพื่อให้ทุกคนเข้าถึงได้ มีความสำคัญคือเอาไว้เก็บไฟล์ (เว็บเพจ) ของเรา เพื่อให้คนอื่นเปิดเข้ามาดูนั่นเอง ถ้าเราต้องการจะทำให้เครื่องของเราเป็น Web server ก็แต่ แต่ก็ได้กล่าวไปแล้วว่าเป็นเรื่องที่สิ้นเปลืองและ Web server ที่ได้ก็จะไม่มีประสิทธิภาพ ซึ่งปัจจุบันนั้นมี Web server (Hosting) ให้เช่าพื้นที่ในการเก็บเว็บเพจ มากมายหลายที่แต่ละที่ก็จะมีประสิทธิภาพ และราคาต่างกันไป ซึ่งราคาในปัจจุบันก็ถือว่าไม่แพงมาก สำหรับผู้เริ่มต้นอาจใช้บริการฟรีไปก่อนก็ได้ พอเว็บเริ่มเป็นที่นิยมก็ค่อยมาใช้แบบที่ต้องเสียค่าบริการ 5. Domain name Domain name คือชื่อของเว็บของเรา เช่น www.nfe.go.th ตัวของ Domain name นั้นเหมือนกับทะเบียนบ้านที่จะจดซ้ำกันไม่ได้ดังนั้นเราจึงต้องมีผู้รับผิดชอบ ถ้าเราต้องการจะมี Domain name เป็นของตัวเองก็จะต้องติดต่อกับผู้รับผิดชอบและเสียค่าบริการรายปี
1. การเลือกเนื้อหาเว็บไซต์ ถือเป็นส่วนสำคัญในการเริ่มต้นทำเว็บไซต์ ทั้งการจัดโครงสร้าง และ ความนิยมของเว็บไซต์ สำหรับผู้เริ่มต้น ซึ่งไม่แน่ใจว่าจะเลือกหัวข้อใด ควรเริ่มต้นจาก การสำรวจตัวเอง ว่า ชอบ หรือ สนใจสิ่งใด มากที่สุด หรือ มีความรู้เชี่ยวชาญด้านใดมากที่สุด 2. โครงสร้างของเว็บไซต์ มีจุดมุ่งหมายสำคัญคือ การที่จะทำให้ ผู้เข้าเยี่ยมชม สามารถค้นหาข้อมูล ใน เว็บไซต์ได้อย่างเป็นระบบ ประการแรกต้องพิจารณาถึง ความเป็นไปได้ของประเภทของผู้เข้าเยี่ยมชม เพราะผู้เยี่ยมชมแต่ละประเภท ก็จะค้นหาข้อมูลที่แตกต่างกัน ดังนั้นสิ่งที่ควรจะทำก็คือการจัดกลุ่ม ของข้อมูลโดยให้รวมหัวข้อย่อยต่างๆ ให้อยู่ในหัวข้อหลัก โดยมีจุดมุ่งหมายให้ จำนวนข้อหลักน้อย ที่สุด นอกจากนี้การจัดไฟล์และไดเร็กทอรี่ ก็จะช่วยให้การดูแลรักษาและการตรวจสอบความ ผิดพลาดของเว็บไซต์ง่ายยิ่งขึ้น เช่น การจัดไฟล์รูปภาพไว้ที่เดียวกัน หรือ จัดเว็บไซต์ที่เป็นเรื่อง เดียวกันไว้ในไดเร็กทอรี่เดียวกัน เป็นต้น 3. สามารถดูเว็บไซต์ได้ในหลายบราวเซอร์ การทำเว็บไซต์ควรจะทำเพื่อให้สามารถดูได้จากทุกๆ Version ของ Software ต่างๆ ไม่ว่าจะเป็น Netscape Communicator, Internet Explorer หรือ อื่นๆ การ ทำให้ทุกคนดูได้นี้ ถือว่าเป็นการขยายฐานของผู้เข้าเยี่ยมชม 4. ความเร็วในการโหลดเว็บไซต์ สำหรับหน้าแรกของเว็บไซต์ไม่ควรให้โหลดข้อมูลช้า ปัจจัยที่จะ กระทบต่อความเร็ว ได้แก่ ขนาดของรูปภาพที่ใช้ จำนวนของรูปภาพที่ใช้ และปริมาณของตัวอักษรที่ อยู่บนหน้านั้นๆ อนึ่งความเร็วในการโหลดเว็บไซต์ อาจอยู่ที่ Server ที่เว็บไซต์นั้นๆอยู่ว่ามี ความสามารถสูงเพียงใดขนาดของรูปภาพที่ใช้ควรจะมีขนาดไม่เกิน 20-30K ต่อรูป
ส่วนประเภทของ รูปนั้นควรเป็น GIF หรือ JPEG ถ้าขนาดของรูปภาพใหญ่เกินไป อาจตัดแบ่งให้ขนาดเล็กลง และใช้ ตารางช่วยในการจัดรูปภาพนั้นๆ 5. ความง่ายในการค้นหาข้อมูล ปัจจัยหลักนั้นขึ้นอยู่กับโครงสร้างของเว็บไซต์ตั้งแต่ตอนแรกที่มีการจัด โครงสร้างและจัดกลุ่มของข้อมูล นอกจากนี้ยังมีปัจจัยอื่นๆ อีกเช่นการมี Navigator bar หรือ แถบนำ ทาง ในทุกๆหน้าของเว็บไซต์ และถ้าสามารถให้บริการ Search และ Sitemap ได้ก็จะเป็นสิ่งที่จะช่วย ให้ค้นหาข้อมูลได้ง่ายยิ่งขึ้น 6. ตัวอักษร, ฉากหลัง และ สี สำหรับรูปแบบที่นิยมใช้คือ ตัวอักษรสีดำ บนฉากหลังขาว ถ้าต้องการ กำหนดประเภทของตัวอักษรควรใช้ที่เป็นสากลนิยม เช่น ในกรณีภาษาอังกฤษ อาจใช้ Arial หรือ Times News Roman เป็นต้น ส่วนภาษาไทย อาจใช้ MS Sans Serif การเลือกใช้ตัวอักษรภาษาไทยนั้น ต้องระวังเป็นพิเศษเพราะในกรณีที่เครื่องผู้เยี่ยมชมไม่มีตัวอักษรนั้นๆ อาจทำให้ผู้เข้าเยี่ยมชมไม่ สามารถอ่านตัวอักษรได้เลย 7. รูปภาพ ที่ใช้มี 2 ประเภทคือไฟล์กราฟิกประเภท GIF หรือ JPEG ในปัจจุบันไฟล์ประเภท PNG ก็มี บางเว็บใช้เช่นกัน หนึ่งในหลักการพิจารณาการใช้ประเภทเพื่อประสิทธิภาพสูงสุด คือ จำนวนสีของ รูปภาพนั้นๆ ถ้าเป็นภาพแต่งหรือภาพถ่ายที่มีสีมากๆ ก็ควรใช้ไฟล์ประเภท JPEG แต่ถ้าเป็นเพียงปุ่ม หรือป้ายที่มีสีไม่มากก็ควรใช้ GIF พร้อมกับพิจารณาเรื่องขนาดของไฟล์ด้วย อนึ่งควรจะมีการคะเน ขนาดของรูปภาพที่จะใส่บนเว็บไซต์ก่อน เพื่อจะได้ใช้ขนาด และ อัตราส่วน ที่พึงพอใจมากที่สุด 8. ส่วนประกอบที่ขาดไม่ได้ของเว็บไซต์ เช่น หัวข้อที่เกี่ยวกับผู้จัดทำ อาจเป็นประวัติความเป็นมา และ/ หรือ ข้อมูลปัจจุบัน (About us) เหล่านี้ช่วยเพิ่มความน่าเชื่อถือให้กับผู้เข้าเยี่ยมชม และเพิ่มเติมเกี่ยวกับ แถบนำทาง Search Sitemap และยังมีหัวข้ออื่นๆ อีก เช่น ข้อเสนอแนะ (Feedback) คำถามที่ถูกถาม บ่อย(FAQ - Frequently Asked Questions) 9. ก่อนที่จะนำเว็บไซต์ Upload ไปยัง Server ควรจะมีการทดสอบ โดยใช้ทั้ง Netscape Communicator และ Internet Explorer เพื่อดูความเร็วในการโหลดว่าช้าหรือเร็วเพียงใด Link ทั้งภายใน และ ภายนอก ถูกต้องหรือไม่ รูปภาพถูกต้องหรือไม่ พิสูจน์อักษร และอ่านข้อมูล เพื่อให้
แน่ใจว่าข้อมูลต่างๆ ถูกต้อง 10. หลังจากที่เว็บไซต์ Publish ถ้าเป็นไปได้ควรทดสอบ เหมือนกับที่ทดสอบก่อนที่จะ Publish เพื่อความ แน่ใจอีกครั้ง นอกจากการทดสอบแล้ว สิ่งที่จะต้องกระทำหลังPublish คือ การสำรวจ ปรับปรุง และ ดูแลรักษาเว็บไซต์ เมื่อพบความคิดดีๆ ที่อาจนำมาปรับปรุงเว็บไซต์ได้ก็ควรจะจดบันทึกไว้ ถ้าเป็นการ แก้ไขนิดหน่อยก็ควรทำการแก้ไขทันที แต่ถ้าเป็นการแก้ไขที่ต้องใช้เวลานานควรรอสักระยะรวบรวม สิ่งที่ต้องการแก้ไขทั้งหมด


การอับโหลดเว็บไซต์ที่เราได้สร้างขึ้นมา เพื่อเผยแพร่ผ่านอินเตอร์เน็ต ซึ่งมีวิธีการในการอับโหลดหลากหลายวิธี แต่ในที่นี้ขอแนะนำโปรแกรมที่ใช้ในการอับโหลดข้อมูลในเว็บไซต์ นั่นคือโปรแกรม WS_FTP.Pro.V8 สามารถหาดาวน์โหลดได้ตามอินเตอร์เน็ตทั่วไป
1. เมื่อมีโปรแกรม WS_FTP.Pro.V8 ให้ดับเบิลคลิกไฟล์ติดตั้ง fo-ws802 .exe หรือที่รูป 2. โปรแกรมจะเริ่มทำการติดตั้ง อัตโนมัติ รูปที่ 194 การติดตั้ง WS_FTP./pro V.8

รูปที่ 195 เริ่มเข้าสู่การติดตั้งโปรแกรม
3. หลังจากสิ้นสุดขั้นตอน จะปรากฏหน้าจอเริ่มเข้าสู่หน้าจอติดตั้งโปรแกรมเข้าสู้หน้าจอของการแนะนำโปรแกรม WS_FTP Pro ให้กดปุ่ม Next 4. กดปุ่ม Yes เพื่อยอมรับข้อตกลงในการใช้โปรแกรม
- เลือกกลุ่มโปรแกรมที่จะให้ WS_FTP Pro อยู่ ถ้าไม่ต้องสนใจ ให้ คลิกปุ่ม Next > - เลือกค่าตั้งต้นนี้ - คลิกปุ่ม Next

รูปที่ 197 ติดตั้งโปรแกรมไว้ที่กำหนด (Path)
รูปที่ 198 การ Configuration

รูปที่ 200 การ Installation Option
รูปที่ 199 การเลือก Program Folder
รูปที่ 201 ติดตั้งโปรแกรมเสร็จสิ้น
1. เริ่มเปิดใช้งานโปรแกรม โดยดับเบิ้ลคลิกที่รูปไอคอน
รูปที่ 202 การเปิดโปรแกรม WS_FTP_Pro
รูปที่ 203 ขั้นตอนการเปิดโปรแกรม
หรือไปที่เมนู Start Menu --> Programs --> WS_Ftp Pro
2.จะปรากฏหน้าจอที่ทำการติดต่อกับเครื่องบริการ FTP ดังนั้นเมื่อเราต้องการติดต่อไปใช้บริการนำไฟล์เอกสารขึ้นที่เครื่องบริการเราจึงต้องสร้างการติดต่อไปยังเครื่อง ๆ นั้น โดยเริ่มจาก คลิกที่ปุ่ม Create Site เพื่อสร้างการติดต่อใหม่เอง

รูปที่ 204 การ Create Site2. จะปรากฏหน้าจอให้ระบุรายละเอียดเกี่ยวกับเครื่องบริการ ที่ต้องการติดต่อ โดยมีรายละเอียดดังนี้
รูปที่ 205 การตั้งชื่อ Profile Name l Name ให้ระบุเป็นชื่ออะไรก็ได้ เสมือนเป็นชื่อเรียกของ Site หรืองานนั้น ๆ l กดปุ่ม Next
- ใส่ IP ของ web Server ในช่อง Host Address (หมายเหตุ : สามารถใส่ชื่อ web site ได้ เช่น http://chon.nfe.go.th/)
รูปที่ 206 ใส่ชื่อ Host Address
- กดปุ่ม Next - กดปุ่ม Next
- User ID : ระบุชื่อผู้ใช้ของคุณ - Password :ระบุรหัสผ่านของคุณ ถ้าเป็นเครื่องของเราเองใช้ประจำไม่อยากใส่รหัสผ่านทุกครั้งให้เลือกทำเครื่องหมายถูกไว้ ที่ Save Password ไว้ด้วย - เมื่อระบุช่องดังกล่าวเรียบร้อยแล้ว ให้คลิก Next > เพื่อทำขั้นตอนต่อไป
ตั้งค่าช่องการติดต่อ (Port) ไว้ที่หมายเลข 21 เป็นค่าเริ่มต้น ให้ระบุหมายเลข Port ลงในช่อง Port เป็น 21 ด้วย เมื่อเรียบร้อยแล้ว ให้คลิก Finish เพื่อจบขั้นตอนการตั้งค่า
3.หน้าจอนี้จะปรากฏข้อมูลของ Site ที่เราสร้างการติดต่อไว้ โดยมีรายละเอียดดังรูปที่ 209เมื่อต้องการติดต่อไปยังเครื่องให้บริการดังกล่าวที่ได้สร้างไว้ ก็สามารถคลิกชื่อ Site และคลิกปุ่ม Connect เพื่อติดต่อได้ทันที
รูปที่ 209 การ Connect เว็บไซต์ที่ให้บริการ

4. เมื่อโปรแกรมติดต่อไปยังเครื่องบริการดังกล่าวได้แล้ว จะปรากฏหน้าจอแสดงรายละเอียดต่าง ๆ ดังรูปที่ 210

รูปที่ 210 แสดงหน้าตาเมื่อ Connect ผ่าน
5. หลังจากเข้าสู่การติดต่อได้แล้ว มีบางค่าที่ต้องมีการปรับเปลี่ยน เพื่อให้ง่ายต่อการจัดการ เช่นในส่วนของการลบหรือย้าย File หรือ Folder ต่าง ๆ
ให้คลิกที่ปุ่ม Options... ด้านล่างจะปรากฏหน้าจอดังรูปที่ 211 จากนั้นคลิกทำเครื่องหมายถูกที่หน้าช่องในหัวข้อ Allow deletion of non-empty folders Allow files and folders to be moved ให้คลิกปุ่ม OK เพื่อเก็บค่า และออกจากการตั้งค่าเพิ่มเติม
รูปที่ 212 การปรับค่า Option

การ "โอน/ย้ายข้อมูล" ขึ้นสู่เว็บไซต์ ด้วยโปรแกรม WS_FTP FTP (File Transfer Protocol) : ใช้สำหรับ "โอนย้ายไฟล์ข้อมูล" ระหว่างเครื่องคอมพิวเตอร์ของคุณกับเครื่องแม่ข่าย (Server) 6. การส่งไฟล์ (Upload) ก็คลิกเลือกที่ไฟล์หรือโฟลเดอร์ที่ต้องการลากไปทางฝั่งขวาได้เลย การรับไฟล์ (Download) ก็ทำในทางกลับกันส่วนการใช้งานอื่นๆ ก็สามารถคลิกที่ปุ่มต่าง ๆ ที่น่าสนใจ ดังนี้.- ChgDir : สำหรับการเปลี่ยนไปไดเร็กทอรี่หรือโฟลเดอร์ใหม่ จะเร็วกว่าการคลิกย้อนกลับทีละระดับ MkDir : หากต้องการสร้าง Folder ใหม่ก็สามารถคลิกปุ่มนี้ เพื่อสร้าง Folder ใหม่ได้ Rename : เมื่อเลือก File หรือ Folder ที่ต้องการแล้ว จะปรากฏปุ่มนี้ สามารถคลิกเพื่อเปลี่ยนชื่อ File หรือ Folder Delete : เมื่อเลือก File หรือ Folder ที่ต้องการแล้ว จะปรากฏปุ่มนี้ สามารถคลิกเพื่อลบไฟล์หรือไดเร็กทอรี่ Refresh : คลิกปุ่มนี้ เพื่อแสดงรายการปัจจุบันที่สุด
รูปที่ 213 การสร้างโฟลเดอร์ชื่อ Saran ในฝั่งเครื่องให้บริการ

ต่อไปนี้ขอยกตัวอย่างการอับโหลด (Upload) ไฟล์เว็บไซต์ที่ได้สร้างไว้แล้ว โดยเก็บไว้ที่โฟลเดอร์ D:\nfechon\ และจะทำการอับโหลดไว้ที่โฟลเดอร์ Saran ดังรูปที่ 214
รูปที่ 214 การโอน/ย้ายข้อมูลเข้าโฟลเดอร์ Saran ในฝั่งเครื่องให้บริการ Server

- ให้ลากคลุมไฟล์ทั้งหมดที่อยู่ใน โฟลเดอร์ nfechon ดังรูปที่ 215 - จากนั้นให้คลิกที่ปุ่ม


รูปที่ 215 การคลุมไฟล์ทั้งหมดที่ Upload
- ให้รออีกระยะหนึ่ง เนื่องจากโปรแกรมกำลังอับโหลดไฟล์ต่าง ๆ ที่อยู่ในโฟลเดอร์ nfechon จนกระทั้งเสร็จสิ้น ดังรูปที่ 216

รูปที่ 216 ระบบกำลังทำการ Upload ข้อมูล หากไม่มีอะไรผิดพลาด ไฟล์ต่าง ๆที่อับโหลดจากโฟลเดอร์ nfechon จะปรากฏอยู่ทางด้านขวามือ หรือกล่าวอีกอย่างหนึ่งว่า อยู่ในฝั่งเครื่อง Server ถือว่าเสร็จสิ้นสมบรูณ์แล้ว ดังรูปที่ 217

รูปที่ 217 การ Upload เสร็จสิ้นสมบูรณ์
7. เมื่อต้องการเลิกใช้งานโปรแกรม ให้คลิกที่ปุ่ม Disconnect หรือ Exitหมายเหตุ :: หากต้องการทราบรายละเอียดการใช้งานโดยละเอียด ให้คลิกที่เมนู Help >> Help Topics

รูปที่ 218 การ Upload เสร็จแล้วให้คลิก Exit
เมื่อสร้างเว็บไซต์เสร็จเรียบร้อยแล้ว ขั้นตอนต่อไปคือนำเว็บไซต์ที่ได้ Upload ไปไว้ที่เครื่อง Web server เพื่อเผยแพร่สู่ระบบเครือข่ายInternet หากไม่มี Web server เป็นของตัวเอง ก็จำเป็นต้องขอใช้พื้นที่ Web Sever ของผู้อื่น ซึ่งมีทั้งแบบที่ต้องเสียค่าเช่าพื้นที่รายเดือน รายปี และแบบที่ไม่ต้องเสียค่าใช้จ่ายใด ๆ ทั้งสิ้น สามารถค้นหารายชื่อเว็บไซต์ที่ให้บริการเช่าพื้นที่ฟรี Web server ได้ โดยการค้นหาจากเว็บไซต์ที่ให้บริการด้านข้อมูลบนอินเตอร์เน็ต โดยใช้คำว่า "free web hosting" ในตัวอย่างต่อไปนี้ ขอใช้เว็บ http://www.saiyaithai.org/ ซึ่งเป็น Web Server ที่ให้บริการฟรี ลองมาสมัครกันเพื่อนำเว็บไซต์ที่เราสร้างขึ้นไปฝากไว้กับบริการ Web Server ฟรี มีขั้นตอนการสมัครดังนี้.- 1. เข้าเว็บ http://www.saiyaithai.org/ จะแสดงหน้าโฮมเพจ ดังรูปที่ 218 แล้วคลิกตามลูกศรเพื่อสมัครสมาชิก

2. ให้พิมพ์ชื่อเว็บที่ต้องการลงไป แล้วคลิกที่ “ตรวจสอบ” ถ้าไม่มีชื่อซ้ำแสดงว่าชื่อที่เราตั้งนั้นใช้ได้ ดังรูปที่ 220


รูปที่ 220 ใส่รหัส และ Username ทำการตรวจสอบ
จากนั้นกรอกข้อมูลให้ครบตามที่เว็บกำหนดไว้ ดังรูปที่ 221

รูปที่ 221 กรอกข้อมูลให้ครบตามที่ระบบกำหนด 3. เมื่อกรอกข้อมูลเสร็จสิ้น ให้คลิกที่ Submit หากไม่มีอะไรผิดพลาดก็จะได้ดังรูปที่ 222ในที่นี้ ได้ URL HomePage คือ http://saran.saiyaithai.org/ และใช้งานฐานข้อมูล (ใช้กรณีที่เรามีฐานข้อมูล) คือ http://www.saiyaithai.org/database/

รูปที่ 222 ระบบแจ้งผล URL และการใช้งานฐานข้อมูล

รูปที่ 223 การสมัครขอพื้นที่เสร็จสมบูรณ์
4. จากนั้นให้ดับเบิลคลิกที่รูป แล้วทำตามขั้นตอนต่าง ๆตามรูปด้านล่างนี้

รูปที่ 224 การเปิดโปรแกรม Ws_FTP_Pro ทำการ Upload ข้อมูล 5. จากนั้นปรากฏหน้าจอที่ทำการติดต่อกับเครื่องบริการ FTP ดังนั้นเมื่อเราต้องการติดต่อไปใช้บริการนำไฟล์เอกสารขึ้นที่เครื่องบริการเราจึงต้องสร้างการติดต่อไปยังเครื่อง ๆ นั้น โดยเริ่มจาก คลิกที่ปุ่ม Create Site เพื่อสร้างการติดต่อใหม่เอง ดังรูปที่ 225

รูปที่ 225 การติดต่อไปยังเครื่องให้บริการ FTP
6. จะปรากฏหน้าจอให้ระบุรายละเอียดเกี่ยวกับเครื่องบริการ ที่ต้องการติดต่อ โดยให้ใส่ ชื่อเว็บไซต์ของเครื่องให้บริการคือ http://www.saiyaithai.org/ ดังรูปที่ 226-227
รูปที่ 227 Host ให้ใส่ชื่อเว็บไซต์ของเครื่องผู้ให้บริการ - User ID : ระบุชื่อผู้ใช้ของคุณ (ตามที่ได้สมัครไว้) - Password :ระบุรหัสผ่านของคุณ (ตามที่ได้สมัครไว้) เมื่อระบุช่องดังกล่าวเรียบร้อยแล้ว ให้คลิก Next > Next > Next ดังรูปที่ 228-230


รูปที่ 228 ใส่ User Id และ Password
รูปที่ 229 ไม่ต้องปรับให้คลิก Next

รูปที่ 230 ไม่ต้องปรับให้คลิก Next

จากนั้นคลิกที่ Finish ดังรูปที่ 231

รูปที่ 231 ให้คลิก Finish
7. หากไม่มีปัญหาขัดข้อง จะแสดงชื่อเว็บที่ให้บริการ จากนั้นให้คลิกที่ Connect เพื่อติดต่อกับระบบของผู้ให้บริการ

รูปที่ 232 Connect ติดต่อกับระบบผู้ให้บริการ
8. เมื่อ Connect กับระบบผู้ให้บริการได้แล้ว โดยเครื่องผู้ให้บริการได้แจ้งให้เราทำการ Upload ข้อมูลไฟล์ต่าง ๆ เก็บไว้ที่โฟลเดอร์ชื่อ pubic_htmlจากนั้นให้ดับเบิลคลิกเพื่อทำการเปิดโฟลเดอร์ที่ชื่อ pubic_html และด้านซ้ายมือซึ่งเป็นข้อมูลในเครื่องของเรา ให้เปิดไฟล์ที่ต้องการอับโหลด ในตัวอย่างไฟล์เว็บเพจและข้อมูลต่าง ๆที่สร้างขึ้นเก็บไว้ที่โฟลเดอร์ D:\nfechon ดังรูปที่ 233-234
รูปที่ 233 แสดงการเปิดโฟลเดอร์ pubic_html

9. ต่อจากนั้นให้ลากคลุมไฟล์ทั้งหมดที่อยู่ใน โฟลเดอร์ nfechon ดังรูปที่ 235แล้วคลิกที่ปุ่ม

10. ให้รอสักครู่ เนื่องจากระบบกำลังอับโหลดไฟล์ต่าง ๆ ที่อยู่ในโฟลเดอร์ nfechon จนกระทั้งเสร็จสิ้น ดังรูปที่ 236 11. เมื่อต้องการเลิกใช้งานโปรแกรม ให้คลิกที่ปุ่ม Disconnect หรือ Exit 12. หลังจากนั้นทดลองให้แสดงผลผ่านทาง Browser โดยพิมพ์ที่ช่อง Address ว่า http://saran.saiyaithai.org/index.html ดังรูปที่ 237

การใช้งาน photoshop cs3







การปรับสีรูปในครั้งนี้ จะเป็นการปรับสีรูปทั้งรูป ข้อดีคือ เร็วกว่า (ปรับเฉพาะส่วน) แต่ข้อด้อยคือ บางส่วนที่แสงน้อยอยู่แล้วจะครึ้มลง ส่วนที่มืดก็จะยิ่งมืดไปกันใหญ่ (ข้อดี๊ดีมีมั้ยเนี่ย)
โดยวิธีปรับแสงให้ที่จ้าเกิ๊นให้มืดลงนิด และทำให้ส่วนที่เป็นสีเข้มขึ้น เราจะใช้เครื่องมือ 2 อย่าง ได้แก่1. Image > Adjustments > Curves… (Ctrl + M)2. Image > Adjustments > Brightness/Contrast

photoshop photoshop cs3 photoshop cs2

เอาล่ะ มาเริ่มที่เมนูแรก Curves… หรือ Ctrl + M นั่นเอง
1. เปิดรูปที่ต้องการตกแต่ง โดยเลือกที่ Flie > Open ไปไดรฟที่เก็บรูปไว้ จากนั้นก็คลิกที่รูปที่ต้องการ แล้วคลิก Open
2. ไปที่ Image > Adjustments > Curves… (Ctrl + M)

photoshop photoshop cs3 photoshop cs2
3. จะมีหน้าต่างปรับความสว่างแสดงขึ้นมา หากต้องการเห็นความเปลี่ยนแปลงขณะปรับรูป ให้ติ๊กที่ช่อง preview4. เลื่อนเมาส์ให้อยู่ตรงกึ่งกลางเส้น จากนั้นคลิกเม้าส์ข้างแล้วเลื่อนเม้าส์ไปด้านเข้ม (ที่เป็นแถบด้านสีดำอ่ะ) เมื่อได้ดั่งใจแล้วก็คลิก OK

photoshop photoshop cs3 photoshop cs2
5. มาดูผลงานกัน …สว่างน้อยลงแล้วใช่ม้า…

photoshop photoshop cs3 photoshop cs2
อีกเมนูหนึ่ง Brightness/Contrast
1. เปิดรูปที่ต้องการตกแต่ง โดยเลือกที่ Flie > Open ไปไดรฟที่เก็บรูปไว้ จากนั้นก็คลิกที่รูปที่ต้องการ แล้วคลิก Open
2. ไปที่ Image > Adjustments > Brightness/contrast

photoshop photoshop cs3 photoshop cs2
3. จะมีหน้าต่างปรับความแตกต่างระหว่างความสว่างและความมืด (Brightness/Contrast) แสดงขึ้นมา หากต้องการเห็นความเปลี่ยนแปลงขณะปรับรูป ให้ติ๊กที่ช่อง preview4. จากนั้น ไปที่ Contrast คลิกเม้าส์ที่ไอคอนข้างแล้วเลื่อนเม้าส์ไปด้านขวา (+) เมื่อได้ดั่งใจแล้วก็คลิก OK

photoshop photoshop cs3 photoshop cs2
5. มาดูผลงานกัน …เข้มขึ้นแล้วใช่ม้า…

photoshop photoshop cs3 photoshop cs2
จากนั้นก็ทดลองปรับความสว่างด้วย Curves ก่อน แล้วปรับสีให้เข้มขึ้นด้วย Contrast ผลก็ออกมาเป็นอย่างนี้

photoshop photoshop cs2 photoshop cs3
เราเลือกใช้ Contrast เพราะเป็นการปรับสีให้มีความแตกต่างกันมากขึ้น (ส่วน Brightness เป็นการทำให้ภาพสว่างขึ้นเช่นกันค่ะ)
เพื่อน อาจสงสัยว่า แล้วทำไมไม่แนะนำให้ใช้ทั้ง Brightness แทน Curves เหตุผลก็เพราะ เวลาใช้ Brightness นั้น จะทำให้ภาพสว่างงง…จ้าขึ้นอย่างแรงง อารมณ์ที่เห็นออกจะขาวโพลนเกินไป ก็เลยแนะนำให้ใช้ Curves ที่ปรับรูปได้สว่าง…ไม่เว่อร์เกินไปนั่นเอง
Photoshop.kapook.com

ส่วนมากเวลาเราถ่ายรูปด้วยกล้องดิจิตอลมามักจะมีปัญหาเล็กๆ น้อยๆ ประมาณว่าถ่ายแล้วไม่ได้ดั่งใจ ดูในกล้องก็สีสด สวย คมชัดดี แต่ทำไม๊ ทำไม พอเอามาลงเครื่อง รูปที่ว่าสวยแล้ว สีกลับซีด เบลอ บางทีก็มืดหรือสว่างเกินไปซะงั้น วันนี้เราก็มีวิธีการตกแต่งรูปง๊ายยง่ายมาฝากกันค่ะ (พวกมือโปรก็อย่ามาว่าเรานะ…เพราะนี้น่ะ แบบเบสิคจริงๆ)
อยากให้รูปสว่างกว่านี้…
มืดตึ้ดตื๋อแบบนี้ จะเห็นความสวยของเราได้ยังไง วิธีปรับรูปให้เราดูสว่าง กระจ่างใส นั้นไม่ยากค่ะ
1. เปิดรูปที่ต้องการปรับความสว่างขึ้นมา โดยเลือกที่ Flie > Open ไปไดรฟที่เก็บรูปไว้ จากนั้นก็คลิกที่รูปที่ต้องการ แล้วคลิก Open

photoshop photoshop cs3 photoshop cs2
2. เลือกที่เมนู Image > Adjustments > Curves… (หรือกด Ctrl+M หนึ่งครั้ง)

photoshop photoshop cs3 photoshop cs2
3. จะมีหน้าต่างปรับความสว่างแสดงขึ้นมา หากต้องการเห็นความเปลี่ยนแปลงขณะปรับรูป ให้ติ๊กที่ช่อง preview
4. เลื่อนเมาส์ให้อยู่ตรงกึ่งกลางเส้น จากนั้นคลิกเม้าส์ข้างแล้วเลื่อนเม้าส์ไปด้านสว่าง (ที่เป็นแถบด้านสีขาวอ่ะ) เมื่อได้ดั่งใจแล้วก็คลิก OK

photoshop photoshop cs3 photoshop cs2
5. มาดูผลงานกัน …สว่างขึ้นแล้วใช่ม้า…

photoshop photoshop cs3 photoshop