본문 바로가기
etc/카페24

5. HTML 쇼핑몰 디자인변경 - TOP 부분변경

beforder 2011. 11. 24. 14:57

본격적인 디자인 변경을 해보겠습니다.




설명에 보이는 것과 같이 자세하게 설명 되어 있습니다.



저희가 예제로 만들어볼 제이드 쇼핑몰 상단 부분입니다.  



우리가 비슷하다 생각했던 무료 디자인 스킨입니다. 약간 조정이 필요할듯 합니다. 

로고를 좌측으로 옮기고 메뉴를 오른쪽으로 이동해 똑같은 모습으로 만들어 보겠습니다.


1-1. HTML 디자인 설정-공동모튤 리스트-TOP-TopLogo {{$a_1}} 모튤편집을 클릭합니다.

(이미지 등록에 로고를 찾아 등록하기 버튼을 클릭합니다.-쇼핑몰 바로가기 버튼을 눌려 보시면 로고가 바뀐것을 알수 있습니다. 하지만 가운데에 등록 되어 있습니다.)


1-2. HTML 편집 클릭 


<table cellpadding="0" cellspacing="0" border="0" width="100%">

  <tr>

    <td align="center">{{$a_1_u1}}</td>

  </tr>

</table>  


위의 소스에서 "center"을 "left" 로 변경. 


<table cellpadding="0" cellspacing="0" border="0" width="100%">

  <tr>

    <td align="left">{{$a_1_u1}}</td>

  </tr>

</table> 


로고가 왼쪽으로 변경되었습니다.


2-1. HTML 디자인 설정-공동모튤 리스트-TOP-상단메뉴 {{$a_6}} 모튤편집을 클릭합니다.


2-2. HTML 편집 클릭


<!-- top_before/after -->

<table cellpadding="0" cellspacing="0" border="0" width="100%">

  <tr>

    <td align="center">{{$a_6_u1}}</td>

  </tr>

</table>

<!-- category -->

<table cellpadding="0" cellspacing="0" border="0" width="100%">

  <tr>

    <td align="center">

    <script>

    setemb = new set_Embed();

    setemb.init('/web/upload/category_top.swf','920','40','flash');

    setemb.parameter('wmode','transparent'); // 별도 wmode 값을 기술할경우만 기재

    setemb.show();

    </script>

    </td>

  </tr>

  <tr><td height="1"></td></tr>

</table>

<!-- 검색 -->

{{*$a_32*}}            


{{$a_6_u1}} : 상단 메뉴의 로그인/회원가입/마이페이지 등 메뉴


<script> </script> 사이의 내용은 상단메뉴바 {{$a_33}} 내용입니다. 


소스를 보니 메뉴가 플레시로 제작되어 있습니다. 난감해 지네요...ㅡㅜ 


일단 메뉴를 초기화 시켜 보겠습니다.


<HTML 디자인 설정-공동모튤 리스트-TOP-상단메뉴바 모튤편집-   아이콘 클릭합니다.>


그 밑으로

로그인 후-텍스트 {u1t} 로그인 후 -텍스트모듈편집    

로그인 전-텍스트 {u1f} 로그인 전-텍스트 모듈편집    

로그인 후-이미지 {u2t} 로그인 후-이미지 모듈편집    

로그인 전-이미지 {u2f} 로그인 전-이미지 모듈편집


이중에서

로그인 후-텍스트 {u1t} 로그인 후 -텍스트모듈편집    

로그인 전-텍스트 {u1f} 로그인 전-텍스트 모듈편집 


편집을 눌리면 새창이 뜨며 소스가 나옵니다. 둘다   클릭!


내상점 보기를 클릭하면 이런 모습이 되었습니다. 텍스트로 변경 되었습니다.





3-1. 이제 상단메뉴를 이미지로 바꾸고 검색창을 넣겠습니다.


3-2. HTML 디자인 설정-공동모튤 리스트-TOP-상단메뉴 {{$a_6}} 모튤편집을 클릭합니다.


상단메뉴바 {{$a_33}}를 사용안하고 간편하게 메뉴를 구성할수 있습니다.


<원소스-초기화했을때 소스입니다.>


          {{* a_6 : 상단메뉴 *}}

          <td  align="right" valign="middle" bgcolor="{{$tab_array.a_6.bgcolor}}"  STYLE="color:{{$font_array.a_6.font_color}};font-size:{{$font_array.a_6.font_size}};font-family:{{$font_array.a_6.font_type}};">

          {{$a_6_u1}}</td>

            

<바뀐소스-검색창을 넣기 위해 테이블을 나누었습니다.>


           {{* a_6 : 상단메뉴 *}}

          <td  align="right" valign="bottom" bgcolor="{{$tab_array.a_6.bgcolor}}"  STYLE="color:{{$font_array.a_6.font_color}};font-size:{{$font_array.a_6.font_size}};font-family:{{$font_array.a_6.font_type}};" height="173">

          {{$a_6_u1}}</td>

          <td  align="right" valign="bottom" bgcolor="{{$tab_array.a_6.bgcolor}}"  STYLE="color:{{$font_array.a_6.font_color}};font-size:{{$font_array.a_6.font_size}};font-family:{{$font_array.a_6.font_type}};">

{{$a_32}}</td>

</tr>


<검색창을 추가하였습니다.>


3-3. 이제 상단메뉴를 이미지로 바꾸고 링크를 이미지 맵으로 적용합니다.


로그인 전-텍스트 {u1f} 로그인 전-텍스트의  모듈편집  클릭


{{* 파일 내용 : 상단메뉴 (비 회원의 경우) *}}

<!-- UNIT u1f 시작 --> 

      

   <img src="{{$img_array.a_6.1.url}}" border="0"> 

   <a href="/front/php/login/login_f.php"><font STYLE="color:{{$font_array.a_6.font_color}};font-size:{{$font_array.a_6.font_size}};font-family:{{$font_array.a_6.font_type}};">로그인</font></a> | <a href="/front/php/c/member_regist_f.php"><font STYLE="color:{{$font_array.a_6.font_color}};font-size:{{$font_array.a_6.font_size}};font-family:{{$font_array.a_6.font_type}};">회원가입</font></a>

   

<!-- UNIT u1f 끝 -->

            

<원소스-로그인과 회원가입만 있습니다.>


<IMG height=44 

src="/web/upload/new_top_cate_03.gif" 

width=391 useMap=#login border=0><MAP name=login><AREA onfocus=blur() 

shape=RECT coords=299,23,380,42 

href="/"><AREA 

onfocus=blur() shape=RECT coords=331,4,381,21 

href="/"><AREA onfocus=blur() 

shape=RECT coords=241,23,295,41 

href="/front/php/myshop/myshop_orders.php"><AREA 

onfocus=blur() shape=RECT coords=170,23,238,41 

href="/"><AREA 

onfocus=blur() shape=RECT coords=118,24,164,40 

href="/"><AREA 

onfocus=blur() shape=RECT coords=63,23,116,41 

href="/"><AREA 

onfocus=blur() shape=RECT coords=267,2,330,21 

href="/front/php/myshop/myshop.php"><AREA onfocus=blur() shape=RECT 

coords=215,2,264,22 href="/front/php/basket.php"><AREA 

onfocus=blur() shape=RECT coords=162,2,212,21 

href="/front/php/c/member_regist_f.php"><AREA onfocus=blur() shape=RECT 

coords=119,2,159,21 

href="/front/php/login/login_f.php"></MAP>    


<바뀐소스-메뉴를 전부 로그인 전-텍스트 {u1f} 로그인 전-텍스트에 이미지 맵으로 적용 시켰습니다.>       


로그인 후-텍스트 {u1t} 로그인 후 -텍스트의 모듈편집 클릭


{{* 파일 내용 : 상단메뉴 (회원의 경우) *}}


<!-- UNIT u1t 시작 -->


      

   {{$mall_welcome}}

   <img src="{{$img_array.a_6.1.url}}" border="0"> 

   <a href="/front/php/login/login_a.php?mode=logout"><font STYLE="color:{{$font_array.a_6.font_color}};font-size:{{$font_array.a_6.font_size}};font-family:{{$font_array.a_6.font_type}};">로그아웃</font></a></span> | <a href="/front/php/c/member_regist_f.php"><font STYLE="color:{{$font_array.a_6.font_color}};font-size:{{$font_array.a_6.font_size}};font-family:{{$font_array.a_6.font_type}};">회원정보수정</font></a>

<!-- UNIT u1t 끝 -->

              

<원소스-로그아웃과 회원정보수정만 있습니다.>


<IMG height=44 

src="/web/upload/new_top_cate_04.gif" 

width=391 useMap=#login border=0><MAP name=login><AREA onfocus=blur() 

shape=RECT coords=299,23,380,42 

href="/"><AREA 

onfocus=blur() shape=RECT coords=331,4,381,21 

href="/"><AREA onfocus=blur() 

shape=RECT coords=241,23,295,41 

href="/front/php/myshop/myshop_orders.php"><AREA 

onfocus=blur() shape=RECT coords=170,23,238,41 

href="/"><AREA 

onfocus=blur() shape=RECT coords=118,24,164,40 

href="/"><AREA 

onfocus=blur() shape=RECT coords=63,23,116,41 

href="/"><AREA 

onfocus=blur() shape=RECT coords=267,2,330,21 

href="/front/php/myshop/myshop.php"><AREA onfocus=blur() shape=RECT 

coords=215,2,264,22 href="/front/php/basket.php"><AREA 

onfocus=blur() shape=RECT coords=162,2,212,21 

href="/front/php/c/member_regist_f.php"><AREA onfocus=blur() shape=RECT 

coords=119,2,159,21 

href="/front/php/login/login_f.php"></MAP>    


<바뀐소스-메뉴를 전부 로그인 후-텍스트 {u1t} 로그인 후-텍스트에 이미지 맵으로 적용 시켰습니다.>  


# 로그인전 이미지와 로그인후 이미지 2개를 만들어 주시고 링크를 바꾸어 주셔야 합니다.


4-1. 검색창을 보기좋게 수정하겠습니다.


4_2. HTML 디자인 설정-공동모튤 리스트-TOP-검색창_B형 {{$a_32}} 모튤편집을 클릭합니다.


<table>

    <tr>

        <td>

            <form name='search_form_b' action='{{$search_action}}' method='post'>

            </td>

                    <td align="right" valign="middle" ><input type="text" name="keyword" size="15" class="input01" {{$a_32_text_banner1}}>

        </td>

        <td>

           <a href="javascript<x>:document.search_form_b.submit()"><img src="{{$img_array.a_32.2.url}}" align="absmiddle" border="0"></a></x>

        </td>

    </tr>

</table>  


<소스를 변경해 줍니다.>


너무 힘드네요....^^ㅋ 쇼핑몰 하나를 만들면서 설명하려니... 다들 이쁜 쇼핑몰 만들었으면 하는 바램입니다.


완료된 모습입니다.


http://www.l300n.cafe24.com/


이번엔 요기까지... 

저작자표시 (새창열림)

'etc > 카페24' 카테고리의 다른 글

6. 쇼핑몰 메인 이미지 키우기  (0) 2011.11.24
4. 상품 올리기전 최소이미지 변경  (0) 2011.11.24
3. 디자인 관리 기본 설명  (0) 2011.11.24
2. 관리자 페이지 기본 설명  (0) 2011.11.24
1. 카페24 가입하기 및 쇼핑몰 만들기  (0) 2011.11.24

'etc/카페24' Related Articles

티스토리툴바