Dreamweaver에서 1 열 유체 그리드 레이아웃을 만드는 방법 - 사용자 앞에

비디오: 드림위버) -테이블 만들고 수정하기 - Create and modify tables in Dreamweaver 2025

Dreamweaver에서 복잡한 유체 그리드 디자인을 작성하기 전에 간단한 방법을 시도해보십시오. 다음과 같은 쉬운 지침에 따라 간단한 1 열 유체 격자 레이아웃을 작성하십시오.

파일 → 새로 만들기를 선택하십시오.

새 문서 창이 열립니다. 참고: 새 유체 그리드 레이아웃 작업을 시작하기 전에 사이트 설정 프로세스를 완료했는지 확인하십시오.
화면 왼쪽에서 Fluid Grid Layout을 선택하십시오.

새 문서 윈도우 옵션이 유체 격자 옵션으로 변경됩니다.
세 레이아웃 각각에 원하는 열 수를 지정하십시오.

열을 추가 또는 제거하려면 각 열의 텍스트 필드를 차례로 선택하고 원하는 열 수를 입력하십시오.
각 레이아웃에서 처리 할 브라우저 창의 비율을 지정하십시오.

각 레이아웃 아래의 텍스트 필드를 차례로 선택하고 디자인을 브라우저 창에서 볼 때 레이아웃에 적용 할 공간의 백분율을 나타내는 숫자를 입력합니다. 예를 들어 기본적으로 바탕 화면 레이아웃은 사용 가능한 공간의 90 %를 차지하도록 설정되어 있지만 디자인 공간을 늘리고 여유 공간을 줄이려면 95 %로 변경할 수 있습니다.
열 너비의 백분율을 변경하여 각 열 사이의 여백 공간을 변경합니다.

기본적으로 Dreamweaver에서는 사용 가능한 공간의 25 %를 차지하도록 각 여백을 설정합니다.
드롭 다운 목록을 사용하여 Doctype을 지정하십시오.

기본적으로 유체 격자 레이아웃은 HTML5 doctype을 사용하여 작성됩니다. doctype을 웹 사이트에서 사용되는 다른 형식과 더 호환되도록 변경해야하는 경우가 아니라면 HMTL5는 반응 형 웹 디자인에 권장되는 옵션입니다.
만들기를 클릭하십시오.

다른 이름으로 저장 대화 상자가 열리고 CSS 파일을 저장할 수 있습니다.
CSS 파일의 이름을 입력하고 저장을 클릭하십시오.

새 HTML 파일이 Dreamweaver 작업 영역에서 열리지 만 아직 저장되지 않았습니다. 이름을 지정한 CSS 파일이 저장되고 이름이 파일 패널에 표시됩니다.

참고: Dreamweaver에서 다른 유형의 페이지를 만드는 과정과 달리 CSS 파일이 먼저 저장되고 HTML 파일은 이후 단계에서 저장됩니다.
파일 선택 → 저장

다른 이름으로 저장 대화 상자가 열립니다.
HTML 파일의 이름을 입력하고 확인을 클릭하십시오.

다른 이름으로 저장 대화 상자가 닫히고 Fluid 그리드 레이아웃에 보일러 플레이트라는 두 개의 추가 파일이 필요하다는 내용의 알림이 Dreamweaver에 나타납니다. css하고 응답하십시오. 분. js.
확인을 클릭하여 상용구를 복사합니다.css하고 응답하십시오. 분. js 파일을 사이트 폴더에 저장하십시오.

세 파일이 모두 [파일] 패널에 추가되고 Dreamweaver 작업 영역에 새로 이름이 지정된 HTML 파일로 돌아갑니다.
작업 영역의 맨 위에있는 제목 필드에 텍스트를 입력하여 페이지에 제목을 지정하십시오.