웹마스터 팁
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
아름지기식 홈페이지만들기5
2002.03.16 01:15
흠..오래 기다리셨죠??
넘 늦은것 같네요..
우리동네에..밤에도 환한 농구코트가 있는데,
갑자기 농구가 땡겨서...한께임했죠..이밤에(짐시각밤12시 ^^)
군대가기 전엔 날라다녔는데..군대 가서두 증말 날라다녔는데..
지금은, 아주.....
늙었나 봐용..^^
하하, 각설하구.........
제가 많이 생각해 봤어요...어떻게 하면 강좌가 잼나고 유익할수 있을까..
그래서 내린 결론 -
꼭 필요한 것부터..주욱 내려가 보자!~
제가 내린 결론입니다..
그래서, 전에 말씀드린 내용은 이후로 미루기로 하고,
이미지레디에 대한 적극 활용법..........
사실.......이미지레디만 있어도 어느정도 완성도 있는 홈페이지를
만들수 있습니다.
물론, 제 강좌의 목적이 그렇듯이, 살아남기 위한 편법이죠!~
^^
그럼 오늘의 아름지기식 홈페이지 만들기 파이브 나갑니다..^^
=====================================
이미지레디로 쌈빡한 테이블을 만들어 보자
=====================================
그전에, 아시는 분은 다들 아실테지만, 제가 반한 사이트...
포토샵강좌로 넘 유명한 그곳,
http://photo.ideakorea.com/
이쪽으로 가시면, 정말...새심한 강좌로 여러분의 포토샵의 궁금증을
해소할수 있을것입니다..^^
--------------------------------------------
"미래"...웹이 사라진다면, 그리고 웹디자이너들이 사용하는 그런 지금까지의
기술이 사라진다면..저는 항상 이런부분을 염두하여 두려워 하곤 합니다..
지금은..그럭저럭 이런 잔 기술로 밥먹고(?) 살고 있지만,
웹페이지가 만들어지는 방식이 바뀌어서..지금 가지고 있는 지식이
지식이 아니라면...마치 MS - DOS가 지금 아무런 쓸모가 없고,
(이유는 윈도우가 생겨나서 그렇죠) 그렇게 된다면, 나는 다시 백지 상태가
되는 것이 아닐까...
하지만, 이젠 걱정 놓기로 했습니다..^^
맘 편히 먹고 살기로 했죠..
생각해 보세요..만약 그렇게 된다면, 분명히 어도비社(포토샵만든회사)도
매그로 미디어社도 망해버릴것입니다..^^
헤헤, 제가 이런 말을 하는 이유는..
그쪽 프로그래밍 전문가들도...그런 미래를 대비하기 위해,
항상 준비해 나갈것이고, 포토샵,플래쉬 라는 툴또한 더욱더..
그 기술에 맞게 발전되어 나갈것이기 때문입니다..^^
네, 그렇죠....제가 하려는 말의 요점은 거기서 출발합니다.......
"포토샵"을 만든 어도비社는 살아남기 위해...멋진 프로그램을 만들어
냈습니다.......웹과 공존하는 프로그램..포토샵과는 무언가 다른...
그런 프로그램...바로, 이미지레디죠..^^
포토샵을 웹과 더욱더 매치되게 사용할수 있는 그런툴...이미지 레디..^^
여러분과 저는 그것을 이제 부터 배우는 것입니다..^^
그중에서도...아주 아주 멋진 기능.......그리고 잼나는 효과....
슬라이스툴(SLICE TOOL),그리고 TWEEN
여러분들은 이 두가지 기능에 주목할 필요가 있습니다.
어디선가 보시면, 무언가 직접코딩해서 HTML로 짰다고 보기엔,
너무다도 헛점없이 완벽한 메뉴바나, 페이지나, 테이블을 보신적이
있으실 겁니다.......
그것은, 필시 사람의 손으로 코딩하여 직접 짠 것은 아닐겁니다..
나모도 있을것이고...드림위버, 플래쉬..등등...있겠지만,
그중엔 분명히 이미지레디로 짠 것들도 있을것입니다..
제 홈페이지는 거의 HTML로 짜던가..이미지레디를 사용하여 테이블을
만들었습니다..
아무튼 그것을 가능케 하는것이 바로 슬라이스 툴입니다..
1. 위치: 위 그림참조
2. 역할: 슬라이스는, 전강좌에서도 설명했지만, 슬라이스툴이라는 녀석과
슬라이스 실랙트툴이라는 녀석이 있습니다.
슬라이스 툴은, HTML명령어중 <TR><TD>에 속하는 녀석으로
테이블의 윤각 틀을 만들어 주는 녀석입니다.
그녀석을 클릭해서..(Show tool > Slice tool) 자기가 만들고 싶은
영역만큼의 선을 그려 줍니다.....
그리고 ..(Show tool > Slice tool에서 그 Slice tool을 오래누르면)
Slice select tool이라는 녀석을 만나실수 있을 것입니다.
그녀석은, 우리가 위 그림에서 처럼 원하는 크기..그리고 링크
될곳의 길이를 나누어준것( Slice tool로 나누어준부분)의 속성을
불어넣어주는 역할을 합니다.
한마디로 우리가 Slice tool로 나누어 준부분을 제기능으로 쓸수
있도록 해주는 것이지요..(물론..그냥..이미지를 테이블로 나누어
서 편집하기위해 Slice select tool사용 없이 html로 저장할수도
있습니다)
우리는 Slice select tool로 롤오버기능(버튼위에 마우스를 올렸을때
변하는 기능)도 애니메이션기능(롤오버시나, 롤오버와는 상관없이
이미지의 무빙을 주기를 원할때..그리고...원하는 위치로 링크 걸고
싶을때..등등...속성을 불어 넣어 줄수 있습니다..
한마디로 그둘은 찰떡궁합 환상의 콤비인셈이죠..^^
이렇게 해주면, 여러분은 그 어떤 html의 달인이 직접 코딩하여
테이블을 만든다 해도, 저수준 따라가기 힘들 것입니다..^^
아무튼 지금까지의 결과물을 보면(클릭하세용)
=================================================================
물론, 지금까지..별것 아닐수도 있습니다.
(나모도 있고, 드림위버도..플래쉬에서도..)할수가 있을 것입니다.
하지만, 지금건 이미지레디로 하는것이기에 그 의미가 있으며,
이 기능을...단지 이런 단순한 원리로만 생각하고 사용하지 말고...
활용한다면, 활용가치는 무한대라고 볼수 있을것입니다.
-----------------------------------------------------------------
포토샵 이미지레디로 활용한 예(클릭해주세용)
(슬라이스툴과 다음편에 배울 트윈효과의 결합활용)
--
----------참조--------------------------------------------------
이미지를 클릭하시면, 제가 전에 만들었던 사이트로 그곳은
플래쉬 사용없이 순수 "이미지레디"와 "html코딩(메모장)" 으로 만든
사이트를 감상하실수 있습니다.^^
거기 나와 있는 효과들을 보시면, 이미지레디의 활용성을 어느정도
이해하실수 있을것입니다.^^
----------------------------------------------------------------
^0^ 어때요..이정도면 플래쉬 저리가라죠!~
쉬워요..여러분도 할수 있어요..플래쉬보다는 훠~얼씬!~^^
(참조) 이곳은 제가 전에 순수 이미지레디만으로(플래쉬사용안함)제작한
사이트 입니다.
여러분도 노력하시면, 저것보다 이상으로 하실수 있을것입니다.
다음편엔 이어서 트윈효과에 대한 강좌가 있겠습니다.
어설픈 강좌 읽어주셔서 감사드립니다.^^
--아름지기식 홈페이지 만들기 강좌파이브 끄읕-
넘 늦은것 같네요..
우리동네에..밤에도 환한 농구코트가 있는데,
갑자기 농구가 땡겨서...한께임했죠..이밤에(짐시각밤12시 ^^)
군대가기 전엔 날라다녔는데..군대 가서두 증말 날라다녔는데..
지금은, 아주.....
늙었나 봐용..^^
하하, 각설하구.........
제가 많이 생각해 봤어요...어떻게 하면 강좌가 잼나고 유익할수 있을까..
그래서 내린 결론 -
꼭 필요한 것부터..주욱 내려가 보자!~
제가 내린 결론입니다..
그래서, 전에 말씀드린 내용은 이후로 미루기로 하고,
이미지레디에 대한 적극 활용법..........
사실.......이미지레디만 있어도 어느정도 완성도 있는 홈페이지를
만들수 있습니다.
물론, 제 강좌의 목적이 그렇듯이, 살아남기 위한 편법이죠!~
^^
그럼 오늘의 아름지기식 홈페이지 만들기 파이브 나갑니다..^^
=====================================
이미지레디로 쌈빡한 테이블을 만들어 보자
=====================================
그전에, 아시는 분은 다들 아실테지만, 제가 반한 사이트...
포토샵강좌로 넘 유명한 그곳,
http://photo.ideakorea.com/
이쪽으로 가시면, 정말...새심한 강좌로 여러분의 포토샵의 궁금증을
해소할수 있을것입니다..^^
--------------------------------------------
"미래"...웹이 사라진다면, 그리고 웹디자이너들이 사용하는 그런 지금까지의
기술이 사라진다면..저는 항상 이런부분을 염두하여 두려워 하곤 합니다..
지금은..그럭저럭 이런 잔 기술로 밥먹고(?) 살고 있지만,
웹페이지가 만들어지는 방식이 바뀌어서..지금 가지고 있는 지식이
지식이 아니라면...마치 MS - DOS가 지금 아무런 쓸모가 없고,
(이유는 윈도우가 생겨나서 그렇죠) 그렇게 된다면, 나는 다시 백지 상태가
되는 것이 아닐까...
하지만, 이젠 걱정 놓기로 했습니다..^^
맘 편히 먹고 살기로 했죠..
생각해 보세요..만약 그렇게 된다면, 분명히 어도비社(포토샵만든회사)도
매그로 미디어社도 망해버릴것입니다..^^
헤헤, 제가 이런 말을 하는 이유는..
그쪽 프로그래밍 전문가들도...그런 미래를 대비하기 위해,
항상 준비해 나갈것이고, 포토샵,플래쉬 라는 툴또한 더욱더..
그 기술에 맞게 발전되어 나갈것이기 때문입니다..^^
네, 그렇죠....제가 하려는 말의 요점은 거기서 출발합니다.......
"포토샵"을 만든 어도비社는 살아남기 위해...멋진 프로그램을 만들어
냈습니다.......웹과 공존하는 프로그램..포토샵과는 무언가 다른...
그런 프로그램...바로, 이미지레디죠..^^
포토샵을 웹과 더욱더 매치되게 사용할수 있는 그런툴...이미지 레디..^^
여러분과 저는 그것을 이제 부터 배우는 것입니다..^^
그중에서도...아주 아주 멋진 기능.......그리고 잼나는 효과....
슬라이스툴(SLICE TOOL),그리고 TWEEN
여러분들은 이 두가지 기능에 주목할 필요가 있습니다.
어디선가 보시면, 무언가 직접코딩해서 HTML로 짰다고 보기엔,
너무다도 헛점없이 완벽한 메뉴바나, 페이지나, 테이블을 보신적이
있으실 겁니다.......
그것은, 필시 사람의 손으로 코딩하여 직접 짠 것은 아닐겁니다..
나모도 있을것이고...드림위버, 플래쉬..등등...있겠지만,
그중엔 분명히 이미지레디로 짠 것들도 있을것입니다..
제 홈페이지는 거의 HTML로 짜던가..이미지레디를 사용하여 테이블을
만들었습니다..
아무튼 그것을 가능케 하는것이 바로 슬라이스 툴입니다..
1. 위치: 위 그림참조
2. 역할: 슬라이스는, 전강좌에서도 설명했지만, 슬라이스툴이라는 녀석과
슬라이스 실랙트툴이라는 녀석이 있습니다.
슬라이스 툴은, HTML명령어중 <TR><TD>에 속하는 녀석으로
테이블의 윤각 틀을 만들어 주는 녀석입니다.
그녀석을 클릭해서..(Show tool > Slice tool) 자기가 만들고 싶은
영역만큼의 선을 그려 줍니다.....
그리고 ..(Show tool > Slice tool에서 그 Slice tool을 오래누르면)
Slice select tool이라는 녀석을 만나실수 있을 것입니다.
그녀석은, 우리가 위 그림에서 처럼 원하는 크기..그리고 링크
될곳의 길이를 나누어준것( Slice tool로 나누어준부분)의 속성을
불어넣어주는 역할을 합니다.
한마디로 우리가 Slice tool로 나누어 준부분을 제기능으로 쓸수
있도록 해주는 것이지요..(물론..그냥..이미지를 테이블로 나누어
서 편집하기위해 Slice select tool사용 없이 html로 저장할수도
있습니다)
우리는 Slice select tool로 롤오버기능(버튼위에 마우스를 올렸을때
변하는 기능)도 애니메이션기능(롤오버시나, 롤오버와는 상관없이
이미지의 무빙을 주기를 원할때..그리고...원하는 위치로 링크 걸고
싶을때..등등...속성을 불어 넣어 줄수 있습니다..
한마디로 그둘은 찰떡궁합 환상의 콤비인셈이죠..^^
이렇게 해주면, 여러분은 그 어떤 html의 달인이 직접 코딩하여
테이블을 만든다 해도, 저수준 따라가기 힘들 것입니다..^^
아무튼 지금까지의 결과물을 보면(클릭하세용)
=================================================================
물론, 지금까지..별것 아닐수도 있습니다.
(나모도 있고, 드림위버도..플래쉬에서도..)할수가 있을 것입니다.
하지만, 지금건 이미지레디로 하는것이기에 그 의미가 있으며,
이 기능을...단지 이런 단순한 원리로만 생각하고 사용하지 말고...
활용한다면, 활용가치는 무한대라고 볼수 있을것입니다.
-----------------------------------------------------------------
포토샵 이미지레디로 활용한 예(클릭해주세용)
(슬라이스툴과 다음편에 배울 트윈효과의 결합활용)
--
----------참조--------------------------------------------------
이미지를 클릭하시면, 제가 전에 만들었던 사이트로 그곳은
플래쉬 사용없이 순수 "이미지레디"와 "html코딩(메모장)" 으로 만든
사이트를 감상하실수 있습니다.^^
거기 나와 있는 효과들을 보시면, 이미지레디의 활용성을 어느정도
이해하실수 있을것입니다.^^
----------------------------------------------------------------
^0^ 어때요..이정도면 플래쉬 저리가라죠!~
쉬워요..여러분도 할수 있어요..플래쉬보다는 훠~얼씬!~^^
(참조) 이곳은 제가 전에 순수 이미지레디만으로(플래쉬사용안함)제작한
사이트 입니다.
여러분도 노력하시면, 저것보다 이상으로 하실수 있을것입니다.
다음편엔 이어서 트윈효과에 대한 강좌가 있겠습니다.
어설픈 강좌 읽어주셔서 감사드립니다.^^
--아름지기식 홈페이지 만들기 강좌파이브 끄읕-
댓글 5
-
아름지기
2002.03.16 01:22
웅 오늘도 길어져 버렸당..^^ 좋은하루 되세요...열분들 모~~~~~~두~~~~~ -
산나라
2002.03.17 13:54
이미지레디에 이런 기능도 있었군요...
전 단지..이미지를 나누는 기능만 알고 있었는데..
이미지레디...배워야 되겠군요.. ^^ -
힐링포션
2002.04.01 20:28
멋집니다!
그런데 공백이 모니터 세로길이보다 길군요... -
신동원
2003.01.11 15:41
링크가 왜 저 딴데로 되있지 -,.-; -
ⓗolyⓢhield
2003.03.12 18:55
강의 다시 올리실 순 없나; 그림두 하나두 안나오고...
제목 | 글쓴이 | 날짜 |
---|---|---|
아름지기식 홈페이지만들기5 [5] | 아름지기 | 2002.03.16 |
타자를 치면 바로바로 화면에 글이 쑤욱 [7] | 이슈™ | 2002.03.13 |
아름지기식 홈페이지 만들기4 [14] | 아름지기 | 2002.03.12 |
▩마우스 따라다니는 정렬된 예쁜 글자들 [1] | ▩윤미 | 2002.03.11 |
홈페이지 만들기 ① ▶계정 만들기◀ (아름지기님과 다름) [6] | 냠냠 | 2002.03.09 |
아름지기식 홈페이지 만들기3 [6] | 아름지기 | 2002.03.09 |
아름지기식 홈페이지만들기2 [1] | 아름지기 | 2002.03.09 |
아름지기식 홈페이지만들기1 [4] | 아름지기 | 2002.03.09 |
특수문자 몇백개!! [2] | 포터시네마 | 2002.03.08 |
▩서서히 진해지는 그림 <예제포함> | ▩윤미 | 2002.03.08 |
▩마퀴태그 이용한 플래쉬효과 내기 [3] | ▩윤미 | 2002.03.08 |
▩마우스만 갖다대면 알아서 예쁜 새창이뜨고 때면 사라진다!! [10] | ▩윤미 | 2002.03.04 |
마퀴(Marquee)태그를 애플릿처럼 부드럽게 움직이기!! [4] | 지진;) | 2002.03.04 |
▩배너링크할때 쓰면 정말 편한 것. [2] | ▩윤미 | 2002.03.03 |
▩이미지가 너무많아 로딩할때 나오는 표시 [7] | ▩윤미 | 2002.03.03 |
[HTML]글자로 된 하이퍼링크의 밑줄 없애기 [9] | Shyos | 2002.02.26 |
[HTML]링크 클릭시 표시되는 테두리 점선 없애기 [3] | Shyos | 2002.02.26 |
[HTML] 글자태그 [4] | 태엽감는새 | 2002.02.26 |
[HTML] 기초적인 태그모음 #3 | 태엽감는새 | 2002.02.26 |
[HTML] 기초적인 태그모음 #2 [1] | 태엽감는새 | 2002.02.26 |