웹 재구성 기술 및 일반적인 문제에 대한 솔루션
1. xhtml+CSS 스킬
●리팩토링 전 준비 작업:
1. PSD 렌더링을 가져옵니다. PSD여야 합니다. 따라서 직접 더 자유롭게 슬라이스할 수 있습니다.
2. 먼저 PSD를 분할하지 않고 웹페이지를 생성하고 이름을 index_psd.html로 지정합니다(이 페이지는 참조용입니다).
3. 필요한 몇 가지 폴더인 image(사진용), css(css 스타일 파일용) 및 js(js 파일용)를 준비합니다.
●준비가 완료되면 먼저 전체 페이지의 구조를 분석합니다. 페이지의 구조를 분석하려면 먼저 전체를 본 다음 부분을 살펴보세요. 페이지의 가장 큰 부분이 상하로 병치되어 있는지, 좌우로 배열되어 있는지 살펴보세요. 페이지의 큰 섹션 구조를 명확하게 본 후에는 페이지의 가장 기본적인 블록을 구축할 수 있습니다. 예를 들어, 페이지에 상단, 중간, 하단 구조가 있는 경우 다음과 같이 작성할 수 있습니다.
<div id=”header”></div>//헤더 및 탐색 등을 배치합니다.
<div id="content"></div>//페이지의 테마 콘텐츠
<div id=”footer”></div>//페이지 바닥글 저작권 표시 등
●CSS 작성 시 index_psd.html 파일을 사용해야 하며, 이 파일을 DW로 열고 보기 모드를 선택하면 CSS 설정에 대한 참조를 제공하기 위해 보조선을 당겨서 각 블록의 길이와 너비를 측정할 수 있습니다. 이것의 장점은 재구성된 페이지가 1픽셀까지 정확할 수 있다는 것입니다.
●블록을 작성할 때마다 IE와 ff를 사용하여 효과를 테스트해야 문제를 신속하게 발견하고 해결할 수 있습니다. 각 블록에 내용이 없으면 배경색을 추가하는 것이 가장 좋습니다.
●큰 부분을 작성한 후 큰 부분의 내용을 분석하는 것도 같은 원리입니다. 예를 들어 콘텐츠 페이지는 왼쪽과 오른쪽에 두 개의 섹션이 있는 것처럼 보입니다. 시간이 지나면 코드를 다음과 같이 작성할 수 있습니다.
<div id=”header”></div>//헤더 및 탐색 등을 배치합니다.
<div id="content">//페이지의 테마 콘텐츠
<div class="content-2-1"></div>//왼쪽
<div class="content-2-2"></div>//오른쪽
</div>
<div id=”footer”></div>//페이지 바닥글 저작권 표시 등
내용-2-1의 표 2는 2개의 열로 나누어져 있으며, 2-1은 왼쪽 열, 2-2는 오른쪽 열을 나타냅니다. 이 열 구분 방법은 페이지 코드를 여러 개로 나누어 볼 때 더 직관적이게 할 수 있습니다. 열, 이 장점이 더 분명합니다.
●뉴스 목록, 기사 목록 등을 사용하는 것이 가장 좋습니다.
<ul>
<li>뉴스 제목 1< >
<li>뉴스 제목 2< >
.........
<li>뉴스 제목< >
</ul>
●열 목록과 설명을 함께 사용하는 것이 가장 좋습니다.
<DL>
<dt>열 1</dt>
<dl>1열 설명</dl>
<dt>열 2</dt>
<dl>2열 설명</dl>
</dl>
●CSS 파일 정의 시작 부분에 다음 문을 추가하는 것이 가장 좋습니다.
본문,html{ 높이:100% }
*{ 여백:0px;
●큰 블록의 경우 Overflow::hidden을 설정하여 컨테이너가 늘어나 전체 페이지의 레이아웃이 손상되지 않도록 하는 것이 가장 좋습니다.
2. DIV+CSS 문제
1. IE6 예상치 못한 공백 문제:
여러 개의 작은 블록이 큰 블록에 나란히 놓여 있으면 작은 블록의 너비의 합이 큰 블록의 너비와 같습니다. 이는 FF 등 다른 브라우저에서는 문제가 되지 않지만 IE6에서는 이러한 문제가 발생합니다. 한 블록을 표시할 수 없으면 아래로 밀려납니다. 이때 표시할 작은 블록의 CSS를 인라인으로 설정할 수 있습니다. 그래도 문제가 해결되지 않으면 각 블록의 너비를 1~2픽셀씩 줄이세요.
2. IE6 고스팅 문제:
때때로 IE6에서는 div 콘텐츠 끝에 있는 몇 개의 문자가 큰 DIV의 하단에 반복적으로 나타나는데, 이는 FF와 같은 다른 브라우저에서는 나타나지 않습니다. 이 문제를 해결하는 방법에는 두 가지가 있습니다. 1) 주석을 삭제합니다. 2) 이 DIV 뒤에 <div class="clear"></div>를 추가합니다. CSS 스타일을 다음과 같이 정의합니다.
.분명한 {
글꼴 크기: 1px;
명확함: 둘 다;
가시성: 숨김;
너비: 1px;
}
두 번째 방법을 사용하는 것이 좋습니다. 주석이 제거되면 코드의 가독성이 영향을 받습니다.
3． IE6이 중앙에 위치할 수 없는 문제:
일반적으로 div에 대한 CSS 스타일을 설정하는 한(id를 1로 설정): margin:0px auto;를 보유하는 컨테이너의 가운데에 div를 배치할 수 있습니다(id를 0으로 설정). 다음과 같이:
<div 아이디="0">
<div id="1"> … </div>
</div>
하지만 IE6은 작동하지 않습니다. 이때 div0: text-align: center;의 CSS를 설정할 수 있습니다.
4. IE6의 연결된 사진에 예기치 않은 테두리가 나타납니다.
IE6에서는 링크된 이미지에 테두리가 보기 흉한 경우가 있는데 이는 <a>로 인해 발생합니다. 이는 CSS에서 { border:0px;}을 설정하여 제거할 수 있습니다.
5. FF의 DIV 내부 콘텐츠가 탈선했습니다.
때때로 IE에서는 정상적으로 보이는 콘텐츠가 FF에서 보일 수 있지만 DIV 내부의 콘텐츠는 외부로 나갔습니다. 이러한 상황은 div에 테두리가 있을 때 특히 두드러집니다. 이는 IE에서 div의 높이를 설정한 후 div 내부의 내용이 div보다 높으면 div의 높이가 자동으로 증가하기 때문입니다. 하지만 FF는 그렇게 유연하지 않습니다. 높이가 제한되어 있으면 자체적으로 변경되지 않습니다. 이때 높이를 재설정하여 이 문제를 해결할 수도 있고, 높이를 자동으로 설정할 수도 있습니다.
6． FF에서 영역이 예기치 않게 사라집니다.
FF에서는 IE의 일반적인 레이아웃이 사라졌습니다. 이 문제는 페이지 하단에 있는 저작권 블록에서 자주 발생합니다. 이 문제는 이 영역에 다음을 추가하여 해결할 수 있습니다.
현재로서는 다른 문제가 생각나지 않습니다. 재건축 과정에는 항상 설명할 수 없는 문제가 있을 것입니다. 생각을 잘하고, 테스트에 능숙하거나, 온라인으로 검색하는 한, 항상 해결책을 찾을 수 있습니다. 모든 문제의 해결은 큰 이득입니다.