Dreamweaver에서 간단한 롤오버 이미지를 만드는 방법 - 더미

롤오버는 Dreamweaver에 롤오버 전용 대화 상자 (삽입 롤오버 이미지 대화 상자)가 포함 된 인기있는 기능입니다. 이름에서 알 수 있듯이 롤오버 이미지는 사용자가 이미지 위에 커서를 올리면 반응합니다. 그 효과는 개가 사자 그림으로 대체되거나 극적으로 변하는 단어처럼 변할 수 있습니다.

비헤이비어 패널에서 이미지 스왑 옵션을 사용하여보다 복잡한 롤오버 이미지 효과를 만들 수 있습니다. 스왑 이미지 옵션을 사용하면 여러 이미지를 동시에 변경할 수 있습니다.

Dreamweaver의 이미지 삽입 롤오버 대화 상자를 사용하여 두 이미지로 간단한 롤오버 효과를 만들려면 다음 단계를 따르십시오.

1. 롤오버를 표시 할 페이지에 커서를 놓습니다.

   롤오버 효과에는 최소한 두 개의 이미지가 필요합니다. 하나는 초기 상태이고 다른 하나는 롤오버 상태입니다. 두 개의 다른 이미지 또는 두 개의 유사한 이미지를 사용할 수 있지만 둘 다 같은 크기 여야합니다. 그렇지 않으면 두 이미지가 페이지의 정확히 동일한 공간에 표시되어야하기 때문에 이상한 배율 효과가 나타납니다.

   -

2. 삽입 → 이미지 → 롤오버 이미지를 선택하십시오.

   또는 일반 삽입 패널의 이미지 아이콘에서 사용할 수있는 드롭 다운 목록을 사용하고 이미지 롤오버를 선택할 수 있습니다.

   이미지 롤오버 삽입 대화 상자가 나타납니다.

   

3. 이미지 이름 상자에 이미지의 이름을 지정하십시오.

   이미지와 같은 요소에 비헤이비어를 적용하려면 비헤이비어 스크립트가 참조 할 수 있도록 요소에 이름이 있어야합니다. 공백이나 특수 문자를 사용하지 않는 한 원하는 이름을 지정할 수 있습니다.

4. 원본 이미지 상자에 표시 할 첫 번째 이미지를 지정하십시오. 찾아보기 단추를 사용하여 이미지를 찾아 선택하십시오.

   이미지가 로컬 사이트 폴더에 없으면 Dreamweaver는 롤오버를 만들 때 사이트에 복사합니다.

5. 롤오버 이미지 상자에 방문자가 커서를 첫 번째 이미지 위로 이동할 때 보이게하려는 이미지를 입력하십시오.

   다시, 찾아보기 단추를 사용하여 이미지를 찾아 선택할 수 있습니다.

6. 페이지를 처음로드 할 때 모든 롤오버 이미지를 브라우저의 캐시에로드하려면 미리 롤오버 이미지 미리로드 확인란을 선택합니다.

   이 단계를 수행하지 않으면 원래 이미지 위에 커서를 올릴 때까지 두 번째 이미지가 다운로드되지 않으므로 방문자가 지연 될 수 있습니다.

7. 대체 텍스트 필드에 이미지에 대한 설명을 입력하십시오.

   대체 텍스트는 선택 사항이지만 키워드 사용은 검색 엔진 최적화를 향상시킬 수 있으므로 권장됩니다.비슷하게 대체 텍스트는 웹 접근성의 핵심 부분으로, 시각 장애인이나 제한된 시력 또는 이동성을 가진 사람들이 사용하는 스크린 리더라고하는 특수 브라우저에서이 텍스트를 크게 읽으므로 이미지가 보이지 않으면 대체 텍스트가 브라우저에만 표시됩니다.

8. 클릭했을 때 URL로 이동 상자에 웹 주소를 입력하거나 링크하여 사이트에서 링크하려는 다른 페이지를 찾으십시오.

   URL을 지정하지 않으면 Dreamweaver에서 자동으로 # 기호를 자리 표시 자로 코드에 삽입합니다.

   # 기호는 아무데도 연결하지 않는 링크를 만드는 일반적인 기술입니다. 다른 페이지로 연결되지 않는 롤오버 이미지는 많은 용도로 사용되기 때문에이 방법이 유용합니다. 롤오버를 연결하려면 # 기호를 다른 페이지로 연결되는 링크로 교체해야합니다.

9. 확인을 클릭하십시오.

   이미지는 롤오버로 자동 설정됩니다.

10. 롤오버가 작동하는지 확인하려면 파일을 저장 한 다음 작업 영역 상단의 지구 모양 아이콘을 클릭하여 웹 브라우저에서 페이지를 미리 봅니다.

Dreamweaver의 디자인보기에서 또는 라이브 뷰 옵션을 사용하여 롤오버가 어떻게 작동하는지 확인할 수 있습니다. 작업 공간의 왼쪽 상단에서 라이브 버튼을 클릭하면 Dreamweaver가 기본적으로 Chrome 브라우저와 비슷한 페이지를 표시하는 웹 브라우저로 바뀝니다.

컴퓨터에서 롤오버 이미지가 포함 된 페이지를 미리 볼 때 일부 웹 브라우저는 ActiveX 컨트롤이 페이지를 볼 수 있도록 허용해야한다는 경고를 표시합니다. 이것은 페이지가 저장된 동일한 컴퓨터에서 페이지가 열릴 때만 나타나는 보안 경고입니다.

웹 서버에 페이지를 게시 한 다음 인터넷 연결을 통해 볼 경우 사용자와 사이트 방문자에게이 오류가 표시되지 않습니다.

크레디트: istockphoto의 작품. co.kr