홈페이지 레이아웃여기저기..ㅋ

홈페이지를 제작을 하기위해서는

기본적으로 기획단계에 들어가게 됩니다.

즉, 이 기획단계에서 어떠한 컨텐츠, 메뉴를 담을 것인지.

전반적인 색상및 화면크기등을 구성하게 됩니다.

여기서 Layout 작업은 홈페이지의 전체적인 모습을 그리게 되는 것이죠.

홈피 레이아웃(homepage Layout)이란 ?

이러한 기획이 모든 반영된, 즉, 일종의 템플릿처럼 미리 제작된 홈페이지 파일소스(html 파일 및 이미지파일포함)를 말합니다.

즉, 홈피 레이아웃 소스(Source)파일들은 일부분의 메뉴수정만으로 바로 자신만의 홈페이지를

만들 수 있으며, 또는 자신의 홈페이지 구상에 참조할 수도 있습니다.

★ 사용방법

+ 미리보기 : 이미지를 클릭

+ 소스파일다운 : 압축파일(zip)을 다운받으신후, 자신의 컴퓨터에서 압축해제를 하여,

나모등의 위지윅툴이나, 메모장등의 텍스트 편집기로 소스 수정후 사용하시면 됩니다.

처음 홈페이지를 기획 및 제작하시는 분들에게 유용한 자료가 되리라 봅니다. ^^)/

Bakuse.org의 노프레임 구조

3026_bakuse.zip

PHPMyadmin의 구버전과, MySQL관리툴이 포함되어 있으며, head.php와 foot.php 그리고 main.php가 있습니다.
홈페이지의 주소를 보이지 않기 위해 index.html파일에서 노프레임 처리를 하였습니다.

기타 제로보드 설정과 다른 설정은 그냥 하지 않았습니다. 적기에는 너무 길어서요..
홈페이지주소 http://www.bakuse.org 를 참고하여 나의 홈페이지에 적용하면 됩니다

제 작 자 : ZipShin (http://www.bakuse.org)

홈피레이아웃11

3025_layout11.zip

노프레임으로 작업하시도록 테이블 작업 되어 있구요
프레임 홈에서 이미지만 쓰고 싶으신 분들은 그렇게 하셔도 좋습니다
메뉴는 하얀 바탕에 있으니 psd파일 없이도 수정 가능하구요
링크는 이미지맵으로 하시면 되겠습니다

개인홈을 만드실 때는 얼마든지 수정해서 쓰시구요
재배포는 당연히 안되겠죠
질문은 홈에서 해 주시면 답변 드리겠습니다
더 많은 레이아웃 보고 싶으신 분들은 홈에 올려져 있으니 받아 가세요
예쁜 홈 만드시는데 조금이나마 보탬이 되었으면 좋겠습니다
예쁘게 쓰세요

** header파일과 footer파일 따로 저장해서 수정했습니다
모르시는 분들은 다시 다운 받으세요

제 작 자 : 워니 (http://bgarden.com/)

반지의 제왕 레이아웃 제 1탄-Arwen

3024_lay4.zip

제작자 : 미르 (http://purine5.nayana.org)

은비가 내리는 나라

3023_lay3.zip

심심할 때 끄적여서 만든 레이아웃입니다.
용량도 별로 크지 않고요.

아주 간단한 레이아웃 입니다.
따로 웹툴이 없어도
notepad를 이용해서 수정하셔도 되요

처음에, eunbi.htm 여서 보시면 되고요.,

메뉴는 eunbi.htm열어서 수정,
내용란은 content.htm입니다

미르 (http://purine5.nayana.org)

[DIARY 버젼] 레이아웃

3019_layout_8_diary.zip

압축을 푸신후

home 폴더를 제로보드 폴더안에 넣으시고
예)zboard/home

상단에 불러올파일 : home/head.html
하단에 불러올파일 : home/foot.html

하시면 됩니다 ^^*

질문은 홈으로 와서 해주세요.. 쪽지로 하시는데.. ^^ 같은 질문을 가진 사람들을 위해

홈으로 오셔서 하시면.. 감사하겠습니다.

제작자 : 유재민

홈페이지 레이아웃 5종류

3018_home.zip

여러분들이 힘들게 제로보드는 설치하시고도
정작 홈페이지에 삽입하려면 무척 힘들어 하시는것을 생각하여, 아주 간단히 레이아웃을 만들어 보았습니다.

위 압축파일중 예로 ex.html을 보면
[여기에 게시판이 뜨게 하려고 합니다.] 바로 이 글씨 써있는 바로 앞부분부터 맨위까지 쭈욱 드래그 하여
<html>까지 복사한것을, 메모장에 붙혀놓고 head.html로 저장 했습니다.

또,
[여기에 게시판이 뜨게 하려고 합니다.] 바로 이 글씨가 써있는 바로 뒷부분부터 맨아래까지 쭈욱 드래그 하여
</html>까지 복사한것을, 메모장에 붙혀놓고,foot.html로 저장 했습니다.

★★★★ 여기서 아주 중요한것은!!!! ★★★★

head.html 과 foot.html을 저장시에, 이미지나 플래시 동영상등 html확장자가 아닌 그외에 것들은
모두 상위폴더표시를 해주어야 합니다.
그래서 소스중에 css, gif, jpg 확장자앞에
[../화일이름] 표시를 해주거나 절대경로로 [http://www.yeoyoo.com/화일이름] 으로 써 주어야 합니다.
만약,css, gif, jpg 이 세가지 화일을 img라는 폴더에 넣었다면
[../img/화일이름]으로 표시를 해주거나 절대경로로 [http://www.yeoyoo.com/img/화일이름] 으로 써 주어야 합니다.
(절대경로는 로딩이 조금 느린데,이미지가 정 안뜨면 그냥 절대경로로 쓰세여.)

그래서,여기 올려드린 head.html 과 foot.html안에 파일경로를 보면
HREF=../yeoja.css img src="../logo.jpg 이런식으로 모두 미리 써 놨습니다.
(이미지를 index가 있는 위치에 올렸을경우)

그럼 이 head.html 과 foot.html을 시험해 보기위해
menu.gif, banner.gif, logo.jpg, head.html, foot.html을 index가 있는 위치에 FTP로 올려 놓으세여.
(ex.html은 올리지마세여. 님에게 설명하는 파일이어여.)

그리고는,게시판 관리에
[게시판 상단에 출력할 파일]난에 ../head.html 이라 쓰고,
[게시판 하단에 출력할 파일]난에 ../foot.html 이라 쓰고 confirm!하세여.

이제 확인해 보세여.
게시판 관리에서 미리보기 View를 하시면 되여.
어때여? 잘 뜨시나여?
만약, 뭔가 안뜨는것이 있어 수정하려면 꼭 메모장이나 에디터플러스로 열어 수정하세여.
절대루 나모나 드림위버에서 수정하지 말라는 이야기지여.

여기까지 잘되어 잘뜬다면
이제 님의것으로 만들어 보세여. 가능하면 기존 테이블은 그대로 놔두신채
그안에 이미지나,플래시,메뉴등등 예쁘게 꾸며보시라는거죠.
단, 님이 삽입하신 화일들의 경로에 맞게 화일들을 올리시구여.

압축화일속엔
1. 왼쪽에 메뉴있는것==ex.html
2. 왼쪽에 메뉴가 있는상태로 아이프레임으로 넣기(이건 [게시판 상,하단에 출력할 파일]을 사용안해여.)==iframe.html
3. 테이블을 상,중,하 로 나눠 가운데에 게시판 넣기==middle.html
4. 테이블을 상,하로 나눠 아래부분에 게시판 넣기==bottom.html
5. 상,하 프레임으로 나눠 아래프레임에 왼쪽에 메뉴있는것(이것두 [게시판 상,하단에 출력할 파일]을 사용안해여.)
==frametop.html+게시판주소=frame.html
이렇게 5개의 화일을 넣었으니 필요한것을 선택하여 수정해 쓰세여.
(1번 외엔 head와 foot은 안 만들었으니 위 설명대로 만들어 쓰세여.)
=====압축화일 속에 설명화일도 넣었어여.=====

제작자 : 여어자 http://www.yeoyoo.com/

Destiny 레이아웃 #1

3017_layout.zip

메인메뉴 8개 서브메뉴 무한대(?)
포샵 실력에 따라 이쁘게 만들수도 걸레같이 버릴수도 있을듯
좌측에 있는게 싫다 싶으시면 body 시작할때 센터주시고 로그인 없애버리세요
젤첨에 시작하는 레이어 지우면 됩니다

제작자: Destiny http://destiny81.pe.kr/

[GRAY 버젼] 레이아웃

3016_Gray_layout.zip

몇일만에 레이아웃하나 들고 옵니다 ^^;

루빈님의 게시판 스켄에 맞게 제작을 하였습니다.
http://www.nzeo.com/bbs/zboard.php?id=cgi_zskins2&select_arrange=headnum&desc=asc&page_num=15&selected=&exec=&sn=off&ss=on&sc=off&category=&keyword=%B7%E7%BA%F3+%C0%D4%C3%BC

압축을 푸시고 home 폴더를 제로보드 폴더 안에 넣으시고 관리자 페이지에서

상단에 들어갈 파일 : home/head.html

하단에 들어갈 파일 : home/foot.html

하시면 됩니다.

home 이란 이름을 변경하실려면 소스안에 home 이라고 되어 있는 부분을 모두 제거 하시면 됩니다.

제작자 : 류재민

[Brown 버젼] 레이아웃

3015_Brown_leyout_6.zip

head.html 파일의 상단과 하단쯤에 로그인 부분을 수정하시고

home 폴더를 제로보드 폴더 안에 넣으시고

상단에 불러올파일 : home/head.html

하단에 불러올파일 : home/foot.html

로 지정하시면 됩니다.

제작자 : 류재민

[NOTE+ 버젼] 레이아웃

3014_note_layout_05.zip

^^;

역시 허접합니다..

이번엔 메뉴를 텍스트로 하지 않고 그림으로 했습니다.

압축을 풀어 보시면 sample.psd 파일을 수정하시면 됩니다.

head.html 파일의 상단과 하단쯤에 로그인 부분을 수정하시고

home 폴더를 제로보드 폴더 안에 넣으시고

상단에 불러올파일 : home/head.html

하단에 불러올파일 : home/foot.html

로 지정하시면 됩니다.

:: 미리보기 게시판에 짧은 답글은 달수 있습니다. (아래의 모든 게시판에도 역시.. 달수 있습니다.)

배너를 이렇게 저렇게 해서 제작했는데.. ^^; 허전한곳이 있으시면.. 달아주세요~~

제작자 : 류재민

영민이의 홈피레이아웃 Ver1

3012_minihome_ver1.zip

제가 버젼1때 사용한 레이아웃이에요...

어떻게 설명을 해야할진 모르겠지만 그냥 이미지거의 사용안하고 만든 노프레임입니다.

텍스트라 메뉴추가 및 삭제가 쉽습니다..

압축풀고 링크 수정만 하시면 됩니다... 위의 이미지는 랜덤으로 바뀝니다..^^

제 홈에도 놀러와 주세요...^^

제작자 : 영민이 http://minihome.pe.kr/

영민이의 홈피레이아웃 Ver2

3013_minihome_ver2.zip

이건 버젼2로 사용했던 거에요..^^;

버젼1과 아주 틀린건 없지만 밑에 엽서처럼 접는선을 넣어서 밑에 다양한 정보를 삽입할수있게 하였습니다. 메뉴추가 및 삭제도 쉽습니다.

저같은경우엔 카운터와 DB사용량, 총회원수 등등을 넣었어요... 이것들에 대한건 팁으로 가시면 찾으실수있으니 따로 올리진 않습니다.. 현재 링크된곳으로 가시면 에러메세지가 많이 뜨는데 그건 파일이 없어서 그렇습니다...^^;

제가 필요치 않다고 생각하여 빼서 올린것이니 상관마시구 수정하셔서 사용하세요..

제 홈에도 놀러와 주세요...^^

제작자 : 영민이 http://minihome.pe.kr/

[NOTE 버젼] 레이아웃

3011_note_noframe_4.zip

다운을 받으시고 압축을 푸시고 안에 보시면 home 폴더가 있습니다.

제로보드 폴더안에 넣으시고

상단에 불러올파일 : home/head.html

하단에 불러올파일 : home/foot.html

이렇게 하시면 됩니다. (노프레임)

제작자 : 류재민

[SUB 버젼] 레이아웃

3010_sub_noframe_3.zip

서브메뉴를 사용한 레이아웃입니다.

메뉴가 많이 쓰이고 두번클릭하여 찾아갈려니.. 막막한 홈페이지 많으시죠?

레이어된 서브메뉴를 사용하여 한번에 찾아가도록.. 메뉴가 많은 홈페이지는 아주 편할것입니다.

엔지오 역시 같죠? 히힛

많이 쓰세요~

참.. 얼마든지 수정하여서 사용할수 있습니다.

궁금하신점은 위의 홈페이지로....

참 서브라는 말이.. sub 맞나요? -.-a

※ 이스킨을 사용하시기전 바꿔야할게 있습니다.

lib.php 파일안에 보시면 (제로보드 사용자의 경우)

topmargin='0' leftmargin='0'

위의 태그를 삭제 해주시면 됩니다. 두군데에 있습니다.

제작자 : 류재민

[TEXT 버젼] 레이아웃

3009_no_frame_2.zip

다운받으시고 압축을 푸신뒤 head.html 를 에이터나 메모장으로 열으셔서

상단의 제로보드 주소와 절대경로를 수정하시면 됩니다.
(노프레임 전용)

제작자 : 류재민

[PDA 버젼] 레이아웃

3008_pda_noframe.zip

PDA 버젼입니다.

게시판하나로만 홈페이지를 운영하실때 이걸로 하시면 그래도.쫌 허전하지 않고 ^^;

파일을 받으셔서 압축을 푸시면..

sample.html 과 sample.pds 파일로 참고 하시구요.

폴더명을 pda로 고치시고 제로보드 디렉토리에 업로드 하시구..

관리자 모드에서 pda/head.html 로 정하시고 pda/foot.html 로 정하시면.. 간단히 해결이 됩니다.

그럼.. 많이 쓰세요~

포토샵을 잘만지지 못해서.. 점 엉성할겁니다. pds 파일을 받으신분은 이쁘게 고치시고 다시 하셔도 됩니다.~

'기타 ♡ > 자료창고 ' 카테고리의 다른 글

Microsoft의 Windows Live Writer (0)	2008.02.20
[정보]홈페이지 자동제작 프로그램 (0)	2008.02.19
유틸직다 와레즈사이트 (0)	2008.02.18
사이트 자동 로그인 프로그램 (0)	2008.02.18
Windows XP 성능 향상 "XP Smoker Pro" v5.4 (0)	2008.02.18

얌베비

홈페이지 레이아웃여기저기..ㅋ

'기타 ♡ > 자료창고 ' 카테고리의 다른 글

티스토리툴바

홈페이지 레이아웃여기저기..ㅋ

'기타 ♡ > 자료창고 ' 카테고리의 다른 글

관련글

티스토리툴바