Web-Unterrichtspläne, Unterrichtspläne für Anfänger
|
Unterrichtsthemen Webseite Anwendbare Klasse Zweites Jahr der High School Unterrichtszeiten 1. Klasse Lehrbuchanalyse Schwerpunkt: Aufbau und Arbeitsweise statischer und dynamischer Webseiten Schwierigkeit: Der Arbeitsprozess dynamischer Webseiten Lernziele Die Grundkonzepte von Webseiten, Homepages, Websites und die Beziehungen zwischen ihnen verstehen, die Konzepte statischer und dynamischer Webseiten verstehen, die Technologien statischer und dynamischer Webseiten verstehen und ihre Arbeitsprozesse erklären können Erforderliche Ressourcen und Umgebung Digitale Ressourcen 1. Suchmaschinen (www.google.com, www.baidu.com) 2. Mehrere Demo-Webseiten (statisch und dynamisch) Allgemeine Ressourcen 1. Lehrbuch „Netzwerktechnik-Anwendung“ Kapitel 5 Abschnitt 1 ; Begleit-CD 2. Unterrichtsmaterialien und Lehrerbücher 3. Aufgabenblatt für die Webseite Unterrichtsunterstützende Umgebung Computernetzwerk-Klassenzimmer, Multimedia-Netzwerk-Klassenzimmer-Software oder LCD-Projektor Unterrichtsgestaltung Frage Zweck Kernpunkte / Schwierigkeiten / kritische Punkte Gestaltung von Unterrichtsberatungsfragen Was ist eine Website? Was ist eine Webseite? Was ist eine Homepage? Verstehen Sie die Bedeutung von Website, Webseite, Homepage Woraus besteht eine Website? Verstehen Sie die Komponenten einer Website Website-Logo, Header-Bereich, Hot-Recommendation-Bereich Woraus bestehen die Webseiten, die wir normalerweise im Internet sehen ? Bringen Sie den Schülern den Kompositionscode statischer Webseiten bei – HTML Verstehen Sie die Struktur und die grundlegenden Tags der HTML- Sprache Wie werden statische Webseiten in einem Browser angezeigt? Verstehen Sie den Arbeitsprozess statischer Webseiten in Browsern Der Browser interpretiert HTML- Code Woraus bestehen interaktive Webseiten? Vermitteln Sie den Schülern den Aufbau statischer Webseiten Skriptsprachen verstehen Wie werden dynamische Webseiten unter Benutzerinteraktion im Browser angezeigt? Verstehen Sie, wie dynamische Webseiten in Browsern funktionieren Der Ausführungsprozess dynamischer Webseiten Lehrprozess eins, Neue Kurseinführung: Alle Schüler, die Zugang zum Internet hatten, sollten Websites besucht und sich Webseiten angesehen haben. Die Webseiten, die jeder sieht, haben im Allgemeinen einige feste Formate, wie z. B. Titel, Website-Logos usw., und in Bezug auf die Klassifizierung von Webseiten können sie im Allgemeinen in zwei Kategorien unterteilt werden. Eine Kategorie ändert sich nicht mit den Operationen des Benutzers, die als statische Webseiten bezeichnet werden, und die andere Kategorie ändert sich mit den Operationen des Benutzers, die als dynamische Webseiten bezeichnet werden. Heute werde ich Themen im Zusammenhang mit Webseiten besprechen. zwei, Lehrinhalte: Suchen Sie mithilfe von Suchmaschinen nach einigen typischen Websites und zeigen Sie sie den Schülern. 1 . Die Konzepte „Website“, „Webseite“ und „Homepage“ und ihre Beziehung Das internationale Internet, das Menschen heute besuchen, besteht aus einzelnen Websites, und Websites bestehen aus bestimmten Webseiten. Die Homepage entspricht der Startseite der Website und spielt eine führende und verbindende Rolle. Im Allgemeinen können Benutzer über die Homepage auf die meisten Webseiten der Website zugreifen. Frage: Was ist eine Website? Was ist eine Webseite? Was ist eine Homepage? Aktivität: Der Lehrer erklärt die Bedeutung von Website, Webseite und Homepage und die Beziehung zwischen ihnen. 2 . Webseitenstruktur Die Seitenstruktur einer herkömmlichen Website besteht im Allgemeinen aus Seitentitel, Website-Logo ( LOGO ), Kopfbereich, Navigationsleiste, Anmeldebereich, Suchbereich, empfohlenem Hotspot-Bereich, Hauptinhaltsbereich, Fußzeilenbereich usw. 3 . Das Konzept statischer Webseiten Statische Webseiten sind Webseiten, die als Dateien auf dem Server gespeichert und im gleichen Format an Clients gesendet werden. Statische Webseiten sind Dateien, die in Hypertext Markup Language geschrieben sind. Frage: Woraus bestehen die Webseiten, die wir normalerweise im Internet sehen ? Aktivität: Der Lehrer erklärt den Aufbau statischer Webseiten und die Eigenschaften der Hypertext Markup Language ( HTML ). Erkunden: Schüler bedienen und betrachten die Quelldatei einer Webseite, wenn sie eine Webseite durchsuchen. 4 . Wie statische Webseiten in Browsern angezeigt werden Statische Webseiten sind Dateien, die vom Server im gleichen Format an den Client gesendet werden. Nachdem die Datei den Browser erreicht hat, muss der Browser jedoch den HTML- Code in der Datei finden und dann den spezifischen HTML- Code in einer spezifischen Form anzeigen, um die Webseite zu erstellen, die der Benutzer sieht. Frage: Wie werden statische Webseiten im Browser angezeigt? Aktivität: Der Lehrer erklärt den Interpretationsprozess des Browsers und die Auswirkungen der Hypertext Markup Language. 5. Das Konzept dynamischer Webseiten Eine dynamische Webseite ist eine Webseite, die automatisch von einem Computersystem erstellt wird, während ein Benutzer surft. Sie wird normalerweise verwendet, um Informationen in Echtzeit anzuzeigen oder bestimmte Inhalte basierend auf der Benutzerinteraktion anzuzeigen. Merkmale dynamischer Webseiten: Interaktivität, automatische Aktualisierung, Änderung je nach Standort, Zeit und Personen Gängige Formen dynamischer Webseiten: Zähler, Chatrooms, Diskussionsbereiche, BBS , Alumni-Verzeichnisse usw. Es gibt zwei gängige Situationen zum Erstellen dynamischer Webseiten: dynamische Webseiten, die im reinen Client-Modus erstellt wurden, und dynamische Webseiten, die im Client-Server-Modus erstellt wurden. Frage: Woraus bestehen interaktive Webseiten? Aktivität: Der Lehrer erklärt die beiden gängigen Situationen dynamischer Webseiten, die Zusammensetzung und Eigenschaften dynamischer Webseiten, die im reinen Client-Modus erstellt werden, und dynamischer Webseiten, die im Browser- / Server-Modus erstellt werden. Kommunikation: So verwenden Sie die Systempalette, um Farben präzise anzupassen 6. Grundsätze der dynamischen Webseitendarstellung Rein clientseitig aufgebaute dynamische Webseiten: Dieses Verfahren erfordert keine Interaktion mit dem Server und wird meist in Form von JAVA -Applets und Skriptsprachen direkt in die Webseite eingebettet. Seine Dynamik manifestiert sich darin, dass Benutzer den angezeigten Inhalt oder die Form von Webseiten durch verschiedene Technologien manipulieren, die beispielsweise von JavaScript und JavaApplet unterstützt werden. Reflexion nach dem Unterricht Unterrichtsplan-Designer Einheit / Adresse / PLZ Kontaktnummer Aufgabenblatt für das Lernen auf der Webseite eins, Konzepte im Zusammenhang mit Webseiten Die Schüler durchsuchen das Internet, sehen sich eine Website mit einem klaren, sinnvollen und unverwechselbaren Seitenlayout an und führen die folgenden Vorgänge aus. Website-Name: URL der Homepage: Seitentitel: zwei, Statische und dynamische Webseiten 1. In welcher Sprache sind statische Webseiten verfasst ? ________________________________________ 2. Was sind die Merkmale dynamischer Webseiten ? ____________________________________ 3. Was sind die gängigen Technologien für dynamische Webseiten ? _____________________________________________ drei, Experiment : Erleben Sie den dynamischen Webseiteneffekt auf der Clientseite Experimentelle Anforderungen : (1) Anhand der folgenden kurzen Beispiele dynamischer Webseiten können Sie einige einfache Methoden erlernen, um dynamische Effekte auf clientseitigen Webseiten zu erzielen. (2) Durch die Änderung der Eigenschaften bestimmter Objekte im Programm können Sie einfache Methoden zur Änderung dynamischer Effekte von Webseiten erlernen. (3) Durch das Einfügen von Spezialeffektcodes für Webseiten in den Webseitencode können Sie eine einfache Methode zum Erstellen dynamischer Webseiten erlernen. Beispiel für experimentelle Schritte: 1 . Geben Sie den Quellcode der folgenden dynamischen Webseite ein und beobachten und erleben Sie die dynamische Wirkung der durch dieses Codesegment generierten Webseite auf den Browser. <html> <Kopf> <meta http-equiv="Inhaltstyp" content="text/html; charset=gb2312"> <title> Ein dynamischer Effekt von Text </title> </Kopf> <Text> <marquee onMouseOver=this.stop() onMouseOut=this.start() scrollamount=1 scrolldelay=50 direction=up height=116 width=188 border=1 bgcolor=Olive> Es stoppt, wenn die Maus darüber bewegt wird, und bewegt sich weiter, wenn sie sich wegbewegt. Vielleicht möchten Sie es einmal ausprobieren. </marquee> </body> </html> 2 . Beschreiben Sie die dynamischen Effekte, die der obige Code erzielen kann: 3 . Praktische Anwendung: Analysieren und ändern Sie gemäß den Anforderungen in der Tabelle die verschiedenen Attributwerte im Code, beobachten Sie die einzelnen Auswirkungen über den Browser, vergleichen Sie die Änderungen vor und nach der Änderung und füllen Sie die Tabelle basierend auf Ihren eigenen Beobachtungen aus. Code in dynamischen Webseiten Was der Code bewirkt 1 onMouseOver = dies.stop() onMouseOut = dies.start() 2 Gibt die Geschwindigkeit der Textbewegung an 3 direction=up (kann geändert werden in: direction=right direction=left ) 4 Höhe=116 Breite=188 5 Gibt die Hintergrundfarbe des Lauftextes an (kann in folgende Farben geändert werden: Rot, Gelb, Blau, Silber usw.) 4 . Experimentelle Auswertung: Bewertungsindikatoren Selbstevaluation Aktivitätsqualität Die Rollenanalyse des Codes auf der Client-Webseite ist sehr klar 6 Die Rollenanalyse des Codes auf der Client-Webseite ist relativ klar 5 Analysieren Sie die Rolle des Codes auf der Client-Webseite und verschaffen Sie sich ein allgemeines Verständnis 3 Die Analyse der Rolle des Codes auf der Client-Webseite muss verbessert werden 2 Vier, Welche Zweifel sind nach dem Studium noch vorhanden? ________________________________________ ________________________________________ ________________________________________ ________________________________________ fünf, Welche neuen Ideen haben Sie durch das Lernen zum Thema statische und dynamische Webseiten gewonnen? ____________________________________ ____ ________________________________________ ________________________________________________________ ________________________________________________________ |
<<: Detaillierte Fehlerbehebung bei Docker.service-Startfehlern
>>: Zusammenfassung häufig verwendeter SQL-Operationen in MySQL-Tabellen
Artikel empfehlen
So schreiben Sie Objekte und Parameter, um Flash in Firefox abzuspielen
Code kopieren Der Code lautet wie folgt: <Obje...
Detaillierte Erklärung des JavaScript-Stacks und der Kopie
Inhaltsverzeichnis 1. Definition des Stapels 2. J...
Detaillierte Erklärung der Methoden und Eigenschaften von Vue
Vue-Methoden und -Eigenschaften 1. Methoden Verwe...
Implementierung der Festlegung einer festen IP beim Starten eines Docker-Containers
Netzwerktyp nach der Docker-Installation [root@in...
Eine kurze Diskussion darüber, welche Felder in Mysql für die Indizierung geeignet sind
Inhaltsverzeichnis 1 Die allgemeinen Regeln zum E...
Div deckt den Blitz ab. Die transparente Flash-Methode ermöglicht die Platzierung der DIV-Ebene auf dem Blitz.
Es gibt zwei Typen: (verschiedene Browser) 1. Verf...
IE6/7 wird ein Chaos: Problem mit der Höhe leerer Textknoten
Vorwort: Verwenden Sie die Debugleiste, um den Dok...
Analyse der Docker-Methode zum Erstellen lokaler Images
Der sogenannte Container erstellt tatsächlich ein...
So verwenden Sie JS WebSocket zur Implementierung eines einfachen Chats
Inhaltsverzeichnis Kurze Umfrage Langfristige Abf...
Der Unterschied und die Verwendung von einzeiligem und zweizeiligem Layout im Flex-Mobillayout
Hier ist ein einzeiliges Layout mit ul>li für ...
So legen Sie den Rahmen einer Webseitentabelle fest
<br />Zuvor haben wir gelernt, wie man Zelll...
Vue implementiert das Senden von Emoticons im Chatfenster
Der spezifische Code zum Senden von Emoticons im ...
43 Webdesign-Fehler, auf die Webdesigner achten sollten
Dies ist ein Artikel über die Benutzerfreundlichk...
Einführung in die Containerfunktion of() in der Linux-Kernel-Programmierung
Vorwort Bei der Linux-Kernel-Programmierung werde...
So aktivieren Sie TLS- und CA-Authentifizierung in Docker
Inhaltsverzeichnis 1. Zertifikat generieren 2. Ak...