대부분의 디자이너는 여전히 전통적인 테이블 레이아웃, 프리젠테이션 및 구조를 혼합하여 웹 사이트를 구축하고 있습니다. XHTML+CSS를 사용하는 방법을 배우려면 프로세스가 필요하며 기존 웹사이트를 웹사이트 표준에 맞게 만드는 것은 한 단계로 완료될 수 없습니다. 가장 좋은 접근 방식은 웹 사이트 표준을 완전히 준수한다는 목표를 달성하기 위해 단계별로 진행하는 것입니다. 초보자이거나 코드에 익숙하지 않은 경우 현재 CSS 표준을 지원하는 가장 완벽한 도구인 Dreamweaver MX 2004와 같은 표준 호환 편집 도구를 사용할 수도 있습니다.
1. 주요 개선
페이지에 올바른 DOCTYPE을 추가하세요.
많은 디자이너와 개발자는 DOCTYPE이 무엇인지, 어떤 용도로 사용되는지 모릅니다. DOCTYPE은 문서 유형(Document Type)의 약어입니다. 주로 사용 중인 XHTML 또는 HTML 버전을 나타내는 데 사용됩니다. 브라우저는 DOCTYPE에 정의된 DTD(문서 유형 정의)에 따라 페이지 코드를 해석합니다. 따라서 실수로 잘못된 DOCTYPE을 설정한 경우 결과는 놀라울 것입니다. XHTML1.0은 세 가지 DOCTYPE 옵션을 제공합니다.
(1) 과도기적
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
(2) 엄격하다
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 엄격//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>
(3)프레임 종류(프레임셋)
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 프레임셋//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd>
기본적인 개선을 위해서는 전환문만 사용하면 됩니다. 테이블 레이아웃, 성능 로고 등과 여전히 호환될 수 있으므로 변경 사항이 너무 크고 마스터하기 어렵다고 느끼지 않을 것입니다.
Tip: 위의 전환코드 입력이 너무 귀찮다면 http://www.macromedia.com/ 홈페이지에 접속하신 후 소스코드를 보시고 헤드부분에 같은 코드를 복사해서 붙여넣으시면 됩니다. .
네임스페이스(Namespace) 설정
DOCTYPE 선언 바로 뒤에 다음 코드를 추가합니다.
<html XMLns=http://www.w3.org/1999/xhtml >
네임스페이스는 요소 유형과 속성 이름을 수집하는 상세한 DTD입니다. 네임스페이스 선언을 사용하면 온라인 주소 포인터를 통해 네임스페이스를 식별할 수 있습니다. 평소대로 코드를 입력하시면 됩니다.
코딩 언어를 선언하세요
브라우저에서 올바르게 해석되고 마크업 유효성 검사를 통과하려면 모든 XHTML 문서가 사용하는 인코딩 언어를 선언해야 합니다. 코드는 다음과 같습니다:
<meta http-equiv=Content-Type content=text/html; charset=GB2312 />
여기에 선언된 코딩 언어는 중국어 간체 GB2312입니다. 중국어 번체 콘텐츠를 제작해야 하는 경우 BIG5로 정의할 수 있습니다.
모든 라벨은 소문자로 작성하세요.
XML은 대소문자를 구분하므로 XHTML도 대소문자를 구분합니다. 모든 XHTML 요소 및 속성 이름은 소문자여야 합니다. 그렇지 않으면 W3C 유효성 검사에서 문서가 유효하지 않은 것으로 간주됩니다. 예를 들어 다음 코드는 올바르지 않습니다.
<TITLE>회사 프로필</TITLE>
올바른 작성 방법은 다음과 같습니다.
<title>회사 프로필</title> 마찬가지로 <P>를 <p>로, <B>를 <b>로 변경하세요. 이 변환 단계는 간단합니다.
이미지에 Alt 속성 추가
모든 이미지에 Alt 속성을 추가합니다. alt 속성은 이미지를 표시할 수 없을 때 대체 텍스트가 표시되도록 지정합니다. 이는 일반 사용자에게는 필요하지 않지만 텍스트 전용 브라우저와 화면 판독기를 사용하는 사용자에게는 중요합니다. Alt 속성이 추가된 경우에만 코드가 W3C 정확성 검사를 통과합니다. 의미 있는 alt 속성을 추가해야 합니다. 다음과 같이 작성하는 것은 의미가 없습니다.
<img src=http://www.chinahtml.com/0608/logo_unc_120x30.gif alt=http://www.chinahtml.com/0608/logo_unc_120x30.gif>
올바른 작성 방법:
<img src=http://www.chinahtml.com/0608/logo_unc_120x30.gif alt=UNC 회사 로고, 홈페이지로 돌아가려면 클릭>
모든 속성 값 인용
HTML에서는 속성 값을 인용할 필요가 없지만 XHTML에서는 인용해야 합니다.
예: 높이=100이 아니라 높이=100입니다.
모든 탭 닫기
XHTML에서는 열려 있는 모든 태그를 닫아야 합니다. 이와 같이:
<p>열린 탭은 모두 닫아야 합니다. </p> <b>HTML은 닫히지 않은 태그를 허용할 수 있지만 XHTML은 허용할 수 없습니다. </b>
이 규칙을 사용하면 HTML 혼란과 문제를 피할 수 있습니다. 예: 이미지 태그를 닫지 않으면 일부 브라우저에서 CSS 표시 문제가 발생할 수 있습니다. 페이지가 디자인한 대로 나타나는지 확인하려면 이 방법을 사용하십시오. 빈 태그도 닫혀야 한다는 점에 유의하세요. 태그 끝에 슬래시 /를 사용하여 태그를 닫으세요. 예를 들어:
<br /> <img src=http://www.chinahtml.com/0608/webstandards.gif />
위의 7가지 규칙에 따라 처리된 후 페이지는 기본적으로 XHTML1.0의 요구 사항을 충족합니다. 하지만 실제로 표준을 충족하는지 검증해야 합니다. 우리는 W3C를 사용하여 무료 유효성 검사 서비스(http://validator.w3.org/)를 제공할 수 있습니다. 오류를 발견한 후 하나씩 수정하세요. 다음 리소스 목록에서는 W3C 검증의 보완 자료로 사용할 수 있는 검증 지침을 제공하는 기타 검증 서비스 및 URL도 제공합니다. 마침내 XHTML 유효성 검사를 통과하면 축하합니다. 웹 사이트 표준을 향한 큰 발걸음을 내디딘 것입니다. 생각보다 어렵지 않아요!
2. 중간 개선
우리의 다음 개선은 주로 구조와 성능의 분리에 있습니다. 이 단계는 첫 번째 단계만큼 달성하기 쉽지 않으며, CSS2 기술의 학습과 적용도 필요합니다. 하지만 새로운 것을 배우는 데는 시간이 걸립니다. 그렇죠? 비결은 행동을 통해 배우는 것입니다. 항상 표 레이아웃을 사용해 왔고 CSS를 전혀 사용해 본 적이 없다면 서둘러 표 레이아웃에 작별 인사를 할 필요가 없습니다. 먼저 글꼴 태그를 스타일 시트로 바꿀 수 있습니다. 더 많이 배우면 더 많은 일을 할 수 있습니다. 좋습니다. 우리가 해야 할 일을 살펴보겠습니다.
CSS를 사용하여 요소의 모양 정의
로고를 작성할 때 글꼴을 더 크게 만들고 싶을 때는 <h1>을 사용하고, 앞에 점 기호를 추가하고 싶을 때는 <li>를 사용하는 습관이 생겼습니다. 우리는 항상 <h1>을 큰 텍스트로, <li>를 점으로, <b>를 "굵은 텍스트"로 생각합니다. 실제로 <h1>은 원하는 무엇이든 될 수 있습니다. <h1>은 작은 글꼴이 될 수 있고, <p> 텍스트는 크고 굵게 변할 수 있으며, <li>는 그림이 될 수 있습니다. 우리는 구조적 요소가 표현을 달성하도록 강요할 수 없으며 CSS를 사용하여 해당 요소의 모양을 결정해야 합니다. 예를 들어 원래 기본 수준 6 제목을 동일한 크기로 보이도록 만들 수 있습니다.
h1, h2, h3, h4, h5, h6{ 글꼴 계열: 宋体, 글꼴 크기: 12px }
의미 없는 정크를 구조화된 요소로 대체
많은 사람들은 HTML과 XHTML 요소가 구조를 표현하도록 설계되었다는 사실을 전혀 알지 못했을 것입니다. 우리 중 많은 사람들은 구조보다는 표현을 제어하기 위해 요소를 사용하는 데 익숙해졌습니다. 예를 들어 목록은 다음과 같이 표시될 수 있습니다.
문장 1<br /> 문장 2<br /> 문장 3<br />
대신 순서가 지정되지 않은 목록을 사용하는 것이 더 좋습니다.
<ul> <li>문장 1</li> <li>문장 2</li> <li>문장 3</li> </ul>
"하지만 <li>는 점을 표시하는데 나는 점을 사용하고 싶지 않습니다."라고 말할 수도 있습니다. 실제로 CSS는 요소의 모양을 지정하지 않습니다. CSS를 사용하면 점을 끌 수 있습니다.
각 테이블과 양식에 ID 추가
테이블을 제공하거나 고유한 구조적 마크업을 형성하세요.
<테이블 ID=메뉴>
다음으로 스타일 시트를 작성할 때 "메뉴" 선택기를 만들고 이를 표 셀, 텍스트 레이블 및 기타 모든 요소에 표시 방법을 알려주는 CSS 규칙과 연결할 수 있습니다. 이러한 방식으로 높이, 너비, 정렬 및 배경색과 같은 일부 중복되고 대역폭을 소비하는 프레젠테이션 계층 속성을 각 <td> 태그에 첨부할 필요가 없습니다. 첨부된 태그("메뉴" 태그가 지정된 id 태그)만 사용하면 별도의 스타일시트 내에서 깨끗하고 컴팩트한 코드 마크업을 위한 임시 프리젠테이션 처리를 수행할 수 있습니다.
중간 개선을 위해 여기에 주요 세 가지 사항을 먼저 나열하지만 여기에는 많은 콘텐츠와 지식 포인트가 포함되어 있으므로 테이블을 사용하지 않고 CSS를 사용하여 완전히 레이아웃을 최종적으로 달성할 때까지 단계별로 배우고 숙달해야 합니다.