|
지난 시간에는 나모 웹에디터 2006에서 제공하는 템플릿과 테마를 써서 ‘케이크 하우스’ 웹사이트의 ‘시작(index.html)’ 페이지를 만들었다. 이번 시간에는 나모 웹에디터에 있는 포토 앨범 기능을 이용해서 케이크 종류를 사진과 함께 소개하는 ‘Cake(cake.html)’페이지를 만들어보겠다.
케이크 페이지에서는 케이크 하우스에서 판매하는 제품 종류를 사진과 함께 소개해본다. 여기에서 이용할 주요 기능은 포토 앨범 기능으로 이 기능을 쓰면 여러 장의 사진을 손쉽게 삽입할 수 있다. 또 한번 만든 포토 앨범 설정 정보를 저장해 놓았다가 다시 활용할 수도 있다.
포토 앨범은 여러 개의 그림을 문서에 쉽게 삽입하고 삽입한 그림들을 웹브라우저에서 편하게 볼 수 있게 하는 기능이다. 사진과 같이 파일 크기가 큰 그림을 웹 문서에 많이 넣으면 웹 브라우저가 웹 문서를 읽는 데 걸리는 시간이 길어질 뿐 아니라 그림을 보기도 불편하다.
나모 웹에디터의 포토 앨범을 쓰면 원본 그림 대신 원본을 축소한 썸네일을 자동으로 문서에 넣고, 썸네일을 클릭했을 때 원본 그림으로 연결되도록 하는 하이퍼링크를 자동으로 삽입해준다. 썸네일이란 원본 이미지보다 작고 간결하게 만들어진 이미지로 원본 이미지를 보지 않고도 어떤 이미지인지 짐작할 수 있게 도와준다. 완성된 케이크 페이지 썸네일을 누르면 왼쪽의 원본 그림이 바뀐다.
01 ‘사이트 관리자’의 사이트 구조도 영역에서 ‘케이크(menu.html)’를 더블 클릭한 뒤, 웹에디터 편집 창에 ‘Cake’ 문서가 열리면, 배너의 위치를 가운데로 옮긴다.
02 배너 앞에 커서를 놓는다.
 03 ‘태그 셀렉터’에서 ‘WebObj’ 태그를 선택한다. 이 태그는 나모 웹에디터에서만 쓰이는 기능(내비게이션 바, 배너 등)을 활성화하기 위해 자동으로 삽입된 태그다.
04 기본 도구 막대에서 ‘가운데 정렬’을 누르면 배너의 위치가 가운데로 바뀐다. 내비게이션 바 앞에 커서를 놓고 같은 방법으로 내비게이션 바 위치를 가운데로 오게 한다.
05 제품 소개 문구 아래 ‘Enter’ 키를 두 번 눌러 점 목록 스타일이 적용되지 않도록 한 뒤 메뉴에서 ‘도구→포토 앨범’을 선택한다.
06 이제 아래쪽에 있는 표 안에 제품을 소개하는 문구와 포토 앨범을 삽입해보자. 먼저 표 오른쪽에 있는 기본 문구를 지우고 제품에 대한 소개 문구를 입력한다.
07 ‘앨범 설정 정보’ 대화 상자가 나타나면 ‘새로 만들기’를 누른다.
08 ‘포토 앨범 유형 선택하기’ 대화 상자가 나타나면 왼쪽 목록에서 포토 앨범 스타일을 선택한다. 포토 앨범을 만들 때 썸네일과 원본 그림이 어떻게 표현되는지를 선택할 수 있다. 여기에서는 ‘원본 그림과 썸네일을 같은 웹 문서에서 보기’를 선택한 뒤 ‘다음’을 누른다.
이어서 ‘포토 앨범 파일 선택하기’ 대화 상자에서 ‘파일 추가’를 눌러 포토 앨범에 넣을 파일을 선택한다. 만약 폴더 전체에 있는 파일을 모두 추가하려면 ‘폴더 추가’를 누른다.
또 ‘열기’ 대화 상자에서 원하는 파일을 선택한 뒤 ‘열기’를 누른다. 연속된 여러 개의 파일을 선택하려면 ‘Shift’ 키를, 만약 연속되지 않은 여러 개의 파일을 선택하려면 ‘Ctrl’ 키를 누른 채 파일을 선택한다.
09 선택한 파일 목록이 나타난다. 파일의 순서를 바꾸려면 순서를 바꾸려는 파일을 선택한 뒤, ‘위로 옮기기’ 또는 ‘아래로 옮기기’를 누른 뒤 ‘다음’을 누른다. ‘선택 지우기’나 ‘모두 지우기’를 눌러 사진을 지울 수 있다.
10 ‘포토 앨범 썸네일 만들기’ 대화 상자가 나타나면 그림 효과, 썸네일의 크기, 원본 크기, 배경 효과 등을 지정한 뒤 ‘다음’을 누른다. 여기에서는 ‘효과’에서 ‘4방향 그림자’를 선택하고 썸네일의 너비와 높이는 ‘80’으로 지정한다. 원본 그림의 너비와 높이도 지정한다. ‘포토 앨범 모양’ 대화 상자에서는 썸네일이 포함되는 표의 속성을 설정할 수 있다. ‘선 종류’에서 ‘감추기’를 선택하고 표의 칸 수를 ‘3’으로 지정한 뒤 ‘다음’을 누른다.
11 ‘포토 앨범 설정’ 대화 상자에서 썸네일과 원본 그림을 저장할 경로를 지정하고, 포토 앨범 설정 파일 경로를 지정한 뒤 ‘마침’을 누른다.
12 포토 앨범이 만들어졌다.
13 이제 썸네일이 포함된 표의 속성을 조정하고 원본 그림의 위치를 왼쪽으로 옮겨 보자. 먼저 넣어진 원본 그림 파일을 선택한 뒤 ‘Ctrl+X’ 키를 눌러 잘라낸다.
14 왼쪽의 빈 그림을 선택한 뒤 ‘Ctrl+V’ 키를 눌러 잘라 낸 그림을 붙여 넣는다.
15 이제 썸네일이 들어 있는 표의 너비를 조정해 본다. 표 안에 커서를 놓으면 표와 셀 위에 속성 막대가 나타난다. 가장 바깥쪽의 표 속성 막대를 선택하면 표 전체가 선택된다.
16 표를 선택한 뒤 ‘Ctrl’ 키를 누른 채 가장 오른쪽의 표 경계선을 드래그해 크기를 조절한다. ‘Ctrl’ 키를 누른 채 드래그하면 각 셀의 너비를 동일하게 유지하면서 표의 전체 크기를 조절할 수 있다.
17 표를 선택한 뒤 ‘Ctrl’ 키를 누른 채 가장 오른쪽의 표 경계선을 드래그해 크기를 조절한다. ‘Ctrl’ 키를 누른 채 드래그하면 각 셀의 너비를 동일하게 유지하면서 표의 전체 크기를 조절할 수 있다.
포토 앨범 설정 파일은 포토 앨범을 만들 때 지정했던 각 단계의 여러 가지 속성 정보를 기억해두었다가 다음에 포토 앨범을 수정할 때 이용한다. ‘.npa’라는 확장자로 저장된다. 이번에는 앞서 만든 포토 앨범 설정을 그대로 가져와서 또 다른 포토 앨범을 넣어보도록 하겠다.
01 바로 아래 있는 표 안에 앞에서 설명한 것과 같이 제품 소개 문구를 입력한다. 포토 앨범을 넣을 곳에 커서를 놓은 뒤 메뉴에서 ‘도구→포토 앨범’을 선택한다.
02 ‘앨범 설정 정보’ 대화 상자가 뜨면 ‘앨범 설정 파일 열기’를 선택한 후 ‘열기’ 대화 상자에서 앨범 설정 파일을 선택한 뒤 ‘열기’를 누르면, ‘포토 앨범 유형 선택하기’ 대화 상자가 나타난다. 앞서 설정한 유형이 선택되어 있고, 똑같은 유형의 포토 앨범을 만들 때에는 바로 ‘다음’을 누르면 된다. ‘포토 앨범→파일 선택하기’ 대화 상자에서 포토 앨범을 구성할 파일을 선택한 뒤 ‘다음’을 누른다.
03 계속 ‘다음’을 누른 뒤 ‘마침’을 눌러 포토 앨범을 만든다.
04 앞에서 설명한 방법대로 원본 그림의 위치를 변경하고 썸네일을 포함하고 있는 표 크기를 조절한다. 같은 방법으로 원하는 만큼의 포토 앨범을 넣어 케이크 페이지를 완성한다.
지금까지 나모 웹에디터 2006의 포토 앨범 기능을 써서 여러 가지 종류의 케이크를 소개하는 ‘케이크(menu.html)’ 페이지를 만들어보았다. ‘About(about. html)’ 페이지와 ‘Order(tips.html)’ 페이지는 사진과 문구를 입력해서 만들어볼 수 있다.
다음 시간에는 나모 웹보드를 써서 ‘Board (board. html)’ 페이지에 게시판을 삽입하는 방법에 대해 알아보도록 하겠다. | 
