Topik Mengajar
Halaman web
Nilai yang berlaku
Sophomore
Mengajar waktu kelas
1 pelajaran
Analisis Buku Teks
Fokus: Cara Membuat Halaman Web Statis dan Halaman Web Dinamis dan Proses Kerja mereka
Kesulitan: Proses Kerja Halaman Web Dinamis
Tujuan pembelajaran
Memahami konsep dasar halaman web, halaman rumah, situs web dan hubungannya, pahami konsep halaman web statis dan halaman web yang dinamis, pahami teknologi halaman web statis dan halaman web yang dinamis, dan jelaskan proses kerja
Sumber Daya dan Lingkungan Diperlukan
Sumber Daya Digital
1. Mesin Pencarian (www.google.com, www.baidu.com)
2. Beberapa halaman web demonstrasi (halaman web statis dan halaman web dinamis)
Sumber Daya Umum
1. Bab 5, Bagian 1 dari buku teks "Aplikasi Teknologi Jaringan"; CD pendukung
2. Bahan Pengajar Buku Pendukung Guru
3. Daftar Tugas Pembelajaran "Halaman Web"
Mengajar lingkungan dukungan
Kelas Jaringan Komputer, Perangkat Lunak Kelas Jaringan Multimedia atau Proyektor LCD
Desain Mengajar
pertanyaan
Tujuan
Poin Kunci/Kesulitan/Poin Kunci
Desain Masalah Panduan Pengajaran
Apa itu situs web? Apa itu halaman web? Apa itu beranda?
Pahami arti situs web, halaman web, dan halaman rumah
Terdiri dari situs web itu?
Pahami berbagai komponen situs web
Logo Situs Web, Area Header, Area Rekomendasi Panas
Apa halaman web yang biasanya kita lihat di internet?
Biarkan siswa memahami kode komposisi halaman web statis - HTML
Pahami struktur dan tag dasar bahasa HTML
Bagaimana halaman web statis muncul di browser?
Kuasai proses kerja halaman web statis di browser
Browser menafsirkan kode HTML
Terbuat dari apa halaman web interaktif?
Biarkan siswa memahami komposisi halaman web statis
Memahami bahasa skrip
Bagaimana halaman web dinamis muncul di browser di bawah interaksi pengguna?
Kuasai proses kerja halaman web dinamis di browser
Proses eksekusi halaman web dinamis
Proses pengajaran
1. PENDAHULUAN PELAJARAN BARU:
Semua siswa yang telah terpapar ke internet seharusnya mengunjungi situs web dan melihat halaman web. Halaman web yang Anda lihat umumnya memiliki beberapa format tetap, seperti judul, logo situs web, dll. Dalam hal klasifikasi halaman web, mereka umumnya dapat dibagi menjadi dua kategori. Satu kategori tidak berubah dengan operasi pengguna, yang disebut halaman web statis, dan kategori lainnya berubah dengan operasi pengguna. Jenis halaman web ini disebut halaman web dinamis.
Hari ini saya akan membahas masalah tentang halaman web.
2. Konten Mengajar:
Cari beberapa situs web khas melalui mesin pencari untuk menampilkannya kepada siswa.
1. Konsep situs web, halaman web, beranda dan hubungan antara ketiganya
Internet internasional yang dikunjungi orang hari ini terdiri dari situs web, dan situs web ini terdiri dari halaman web tertentu. Halaman beranda setara dengan halaman awal situs web dan memainkan peran yang membimbing dan menghubungkan. Secara umum, pengguna dapat mengakses sebagian besar halaman web situs web melalui halaman beranda.
Pertanyaan: Apa itu situs web? Apa itu halaman web? Apa itu beranda?
Kegiatan: Guru menjelaskan arti dari situs web, halaman web, dan beranda dan hubungan antara ketiganya.
2. Struktur halaman web
Struktur halaman situs web umum umumnya terdiri dari judul halaman, logo situs web (logo), area header, bilah navigasi, area login, area pencarian, area hotspot rekomendasi, area konten utama, area footer, dll.
3. Konsep halaman web statis
Halaman web statis adalah halaman web yang disimpan dalam bentuk file di server dan dikirim ke pelanggan dalam format yang sama.
Halaman web statis adalah file yang ditulis dalam bahasa markup hypertext.
Pertanyaan: Apa halaman web yang biasanya kita lihat di internet?
Kegiatan: Guru menjelaskan komposisi halaman web statis dan karakteristik bahasa markup hypertext (HTML).
Jelajahi: Siswa beroperasi, lihat file sumber halaman web saat menjelajahi halaman web.
4. Prinsip tampilan halaman web statis di browser
Halaman web statis dikirim ke klien dalam format yang sama dari server, tetapi setelah file ini tiba di browser, browser perlu menemukan kode HTML dalam file, dan kemudian menampilkan kode HTML spesifik dalam bentuk tertentu untuk membentuk halaman web yang dilihat oleh pengguna.
Pertanyaan: Bagaimana halaman web statis muncul di browser?
Kegiatan: Guru menjelaskan proses interpretasi browser dan efek bahasa markup hypertext.
5. Konsep halaman web dinamis
Halaman web dinamis merujuk ke halaman web yang secara otomatis dibuat oleh sistem komputer selama penjelajahan pengguna. Mereka biasanya digunakan untuk menampilkan informasi waktu nyata atau menampilkan konten tertentu sesuai dengan interaksi pengguna.
Fitur Halaman Web Dinamis: Pembaruan Interaktif, Otomatis, Ubah Dari Tempat ke Waktu ke Person
Bentuk umum halaman web dinamis: penghitung, ruang obrolan, area diskusi, BBS, catatan alumni, dll.
Dua situasi umum untuk membentuk halaman web dinamis: halaman web dinamis terdiri dari metode klien murni dan halaman web dinamis yang terdiri dari mode server klien
Pertanyaan: Terbuat dari apa halaman web interaktif?
Kegiatan: Guru menjelaskan dua situasi umum pembentukan halaman web dinamis, masing -masing komposisi dan karakteristik halaman web dinamis yang terdiri dari metode klien murni dan mode browser/server.
Komunikasi: Cara menggunakan palet sistem untuk menyesuaikan warna secara akurat
6. Prinsip tampilan halaman web dinamis
Halaman web dinamis yang terdiri dari metode klien murni: Metode ini tidak memerlukan interaksi dengan server, dan biasanya langsung tertanam di halaman web dalam applet dan bahasa skrip. Dinamikanya tercermin karena pengguna menggunakan berbagai konten tampilan halaman web atau formulir yang didukung oleh teknologi seperti JavaScript, JavaApplet, dll.
Refleksi setelah kelas
Perancang Rencana Pelajaran
Unit/alamat/kode pos
Nomor kontak
Siswa menelusuri halaman web dan melihat situs web dengan tata letak halaman yang jelas, masuk akal dan khas, dan menyelesaikan operasi berikut.
Nama Situs Web:
URL beranda:
Judul halaman:
1. Bahasa apa halaman web statis ditulis? _________________________________________________________________
2. Apa karakteristik halaman web dinamis? ______________________________________________
3. Apa saja teknologi web dinamis yang umum? _____________________________________________________________________
Persyaratan Eksperimental:
(1) Pelajari tentang beberapa cara sederhana untuk mencapai efek dinamis dari halaman web klien melalui contoh singkat berikut dari halaman web dinamis.
(2) Dengan memodifikasi properti objek tertentu dalam program, master metode modifikasi sederhana untuk efek dinamis dari halaman web.
(3) menguasai cara sederhana untuk membuat halaman web dinamis dengan memasukkan kode efek khusus halaman web ke dalam kode halaman web.
Contoh langkah eksperimental:
1. Masukkan kode sumber halaman web dinamis sebagai berikut, dan amati dan alami efek dinamis dari halaman web yang dihasilkan oleh segmen kode pada browser.
<Html>
<head>
<meta http-equiv = konten-tipe konten = teks/html; Charset = GB2312>
<title> Efek dinamis dari teks </iteme>
</head>
<body>
<marquee onmouseover = this.stop () onmouseout = this.start () scrolllamount = 1 scrolldelay = 50 arah = tinggi tinggi = 116 lebar = 188 perbatasan = 1 bgcolor = zaitun> mouse akan berhenti ketika dipindahkan ke atas, dan terus bergerak ketika dipindahkan. Anda sebaiknya mencobanya </sarquee>
</body>
</html>
2. Jelaskan efek dinamis yang dapat dicapai dengan kode di atas:
3. Aplikasi Praktis: Menurut persyaratan dalam tabel, menganalisis dan memodifikasi nilai atribut yang berbeda dalam kode, dan mengamati efek yang dipersonalisasi melalui browser, membandingkan perubahan sebelum dan sesudah modifikasi, dan mengisi formulir secara penuh berdasarkan hasil pengamatan Anda sendiri.
Kode di halaman web dinamis
Apa Kode Mainkan
1
onmouseover = this.stop () onmouseout = this.start ()
2
Menunjukkan kecepatan gerakan teks
3
arah = atas (dapat diubah ke: arah = arah kanan = kiri)
4
tinggi = 116 lebar = 188
5
Mewakili warna latar belakang teks yang bergerak (dapat diubah ke warna berikut: merah, kuning, biru, perak, dll.)
4. Evaluasi Eksperimental:
Indikator evaluasi
Evaluasi diri
Kualitas aktivitas
Analisis fungsi kode di halaman web klien sangat jelas
6
Analisis fungsi kode di halaman web klien lebih jelas
5
Analisis Peran Kode di Halaman Web Klien, dan Pemahaman Umum
3
Analisis fungsi kode di halaman web klien perlu ditingkatkan
2
____________________________________________________
____________________________________________________
____________________________________________________
____________________________________________________
____________________________________________________
____________________________________________________
______________________________________________________________________________________________
______________________________________________________________________________________________