디자인관리
디자인 스킨설정
|
로고/배너 관리
|
로고배너편집기
|
WebFTP 이미지 관리
|
알FTP 사용법
|
디자인 에디터
|
메인페이지 디자인
|
서브페이지 디자인
|
새로운 페이지 추가하기
|
스타일시트 관리
|
인트로/공사중 설정
|
메인팝업창 관리
|
움직이는 배너
|
배경음악설정
|
쇼핑카트탭 설정
|
인기상품 노출 설정
|
웹폰트 선택/신청
|
웹폰트 설정
|
웹폰트 신청내역/연장하기
디자인코디 (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"> </font></p><font color="#333333"> <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"> </font></font></p><font size="2"><font face="verdana" size="1"> <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></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="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>
디자인관리
