CMS매뉴얼 16.일반 디자인 페이지 만들기
2012-02-25 19:21:46

16. 일반 디자인 페이지 만들기

세부화면 디자인에서 제공하지 않는 페이지를 만들고자 할 경우에는 추가페이지를 생성합니다. 추가페이지란 세부화면 디자인에서 제공하는 페이지와 달리 단순한 디자인만 삽입할 수 있는 페이지입니다. 앞에서 설명한 회사소개, 회사연혁 등의 페이지에는 프로그램이 포함되어 있지만, 추가페이지에서는 단순히 이미지나 텍스트로 디자인 페이지를 만들 수 있습니다. 기본적으로 제공되는 페이지 외에 추가적인 페이지를 자유롭게 생성할 수 있으며, 페이지마다 접근 권한을 다르게 설정할 수 있습니다. 일반 디자인 페이지 만들기에서는 웹디모 기업의 경영이념과 협력업체를 추가페이지로 만들어 보도록 하겠습니다.

(1) 경영이념 추가페이지 만들기

경영이념 디자인 시안

EMB000005e01aee src

? 경영이념 본문타이틀은 앞에서 배운“회사연혁 코딩하기”에서“변경 전 본문타이틀 소스”와“변경 후 본문타이틀 소스”를 이용하여 본문타이틀을 수정하고 이미지를 [디자인관리 》웹디자인 FTP ]에서 sub_company에 업로드 합니다.

EMB000005e01aef src

? 모든 이미지의 경로를 변경하고 수정된 경영이념 html소스는 아래와 같습니다.

경영이념 html소스

<!--본문타이틀 시작-->

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

<tr>

<td><img src="/img_up/shop_pds/uhome003/design/sub_company/sub1-3_tit.gif" width="125" height="52" /></td>

<td align="right" valign="bottom" style='padding:30 8 5 0'><span class="style1">· HOME &gt; 회사소개 &gt; <b>경영이념</b></td>

</tr>

</table>

<img src="/img_up/shop_pds/uhome003/design/sub_company/sub_body01.gif" width="739" height="3" /><br>

<!--본문타이틀 종료-->

<img src="file:///D|/Documents and Settings/바탕 화면/sub1-2_body.gif" width="585" height="346"><br>

? 위의 ?를 이용해 코딩한 HTML소스 중 경영이념 이미지의 경로를 솔루션의 이미지경로를 변경합니다.

<!--경영이념 이미지 경로 변경 전-->

<img src="file:///D|/Documents and Settings/바탕 화면/sub1-2_body.gif" width="585" height="346"><br>

<!--경영이념 이미지 경로 변경 후--->

<img src="/img_up/shop_pds/uhome003/design/sub_company/sub1-2_body.gif" width="585" height="346" /><br>

EMB000005e01af0 src

? [디자인 관리》고급 디자인 관리》추가 페이지 관리]에서 페이지 추가를 클릭합니다.

EMB000005e01af1 src

? 링크 URL설정에“sub1_3”을 입력합니다.

? 페이지명을“경영이념”으로 입력합니다.

? 경염이념 페이지에 사용할 상단디자인, 왼쪽디자인, 하단디자인을 설정합니다.

? 생성된 HTML소스를 삽입합니다.

? 저장버튼 클릭 후 페이지를 확인하면 아래와 같습니다.

EMB000005e01af2 src

(2) 협력업체 추가페이지 만들기

경영이념 디자인 시안

EMB000005e01af3 src

? 협력업체 본문타이틀은 앞에서 배운“회사연혁 코딩하기”에서“변경 전 본문타이틀 소스”와“변경 후 본문타이틀 소스”를 이용하여 본문타이틀을 수정하고 이미지를 [디자인관리 》웹디자인 FTP ]에서 sub_company에 업로드 합니다.

? 협력업체의 배너 삽입 페이지로서 메인 중앙 디자인 코딩하기-간편디자인에서 설명된 간편디자인을 사용하여 코딩하면 아래와 같습니다.

EMB000005e01af4 src

협력업체 html소스

<!--본문타이틀 시작-->

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

<tr>

<td><img src="/img_up/shop_pds/uhome003/design/sub_company/sub1-4_tit.gif" width="125" height="52" /></td>

<td align="right" valign="bottom" style='padding:30 8 5 0'><span class="style1">· HOME &gt; 회사소개 &gt; <b>협력업체</b></td>

</tr>

</table>

<img src="/img_up/shop_pds/uhome003/design/sub_company/sub_body01.gif" width="739" height="3" /><br>

<!--본문타이틀 종료-->

<table style='padding:20 0 0 10' width="739" border="0" cellSpacing="0" cellPadding="0">

<tr>

<td>{USER_banner1}</td>

<td>{USER_banner2}</td>

<td>{USER_banner3}</td><br>

</tr>

<tr>

<td>{USER_banner4}</td>

<td>{USER_banner5}</td>

<td>{USER_banner6}</td>

</tr>

</table>

? 위의 HTML소스를“(1) 경영이념 추가페이지 만들기”와 동일한 방법으로 적용하면 아래와 같이 표시됩니다.

EMB000005e01af5 src

? [디자인 관리》디자인 마법사 설정》간편디자인 환경설정]에서 [banner1]~[banner6]을 생성하고 협력업체 페이지를 확인하면 아래 그림과 같습니다.

EMB000005e01af6 src