สะดวกในการใช้กริดแบบแยกส่วนเมื่อพัฒนาการออกแบบหรือสร้างภาพที่ซับซ้อน พวกเขาทำหน้าที่เป็นพื้นฐานขององค์ประกอบโดยแบ่งแผ่นงานออกเป็นขั้นตอนในแนวตั้งและแนวนอนที่ระบุด้วยระยะทางเท่ากันหรือต่างกัน
จำเป็น
โปรแกรม Adobe Photoshop
คำแนะนำ
ขั้นตอนที่ 1
โปรแกรมแก้ไขกราฟิกที่ทันสมัยและโปรแกรมออกแบบเว็บทั้งหมดมีกริดแบบโมดูลาร์ในตัว หากคุณกำลังทำงานใน Adobe Photoshop ให้เปิดการแสดงตารางเพื่อให้จัดเรียงวัตถุรูปภาพได้ง่ายและจัดตำแหน่งที่แน่นอนบนแผ่น ในการดำเนินการนี้ ให้ไปที่รายการเมนูแก้ไข และเลื่อนเมาส์ไปเหนือคำบรรยายการตั้งค่า ในเมนูที่ปรากฏขึ้น ให้เลือกรายการ Guides, Grid & Slices (ขึ้นอยู่กับรุ่นของโปรแกรม รายการนี้อาจมีชื่อต่างกัน เลือกคำว่า Grid)
ขั้นตอนที่ 2
ในหน้าต่างการตั้งค่าที่เปิดขึ้น ให้ตั้งค่าพารามิเตอร์ของตารางโมดูลาร์ ในพื้นที่กริด เลือกสีของเส้นที่สร้างรายการกริดและระยะห่างบรรทัด คลิก "ตกลง" และตรวจสอบว่าการเปลี่ยนแปลงที่ทำขึ้นจะส่งผลต่อลักษณะที่ปรากฏของภาพอย่างไร ในสภาพแวดล้อมการพัฒนาเว็บ Adobe DreamWeaver ตารางจะถูกรวมไว้ในเลย์เอาต์ของหน้าที่คุณกำลังพัฒนาโดยค่าเริ่มต้น
ขั้นตอนที่ 3
คุณสามารถเพิ่มตารางต่างๆ (รายการกริด) ด้วยชุดแถวและคอลัมน์ใดก็ได้โดยใช้รายการ แทรกตาราง เช่นเดียวกับแทรกตารางใหม่ลงในเซลล์ ดังนั้นจึงสร้างเครือข่ายที่ซับซ้อนสำหรับการสร้างองค์ประกอบของหน้า
ขั้นตอนที่ 4
คุณสามารถสร้างตารางโมดูลาร์ด้วยตนเองโดยใช้สไตล์ CSS ในการดำเนินการนี้ ให้ใช้เครื่องมือ #grid, Gridmaker, CSS Grid Builder, 1 KB CSS Grid, Gridr Buildrrr และโมดูลอื่นๆ ตัวอย่างเช่น ข้อมูลโค้ดต่อไปนี้สร้างตารางสี่โมดูลตามความกว้างที่กำหนด:.page-layout {margin-right: -5px; }.layout-box {ลอย: ซ้าย; ระยะขอบ: 0 5px 5px 0; }.lb-1 {ความกว้าง: 779px; } / * 100% * /. Lb-2 {ความกว้าง: 583px; } / * 75% * /. Lb-3 {ความกว้าง: 387px; } / * 50% * /. Lb-4 {ความกว้าง: 191px; } / * 25% * /
ขั้นตอนที่ 5
การมีกริดแบบโมดูลาร์ช่วยให้ทั้งนักออกแบบมือใหม่และนักพัฒนาเว็บ และผู้เชี่ยวชาญที่มีประสบการณ์ในสาขานี้ทำได้ง่ายขึ้น โครงการที่สร้างขึ้นบนพื้นฐานของตารางโมดูลาร์นั้นง่ายต่อการแก้ไขและถ่ายโอน ซึ่งสะดวกมากสำหรับงานปริมาณมาก คุณยังสามารถหยุดทำงานเมื่อใดก็ได้ และใช้ไฟล์ที่บันทึกไว้ต่อไป