<!-- 태그에 닫는 태그가 없습니다. error :289 예스탑 홈페이지제작 8.공지사항과 보도자료 출력하기

CMS매뉴얼 8.공지사항과 보도자료 출력하기
2012-02-25 10:46:48

8. 공지사항과 보도자료 출력하기

메인 화면에 공지사항과 보도자료를 출력하는 방법에 대해서 살펴보도록 하겠습니다. 웹디모 기업 공지사항 디자인은 공지사항 글자에 마우스를 올리면 공지사항 게시물이 출력되고, 보도자료 글자에 마우스를 올리면 보도자료 게시물이 출력되도록 만들기 위해 아래의 스크립트를 사용합니다. 이 스크립트를 [디자인관리 》고급 디자인 관리 》메인 화면 디자인] body디자인에서“메인_바디”의 공지사항 디자인이 출력되는 위치에 삽입합니다. 스크립트에 삽입되어 있는 {GROUP_m_notice} {GROUP_m_news}는 각각 공지사항과 보도자료의 그룹디자인입니다.

<script>

function nb_view_chk(num){

if(num == 1){

nb_view2.style.display='none';

nb_view1.style.display='';

}else{

nb_view1.style.display='none';

nb_view2.style.display='';

}

}

</script>

<!--공지사항 출력 시작-->

<div id='nb_view1'>

<table style='padding:11 0 0 0' width="100%" border="0" cellspacing="0" cellpadding="0">

<tr>

<td align="left" ><img src="/img_up/shop_pds/uhome003/design/main/notice3.gif" width="386" height="39" border="0" usemap="#Map_notice" /></td>

</tr>

<tr>

<td style='padding:10 14 0 14' height=123 valign="top" background="/img_up/shop_pds/uhome003/design/main/notice2_1.gif"">

{GROUP_m_notice}

</td>

</tr>

</table>

</div>

<!--공지사항 출력 종료-->

<!--보도자료 출력 시작-->

<div id='nb_view2' style='display:none'>

<table style='padding:11 0 0 0' width="100%" border="0" cellspacing="0" cellpadding="0">

<tr>

<td align="left" ><img src="/img_up/shop_pds/uhome003/design/main/notice.gif" width="386" height="39" border="0" usemap="#Map_news" /></td>

</tr>

<tr>

<td style='padding:10 14 0 14' height=123 valign="top" background="/img_up/shop_pds/uhome003/design/main/notice2_1.gif"">

{GROUP_m_news}

</td>

</tr>

</table>

</div>

<!--보도자료 출력 종료-->

<map name="Map_notice" id="Map_notice">

<area shape="rect" coords="12,2,86,32" onMouseover="nb_view_chk(1)" >

<area shape="rect" coords="88,4,160,32" onMouseover="nb_view_chk(2)" >

<area shape="rect" coords="326,12,368,26" href="#" />

</map>

<map name="Map_news" id="Map_news">

<area shape="rect" coords="12,2,86,32" onMouseover="nb_view_chk(1)"/>

<area shape="rect" coords="88,4,160,32" onMouseover="nb_view_chk(2)"/>

<area shape="rect" coords="326,12,368,26" href="#" />

</map>

tip) 코딩된 소스를 솔루션에 삽입할 경우에는 이미지경로를 변경하고 변경된 경로에 이미지를 업로드 합니다. 솔루션의 이미지 경로는 [디자인관리 》고급 디자인 관리 》웹디자인 FTP]의 링크정보에서 확인할 수 있습니다.

(1) 공지사항 출력하기

웹디모 기업 공지사항을 아래와 같이 출력되도록 그룹디자인을 이용해 변경해 보도록 하겠습니다.

EMB000005e01abc src

Check point) 그룹디자인이란?

솔루션 사용자가 쉽게 작업할 수 있도록 만들어진 기능으로 아래와 같은 장점이 있습니다.

① 홈페이지 제작 시 각종 배너 및 텍스트 등 동일한 디자인이 반복적으로 사용되는 경우, 한번 제작이 완료된 후 수정요청이 들어오면 동일한 디자인을 모두 수정해야 하는 번거로움이 있습니다. 이렇게 반복적으로 사용되는 디자인소스를 그룹디자인으로 등록하면 그룹디자인의 수정만으로 다른 동일한 디자인들이 자동으로 바뀌게 됩니다.

② 복잡하고 긴 소스를 메인화면이나 세부화면에 바로 삽입하는 것보다 디자인소스를 그룹디자인으로 등록하면 디자인을 더욱 간결하고 수정하기 쉽도록 만들 수 있습니다.

③ 최근게시물 가져오기, 미니 설문조사 폼, 미니 로그인 폼, 추천 상품 등의 복잡한 프로그램소스를 나의 그룹디자인으로 생성할 수 있습니다.

이와 같이 나의 그룹디자인은 활용분야가 많고 어떻게 사용하느냐에 따라 홈페이지의 제작 시간을 크게 단축시킬 수 있으므로 정확하게 사용법을 숙지해야 합니다. 나의 그룹디자인을 생성하는 방법은 일반 디자인그룹 추가와 프로그램그룹 추가로 나눌 수 있습니다.

EMB000005e01abd src

? [디자인관리》고급 디자인 관리》그룹디자인 관리]로 이동한 후 프로그램마법사를 클릭하고 프로그램 종류에서 [게시물 출력]을 선택합니다.

? 특정게시판(목록형)을 선택합니다.

? 나의 그룹코드 설정에 코드명을 지정합니다.

? 그룹디자인 제목을 입력합니다.

? 화면에 표시될 게시물의 출력개수를 설정합니다. 필자는 5개의 게시물이 나오도록 설정하였습니다.

? 출력할 게시판을 공지사항으로 선택합니다.

? 게시물 사이의 행 높이를 설정합니다.

? 제목 글자 수를 입력합니다. 제목이 길어서 두 줄로 표현 될 때는 제목 글자 수를 줄여야 합니다,

? 등록 버튼을 클릭하면 그룹디자인 관리 목차에 {GROUP_m_notice}가 아래와 같이 생성됩니다.

EMB000005e01abe src

코드명을 복사하여 [디자인관리 》고급 디자인관리 》메인 화면 디자인] body디자인에서 공지사항이 출력되는 위치의 <td>~</td>에 복사된 코드를 삽입하면 다음과 같이 공지사항이 출력됩니다.

보도자료도 마찬가지로 동일한 방법으로 그룹디자인 {GROUP_m_news}를 생성합니다.

EMB000005e01abf src

tip) 게시물이 없을 경우에는 공지사항이 출력되지 않습니다. 필자는 게시물을 출력하기 위해 홈페이지의 공지사항에 테스트 글을 출력되는 수만큼 입력하였습니다.