คู่มือสำหรับการจัดวางเนื้อหา

เมื่อเราต้องการติดเนื้อหาบนเว็บหนึ่งในปัญหาใหญ่ที่เราพบคือข้อเสนอที่ฉันได้รับนั้นไม่เคยคิดที่จะนำมารวมเข้ากับเว็บได้สำเร็จ โดยทั่วไปปัญหาคือไม่มีโครงสร้างที่เพียงพอการออกแบบและเลย์เอาต์มักจะดูไม่ดีเกินไปทำให้ได้ผลลัพธ์ที่น่าพอใจ

นั่นคือเหตุผลที่ฉันจะอธิบายพื้นฐานเบื้องต้นเกี่ยวกับวิธีการจัดวางเนื้อหาที่ควรพิจารณาในเงื่อนไขเพื่อทำให้งานง่ายขึ้นสูงสุดและผลลัพธ์นั้นดีที่สุด

วัตถุประสงค์ของคู่มือนี้คือทุกคนที่ไม่มีความรู้ด้านการเขียนโปรแกรมหรือการพัฒนาเว็บไซต์สามารถให้เลย์เอาต์คุณภาพแก่ฉันได้และฉันไม่ต้องใช้เวลามากเกินไปในการพยายามแยกไอเดียออกจากการสนทนาหลาย ๆ ครั้งจนกว่าจะถึงบทสรุป

ขั้นตอนที่ 1: เทมเพลต

เพื่อให้มีเทมเพลตที่เราสามารถ "วาด" ข้อเสนอของเราได้ สิ่งที่เราจะทำคือเอากระดาษ A4 และเราจะพับตามยาวหนึ่งในสาม

ขั้นตอนที่ 2: บล็อกเนื้อหา

ลองจินตนาการว่าเรามีเนื้อหาหลายประเภท: วิดีโอรูปภาพข้อความ แต่ละเนื้อหาเป็นบล็อกสี่เหลี่ยมหรือสี่เหลี่ยมจัตุรัส เราต้องใส่บล็อคจากบนลงล่างของเทมเพลตตามที่เราเลือก เราจะแสดงเนื้อหาสามประเภท

วิดีโอบล็อก

เราจะสมมติว่าวิดีโอนั้นเป็นวิดีโอ YouTube โดยทั่วไปเราแสดงในเทมเพลตดังต่อไปนี้:

บล็อกรูปภาพ

ขึ้นอยู่กับว่าภาพนั้นเป็นแนวนอนหรือแนวตั้งตามที่เราจะเห็นด้วย

บล็อคข้อความ

เช่นเดียวกับบล็อกรูปภาพขึ้นอยู่กับว่าเราต้องการข้อความที่เราจะใส่บล็อกหรืออื่น ๆ เราแทนด้วยเส้นคู่ขนาน

บล็อกข้อความสามารถบล็อกข้อความที่มีย่อหน้ารวมและแม้กระทั่ง รายการองค์ประกอบที่เป็นข้อความ

ฉันจะยกตัวอย่างสองตัวอย่าง: บล็อกข้อความถัดจากภาพทิวทัศน์และอีกภาพถัดจากภาพบุคคล:

บล็อกหัวเรื่อง

ชื่อไปในบล็อกแยกเป็นบล็อกยาวที่โดยทั่วไปครอบครองทั้งบรรทัด

บล็อคปุ่ม

หากเราต้องการวางปุ่มให้คนคลิกและนำพวกเขาไปยังส่วนอื่นของเว็บหรือเพียงแค่หน้าต่างที่มีข้อมูลบางส่วน (หรือแบบฟอร์ม) ปรากฏขึ้น

บล็อกอื่น ๆ

ความคิดคล้ายกัน หากเราเข้าใจวิธีการทำงานของบล็อกฉันคิดว่าเราสามารถใส่บล็อกประเภทอื่นได้อย่างชัดเจนเหมือนกับบล็อกก่อนหน้านี้ที่เหมาะกับสี่เหลี่ยมจัตุรัสหรือสี่เหลี่ยม ตัวอย่างเช่นถ้าเราต้องการที่จะนำรูปแบบที่รวมอยู่ในเนื้อหา แม้ว่านี่จะเป็นเรื่องธรรมดาที่น้อยที่สุด แต่ก็ควรถามก่อนใช้บล็อกใหม่ที่ไม่ใช่ประเภทที่กล่าวถึงข้างต้น ฉันจะพยายามอัปเดตรายการนี้เนื่องจากแนวคิดบล็อกใหม่ออกมาซึ่งอาจเป็นที่สนใจของทุกคน

สุดท้ายนี่คือตัวอย่างของเทมเพลตที่มีบล็อกทุกประเภทที่กล่าวถึงข้างต้น:

การขยายบล็อก

หากเราต้องการพื้นที่เพิ่มเราก็ต้องเพิ่มหน้ามากขึ้นในการออกแบบบล็อกที่ด้านล่าง ไม่จำเป็นต้องเติมทุกอย่างลงไป แต่สิ่งสำคัญคือต้องไม่เว้นช่องว่างเปล่าจากบนลงล่างระหว่างกลางของแต่ละบล็อก ด้วยวิธีนี้เราสามารถขยายหน้า:

ขั้นตอนที่ 3: การสร้างเนื้อหา

ตอนนี้เรามีเลย์เอาต์เนื้อหาตามบล็อกและประเภทของบล็อกก็มีความจำเป็นต้องสร้างเนื้อหาที่จะไปในบล็อกเหล่านั้น ขั้นตอน 3 สามารถใช้แทนกันได้กับขั้นตอน 2 กล่าวอีกนัยหนึ่งเราสามารถสร้างเนื้อหามาก่อนและจากนั้นเค้าโครงรู้จำนวนของเนื้อหาที่เราต้องการรวม เป็นเรื่องที่ไม่ชัดเจนที่จะทำในทางใดทางหนึ่ง แต่เราต้องระวังว่าเนื้อหานั้นต้องอยู่ในเลย์เอาต์ของเราอย่างแม่นยำ

เราจะทำตามตัวอย่างก่อนหน้า ในภาพ 4 เราสามารถเห็นบล็อกดังต่อไปนี้:

• บล็อกหัวเรื่อง 2
• บล็อคข้อความ 4
• 1 Video Block
• 2 Image Blocks
• ปุ่มบล็อค 1
• รวม: 10 Blocks

ดังนั้นเราจะต้องปรับเนื้อหาของเราเพื่อให้พอดีกับบล็อกเหล่านี้อย่างสมบูรณ์แบบโดยไม่ต้องออกและขนาดตัวอักษรจะเหมือนกันทุกประการ สำหรับเรื่องนั้น posible ES คุ้มค่า สร้างเนื้อหาก่อนแล้วจึงปิดกั้น. มันขึ้นอยู่กับบุคคลนั้นมาก

ขั้นตอนที่ 4: ติดตั้งเนื้อหาด้วยบล็อค

สมมติว่าเรามีการออกแบบวาดบนกระดาษแล้วและบล็อกเนื้อหาทั้งหมดที่สร้างขึ้น ตอนนี้ขั้นตอนสุดท้ายคือการรวมเข้าด้วยกัน สำหรับสิ่งนี้เราจะใช้เครื่องมือหลายอย่างในการรวมทุกอย่างและ ส่งไปยังนักออกแบบเว็บไซต์.

บล็อควิดีโอ

วิดีโอสามารถส่งผ่านได้สองวิธี:

1. ในรูปแบบวิดีโอ MP4 ผ่านเครื่องมือเช่น WeTransfer.
2. ตัวเลือกที่ต้องการ: อัปโหลดไปยังช่อง YouTube March และส่งต่อลิงก์ YouTube ไปยังวิดีโอ

ในกรณีที่มีเพียงวิดีโอเดียวในการจัดวางจะไม่มีปัญหา แต่ถ้ามีวิดีโอหลายรายการเราจะต้องเชื่อมโยงพวกเขาในทางใดทางหนึ่งกับเค้าโครงที่เราทำบนกระดาษ

ตัวอย่างเช่น ลองนึกภาพว่ามีสามวิดีโอ ในเลย์เอาต์เราจะวาดหมายเลข 1 ในวิดีโอแรกหมายเลข 2 ในวิดีโอที่สองและหมายเลข 3 ในวิดีโอที่สาม แล้วเมื่อส่งเอกสารทั้งหมดเราจะใส่อะไรแบบนี้:

• วีดีโอ 1: วิดีโอที่เกี่ยวข้องกับวลีของอหิงสากับชื่อ: "วลีที่สำคัญที่สุดของอหิงสา"
• วีดีโอ 2: วิดีโอที่เกี่ยวข้องกับสีของธงชาติที่มีชื่อเรื่อง: «ธงของอหิงสา»
• วีดีโอ 3: วิดีโอที่เกี่ยวข้องกับกลุ่มที่จะเดินขบวนในอาร์เจนตินาในหัวข้อ: “The base team of Argentina”

วิธีนี้จะทำให้ง่ายต่อการทราบว่าวิดีโอใดสอดคล้องกับแต่ละส่วน

บล็อครูปภาพ

ในกรณีนี้รูปภาพทั้งหมดจะต้องอัปโหลดไปยังแพลตฟอร์ม IMGUR: https://imgur.com/upload

แล้วส่งลิงค์ไปยังภาพเหล่านั้น อุดมคติคือการวางรูปภาพให้เหมือนกับวิดีโอที่มีเครื่องหมาย 1, 2, 3 เป็นต้น ตัวอย่างเช่น สมมติว่าเรามีภาพ 4 ภาพในแอฟริกาใต้ทันที ทั้งสี่มีชื่อเหมือนกัน: “sudafrica.jpg” เราใส่ชื่อที่ต่อเนื่องกันจนถึงจุดที่พวกเขาจะอยู่ในเลย์เอาต์และเราทาสีตัวเลขบนกระดาษที่ตรงกัน ตัวอย่าง:

• Sudafrica-1.jpg
• Sudafrica-2.jpg
• Sudafrica-3.jpg
• Sudafrica-4.jpg

ปุ่มชื่อเรื่องและบล็อกข้อความ

สุดท้ายบล็อกเหล่านี้ควรเขียนในเอกสาร Word หรือใน Google เอกสารโดยเฉพาะอย่างยิ่ง

รูปแบบนั้นง่ายมาก: ในเอกสาร Word เราใส่ประเภทของ Block (Title, Button หรือ Text) ตามด้วยหมายเลขที่มันจะสอดคล้องในเลย์เอาต์

Ejemplos:

• ชื่อ 1: ….
• ชื่อ 2: ...
• ข้อความ 1: ...
• ข้อความ 2: ...
• ปุ่ม 1: ...
• ปุ่ม 2: ...

จากนั้นฉันวางเอกสารตัวอย่างพร้อมข้อความแบบสุ่มทั้งหมดเพื่อให้สามารถมองเห็นว่ามันจะมีโครงสร้างอย่างไรต่อไปนี้เป็นตัวอย่างของภาพ 4

นี่คือรูปแบบที่ควรมองเมื่อเราใส่ตัวเลขที่ตรงกับแต่ละส่วน:

ขั้นตอน 4: ส่งทั้งหมด

เมื่อเราทำทุกอย่างเสร็จแล้วคุณจะต้องส่งไปยังบุคคลที่รับผิดชอบโครงร่าง

มันก็จะใช้เวลา

1. ร่างภาพบนกระดาษพร้อมการจัดวาง
2. เนื้อหา
   • ลิงก์วิดีโอไปยัง YouTube หรือ WeTransfer
   • ลิงก์ IMGUR ของภาพ
   • ลิงก์ไปยังเอกสารใน Google เอกสารหรือไฟล์ Word

ทนายความสำคัญรอบชิงชนะเลิศ

ในที่สุดอุดมคติจะรวมรูปภาพที่โดดเด่นซึ่งเป็นรูปภาพที่จะมาพร้อมกับส่วนหัวของชื่อ 1 ของหน้า นั่นคือเหตุผลที่ Title 1 ควรปรากฏที่จุดเริ่มต้นเสมอ

ภาพส่วนหัวจะต้องมีขนาดเป็น 960 x 540 พิกเซล ภาพนี้สามารถส่งได้เหมือนภาพที่เหลือโดย IMGUR

ผลสุดท้าย

และในที่สุดด้วยข้อมูลทั้งหมดนี้หน้าจะถูกตั้งค่า การติดตามและเพื่อให้จบด้วยตัวอย่างนี้หน้าเว็บที่มีผลลัพธ์สุดท้ายตามพารามิเตอร์ทั้งหมดที่เรายกมาก่อนหน้านี้จะเป็นเช่นนี้:

หน้าสุดท้าย