통합 매뉴얼 2.상단 디자인 코딩하기
2010-10-20 13:34:55

02. 상단 디자인 코딩하기

1 상단 디자인 코딩하기

웹디모 쇼핑몰의 상단 디자인은 홈페이지의 메인페이지와 서브페이지에서 공통으로 사용할 수 있습니다. 아래와 같이 웹디모 샵의“상단 기본 세팅 이미지”를“상단에 사용할 디자인 및 솔루션”으로 변경해 보도록 하겠습니다.

EMB00001490354d srcEMB00001490354e src상단 기본 셋팅 이미지상단에 사용할 디자인 및 솔루션위의“상단에 사용할 디자인 및 솔루션”을 간편 디자인 그룹디자인을 이용하여 코딩해 보겠습니다.

Check point) 웹디모 솔루션은 관리자의[기본정보》기본정보 설정]에서 회사명, 전화번호, 팩스번호, 주소, 로고 등 홈페이지의 기본 정보를 변환코드를 통해 {변환코드명}의 형태로 홈페이지에 삽입할 수 있습니다. 회사 로고도 마찬가지로 변환코드를 이용할 수 있지만, 위의 이미지처럼 배경이미지가 있을 경우에는 변환코드를 사용하기 보다는 간편 디자인을 사용해 삽입하는 것이 유지하고 관리하는데 편리합니다.

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

관리자모드의 [기본정보》기타운영정보설정》기타설정]으로 이동하여“편집기를 사용하지 않습니다.”에 체크합니다. 편집기를 사용할 경우 불필요한 html이 삽입되어 띄어쓰기 및 탭 등이 모두 변경되기 때문에 웹디자이너는 html편집기를 사용하지 않고 작업하는 것이 좋습니다.

[디자인 관리》고급디자인》메인 화면 디자인]에서 상단 디자인이 선택되어 있는지 확인합니다.

EMB00001490354f src

새로운 디자인을 추가하기 위해서 나만의 디자인의 추가 버튼을 클릭합니다. 기본 디자인으로 상단 디자인(빨강) 추가되어 있습니다. 나중에 링크경로를 사용하기 위해 삭제하지 않는 것이 좋습니다.

디자인 제목으로“웹디모 샵 상단”을 입력합니다.

디자인을 드림위버나 EditPlus 등의 편집기에서 코딩한 후, 이미지의 경로를 홈페이지의 상대경로로 변경한 다음, 변경된 소스를 입력 합니다. 소스를 입력할 경우에는 <table>내용</table>의 형식으로 입력해야 합니다. 그 이유는 html파일을 만들 때 생성되는 <!DOCTYPE~><html><head><title><body> 등의 메타 테크, 스타일 시트, <body>속성 등에서 충돌이 생길 수 있기 때문입니다.

tip) 디자인에 사용된 모든 이미지들은 [디자인 관리》고급 디자인 관리》웹디자인FTP]에서 업로드(Upload) 합니다. 필자는 상단 디자인에 들어갈 이미지의 구분이 쉽도록 FTP main폴더를 생성하고, main폴더에 상단 디자인의 이미지를 업로드 하였습니다. main폴더를 생성했을 경우 이미지의 경로는 다음과 같습니다.

/img_up/shop_pds/사이트ID/design/main/이미지 명

html소스입력이 완료된 후 저장 버튼을 클릭합니다. 쇼핑몰 운영 시 자주 변경되는 배너, 로고, 이미지 등은 간편 디자인 코드를 생성하고 html소스에 삽입합니다.

tip)간편디자인 변환코드는 {USER_ 로 시작됩니다. , {USER_내가 지정한 코드명}의 형태로 됩니다.

EMB000014903550 src

나만의 디자인으로 “웹디모 샵 상단”이라는 디자인이 추가되었습니다. 추가된“웹디모 샵 상단”을 선택한 후 적용 버튼을 클릭하여 적용합니다.

웹디모 상단이 적용된 결과는 다음과 같습니다.

EMB000014903551 src