ทุกสิ่งที่ผู้เยี่ยมชมเห็นบนหน้าของเว็บไซต์จะแสดงโดยเบราว์เซอร์ตามคำแนะนำโดยละเอียดที่เซิร์ฟเวอร์ส่งถึงเขา คำแนะนำเหล่านี้เรียกว่าโค้ด html ของหน้าเว็บและประกอบด้วย "แท็ก" ที่แยกจากกันซึ่งอธิบายประเภท ลักษณะที่ปรากฏ และตำแหน่งของแต่ละองค์ประกอบ ในการวางองค์ประกอบใหม่ (เช่น รูปภาพ) ลงในหน้า คุณต้องเพิ่มคำสั่งที่เกี่ยวข้อง - แท็ก - ลงในซอร์สโค้ด พิจารณาวิธีที่ง่ายที่สุดในการทำเช่นนี้
คำแนะนำ
ขั้นตอนที่ 1
หากคุณใช้ระบบจัดการเนื้อหาประเภทใดก็ตาม มีความเป็นไปได้สูงที่จะมีตัวแก้ไขเพจ ขั้นแรก คุณต้องเปิดหน้าที่ต้องการในตัวแก้ไขนี้ เพิ่มเติม - สามารถเลือกได้ ในกรณีที่ดีที่สุด โปรแกรมแก้ไขเพจจะมี "โหมดภาพ" หรืออีกนัยหนึ่งคือ "โหมด WYSIWYG" (สิ่งที่คุณเห็นคือสิ่งที่คุณได้รับ - "สิ่งที่คุณเห็นคือสิ่งที่คุณได้รับ") ในโหมดนี้ คุณจะไม่ต้องจัดการกับโค้ด html ดั้งเดิมเลย! หน้าในโปรแกรมแก้ไขจะมีลักษณะเหมือนกับบนไซต์เพียงแค่จิ้มเมาส์ในตำแหน่งที่ต้องการแล้วกดปุ่ม "แทรกรูปภาพ" บนแผงตัวแก้ไข
ขั้นตอนที่ 2
เป็นผลให้กล่องโต้ตอบจะเปิดขึ้นซึ่งคุณต้องเลือกภาพที่ต้องการ หากคุณยังไม่ได้อัปโหลด ยังมีปุ่มสำหรับเลือกรูปภาพบนคอมพิวเตอร์ของคุณและอัปโหลดไปยังเซิร์ฟเวอร์ นอกจากนี้ ในกล่องโต้ตอบนี้ คุณสามารถกำหนดสีและความกว้างของกรอบรอบรูปภาพ ระยะห่างและสีของสีเติมระหว่างเฟรมกับรูปภาพ ข้อความสำหรับคำแนะนำเครื่องมือ ไม่จำเป็นต้องระบุขนาดที่นี่ แต่สำหรับเหตุผลในการเร่งความเร็วการโหลดหน้าและเพื่อป้องกันความผิดเพี้ยนของการออกแบบ การทำเช่นนี้ก็ยังดีกว่า เมื่อกรอกข้อมูลในฟิลด์ที่จำเป็นทั้งหมดของกล่องโต้ตอบแล้ว ให้คลิก "ตกลง" จากนั้นให้บันทึกหน้าที่แก้ไข
ขั้นตอนที่ 3
เนื่องจากไม่มีมาตรฐานเดียวสำหรับระบบควบคุม ขั้นตอนการแทรกรูปภาพในโหมดการมองเห็นของระบบของคุณอาจแตกต่างกันเล็กน้อย แต่หลักการจะเหมือนกัน ด้วยเหตุผลเดียวกัน โหมด WYSIWYG อาจไม่ปรากฏในระบบการจัดการของไซต์ของคุณ จากนั้น คุณยังต้องแก้ไขซอร์สโค้ดของหน้าใน HTML (HyperText Markup Language - "hypertext markup language") คุณจะต้องใส่แท็กในตำแหน่งที่ถูกต้องในโค้ดที่บอกให้เบราว์เซอร์แสดงรูปภาพที่นี่ ในรูปแบบที่ง่ายที่สุด ควรมีลักษณะดังนี้: นี่คือ "ที่อยู่สัมพัทธ์" ของรูปภาพ - ที่อยู่นี้ เบราว์เซอร์ควรติดต่อเซิร์ฟเวอร์เพื่อรับไฟล์รูปภาพ หากที่อยู่นั้นสัมพันธ์กัน เบราว์เซอร์จะถือว่าไฟล์นั้นอยู่ในโฟลเดอร์เซิร์ฟเวอร์เดียวกันกับเพจนั้นเอง (หรือในโฟลเดอร์ย่อย) แต่เพื่อไม่ให้เข้าใจผิด การระบุ "ที่อยู่สัมบูรณ์" จะดีกว่า เช่น เช่นนี้ โดยปกติแล้ว เพื่อให้เซิร์ฟเวอร์ค้นหาและส่งภาพไปยังเบราว์เซอร์ ควรอัปโหลดไปยังตำแหน่งที่ระบุ ที่ตั้ง. วิธีที่ง่ายที่สุดในการทำเช่นนี้คือผ่านตัวจัดการไฟล์ ซึ่งอยู่ในทุกระบบการจัดการเนื้อหา รวมถึงในแผงควบคุมของบริษัทโฮสติ้งของคุณ คุณสามารถทำได้โดยใช้โปรโตคอล FTP (File Transfer Protocol - "file transfer protocol") โดยใช้โปรแกรมพิเศษ - FTP-client มีมากมายทั้งแบบเสียเงินและฟรี ตัวอย่างเช่น Cute FTP, FlashFXP, WS FTP เป็นต้น แต่แน่นอนว่าการติดตั้ง การควบคุม และการกำหนดค่าโปรแกรมต้องใช้เวลา ดังนั้นตัวจัดการไฟล์สำหรับดาวน์โหลดทุกสิ่งที่คุณต้องการผ่าน เบราว์เซอร์เป็นตัวเลือกที่ง่ายกว่า
ขั้นตอนที่ 4
นอกจากที่อยู่ในแท็ก html ของรูปภาพแล้ว คุณสามารถระบุข้อมูลเพิ่มเติม - "แอตทริบิวต์" ของแท็กได้ ตัวอย่างเช่น แอตทริบิวต์ alt="รูปภาพ" มีข้อความสำหรับคำแนะนำเครื่องมือที่ปรากฏขึ้นเมื่อคุณวางเคอร์เซอร์ของเมาส์ไว้เหนือรูปภาพ: สามารถแทนที่ด้วยแอตทริบิวต์ - ชื่อ: - ขนาดของสี่เหลี่ยมผืนผ้าที่เบราว์เซอร์ควร แสดงรูปภาพถูกกำหนดโดยแอตทริบิวต์ width และ height: - border attribute ระบุความกว้างของเส้นขอบรอบรูปภาพ (เป็นพิกเซล): หากรูปภาพถูกสร้างขึ้นเป็นลิงค์ เบราว์เซอร์จะวาดเส้นขอบสีน้ำเงินรอบๆเพื่อกำจัดมัน ตั้งค่าเส้นขอบเป็นศูนย์: - อีกสองแอตทริบิวต์มีข้อมูลเกี่ยวกับจำนวนการเยื้องของรูปภาพจากองค์ประกอบที่อยู่ติดกัน (จากบรรทัดของข้อความ รูปภาพอื่น ฯลฯ) - hspace กำหนดขนาดของ การเยื้องในแนวนอน (ซ้ายและขวา), vspace - แนวตั้ง (ล่างและบน):