드림위버서의 진가는 지금부터 ! 스타일 시트 시작 !!

스타일 시트란 쉽게 이야기 하면은 고정된 형식이라는 것입니다. 여러분이 만든 고유의 css1이나 2에서 지정한 규약안에서 웹페이지 형식을 만들수가 있다는 것입니다. 여러분이 홈페이지 만드는 작업을 하면서 보통 사용되는 글꼴과 크기 링크시 연결되는 색깔 같은 것은 통일되게 할것입니다. 그런데 이런일들을 일일히 글자 크기를 키워주고 바꾸고 하여야 하지만, 사이트를 만들기 전에 스타일로 먼저 나만의 스타일로 먼저 만들어 놓고 이것만 적용시켜주면 되는 것입니다.
물론 이뿐이 아니라 고급 다이나믹 Html을 만들때도 서로 연동을 하며 필요합니다.

예를 들어 설명하자면 어떤 웹페이지에 가면 링크된 부분의 색깔이 파란색인데 마우스를 갖다 놓으면 색깔이 변하는 것을 보셨죠. 이런것들을 스타일 시트로 쉽게 구현할수가 있습니다.

여러분이 홈페이지를 만들때 가장 중요한 것은 기획력이고 실제 작업에 들어가서는 홈페이지의 세련됨입니다. 이 세련됨은 어디서 나올까요 ? 그건 해당 페이지가 안정된 통일감 속에서 개성있고 특색있는 정보들로 꾸며져여 한다는 것입니다. 홈페이지를 만들때 가장 중요한 점이라고 자신있게 이야기 합니다. 그럼 이런 바탕을 만드는 스타일 시트가 얼마나 중요한지 아시겟죠. 그리고 작업능률 측면에서도 상당한 도움을 주구요.

나모에서는 이런 스타일 기능이 상당히 미약합니다. 그러나 드림위버의 장점은 무엇보다 스타일 시트및 다이나믹 html을 어떤 이지웍 에디터보다 잘 구현한다는 것입니다. 지금은 스타일이 뭐지 하면서 어렵게 생각하실지 모르겠지만 그냥 한번 볼까 하는 마음으로 다음장부터 쭉 읽어보세요. 그럼 아~~이렇게 할수 있는 것이구나 하며 쉽게 따라오실수가 있을 것입니다.

스타일 시트는 body 전체에도 지정해 놓아서 통일된 편집을 가볍게 할수도 있으며 테이블및 각 셀에도 스타일을 만들어 놓을수도 있어서 똑같은 테이블 내에서 편집도 쉽게 할수 있습내다..웹사이트 제작에 있어서 가장 중요한 유저 인터페이스와 내이게이션 통일성 등을 쉽게 작업을 할수 있습니다...스타일 시트는 여러모로 정말 중요하죠..^^;;

스타일 시트 만들기 기초

3.0 버전에서는 라이브 러리 스타일 시트 템플릿등이 하나의 팔레트로 통일된 약간 변화된 인터페이스죠... 포토샵을 보는듯한..^^;;

메뉴에서 Window > Styles를 선택하면 왼쪽과 같은 창이 생기게 된다. 혹은 Laucher창에서 역시 똑같은 스타일 이라는 메뉴가 있습니다. styles를 선택하게 되면 그림과 같은 창이 뜨는데 이것이 Style Pallette라고 하는데 스타일시트 작업을 할때 필요한 기능을 가지고 있습니다 다. 스타일시트를 사용하는 목적은 여러문서에 일관된 문서의 외양을 유지하는것 외에 융통성있는 문서양식과 여러가지 다양한 효과를 문서에 적용하는데 있다고 말씀드렸습니다. 일단 styles를 선택해 보세요.

그림과 같은 스타일 팔레트는 스타일을 만들어 놓은 것이 보이거나 이창에서 최종적으로 지정하는 것입니다. 우리는 아직 만들어 놓지를 않았으니 없겠죠. 그럼 스타일 시트를 만들기 위해 오른쪽 아래에 보이는 news style 버튼을 자신있게 클릭하시거나 마우스 오른쪽 버튼을 눌러 나오는 New 를 선택해 보세요..

그림과 같은 창이 나오죠

태그에 대해 스타일 속성을 준다던지 새로운 스타일 시트를 만든다던지 하는 분류 창입니다.
기본값으로 체크되어 있는 Make Custom Style는 새로운 스타일 시트를 만드는 것인데 아래 .unnamed1이 이름이 되는 것인데 여러분께서 원하시는 이름을 적어 주세요..

그리고 ok 를 선택 하면 바로 각종 옵션을 지정해서 스타일 시트를 만드는 창이 나오죠..

그럼 기존에 만들어진 스타일 시트는 Css style창에서 보이지 않는 외부 스타일 시트등은
style창의 오른쪽 하단에 있는 (open style sheet)를 선택하시면 됩니다.
open style sheet를 선택하면 아래와 같은 창이 뜨죠..

다른 사이트 작업시 지정했던 Css파일이 하나 있죠..
Link 란 것은 외부 스타일 시트를 만드는 것입니다..왜 외부 스타일 시트를 만드냐면 드림위버에서 스타일 시트 옵션에서 지정한 것이 제대로 먹히지 않는 경우가 있으며 회부 스타일 시트에 종합적인 것을 담아서 지정해 사용한다면 태그 절약등의 의미가 있습니다..

위창에서 link는 외부 스타일 시트 만드는 경로를 지정해 주는 것이고 new는 앞에서 설명한 스타일 시트 지정하는 동일한 과정이 나옵니다..

Top