[강좌] 간단한 갠홈 만들기 강좌 ' ^ ' - 인스티즈(instiz) 디자인 카테고리

관심 그만 받기를 설정한 글입니다

* 이 강좌는 Adobe 사의 포토샵과 드림위버를 주로 다루고 있습니다.

(작성자의 프로그램 버전은 포토샵 cc / 드림위버 cs6 입니다)

* 이 강좌는 제로보드 4를 이용한 가장 간단하고 단순한 홈페이지를 만드는 과정을 담고있습니다.

* 이 홈페이지는 원래 나모 웹에디터로 작성하는 게 더 편한데,

나모 웹에디터 버전은 시험 사용 기간이 끝난 관계로... 다음에 가져와서 링크 연결해놓도록 하겠습니다 ^ 0 ^

(그래도 나모 웹에디터랑 드림위버가 별 다른 게 없어서, 나모 웹 에디터로도 잘 따라오실 수 있으실 것 같습니다)

1) 개인 홈페이지 호스팅 하기

일단 개인 홈페이지의 주소를 정해서 호스팅을 해야합니다.

쓰니는 닷홈 (http://dothome.co.kr)을 주로 이용하는 관계로

닷홈의 무료 호스팅을 이용하도록 하겠습니다!

(어느 사이트를 이용해도 과정은 비슷합니다)

[강좌] 간단한 갠홈 만들기 강좌 ' ^ ' | 인스티즈

아이디가 있으시다면 로그인 해주시고, 없으시다면 회원가입 후 로그인 해주세요!

[강좌] 간단한 갠홈 만들기 강좌 ' ^ ' | 인스티즈

로그인 후, 홈페이지의 '웹 호스팅' 탭 메뉴를 눌러 무료 호스팅으로 들어가주세요.

[강좌] 간단한 갠홈 만들기 강좌 ' ^ ' | 인스티즈

저희는 지금 제로보드 4를 이용하는 홈페이지를 만들 것이기 때문에,

제로보드 4를 선택하고 신청하기를 눌러주세요~

(공간만 설치하시면 나중에 직접 bbs/setup.php 들어가서 제로보드 깔아줘야 됩니당...)

그럼 이용 안내가 나올텐데, 동의하신 후에 다음 페이지로 넘어가주세요.

[강좌] 간단한 갠홈 만들기 강좌 ' ^ ' | 인스티즈

그럼 이 페이지가 뜰텐데,

FTP는 홈페이지 서버 관리할 아이디고,

그 밑에 제로보드 설정 정보에 있는 아이디와 비밀번호가 홈페이지의 실질적인 주인 아이디가 되는 거랍니다.

[강좌] 간단한 갠홈 만들기 강좌 ' ^ ' | 인스티즈

요로코롬 작성해주시면 됩니다!

ftp아이디, 제로보드 아이디 꼭 기억해주세요!

그리고 인증코드 발송을 누르면 입력하셨던 이메일로 인증코드가 옵니다.

캡쳐가 짤려서... 인증코드 발송 버튼 누르면 빈칸 뜹니다!

거기에 메일로 온 거 입력해주시면 돼요.

(보통 1~2분 소요되는 것 같더라구요!)

[강좌] 간단한 갠홈 만들기 강좌 ' ^ ' | 인스티즈

그러면 호스팅이 완료되었습니다!

이제 http://홈페이지 이름.dothome.co.kr 로 들어가면 자신의 홈페이지가 오픈된 걸 확인할 수 있습니다.

* 주소는 자신이 이용한 호스팅 사이트에 따라 달라질 수 있습니다.

이제 홈페이지를 디자인하러 가볼까요~

2) 홈페이지 디자인 분할해서 알 FTP로 서버에 올리기

포토샵을 열어 컨트롤+N 을 눌러주세요!

[강좌] 간단한 갠홈 만들기 강좌 ' ^ ' | 인스티즈

개인이 알아서 폭, 높이, 해상도 잡아주시고 확인 눌러주세요~

(사실 크기는 어떻게 해도 상관없지만 1024*768이 제일 도식화 되어 있습니다.

때문에 글쓴이는 1024*768 / 해상도 150 으로 잡고 시작하겠습니다!)

[강좌] 간단한 갠홈 만들기 강좌 ' ^ ' | 인스티즈

저는 이렇게 심플하게 디자인 했습니다!

(메뉴는 굳이 저렇게 텍스트로 쓰지 않고 도형으로 잡아줘도 상관없습니다)

이제 이 홈페이지 디자인을, 슬라이스 툴로 나눠서 알FTP로 옮겨줄 거예요.

[강좌] 간단한 갠홈 만들기 강좌 ' ^ ' | 인스티즈

빨간 원이 있는 곳을 꾹 누르면 슬라이스 툴 / 분할 영역 도구 라고 쓰여진 툴이 나타날 거예요!

툴을 위 사진처럼 바꿔주세요

[강좌] 간단한 갠홈 만들기 강좌 ' ^ ' | 인스티즈

그리고 작업 영역을 이렇게 3등분 해주세요!

(원래는 메뉴별로 가이드선 놓고 잘라야하는데

우리는 지금 제일 간단한 홈페이지를 만들고 있으니까 이렇게 잘라줄게요 ^0^;)

슬라이스 영역 겹치지 않도록 아주 딱딱 맞아 떨어지게 잘라주시는 편이 좋습니당!

그리고 알트 + 쉬프트 + 컨트롤 + S 눌러주세요~

Save for web 혹은 웹용으로 저장이라는 창이 뜰거예요!

[강좌] 간단한 갠홈 만들기 강좌 ' ^ ' | 인스티즈

오른쪽 상단의 설정을 이렇게 맞춰주시고 '완료'가 아닌 '저장' 눌러주세요~

그리고 형식을 이미지 전용으로 해두고 배경화면에 그냥 저장해주세요~

따로 폴더가 없어도 images 라는 폴더가 자동으로 만들어집니다~

그리고 폴더에 들어가서 저장된 파일들의 이름 바꿔줄게요~

[강좌] 간단한 갠홈 만들기 강좌 ' ^ ' | 인스티즈

상단에 있던 아이는 head.jpg

[강좌] 간단한 갠홈 만들기 강좌 ' ^ ' | 인스티즈

중간에 있던 아이는 back.jpg

[강좌] 간단한 갠홈 만들기 강좌 ' ^ ' | 인스티즈

하단에 있던 아이는 foot.jpg

라고 이름 바꿔주세요~

그리고 '알 FTP 다운로드' 라고 초록창에 검색하시면,

알 FTP의 구버전을 올려놓은 블로그들이 있을 겁니다!

알 FTP를 다운받아서 실행시켜주세요~

맨처음에 뜨는 접속할 사이트 선택하라는 창은 무시하고 닫아주세요.

[강좌] 간단한 갠홈 만들기 강좌 ' ^ ' | 인스티즈

그 후 저 사각형이 있는 접속하기 눌러주세요.

[강좌] 간단한 갠홈 만들기 강좌 ' ^ ' | 인스티즈

그 후 칸들을 아까 호스팅 하실 때 적었던대로 작성해주세요!

사용자 ID / 비밀번호는 아까 호스팅 할 때 FTP 아이디 / FTP 비밀번호라고 작성하셨던 부분입니다.

그리고 확인 눌러주시면 서버에 접속되면서

[강좌] 간단한 갠홈 만들기 강좌 ' ^ ' | 인스티즈

빨간 네모에 html 폴더가 뜨는 걸 확인하실 수 있습니다!

폴더 안으로 들어가주세요~

[강좌] 간단한 갠홈 만들기 강좌 ' ^ ' | 인스티즈

setup-finish.html 파일을 과감하게 지워주세요~

인덱스 페이지를 저희가 새롭게 작성할 거니까요~

또, bbs 폴더를 오른쪽 클릭하고 권한 변경을 눌러주세요.

[강좌] 간단한 갠홈 만들기 강좌 ' ^ ' | 인스티즈

가운데가 아마 체크 해제가 돼 있을 거예요.

전부 체크해주세요~

그 후, 아까 만들었던 홈페이지의 디자인을 3개로 분할한 이미지들 넣어주세요!

( head.jpg / back.jpg / foot.jpg )

[강좌] 간단한 갠홈 만들기 강좌 ' ^ ' | 인스티즈

이렇게 되면 올라간거예요!

이제 http://홈페이지 이름.dothome.co.kr/올린파일 이름 으로 가면 이미지를 확인할 수 있습니다

ex ) http://hiinstiz.dothome.co.kr/head.jpg

3) 홈페이지의 그룹 만들고 게시판 구축하기

먼저 홈페이지 게시판을 꾸며줄 스킨들을 다운받아서 알FTP를 이용해

서버로 옮기도록 하겠습니당.

자신의 필요 용도에 맞는 스킨을 다운받아주세요.

스킨 공유해주시는 분들의 개인 홈페이지 입니다.

http://boushe.net/ 부슈님

http://inisland.tistory.com/ 잭JACK님

http://mouche6.blog.me/ 키마님

http://blog.naver.com/dolce_94 부기님

http://zb0922.tistory.com/ 아보카토님

그 후 알 FTP의 html폴더-bbs폴더-skin폴더 안에 다운 받은 스킨들을 폴더 통째로 올려주세요!

[강좌] 간단한 갠홈 만들기 강좌 ' ^ ' | 인스티즈

전 이렇게 올려주었습니다~

이제 본격적으로 홈페이지의 게시판을 만들어줄게요!

http://홈페이지 이름.dothome.co.kr/bbs/admin.php 로 들어가주세요.

[강좌] 간단한 갠홈 만들기 강좌 ' ^ ' | 인스티즈

호스팅할 때 기입했던 내용으로 로그인 해주세요.

[강좌] 간단한 갠홈 만들기 강좌 ' ^ ' | 인스티즈

이 빨간 네모에 있는 정보를 입력해주시면 됩니다!

저같은 경우는 홈 이름과 제로보드 관리자 이름이 동일하니 똑같이 적으면 되겠죠?

[강좌] 간단한 갠홈 만들기 강좌 ' ^ ' | 인스티즈

로그인 직후에 나타나는 사이트의 일부입니다.

새 그룹 추가를 눌러주세요~

[강좌] 간단한 갠홈 만들기 강좌 ' ^ ' | 인스티즈

그룹 이름은 직접 지정해서 지어주시고,

게시판 상단과 하단에 불러올 파일은 저렇게 작성해주세요!

그리고 확인 버튼 눌러주세요.

[강좌] 간단한 갠홈 만들기 강좌 ' ^ ' | 인스티즈

이렇게 나오면 그룹 생성이 완료된 것 입니다.

저는 이름이 1 (2)로 출력되는데, 아마 처음 만드는 그룹일 땐 그룹이름 (1) 이라고 출력될 거예요.

제가 원래 있던 그룹 하나 삭제하고 새로 만든 거라서 이름 다른거니 잘못된 거라고 걱정하지 마시고

게시판을 만들어 보도록 하겠습니다~

web board 밑의 추가 눌러주세요!

[강좌] 간단한 갠홈 만들기 강좌 ' ^ ' | 인스티즈

이 화면이 나타날 거예요!

게시판 이름을 지정해주세요.

게시판 이름은 복잡하게 하시는 거보단 간단하게 하는 게 나중에 링크 달아줄 때 좋습니다!

스킨은 아까 다운 받았던 스킨 중 '게시판' 형태로 제작된 스킨을 이용하도록 하겠습니다.

배경 색상은 디자인 하실 때 잡았던 포인트 색상이나, 하고싶은 색 코드 잡아서 입력해주세요.

(기본은 화이트로 되어 있습니다.)

게시판 가로 크기는 게시판을 얼마나 넓게 쓸지 결정하는 건데, 50~70 정도가 가장 어울리고 예쁜 것 같더라구요.

[강좌] 간단한 갠홈 만들기 강좌 ' ^ ' | 인스티즈

스크롤 내려보시면 추가 기능을 설정할 수도 있습니다.

전체 목록 출력 = 인스티즈 처럼 글 밑에 글 목록을 표시할지에 대한 여부입니다.

저는 기본으로 설정되어 있는 기능에서 '카테고리 기능사용'만 추가해주었어요.

설정 완료되셨으면 확인 눌러주세요~

[강좌] 간단한 갠홈 만들기 강좌 ' ^ ' | 인스티즈

게시판 관리 창에서 미리보기를 눌러보면 이렇게 게시판이 만들어진 것을 확인하실 수 있습니다.

게시판 관리창에서 권한 설정을 눌러 게시판 이용 권한을 변경해주세요.

[강좌] 간단한 갠홈 만들기 강좌 ' ^ ' | 인스티즈

레벨 1이 홈페이지 마스터 / 레벨 10이 비회원인 것이 기본으로 되어있습니다!

간단한 답글 쓰기 권한 = 댓글 쓸 수 있는 권한 입니다.

카테고리도 게시판 관리 창에서 수정하실 수 있습니다~

나머지 필요하신 게시판도 같은 방식으로 만들어주세요!

* 방명록 게시판 같은 경우는 게시판 만들 때 스킨 형식 설정을 '방명록 형식'으로 체크해주셔야 아래와 같이 출력됩니다.

[강좌] 간단한 갠홈 만들기 강좌 ' ^ ' | 인스티즈

4) 드림위버 작업 시작

드림위버를 오픈 하셨다면,

[강좌] 간단한 갠홈 만들기 강좌 ' ^ ' | 인스티즈

빨간 네모에 있는 새로 만들기 - HTML 을 선택해주세요!

빈 칸이 열렸을 거예요.

[강좌] 간단한 갠홈 만들기 강좌 ' ^ ' | 인스티즈

이 곳에서 오른쪽 메뉴에 삽입 - 일반 - 표를 눌러주세요.

영문 버전으로는 아마 표가 '테이블' 이라고 돼 있을 거예요~

[강좌] 간단한 갠홈 만들기 강좌 ' ^ ' | 인스티즈

그럼 표폭을 제외한 나머지 칸을 이렇게 작성해주세요.

표 폭은 아까 본인이 디자인 했던 픽셀만큼 잡아주시면 됩니다!

[강좌] 간단한 갠홈 만들기 강좌 ' ^ ' | 인스티즈

테이블이 생성되고 나서 테이블 끝 부분으로 마우스를 가져가면 커서 모양이 바뀌는데,

그 때 클릭해서 테이블을 가운데로 정렬해주세요!

그 후 테이블의 첫 번째 칸을 눌러주시면 커서가 글씨 입력하는 것처럼 깜빡깜빡할텐데요,

[강좌] 간단한 갠홈 만들기 강좌 ' ^ ' | 인스티즈

오른쪽의 메뉴를 내려 삽입 - 일반 - 이미지 를 눌러주세요

[강좌] 간단한 갠홈 만들기 강좌 ' ^ ' | 인스티즈

그럼 이미지를 컴퓨터에서 찾아서 올리지 마시고,

URL으로 아까 서버에 올려줬던 이미지를 가져올게요.

http://홈페이지 이름.dothome.co.kr/head.jpg 를 입력해주세요.

ex) http://hiinstiz.dothome.co.kr/head.jpg

그리고 확인을 누르면 그림 설명을 추가하라는 창이 뜰텐데, 그냥 무시하고 확인 눌러주세요~

[강좌] 간단한 갠홈 만들기 강좌 ' ^ ' | 인스티즈

이미지가 들어온 걸 확인할 수 있습니다!

그럼 테이블 가운데는 가만히 두시고 하단 부분도 마찬가지로

http://홈페이지 이름.dothome.co.kr/foot.jpg 를 입력해서 이미지 삽입해주세요~

[강좌] 간단한 갠홈 만들기 강좌 ' ^ ' | 인스티즈

이렇게 됐으면 이제 드림위버 왼쪽 상단에 코드 / 분할 / 디자인 이라고 쓰여진 곳에서 분할을 눌러주세요

[강좌] 간단한 갠홈 만들기 강좌 ' ^ ' | 인스티즈

왼쪽에 아마 코드들이 막 쓰여져 있을 거예요~

[강좌] 간단한 갠홈 만들기 강좌 ' ^ ' | 인스티즈

이 화면에서 굵은 글씨로 된 <td> </td> 를

<td width="1024" background="http://홈페이지 이름.dothome.co.kr/back.jpg"> 로 바꿔주세요.

(1024는 본인이 작업한 디자인 가로 폭으로 조절 가능합니다)

저같은경우는 이렇게 되었습니다.

[강좌] 간단한 갠홈 만들기 강좌 ' ^ ' | 인스티즈

이제 오른쪽 작업영역에서 오른쪽 클릭을 해 페이지 속성을 클릭해주세요.

[강좌] 간단한 갠홈 만들기 강좌 ' ^ ' | 인스티즈

이렇게 스타일 시트 창이 출력되면, 공지사항 (인덱스)를 작성할 글씨체와 글꼴 크기, 텍스트 색상까지 지정해주세요.

배경색은 아까 게시판 추가할 때 배경 색상으로 지정해줬던 색으로 해주시면 됩니다.

(한국 글씨체는 옆에 삼각형 모양 누르면 나오는 글꼴 목록 편집에서 직접 불러온 후 지정해주셔야 합니다~)

확인 누르고 나오셔서, 이제 스크롤바의 색상을 지정해줄게요!

scrollbar-3dlight-color:#색상코드;
scrollbar-arrow-color:#FFFFFF;
bar-track-color:#FFFFFF;
rollbar-darkshadow-color:#색상코드;
scrollbar-face-color:#색상코드;
scrollbar-highlight-color:#색상코드;
scrollbar-shadow-color:#색상코드;

색상코드는 원하는 색을 넣어주시되 두 번째, 세 번째는 FFFFFF (흰색) 으로 하는 것이 예쁘더라구요!

물론 바꿔주셔도 무방합니다~

아무튼 저 색상코드를 복사하셔서

[강좌] 간단한 갠홈 만들기 강좌 ' ^ ' | 인스티즈

( 그 과정에서 html 위의 잡다한 코드들을 삭제해주고 html을 맨 위로 올려주었습니다~)

좀 더 편한 진행을 위해 다시 디자인 탭으로 돌아올게요~

이제 홈페이지 인덱스와 각각의 게시판들 링크를 걸어줄 거예요.

메뉴가 써진 이미지를 클릭해주세요.

[강좌] 간단한 갠홈 만들기 강좌 ' ^ ' | 인스티즈

이렇게 선택이 된 후에 왼쪽 드림위버 하단에 보면 '속성' 이라는 메뉴가 있을 거예요!

[강좌] 간단한 갠홈 만들기 강좌 ' ^ ' | 인스티즈

이 속성에서 맵이라는 곳을 보시면, 사각형, 원, 다각형이 있는데, 사각형을 클릭해주세요!

[강좌] 간단한 갠홈 만들기 강좌 ' ^ ' | 인스티즈

그리고 그냥 메뉴 만들고 싶은 곳에 드래그로 사각형 그려주시면 됩니당!

아마 그릴 때마다 무슨 창이 뜰텐데, 그냥 무시하고 메뉴 만들고 싶은 곳에 쭉 다 그려주세요!

[강좌] 간단한 갠홈 만들기 강좌 ' ^ ' | 인스티즈

저는 이렇게 해주었어요!

이제 저 메뉴로 만들어진 곳들을 클릭하면 속성 창에 '핫스팟' 이라고 뜰건데,

그 옆에 #이라고 임시링크 걸어진 부분을 지워주고 아까 제로보드 게시판 관리창에서 미리보기로 들어가지던 주소를 넣어주면 되는거죠!

[강좌] 간단한 갠홈 만들기 강좌 ' ^ ' | 인스티즈

주소는 대부분

http://홈페이지 이름.dothome.co.kr/bbs/zboard.php?id=게시판 이름

입니다.

[강좌] 간단한 갠홈 만들기 강좌 ' ^ ' | 인스티즈

이렇게 넣어주면 되는거죠!

코드창으로 넘어와주세요.

[강좌] 간단한 갠홈 만들기 강좌 ' ^ ' | 인스티즈

이렇게 이미지맵에 관한 코드가 또 생성됐을 거예요!

근데 메뉴를 클릭했을 때... 점선이 나타나면... 간zi가 살지 않는 것...

그래서 onfocus='blur()' 를 복사해주세요!

[강좌] 간단한 갠홈 만들기 강좌 ' ^ ' | 인스티즈

이렇게 /메뉴 이름" 과 >사이에 넣어줍니다~

자 이제 대망의 php로 변환하기 입니다!

후욱 후욱... 강좌 첨 써봐서 넘나 어렵고 걱정되는군요...

과연 이해하실 분이 있을지 ㅎㅎ... ㅠㅠㅠㅠㅠ...

넘어렵게 설명해서 죄송합ㄴ다... 진짜 별거 아닌뎃...

나모웹에디터가 시험사용이 끝나섴ㅋㅋㅋㅋㅋㅋ큐ㅠㅠㅠㅠㅠ...

이제 정말 얼마 남지 않았ㅇ어여!!!!!!!!!

메모장도... 켜주시구여!

[강좌] 간단한 갠홈 만들기 강좌 ' ^ ' | 인스티즈

이렇게 다시 분할 창으로 넘어와주세요.

[강좌] 간단한 갠홈 만들기 강좌 ' ^ ' | 인스티즈

여기... 테이블 가운데를 클릭 해주세요!

글씨쓰는 것처럼 커서가 깜빡깜빡 할 거예요~

(하던중에 오류를 하나 발견했는데, 이 과정에서 컨트롤+A 눌러서 가운데 정렬 한 번만 해주세요!)

그리고 분할창을 보면

[강좌] 간단한 갠홈 만들기 강좌 ' ^ ' | 인스티즈

마찬가지로 커서가 깜빡깜빡합니다!

[강좌] 간단한 갠홈 만들기 강좌 ' ^ ' | 인스티즈

그럼 부터 맨 위까지 복사해주세요

메모장에 붙여넣으시고

파일 - 다른이름 저장 을 통해

[강좌] 간단한 갠홈 만들기 강좌 ' ^ ' | 인스티즈

파일 형식을 모든파일로 바꿔주세요!

그리고 파일 이름은 head.php 라고 저장해주세요~

마찬가지로 back.jpg 가 있는 곳부터 마지막까지 복사한 뒤

메모장에서 다른 이름으로 저장을 통해 foot.php 라고 저장해줍니다~

[강좌] 간단한 갠홈 만들기 강좌 ' ^ ' | 인스티즈

그리고 알ftp를 통해 html 폴더 안에 올려줍니다.

[강좌] 간단한 갠홈 만들기 강좌 ' ^ ' | 인스티즈

그리고 드림위버에서 가운데 테이블을 클릭한 후

인덱스로 쓰고싶은 말을 써줍니다!

ex)

[강좌] 간단한 갠홈 만들기 강좌 ' ^ ' | 인스티즈

자 여기까지 하셨다면 이제 지금까지 작업한

드림위버를 컨트롤 + 쉬프트 + S 를 눌러

index.html 로 저장해줍니다~

[강좌] 간단한 갠홈 만들기 강좌 ' ^ ' | 인스티즈

그리고 index.html 도 마찬가지로 알FTP를 통해

html 폴더 안에 옮겨주세요!

구럼 끝...!

넘힘들군여... 제목은 간단한 갠홈인데 하고보면 전혀 안 간단 8▽8

저도 이렇게 힘든데 여러분은 더 힘드시겠져...?

죄송함다 ㅋㅋ큐ㅠㅠㅠ...

사실 드림위버 처음 써봤ㅇ어여..! 항상 나모만 썼거든요...

아무튼 홈페이지 들어가서 잘 되는지 확인 하시고 오류나면 댓글 달아주시기 바랍ㄴ다!

아는 건 다 대답해드릴게여...