처음부터 Dreamweaver MX 2004(4)
저자：Eve Cole
업데이트 시간：2009-05-31 21:02:51
레이어의 사용 <BR> 레이어는 웹페이지의 한 영역입니다. 웹페이지에는 여러 개의 레이어가 있을 수 있으며, 각 레이어가 겹쳐질 수 있다는 점이 가장 큰 매력입니다. 동시에 레이어 간의 계층적 관계를 사용자 정의하는 기능도 있습니다. 레이어 기술을 익히면 웹 페이지에 강력한 페이지 제어 기능을 제공할 수 있습니다.
레이어 생성
레이어의 기능을 설명하기 위해 먼저 그림 1(그림 1)과 같이 간단한 예제 효과를 만듭니다.
그림 1
첫 번째 단계는 Dreamweaver MX 2004에서 새 페이지를 만들고 "삽입→레이어 개체→레이어" 명령을 실행하는 것입니다. 이때 삽입된 레이어인 검은색 직사각형 프레임이 편집 창에 나타납니다. 마우스를 직사각형 프레임 라인 위로 이동하면 마우스가 십자형 화살표 모양으로 변경됩니다. 마우스를 클릭하면 프레임 라인 주위에 8개의 검정색 사각형이 나타나고 왼쪽 상단에 빈 사각형이 나타납니다. 이 레이어가 선택되어 있습니다.
팁: 레이어의 크기를 변경하려면 마우스를 사용하여 단색 사각형을 드래그하고, 레이어의 위치를 변경하려면 왼쪽 상단 모서리에 있는 빈 사각형을 드래그하세요.
두 번째 단계는 레이어에서 마우스를 클릭하고 "China Computer Education News"를 입력한 후 속성 패널 창에서 텍스트를 파란색으로 설정하는 것입니다.
세 번째 단계는 레이어 테두리를 클릭하여 레이어를 선택한 다음 "편집→복사" 명령을 실행하여 현재 레이어를 복사한 다음 편집 창의 다른 빈 영역을 마우스로 클릭하고 "편집→붙여넣기"를 실행하는 것입니다. 명령을 실행하면 편집 창에 다른 레이어가 나타나지만 현재 레이어가 겹쳐 있으므로 두 레이어를 보려면 레이어를 이동해야 합니다.
네 번째 단계는 레이어 중 하나의 텍스트 색상을 검정색으로 변경하고 두 레이어의 위치가 몇 픽셀씩 다르도록 레이어 위치를 이동하여 그림자 효과를 생성하는 것입니다(그림 2).
그림 2
위 작업을 완료한 후 "F12" 버튼을 눌러 미리 보면 IE 브라우저에서 그림 1과 같은 효과를 볼 수 있습니다.
중첩된 레이어
소위 중첩 레이어는 다른 레이어에 생성된 레이어를 의미합니다. 예를 들어 그림 3에 표시된 것은 일반적인 중첩 레이어입니다(그림 3). 실제로 이러한 중첩 레이어를 만드는 방법은 매우 간단합니다. 상위 레이어를 만들고 마우스로 레이어 내부를 클릭한 다음 레이어를 다시 삽입하면 됩니다. 그러나 중첩된 레이어는 하위 레이어가 상위 레이어 내부에 있어야 한다는 의미는 아닙니다.
그림 3
상속의 기능은 하위 레이어의 가시성을 상위 레이어의 가시성과 일관되게 유지하는 것입니다. 많은 동적 웹 페이지 특수 효과는 레이어의 가시성을 제어하여 달성되므로 상위 레이어의 가시성이 변경되면 해당 레이어의 가시성이 변경됩니다. 하위 레이어도 변경됩니다. 또한 상속 관계는 하위 레이어와 상위 레이어의 상대적 위치를 변경하지 않고 유지할 수도 있습니다. 예를 들어 상위 레이어를 드래그하여 이동하면 하위 레이어도 함께 이동합니다. 이는 동적으로 만들 때 매우 유용합니다. 웹페이지.
레이어 Z 순서
테이블과 비교할 때 레이어의 가장 큰 장점은 어느 레이어가 위에 있고 어느 레이어가 아래에 있는지 표시하기 위해 각 레이어에 일련 번호를 설정해야 한다는 것입니다. 즉, 화면의 X, Y 좌표 외에 화면에 수직인 Z축을 인위적으로 추가한다는 의미입니다.
그림 4에서 볼 수 있듯이 왼쪽 영역의 4개 레이어는 오른쪽 영역의 4개 레이어와 확연히 다릅니다. 레이어 순서를 조정하는 방법도 매우 간단합니다. 마우스를 클릭하여 아래쪽에 배치하기만 하면 됩니다. , 중간 및 최상위 레이어가 수행됩니다. 다만, 이 조작 방법은 레이어가 많을 때 조금 번거롭고, 나중에 조정하기도 불편해서 레이어 패널을 통해 조정을 하게 됩니다.
그림 4
먼저 "Window→Layers" 명령을 실행하여 레이어 패널을 활성화합니다. 이때 그림 5와 같은 패널 창이 표시됩니다(그림 5). 여기서는 일련 번호를 변경해야 하는 레이어를 선택하고 삽입하려는 두 레이어 사이에 수평선이 나타나면 마우스를 끌어서 놓아 각 레이어의 "Z 순서"를 변경할 수 있습니다.
그림 5
팁: "Z" 상자 값을 직접 클릭하여 필요한 레이어 수준으로 변경합니다.
레이어를 사용하여 테이블 만들기
레이어를 사용하여 웹 페이지 요소를 찾는 것이 테이블을 사용하는 것보다 훨씬 편리하지만 IE 4.0 이상의 브라우저에서만 레이어 기능을 지원하므로 이전 브라우저를 사용하는 친구들이 열심히 만든 작업을 볼 수 있도록 합니다. 가장 좋은 방법은 레이어를 테이블로 변환하는 것입니다.
첫 번째 단계는 그림 5에 표시된 창 상단에 있는 "겹침 방지" 확인란을 선택하여 각 레이어가 서로 겹칠 수 없도록 하는 것입니다. 그렇지 않으면 변환 프로세스 중에 경고 메시지가 표시됩니다.
두 번째 단계는 "수정→변환→레이어를 테이블로" 명령을 실행하는 것입니다. 이때 그림 6(그림 6)에 표시된 창을 볼 수 있습니다. "테이블 레이아웃" 영역에서 "가장 정확함"을 선택합니다. "투명 GIF 사용"은 각각 두 가지 옵션입니다. 전자는 정확한 변환을 통해 각 레이어에 대한 셀을 생성하여 각 셀 사이의 거리를 보장합니다. 후자는 변환된 테이블의 마지막 행을 투명 GIF 이미지로 채워서 모든 항목이 브라우저는 모두 동일한 모양을 가지고 있습니다.
그림 6
세 번째 단계는 "확인" 버튼을 누른 후 레이어에서 테이블로의 변환 작업을 완료하는 것입니다.
팁: Dreamweaver MX 2004는 표에서 레이어로의 변환 기능도 제공하며 단계는 비슷합니다.
자신만의 웹페이지를 다채롭게 만들고 싶다면 레이어 기술을 익혀야 합니다. 그렇지 않으면 앞으로 동적 웹페이지를 만들 때 많은 어려움을 겪게 되므로 위의 진정한 웹페이지 소개를 통해 깊이 공부하시는 것이 좋습니다. 레이어 기술을 마스터하세요.
