Web lesson plans, lesson plans for beginners
|
Teaching Topics Web page Applicable grade Second year of high school Teaching hours 1 class Textbook Analysis Focus: The composition and working process of static and dynamic web pages Difficulty: The working process of dynamic web pages Learning objectives Understand the basic concepts of web pages, homepages, websites and the relationship between them, understand the concepts of static and dynamic web pages, understand the technologies of static and dynamic web pages, and be able to explain their working processes Required resources and environment Digital resources 1. Search engines (www.google.com, www.baidu.com) 2. Several demo web pages (static and dynamic) General resources 1. Textbook "Network Technology Application" Chapter 5 Section 1 ; Supporting CD 2. Teaching Materials and Teacher's Books 3. Webpage Study Task Sheet Teaching support environment Computer network classroom, multimedia network classroom software or LCD projector Instructional Design question Purpose Key points / difficulties / critical points Design of teaching guidance questions What is a website? What is a web page? What is a Home Page? Understand the meaning of website, web page, homepage What does a website consist of? Understand the components of a website Website logo, header area, hot recommendation area What are the web pages we usually see on the Internet composed of ? Let students understand the composition code of static web pages - HTML Understand the structure and basic tags of HTML language How are static web pages displayed in a browser? Understand the working process of static web pages in browsers The browser interprets HTML code What do interactive web pages consist of? Let students understand the composition of static web pages Understanding scripting languages How are dynamic web pages displayed in the browser under user interaction? Understand how dynamic web pages work in browsers The execution process of dynamic web pages Teaching process one, New course introduction: All students who have had access to the Internet should have visited websites and seen web pages. The web pages that everyone sees generally have some fixed formats, such as titles, website logos, etc., and 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, called static web pages, and the other category changes with the user's operations, which are called dynamic web pages. Today I will discuss issues related to web pages. two, Teaching content: Search for some typical websites through search engines and show them to students. 1 . The concepts of website, web page and home page and their relationship The international Internet that people visit today is made up of individual websites, and websites are made up of specific web pages. The homepage is equivalent to the starting page of the website and plays a guiding and connecting role. Generally speaking, users can access most of the website's web pages through the homepage. Question: What is a website? What is a web page? What is a Home Page? Activity: The teacher explains the meaning of website, web page and homepage and the relationship between them. 2 . Web page structure The page structure of a common website generally consists of page title, website logo ( LOGO ), header area, navigation bar, login area, search area, recommended hotspot area, main content area, footer area, etc. 3 . The concept of static web pages Static web pages are web pages that are stored as files on the server and sent to clients 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 composed of ? Activity: The teacher explains the composition of static web pages and the characteristics of Hypertext Markup Language ( HTML ). Explore: Students operate and view the source file of a web page when browsing a web page. 4 . How static web pages are displayed in browsers Static web pages are files sent from the server to the client in the same format, but after the file reaches 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 that the user sees. Question: How are static web pages displayed in the browser? Activity: The teacher explains the browser's interpretation process and effects of Hypertext Markup Language. 5. The concept of dynamic web pages A dynamic web page is a web page that is automatically created by a computer system during a user's browsing process. It is usually used to display real-time information or display specific content based on user interaction. Features of dynamic web pages: interactivity, automatic updating, changing according to location, time and people Common forms of dynamic web pages: counters, chat rooms, discussion areas, BBS , alumni directories, etc. There are two common situations for constructing dynamic web pages: dynamic web pages constructed in pure client mode and dynamic web pages constructed in client-server mode Question: What are interactive web pages made of? Activity: The teacher explains the two common situations of dynamic web pages, the composition and characteristics of dynamic web pages constructed by pure client mode and dynamic web pages constructed by browser / server mode. Communication: How to use the system palette to accurately adjust colors 6. Principles of dynamic web page display Dynamic web pages constructed in a purely client-side manner: This method does not require interaction with the server and is usually embedded directly in the web page in the form of JAVA applets and scripting languages. Its dynamics are manifested in that users manipulate the displayed content or form of web pages through various technologies supported by, for example, javascript and javaapplet . After-class reflection Lesson plan designer Unit / Address / Zip Code Contact Number Webpage Learning Task Sheet one, Web page related concepts Students browse the web, view a website with a clear, reasonable and distinctive page layout, and complete the following operations. Website Name: Home page URL: Page Title: two, Static and dynamic web pages 1. What language are static web pages written in ?________________________________________ 2. What are the characteristics of dynamic web pages ? ____________________________________ 3. What are the common dynamic web page technologies ? _____________________________________________ three, Experiment : Experience the client-side dynamic web page effect Experimental requirements : (1) Through the following short examples of dynamic web pages, you can learn some simple methods to achieve dynamic effects on client-side web pages. (2) By modifying the properties of certain objects in the program, you can master the simple methods of modifying the dynamic effects of web pages. (3) Through the experience activity of inserting web page special effect code into the web page code, you can master a simple method of making dynamic web pages. Example of experimental steps: 1 . Enter the source code of the following dynamic web page and observe and experience the dynamic effect of the web page generated by this code segment on the browser. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title> A dynamic effect of text </title> </head> <body> <marquee onMouseOver=this.stop() onMouseOut=this.start() scrollamount=1 scrolldelay=50 direction=up height=116 width=188 border=1 bgcolor=Olive> It will stop when the mouse moves over, and continue to move when it moves away. You may want to give it a try </marquee> </body> </html> 2 . Describe the dynamic effects that the above code can achieve: 3 . Practical application: According to the requirements in the table, analyze and modify the different attribute values in the code, observe the individual effects through the browser, compare the changes before and after the modification, and fill in the table based on your own observations. Code in dynamic web pages What the code does 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 Indicates 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 Activity quality The role analysis of the code in the client web page is very clear 6 The role analysis of the code in the client web page is relatively clear 5 Analyze the role of the code in the client web page and have a general understanding 3 The analysis of the role of the code in the client web page needs to be improved 2 Four, After studying, what doubts do you still have? ________________________________________ ________________________________________ ________________________________________ ________________________________________ five, Through learning, what new ideas do you have about the related knowledge of static and dynamic web pages? ____________________________________ ____ ________________________________________ _________________________________________________________ _________________________________________________________ |
<<: CentOS 7.x docker uses overlay2 storage method
>>: Native JS to achieve drag photo wall
Recommend
Detailed explanation of the front-end framework for low-threshold development of iOS, Android, and mini-program applications
Nowadays, cross-platform development technology i...
Solution to MySQLSyntaxErrorException when connecting to MySQL using bitronix
Solution to MySQLSyntaxErrorException when connec...
Discuss the application of mixin in Vue
Mixins provide a very flexible way to distribute ...
Differences between this keyword in NodeJS and browsers
Preface Anyone who has learned JavaScript must be...
element-ui Mark the coordinate points after uploading the picture
What is element-ui element-ui is a desktop compon...
Detailed explanation of the usage of MySQL data type DECIMAL
MySQL DECIMAL data type is used to store exact nu...
Detailed explanation of uniapp painless token refresh method
When the front-end requests the interface, it is ...
Do you know the weird things in Javascript?
Our veteran predecessors have written countless c...
JS achieves five-star praise case
This article shares the specific code of JS to ac...
A quick review of CSS3 pseudo-class selectors
Preface If CSS is the basic skill of front-end de...
Solution to the problem of returning 0x1 when the Windows 2008 task plan fails to execute a bat script
Test environment: C:\>systeminfo | findstr /c:...
Vue implements the question answering function
1. Request answer interface 2. Determine whether ...
JavaScript Basics Operators
Table of contents 1. Operators Summarize 1. Opera...
Docker Compose installation and usage steps
Table of contents 1. What is Docker Compose? 2. D...
CSS3 clear float method example
1. Purpose Through this article, everyone can und...