Teaching topics
Web page
Applicable grade
Sophomore
Teaching class time
1 lesson
Textbook analysis
Focus: How to make up static web pages and dynamic web pages and their working process
Difficulty: Working process of dynamic web pages
Learning Objectives
Understand the basic concepts of web pages, home pages, websites and their relationships, understand the concepts of static web pages and dynamic web pages, understand the technology of static web pages and dynamic web pages, and explain the working process
Resources and environment required
Digital resources
1. Search engine (www.google.com, www.baidu.com)
2. Several demonstration web pages (static web pages and dynamic web pages)
General Resources
1. Chapter 5, Section 1 of the textbook "Application of Network Technology"; supporting CD
2. Teaching materials supporting teachers’ books
3. "Web Page" Learning Task List
Teaching support environment
Computer network classroom, multimedia network classroom software or LCD projector
Teaching design
question
Purpose
Key points/difficulties/key points
Design of teaching guidance problem
What is a website? What is a web page? What is a homepage?
Understand the meaning of websites, web pages, and home pages
What is the website composed of?
Understand the various components of the website
Website logo, header area, hot recommendation area
What are the web pages we usually see on the Internet?
Let students understand the composition code of static web pages - HTML
Understand the structure and basic tags of HTML language
How do static web pages appear in the browser?
Master the working process of static web pages in the browser
The browser interprets HTML code
What are the interactive web pages made of?
Let students understand the composition of static web pages
Understand scripting language
How do dynamic web pages appear in the browser under user interaction?
Master the working process of dynamic web pages in the browser
Execution process of dynamic web pages
Teaching process
1. New lesson introduction:
All students who have been exposed to the Internet should have visited the website and seen the web page. The web pages you see generally have some fixed formats, such as titles, website logos, etc. In terms of the classification of web pages, they can generally be divided into two categories. One category does not change with the user's operations, which is called static web pages, and the other category changes with the user's operations. This type of web page is called dynamic web pages.
Today I will discuss the issue about web pages.
2. Teaching content:
Search for some typical websites through search engines to display them to students.
1. The concept of website, web page, home page and the relationship between the three
The international Internet that people visit today is composed of websites, and the website is composed of specific web pages. The home page is equivalent to the starting page of the website and plays a guiding and connecting role. Generally speaking, users can access most of the web pages of the website through the home page.
Question: What is a website? What is a web page? What is a homepage?
Activity: The teacher explains the meaning of the website, web page, and home page and the relationship between the three.
2. Web page structure
The page structure of common websites is generally composed of page title, website logo (LOGO), header area, navigation bar, login area, search area, recommendation hotspot area, main content area, footer area, etc.
3. Concept of static web pages
A static web page is a web page stored in the form of a file on the server and sent to the customer in the same format.
Static web pages are files written in hypertext markup language.
Question: What are the web pages we usually see on the Internet?
Activity: The teacher explains the composition of static web pages and the characteristics of Hypertext Markup Language (HTML).
Explore: Students operate, view the source files of the web page when browsing a web page.
4. The principle of static web page display in the browser
A static web page is sent to the client in the same format from the server, but after this file arrives in the browser, the browser needs to find the HTML code in the file, and then display the specific HTML code in a specific form to form the web page seen by the user.
Question: How do static web pages appear in the browser?
Activity: The teacher explains the browser's interpretation process and effect of hypertext markup language.
5. The concept of dynamic web pages
Dynamic web pages refer to web pages that are automatically created by computer systems during user browsing. They are usually used to display real-time information or display specific content according to user interaction.
Features of dynamic web pages: interactive, automatic update, change from place to time to person
Common forms of dynamic web pages: counters, chat rooms, discussion areas, BBS, alumni records, etc.
Two common situations for forming dynamic web pages: dynamic web pages composed of pure client methods and dynamic web pages composed of client server mode
Question: What are the interactive web pages made of?
Activity: Teacher explains the two common situations of forming dynamic web pages, the respective composition and characteristics of dynamic web pages composed of pure client methods and browser/server modes.
Communication: How to use the system palette to accurately adjust colors
6. The principle of dynamic web page display
Dynamic web pages composed of pure client methods: This method does not require interaction with the server, and is usually directly embedded in the web page in JAVA applets and script languages. Its dynamics are reflected in that users use various operating web page display content or forms supported by technologies such as javascript, javaapplet, etc.
Reflection after class
Lesson plan designer
Unit/Address/Zip Code
Contact number
Students browse the web page and view a website with clear, reasonable and distinctive page layout, and complete the following operations.
Website name:
Homepage URL:
Page title:
1. What language is static web page written in?_____________________________________________________________________
2. What are the characteristics of dynamic web pages?______________________________________________
3. What are the common dynamic web technologies? _____________________________________________________________________
Experimental requirements:
(1) Learn about some simple ways to achieve dynamic effects of client web pages through the following short examples of dynamic web pages.
(2) By modifying certain object properties in the program, master simple modification methods to the dynamic effects of web pages.
(3) Master a simple way to create dynamic web pages by inserting web page special effect codes into web page codes.
Example of experimental steps:
1. Enter the source code of a dynamic web page as follows, and observe and experience the dynamic effects of the web page generated by the code segment on the browser.
<html>
<head>
<meta http-equiv=Content-Type content=text/html; charset=gb2312>
<title> Dynamic effect of a text</title>
</head>
<body>
<marquee onMouseOver=this.stop() onMouseOut=this.start() scrolllamount=1 scrolldelay=50 direction=up height=116 width=188 border=1 bgcolor=Olive>The mouse will stop when it is moved up, and continue to move when it is moved away. You might as well try it</marquee>
</body>
</html>
2. Describe the dynamic effects that can be achieved by the above code:
3. Practical application: According to the requirements in the table, analyze and modify the different attribute values in the code, and observe the personalized effects through the browser, compare the changes before and after the modification, and fill in the form in full based on your own observation results.
Code in dynamic web pages
What the code plays
1
onMouseOver=this.stop() onMouseOut=this.start()
2
Indicates the speed of text movement
3
direction=up (can be changed to: direction=right direction=left)
4
height=116 width=188
5
Represents the background color of the moving text (can be changed to the following colors: red, yellow, blue, silver, etc.)
4. Experimental evaluation:
Evaluation indicators
Self-evaluation
Quality of activity
Analysis of the function of code in client web pages is very clear
6
Analysis of the function of code in client web pages is clearer
5
Analysis of the role of code in client web pages, and general understanding
3
Analysis of the function of code in client web pages needs to be improved
2
____________________________________________________
____________________________________________________
____________________________________________________
____________________________________________________
____________________________________________________
____________________________________________________
______________________________________________________________________________________________
______________________________________________________________________________________________