![]()
이번 미션에서는 모바일웹 구인구직페이지를 만들어보도록 하겠습니다. 솔루션내에 구인구직과 관련된 모바일 기본템플릿이 있으므로 쉽게 추가하고 수정할 수 가능합니다.
작업순서는 아래와 같이 진행할 것입니다.
① 인재정보 목록과 상세정보를 만듭니다. ② 채용공고 목록과 상세정보를 만듭니다. ③ 그룹디자인을 통해 인재정보와 채용공고를 메인에 노출시킵니다.
![]()
모바일 인재정보목록과 인재정보 상세보기를 만들어보도록 하겠습니다. [디자인관리 (모바일) 》 고급 디자인 관리 》 세부 화면 디자인]로 이동하고, [구인구직2.0 》인재 정보 목록]을 차례대로 선택합니다.
- 기본템플릿에서 "모바일_구인구직_인재정보"를 선택합니다. - 하단의 "나만의 디자인으로 복사"버튼을 클릭합니다. - 나만의 디자인에 복사된 "모바일_구인구직_인재정보"를 선택합니다.
확인을 위해서 URL을 클릭하고, 주소창에서 mobile_conn=on (모바일사용) 으로 수정해주세요. ※ 전체주소는 http://uhkr56.aramschool.co.kr/job2/mem_list.htm?mobile_conn=on 입니다.
![]()
인재정보 상세보기도 수정해봅시다. [디자인관리 (모바일) 》 고급 디자인 관리 》 세부 화면 디자인]로 이동하고, [구인구직2.0 》이력서 상세보기]를 차례대로 선택합니다.
- 기본템플릿에서 "모바일 이력서상세보기"를 선택합니다. - 하단의 "나만의 디자인으로 복사"버튼을 클릭합니다. - 나만의 디자인에 복사된 "모바일 이력서상세보기"를 선택합니다.
확인을 위해서 인재정보목록에서 이력서를 클릭하면 이력서 상세정보화면이 나타납니다.
![]()
![]()
위와 동일한 방법으로 모바일 채용공고목록과 채용공고 상세보기를 만들어보도록 하겠습니다. [디자인관리 (모바일) 》 고급 디자인 관리 》 세부 화면 디자인]로 이동하고, [구인구직2.0 》채용공고목록]을 차례대로 선택합니다.
- 기본템플릿에서 "모바일구인구직 채용공고"를 선택합니다. - 하단의 "나만의 디자인으로 복사"버튼을 클릭합니다. - 나만의 디자인에 복사된 "모바일구인구직 채용공고"를 선택합니다.
![]()
인재정보 상세보기도 수정해봅시다. [디자인관리 (모바일) 》 고급 디자인 관리 》 세부 화면 디자인]로 이동하고, [구인구직2.0 》채용공고 상세보기]를 차례대로 선택합니다.
- 기본템플릿에서 "모바일 채용공고 상세보기"를 선택합니다. - 하단의 "나만의 디자인으로 복사"버튼을 클릭합니다. - 나만의 디자인에 복사된 "모바일 채용공고 상세보기"를 선택합니다.
![]()
![]()
이번에는 인재정보와 채용정보를 그룹디자인을 이용하여 구인구직 메인페이지를 만들어보겠습니다. [디자인관리 (모바일) 》 고급 디자인 관리 》 그룹디자인 관리]로 이동하고, 프로그램마법사 생성버튼을 클릭하고 [구인구직] 추천 채용공고 > 목록형에서 아래와 같이 그룹디자인을 생성합니다.
![]()
동일한 방법으로 [구인구직] 추천 이력서 > 앨범형을 선택하고 아래와 같이 그룹디자인을 생성합니다.
![]()
생성된 그룹디자인을 이용해서 구인구직메인페이지를 만들어 보겠습니다. [디자인관리 (모바일) 》 고급 디자인 관리 》 추가 페이지 관리]로 이동한 후 아래와 같이 추가페이지를 생성합니다.
![]()
마지막으로 위에서 만든 구인구직메인페이지를 상단디자인에 삽입해보겠습니다. [디자인관리 (모바일) 》 고급 디자인 관리 》 메인 화면 디자인]으로 이동한 후 상단디자인의 모바일상단을 아래와 같이 수정합니다.
![]()
현재 홈페이지는 전체적으로 CSS가 적용이 안되어 있어 홈페이지가 이쁘지 않습니다. 본인이 직접 디자인도 입히고 CSS도 수정하여 이쁘게 꾸민다면 멋진 홈페이지를 만들 수 있을 것입니다.
수고하셨습니다. ^^
완성화면(바로보기) : http://m.uhkr56.aramschool.co.kr/shop_main/main_body.htm 스마트폰으로 http://uhkr56.aramschool.co.kr 접속하시면 자동으로 모바일버젼으로 접속 됩니다.
댓글 55개 |
