3 일반 디자인 페이지 만들기
세부화면 디자인에서 제공하지 않는 페이지를 만들고자 할 경우에는 추가페이지를 생성합니다. 추가페이지란 세부화면 디자인에서 제공하는 페이지와 달리 단순한 디자인만 삽입할 수 있는 페이지입니다. 앞에서 설명한 회사소개, 회사연혁 등의 페이지에는 프로그램이 포함되어 있지만, 추가페이지에서는 단순히 이미지나 텍스트로 디자인 페이지를 만들 수 있습니다. 기본적으로 제공되는 페이지 외에 추가적인 페이지를 자유롭게 생성할 수 있으며, 페이지마다 접근 권한을 다르게 설정할 수 있습니다. 일반 디자인 페이지 만들기에서는 웹디모 기업의 경영이념과 협력업체를 추가페이지로 만들어 보도록 하겠습니다.
(1) 경영이념 추가페이지 만들기
경영이념 디자인 시안
? 경영이념 본문타이틀은 앞에서 배운“회사연혁 코딩하기”에서“변경 전 본문타이틀 소스”와“변경 후 본문타이틀 소스”를 이용하여 본문타이틀을 수정하고 이미지를 [디자인관리 》웹디자인 FTP ]에서 sub_company에 업로드 합니다.
? 모든 이미지의 경로를 변경하고 수정된 경영이념 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 > 회사소개 > <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> |
? [디자인 관리》고급 디자인 관리》추가 페이지 관리]에서 페이지 추가를 클릭합니다.
? 링크 URL설정에“sub1_3”을 입력합니다.
? 페이지명을“경영이념”으로 입력합니다.
? 경염이념 페이지에 사용할 상단디자인, 왼쪽디자인, 하단디자인을 설정합니다.
? 생성된 HTML소스를 삽입합니다.
? 저장버튼 클릭 후 페이지를 확인하면 아래와 같습니다.
(2) 협력업체 추가페이지 만들기
경영이념 디자인 시안
? 협력업체 본문타이틀은 앞에서 배운“회사연혁 코딩하기”에서“변경 전 본문타이틀 소스”와“변경 후 본문타이틀 소스”를 이용하여 본문타이틀을 수정하고 이미지를 [디자인관리 》웹디자인 FTP ]에서 sub_company에 업로드 합니다.
? 협력업체의 배너 삽입 페이지로서 메인 중앙 디자인 코딩하기-간편디자인에서 설명된 간편디자인을 사용하여 코딩하면 아래와 같습니다.
협력업체 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 > 회사소개 > <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) 경영이념 추가페이지 만들기”와 동일한 방법으로 적용하면 아래와 같이 표시됩니다.
? [디자인 관리》디자인 마법사 설정》간편디자인 환경설정]에서 [banner1]~[banner6]을 생성하고 협력업체 페이지를 확인하면 아래 그림과 같습니다.