|
오늘은 카페나 사이트 대문, 각 사이트의 안내 및
기타 자료에 쓰이는 팝업창을
만들어 보겠습니다.
팝업창 만들기
1. 우선 팝업창의 디자인을 위해 그림 및 사진을 준비합니다.
2. 팝업창에 올릴 1번의 그림을 개인 계정에 업로드를 하십시오. (업로드 하는 방법은 마우스 오른쪽 단추를 누르시고 선택하십시오. 또는 파일이름에 한번 클릭한 채로 그대로 끌어서 호스팅 계정으로 올립니다.)
↓
3. 아래 그림과 같이 차례로 메모장을 여십시오.
시작 → 프로그램(P) → 보조프로그램 → 메모장
↓
4. 아래 그림과 같이 메모장에 <img src= 이미지 주소> 를 기록합니다.
↓
5. 파일(F) → 다른 이름으로 저장(A)을 누르십시오.
↓
6. '다른 이름으로 저장'하시고 아래 네모 속의 확장자를 .html로 바꿉니다.
이 .html로 바꾸시는 것이 아주 중요하므로 유의해 주십시오.
↓
7. 위와 같이 .html로 바꾸셨으면 '저장'을 누르십시오.
↓
8. 위 7번의 저장된 파일을 그대로 개인 계정에 업로드합니다.
↓
↓
10. 제목을 쓰시고 아래태그를 복사하신후 아래그림을 참조하셔서 붙여넣기 하십시오. 그리고 확인을 누르십시오. (소스는 아래 그대로 쓰셔야합니다. 쉼표 등 각 부호도 바꾸지 마시고 그대로 복사하여 주소를 및 이미지 수치만 수정하시고 활용하십시오.)
<script language="xxxxxxxxJavaScript"> location=no,scrollbars=yes,width=2번의 업로드한 이미지의 가로의 수치, height=세로의 수치, top=팝업창의 세로위치,left=팝업창의 가로위치'); <script language="xxxxxxxxJavaScript"> status=no,toolbar=no,titlebar=no, location=no,scrollbars=yes,width=500,height=500,top=300,left=300'); ※위 주소속의 자바Script 영문앞에 있는 xxxx는 지우시고 복사하십시오. 특정용어는 Daum에서 표기하고 있어 본문에서는 지워도 계속 xxxx표시가 나타납니다. 소스 복사는 답글의 소스를 복사하시고 샘플을 참고하시면 더 용이하시겠습니다.
↓
※위 10번의 주소와 가로 세로의 이미지 수치를 적은 예를 보여드리겠습니다. 이로써 모든 등록 절차가 끝났습니다.
팝업 창은 이미지 크기 조절에 상당한 시간이 걸릴 수 있습니다.
아래는 이미지 크기(가로, 세로)를 쉽고 정확하게 하실 수 있는 방법입니다.
참고 하십시오.
↓
이미지 가로와 세로 크기 확인
11. 팝업창에 사용될 이미지를 클릭하신후 마우스 오른쪽 버튼을 누르세요.
↓
12. 속성(R)을 누르십시오.
↓
13. '등록 정보'란 창이 뜨면 '요약'을 누르십시오.
↓
↓
이 수치를 위 태그에 대입하시면 됩니다.
이미지대신 음악이나 기타 영상물을 팝업창에
수록하실 수도 있습니다.
절차를 차례대로 정리하여 참고하시면 되시겠습니다.
|
염화실 http://cafe.daum.net/yumhwasil
첫댓글 어느분들의 부탁으로 게시하게 되었습니다. 팝업창을 만들 때 이미지 → 개인계정 업로드 → 메모장이미지주소 → 저장 (저장시 .html 로 꼭 저장유의)→ 계정 업로드 → 카페 대문 혹은 자료 게시 페이지 → 팝업창 주소 복사 → 수록 계정 이미지 주소 삽입 및 크기 조절 → 등록 및 확인 클릭 (10번까지 모든 절차 완료, 11번 부터는 크기조절 참고만 하시면 됩니다. 눈대중으로 하셔도 되오나 시간이 많이 소요되오니 참조하십시오. ) ...... 모든 부처님 ~ 행복하세요! _()()()_
<Script language="JavaScript"> <!-- /*window.open*/('8번의 업로드한 .html주소','','scrollbars=no,status=no,width=2번의 업로드한 이미지의 가로의 수치,height=2번의 업로드한 이미지의 세로의 수치'); // --> </script>
예전 팝업창 주소가 바뀌어져서 다시 본문에 수정했습니다.
아래 다시 올려드립니다.(xx가 생기면 지우시면 됩니다.)
<script language="xxJavaScript">
window.open('8번의 업로드한 html주소','popup','fullscreen=no,menubar=no,status=no,toolbar=no,titlebar=no,location=no,scrollbars=yes,width=2번의 업로드한 이미지의 가로의 수치,height=세로의 수치,top=팝업창의 세로위치,left=팝업창의 가로위치');
</script>
- 아래는 예를 들어 보기로 수치를 넣어 보기로 작성한 것입니다. 번에 대로 진행하시고 아래 소스를 사용하시면 겹치는 현상이 없을 것입니다.
<script language="xxJavaScript">
window.open('http://snowylily.cafe24.com/up.html','popup','fullscreen=no,menubar=no,status=no,toolbar=no,titlebar=no,location=no,scrollbars=yes,width=500,height=500,top=300,left=300');
</script>
명성화님 ...._()()()_ 올해는컴을, 많이 배웠답니다 . 딸아이한데 물어배우다 명성화님께서 올려주신 좋은 자료 덕분에 조금은 컴에대해 자신도 있고 ,활용할줄도 일고 제 홈피도 만들었지요 다명성화님 덕분에 어제 서장 강의 받으러 가서 염화실 법우님들 만날때 명성화님 오셨을려나 생각이 났지요 보고 싶답니다 새해에도 좋은 자료 올려 주세요 명성화님 청정안 합장
明星華님 고맙습니다,,,_()()()_
寶 月 님 ! 고우신 자취에 합장합니다! ^^* _()()()_
올 한해 명성화님 좋은 자료 올려주셔서 고맙구 많은 도움이 되어 다시한번 감사 드립니다 새해에는 명성화님께서 원하시는 일들이 다 잘되길 기원 드립니다 寶月 합장
명성화님..한해 수고 많이 하셨습니다.. 무자년 한해도 좋은자료 기대됩니다..건강하시어 이루고자하시는 대원을 성취하옵소서 _()()()_
명주님! 항상 귀하신 말씀으로 힘을 주시는 분께 감사드리오며 새해 모든 일들이 뜻하신 바 이루시옵시길 빕니다! ^^* _()()()_
고맙습니다.. 그 동안 너무 몰라서 해메었습니다.. 이제 조금 알겠습니다.. 그대로 해 볼께요_()_
평안하세요 ~ ^^
_()()()_
감사합니다.
평안하세요 ~ ^^
_()()()_
고맙슴니다"""""""""""()()()
평안하세요 ~ ^^
_()()()_
@@@
평안하세요~ ^^
_()()()_
명성화님.. 제가 팝업창을 한번 만들어 보려고요. 저희카페에서... 잘 될지는 모르지만... 그래서 명성화님이 올려주신 글.. 제 블로그로 펌 해 갑니다. 양해 해 주세요.
아유 인사가 늦어 죄송합니다. 이제 글을 봤네요. 얼마든지 스크랩하셔도 되십니다. 그런데 팝업창 주소가 현재 바뀌어서 다시 수정했습니다. 평안하세요 ~ ^^
_()()()_
()
평안하세요 ~ ^^
_()()()_
정보 감사합니다
평안하세요 ~ ^^
_()()()_
고맙습니다..
평안하세요 ~ ^^
_()()()_
혹시 필요하신 분들을 위해
예전 팝업창 주소가 바뀌어져서 다시 본문에 수정했습니다.
아래 다시 올려드립니다.(xx가 생기면 지우시면 됩니다.)
<script language="xxJavaScript">
window.open('8번의 업로드한 html주소','popup','fullscreen=no,menubar=no,status=no,toolbar=no,titlebar=no,location=no,scrollbars=yes,width=2번의 업로드한 이미지의 가로의 수치,height=세로의 수치,top=팝업창의 세로위치,left=팝업창의 가로위치');
</script>
- 아래는 예를 들어 보기로 수치를 넣어 보기로 작성한 것입니다. 번에 대로 진행하시고 아래 소스를 사용하시면 겹치는 현상이 없을 것입니다.
<script language="xxJavaScript">
window.open('http://snowylily.cafe24.com/up.html','popup','fullscreen=no,menubar=no,status=no,toolbar=no,titlebar=no,location=no,scrollbars=yes,width=500,height=500,top=300,left=300');
</script>