테크노트 사용자 매뉴얼

처음시작

 11 . 홈페이지 틀 구성
  스킨 파일을 활용하여 홈페이지의 틀을 구성하는 가장 손쉬운 방법을 설명합니다.
  설명 중 제시되는 스킨파일 코드는 이해를 쉽게 하기 위하여 되도록 간략하게 작성한 것이니
  더 실제에 가까운 코드작성 예를 보려면 테크노트 원본에 기본 제공되는 스킨 중 홈페이지 제작 스킨을 참고하십시오.
  스킨구조에 대해 충분히 이해하고 나면 훨씬 더 복잡한 홈페이지도 쉽게 제작할 수 있게 될 것입니다.


 step 0 . 스킨파일 Open
    ....technote/skin_board/a_standard/1_main_html.php  파일을 텍스트 편집기로 open 한다.



 step 1 . 원본 상태 출력       1_main_html.php [1]
    
    위 그림은 보드스킨 파일 중 1_main_html.php [1] 파일이 원본형태 그대로 일때의 보드출력 결과이다.
    전체적인 홈페이지의 틀 구성은 바로 이 1_main_html.php 파일에서 모두 이뤄진다라고 생각하면 된다.
    1_main_html.php 파일의 html 태그를 재 구성하여 홈페이지 형태로 만들면 되는데
    위 링크창에서 보여 지는 소스에서 녹색으로 표시된 php 코드 부분은 반드시
    삽입 되어야  한다. 삽입위치는 상관없다.  그 외의 html 태그 부분들은 임의로 재 구성할 수 있다.
    
    1_main_html.php 를 직접 수정하거나 또는 별도의 html 파일에서 따로 작업한후 그 html 태그를 복사해서
    1_main_html.php 에 넣어 주고, 소스에서 녹색으로 표시된 php 코드 부분만 정확히 삽입해 주면 된다.
    
    나모, 드림위버 같은 웹편집기 툴을 주로 이용해 홈페이지 작업을 하는 경우도 다를 바 없다.
    웹편집기로 작업한 html  태그를 1_main_html.php 에 넣어주고 녹색코드 부분만 정확히 삽입해 주면 된다.



 step 2 . 홈페이지 '틀' 구성하기           1_main_html.php [2]
    
    위 그림은 <TABLE>~ </TABLE> 태그를 넣어서 홈페이지 틀의 윤곽을 잡은 1_main_html.php [2] 소스적용 출력 결과이다.
    이 1_main_html.php [2] 의 태그를 실제로 그대로 드래그->복사해서 스킨파일 1_main_html.php 에 넣어 주고
    보드설정-[2-1] Main_html 전체레이아웃 스킨 에서 해당 스킨을 지정한 후 보드를 출력해 보면 
    위 그림과 동일한 형태의 페이지가 출력되는 것을 직접 확인할 수 있다.
    <TABLE>~ </TABLE> 태그를 이해할 수 있다면 여기까지는 아무 여려움이 없을 것이다.
    <TABLE>~ </TABLE> 태그가 어렵다면 웹편집기(나모,드림위버 등..) 에서 '표 그리기' 를 활용하면 된다.



 step 3 . 홈페이지 메뉴 삽입하기           1_main_html.php [3]
    
    이것은 메인 홈페이지 구성의 모든 요소들을 넣은 후의 출력 결과이다.
    위의 항목 "step 2 . 홈페이지 '틀' 구성하기" 에서 나눠 놓은 각 구역별로 HTML 태그 또는 필요할 경우
    php 코드를 삽입해서 위 그림과 같은 전체적인 구성을 완료하면 된다.
    위와 같이 출력되도록 작성된 실제 소스를 참조 하려면 테크노트 원본에 포함되어 있는 스킨들 중
    'homepage' 스킨에서 1_main_html.php 파일을 살펴보면 된다.
    위 그림상으로 게시판이 들어가 있는 위치에 게시판외의 다른 내용이 들어간 페이지를 만들려면,
    [13 . 페이지별 URL] 의 설명을 참조.


 step 4 . 메인 홈페이지에 연결
    일반적 호스팅 서버의 경우
    http://abcde.co.kr    와 같이 홈페이지 주소로 접속하면
    http://abcde.co.kr/index.html    파일이 메인 홈페이지를 출력하게 되어 있는데,
    index.html 가 아닌 주소로 곧바로 연결되게 하려면 incex.html 파일을 아래와 같이 작성해 올리면 된다.
    <html>
      <head>
       <META HTTP-EQUIV="Refresh" CONTENT="0; URL=연결될주소">
      </head>
    </html>    또는
    <html>
     <head><title>홈페이지타이틀</title></head>
     <frameset>
        <frame src="연결될주소">
     </frameset>
    </html>

copyrightⓒ : TECHNOTE INC , www.technote.co.kr