คณิตศาสตร์นั้นสวยงามมาก ฟังดูแปลก ๆ นิดหน่อยเหรอ? คณิตศาสตร์น่าเบื่อมาก คุณอาจแปลกใจที่พบว่าการออกแบบ งานศิลปะ วัตถุ และแม้กระทั่งผู้คนที่สวยงามที่สุด ล้วนมีบางอย่างทางคณิตศาสตร์เหมือนกัน โดยเฉพาะอัตราส่วนทองคำหรือที่เรียกว่าอัตราส่วนศักดิ์สิทธิ์ ซึ่งแสดงด้วยตัวอักษรกรีก Φ (phi) บทช่วยสอนนี้จะแจกแจงโครงร่างของเว็บไซต์และวิธีแบ่งออกเป็นอัตราส่วนทองคำ
โครงกระดูกหน้าเว็บ
เหล่านี้เป็นองค์ประกอบหลักของหน้าเว็บ มีหลายวิธีในการจัดระเบียบ แต่เลย์เอาต์นี้อาจเป็นวิธีที่ใช้บ่อยที่สุด
คอนเทนเนอร์
หน้าเว็บทั้งหมดใช้คอนเทนเนอร์เพื่อจุดประสงค์เดียวกันเป็นหลัก: เพื่อให้มีองค์ประกอบของหน้าบางส่วน อย่างไรก็ตาม วิธีการนี้มีการใช้งานแตกต่างออกไป ตัวอย่างเช่น แท็ก body หรือ div ที่ใช้บ่อยที่สุด แม้แต่ตารางที่เคยใช้กันทั่วไปในอดีต (อย่าใช้ตารางเป็นคอนเทนเนอร์ นี่เป็นวิธีที่ใช้งานไม่ได้) คิดว่าภาชนะเป็นเหมือนผนังด้านนอกของบ้านซึ่งประกอบด้วยห้องนอน ห้องครัว ห้องนั่งเล่น ฯลฯ
ประเภทคอนเทนเนอร์:
ของเหลว: เติมตามความกว้างของเบราว์เซอร์
แก้ไข: ความกว้างที่ระบุจะไม่เปลี่ยนแปลงตามความกว้างของเบราว์เซอร์
ส่วนหัว
ส่วนหัวไม่ใช่องค์ประกอบเฉพาะเจาะจง แม้ว่าบางคนอาจแย้งว่าเป็นองค์ประกอบนั้นก็ตาม โดยจะใช้มากขึ้นที่ระดับบนสุดของหน้าเว็บที่คุณวางโลโก้ แถบนำทาง และสโลแกน หลายๆ คนชอบที่จะรวมองค์ประกอบเหล่านี้ไว้ใน div เพื่ออำนวยความสะดวกในการแยกสไตล์หน้าและเนื้อหา ส่วนหัวจะถือเป็นคอนเทนเนอร์ดังนั้นจึงมีตัวเลือกสองประเภทคือแบบของเหลวหรือแบบคงที่ตามที่กล่าวไว้ข้างต้น
โลโก้
โลโก้ของคุณคือเอกลักษณ์และแบรนด์ของคุณ วิธีที่ใช้บ่อยที่สุดคือการวางโลโก้ไว้ที่มุมซ้ายบนของส่วนหัว นิสัยการอ่านของเราคือจากซ้ายไปขวาและจากบนลงล่าง ดังนั้นควรวางบันทึกของคุณไว้ในที่ที่ผู้เยี่ยมชมสามารถมองเห็นได้ตั้งแต่แรกเห็น
การนำทาง
การนำทางหน้าเป็นหนึ่งในองค์ประกอบที่สำคัญที่สุด ผู้เยี่ยมชมของคุณต้องการสิ่งนี้เพื่อใช้ไซต์ของคุณ ควรค้นหาและใช้งานได้ง่าย ซึ่งเป็นสาเหตุที่คนส่วนใหญ่ใส่ไว้ในส่วนหัว อย่างน้อยก็ใกล้กับด้านบนของหน้า
ประเภทการนำทาง:
แนวนอน: จอแสดงผลแนวนอนเรียกว่า 'การนำทาง'
แนวตั้ง: จอแสดงผลแนวตั้งเรียกว่า 'เมนู'
เนื้อหาหลัก
ทุกคน (ควร) รู้ว่าเนื้อหาเป็นสิ่งสำคัญ! เมื่อผู้คนเข้ามาเยี่ยมชมเว็บไซต์ของคุณ มันเป็นองค์ประกอบหลักที่พวกเขาต้องการเห็น ควรเป็นจุดโฟกัสของหน้าเว็บ เพื่อให้ผู้เยี่ยมชมสามารถค้นหาสิ่งที่ต้องการได้อย่างรวดเร็ว
แถบด้านข้าง
แถบด้านข้างเป็นองค์ประกอบที่วางเนื้อหารองของคุณ เช่น โฆษณาบางรายการ การค้นหาไซต์ ลิงก์สมัครสมาชิก (RSS, Twitter, อีเมล ฯลฯ) วิธีติดต่อ ฯลฯ ไม่จำเป็นต้องใช้องค์ประกอบนี้ แม้ว่าหลายไซต์จะใช้องค์ประกอบนี้ก็ตาม ส่วนใหญ่จะวางไว้ทางด้านขวา แต่คุณสามารถวางไว้ทางด้านซ้ายหรือทั้งสองด้านได้ ตราบใดที่มันไม่รบกวนการเรียกดูเนื้อหาหลัก เว็บไซต์ใช้การนำทางในแนวนอนหรือแนวตั้ง และแถบด้านข้างมักใช้การนำทางในแนวตั้ง
ส่วนท้าย
มีส่วนท้ายเสมอที่ส่วนท้ายของหน้าเว็บเพื่อให้ผู้เยี่ยมชมของคุณทราบว่าเขามาถึงจุดสิ้นสุดของหน้าเว็บแล้ว เช่นเดียวกับส่วนหัว ส่วนท้ายไม่ใช่องค์ประกอบพิเศษ รวมลิขสิทธิ์ ประกาศทางกฎหมาย และข้อมูลติดต่อหลักไว้ในส่วนท้ายของคุณ เป็นความคิดที่ดีที่จะรวมลิงค์ที่สำคัญบางส่วน เช่น หน้าแรก หน้าติดต่อ ฯลฯ เว็บไซต์บางแห่งใช้พื้นที่นี้เพื่อให้เนื้อหาที่เกี่ยวข้องหรือข้อมูลสำคัญอื่น ๆ
"ช่องว่าง"
คุณอาจปรารถนาอย่างยิ่งที่จะกรอกข้อมูลลงในช่องว่างในหน้าเหล่านี้ แต่โปรดอย่าทำเช่นนั้น “พื้นที่สีขาว” ก็มีความสำคัญเช่นกัน คุณจะเห็นว่าเว็บไซต์ NetTuts ใช้พื้นที่สีขาวอย่างมีประสิทธิภาพเพื่อสร้างความสมดุลของหน้าและให้ความรู้สึกที่ดีได้อย่างไร
ด้านบนคือโครงกระดูกของหน้าเว็บ ตอนนี้เรามาดูวิธีแบ่งองค์ประกอบเหล่านี้ออกเป็นส่วนๆ สีทองกัน
ส่วนสีทองและการใช้กริด
จำได้ไหมก่อนหน้านี้ที่ฉันบอกว่าคณิตศาสตร์เป็นสิ่งสวยงาม เราคิดว่ารูปลักษณ์ที่ดึงดูดใจนั้นขึ้นอยู่กับสัดส่วน (เช่น ส่วนสีทอง) เป็นเวลาหลายพันปีที่ศิลปิน นักออกแบบ สถาปนิก ฯลฯ ใช้สัดส่วนร่วมกันเพื่อเพิ่มความสวยงามให้กับงานของตนโดยรู้ตัวหรือไม่รู้ตัว เลขมหัศจรรย์นี้คืออะไร 1.62 (จริงๆ แล้ว 1.618...) ไม่บอกที่มาของเลขนี้แต่จะบอกวิธีใช้
การใช้ส่วนสีทองนั้นง่ายมาก ตัวอย่างเช่น คุณอาจต้องการค้นหาความกว้างของเนื้อหาหลักและรายการแถบด้านข้าง คุณจะใช้ความกว้างทั้งหมดของพื้นที่เนื้อหาของคุณแล้วหารด้วย 1.62 ซึ่งจะได้ 555.55px เราไม่จำเป็นต้องแม่นยำขนาดนั้น ดังนั้นเราจึงใช้แค่ 555px ตอนนี้คุณรู้แล้วว่าองค์ประกอบเนื้อหาหลักของคุณมีความกว้าง 555px และแถบด้านข้างของคุณคือ 345px ง่ายขนาดไหนไปดูกัน!
แต่เดี๋ยวก่อน ความสนุกไม่ได้หยุดอยู่แค่นั้น คุณยังสามารถใช้ส่วนสีทองกับความกว้างและความสูงขององค์ประกอบอื่นๆ ได้อีกด้วย
การใช้กริด
หากคุณเป็นเหมือนคนส่วนใหญ่ คุณไม่จำเป็นต้องถือเครื่องคิดเลขมาคำนวณอัตราส่วนทองคำทุกครั้ง วิธีที่ง่ายที่สุดคือการใช้กริด ดังนั้นสิ่งที่คุณต้องทำคือแบ่งความกว้างหรือความสูงออกเป็นสามส่วน
หากต้องการสร้างตารางที่มีรายละเอียดมากขึ้น เพียงแบ่งต่อไปเป็นสามส่วน หากคุณอ่านบทความก่อนหน้านี้ "การติดต่ออย่างใกล้ชิดกับกรอบงาน CSS Blueprint" คุณจะเห็นว่ากรอบงาน CSS ของ Blueprint ใช้ระบบกริดแบบละเอียด การออกแบบตารางไม่เพียงแต่ง่ายและรวดเร็วเท่านั้น แต่ยังสร้างเค้าโครงที่สวยงามอีกด้วย หากคุณยังไม่เคยใช้การออกแบบตารางกริด นี่เป็นโอกาสอันดีที่จะลองใช้ คุณสามารถดาวน์โหลดเทมเพลตตารางสำหรับดอกไม้ไฟ โฟโต้ช็อป หรือซอฟต์แวร์อื่นๆ ได้จาก http://960.gs
อย่างที่คุณเห็น NetTuts ติดตามอัตราส่วนทองคำได้เป็นอย่างดี ส่วนบนสุดของหน้าจะถูกแบ่งออกเป็นสามส่วนอีกครั้ง ซึ่งใกล้เคียงกับอัตราส่วนทองคำมาก ไม่น่าแปลกใจเลยที่การออกแบบของ NetTuts นั้นน่าดึงดูดใจมาก!
หากคุณกำลังจะออกแบบใหม่ ฉันขอแนะนำให้ค้นหาไซต์ยอดนิยมบางแห่ง และตรวจสอบเลย์เอาต์ของไซต์เหล่านั้น รวมถึงวิธีใช้อัตราส่วนทองคำและตาราง จากนั้นใช้เวลาฝึกฝนการใช้ส่วนสีทองและใช้ตารางในเลย์เอาต์ของคุณ