DreamWeaver 테이블의 마법같은 활용 - 와이어프레임 제작에 대한 자세한 설명 (5)
저자:Eve Cole업데이트 시간:2009-05-30 18:36:21
4> 스페이서 보더 제작
"간격 테두리"는 웹 페이지에서 각 열이나 채널의 항목 목록을 배열하는 데 주로 사용됩니다. 모든 사람의 이해를 돕기 위해 저자는 제작이 완료된 후 먼저 렌더링을 다음과 같이 보여줍니다.
다음은 해당 생산 공정입니다(예를 들어 3프레임 간격 생산).
먼저, 그림과 같이 1행 3열의 테이블 개체를 웹 페이지에 삽입합니다. 삽입 과정에서 "Border"를 0으로, "CellSpace"를 2로, "CellPad"를 1로 직접 설정합니다.
참고: 여기의 설정은 속성 패널의 설정과 완전히 동일합니다.
마우스 왼쪽 버튼을 누른 채 각 셀을 드래그하면 3개의 셀 개체를 동시에 선택할 수 있습니다. 속성 패널에서 "Bgcolor"를 "Red"로 설정합니다. 이 색상은 여백 테두리의 색상입니다.
간격 효과를 얻기 위해 여기서는 "중첩 테이블" 생성을 사용합니다. 저자는 먼저 "중첩된" 테이블을 디자인할 때 주의할 점을 알려준다. 셀에 테이블을 삽입할 때 셀 내용의 위치 속성을 "Horz"(왼쪽 및 오른쪽 위치)와 "Vert"로 설정하는 것이 가장 좋다. "(위쪽 및 아래쪽 위치)입니다. 중첩된 테이블의 크기를 다시 조정할 때 불필요한 문제를 피하려면 "왼쪽" 및 "위쪽"으로 설정하십시오. 이를 수행하려면 오른쪽 하단 모서리를 드래그하기만 하면 됩니다. 다음과 같이
세 개의 셀에 테이블 개체를 차례로 삽입하고 "Border", "CellSpace", "CellPad"를 모두 "0"으로 설정하고 속성 패널에서 각 테이블의 배경색을 동일한 페이지로 설정합니다. 배경색은 " 또 다른 포인트는 비례 표시 상태에서 "너비"와 "높이"를 모두 "100%"로 설정하여 그리드 크기에 따라 전체 단위를 자동으로 채울 수 있도록 하는 것입니다.
이제 효과를 미리 볼 수 있습니다.
홈통 테두리 제작에 있어 가는 선 테두리와의 차이점은 테두리 1의 너비가 기존의 "CellSpace"가 아닌 "CellPad" 속성을 통해 구현된다는 점입니다. 여기서 "CellPad"는 셀의 거리를 의미합니다. 이 예에서 콘텐츠로 삽입한 다른 세 개의 테이블도 의심의 여지가 없습니다. 그런 다음 "CellSpace"를 조정하면 "6" 단위의 효과와 같이 각 테두리 사이의 간격을 변경할 수 있습니다.
마찬가지로 비슷한 방법으로 수직 여백 테두리를 만들 수 있습니다.
위에서 우리는 웹페이지에 사용되는 몇 가지 일반적인 테두리 유형의 제작 과정, 원리 및 조정 방법을 주의 깊게 분석했습니다. 나는 효과 비교의 형태가 모든 사람이 각자의 차이점을 이해하는 데 더 도움이 되고, 그에 따라 인상이 깊어진다고 믿습니다. 물론, 비슷한 디자인 아이디어에 따라 모두가 더 많은 경계 효과를 찾을 수 있기를 바랍니다.