쇼핑몰 홈페이지 강좌 노트 / 1 ~ 6주차 까지

<A name="[문서의 처음]"></A> 쇼핑몰 홈페이지 강좌 노트 ◎ 03/20 ㅡ 1 주차  - builder : 220,000 원  - 쇼핑몰 모듈 (예 ; 콘도 예약, 예약불가) : 110,000 원  - 도메인 : 주소 mhstory.net  - 호스팅  - cafe24 > 로그인 > mhstory.net 도메인 신청 ◎ 03/27 ㅡ 2 주차  - 깨비홈 > 팝업창 > 3월 27일 오늘의 자료 > 저장  - 알집풀기 > 폴더열기 > home > 자료1.psd  - 인터넷 새창 > 주소창에 http://mhstory.net 입력 > Enter  - cafe24 > 로그인 > 나의 서비스관리(호스팅관리) > 연결도메인 - 연결하기  - 나모실행 > 출판하기 > 연결하기 - 사이트목록에서 필요없는 것 지우기 > 추가하기에서  1) 사이트 이름 - 스토리넷  2) 호스트 - mhstory.net  3) 디렉토리 -  4) 사용자 이름 - choemh  5) 암호 - 123456  6) □ 패스트모드 사용에 체크 v  7) 이동할 주소 - http://mhstory.net  - 나모 > 연결하기 > 로컬 창 > 바탕화면 > home폴더 > ozbuilder -  하위 9개 폴더와 파일 모두 서버창으로 업로드 > 팝업창 - 덮어쓰기 -모두 예 ◎ 04/03 ㅡ 3 주차  - 깨비홈 > 팝업창 > 4월 3일 오늘의 자료 > 저장  - 알집풀기 > 폴더열기 > install.php  1) 나모 로컬창에서 install.php ㅡ> 서버창으로 업로드 > 팝업창 덮어쓰기 - 모두 예  - 서버창 install.php 파일에 커서 올려놓고 마우스 오른쪽 > 모든 □에 체크 - 숫자 777로 수정  2) 인터넷 새창 주소창에 http://mhstory.net/install.php > Enter -  3) 오즈홈빌더 버전 2.0 설치 창 생성 > □ 동의함에 체크 > 다음 단계로  4) 오즈홈빌더 창에서  - 서버주소 :  - 계정 : choemh  - 비밀번호 : 123456 (http://choemh.com/ 접속번호)  - 데이터베이스 명 : choemh  - 관리자 접속 계정 : choemh  - 비밀번호 : 123456  - 비밀번호 확인 : 123456  - 관리자 이름 : 은행나무 or 관리자  - 관리자 메일주소 : choemh@hanmail.net  ※ 추후 빌더 접속은 http://mhstory.net/buider/index.html  주소로 접속하시면 됩니다.  라이센스 등록 - 라이센스가 없으므로  □ 테스트용으로 설치하기에 체크 후 > 하단 설치하기  5) 오즈홈빌더 버전 2.0 로그인창 생성  - 아이디 choemh  - 비밀번호 123456 > 로그인  [연습]  - 우상귀 작업메뉴 클릭 > 하단에서 3번째 홈페이지에 적용하기  - 우상귀 작업메뉴 클릭 > 중하단 작업 - 스킨에서 불러오기 >  - 좌3 ○ 쇼핑몰스타일에 체크 > 하단 불러오기 > 팝업창 - 취소  - 스킨에서 불러오기 > 좌1 ○ 초기화용에 체크 > 불러오기 > 확인  - 좌상귀 셀 우측마우스 > 셀 병합 > ↓하단셀과 병합 > 상단 - 완료 >  확인 > 상단 > 완료  - 중앙부분 셀 > 우측마우스 - 셀병합 > ↑상단셀과 병합 > 상단 - 완료 >  - 같은 방법으로 셀을 모두 하나로 통합한다.  □ 우상귀 작업메뉴 > 환경설정 > 레이아웃에서  1) 넓이 850 을 1,000으로 수정한다.  2) 정렬 - 좌측 선택  3) 여백 - 상단 0 px, 좌우 0 px, 하단 0 px > 확인 ◎ 04/10 ㅡ 4주차  ㅡ http://mhstory.net/builder > Enter - 오즈홈 빌더 로그인 창, 관리자 작업창  - choemh - 123456 > Enter > 작업페이지창     □ 작업메뉴 둘러보기  ㅡ 좌우측 상단 작업메뉴 - 상하로 이동 가능, 둘러보기  - 회원관련 설정  - 환경설정  .  .  .  - 모듈리스트 - 가입(Join) 로그인(login)  .  .  .  - 페이지 복제해 오기  .  .  .  - 홈페이지 다른 이름으로 저장하기  .  .  .  - 홈페이지에 적용하기  □ 홈 레이아웃 설정  - 가로 width : 600 + 370 + 30 = 1,000 px  - 세로 height : 20 + 300 + 200 + 200 + 200 = 920 px  ㅡ 작업메뉴 > 스킨에서 불러오기 > ○ 초기화용에 체크 > 하단 불러오기 > 확인  ㅡ 작업메뉴 > 환경설정 > 상단 레이아웃 >  - 넓이 1,000 px, 정렬 ○ 좌측 선택 > 확인  □ 셀 하나로 병합하기  1. 우상귀 셀 - 우측마우스 - 셀병합 > 우측셀과 병합 > 오른쪽 > 완료  2. 우측중 셀 - 우측마우스 - 셀병합 > 상단셀과 병합 > 상단 > 완료  3. 우측하 셀 - 우측마우스 - 셀병합 > 우측셀과 병합 > 오른쪽 > 완료  4. 하단측 셀 - 우측마우스 - 셀병합 > 상단셀과 병합 > 상단 > 완료  ㅡ 눈금자를 없애려면  - 작업메뉴 > 환경설정 > 눈금자 > 사용안함  □ 홈레이아웃 하기  1. 셀 공간에 우측마우스 > 셀분할 > 위아래로 분할 >  - 상단셀 20 px, 하단셀 ㅁ 자동할당에 체크, 기존셀 위치 ○ 상단 선택 > 완료  2. 상단셀 우측마우스 > 셀분할 > 좌우로 분할 >  - 왼쪽셀 600 px  - 오른쪽셀 (400) px  - 기존셀 위치 ○ 왼쪽 선택 > 완료  3. 상단 왼쪽셀 우측마우스 > 셀분할 > 좌우로 분할 >  - 왼쪽셀 370 px  - 오른쪽셀 (30) px  - 기존셀 위치 ○ 왼쪽 선택 > 완료  4. 중앙셀 오른쪽마우스 > 셀분할 > 위아래로 분할  - 상단세 300 px  - 하단셀 ( ) px, □ 자동할당에 체크  - 기존셀 위치 ○ 상단에 체크 > 완료  5. 하단셀 오른쪽마우스 > 셀분할 > 위아래로 분할  - 상단세 200 px  - 하단셀 ( ) px, □ 자동할당에 체크  - 기존셀 위치 ○ 상단에 체크 > 완료  6. 하단셀 오른쪽마우스 > 셀분할 > 위아래로 분할  - 상단세 200 px  - 하단셀 ( ) px, □ 자동할당에 체크  - 기존셀 위치 ○ 상단에 체크 > 완료  7. 하단셀 오른쪽마우스 > 셀분할 > 위아래로 분할  - 상단세 200 px  - 하단셀 ( 0 ) px, □ 자동할당에 체크  - 기존셀 위치 ○ 상단에 체크 > 완료  □ 위에서 세번째 셀을 독립셀로 변경하고 나누기  1. 위에서 세번째 셀 공간에 마우스 우측 > 독립셀로 변경 > 팝업창 > 확인  - 마우스 우측 > 자식셀 > 셀분할 > 좌우로 분할 >  - 왼쪽셀 330, 오른쪽 셀 ㅁ 자동할당에 체크, 기존셀 위치 ○ 왼쪽에 체크 > 확인  2. 같은 번째 오른쪽 셀 공간에 마우스 우측 > 독립셀로 변경 > 팝업창 > 확인  - 마우스 우측 > 자식셀 > 셀분할 > 좌우로 분할 >  - 왼쪽셀 330, 오른쪽 셀 ㅁ 자동할당에 체크, 기존셀 위치 ○ 왼쪽에 체크 > 확인  3. 나머지는 자동으로 340 * 200 px 셀이 남는다.  □ 저장하기  - 작업메뉴 > 하단 홈페이지 다른이름으로 저장하기 >  - 설명 - "1차홈페이지" 입력 > 하단 새로저장  □ 포토샵 실행  1. 파일 Open > 바탕화면 > 깨비 > 깨비쇼핑몰 > home > Home > main.psd  - 불러오기(open) > ok > ok > No  2. 툴박스 우3 Slice Tool 선택 > 상단 Style - Fixed Size 설정  2-1. Width : 1000 px, Height : 20px >  - 상단 메인메뉴줄 - View > Snap > 화면 상단에 클릭 > 좌상귀로 드래그 >  - 1000 * 20 px 하얀 박스 생성됨  ※ 여기에서 수작업으로 드래그해서 붙이는 경우 작은 오차가 생길 수 있으므로  - 상단 1000 * 20 px 셀 위에 커서를 놓고 더블클릭 또는 마우스오른쪽 클릭하고 Edit slice option 클릭 >  -  x = 0, y = 0, Width = 1000, Height = 20 으로 수정 > OK  2-2. 메인메뉴줄 - Width : 1000 px, Height : 300px > 좌상귀로 드래그 >  - 1000 * 300 px 박스 생성됨  ※ 여기에서 2-1과 같은 방법으로 1000*300px셀 위에 커서를 놓고 더블클릭 >  - Width = 1000, Height = 300 으로 수정 > OK  2-3. 메인메뉴줄 - Width : 1000 px, Height : 200px > 좌상귀로 드래그 >  - 1000 * 200 px 박스 생성됨  ※ 위와 같은 방법으로 1000 * 200 px 셀 위에 커서를 놓고 더블클릭 >  - Width = 1000, Height = 200 으로 수정 > OK  2-4. 메인메뉴줄 - Width : 1000 px, Height : 200px > 좌상귀로 드래그 >  - 1000 * 200 px 박스 생성됨  ※ 위와 같은 방법으로 1000 * 200 px 셀 위에 커서를 놓고 더블클릭 >  - Width = 1000, Height = 200 으로 수정 > OK  2-5. 메인메뉴줄 - Width : 1000 px, Height : 200px > 좌상귀로 드래그 >  - 1000 * 200 px 박스 생성됨  ※ 위와 같은 방법으로 1000 * 200 px 셀 위에 커서를 놓고 더블클릭 >  - Width = 1000, Height = 200 으로 수정 > OK  3. 상단에 생성된 하얀박스 01번이 파랗게 활성화된 상태에서 01위에 우측마우스  - 두번째 Edit Slice Options - 1000 * 20 확인 > OK  - 01번 파랗게 활성화된 부분 위에 더블클릭 > Width = 600, Height = 20 > 02번셀 생성  - 02번 비활성화되어 있는 02번 위에 커서 올려놓고 우측마우스 >  - 두번째 Promote to user Slece(승격) 클릭 > 02번 파랗게 활성화된 부분 위에 커서 올려 놓고 더블클릭  - W = 370, H = 20 > 03번셀 생성  - 03번 비활성화되어 있는 03번 위에 커서 올려놓고 우측마우스 >  - 두번째 Promote to user Slece(승격) 클릭 > 03번 파랗게 활성화된 부분 위에 커서 올려 놓고 더블클릭  - W = 30, H = 20 > 03번셀 생성  4. 가운데 셀 (2-3번 1000 *200) 을 셋으로 나누기  4-1. 비활성화되어 있는 05번 위에 커서 올려놓고 우측마우스 >  - 두번째 Promote to user Slece(승격) 클릭 > 05번 파랗게 활성화된 부분 위에 커서 올려 놓고 더블클릭  - W = 330, H = 200 > 06번셀 생성  4-2. 비활성화되어 있는 06번 위에 커서 올려놓고 우측마우스 >  - 두번째 Promote to user Slece(승격) 클릭 > 06번 파랗게 활성화된 부분 위에 커서 올려 놓고 더블클릭  - W = 330, H = 200 > 07번셀 생성  4-3. 비활성화되어 있는 07번 위에 커서 올려놓고 우측마우스 >  - 두번째 Promote to user Slece(승격) 클릭 > 07번 파랗게 활성화된 부분 위에 커서 올려 놓고 더블클릭  - W = 330, H = 200 > 07번셀 생성  ㅡ 이상 총 9셀  □ 저장하기  파일 > Save for Web > jpeg - Heigh > 저장 ㅡ 이미지 9 장  ◎ 04/17 ㅡ 5 주차  ㅡ 사랑방카페 > 특강 미리보기 > 31번 > 하단 - 이상의 자료를 참고하세요 >  ㅡ 저장 > psd 파일 압축풀기  ㅡ 포토샵 실행 > open > psd 폴더 > main.psd  - 표시줄을 지우려면 > View - Extras 선택 해제  - 그림을 보기 좋고 알맞게 조정하려면 Ctrl + 숫자 0  1. 레이어창에서  - 맨 위 ▶ ★COPYRIGHT 눈을 껐다 켰다 해 본다. - ▶클릭해서 ▼(하위폴더)로 바꾸고  - 위 레이어부터 차례로 눈을 껐다 켰다 해 본다.  - 같은 방법으로 두 번째 ▶ ★CONTENTS 눈과 하위폴더를 시험해 본다.  - 같은 방법으로 세 번째 ▶ ★Top 눈과 하위폴더를 시험해 본다.  - 같은 방법으로 네 번째 ▶ ★img_copy 눈과 하위폴더를 시험해 본다.  - 같은 방법으로 두 번째 ▶ ★VISUAL 눈과 하위폴더를 시험해 본다.  2.  이미지 분할 레이아웃 짜기  전체 크기 → 1,000 * 800  height : 20 → 1) 650 * 20, 2) 350 * 20 → 상단 보조메뉴  height : 50 → 3) 180 * 50, 4) 770 * 50, 5) 50 * 50  height : 510 → 6) 1,000 * 510  height : 30 →  7) 1,000 * 30  height : 100 → 8) 310 * 100, 9) 90 * 100, 10) 95 * 100, 11) 95 * 100,    12) 95 * 100, 13) 315 * 100  height : 30 → 14) 1,000 * 30  height : 60 →  15) 1,000 * 60  3. 이미지 분할 작업   - 툴바 우3 Slice Tool(분할영역도구) 선택 상태에서  - 메뉴바 View - Snap 선택 - 상단 Style > Fixed Size(크기고정)  - Width: 1,000px, Height: 20px  1) 상단에 마우스 클릭 - 드래그해서 x = 0, y = 0 지점으로 이동  - 정확성을 확인하기 위해서 파랗게 활성화된 01 클릭하거나 또는  - 01 영역 안에 마우스 우측 > Edit Slice options..(분할영역옵션)  - Slice Options 창 - Dimensions - x=0, y=0, W=1,000, H=20을 확인OK  - 02번 영역이 비활성화 상태로 생성된다.  2) 02 영역 안에 마우스 우측 > Edit Slice options..(분할영역옵션)  - Slice Options 창 - Dimensions - x=0, y=20, W=1,000, H=50을 확인OK  - 03번 영역이 비활성화 상태로 생성된다.  3) 03 영역 안에 마우스 우측 > Edit Slice options..(분할영역옵션)  - Slice Options 창 - Dimensions - x=0, y=70, W=1,000, H=510을 확인OK  - 04번 영역이 비활성화 상태로 생성된다.  4) 04 영역 안에 마우스 우측 > Edit Slice options..(분할영역옵션)  - Slice Options 창 - Dimensions - x=0, y=580, W=1,000, H=30을 확인OK  - 05번 영역이 비활성화 상태로 생성된다.  5) 05 영역 안에 마우스 우측 > Edit Slice options..(분할영역옵션)  - Slice Options 창 - Dimensions - x=0, y=610, W=1,000, H=100을 확인OK  - 06번 영역이 비활성화 상태로 생성된다.  6) 06 영역 안에 마우스 우측 > Edit Slice options..(분할영역옵션)  - Slice Options 창 - Dimensions - x=0, y=710, W=1,000, H=30을 확인OK  - 07번 영역이 비활성화 상태로 생성된다.  7) 07 영역 안에 마우스 우측 > Promote to User Slice(사용자분할영역으로 승격)  4. 위에서 03영역인 W=1,000, H=510 영역 설정하여 스위시로 작업하기  - 레이어창에서 ★TOP 눈을 끈다.  - 툴바 좌1 사각형 선택 > 상단 Style - Fixed Size(크기고정) 선택  - Width: 1,000, Height: 510으로 설정  - 메뉴줄에서 View - 스냅 선택  - 03 파랗게 활성화된 위에 마우스 클릭 > 영역 생성 >  - 이미지 > 자르기 (P) - 1,000 * 510 만 남는다.  ※ 영문판에서는 Edit - Cut  - 파일 > 다른이름으로 저장(위에서 12번째) > 이름 swish, 형식 Psd - 저장  ※ 영문판에서는 File - 위에서 8번째 Save as  - 편집 > 이전단계  - Ctrl + D 영역해제  5. 분할하기  - 툴바 우3 슬라이스툴 선택 >  - 01번 위 우측마우스 > Edit Slice options..(분할영역옵션) > W=650 > 확인  - 02번 위 우측마우스 > Promote to User Slice(사용자분할영역으로 승격)  - 03번 위 우측마우스 > Edit Slice options..(분할영역옵션) > W=180 H=50 > 확인  - 04번 위 우측마우스 > Edit Slice options..(분할영역옵션) > W=770 H=50 > 확인  - 왜냐하면 서브메뉴가 1,000 사이즈 마지막까지 닿지 않고 50px 정도 약간 안쪽으로 들이기 위해서 05번만큼 남기기 위해서  - 05번 위 우측마우스 > Promote to User Slice(사용자분할영역으로 승격)  - 06번, 07번은 그대로 두고  - 08번 위 우측마우스 > Edit Slice options..(분할영역옵션) > W=310 > 확인  - 09번 위 우측마우스 > Edit Slice options..(분할영역옵션) > W=90 > 확인  - 10번 위 우측마우스 > Edit Slice options..(분할영역옵션) > W=95 > 확인  - 11번 위 우측마우스 > Edit Slice options..(분할영역옵션) > W=95 > 확인  - 12번 위 우측마우스 > Edit Slice options..(분할영역옵션) > W=95 > 확인  - 13번 위 우측마우스 > Promote to User Slice(사용자분할영역으로 승격)  □ 레이어창에서  - ★COPYRIGHT 눈 끈다.  - ★CONTENTS ▶ > ▼ > ☆ele 눈 끈다. > ☆notice 눈 끈다.  □ 파일 > Save for Web(웹 및 장치용으로 저장) > JPEG - 이름 main > 저장  - images 폴더 안에 main_01 ~ main_15까지 이미지 저장됨   ◎ 04/24 ㅡ 6 주차  - http://mhstory.net/install.php > 로그인  - 셀을 하나로 병합한다.  □ 가로 1,000 px 를 세로 800 px에서 7개 영역으로 분할하기  - 즉 1,000 px * 20, * 80, * 480, * 30. * 100, * 30, * 60  - 작업메뉴 > 환경설정 > 레이아웃에서 넓이 1,000 px를 확인한다.  - 바탕에서 오른쪽 마우스 > 셀 속성 > 크기 > 자동할당에 체크 > 확인  ※ 여기에서 자식셀-부모셀이 나올 경우에는 부모셀 > 독립셀 제거  1) 우측마우스 상단셀 : 20, 하단셀 : 자동할당에 체크, 기존셀 위치 : 상단에 체크 > 완료  2) 두 번째 칸에 우측마우스 상단셀 : 80, 하단셀 : 자동할당에 체크, 기존셀 위치 : 상단에 체크 > 완료  3) 세 번째 칸에 우측마우스 상단셀 : 480, 하단셀 : 자동할당에 체크, 기존셀 위치 : 상단에 체크 > 완료  4) 네 번째 칸에 우측마우스 상단셀 : 30, 하단셀 : 자동할당에 체크, 기존셀 위치 : 상단에 체크 > 완료  5) 다섯 번째에 우측마우스 상단셀 : 100, 하단셀 : 자동할당에 체크, 기존셀 위치 : 상단에 체크 > 완료  6) 여섯 번째에 우측마우스 상단셀 : 30, 하단셀 : 자동할당에 체크, 기존셀 위치 : 상단에 체크 > 완료  7) 일곱 번째에 우측마우스 상단셀 : 60, 하단셀 : 자동할당에 체크, 기존셀 위치 : 상단에 체크 > 완료 □ 첫째 칸(높이 20)을 독립셀로 변경하고 3등분하기  1) 우측마우스 > 독립셀로 변경 확인  2) 우측마우스 > 자식셀 > 셀 분할 > 좌/우로 분할  - 왼쪽셀 : 700, 오른쪽셀 : 300, 기존셀 위치 : 왼쪽에 체크 > 완료  3) 우측마우스 > 자식셀 > 셀 분할 > 좌/우로 분할  - 왼쪽셀 : 270, 오른쪽셀 : 30, 기존셀 위치 : 왼쪽에 체크 > 완료  □ 두 번째 칸(높이 80)을 독립셀로 변경하고 4등분하기  1) 우측마우스 > 독립셀로 변경 확인  2) 우측마우스 > 자식셀 > 셀 분할 > 좌/우로 분할  - 왼쪽셀 : 200, 오른쪽셀 : 800, 기존셀 위치 : 왼쪽에 체크 > 완료  3) 우측마우스 > 자식셀 > 셀 분할 > 좌/우로 분할  - 왼쪽셀 : 50, 오른쪽셀 : 750, 기존셀 위치 : 왼쪽에 체크 > 완료  4) 우측마우스 > 자식셀 > 셀 분할 > 좌/우로 분할  - 왼쪽셀 : 700, 오른쪽셀 : 50, 기존셀 위치 : 왼쪽에 체크 > 완료 □ 다섯 번째 칸(높이 100)을 독립셀로 변경하고 5등분하기  1) 우측마우스 > 독립셀로 변경 확인  2) 우측마우스 > 자식셀 > 셀 분할 > 좌/우로 분할  - 왼쪽셀 : 310, 기존셀 위치 : 왼쪽에 체크 > 완료  3) 우측마우스 > 자식셀 > 셀 분할 > 좌/우로 분할  - 왼쪽셀 : 90, 기존셀 위치 : 왼쪽에 체크 > 완료  4) 우측마우스 > 자식셀 > 셀 분할 > 좌/우로 분할  - 왼쪽셀 : 95, 기존셀 위치 : 왼쪽에 체크 > 완료  5) 우측마우스 > 자식셀 > 셀 분할 > 좌/우로 분할  - 왼쪽셀 : 95, 기존셀 위치 : 왼쪽에 체크 > 완료  6) 우측마우스 > 자식셀 > 셀 분할 > 좌/우로 분할  - 왼쪽셀 : 95, 기존셀 위치 : 왼쪽에 체크 > 완료  □ 마지막 칸(높이 60)을 독립셀로 변경하고 2등분하기  1) 우측마우스 > 독립셀로 변경 확인  2) 우측마우스 > 자식셀 > 셀 분할 > 좌/우로 분할  - 왼쪽셀 : 200, 기존셀 위치 : 왼쪽에 체크 > 완료  3) 우측마우스 > 자식셀 > 셀 분할 > 좌/우로 분할  - 왼쪽셀 : 800, 기존셀 위치 : 왼쪽에 체크 > 완료  □ 로그인, 회원가입, 방명록, 회원탈퇴 만들기  1) 작업메뉴 > 메뉴관리 > 보조메뉴 - 수정  - 1 번 [＋] 하위메뉴추가, [R] 메뉴명 변경, [×] 메뉴삭제 중에서 [R] 클릭  - 메뉴명 : "로그인" 입력, 메뉴종류 : Alias ▼ 클릭 > Page  - 메뉴옵션 ▼ 복사해 온 페이지 ▼ 클릭 - 회사소개 선택  2) 2번 [R] 클릭 > 메뉴명 : "회원가입" > 메뉴종류 : Page > 메뉴옵션 - 회사소개  3) 상단 [＋]최상위메뉴추가 클릭 > 메뉴명 : "방명록" > 메뉴종류 : Page > 메뉴옵션 - 회사소개  4) 상단 [＋]최상위메뉴추가 클릭 > 메뉴명 : "회원탈퇴" > 메뉴종류 : Page > 메뉴옵션 - 회사소개 > 완료  □ 상단 보조메뉴 만들기  1) 상단 두 번째 칸 우측마우스 > 셀모듈 등록 > 우측 중간쯤 메뉴 클릭 > 가로/간단메뉴 선택 ⊙ >  - 맨 하단 다음단계 클릭 > 모듈설명 "상단보조메뉴" 입력 > 완료  ※ 상단 두 번째 칸에 회사소개, 제품안내, 채용정보, 커뮤니티 생성됨  2) 두 번째 줄 세 번째 칸(80*700) 우측마우스 > 셀 분할  - 위 아래로 분할 > 상단셀 15, 하단셀 65, 기존 셀 위치 ⊙상단 > 완료  3) 하단셀 (65*1000) 우측마우스 > 셀모듈 등록 > 메뉴 > 가로/기본메뉴 선택 ⊙ > 다음단계 > 메인메뉴  - 메뉴넓이(메뉴당) 크기지정 100 px  - on mouse out #ffffff 지운다.  - on mouse over #ffffff 지운다. > 완료  4) 작업메뉴 > 메뉴관리 > 기본메뉴 - 수정  - 상단 [＋]최상위메뉴추가 클릭 > 메뉴명 : "자료실" > 메뉴종류 : Page > 메뉴옵션 - 회사소개 > 완료  - 상단 [＋]최상위메뉴추가 클릭 > 메뉴명 : "갤러리" > 메뉴종류 : Page > 메뉴옵션 - 회사소개 > 완료  □ 하위메뉴 추가하기  1) 작업메뉴 > 메뉴관리 > 기본메뉴 - 수정 >  - 1번 회사소개 [＋] 클릭 > 메뉴명 : "인사말" > 메뉴종류 : Page > 메뉴옵션 - 회사소개 > 확인  - 1번 회사소개 [＋] 클릭 > 메뉴명 : "오시는길" > 메뉴종류 : Page > 메뉴옵션 - 회사소개 > 확인  2) 제품안내 [＋] 클릭 > 메뉴명 : "A제품소개" > 메뉴종류 : Page > 메뉴옵션 - 회사소개 > 확인  - 제품안내 [＋] 클릭 > 메뉴명 : "B제품소개" > 메뉴종류 : Page > 메뉴옵션 - 회사소개 > 확인  - 제품안내 [＋] 클릭 > 메뉴명 : "C제품소개" > 메뉴종류 : Page > 메뉴옵션 - 회사소개 > 확인  3) 채용정보 [＋] 클릭 > 메뉴명 : "경력사원모집" > 메뉴종류 : Page > 메뉴옵션 - 회사소개 > 확인  - 채용정보 [＋] 클릭 > 메뉴명 : "생산직사원모집" > 메뉴종류 : Page > 메뉴옵션 - 회사소개 > 확인  - 채용정보 [＋] 클릭 > 메뉴명 : "간부사원모집" > 메뉴종류 : Page > 메뉴옵션 - 회사소개 > 확인  4) 커뮤니티 [＋] 클릭 > 메뉴명 : "자유게시판" > 메뉴종류 : Page > 메뉴옵션 - 회사소개 > 확인  - 커뮤니티 [＋] 클릭 > 메뉴명 : "공지사항" > 메뉴종류 : Page > 메뉴옵션 - 회사소개 > 확인  5) 자료실 [＋] 클릭 > 메뉴명 : "도면자료실" > 메뉴종류 : Page > 메뉴옵션 - 회사소개 > 확인  - 자료실 [＋] 클릭 > 메뉴명 : "설계자료실" > 메뉴종류 : Page > 메뉴옵션 - 회사소개 > 확인  6) 갤러리 [＋] 클릭 > 메뉴명 : "여행사진" > 메뉴종류 : Page > 메뉴옵션 - 회사소개 > 확인  - 갤러리 [＋] 클릭 > 메뉴명 : "제품사진" > 메뉴종류 : Page > 메뉴옵션 - 회사소개 > 확인  > 완료  □ 저장하기  - 작업메뉴 > 홈페이지 다른이름으로 저장하기 > 설명 : 홍보용 최종 > 새로저장  - 불러올려면 → 작업메뉴 > 저장된 홈페이지 불러오기