2009/07/05 02:48
[Expression Media] 2. EM을 이용한 HTML 갤러리 생성 Silverlight2009/07/05 02:48
앞에서 언급했듯이 Expression Media를 이용하면 전문가가 아니어도 매우 간단한 작업만으로 원하는 형태의 문서를 만들어 낼 수 있습니다.
본 실습을 위해 먼저 Expression Media를 설치해야 합니다. Try 버전은 다음의 주소에서 다운로드 받을 수 있습니다. (EM 다운로드 받기 : http://www.microsoft.com/downloads/details.aspx?FamilyId=CD359E7D-FD27-4901-BAFF-6D564CFBD700&displaylang=en )
다운로드가 완료되면 설치 후 EM을 실행합니다.
평가판 이기에 계속 버튼을 클릭하고 진행합니다.
이제 몇 가지 이미지를 추가해서 웹 문서 형태의 포토 갤러리를 생성해 보겠습니다.
로컬 컴퓨터에 있는 이미지 몇 장을 선택합니다.
선택한 이미지를 Expression Media에 끌어다 놓습니다.
아래의 이미지 처럼 작업 영역에 사용할 미디어 파일이 추가되어 있는 것을 확인할 수 있습니다.
Expression Media 상단 메뉴에서 "만들기"를 선택하고 HTML 갤러리를 선택합니다.
그러면 HTML 옵션창이 활성화 됩니다.
테마탭의 사이트 제목란에 적당한 이름을 적어 줍니다.
그리고 바로 아래에 있는 테마 선택상자에서 원하는 테마를 선택합니다. 저는 '깔끔'을 선택 했습니다.
다음으로 인덱스 테이블이나 축소판 그림 그리고 미디어를 원하는대로 선택합니다.
설정 탭에서는 출력되는 문서 속성을 설정합니다.
문서의 확장명을 무엇으로 할 것인지 동영상이 포함되어 있는지 등을 선택합니다.
그 다음 왼쪽 하단에 있는 옵션 버튼을 클릭하여 저장할 이름을 결정합니다.
서버 탭에서는 FTP 설정을 통해 원격 저장을 가능하게 해줍니다.
설정이 모두 끝났으면 만들기 버튼을 선택합니다.
문서가 생성될 적절한 폴더를 선택하고 확인 버튼을 클릭합니다.
아래의 그림과 같은 웹 사이트가 생성되었습니다.
화면의 쎔네일 이미지를 클릭해 봅니다.
그러면 큰 이미지를 가지고 있는 페이지로 전환되고, 큰 이미지를 보여주는 화면에서 다른 화면으로의 이동이 쉽도록 상단에 네비게이션이 제공되는 것을 확인할 수 잇습니다.
전에 이런 간단한 형태의 문서를 만들 때는 웹 문서를 만드는데 필요한 기술을 알아야지만 원하는 결과물을 만들어 낼수 있었습니다. 그러나 Expression Media는 Rich한 웹 문서를 전문적인 기술이 없어도 너무나 쉽게 만들어 줍니다.
문서가 생성된 디렉토리를 보면1개의 HTML 파일과 3개의 폴더를 확인할 수 있습니다.
index.htm은 생성된 문서이고, assets 폴더에는 자바스크립트 파일과 네비게이션에 필요한 이미지 아이콘들이 포함되어 있습니다. preview 폴더에는 웹 갤러리가 생성될 때 메인 페이지에 노출될 썸네일 이미지가 생성되어 있습니다. Source 폴더에는 큰 이미지를 보여주는 웹 문서와 원본 이미지가 포함되어 있습니다.
사용자 입맛에 맞게 꾸밀려면 약간의 작업이 필요하겠지만 그럴 필요없이 테마만으로 충분하다면 단지 사진 몇장 드래그와 버튼 몇개 클릭만으로 웹 갤러리를 만드는 Expression Media의 기능이 매우 만족스럽습니다.
[참고]
1. OMSS, http://silverlight.net/Learn/videocat.aspx?cat=6
2. Expression Media Help Guide
본 실습을 위해 먼저 Expression Media를 설치해야 합니다. Try 버전은 다음의 주소에서 다운로드 받을 수 있습니다. (EM 다운로드 받기 : http://www.microsoft.com/downloads/details.aspx?FamilyId=CD359E7D-FD27-4901-BAFF-6D564CFBD700&displaylang=en )
다운로드가 완료되면 설치 후 EM을 실행합니다.
평가판 이기에 계속 버튼을 클릭하고 진행합니다.
이제 몇 가지 이미지를 추가해서 웹 문서 형태의 포토 갤러리를 생성해 보겠습니다.
로컬 컴퓨터에 있는 이미지 몇 장을 선택합니다.
선택한 이미지를 Expression Media에 끌어다 놓습니다.
아래의 이미지 처럼 작업 영역에 사용할 미디어 파일이 추가되어 있는 것을 확인할 수 있습니다.
Expression Media 상단 메뉴에서 "만들기"를 선택하고 HTML 갤러리를 선택합니다.
그러면 HTML 옵션창이 활성화 됩니다.
테마탭의 사이트 제목란에 적당한 이름을 적어 줍니다.
그리고 바로 아래에 있는 테마 선택상자에서 원하는 테마를 선택합니다. 저는 '깔끔'을 선택 했습니다.
다음으로 인덱스 테이블이나 축소판 그림 그리고 미디어를 원하는대로 선택합니다.
설정 탭에서는 출력되는 문서 속성을 설정합니다.
문서의 확장명을 무엇으로 할 것인지 동영상이 포함되어 있는지 등을 선택합니다.
그 다음 왼쪽 하단에 있는 옵션 버튼을 클릭하여 저장할 이름을 결정합니다.
서버 탭에서는 FTP 설정을 통해 원격 저장을 가능하게 해줍니다.
설정이 모두 끝났으면 만들기 버튼을 선택합니다.
문서가 생성될 적절한 폴더를 선택하고 확인 버튼을 클릭합니다.
아래의 그림과 같은 웹 사이트가 생성되었습니다.
화면의 쎔네일 이미지를 클릭해 봅니다.
그러면 큰 이미지를 가지고 있는 페이지로 전환되고, 큰 이미지를 보여주는 화면에서 다른 화면으로의 이동이 쉽도록 상단에 네비게이션이 제공되는 것을 확인할 수 잇습니다.
전에 이런 간단한 형태의 문서를 만들 때는 웹 문서를 만드는데 필요한 기술을 알아야지만 원하는 결과물을 만들어 낼수 있었습니다. 그러나 Expression Media는 Rich한 웹 문서를 전문적인 기술이 없어도 너무나 쉽게 만들어 줍니다.
문서가 생성된 디렉토리를 보면1개의 HTML 파일과 3개의 폴더를 확인할 수 있습니다.
index.htm은 생성된 문서이고, assets 폴더에는 자바스크립트 파일과 네비게이션에 필요한 이미지 아이콘들이 포함되어 있습니다. preview 폴더에는 웹 갤러리가 생성될 때 메인 페이지에 노출될 썸네일 이미지가 생성되어 있습니다. Source 폴더에는 큰 이미지를 보여주는 웹 문서와 원본 이미지가 포함되어 있습니다.
사용자 입맛에 맞게 꾸밀려면 약간의 작업이 필요하겠지만 그럴 필요없이 테마만으로 충분하다면 단지 사진 몇장 드래그와 버튼 몇개 클릭만으로 웹 갤러리를 만드는 Expression Media의 기능이 매우 만족스럽습니다.
[참고]
1. OMSS, http://silverlight.net/Learn/videocat.aspx?cat=6
2. Expression Media Help Guide
'Silverlight' 카테고리의 다른 글
| [Expression Media] 4. Expression Media로 슬라이드 쇼 만들기 (0) | 2009/07/17 |
|---|---|
| [Expression Media] 3. 카탈로그 다루기. (0) | 2009/07/06 |
| [Expression Media] 2. EM을 이용한 HTML 갤러리 생성 (0) | 2009/07/05 |
| [Expression Media] 1. Expression Media란? (0) | 2009/07/04 |
| [엘리의 실버라이트 2.0] Silverlight 시계 만들기 (1) (2) | 2008/10/21 |
| [엘리의 실버라이트 2.0] Silverlight 시작 (6) | 2008/10/02 |
