HTML 및 CSS로 프레젠테이션 슬라이드를 만드는 방법

새로운 프레젠테이션 소프트웨어를 배우는 데 지쳤습니까? 기존 웹 개발 기술을 활용하십시오! 이 튜토리얼은 HTML, CSS 및 JavaScript (이미 알고있는 핵심 웹 기술)를 사용하여 놀라운 대화식 프레젠테이션을 구축하는 방법을 보여줍니다. 우리는 최신 HTML5로 슬라이드를 구조화하고 CSS로 스타일을 지정하고 JavaScript를 사용하여 동적 효과를 추가합니다. 이 초보자 친화적 인 가이드는 실용적인 프로젝트를 통해 HTML5, CSS 및 JavaScript 기술을 구축하는 데 적합합니다. 동적 HTML5 슬라이드 데크 또는 JavaScript 구동 PPT 대안을 만들 수도 있습니다! 다음은 최종 프레젠테이션의 미리보기입니다 :

시작 준비가 되셨습니까? 다이빙합시다.

1. 프로젝트 설정

먼저,이 파일을 사용하여 간단한 프로젝트 디렉토리를 만듭니다

이 파일은 처음에는 비어 있습니다

2. 기본 html 구조 ()

파일에 다음 코드를 추가하십시오. 여기에는 글꼴 멋진 아이콘 (스타일링), 스타일 시트 및 JavaScript 파일이 포함됩니다. 클래스가있는 는 우리의 프레젠테이션을 개최합니다. <strong> </strong> <content> 실제 슬라이드 컨텐츠는 클래스 (CSS에 정의)는 보이는 슬라이드를 제어합니다. 3. CSS를 사용한 스타일 () </content>

CSS는 시각적 프레젠테이션 및 슬라이드 전환을 처리합니다.

클래스를 사용하여 화면 방향을 관리합니다 (전체 화면의 경우 0, 작은 화면의 경우 1). (0으로 초기화)는 슬라이드 수를 추적합니다. (참고 : 전체 CSS 및 JavaScript 코드는 여기에 포함하기에는 너무 광범위하지만 아래 스 니펫은 주요 기능을 보여줍니다. 전체 코드는 원본을 참조하십시오.)

.

4. JavaScript 기능 ()
• JavaScript는 슬라이드 내비게이션 및 전체 화면 모드를 처리합니다. 주요 기능에는 다음이 포함됩니다. index.html
  및
  • :이 함수는 moveToLeftSlide() 클래스를 적절한 슬라이드에 제거하고 추가하여 슬라이드 전환을 관리합니다. 및 : 이들은 전체 화면 모드를 전환합니다 및 moveToRightSlide() : 첫 번째 또는 마지막 슬라이드에 내비게이션 버튼을 숨 깁니다. .show : 현재 슬라이드 번호를 업데이트합니다
  : 현재 슬라이드 번호를 표시합니다
  • : 변수를 초기화하고 이벤트 리스너를 설정합니다. 이 기능은 각 슬라이드 전환 후에 호출됩니다 fullScreenMode() 이 방법은 JavaScript를 사용하여 슬라이드 가시성을 동적으로 관리하여 대화식 프레젠테이션을 만들 수있는 깨끗하고 효율적인 방법을 제공합니다. 완전히 기능적인 프레젠테이션을 위해 원본의 전체 CSS 및 JavaScript 코드를 포함해야합니다. 이 튜토리얼은보다 복잡하고 시각적으로 매력적인 HTML 프레젠테이션을 구축하기위한 토대를 제공합니다. 슬라이드 데크를 향상시키기 위해 애니메이션, 전환 및 고급 JavaScript 기능을 추가하여 자세히 알아보십시오.

위 내용은 HTML 및 CSS로 프레젠테이션 슬라이드를 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!