โฮมเพจ » ออกแบบเว็บไซต์ » สร้างเว็บไซต์อย่างรวดเร็วด้วย Foundation 5 [คำแนะนำ]

    สร้างเว็บไซต์อย่างรวดเร็วด้วย Foundation 5 [คำแนะนำ]

    การใช้เฟรมเวิร์กส่วนหน้าสามารถปรับปรุงเวิร์กโฟลว์การออกแบบเว็บไซต์ของคุณได้หลายวิธี มันสามารถ ช่วยให้คุณปฏิบัติตามหลักการออกแบบที่ทันสมัย เช่นวิธีการใช้อุปกรณ์พกพาครั้งแรกมาร์กอัปความหมายและการออกแบบที่ตอบสนองได้ คุณสามารถ ใช้ประโยชน์จากองค์ประกอบ CSS และ JavaScript ที่พร้อมใช้งานมากมาย และอย่างมีนัยสำคัญ เร่งกระบวนการพัฒนาของคุณ, ปล่อยเวลามากขึ้นเพื่อมุ่งเน้นไปที่การออกแบบด้วยภาพและประสบการณ์ผู้ใช้.

    Zurb Foundation 5 เป็นหนึ่งในเฟรมเวิร์กส่วนหน้าที่ทรงพลังที่สุดในตลาด มันสร้างขึ้นด้วยเหตุผลใช้งานง่ายและสมบูรณ์ฟรี มันช่วยให้คุณใช้ประโยชน์จาก ตาราง CSS ที่ยืดหยุ่น ที่ อำนวยความสะดวกในการสร้างเค้าโครงที่สะอาดและใช้งานง่าย. เฟรมเวิร์กของมูลนิธิได้รับการทดสอบอย่างหนักดังนั้นจึงดูแลความเข้ากันได้ข้ามเบราว์เซอร์และข้ามอุปกรณ์.

    ในบทช่วยสอนนี้ฉันจะแสดงให้คุณ คุณจะสร้างเว็บไซต์ได้อย่างรวดเร็วด้วย Zurb Foundation 5 ได้อย่างไร. คุณสามารถดูผลสุดท้ายในหน้าตัวอย่าง.

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

    เนื่องจากความยาวของคู่มือนี้นี่เป็นทางลัดเพื่อไปยังส่วนที่คุณต้องการได้อย่างรวดเร็ว:

    • กำลังดาวน์โหลด Foundation 5
    • ทำความเข้าใจกับกริด
      • เมื่อใดควรใช้คลาสขนาดใหญ่ -N, Medium-N และ Small-N
    • การเพิ่มแถบเมนูด้านบน
    • การเติมส่วนหลัก
      • การเพิ่มแผงสำหรับโพสต์ยอดนิยม
      • เพิ่ม 3 กระทู้เพิ่มเติมไปที่แผงยอดนิยม
      • พริตตี้ CSS
      • การเพิ่มเนื้อหาเพิ่มเติมบางส่วน
      • เพิ่มการแบ่งหน้า
    • การเติมแถบข้าง
      • แบบฟอร์มจดหมายข่าว
      • Flex วิดีโอ
      • เมนูด้านข้าง
    • ข้อสรุป

    1. กำลังดาวน์โหลด Foundation 5

    คุณสามารถดาวน์โหลด Foundation 5 ใน 4 รูปแบบที่แตกต่างกัน:

    1. รหัสที่สมบูรณ์
    2. รุ่นที่เบากว่าด้วยรหัสที่จำเป็นเท่านั้น
    3. รุ่นที่กำหนดเองซึ่งคุณสามารถปรับแต่งสิ่งที่คุณต้องการและสิ่งที่ไม่
    4. เวอร์ชัน Sass หากคุณต้องการตั้งค่าตัวแปรและมิกซ์อินใน SCSS.

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

    หลังจากคุณดาวน์โหลดและคลายไฟล์ zip แล้วให้เปิดไฟล์ index.html ในเบราว์เซอร์ของคุณแล้วคุณจะเห็นดังนี้:

    ใช่ devs รวมลิงค์ที่มีประโยชน์ในไฟล์ดัชนี คุณสามารถปล่อยให้เป็นเช่นนี้และสร้างไฟล์ใหม่สำหรับต้นแบบของคุณด้วยชื่อ home.html หรือสิ่งที่คล้ายกัน แต่คุณไม่จำเป็นต้องเก็บไว้เพราะคุณสามารถเข้าถึงเอกสารพื้นฐานได้ทุกเมื่อที่คุณต้องการ.

    เปิดไฟล์ index.html ในโปรแกรมแก้ไขรหัสที่คุณโปรดปรานและ ลบทุกอย่างภายใน แต่ก่อนปิด

    กฎสไตล์ที่เราเพิ่มเข้าไป app.css ไฟล์เพื่อสวยต้นแบบของเราคือ:

     header margin-bottom: 2em;  .p4 เพิ่มเติมยอดนิยม ขนาดตัวอักษร: 1.125em; margin-top: 0.4em;  .row .row.popular-main margin-bottom: 1.5em;  

    ในฐานะที่เป็นมูลนิธิ 5 ใช้หน่วยที่เกี่ยวข้อง, เราจำเป็นต้องใช้ “em”-s หรือ “REM”-s แทนพิกเซล เพื่อให้ทันกับกฎ (คุณสามารถอ่านเกี่ยวกับหน่วย CSS: Pixels vs ems vs% ได้ที่นี่) ฉันใช้ส่วนขยาย Firebug ของ Firefox เพื่อพิจารณาว่าฉันจะต้องแทนที่กฎ CSS ของ Foundation 5 ได้อย่างไรคุณสามารถใช้ส่วนขยายของเบราว์เซอร์พัฒนาเว็บอื่น ๆ ได้ถ้าต้องการ.

    ที่นี่ในตัวอย่าง CSS สั้น ๆ นี้เราต้องแทนที่ CSS เริ่มต้นของมูลนิธิเพียงครั้งเดียวที่กฎสุดท้าย (.row .row.p นิยม-main) นี่คือหน้าตาของตัวอย่างตอนนี้:

    4.4 การเพิ่มเนื้อหาเพิ่มเติม

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

    Foundation 5 มีรูปแบบภาพขนาดย่อที่เตรียมไว้ล่วงหน้าอย่างยอดเยี่ยมซึ่งเราจะใช้ในขั้นตอนนี้ รูปขนาดย่อของมูลนิธิใช้ คลาส CSS ที่สร้างไว้ล่วงหน้าที่เรียกว่า “TH” ที่เราต้องเพิ่มให้กับภาพที่เราต้องการแสดงเป็นภาพขนาดเล็กในแบบที่คุณสามารถดูได้ในตัวอย่างโค้ดด้านล่าง.

    สำหรับแต่ละโพสต์ล่าสุดเราเพิ่มแถวใหม่ด้านล่างแผงยอดนิยมของเรา คลาส CSS ที่กำหนดเองที่เรียกว่า “โพสต์ล่าสุด”.

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

    ตอนนี้ฉันใช้ “คอลัมน์ขนาดกลาง 3” และ “ขนาดกลาง -9 คอลัมน์” ชั้นเรียนที่จะทำให้พวกเขาแบ่งหน้าจอเป็น 1: 3, 25% สำหรับภาพและ 75% สำหรับข้อความขึ้นจากขนาดกลาง.

    ใส่ข้อมูลโค้ดต่อไปนี้ใต้แผงยอดนิยมสามครั้ง (สำหรับสามกระทู้ล่าสุด) ที่นี่ฉันเพิ่งรวมรหัสของหนึ่งแถวการโพสต์ล่าสุดเนื่องจากพวกเขาทั้งหมดใช้มาร์กอัป HTML เดียวกันเนื้อหาแตกต่างกันเท่านั้น.

     

    ชื่อโพสต์ล่าสุด

    เนื้อหาของโพสต์ล่าสุด ...

    ไฟล์ CSS ที่กำหนดเองของเราสร้างขึ้นในขั้นตอนที่ 4.3, app.css ยังได้รับกฎสไตล์ใหม่บางอย่างเพื่อให้หน้าตาของการสาธิตเป็นระเบียบเรียบร้อย. บันทึก: หากคุณต้องการเพิ่ม CSS ที่กำหนดเองของคุณเองลงใน Foundation อย่าลืมตรวจสอบด้วยเครื่องมือพัฒนาเว็บซึ่งคุณจะต้องแทนที่กฎเริ่มต้น.

    ในตัวอย่าง CSS ด้านล่างเราจำเป็นต้องแทนที่มันในกฎข้อแรก (.row .row.latest-post) ในกฎข้อที่สองก็เพียงพอที่จะใช้ตัวเลือกที่กำหนดเองของเราเอง (.latest-post h4).

     .แถว. row.latest-post margin-bottom: 1.5em;  .latest-post h4 margin-top: 0; ขนาดตัวอักษร: 1.125em; 

    ต้นแบบของเราตอนนี้มีลักษณะเช่นนี้:

    4.5 การเพิ่มการแบ่งหน้า

    ในขั้นตอนนี้เราจะเพิ่มเลขหน้าเจ๋ง ๆ ใต้โพสต์ล่าสุด มูลนิธิ 5 ช่วยให้เราได้รับความช่วยเหลือจากคลาสการให้เลขหน้าที่สะดวกและพร้อมใช้งาน เราใช้รหัสเดียวกันในขั้นตอนนี้ที่คุณสามารถหาได้ใน “สูง” ส่วนภายในเอกสารการแบ่งหน้า.

      

    นี่คือกระทู้ล่าสุดที่มีส่วนการแบ่งหน้าใหม่ล่าสุด:

    5. การเติมแถบข้าง

    ตอนนี้เราพร้อมแล้วกับเนื้อหาหลักของเว็บไซต์ตัวอย่างของเราถึงเวลาที่จะเติมแถบด้านข้างขวา แถบด้านข้างขวาจะลื่นด้านล่างเนื้อหาหลักในขนาดมือถือและแท็บเล็ต.

    คุณต้องแทรกข้อมูลโค้ดทั้งหมดในส่วนนี้ภายใน