디지털콘텐츠 No.1 (주)아사달 디자인센터
내정보 SI 도메인 호스팅 디자인몰 솔루션몰 홈페이지몰 모바일 디자인센터 게임 고객지원
로그인 회원가입 장바구니 주문내역
트렌드뷰 웹강좌 자료실
배경이미지
베스트 키워드
주간 월간 연간
검색  상세검색
이벤트 디자이너를 위한 디자인 세상 아사달이 만들어갑니다.
디자인센터 보유 현황 오늘어제이번달지난달누적
웹기획
HTML 사용법
포토샵 사용법
일러스트 사용법
플래시 사용법
일러스트 만들기
일러스트 배경 만들기
일러스트 아이콘 만들기
일러스트 그래픽 만들기
편집사진 만들기
배경 편집사진 만들기
사물 편집사진 만들기
플래시 모션 만들기
플래시 스크립트 만들기
웹구성 요소 만들기
웹 페이지 만들기
  - 웹페이지의 이해
  - 회사소개 페이지 제작
  - 일반 게시판 페이지 제작
  - 갤러리 및 동영상 게시
      판 페이지 제작
  - 회원 페이지 제작
  - 웹진 제작
  - 이벤트 페이지 제작
비즈니스 홈페이지 만들기
생활 홈페이지 만들기
쇼핑몰 홈페이지 만들기
일반 게시판 관련 페이지 제작
Home > 디자인 센터 > 웹강좌 > 웹 페이지 만들기 > 일반 게시판 관련 페이지 제작
게시판 목록/읽기/쓰기 페이지 제작 아사프로 게시판 연동 방법 제로보드 게시판 연동 방법

3. 일반 게시판 관련 페이지 제작

* 제작 시 고려해야 할 사항
- 게시판 관련 페이지 제작 시 게시판의 용도나 목적에 맞는 폼으로 제작되어야 합니다. 게시판의 용도로는 방명록, 공지사항, 자유게시판, 문의게시판 등 게시판을 사용하는 목적에 따라 폼이나 형식이 다르며 웹사이트 제작 시 제공되는 기획서에 기초하여 만들어져야 합니다. 게시판은 기본적으로 목록, 보기, 쓰기 페이지가 한 세트로 구성돼야 합니다. 디자인만 고려하여 게시판 스킨을 디자인할 경우 코딩이나 프로그램 작업 시 문제가 발생할 수 있습니다. 따라서 프로그램과 연동이 용이한 일반적인 형태의 디자인을 해야 합니다. 또한 모든 페이지 및 아이콘 등이 동일한 디자인 패턴을 가져야 합니다.
(1) 게시판 목록/읽기/쓰기 페이지 제작

- 게시판 목록/읽기/쓰기 페이지는 서브페이지와 동일한 색상 콘셉트로 게시판의 주제와 어울리게 디자인합니다.

[목록 페이지 제작]
① 먼저 적절한 크기의 서체를 사용하여 타이틀 이미지를 제작합니다.

② 타이틀 이미지 우측 부분에는 현재 위치를 나타내는 텍스트 이미지를 배치합니다.

③ 제작하고자 하는 게시판의 주제와 어울리는 일러스트 아이콘 이미지를 상단 좌측에 배치합니다.

④ 적절한 서체를 이용하여 메인 타이틀 텍스트와 서브 타이틀 텍스트를 일러스트 아이콘 이미지 우측 적절한 위치에 정돈하여 배치합니다.

⑤ 서브 페이지 콘셉트와 동일한 색상을 사용하여 게시판 타이틀 바를 제작하여 배치합니다.

⑥ 게시판 타이틀바 위에 NO, 제목, 작성자, 작성일, 조회 등의 항목을 입력하여 배치합니다.

⑦ 각각의 항목별(NO, 제목, 작성자, 작성일, 조회) 내용을 입력하여 게시판 목록 텍스트를 배치합니다.

⑧ 게시판 하단에 현재 게시판의 위치를 나타내는 번호를 배치하여 게시판 목록 페이지 제작을 완성합니다.

[보기 페이지 제작]
① 게시판 보기 페이지는 게시판 목록 페이지와 동일한 색상을 사용하여 게시판 타이틀 라인을 배치합니다.

② 첫 번째 행에는 제목 항목을 추가한 후 제목 텍스트를 입력하여 배치합니다.

③ 두 번째 행 좌측에는 작성자 항목을 추가한 후 텍스트를 입력하여 배치합니다.

④ 두 번째 행 우측에는 작성일, 조회 항목을 차례로 추가한 후 텍스트를 입력하여 배치합니다.

⑤ 각각의 항목 아래 내용 텍스트를 입력한 후 배치합니다.

⑥ 페이지 하단 좌측에 게시판 목록 페이지로 이동할 수 있는 「목록보기」버튼을 추가하여 배치합니다.

⑦「목록보기」버튼과 동일한 모양으로 「수정하기」「삭제하기」「답변쓰기」버튼을 제작한 후 배치하여 게시판 읽기 페이지 제작을 완성합니다.

[쓰기 페이지 제작]
① 게시판 쓰기 페이지는 게시판 목록 페이지와 동일한 색상을 사용하여 게시판 타이틀 라인을 배치합니다.

② 첫 번째 행에는 좌측에 이름 항목과 한 줄 입력 상자를 추가하고, 우측에 비밀번호 항목과 한 줄 입력 상자를 추가하여 배치합니다.

③ 두 번째 행에는 이메일 주소 항목과 한 줄 입력 상자를 추가하여 배치합니다.

④ 세 번째 행에는 제목 항목과 한 줄 입력 상자를 추가하여 배치합니다.

⑤ 네 번째 행에는 내용 항목과 글 입력 상자를 추가하여 배치합니다.

⑥ 페이지 하단 중앙에 「등록하기」와「취소하기」버튼을 제작하여 배치한 후 게시판 쓰기 페이지 제작을 완성합니다.
하단 메뉴 배경 이미지
하단 메뉴 배경 이미지 회사소개 사진모음 협력사 오시는길 이용약관 개인정보취급방침 전화상담안내 게시판문의 모바일 한국어 라인 이미지 日本語 라인 이미지 中文 라인 이미지 ENGLISH 라인 이미지 사이트맵 하단 메뉴 배경 이미지
하단 메뉴 배경 이미지
하단 메뉴 배경 이미지 사이트명 : 아사달닷컴 | 회사명 : (주)아사달 | 대표이사 : 서창녕 | 대표전화 : 1544-8442 | 팩스번호 : 02-2026-2008
사업자등록번호 : 206-81-24351 | 법인등록번호 : 110111-1940504 | 통신판매업신고 : 제18-890호 | 벤처확인번호 : 051134532200563
(우편번호 : 08507) 서울시 금천구 가산디지털1로 168 우림라이온스밸리 A동 8층 (주)아사달
(우편번호 : 153-786) 서울시 금천구 가산동 371-28번지 우림라이온스밸리 A동 8층 (주)아사달
Copyright ⓒ asadal.com All rights reserved.
인터넷 익스플로어 구글 크롬 모질라 파이어폭스
애플 사파리 오페라 넷스케이프
맨위로
디지털콘텐츠 No.1 (주)아사달