สอนคนงี่เง่าบัดซบ..เรียนรู้วิธีสร้างเว็บเพจ ! เอาละ ท่านอยากจะทำเว็บเพจ ! บทที่ 7

ก่อนที่ เราจะเรียนกันต่อ เราจำต้องกลับไปดูเรื่องเก่ากันอีกหน่อย นั่นคือการสอดแทรกภาพเข้าไปในหน้าเว็บของเรา เวลาเราโหลดภาพขึ้นจอแต่ละครั้ง ภาพแต่ละภาพใช้ข้อมูลปริมาณมาก และดังนั้นการโหลดภาพให้ลุล่วงไปแต่ละภาพต้องใช้เวลา วิธีหนึ่งที่จะร่นเวลาในการโหลดภาพให้เร็วขึ้น คือการลดขนาดของภาพ (เมื่อผมพูดว่า ขนาดของภาพผมใช้หน่วยวัดเป็นกิโลไบต์หรือ Kb โปรดเข้าใจตามนี้) การลดส่วนกว้างและส่วนยาวลงอย่างละครึ่ง ได้ผลเพียงทำให้ขนาดของภาพลดลงเพียง หนึ่งในสี่ของจำนวน Kb. อีกทางหนึ่งที่จะลดขนาด Kb ของภาพลงคือการลดจำนวนสีให้น้อยลง มาดูตัวอย่าง..

ความกว้างคูณยาวของภาพ 310 x 304 จำนวนสี- 238 ขนาดของภาพ 69 Kb
ความกว้างคูณยาวของภาพ 207 x 203 จำนวนสี- 238 ขนาดภาพ- 34 Kb	ความกว้างคูณยาวของภาพ 207 x 203 จำนวนสี- 48 ขนาดภาพ - 19 Kb

หมายเหตุ ภาพทั้งหมดนี้ตกแต่งด้วยโปรแกรมแต่งภาพ Paint Shop Pro.
(โปรแกรมรุ่นเก่า ที่ไม่กำหนดเวลาใช้งานได้ตลอดไป ท่านสามารถดาวน์โหลดได้จาก ตรงนี้แม้ว่าจะเป็นรุ่นเก่า และไม่มีลูกเล่นแพรวพราวเหมือนรุ่นใหม่ที่ออกมา แต่ผมรับรองว่าวิเศษมาก สำหรับ มือใหม่ที่กำลังหัดสร้างหน้าเว็บเพจ)

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

เพื่อที่จะดูว่าภาพต่างๆที่เราจะแทรกเข้าไป สามารถลดจำนวน Kb ลงได้มากน้อยแค่ไหน ให้ท่านลองใช้บริการของ GIF Optimizer ข้างล่างนี้. วิธีทำคือให้ท่านส่งภาพของท่านเข้าไป แล้วภาพนั้นจะถูกส่งกลับมา ภายหลังที่ได้ทำการตกแต่งให้มีจำนวน Kb ให้ลดน้อยลงมากที่สุดเท่าที่จะมากได้ โปรแกรมที่นำมาให้ท่านลองนี้ ไม่ได้เป็นส่วนหนึ่งของบทความเรื่องนี้ เป็นโปรแกรมบริการที่เปิดขึ้นบนอินเตอร์เนต ดังนั้นถ้าจะใช้บริการนี้ ท่านต้อง "ออนไลน์" ในขณะอ่านบทความนี้ จึงจะทำได้

ลองมาทำแบบฝึกหัดใช้บริการ GIFOptimizer กันดู ทดลองเข้าไปในหน้าเว็บใดก็ได้บนอินเตอร์เนตถ้าเป็นบราวเซ่อร์เนทสเคป ให้คลิกขวาที่ภาพ เลือกที่คำสั่ง "Copy image location" ตอนนี้ URL ของภาพที่จะเอาไปทดลองเข้าไปอยู่ในคลิพบอรดภายในเครื่องของท่านแล้ว ทีนี้ก็กลับไปที่ช่องกรอกคำของ GIFOptimizer ที่ทำไว้ให้ ทำการลบคำตัวอย่าง "http://" ที่ใส่ไว้ออกเสียก่อนแล้วก็ทำการ paste หรือวาง URL ของภาพที่เก็บอยู่ในคลิพบอรดลงไป แล้วคลิกที่ปุ่มคำสั่ง Upload ชั่วครู่ GIFOptimizer จะส่งภาพกลับมาให้ท่านดู พร้อมทั้งแจงรายละเอียดให้ท่านทราบว่า ภาพนั้นเมื่อผ่านกระบวนการของ GIFOptimizer แล้วมีขนาดเท่านั้นเท่านี้ Kb บอกให้ทราบจำนวนสี บอกให้ทราบขนาดความกว้างความสูงของภาพ และถ้ายังไม่พอใจ ยังเสนอให้ส่งกลับขึ้นไปใหม่เพื่อลดจำนวนสีลง เพื่อจะได้ขนาดของ Kb ต่ำลงไปอีก เมื่อเป็นที่พอใจแล้ว ให้ท่านคลิกขวาอีกทีเพื่อ save ภาพที่ได้เก็บเอาไว้ สำหรับเอาไปลงในหน้าเว็บไซต์ของท่าน(สำหรับท่านที่ใช้ บราวเซ่อร์อินเตอร์เนตเอกซพลอเร่อร์ ให้คลิกขวาที่ภาพ คลิกที่คำสั่ง Properties กรอบแสดงค่าจะผุดขึ้นจอ ในนั้นจะแสดง URL ของภาพ ให้ท่านทำการป้ายดำ Copy แล้วนำไป Paste ในลักษณะเดียวกับที่กล่าวมา)

อีกทางเลือกหนึ่งที่สามารถนำมาใช้ได้ ถ้าหากท่านจำต้องแสดงรูปหลายรูปขึ้นบนจอ นั่นคือ สร้างรูปขนาดเหมือนแสตมป์ขึ้น ที่เรียกว่า thumbnails แล้วเชื่อมภาพแสตมป์ที่ว่าไปหาภาพใหญ่อีกทีหนึ่ง สมมุติว่าผมต้องการจะเสนอภาพรถดีๆสามคันต่อผู้ชม ตามที่แสดงข้างล่าง

โปรดคลิกที่ภาพข้างบนนี้ เพื่อดูภาพใหญ่

มีขั้นตอนวิธีทำอย่างไร? สิ่งแรกที่ต้องทำคือเรียกเครื่องมือหรือโปรแกรมตกแต่งภาพที่ท่านใช้อยู่ลงมา แล้วทำการสร้างภาพขนาดแสตมป์ตามที่ต้องการขึ้น แล้วทำการลดจำนวนสีของภาพลงเสียบ้างเพื่อให้ภาพแสตมป์ที่ทำโหลดขึ้นจอรวดเร็ว ภาพเล็กที่ทำนี้สำคัญ ผมเคยพบเห็นเป็นประจำ ที่ผู้ทำ (ซึ่งผมหมายถึงท่านนั่นแหละ) ไม่เฉลียวใจ ใช้วิธีง่ายๆด้วยการไปลดขนาดกว้างยาวของภาพใหญ่ที่มีอยู่ในแท็ก <IMG>ลง เพื่อให้ขนาดภาพลดลงมาเหมือนภาพแสตมป์ ถ้าทำวิธีนี้ก็เท่ากับว่า ท่านเอาภาพขนาด (Kb) เดิมมาวางในที่ที่เล็กลงแค่นั้นเองไม่ได้ช่วยอะไร... ขั้นต่อไปก็คือทำตัวเชื่อมหรือ Link เพื่อโยงจากภาพเล็กไปหาภาพใหญ่ตามที่ต้องการ

เรามาลองทำดูสักอัน ผมจะเลือกเอารถ Corvette คันสีน้ำเงินมาทำ ให้ท่านทำสำเนาภาพรถ Corvette เป็นภาพแสตมป์หนึ่งภาพ (ชื่อไฟล์ car1-sm.gif) และภาพขยายหนึ่งภาพ (ชื่อไฟล์ car1.gif) เก็บไฟล์ทั้งสองเข้าไว้ในโฟลเดอร์ที่ท่านใช้ทำแบบฝึกหัดบทเรียนนี้ ทบทวนอีกครั้ง ถ้าท่านใช้บราวเซ่อร์เนทสเคป ท่านใช้วิธีคลิกขวา แล้วก็ Save Image AS คนที่ใช้บราวเซ่อร์อื่น ก็ใช้วิธีคล้ายหรือเหมือนกันนี่แหละ

เริ่มต้นที่แท็ก <IMG>ให้ท่านแจงรายละเอียดหรือ attribute ลงไปดังนี้

<BODY>
<IMG SRC="car1-sm.gif" WIDTH=90 HEIGHT=62>
</BODY>

ทีนี้เอาแท็ก <A>ครอบเข้าไปเป็นดังนี้

<BODY>
<A><IMG SRC="car1-sm.gif" WIDTH=90 HEIGHT=62></A>
</BODY>

ทีนี้แหละขั้นตอนสุดท้าย ใส่ URL ของภาพรถที่ขยายเข้าไป แล้วก็ ไชโย ! สำเร็จแล้ว ไม่เชื่อลองเอาเมาส์ไปคลิกที่ภาพแสตมป์ของรถสีฟ้าข้างล่างดู ว่าเป็นยังไง?

<BODY>
<A HREF="car1.jpg"><IMG SRC="car1-sm.gif" WIDTH=90 HEIGHT=62></A>
</BODY>

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

<BODY>
<A HREF="car1.jpg"><IMG SRC="car1-sm.gif" WIDTH=90 HEIGHT=62 BORDER=0></A>
</BODY>

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

วิธีทำให้ไปเริ่มต้นกันที่จุดที่ท่านต้องการจะพาผู้อ่านไปหา ตรงจุดนั้นประโยคแรกประเดิมด้วย(ลองคลิกข้างบนเข้าไปดูอีกที)...คราวนี้ใส่รหัส URL ของ Yahoo ลงไป....ให้ท่านหมายตาคำว่า [คราวนี้] แล้วจัดการเอา แท็ก <A>ครอบลงไปดูตัวอย่างข้างล่าง..

<A>คราวนี้</A>ใส่รหัส URL ของ Yahoo ลงไป

ลำดับต่อไปให้ใส่ NAMEลงไปในแท็ก <A> อันหมายถึงชื่อ อันเป็นที่หมายของจุดนั้น

<A NAME="upabit">คราวนี้</A> ใส่รหัส URL ของ Yahoo ลงไป

สิ่งที่ท่านทำลงไปข้างบนนี้ คือการกำหนดจุด หรือการ มาร์คจุด ที่ท่านท่านต้องการทำ Link มาหาจุดนี้

คราวนี้ก็กลับมาสร้างจุดต่อเชื่อมที่ท่านเห็นอยู่ข้างบนที่คำว่า [ตรงนี้] ซึ่งเมื่อผู้อ่านคลิกแล้วจะเชื่อมโยงไปยังจุดที่ทำไว้ ด้วยการครอบแท็ก <A> เข้าไป...

คลิก <A>ตรงนี้</A>เพื่อผมจะพา ไปยังจุด...

ต่อไปให้ใส่ชื่อไฟล์ของหน้าเอกสารที่จะให้ผู้อ่านไปหา ชื่อไฟล์คือ..lesson06.html (ชื่อไฟล์ดูได้จากพยางค์สุดท้ายของรหัส URL ของบทที่ 6)

คลิก <A HREF="lesson06.html">ตรงนี้</A>เพื่อผมจะพาไปยังจุด

ขั้นสุดท้ายเติม NAMEหรือชื่อที่ทำไว้เข้าไปต่อท้ายในแท็ก <A> ตามที่ทำให้ดูข้างล่าง

คลิก <A HREF="lesson06.html#upabit">ตรงนี้</A> เพื่อผมจะพาไปยังจุด..

เป็นยังไง? ถึงขั้นที่ต้องไปผ่าตัดเสริมสมองใหม่ ไหม??

<--BACK        NEXT-->