Dreamweaver에서 요소를 수레에 맞추는 방법 - 더미

디자이너는 Dreamweaver에서 웹 페이지의 왼쪽 또는 오른쪽에 이미지, 태그 또는 다른 요소를 정렬 한 다음 해당 요소 주위에 텍스트 또는 기타 내용을 래핑하는 경우가 있습니다. 이미지는 열의 오른쪽에 정렬되어 텍스트가 왼쪽에 나란히 배치됩니다. 다음 단계에서는 이와 같은 스타일을 만드는 방법을 알아 봅니다.

신용: istockphoto의 이미지. com

CSS는 이와 같은 요소를 정렬 할 때 많은 이점을 제공하지만,이 스타일을 설정하는 방법은 float 옵션을 사용하기 때문에 처음에는 예상하지 못했던 것입니다.

이미지와 같은 요소를 페이지의 왼쪽 또는 오른쪽으로 부유시킬 수 있다는 것을 이해하면이 목표를 달성하는 스타일을 만드는 것이 매우 쉽습니다. 이 연습에서는 페이지의 왼쪽과 오른쪽으로 이미지를 정렬하는 데 이상적인 두 가지 스타일을 작성하는 방법을 배우고 필요에 따라 약간의 여백을 채 웁니다.

Dreamweaver CC에 포함 된 CSS 레이아웃에는 요소를 오른쪽과 왼쪽으로 정렬하는 데 사용할 수있는 부동 스타일이 있습니다. 이러한 클래스 스타일의 이름이 지정됩니다. fltlft (당신은 그것을 추측했다, 떠났다)와. fltrt (오른쪽 플로트 용).

이미지와 다른 요소를 페이지의 왼쪽과 오른쪽에 정렬하는 데 사용할 수있는 두 가지 클래스 스타일을 만들려면 다음 단계를 따르십시오.

1. CSS Designer Selectors 패널에서 더하기 기호를 클릭합니다.

   페이지의 내용에 따라 스타일 이름을 입력 할 수있는 새 스타일 이름 또는 빈 필드가 선택기 패널에 추가됩니다.

2. Dreamweaver에서 패널에 추가 한 이름을 두 번 클릭하여 선택하고 새 스타일에 사용할 이름으로 변경하거나 클릭하여 빈 필드를 선택하고 이름을 입력합니다.

   이름을 추가하지 않은 경우 빈 필드에 원하는 이름을 입력하십시오. 스타일에 원하는 이름을 붙일 수 있지만 클래스 스타일을 만들면 이름 앞에 마침표를 입력하고 ID 스타일에는 # 기호를 입력해야합니다.

3. 새 이름을 두 번 클릭하고 원하는대로 편집합니다.

   선호하는 스타일을 지정할 수 있지만 정렬 스타일은 일반적으로 fltrt 및 fltlft로 축약됩니다.이 스타일은 각각 오른쪽 및 오른쪽으로 나타납니다.

   예를 들어, 왼쪽에 요소를 정렬하는 스타일을 만드는 경우 이름을 지정합니다. fltlft.

4. 속성 패널에서 왼쪽에서 왼쪽으로 설정하는 아이콘을 클릭합니다.

   

5. [속성] 패널의 [여백] 설정을 사용하여 부동 요소 주위에 여백을 만듭니다.

   float 설정과 반대쪽에 여백 공간을 추가하는 것이 좋습니다. 이미지를 왼쪽으로 뜨는 스타일을 만드는 경우 오른쪽 여백 필드에 5 또는 10 픽셀의 공간을 추가하십시오.이미지를 페이지의 왼쪽에 정렬하면 이미지와 그 이미지 옆에있는 다른 요소 사이에 여백이 생깁니다.

6. 페이지에서 정렬 할 이미지 또는 기타 요소를 선택하십시오.

7. 속성 관리자의 클래스 드롭 다운에서 만든 스타일의 이름을 선택합니다.

   스타일을 만들 때 정의한 스타일 규칙이 자동으로 적용됩니다. 텍스트 페이지에서 이미지를 선택하면 이미지가 페이지의 왼쪽으로 이동하고 이미지와 텍스트 사이에 여백을두고 텍스트가 둘러 싸게됩니다.

8. Float을 Right로 설정하고 Box 카테고리의 왼쪽 여백 필드에 5 ~ 10 픽셀의 여백 공간을두고 다시 Float을 Left로 설정하고 5 ~ 10 픽셀의 여백 공간으로 다시 1 ~ 7 단계를 반복합니다. Box 범주의 오른쪽 여백 필드에 입력하십시오.