메뉴 건너뛰기

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 48028
162 초보자도 간단한 기본 프로그램으로 깔쌈한 메뉴만들기 [5] file 미미피천사 2002.07.10 8935
161 [제로보드강좌]6-2강. 여러가지 스킨 적용해보기[갤러리 스킨] [29] 네찌 2006.12.23 8769
160 [나모]제로보드의 최근게시물의 위치를 교정하기 -(속성바로가기) [10] file 아치 2003.11.26 8769
159 [페인터] 귀여운 차이나풍의 소녀 케릭 그리기 [4] file Hwoarang 2005.02.10 8757
158 LECTORA-평가문항제작(2) 단답형 / 논술형 문제[제11-1강] [1] 에듀멘 2006.03.14 8735
157 [SWISH]책이 펼쳐지는 효과 [8] file 여어자 2003.05.18 8615
156 팝플과 MSN Checker를 이용해서 "지금 누구있지?" 구현하기 [22] @gecko~ 2003.07.09 8613
155 웹디자이너를 위한 드림위버MX에서 ASP어플리케이션 작성하기.... [11] file 박진현 2003.10.13 8519
154 [웹사이트만들기]홈페이지 제작 강좌에 앞서 한마디 [3] file HomeBox™ 2004.04.19 8453
153 [HomePage Step] 홈페이지의 제작단계 [12] ZipShin 2002.12.27 8325
152 [웹사이트만들기]홈페이지 제작전 준비해야 할 것들 file HomeBox™ 2004.04.19 8228
151 [아이콘 셋] 퀄리티 높은 아이콘 셋입니다. [3] file jury 2002.07.16 8112
150 MSN 접속 상태를 내홈페이지 표시하기! [13] 임동일 2003.07.28 8093
149 LECTORA - 평가문항제작(4) drag&drop형 / Hot Spot형 문[제13-1강] [2] 에듀멘 2006.03.14 8090
148 [SWISH] 잔상효과. [4] file 아메 2003.04.18 7969
147 SWISH - 버튼만들기 8) 장면(Scene)이동하기 [3] file 아메 2003.04.09 7957
146 [SWIFT 3D] 3D 회전하는 문자 만들기(로고나 배너등으로 응용해보아요~) [6] file ⓘ아이샤이 2003.09.14 7952
145 [레이아웃] 레이아웃의 수정법과 문서수정 [11] 구루미 2004.12.10 7877
144 [제로보드강좌]3강. 제로보드 설치하기 [22] 네찌 2006.12.20 7783
143 #07. 홈페이지의 분위기 극대화시키기. [13] Nersion 2003.01.19 7747