웹페이지 수업안, 초보자를 위한 수업안_HTML/Xhtml_웹페이지 제작

교육주제
웹페이지
적용등급
고등학교 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)의 특성을 설명합니다.
탐색: 학생 작업, 웹페이지 탐색 시 웹페이지의 소스 파일 보기.

4. 브라우저에 정적 웹페이지가 표시되는 방식
정적 웹 페이지는 서버에서 동일한 형식으로 클라이언트에 전송되는 파일이지만, 이 파일이 브라우저에 도달한 후 브라우저는 HTML 코드에 특정 HTML 코드를 특정 형식으로 표시하여 사용자가 보는 웹페이지를 구성합니다.

질문: 정적 웹 페이지는 브라우저에 어떻게 표시되나요?
활동: 교사는 브라우저의 해석 과정과 하이퍼텍스트 마크업 언어의 효과를 설명합니다.

5동적 웹페이지의 개념
동적 웹 페이지는 사용자 탐색 중에 컴퓨터 시스템에 의해 자동으로 생성되는 웹 페이지를 의미하며 일반적으로 실시간 정보를 표시하거나 사용자 상호 작용에 따라 특정 콘텐츠를 표시하는 데 사용됩니다.
동적 웹페이지의 특징: 상호작용, 자동 업데이트, 장소, 시간, 사람에 따른 변경
동적 웹페이지의 일반적인 형태: 카운터, 채팅방, 토론 게시판, BBS, 동문 기록 등 동적 웹페이지를 구성하는 일반적인 상황은 두 가지입니다. 순수 클라이언트 모드로 구성된 동적 웹페이지와 클라이언트-서버 모드로 구성된 동적 웹페이지입니다.

질문: 대화형 작업이 포함된 웹페이지는 무엇으로 구성되어 있나요?
활동: 교사는 동적 웹 페이지를 형성하는 두 가지 일반적인 상황, 순수 클라이언트 메소드와 브라우저로 구성된 동적 웹 페이지를 설명합니다 / 서버모드로 구성되는 동적 웹페이지의 각 구성방식과 특징.
커뮤니케이션: 시스템 팔레트를 사용해 색상을 정확하게 조정하는 방법

6, 동적 웹 페이지 표시의 원리
순수한 클라이언트 메소드로 구성된 동적 웹페이지: 이 메소드는 서버와의 상호작용이 필요하지 않으며 일반적으로 JAVA작은 프로그램과 스크립팅 언어. 동적 성능은 다음과 같습니다. javascript, javaapplet 등등..

수업 후 묵상

교육 계획 디자이너

호
/주소/우편번호

이메일

연락처

"웹" 학습 작업 시트

1. 웹페이지 관련 개념

학생들은 웹을 탐색하고 명확하고 합리적이며 독특한 페이지 레이아웃이 있는 웹사이트를 보고 다음 작업을 완료합니다.

웹사이트 이름: 홈페이지 URL: 페이지 제목:

2.

정적 웹페이지와 동적 웹페이지

1.

정적 웹페이지는 어떤 언어로 작성되어 있나요?
?__________________________________________ 2, 동적 웹페이지의 특징은 무엇인가요? ________________________________________

3.

일반적인 동적 웹페이지 기술은 무엇입니까
_____________________________________________
3. 실험:클라이언트에서 역동적인 웹페이지 효과를 경험해보세요
실험적 요구 사항: (1) 다음의 간단한 동적 웹 페이지 예를 통해 클라이언트 측 웹 페이지에 동적 효과를 적용하는 몇 가지 간단한 방법에 대해 알아보세요.
(2) 프로그램에서 특정 개체의 속성을 수정하여 웹페이지의 동적 효과를 수정하는 간단한 방법을 익힙니다. .
(3) 웹페이지 특수효과 코드를 웹페이지에 삽입하는 체험활동을 통해 다이내믹한 웹페이지를 쉽게 만드는 방법을 터득합니다. 암호.
실험 단계의 예:
1. 동적 웹 페이지의 다음 소스 코드를 입력하고, 이 코드 세그먼트에 의해 생성된 웹 페이지가 브라우저에 미치는 동적 효과를 관찰하고 경험해 보세요.