가르침 주제
웹 페이지
해당 등급
2 학년
수업 시간 교육
1 수업
교과서 분석
초점 : 정적 웹 페이지와 동적 웹 페이지를 구성하는 방법 및 작업 프로세스
난이도 : 동적 웹 페이지의 작업 프로세스
학습 목표
웹 페이지, 홈페이지, 웹 사이트 및 관계의 기본 개념을 이해하고 정적 웹 페이지 및 동적 웹 페이지의 개념을 이해하고 정적 웹 페이지 및 동적 웹 페이지의 기술을 이해하고 작업 프로세스를 설명합니다.
필요한 자원 및 환경
디지털 리소스
1. 검색 엔진 (www.google.com, www.baidu.com)
2. 여러 데모 웹 페이지 (정적 웹 페이지 및 동적 웹 페이지)
일반 자원
1. 5 장, 교과서 "네트워크 기술의 응용 프로그램"섹션 1; 지원 CD
2. 교사의 책을 지원하는 교육 자료
3. "웹 페이지"학습 작업 목록
교육 지원 환경
컴퓨터 네트워크 교실, 멀티미디어 네트워크 교실 소프트웨어 또는 LCD 프로젝터
교육 디자인
질문
목적
핵심 포인트/어려움/키 포인트
교육 지침 설계 문제
웹 사이트 란 무엇입니까? 웹 페이지 란? 홈페이지 란 무엇입니까?
웹 사이트, 웹 페이지 및 홈 페이지의 의미 이해
웹 사이트는 무엇으로 구성되어 있습니까?
웹 사이트의 다양한 구성 요소를 이해하십시오
웹 사이트 로고, 헤더 영역, 핫 추천 영역
우리가 일반적으로 인터넷에서 볼 수있는 웹 페이지는 무엇입니까?
학생들이 정적 웹 페이지의 구성 코드 -HTML을 이해하도록합니다.
HTML 언어의 구조와 기본 태그를 이해하십시오
브라우저에 정적 웹 페이지가 어떻게 나타나나요?
브라우저에서 정적 웹 페이지의 작업 프로세스 마스터
브라우저는 HTML 코드를 해석합니다
대화식 웹 페이지는 무엇입니까?
학생들이 정적 웹 페이지의 구성을 이해하도록합니다
스크립팅 언어를 이해하십시오
사용자 상호 작용 하에서 브라우저에 동적 웹 페이지가 어떻게 나타나나요?
브라우저에서 동적 웹 페이지의 작업 프로세스 마스터
동적 웹 페이지의 실행 프로세스
교육 과정
1. 새로운 수업 소개 :
인터넷에 노출 된 모든 학생들은 웹 사이트를 방문하여 웹 페이지를보아야합니다. 당신이 보는 웹 페이지에는 일반적으로 제목, 웹 사이트 로고 등과 같은 고정 형식이 있습니다. 웹 페이지의 분류 측면에서 일반적으로 두 가지 범주로 나눌 수 있습니다. 하나의 범주는 정적 웹 페이지라고하는 사용자의 작업에 따라 변경되지 않으며 다른 범주는 사용자의 작업으로 변경됩니다. 이 유형의 웹 페이지를 동적 웹 페이지라고합니다.
오늘 저는 웹 페이지에 대한 문제에 대해 논의 할 것입니다.
2. 교육 내용 :
검색 엔진을 통해 일부 일반적인 웹 사이트를 검색하여 학생들에게 표시하십시오.
1. 웹 사이트, 웹 페이지, 홈 페이지의 개념 및 세 가지의 관계
오늘날 사람들이 방문하는 국제 인터넷은 웹 사이트로 구성되며 웹 사이트는 특정 웹 페이지로 구성됩니다. 홈페이지는 웹 사이트의 시작 페이지와 동일하며 안내 및 연결 역할을 수행합니다. 일반적으로 사용자는 홈페이지를 통해 웹 사이트의 대부분의 웹 페이지에 액세스 할 수 있습니다.
질문 : 웹 사이트 란 무엇입니까? 웹 페이지 란? 홈페이지 란 무엇입니까?
활동 : 교사는 웹 사이트, 웹 페이지 및 홈 페이지의 의미와 세 가지의 관계를 설명합니다.
2. 웹 페이지 구조
공통 웹 사이트의 페이지 구조는 일반적으로 페이지 제목, 웹 사이트 로고 (로고), 헤더 영역, 내비게이션 바, 로그인 영역, 검색 영역, 권장 핫스팟 영역, 주요 컨텐츠 영역, 바닥 글 영역 등으로 구성됩니다.
3. 정적 웹 페이지의 개념
정적 웹 페이지는 서버의 파일 형식으로 저장되어 동일한 형식으로 고객에게 전송 된 웹 페이지입니다.
정적 웹 페이지는 하이퍼 텍스트 마크 업 언어로 작성된 파일입니다.
질문 : 인터넷에서 일반적으로 볼 수있는 웹 페이지는 무엇입니까?
활동 : 교사는 정적 웹 페이지의 구성과 HTML (HyperText Markup Language)의 특성을 설명합니다.
탐색 : 학생들은 웹 페이지를 탐색 할 때 웹 페이지의 소스 파일을 작동합니다.
4. 브라우저에서 정적 웹 페이지 디스플레이의 원리
정적 웹 페이지는 서버와 동일한 형식으로 클라이언트로 전송되지만이 파일이 브라우저에 도착하면 브라우저는 파일에서 HTML 코드를 찾은 다음 특정 HTML 코드를 특정 양식으로 표시하여 사용자가 보이는 웹 페이지를 구성해야합니다.
질문 : 정적 웹 페이지는 브라우저에 어떻게 나타나나요?
활동 : 교사는 브라우저의 해석 과정과 하이퍼 텍스트 마크 업 언어의 효과를 설명합니다.
5. 동적 웹 페이지의 개념
동적 웹 페이지는 사용자 브라우징 동안 컴퓨터 시스템에서 자동으로 작성된 웹 페이지를 참조하십시오. 일반적으로 사용자 상호 작용에 따라 실시간 정보를 표시하거나 특정 콘텐츠를 표시하는 데 사용됩니다.
동적 웹 페이지의 기능 : 대화식, 자동 업데이트, 장소마다 변경
동적 웹 페이지의 일반적인 형태 : 카운터, 대화방, 토론 영역, BBS, 동문 기록 등
동적 웹 페이지를 형성하기위한 두 가지 일반적인 상황 : 순수한 클라이언트 메소드와 동적 웹 페이지로 구성된 동적 웹 페이지 클라이언트 서버 모드로 구성된 동적 웹 페이지
질문 : 대화식 웹 페이지는 무엇입니까?
활동 : 교사는 동적 웹 페이지를 형성하는 두 가지 일반적인 상황, 순수한 클라이언트 방법 및 브라우저/서버 모드로 구성된 동적 웹 페이지의 각 구성 및 특성을 설명합니다.
통신 : 시스템 팔레트를 사용하여 색상을 정확하게 조정하는 방법
6. 동적 웹 페이지 디스플레이의 원리
순수한 클라이언트 방법으로 구성된 동적 웹 페이지 :이 방법은 서버와의 상호 작용이 필요하지 않으며 일반적으로 웹 페이지에 Java 애플릿 및 스크립트 언어로 직접 포함됩니다. 동적은 사용자가 다양한 운영 웹 페이지 디스플레이 컨텐츠 또는 JavaScript, JavaApplet 등과 같은 기술에서 지원하는 양식을 사용한다는 점에 반영됩니다.
수업 후 반성
수업 계획 디자이너
단위/주소/우편 번호
이메일
연락처 번호
학생들은 웹 페이지를 탐색하고 명확하고 합리적이며 독특한 페이지 레이아웃으로 웹 사이트를보고 다음 작업을 완료합니다.
웹 사이트 이름 :
홈페이지 URL :
페이지 제목 :
1. 정적 웹 페이지는 어떤 언어로 작성됩니까?
2. 동적 웹 페이지의 특성은 무엇입니까? __________________________________________
3. 일반적인 동적 웹 기술은 무엇입니까? ________________________________________________________________________________________________________.
실험 요구 사항 :
(1) 동적 웹 페이지의 다음 짧은 예를 통해 클라이언트 웹 페이지의 동적 효과를 달성하는 몇 가지 간단한 방법에 대해 알아보십시오.
(2) 프로그램의 특정 객체 속성을 수정하여 웹 페이지의 동적 효과에 대한 간단한 수정 방법을 마스터합니다.
(3) 웹 페이지 특성 코드를 웹 페이지 코드에 삽입하여 동적 웹 페이지를 작성하는 간단한 방법을 마스터하십시오.
실험 단계의 예 :
1. 다음과 같이 동적 웹 페이지의 소스 코드를 입력하고 브라우저에서 코드 세그먼트에서 생성 된 웹 페이지의 동적 효과를 관찰하고 경험하십시오.
<html>
<헤드>
<meta http-equiv = content-type content = text/html; charset = gb2312>
<title> 텍스트의 동적 효과 </title>
</head>
<body>
<marquee onmouseOver = this.stop () onMouseOut = this.ScrollLAnlay = 1 ScrollLAY = 50 Direction = UP 높이 = 116 너비 = 188 테두리 = 1 BGCOLOR = 올리브> 마우스가 위로 이동할 때 중지되고 멀리 이동할 때 계속 움직입니다. 당신은 그것을 시도 할 수도 있습니다 </marquee>
</body>
</html>
2. 위 코드에서 달성 할 수있는 동적 효과를 설명하십시오.
3. 실제 응용 프로그램 : 테이블의 요구 사항에 따라 코드의 다른 속성 값을 분석하고 수정하고 브라우저를 통해 개인화 된 효과를 관찰하고 수정 전후 변경 사항을 비교하고 자신의 관찰 결과를 기반으로 양식을 작성하십시오.
동적 웹 페이지에서 코드
코드가 연주하는 것
1
onmouseover = this.stop () onmouseout = this.start ()
2
텍스트 이동 속도를 나타냅니다
3
Direction = UP (UP (Direction = Right Direction = 왼쪽)로 변경할 수 있습니다.
4
높이 = 116 너비 = 188
5
움직이는 텍스트의 배경색을 나타냅니다 (빨간색, 노란색, 파란색, 은색 등의 색상으로 변경할 수 있습니다.)
4. 실험 평가 :
평가 지표
자기 평가
활동의 질
클라이언트 웹 페이지의 코드 기능 분석은 매우 명확합니다.
6
클라이언트 웹 페이지의 코드 기능 분석이 더 명확합니다.
5
클라이언트 웹 페이지에서 코드의 역할 분석 및 일반적인 이해
3
클라이언트 웹 페이지의 코드 기능 분석을 개선해야합니다.
2
____________________________________________________________
____________________________________________________________
____________________________________________________________
____________________________________________________________
____________________________________________________________
____________________________________________________________
__________________________________________________________________________________________________
__________________________________________________________________________________________________