Dreamweaver 슈퍼 팁 텍스트 효과

응용 목표: 텍스트 특수 효과 만들기

응용 소프트웨어: Dreamweaver MX

작업 난이도: ★★☆☆☆

일반적으로 사용되는 웹 페이지 생성 도구 Dreamweaver MX는 웹 페이지를 만들 수 있을 뿐만 아니라 CSS 필터를 사용하여 텍스트 또는 텍스트에 간단한 특수 효과를 수행할 수도 있습니다. 사진. Dreamweaver에서 특수 효과 텍스트를 만드는 방법을 알아보려면 몇 가지 예를 살펴보겠습니다.

Halo Word는

먼저 Dreamweaver를 시작하고 새 문서에 1×1 표를 삽입하고 테두리를 0으로 설정한 다음 수정해야 할 텍스트를 입력합니다.

이 부동 패널을 열려면 오른쪽에 있는 부동 패널에서 "디자인→CSS 스타일"을 클릭합니다.

패널 오른쪽 하단에 있는 네 개의 버튼은 CSS 스타일 추가, 생성, 편집 및 삭제입니다.

참고: Dreamweaver에서 CSS 필터는 표, 셀, 그림 등과 같이 영역 제한이 있는 개체에만 사용할 수 있고 텍스트에는 직접 사용할 수 없으므로 추가해야 하는 텍스트를 특수 문자로 넣어야 합니다. 미리 표에 효과를 적용한 다음 표에 CSS 스타일을 적용하여 텍스트에 특수 효과를 만듭니다.

그림 1 새 CSS 스타일 만들기

새 CSS 스타일 버튼을 클릭하면 그림 1과 같은 대화 상자가 나타납니다.

"유형" 항목에 대해 "사용자 정의 스타일 만들기"를 선택하고 "정의 위치"에 대해 "이 문서에만 해당"을 선택한 다음 확인을 클릭하면 유형 패널에서 CSS 스타일 정의 대화 상자가 나타납니다(그림 2). 글꼴, 글꼴 크기, 색상 및 기타 콘텐츠를 정의합니다. 이 예에서는 공식 스크립트로 글꼴을 선택하고 크기는 50픽셀로, 색상은 흰색으로 선택합니다.

그림 2 텍스트 효과를 생성하기 위해 CSS 스타일을 정의하려면

가장 중요한 것은 확장 패널(그림 3)의 설정입니다. 모든 CSS 필터는 "시각적 효과" 아래의 필터에 나열되어 있습니다. 텍스트에 빛나는 가장자리 효과가 있습니다. Glow 필터의 구문 형식은 Glow(Color=?, Strength=?)이며 두 가지 매개변수가 있습니다. Color는 후광의 색상을 결정하거나 ffffff와 같은 16진수 코드 또는 Red 및 Yellow와 같은 단어를 사용할 수 있습니다. 강도는 0에서 255까지의 광도를 나타냅니다. 이 예에서는 색상을 빨간색으로 설정하고 광도를 8로 설정한 다음 OK를 설정합니다.

그림 3 글로우 필터를 설정한 후

이 CSS 스타일을 테이블에 적용합니다. 커서를 셀로 이동시킨 후 문서

창

문서 창에서는 변경 사항을 볼 수 없습니다. IE에서 미리 보려면 F12 키를 누르면 효과가 나타납니다(그림 4).

그림 4 후광 효과는 어떻습니까

? Photoshop의 필터 효과보다 열등하지 않습니다. 이런 특수효과 단어 몇개를 웹페이지에 넣으면 웹페이지가 훨씬 더 아름다워지고, PrintScreen 키를 이용해 화면을 캡쳐한 후 그리기 프로그램에 붙여넣고 저장해서 별도의 그림으로 만들 수도 있습니다.

그림자 단어

. 즉, Drowshadow와 Shadow가 생성하는 효과는 약간 다릅니다.

그림자 단어를 만드는 단계는 기본적으로 후광 단어를 만드는 단계와 동일합니다. CSS 스타일에서 필터를 다시 선택하면 됩니다.

Drowshadow 필터의 구문은 다음과 같습니다: DropShadow(Color=?, OffX=?, OffY=?, Positive=?).

그중 Color는 그림자의 색상을 나타내며 16진수로 표시됩니다. OffX와 OffY는 각각 텍스트 위치로부터의 그림자 편차의 양을 픽셀 단위로 나타내며, 1은 모든 불투명에 대한 그림자 생성을 나타냅니다. 요소, 0 모든 투명 요소에 대해 보이는 그림자 생성을 나타냅니다.

그림 5 Shadow Word 효과

예를 들어 필터가 DropShadow(Color=6699cc, OffX=2, OffY=2, Positive=1)로 설정된 경우 효과는 그림 5와 같습니다.

마스크 단어

CSS 필터는 텍스트 부분을 마스크로 처리할 수 있는 마스크 기능도 제공합니다. 배경에 적절한 그림을 사용하면 아름다운 속이 빈 텍스트 효과를 생성할 수 있습니다.

문서 창에 1×1 표를 삽입하고 문서 창의 왼쪽 하단에 있는 레이블을 클릭하여 전체 표를 선택한 다음 속성 관리자의 배경 이미지에서 적절한 그림을 선택합니다(그림 6 참조). 그런 다음 필요한 텍스트를 입력하십시오.

그림 6

다음으로 셀에 마스크 필터를 추가합니다. 단계는 이전 두 예제와 유사합니다. 필터에서 마스크(색상=?)를 선택합니다. 이 매개변수는 마스크의 색상을 결정합니다.

참고: 이 예에서 텍스트의 색상 선택은 중요하지 않습니다. 최종 효과에서 텍스트가 비어 있고 색상이 표시되지 않기 때문입니다.

그림 7 마스크 단어 효과를

설정한 후 이 CSS 스타일을 셀에 적용한 다음 F12 키를 눌러 효과를 확인합니다(그림 7).

참고: 배경 이미지는 테이블 전체에 추가되어 레이블에 해당하고, CSS 스타일은 셀에 추가되어 레이블에 해당합니다.

동적

캐릭터를 생성하려면 흐림 효과를 생성하는 데 사용되는 Blur 필터를 사용해야 합니다. 해당 구문 형식은 Blur(Add=?, Direction=?, Strength=?)입니다. Add 매개변수는 부울 값입니다. 일반적으로 필터를 사진에 사용할 때는 0을 사용하고, 텍스트에 사용할 때는 1을 사용합니다. 방향은 흐림 방향을 나타내고 단위는 각도를 나타냅니다. 블러 이동 값이며 단위는 픽셀입니다. 예를 들어 Blur(Add=1, Direction=90, Strength=150)를 정의하면 미리보기에서 그림 8과 같은 효과를 볼 수 있습니다.

그림 8 동적 단어 효과

실제로 이미지에 흐림 효과를 생성할 수 있는 흐림 필터와 같은 CSS의 많은 필터를 사용하여 이미지를 수정할 수도 있습니다. 이러한 필터를 능숙하게 적용할 수 있다면 전문적인 이미지 처리 소프트웨어 없이도 꽤 좋은 사진 효과를 만들 수 있습니다.