홈페이지 제작해보기

▷ 홈페이지 제작해보기

자, 기다리고 기다리던 "총정리해보기" 시간입니다. *^^*

우선, 지금까지 배웠던 여러가기 기능을 사용하여 홈페이지를 하나 만들어보겠습니다.
자신의 홈페이지를 만든다고 생각하시고 하나 하나 따라하시되..
색상이나 내용은 자신이 원하는 것을 넣으셔야 하겠지요?

일단..자신의 홈페이지를 어떻게 구성할것인지 결정하는 것이 제일 중요합니다.
유식한 말로 "사이트를 기획"한다고 합니다.
어떠한 내용을 기본으로 하여 페이지를 어떻게 구성할것인지 미리 종이와 연필을 이용하여 그려보는 것입니다.

먼저 주제를 정해야겠지요..

자신이 관심있는 분야를 택해서 그 분야에 대한 정보를 넣는다던가,
아님 단순히 자신을 소개하는 페이지로 구성한다던가...

일단 주제가 결정된 후에는...
페이지를 어떻게 구성할 것인지 미리 그려봅니다.

예를 들면, 인트로페이지를 넣을것인지.. 메인페이지에 메뉴구성은 어떻게 할것인지..
메뉴는 어떤 어떤 메뉴들을 넣을것인지.. 프레임을 이용할 것인지..
메뉴를 선택했을때 링크부분은 어떻게 처리할 것인지
전체적인 색상톤과 서체는 어떤것으로 할것인지... 등..
일단은 머리속으로 정리를 하고.. 노트에 충분히 그려본 후에 작업을 시작하는 것이 좋습니다.

그렇지 않고 마구 하다보면 나중에 수정하기도 힘들어지고..통일성도 없어지고 힘들어집니다.

사설이 길었군요..하지만 실제로 홈페이지를 만드는것 보다 훨씬 중요한 문제이기도 합니다.

일단, 예제 홈페이지를 여러분들에게 하나 보여드리겠습니다.
차근차근 보시면서 스스로 어떻게 만들져있는지..분석해 보시길 바랍니다...

<< 총정리 예제홈페이지 보기 >>

이 홈페이지는 "내가 좋아하는 영화"를 기본으로 소개하면서, 자신의소개와 사진들을 소개하고,
게시판을 만들고(실제로 만드는작업이 아닌 무료로 제공하는 게시판을 링크시키는 작업),
내게 이멜을 보낼수 있도록 링크시켜놓았습니다.

이 홈페이지를 기본으로 하여... 참고하시면서..자신이 기획한 홈페이지에 맞게 내용과 사진들을
적용하시면서 따라하시면 도움이 될것 같습니다...

메인페이지(첫페이지)부터 보겠습니다.
첫페이지인 메인페이지가 시작되기전에 미리 홈페이지를 소개하는 인트로페이지가 있어도 좋습니다.
인트로 페이지는 스스로 꾸며보시면 더 좋겠지요..

참고로...다 아시겠지만 첫페이지는 무조건 index.htm이란 화일명으로 만드셔야 합니다.

참! 더더욱 중요한 것은 다 아시죠??? 앞부분 강좌를 차근차근 공부하신 분들은 다 아시겠지만
다시 한번 강조합니다.
반드시 모든 htm문서(그림화일 포함)의 이름은 영문으로 하여야 합니다.

글구... 이미지들은 따로 images란 이름의 폴더에다 넣어두십시오..

첫페이지를 보시면 메뉴가 다섯개로 이루어져 있으며 가로로 프레임이 나뉘어져 있습니다.
각각의 메뉴를 누르면 아래프레임에 그에 해당되는 내용이 뿌려지도록 만들어져 있습니다.

그럼 일단 프레임을 나누는 작업부터 해야겠지요?
자세한 설명은 앞부분(시작해보기~천천히뛰어보기까지...)에서 했으므로 지금부터는 개괄적인 부분만
설명하겠습니다.
잘 모르는 부분이 있다면 앞강좌를 참고하시면 될겁니다.

첫페이지(index.htm)부터 설명드립니다.

 

::::: index.htm 문서 만들기 :::::

[프레임나누기]

- 오브젝트창에서 프레임을 가로로 나눈다.
- 프레임을 나눈후 프레임경계선에 마우스를 클릭한 후 속성창에서 80픽셀로 맞춘다. (아래그림 참조)

[각각의 프레임문서와 프레임셋문서저장]

- 마우스로 윗부분프레임 선택한후 저장(menu.htm), 아랫부분 선택한 후 저장(main.htm), 프레임경계선 선택한후
저장(index.htm)하면 총 3개의 문서가 만들어졌을것이다.

[각각의 프레임문서의 여백을 0으로 지정]

- menu.htm과 main.htm을 각각 선택하여 페이지의 여백을 0으로 맞춘다. (아래그림 참조)

[menu.htm에서의 테이블그리기]

- 마우스로 menu.htm부분(윗부분)을 선택한 후 1행 3열의 가로100% 테이블 그린다.
- 속성창에서 테이블의 세로사이즈도 100%로 지정한다. (아래그림 참조)

- 그려진 테이블의 가운데셀을 선택한후 속성창에서 셀의 가로(width)사이즈를 700픽셀로 맞춘다. (아래그림 참조)
- 가운데셀을 마우스로 클릭한후 배경색을 #0099CC로 지정한다. (아래그림 참조)

- 양쪽 셀의 배경색은#003366으로 지정한다. .

[main.htm에서의 테이블그리기]

- menu.htm과 마찬가지로 1행 3열의 테이블을 그린후 main.htm에서 지정대로 반복하되 가운데셀의 색상을
#006699로 지정한다..양쪽 셀의 배경색은 윗프레임과 동일하게 #003366으로 지정한다.

[프레임창에서의 설정]

- 프레임창를 연다. (Window메뉴아래 Frames)
- 프레임창에서 윗부분을 선택한 후 속성창을 보면 menu.htm에 관한 속성이 보인다.
- Scroll부분을 Default로 설정한다.

- 프레임창에서 아래부분을 선택한 후 속성창을 보면 이곳의 Scroll은 저절로 Default로 되어있을것이다.
- 프레임창에서 각각의 프레임을 선택한 후 속성창을 보면 프레임이름은 menu.htm문서가 있는 윗부분은
"topFrame"으로, main.htm문서가 있는 아랫부분은 mainFrame으로 자동으로 만들어져 있을것이다...
바꿔도 된다... 일단은 바꾸지 말고..아래프레임이름이 mainFrame이란것만 기억하자...

[모든문서 저장후 브라우저에서의 확인]

- File메뉴의 Save All Frames를 선택하여 모두 저장한다..
- 웹브라우저로 확인한다..
- 다음과 같이 윗프레임과 아래프레임의 테이블이 정확히 맞는지 확인한다..

 

자..여기까지만 되었으면 반(?)은 된거나 다름없다..
잘 안되시는 분들은 차근차근 읽어보면서 다시 따라해보길 바란다..

이제부터는 menu.htm(윗프레임)에서 메뉴를 만들어 볼것이다...
메뉴를 만들기 위해서는 테이블을 이용할것이다..짐작은 하셨겠지만 menu.htm안에 있는 테이블의 가운데 셀
안에다 새로운 테이블을 넣을것이다.

하나하나 차근차근...따라해보자..

[menu.htm에서..가운데 셀에 새로운 테이블 그리기]

- 일단 가운데 셀을 선택하여 세로정렬(Vert)를 Bottom으로 만들자. (아래그림 참조)

- 그곳에다 1행 5열의 새로운 테이블을 만든다..당연히 가로사이즈는 100%로 지정한다.
- 테이블이 아랫부분에 맞춰져 그려질 것이다.
- 그곳에다 메뉴텍스트를 입력한다.(각각의 메뉴를 포토샵이미지로 만들어 불러와도 된다..롤오버도 하면 금상첨화!)
- 새로운 테이블의 5개의 셀을 각각 선택하여 세로정렬(Vert)을 Bottom으로 만들자..

- 저장한 후 웹브라우저로 확인해보자.. 스크롤바가 생기면 안된다...

	My Favorite Profile Photo Board Nail

 

자..일단 윗프레임의 메뉴부분이 끝났다...
상단 프레임과 하단 프레임을 맞추는 것과.... 프레임에 테이블을 그려 Bottom으로 설정하는것이 조금 까다롭다.
유의할것은 이런 레이아웃의 경우.. 반드시 윗프레임과 아래프레임의 Scroll 속성이 동일하여야 한다는 것이다.

조금 까다로울것 같고..중요한 부분이라 상세하게 설명했다..

지금부터는 쭉쭉~~ 설명을 할것이니... 스스로 레이아웃을 해보길 바란다..

아랫프레임에 들어갈 페이지는 각자 기획한바 대로 구성하면 된다.
프레임강좌에서 누누히 강조했지만 현재 index.htm(첫화면)은 두개의 별도의 htm문서로 존재한다는 사실을
절대로 잊으면 안된다!!!!!

나는 영화소개를 중심으로 하였으므로 영화포스터와 문구로 구성을 했다.
영화포스터 각각의 이미지에 또 링크가 걸려있다.....
포스터를 누르면 새로운 문서가 하단프레임(mainFrame이란 이름을 가졌었다)에 뿌려지도록 한 것이다.

이 문서의 이름을 난.. main.htm으로 하였다..
즉 index.htm(첫화면부분)은 메뉴부분인 menu.htm과 하단의 영화포스터부분인 main.htm 두개의 문서로 존재한다.

그럼 먼저 첫번째 포스터를 누르면 나오는 페이지를 보자.

너무 길어질 것 같아 다음장으로 넘겨야겠다 *^^* 기대하시라~~