CMS매뉴얼 3.상단 디자인 코딩하기
2012-02-25 10:34:54

03. 상단 디자인 코딩하기

1 상단 디자인 코딩하기

(1) 메인 디자인 나누기

아래와 같은 기업 홍보형 메인페이지를 상단디자인, 메인중앙 디자인, 하단 디자인으로 나누어 코딩해 보도록 하겠습니다.

EMB000005e01a9c src

(2) 상단 디자인 선택하기

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

EMB000005e01a9d srcEMB000005e01a9e src

 

상단 디자인이 없는 템플릿 기본 셋팅 이미지상단에 사용할 디자인 및 솔루션위의“상단에 사용할 디자인 및 솔루션”을 ? 변환코드 ? XML네비게이션을 이용하여 코딩해 보겠습니다.

Check point) 웹디모 솔루션은 관리자의[기본정보》기본정보 설정]에서 회사명, 전화번호, 팩스번호, 주소, 로고 등 홈페이지의 기본 정보를 변환코드를 통해 {변환코드명}의 형태로 홈페이지에 삽입할 수 있습니다.

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

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

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

EMB000005e01a9f 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소스입력이 완료된 후 저장 버튼을 클릭합니다.

EMB000005e01aa0 src

 

? 저장 후 나만의 디자인에“메인_상단(플래시버전)”이라는 새로운 디자인이 추가되었습니다. 추가된 “메인_상단(플래시버전)”을 선택한 후 적용 버튼을 클릭하여 적용하면 다음과 같이 나타납니다.

EMB000005e01aa1 src

필자는“메인_상단(플래시버전)”에서 HOME, 로그인, 회원가입 등의 상단기본메뉴 각각을 이미지로 저장하여 페이지를 연결했습니다. 상단 기본 메뉴에 대해서는 상단 디자인 코딩하기 > 상단 로그인, 로그아웃 코딩하기에서 설명하도록 하겠습니다.

Check point)

웹디모 솔루션의 상단기본메뉴 링크주소는 아래와 같습니다.

-HOME : /shop_main/main_body.htm

-로그인 : /shop_login/login_form.htm

-회원가입 : /shop_login/mem_agree.htm

-고객센터 : /bbs_shop/list.htm?board_code=board

-사이트맵 : /shop_info/sitemap.htm

-로그아웃 : /shop_login/logout.php

-회원정보수정 : /shop_login/mem_form.htm

-마이페이지 : javascript:mypage()