|
홈페이지상에서 이미지(그림)의 역할은 매우 중요합니다. 홈페이지를 통해 원하는 정보를 네티즌에게 제공할 때 문자로 만 구성된 홈페이지보다는 짧은 순간 네티즌의 눈길을 묶어 둘 수 있는 이미지를 지닌 홈페이지가 느낌부터 다르고 정보의 질 조차도 달라보이게 합니다. 그만큼 이미지는 글보다 더 확실한 의미 전달의 수단이 될 수 있습니다. 이 처럼 중요한 이미지를 내 홈페이지에 넣을 수 만 있다면 내가 표현하고 싶은 내용을 더욱 자유롭게 연출할 수 있을텐데... 이러한 문제는 아주 쉽게 해결될 수 있습니다. 홈페이지에 넣을 수 있는 이미지를 제공하는 사이트가 인터넷상에는 많이 있습니다. 이러한 사이트에서 원하는 이미지를 다운로드받아 내 홈페이지를 멋있게 꾸밀 수 있습니다.
홈페이지에서 사용되는 이미지 형식
홈페이지에서는 크게 GIF, JPG, PNG의 세 가지 이미지 형식을 사용할 수 있습니다. 그 이유는 이들 이미지 파일이 가지고 있는 특성이 인터넷이라는 매체와 가장 잘 어울리기 때문입니다. 다시 말하면 인터넷이 가지고 있는 문제점인 느린 전송 속도에 가장 타격을 주는 것이 이미지 파일이기 때문에 다른 이미지보다 파일 크기가 상대적으로 작은 GIF와 JPG를 지원하는 것입니다. 또한 인터넷에서 가장 늦게 사용되기 시작한 PNG형식의 이미지 파일은 GIF가 가지고 있는 256색상의 단점을 보안한 100만 색상을 지원하는 인터넷 전용 이미지 형식으로, 앞으로 그 활용도가 커질 것으로 예상됩니다. 그럼 각각의 특성을 살펴 보겠습니다.
1. GIF형식
256색상 이하를 지원하는 이미지 파일 형식으로 용량이 작으며, 투명효과를 낼 수 있고, 움직이는 그림인 Animation을 만들 수 있습니다.
2. JPG형식
256 색상 이상의 트루 컬러(True Color)를 지원하면서도 파일 용량이 작은 것이 가장 큰 특징이며, 포트폴리오나 사진같은 고화질의 이미지 처리에 적합한 형식입니다.
3. PNG형식
GIF형식과 JPG형식의 장점만을 보완하여 개발된 이미지 파일 형식으로 알파 채널을 이용한 투명 및 모자이크 효과를 지원합니다. 트루 컬러를 지원하면서도 파일 용량이 작다는 점이 가장 큰 특징입니다. 익스플로러와 넷스케이프 4.0 이상에서만 지원되며, 그 이하 버전의 브라우저에서는 PNG 형식을 재생할 수 있는 플러그인(Plug-In)을 따로 설치해야 합니다.
인터넷 상에서 이미지 얻기
1. 일반 홈페이지에서 마음에 드는 이미지 얻기
인터넷으로 이곳, 저곳을 여행하시다보면 정말 마음에 들어 내 홈페이지에 넣고 싶은 이미지를 발견하게 됩니다. 어떻게 이미지파일을 내 컴퓨터로 저장해 홈페이지를 만드는데 이용할 수 있을까요? 아주 간단합니다.
① 홈페이지를 만드실 때 하나의 폴더에 모든 파일을 넣어 복잡하게 하지 마시고, 그림은 그림대로, 음성은 음성대로 각자 폴더를 만들어 저장하시면 관리하기 편리합니다. 따라서, 그림을 다운받으시기 전에 탐색기를 실행해 홈페이지를 만들었던 MyHomepage라는 폴더에 Image, Sound, Moving과 같은 폴더를 미리 만들어 놓고, 이미지는 Image폴더에, 음성은 Sound폴더, 동영상은 Moving폴더에 넣어 파일을 관리하시기 바랍니다.
② 다운받고자 하는 이미지가 있는 사이트에 접속합니다. 다운받고자 하는 이미지 위에서 마우스 오른쪽버튼을 누르면 메뉴가 나타납니다. 메뉴에서 [다른 이름으로 그림저장]을 선택합니다.
③ [그림저장]창에서 [저장 위치]를 MyHomepage의 Image폴더로 지정합니다. 파일이름을 입력하고 [저장]버튼만 누르면 내 컴퓨터로 해당 이미지가 저장됩니다.
④ 탐색기에서 MyHomepage의 Image폴더에 그림이 저장되었는지 확인합니다.
2. 무료 이미지를 제공하는 사이트
이미지를 모아 놓고 무료로 다운받을 수 있도록 해 주는 사이트가 많이 있습니다. 이러한 사이트에 접속해서 필요한 그림을 위와 같은 방법으로 내 컴퓨터로 다운로드 받을 수 있습니다.
3. 이미지 Viewer를 이용하자.
홈페이지의 이곳, 저곳에서 이미지를 다운로드 받아 내 컴퓨터에 저장해 놓고, 나중에 내 홈페이지에 필요한 이미지를 찾으려면 단순히 그림파일의 이름만으로 어떤 모양의 그림파일인지 알 수가 없습니다. 이럴때 이미지가 어떤 모양인지를 확인하려면 Image Viewer 프로그램을 이용합니다.
많이 사용하는 이미지 뷰어로는 빠른 속도와 편리한 인터페이스로 가장 많은 사랑을 받는 ACDSee32가 있습니다. 탁월한 이미지 디코딩 속도를 지원하여, 그 어떤 프로그램보다도 빠른 속도를 지원하며, 탐색기 형태의 파일 보기 기능 및 파일 관리 기능을 제공합니다. 그밖에도 대단히 편리한 미리보기 기능 및 슬라이드쇼 기능, 전체 화면으로 보기 기능, 캐시 관리 기능, WAV 파일 연주 기능, 프로그램 창 위치 기억 기능 등을 지원합니다. PC 통신이나 인터넷 등을 통해서 더욱 많아진 이미지 파일들을 관리하고 보는데에는 최적의 프로그램입니다.
※ 탐색기와 같은 형태로 많은 이미지 파일을 관리하는데 편리하게 이용할 수 있습니다.
※ 쉐어웨어이므로 사용하다보면 사용기간이 지났으니 프로그램을 구입하든지 컴퓨터에서 삭제하라는 메세지 입니다. 이 경우 [Register now]를 누르시면 프로그램을 구입하는 절차이므로 [Remind me later]버튼을 누르시기 바랍니다.
좌측의 그림을 눌러 ACDSee32 V3.1을 다운로드받으세요. 개인 사용자용으로 제공되는 셰어웨어 프로그램이므로 사무실이나 기타 기관 등 단체에서 사용하는 것은 저작권법에 위배되므로 유의하시기 바랍니다. 집에서 개인용으로 사용하는 것은 아무런 문제가 없습니다.
(파일크기:5.69MB)프로그램을 내려받은 후 내려받으신 파일을 더블클릭하시면 설치됩니다.
절대경로와 상대경로 홈페이지에 그림, 음성, 동영상과 같은 파일을 포함시킬 때, 포함될 파일이 어디에 있는지 파일의 위치를 지정하는 방법입니다.
▶ 절대경로 : 파일의 위치를 처음부터 모두 써 주는경우
▶ 상대경로 : 파일의 위치를 현재 위치를 기준으로 써주는 경우
위와 같은 구조를 가진 홈페이지가 있고, index.html이라는 HTML문서에 images폴더에 있는 books.gif라는 그림파일을 넣으려면, books.gif가 어디에 위치하고 있는지 index.html 안에서 그 위치를 지정해 주어야 합니다.
이때, 절대경로는 모든 경로를 처음부터 적어 주는 것이기 때문에 books.gif의 위치를 http://user.chollian.net/images/books.gif라고 적어줍니다.
반면, 상대경로는 현재 위치 즉, index.html이 있는 곳부터 경로를 적어 주면됩니다. 따라서, index.html에서 books.gif의 위치를 상대경로로 표시하려면 images/books.gif가 됩니다.
♣ 절대경로와 상대경로의 사용례 ♣
① 루트의 story01.htm이 down폴더의 utility폴더의 clock.gif을 포함
http://user.chollianl.net/down/utility/colck.gif (절대주소)
down/utility/colck.gif (상대주소)
② images폴더의 story03.htm파일이 루트의 train.gif파일을 포함
http://user.chollianl.net/train.gif (절대주소)
../colck.gif (상대주소)
③ images폴더의 story03.htm파일이 down의 utility의 clock.gif를 포함
http://user.chollianl.net/down/utility/colck.gif (절대주소)
../down/utility/colck.gif (상대주소)
④ down의 utility폴더의 story04.htm이 루트의 train.gif를 포함
http://user.chollianl.net/colck.gif (절대주소)
../../colck.gif (상대주소)
⑤ down의 utility폴더의 story04.htm이 images폴더의 menu1.gif를 포함
http://user.chollianl.net/images/menu1.gif (절대주소)
../../images/menu1.gif (상대주소)
상대경로는 언제 사용하나? 홈페이지에 그림이나 음성, 동영상의 위치를 지정해 줄때 절대경로는 루트부터 모두 써주면 되므로 간단합니다. 그러면 언제 상대경로를 쓸까요? 반드시 이때는 상대경로를 써야 한다는 것은 없습니다. 본인이 쓰기 편한 경로로 위치를 지정해 주면 됩니다.
다만, 천리안 서버에 홈페이지를 만들었다가 더 좋은 서버가 있어 홈페이지 전체를 새로운 서버로 옮기려할 때 문제가 생깁니다. 문서가 몇 개 안되면 일일이 절대경로의 처음 주소를 바꿔주면 되지만, 파일이 무수히 많다면 일일이 바꿔 주기도 어렵거니와 간혹 바꾸지 않아 그림이 표시되지 않거나 링크를 눌렀을 때 음성이나 동영상이 실행되지 않을 수도 있습니다. 모든 위치를 상대경로로 지정해 주었다면 나를 기준으로 그림이나 음성, 동영상 파일의 위치가 지정되었기 때문에 그대로 새로운 서버에 올리기만 하면 따로 주소를 변경해 줄 필요없이 바로 작동됩니다.
이미지로 홈페이지 꾸미기
다음과 같이 필요한 부분에 이미지를 넣어 홈페이지를 좀더 멋있게 꾸미는 방법과 단순한 문자대신 이미지를 하이퍼링크로 지정하는 방법에 대해 알아 보겠습니다.
1. 이미지 넣기
① 먼저 이미지를 넣기 위한 곳을 마우스로 클릭해 커서를 위치시킵니다.
아이콘을 눌러 [이미지]창을 실행합니다. 자, 이제 이미지의 주소를 상대경로로 넣을 것인지, 절대경로로 넣을 것인지 결정해야 합니다. 앞으로 홈페이지를 만드시면서 다른 파일의 위치를 지정해 줄 때 상대경로면 상대경로로, 절대경로면 계속 절대경로로 일관성있게 위치를 지정해 주시기 바랍니다. 그래야만, 나중에 홈페이지를 수정할 때 간편하게 수정할 수 있습니다. 될 수 있으면 상대경로로 지정하시기 바랍니다.
그림파일의 위치를 지정하기 위해 [이미지]창의 [위치]탭에서 [파일열기]를 선택하시고, 입력 칸에 상대경로를 직접 입력하거나, 경로를 지정하기 위해 [찾아보기]버튼을 클릭합니다.
② [찾는 위치]를 c:로 선택하시고 아래에 폴더와 파일의 목록이 나오면, MyHomepage폴더→image폴더를 차례로 선택합니다. HTML문서에 삽입할 이미지 파일이 보이면 파일을 선택하고 [열기]버튼을 클릭합니다.
③ 이미지가 삽입되었습니다. 이미지를 정렬하기 위해 먼저 이미지를 마우스 왼쪽으로 클릭해 이미지를 선택하고,
아이콘을 이용해 이미지를 좌, 우 또는 가운데로 정렬합니다. image의 등록정보를 바꿔주려면 이미지를 선택한 상태에서 이미지 위에서 마우스 오른쪽 버튼을 눌러 [이미지 등록 정보]를 선택합니다.
④ 홈페이지에 표시하고 싶으대로 이미지의 테두리나 크기를 조정합니다.
⑤ 위와 같은 방법으로 프론트페이지 익스프레스에서 index.html, story01.htm, story02.htm을 차례로 열어 이미지를 삽입합니다.
2. 움직이는 이미지(Animation)
움직이는 그림을 animation이라고 합니다. 에니메이션은 화면 위에서 연속해서 그림을 보여주고 지우고, 다시 다른 그림을 보여주는 과정을 반복하여, 마치 그림이 움직이는 것과 같은 효과를 준 이미지를 말합니다. 이러한, 에니메이션을 표현할 수 있는 이미지 형식은 Gif입니다.
이러한 에니메이션을 홈페이지에 삽입하는 방법도 일반 이미지를 삽입하는 방법과 똑 같습니다. 인터넷에서 에니메이션 이미지 파일을 다운로드 받아 내 홈페이지에 삽입해 보시기 바랍니다. 홈페이지가 더욱 활력있게 보입니다.
3. 홈페이지 배경이미지 넣기
보통 프론트페이지 익스프레스에서 새로운 홈페이지를 작성하면 자동으로 흰색 배경을 가집니다. 이러한 배경의 색을 다른 색으로 바꿔 줄 수도 있고, 그림을 배경으로 사용할 수 도 있습니다.
① 배경색을 무엇으로 할 것인지, 어떤 이미지를 배경으로 사용할 것인 지를 선택합니다. 배경이미지를 주게 되면 배경색은 모두 감춰지므로 배경색과 배경이미지중 하나만 지정해 주시기 바랍니다.
프론트페이지 익스프레스를 실행해 배경을 주기 위한 HTML문서를 열어, 문서위에서 마우스 오른쪽버튼을 눌러 메뉴에서 [페이지 등록 정보]를 선택합니다.
② 상단의 탭에서 [배경화면]을 선택합니다. [배경화면]을 눌러 배경색을 지정하거나 [이미지 배경 화면]을 눌러 배경화면으로 지정할 배경 이미지를 지정합니다.
※ 이미지로 표현한 홈페이지의 모습입니다. 단순히 텍스트로만 만든 홈페이지보다 훨씬 보기 좋은 홈페이지가 된것 같군요. FTP프로그램을 이용해 새로 만든 홈페이지를 서버에 등록하고, 브라우저로 어떻게 표시되는지 확인하시기 바랍니다. 물론 이미지파일도 등록해야 됩니다. 그렇지 않으면 브라우저가 이미지를 표시해 주지 못하게 됩니다.
※ 둘다 배경이미지를 삽입한 경우입니다. 오른쪽은 너무 산만하군요. 홈페이지는 배경이미지를 반복해서 표시합니다. 따라서, 우측처럼 반복되어 표시될 때 너무 산만하게 반복되는 이미지는 배경이미지로 적당하지 않습니다. 좌측처럼 반복되더라도 표시가 나지 않는 이미지를 배경이미지로 사용하시기 바랍니다.
4. 이미지에 하이퍼링크 지정
story01.htm과 story02.htm의 [홈페이지로...]라는 글씨대신 이미지를 삽입했습니다. 이 이미지에도 누르면 홈페이지로 돌아갈 수 있도록 하이퍼링크를 지정해 주어야 합니다.
① 먼저, 하이퍼링크로 지정할 이미지를 마우스 왼쪽버튼으로 클릭해 선택합니다.
아이콘을 눌러 [URL]칸에 이동할 주소를 적어줍니다.
|
|
|
|
