Temas de enseñanza
Página web
Grado aplicable
Estudiante de segundo año
Tiempo de clase de enseñanza
1 lección
Análisis de libros de texto
Enfoque: cómo crear páginas web estáticas y páginas web dinámicas y su proceso de trabajo
Dificultad: proceso de trabajo de páginas web dinámicas
Objetivos de aprendizaje
Comprender los conceptos básicos de páginas web, páginas de inicio, sitios web y sus relaciones, comprender los conceptos de páginas web estáticas y páginas web dinámicas, comprender la tecnología de páginas web estáticas y páginas web dinámicas, y explicar el proceso de trabajo
Recursos y entorno requeridos
Recursos digitales
1. Motor de búsqueda (www.google.com, www.baidu.com)
2. Varias páginas web de demostración (páginas web estáticas y páginas web dinámicas)
Recursos generales
1. Capítulo 5, Sección 1 del libro de texto "Aplicación de la tecnología de red"; CD de apoyo
2. Materiales de enseñanza que apoyan los libros de los maestros
3. Lista de tareas de aprendizaje de "página web"
Entorno de apoyo docente
Aula de redes de computadoras, software de clase de red multimedia o proyector LCD
Diseño de enseñanza
pregunta
Objetivo
Puntos clave/dificultades/puntos clave
Diseño del problema de orientación de enseñanza
¿Qué es un sitio web? ¿Qué es una página web? ¿Qué es una página de inicio?
Comprender el significado de sitios web, páginas web y páginas de inicio
¿De qué se compone el sitio web?
Comprender los diversos componentes del sitio web
Logotipo del sitio web, área de encabezado, área de recomendación caliente
¿Cuáles son las páginas web que solemos ver en Internet?
Deje que los estudiantes comprendan el código de composición de las páginas web estáticas - HTML
Comprender la estructura y las etiquetas básicas del lenguaje HTML
¿Cómo aparecen las páginas web estáticas en el navegador?
Dominar el proceso de trabajo de las páginas web estáticas en el navegador
El navegador interpreta el código HTML
¿De qué están hechas las páginas web interactivas?
Deje que los estudiantes comprendan la composición de las páginas web estáticas
Comprender el lenguaje de secuencias de comandos
¿Cómo aparecen las páginas web dinámicas en el navegador bajo la interacción del usuario?
Dominar el proceso de trabajo de las páginas web dinámicas en el navegador
Proceso de ejecución de páginas web dinámicas
Proceso de enseñanza
1. Nuevo introducción de lección:
Todos los estudiantes que han estado expuestos a Internet deberían haber visitado el sitio web y haber visto la página web. Las páginas web que ve generalmente tienen algunos formatos fijos, como títulos, logotipos de sitios web, etc. En términos de la clasificación de páginas web, generalmente se pueden dividir en dos categorías. Una categoría no cambia con las operaciones del usuario, que se denomina páginas web estáticas, y la otra categoría cambia con las operaciones del usuario. Este tipo de página web se llama páginas web dinámicas.
Hoy discutiré el tema sobre las páginas web.
2. Contenido de enseñanza:
Busque algunos sitios web típicos a través de motores de búsqueda para mostrarlos a los estudiantes.
1. El concepto de sitio web, página web, página de inicio y la relación entre los tres
El Internet internacional que la gente visita hoy se compone de sitios web, y el sitio web está compuesto por páginas web específicas. La página de inicio es equivalente a la página inicial del sitio web y juega un papel guía y conectado. En términos generales, los usuarios pueden acceder a la mayoría de las páginas web del sitio web a través de la página de inicio.
Pregunta: ¿Qué es un sitio web? ¿Qué es una página web? ¿Qué es una página de inicio?
Actividad: El maestro explica el significado del sitio web, la página web y la página de inicio y la relación entre los tres.
2. Estructura de la página web
La estructura de la página de los sitios web comunes generalmente se compone del título de la página, logotipo del sitio web (logotipo), área de encabezado, barra de navegación, área de inicio de sesión, área de búsqueda, área de punto de acceso de recomendación, área de contenido principal, área de pie de página, etc.
3. Concepto de páginas web estáticas
Una página web estática es una página web almacenada en forma de un archivo en el servidor y enviada al cliente en el mismo formato.
Las páginas web estáticas son archivos escritos en lenguaje de marcado de hipertexto.
Pregunta: ¿Cuáles son las páginas web que solemos ver en Internet?
Actividad: El maestro explica la composición de las páginas web estáticas y las características del lenguaje de marcado de hipertexto (HTML).
Explore: los estudiantes operan, ven los archivos de origen de la página web al navegar por una página web.
4. El principio de la pantalla de la página web estática en el navegador
Se envía una página web estática al cliente en el mismo formato del servidor, pero después de que este archivo llega en el navegador, el navegador debe encontrar el código HTML en el archivo y luego mostrar el código HTML específico en un formulario específico para formar la página web vista por el usuario.
Pregunta: ¿Cómo aparecen las páginas web estáticas en el navegador?
Actividad: El maestro explica el proceso de interpretación del navegador y el efecto del lenguaje de marcado de hipertexto.
5. El concepto de páginas web dinámicas
Las páginas web dinámicas se refieren a páginas web que crean automáticamente los sistemas informáticos durante la navegación de usuarios. Por lo general, se usan para mostrar información en tiempo real o mostrar contenido específico de acuerdo con la interacción del usuario.
Características de las páginas web dinámicas: actualización interactiva y automática, cambio de lugar a tiempo a persona
Formas comunes de páginas web dinámicas: contadores, salas de chat, áreas de discusión, BBS, registros de ex alumnos, etc.
Dos situaciones comunes para formar páginas web dinámicas: páginas web dinámicas compuestas de métodos de cliente puros y páginas web dinámicas compuestas por el modo de servidor de cliente
Pregunta: ¿De qué están hechas las páginas web interactivas?
Actividad: el maestro explica las dos situaciones comunes de formación de páginas web dinámicas, la composición respectiva y las características de las páginas web dinámicas compuestas por métodos de cliente puro y modos de navegador/servidor.
Comunicación: cómo usar la paleta del sistema para ajustar con precisión los colores
6. El principio de la pantalla dinámica de la página web
Páginas web dinámicas compuestas por métodos de cliente puro: este método no requiere interacción con el servidor, y generalmente está directamente integrado en la página web en los applets de Java y los lenguajes de script. Su dinámica se refleja en que los usuarios utilizan varios contenidos o formularios de visualización de la página web operativa compatibles con tecnologías como JavaScript, Javaapplet, etc.
Reflexión después de la clase
Diseñador de planes de lección
Unidad/dirección/código postal
correo electrónico
Número de contacto
Los estudiantes navegan por la página web y ven un sitio web con un diseño de página claro, razonable y distintivo, y completan las siguientes operaciones.
Nombre del sitio web:
URL de la página de inicio:
Título de la página:
1. ¿En qué idioma se escribe la página web estática? _____________________________________________________________
2. ¿Cuáles son las características de las páginas web dinámicas? ______________________________________________
3. ¿Cuáles son las tecnologías web dinámicas comunes? _________________________________________________________________
Requisitos experimentales:
(1) Aprenda sobre algunas formas simples de lograr efectos dinámicos de las páginas web del cliente a través de los siguientes ejemplos breves de páginas web dinámicas.
(2) Al modificar ciertas propiedades del objeto en el programa, maestra métodos de modificación simple a los efectos dinámicos de las páginas web.
(3) Dominar una forma simple de crear páginas web dinámicas insertando códigos de efectos especiales de la página web en códigos de página web.
Ejemplo de pasos experimentales:
1. Ingrese el código fuente de una página web dinámica de la siguiente manera, y observe y experimente los efectos dinámicos de la página web generada por el segmento de código en el navegador.
<html>
<Evista>
<meta http-oquiv = content-type content = text/html; Charset = GB2312>
<title> Efecto dinámico de un texto </title>
</ablo>
<Body>
<Marquee onMouseOver = this.stop () onMouseOut = this.start () scrolllamount = 1 scrollDelay = 50 dirección = altura up = 116 ancho = 188 borde = 1 bgcolor = olive> el mouse se detendrá cuando se mueva hacia arriba y continuará moviéndose cuando se mueve. También podrías probarlo </marquee>
</body>
</html>
2. Describa los efectos dinámicos que se pueden lograr mediante el código anterior:
3. Aplicación práctica: De acuerdo con los requisitos de la tabla, analice y modifique los diferentes valores de atributos en el código, y observe los efectos personalizados a través del navegador, compare los cambios antes y después de la modificación, y complete el formulario en su totalidad en función de sus propios resultados de observación.
Código en páginas web dinámicas
Lo que juega el código
1
onMouseOver = this.stop () onMouseOut = this.Start ()
2
Indica la velocidad del movimiento del texto
3
dirección = arriba (se puede cambiar a: dirección = dirección derecha = izquierda)
4
altura = 116 ancho = 188
5
Representa el color de fondo del texto en movimiento (se puede cambiar a los siguientes colores: rojo, amarillo, azul, plateado, etc.)
4. Evaluación experimental:
Indicadores de evaluación
Autoevaluación
Calidad de la actividad
El análisis de la función del código en las páginas web del cliente es muy claro
6
El análisis de la función del código en las páginas web del cliente es más claro
5
Análisis del papel del código en las páginas web del cliente y la comprensión general
3
El análisis de la función del código en las páginas web del cliente debe mejorarse
2
________________________________________________
________________________________________________
________________________________________________
________________________________________________
________________________________________________
________________________________________________
__________________________________________________________________________________________
__________________________________________________________________________________________