홈페이지 제작과정

 

 

홈페이지를 만들면서 제 개인적인 과정인데 참고하시고

혹시 자신도 개인적인 홈페이지를 만들고 싶으시다면 저처럼 한번 도전해보세요 ㅇ_ㅇ

어려운거 아니에요 ~

 

* HTML 태그지식/홈페이지 제작지식 참고블로그 : 늑대털쓴양 님의 블로그 [클릭]

 

────────────────────────────────────────────────────────────

 

1. 홈페이지 제작 정보 또는 동기(?) 획득 

 ▲ Blade & Soul 이벤트 페이지 [클릭]

위 사이트 외에도 더있지만 위 홈페이지 형식을 계기삼아 통해 게임 클랜(패밀리) 브랜드 사이트[클릭]를 제작하게 됨.

 

▲ 늑대털쓴양 님의 블로그 [클릭]

HTML 태그 지식이 부족할 때 항상 도움받던 블로그

 

 

2. 머릿속에 홈페이지 구도를 구상해내고, 버튼, 배경 등 디자인 제작. 

▲ 클랜(패밀리) 브랜드 사이트[클릭] 배경 제작

 

▲ 내 홈페이지[클릭] 메인부분

 

▼

 

 

▼

 

 

▼

 

 

▲ 그림판 도트 작업(캐릭터만 냅두고 배경 지우기), 배경 투명화 처리

저 그림판 도트작업이 은근 드럽게 힘듬 -.-;;

포토샵 기능 중 자석 올가미로 처리할 수 있으나, 위 그림을 자석 올가미로 처리하면 뭔가 그림이 어색...

 

▲ 버튼 작업물들..

 

 

3. 호스팅 구하기

보통 많은사람들이 닷홈[클릭]을 선호.

하지만 본인은 보통 홈페이지 제작 때 HTML 태그제한이 없고, 홈페이지 HTML 태그를 마음껏 수정할 수 있는 티스토리를 선택.

 

★ 닷홈과 티스토리의 가장 큰 차이라면 티스토리는 사설기업에서 개인적으로 서버를 밀어주기에 트래픽 제한이 전혀없다.

하지만 닷홈은 정해진 트래픽 제한이 있어서 일정용량 한도를 넘기면 그날 당일은 홈페이지 접속불가.

(하지만 닷홈은 일정 돈을 낼 경우 트래픽을 증가시킬 수 있다. 무료버전 호스팅일 경우 200MB가 하루 제한량이다.)

 

 

(부가작업) 게시판 호스팅(닷홈) 설치 / 게시판 서버에 게시판 스킨관련 파일 담기.

게시판 서비스를 제공하는 곳은 대표적으로 그누보드와 제로보드가 있는데 전 그누보드를 사용했습니다.

(닷홈 같은 경우는 그누보드, 제로보드 등 게시판 기판이 깔려있는 호스팅을 희망 시 제공해줌.)

 

▲ 내 호스팅 서버에 게시판과 관련된 스킨파일 등 파일 업로드 !

★ 홈페이지에 게시판 설치방법 [클릭]

 

 

4. 태그작성 & 버튼 등 그림과 HTML 파일 업로드 하기

* 4번 과정은 내 개인 홈페이지[클릭] 제작 중심 경험

▲ 필자같은 경우는 티스토리를 개조하고 호스팅 대용으로 쓰기에 메인(Home)은 이렇게 티스토리 HTML 편집기로 작성하고

 

▲ 자유게시판 등 나머지 메뉴부분은 EditPlus 프로그램에서 태그 작성 후, HTML 문서로 저장.

(EditPlus 프로그램이 없을 경우 메모장으로 작성 후, 제목 끝에 .html을 붙이면 HTML 확장자로 저장됨.)

★ 메모장과 EditPlus 프로그램의 차이점 EditPlus는 작성된 태그를 미리보기로 확인이 가능하단 점이다.

 

 ▲ 홈페이지 편집에 쓸 버튼그림, HTML 문서(자유게시판, Hello World, KCM 이야기 등 게시판)를 이렇게 업로드 했습니다.

버튼을 눌러서 게시판 이동 때 버튼에 하이퍼링크를 적용 시

하이퍼링크 전 HTML 파일(메뉴버튼에 하이퍼링크 미적용)을 하나만 업로드를 업로드 했다 했을 때,

 

 

http://cfs.tistory.com/custom/blog/165/1651197/skin/images/은 고정된 업로드 고유주소고, [HTML]자유게시판.html는 파일 명이므로

하이퍼링크 주소에 http://cfs.tistory.com/custom/blog/165/1651197/skin/images/HTML파일이름.html 이렇게

모든 HTML 문서의 버튼 하이퍼링크에 미리 작성 후 하이퍼링크가 적용된 파일을 업로드 해줘야 합니다.

 

[주의사항]

① 파일명에는 꼭 마지막에 확장자(.html 혹은 .htm)도 작성해야 합니다.

② 간혹 확장자가 html이 아닌 htm 으로 표기될 수 있으니 확장자 잘 확인하세요. 

   

★ [참고] 위 4번방법은 티스토리를 호스팅으로 했을경우 입니다.

만약 닷홈[클릭]과 같은 호스팅 제공 사이트로 통해 하실거라면 여기를 참고하세요.

 

 

5. 완성

▲ 카운터 스트라이크 온라인 패밀리(클랜) 브랜드 사이트 [클릭]
 

▲ 내 개인 홈페이지 [클릭]

 

 

사람마다 차이는 있겠지만 전 이렇게 만든답니다 :)