메뉴 건너뛰기

XE : Xpress Engine




웹디자인 강의

안녕하세요
지금부터는 아까 포토샵에서 생성된 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 님  감사합니다 ~





[ 강의에 사용된 홈페이지 완성작  :  보러가기 ]
번호 제목 글쓴이 날짜 조회 수
공지 공지 강좌를 올리기전 공지사항을 읽어주세요 [12] Eccen 2004.12.15 48035
2095 포토샵 7.0 - 문자 , 그림뒤에 네온효과 만들기, [2] file 한솔v 2006.01.25 12638
» 아이프레임홈제작강의)) 02 . Main.html 파일 수정해보기 [7] 〃샤르프〃 2006.01.24 6311
2093 아이프레임홈제작강의)) 01 . 기본디자인 구성하기 〃샤르프〃 2006.01.24 4389
2092 포토삽 7.0 초간편 홈페이지 만들기 [1] 이재희 2006.01.22 10080
2091 [동영상강좌]최근개시물 적용방법 [2] 조한철 2006.01.19 2601
2090 [동영상강좌]로그인 스킨 적용법 에관한 강좌 [3] 조한철 2006.01.19 2491
2089 이천일님처럼 제 부족한점 평가좀해주세요 T^T 부탁드려요~ [6] file 호신 2006.01.16 5090
2088 Zboard_Pain#1. 첫강좌 - 간단하게 심플한 버튼 만들기 [3] file Zboard_Pain 2006.01.12 9197
2087 [ 나모웹에디터FX 웹 캔버스 ] 웹캔버스로 디자인하기 … ① [4] file 전세웅 2006.01.06 6224
2086 자막처럼 흐르는 배너만들기; [4] file 혀니ⓥ 2005.12.28 17320
2085 필름과 같은 효과만들기; file 혀니ⓥ 2005.12.27 17563
2084 연필로 그린듯한 효과 [5] file 야호 2005.12.25 13572
2083 간단한 복제하기. [1] 김동현 2005.12.12 5957
2082 *포토샵으로 간단한 글씨효과 나타내기 [펌] [2] 민개 2005.12.11 11266
2081 이미지혹은 글자에 그림자 넣어주기 [9] KantRa 2005.11.18 9770
2080 좌우로 열리는 알림판 [9] file 아킨도 2005.11.18 9815
2079 배경을 깨끗 하게 자르는 또다른 방법~! [16] KantRa 2005.11.18 12737
2078 [illustrator] 동영상강좌 / 삼색 태극문양 만들기 / 기초부분 [1] 다모폐인 2005.11.15 5920
2077 포토샵 7.0 - 25. 포토샵+드림위버+제로보드의 연동 [14] 서기 2005.11.11 15985
2076 포토샵 7.0 - 24. 싱싱해 홈페이지 제작하기 [18] 서기 2005.11.11 20976