Dreamweaver에서 이미지, 동영상, 색상, 스크립트, 링크, 라이브러리 항목 등의 에셋을 사용하는 방법을 살펴봅니다.
에셋 정보
Adobe Dreamweaver에서는 사이트에 저장된 이미지, 동영상, 색상, 스크립트 및 링크와 같은 에셋을 관리하고 미리 볼 수 있습니다. 또한 에셋을 현재 문서의 페이지로 직접 드래그하여 삽입할 수도 있습니다.
에셋은 다양한 소스에서 얻을 수 있습니다. 예를 들어 Adobe® Fireworks®나 Adobe® Flash® 등의 애플리케이션에서 에셋을 만들거나, 다른 작업자로부터 에셋을 받거나, 클립아트 CD 또는 그래픽 웹 사이트에서 에셋을 복사할 수 있습니다.
또한 Dreamweaver에서는 라이브러리와 템플릿이라는 두 가지 특별한 유형의 에셋을 사용할 수 있습니다. 두 가지 에셋은 모두 링크된 에셋입니다. 즉, 라이브러리 항목이나 템플릿을 편집하면 Dreamweaver에서 해당 에셋이 사용된 모든 문서가 업데이트됩니다. 라이브러리 항목은 일반적으로 사이트 로고나 저작권 같은 작은 디자인 에셋을 나타냅니다. 보다 넓은 디자인 영역을 관리하려면 템플릿을 대신 사용합니다.
라이브러리 항목 정보
라이브러리는 웹 페이지에 배치할 수 있는 개별 에셋 또는 에셋 사본을 모아 놓은 Dreamweaver의 특수 파일입니다. 라이브러리에 있는 이러한 에셋을 라이브러리 항목이라고 합니다. 라이브러리에 저장할 수 있는 항목으로는 이미지, 표, 사운드 및 Adobe Flash로 만든 파일 등이 있습니다. 라이브러리 항목을 편집할 때마다 이 항목을 사용하는 모든 페이지를 자동으로 업데이트할 수 있습니다.
예를 들어 회사의 대규모 사이트를 구축하면서 모든 페이지에 슬로건을 표시하려는 경우를 가정해 봅니다. 이러한 경우 슬로건이 들어 있는 라이브러리 항목을 만들고 모든 페이지에서 이 라이브러리 항목을 사용할 수 있습니다. 슬로건이 바뀌면 라이브러리 항목을 변경하여 항목이 사용된 모든 페이지를 자동으로 업데이트할 수 있습니다.
Dreamweaver에서는 각 사이트의 로컬 루트 폴더 내에 있는 Library 폴더에 라이브러리 항목을 저장합니다. 각 사이트마다 자체 라이브러리가 있습니다.
문서의 body 섹션에 있는 텍스트, 표, 양식, Java 애플릿, 플러그인, ActiveX 요소, 내비게이션 바, 이미지 등의 모든 요소에서 라이브러리 항목을 만들 수 있습니다.
이미지와 같이 링크된 항목의 경우 라이브러리에는 항목에 대한 참조만 저장됩니다. 라이브러리 항목이 올바르게 작동하려면 원본 파일이 지정한 위치에 유지되어야 합니다.
그러나 라이브러리 항목에 이미지를 저장하는 것이 유용할 수도 있습니다. 예를 들어 라이브러리 항목에 전체 img 태그를 저장할 수 있어 이미지의 alt 텍스트 또는 src 속성까지도 쉽게 변경할 수 있습니다. 그러나, 이미지의 width 및 height 속성을 변경할 때는 이미지 편집기에서 이미지의 실제 크기를 변경하는 경우가 아니면 이 방법을 사용하지 마십시오.
라이브러리 항목에 링크가 포함된 경우 새 사이트에서는 이 링크가 작동하지 않습니다. 또한 라이브러리 항목의 이미지는 새 사이트로 복사되지 않습니다.
라이브러리 항목을 사용하면 Dreamweaver에서 웹 페이지에 항목 자체가 아닌 항목에 대한 링크를 삽입합니다. 즉, Dreamweaver에서는 해당 항목에 대한 HTML 소스 코드의 사본을 문서에 삽입하고 외부의 원본 항목에 대한 참조가 포함된 HTML 주석을 추가합니다. 이러한 외부 참조를 통해 자동 업데이트가 가능합니다.
Dreamweaver 비헤이비어가 연결된 요소를 포함하는 라이브러리 항목을 만들 때 Dreamweaver에서는 이 요소 및 해당 이벤트 핸들러(onClick, onLoad 또는 onMouseOver와 같은 액션을 트리거하는 이벤트 및 해당 이벤트가 발생할 때 호출하는 액션을 지정하는 속성)를 라이브러리 항목 파일로 복사합니다. 연결된 JavaScript 함수는 Dreamweaver에서 라이브러리 항목에 복사되지 않습니다. 대신 라이브러리 항목을 문서에 삽입할 때 Dreamweaver에서 적절한 JavaScript 함수를 문서의 head 섹션에 자동으로 삽입합니다(기존에 이 함수가 없는 경우).
JavaScript를 하드 코딩하는 경우(Dreamweaver 비헤이비어를 사용하지 않고 직접 만드는 경우) 코드 실행 시 JavaScript 호출 비헤이비어를 사용하면 JavaScript 코드를 라이브러리 항목의 일부로 만들 수 있습니다. Dreamweaver 비헤이비어를 사용하지 않고 코드를 실행하면 코드가 라이브러리 항목의 일부로 유지되지 않습니다.
라이브러리 항목의 비헤이비어를 편집하려면 특정 조건에 맞아야 합니다. 라이브러리 항목은 해당 요소의 코드가 head 섹션의 일부이므로 스타일 시트를 포함할 수 없습니다.
