Cara membuat slaid persembahan dengan HTML dan CSS

Bosan belajar perisian persembahan baru? Leverage kemahiran pembangunan web anda yang sedia ada! Tutorial ini menunjukkan kepada anda bagaimana untuk membina persembahan yang menakjubkan dan interaktif menggunakan hanya HTML, CSS, dan JavaScript - teknologi web teras yang sudah anda ketahui. Kami akan struktur slaid dengan HTML5 moden, gaya mereka dengan CSS, dan menambah kesan dinamik menggunakan JavaScript.

Panduan mesra pemula ini sesuai untuk membina kemahiran HTML5, CSS, dan JavaScript anda melalui projek praktikal. Anda juga dapat membuat dek slaid HTML5 yang dinamik atau alternatif PPT berkuasa JavaScript!

inilah pratonton persembahan akhir:

bersedia untuk memulakan? Mari kita menyelam masuk.

1. Persediaan Projek Pertama, buat direktori projek mudah dengan fail -fail ini:

• index.html
• css/style.css
Fail -fail ini pada mulanya akan kosong.
• js/scripts.js
2. Struktur HTML Asas ()

Tambah kod berikut ke fail

anda. Ini termasuk Ikon Awesome Font (untuk Styling), Fail Stylesheet, dan JavaScript anda. dengan kelas index.html akan mengadakan persembahan kami.

Kandungan slaid sebenar akan ditambah dalam div index.html menggunakan JavaScript kemudian. Kelas <div> (ditakrifkan dalam CSS) akan mengawal slaid yang dapat dilihat. <code>container

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML Presentation</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer">
<div class="container">
    <div id="presentation-area"></div>
</div>

3. Styling dengan CSS (

) presentation-area .show

CSS akan mengendalikan persembahan visual dan peralihan slaid. Kami akan menggunakan kelas

untuk menguruskan orientasi skrin (0 untuk skrin penuh, 1 untuk skrin yang lebih kecil). (diasaskan ke 0) akan menjejaki bilangan slaid. (Nota: CSS penuh dan kod JavaScript terlalu luas untuk dimasukkan ke sini, tetapi coretan di bawah menggambarkan fungsi utama. Rujuk kepada asal untuk kod lengkap.) style.css

4. Fungsi JavaScript (

) screenStatus totalSlides

JavaScript akan mengendalikan navigasi slaid dan mod skrin penuh. Fungsi utama termasuk:

• moveToLeftSlide() dan moveToRightSlide(): Fungsi ini menguruskan peralihan slaid dengan mengeluarkan dan menambah kelas .show ke slaid yang sesuai.
• fullScreenMode() dan smallScreenMode(): Mod skrin penuh togol ini.
• hideLeftButton() dan hideRightButton(): ini menyembunyikan butang navigasi ketika pada slaid pertama atau terakhir.
• : mengemas kini nombor slaid semasa. getCurrentSlideNo()
• : Memaparkan nombor slaid semasa. setSlideNo()
• : Mengasaskan pembolehubah dan menetapkan pendengar acara. Fungsi ini dipanggil selepas setiap peralihan slaid. init()

Pendekatan ini menggunakan JavaScript untuk menguruskan penglihatan slaid secara dinamik, menyediakan cara yang bersih dan cekap untuk membuat persembahan interaktif. Ingatlah untuk memasukkan kod CSS dan JavaScript lengkap dari asal untuk persembahan yang berfungsi sepenuhnya.

Tutorial ini menyediakan asas untuk membina persembahan HTML yang lebih kompleks dan menarik. Terokai lebih lanjut dengan menambah animasi, peralihan, dan ciri JavaScript yang lebih maju untuk meningkatkan dek slaid anda.