Photoshop 모형에서 의미론적 HTML 및 CSS로 전환하는 가장 좋은 방법은 무엇입니까?

https://stackoverflow.com/questions/19487

html
css

09-06-2019
|

문제

나는 일반적으로 수동 프로세스를 사용합니다.

페이지를 보고, 의미 요소를 파악하고, HTML을 구축하세요.
필요하다고 생각되는 이미지를 분할합니다.
CSS 작성 시작
필요에 따라 다른 단계를 조정하고 반복하세요.

더 나은 접근 방식이나 도구가 있습니까?

해결책

나는 상당히 자연스러운 코딩 방식을 가지고 있습니다.핵심은 페이지를 문서나 기사처럼 취급하는 것입니다.이렇게 생각하면 다음이 논리적으로 명확해집니다.

페이지 제목은 최상위 제목입니다.
- 사이트 제목을 만들든 실제 페이지 제목을 만들든 h1은 귀하에게 달려 있습니다. 개인적으로 저는 Stack Overflow 대신 About Us를 h1로 만들겠습니다.
탐색은 목차이므로 주문 목록 - ul 대신 ol을 사용할 수도 있습니다.
섹션 헤더는 h2이고 해당 섹션 내의 섹션은 h3s 등입니다.쌓아두세요.
가능하면 블록따옴표와 따옴표를 사용하세요."로 둘러싸지 마세요.
b와 i를 사용하지 마세요.Strong과 em을 사용하세요.이는 HTML이 표시 마크업이 아니라 구조적 마크업이기 때문입니다. 강한 그리고 여자 이름phasis 태그는 단어를 강조하는 곳에 사용해야 합니다.
<label> 귀하의 양식 요소.
사용 <acronym>모래 <abbr>가능하다면 첫 번째 경우에만 가능합니다.
제일 쉬운:언제나, 언제나 이미지에 대체 텍스트를 제공하세요.
우편 주소 주소, 화면 코드 출력 등 아직 사용하지 않았을 수도 있는 HTML 태그가 많이 있습니다.보세요 HTML 개 어떤 사람들에게는 내가 가장 좋아하는 참고 자료입니다.

그것은 단지 몇 가지 조언일 뿐입니다. 더 많은 것을 생각할 수 있을 것이라고 확신합니다.

아, 그리고 도전해보고 싶다면 XHTML을 먼저 작성한 다음 CSS를 작성하세요.CSS를 사용하면 HTML을 터치할 수 없습니다.실제로는 생각보다 어렵습니다(하지만 덕분에 더 빨라졌습니다).

다른 팁

글쎄요, 저는 웹사이트를 만들 때 HTML을 작성하는 동안 디자인을 완전히 잊어버리려고 노력하는 경향이 있습니다.이렇게 하는 이유는 디자인 관련 마크업으로 끝나지 않고 요소의 의미론적 의미에 집중할 수 있기 때문입니다.

마크업 방법에 대한 몇 가지 지침:

메뉴 - UL(순서가 지정되지 않은 목록) 요소를 사용합니다. 이것이 바로 메뉴이기 때문입니다.정렬되지 않은 선택 목록입니다.예:
```
<ul id="menu">
    <li id="home"><a href="/" title="Go to Homepage">Home</a></li>
    <li id="about"><a href="/about" title="More about us">About</a></li>
</ul>
```
가로 메뉴를 원하면 다음과 같이 할 수 있습니다.
```
#menu li {
    display: block;
    float: left;
}
```
로고 - 이미지 대신 로고에 H1(제목) 요소를 사용합니다.예:
```
<div id="header">
    <h1>My website</h1>
</div>
```
그리고 CSS(그래픽 항목이 포함된 메뉴를 원하는 경우 위의 메뉴에도 동일한 기술을 적용할 수 있습니다):
```
#header h1 {
    display: block;
    text-indent: -9999em;
    width: 200px;
    height: 100px;
    background: transparent url(images/logo.png) no-repeat;
}
```
ID 및 클래스 - ID를 사용하여 인스턴스가 하나만 있는 요소를 식별합니다.여러 인스턴스가 있는 요소를 식별하려면 클래스를 사용하세요.
텍스트 브라우저(예: lynx)를 사용하십시오.이런 방식으로 탐색하는 것이 타당하다면 접근성 측면에서 좋은 일을 한 것입니다.

이게 도움이 되길 바란다 :)

나는 본질적으로 Jon과 동일한 작업을 수행하지만 여기에 몇 가지 다른 아이디어가 있습니다.

Photoshop에서 가이드를 사용하고 고정하세요.각 상자/지역의 모든 치수를 미리 파악하세요.
쉽게 참조할 수 있는 정보 파일(저는 txt 파일 사용)에 모든 치수와 색상 16진수 값을 수집합니다.이렇게 하면 대체 탭 세금이 줄어들고 Photoshop에서 색상을 여러 번 선택할 수 있습니다.
모든 가이드가 배치되면 전체 웹사이트를 이미지 폴더로 분할합니다. 사진과 그룹화된 요소부터 시작하여 다양한 배경 타일/이미지(있는 경우)로 끝납니다.(팁:사용 Ctrl 키- 레이어 미리보기를 클릭하여 해당 레이어의 콘텐츠를 선택하세요.

Photoshop 사용 시 참고 사항:

가이드나 그리드를 사용하세요.
관련 정보가 있는 경우 메모 기능을 사용하세요.
유사한 요소에는 항상 레이어 그룹을 사용하십시오.한 번의 클릭으로 전체 지역을 끌 수 있어야 합니다.모든 '헤더' 콘텐츠를 하나의 레이어 그룹에 넣습니다.
항상 레이어 이름을 지정하세요.
각 페이지 템플릿을 하나의 PSD 파일에 넣고 중첩된 레이어 그룹을 사용하여 구성할 수 있습니다.이렇게 하면 사이트의 각 페이지 템플릿에 대한 모든 가이드와 메모를 설정할 필요가 없습니다.

지름길은 없습니다 :) 하지만 모두가 조금씩 다르게 작동합니다.

이 튜토리얼 어제 내 피드리더에 나타난 것은 처음부터 끝까지의 과정을 보여주며 이전에 한 번도 해본 적이 없는 사람들에게 도움이 될 수 있지만 당신은 노련한 사람이기 때문에 이것은 단지 자신의 방법을 합리화하는 것에 관한 것입니다.

편집하다:listapart 링크는 확실히 imageready와 불꽃놀이 모두 첫날부터 꽤 좋은 지원을 받았던 '플랫' 디자인에 대해 더 자동화되었으며 모든 릴리스에서 더 나아지고 의미가 더 좋아졌습니다. 그러나 더 복잡한 디자인이 있는 경우에는 그것이 무엇인지 디자인하고 이것들은 손으로 이루어져야 합니다.

나는 지금까지 당신이 받은 훌륭한 조언 외에도 디자인의 인쇄된 버전을 구하고 빨간색 펜을 사용하여 당신이 생각하는 디자인의 모든 블록 요소를 표시하는 것을 추천한다는 점을 지적할 가치가 있다고 생각했습니다. 디자이너와 함께 30분 동안 앉아서 정적 디자인에 맞지 않는 사용 사례에 맞게 디자인이 작동하는 방식을 구상한 방법에 대해 이야기할 수 있습니다.

탐색에 더 많은 텍스트를 넣으면 어떻게 되나요?
이 너비는 고정되어 있습니까, 아니면 유동적입니까?
이 콘텐츠 창은 올바른 고정 높이에 있습니까, 아니면 유동적입니까?유동적이라면 반복할 수 없는 배경을 왜 넣었나요?
페이지 아래로 확장되어 연결된 두 요소를 분리하는 테두리가 있습니다.시각적으로는 의미가 있지만 의미적으로는 li를 사용하여 두 요소를 모두 수용할 수는 없습니다.무엇이 더 중요하다고 생각하시나요?

또한 팔꿈치가 CSS에 깊이 빠져들 때까지 문제가 될 것이라는 것을 깨닫지 못했을 수도 있는 잠재적인 문제를 발견하는 데 도움이 될 것입니다.

몇 번만 수행하면 작업이 더 쉬워질 뿐만 아니라 디자이너는 자신의 작업을 마크업하는 데 관련된 내용을 훨씬 더 잘 이해할 수 있습니다. 일부 디자이너는 시각적으로 매우 단순해 보이는 것이 왜 몇 시간이 걸리는지 이해하는 데 어려움을 겪습니다. 작업을 수행하기 위해 CSS를 조정하는 데 며칠이 걸렸습니다.

제가 아는 일부 디자이너들은 대개 일러스트레이터를 사용하여 디자인 요소를 만듭니다.

이 페이지 좀 더 자동화하는 방법을 보여줍니다.

또한 "레이어 구성 요소" 기능에 대해 알아보세요.버튼 상태를 변경하는 데 이것을 사용합니다.

일반, 호버 및 활성에 대한 레이어 구성 요소를 만듭니다.
이들 각각에서 해당 상태에 속하는 효과/색상 오버레이 및 표시 레이어를 설정합니다.
웹용으로 저장:각 슬라이스의 이름을 바꾸는 것이 더 쉽지 않은 한 각 상태에 대해 다른 폴더로 이동합니다(그렇지 않으면 호버 버튼 슬라이스가 일반 슬라이스를 덮어씁니다).

라이센스 : CC-BY-SA ~와 함께 속성

제휴하지 않습니다 StackOverflow