비디오: Dreamweaver CS6 tutorial: Positioning elements | lynda.com 2024
Adobe Dreamweaver CS6은 CSS 제어 가상 컨테이너 또는 DIV 태그로 만든 상자 를 사용하여 페이지의 내용을 자유롭게 배치합니다. DIV 태그는 페이지의 콘텐츠 영역을 만드는 데 사용되는 기본 태그입니다.
Dreamweaver의 여러 위치에서 삽입 패널의 레이아웃 섹션을 비롯하여 DIV 태그를 만들 수 있습니다. 각 DIV 태그에는 고유 한 ID 스타일이 지정되어 위치, 모양 및 크기를 제어 할 수 있습니다. 내용을 배치하는 과정에는 DIV 태그를 생성 한 다음 해당 스타일을 작성하는 두 단계가 필요합니다.
Dreamweaver에서는 페이지에서 자유롭게 상자를 그리고 내용을 내부에 배치 할 수있는 AP div 도구를 사용하여이 작업을 쉽게 처리합니다.
CSS는 페이지의 대부분의 컨테이너 요소를 boxes 로 취급합니다. CSS Box 모델 이라고하는이 방법을 사용하면 이러한 요소가 패딩, 여백, 너비, 높이 및 테두리와 같은 균일 한 속성을 공유 할 수 있습니다. CSS는 페이지의 대부분의 요소를 상자 (예: 테이블 또는 목록)로 간주 할 수 있지만 DIV 태그는 텍스트, 이미지 및 중첩 된 배치에 사용할 수있는 가상 상자를 만드는 데 가장 일반적으로 사용됩니다 상자.
AP (Absolute-Positioned) 사업부를 만들려면 다음 단계를 따르십시오.
새 페이지를 만들거나 사이트에서 기존 페이지를여십시오.
삽입 패널에서 레이아웃 범주를 선택합니다.
-
AP div 그리기 도구를 선택합니다.
-
-
커서를 페이지 위로 이동하면 커서가 십자형으로 나타납니다.
페이지의 아무 곳이나 클릭하고 드래그하여 새 AP div를 만듭니다. 마우스 버튼을 놓습니다.4 방향 화살표가 될 때까지 마우스 포인터를 상자 가장자리 위로 이동하십시오. 한 번 클릭하면 핸들이 모든면에 나타납니다.
-
이 핸들 중 하나를 클릭하고 드래그하여 상자의 가로 또는 세로 크기를 조정합니다.
-
상자를 이동하려면 왼쪽 상단 모서리에있는 탭을 클릭하고 끌어 상자에 원하는 위치에 놓습니다.
-
속성 관리자를 살펴보면 많은 DIV 속성뿐만 아니라 이름도 볼 수 있습니다.
-
CSS 스타일 패널이 열려 있지 않으면 창 → CSS 스타일을 선택하여 엽니 다. 전체 패널 아래에서 스타일 시트 ()의 왼쪽을 클릭하여 펼칩니다.
새로 만든 AP div에 첨부 된 새 # apDiv1 ID 스타일이 표시됩니다. 새 DIV가 작성 될 때마다 Dreamweaver는 apDiv에 해당 번호를 생성 순서대로 지정합니다.
-
새로운 내용을 입력, 붙여 넣기 또는 삽입하려면 새 상자 안을 클릭하십시오.
페이지에 AP div를 그릴 때 두 가지 일이 발생합니다. Dreamweaver에서 태그를 삽입하여 상자를 만들고 DIV의 위치, 너비, 높이 및 기타 속성을 저장하는 CSS ID 선택기를 만듭니다.
-
AP 사업부를 만든 후에 직접 콘텐츠를 입력, 붙여 넣기 또는 삽입 할 수 있습니다. 또한 속성 관리자에서 모든 DIV에 클래스 규칙을 할당 할 수 있습니다. 대개 콘텐츠 형식을 처리하고 ID 선택기가 위치 및 크기를 제어하도록 남겨 둡니다.
