강좌)홈페이지 나도 만들수 있다.4.(프레임 만들기)

폭우........그리고 이제는 폭염.........

으라챠챠.힘내서......다음 강의로 들어 갑니다..

많은 연습들 하셨는지요?

시간을 투자 한 만큼..자신의 실력도 늘게 됩니다..

시행 착오 하다 보면 어느새 발전 하게 되어 있습니다..

자꾸 해보다보면 언젠가는 잘되겠지요......

이글은 초보 위주다 보니....

디자인이나..컨텐츠에 대해서 아이디어 짤 시간이 없습니다..

일단은 웹에디터 다루고...

호스팅 받아서..

인터넷에 올리는 것 까지 다 해야 하니......

할 일이 아주 많기 때문입니다..

개념만 잡고 넘어 가니.

세밀한 부분은 스스로 학습을 하셔야 합니다....꼭.....약속.......

어느 정도 감이 오시면 책 한권 사보시는 것도 많은 도움이 됩니다.....

홈페이지를 보시면 아래 그림과 같이 배너와 메뉴..그리고 메인 화면으로 이루어 진 것을 보실 수 있을 것입니다..

 

#1.

왼쪽의 메뉴를 클릭 하면 메인화면이 바뀌는 그런 식.....

이렇게 만들려면 보통 두가지 방법이 있는데.....

프레임을 써서 만드는 것과..또는 표를 그려서 만드는 방법이 있습니다.

오늘은 프레임을 만드는 방법을 설명 하려고 합니다......

 

 

4-1. 프레임 만들기..

 

#2. 웹에디터를 실행 후..

새문서를 열고..

프레임-새프레임셋을 클릭 합니다...

또는 새문서에서 프레임셋을 클릭 하면 리소스관리자 창이 뜹니다.

참고로..htm과 html 어떤 확장자로 저장 해도 결과는 똑같습니다..

 

 

 

#3. 리소스 관리자에서

1번 그림과 같이 비슷하게 생긴 10번 프레임 셋을 선택합니다..

 

 

#4. 현재 문서의 이름은 frame1.htm 입니다..

나중에 홈페이지에서 첫화면으로 만들기 위해서는 프레임 셋을 index,html 로 바꾸어 주셔야 합니다.

문서가 3부분으로 나누어 져 있는 것이 보이시지요?

 

 

#5.이제 프레임셋 미리 보기 창으로 이동 하기 위하여 미리보기 창을 클릭 하면 저장해야 한다고 나옵니다. 모두 4번의 저장을 하셔야 합니다.

첫번째가 배너 부분(top.html)

두번째가 메뉴 부분(left.html)

세번째가 메인 부분(main.html)

그리고 위의 세 부분을 한번에 볼 수 있게 해주는 프레임셋 부분으로..

이 곳에서는 index.html 로 하겠습니다..

 

 

#6.

 이런 식으로 각 프레임의 이름을 정해준 후 저장을 합니다....

 

 

#7.

 다 저장하고 나면 문서의 이름이 index.html 로 바뀌게 됩니다...

index.html은 홈페이지의 맨 첫번째 화면입니다.

이 파일 만큼은 꼭 htm  이 아닌 html 로 저장해 주세요..

 

4-2. 프레임 수정하기..

 

#8.

이제는 만들어진 프레임을 보기 좋게 수정 하도록 하겠습니다..

이때..배너에 쓰여질 그림이나..메뉴 버튼으로 쓰여질 메뉴바 같은 것은 미리 그래픽 프로그램을 사용 하여 만들어 두시면 편하겠지요...

물론, 웹에디터에 있는 클립아트를 그냥 사용 하셔도 무방 합니다..

배너 부분 프레임에 커서를 갔다가 놓고..삽입-그림을 클릭 합니다.. 

 

 

#9.

아래 그림과 같이 그림 속성 창이 뜹니다..

이 곳에서 그림이 있는 곳을 찾아서 그림을 선택 하시면 됩니다..

새로 만들 시간이 없으니 예전에 쓰던 anztour에 있던 타이틀 바를 선택 하도록 하겠습니다..

 

 

#10.

title2 라는 그림을 선택 합니다...

나중에 수정 하면 되니까..임시로 선택하겠습니다...

 

 

#11.

열기를 누르니 배너 부분에 그림이 삽입 되었습니다...

뭔가 이상하지요..프레임 속성에서 수정하시면 됩니다..

먼저 배너 부분(top.html)이라는 글씨를 지워 버리고..빈 공간에서 오른쪽 버튼을 클릭 합니다..

 

 

#12.

프레임 속성 선택..

 

#13.

다른 것은 건드리지 말고..

일단 왼쪽과 윗쪽 여백을 0 로 만들어 봅시다..

 

 

#14.

윗쪽과 왼쪽의 여백이 없어지니 훨씬 보기 좋아 지지요..

 

#15.

이번에는 그림에 하이퍼링크를 적용 시켜 봅니다..

앞에 강좌에서 배우신 대로..

그림 선택후..삽입-하이퍼링크 클릭

 

 

#16.

링크 시키고 싶은 곳 주소를 써주고..

대상 프레임을 blank로 해줍니다.....

 

 

#17.

프레임셋 미리 보기로 와서 마우스를 배너 그림위로 가져 가니 커서가 손모양으로 변하면서

그림에 하이퍼링크가 적용 되었다는 것을 알 수 있겠지요..

클릭 해 볼까요?

 

 

#18.

새로운 창이 뜨면서 anztour 홈페이지가 보여 집니다..

눈치 빠르신 분은 여기서 발견하게 됩니다..

대상 프레임에 따라서 링크된 사이트가 어떻게 열리는지를 알게 됩니다..

blank는 새창에 링크 페이지를 보여 주는 군요..

다른 옵션은 어떤지 한번 해보세요....

 

#19.

parent를 대상 프레임으로 하니..

이렇게 되는 군요........

하나씩 다 해보세요....

 

#20

대상 프레임을 self 로 해 봅니다..

 

#21.

이렇게 배너 프레임 부분에 사이트가 보여지네요.....

다 한번씩 해보시기 바랍니다...

 

#22.

이번에는 메뉴 부분에 메뉴 버튼을 넣어 보겠습니다..

독자적이고 하나밖에 없는 홈페이지를 만들기 위해서는 스스로 버튼을 만들어야 하지만..

이 곳에서는 그냥 웹에디터에 있는 버튼을 사용 하겠습니다..

메뉴 부분을 클릭 한 후..

삽입-플래시 버튼을 클릭 합니다..

 

 

#23.

마음에 드는 버튼을 선택 하면 아래와 같은 속성 창이 뜹니다..

이 곳에서 내용과 주소를 적어 놓습니다..

일단은 선택만 해 놓고..

나중에 수정 하셔도 됩니다..

 

#24.

중요한 부분...

메뉴 바를 클릭 했을 때..메인화면이 바뀌게 하기 위해서는..

대상 프레임을 설정 해 주어야 합니다...

메인프레임을 모르니 대상프레임 옆에 버튼을 클릭 합니다..

 

 

#25.

아래와 같은 창이 뜨면 메인부분을 클릭 한 후..확인 클릭 하시면 됩니다..

 

 

#26.

프레임셋 미리 보기로 들어 가시면 설정이 잘 되었나 확인 하실 수 있습니다..

뉴질랜드 정보 버튼을 클릭 하니..페이지를 표시 할 수 없다는 글이 메인 프레임에 뜨게 됩니다..

제대로 잘 된 것입니다..

 

 

#27.

맨처음 홈페이지에 들어 왔을 때..

메인프레임에 아래 있는 뉴질랜드 바닷가 그림이 보여 지도록 하겠습니다..

 

#28.

간단합니다..

메인 프레임을 클릭 하신 후...

삽입-그림 클릭 하셔서 넣고자 하는 그림을 선택 하시면 됩니다..

적용 된 첫 화면은 이렇게 됩니다..

 

 

자..오늘은 여기 까지 입니다..

다음에는 표를 이용하여 배너/메뉴/메인 부분으로 나누는 방법을 설명 해드리도록 하겠습니다..

강좌 기다리는라 지루 하시겠지만..

그 시간 동안 많은 연습도 필요 하고..

본인의 홈페이지를 독창성 있게 만들기 위한 끊임없는 아이디어를 생각 하셔야 합니다..

대충 아웃트라인을 구성해 보시고..

배너에 넣을 그림과 버튼그림도 만들어 보시고..

첫화면에 넣을 메인 화면도 생각 하고..만들어 보셔야 합니다.

홈페이지를 만드는 것은 쉬우면서도 엄청 바쁘고 힘든 일입니다..

자신만의 배너를 만들기 위해서는 간단하게 나마 그래픽 프로그램도 쓸 줄 알아야 하고...

웹에디터로 그 그림과 컨텐츠를 정리 한 후..

ftp를 이용하여 인터넷 서버에 올릴 줄도 알아야 한다는 것입니다..

물론..강좌가 끝날 때 쯤에는 누구나가 할 수 있게 되리라 생각 합니다..

지금 까지의 과정을 웹에디터가 없이 html 태그를 이용해서 만들어야 했다면...

더운 여름 엄청난 시간을 투자 해야 했을 겁니다...

웹에디터..정말 편리한 프로그램입니다..

그러나..html 태그를 전혀 몰라서도 안됩니다..

수시로 html 태그 확인을 하시기 바랍니다...

 

악플 보다도 더 무서운 무플 지옥.....

여러분들의 추천과 댓글은 사막속의 오아시스나 같습니다...