매우 아름 다운 Div+CSS 레이아웃 입문 강좌 1/5 페이지

웹 제작 에 있어 서 CSS,HTML,DHTML,XHTML 등 많은 용어 가 있다.아래 의 글 에서 우 리 는 HTML 에 관 한 기본 지식 을 사용 할 것 입 니 다.당신 이 이 입문 강 좌 를 배우 기 전에 당신 이 이미 일정한 HTML 기반 을 가지 고 있다 는 것 을 확인 하 십시오.다음은 DIV+CSS 를 사용 하여 웹 레이아웃 디자인 을 시작 합 니 다.
모든 디자인 의 첫 번 째 단 계 는 구상 이다.구상 이 다 되 었 다.일반적으로 PhotoShop 이나 FireWorks(이하 PS 또는 FW 로 약칭)등 이미지 처리 소프트웨어 로 제작 해 야 할 인터페이스 구 조 를 간단하게 구성 해 야 한다.다음은 내 가 구상 한 인터페이스 구조 그림 이다.

다음 에 우 리 는 구상 도 에 따라 페이지 의 구 조 를 기획 하고 이 그림 을 자세히 분석 해 야 한다.우 리 는 그림 이 대체적으로 다음 과 같은 몇 가지 부분 으로 나 뉘 는 것 을 발견 하기 어렵 지 않다.
1.상단 부분 에 로고,MENU 와 Banner 사진 이 포함 되 어 있 습 니 다.2.내용 부분 은 사 이 드 바,주체 내용 으로 나 눌 수 있다.3.저작권 정보 포함.이상 의 분석 을 통 해 우 리 는 쉽게 구 조 를 할 수 있다.우리 디자인 층 은 다음 과 같다.

위의 그림 에 따 르 면 나 는 실제 페이지 레이아웃 도 를 하나 더 그 려 서 하층부 의 끼 워 넣 는 관 계 를 설명 했다.이렇게 하면 이해 하기 가 더욱 간단 해 질 것 이다.

DIV 구 조 는 다음 과 같 습 니 다.☆body{}/*이것 은 HTML 요소 입 니 다.구체 적 으로 설명 하지 않 겠 습 니 다*/└\#Container{}/*페이지 층 용기*/├\#Header{}/*페이지 머리*/├\#PageBody{}/*페이지 주체*/☆├\#Sidebar{}/*사 이 드 바*/☆└\#MainBody{}/*주체 내용*/└\#Footer{}/*페이지 아래쪽*/
이로써 페이지 레이아웃 과 계획 이 완성 되 었 습 니 다.그 다음 에 우리 가 해 야 할 일 은 HTML 코드 와 CSS 를 쓰기 시작 하 는 것 입 니 다.
1 2 3 4 5 다음 페이지 전문 을 읽다