- 통합 매뉴얼 2.상단 디자인 코딩하기
- 2010-10-20 13:34:55
|
02. 상단 디자인 코딩하기 |
1 상단 디자인 코딩하기
웹디모 쇼핑몰의 상단 디자인은 홈페이지의 메인페이지와 서브페이지에서 공통으로 사용할 수 있습니다. 아래와 같이 웹디모 샵의“상단 기본 세팅 이미지”를“상단에 사용할 디자인 및 솔루션”으로 변경해 보도록 하겠습니다.
상단 기본 셋팅 이미지상단에 사용할 디자인 및 솔루션위의“상단에 사용할 디자인 및 솔루션”을 ❶ 간편 디자인 ❷ 그룹디자인을 이용하여 코딩해 보겠습니다.
Check point) 웹디모 솔루션은 관리자의[기본정보》기본정보 설정]에서 회사명, 전화번호, 팩스번호, 주소, 로고 등 홈페이지의 기본 정보를 변환코드를 통해 {변환코드명}의 형태로 홈페이지에 삽입할 수 있습니다. 회사 로고도 마찬가지로 변환코드를 이용할 수 있지만, 위의 이미지처럼 배경이미지가 있을 경우에는 변환코드를 사용하기 보다는 간편 디자인을 사용해 삽입하는 것이 유지하고 관리하는데 편리합니다.
(1) 상단 디자인 코딩하기
관리자모드의 [기본정보》기타운영정보설정》기타설정]으로 이동하여“편집기를 사용하지 않습니다.”에 체크합니다. 편집기를 사용할 경우 불필요한 html이 삽입되어 띄어쓰기 및 탭 등이 모두 변경되기 때문에 웹디자이너는 html편집기를 사용하지 않고 작업하는 것이 좋습니다.
[디자인 관리》고급디자인》메인 화면 디자인]에서 상단 디자인이 선택되어 있는지 확인합니다.
❶ 새로운 디자인을 추가하기 위해서 나만의 디자인의 추가 버튼을 클릭합니다. 기본 디자인으로 상단 디자인(빨강) 추가되어 있습니다. 나중에 링크경로를 사용하기 위해 삭제하지 않는 것이 좋습니다.
❷ 디자인 제목으로“웹디모 샵 상단”을 입력합니다.
❸ 디자인을 드림위버나 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_내가 지정한 코드명}의 형태로 됩니다.
❺ 나만의 디자인으로 “웹디모 샵 상단”이라는 디자인이 추가되었습니다. 추가된“웹디모 샵 상단”을 선택한 후 적용 버튼을 클릭하여 적용합니다.
❻ 웹디모 상단이 적용된 결과는 다음과 같습니다.
3.상단 로고-간편 디자인 만들기
1.메인디자인 하기