วิธีสร้างงานนำเสนอ HTML ด้วยเว็บสไลด์

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

แต่ไม่มีความลับสำหรับทุกคนที่การสร้างงานนำเสนอ HTML ที่สวยงามอาจใช้เวลานานและต้องใช้ความรู้ขั้นสูงเกี่ยวกับ HTML, CSS และ JavaScript ในบางกรณี จากปัญหาเหล่านี้เครื่องมือที่ยอดเยี่ยมเรียกว่า webslides

webslides คืออะไร?

เรียกมันว่า "เฟรมเวิร์ก" แบบโอเพนซอร์สที่สร้างขึ้นโดย Jose Luis Antunezที่ช่วยให้เรา สร้างงานนำเสนอ HTML อย่างรวดเร็วและง่ายดาย เครื่องมือนี้มีความจำเป็นสำหรับคุณในการสร้างงานนำเสนอของคุณเองเช่นเดียวกันคุณสามารถใช้หนึ่งในการนำเสนอตัวอย่างและปรับแต่งตามความต้องการของคุณได้ในเวลาไม่กี่นาที

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

จะดาวน์โหลด webslides ได้อย่างไร?

ในการดาวน์โหลด webslides เพียงทำตามคำสั่งต่อไปนี้จากไดเร็กทอรีโปรดของคุณ:

wget https://github.com/jlantunez/webslides/archive/master.zip

คุณยังสามารถโคลนที่เก็บอย่างเป็นทางการด้วยไฟล์

git clone https://github.com/jlantunez/webslides.git

ภายในโฟลเดอร์โปรเจ็กต์คุณจะได้รับ js, css และ demos ที่จำเป็นเพื่อเริ่มสร้างงานนำเสนอ HTML ของคุณเองได้อย่างง่ายดาย

วิธีใช้ webslides?

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

เราจะได้อะไรเมื่อดาวน์โหลดเว็บสไลด์

เมื่อดาวน์โหลดเว็บสไลด์เราจะเข้าถึงโฟลเดอร์ต่างๆซึ่งรวมถึงการสาธิตและรูปภาพ (อุปกรณ์และโลโก้)

• โฟลเดอร์ css จะเก็บรูปแบบของการนำเสนอของเรา
• จาวาสคริปต์ที่จำเป็นจะถูกเก็บไว้ในโฟลเดอร์ js รวมถึงเว็บสไลด์พื้นฐาน js ซึ่งเป็นที่ที่เวทมนตร์ส่วนใหญ่เสร็จสิ้น
• รูปภาพและไฟล์ html ของการสาธิตจะถูกบันทึกไว้ในโฟลเดอร์รูปภาพและโฟลเดอร์สาธิตตามลำดับ

webslides/
├── index.html
├── css/
│   ├── base.css
│   └── colors.css
│   └── svg-icons.css (optional)
├── js/
│   ├── webslides.js
│   └── svg-icons.js (optional)
└── demos/
└── images/

การสร้างงานนำเสนอ HTML ด้วยเว็บสไลด์

มีข้อดีพื้นฐาน 2 ประการเมื่อใช้เว็บสไลด์ซึ่งเรากล่าวถึงด้านล่าง:

• รหัสมีความสะอาดและปรับขนาดได้ นอกจากนี้ยังมีมาร์กอัปที่ใช้งานง่ายด้วยการใช้ระบบการตั้งชื่อที่เป็นที่นิยมมากที่สุด ไม่จำเป็นต้องใช้คลาสหรือทำรังมากเกินไป
• แต่ละ <section> ใน #webslides จะแสดงถึงสไลด์ ดังนั้นการแบ่งหน้าจึงง่ายมาก

สไลด์ 1  สไลด์ 1

ในทำนองเดียวกันเราสามารถสร้างสไลด์แนวตั้งเพิ่มสไตล์แนวตั้ง

คลาสที่ประกอบเป็น CSS ของเว็บไซด์

• ตัวพิมพ์: .text-landing, .text-data, .text-intro ...
• สีพื้นหลัง: .bg-primary, .bg-apple, .bg-blue ...
• ภาพพื้นหลัง: .background, .background-center-bottom ...
• การ์ด: .card-50, .card-40 ...
• บล็อกที่ยืดหยุ่น: .flexblock.clients, .flexblock.metrics ...

ขยายไปยัง webslides

webslides ช่วยให้เราสามารถเพิ่มรูปแบบและฟังก์ชันใหม่ ๆ ได้เช่นเราสามารถเพิ่มทรัพยากรต่อไปนี้:

• Unsplash
• animate.css
• อนุภาค js
• pt

การสาธิตการนำเสนอ HTML ที่สร้างด้วยเว็บสไลด์

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

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