중요) 화면 구성 요소 살펴보기, html, css, js, 이미지원본 위치

홈페이지를 구성하는 각각의 페이지에 대해 알아 보겠습니다.

- 메인페이지 : 1개

- 서브페이지 : 디자인페이지, 게시판등 100여개

- 기타페이지 : 회원관련, 기본정보 페이지 등...

 

 

 

 

화면 위치는 아래 그림을 참고 하시면 됩니다.

- 접속위치

> 디자인관리 > 템플릿 디자인 수정 > 페이지

 

 

 

 

 

 

html 수정을 위한 화면 위치 입니다.

디자인 수정에 필요한 화면 위치이므로 눈에 익혀 두시면 편리합니다.

자주 사용 되는 화면 위치

 

 

 

 

 

 

각 페이지의 화면 구성 레이아웃 입니다.

 

● 공통사용전체모듈(상단) : 로고, 상단메뉴, 회원가입, SNS아이콘, 국가언어변경 등

● 공통사용전체모듈(하단) : 하단로고, 회사정보 등

● 디자인원본모듈 : de01,  de02...~ de30 등... 수십여개 이상의 디자인 모듈 (메인페이지, 서브페이지에서 공통 사용)

● 페이지메뉴모음 : 서브페이지에서 사용되는 각각의 페이지메뉴(2차메뉴) 모듈 입니다.

● 좌측배너모음 : 서브페이지에 넣을 수 있는 배너모듈 입니다.

 

(단, "페이지메뉴모음" 영역의 위치는 템플릿의 종류에 따라서 다른 위치로 변경 되기도 합니다.) 

 

 

 

 

 

 

 

FTP를 이용한 수정에 필요한 각각의 파일 위치

홈페이지를 완성하는 요소로는 html 이외에 추가로 구성되는 파일이 필요합니다.

추가로 구성되는 파일에는 css, js, 이미지파일 등이 있습니다.

아래 화면은 FTP 에 접속 후에 확인 할 수 있습니다.

여러개의 파일이 있지만...

표시된 부분의 파일이 자주 사용됩니다.

 

 

 

 

 

 

 

css 수정 파일 위치

FTP 접속 위치

> www > bizdemoXXX > img > _css

 

 

 

여러개의 css 파일이 있으며, 각각 용도별로 정리 되어 있습니다.

jquery.fancybox.min.css	외부 라이브러리, 플러그인
nStyle_all.css	전체 css 요소를 불러오는 파일 (추가파일 포함)
nStyle_board.css	게시판등에 사용 되는 파일
nStyle_des.css	디자인원본모듈 de01, de02~de30 ~ 의 통합 css 파일
nStyle_layout.css	홈페이지를 구성하는 레이아웃에 관련된 파일
nStyle_ms.css	메인화면만 사용되는 css 파일
nStyle_reset.css	초기 설정을 위한 css 파일
nStyle_user.css	사용자에 의해 새롭게 정의 되는 파일 (수정가능함)

 

다른 파일들은 손대지 않는 것을 추천드리며, 수정이 필요할 시에는...

"nStyle_user.css " 파일에서 내용을 추가 하신 후, 수정/변경을 하시면 됩니다.

 

 

 

 

 

 

 

 

디자인원본모듈(de01~) 이미지 수정 파일 위치

FTP 접속 위치

> www > bizdemoXXX > img > _des

 

홈페이지에서 사용된 이미지들을 각각의 디자인원본모듈 폴더에 넣어 정리 되어 있습니다.

(각각의 파일명만 알아도 어디에 사용된 이미지 파일인지 쉽게 구분할 수 있는 편리함이 있습니다.)

 

 

 

 

 

 

 

 

로고등 기타 이미지 파일 위치

FTP 접속 위치

> www > bizdemoXXX > img > _images

 

홈페이지에서 사용되는 디자인원본모듈 이외의 기타 이미지가 들어 있습니다.

로고 3종, 인트로화면, 배너, sns, 카톡전송 로고 등...

 

 

 

 

 

 

 

js 수정 파일 위치

FTP 접속 위치

> www > bizdemoXXX > img > _js

 

스크립트 파일은...

위 폴더에 포함된 파일 이외에도... cdn으로 외부 사이트에서 불러온 파일이 추가로 있습니다.

확인 위치는...

웹브라우저에서...관리자페이지 접속 후에..

> 디자인관리 > 템플릿 디자인 수정 > 모듈 > *공통사용전체모듈 > *공통하단 레이아웃

에서 확인할 수 있습니다.

( 단, "progressbar" 는 약간 이상하게 동작할 수 있으니, 수정하지 않는것을 추천 드립니다.)