통합 매뉴얼 디자인관리 > 고급 디자인 관리 > 전체 화면 구성
2012-03-02 02:42:31
(sinsaemart) 조회수 1071

SINSAEM

 

 

1. 전체화면 구성 [디자인관리》고급 디자인 관리》전체 화면 구성]

홈페이지 전체의 화면 디자인을 구성할 경우에 필요한 인트로설정, 프레임설정, 페이지정렬, 레이아웃설정, 각 구역별 배경설정, 배경색상 및 이미지설정 등에 대해 설정하는 부분입니다. 여기에서 설정하는 부분들은 홈페이지내의 모든 페이지에 영향을 미치는 부분입니다. 

 


(1) 인트로 설정

인트로(Intro)란 메인화면에 들어가기 전에 표시되는 화면입니다. 성인사이트의 경우에는 회원인증이나 성인인증을 위해서 사용하며 일반홈페이지의 경우에는 홈페이지를 소개하기 위한 페이지로 사용할 수 있습니다. 홈페이지를 인트로 화면으로 시작하기 위해서는 [디자인관리》고급 디자인 관리》전체 화면 구성]의 인트로 사용여부를 '인트로 페이지 사용'으로 체크해야 합니다.


인트로페이지의 디자인은 [디자인관리》고급 디자인 관리》세부 화면 디자인]에서 기타의 인트로 페이지에서 설정합니다.

 


(2) 프레임 설정

홈페이지의 틀이 되는 프레임의 설정은 상단과 메인이 같이 움직이는 노프레임과 상단을 고정하고 메인만 움직이는 상단+메인 프레임을 선택할 수 있습니다. 홈페이지에서는 기본적으로 노프레임을 사용하고 있습니다.

 

(3) 페이지 정렬

화면위치를 정렬하는 부분으로 해상도와 상관없이 화면의 위치를 좌측정렬, 가운데정렬, 우측정렬을 선택할 수 있습니다.

 

(4) 메인 레이아웃 설정 및 각 구역별 배경설정

레이아웃 설정은 홈페이지의 구성을 설정하는 부분이며 홈페이지에서 첫 페이지에만 사용할 수 있는 기능입니다. 예를 들어, 현재 레이아웃을 '좌측 디자인 없음'에 체크할 경우에는 홈페이지의 첫 페이지에만 레이아웃이 적용되며, 다른 페이지에는 설정된 레이아웃이 적용되지 않고 기본 레이아웃(상단/왼쪽/메인(body)/하단)이 적용됩니다.

 


왼쪽 디자인이 세부화면의 디자인과 같다면 좌측디자인 있는 레이아웃을 선택하고, 그렇지 않을 경우에는 좌측디자인이 없는 레이아웃을 선택해야 합니다.

 


좌측디자인 없음으로 설정한 홈페이지는 다음과 같습니다.

 


좌측디자인 있음으로 설정한 홈페이지는 다음과 같이 왼쪽메뉴부분이 표시됩니다.


각 구역별 배경설정은 레이아웃 설정이 완료된 후에 다음과 같은 작업에서 필요한 부분입니다.

? 상단/좌측/메인/하단의 각 레이아웃에 서로 다른 배경색상을 지정하고자 할 경우

   (화면전체에서 사용할 배경색상을 설정할 경우에는 배경색상/이미지설정을 참고)

? 상단/좌측/메인/하단의 각 레이아웃에 서로 다른 배경이미지를 삽입하고자 할 경우

? 상단/좌측/메인/하단의 각 레이아웃에 가로크기와 세로크기를 다르게 지정하고자 할 경우


여기서 제공되는 기능은 모든 페이지가 동일하게 적용되므로 홈페이지에서 첫 페이지와 세부화면의 배경이 다른 경우에는 사용하지 않는 것이 좋습니다. 예를 들어, 아래 그림과 같이 메인화면은 가로크기 100% 배경으로 설정되고 세부화면에서는 배경이 나타나지 않습니다. 이런 경우에는 각 구역별 배경 설정에서 메인의 가로 크기를 100%로 설정하고, 메인화면 디자인 작업시 태그에 로 이미지를 불러와서 처리하는 것이 좋습니다.

 


[메인화면]

 


[세부화면]

 

(5) 배경색상/이미지설정

홈페이지 전체에서 표시되는 배경색 또는 배경이미지를 선택하는 부분입니다. 배경 이미지의 크기가 커질 경우에는 전체 홈페이지의 로딩속도가 저하되는 원인이 되기 때문에 배경이미지를 선택할 경우에는 가능한 가로와 세로 비율을 조절하여 크기가 최소가 되도록 조절합니다. 예를 들어, 가로와 세로비율이 5×1000, 1000×5 정도의 반복되는 이미지로 만들어 사용합니다.

 

여기서 등록된 배경색 및 배경이미지는 홈페이지의 모든 페이지에 적용되므로 메인화면과 세부화면 또는 특정 페이지에서 배경색이나 배경이미지가 바뀌는 경우에는 사용하지 않는 것이 좋습니다.