쇼핑몰 만들기 제8단계 - 홈 레이아웃 정비하기 / 우산

 

제8단계 - 홈 레이아웃 정비하기

 

1. 커뮤니티 메뉴 알아보기

   - 공지사항, 상품문의, 고객사용후기, 갤러리

2. 공지사항 글 올려보기

3. 상단메뉴 아이콘 바꾸기

  - 현재 : 숙박교통, 테마여행, 여행이야기

  - 변경하기 : 여울마루, 단양관광, 사랑방

3-1 아이콘 이미지 만들기 포토샵 설명

4. 상단메뉴 클릭시 내용 바꾸기

- 현재 : 상품안내 게시판

- 변경하기 : 여울마루 안내게시판, 단양관광 링크 연결, 사랑방게시판

 

***

지금 진행하는 쇼핑몰만들기 단계별 내용은

사례1건씩만 실습하여 길을 제시해주는데 그치므로,

실제 자신의 쇼핑몰을 운영하기 위해 준비하는 사람은

사례별로 하나씩만 해서는 안되고, 실습내용을 숙지하고 보완함으로써

각자 자신을 위한 쇼핑몰 페이지를 알차게 다듬어 가야합니다

***

 

1. 커뮤니티 메뉴 알아보기

 

먼저, 아래 이미지의 왼쪽 커뮤니티 메뉴(파란색 부분)는 그대로 이용할 수 있는 상태입니다

각자 하나씩 메뉴를 클릭해가면서 알아보면 됩니다.

 

가. 공지사항

공지사항은 쇼핑몰 관리자만 글을 올릴 수 있습니다.

 

나. 상품문의

상품문의는 고객이 상품에 대해 문의를 하고

쇼핑몰 관리자가 답변을 하는 곳입니다

 

다. 고객사용후기

고객사용 후기는 고객이 글을 올릴수 있는 곳입니다

상단메뉴 여행이야기와 같은 게시판으로 연결되어 있습니다

 

라. 갤러리

갤러리 역시 고객이 글을 올릴 수 있는 곳인데

사진을 위주로 올릴수 있도록 되어 있습니다

 

 

2. 공지사항 글 올려보기

ㅇ 공지사항은 쇼핑몰 관리자가 글을 올리는 곳이기 때문에

먼저 로그인 해야하며, 또한 관리자기능 사용하지 않음에 체크한후에야 공지사항에 글을 올릴 수 있습니다

**관리자기능 사용에 체크되어 있으면 글을 쓰는 것이 아니라, 홈페이지 레이아웃 관리만 할 수 있음

 

 

1) 로그인 하고

2) 공지사항 체크하고

3) 글쓰기 버튼을 클릭하되

 

4)그 전에 아래 이미지와 같이 쇼핑몰관리자 기능 사용안함에 체크한 후

공지사항 글쓰기 버튼을 클릭해야 합니다.

 

 

5) 공지사항 입력창이 나타나면

제목을 입력하고, 공지사항에 체크해주고, 필요한 글을 쓴 후, 비밀번호를 입력하고 저장하시면 됩니다.

 

 

6) 공지사항 확인

아래와 같이 공지사항을 클릭해보면 게시글이 올라와 있습니다

 

 

 

 

3. 상단메뉴 아이콘 바꾸기

 

아래 이미지에서 현재 상단메뉴가 기본디자인으로 되어 있습니다

이것을 나만의 메뉴로 바꾸어 보도록 합니다

- 현재 : 숙박/교통, 테마여행, 여행이야기로 되어 있는 것을

- 변경 : 여울마루, 단양관광, 사랑방 이라는 메뉴(아이콘)로 바꾸어 보겠습니다

 

 

가. 상단메뉴 아이콘 바꾸기

먼저, 쇼핑몰 홈페이지에서 로그인 한 상태에서

상단의 "쇼핑몰 관리자 바로가기"를 클릭하여 관리자 페이지로 이동합니다

 

 

나. 관리자 페이지에서 아래와 같이

1)디자인관리, 2)디자인 편집하기를 차례데로 클릭합니다

 

다. 디자인 편집화면이 나타나면

아래와 같이 숙박/교통 아이콘 위에 마우스를 올리면

편집버튼이 나오고 그 크기를 알 수 있습니다

여기서 편집 버튼을 클릭합니다. (이미지가 미리 준비된 것으로 가정하고 진행합니다.)

 

**실제는 편집 버튼을 클릭하기 전에 사이즈 137*92px에 맞는 '여울마루' 이미지를 미리 만들어 놓아야 합니다

- 이미지 만드는 방법 : 바로 다음 항목에서 포토샵으로 설명예정-

 

라. 편집화면이 나타나면

1)속성을 클릭하고

2)찾아보기 버튼을 클릭하여 내 컴퓨터 폴더에서 미리 만들어 놓은 이미지(여울마루)를 열어서

3)적용 버튼을 클릭하면 변경됩니다.

 

 

이하 테마여행과 여행이야기 아이콘도 같은 방법으로 하면 되니까 생략합니다

이렇게 작업하여 상단 아이콘 세개를 모두 바꾼결과는 다음과 같습니다

 

 

 

3-1 상단이이콘 이미지 만들기 포토샵 설명

ㅇ일러스트나 다른 그림그리기 기능을 이용해도 되지만 여기서는 포토샵으로 간단히 만드는 방법을 설명합니다

 

가. 포토샵 열기 / 파일(F) - 새로만들기(N)에서 팝업창이 나오면 위에서 알아본 사이즈인 137px, 92px로 설정합니다

(아래 그림처럼 시행)

 

 

나. 바탕화면에 칠할 전경색 선택하기

먼저 전경색을 클릭하여, 팝업창이 열리면 적당한 색을 선택하고 확인해 줍니다.

 

다. 전경색으로 바탕 칠하기

- 하얀색으로 되어있던 바탕을 전경색으로 칠하려면 Alt키와 Delete키를 동시에 누르면

아래와 같이 전경색으로 칠해집니다.

 

라. 텍스트 쓰기

아래 이미지 순서대로 하여 "여울마루"라는 글을 씁니다

1텍스트도구 선택, 2글씨체 선택(취향대로),  3크기 선택,  4글자색 선택

5글씨 쓰기

 

마. 이미지 저장

위와 같이 작업을 마친 상태에서 포토샵 상단메뉴에서 파일(F) - 웹및장치용으로 저장(D)을 차례로 클릭하여

이미지를 적당한 폴더에 저장하면 됩니다.

이 저장된 이미지를 저위에서 설명한 바와 같이 불러서 적용하는 것입니다.

 

나머지 두개의 아이콘이미지도 같은 방법으로 하면 되니까 생략합니다.

 

다음은,

4. 상단메뉴 클릭시 내용 바꾸기

 

***계속 수정합니다***(시간 날 때마다 보완 예정입니다)