차례:
비디오: [Adobe Creative Cloud] CSS Designer 고급 기능 소개 2024
내용이 얼마나 중요하더라도 이미지, 비디오 및 멀티미디어는 Dreamweaver 방문자에게 큰 인상을줍니다. 웹 사이트. 다음은 웹 페이지에서 이미지, 비디오 및 기타 멀티미디어를 관리하기위한 몇 가지 팁입니다.
작은 파일을 큰 파일에 연결
큰 이미지는 아름답지만 작은 이미지보다 다운로드하는 데 더 많은 시간이 필요합니다. 한 페이지에 많은 이미지를 보여주는 일반적인 기술은 축소판, 라고 불리는 각 이미지의 작은 버전을 만든 다음 각 이미지를 더 큰 버전의 동일한 이미지에 연결하는 것입니다.
이 기술은 비디오 또는 애니메이션 컬렉션을 선보일 때도 효과적입니다. 비디오의 단일 프레임에서 스틸 이미지를 만든 다음이를 각 비디오 파일에 링크 된 축소판으로 사용할 수 있습니다.
Cinembargo 웹 사이트의 사진 갤러리를 보여주는 그림에서 알 수 있듯이이 기술을 사용하면 하나의 사진 갤러리에 많은 사진 또는 비디오 파일을 포함시킬 수 있습니다. 각 축소판을 클릭하면 해당 이미지 위에 더 큰 버전의 동일한 이미지가 표시됩니다.
이 대화식 이미지 효과는 Dreamweaver의 비헤이비어 기능을 사용하여 만들어졌습니다. Dreamweaver를 사용하여 이미지를 비디오, 애니메이션 및 기타 파일 유형에 연결할 수도 있습니다.
원본을 항상 저장하십시오.
대부분의 디자이너는 Photoshop과 같은 프로그램을 사용하여 웹용 이미지를 만듭니다. 최상의 결과를 얻으려면 고해상도 버전의 사진이나 그래픽을 사용하여 모든 색상 보정, 수정 및 기타 편집 작업을 수행해야합니다.
그러나 이미지가 웹 사이트를 방문하기 전에 파일을 압축하거나 (jpeg로 저장하는 경우) 또는 색상 수를 줄이려면 이미지를 최적화 할 수 있습니다. PNG 또는 GIF). 이미지를 최적화하는 프로세스로 인해 이미지를 더 빠르게 다운로드 할 수있을뿐만 아니라 이미지의 품질 또한 상당히 떨어집니다.
다음 그림에서는 AssetShield 웹 사이트를 볼 수 있습니다. 여기에는 비교적 큰 이미지가 포함되어있어 웹 브라우저에서 빠르게로드 할 수 있도록 최적화되었습니다.
이미지가 웹에 최적화 된 후에 다시 돌아가서 이미지를 수정하고 싶다면 원본 소스 파일을 수정하고 이미지를 압축하기 전에 저장 한 버전 또는 색상을 줄이면됩니다. 마찬가지로 Photoshop과 같은 프로그램에서 여러 레이어가있는 이미지로 작업하는 경우 해당 레이어를 병합해야 이미지를 웹 사이트에 포함 할 수 있습니다.
비디오 및 오디오 파일과 애니메이션은 웹 사이트에서 사용되기 전에 최적화되어야합니다.그리고 이미지 편집과 마찬가지로 추가 편집 작업을 수행하면 고해상도 버전으로 돌아갑니다.
자신 만의 이미지와 멀티미디어 파일을 만들거나 전문 디자이너를 고용하든, 가능한 한 최고 해상도로 모든 원본 이미지를 저장하는 시스템을 개발하여 나중에 이미지를 변경해야 할 필요가 있는지 확인하십시오.
