|
출처: 사랑방카페 원문보기 글쓴이: ♤은행나무
◎ 05/01 7 주차
- 인터넷 주소창에 http://mhstory.net/builder > Enter
- 오즈홈 빌더 로그인
□ 상단보조메뉴 수정, 변경하기
1) 상단 두번째 칸 우측마우스 > 셀모듈등록 > 좌측메뉴 > ⊙가로/간단메뉴(상단보조메뉴)선택 > 완료 → 회사소개|제품안내|채용정보|생성됨
2) 작업메뉴 > 메뉴관리 > 회원관련페이지 - 수정 > [+]최상위메뉴추가에서 [+]클릭 > 메뉴명 - "회원가입" 입력 - 확인 > 접근권한 - 손님, 메뉴종류 - Page, 메뉴옵션 - 회사소개
3) 작업메뉴 > 메뉴관리 > 회원관련페이지 - 수정 > [+]최상위메뉴추가에서 [+]클릭 > 메뉴명 - "로그인" 입력 - 확인 > 접근권한 - 손님, 메뉴종류 - Page, 메뉴옵션 - 회사소개
4) 작업메뉴 > 메뉴관리 > 회원관련페이지 - 수정 > [+]최상위메뉴추가에서 [+]클릭 > 메뉴명 - "방명록" 입력 - 확인 > 접근권한 - 손님, 메뉴종류 - Page, 메뉴옵션 - 회사소개
→ 완료
5) 작업메뉴 > 메뉴관리 > 회원관련페이지 - 변경 > "상단보조메뉴" 입력
- 이전에 만들어서 바로 위에 놓여있는 같은 이름의 "상단보조메뉴"는 삭제
→ 완료 > 회사소개|제품안내|채용정보|커뮤니티|자료실|갤러리| 생성됨
6) 모든 수강생들 메뉴 이름과 종류를 통일하기 위해서
- 작업메뉴 > 모듈리스트 > 내용 확인(또는 수정)하고 - 빨간 글씨로 "미사용"으로 나타난 것은 모두 삭제 > 창닫기
- 작업메뉴 > 메뉴관리 > 내용 확인(또는 수정)하고 - 창닫기
□ 이름 변경하기
- 기본메뉴 > 이름변경 - "메인메뉴" > 확인
□ 최종보조메뉴 만들기
1) 상단 두 번째 칸( 2 번칸) 우측마우스 > 셀모듈 삭제
2) 상단 두 번째 칸 (2 번칸) 우측마우스 > 셀모듈 등록 > 우측창 중하단에 있는 "메뉴" 클릭 >
3) 두 번째 ⊙ 가로/간단메뉴 클릭 > 맨 하단 다음단계 > 모듈설명에 "최종보조메뉴" 입력 > 완료
4) 상단 두 번째 칸 (2 번칸) 우측마우스 > 셀모듈 환경설정 > 모듈설명에 "최종보조메뉴" 입력 - 사용할 메뉴 ▼ : 최종보조메뉴 > 완료
5) 작업메뉴 > 메뉴관리 > 최종보조메뉴 - 수정 > ▲ 회원가입 - 맨 위로 클릭해서 올린다. ▲ 로그인 - 두 번째, ▲▼ 방명록, 회원정보 수정, 회원탈퇴 순으로 배치한다. → 완료 > 창닫기
□ 포토샵에서 메인 이미지 조각내기
- 사랑방카페 > 수강생연습장 > 5월1일 연습 > home02 저장 > 압축풀기
- 포토샵 실행 > 파일 > 열기 > home02 > main.psd > 메인메뉴줄 View > Extras, Rulers, Snap에 체크 해제
1. 세로 7개 영역으로 분할하기
- 툴바 우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=80을 입력 > OK - 03번 영역이 비활성화 상태로 생성된다.
3) 03 영역 안에 마우스 우측 > Edit Slice options..(분할영역옵션)
- Slice Options 창 - Dimensions x=0, y=100, W=1,000, H=480을 입력 > 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(사용자분할영역으로 승격)
2. 가로 분할하기
1) 01번셀 파랗게 활성화된 영역위에 마우스우측 > Edit Slice options..(분할영역옵션) > Slice Options창 - Dimensions x=0, y=0, W=700, H=20을 입력 > OK - 02번 영역이 비활성화 상태로 생성된다.
2) 02번셀 비활성화된 영역 위에 마우스 우측 > Edit Slice options.. (분할영역옵션) > Slice Options창- Dimensions x=700, y=0, W=270, H=20 을 입력 > OK - 03번 영역이 비활성화 상태로 생성된다.
3) 03번셀 비활성화된영역 위에 마우스우측 > Promote to User Slice(사용자분할영역으로 승격)
4) 04번셀 활성화된 영역위에 마우스우측 > Edit Slice options..(분할영역옵션) > Slice Options창 - Dimensions x=0, y=20, W=200, H=80을 입력 > OK
- 05번 영역이 비활성화 상태로 생성된다.
5) 05번셀 비활성화된 영역위에 마우스우측 > Edit Slice options..(분할영역옵션)
- Slice Options창 - Dimensions x=200, y=20, W=50, H=80을 입력 > OK
- 06번 영역이 비활성화 상태로 생성된다.
6) 06번셀 비활성화된 영역위에 마우스우측 > Edit Slice options..(분할영역옵션)
- Slice Options창 - Dimensions x=250, y=20, W=700, H=80을 입력 > OK
- 07번 영역이 비활성화 상태로 생성된다.
7) 07번셀 비활성화된 영역위에 마우스우측 > Promote to User Slice(사용자분할영역으로 승격)
8) 06번셀 활성화된 영역위에 마우스우측 > Edit Slice options..(분할영역옵션)
- Slice Options창 - Dimensions x=250, y=20, W=700, H=15을 입력 > OK
- 08번 영역이 비활성화 상태로 생성된다.
9) 08번셀 비활성화된 영역위에 마우스우측 > Promote to User Slice(사용자분할영역으로 승격)
10) 11번셀 활성화된 영역위에 마우스우측 > Edit Slice options..(분할영역옵션)
- Slice Options창 - Dimensions x=0, y=610, W=310, H=100을 입력 > OK
- 12번 영역이 비활성화 상태로 생성된다.
11) 12번셀 비활성화된 영역위에 마우스우측 > Edit Slice options(분할영역옵션)
- Slice Options창 - Dimensions x=310, y=610, W=90, H=100을 입력 > OK
- 13번 영역이 비활성화 상태로 생성된다.
12) 13번셀 비활성화된 영역위에 마우스우측 > Edit Slice options(분할영역옵션)
- Slice Options창 - Dimensions x=400, y=610, W=95, H=100을 입력 > OK
- 14번 영역이 비활성화 상태로 생성된다.
13) 14번셀 비활성화된 영역위에 마우스우측 > Edit Slice options(분할영역옵션)
- Slice Options창 - Dimensions x=495, y=610, W=95, H=100을 입력 > OK
- 15번 영역이 비활성화 상태로 생성된다.
14) 15번셀 비활성화된 영역위에 마우스우측 > Edit Slice options(분할영역옵션)
- Slice Options 창 - Dimensions x=495, y=610, W=95, H=100을 입력 > OK
- 16번 영역이 비활성화 상태로 생성된다.
15) 16번셀 비활성화된 영역위에 마우스우측 > Promote to User Slice(사용자분할영역으로 승격)
16) 18번셀 활성화된 영역위에 마우스우측 > Edit Slice options(분할영역옵션)
- Slice Options 창 - Dimensions x=0, y=740, W=200, H=60을 입력 > OK
- 19번 영역이 비활성화 상태로 생성된다.
17) 19번셀 비활성화된 영역위에 마우스우측 > Promote to User Slice(사용자분할영역으로 승격)
※ 이상과 같은 작업 결과 이미지가 19개 셀 영역으로 나누어졌다.
□ mainswf와 main 파일로 저장하기
- [참고] 04/17 5 주차 > 4. 영역 설정하여 스위시로 작업하기 참조
ㅡ mainswf 파일로 저장하기
1) 툴박스 좌상1 사각툴 선택 > 부메뉴줄 Style 옵션 - Fixed Size 선택
- width: 1000 px, Height: 480 px > 메뉴줄 View > Snap에 체크
- 9번 셀 위에 클릭하면 사각 점선 영역이 설정된다.
2) 메인메뉴줄 Image > Crop(한글로는 이미지-자르기) > 9번셀 이미지만 남는다.
3) File > Save As > 포멧 - PSD, 파일이름 - mainswf, 저장위치 - 바탕화면
ㅡ main 파일로 저장하기
1) Edit > Step Backward (이전단계) > Ctrl + D 영역해제
2) File > Save for Web > 상단 Original 클릭 > Save > JPEG 로, 이름 main, 저장위치 - 바탕화면.
□ 나모에 업로드하기
1) 바탕화면에 폴더 새로만들기 > 이름 "main"
2) 나모 실행 > 출판하기 > 연결하기
3) 나모 왼쪽 로컬창 - 바탕화면 main 폴더 클릭 > 나모 오른쪽 서버창 - [/www] 클릭 → 업로드
4) 바탕화면에(혹은 저장한 곳에) images 폴더 - 이름변경 "mainimg"로
5) 나모 로컬창 mainimg 클릭 > 나모 서버창 main 폴더 클릭 → 업로드
□ http://choemh.com/builder/에 조각 이미지 찾아 넣기
1) 01번셀 빈칸 우측마우스 > 자식셀 > 셀 속성 > 사용자그림에 체크 - 찾아보기 > main > mainimg > main_01.jpg > 확인
2) 02번셀 빈칸 우측마우스 > 자식셀 > 셀 속성 > 사용자그림에 체크 - 찾아보기 > main > mainimg > main_02.jpg > 확인
3) 03번셀 빈칸 우측마우스 > 자식셀 > 셀 속성 > 사용자그림에 체크 - 찾아보기 > main > mainimg > main_03.jpg > 확인
4) 04번셀 빈칸 우측마우스 > 자식셀 > 셀 속성 > 사용자그림에 체크 - 찾아보기 > main > mainimg > main_04.jpg > 확인
5) 05번셀 빈칸 우측마우스 > 자식셀 > 셀 속성 > 사용자그림에 체크 - 찾아보기 > main > mainimg > main_05.jpg > 확인
6) 06번셀 빈칸 우측마우스 > 자식셀 > 셀 속성 > 사용자그림에 체크 - 찾아보기 > main > mainimg > main_06.jpg > 확인
7) 07번셀 빈칸 우측마우스 > 자식셀 > 셀 속성 > 사용자그림에 체크 - 찾아보기 > main > mainimg > main_07.jpg > 확인
8) 08번셀 빈칸 우측마우스 > 자식셀 > 셀 속성 > 사용자그림에 체크 - 찾아보기 > main > mainimg > main_08.jpg > 확인
9) 09번셀 빈칸 우측마우스 > 자식셀 > 셀 속성 > 사용자그림에 체크 - 찾아보기 > main > mainimg > main_09.jpg > 확인
10) 10번셀 빈칸 우측마우스 > 자식셀 > 셀 속성 > 사용자그림에 체크 - 찾아보기 > main > mainimg > main_10.jpg > 확인
11) 11번셀 빈칸 우측마우스 > 자식셀 > 셀 속성 > 사용자그림에 체크 - 찾아보기 > main > mainimg > main_11.jpg > 확인
12) 12번셀 빈칸 우측마우스 > 자식셀 > 셀 속성 > 사용자그림에 체크 - 찾아보기 > main > mainimg > main_12.jpg > 확인
13) 13번셀 빈칸 우측마우스 > 자식셀 > 셀 속성 > 사용자그림에 체크 - 찾아보기 > main > mainimg > main_13.jpg > 확인
14) 14번셀 빈칸 우측마우스 > 자식셀 > 셀 속성 > 사용자그림에 체크 - 찾아보기 > main > mainimg > main_14.jpg > 확인
15) 15번셀 빈칸 우측마우스 > 자식셀 > 셀 속성 > 사용자그림에 체크 - 찾아보기 > main > mainimg > main_15.jpg > 확인
16) 16번셀 빈칸 우측마우스 > 자식셀 > 셀 속성 > 사용자그림에 체크 - 찾아보기 > main > mainimg > main_16.jpg > 확인
17) 17번셀 빈칸 우측마우스 > 자식셀 > 셀 속성 > 사용자그림에 체크 - 찾아보기 > main > mainimg > main_17.jpg > 확인
18) 18번셀 빈칸 우측마우스 > 자식셀 > 셀 속성 > 사용자그림에 체크 - 찾아보기 > main > mainimg > main_18.jpg > 확인
19) 19번셀 빈칸 우측마우스 > 자식셀 > 셀 속성 > 사용자그림에 체크 - 찾아보기 > main > mainimg > main_19.jpg > 확인
□ 저장하기
- 작업메뉴 > 홈페이지 다른이름으로 저장하기 > 설명 "mainimg" 입력 > OK