오늘 올릴 내용은 다음과 같습니다.

1. 본문 불러오기
2. 간단한 레이아웃 작성.
3. 샘플 레이아웃 보기

시작합니다.

    들어가기 전에 컬러셋 설정에 관한 부분을 보겠습니다.




    1. 본문 불러오기

지금까지 나온 내용 중에 가장 쉬운 부분입니다. 다들 아시겠지만
layout.html 파일의 원하는 곳에 {$content} 만 적어주시면 페이지나 게시판 등이 그냥 불러 집니다.

여태껏 우리가 배우면서 작성했던 chochobo 레이아웃의 메인 화면입니다.

미리보기

가장 밑부분을 보면 게시판이 출력된 것을 볼 수 있습니다.
본문 불러오기에 대해서는 더 이상 적을 내용이 없어요;;

그럼 지금까지 배운 내용으로 간단한 레이아웃을 작성해보도록 하겠습니다.
이제 초초보 딱지를 떼고 초보 이름표를 달러 갑시다.


    2. 간단한 레이아웃 작성

레이아웃만 잡으면 홈피 작성은 이제 식은 죽 먹기 입니다. 일단 레이아웃의 틀만 잡으면,
- 지금까지 우리가 작성했던 zbxe 템플릿 코드와
- 관리자 페이지에서 통합검색이나 언어셋, 최신댓글, 카운터 등의 위젯 코드를 생성해서
- 원하는 곳에 복사해서 붙이기만 하면 되니까요..

그것들로 조금 갖고 놀다가 변수를 이용한 if문이나 자바스크립트, css 를 통해 조금만 기교를 부리면 초보는 거뜬히 벗어날 수 있을거라 생각합니다.
아, 그리고 지금까지 작성한 chochobo레이아웃의 파일은 그대로 두시면 나중에 필요한 부분만 복사해서 쓰시면 편합니다.

이제부터 레이아웃을 하나 새로 만들어 보겠습니다.
먼저, 홈페이지 작성의 정석적인 순서나 방식은 절대 아니고 길거리 방식임을 알립니다.

    1) 대충 구상 먼저 합니다. 저는 아래와 같은 모양으로 chobo 라는 이름을 가진 레이아웃을 만들려고 합니다.

 헤더 (타이틀, 로고, 상단메뉴)
1차메뉴
2,3차 메뉴
외부로그인
카운터
 본문( {$content} 만 적으면 됨 )
 푸터(하단메뉴 및 라이센스)


    2) 기본 사항 작성.

  chobo -  layout.html
            -  conf - info.xml => 로고, 타이틀, 메인메뉴, 상단메뉴, 하단메뉴
            -  images
            -  css - default.css
            -  js - default.js

- chochobo 레이아웃의 디렉토리를 복사해서
- chobo 로 디렉토리 이름 바꾸고
- info.xml 파일을 열어서 스킨의 정보(title)도 바꾸구요,
- 마지막으로 layout.html파일의 내용을 지우면

아무것도 없는 깨끗한 레이아웃이 하나 만들어지겠죠?
메뉴는 상단(top_menu), 메인(main_menu), 하단(bottom_menu) 메뉴 이렇게 3개 지정할 수 있게 conf.xml파일에서 작성하겠습니다. 상단, 하단메뉴는 maxdepth를 1로 하죠.
메인메뉴는 chochobo레이아웃 작성할 때 사용했던 메뉴를 그대로 쓰기로 하고(앞 시간에 3단계까지 구성하셨죠?) 상단메뉴, 하단메뉴는 간단하게 작성하세요.


    3) layout.html 파일과 default.css 파일 작성

div 태그 사용할 줄 몰라요..; 아래 사이트를 소개합니다.
http://www.dynamicdrive.com/style/layouts/
각종 css 레이아웃 코드와 메뉴 등 여러가지 css를 이용한 유용한 정보를 얻을 수 있습니다.

제가 구상한 모습과 비슷한 레이아웃을 찾아보면..
http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-21-fixed-fluid/
('' )여기에 있네요. 밑으로 내려보면 소스 코드가 보이시죠?

코 드내용 중 <style>~</style>의 내용은 css/default.css 파일에 작성하고 <body>~</body> 부분은 layout.html 파일에 저장합니다. 저번 시간에 배운대로 layout.html 에 default.css를 사용한다는 뜻으로
<!--%import("css/default.css")-->
도 작성해주셨야겠죠? 또한 default.js 파일도 쓴다고 미리 알려줍시다.
그래서 쓸데 없는 내용은 빼고 우리가 필요한 내용들만 작성해보면 아래와 같습니다.

default.css 파일의 내용

layout.html 파일의 내용

여기까지 작성하시고 자신의 계정에 새로 작성한 레이아웃를 /zbxe/layouts/ 디렉토리에 업로드 합니다.
레이아웃관리자 페이지에서 새로운 레이아웃을 생성하고 각 메뉴를 연결해주시면 되겠죠?
그리고 접속해보면 아래와 같은 화면이 보입니다.

미리보기

이제부터는 layout.html 과 default.css파일을 왔다갔다 하면서 필요한 부분을 복사해서 원하는 곳에 붙이면서 모양이 잘 나오고 있나 확인 하면서 작업하면 됩니다.

구체적인 부분 설명은 불가능할 듯 해서 지금까지의 내용들을 이용해서 기본적인 내용이 추가된 레이아웃 파일을 스킨 자료실에 올리겠습니다.

초초보레이아웃스킨 받기

비교하면서 파악해보면 금방 자신만의 레이아웃 작성이 가능하리라 생각합니다.
이것으로  팁 게시를  마치도록 하겠습니다.

유종의 미는 포기 했습니다. 이것도 압박이네요.ㅠ;
그동안 부족한 글에 관심 가져준 분들께 감사 드립니다.
zbxe를 이용해 좋은 홈페이지 갖길 기원합니다. __)
이 게시물을..