홈페이지를 만들어 보자 (템플릿 -2)

2. 메인 만들기
 메인은 일반적으로 프레임(화면분할)을 많이 쓰죠? 메뉴와 내용나오는 부분 이케 첨엔 많이 하더라구요..^^ 저도 첨엔 그랬구...^^;  앞전에도 말씀드렸지만 화면을 분할해서(프레임사용) 메인을 만들고 안 만들고는 각각의 장단점이 있습니다. 하지만 제 개인적인 생각이지만 처음 홈페이지를 만드시는 분이라면 프레임을 사용해서 만드시는게 좋을 듯합니다. 물론 노프레임으로 화면을 분할하지 않고 만드는게 처음에는 간단하고 디자인 표현상 좋을지 모르겠지만 나중에는 홈페이지 관리하기가 힘들어 집니다. 
 ① 화면 분할하기
 자~ 그럼 본격적으로 시작해볼까요? ^^ 먼저 우리가 만들어볼 홈페이지를 함 보셔야 겠죠? ^^
 여기를 클릭하세요 ^^ ☞ [견본 홈페이지 보기]
 메인 페이지가 나오죠? 언뜻 보면 그럴 듯 해보이는데.... 사실은 아주 간단하게 만들어진 홈페이지 입니다. 왼쪽/오른쪽으로 화면 분할을 하고 왼쪽에 메뉴 , 오른쪽에 내용 부분을 넣은거죠. 
 아래는 메인페이지 화면분할 소스(프레임소스)입니다. 
    main.htm 분할프레임 소스보기 ( 클릭 )

<frameset framespacing="0" border="0" cols="150,*" frameborder="0">  <frame name="love" src="left.htm" scrolling="no" marginwidth="0" marginheight="0" noresize    target="main">  <frame name="story" src="right.htm" scrolling="auto"  marginwidth="0" marginheight="0"    noresize target="_self">  </frameset>

 프레임 태그에 대해서 잘 모르시는 분은 태그매니아 중급강좌에 화면분할하기 강좌가 있습니다. 그곳을 참고하시구요.... 간단하게나마 위에 소스를 설명하자면 cols="150,*" ☜ 이건 좌우2분할 이네요.^^  왼쪽 150픽셀, 그 나머지 픽셀이 오른쪽 화면을 차지하는 것이구요.. border 와  frameborder 는 프레임간격을 조절해주는 속성입니다. 그리고 그다음 frame태그에서는 음... marginwidth 과 marginheight 속성이 중요한데요... 이거 뭐냐 하면 프레임테두리의 여백을 조정하는 겁니다. 예를 들자면 frameset 태그에 border 와 frameborder 값을 0 으로 줘도 희미하게 프레임 분할선 간격이 남게 됩니다. 이걸 없에 주는 거죠 ^^   
 아..그리고 name 설정하는 곳 보이죠? ^^ 이거 아주 중요해요 ^^ 나중에 링크걸때 name 값을 target 으로 저정해줘야 제대로 해당 프레임에 뜨게 됩니다.  name 값은 영어나 숫자 등으로 자기맘대로 설정해주시면  됩니다. ^^

  메모장을 꺼내서 위에 소스를 그대로 복사해 넣으세요.....  그리고 파일명은 main.htm 으로 해서 home 디렉토리 안에 저장시킵니다. 자..이제 저장시킨 파일을 마우스로 두번 클릭해서 실행시켜보시기 바랍니다. 어떻게 나올까요? .... 실행시켜 보면 알겠지만...
☜ 바로 옆에 처럼 화면이 분할된 상태에서 에러화면이 나올겁니다. 에러화면이 나왔다고 놀라지는 마시구요 ^^ 당연 화면분할만 하고 안에 내용은 작성해주지 않았으니까 에러화면이 뜨는 건 당연 하겠죠? ^^ 

 


  화면분할이 됬으니 다음 장에서는 안의 내용을 만들어 보도록 하겠습니다.