Thèmes d'enseignement
page web
Note applicable
Étudiant en deuxième année
Temps de classe d'enseignement
1 leçon
Analyse des manuels
Focus: Comment composer des pages Web statiques et des pages Web dynamiques et leur processus de travail
Difficulté: processus de travail des pages Web dynamiques
Objectifs d'apprentissage
Comprendre les concepts de base des pages Web, des pages d'accueil, des sites Web et de leurs relations, comprenez les concepts des pages Web statiques et des pages Web dynamiques, comprenez la technologie des pages Web statiques et des pages Web dynamiques et expliquez le processus de travail
Ressources et environnement requis
Ressources numériques
1. Engine de recherche (www.google.com, www.baidu.com)
2. Plusieurs pages Web de démonstration (pages Web statiques et pages Web dynamiques)
Ressources générales
1. Chapitre 5, section 1 du manuel "Application de la technologie du réseau"; CD de soutien
2. Le matériel pédagogique soutenant les livres des enseignants
3. Liste des tâches d'apprentissage "page Web"
Environnement de soutien à l'enseignement
Classe de réseau informatique, logiciel de classe de réseau multimédia ou projecteur LCD
Conception pédagogique
question
But
Points clés / difficultés / points clés
Conception d'un problème d'orientation pédagogique
Qu'est-ce qu'un site Web? Qu'est-ce qu'une page Web? Qu'est-ce qu'une page d'accueil?
Comprendre la signification des sites Web, des pages Web et des pages d'accueil
De quoi est le site Web composé?
Comprendre les différentes composantes du site Web
Logo du site Web, zone d'en-tête, zone de recommandation chaude
Quelles sont les pages Web que nous voyons habituellement sur Internet?
Laissez les étudiants comprendre le code de composition des pages Web statiques - HTML
Comprendre la structure et les étiquettes de base de la langue HTML
Comment les pages Web statiques apparaissent-elles dans le navigateur?
Maîtriser le processus de travail des pages Web statiques dans le navigateur
Le navigateur interprète le code HTML
De quoi sont les pages Web interactives?
Laissez les étudiants comprendre la composition des pages Web statiques
Comprendre la langue des scripts
Comment les pages Web dynamiques apparaissent-elles dans le navigateur sous l'interaction utilisateur?
Maîtriser le processus de travail des pages Web dynamiques dans le navigateur
Processus d'exécution des pages Web dynamiques
Processus d'enseignement
1. Nouvelle leçon Introduction:
Tous les étudiants qui ont été exposés à Internet auraient dû visiter le site Web et voir la page Web. Les pages Web que vous voyez ont généralement des formats fixes, tels que des titres, des logos de sites Web, etc. En termes de classification des pages Web, elles peuvent généralement être divisées en deux catégories. Une catégorie ne change pas avec les opérations de l'utilisateur, qui est appelée pages Web statiques, et l'autre catégorie change avec les opérations de l'utilisateur. Ce type de page Web est appelé pages Web dynamiques.
Aujourd'hui, je vais discuter du problème des pages Web.
2. Enseignement du contenu:
Recherchez certains sites Web typiques via des moteurs de recherche pour les afficher aux étudiants.
1. Le concept de site Web, de page Web, de page d'accueil et de la relation entre les trois
L'Internet international que les gens visitent aujourd'hui est composé de sites Web, et le site Web est composé de pages Web spécifiques. La page d'accueil équivaut à la page de départ du site Web et joue un rôle de guidage et de connexion. De manière générale, les utilisateurs peuvent accéder à la plupart des pages Web du site Web via la page d'accueil.
Question: Qu'est-ce qu'un site Web? Qu'est-ce qu'une page Web? Qu'est-ce qu'une page d'accueil?
Activité: L'enseignant explique la signification du site Web, de la page Web et de la page d'accueil et la relation entre les trois.
2. Structure de la page Web
La structure de la page des sites Web communes est généralement composée du titre de la page, du logo du site Web (logo), de la zone d'en-tête, de la barre de navigation, de la zone de connexion, de la zone de recherche, de la zone de hotspot de recommandation, de la zone de contenu principale, de la zone de pied de page, etc.
3. Concept de pages Web statiques
Une page Web statique est une page Web stockée sous la forme d'un fichier sur le serveur et envoyée au client dans le même format.
Les pages Web statiques sont des fichiers écrits en langage de balisage hypertexte.
Question: Quelles sont les pages Web que nous voyons habituellement sur Internet?
Activité: L'enseignant explique la composition des pages Web statiques et les caractéristiques du langage de balisage hypertexte (HTML).
Explorez: les étudiants fonctionnent, affichez les fichiers source de la page Web lors de la navigation sur une page Web.
4. Le principe de la page Web statique s'affiche dans le navigateur
Une page Web statique est envoyée au client dans le même format à partir du serveur, mais après l'arrivée de ce fichier dans le navigateur, le navigateur doit trouver le code HTML dans le fichier, puis afficher le code HTML spécifique sous une forme spécifique pour former la page Web vue par l'utilisateur.
Question: Comment les pages Web statiques apparaissent-elles dans le navigateur?
Activité: L'enseignant explique le processus d'interprétation du navigateur et l'effet du langage de balisage hypertexte.
5. Le concept de pages Web dynamiques
Les pages Web dynamiques se réfèrent aux pages Web qui sont automatiquement créées par les systèmes informatiques lors de la navigation d'utilisateurs. Ils sont généralement utilisés pour afficher des informations en temps réel ou afficher un contenu spécifique en fonction de l'interaction utilisateur.
Caractéristiques des pages Web dynamiques: interactive, mise à jour automatique, passer d'un endroit à l'autre
Formes courantes de pages Web dynamiques: compteurs, salles de discussion, zones de discussion, BBS, enregistrements des anciens, etc.
Deux situations communes pour former des pages Web dynamiques: pages Web dynamiques composées de méthodes clients pures et de pages Web dynamiques composées de mode serveur client
Question: De quoi sont les pages Web interactives?
Activité: l'enseignant explique les deux situations courantes de la formation de pages Web dynamiques, la composition respective et les caractéristiques des pages Web dynamiques composées de méthodes clients pures et de modes de navigateur / serveur.
Communication: comment utiliser la palette du système pour ajuster avec précision les couleurs
6. Le principe de l'affichage dynamique de la page Web
Pages Web dynamiques composées de méthodes clients pures: cette méthode ne nécessite pas d'interaction avec le serveur et est généralement directement intégrée dans la page Web dans les applets Java et les langages de script. Sa dynamique se reflète dans la mesure où les utilisateurs utilisent divers contenus ou formulaires d'affichage de page Web d'exploitation pris en charge par des technologies telles que JavaScript, Javaapplet, etc.
Réflexion après classe
Concepteur de plan de cours
Unité / adresse / code postal
Numéro de contact
Les étudiants parcourent la page Web et consultent un site Web avec une disposition de page claire, raisonnable et distinctive, et effectuez les opérations suivantes.
Nom du site Web:
URL de page d'accueil:
Titre de la page:
1. Quelle langue est écrite dans la page Web statique? _____________________________________________________________________
2. Quelles sont les caractéristiques des pages Web dynamiques? ______________________________________________
3. Quelles sont les technologies Web dynamiques communes? _________________________________________________________________________
Exigences expérimentales:
(1) Renseignez-vous sur quelques moyens simples pour réaliser des effets dynamiques des pages Web clients à travers les petits exemples suivants de pages Web dynamiques.
(2) En modifiant certaines propriétés d'objets dans le programme, maîtriser les méthodes de modification simples aux effets dynamiques des pages Web.
(3) Maîtrez un moyen simple de créer des pages Web dynamiques en insérant des codes d'effet spéciaux de page Web dans les codes de page Web.
Exemple d'étapes expérimentales:
1. Entrez le code source d'une page Web dynamique comme suit, et observez et expérimentez les effets dynamiques de la page Web générés par le segment de code sur le navigateur.
<html>
<adal>
<meta http-equiv = contenu contenu contenu = text / html; charse = gb2312>
<Title> Effet dynamique d'un texte </TITME>
</ head>
<body>
<Marquee onMouseOver = this.stop () onMouseout = this.start () ScrollAmount = 1 ScrollDelay = 50 Direction = Up Hight = 116 Width = 188 Border = 1 BgColor = Olive> La souris s'arrêtera lorsqu'elle est déplacée et continue de se déplacer lorsqu'elle est éloignée. Vous pourriez aussi bien l'essayer </ Marquee>
</docy>
</html>
2. Décrivez les effets dynamiques qui peuvent être réalisés par le code ci-dessus:
3. Application pratique: Selon les exigences du tableau, analysez et modifiez les différentes valeurs d'attribut dans le code et observez les effets personnalisés via le navigateur, comparez les modifications avant et après la modification, et remplissez le formulaire entièrement en fonction de vos propres résultats d'observation.
Code dans les pages Web dynamiques
Ce que le code joue
1
onMouseOver = this.stop () onMouseout = this.start ()
2
Indique la vitesse du mouvement du texte
3
direction = up (peut être changé en: direction = direction droite = gauche)
4
hauteur = 116 largeur = 188
5
Représente la couleur d'arrière-plan du texte mobile (peut être changé par les couleurs suivantes: rouge, jaune, bleu, argent, etc.)
4. Évaluation expérimentale:
Indicateurs d'évaluation
Auto-évaluation
Qualité d'activité
L'analyse de la fonction du code dans les pages Web client est très claire
6
L'analyse de la fonction du code dans les pages Web client est plus claire
5
Analyse du rôle du code dans les pages Web des clients et compréhension générale
3
L'analyse de la fonction du code dans les pages Web client doit être améliorée
2
____________________________________________________
____________________________________________________
____________________________________________________
____________________________________________________
____________________________________________________
____________________________________________________
__________________________________________________________________________________________________
__________________________________________________________________________________________________