디자인관리
디자인 기본설정
|
스타일시트 관리
|
인트로/공사중 설정
|
WebFTP 이미지 관리
|
배너 관리
|
메인팝업창 관리
|
디자인코디 (easy스킨용)
|
디자인코디 (HTML) - 메인페이지 디자인
|
디자인코디 (HTML) - 기타페이지 디자인
|
새로운 페이지 추가하기
|
오픈마켓 전용 이미지관리
디자인코디 (HTML) - 메인페이지 디자인
<CENTER> </CENTER> <CENTER> <TABLE cellSpacing=0 cellPadding=2 align=center border=0> <TBODY> <TR> <TD align=middle colSpan=3><FONT color=#0074ba>※ 먼저 아래 디자인수준에 맞는 가이드를 읽어보시고 시작하세요~</FONT></TD></TR> <TR> <TD><A href="javascript:popup('http://guide.godo.co.kr/guide/php/manual_easy_design.php',750,800)"><img onLoad='miniSelfResize(contents_9,this)' title="popup original Image" style="CURSOR: pointer" src="http://guide.godo.co.kr/guide/img/btn_go_easydesign.gif" onload=miniSelfResize(contents_2,this)></A></TD> <TD width=20></TD> <TD><A href="javascript:popup('http://guide.godo.co.kr/guide/php/manual_high_design.php',750,800)"><img onLoad='miniSelfResize(contents_9,this)' title="popup original Image" style="CURSOR: pointer" src="http://guide.godo.co.kr/guide/img/btn_go_highdesign.gif" onload=miniSelfResize(contents_2,this)></A></TD></TR></TBODY></TABLE></CENTER> <CENTER> </CENTER> <CENTER> </CENTER> <CENTER> </CENTER> <CENTER> </CENTER> <CENTER><img onLoad='miniSelfResize(contents_9,this)' height=92 src="http://guide.godo.co.kr/shop/data/editor/1163379831.gif" width=630></CENTER> <CENTER> </CENTER> <CENTER><SPAN class=PostTitle><FONT color=#333333 size=4><STRONG>① 메인페이지디자인 - 상단디자인꾸미기</STRONG></FONT></SPAN> </CENTER> <CENTER> </CENTER> <CENTER> </CENTER> <CENTER> </CENTER> <CENTER>이제 쇼핑몰 신청을 해놨는데...</CENTER> <CENTER>디자인이 걱정이시죠.</CENTER> <CENTER> </CENTER> <CENTER>한번만 천천히 따라해보세요. 충분히 자신감을 얻으실 겁니다~</CENTER> <CENTER> </CENTER> <CENTER>아래는 e나무 데모버전 시안입니다.</CENTER> <CENTER>아래 디자인을 가지고 스킨적용방법에 대해 진행을 해보겠습니다.</CENTER> <CENTER> </CENTER> <CENTER> </CENTER> <CENTER>포토샵에서 시안을 디자인합니다. </CENTER> <CENTER><FONT color=#0000ff>왼쪽카테고리부분은 200픽셀. 나머지 오른쪽은 700픽셀. 그래서 전체 가로폭은 900픽셀</FONT>입니다.</CENTER> <CENTER> </CENTER> <CENTER><img onLoad='miniSelfResize(contents_9,this)' height=661 src="http://guide.godo.co.kr/shop/data/editor/1163379855.gif" width=600></CENTER> <CENTER> </CENTER> <P> </P> <P> </P> <CENTER>다 아시겠지만, 쇼핑몰 메인페이지에서 고려해야 할 사항은</CENTER> <CENTER>상품과 배너의 적절한 수량 그리고 배치가 중요합니다.</CENTER> <CENTER>고객의 시선이 머무는 공간마다 가치를 부여하고, </CENTER> <CENTER>인식하게 하고, 클릭하게 해야 합니다. </CENTER> <CENTER> </CENTER> <CENTER> </CENTER> <CENTER> </CENTER> <CENTER>자. 이제 디자인시안 작업은 끝났고 하나씩 쇼핑몰에 적용시켜보겠습니다~ </CENTER> <CENTER> </CENTER> <CENTER>관리자페이지로 가서 '디자인관리 > 디자인기본설정' 에 보면 스킨선택이 있습니다.</CENTER> <CENTER>제가 디자인한 유형과 블랙스킨과 유사하기 때문에 '기본디자인스킨(black)으로 선택합니다.</CENTER> <CENTER>전체 레이아웃이 유사한지 비교해보세요.</CENTER> <CENTER>그리고, <FONT color=#0000ff>전체 900픽셀, 외곽 즉 측면 200픽셀로 입력</FONT>합니다.</CENTER> <CENTER>라인색상은 없으므로 공란으로 두고. 등록버튼을 눌러 저장합니다.</CENTER> <CENTER><BR> </CENTER> <P align=center><img onLoad='miniSelfResize(contents_9,this)' height=298 src="http://guide.godo.co.kr/shop/data/editor/1163379887.gif" width=516></P> <P align=center> </P> <P align=center> </P> <P align=center> </P> <P align=center> </P> <P align=center>이제 '디자인관리 > 메인페이지디자인' 으로 가서 메인레이아웃을 설정합니다.</P> <P align=center>위의 시안을 보시면 알겠지만, 상단부분은 모든페이지마다 똑같이 들어가므로 <U><FONT color=#0000ff>① 상단기본타입'으로 선택</FONT></U>하고,</P> <P align=center>측면은 시안에서 나와있듯이 메인페이지와 서브페이지가 서로 달라요.</P> <P align=center>그래서 메인페이지에서는 <U><FONT color=#0000ff>② 측면부분을 '측면감춤'으로 선택</FONT></U>합니다. 이 부분은 아래에서 다시 설명드릴께요.</P> <P align=center><U><FONT color=#0000ff>③ 하단 역시, '하단기본타입'으로 선택</FONT></U>합니다.</P> <P align=center><U><FONT color=#0000ff>④ 저장버튼</FONT></U>을 눌러 메인레이아웃을 저장합니다.</P> <P align=center> </P> <P align=center>그리고 상단부분부터 디자인작업을 시작하므로 <U><FONT color=#0000ff>⑤ HTML소스직접수정</FONT></U> 을 클릭합니다.</P> <P align=center> </P> <P align=center> </P> <P align=center><img onLoad='miniSelfResize(contents_9,this)' height=388 src="http://guide.godo.co.kr/shop/data/editor/1163379903.gif" width=600></P> <P align=center> </P> <P align=center> </P> <P align=center> </P> <P align=center>이제 메인페이지 레이아웃은 내가 작업한 디자인시안에 맞추었습니다.</P> <P align=center> </P> <P align=center>자! 이젠 실제로 내 쇼핑몰 디자인의 첫걸음인 상단디자인을 작업해봅니다! 긴장되시죠~?</P> <P align=center>걱정마세요. 전혀 어렵지 않습니다.</P> <P align=center> </P> <P align=center> </P> <P align=center> </P> <P align=center>자, 상단부분 소스작업에 앞서 미리 상단부분의 이미지들을 아래 그림처럼 영역별로 잘라서 GIF 파일로 저장해 놓습니다.</P> <P align=center>이때 파일명은 기본제공되는 스킨의 파일명과 동일하게 하면 좋겠죠.</P> <P align=center>쓰임새가 같은 경우에만 동일한 파일명으로 하세요.</P> <P align=center>예를 들어, <FONT color=#0000ff>로고파일(top_logo.gif) 이나 장바구니버튼 (top_menu_main_cart.gif)</FONT> 같은 파일들을 말합니다. </P> <P align=center> </P> <P align=center> </P> <P align=center> </P> <P align=center><FONT color=#0000ff>내가 작업한 상단부분과 기본제공되는 상단부분 비교</FONT></P> <P align=center> </P> <P align=center><img onLoad='miniSelfResize(contents_9,this)' height=246 src="http://guide.godo.co.kr/shop/data/editor/1163379923.gif" width=582></P> <P align=center> </P> <P align=center> </P> <P align=center> </P> <P align=center>이제, 상단부분 HTML소스를 열어 내 디자인에 맞게 수정작업해봅니다.</P> <P align=center><img onLoad='miniSelfResize(contents_9,this)' height=493 src="http://guide.godo.co.kr/shop/data/editor/1163379942.gif" width=600></P> <P align=center> </P> <P align=center><!-- dangerous tag filtered --></P> <P align=center><!-- dangerous tag filtered --></P> <P align=center><!-- dangerous tag filtered --></P> <P align=center><!-- dangerous tag filtered --></P> <P align=center> </P> <P align=center>위에 HTML 소스를 보면 <FONT color=#ff0000>{_cfg['shopSize']}</FONT> 이런것이나 <FONT color=#ff0000>{_cfg['shopAlign']}</FONT> 이런 소스들이 보이시죠.</P> <P align=center>이부분은 치환코드입니다. 치환코드란 프로그램코드로 만들어놓은 영역을 말합니다.</P> <P align=center> 예를들어 <FONT color=#ff0000>{_cfg['shopSize']}</FONT> 이부분은 기본설정에서 저장해놓은 가로사이즈를 불러오는 것이고,</P> <P align=center><FONT color=#ff0000>{_cfg['shopAlign']}</FONT> 이부분은 가운데정렬이냐 왼쪽정렬이냐 하는 정렬방식을 불러오는 겁니다.</P> <P align=center>모두다 디자인 기본설정에서 선택해놓은 사항들이죠.</P> <P align=center> </P> <P align=center>그래서 치환코드들은 프로그램과 연동되기 때문에 다치지 않도록 건드리지마시고,</P> <P align=center>다른 HTML 소스들을 내 쇼핑몰에 맞도록 수정해나가시면 됩니다.</P> <P align=center>로고부터 시작해서 신상품, 할인상품..그리고 하단에 카테고리이미지, 장바구니.. 로그인, 회원가입버튼까지 </P> <P align=center>기존 소스를 가지고 수정해나갑니다.</P> <P align=center> </P> <P align=center><FONT color=#0000ff>여기서, 방법하나 더!!</FONT></P> <P align=center><FONT color=#ff3399>기존소스를 수정하기가 너무 어려우시다면, 새롭게 소스를 만드셔도 됩니다.</FONT></P> <P align=center><FONT color=#ff3399>나모나 기타 웹에디터에서 상단부분을 작업하고, 기존소스를 삭제한 후 새로운 소스를 아예 넣는 방법이죠.</FONT></P> <P align=center><FONT color=#ff3399>새로운 소스를 집어넣은 후, 기존소스에 있는 링크를 참조해서 수정해나가는 것도 좋은 방법입니다.</FONT></P> <P align=center><FONT color=#ff3399>단, 기존소스를 복사해서 따로 메모장에 저장해놓으세요. 에러가 나는 경우 참조해야 합니다.</FONT></P> <P align=center><FONT color=#ff3399></FONT> </P> <P align=center> </P> <CENTER> </CENTER> <CENTER> </CENTER> <CENTER> </CENTER> <CENTER><FONT color=#333333>자. 상단부분 작업할 때 유의해야 할 부분이 있습니다.</FONT></CENTER> <CENTER><FONT color=#333333></FONT> </CENTER> <CENTER><FONT color=#333333>바로 로그인버튼과 회원가입 버튼인데요.</FONT></CENTER> <CENTER><FONT color=#333333>로그인은 로그아웃과 겸용해서 사용을 해야하고,</FONT></CENTER> <CENTER><FONT color=#333333>회원가입은 회원정보수정 버튼과 겸용으로 사용해야 합니다.</FONT></CENTER> <CENTER><FONT color=#333333>왜그런지는 아시죠? ^^</FONT></CENTER> <CENTER><FONT color=#333333></FONT> </CENTER> <CENTER><FONT color=#333333>네, 로그인을 하게되면 로그인 버튼이 로그아웃으로 바껴야하고,</FONT></CENTER> <CENTER><FONT color=#333333>회원가입 버튼도 회원정보수정으로 바껴야 하기 때문입니다.</FONT></CENTER> <CENTER><FONT color=#333333></FONT> </CENTER> <CENTER><FONT color=#333333>그 부분에 해당하는 소스를 살펴봅니다.</FONT></CENTER> <CENTER><FONT color=#333333></FONT> </CENTER> <DIV align=left><FONT color=#333333>---------------------------------------------------------------------------------------------------------</FONT></DIV> <DIV align=left><FONT face=verdana color=#0000ff size=1><!--{ ? !_sess }--><BR> <div class=float><a href="../member/login.php"><img src="../../img/main/top_menu_login.gif"></a></div> <FONT face=돋움 color=#ff0000 size=2>->로그인버튼</FONT><BR> <div class=float><a href="../member/join.php"><img src="../../img/main/top_menu_join.gif"></a></div> <FONT face=돋움 color=#ff0000 size=2>-> 회원가입버튼</FONT><BR> <!--{ : }--><BR> <div class=float><a href="../member/logout.php"><img src="../../img/main/top_menu_logout.gif"></a></div><FONT face=돋움 color=#ff0000 size=2>->로그아웃버튼</FONT><BR> <div class=float><a href="../member/myinfo.php"><img src="../../img/main/top_menu_modify.gif"></a></div><FONT face=돋움 color=#ff0000 size=2>->회원정보수정버튼</FONT><BR> <!--{ / }--></FONT></DIV> <DIV align=left><FONT color=#0000ff></FONT> </DIV> <DIV align=left><FONT color=#333333>---------------------------------------------------------------------------------------------------------</FONT></DIV> <P align=center><FONT color=#333333><FONT color=#ff0000>※ 참고사항: </FONT> <FONT color=#0000ff><FONT face=Verdana size=1><!--{ ? !_sess }--></FONT> <FONT face=Verdana size=1> <!--{ : }--> <!--{ / }--> </FONT></FONT></FONT></P> <P align=center><FONT color=#333333><FONT color=#333333>위 치환코드는 세션에 대한 프로그램 코드부분이므로 삭제하거나 수정하시면 안됩니다.</FONT></FONT></P> <P><FONT color=#333333></FONT> </P> <P align=center><FONT color=#333333>아래 4개의 버튼이 보이시죠? 로그인버튼, 회원가입버튼, 로그아웃버튼, 회원정보수정버튼.</FONT></P> <P align=center><FONT color=#333333>위의 4개의 버튼은 같이 묶여져야하는 속성이 있기 때문에 항상 같이 다녀야해요.</FONT></P> <P align=center><FONT color=#333333>만약 로그인,회원가입버튼을 원하는 곳으로 옮겨놓으려면 이 4개의 버튼을 이러한 상태에서 같이 묶어져서 이동해야 합니다.</FONT></P> <P align=center><FONT color=#333333>예를 들어, 기본소스에는 상단부분에 이 4개의 버튼이 있지만, 내 쇼핑몰에는 왼쪽에 위치하고 싶거나,</FONT></P> <P align=center><FONT color=#333333> 하단에 위치하고 싶을땐 </FONT><FONT color=#333333>이 소스 그대로 통째로 옮겨서 적절히 배치하시면 됩니다.</FONT></P> <P align=center><FONT color=#333333></FONT> </P> <P align=center><FONT color=#333333></FONT> </P> <P align=center><FONT color=#333333>위 소스는 아래 화면으로 보여집니다.</FONT></P> <P align=center><FONT color=#333333></FONT> </P> <P align=center><FONT color=#0000ff>로그인을 하지 않았을때 보여지는 버튼</FONT></P> <P align=center><FONT color=#333333><img onLoad='miniSelfResize(contents_9,this)' src="http://enamooselffix.godo.co.kr/shop/skin/default/img/main/top_menu_login.gif"><img onLoad='miniSelfResize(contents_9,this)' src="http://enamooselffix.godo.co.kr/shop/skin/default/img/main/top_menu_join.gif"> </P> <CENTER><FONT color=#333333></FONT> </CENTER> <CENTER> </CENTER> <CENTER><FONT color=#0000ff>로그인을 했을때 보여지는 버튼</FONT></CENTER> <P align=center><img onLoad='miniSelfResize(contents_9,this)' src="http://enamooselffix.godo.co.kr/shop/skin/default/img/main/top_menu_logout.gif"><img onLoad='miniSelfResize(contents_9,this)' src="http://enamooselffix.godo.co.kr/shop/skin/default/img/main/top_menu_modify.gif"></P></FONT> <CENTER><FONT color=#333333></FONT> </CENTER> <CENTER><FONT color=#333333>이해되시죠~</FONT></CENTER> <CENTER><FONT color=#333333></FONT> </CENTER> <CENTER><FONT color=#333333></FONT> </CENTER> <CENTER><FONT color=#333333></FONT> </CENTER> <CENTER><FONT color=#333333>자. 이렇게 해서 상단디자인을 다 붙여봤습니다.</FONT></CENTER> <CENTER><FONT color=#333333>그럼 모양새가 아래와 같이 됩니다.</FONT></CENTER> <CENTER><FONT color=#333333></FONT> </CENTER> <CENTER><FONT color=#333333></FONT> </CENTER> <CENTER><img onLoad='miniSelfResize(contents_9,this)' height=574 src="http://guide.godo.co.kr/shop/data/editor/1163379986.gif" width=661></CENTER> <P align=center><FONT color=#ff3399></FONT> </P> <P align=center><FONT color=#ff3399></FONT> </P> <P align=center><FONT color=#ff3399></FONT> </P> <P align=center><FONT color=#ff3399></FONT> </P> <P align=center><FONT color=#ff3399></FONT> </P> <CENTER><SPAN class=PostTitle><FONT color=#333333 size=4><STRONG>② 메인페이지디자인 - 메인본문/하단디자인꾸미기</STRONG></FONT></SPAN> </CENTER> <CENTER> </CENTER> <CENTER> </CENTER> <CENTER>이제 메인페이지 상단 바로 밑 메인본문쪽을 작업합니다.</CENTER> <CENTER> </CENTER> <CENTER>먼저, 메인페이지의 왼쪽메뉴부분을 달리 갈까합니다.</CENTER> <CENTER> </CENTER> <CENTER>즉, <FONT color=#0000ff>메인과 서브의 왼쪽 메뉴부분이 보여지는게 다르다는 얘기</FONT>입니다.</CENTER> <CENTER> </CENTER> <CENTER>일반적으로는 왼쪽메뉴를 메인이든 서브든 동일한 패턴으로 사용하시는 분들도 많고,</CENTER> <CENTER>좀더 특별한 메인페이지를 원할 경우 메인과 서브가 다르게 보여지는 스타일도 많습니다.</CENTER> <CENTER> </CENTER> <CENTER> </CENTER> <CENTER>오히려 블랙(black)스킨보다 핑크(pink)스킨이 지금의 예제와 비슷합니다.</CENTER> <CENTER> 메인에서 <FONT color=#0000ff>왼쪽측면을 감추고 카테고리가 나오는 부분을 본문에 포함시키는 스타일</FONT>이에요.</CENTER> <CENTER> </CENTER> <CENTER> </CENTER> <CENTER>자, '디자인관리 > 메인페이지디자인' 으로 가서 본문디자인의 'HTML소스직접수정' 을 눌러 작업시작합니다.</CENTER> <CENTER> </CENTER> <CENTER><img onLoad='miniSelfResize(contents_9,this)' height=388 src="http://guide.godo.co.kr/shop/data/editor/1163380046.jpg" width=600></CENTER> <CENTER> </CENTER> <CENTER> </CENTER> <CENTER> </CENTER> <CENTER>메인본문 소스를 열고, 왼쪽카테고리가 출력되는 부분부터 작업합니다.</CENTER> <CENTER> </CENTER> <CENTER>근데 이게 왠일? 메인본문영역 <FONT color=#0000ff>기본소스에 카테고리 관련 소스가 없어요</FONT>??</CENTER> <CENTER>당연합니다. 블랙스킨을 가지고 수정하는거니까 <FONT color=#0000ff>카테고리 소스는 측면기본타입파일</FONT>에 있습니다. </CENTER> <CENTER>그래서 수고스럽지만^^ <FONT color=#0000ff>측면기본타입파일을 (outline/side/standard.htm)을 찾아 카테고리 관련소스를 복사</FONT>해옵니다.</CENTER> <CENTER>복사한 카테고리 소스를 메인본문에 넣습니다.</CENTER> <CENTER> </CENTER> <CENTER>바로 아래 소스죠.</CENTER> <CENTER> </CENTER> <CENTER> </CENTER> <DIV align=left><FONT face=verdana color=#333333 size=1><table cellpadding=0 cellspacing=0 width=100% border=0><BR><tr><td valign=top></FONT></DIV> <DIV align=left><FONT face=verdana color=#333333 size=1><!-- 카테고리 측면 시작 ---></FONT></DIV> <DIV align=left><FONT face=verdana color=#333333 size=1>{*** 측면기본타입 | main/index.php ***}<BR><table width=200 border=4 bordercolor=E6E6E6 style="border-collapse:collapse"><BR> <tr><BR> <td></FONT></DIV> <DIV align=left><FONT face=verdana color=#333333 size=1><!-- 카테고리 : Start --><BR><!--{ ? _cfg.subCategory == 2 }--><BR> <table width=100% cellpadding=0 cellspacing=0><BR> <!--{ @ dataCategory( _cfg.subCategory ) }--><BR> <tr><BR> <td height=25 style="padding-left:10px;font-weight:bold"><a href="../goods/goods_list.php?category={.category}">{.catnm}</a></td><BR> </tr><BR> <tr><BR> <td bgcolor=#f7f7f7 style="padding:5px"><BR> <!--{ ? .sub }--><BR> <table><BR> <!--{ @ .sub }--><BR> <tr><td>- <a href="../goods/goods_list.php?category={..category}">{..catnm}</a></td></tr><BR> <!--{ / }--><BR> </table><BR> <!--{ / }--><BR> </td><BR> </tr><BR> <!--{ / }--><BR> <tr><td height=10></td></tr><BR> </table><BR><!--{ : }--><BR> <div style="padding:7px 10px"><BR> <table id=menuLayer cellpadding=0 cellspacing=0><BR> <!--{ @ dataCategory( _cfg.subCategory ) }--><BR> <tr><BR> <td width=100% nowrap class=cate><a href="../goods/goods_list.php?category={.category}">{.catnm}</a></td><BR> <td><BR> <!--{ ? .sub }--><BR> <div style="position:relative"><div class=subLayer><BR> <!--{ @ .sub }--><BR> <a href="../goods/goods_list.php?category={..category}">{..catnm}</a><br><BR> <!--{ / }--><BR> </div></div><BR> <!--{ / }--><BR> </td><BR> </tr><BR> <!--{ / }--><BR> </table><BR> <BR> <!--{ ? _cfg.subCategory // 2차 카테고리 출력실행 }--><BR> <script>execSubLayer();</script><BR> <!--{ / }--><BR> </div><BR><!--{ / }--><BR><!-- 카테고리 : End --></FONT></DIV> <DIV align=left><FONT size=2><FONT face=verdana color=#333333 size=1> </td><BR> </tr></table></FONT></FONT></DIV> <P><FONT size=2><FONT face=verdana size=1></FONT></FONT> </P> <P><FONT size=2><FONT face=verdana size=1> </P> <DIV align=center><FONT face=돋움 size=2>위 카테고리 출력소스는 어드민에 입력한 분류들을 출력하게 합니다.</FONT></DIV> <DIV align=center><FONT face=돋움 size=2>단순한 웹텍스트(웹폰트)로 뿌려지게되죠.</FONT></DIV> <DIV align=center><FONT face=돋움 size=2>그럼, 더 멋지게 하기 위해서 <FONT color=#0000ff>카테고리들을 이미지로 처리할 수 없을까요</FONT>?</FONT></DIV> <DIV align=center><FONT face=돋움 size=2>있습니다!</FONT></DIV> <DIV align=center> </DIV> <DIV align=center><FONT face=돋움 size=2>아래 고도 홈페이지 교육센터에 디자인팁 활용예제가 있습니다.</FONT></DIV> <DIV align=center><FONT face=돋움 size=2>눌러서 보시고, 잘 활용해보세요.</FONT></DIV> <DIV align=center><FONT face=돋움 size=2></FONT> </DIV> <DIV align=center><A href="http://www.godomall.co.kr/edu/edu_board_list.html?cate=design&in_view=y&sno=126#Go_view" target=_new><FONT face=돋움 size=2><STRONG><u>카테고리 이미지로 바꾸는 방법</u></STRONG></FONT></A></DIV> <DIV align=center> </DIV> <DIV align=center><A class=con_link href="http://cafe.naver.com/enamoo/50" target=_blank><FONT face=돋움 color=#0033cc size=2></FONT></A> </DIV> <DIV align=center><FONT face=돋움 color=#0033cc size=2></FONT> </DIV> <DIV align=center><FONT face=돋움 color=#0033cc size=2></FONT> </DIV> <DIV align=center><FONT face=돋움 color=#0033cc size=2></FONT> </DIV> <DIV align=center><FONT face=돋움 size=2>그리고, 카테고리아래 검색기능도 옮겨옮니다.</FONT></DIV> <DIV align=center><FONT face=돋움 size=2><FONT color=#0000ff>검색기능 관련 소스는 상단기본타입(outline/header/standard.htm)</FONT> 에 있어요.</FONT></DIV> <DIV align=center><FONT face=돋움 size=2>여기서 문제가 있죠. 상단기본타입을 내 디자인시안에 맞게 바꾸는 바람에 원래의 기존소스가 없게되지요.</FONT></DIV> <DIV align=center><FONT face=돋움 size=2>그래서 항상 소스를 카피해놓거나 다른페이지에서 활용할 소스들을 감춤처리해놓으면</FONT></DIV> <DIV align=center><FONT face=돋움 size=2>나중에 요긴하게 가져다 쓸 수 있습니다.</FONT></DIV> <DIV align=center><FONT face=돋움 size=2>꼭 카피해서 백업하세요.</FONT></DIV> <DIV align=center><FONT face=돋움 size=2></FONT> </DIV> <DIV align=center><FONT face=돋움 size=2></FONT> </DIV> <DIV align=center><FONT face=돋움 size=2>자, 수고스럽지만, 검색기능소스를 복사해서 옮겨옵니다.</FONT></DIV> <DIV align=center> </DIV> <DIV align=center> </DIV> <DIV align=center> </DIV> <DIV align=left><FONT color=#333333><!-- 검색 start --></FONT></DIV> <DIV align=left><FONT color=#333333><form action="../goods/goods_search.php" onsubmit="return chkForm(this)"><BR><input type=hidden name=searched value="Y"><BR><input type=hidden name=log value="1"><BR><input type=hidden name=skey value="all"></FONT></DIV> <DIV align=left><FONT color=#333333><table width=200 cellpadding=0 cellspacing=0 height=43 bgcolor=004CA0><BR><tr><BR> <td align=center><BR> <table cellpadding=0 cellspacing=0><BR> <tr><BR> <td><input name=sword type=text class=line style="width:90" value="{_GET['sword']}" required label="검색어"></td><BR> <td><input type=image src="../img/main/top_search_bu_go.gif"></td><BR> <td><a href="../goods/goods_search.php"><img src="../img/main/top_search_bu_detail.gif"></a></td><BR> </tr></table><BR> </td><BR> </tr></form></table></FONT></DIV> <DIV align=left><FONT color=#333333><!-- 검색 end --></FONT></DIV> <P> </P> <P align=center> </P> <P align=center> </P> <P align=center><FONT face=돋움 size=2>그리고 브랜드샵소스도 복사해옵니다. </FONT></P> <P align=center><FONT face=돋움 size=2><FONT color=#0000ff>브랜드샵 관련 소스는 측면기본타입파일 (outline/side/standard.htm)</FONT> 안에 있죠.</FONT></P> <P> </P> <P><FONT color=#333333><!-- 브랜드샵 : Start --><BR><table cellpadding=0 cellspacing=0><BR><tr><td><img src="../img/main/brand_left_bar.gif"></td></tr><BR><tr><BR> <td align="center" style="background-color:#BBDAEE;padding:5px 0px 10px 0px;"><BR> <form><BR> <select name="brandView" onChange="javascript:if ( this.options[this.options.selectedIndex].value ) location.replace( this.options[this.options.selectedIndex].value );" style="font:8pt 돋움;width:90%;"><BR> <option value=""> - 브랜드샵 보기</option><BR><!--{ @dataBrand() }--><BR> <option value="../goods/goods_brand.php?brand={.brand}"> - {.name}</option><BR><!--{ / }--><BR> </select><BR> </form><BR> </td><BR></tr><BR></table><BR></div><BR><!-- 브랜드샵 : End --></FONT></P> <P> </P> <P> </P> <P align=center><FONT face=돋움 size=2>카테고리, 검색기능, 그리고 브랜드샵 기능까지 왼쪽에 필요한 소스들을 다놓았으니,</FONT></P> <P align=center><FONT face=돋움 size=2>사용자화면에서 제대로 돌아가는지 확인해보시구요.</FONT></P> <P align=center><FONT face=돋움 size=2></FONT> </P> <P align=center><FONT face=돋움 size=2>기능이 잘 돌아가면, 이제 디자인을 부분부분 바꿔나갑니다.</FONT></P> <P align=center><FONT face=돋움 size=2></FONT> </P> <P align=center><FONT face=돋움 size=2>아래를 보시면 메인왼쪽부분이 잘 붙여졌습니다.</FONT></P> <P align=center> </P> <P align=center><img onLoad='miniSelfResize(contents_9,this)' height=442 src="http://guide.godo.co.kr/shop/data/editor/1163380070.jpg" width=600></P> <P> </P> <DIV align=left><BR></DIV> <DIV align=center> </DIV> <DIV align=center><FONT face=돋움 size=2></FONT> </DIV> <DIV align=center><FONT face=돋움 size=2>이제 중앙부분을 시작합니다.</FONT></DIV> <DIV align=center><FONT face=돋움 size=2>중앙에는 배너들이 잔뜩있죠.</FONT></DIV> <DIV align=center><FONT face=돋움 size=2>이 배너들은 어드민의 '<FONT color=#0000ff>디자인관리>배너관리</FONT>' 를 활용합니다.</FONT></DIV> <DIV align=center><FONT face=돋움 size=2></FONT> </DIV> <DIV align=center><FONT face=돋움 size=2>배너관리에 들어가시면 '<FONT color=#0000ff>배너위치관리</FONT>'라는게 보이시죠?</FONT></DIV> <DIV align=center><FONT face=돋움 size=2>이거 매우 중요합니다.</FONT></DIV> <DIV align=center><FONT face=돋움 size=2></FONT> </DIV> <DIV align=center><FONT face=돋움 size=2>배너를 등록할때마다 치환코드가 생성됩니다.</FONT></DIV> <DIV align=center><FONT face=돋움 size=2></FONT> </DIV> <DIV align=center><FONT face=돋움 size=2>배너위치관리란 배너를 위치별로 지정하여 등록하게되면 치환코드가 생성되고 관리하는 기능입니다</FONT><FONT face=돋움 size=2>.</FONT></DIV> <DIV align=center><FONT face=돋움 size=2>즉, 배너를 그룹으로 묶어 활용할 수도 있고, 배너 한개씩 지정해도 됩니다. </FONT></DIV> <DIV align=center><FONT face=돋움 size=2></FONT> </DIV> <DIV align=center><FONT face=돋움 size=2>아래를 보세요.</FONT></DIV> <DIV align=center><FONT face=돋움 size=2></FONT> </DIV> <DIV align=center> </DIV> <DIV align=center> </DIV> <DIV align=center><FONT face=돋움 size=2>배너위치관리 버튼을 누르세요.</FONT></DIV> <DIV align=center><FONT face=돋움 size=2></FONT> </DIV> <DIV align=center><FONT face=돋움 size=2></FONT></DIV> <DIV align=center><img onLoad='miniSelfResize(contents_9,this)' height=290 src="http://guide.godo.co.kr/shop/data/editor/1163380086.jpg" width=641></DIV> <DIV align=center> </DIV> <DIV align=center> </DIV> <DIV align=center> </DIV> <DIV align=center><FONT face=돋움 size=2>각 배너들의 위치에 대한 명칭을 정해서 입력한후 저장합니다.</FONT></DIV> <DIV align=center><FONT face=돋움 size=2></FONT> </DIV> <DIV align=center><img onLoad='miniSelfResize(contents_9,this)' height=354 src="http://guide.godo.co.kr/shop/data/editor/1163380094.jpg" width=600></DIV> <DIV align=center> </DIV> <DIV align=center> </DIV> <DIV align=center><FONT face=돋움 size=2> 그리고, 배너들을 등록합니다.</FONT></DIV> <DIV align=center><FONT face=돋움 size=2>배너등록시 미리 지정해놓은 배너위치를 선택하고 등록합니다.</FONT></DIV> <DIV align=center><FONT face=돋움 size=2>배너를 등록하면 아래처럼 각각의 배너마다 치환코드가 생성됩니다.</FONT></DIV> <DIV align=center><FONT face=돋움 size=2>아래 치환코드가 보이시죠?</FONT></DIV> <DIV align=center><FONT face=돋움 size=2></FONT> </DIV> <DIV align=center><img onLoad='miniSelfResize(contents_9,this)' height=290 src="http://guide.godo.co.kr/shop/data/editor/1163380117.jpg" width=641></DIV> <DIV align=left><FONT face=돋움 size=2> </FONT></DIV> <DIV align=center><FONT face=돋움 size=2></FONT> </DIV> <DIV align=center><FONT face=돋움 size=2>이처럼 각각의 배너가 치환코드를 갖게 됩니다.</FONT></DIV> <DIV align=center><FONT face=돋움 size=2>이제 생성된 치환코드를 HTML상에서 활용하게 됩니다.</FONT></DIV> <DIV align=center><FONT face=돋움 size=2></FONT> </DIV> <DIV align=center><FONT face=돋움 size=2>치환코드를 아래처럼 배너가 위치할 곳에 집어넣습니다.</FONT></DIV> <DIV align=center><FONT face=돋움 size=2>소스안에는 배너관련 치환코드가 이미 있어서 숫자만 바꾸어주고 내게 맞게 주석만 달아주시면 됩니다.</FONT></DIV> <DIV align=center> </DIV> <DIV align=center><FONT face=돋움 size=2></FONT> </DIV> <DIV align=left><FONT face=돋움 size=2>* 배너치환코드 활용예제 *</FONT></DIV> <DIV align=left><FONT face=돋움 size=2></FONT> </DIV> <DIV align=left><FONT face=돋움 size=2><!-- 메인배너 젤큰거 --><BR><div class=clear></div><BR><!--{ <FONT color=#0000ff>@ dataBanner( 1 )</FONT> }--><BR><div class=float>{.tag}</div><BR><!--{ / }--></FONT></DIV> <DIV align=left><FONT face=돋움 size=2></FONT> </DIV> <DIV align=left><FONT face=돋움 size=2><!-- 메인배너 두번째로 큰거 --><BR><div class=clear></div><BR><!--{ <FONT color=#0000ff>@ dataBanner( 2 )</FONT> }--><BR><div class=float>{.tag}</div><BR><!--{ / }--></FONT></DIV> <DIV align=left><FONT face=돋움 size=2></FONT> </DIV> <DIV align=left><FONT face=돋움 size=2><!-- 쇼핑 도우미 배너 --><BR><div class=clear></div><BR><!--{ <FONT color=#0000ff>@ dataBanner( 3 )</FONT> }--><BR><div class=float>{.tag}</div><BR><!--{ / }--></FONT></DIV> <DIV align=left> </DIV> <DIV align=left> </DIV> <DIV align=left> </DIV> <DIV align=center><FONT face=돋움 size=2>요렇게 치환코드를 사용하여 배너를 불러오고 배너의 위치는 TABLE로 잘 조정합니다.</FONT></DIV> <DIV align=center><FONT face=돋움 size=2></FONT> </DIV> <DIV align=center><FONT face=돋움 size=2>이처럼 배너 한개마다 치환코드를 생성해도 되고, 여러개의 배너를 하나의 치환코드로 사용해도 좋습니다.</FONT></DIV> <DIV align=center><FONT face=돋움 size=2>즉, 여러개의 배너가 같은 공간에 쭉 나열되어있을때, 하나의 치환코드로 그룹화해서 활용하는 겁니다.</FONT></DIV> <DIV align=center><FONT face=돋움 size=2>특히, 배너들이 가로로 쭉 있는 경우에 편리합니다.</FONT></DIV> <DIV align=center><FONT face=돋움 size=2></FONT> </DIV> <DIV align=center><FONT face=돋움 size=2>나중에 배너를 그룹화해서 활용하는 예제를 올리도록 하겠습니다.</FONT></DIV> <DIV align=center><FONT face=돋움 size=2></FONT> </DIV> <DIV align=center><FONT face=돋움 size=2><FONT color=#0000ff>저 개인적으로는 그냥 한개의 배너에 한개의 치환코드를 사용하는 것을 추천합니다</FONT>.</FONT></DIV> <DIV align=center><FONT face=돋움 size=2>각각의 배너치환코드를 TABLE안에 넣고 조정하기가 더 편하더군요.</FONT></DIV> <DIV align=center><FONT face=돋움 size=2></FONT> </DIV> <DIV align=center><FONT face=돋움 size=2></FONT> </DIV> <DIV align=center><FONT face=돋움 size=2>이제 메인상단의 배너작업이 끝났으면</FONT></DIV> <DIV align=center><FONT face=돋움 size=2>아래로 내려와서 상품리스트가 뿌려지는 곳을 작업합니다.</FONT></DIV> <DIV align=center><FONT face=돋움 size=2></FONT> </DIV> <DIV align=center><FONT face=돋움 size=2>시안은 <FONT color=#0000ff>베스트상품, 신상품, 아울렛상품의 순서</FONT>로 되어있습니다.</FONT></DIV> <DIV align=center><FONT face=돋움 size=2></FONT> </DIV> <DIV align=center><FONT face=돋움 size=2>베스트상품 </FONT><FONT face=돋움 size=2>소스를 보면 </FONT></DIV> <DIV align=center><FONT face=돋움 size=2></FONT> </DIV> <DIV align=center><FONT face=돋움 size=2></FONT> </DIV> <DIV align=left><FONT face=돋움 size=2><FONT color=#333333><FONT face=verdana size=1><!-- 베스트상품 리스트 #1 --><BR><!--{ ? _cfg_step[0].chk }--><BR> <div><A HREF="../goods/goods_grp_03.php"><img src="../img/main/main_bar_best.gif"></A></div><BR> <!--{ = this->assign( 'loop', dataDisplayGoods( 0, _cfg_step[0].img, _cfg_step[0].page_num ) ) // 데이타 호출 }--><BR> <!--{ = this->assign( 'cols', _cfg_step[0].cols ) // 행당 컬럼수 }--><BR> <!--{ = this->assign( 'size', _cfg[_cfg_step[0].img] ) // 이미지 사이즈 }--><BR> <!--{ = this->assign( 'id', "main_list_01" ) // 고유 ID }--><BR> <!--{ = include_file( "goods/list/" + _cfg_step[0].tpl + ".htm" ) }--><BR><!--{ / }--></FONT><BR></FONT></DIV></FONT> <DIV align=center><FONT face=돋움 size=2></FONT> </DIV> <DIV align=center><FONT face=돋움 size=2></FONT> </DIV> <DIV align=center> </DIV> <DIV align=center><FONT face=돋움 size=2>여기서 할일은 간단합니다.</FONT></DIV> <DIV align=center><FONT face=돋움 size=2>먼저 <FONT color=#0000ff>베스트상품 Bar 이미지를 내가 만든 이미지로 바꾸시고</FONT>, </FONT></DIV> <DIV align=center><FONT face=돋움 size=2><FONT color=#0000ff><FONT color=#000000>관리자페이지의</FONT> </FONT></FONT><FONT face=돋움 size=2>'<FONT color=#0000ff>상품관리 > 메인페이지디스플레이</FONT>' 에서 '<FONT color=#0000ff>베스트상품 선정, </FONT><FONT color=#0000ff>디스플레이방식'</FONT>을 지정하시면 됩니다.</FONT></DIV> <DIV align=center><FONT face=돋움 size=2></FONT> </DIV> <DIV align=center><FONT face=돋움 size=2>신상품, 아울렛상품도 마찬가지입니다.</FONT></DIV> <DIV align=center><FONT face=돋움 size=2><FONT color=#0000ff>메인디스플레이 기능을 잘 활용</FONT>하세요.</FONT></DIV> <DIV align=center><FONT face=돋움 size=2></FONT> </DIV> <DIV align=center><FONT face=돋움 size=2></FONT> </DIV> <DIV align=center><FONT face=돋움 size=2></FONT> </DIV> <DIV align=center><FONT face=돋움 size=2>이제, 메인하단부분만 남았습니다.</FONT></DIV> <DIV align=center><FONT face=돋움 size=2></FONT> </DIV> <DIV align=center><FONT face=돋움 size=2>하단에는 <FONT color=#0000ff>쇼핑가이드관련 정보들과 공지사항</FONT> 등이 있습니다.</FONT></DIV> <DIV align=center><FONT face=돋움 size=2>쇼핑가이드는 배너관리에서 치환코드를 사용해도 되지만, </FONT></DIV> <DIV align=center><FONT face=돋움 size=2>배너와는 다르게 왠만하면 안바뀌는 </FONT><FONT face=돋움 size=2>고정이미지들이므로 그냥 하드코딩을 합니다. (날코딩이라고도 하죠)</FONT></DIV> <DIV align=center><FONT face=돋움 size=2></FONT> </DIV> <DIV align=center><FONT face=돋움 size=2>쇼핑가이드를 하드코딩하고 나면 오른쪽에 공지사항이 남습니다.</FONT></DIV> <DIV align=center><FONT face=돋움 size=2></FONT> </DIV> <DIV align=center><FONT face=돋움 size=2>아래가 공지사항 관련 소스입니다.</FONT></DIV> <DIV align=center><FONT face=돋움 size=2></FONT> </DIV> <DIV align=center><FONT face=돋움 size=2></FONT> </DIV> <DIV align=center><FONT face=돋움 size=2></FONT> </DIV> <DIV align=left><!-- 공지사항 리스트 --><BR><!--<BR><table class=float width=201 border=0 cellpadding=0 cellspacing=0><BR><tr><BR> <td style="background:url(../img/main/notice_bg.gif);"><BR> <div class=float><img src="../img/main/notice_bar.gif"></div><BR> <div style="float:right"><FONT color=#d41a01><a href="../board/list.php?id=notice"><img src="../img/main/notice_bu_more.gif"></a></FONT></div><BR> </td><BR></tr><BR><tr><BR> <td style="background:#EEEEED;height:158px;" valign=top><BR> <table style="margin-top:3px;margin-left:5px;"><BR><FONT color=#0000ff> <!--{ @ dataBoardArticle( 'notice', <STRONG><FONT size=2>6</FONT></STRONG> ) }--><BR> <!--<tr><td height=19>- <a href="../board/view.php?id={.id}&no={.no}">{=strcut(.subject,<FONT size=2><STRONG>28</STRONG></FONT>)}</a></td></tr>--><BR> <!--{ / }--></FONT><BR> <!--</table><BR> </td><BR></tr><BR></table><BR>--></DIV> <DIV align=center> </DIV> <DIV align=center><FONT face=돋움 size=2>빨간부분이 공지사항 게시물 더보기 (more) 버튼이고,</FONT></DIV> <DIV align=center><FONT face=돋움 size=2>파란부분이 공지사항 글제목에 해당합니다.</FONT></DIV> <DIV align=center><FONT face=돋움 color=#ff0000 size=2>6 이라는 숫자 보이시죠? 6은 게시글 6개를 출력하게 하는 숫자이고,</FONT></DIV> <DIV align=center><FONT face=돋움 color=#ff0000 size=2>그 아랫줄에 28은 게시글의 텍스트길이를 말합니다.</FONT></DIV> <DIV align=center><FONT face=돋움 size=2>내 쇼핑몰에 맞도록 숫자를 변경하여 적용해보세요.</FONT></DIV> <DIV align=center><FONT face=돋움 size=2></FONT> </DIV> <DIV align=center><FONT face=돋움 size=2></FONT> </DIV> <DIV align=center><FONT face=돋움 size=2></FONT> </DIV> <DIV align=center><FONT face=돋움 size=2></FONT> </DIV> <DIV align=center><FONT face=돋움 size=2></FONT> </DIV> <DIV align=center><FONT face=돋움 size=2>공지사항도 정리됐고, 이제 맨 마지막 하단 풋터부분이 남았습니다.</FONT></DIV> <DIV align=center><FONT face=돋움 size=2></FONT> </DIV> <DIV align=center><FONT face=돋움 size=2>하단풋터파일은 <FONT color=#0000ff>outline/footer/standard.htm</FONT> 입니다.</FONT></DIV> <DIV align=center><FONT face=돋움 size=2></FONT> </DIV> <DIV align=center><img onLoad='miniSelfResize(contents_9,this)' height=475 src="http://guide.godo.co.kr/shop/data/editor/1163380141.jpg" width=724></DIV> <DIV align=center> </DIV> <DIV align=center><FONT face=돋움 size=2></FONT> </DIV> <DIV align=center><FONT face=돋움 size=2>소스를 열어 회사소개, 개인정보보호정책, 이용약관, 고객센터, 제휴문의, </FONT></DIV> <DIV align=center><FONT face=돋움 size=2>이용안내, 아이디/비번찾기, 사이트맵 등 </FONT><FONT face=돋움 size=2>내 쇼핑몰에 맞도록 수정해서 적용합니다.</FONT></DIV> <DIV align=center><FONT face=돋움 size=2></FONT> </DIV> <DIV align=center><FONT face=돋움 size=2>상점주소와 상점명 등 <FONT color=#0000ff>상점정보</FONT>는 관리자모드의 '<FONT color=#0000ff>쇼핑몰기본관리 > 기본정보관리</FONT>' 에서 </FONT></DIV> <DIV align=center><FONT face=돋움 size=2>회사정보에 입력한 내용이 </FONT><FONT face=돋움 size=2>출력됩니다. </FONT></DIV> <DIV align=center><FONT face=돋움 size=2>물론 출력되는 내용을 감추고 고정 이미지로 만들어서 보다 이쁘게 처리할 수 도 있겠습니다.</FONT></DIV> <DIV align=center><FONT face=돋움 size=2></FONT> </DIV> <DIV align=center><FONT face=돋움 size=2></FONT> </DIV></FONT></FONT>
디자인관리
