비디오: Template.mp4 2025
Dreamweaver에서 유체 격자 레이아웃을 만든 후 다음 단계는 태그 또는 기타 요소를 추가하여 디자인 섹션을 구성하는 것입니다. Dreamweaver CC에서 페이지를 디자인 할 때 태그를 사용하거나 HTML5 태그를 사용하는 두 가지 옵션이 있습니다.
이 두 유체 레이아웃에서 비슷하게 작동하지만, 태그 및 태그와 같은 HTML5 태그를 사용하면 태그가 웹 페이지에 추가적인 의미와 구조를 추가하기 때문에 몇 가지 장점이 있습니다.
->유체 격자 레이아웃에 태그, HTML5 태그 및 기타 요소를 추가하려면 다음 지침을 따르십시오.
-
삽입 → 구조 → 탐색을 선택하십시오.
또는 구조 삽입 패널에서 탐색을 클릭 할 수 있습니다.
-
삽입 대화 상자에서 유체 요소로 삽입 확인란을 선택합니다.
유체 격자 레이아웃 기능을 사용하는 경우 태그를 추가 할 때이 옵션을 선택해야합니다.
-
삽입 대화 상자에서 클래스 또는 ID 선택기를 사용하여 삽입 할 태그에 대한 새 스타일을 작성한 다음 새 스타일의 이름을 입력 할 것인지 여부를 선택하십시오.
HTML5 태그를 삽입하는 경우에도 세 가지 레이아웃 모두에서 요소의 형식을 지정하는 데 사용할 수있는 해당 클래스 또는 ID 스타일을 만들어야합니다.
클래스 스타일 이름은 점 (.)으로 시작해야하며 ID 스타일 이름은 파운드 기호 (#)로 시작해야합니다.
-
확인을 클릭하십시오.
태그가 레이아웃에 추가되어 레이아웃에 새 상자가 형성되고 해당 스타일 이름이 CSS 레이아웃에 세 번 추가됩니다.
-
레이아웃에 포함 된 초기 태그를 선택한 다음 태그 오른쪽 하단에 표시되는 작은 휴지통 아이콘을 클릭하여 삭제합니다.
유체 격자 레이아웃에 초기 태그를 포함 시키거나 적용한 스타일의 이름을 바꿀 수 있습니다.
-
삽입 → 구조 → 기사를 선택하십시오.
기사 삽입 대화 상자가 열립니다 (머리글 삽입 대화 상자와 유사).
-
삽입 대화 상자에서 유체 요소로 삽입 확인란을 선택합니다.
-
삽입 대화 상자에서 클래스 또는 ID 선택기를 사용하여 삽입 할 태그의 새 스타일을 만들지 또는 새 스타일의 이름을 입력할지 선택합니다.
-
확인을 클릭하십시오.
태그가 레이아웃에 추가되어 레이아웃에 새 상자가 형성되고 해당 스타일 이름이 CSS 레이아웃에 세 번 추가됩니다.
-
6-9 단계를 반복하여 레이아웃에 원하는만큼 요소를 추가하십시오.
하나의 탐색, 하나의 머리말, 두 개의 기사 및 한 개의 바닥 글 을 사용하여 구조 삽입 패널에서 해당 아이콘을 클릭하여 유체 격자 레이아웃에 HTML5 요소를 추가 할 수 있습니다.
코드에서 Dreamweaver는 유체 격자 레이아웃 용으로 만든 각 스타일의 이름에 접두어 fluid- 를 추가합니다.
