วิธีที่ง่ายที่สุดในการแบ่งเว็บเพจ
หากต้องการสร้างเว็บเพจที่สะอาดและเป็นระเบียบและง่ายต่อการอ่านให้ใช้ข้อมูลพื้นฐาน HTML 5 และ CSS 3 อาจได้รับข่าวทั้งหมด แต่องค์ประกอบ HTML พื้นฐานเช่นส่วนหัวย่อหน้าและตารางที่จัดวางอย่างดีสองสามสามารถแบ่งหน้าเพื่อสื่อสารข้อความของคุณได้อย่างมีประสิทธิภาพ ต่อไปนี้เป็นแท็กที่มีประโยชน์และง่ายต่อการจัดระเบียบไซต์
ส่วนหัว
ชื่อในหลากหลายขนาดดึงดูดสายตาและผู้อ่านชี้ไปที่ข้อมูลที่พวกเขาต้องการอ่าน เริ่มต้นด้วยชื่อเรื่องหลักโดยใช้
หรือ Tags:ยินดีต้อนรับสู่เว็บไซต์ของฉัน
ยินดีต้อนรับสู่เว็บไซต์ของฉัน
ใช้ส่วนหัวระดับล่างเพื่อแบ่งไซต์ตามแนวตั้งออกเป็นส่วน ๆ จำกัด ส่วนหัวไว้ที่สองหรือสามขนาดตั้งแต่
ไปยัง และไม่เกินสามหรือสี่ส่วนย่อหน้า
ย่อหน้า
ใช้ย่อหน้า
แท็กเพื่อแบ่งข้อความออกเป็นส่วนต่างๆดังนี้:
ข้อความในย่อหน้าแรก ...
ข้อความในย่อหน้าที่สอง ...
ทำให้ย่อหน้าเล็กและกระชับ ผู้อ่านเว็บทั่วไปจะสแกนเนื้อหาอย่างรวดเร็วดังนั้นไปที่จุดของคุณในประโยคแรกหรือสองประโยคก่อนที่พวกเขาจะเบื่อและคลิกลิงก์อื่น
ภาพ
รูปภาพที่วางไว้ไม่กี่ภาพก็ช่วยแบ่งหน้าออกเป็นส่วนตรรกะ การวางแนวแตกต่างกันไปทางซ้ายและขวาเพื่อแยกหน้า ถ้าเป็นไปได้แปลงชื่อเป็นภาพเพื่อเพิ่มสไตล์และความหลากหลาย รูปภาพยังทำงานได้ดีเพื่อแทนที่ลิงก์และปุ่มต่างๆ
ตาราง
ใช้ตารางอย่างง่าย ๆ เพื่อแบ่งหน้าในแนวนอน ตารางเดียวที่อยู่หลังชื่อจะแบ่งหน้าออกเป็นสองหรือสามส่วนได้อย่างมีประสิทธิภาพ ใช้รหัส HTML ต่อไปนี้:
เนื้อหาคอลัมน์ด้านซ้ายไปที่นี่ ... | เนื้อหาของศูนย์จะอยู่ที่นี่…. | เนื้อหาที่ถูกต้องไปที่นี่ ... |
ตารางเติมหน้าด้วยคอลัมน์ด้านซ้ายโดยมี 20 เปอร์เซ็นต์ของหน้าคอลัมน์ด้านขวาเพิ่มอีก 20 เปอร์เซ็นต์และคอลัมน์กลางอยู่ระหว่างกลาง ตรวจสอบให้แน่ใจว่าได้จดจำแอตทริบิวต์ valign เพื่อให้แต่ละคอลัมน์เริ่มต้นที่ด้านบนและไหลลงมา ลืมแอททริบิวนี้และเนื้อหาจะถูกจัดแนวตั้งตรงกลางของหน้า เพิ่มเนื้อหาแล้วปรับความกว้างของคอลัมน์จนกว่างานนำเสนอจะถูกต้อง
เส้นและเส้นขอบ
กฎแนวนอนเขียนเป็น "
"ไม่มีเครื่องหมายอัญประกาศหรือเส้นขอบรอบ ๆ ตารางสามารถเน้นการแบ่งส่วนหรือดึงดูดสายตาไปยังบล็อกข้อความใช้สิ่งเหล่านี้เท่าที่จำเป็นและรักษาความกว้างของบรรทัดให้สูงสุดสองหรือสามจุดทดลองกับองค์ประกอบเหล่านี้เพื่อดูว่าพวกเขาเพิ่ม จากการนำเสนอ
พื้นที่สีขาว
บรรทัดว่างและคอลัมน์มักจะแบ่งหน้าดีกว่าการจัดรูปแบบอื่น ๆ ทั้งหมด ตัวแบ่งบรรทัดเขียนเป็น "
"ไม่มีคำพูดย่อหน้าว่างโค้ดเป็นแท็กปิดตัวเองในฐานะ"
"ไม่มีเครื่องหมายคำพูดและคอลัมน์ตารางว่างจะแยกข้อความและทำให้เลย์เอาต์น่าอ่านมากขึ้นพื้นที่ว่างใช้แบนด์วิดท์น้อยและเป็นวิธีที่ง่ายที่สุดในการแบ่งหน้า