지난시간에는 컨텐츠관리(제품소개) 프로그램을 설치하고 상단메뉴와 왼쪽메뉴를 연결하는 부분을 배웠습니다.
오늘 이 시간에는 제품목록과 제품상세보기의 디자인을 수정하고 제품항목도 추가해보도록 하겠습니다.

 

 

 

 

 

지금까지 만든 홈페이지에서 제품목록을 보시면 아래과 같이 나타납니다.

여기에 제품명과 모델명이 함께 출력되도록 디자인을 변경해보겠습니다.

제품목록을 수정하기 위해서 [디자인관리 》 고급 디자인 관리 》 세부 화면 디자인]으로 이동한 후 제품소개의 제품목록을 클릭합니다. 

현재 기본템플릿으로 "제품목록 C"가 선택되어 있으며, 디자인 수정을 위해서 "나만의 디자인 복사"를 해야 하며 절차는 다음과 같습니다.

  - 기본템플릿(제품목록 C)을 선택합니다.

  - 페이지 디자인관리 하단의 "나만의 디자인 복사"버튼을 클릭합니다.

  - 나만의 디자인부분에 생성된 "제품목록 C"를 선택합니다.

나만의 디자인으로 복사된 템플릿은 페이지 디자인관리에 소스가 표시됩니다.

 

소스편집이 쉽게하도록 "TEXT 모드"로 전환한 뒤, 전체소스를 메모장에 붙여넣고 수정할 부분을 찾습니다.

"// 테이블 한칸 안에 들어갈 상품 디자인 선언"라는 주석부분(129줄 ~146줄)이 제품목록을 출력하는 부분임을 알 수 있습니다.

 

 

우리는 [중급11단]에서 "제품관리 > 환경설정"에서 아래와 입력했을것입니다.

여기서 제품명이 pr_val1 이며, 모델명은 pr_val2, 제조년월은 pr_val3 이 됩니다.

이 변수를 추가해보겠습니다.

필자는 아래와 같이 pr_val2 를 추가해보았습니다.

 

 

 

제품목록이 생각했던대로 보여지나요? 

 

(잘안나온다면 아람스쿨의 질문 답변 게시판 이용해주세요 ^^) 

 

 

 

 

 

 

 

 

 

이번에는 제품목록에서 제품을 클릭했을때 보여지는 제품상세보기 페이지를 수정하겠습니다.
기존의 상세페이지에서 불필요한 항목인 가격과 시중가 항목을 삭제해보도록 하겠습니다.
 

 

 

[디자인관리 》 고급 디자인 관리 》 세부 화면 디자인]으로 이동한 후 제품소개의 제품상세보기를 클릭합니다.
제품목록과 동일하게 나만의 목록으로 복사한 후 디자인을 아래와 같이 수정합니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

현재 메뉴의 항목은 제품명, 모델명, 제조년월 입니다. 여기에 추가항목으로 "제조사"항목을 추가해보도록 하겠습니다.

새로운 항목의 추가는 [제품관리 》제품관리 》 환경설정]에서 "기본 항목명 설정"에서  "제조사"를 추가합니다.

 

여기서 잠깐, 제품소개 환경설정에 대해서 알아보도록 하겠습니다.

제품소개 환경설정은 제품목록 및 읽기 권한, 이미지의 크기지정, 전체출력수, 항목명을 설정할 수 있는 부분입니다. 기업마다 제품의 이미지를 돋보이게 하기 위해 크게해야 할 경우에 썸네일 부분의 크기를 변경하시면 됩니다.

※ 이미지의 크기는 썸네일 이미지보다 커야 정상적으로 표시됩니다.
 

 

 

 

항목을 추가해서 제품을 등록했지만 제품상세보기에서는 수정이 되어 있지 않습니다. 이유는 뭘까요?

네~ 당연히 제품상세보기도 아래와 같이 "제조사"를 추가해주셔야 합니다.

 

 

 

수고하셨습니다~~~

 

 

 

완성화면 : http://uhkr28.aramschool.co.kr/product/product_list.htm

 

 

완성 하신 분은 다음 미션으로 고고고~~~