웹마스터 팁
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
톡톡 튀는 홈페이지 테이블 제작하기 ^^
2004.12.03 09:29
여러분들께서
보통 포토샾 을 통해 이미지 를 조각 낸후에. 그것을 HTML 로 변환하고
이미지가 적절하게 들어가는 그런 형식의 페이지 테이블을 만드시는걸
자주 보고있습니다.
물론 아주 간편하구 포토샾을 자주 또는 잘 사용하시는분들에겐
더 없이 편한 테이블 관리라고 생각을합니다.
단점으로는 초보적인 문제가 약간 따르긴 하죠. 원하지않는
spacer 이미지 가 들어가게 되어서. 나중에 웹 에디터로 불러왔을경우에
편집을 하기가 조금 어렵게 된다는 점이 있습니다.
물론 중고수 이상의 실력이 되시는 분들께서는 그것을 해결할수있는
보완책을 두시고 홈페이지 작업을 하시겠지만요 ^^
그래서 드림위버 초보 사용자님들을 위한 아주 편리한 테이블 제작을 마련을했습니다.
물론 고수님들께서는 다 아시는 내용이지만. 다른 눈치 안보고 초보님들의
고생을 덜어드리기 위해 올려보도록 하겠습니다.
[1강 레이어 테이블 짜기 ]
드림위버 에서는 포토샾과 마찬가지로 레이어 를 별도로 만들수가있습니다.
물론 페이지 의 돌출 테이블을 쓰실 때에 레이어 로 가끔 만드시는것을 볼수가있는데
그 레이어 로 테이블을 짠다는건 몇몇분들을 제외 하고는 생각하지 못하셨을거에요.
물론 노프레임 홈페이지 를 만들기 위해서 도 편하게 쓰일수가있다는것입니다.
그럼 그림을 보고 설명을 드릴께요 ^^
1) 제일 처음으로 해당 홈페이지 의 레이아웃 밑그림이 있어야겠죠.
그 밑그림을 드림위버에 배경이미지로 불러드립니다.
경로- modify -> Page Properties... -> Tracing Image 에 배경이미지 를 올리시면됩니다.
그리고 이미지의 투명도 조절을 하셔서. 나중에 레이어가 올라왔을때. 색 겹침이 되서
헷갈리는것을 방지 하면되겠죠? ^^ 한 50% 로 해두시면됩니다.
그리고 확인을 누르시면됩니다.
그럼 드림위버 페이지 내에 바탕그림이 올라와있는것을 확인하실수가있습니다.
그럼 그 다음부터의 문제인데요.
만약 이상태에서 테이블을 그냥 무작정 그리신다면 엄청난 고생과 시간이 흐르게 됩니다.
그래서 레이어 뷰 라는것을 사용하시면되는데요. 다음 그림을 보죠 ^^
그림에서와 마찬가지로. 위에 텝에서. layout 을 고릅니다.
그럼 아래에 또하나의 텝이 생기는데 여기서 2번째에 있는 레이아웃 뷰 를 선택하시면
옆에 뷰모드의 속성 2가지가 생기죠. 3)번과 4) 번이요 ^^
3번은 테이블 레이아웃을 만드는것이고.
4번은 테이블 속에 셀을 레이아웃으로 만드는것이랍니다.
그럼 다음의 레이아웃 테이블은....
이렇게 나누어 진다는것이죠.
셀을 그리실때는 Ctrl 키를 누른상태에서 그리시면 반복해서 여러 셀을 골라서 그릴수가있으며.
셀의 크기조절이나 위치 등은 하단부의 속성에서 조작이 가능하게 됩니다.
그리고 배경의 이미지를 삭제하셔서 분할(조각된) 이미지 또는 텍스트를 그 위치에 삽입해주시면
되거나 또는 바탕이미지의 투명도를 100% 로 하셔서. 텍스트만 들어갈 부분은
텍스트말 넣어주시고. 이미지는 그데로를 사용하신후에 나머지 부분은
배경색상으로 처리를 하셔도 무관하겠죠. (그렇게 된다면 이미지 크기 가 크면 불러올때 시간이 조금 걸리지만요)
여기까지 간단 테이블 만들기였습니다.
제가 올린 목적으로는. 일단 테이블이 원하는 위치에 알맞게 조정이 안되는분들을 위해서 올리는거거든요
도움이 되셨으면 합니다.
다음에는 드림위버 에 다른 면들을 또 올려보도록 할께요 ^^
드림위버에서 플레시의 제작도구 가 없이도. 플래쉬를 제작할수있는
방법을 올려놓도록 할께요 ^^
그럼 예쁜 사이트 만드세요~
즐거운 웹스터디 유틸닷넷 : ) http://utill.net
보통 포토샾 을 통해 이미지 를 조각 낸후에. 그것을 HTML 로 변환하고
이미지가 적절하게 들어가는 그런 형식의 페이지 테이블을 만드시는걸
자주 보고있습니다.
물론 아주 간편하구 포토샾을 자주 또는 잘 사용하시는분들에겐
더 없이 편한 테이블 관리라고 생각을합니다.
단점으로는 초보적인 문제가 약간 따르긴 하죠. 원하지않는
spacer 이미지 가 들어가게 되어서. 나중에 웹 에디터로 불러왔을경우에
편집을 하기가 조금 어렵게 된다는 점이 있습니다.
물론 중고수 이상의 실력이 되시는 분들께서는 그것을 해결할수있는
보완책을 두시고 홈페이지 작업을 하시겠지만요 ^^
그래서 드림위버 초보 사용자님들을 위한 아주 편리한 테이블 제작을 마련을했습니다.
물론 고수님들께서는 다 아시는 내용이지만. 다른 눈치 안보고 초보님들의
고생을 덜어드리기 위해 올려보도록 하겠습니다.
[1강 레이어 테이블 짜기 ]
드림위버 에서는 포토샾과 마찬가지로 레이어 를 별도로 만들수가있습니다.
물론 페이지 의 돌출 테이블을 쓰실 때에 레이어 로 가끔 만드시는것을 볼수가있는데
그 레이어 로 테이블을 짠다는건 몇몇분들을 제외 하고는 생각하지 못하셨을거에요.
물론 노프레임 홈페이지 를 만들기 위해서 도 편하게 쓰일수가있다는것입니다.
그럼 그림을 보고 설명을 드릴께요 ^^
1) 제일 처음으로 해당 홈페이지 의 레이아웃 밑그림이 있어야겠죠.
그 밑그림을 드림위버에 배경이미지로 불러드립니다.
경로- modify -> Page Properties... -> Tracing Image 에 배경이미지 를 올리시면됩니다.
그리고 이미지의 투명도 조절을 하셔서. 나중에 레이어가 올라왔을때. 색 겹침이 되서
헷갈리는것을 방지 하면되겠죠? ^^ 한 50% 로 해두시면됩니다.
그리고 확인을 누르시면됩니다.
그럼 드림위버 페이지 내에 바탕그림이 올라와있는것을 확인하실수가있습니다.
그럼 그 다음부터의 문제인데요.
만약 이상태에서 테이블을 그냥 무작정 그리신다면 엄청난 고생과 시간이 흐르게 됩니다.
그래서 레이어 뷰 라는것을 사용하시면되는데요. 다음 그림을 보죠 ^^
그림에서와 마찬가지로. 위에 텝에서. layout 을 고릅니다.
그럼 아래에 또하나의 텝이 생기는데 여기서 2번째에 있는 레이아웃 뷰 를 선택하시면
옆에 뷰모드의 속성 2가지가 생기죠. 3)번과 4) 번이요 ^^
3번은 테이블 레이아웃을 만드는것이고.
4번은 테이블 속에 셀을 레이아웃으로 만드는것이랍니다.
그럼 다음의 레이아웃 테이블은....
이렇게 나누어 진다는것이죠.
셀을 그리실때는 Ctrl 키를 누른상태에서 그리시면 반복해서 여러 셀을 골라서 그릴수가있으며.
셀의 크기조절이나 위치 등은 하단부의 속성에서 조작이 가능하게 됩니다.
그리고 배경의 이미지를 삭제하셔서 분할(조각된) 이미지 또는 텍스트를 그 위치에 삽입해주시면
되거나 또는 바탕이미지의 투명도를 100% 로 하셔서. 텍스트만 들어갈 부분은
텍스트말 넣어주시고. 이미지는 그데로를 사용하신후에 나머지 부분은
배경색상으로 처리를 하셔도 무관하겠죠. (그렇게 된다면 이미지 크기 가 크면 불러올때 시간이 조금 걸리지만요)
여기까지 간단 테이블 만들기였습니다.
제가 올린 목적으로는. 일단 테이블이 원하는 위치에 알맞게 조정이 안되는분들을 위해서 올리는거거든요
도움이 되셨으면 합니다.
다음에는 드림위버 에 다른 면들을 또 올려보도록 할께요 ^^
드림위버에서 플레시의 제작도구 가 없이도. 플래쉬를 제작할수있는
방법을 올려놓도록 할께요 ^^
그럼 예쁜 사이트 만드세요~
즐거운 웹스터디 유틸닷넷 : ) http://utill.net
댓글 6
-
힘쓰
2005.05.13 01:24
그림이 않보여요. 뭐가 보여야 보죠?? -
유인권
2006.02.23 01:44
글은 보이고 설명그림은 않보이는군요. -
Freaky
2006.02.12 18:57
다행이군요 나도 안보이는데.. -
된장맛껌
2007.08.15 02:40
그럼 저도 다행인지요.. 저도 안보이는군요.. -ㅅ-;; -
ㅇㅣㄹㅣ
2007.08.16 11:08
저도 안보여요 ㅠㅠ
-
다행이다
2009.03.28 10:17
와우~ 나도 다행이다.
제목 | 글쓴이 | 날짜 |
---|---|---|
XHTML 1.0 Strict에서 더 이상 사용할 수 없는 태그 / 속성 [16] | EDENe | 2005.01.22 |
[기초]홈페이지의 프레임 나누기 입니다. [5] | piasol | 2004.12.10 |
드래그 금지 및 오른쪽 버튼 금지 소스 [6] | 편입성공기 | 2004.12.06 |
브라우저 주소창에 긴 경로 안 나타나게 하기 [7] | 편입성공기 | 2004.12.06 |
새창에 폼태그로 전송하기 | 편입성공기 | 2004.12.06 |
도메인 포워딩 즉 페이지 자동이동하기 [6] | 편입성공기 | 2004.12.06 |
페이지 회색스크롤바로 바꾸기 | 편입성공기 | 2004.12.06 |
톡톡 튀는 홈페이지 테이블 제작하기 ^^ [6] | piasol | 2004.12.03 |
최근게시물의 폰트크기와 링크색상 바꾸는 방법 | LUFFY | 2004.11.20 |
웹폰트사용에 대한 실체를 밝힌다!! [22] | Multi_Taeji | 2004.11.13 |
a링크를 이용 새창 띄우기 [10] | 토토루 | 2004.11.07 |
웹문서 검색을 대비한 헤더,푸터 나누기. [4] | 그럴까? | 2004.10.29 |
각 객체접근.. [2] | canelia | 2004.10.29 |
W3C 표준 권고안. 앞으로 꼭 지켜주세요.. [14] | canelia | 2004.10.29 |
스타일시트에서 링크포커스 없애기 [12] | keymove | 2004.10.26 |
타이틀 바에 움직이는 타이틀 넣기. [5] | 덜렁이 | 2004.10.16 |
<button>태그를 아시나요? [6] | 그냥이렇게。 | 2004.10.13 |
TabIndex를 이용하여 탭키 컨트롤하기 [5] | 손상모 | 2004.10.08 |
테이블 주위에 점선효과!!!~~(초간단팁!) [6] | 초라 | 2004.09.25 |
경고창 없이 부모창 닫고 아기창에서 마우스 오른버튼 클릭시 아기창도 닫는다. [4] | 詩와언어™ | 2004.08.27 |