드림위버로 홈페이지 만들기

18. 스타일 시트 다루기
1) Window> Styles 명령을 선택한 후 Styles 팔레트 대화 상자가 나타나면 Style Sheet 버튼을 클릭합니다.
2) Edit Style Sheet 대화 상자에서 새로운 스타일을 만들기 위해 New를 클릭합니다.
3) 사용자 정의 스타일을 만들기 위해 옵션 중에 Make Custom Style 을 선택하고 새로운 스타일에 대한 이름을 줍니다.
. Make Custom Style : 사용자 정의 스타일
. Redefine HTML Tag : 기존에 만들어진 HTML 태그(H1, H2 등등)의 포맷을 변화시키는 스타일을 만들 수 있습니다. 이것을 선택했으면 팝업 메뉴로부터 편집할 태그를 선택합니다.
. Use CSS Selector : CSS selector에 의해 정의된 문서의 일정 부분에 대한 스타일을 만들 수 있습니다. 이것을 선택했으면 TD H2 또는 #myLayer와 같이 셀렉터의 종류를 입력하거나 선택할 수 있습니다.
4) New Style 대화 상자에서 OK 버튼을 클릭하면 대화 상자가 나옵니다. Category 항목을 이동하면 원하는 포맷을 설정할 수 있습니다.
Line Height(줄 간격)
"*"가 의미하는 것은 드림위버에서 편집시 스타일이 정확히 나타나지 않지만 웹 브라우저에서 보면 스타일의 결과를 알 수 있다는 것입니다).
5) Block 항목을 선택하고 포맷을 설정. Text Indent(들여쓰기)
6) OK 버튼을 누름. 스타일 내용들이 대화 상자 하단에 나타나게 됨
7) Done 버튼을 누르고 Styles 팔레트 대화 상자를 보면 스타일이 등록된 것을 알 수 있음. Text> Custom Style 명령의 서브 메뉴에도 스타일이 나타나는 것을 확인할 수 있습니다.

사용자 정의 스타일 적용하기
Custom style(사용자 정의 스타일)을 적용하려면
1) Window> Styles 명령을 선택함
2) 스타일을 적용할 텍스트를 선택
. 스타일을 적용하고 싶은 텍스트를 (블록)선택함
. 문단 전체에 스타일을 적용하려면 문단 내에 커서를 클릭함
. 스타일을 적용할 태그를 선택하고 싶으면 작업 문서 창의 좌측 하단에 있는 태그 셀렉터에서 태그를 선택함. 아니면 스타일 팔레트 대화 상자의 상단에 있는 팝업 메뉴에서 태그를 선택할 수도 있습니다.
. 한 문단 내의 텍스트 중 일부분만 블록을 지정하여 선택하면 선택 영역에만 스타일을 적용할 수 있음
3) 스타일을 적용할 텍스트를 선택했으면 스타일 팔레트에서 스타일명을 클릭합니다.
또는 Text> Custom Style 명령의 서브 메뉴 중에 적용하고자 하는 스타일을 선택합니다.

기존의 HTML 태그 수정하기
수정 방식
1) Window> Styles 명령을 선택한 후 Styles 팔레트 대화 상자가 나타나면 Style Sheet 버튼을 클릭합니다.
2) Edit Style Sheet 대화 상자에서 새로운 스타일을 만들기 위해 New를 클릭합니다.
3) Edit Style Sheet 대화 상자에서 New를 선택하면 New Style 대화 상자가 나타납니다. 기존의 HTML 태그를 수정하기 위해 Redefine HTML Tag를 선택한 후 대화 상자 하단의 팝업 메뉴로부터 H1이란 태그를 선택합니다. 일반적으로 이 태그는 제목 등에 적용하는 태그입니다.
4) New Style 대화 상자에서 OK 버튼을 클릭하여 좌측에 보이는 카테고리 항목을 이동하면 원하는 포맷을 설정할 수 있습니다.
(참고로 대화 상자에서 "*"가 의미하는 것은 드림위버에서 편집시 스타일이 정확히 나타나지 않고, 웹 브라우저에서 봐야 스타일의 결과가 제대로 나오는 것들입니다).

19. 라이브러리 다루기