홈페이지를 만들어 보자 (템플릿 -1)
먼저 홈페이지 구도는 ①대문 - ② 메인(프레임) - ③게시판&방명록 식으로 하겠습니다. 그리고 홈페이지의 형태에 따라 각각의 강좌로 나눠서, 총 3개의 탬플릿으로 설명드리도록 하겠습니다.
⊙ 템플릿 1
템플릿1은 일반적으로 처음 홈페이지 만드는 분들이 간단하게 따라할 수 있을 정도로 만들어 보도록 하겠습니다.
형태 : 대문 - 메인(2분할) - 게시판&방명록
1. 대문 만들기
가끔씩 질답게시판에 이런 질문이 올라옵니다...... "태그 초보인데요... 홈페이지 대문은 어케 만드나요? -_-a" 이럴때마다 답변 해주기가 참 난해합니다.. 대문을 어케 만들다니... 걍 html 로 만들면 되는데..... -_-;; 대문이란...하나의 홈페이지의 입구를 말합니다. 즉, index.html 파일인거죠. 말 그대로 우리가 집에 들어갈때..꼭 대문을 거쳐서 들어가야 하는 거처럼(열쇠 잃어버렸을땐 창문을 통해 가곤하지만......ㅡㅡ; ) 홈페이지에 접속했을때 처음 뜨는 화면을 말합니다. 일반적으로 기업홈페이지나 단체홈페이지 같은 경우는 대문을 만들어 주지 않지만....개인홈페이지에서는 운영자의 맘에 따라 만들어 지는 경우가 많습니다. 솔직히 제 개인적인 생각으로는 개인홈페이지라도 대문은 만들어 주지 않는게 좋다고 봅니다.. 있는거랑 없는 거랑 각기 장단점이 있겠지만... 한번에 접속할거 두번에 접속할려면........ 조금 그러죠? ^^;
자..이제 만들어 보도록 하겠습니다. 메모장을 다 꺼내세요 ^^ 메모장 꺼내실 줄 알죠? ^^; 행여나 모르시는 분들은 [시작] - [프로그램] - [보조프로그램] - [메모장] 일케 하시면 메모장이 나옵니다.
메모장이 나오면 아래와 같이 기본 html 틀을 적어 넣구요... 아래 몬지는 아시겠죠? ^^
메모장으로 홈페이지를 만들땐 항상 이런 상태에서 만들기 시작합니다.
대문은 간단하게 테이블에 이미지와 링크를 이용해서 만들어 보도록 하죠..^^
테이블이랑 이미지 태그/링크태그는 할 줄 아시져? 모르신다면...어여 태그매니아 html강좌를 보고 오시길....ㅡㅡ+
홈페이지 만들기 전에 제일 먼저 하실 일은 만든 웹페이지를 저장할 디렉토리를 만들어 주는 것입니다. 아무 공간에나
home 이란 폴더를 하나 만드세요. 그리고 home 폴더 안에 다시 img 란 폴더를 만드시기 바랍니다. 이제부터 만들어지는 홈페이지 파일은 모두 home 디렉토리에 저장을 하세요..그리고 이미지 파일의 경우는 home 폴더 안의 img 폴더에 저장하셔야 합니다. ^^이제 시작을 해볼까요? ^^
아래는 간단한 이미지와 링크를 이용해서 대문을 만들어 본것입니다. [여기]☜를 클릭하면 실제 웹에서의 출력상태를 볼 수 있습니다.
| <html> <head><title>재원이의 SES 홈페이지</title></head> <body> <table border="0" width="100%" height="100%"> <tr> <td align="center" valign="center"> <img border="0" src="img/ses.jpg" width="383" height="379"><br><br> 재원이의 S.E.S 홈페이지<br> <a href="main.htm" target="_self">들어가기</a> </td> </tr> </table> </body> </html> |
위에 소스에서 주의할 점은 table 태그에서 가로세로 표의 크기를 설정해줄 때에.. 값을 절대값이 아닌 상대값 즉, %(백분율)값으로 잡아줬다는 것입니다. 보통 테이블이 브라우저의 크기에 따라 깨지는 현상을 방지하기 위해..절대값(픽셀값)을 많이 주는데 여기선 간단한 이미지 하나이기때문에..오히려 백분율값을 주므로서...브라우저의 크기에 관계없이 항상 같은 위치에 이미지가 나오게 되게 되는거죠.^^
그리고 td 태그에 셀정렬 속성 align="center" valign="center" ☜이녀석을 주었죠? ^^ 이건 표 안의 정렬방식을 설정해주는 것입니다. align="가로정렬위치" valign="세로정렬위치" 이거죠..^^
음...이미지 태그에서 주소는 절대경로가 아닌 상대경로(아직 절대경로와 상대경로를 모르시는 분은 여기☜를 클릭하세요 ㅡㅡ+) 로 해주는 건 기본이죠? ^^ 링크태그의 target 설정은 _self 로 잡아줍니다. 그래야 전체화면에 메인화면이 뜰 수 있답니다.
자~ 대충 대문을 만들어 보았는데요... 이해가 되시는지...-_-a 아마 태그매니아 강좌 열심히 읽어보셨던 분이라면... 제가 이렇게 설명 안드려도 쉽게 만들 수 있을 겁니다.
이제 대문을 만든 웹페이지를 저장을 시켜야 겠죠? ^^ 저장시킬때는 htm 혹은 html 확장자로 저장시켜야 하구요... 대문은 반드시 index.html 로 저장시켜야 합니다. 왜냐하면 브라우저가 어느 홈페이지를 접속해도 가장 먼저 찾는 파일이 index.html 파일입니다. index.html 파일이 없는 경우 에러가 나는 거죠.
그리고 이미지의 경우 따로 img 디렉토리를 만들어서 저장시켜주세요.
대문 다 만드셨나요? ^^ 간단하죠? ^^ 대문이라고 해봤자....별건 없습니다. 물론 플래쉬나 기타 다양한 효과를 첨부시키면.... 좋겠지만...첫화면에 너무 많은 로딩시간이 걸리면... 문제가 되죠... 그럼 다음 페이지에서는 메인을 만들어 보도록 하죠 ^^
신고
"님의 댓글"
이 댓글을 신고하시겠습니까?
