Munuบทเรียนการเขียนเว็บด้วยภาษา html
บทที่ 6 การปรับรูปภาพ
การปรับรูปภาพ
ผมคิดว่า เมื่อสร้างบทเรียนที่ 3 ในเรื่องการปรับรูปแบบตัวหนังสือแล้ว ก็ต้องสร้างบทที่บอกวิธีการปรับรูปภาพด้วย ซึ่งคุณเชื่อหรือไม่ว่า การปรับรูปภาพนั้น ง่ายกว่าการปรับรูปแบบตัวหนังสือเสียอีก
การจัดวางรูปภาพบนหน้าเ
เช่นเดียวกับตัวหนังสือ หากคุณไม่ระบุตำแหน่งการวาง รูปภาพจะถูกจัดให้อยู่ทางซ้ายสุด ถ้าคุณต้องการให้รูปภาพอยู่ตรงกลาง คุณอาจจะเดาได้แล้วว่าต้องใช้คำสั่ง <CENTER> และ </CENTER> ซึ่งอธิบายไปแล้วในบทเรียนที่ 3
แต่หากเราต้องการให้รูปภาพอยู่ทางขวาล่ะ ? เราจะทำเหมือนกับเพิ่มคุณสมบัติ ALIGN=”–” ใส่ลงไปในคำสั่ง <P> หรือเปล่า ? ……ใช่ครับ ใช้เหมือนๆกัน :
<IMG ALIGN=”right” SRC=”image.gif”>
ข้างขวา ผมเปลี่ยนชื่อรูปเป็น t2010.jpg
การจัดวางรูปภาพที่อยู่รวมกับข้อความ
บางครั้งคุณต้องการให้มีข้อความบรรยายภาพอยู่ด้วย ไม่ต้องการภาพอย่างเดียว ซึ่งคุณสามารถจัดวางภาพโดยอ้างอิงตำแหน่งของตัวหนังสือด้วยคำสั่ง ALIGN=”–” ซึ่งจัดได้สามตำแหน่งคือ “top”(บนสุด), “middle”(ตรงกลาง), หรือ “bottom”(ล่างสุด)
<IMG ALIGN=”top” SRC=”t2010.jpg”> ข้อความอยู่บนสุด<BR>
<IMG ALIGN=”middle” SRC=”t2006.jpg”> ข้อความอยู่ตรงกลาง<BR>
<IMG ALIGN=”bottom” SRC=”t2010.jpg”> ข้อความอยู่ล่างสุด<BR>
และนี่คือผลที่แสดงออกมา…
ข้อความอยู่บนสุด
ข้อความอยู่ตรงกลาง
ข้อความอยู่ล่างสุด
คุณจะสังเกตได้ว่า การใช้ “top” “middle” หรือ “bottom” จะยอมให้มีข้อความได้เพียงบรรทัดนั้นบรรทัดเดียว ส่วนที่เกินมาจะขึ้นบรรทัดใหม่ใต้รูป ซึ่งวิธีแก้คือ… ให้คุณใช้ การจัดซ้ายและขวาแทน ซึ่งแม้ว่าต้องการให้ภาพอยู่ทางซ้าย ก็ให้ใช้ ALIGN=”left” เพื่อให้ข้อความสามารถอยู่ข้างๆรูปได้ ลองทำดูสิครับ
แต่ถ้าคุณต้องการให้ข้อความหนึ่งบรรทัดอยู่ตรงกลาง(middle)รูป และให้รูปภาพอยู่ทางขวา(right)ของหน้า จะใช้ ALIGN=”–” สองอันในคำสั่ง IMG ได้ไหม ? …คำตอบคือ ไม่ได้ครับ แต่คุณสามารถทำได้โดย กำหนดให้ข้อความอยู่ตรงกลางรูปโดยใช้ ALIGN=”middle” ในคำสั่ง IMG แล้วจัดทั้งรูปและข้อความให้อยู่ทางขวาด้วยคำสั่ง <P ALIGN=”right”> และปิดท้ายด้วย </P>
การเปลี่ยนขนาดรูปภาพ
ก่อนผมที่จะบอกวิธีเปลี่ยนขนาดรูป ขอผมบอกหน่อยว่า รูปภาพบนคอมพิวเตอร์ไม่เหมือนกับรูปถ่าย รูปภาพคอมฯประกอบขึ้นจากเม็ดสีเล็กๆจำนวนมาก ซึ่งแต่ละเม็ดสีถูกเรียกสั้นๆว่า พิกเซล(pixel) ดังนั้นให้คุณจำไว้ว่าในบทนี้ ตัวเลขของขนาดที่เราจะพูดถึงอยู่ในรูปของพิกเซล ไม่ได้อยู่ในรูปนิ้วหรือเซนติเมตรหรืออื่นๆ
ภาพในคอมฯทุกๆภาพประกอบขึ้นจากพิกเซลจำนวนมาก ยิ่งจำนวนพิกเซลต่อนิ้วของภาพมีมากขึ้น ภาพนั้นจะมีรายละเอียดมากขึ้น และปรากฎให้เราเห็นได้ แต่ความจุข้อมูลจะมากขึ้น และใช้พื้นที่ในคอมฯของคุณเพิ่มขึ้นเช่นกัน ภาพบนเว็บเกือบทั้งหมดจะมีความละเอียดอยู่ระหว่าง 72 ถึง 100 พิกเซลต่อนิ้ว ซึ่งจะให้ละเอียดน้อยหรือมากกว่านี้ได้ แต่ว่าระดับ 72-100 เป็นจุดที่คุ้มกันระหว่าง ความจุที่ไม่มากไปและรายละเอียดที่กำลังดี
ทุกภาพถูกระบุขนาดเป็นพิกเซล ด้วยเหตุนี้คุณจึง สามารถระบุขนาดใหม่ได้ด้วยตัวเลขพิกเซล ยกตัวอย่างรูปผืนนาที่ผมใช้อยู่ มีความกว้าง 305 พิกเซล และสูง 213 พิกเซล อ้าว !? แล้วผมรู้ได้อย่างไรกัน …รู้ได้จากโปรแกรม ที่คุณใช้เปิดรูปนั้นครับ เช่น คุณอาจดับเบิ้ลคลิ๊กที่ไฟล์รูป โปรแกรม Photoshop(หรืออื่นๆ) จะเปิดรูปให้คุณ และคุณสามารถกดดูขนาดรูปได้โดยเข้าไปในคำสั่งแก้ไขขนาดรูป จะมีบอกขนาดในแบบพิกเซลของรูปอยู่ แต่จะยุ่งยากครับ ผมแนะนำให้นำรูปมาลงในหน้าเว็บที่คุณสร้าง แล้วเปิดรูปออกมาดู แล้วคลิ๊กขวาที่รูปแล้วกดที่ propeties ซึ่งอยู่ล่างสุด (สำหรับ Internet Explorer) จะเห็นขนาดพิกเซลของรูปอยู่ข้าง Dimension : ลองทำดูสิครับ กับรูปผืนนาข้างบน
การปรับขนาดรูปทำได้โดยการกำหนดขนาดใหม่ ทั้งความกว้างและความสูง ในหน่วยของพิกเซล ด้วยการเพิ่มคำสั่งปรับความกว้าง(Width)และความสูง(Height)ลงในคำสั่ง IMG
<IMG WIDTH=”##” HEIGHT=”##” SRC=”t2010.jpg”>
จะวางคำสั่งทั้งสองไว้หลัง SRC=”–” ก็ได้ครับ คุณจะแทน ## ด้วยเลขพิกเซลของความกว้างและสูงที่คุณต้องการ หรือจะกำหนดเป็น % ของหน้าจอ (ซึ่งหากเป็น % จะให้ผลในแต่ละเครื่องไม่เท่ากัน เพราะความกว้างและสูงของหน้าจอคอมฯแต่ละเครื่องแตกต่างกันไป)ก็ได้ครับ ข้างล่างคือตัวอย่าง…
รูปภาพขนาดปกติ
รูปภาพขนาดกว้าง 60% ของความกว้างจอ สูง 50 พิกเซล
รูปภาพขนาดกว้าง 600 พิกเซล สูง 300 พิกเซล
กลับ_บทที่ 5 รูปภาพ กำลังอ่านบทที่ 6 การปรับขนาดภาพ ไป_คำสั่ง head
