Dreamweaver로 슬라이드 쇼를 만드는 방법

click fraud protection
디아포지티브

슬라이드쇼는 최근 콘텐츠를 강조 표시하는 데 사용되는 일반적인 웹 사이트 인터페이스입니다.

이미지 크레디트: Miriam2009/iStock/게티 이미지

Dreamweaver는 Adobe의 전문 웹 개발 소프트웨어이며 웹 페이지 구축을 위한 다양한 기능을 제공합니다. 이러한 기능은 백엔드 데이터베이스 통합에서 고정된 간격으로 이미지를 변경하는 JavaScript 슬라이드 쇼에 이르기까지 다양합니다. Dreamweaver의 표준화된 JavaScript를 사용하면 웹 사이트 개발자가 코드를 직접 살펴보지 않고도 슬라이드쇼를 만들 수 있습니다. "슬라이드쇼"라는 웹 요소는 PowerPoint 슬라이드 데크와 동일한 이름을 공유하지만 Dreamweaver의 출력은 모든 웹 브라우저에서 볼 수 있는 표준 HTML입니다.

1 단계

Dreamweaver를 실행하고 "파일" 메뉴에서 웹사이트 프로젝트를 엽니다. 슬라이드쇼가 통합될 웹사이트 프로젝트의 페이지로 이동합니다.

오늘의 비디오

2 단계

"삽입"을 클릭한 다음 최상위 레이어 메뉴에서 "레이어"를 클릭합니다. 그러면 대화 상자가 열립니다. 해당 상자의 레이어 유형에 대해 "이미지"를 클릭합니다.

3단계

"찾아보기"를 클릭하고 이미지 디렉토리로 이동합니다. 첫 번째 레이어의 이미지를 선택하십시오. 이것은 슬라이드쇼에 표시되는 첫 번째 슬라이드가 됩니다. 이미지가 아닌 다른 HTML 페이지를 가리킬 수도 있습니다. 이것은 웹사이트 슬라이드쇼에서 텍스트와 클릭 가능한 링크를 통합하는 한 가지 방법입니다.

4단계

이전 두 단계를 반복하여 표시할 각 슬라이드에 대해 새 레이어와 적절한 콘텐츠를 추가합니다. 웹 브라우저에서 슬라이드쇼를 표시하는 데 사용되는 JavaScript가 모든 콘텐츠를 미리 가져오기 때문에 웹 페이지가 적당한 크기로 로드되도록 슬라이드쇼를 6개 또는 7개 이하의 요소로 유지하고 싶을 것입니다. 시각.

5단계

"창"을 클릭한 다음 최상위 레이어 메뉴에서 "타임라인"을 클릭합니다. 타임라인 편집기가 나타납니다. 생성한 레이어 세트의 각 이미지에 대한 지속 시간을 입력합니다. 표시할 첫 번째 이미지를 선택하고 해당 타임라인 항목을 마우스 오른쪽 버튼으로 클릭한 다음 "키프레임 추가"를 선택합니다.

6단계

선택한 키프레임에 대한 레이어/이미지 조합을 선택하고 타임라인에서 원하는 각 레이어와 이미지에 대해 이 절차를 반복합니다.

7단계

"확인"을 클릭하여 설정을 저장합니다.