2-5 그림 삽입하기

무선 인터넷 프로그래밍

2-5 그림 삽입하기 2-5 그림 삽입하기 [ 그림 ] 도구

2 무선 인터넷 프로그래밍

모바일에서 사용하는 그림 파일 형식 살펴보기 모바일에서 사용하는 그림 파일 형식 살펴보기 wbmp

•무선 홈페이지에서 가장 기본적으로 사용되는 이미지 형식으로 011, 017, 019 통신망에서 사용할 수 있습니다 . 흑백 그림을 표현하며 애니빌더에서 문서에 삽입된 그림을 자동으로 wbmp 형식으로 변환해줍니다 . wbmp 그림은 2 칼라 이미지이기 때문에 검정색과 무색으로 색을 표현합니다 . 사선이나 곡선은 계층으로 표현되기 때문에 지저분하게 보입니다 .


모바일에서 사용하는 그림 파일 형식 살펴보기 모바일에서 사용하는 그림 파일 형식 살펴보기 nbmp

•wbmp 그림 형식과 함께 기본적으로 사용되는 이미지 형식으로 016, 018 통신망에서 사용됩니다 . 흑백과 4 그레이로 그림을 표현할 수 있습니다 . nbmp 형식도 PC 에서는 사용되지 않는 그림 형식이며 애니빌더에서 자동 변환하여 사용합니다 . 4 그레이는 4가지 색으로 그림을 표현하기 때문에 2 칼라보다 깔끔하게 그림을 보여줍니다 . 특히 사선과 곡선은 안티알리아스 보정 설정이 되기 때문에 부드럽게 그림을 표현해줍니다 .


모바일에서 사용하는 그림 파일 형식 살펴보기 모바일에서 사용하는 그림 파일 형식 살펴보기 gif

•016, 018 통신망에서 사용되는 그림 형식으로 흑백 , 4 그래이 , 256 칼라의 그림을 지원합니다 . 뿐만 아니라 GIF 애니메이션도 지원하기 때문에 간단한 움직임을 표현할 경우에 적당합니다 . gif 형식은 PC 에서도 사용되는 그림 형식으로 PC 에서 작업한 그림을 직접 사용이 가능합니다 .


모바일에서 사용하는 그림 파일 형식 살펴보기 모바일에서 사용하는 그림 파일 형식 살펴보기 sis

•무선 홈페이지 그림 형식으로 흑백 , 4 그레이 , 256 컬러 , 65536 컬러의 그림 및 애니메이션 형식도 지원합니다 . 011, 016, 017, 018, 019 모두 지원이 가능합니다 . SIS 그림을 제작하려면 [네오엠텔의 SIS 저작툴 ] 과 같은 SIS 저작툴을 사용해야 합니다 . SIS 저작툴이 고가이기 때문에 일반인이 사용하기에는 어려움이 많습니다 . 애니빌더 스페셜 버전에는 SIS 애니메이션을 제작할 수 있는 AnySIS 프로그램이 포함되어 있습니다 . 휴대폰에서 사용되는 애니메이션들은 대부분은 SIS 로 제작됩니다 . SIS 는 통신업체에 따라 RSA, MZL 등으로 구분됩니다 .


그림 삽입하기 그림 삽입하기 • [ 그림 ] 도구단추를 클릭해서 그림 목록을 추가한 다음 목록을 더블클릭하면 나타나는 등록정보에서 속성을 설정합니다 . [ 찾아보기 ] 단추를 클릭해서 BMP, GIF, JPG, TIF, SIS 형식의 그림을 불러 올 수 있습니다 .

문서에 삽입할 그림을 불러 옵니다 .

그림이 나타나지 않을 경우 그림 대신 보이게 할 글을 입력합니다 .


[ 예제 2-5-1] 그림 삽입하기 [ 예제 2-5-1] 그림 삽입하기

애니빌더의 [ 그림 ] 도구를 사용해서 폰페이지에 그림을 추가해 보세요 .


그림 삽입하기 그림 삽입하기

옵션 설정 이미지만 : 정지 그림으로 표현합니다 . OnTimer 사용 : 지정된 시간이 지나면 그림이 나타나도록 설정합니다 . Link 설정 : 선택한 그림을 클릭하면 지정된 페이지로 이동합니다 .

그림 정렬 방식을 설정

편집 : 불러 온 그림을 편집

초기값 : 지연시간을 1/10 초 단위로 입력

반복유무 : 반복 실행 유무를 선택

반복값 : 반복 횟수를 입력

텍스트 : 그림 대신 보이게할 글을 입력


[ 예제 2-5-2] 애니메이션 이미지 만들기 [ 예제 2-5-2] 애니메이션 이미지 만들기

[Ontimer] 기능을 이용하여 두 개의 그림을 순차적으로 바뀌는 애니메이션을 만들어 보세요 .


캠으로 촬영한 사진 올리기 캠으로 촬영한 사진 올리기

[ 그림 ] 등록정보 창에서 [ 고급 ] 탭을 클릭한 다음 [ 편집 ] 단추를 누르면 [Any Image Editor] 프로그램이 실행됩니다 .

사진 불러오기

PC 캠

화면 캡쳐

컬러별 미리 보기

그림 화질 조절 그림 크기 조절

사진 화질 및 크기 조절

악세사리 꾸미기

사진 크기를 수치로 조절하기


[ 예제 2-5-3] PC 캠 사진을 폰페이지에 넣기 [ 예제 2-5-3] PC 캠 사진을 폰페이지에 넣기

[Any Image Editor] 프로그램을 이용해서 PC 캠으로 직접 사진을 촬영한 후 사진을 폰페이지에 넣어서 꾸며 보세요 .


캐릭터 그림 삽입하기 캐릭터 그림 삽입하기

[ 그림 ] 등록정보 창에서 [캐릭터 ] 항목을 클릭하면 나타나는 [캐릭터 선택 ] 항목에서 애니빌더에서 제공하는 애니메이션 그림을 선택할 수 있습니다 . [ 추가 ] 단추를 클릭하면 SIS 그림을 삽입해서 [캐릭터 선택 ] 목록에 그림을 등록할 수 있습니다 . 애니빌더 WX 스페셜 버전에는 SIS 그림을 제작해주는 [AnySIS] 프로그램이 포함되어 있습니다 . [AnySIS] 프로그램을 이용하면 제작한 SIS 그림을 바로 [캐릭터 ] 목록에 추가할 수 있습니다 .


[ 예제 2-5-4] 캐릭터 애니메이션 추가하기 [ 예제 2-5-4] 캐릭터 애니메이션 추가하기

애니빌더에서 제공하는 캐릭터 애니메이션 그림을 문서에 그림을 삽입해서 꾸며 봅니다 .

무선 인터넷 프로그래밍

2-6 폰페이지 재미있게 구성하기 2-6 폰페이지 재미있게 구성하기 [숫자링크 ], [ 일반링크 ], [왼쪽 버튼 ], [ 오른쪽 버튼 ],[즐겨찾기 추가 ], [ 메일 보내기 ] 도구


[ 숫자링크 ] 도구 [ 숫자링크 ] 도구

• 폰페이지는 한 페이지에 담을 수 있는 내용이 제한적이므로 메뉴를 이용하여 내용을 나누어 주는 것이 좋습니다 . 메뉴를 만들어 주는 기능 중 하나인 [숫자링크 ] 도구는 메뉴 이름 앞에 숫자가 입력되어 휴대폰의 자판에서 해당 번호를 눌러 메뉴를 열 수 있습니다 . 메뉴를 만들려면 [숫자링크 ] 도구를 클릭한 다음 등록정보 창을 연 다음 [ 연결구분 ] 에 연결 방법을 선택해서 설정합니다 . [ 연결구분 ] 에는 하위 페이지를 만들거나 첫 페이지 또는 하위 페이지 이동 등의 작업을 선택할 수 있습니다 . [List] 를 선택하면 [ 텍스트 ], [ 그림 ] 등의 도구를 추가할 수 있습니다 .


[ 예제 2-6-1] 숫자가 있는 메뉴 만들기 [ 예제 2-6-1] 숫자가 있는 메뉴 만들기

[숫자링크 ] 도구를 사용해서 숫자가 있는 메뉴를 만들어 보세요 .


[ 일반링크 ] 도구 [ 일반링크 ] 도구 • [ 일반링크 ] 메뉴는 [ 숫자링크 ] 메뉴와 함께 메뉴를 만들어 주는 기능입니다 . 기능은

유사하나 [ 숫자링크 ] 메뉴처럼 메뉴에 숫자가 표시되지 않으므로 휴대폰 커서를 움직여서 실행해야 합니다 .

-숫자버튼 : ASP, JSP, PHP 로 스크립트를 구성할 때 해당 메뉴를 선택할 번호입니다 . [숫자링크 ]처럼 메뉴 앞에 숫자가 표기되지 않습니다 . - 연결구분 : 메뉴의 연결 방법을 선택합니다 . [숫자링크 ] 메뉴와 구성이 다릅니다 . Downlevel : 기본 연결구분 방법으로 하위에 내용을 입력가능 Call : 전화번호로 착신 Link : [ 연결 ] 항목에 입력한 페이지로 이동 URL : [ 연결 ] 항목에 입력한 폰페이지 주소로 이동 Mailto : 입력한 전자우편 주소로 편지보내기를 실행- 라벨 : 선택한 메뉴에 커서가 위치하면 오른쪽 하단에 보이게 할 메뉴이름을 입력 - 파일 : [ 연결구분 ] 항목에 따라 입력할 내용을 설정하는 항목입니다 .


[ 예제 2-6-2] 숫자가 없는 메뉴 만들기 [ 예제 2-6-2] 숫자가 없는 메뉴 만들기

[ 일반링크 ] 도구를 사용해서 숫자가 없는 메뉴를 만들어 보고 연결구분을 이용하여 전자우편 주소로 링크를 설정해 보세요 .


[ 예제 2-6-3] 페이지 이동하기 [ 예제 2-6-3] 페이지 이동하기

[ 일반링크 ] 도구를 사용해서 원하는 페이지로 이동하도록 링크를 실행해 보세요 .


서비스를 이용한 [즐겨찾기 추가 ]와 [ 메일 ] 도구

서비스를 이용한 [즐겨찾기 추가 ]와 [ 메일 ] 도구

• [즐겨찾기 추가 ] 도구는 접속자의 휴대폰으로 폰페이지 주소를 메시지로 보내주는 기능으로 접속할 폰페이지의 주소를 일일이 입력하지 않고 버튼 한번만 누르면 바로 접속할 수 있도록 해줍니다 . 네이트에서 제공하는 즐겨찾기 서비스를 이용하는 기능으로 간편하게 메뉴를 추가하기만 하면 사용이 가능합니다 . 이 기능은 한 페이지가 한번만 사용이 가능하며 [즐겨찾기 ]를 실행할 때 접속료가 부과되는 유료 서비스입니다 .

- 연결명 : 메뉴 이름을 입력합니다 . - 특수문자 : 메뉴 이름에 특수문자를 입력합니다 . - 글자색 : 메뉴 글자의 색을 설정합니다 . - 이 름 : 즐겨찾기에 표시할 이름을 입력합니다 . -주소 : 자신의 폰페이지 주소를 입력합니다 .


[ 예제 2-6-5]즐겨찾기 추가 메시지 보내기 [ 예제 2-6-5]즐겨찾기 추가 메시지 보내기

[즐겨찾기 추가 ] 도구를 이용해서 자신의 폰페이지 주소를 상대방 휴대폰의 메시지로 보내도록 만들어 보세요 .


[ 메일 ] 도구 [ 메일 ] 도구

[ 메일 ] 도구는 전자우편을 보내주는 서비스를 이용하여 휴대폰에서 메일을 보낼 수 있습니다 . [즐겨찾기 추가 ] 와 함께 서비스를 제공하는 서버의 주소로 링크만 설정되어 있기 때문에 기본 속성만 설정하면 손쉽게 메일을 보낼 수 있습니다 .

•일반메일 설정 : 메일만 보냅니다 . •첨부메일 설정 : 파일을 동봉하여 메일로 보냅니다 . •받는 사람 : 받는 사람의 주소를 입력합니다 . •보내는 사람 : 보내는 사람의 주소를 입력합니다 •메일제목 : 전송할 메일의 제모을 입력합니다 . •메일내용 : 전송한 메일의 글을 입력합니다 . [찾아보기 ] 단추를 클릭해서 HTML 문서를 불러 올 수 있습니다 .( 첨부메일 설정 선택시 ) •첨부파일 : 첨부파일을 첨부해서 전자우편을 보냅니다 . ( 첨부메일 설정 선택 시 ) •SMTP : 전자우편을 보낼 때 사용되는 보내기 서버 주소를 입력합니다 .


[ 예제 2-6-6] 메일 보내기 [ 예제 2-6-6] 메일 보내기

[ 메일 ] 도구의 [ 일반메일 설정 ] 기능을 이용해서 메일을 보내 보세요 .


연습문제 연습문제

1. 애니빌더에서 제공하는 클립아트 그림을 애니빌더를 이용해서 문서에 삽입하려고 한다 . 다음 중 어떤 메뉴를 실행해야 하는지 골라 보세요 ( )

① TEXT ② IMAGE ③ ANCHOR ④ LIST



2. 애니빌더에서 하위 페이지를 만들려고 할 경우 실행해야 할 메뉴는 무엇 인가요 . ( )

① TEXT ② ANCHOR ③ IMAGE ④ SCRIPT



3. 애니빌더에서 메뉴를 [Accept]와 [Soft] 메뉴에 대한 설명 중 잘못된 것은 ? ( )

① [Accept] 메뉴를 사용해서 첫 페이지 , 상위 , 하위 페이지로 이동할 수 있다 . ② [Accept] 메뉴와 [Soft] 메뉴는 휴대폰 화면 하단에 표시된다 . ③ 휴대폰 기종에 상관없이 [Accept] 메뉴는 항상 오른쪽 하단에 표시된다 . ④ 모든 페이지에 꼭 [Accept] 메뉴를 추가해야 한다 .



4. 애니빌더로 문서를 관리하는 방법에 대한 설명으로 잘못된 것은 ? ( )

① 추가된 목록을 삭제하려면 도구 모음에서 [삭제 ] 단추를 클릭해서 언제든지 목록을 지울 수 있다 . ② 작업이 완료되면 [ 저장 ] 단추를 클릭하여 작업한 모든 문서를 저장한다 . ③ 추가된 목록에서 이동할 목록을 마우스로 드래그해서 위치를 이동할 수 있다 . ④ 애니빌더는 목록에 표시된 상위 , 하위 페이지들의 연결 관계를 depth가 있는 트리 구조로 보여준다 .



5. 애니빌더는 무엇을 하는 프로그램이고 어떠한 편리한 점들이 있는지 서술하세요 .


만들어 보세요 ! 만들어 보세요 !

1. 애니빌더를 사용해서 다음 페이지를 만들어 보세요 .



2. 남자와 여자의 혈액형에 따른 궁합을 알아보는 혈액형 궁합 사이트를 만들어 보세요 .

[TIP] -남자와 여자의 혈액형에 따른 궁합 자료를 인터넷을 통해 찾습니다 . - 사이트 구성을 그립니다 . - 애니빌더를 이용해서 구성에 따라 작성합니다 .



3. 얼굴형에 따른 헤어스타일을 소개하는 사이트를 만들어 보세요 .

Documents

2-5 그림 삽입하기