통합 매뉴얼 7.왼쪽 디자인 코딩하기
2010-10-20 13:38:12

03. 왼쪽 디자인 코딩하기

1 왼쪽 디자인 코딩하기

웹디모 샵에 기본적으로 세팅된“왼쪽 기본 세팅이미지”를“왼쪽에 사용할 디자인 및 솔루션”으로 변경해 보도록 하겠습니다.

왼쪽 기본 세팅 이미지

EMB000014903544 src(왼쪽 디자인의 일부분만 이미지로 첨부 합니다.)왼쪽에 사용할 디자인 및 솔루션

왼쪽디자인 코딩시에는 왼쪽디자인과 메인 중앙 디자인 사이의 여백까지 왼쪽디자인에 포함시켜 설정해야합니다. 그 이유는 왼쪽 디자인에 여백을 포함하면 여백을 줄이거나 늘릴 때 왼쪽 디자인만 수정하면 되기 때문입니다.

아래의 왼쪽디자인 그림을 간편 디자인 간편 디자인 html을 사용해서 코딩해 보도록 하겠습니다.

EMB000014903563 src

tip) 위에서 살펴본바와 같이 왼쪽 디자인에 여백을 포함하는 이유는 여백을 줄이거나 늘릴 때의 편리함을 위해서입니다. 예를 들어 왼쪽 디자인에 여백을 넣고, 여백을 10px 늘릴 경우 왼쪽 디자인의 여백 부분만 10px 늘리면 됩니다. 그러나 왼쪽 디자인에 여백을 포함하지 않을 경우에는 서브 중앙 디자인, 세부화면 디자인 하위 전 페이지, 게시판 전체, 마이페이지 전체에 여백을 따로 설정해야합니다.

(1) 왼쪽 디자인 코딩하기

[디자인 관리 》고급디자인 》메인 화면 디자인]에서 왼쪽 디자인을 선택합니다.

EMB000014903564 src

새로운 디자인을 추가하기 위해서 나만의 디자인의 추가 버튼을 클릭합니다.

디자인 제목을 입력합니다. 필자는“웹디모 샵 왼쪽”이라고 입력했습니다.

코딩된 html소스를 입력합니다. 드림위버에서 작업한 소스를 솔루션에 삽입할 경우 이미지 경로를 [디자인 관리 》고급디자인 》웹디자인 FTP]에 업로드 한 경로로 수정해야 합니다. 드림위버의 경우 Ctrl+F 단축키 이용하면 동일한 경로를 한꺼번에 변경할 수 있습니다.

html소스 입력이 완료되면 저장 버튼을 클릭합니다. 필자는 간편 디자인 코드를 미리 생성하여 html소스에 삽입하였습니다. 간편 디자인의 생성방법은 [상단디자인 코딩하기 > 상단로고 - 간편 디자인 만들기]를 참고하세요.

tip)간편 디자인 변환코드는 {USER_ 로 시작되며 {USER_내가 지정한 코드명}의 형태로 생성됩니다. 저장 후 나만의 디자인에“웹디모 샵 왼쪽”디자인이 추가되었습니다. “웹디모 샵 왼쪽”을 선택한 후 적용 버튼을 클릭하여 적용합니다.

[디자인 관리》고급디자인》웹디자인 FTP]에 이미지를 업로드하면 아래와 같이 나타납니다.

EMB000014903543 src