이제 '디자인관리 > 메인페이지디자인' 으로 가서 메인레이아웃을 설정합니다.
위의 시안을 보시면 알겠지만, 상단부분은 모든페이지마다 똑같이 들어가므로 ① 상단기본타입'으로 선택하고,
측면은 시안에서 나와있듯이 메인페이지와 서브페이지가 서로 달라요.
그래서 메인페이지에서는 ② 측면부분을 '측면감춤'으로 선택합니다. 이 부분은 아래에서 다시 설명드릴께요.
③ 하단 역시, '하단기본타입'으로 선택합니다.
④ 저장버튼을 눌러 메인레이아웃을 저장합니다.
그리고 상단부분부터 디자인작업을 시작하므로 ⑤ HTML소스직접수정 을 클릭합니다.
이제 메인페이지 레이아웃은 내가 작업한 디자인시안에 맞추었습니다.
자! 이젠 실제로 내 쇼핑몰 디자인의 첫걸음인 상단디자인을 작업해봅니다! 긴장되시죠~?
걱정마세요. 전혀 어렵지 않습니다.
자, 상단부분 소스작업에 앞서 미리 상단부분의 이미지들을 아래 그림처럼 영역별로 잘라서 GIF 파일로 저장해 놓습니다.
이때 파일명은 기본제공되는 스킨의 파일명과 동일하게 하면 좋겠죠.
쓰임새가 같은 경우에만 동일한 파일명으로 하세요.
예를 들어, 로고파일(top_logo.gif) 이나 장바구니버튼 (top_menu_main_cart.gif) 같은 파일들을 말합니다.
내가 작업한 상단부분과 기본제공되는 상단부분 비교
이제, 상단부분 HTML소스를 열어 내 디자인에 맞게 수정작업해봅니다.
위에 HTML 소스를 보면 {_cfg['shopSize']} 이런것이나 {_cfg['shopAlign']} 이런 소스들이 보이시죠.
이부분은 치환코드입니다. 치환코드란 프로그램코드로 만들어놓은 영역을 말합니다.
예를들어 {_cfg['shopSize']} 이부분은 기본설정에서 저장해놓은 가로사이즈를 불러오는 것이고,
{_cfg['shopAlign']} 이부분은 가운데정렬이냐 왼쪽정렬이냐 하는 정렬방식을 불러오는 겁니다.
모두다 디자인 기본설정에서 선택해놓은 사항들이죠.
그래서 치환코드들은 프로그램과 연동되기 때문에 다치지 않도록 건드리지마시고,
다른 HTML 소스들을 내 쇼핑몰에 맞도록 수정해나가시면 됩니다.
로고부터 시작해서 신상품, 할인상품..그리고 하단에 카테고리이미지, 장바구니.. 로그인, 회원가입버튼까지
기존 소스를 가지고 수정해나갑니다.
여기서, 방법하나 더!!
기존소스를 수정하기가 너무 어려우시다면, 새롭게 소스를 만드셔도 됩니다.
나모나 기타 웹에디터에서 상단부분을 작업하고, 기존소스를 삭제한 후 새로운 소스를 아예 넣는 방법이죠.
새로운 소스를 집어넣은 후, 기존소스에 있는 링크를 참조해서 수정해나가는 것도 좋은 방법입니다.
단, 기존소스를 복사해서 따로 메모장에 저장해놓으세요. 에러가 나는 경우 참조해야 합니다.
<div class=float><a href="../member/login.php"><img src="../../img/main/top_menu_login.gif"></a></div> ->로그인버튼
<div class=float><a href="../member/join.php"><img src="../../img/main/top_menu_join.gif"></a></div> -> 회원가입버튼
<!--{ : }-->
<div class=float><a href="../member/logout.php"><img src="../../img/main/top_menu_logout.gif"></a></div>->로그아웃버튼
<div class=float><a href="../member/myinfo.php"><img src="../../img/main/top_menu_modify.gif"></a></div>->회원정보수정버튼
<!--{ / }-->
※ 참고사항: <!--{ ? !_sess }--> <!--{ : }--> <!--{ / }-->
위 치환코드는 세션에 대한 프로그램 코드부분이므로 삭제하거나 수정하시면 안됩니다.
아래 4개의 버튼이 보이시죠? 로그인버튼, 회원가입버튼, 로그아웃버튼, 회원정보수정버튼.
위의 4개의 버튼은 같이 묶여져야하는 속성이 있기 때문에 항상 같이 다녀야해요.
만약 로그인,회원가입버튼을 원하는 곳으로 옮겨놓으려면 이 4개의 버튼을 이러한 상태에서 같이 묶어져서 이동해야 합니다.
예를 들어, 기본소스에는 상단부분에 이 4개의 버튼이 있지만, 내 쇼핑몰에는 왼쪽에 위치하고 싶거나,
하단에 위치하고 싶을땐 이 소스 그대로 통째로 옮겨서 적절히 배치하시면 됩니다.
위 소스는 아래 화면으로 보여집니다.
로그인을 하지 않았을때 보여지는 버튼
