웹 제작 실습 ( 홈페이지 제작 프로젝트 )정 명 희 교수님

발표자 : 이 동 한-2 조 -

Contents

프로젝트 참여 인원

제작 일정

기획의도 및 목표

제작 기술

밴치 마킹

전체 흐름

레이아웃 및 메뉴구성

내용 및 기능

유지 전략

Q & A

프로젝트 참여 인원이 름 P a r t 비 고

이 동 한세부페이지 링크화 , 추가작업

홈페이지 안정화 및 Application팀 장

김 태 규자료조사 , 세부페이지 작업

세부페이지 링크화 , 추가작업

팀 원

김 균 석자료조사 , 세부페이지 작업 , 전체 틀

작업메뉴 구성 및 레이아웃 설계

최 샛 별

하 호 진

이 재 흔 자료조사 , 세부페이지 작업 , 플래쉬 제작

하 태 현자료조사 , 세부페이지 작업

포토샵 ( 일러스트 )

제작 일정

추

진

일

정

표

번호 주요 작업 내용 추진 일정 ( 주 ) 기

간㈜5(1) 5(2) 5(3) 5(4) 6(1) 6(2)

1홈페이지 주제

및 자료조사3

2메뉴 구성 및

레이아웃 설계1

3웹 페이퍼 1 차 전체 틀 작업

1

4웹 페이퍼 2 차세부페이지 작업

2

5웹 페이퍼 3 차

링크화 , 추가작업2

6홈페이지 안정화

및 Application3

기획의도 및 목표 ( 1/2 ) 기획의도 - 연인들이 가기에 적합한 데이트코스를 추천 .

- 홈페이지 주제는 ‘성공적인 데이트 코스 추천’

- 분위기 있는 음식점의 정보 맛집 , 펜션 등을 소개

하기 위해 데이트 코스를 주제로 결정 .

기획의도 및 목표 ( 2/2 ) 목표

- 연인들의 대표 데이트 명소를 널리 알린다 .

- 시각만으로도 회원들이 마치 여행 온 거 같은 효과를 보여준다 .

- 그 지역들의 주변정보를 통해 데이트코스 계획을 잡을 수 있게 도와준다 .

제 작 기 술

밴 치 마 킹 ( 1/3 )

커플파이(http://couplepie.ktf.com/)

밴 치 마 킹 ( 2/3 ) 장점 - 연인들을 고려한 핑크 빛 홈페이지 - 사이트만의 독특한 로고이미지 - 깔끔하고 세련된 메뉴리스트 - 지역별 , 테마별로 데이트코스를 구분

단점 - 지역의 사진이 별로 없어 시각적인 효과가 없다 . - 게시판을 이용해 자발적인 글들이 대부분이다 .

밴 치 마 킹 ( 3/3 ) 프로젝트 목표 - 전체적인 배색을 신중히 결정한다 . - 부드러운 이미지를 자아내도록 할 것이다 . - 사진들을 이용하여 시각적인 효과를 높인다 . - 다시 방문하고 싶은 홈페이지를 만들 것이다 . - 데이트 코스를 지역 별 , 테마 별로 구분한다 . - 회원들의 편의를 위해 맛집과 펜션 정보 제공 .

전 체 흐 름첫 느낌 : 깔끔하고 여행의 욕구를 돋군다 .

하얀색바탕에 푸른색 녹색 같은 풍경과 자연의 이미지를 형상하는 적절한 배색 설정 .

하이퍼링크로 해당 세부페이지로 들어가는 부분들의 용이함 .

해당지역들의 실제이미지를 통해 텍스트의 단순함을 잘 커버한다 . ( 테이블 태그 이용 )

프레임 : 4 개사용

레이 아웃 ( 1/3 )

MENU

홈페이지 머리글 , 간판

세부 페이지

LOGO

레이 아웃 ( 2/3 )

Frame 1

Frame 2

Frame 3

Frame 4

1 3

레이 아웃 ( 3/3 )메뉴 클릭 시 원하는 지역에

링크된 Frame 4의

세부페이지출력 형식 <table>

<tr> <td> 이미지 </td> </tr> <tr> <td> 내용 </td> </tr> . . .

</table>

스크롤

중

메 뉴 구 성 회원가입 및 관리 지역별 데이트 코스 추천 여행지 추천 맛집 추천 펜션 강력추천 데이트코스 노하우 및 후기 ( 제로보드 사용 )

지역별 페이지 구현

Mouse Click

내 용 및 기 능 ( 1/4 )

Mouse Over

해당 지역 의 데이트 장소들의

세부페이지로 이동

내 용 및 기 능 ( 2/4 ) 세부페이지만의 연결리스트 구현

- 모든 세부페이지들의 링크화 .

- 특정 장소의 페이지에 회원들의 편의를 위해 인근 맛집과 펜션 정보를 링크 .

- 그 장소의 교통편을 동일 페이지에 제공 .

ex) 지역별 -> 데이트장소 -> 인근 맛집 & 펜션 -> 교통편

내 용 및 기 능 ( 3/4 ) 로고와 홈페이지 간판 - Photoshop, Flash, Illustrator 를 적극

활용 . - 독창적인 스타일의 로고와 간판 제작 .

주기능과 내용 - 수업시간의 배운 내용을 기반으로 제작한다 . - 세부내용 page 는 테이블태그를 적극 이용한다 . - 인근의 분위기 있는 음식점이나 맛집 , 그리고

숙박시설의 자세한 내용으로 살을 덧붙인다 .

내 용 및 기 능 ( 4/4 ) 현재 제작중인 로고와 간판

유 지 전 략 ( 1/2 ) 홈페이지 운영

- 사이트에 접속 시 공지사항을 띄운다 .

- 자주 업데이트를 한다 .

- 사진을 많이 사용한다 .

- 회원들의 경험담을 뽑아 Best Of Best 를 뽑는 이벤트를 연다 .

유 지 전 략 ( 2/2 ) 기대 효과

- 많은 연인들이 홈페이지를 이용해 만족스러운 여행데이트를 즐길 수 있다 .

차후 업데이트 내용

- 새로운 데이트코스를 발견하여 정보와 사진을 업데이트 하며 추천코스를 만든다 .

Q & A

Thank You!!