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 tutorial on running selenium+chromedriver on the server
1. Introduction I want to use selenium to scrape ...
Summary of web design experience and skills
■ Website theme planning Be careful not to make yo...
MySQL data loss troubleshooting case
Table of contents Preface On-site investigation C...
Analysis of MySQL joint index function and usage examples
This article uses examples to illustrate the func...
Detailed tutorial for upgrading zabbix monitoring 4.4 to 5.0
1. Zabbix backup [root@iZ2zeapnvuohe8p14289u6Z /]...
In-depth explanation of various binary object relationships in JavaScript
Table of contents Preface Relationships between v...
jQuery implements ad display and hide animation
We often see ads appear after a few seconds and t...
MySQL sorting using index scan
Table of contents Install sakila Index Scan Sort ...
Json advantages and disadvantages and usage introduction
Table of contents 1. What is JSON 1.1 Array liter...
Modify the jvm encoding problem when Tomcat is running
question: Recently, garbled data appeared when de...
Some suggestions on Vue code readability
Table of contents 1. Make good use of components ...
Detailed Example of JavaScript Array Methods
Table of contents Introduction Creating an Array ...
Binary Type Operations in MySQL
This article mainly introduces the binary type op...
JavaScript implements the pot-beating game of Gray Wolf
1. Project Documents 2. Use HTML and CSS for page...
Detailed explanation of installation and configuration of Redis and phpredis extension operation in Ubuntu 18.04 system
This article describes how to install and configu...