เมื่อออกแบบเว็บไซต์ คุณมักจะต้องแก้คำถามพื้นฐาน: หน้าเว็บจะเป็นอย่างไรเมื่อเปิดด้วยความละเอียดหน้าจอต่างกัน มีสองตัวเลือกที่นี่ - หน้าไซต์ "ยาง" (ยืด) หรือแบบคงที่ ตัวเลือกแรกจะถูกกล่าวถึง ไม่ว่าคุณจะชอบเลย์เอาต์แบบใด แนวคิดหลักของการออกแบบการยืดก็คือความสามารถในการปรับขนาดได้
มันจำเป็น
- - ความรู้เกี่ยวกับ HTML;
- - โปรแกรมสำหรับแก้ไขโค้ด html
คำแนะนำ
ขั้นตอนที่ 1
เลือกไฟล์หลักสำหรับเทมเพลตไซต์ของคุณ ซึ่งจะแสดงมาร์กอัปหลัก อาจเป็นไฟล์ index.html หรือ index.php หนึ่งในซอฟต์แวร์แก้ไขเทมเพลตเว็บไซต์แบบภาพที่ดีที่สุดคือ Macromedia Dreamweawer การแก้ไขที่จำเป็นจะทำบนพื้นฐานของโปรแกรมนี้
เปิดไฟล์เทมเพลตหรือสร้างไฟล์ใหม่โดยใช้คำสั่ง "ไฟล์" - "ใหม่" หมวดหมู่ - "หน้าฐาน" - "HTML" หรือหมวดหมู่ "หน้าไดนามิก" - "PHP" ที่นี่เราพิจารณากรณีทั่วไปเมื่อโครงสร้างไซต์ถูกบันทึกในหนึ่งในสองไฟล์
ขั้นตอนที่ 2
ไม่เป็นความลับมานานแล้วว่ามีการจัดวางประเภทต่างๆ - บนโต๊ะ บนบล็อก div และรวมกัน (ตารางและบล็อกในเวลาเดียวกัน) แท็ก html มีหน้าที่ในการจัดวางตาราง
ระบุเปอร์เซ็นต์ (100%) สำหรับแต่ละพร็อพเพอร์ตี้ สิ่งนี้จะบรรลุผลจากการยืดเซลล์ตารางบนหน้าจอโดยอัตโนมัติด้วยรูปทรงเรขาคณิตใดๆ อาจเป็นจอภาพขนาด 19 นิ้วหรือสมาร์ทโฟน - แต่ละรายการจะทำซ้ำเนื้อหาได้อย่างถูกต้อง
ขั้นตอนที่ 3
หากคุณต้องการระบุความสอดคล้องระหว่างเซลล์ตารางอย่างแน่นอน ให้ใช้ตัวอย่างต่อไปนี้:
| … … เนื้อหาของเซลล์ 1 … | … … เนื้อหาของเซลล์ 2 … |
ที่นี่คุณจะเห็นว่าเซลล์หนึ่งถูกระบุด้วยความกว้าง 30% ของทุกอย่างที่กำหนดไว้สำหรับตารางเอง การคำนวณอย่างง่ายแสดงให้เห็นว่า 100% -30% = 70% ยังคงอยู่สำหรับเซลล์ที่สอง โปรดจำไว้ว่า ในกรณีนี้ เซลล์ตารางหนึ่งต้องไม่มีชุดแอตทริบิวต์ width เบราว์เซอร์จะทำการคำนวณทั้งหมดด้วยตัวเองและจะขยายตารางด้วยเซลล์อย่างถูกต้อง เนื้อหาภายในตารางจะขยายและย่อขนาดอย่างถูกต้องตามหน้าจอต่างๆ
ขั้นตอนที่ 4
ในสถานการณ์ที่มีเลย์เอาต์ div บล็อกแท็กจะถูกขยายตามค่าเริ่มต้นจนเต็มความกว้างของหน้าจอและติดตามจากซ้ายไปขวาจากบนลงล่าง หากต้องการปรับแต่งเรขาคณิต ให้สร้างคลาส CCS หรือตัวระบุ (ID) ที่คุณระบุ เช่น คุณลักษณะและ / หรือหมวดหมู่ของขนาดและตำแหน่งของกล่อง (Box) อย่าลืมเชื่อมโยงสไตล์ที่ระบุกับไฟล์มาร์กอัปของไซต์และผูกคลาส (ID) กับแท็กที่ต้องการ โดยปกติแล้วจะวางไว้ที่จุดเริ่มต้นของสคริปต์ กำหนดรูปทรงของไซต์ในอนาคตทั้งหมด:
… … เนื้อหาเว็บไซต์ …
หรือเช่นนี้:
… … เนื้อหาเว็บไซต์ …
รหัสสำหรับกฎ CSS จะเป็นดังนี้:
… ห้องเรียนของฉัน {
ความกว้าง: 30%;
ความสูง: 50%;
}
#myID {
ความกว้าง: 30%;
ความสูง: 50%;
}