아이디저장


더보기 >










[공지] 미션 도전하기 전에 꼭 읽어보세요.
[공지] 초급미션이 A코스,B코스로 분리되었습니다.

미션 A코스 [고급8단] 뉴스/기사 목록과 상세 페이지 설정 및 메인페이지 수정하기
2011-12-17 09:55:02
아람스쿨 조회수 1370

지난시간에는 뉴스/기사 프로그램을 설치하고 환경설정하는 부분에 대해서 미션을 수행해보았습니다.

오늘 미션은 지난 시간에 이어 뉴스기사 목록과 상세페이지를 만들고 메인페이지 수정하는 방법에 대해서 알아보도록 하겠습니다.

 

 

 

 

 

 

 

 


 

 

 

 

먼저 뉴스기사를 분류하고 등록해야겠죠?

[뉴스 및 기사 기사 분류 관리 분류 관리]로 이동하여 기사를 아래와 같이 분류합니다.

 

 

기사분류가 완료되면, [뉴스 및 기사 기사 관리 기사 목록]로 이동하여 아래와 같이 기사를 등록합니다.

샘플기사가 없을 경우에는 인터넷신문을 참조하여 카테고리별로 기사를 5개 이상 입력하시기 바랍니다.

 

 

 

 

 

 

 

 

 

 

 


 

 

 

기사분류 및 등록이 완료되었으면 뉴스기사의 왼쪽디자인 페이지를 만들어보겠습니다.

[디자인관리 》 고급 디자인 관리 》 그룹디자인 관리]로 이동한 후  [뉴스/기사] 카테고리 분류 > 왼쪽메뉴 2단계를 차례대로 선택하고 아래와 같이 설정합니다.

 

 

 

새로운 {GROUP_news_left} 이란 그룹디자인이 만들어졌습니다.

 

 

 

위의 그룹디자인코드를 이용하여 아래와 같이 "뉴스기사왼쪽"이라는 새로운 왼쪽디자인을 만들어줍니다.

 

 

 

 

 

 

 

 

 

 

 

다음으로 기사목록페이지에 대해서 알아보겠습니다.

[디자인관리 》 고급 디자인 관리 》 세부 화면 디자인]으로 이동한 후 "뉴스 및 기사" 부분을 봅시다.

어떤가요.. 작업해야 하는 항목들이 몇개 없죠? 실제로 작업해야할 부분은 팝업을 제외한 기사전체보기, 메인출력코드별 기사목록(쇼핑몰의 메인출력코드와 동일한 기능), 기사목록, 기사상세보기, 뉴스기사검색폼 등 5개밖에 안되네요 ^^ ~~ 여기서는 기사목록을 선택합니다.

 

기사전체보기는 카테고리와 상관없이 전체기사목록이 표시되며, 기사목록은 카테고리별로 기사목록이 표시된답니다.

 

- 외각디자인의 왼쪽디자인을 "뉴스기사왼쪽"을 선택하고 "외각디자인 저장하기"를 클릭합니다.

- 기본템플릿에서 "기사 목록 A"를 선택합니다.

- 하단의 "나만의 디자인으로 복사"버튼을 클릭합니다.

- 나만의 디자인에 복사된 "기사 목록 A"를 선택합니다.

 

 

 

 

 

 

 

 

 

 

 

 
 
 
 
 
 
 

 

 

 

 

 

 

 

 

 

 


 

 

 

 

기사상세보기는 기사목록에서 기사를 클릭했을때 나타나는 페이지랍니다.

현재위치와 동일한 위치에서 기사상세보기를 선택합니다.

 

 

- 외각디자인의 왼쪽디자인을 "뉴스기사왼쪽"을 선택하고 "외각디자인 저장하기"를 클릭합니다.

- 기본템플릿에서 "기사 상세 보기 A"를 선택합니다.

- 하단의 "나만의 디자인으로 복사"버튼을 클릭합니다.

- 나만의 디자인에 복사된 "기사 상세 보기 A"를 선택합니다.

 

 
 
 
 
 
 

 

 

 

 

 

 

 

 

 

 
 
 
 
 
 
 

 

 

 

 

 

 

 

 

 

 

 


 

 

 

 

 

이전 미션에 만들었던 메인페이지를 수정해보도록 하겠습니다.

뉴스기사 메인페이지에는 각 카테고리별로 5개씩의 상품을 출력하여 나타내는 페이지를 만들어 보겠습니다.

[디자인관리 》 고급 디자인 관리 》 그룹디자인 관리]으로 이동한 후 [뉴스/기사] 데이타 출력 > 웹진형 (img+text)을 차례대로 클릭합니다.

 

아래와 같이 설정하고 뉴스카테고리에 대한 {GROUP_news_m1} 그룹디자인을 생성합니다.

 

 

동일한 방법으로  스포츠, 연예 카테고리에 대해서 각각 {GROUP_news_m2}, {GROUP_news_m3} 그룹디자인을 생성합니다.

 

※ 비슷한 유형의 그룹디자인을 만들경우에는 생성된 그룹디자인을 복사하고, 복사된 그룹디자인의 프로그램마법사 버튼을 클릭하여 옵션을 설정하면 쉽게 만들수 있답니다.

 

[디자인관리 》 고급 디자인 관리 》 추가 페이지 관리]으로 이동하여 '뉴스기사 메인'의 수정버튼을 클릭합니다. 

편집창아래의 '나만의 그룹디자인'버튼을 클릭해보면, 지금까지 만들었던 그룹디자인코드가 모두 표시됩니다.

메인페이지에 삽입할 코드를 클릭합니다.

 

 

디자인설정에서 왼쪽디자인을 "뉴스기사왼쪽"을 선택하고 아래와 같이 소스를 수정합니다.

 

 

 

 

 

 

 

 


 

 

 

수고하셨습니다. ^^

 

완성화면 : http://uhkr52.aramschool.co.kr/shop_add_page/index.htm?page_code=news_main

 

 

 

 

 

 

위 미션 수행 후 덧글에 소감 한마디 남겨주세요~~~~ ^0^


댓글 57개