웹디자인 강의
기타 아이프레임홈제작강의)) 02 . Main.html 파일 수정해보기
2006.01.24 10:27
안녕하세요
지금부터는 아까 포토샵에서 생성된 main.html
파일을 수정해보도록 하겠습니다.
나모:) 우선 Ctrl + O 를 눌러주셔서
포토샵에서 생성된 main.html 파일을 불러오세요
그럼 아래이미지와같이 테이블안에
아까 잘라놓은 이미지들이 쏙쏙 들어가있죠?
그럼 이제 내용이 들어갈 부분을 만들어줘야겠네요
하지만 지금은 글을 쓸수가 없는상태인거져?~!! ㅋ
지금부터 그 강의를 시작하도록하겠습니다.
우선 내용이 들어갈 부분 이미지를 한번 클릭해주신후
오른쪽마우스 ->셀속성 으로 들어가주세요
그다음 셀 너비,셀높이 설정하는부분에서
내용이 들어갈 이미지 사이즈와 똑같이 입력해주세요
만약 내용이 들어갈 부분 이미지사이즈가 400 * 200
이었다면 똑같이 400*200으로 입력해주시면 되겠습니다.
위와 같이 입력하신후 아래
셀배경 설정해주는 부분이 있을거에요
그러면 그 부분에도 마찬가지로 내용이 들어갈 이미지를
넣어주시면 되겠습니다.
이렇게 내용이 들어갈 이미지를 넣어주세요
그리고 확인 버튼을 누르신후
밖으로 나오셔서 다시 가운데 내용이 들어갈 부분 이미지를
과감히~ 삭제해주세요
어랏?! 삭제했는데 그대로 있네요? !
바로 위에서 적용했던 방법을 이용해서 그런거에요^^
그럼 그 부분에는 글을 쓰실수 있게됩니다.
타이틀이 아이프레임홈페이지인 만큼 아이프레임을 이용해야겠죠?
모두 아래 소스를 복사하셔서 내용이 들어갈 부분에 소스를 입력해주세요
[iframe src="나올 페이지주소" width="100%" height="100%" frameborder=0 marginwidth=0 marginheight=0 name="main"]
[/iframe]
위에 소스를 가져가실땐
반드시!! [ , ] 을 < , >로 바꿔주세요
그럼 위에 소스를 분석해봅시다
width 와 height 는 너비와 높이입니다. 100% 로 지정해주시면
자기가 알아서 그 셀크기에 맞춰 집니다. 그리고 마지막에 보시면
Name 이란게 있는게 가장 중요한부분이죠
네임이 말그대로 이름입니다. 이 아이프레임의 이름이 되는것이죠
타켓을 지정해줄때 이 네임에서 지정해준 main 을
타켓으로 잡아주시면 이 아이프레임안에서 뜨게 되는것입니다.
음.. 나중에 중요성을 알게 될것입니다.
그럼 이제 메뉴에 링크를 시켜주어야 되겠죠?
그럼 지금부터 잘 보시기 바랍니다.
우선 메뉴가 들어간 이미지를 한번 클릭해주세요 (더블클릭말구요)
그다음 마우스오른쪽 버튼 ->그림 ( I ) 로 들어가주세요
그럼 이미지맵이라는 것들이 있을겁니다. 이제 그것을 이용하여
링크를 걸어줄텐데요 여러가지 도형툴이 있죠
거기서 자신의 메뉴에 맞는 툴을 선택하신후
메뉴에 하나하나 각각 드래그하여 줍니다.
드래그함과 동시에 창이 하나뜨는게
그곳에 연결한 페이지 주소를 입력하는 창이 뜨죠?
그럼 이부분에서는 그 메뉴에 불러올 주소를 적습니다.
그리고 아래부분에 대상 프레임이란게 있는게 가장 중요한부분입니다.
위에서 말씀드렸듯이; 대상프레임은
이 내용이 어디서 떠라 라고 지정해주는것입니다.
그럼 답은 당연히 main 이겠죠
위에 아이프레임설정에서 아이프레임의 이름을
main으로 지정해주었으니까요?^^
그럼 이부분에는 주저하지마시고 main 이라고 입력해줍니다.
그다음 확인을 눌러주시면 되겠습니다..
그럼 나머지 메뉴들도 이와같은 방법으로
반복해 주시면 되겠죠?
그다음 미리보기를 눌러서 테스트를 해봅니다.
이것으로 강의는 막을 내립니다.
다음 홈페이지 제작강의는
너무나 쉬운 노프레임이라는 제목으로 돌아오도록하겠습니다.
기대해주세요
!! 모르는것이 있으시면 코멘트나 쪽지날려주세요~
----------- 이미지맵링크시 생기는 파란색 테두리를 없애는 소스
[img src="이미지주소" border="0"] border="0" <- 이 이미지소스에 부분을 추가해주시면됩니다
위와같이 소스를 추가해주셔도 되구요
okoru님의 답변이십니다
<head>에 </head>사이에 아래 소스를 넣어주셔도 됩니다^^
<style type="text/css" media="screen">
img { border: none; }
</style>
okoru 님 감사합니다 ~
[ 강의에 사용된 홈페이지 완성작 : 보러가기 ]
지금부터는 아까 포토샵에서 생성된 main.html
파일을 수정해보도록 하겠습니다.
나모:) 우선 Ctrl + O 를 눌러주셔서
포토샵에서 생성된 main.html 파일을 불러오세요
그럼 아래이미지와같이 테이블안에
아까 잘라놓은 이미지들이 쏙쏙 들어가있죠?
그럼 이제 내용이 들어갈 부분을 만들어줘야겠네요
하지만 지금은 글을 쓸수가 없는상태인거져?~!! ㅋ
지금부터 그 강의를 시작하도록하겠습니다.
우선 내용이 들어갈 부분 이미지를 한번 클릭해주신후
오른쪽마우스 ->셀속성 으로 들어가주세요
그다음 셀 너비,셀높이 설정하는부분에서
내용이 들어갈 이미지 사이즈와 똑같이 입력해주세요
만약 내용이 들어갈 부분 이미지사이즈가 400 * 200
이었다면 똑같이 400*200으로 입력해주시면 되겠습니다.
위와 같이 입력하신후 아래
셀배경 설정해주는 부분이 있을거에요
그러면 그 부분에도 마찬가지로 내용이 들어갈 이미지를
넣어주시면 되겠습니다.
이렇게 내용이 들어갈 이미지를 넣어주세요
그리고 확인 버튼을 누르신후
밖으로 나오셔서 다시 가운데 내용이 들어갈 부분 이미지를
과감히~ 삭제해주세요
어랏?! 삭제했는데 그대로 있네요? !
바로 위에서 적용했던 방법을 이용해서 그런거에요^^
그럼 그 부분에는 글을 쓰실수 있게됩니다.
타이틀이 아이프레임홈페이지인 만큼 아이프레임을 이용해야겠죠?
모두 아래 소스를 복사하셔서 내용이 들어갈 부분에 소스를 입력해주세요
[iframe src="나올 페이지주소" width="100%" height="100%" frameborder=0 marginwidth=0 marginheight=0 name="main"]
[/iframe]
위에 소스를 가져가실땐
반드시!! [ , ] 을 < , >로 바꿔주세요
그럼 위에 소스를 분석해봅시다
width 와 height 는 너비와 높이입니다. 100% 로 지정해주시면
자기가 알아서 그 셀크기에 맞춰 집니다. 그리고 마지막에 보시면
Name 이란게 있는게 가장 중요한부분이죠
네임이 말그대로 이름입니다. 이 아이프레임의 이름이 되는것이죠
타켓을 지정해줄때 이 네임에서 지정해준 main 을
타켓으로 잡아주시면 이 아이프레임안에서 뜨게 되는것입니다.
음.. 나중에 중요성을 알게 될것입니다.
그럼 이제 메뉴에 링크를 시켜주어야 되겠죠?
그럼 지금부터 잘 보시기 바랍니다.
우선 메뉴가 들어간 이미지를 한번 클릭해주세요 (더블클릭말구요)
그다음 마우스오른쪽 버튼 ->그림 ( I ) 로 들어가주세요
그럼 이미지맵이라는 것들이 있을겁니다. 이제 그것을 이용하여
링크를 걸어줄텐데요 여러가지 도형툴이 있죠
거기서 자신의 메뉴에 맞는 툴을 선택하신후
메뉴에 하나하나 각각 드래그하여 줍니다.
드래그함과 동시에 창이 하나뜨는게
그곳에 연결한 페이지 주소를 입력하는 창이 뜨죠?
그럼 이부분에서는 그 메뉴에 불러올 주소를 적습니다.
그리고 아래부분에 대상 프레임이란게 있는게 가장 중요한부분입니다.
위에서 말씀드렸듯이; 대상프레임은
이 내용이 어디서 떠라 라고 지정해주는것입니다.
그럼 답은 당연히 main 이겠죠
위에 아이프레임설정에서 아이프레임의 이름을
main으로 지정해주었으니까요?^^
그럼 이부분에는 주저하지마시고 main 이라고 입력해줍니다.
그다음 확인을 눌러주시면 되겠습니다..
그럼 나머지 메뉴들도 이와같은 방법으로
반복해 주시면 되겠죠?
그다음 미리보기를 눌러서 테스트를 해봅니다.
이것으로 강의는 막을 내립니다.
다음 홈페이지 제작강의는
너무나 쉬운 노프레임이라는 제목으로 돌아오도록하겠습니다.
기대해주세요
!! 모르는것이 있으시면 코멘트나 쪽지날려주세요~
----------- 이미지맵링크시 생기는 파란색 테두리를 없애는 소스
[img src="이미지주소" border="0"] border="0" <- 이 이미지소스에 부분을 추가해주시면됩니다
위와같이 소스를 추가해주셔도 되구요
okoru님의 답변이십니다
<head>에 </head>사이에 아래 소스를 넣어주셔도 됩니다^^
<style type="text/css" media="screen">
img { border: none; }
</style>
okoru 님 감사합니다 ~
[ 강의에 사용된 홈페이지 완성작 : 보러가기 ]
댓글 7
-
surar
2006.04.13 05:14
-
조한철
2007.06.06 20:38
오 엑박 ㅋㅋ ㄳㄳ -
파란
2006.01.24 11:33
굿굿 ~~
추천~!!! -
okoru
2006.01.24 13:25
테두리를 없애는 것은 <img src="이미지 주소" alt="대체텍스트(툴팁으로 뜨는 건 ie 뿐!)" style="border: none" />
또는 <head>에
<style type="text/css" media="screen">
img { border: none; }
</style>
라고 입력하여 CSS로 처리 해 주는 게 훨씬 바람직합니다. -
김태환
2006.01.24 20:10
okoru님 멋지네 -
이지석
2006.01.28 16:41
로그인하게 만드네요.^^
전 html로 처음 홈페이지를 만드는데요 이곳저곳 아이프레임때문에 돌아다녀봤지만 아이프레임에서 대상지정하는
부분에 대해 설명해주는 강좌는 샤르프님강좌밖에 없네요. 게다가 포샾에서 기본디자인 구성하는 법까지~!
어쩌면 제가 못찾은걸수도 있지만..ㅋㅋ
암튼 초보들에 대한 배려가 눈에 띄는 강좌네요!
감사합니다~ -
박지은
2006.02.02 21:32
이지석님의 말씀대로 초보들에 대한 배려가 눈에 확확 띄네요.
너무나 고민하고 있던 문제였는데
감사합니다 ㅠ-ㅠ
눈물이 복받쳐 오르는...
덕분에 쉽게 이해할 수 있었어요