วิธีที่ง่ายที่สุดในการแบ่งเว็บเพจ

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

ส่วนหัว

ชื่อในหลากหลายขนาดดึงดูดสายตาและผู้อ่านชี้ไปที่ข้อมูลที่พวกเขาต้องการอ่าน เริ่มต้นด้วยชื่อเรื่องหลักโดยใช้

หรือ

Tags:

ยินดีต้อนรับสู่เว็บไซต์ของฉัน

ใช้ส่วนหัวระดับล่างเพื่อแบ่งไซต์ตามแนวตั้งออกเป็นส่วน ๆ จำกัด ส่วนหัวไว้ที่สองหรือสามขนาดตั้งแต่

ไปยัง

และไม่เกินสามหรือสี่ส่วน

ย่อหน้า

ใช้ย่อหน้า

แท็กเพื่อแบ่งข้อความออกเป็นส่วนต่างๆดังนี้:

ข้อความในย่อหน้าแรก ...

ข้อความในย่อหน้าที่สอง ...

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

ภาพ

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

ตาราง

ใช้ตารางอย่างง่าย ๆ เพื่อแบ่งหน้าในแนวนอน ตารางเดียวที่อยู่หลังชื่อจะแบ่งหน้าออกเป็นสองหรือสามส่วนได้อย่างมีประสิทธิภาพ ใช้รหัส HTML ต่อไปนี้:

เนื้อหาคอลัมน์ด้านซ้ายไปที่นี่ ...เนื้อหาของศูนย์จะอยู่ที่นี่….เนื้อหาที่ถูกต้องไปที่นี่ ...

ตารางเติมหน้าด้วยคอลัมน์ด้านซ้ายโดยมี 20 เปอร์เซ็นต์ของหน้าคอลัมน์ด้านขวาเพิ่มอีก 20 เปอร์เซ็นต์และคอลัมน์กลางอยู่ระหว่างกลาง ตรวจสอบให้แน่ใจว่าได้จดจำแอตทริบิวต์ valign เพื่อให้แต่ละคอลัมน์เริ่มต้นที่ด้านบนและไหลลงมา ลืมแอททริบิวนี้และเนื้อหาจะถูกจัดแนวตั้งตรงกลางของหน้า เพิ่มเนื้อหาแล้วปรับความกว้างของคอลัมน์จนกว่างานนำเสนอจะถูกต้อง

เส้นและเส้นขอบ

กฎแนวนอนเขียนเป็น "


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

พื้นที่สีขาว

บรรทัดว่างและคอลัมน์มักจะแบ่งหน้าดีกว่าการจัดรูปแบบอื่น ๆ ทั้งหมด ตัวแบ่งบรรทัดเขียนเป็น "

"ไม่มีคำพูดย่อหน้าว่างโค้ดเป็นแท็กปิดตัวเองในฐานะ"

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

โพสต์ยอดนิยม