통합 매뉴얼 21.서브 상단디자인 코딩하기
2010-10-21 11:36:30

2 서브 상단디자인 코딩하기

서브 상단디자인 중 네비게이션은 메인디자인과 동일하므로 메인 상단 디자인을 복사해서 사용하도록 하겠습니다.

EMB000011a03cec src

(1) 서브 상단디자인 코딩하기

아래의 그림을 메인 상단디자인 메인 왼쪽디자인, 메인 중앙 디자인을 사용해 코딩해 보도록 하겠습니다.

EMB000011a03ced src

메인 상단디자인을 서브 상단디자인에 사용하기 위해서 [고급 디자인 관리 》메인 화면 디자인 》상단 디자인]메인상단 소스를 복사합니다.

복사한 소스를 드림위버에 붙여 넣습니다.

EMB000011a03cee src

드림위버로 삽입된 소스의 하단에 아래와 같은 테이블을 생성하고 메인왼쪽의 소스 중에서 로그인과 클럽소개, 운영진소개, 클럽회칙의 소스를 <td>~</td>에 삽입합니다.

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

<tr>

<td width="213">

{GROUP_login}

<img src="/img/w.gif" height=10><br>

<table width="200" height="107" border="0" cellpadding="0" cellspacing="0">

<tr>

<td width="200">

{USER_club1}</td>

</tr>

<tr>

<td>

{USER_club2}</td>

</tr>

<tr>

<td>

{USER_club3}</td>

</tr>

</table>

</td>

<td width="532"> </td>

</tr>

<table>

EMB000011a03cef src

위 소스의 <td width="532"> </td> 사이에[디자인관리 》고급 디자인 관리 》메인 화면 디자인]에서 메인중앙 디자인의 소스 중 메인 상단 플래시와 공지사항의 소스를 복사해서 붙여 넣습니다.

<td width="532">

<table width="532" border="0" cellspacing="0" cellpadding="0">

<tr>

<td height="237" background="/img_up/shop_pds/ucomm01/design/main/bg.png">

<script>flash("/img_up/shop_pds/ucomm01/design/swf/visual0.swf",517,220,"","","xml_path=/xml_center/my_xml2.php?xml_code=main");</script>

</td>

</tr>

</table>

</td>

<td align="right">

<table width="224" border="0" cellspacing="0" cellpadding="0">

<tr>

<td height="23" align="right" background="/img_up/shop_pds/ucomm01/design/main/mid4.gif"><a href="javascript:content_link_chk('/bbs_shop/list.htm?board_code=notice')"><img src="/img_up/shop_pds/ucomm01/design/main/mid_view.jpg" width="39" height="10" border=0></a></td>

</tr>

<tr>

<td>{USER_notice}</td>

</tr>

<tr>

<td valign=top style="padding:5 0 0 10">{GROUP_notice}<img src="/img/w.gif" height=3><br></td>

</tr>

</table>

</td>

</tr>

<table>

EMB000011a03cf0 src

위의 ~ 를 이용해 만든 소스를 [디자인관리 》고급 디자인 관리 》메인 화면 디자인]의 상단디자인에서 나만의 디자인을 추가하여 아래와 같이“서브 상단”으로 디자인 제목을 입력하고 위에서 수정된 html소스를 삽입합니다.

EMB000011a03cf1 src

저장버튼을 클릭하면 아래와 같이 서브이미지가 적용됩니다.

EMB000011a03cf2 src