기존 웹사이트를 개선하는 방법_CSS/HTML

我们大部分的设计师依旧在采用传统的表格布局、表现与结构混杂在一起的方式来建立网站。学习使用XHTML+CSS的方法需要一个过程，使现有网站符合网站标准也不可能一步到位。最好的方法是循序渐进，分阶段来逐步达到完全符合网站标准的目标。如果你是新手，或者对代码不是很熟悉，也可以采用遵循标准的编辑工具，例如Dreamweaver MX 2004，它是目前支持CSS标准最完善的工具。

1．初级改善
为页面添加正确的DOCTYPE 
很多设计师和开发者都不知道什么是DOCTYPE，DOCTYPE有什么用。DOCTYPE是document type的简写。主要用来说明你用的XHTML或者HTML是什么版本。浏览器根据你DOCTYPE定义的DTD(文档类型定义)来解释页面代码。所以，如果你不注意设置了错误的DOCTYPE，结果会让你大吃一惊。XHTML1.0提供了三种DOCTYPE可选择：

(1)过渡型（Transitional ）

nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
(2)严格型（Strict ）

nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
(3)框架型（Frameset ）

nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> 
对于我们初级改善来说，只要选用过渡型的声明就可以了。它依然可以兼容你的表格布局、表现标识等，不至于让你觉得变化太大，难以掌握。

Tip:你懒得输入上面过渡型代码的话，可以访问http://www.macromedia.com/网站的首页，然后查看源代码，把head区同样的代码拷贝粘贴就可以了。

设定一个名字空间（Namespace） 
直接在DOCTYPE声明后面添加如下代码：

 
一个namespace是收集元素类型和属性名字的一个详细的DTD，namespace声明允许你通过一个在线地址指向来识别你的namespace。只要照样输入代码就可以。

声明你的编码语言 
为了被浏览器正确解释和通过标识校验，所有的XHTML文档都必须声明它们所使用的编码语言。代码如下：

 
这里声明的编码语言是简体中文GB2312，你如果需要制作繁体内容，可以定义为BIG5。

用小写字母书写所有的标签 
XML对大小写是敏感的，所以，XHTML也是大小写有区别的。所有的XHTML元素和属性的名字都必须使用小写。否则你的文档将被W3C校验认为是无效的。例如下面的代码是不正确的：

 
正确的写法是：

 同样的，

改成

，改成等等。这步转换很简单。 
为图片添加 alt 属性 
为所有图片添加alt属性。alt属性指定了当图片不能显示的时候就显示供替换文本，这样做对正常用户可有可无，但对纯文本浏览器和使用屏幕阅读机的用户来说是至关重要的。只有添加了alt属性，代码才会被W3C正确性校验通过。注意的是我们要添加有意义的alt属性，象下面这样的写法毫无意义：

 
正确的写法：

 
给所有属性值加引号 
在HTML中，你可以不需要给属性值加引号，但是在XHTML中，它们必须被加引号。

例： style="max-width:90%"，而不能是height=100。

关闭所有的标签 
在XHTML中，每一个打开的标签都必须关闭。就象这样：

每一个打开的标签都必须关闭。

HTML은 닫히지 않은 태그를 허용할 수 있지만 XHTML은 허용할 수 없습니다.
이 규칙을 사용하면 HTML의 혼란과 문제를 피할 수 있습니다. 예: 이미지 태그를 닫지 않으면 일부 브라우저에서 CSS 표시 문제가 발생할 수 있습니다. 페이지가 디자인한 대로 나타나는지 확인하려면 이 방법을 사용하십시오. 빈 태그도 닫혀야 한다는 점에 유의하세요. 태그 끝에 슬래시("/")를 사용하여 태그를 닫으세요. 예:



위의 7가지 규칙에 따라 처리된 후 페이지는 기본적으로 XHTML1.0의 요구 사항을 준수합니다. 하지만 실제로 표준을 충족하는지 검증해야 합니다. 우리는 W3C를 사용하여 무료 유효성 검사 서비스(http://validator.w3.org/)를 제공할 수 있습니다. 오류를 발견한 후 하나씩 수정하세요. 다음 리소스 목록에서는 W3C 검증의 보완 자료로 사용할 수 있는 검증 지침을 제공하는 기타 검증 서비스 및 URL도 제공합니다. 마침내 XHTML 유효성 검사를 통과하면 축하합니다. 웹 사이트 표준을 향한 큰 발걸음을 내디딘 것입니다. 생각보다 어렵지 않아요!

2． 중간 개선
다음 개선은 주로 구조와 성능의 분리입니다. 이 단계는 첫 번째 단계만큼 달성하기 쉽지 않으며, CSS2에 대한 학습과 적용도 필요합니다. 기술. 하지만 새로운 것을 배우는 데는 시간이 걸립니다. 그렇죠? 비결은 행동을 통해 배우는 것입니다. 항상 표 레이아웃을 사용해 왔고 CSS를 전혀 사용해 본 적이 없다면 서둘러 표 레이아웃에 작별 인사를 할 필요가 없습니다. 먼저 글꼴 태그를 스타일 시트로 바꿀 수 있습니다. 더 많이 배우면 더 많은 일을 할 수 있습니다. 이제 우리가 해야 할 일을 살펴보겠습니다.

CSS를 사용하여 요소의 모양을 정의합니다.
로고를 작성할 때 글꼴을 더 크게 만들고 싶을 때 사용하는 습관이 있습니다.

, 앞에 있기를 바랍니다. 점 기호를 추가하려면

을 사용하세요. 우리는 항상 는 크다,

는 점, 는 “굵은 글씨”를 의미한다고 생각합니다. 실제로

는 원하는 무엇이든 될 수 있습니다.

는 작은 글꼴이 될 수 있고,

텍스트는 크고 굵게 변할 수 있으며,

는 그림이 될 수 있습니다. 우리는 구조적 요소가 표현을 달성하도록 강요할 수 없으며 CSS를 사용하여 해당 요소의 모양을 결정해야 합니다. 예를 들어, 원래의 기본 6단계 제목을 동일한 크기로 표시할 수 있습니다:

h1, h2, h3, h4, h5, h6{font-family: 宋体, serif; }
의미 없는 쓰레기를 구조화된 요소로 대체 ​​
많은 사람들은 HTML과 XHTML 요소가 구조를 표현하도록 설계되었다는 사실을 전혀 알지 못할 수도 있습니다. 우리 중 많은 사람들은 구조보다는 표현을 제어하기 위해 요소를 사용하는 데 익숙해졌습니다. 예를 들어, 목록 콘텐츠는 다음 태그를 사용할 수 있습니다:

문장 1
문장 2
문장 3

순서가 지정되지 않은 목록을 대신 사용하는 것이 더 나을 것입니다:

• 문장 1
• 문장 2
• 문장 3

"그러나

에는 점, I가 표시됩니다. 점을 사용하고 싶지 않습니다.” 실제로 CSS는 요소의 모양을 지정하지 않습니다. CSS를 사용하면 점을 끌 수 있습니다.

각 테이블 및 양식에 ID를 추가합니다.
테이블을 부여하거나


과 같은 고유한 구조 태그를 양식에 작성합니다. 표를 사용하려면 "메뉴" 선택기를 만들고 이를 표 셀, 텍스트 레이블 및 기타 모든 요소에 표시 방법을 알려주는 CSS 규칙과 연결할 수 있습니다. 이러한 방식으로 높이, 너비, 정렬 및 배경색과 같은 일부 중복되고 대역폭을 소모하는 프리젠테이션 레이어 속성을 각 %lt;td> 태그에 첨부할 필요가 없습니다. 첨부된 태그("메뉴" 태그의 id 태그)만 사용하면 별도의 스타일시트 내에서 깨끗하고 컴팩트한 코드 마크업을 위한 임시 프리젠테이션 처리를 수행할 수 있습니다.

중간 개선 여기에는 먼저 주요 세 가지 사항을 나열하지만 여기에는 많은 내용과 지식 포인트가 포함되어 있으므로 CSS를 사용하지 않고 완전히 CSS를 사용한 레이아웃을 최종적으로 달성할 때까지 단계별로 배우고 숙달해야 합니다. 어떤 테이블.