วิธีตัดข้อความล้อมรอบรูปภาพ

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

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

ใช้ CSS

วิธีที่ถูกต้องในการเปลี่ยนวิธีการจัดรูปแบบข้อความและภาพของเพจและลักษณะของรูปแบบภาพในเบราว์เซอร์ที่มีอยู่กับ CSS โปรดจำไว้เนื่องจากเรากำลังพูดถึงการเปลี่ยนแปลงภาพบนหน้า (ทำให้ข้อความไหลไปรอบ ๆ รูปภาพ) ซึ่งหมายความว่าเป็นโดเมนของ Cascading Style Sheets

1. ก่อนอื่นให้เพิ่มภาพของคุณลงในหน้าเว็บของคุณ อย่าลืมยกเว้นลักษณะภาพใด ๆ (เช่นความกว้างและความสูง) จาก HTML นั้น นี่เป็นเรื่องสำคัญโดยเฉพาะอย่างยิ่งสำหรับ เว็บไซต์ ที่ มีการตอบสนอง ที่ขนาดของภาพจะแตกต่างกันไปตามเบราเซอร์ ซอฟต์แวร์บางอย่างเช่น Adobe Dreamweaver จะเพิ่มข้อมูลความกว้างและความสูงลงในภาพที่แทรกด้วยเครื่องมือนี้ดังนั้นโปรดนำข้อมูลนี้ออกจากโค้ด HTML! อย่างไรก็ตามอย่าลืมใส่ ข้อความ alt ที่เหมาะสม ต่อไปนี้เป็นตัวอย่างโค้ด HTML ของคุณ:
2. สำหรับการจัดรูปแบบคุณสามารถเพิ่มคลาสลงในรูปภาพได้ ค่าชั้นนี้เป็นสิ่งที่เราจะใช้ในไฟล์ CSS ของเรา โปรดทราบว่าค่าที่เราใช้ที่นี่เป็นค่าโดยพลการแม้ว่าในรูปแบบนี้เรามักจะใช้ค่า "ซ้าย" หรือ "ทางขวา" ทั้งนี้ขึ้นอยู่กับว่าเราต้องการให้รูปของเราสอดคล้องกันอย่างไร เราพบว่าไวยากรณ์ง่ายๆทำงานได้ดีและเป็นเรื่องง่ายสำหรับคนอื่น ๆ ที่อาจต้องจัดการไซต์ในอนาคตเพื่อให้เข้าใจ แต่คุณสามารถให้ค่าเรียนที่คุณต้องการได้
   2. ด้วยตัวเองค่าชั้นเรียนนี้จะไม่ทำอะไรเลย รูปภาพจะไม่จัดเรียงให้ชิดซ้ายของข้อความโดยอัตโนมัติ สำหรับตอนนี้เราจำเป็นต้องหันไปหาไฟล์ CSS ของเรา

1. ในสไตล์ชีตของคุณตอนนี้คุณสามารถเพิ่มสไตล์ต่อไปนี้:
   1. .ซ้าย {
   2. ลอย: ซ้าย;
   3. padding: 0 20px 20px 0;
   4. }
   5. สิ่งที่คุณทำที่นี่คือการใช้ CSS "float" ซึ่งจะดึงภาพจากการไหลของเอกสารตามปกติ (ซึ่งปกติภาพจะแสดงผลโดยมีข้อความอยู่ด้านล่าง) และจะจัดวางให้อยู่ด้านซ้ายของคอนเทนเนอร์ . ข้อความที่มาหลังจากนั้นในมาร์กอัป HTML พร้อมกับห่อหุ้มไว้ นอกจากนี้เรายังเพิ่มค่าส่วนขยายบางอย่างเพื่อให้ข้อความนี้ไม่ได้ แต่ตรงกับภาพ แต่จะมีระยะห่างที่ดีที่จะดึงดูดสายตาในการออกแบบของหน้าเว็บ ในชวเลข CSS สำหรับการขยายช่องเราได้เพิ่มค่า 0 ไปที่ด้านบนและด้านซ้ายของภาพและ 20 พิกเซลทางด้านซ้ายและด้านล่าง โปรดจำไว้ว่าคุณต้องเพิ่ม padding ด้านขวาของภาพชิดซ้าย ภาพที่จัดชิดขวา (ซึ่งเราจะมองในช่วงเวลาหนึ่ง) จะมีส่วนรองด้านซ้าย
2. หากคุณดูหน้าเว็บของคุณในเบราว์เซอร์ตอนนี้คุณจะเห็นว่ารูปภาพของคุณอยู่ในแนวเดียวกันกับด้านซ้ายของหน้าและข้อความจะล้อมรอบไปรอบ ๆ อีกวิธีหนึ่งในการพูดคือภาพนี้ "ลอยไปทางซ้าย"

1. หากคุณต้องการเปลี่ยนภาพให้ชิดขวา (เช่นในตัวอย่างภาพถ่ายที่มาพร้อมกับบทความนี้) ก็จะง่าย อันดับแรกคุณต้องตรวจสอบให้แน่ใจว่านอกจากรูปแบบที่เราเพิ่งเพิ่มลงใน CSS ของเราสำหรับค่าเรียนของ "ซ้าย" เรายังมีรูปแบบหนึ่งสำหรับการจัดแนวด้านขวา จะมีลักษณะดังนี้:
   1. ขวา {
   2. ลอย: ขวา;
   3. padding: 0 0 20px 20px;
   4. }
   5. คุณสามารถเห็นได้ว่านี่เกือบเหมือนกับ CSS ตัวแรกที่เราเขียนไว้ ข้อแตกต่างเพียงอย่างเดียวคือค่าที่เราใช้สำหรับพร็อพเพอร์ตี้ "float" และค่าส่วนขยายที่เราใช้ (เพิ่มบางส่วนไปทางด้านซ้ายของภาพแทนที่จะเป็นด้านขวา)
2. สุดท้ายคุณจะเปลี่ยนค่าของคลาสของภาพจาก "ซ้าย" เป็น "ขวา" ใน HTML ของคุณ:
3. ดูที่หน้าเว็บของคุณในเบราเซอร์ในขณะนี้และภาพของคุณควรเรียงตามแนวด้านขวาพร้อมกับข้อความที่ห่อหุ้มรอบ ๆ เรามีแนวโน้มที่จะเพิ่มสไตล์ทั้งสองแบบนี้ "ซ้าย" และ "ถูกต้อง" ลงในสไตล์ชีตทั้งหมดของเราเพื่อให้เราสามารถใช้รูปแบบภาพเหล่านี้ได้เมื่อต้องการสร้างหน้าเว็บ ทั้งสองรูปแบบกลายเป็นคุณสมบัติที่สามารถนำกลับมาใช้ใหม่ซึ่งเราสามารถเปลี่ยนไปเมื่อใดก็ตามที่เราต้องการตกแต่งภาพด้วยการตัดข้อความรอบ ๆ ตัว

ใช้ HTML แทนที่จะเป็น CSS (และทำไมคุณไม่ควรทำแบบนี้)

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