일반적으로 웹 디자인에 의해 완료된 작업은 실제로 : PSD 렌더링을 HTML+CSS 템플릿 페이지로 변환합니다. 일반적으로 우리는 예술가의 PSD를 얻을 것이며 다른 사람들은 다른 접근 방식을 가질 것입니다.
1. 불꽃 놀이를 열고 이미지를 HTML로 내 보냅니다.
2. Dreamweaver와 같은 도구를 직접 사용하여 레이아웃을 끌고 배치하고 관련 그림을 가져오고 플래시 리소스를 가져옵니다.
3. PS에서 컷을 완료 한 후 먼저 텍스트 편집기의 렌더링을보고 단계별로 만듭니다.
위는 가장 일반적으로 사용되는 방법이지만 그 중 어느 것도 양호하지 않습니다.
첫 번째 방법은 최악이며, 그러한 코드는 전혀 유지 관리하거나 읽을 수 없습니다.
두 번째 방법은 좋지 않습니다. 코드는 필연적으로 중복되며, 당신이하는 것들을 확인해야합니다.
세 번째 방법은 렌더링 비트를 조금씩 살펴 봐야하기 때문에, 즉 HTML 태그를 작성할 때이 부분을 표시하는 방법을 지속적으로 가정합니다.
올바른 방법 :
1. PSD를받은 후에는 먼저 아무 것도하지 마십시오. 텍스트 편집기에 웹 페이지 프레임 워크를 직접 작성하십시오. 앞으로이 CSS를 렌더링하는 방법을 가정하지 마십시오. CS를 추가하지 않고 완전히 귀화 된 레이블입니다.
2. 글을 쓰면 각 브라우저를 실행 한 후 전체 포지셔닝에 아무런 문제가 없는지 확인하십시오.
3. 전체 CSS를 작성하십시오. 여기서 CSS는 큰 블록의 위치와 스타일에만 책임이 있습니다.
4. 필수 사진 자원을 잘라 내고 서면 프레임 워크에서 조금씩 구성하고 지속적으로 디버깅하고 마침내 완성 된 제품이됩니다.
5. 마지막으로, 자신의 코드에 주석을 추가하고 CSS와 HTML 모두에서 자신의 코드에 주석을 추가하십시오.
피부를 만들기 위해 유연한 스위치를 만들고 CSS가 성능을 지배하게하려면 여전히주의를 기울여야 할 것이 여전히 많지만 일반적인 과정은 다음과 같습니다. 물론, 우리는 처음에 HTML을 직접 쓸 수는 없지만 적어도이 인식을 가지고 있으며 단계별로 진행해야합니다. . .
PSD 파일은 두 가지 주요 지점에서 웹 사이트를 잘라냅니다.
1. 독립 페이지
1.이 페이지를 분석하고 먼저 머리 나 초안 용지의 일반적인 구조를 설명하십시오.
2. 디자인 초안의 상황에 따라 배경 이미지의 분포, ICO 이미지의 분포 등을 분석하십시오.
3. 해당 사진을 자르고 사진을 내보내고 병합하십시오
4. 페이지에 나타나는 모든 요소의 구조를 포함하여 편집기에 전체 구조 XHTML 코드를 작성하십시오.
5. CSS 스타일로 전체 및 모듈 코드 작성
6. 세부 조정
7. 작업 후 브라우저가 올바른지 확인합니다.
2. 여러 페이지로 구성된 소형 또는 큰 사이트
1. 모든 설계 초안을 찾아보고 사이트 모듈, 사진 및 파일의 분포를 통합합니다.
2. 첫 번째 작동 지점을 시작하지만 사이트의 컨텐츠 배포를 계획하는 것이 중요합니다.
전반적인 고려 :
1. 요청 수를 줄이기위한 사진 병합
2. 구조적 합리성과 의미 화
3. 스타일의 단순성은 나중에 쉽게 유지할 수 있도록합니다.
4. 대부분 나중에 유지 보수 및 프로그램 개발, 단순히 효과를 달성하는 방법을 고려하십시오.