Dreamweaver 4 간결한 튜토리얼(7. 웹 페이지 레이아웃)
저자:Eve Cole
업데이트 시간:2009-05-30 18:35:53
7. 웹페이지 레이아웃
테이블 사용
테이블은 웹 페이지의 매우 중요한 요소입니다. HTML 자체는 더 많은 레이아웃 방법을 제공하지 않기 때문에 웹 페이지의 미세한 레이아웃을 달성하기 위해 테이블을 사용해야 하는 경우가 많습니다. 웹페이지 제작에 있어서 테이블은 가장 중요한 기술이라고 할 수 있습니다. 테이블을 얼마나 잘 사용하느냐는 웹디자이너의 수준을 그대로 반영합니다.
개체 패널을 클릭합니다. 을 클릭하면 다음 대화 상자가 표시됩니다.
① 행: 테이블의 행 수, 열: 테이블의 열 수
② 너비: 테이블의 너비로, 단위는 Pixels(픽셀 수) 또는 Percent(퍼센트)일 수 있습니다. 픽셀로 정의된 테이블의 크기는 고정되어 있는 반면, 백분율로 정의된 테이블은 브라우저의 크기에 따라 변경됩니다. 두 정의 방법의 차이점은 나중에 자세히 설명합니다.
③ 테두리: 표 줄의 너비입니다.
④ 셀 패딩(Cell Padding): 셀 간격(Cell Spacing): 셀 여백. 소위 셀은 테이블의 각 작은 셀을 나타냅니다.
그림과 같이 설정하면 다음과 같은 형태가 됩니다.
전체 테이블을 선택하려면 테이블 라인을 클릭하세요. 속성 패널에서 이를 확인할 수 있습니다.
① 행, 열: 테이블의 행과 열입니다.
② W, H: 테이블의 너비와 높이. 일반적으로 테이블의 높이는 정의하지 않습니다.
③ CellPad, CellSpace: 셀 간격 및 셀 여백: 표 줄의 너비;
④ 정렬: 테이블 정렬, 테이블을 왼쪽(Left), 중앙(Center), 오른쪽(Right)으로 이동할 수 있습니다.
⑤ : 행 높이 설정을 제거합니다.
: 열 너비 설정을 제거합니다.
: 표 너비 설정을 백분율에서 픽셀로 변환합니다.
: 표 너비 설정을 픽셀에서 백분율로 변환합니다.
⑥ Bg Color: 테이블의 배경색을 설정합니다.
⑦ Brdr Color: 테이블 라인의 색상을 설정합니다.
8 배경 이미지: 테이블의 배경 이미지를 설정합니다. 배경 이미지가 설정된 경우 배경 이미지를 선택하려면 뒷면의 서류 가방 버튼을 클릭하세요.
커서를 셀 중 하나로 이동하면 표시되는 속성 패널이 달라집니다.
① : 셀을 병합합니다(병합할 해당 셀을 먼저 선택해야 합니다).
: 셀을 여러 행이나 열로 분할합니다.
② 수평(Horz) : 셀 내 수평 정렬, 기능은 동일 비슷한;
수직: 셀 내부의 수직 정렬;
③ W, H: 셀의 너비와 높이.
④ Bg: 셀 배경 이미지;
⑤ Bg: 셀 배경색;
⑥ Brdr: 셀 테두리 색상입니다.