ทุกวันนี้ เว็บไซต์คุณภาพต้องดูดีในความละเอียดหน้าจอที่หลากหลาย ในการทำเช่นนี้ จำเป็นที่องค์ประกอบการออกแบบหน้าจะถูกปรับขนาดภายในขอบเขตที่กว้าง สิ่งนี้ใช้กับส่วนหัวของไซต์เป็นหลัก
มันจำเป็น
ความสามารถในการเปลี่ยนมาร์กอัปของหน้าของทรัพยากร
คำแนะนำ
ขั้นตอนที่ 1
การใช้เทมเพลตที่เหมาะสมเป็นวิธีการแก้ปัญหาสากลที่ช่วยให้คุณไม่ยืดออกเท่านั้น แต่ยังบีบอัดส่วนหัว ตลอดจนองค์ประกอบการออกแบบอื่นๆ ด้วย คุณสามารถใช้เทมเพลตมาตรฐานที่มีให้โดยโฮสติ้งฟรีหรือแจกจ่ายบนอินเทอร์เน็ตฟรี เทมเพลตใด ๆ ต้องมีการแก้ไขและดัดแปลง ขอแนะนำให้เปลี่ยนกราฟิกทั้งหมดเพื่อทำให้ไซต์มีเอกลักษณ์ อย่าใช้รูปแบบมาตรฐาน ออกจากมาร์กอัปหน้า - "โครงกระดูก" และ "เนื้อ" - เนื้อหาและองค์ประกอบการออกแบบ แทนที่ด้วยของคุณเอง การใช้เทมเพลตอย่างรอบคอบช่วยให้คุณประหยัดเวลาของนักพัฒนา ซึ่งสามารถใช้ในการกรอกข้อมูลเว็บไซต์ หรือขยายขีดความสามารถของบริการ
ขั้นตอนที่ 2
หากหน้าถูกจัดเรียงแล้ว คุณสามารถลองขยายส่วนหัวด้วยตัวเอง สิ่งนี้ต้องการความรู้พื้นฐานเกี่ยวกับ HTML และ CSS หากส่วนหัวของไซต์ได้รับการออกแบบเป็นไฟล์กราฟิกไฟล์เดียว คุณสามารถลองบีบอัดและขยายรูปภาพโดยขึ้นอยู่กับความกว้างของหน้าต่าง วิธีนี้ใช้ได้ผลดีหากปัจจัยการปรับขนาดมีขนาดเล็ก หากความกว้างของภาพเกินหนึ่งในสี่หรือมากกว่า คุณภาพของภาพจะลดลง พิกเซลแต่ละพิกเซลที่สร้างภาพจะมองเห็นได้
ขั้นตอนที่ 3
เพื่อให้ภาพยังคงมีคุณภาพสูง แต่ในขณะเดียวกันก็ใช้พื้นที่ทั้งหมดที่กำหนดไว้ จึงจำเป็นต้องแบ่งภาพออกเป็นส่วนๆ ซึ่งมักจะเป็นด้านขวา ด้านซ้าย และตรงกลาง ขอแนะนำให้รูปภาพมีพื้นหลังที่มีความกว้างคงที่ ซึ่งเป็นไปได้ที่จะเติมช่องว่างที่เกิดขึ้นระหว่างส่วนต่างๆ ของส่วนหัว รูปภาพสองรูปที่เป็นขอบของส่วนหัวจะต้องแนบมาที่ด้านซ้ายและด้านขวาของคอนเทนเนอร์ ตัดภาพตรงกลางในแท็ก ปูพื้นที่ที่เหลือด้วยภาพพื้นหลังกว้างหนึ่งพิกเซล
ขั้นตอนที่ 4
วิธีง่ายๆ อีกวิธีหนึ่งคือการสร้างภาพที่ใหญ่กว่าหน้าจอที่ใหญ่ที่สุดโดยเนื้อแท้ รูปภาพถูกตั้งค่าเป็นพื้นหลังที่กึ่งกลางของส่วนหัว ข้อเสียคือ "น้ำหนัก" ที่ใหญ่ของภาพ ส่งผลให้โหลดนาน การรวมวิธีการข้างต้นจะช่วยหลีกเลี่ยงผลกระทบส่วนใหญ่