이미지 다운로드 속도 향상
웹 페이지에 이미지가 너무 많으면 탐색 속도에 영향을 미칩니다. Dreamweaver는 사전 로드된 이미지를 쉽게 설정하여 이미지 다운로드 속도를 높이고 사이트가 최대한 빨리 사용자에게 표시되도록 할 수 있습니다.
창의적인 생각 Dreamweaver MX 2004 소프트웨어의 새 페이지를 연 다음 레이블 패널을 열고 [동작]에서 [이미지 미리 로드] 옵션을 선택하여 이미지 다운로드 속도를 높입니다.
작업 단계
(1) 새 파일을 생성합니다. 작업은 그림 36-1과 같습니다.
(2) 페이지를 저장하고 그림을 삽입합니다. 그림을 삽입할 때 상대 경로를 묻는 메시지를 표시하지 않으려면 먼저 페이지를 "36.htm"으로 저장하세요. 그런 다음 그림 36-2와 같이 미리 로드할 이미지를 삽입합니다.
그림 36-2 그림 삽입
(3) "이미지 미리 로드" 기능을 추가합니다. 그림 36-3과 같이 Dreamweaver의 비헤이비어 패널을 사용하여 "이미지 사전 로드" 기능을 추가합니다.
(4) 프리로드할 사진을 선택하면 그림 36-4와 같이 동작합니다.
팁: 사이트에 여러 개의 큰 이미지가 있는 경우 [미리 로드 이미지] 위의 [+] 아이콘을 클릭하여 여러 개의 미리 로드 이미지를 추가할 수 있습니다. 구체적인 작업은 그림 36-4와 같습니다.
(5) 파일을 저장하여 작업을 완료합니다. 이러한 방식으로 이미지 다운로드 속도를 가속화할 수 있어 사용자가 웹을 탐색할 때 너무 오래 기다리지 않게 되며 이는 웹사이트 성능을 향상시키는 데 큰 의미가 있습니다.
무작위 광고 이미지
시청자는 웹을 검색할 때 웹 페이지에서 동적으로 업데이트되는 광고 이미지가 정적이고 고정된 이미지보다 더 역동적이고 매력적이라는 것을 알 수 있습니다. 웹페이지에서 임의의 광고 이미지를 생성하는 방법이 이 예에서 연구할 문제입니다.
효과 설명 웹 페이지 탐색 시 그림 38-1과 같이 웹 페이지의 배너 영역에 광고 이미지가 나타납니다. 이후에는 그림 38-2와 같이 광고 이미지가 2초마다 업데이트되며 광고 이미지가 무작위로 나타난다.
창의적인 아이디어 Macromedia의 확장 플러그인 Advance_Random_Images를 사용하면 웹 페이지에 임의의 광고 이미지를 쉽게 만들 수 있습니다.
작업 단계
(1) 플러그인을 설치합니다. 그림 38-3과 같이 메뉴 표시줄에서 [명령] | [확장 관리] 명령을 사용하여 [Macromedia Extension Manager] 대화 상자를 열고 Advance_Random_Images 확장을 설치합니다.
(2) 명령을 호출합니다. 이 예제의 소스 폴더에 있는banner.htm 파일을 열고, 그림 38-4와 같이 광고를 삽입하려는 위치에 커서를 놓은 후 [AdvancedRandomImages] 명령을 호출합니다.
(3) 이미지를 설정합니다. 그림 38-5와 같이 팝업되는 [RandomImages] 대화상자에서 이미지 변환 속성을 설정합니다.
(4) 사진을 추가합니다. 그림 38-6과 같이 첫 번째 광고 이미지를 추가합니다.
팁: 이 예에 사용된 그림은 이 예의 재료 폴더에 있는 배너 폴더에 배치됩니다.
(5) 동일한 방법으로 다른 사진을 추가한 후 그림 38-7과 같이 [확인] 버튼을 클릭하여 동작을 확인합니다.
(6) 그런 다음 페이지 파일을 저장하고 미리 보면 임의의 광고 이미지 효과가 생성됩니다. 독자들은 이 예제의 소재 폴더에 있는 배너ok.htm 효과 파일을 참조하여 제작 결과가 올바른지 확인할 수 있습니다. 이 시점에서 이 예제가 완료되었습니다.
이 예시에서 설명하는 기술은 다양한 웹사이트에서 공통적으로 사용된다. 예를 들어, 국내 여러 대형 포털사이트에서는 이러한 변신 광고를 거의 모든 페이지에서 볼 수 있어 독자들이 이러한 내용을 참고해 더 많이 연습할 수 있다.