באופן מסורתי, יצירת מצגות דורשת שימוש באפליקציה כמו Powerpoint ויכולה לגרום לבעיות תאימות שונות, אבל עם כלי הקוד הפתוח החינמי deck.js, אתה יכול ליצור סט אלגנטי של שקופיות שיכולים לרוץ בכל דפדפן, מקוון או לא. כל מה שצריך הוא ידע מינימלי ב-HTML בסיסי, ויצרנו ערכת התחלה שתעזור לך להרכיב את החפיסה הראשונה שלך בתוך דקות ספורות.
כמו תמיד, מראה מנצח, אז אם אתה רוצה מושג איך נראית מצגת של deck.js, צפה ב-את ההדגמה המהירה הזו הרכבתי תוך כמה דקות. לא נורא, נכון?
יצירת מצגת עם deck.js היא פשוטה מאוד. למרות שזה עשוי להיראות מרתיע בהתחלה אם אתה לא יודע המון HTML או CSS, עדיין יש הרבה שאתה יכול לעשות. להלן השלבים הבסיסיים:
כתוב מסמך HTML פשוט שיכיל את התוכן והפורמט של השקופיות שלך.
בחר ערכת נושא כדי להתאים את מראה השקופיות שלך.
הוסף הרחבות לסיפון שלך כדי לשפר את הפונקציונליות שלו.
אם אתה רוצה לעשות יותר, אתה יכול לכתוב ערכת נושא בעצמך באמצעות HTML ו-CSS (למד את היסודותכָּאן) ו/או כתוב הרחבות משלך באמצעות JavaScript (למד את היסודותכָּאן). בפוסט זה אנו הולכים להראות לך כיצד ליצור מצגת בסיסית באמצעות השלבים המתוארים לעיל. אתה אמור להיות מסוגל לעקוב אחריך אם אתה יודע רק HTML בסיסי ואין לך ידע ב-CSS. כשתסיים, תהיה לך מצגת שתוכל לפרסם באינטרנט כדי שאחרים יוכלו לצפות בה. לחלופין, אתה יכול לשמור אותו על כונן הבזק ולהפעיל אותו בכל מחשב עם דפדפן אינטרנט מודרני. זה הופך את המצגות שלך לניידות מאוד, כך שאתה יכול לתת אותן מכל מקום ולדעת שיש לך אותן בפורמט שלא דורש שום תוכנה מיוחדת. אם אתה מעוניין, המשך לקרוא.
מה תצטרך
לפני שתוכל להתחיל עם המדריך הזה, תצטרך כמה דברים:
שֶׁלָנוּערכת התחלה של Deck.js, הכולל חפיסת דוגמא קצרה וכן חפיסה ריקה שתוכל להשתמש בה כדי לעקוב אחריה.
עורך טקסט תכנות כדי לכתוב ולערוך את החפיסה שלך. (לא בטוח במה להשתמש? נסה את המועדפים שלנוחלונותומק.)
אופציונלי: אמארח אתריםלארח את הסיפון שלך. לחלופין, אתה יכול פשוט לפתוח את קובץ ה-HTML של החפיסה שלך באופן מקומי בדפדפן שלך.
שלב ראשון: צור שקופיות HTML שלך
יצירת החפיסה שלך היא מה שייקח את רוב הזמן שלך מכיוון שאתה צריך להמציא את תוכן השקופיות ולעצב אותו כמסמך HTML. לפני שנתחיל, בואו נסתכל איך נראית שקופית רגילה:
<section class="slide"> <h2>A List of Things I Like</h2> <ol> <li> <h3>Cupcakes</h3> <p>They're tasty, but don't eat too many or you'll get fat!</p> </li> <li> <h3>Technology</h3> <p>It's tasty, but don't eat too much technology...or any technology...because it's not food.</p> </li> <li> <h3>Slankets</h3> <p>They catch all your cupcake and technology crumbs.</p> </li> </ol></section>
שקופית שמכילה רק תמונה יכולה להיראות פשוטה כמו זו:
<section class="slide"> <h2>I Like Din Tai Fung</h2> <img src="
" width="400" height="414" /></section>
ביסודו של דבר, שקופיות הן פשוט קטעי HTML אשר מוקצים בכיתה "שקופית". כל מה שאתה צריך לעשות הוא לכתוב קוד HTML סטנדרטי (כפי שמוצג בדוגמאות לעיל) כדי ליצור אותם. משם, אתה יכול להכניס כמעט כל מה שאתה רוצה. הטמעת וידאו וציטוטים חסומים עובדים גם כן. אתה יכול אפילו לעטוף טקסט סביב תמונות על ידי הוספת סגנון ה-CSS הרלוונטי, כך:
<img src="
" width="292" height="334" style="float: left; padding: 0 16px 8px 0;" />
אלה כמה שקופיות בסיסיות, ואנחנולהרכיב הדגמהכך שתוכל לראות את כולם בפעולה (כולל שקופית וידאו). תמצא את הדוגמה הזו גם בערכת ההתחלה שהורדת בתחילת מדריך זה. כאשר אתה יוצר את השקופיות שלך, פשוט עקוב אחר דוגמאות ה-HTML שאתה רואה למעלה או במסמך זה. לאחר שיצרת את השקופיות שלך, עבור לשלב הבא כדי ללמוד כיצד להפוך אותן למצגת אינטראקטיבית.
שלב שני: הפוך את השקופיות שלך למצגת פונקציונלית
לאחר שתסיים ליצור את השקופיות שלך תוכל להפוך אותם למצגת ממשית די מהר. ראשית, צור תיקייה חדשה שתכיל הכל. העתק גם את התוכן של קובץ ה-zip deck.js שהורדת (הקבצים, לא התיקיה) וגם את שני קובצי ה-HTML של ערכת ההתחלה. ברגע שיש לך את כל הקבצים בתיקייה, זה אמור להיראות כמו התמונה מימין. כעת פתח את empty_deck.html ומצא את השורה שקוראתהחפיסה מתחילה כאן. מתחתיו שורה שקוראתהדק מסתיים כאן. הדבק את קוד ה-HTML של השקופית בין שתי השורות הללו ושמור את הקובץ. אם אתה פותח את empty_deck.html בדפדפן אינטרנט, כעת תהיה לך מצגת פונקציונלית שתוכל לנווט בה בקלות באמצעות מקשי החצים ימינה ושמאלה.
שלב שלישי: בחר ערכת נושא וסגנון מעבר
למרות שיש לך כעת מצגת פונקציונלית מלאה, ייתכן שתרצה לשנות ערכות נושא ואת סוג המעברים שהמצגת שלך משתמשת בה. כדי לעשות זאת, עליך לחפש את שורות הקוד הבאות בראש המסמך שלך:
<!— Theme CSS files —> <link rel="stylesheet" href="themes/style/swiss.css"> <link rel="stylesheet" href="themes/transition/fade.css">
השורה הראשונה מטביעה את קובץ הנושא והשורה השנייה מטביעה את הקובץ האחראי להנפשות המעבר. כברירת מחדל, אתה תשתמש בערכת הנושא השוויצרית ובמעבר ה-Fade. אם אתה רוצה לשנות את זה, פשוט תסתכל בתיקייה שבה אתה שומר את כל הקבצים שלך ועבור לערכות נושא -> סגנון. תראה את אפשרויות הנושא השונות שם. אם אתה רוצה לשנות את ערכת הנושא לאחד מאותם קבצים, פשוט שנה את swiss.css לשם הקובץ שאתה רוצה. אם תיכנסו לספריית המעבר, תמצאו מספר קבצי CSS למעברים. פשוט החלף את fade.css בקובץ המעבר שבו תרצה להשתמש במקום זאת. זה כל מה שאתה צריך לעשות.
שלב רביעי: הוסף הרחבות לסיפון שלך
הוספת הרחבות היא קלה מאוד, אך השימוש בהן ידרוש מעט קריאה. כדי להוסיף אותם, אתה רק צריך להטביע את קובצי ה-JavaScript וה-CSS שלהם במסמך שלך. קובצי HTML של ערכת ההתחלה כוללים הרחבות שכבר מוטבעות. תמצא את קבצי ה-CSS בראש המסמך. הם ייראו כך:
<!— Core and extension CSS files —> <link rel="stylesheet" href="core/deck.core.css"> <link rel="stylesheet" href="extensions/goto/deck.goto.css"> <link rel="stylesheet" href="extensions/menu/deck.menu.css"> <link rel="stylesheet" href="extensions/navigation/deck.navigation.css"> <link rel="stylesheet" href="extensions/status/deck.status.css"> <link rel="stylesheet" href="extensions/hash/deck.hash.css">
קובצי JavaScript מוטמעים בתחתית המסמך ונראים כך:
<!— Deck Core and extensions —><script src="core/deck.core.js"></script><script src="extensions/hash/deck.hash.js"></script><script src="extensions/menu/deck.menu.js"></script><script src="extensions/goto/deck.goto.js"></script><script src="extensions/status/deck.status.js"></script><script src="extensions/navigation/deck.navigation.js"></script>
אם אתה רוצה להטמיע הרחבה נוספת, אתה פשוט צריך להיכנס לספריית ההרחבות, לספרייה עם שם ההרחבות, ולהטמיע את קבצי ה-CSS וה-JavaScript כפי שמוצג לעיל. לאחר שתטמיע את ההרחבות שלך, עליך להשתמש בהן בפועל בסיפון שלך כדי לקבל פונקציונליות כלשהי.
בואו נסתכל על הרחבה deck.goto כדוגמה. זה מאפשר לך ללחוץ על מקש G ולהקליד מספר כדי לעבור לשקופית המתאימה. זה שימושי אם ברצונך לדלג במצגת. אם אתה רוצה להשתמש בו, אתה לא רק צריך להטמיע את קובצי ה-JavaScript וה-CSS (כפי שהוזכר לעיל) אלא גם להוסיף את הקוד הזה אחרי כל השקופיות בחפיסת ה-HTML שלך:
<!— deck.goto snippet —><form action="." method="get" class="goto-form"> <label for="goto-slide">Go to slide:</label> <input type="text" name="slidenum" id="goto-slide" list="goto-datalist"> <datalist id="goto-datalist"></datalist> <input type="submit" value="Go"></form>
ניתן להפעיל את רוב ההרחבות עם קטע קוד קטן כמו זה. כדי ללמוד כיצד להשתמש בתוספים האחרים,קרא על איך כולם עובדים בתיעוד ההרחבה של Deck.js. אם אתה מתמצא ב-JavaScript, אתה יכול אפילו ליצור הרחבה משלך כדי להוסיף עוד יותר פונקציונליות.
זה כל מה שיש בזה. בעוד ש-deck.js יכול להיראות קצת מאיים בהתחלה, ברגע שתתרגל למבנה אתה תרכיב מצגות תוך זמן קצר. כל מה שאתה צריך זה כישורי HTML פשוטים כדי לבנות את המבנה, ואם אתה משתמש בקובץ empty_deck.html בערכת ההתחלה שלנו, לא תצטרך ללמוד איך לכתוב את כל קובץ ה-HTML כדי ליצור את החפיסה הראשונה שלך. לאחר שתבין את הדברים, תוכל להתחיל להתעסק ולהתאים אישית את המצגות שלך כך שתוכל ליצור חפיסת שקופיות מרשימה וייחודית שניתן לצפות בהן כמעט בכל דפדפן אינטרנט.
