웹 페이지 제작에는 CSS, HTML, DHTML, XHTML 등과 같은 많은 용어가 있습니다. 다음 기사에서는 HTML에 대한 몇 가지 기본 지식을 사용할 것입니다. 이 입문 튜토리얼을 공부하기 전에 HTML에 대한 특정 기본 지식이 있는지 확인하십시오. DIV+CSS를 단계별로 사용하여 웹 페이지 레이아웃을 디자인해 보겠습니다.
모든 디자인의 첫 번째 단계는 구상하는 것입니다. 일반적으로 말하면 PhotoShop이나 FireWorks(이하 PS 또는 FW라고 함) 및 기타 이미지 처리 소프트웨어를 사용하여 만들어야 할 인터페이스 레이아웃을 간단히 그려야 합니다. 다음은 제가 생각한 인터페이스 레이아웃 다이어그램입니다.
다음으로, 개념 다이어그램을 기반으로 페이지 레이아웃을 계획해야 합니다. 다이어그램을 주의 깊게 분석하면 그림이 대략 다음과 같은 부분으로 나누어져 있음을 쉽게 알 수 있습니다.
1. 로고, 메뉴 및 배너 사진이 포함된 상단 부분
2. 콘텐츠 부분은 사이드바와 메인 콘텐츠로 나눌 수 있습니다.
3. 하단에는 일부 저작권 정보가 포함되어 있습니다.
위의 분석을 통해 아래와 같이 디자인 레이어를 쉽게 배치할 수 있습니다.
위 그림을 바탕으로 레이어의 중첩 관계를 설명하기 위해 실제 페이지 레이아웃 다이어그램을 또 그려서 이해하기 쉽도록 했습니다.
DIV 구조는 다음과 같습니다.
│body {} /*HTML 요소이므로 자세한 내용은 설명하지 않겠습니다*/
└#Container {} /*페이지 레이어 컨테이너*/
├#Header {} /*페이지 헤더*/
├#PageBody {} /*페이지 본문*/
│ ├#사이드바 {} /*사이드바*/
│ └#MainBody {} /*주요 콘텐츠*/
└#Footer {} /*페이지 하단*/
이제 페이지 레이아웃과 기획이 완료되었고, 다음으로 해야 할 일은 HTML 코드와 CSS 작성을 시작하는 것입니다.
다음으로 바탕 화면에 새 폴더를 만들고 이름을 "DIV+CSS Layout exercise"로 지정합니다. 폴더 아래에 두 개의 빈 메모장 문서를 만들고 다음 내용을 입력합니다.
이것이 XHTML의 기본 구조이며 이름을 index.htm으로 지정하고 다른 메모장 문서의 이름을 css.css로 지정합니다.
다음으로 <body></body> 태그 쌍에 DIV의 기본 구조를 작성합니다. 코드는 다음과 같습니다.
<div id=container><!--페이지 레이어 컨테이너-->
<div id=Header><!--페이지 헤더-->
</div>
<div id=PageBody><!--페이지 본문-->
<div id=사이드바><!--사이드바-->
</div>
<div id=MainBody><!--주요 내용-->
</div>
</div>
<div id=Footer><!--페이지 하단-->
</div>
</div>
앞으로 코드를 더 쉽게 읽을 수 있도록 관련 주석을 추가해야 합니다. 다음으로 css.css 파일을 열고 CSS 정보를 작성합니다.