통합 매뉴얼 7.통합 검색창 달기
2010-10-20 14:38:51

5 통합 검색창 달기

메인화면의 오른쪽 상단에 있는 통합 검색창을 만들어 보도록 하겠습니다. 아래 그림과 같이 이미지가 삽입된 <td>~</td>에 검색창 그룹을 불러와서 검색창을 디자인과 동일한 위치에 삽입해 보겠습니다.

Check point) 그룹디자인이란?

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

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

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

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

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

지금 작업하는 통합검색창 달기에서는 프로그램 그룹 추가 방식의 그룹디자인을 생성해 보도록 하겠습니다.

EMB000011a03c91 src

(1) 그룹디자인 만들기 [디자인 관리》고급 디자인 관리》그룹디자인 관리]

EMB000011a03c7a src

프로그램 마법사 생성을 클릭하면 프로그램 마법사 생성창이 나타납니다.

프로그램 종류 선택에서 통합 검색 폼을 클릭 하면 검색 폼으로 사용할 수 있는 프로그램들이 이미지로 표시됩니다.

웹디모 커뮤니티에서 사용할 이미지를 선택하고, 실행화면을 프로그램 미리보기를 클릭하여 확인합니다.

그룹명을 search라고 입력합니다.

그룹디자인 제목을“통합검색폼“으로 입력합니다.

분류설정은 특성에 맞게 그룹별로 분류하는 기능입니다. 솔루션 구입 시 복사된 그룹과 본인이 만든 그룹으로 구분하여 분류로 설정하면 필요한 그룹디자인을 쉽게 찾아 사용할 수 있습니다.

Check point) 분류설정 방법

EMB000011a03c92 src

[디자인 관리》고급디자인》그룹디자인 관리] 에서 분류 추가/수정 버튼을 클릭하면 나만의 그룹디자인 분류 설정 창이 나타납니다. 분류 명에“메인“을 입력하고 추가 버튼을 클릭하면 메인이라는 분류 명이 생성됩니다.

EMB000011a03c93 src

[디자인 관리》고급디자인》그룹디자인 관리] 에서 일반디자인그룹 생성 또는 프로그램 마법사 생성에서 메인이라는 그룹을 선택하여 등록하면, 아래와 같이 분류된 그룹을 표시됩니다.

EMB000011a03c94 src

통합검색창의 가로길이를 입력합니다.

등록 버튼을 클릭하면 {GROUP_search}이라는 그룹디자인이 생성된 것을 확인할 수 있습니다.

(2) 그룹디자인 적용하기

통합 검색창이 나타나야하는 <td>~</td>에 그룹명 {GROUP_search}을 입력하면 아래 그림과 같이 나타납니다.

<td align=center>{GROUP_search}</td>

EMB000011a03c95 src

(3) 그룹디자인 수정하기

여기서는 아래 그림과 같이 좌측 기본버튼을 웹디모 커뮤니티에 맞게 오른쪽의 버튼과 같이 수정해 보도록 하겠습니다.

EMB000011a03c96 src

EMB000011a03c97 src

{GROUP_search}에서 오른쪽의 소스 수정을 클릭하면 그룹디자인 소스가 아래에 표시됩니다.

소스에서 버튼이미지를 찾아서 해당경로를 변경합니다.

<!--변경 전 통합검색창 소스-->

<form name='t_search_form' method="get" action='/shop_search/search.htm' style='margin:0' >

<input type='hidden' name='detail_keyword'>

<input type='text' name='all_search' style='width:200px;border: 1px solid #cccccc;'>

<input type='image' src='/img_up/tmp_img/service/45/110/btn_search.gif' border='0' width=66 height=20 align=absmiddle>

</form>

<!--변경 전 통합검색창 소스 종료-->

<!--변경 후 통합검색창 소스-->

<form name='t_search_form' method="get" action='/shop_search/search.htm' style='margin:0' >

<input type='hidden' name='detail_keyword'>

<input type='text' name='all_search' style='width:126px;border: 1px solid #cccccc;'>

<input type='image' src='/img_up/shop_pds/ucomm01/design/main/search.gif' width=47 height=19 align=absmiddle>

</form>

<!--변경 전후 통합검색창 소스-->

필자는 위처럼 통합검색창 소스를 변경하고, [디자인 관리》고급디자인》웹디자인 FTP] 에 수정된 버튼이미지를 업로드 하였습니다.

작업이 완료되었으면 수정 버튼을 클릭합니다.

메인 통합검색창 달기를 마지막으로 상단 디자인이 완료된 모습입니다. 상단 디자인 출력결과를 확인해보시기 바랍니다.

EMB000011a03c90 src