menul - web.kui.co.krweb.kui.co.kr/menual.pdf · .제1단계홈페이지구성및구조설계....

목 차< >

홈페이지 시작하기▣

단계 홈페이지 구성 및 구조 설계[1 : ]▣

홈페이지 기본설정하기1-01.

홈페이지 제목1.

이메일 주소2.

인트로 사용여부3.

화면상 위치4.

사용할 언어선택5.

기본언어선택6.

메인페이지 구조 설계하기1-02.

첫 화면 구성 타입 선택하기1.

첫화면 내용부분 나누기2.

메뉴 구성방법 선택하기1-03.

메뉴구성 방법1.

서브레이어 사용2.

상단메뉴 구성하기1-04.

메뉴 추가 하기1.

메뉴 이름 삽입-

메뉴 아이콘 선택-

메뉴 클릭시 엑션-

메뉴내용 사용용도 선택- ( )

타이틀 이미지 선택-

바탕 그림 설정2.

- 메뉴배경이미지

메뉴구분 아이콘-

하위 좌측메뉴 구성하기1-05.

하위 메뉴 추가하기1.

메뉴 이름-

메뉴배경이미지-

메뉴 클릭시 액션 취할 동작- ( )

메뉴내용 사용용도 선택- ( )

타이틀 이미지 선택-

PDF created with FinePrint pdfFactory Pro trial version www.pdffactory.com

http://www.pdffactory.com

메인화면 프로그램 구성하기1-06.

회원관리 프로그램 로그인 회원가입등1. ( , )

회원가입항목 설정-

설문조사 프로그램2.

플라이 베너 떠있는 베너창3. ( )

첫화면 좌측메뉴에 주요제품을 표시하기4.

모든하위 화면 좌측메뉴에 주요제품을 표시하기5.

첫 화면에 넣을 컨텐츠 구성하기1-07.

첫 화면에 삽입할 컨텐츠 뉴스 게시판 공지사항등 구성 타입 선택1. ( , , )

첫 화면 컨텐츠 뉴스 게시판 공지사항등 구성 타입 선택2. ( , , )


홈페이지의 로고 입력2- 01.

현재로고1.

로고이미지가 있을 경우2.

로고이미지가 없을 경우3.

로고배경 관리2- 02.

미리보기1.

로고 배경이미지 선택2.

각 하위화면 서브페이지 의 외곽배경 이미지 입력2- 03. ( )

첫화면 메인그림 이미지를 입력2- 04.

첫화면 내용 디자인2- 05.

하단문구 주소등 디자인2- 06. ( )

첫 화면 컨텐츠 빈 영역2- 07.

첫화면 컨텐츠 빈영역 디자인0a.

첫 화면 좌측 베너 이미지를 입력0b.

첫 화면 우측 베너 이미지를 입력0c.

첫 화면에 들어갈 플라이 베너 이미지를 입력0d.



단계 홈페이지 컨텐츠 및 상품 관리[3 ]▣

일반화면 내용 입력하기3- 01.

게시판형 화면설정하기3- 02.

컨텐츠 화면 환경 설정1.

컨텐츠 색상 설정2.

컨텐츠 권한 설정3.

제품 아이템 내용 입력하기3- 03. ( )

중분류 관리1.

기본 환경 설정2.

제품 추가 하기3.

회원가입약관3- 04.

채팅설정3- 05.

수시 관리[ ]▣

메인화면 움직이는 텍스트01.

설문조사 관리02.

이벤트 팝업 창 관리03. ( )

접속통계보기04.

사용자정보관리05.

회원관리06.



▣ 셀프홈 홈페이지 시작하기

아이디와 패스워드를 치고 의 관리자 모드로 들어가십시오SELFHOME .▲

보기와 같은 화면이 보여집니다 이제 홈페이지 제작을 시작해 볼까요. ?▲

홈페이지제작 과정은 총 단계로 이루어집니다3 .

. 제 단계1 홈페이지 구성 및 구조설계

. 제 단계2 홈페이지 디자인 및 템플릿 이용

. 제 단계3 홈페이지 컨텐츠 및 상품관리 이렇게 단계로 구성되며3 ,

. 제 단계4 에서는 홈페이지 관리를 하게 됩니다.

보이시는 단계 첫화면에서1 홈페이지 제작 마법사 시작하기 버튼을 클릭합니다.




홈페이지 기본설정하기1-1.▲ 에서는 홈페이지의 기본적인환경을 설정 합니다( )

홈페이지 제목1.

: 홈페이지 제목부분에 작성된 제목은 홈페이지의 타이틀바에 나타나게 됩니다.

보기와 같이 작성하신 제목이 타이틀바에 나타납니다.

이메일 주소2.

이메일 주소부분에는 온라인 신청서 또는 주문서 사용시에 작성된 내용을 수: [ ]

신할 이메일주소를 적어 넣으면 됩니다. 보기와 같은 주문서 양식을 작성한후 신청

하기 버튼을 클릭하면 작성된 내용이 메일로 전송됩니다.



인트로 사용여부3.

인트로는 첫페이지 곧 메인페이지가 나오기전에 보여지는 짧은 사이트 소개페이지:

이며 메인페이지가 바로 보여지지 않는 번거로움으로 권장하지 않지만 사용을,

원하시면 예를 선택 하십시오.

화면상 위치4.

전체 모니터상에서 홈페이지의 위치를 설정합니다 원하시는 위치를 선택하십시오. .

왼쪽을 선택하시면 아래와 같이 사이트가 왼쪽 정렬됩니다.▼

가운데를 선택하시면 아래와 같이 사이트가 가운데 정렬됩니다.▼

사용할 언어선택5.

기본은 한글페이지로 셋팅되며 다른 언어사용시에는 외국어팩을 별도로 구입하,

여 사용하시면 중복선택이 가능합니다 사이트에서 오른쪽 상단에 보여지는 국기.

들은 사용언어를 표시합니다.

기본언어선택6.

홈페이지 방문시 처음으로 보여질 기본 언어를 말합니다.

적용하기버튼★ 을 클릭한후 내홈페이지 미리보기 버튼을 클릭하여 작업 내용을 확인합니다.



메인페이지 구조 설계하기1-2.▼ 에서는 첫화면의 구성을 설계합니다( )

첫 화면 구성 타입을 선택하세요1. .

타입A▼ 상단메뉴가 타이틀 이미지 바로위에 위치하게 됩니다: .

타입B▼ 상단메뉴가 로고옆에 위치하게 됩니다: .

타입C▼ 상단메뉴가 타이틀 이미지 밑으로 위치하게 됩니다: .



첫화면 내용부분을 좌 또는 우로 나눌수가 있습니다2. .

보기와 같이 분홍색으로 표시된 내용부분이 좌또는 우로 나누어지게 됩니다.

넓이 픽셀 부분의 수치는 그림에 푸른색으로 표시된 부분의 넓이를 나타냅니다( ) .▲

또한 좌우 모두 선택하게되면 내용부분이 보기와 같이 세부분으로 나누어지게 됩니다.

★적용하기버튼을 클릭한후 내홈페이지 미리보기 버튼을 클릭하여 작업 내용을 확인합니다.



메뉴 구성방법 선택하기에서1-03. 는 용도에 따라 이미지메뉴 또는 텍스트메뉴로 선택이

가능 합니다.

메뉴구성 방법1. :

텍스트 글자 로 메뉴구성을 할지 이미지로 메뉴구성을 할지 선택해야 합니다- ( ) , .

텍스트 메뉴구성 선택시 상위메뉴와 하위메뉴에서 보여지는 글자색과 마우스가 닿았

을때 보여지는 글자색을 별도로 지정합니다.

만들어놓은 메뉴바가 있을 경우에는- 이미지로 메뉴구성을 선택하십시오.

서브레이어의 선택여부를 결정하십시오.

서브레이어 사용2. :

서브레이어의 선택여부를 결정하십시오 샘플보기에서 보여지는 아래와같은 부분을.

서브레이어라고 합니다.




상단메뉴 구성하기1-04. 상단메뉴를 용도에 맞춰 구성하세요( )

보이시는▲ 메뉴 추가하기 버튼을 클릭 합니다.

메뉴이름 삽입부분1. 에 사용할 메뉴 이름을 삽입합니다.

예를 들어 회사홈페이지의 경우 기본적인 메뉴에 회사소개 제품소개 온라인상/ /

담 고객지원 기술 현황 등의 메뉴가 있어야 할 것입니다/ / / .

2.메뉴앞에 아이콘을 삽입할지의 여부를 결정하여 선택합니다.

아이콘 삽입시 아래에 보여지는 아이콘을 선택하여 사용하거나 또는 별도로 만들▲

어서 저장되어있는 아이콘이 있다면 사용자 제작 메뉴 아이콘을 클릭 하여 불러와

사용합니다 아이콘 사이즈는 너무 크지 않도록 높이 픽셀정도를 권장 합니다. 30 .



메뉴 클릭시 엑션3. 에서 메뉴의 내용을 그냥 보여주기 할 경우 메뉴 내용 보여줌을

선택합니다.

첫 번째 하위 메뉴의 내용 보여줌- 을 선택하면 상단메뉴클릭시 바로 첫번째 하위 메

뉴의 내용을 표시합니다.

아무런 동작 없음은 메뉴클릭시에 보여줄 내용이 준비되지 않았을 경우 체크합니다- .

아래 그림은 메뉴의 내용보여줌을 선택했을 경우입니다.▼

4.메뉴내용 사용용도 에서 들어갈 내용을 선택해줍니다 메뉴내용이 글 그림 동영상등( ) .

일반적인 내용일 경우 게시판 자료실 정보제공형 의 형식일 경우 온라인신청서일/ ( ) /

경우 제품페이지 일경우 수직수평의 갤러리 앨범일 경우 채팅 이메일등의 각각/ / / /

의 내용에 맞게 선택합니다.

5 타이틀 이미지 선택에서는 그림에 보이는. 분홍색부분에 들어갈 이미지를 선택합니다.

각각 메뉴바에 들어갈 메뉴의 내용에 맞게 설정합니다.

이미만든 메뉴를 수정하실 경우에는 수정할 메뉴이름 위에서 마우스를 더블클릭-

하시면 수정창이 뜨게 됩니다.



만들어진 메뉴를 삭제하실 경우에는 전체선택버튼과 선택해제 버튼을 사용하여 삭▲

제 가능하며 개별삭제는 삭제할메뉴를 선택후 삭제 버튼을 클릭합니다, .

그림과 같이 좌측부분에 보여지는 붉은색 세모표시는 클릭하여 메뉴의 순서를 변경

할 수 있도록 해줍니다.

- 바탕그림설정 버튼을 클릭하면 메뉴바의 바탕이미지를 선택할 수 있습니다.

메뉴배경이미지1. 에서 이미지를 선택합니다.

별도로 제작해놓은 메뉴배경이 있을경우에는 사용자 제작 메뉴배경 이미지를 체크하

여 이미지를 불러옵니다 메뉴의 총 길이는 픽셀 이내로 권장합니다. 770 .

메뉴구분 아이콘2. 을 선택하여 클릭합니다.

별도로 제작해놓은 메뉴구분 아이콘이 있을경우에는 사용자 제작 메뉴구분 아이콘을

체크하여 이미지를 불러옵니다.




하위 좌측메뉴 구성하기1-05. 하위메뉴를 용도에 맞춰 구성하세요( )

회사소개메뉴의 경우 하위메뉴에 인사말 오시는 길의 두 가지 메뉴를 삽입해 보겠습

니다 하위메뉴추가하기 버튼을 클릭 하여. ,

1. 메뉴 이름란에 보기와 같이 인사말을 삽입합니다.

2. 메뉴배경이미지를 선택합니다 사용자 제작 배경이미지가 있을 경우 사용자 제작.

배경이미지 체크박스에 체크표시를 한 후 이미지를 불러들입니다 이미지의 최적.

사이즈는 픽셀 입니다168 X 21( ) .

3. 메뉴 클릭시 액션 취할 동작 에서 메뉴의 내용 보여줌을 선택하면 상단메뉴클릭( )

시 원하는 페이지를 표시하게 됩니다 아무런 동작 없음은 메뉴클릭시의 보여줄.

내용이 준비되지 않았을 경우 체크 합니다

4. 메뉴내용 사용용도 선택에서 내용의 용도를 선택합니다( ) .

5. 타이틀 이미지 선택에서 홈페이지 상단에 보여질 이미지를 선택 합니다. 사용자 제

작 배경 이미지가 있을 경우 사용자 제작 배경이미지 체크박스에 체크표시를 한

후 이미지를 불러들입니다 플래쉬 파일 또는 일반그림 파일을 선택하여 삽입할.

수 있습니다 적용하기 버튼을 눌러 추가된 하위메뉴를 확인 할 수 있습니다. .

하위메뉴의 구성이 끝나셨으면 적용하기버튼을 클릭한후 내홈페이지 미리보기 버

튼을 클릭하여 작업 내용을 확인합니다 다음 단계로 넘어갑니다.



메인화면 프로그램 구성하기1-06. 첫화면에서 사용할 프로그램을 선택 하세요( .)

첫 화면에서 사용할 프로그램을 선택 합니다.

회원관리 프로그램 로그인 회원가입 등 의 회원관리 프로그램을 삽입할 경우 좌측에( , )

삽입할지 우측에 삽입할지를 선택합니다.

앞단계의 02.메인페이지 구조 설계하기에서 내용부분을 좌측나누기 또는 우측나누기

로 선택했는지 확인 후 선택에따라 적용해야 합니다 그다음 우측의 제목디자인 그. (

림 을 선택 합니다) .

회원가입 항목 설정a. 에서 보여질 항목을 선택합니다 반드시 작성해야 할 항목은.

필수로 체크 표시합니다.

설문조사 프로그램역시 사용여부와 위치를 체크합니다 제목 디자인을 선택합니다. .

플라이 베너 떠있는 베너창 의 사용여부를 선택한후 떠있을 위치의 가로 세로 수치( ) ,

를 삽입합니다 미리보기를 하면서 원하시는 위치를 맞추십시오 플라이배너의 그림. .

선택은 단계에서 하게됩니다2 .

첫화면 좌측메뉴에 주요제품을 표시할지의 여부를 선택합니다

모든하위화면 좌측메뉴에 주요제품을 표시할지의 여부를 선택합니다



위의 그림에서 표시된 부분이▲ 플라이베너입니다.


다음 단계로 넘어갑니다.

첫 화면에 넣을 컨텐츠 구성하기1-07. 에서는 첫화면에 뉴스 게시판 공지등을 삽입할 수, ,

있습니다.

첫화면에 보여지게 할 내용을 체크박스에 체크표시합니다.

뉴스 또는 게시판 공지사항등 보여질내용의 줄수를 정해줍니다, .



우측에 제목 디자인하기 버튼을 클릭합니다.

컨텐츠 제목디자인을 선택 합니다 메뉴 제목을 직접 텍스트로 적으실경우에는- .

제목이 없는 디자인을 선택하십시오.

제목이 있는 디자인을 선택할경우에는 아래의 메뉴제목을 텍스트로 표시 라고[ ]

한곳의 체크박스에 체크 표시를 하지 않습니다.

별도 제작한 디자인을 삽입할 경우에는 사용자 제작 컨텐츠 제목 이미지[ ]에 체크

표시하고 사용자가 만들어놓은 그림경로를 선택하여 삽입합니다.

적용하기버튼을 클릭한후 내홈페이지 미리보기 버튼을 클릭하여 작업 내용을 확인합니다.

단계의 홈페이지 구성 및 구조설계가 모두 끝났습니다1 .

단계 홈페이지 디자인 및 템플릿 이용으로 넘어갑니다2 .


2- 1▲ 홈페이지의 로고를 입력합니다.

별도로 저장해놓은 로고그림파일이 있는경우에는 로고 이미지 사이즈는 가로*

픽셀 을 넘지 않도록 해야합니다 최적 사이즈는 가로 세로 픽셀 입300px( ) . 148 X 43 ( )

니다.

로고이미지가 없을경우에는 회사상호나 사이트 이름을 텍스트로 삽입할 수 있습니다.



2- 02▲ 로고배경을 입력합니다. 로고배경그림을 변경할 수 있습니다( ..)

현재 로고의 배경이미지를 보여줍니다.

배경이미지로 놓고자 하는 이미지를 선택합니다.

이미지가 변경되지 않은 경우에는 오른쪽 마우스를 클릭하여 새로고침을 합니다( )

사용자가 별도 제작해놓은 배경이미지가 있을 경우 사용자 제작 로고 배경이미지

박스를 체크하시고, 찾아보기 버튼을 눌러 이미지파일을 지정하시면 됩니다([ ] .)

이미지 최적 사이즈는 가로 세로 픽셀 입니다* 770, 77 ( ) .

2- 03▼ 첫화면 외곽배경 이미지를 입력합니다 이곳에서는. 외곽배경그림을 변경할(

수 있습니다.) 배경이미지로 놓고자 하는 이미지를 선택합니다.

이미지가 변경되지 않은 경우에는 새로고침을 클릭하세요( )

사용자가 별도 제작해놓은 배경이미지가 있을 경우 사용자 제작 로고 배경 이미지 박

스를 체크하시고, 찾아보기 버튼을 눌러 이미지파일을 지정하시면 됩니다([ ] .)

2 - 03-1 각 하위화면 서브페이지 의 외곽배경 이미지를 입력합니다( ) .

배경이미지로 놓고자 하는 이미지를 선택합니다.


사용자가 별도 제작해놓은 배경이미지가 있을 경우 사용자 제작 로고 배경 이미지



박스를 체크하시고, 찾아보기 버튼을 눌러 이미지파일을 지정하시면 됩니다([ ] .)

2 - 04▼ 첫화면 메인그림 이미지를 입력합니다. 메인 그림을 변경할 수 있습니다( .)

첫화면 메인그림으로 놓고자 하는 이미지를 선택합니다 사이트를 좌측으로 붙일경우와.

중앙으로 위치할 경우를 판단하여 메인 이미지를 선택합니다.


사용자가 별도 제작해놓은 메인그림파일이 있을 경우 사용자 제작 메인 이미지 박스를

체크하시고, 이미지 종류가 플래쉬파일인지 그림파일인지 선택합니다 사용자 이미지.

크기를 삽입합니다. 찾아보기 버튼을 눌러 그림파일을 지정하시면 됩니다([ ] .)

2 - 05▼ 첫화면 내용 디자인 첫화면 내용영역을 디자인 합니다( .)

첫화면에서 컨텐츠 영역 상단에 내용을 삽입할지 컨텐츠영역하단에 삽입할지를 선택

합니다 여기서 첫화면의 컨텐츠 영역이란 메인에 보여지는 뉴스나 공지등의 내용을.

말합니다.

에디터 사용방법은* 를 클릭하시면 자세하게 설명되어 있습니다.

홈페이지 미리보기를 보면서 알맞은 사이즈로 작업을 하시면 됩니다.

자는 픽셀 단위입니다[ ] .



2 - 06▼ 하단문구 주소등 디자인( ) 하단 주소영역을 디자인 합니다 에디터를 사용( .)

하여 예쁘게 만들어 봅니다.

0a. 첫 화면 컨텐츠 빈 영역 컨텐츠 옆의 빈 영역을 디자인 합니다( .)

의 단계에서1-7 컨텐츠 내용을 좌측으로 설정했을경우에는 우측의 빈영역을 디자

인 하게되며 컨텐츠 내용을 우측으로 설정했을경우에는 좌측이 빈영역을 디자인,

하게 됩니다.

0b. 첫 화면 좌측 베너 이미지를 입력합니다. 메인 베너를 입력할 수 있습니다( .)

단계[1 - 02]메인페이지 구조 설계하기에서 좌측나누기를 사용할 경우 베너는 좌

측으로 삽입되며 우측나누기를 선택했을 경우에는 우측으로 베너가 삽입됩니다, .

0c. 첫 화면 우측 베너 이미지를 입력합니다.

0c. 첫 화면에 들어갈 플라이 베너 이미지를 입력합니다.

회사로고라든지 상호 기타 내용을 삽입하여 만들어 항상 떠있도록 할 수 있습니(

다.)

부분에 샘플 그림을 참고 하세요1-06-a .


단계 홈페이지 디자인 및 템플릿 이용이 모두 끝났습니다2 .

제 단계3 홈페이지 컨텐츠 및 상품관리로 넘어갑니다.



단계 홈페이지 컨텐츠 및 상품 관리[3 ]▣

3- 01 일반 글 그림 화면 내용입력 수정 하기( + ) ( ) 메뉴에 맞는 내용을 입력하세요( )

3- 02 컨텐츠 화면을 설정합니다. 게시판 자료실 앨범 등의 컨텐츠 화면 설정( , , ,QA .)

게시판의 성격에 맞게 환경 설정을 합니다.▲

게시판의 기본 글자 색상 열었던 글자 색상 마우스가 닿았을때 색상 목록/ / /▲

의 배경 색상을 설정해 줍니다 오른쪽의 테이블 디자인 선택에서 원하시는 색상을.

선택가능 합니다.



컨텐츠 권한 설정을 해줍니다 사용불가단어는 게시판에 욕설이나 성인광고등을.▲

막기위해 금지단어를 입력해놓으면 해당 단어가 들어갈 경우 글이 올라가지 않습니다.

3 - 03 제품 취급아이템 내용입력 설정 하기( ) ( ) 메뉴에 맞춰 제품을 추가하세요( )

중분류 관리▼

새 분류코드 추가에서 분류명을 입력합니다 상단의 중분류 목록에 삽입이 됩니다. .

분류명 수정시에는 분류코드수정에서 선택후 새분류명을 입력합니다.

기본환경설정▼

제품에 대한 환경설정을 할 수 있습니다 각 제품마다 가격표시를 할 수 있으며. ,▲

회원 비회원에 따른 사용권한 설정 주문서 사용여부 상위메뉴 클릭시 전체 제품 목/ , ,



록을 보이게 할지 클릭시 첫 번째 제품으로 자동이동 하게 할것인지를 결정합니다/ .

또한 제품을 클릭했을 경우 제품이 팝업 방식으로 열릴지 화면이 바뀌면서 보여지게

할지를결정합니다.

제품추가하기 버튼을 클릭하여 중분류 밑으로 나열될 해당 제품명과 제품그림등▲

내용을 삽입합니다 중분류 없는 제품 아이템 은 별도로 입력합니다. ( ) .

3- 04 회원가입약관을 입력합니다. 게시판 자료실 앨범 등의 컨텐츠 화면 설정( , , ,QA .)

3- 05 채팅설정 홈페이지의 기본적인환경을 설정 합니다( )


단계 홈페이지 컨텐츠 및 상품관리가 모두 끝났습니다3 .

제 단계 수시관리4

홈페이지 관리로 넘어갑니다.



수시 관리[ ]▣

메인화면 움직이는 텍스트 관리01 첫화면 이미지 위에 떠있는 글자를 입력합니다.

삽입하고자 하는 내용의 텍스트를 삽입후 각각의 효과를 선택합니다.

미리보기를 하여 효과를 확인합니다.

위와 같이 작성후 미리보기를 클릭하면 아래와 같이 텍스트가 삽입 됩니다.

설문조사 관리02 첫화면에 설문조사를 표시합니다.



위와 같이 설문내용을 입력하면 메인화면에 아래와 같이 설문내용이 나타납니다.

이벤트 팝업 창 관리03 ( ) 첫화면의 이벤트창 내용을 입력합니다.

제목 부분에 내용에대한 제목을 삽입한후 사용여부에 체크 표시 합니다.

띄울 팝업창이 가로 세로 사이즈를 이벽합니다 창크기 조절 가능여부 체크 표시를.

하며 스크롤바 사용여부를 체크합니다 보기와 같이 팝업내용을 예쁘게 만들어 봅니, .

다.

접속통계보기04



사용자정보관리05

회원관리06 회원의 관리 및 수정이 가능합니다.



menul - web.kui.co.krweb.kui.co.kr/menual.pdf · .제1단계홈페이지구성및구조설계....

Documents

Transcript of menul - web.kui.co.krweb.kui.co.kr/menual.pdf · .제1단계홈페이지구성및구조설계....