디지털콘텐츠 No.1 (주)아사달 디자인센터
내정보 SI 도메인 호스팅 디자인몰 솔루션몰 홈페이지몰 모바일 디자인센터 게임 고객지원
로그인 회원가입 장바구니 주문내역
트렌드뷰 웹강좌 자료실
배경이미지
베스트 키워드
주간 월간 연간
검색  상세검색
이벤트 디자이너를 위한 디자인 세상 아사달이 만들어갑니다.
디자인센터 보유 현황 오늘어제이번달지난달누적
웹기획
HTML 사용법
포토샵 사용법
일러스트 사용법
플래시 사용법
일러스트 만들기
일러스트 배경 만들기
일러스트 아이콘 만들기
일러스트 그래픽 만들기
편집사진 만들기
배경 편집사진 만들기
사물 편집사진 만들기
플래시 모션 만들기
플래시 스크립트 만들기
웹구성 요소 만들기
웹 페이지 만들기
비즈니스 홈페이지 만들기
생활 홈페이지 만들기
  - 생활 홈페이지의 제작의        이해
  - 홈페이지몰 상품 만들기
  - 맞춤형 생활 홈페이지          만들기
  - 학원 홈페이지 만들기
  - 펜션 홈페이지 만들기
  - 음식점 홈페이지 만들기
  - 병원 홈페이지 만들기
  - 교회 홈페이지 만들기
  - 커뮤니티 홈페이지 만들        기
쇼핑몰 홈페이지 만들기
커뮤니티 홈페이지 만들기
Home > 디자인 센터 > 웹강좌 > 생활 홈페이지 만들기 > 커뮤니티 홈페이지 만들기
메인 페이지 만들기 서브 페이지 만들기

9. 커뮤니티 홈페이지 만들기

(1) 메인 페이지 만들기
주로 게시물 위주로 운영되는 사이트이므로 메인 이미지 이외의 내용 부분은 이미지 사용을 자제하고 게시판 등의 내용부분이 최대한 많이 노출되도록 제작해야 합니다.

[메인 페이지]

① 메뉴(Menu, Navigation) 만들기
- 해상도 1024*768에 맞춰서 제작할 새로운 문서(document)를 엽니다.

- 로고(logo)는 커뮤니티 시안의 특성에 맞는 적절한 서체를 사용하여 제작하여 상단에 배치합니다. 로고(logo)의 특성에 따라 색상 및 효과를 조절하여 디자인을 완성합니다.

- 로고(logo) 오른쪽 하단에 홈, 로그인, 회원가입, 사이트맵 등의 텍스트 메뉴(text menu)를 배치합니다.

- 커뮤니티 시안의 상단 메뉴의 텍스트(동호회소개, 커뮤니티, 갤러리, 정보마당, 동호회운영)를 배치합니다. 현재 시안 메뉴에 쓰인 국문서체는 Rix고딕 M 서체입니다. 메뉴 오른쪽에는 검색창과 인기검색 배너를 배치합니다.

- ‘동호회소개’ 클릭 시 나타나는 서브메뉴(동호회소개, 회장인사말, 운영진소개, 임원현황, 동호회회칙, 주요행사, 공지사항)를 배치합니다.

② 메인비주얼(Main Visual) 만들기

- 메인비주얼에 사용될 일러스트 이미지와 남녀 사진 이미지를 준비합니다.

- 메인비주얼 부분에 라인으로 틀을 잡습니다.

- 메인비주얼 부분에 하늘 이미지를 배경 이미지(background image)로 배치합니다.

- 메인비주얼 부분에 중심이 되는 일러스트 이미지를 배치합니다.

- 메인비주얼 부분에 다른 구성 요소들과 어울리도록 남녀 사진 이미지를 오른쪽에 배치합니다.

- 마지막으로 전체적인 디자인 콘셉트에 맞게‘사람과 사람이 만나는 즐거운 곳! 우리들의 자유로운 커뮤니티' 텍스트를 왼쪽 상단에 배치하여 타이포그래피(typography) 부분을 완성합니다.

③ 콘텐츠(Contents) 만들기
- 메인 이미지 왼쪽으로 로그인을 배치합니다. 메인 디자인 완성 후 솔루션으로 회원관리 로그인창을 연동해야 하는 부분입니다.

- 로그인 아래쪽으로 접속현황을 배치합니다. 메인 디자인 완성 후 솔루션으로 연동해야 하는 부분입니다.

- 메인이미지 오른쪽으로 ‘아사웹진 무료구독’ 배너와 그 아래쪽에는 QUICK MENU를 배치합니다.

- 게시물이 노출되는‘공지사항', ‘클럽소식' 게시판을 왼쪽에 배치합니다. 메인 디자인 완성 후 솔루션으로 게시판을 연동해야 하는 부분입니다

- ‘공지사항’아래쪽으로는 ‘클럽일정표’를 배치합니다. 메인 디자인 완성 후 솔루션으로 게시판을 연동해야 하는 부분입니다.

- ‘클럽일정표’ 아래쪽으로 ‘설문조사’를 배치합니다. 메인 디자인 완성 후 솔루션으로 게시판을 연동해야 하는 부분입니다.

- ‘공지사항’ 오른쪽으로는 게시물이 노출되는 '정모/번개게시판' , ‘질문과 답변’, 자료실’게시판을 배치합니다. (메인 디자인 완성 후 솔루션으로 게시판을 연동해야 하는 부분입니다.)

- ‘정모/번개게시판’오른쪽으로 ‘아사클럽 사진광장’사진게시판을 배치합니다. 메인 디자인 완성 후 솔루션으로 사진게시판을 연동해야 하는 부분입니다.

- ‘아사클럽 사진광장’아래쪽으로‘출석체크 이벤트’와‘아사클럽 소식지’배너를 배치합니다.

- 다음 줄에도 위, 아래 간격을 맞추어 ‘포토갤러리’ 사진게시판을 배치하고, 하단에 카피라이트(Copyright) 내용을 넣어 카피라이트 부분을 완성합니
※‘포토갤러리’는 메인 디자인 완성 후 솔루션으로 사진게시판을 연동해야 하는 부분입니다.
하단 메뉴 배경 이미지
하단 메뉴 배경 이미지 회사소개 사진모음 협력사 오시는길 이용약관 개인정보취급방침 전화상담안내 게시판문의 한국어 라인 이미지 中文 라인 이미지 日本語 라인 이미지 해시넷 라인 이미지 타고 라인 이미지 사이트맵 하단 메뉴 배경 이미지
하단 메뉴 배경 이미지
하단 메뉴 배경 이미지 사이트명 : 아사달닷컴 | 회사명 : (주)아사달 | 대표이사 : 서창녕 | 대표전화 : 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 (주)아사달
아사달 AI 챗봇 챗봇