[퍼옴]Tip>카페 대문 만들기

까페 대문만들기에 대한 간단한 예제를 소개해드릴려구 합니다 지금 소개해드릴 내용에는 배경화면이 반복되거나 짤리지 않게 넣는 방법과 간단한 테이블의 사용을 설명드리겠습니다 먼저 소스를 살펴보구 시작할께용 다들 메모장 준비되셨죠 ^^ 예제1)============================================================ <html> <head> <title>까페 대문 만들기</title> </head> <body> <script language="JavaScript"> function makeIm() { NS4=(document.layers); IE4=(document.all); scaleWidth = true; scaleHeight = true; imSRC = "flower.jpg"; if (NS4) { origWidth = innerWidth; origHeight = innerHeight;} function reDo() { if (innerWidth != origWidth || innerHeight != origHeight) location.reload();} if (NS4) onresize = reDo; if (IE4) onresize = reDoIE; function reDoIE(){ imBG.width = document.body.clientWidth; imBG.height = document.body.clientHeight;} winWid = (NS4) ? innerWidth : document.body.clientWidth; winHgt = (NS4) ? innerHeight : document.body.clientHeight; imStr = "<div id=elBGim" + " style='position:absolute;left:0;top:0;z-index:-1'>" + "<img name='imBG' border='0' src="+imSRC; if (scaleWidth) imStr += " width="+winWid; if (scaleHeight) imStr += " height="+winHgt; imStr += "></div>"; document.write(imStr);} makeIm(); </script> &nbsp; &nbsp; <table width="85" border="1" height="403"> <tr> <td><a href=<a href="http://cafe11.daum.net/_c21_/bbs_list?grpid=yQN&fldid=KVV" target=nlink>http://cafe11.daum.net/_c21_/bbs_list?grpid=yQN&fldid=KVV</a>>회원글방</a></td> </tr> <tr> <td><a href=<a href="http://cafe11.daum.net/_c21_/bbs_list?grpid=yQN&fldid=2KJy" target=nlink>http://cafe11.daum.net/_c21_/bbs_list?grpid=yQN&fldid=2KJy</a>>태그강좌</a></td> </tr> <tr> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> </tr> </table> <div id="Layer1" style="position:absolute; left:490px; top:97px; width:237px; height:284px; z-index:1"> &nbsp; ⊙공지사항⊙ 한줄짜리 질문은 한줄짜리 답변을 부릅니다 </div> <div id="Layer1" style="position:absolute; left:216px; top:97px; width:254px; height:284px; z-index:1"> &nbsp; 안녕하세요 잘나가는 홈페이지를 만들자에 오신 것을 환영합니다 ^^ 즐건 하루 되세용 꾸벅 ()_() (^_^) 언제나 웃는 토끼 노들이가 </div> </body> </html> ============================================================== 확인) <a href="http://myhome.naver.com/nodri/exfile/cafe.html" target=nlink>http://myhome.naver.com/nodri/exfile/cafe.html</a> 하나씩 설명드릴께용 -------------------------------------- <html> <head> <title>까페 대문 만들기</title> </head> -------------------------------------- 이 부분은 그동안 설명드린대로 제목을 넣는 부분입니다 그 다음에 나오는 것은 배경화면 반복되지 않고 전체적으로 채우는 소스입니다 --------------------------------------- <script language="JavaScript"> function makeIm() { NS4=(document.layers); IE4=(document.all); scaleWidth = true; scaleHeight = true; imSRC = "flower.jpg"; if (NS4) { origWidth = innerWidth; origHeight = innerHeight;} function reDo() { if (innerWidth != origWidth || innerHeight != origHeight) location.reload();} if (NS4) onresize = reDo; if (IE4) onresize = reDoIE; function reDoIE(){ imBG.width = document.body.clientWidth; imBG.height = document.body.clientHeight;} winWid = (NS4) ? innerWidth : document.body.clientWidth; winHgt = (NS4) ? innerHeight : document.body.clientHeight; imStr = "<div id=elBGim" + " style='position:absolute;left:0;top:0;z-index:-1'>" + "<img name='imBG' border='0' src="+imSRC; if (scaleWidth) imStr += " width="+winWid; if (scaleHeight) imStr += " height="+winHgt; imStr += "></div>"; document.write(imStr);} makeIm(); </script> --------------------------------------- 일단 이 소스는 <body></body> 사이에 넣어주셔야 되구용 대부분 배경화면을 넣을때 <background=그림파일> 이런 식으로 넣는데 그림이 반복되게 나오죵 오늘 설명할 예제에서는 그림하나로 채우는 방법입니다 (단 여기서 주의할 사항은 그림크기가 화면전체크기와 일치하거나 약간 작을 경우에 적용하시구 그렇지 않을 경우에는 비트맵방식의 그림일 경우 그림이 일그러져 보입니다) 다른 부분은 수정할 필요가 없구용 imSRC = "flower.jpg"; 이 부분에서 flower.jpg 만 여러분의 그림파일이름을 넣어주시면 됩니다 자 여기까지는 문제 없으시죠 그럼 다음으로 넘어가서 테이블로 만드는 간단한 메뉴입니다 -------------------------------------- <table width="85" border="1" height="403"> <tr> <td><a href=<a href="http://cafe11.daum.net/_c21_/bbs_list?grpid=yQN&fldid=KVV" target=nlink>http://cafe11.daum.net/_c21_/bbs_list?grpid=yQN&fldid=KVV</a>>회원글방</a></td> </tr> <tr> <td><a href=<a href="http://cafe11.daum.net/_c21_/bbs_list?grpid=yQN&fldid=2KJy" target=nlink>http://cafe11.daum.net/_c21_/bbs_list?grpid=yQN&fldid=2KJy</a>>태그강좌</a></td> </tr> <tr> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> </tr> </table> ------------------------------------------ <table width="85" border="1" height="403"> 테이블 설정을 해주시구 여기선 가로 85픽셀로 해주었구 테이블 테두리가 보이도록 숫자1을 넣어주었구용 세로는 403픽셀로 지정해주었습니다(여러분들의 메뉴에 알맞게 숫자를 적어주세용 %로 넣어주셔두 됩니다) ----------------------- <tr> <td><a href=<a href="http://cafe11.daum.net/_c21_/bbs_list?grpid=yQN&fldid=KVV" target=nlink>http://cafe11.daum.net/_c21_/bbs_list?grpid=yQN&fldid=KVV</a>>회원글방</a></td> </tr> <tr> <td><a href=<a href="http://cafe11.daum.net/_c21_/bbs_list?grpid=yQN&fldid=2KJy" target=nlink>http://cafe11.daum.net/_c21_/bbs_list?grpid=yQN&fldid=2KJy</a>>태그강좌</a></td> </tr> ----------------------- <tr></tr> 은 행(줄 또는 세로)을 말하구용 <td></td> 는 행안에 들어가는 칸을 말합니다 세칸으로 된 두 줄짜리 테이블을 만드신다면 +++++++++++++++++++++++++++++++++ <tr> <td>그림이나 글씨</td> <td>그림이나 글씨</td> <td>그림이나 글씨</td> </tr> <tr> <td>그림이나 글씨</td> <td>그림이나 글씨</td> <td>그림이나 글씨</td> </tr> +++++++++++++++++++++++++++++++ 이렇게 하면 되겟죵(편의상 띄워서 적었습니당 엔터를 넣으나 안 넣으나 상관없습니다 소스보기 편리하게 만들어주면 나중에 고치기도 수월하겠죵 ^^ 예제1 에서는 한칸으로된 열줄짜리 테이블입니다) 자 다음은 링크를 어떻게 만들까 하는 문제입니다 <td><a href=<a href="http://cafe11.daum.net/_c21_/bbs_list?grpid=yQN&fldid=KVV" target=nlink>http://cafe11.daum.net/_c21_/bbs_list?grpid=yQN&fldid=KVV</a>>회원글방</a></td> 칸 안에 텍스트를 넣어주고 하이퍼링크를 만들었습니다 여기서 <a href="http://cafe11.daum.net/_c21_/bbs_list?grpid=yQN&fldid=KVV" target=nlink>http://cafe11.daum.net/_c21_/bbs_list?grpid=yQN&fldid=KVV</a> 이 부분은 왼쪽 위에 보이는 회원글방에 마우스를 대구 오른쪽 버튼을 누르시면 등록정보라구 있죠 선택하시면 주소가 나오게 됩니다 그럼 링크는 끝(만일 새로운 창이 뜨게 하려면 <a href=주소 target=_blink> 이렇게 하시면 됩니당) 그 다음에 나오는 소스는 레이어로 글씨를 넣어준 겁니다 테이블@축전 게시판에서두 자주 이용되는 것 중에 하나이구용 이것까지 설명드리면 넘 복잡해져서 간단하게 얘기해드리겠습니다 ---------------------------------------------------------- <div id="Layer1" style="position:absolute; left:490px; top:97px; width:237px; height:284px; z-index:1"> &nbsp; ⊙공지사항⊙ 한줄짜리 질문은 한줄짜리 답변을 부릅니다 </div> <div id="Layer1" style="position:absolute; left:216px; top:97px; width:254px; height:284px; z-index:1"> &nbsp; 안녕하세요 6학년2반 카페에 오신 것을 환영합니다 ^^ 즐건 하루 되세요 꾸벅 ()_() (^_^) 언제나 웃는 토끼 노들이가 </div> ------------------------------------------------ <div id="Layer1" style="position:absolute; left:490px; top:97px; width:237px; height:284px; z-index:1"> 여기는 레이어 이름과 위치 가로 세로 높이에 설정이 들어가는 부분입니다 그 아랫부분은 폰트와 쓰고 싶은 글을 적은 부분입니다 솔직히 메모장으로 레이어를 만든다는 것은 어렵구요(만든다구 해두 웹브라우저에서 어떻게 나타나는지 여러번 확인해줘야 될겁니다) 드림위버나 나모 같은 웹에디터로 만드시길 바랍니다 일단 다 만들어진 까페 대문을 자신의 인터넷 계정에 올리시고 만들어진 대문을 까페의 주인백이라는 곳에서 아래의 소스를 사용해서 걸어주게 됩니다 자세한 설명과 주인백에 넣어주는 다른 소스는 태그강좌에 보시면 까페 전체화면 만들기 소스라구 있습니다 참고하시길 바랍니다 ========================================================= <div id="layer3" style="position:absolute; left:0px; top:0px; width:1000px; height:630px; z-index:1; border-width:1px; border-style:none;"> <iframe scrolling="no" frameborder="0" width="1000" height="630" src="만들어진 대문 사이트 주소"></iframe> </div> ========================================================= 자 이상으로 오늘 강좌는 마치도록 하겠습니다 모두들 즐건 하루 되세요 꾸벅 ()_() (^_^) 언제나 웃는 토끼 노들이가 뱀다리 그 외에 자바스크립트를 넣어주거나 하는 것들은 여러분들이 예쁘게 꾸미시길 바랍니다 ^^;;