CSS와 디자인을 이해하지 못하고 디자이너가 HTML을 작성하는 방법은 무엇입니까?

Question

최근에 가장 큰 웹 사이트 프로젝트 아이디어를 실현하기 시작했습니다. 이 관련이 있는지 확실하지 않지만 ASP.NET MVC 2 및 Microsoft 스택을 사용하고 있습니다.

디자인과 미학에 감사 드리며이 프로젝트의 성공에 중요한 역할을한다는 것을 알고 있습니다. 나는 기본적인 유용성에 대한 시각을 가지고 있다고 생각하지만, 디자인과 시각적 관점에서 보면, 나는 정말로 나쁘다.

저는 프로그래머입니다.하지만 저는 여전히 배우고 있으며, 디자인 패턴, 모범 사례, 아키텍처 설계를 고려해야하며, CSS와 디자인을 배우려고 노력할 때 현재 내 머리 위로 쓰일 것입니다.

이 때문에 가능한 한 오랫동안 디자인보다 기능의 우선 순위를 지정하고 싶습니다. 아마 어느 시점에서 좋은 아웃소싱 디자인에 투자를 기꺼이 할 것입니다.

나는 Blue Print CSS 프레임 워크가 포함 된 "시작 키트"웹 사이트 솔루션을 사용했습니다. 따라서 생성 된 모든 기본보기는 Blue Print CSS를 기반으로합니다. 그러나 CSS 프레임 워크에 대해 알고있는 의견을 읽은 후에 이것이 좋은 아이디어인지 궁금합니다.

가능한 미래의 디자이너를 위해 가능한 한 쉽게 작업하려면보기/템플릿 코드 (예 : HTML)를 어떻게 작성해야합니까? div 태그를 사용해야합니까? 어떤 콘텐츠에 클래스 이름을 지정해야합니까? 클래스에 포함 된 요소를 기반으로 요소에 일부 의미있는 클래스 이름 또는 ID를 선언해야합니까? 아니면 디자이너에게 맡겨야합니까? CSS를 실제로 이해하지 않고도 이런 "디자인"을 할 수 있습니까? 스타일을 지정하지 않고 일반 HTML을 사용하고 "분류"할 수 있습니까?

편집 : 명확히하기 위해 CSS를 전문가에게 맡기고 싶습니다. 나는 디자이너가 그의 마술을 할 때까지 절대적으로 "평범한"사이트를 신경 쓰지 않는다.

죄송합니다. 어떤 도움, 포인터 및 지침 정말 감사합니다. 고맙습니다.

Answer 1

나는 이상을learn some CSS으로 제안합니다. 만나다? 그다지 열심히 좋은 프로그래머가 되려면 일부 다용도가 있어야합니다.

Answer 2

디자이너와 함께 앉아서 렌더링을 계획중인 html을 기반으로 스타일 가이드를 작성하는 것이 좋습니다. 몇 년 전 일반 ASP.NET 응용 프로그램을 시작해야만하고, 외부 디자인 대행사가 참여한 후에 만 ​​선행 작업을 수행해야한다고 주장하면서 시작해야했습니다. 결론 : 우리는 기관이 우리에게 보냈던 이상한 html을 구현하는 데에는 상당한 시간이 걸렸습니다. 그래서 당신이 기대하는 것과 당신이 생성해야만하는 HTML의 종류를 잘 전달하여 디자이너의 마술이 당신 편에서 너무 많은 리펙토링없이 시작될 수 있도록하십시오.

Grz, Kris.

Answer 3

원하는대로 작성하고 깨끗하게 유지하십시오. HTML을 간단하게 작성하고 똑같이 간단하게 스타일을 지정하십시오. 가능한 한 간단하게 동적 콘텐츠를 포함하는 모든 코드를 작성하십시오. 선호하는 바에는 Spark View Engine을 사용하여보기를 더 깨끗하게 정리하십시오. (필자는 하나의 큰 프로젝트에서 Spark을 사용했고 절대 기본 설정으로 되돌아 가지 않았습니다.)

디자이너를 고용하거나 고용 한 경우 반드시 그와 함께 작업해야합니다. 그/그녀가 만질 모든 것을 유지할 수 있으면 간단할수록 그 결과는 더 좋아질 것입니다. 어쨌든 도움이 필요할 것입니다.

프론트 엔드 디자인과 서버 측 코딩이 절대로 작업별로 분리되어서는 안됩니다. HTML과 CSS도 마찬가지입니다. 그들과 함께 일할 수는 없습니다. 그들은 서로 영향을 미친다.

div 태그 또는 클래스 이름에 어떤 영향이 있습니까? 중요하지 않습니다. 디자이너는 자신의 기호 나 필요에 따라 마크 업을 추가하거나 클래스/ID 이름을 변경합니다. 처음에 필요한 것을 사용하고 필요할 때 언제든지 변경할 수 있습니다.

이 모든 작업을 수행 할 때 디자이너가 실제로 원하는 것과 비슷한 것을 제공해야합니다. 색상, 모양, 위치 등을 염두에 두십시오. 이것은 디자이너에게 좋은 가치입니다. 그리고 뭔가를 바꿔야 할 필요가있을 때 그/그녀가 말하는 것을 들어라.

궁극적 인 기준선은 간단하게 유지합니다.

Answer 4

아마 가장 먼저 말할 것은 디자인이 당신의 장점 중 하나가 아니라면 (핵심 기능에 집중하고 나중에 다른 사람에게 미적 디자인을하고 나중에 디자인하게하는) 접근 방식이 올바른 전략 일 것입니다 . 그러나 모범 사례에 따라 HTML 코드를 작성하면 나중에 개발자와 계약을 맺은 후에 변경 작업을 준비 할 수 있습니다. 이는 부분적으로 HTML/CSS 분할이 정확하게 이런 종류의 분업을 목표로하기는하지만 완벽한 디자이너와는 거리가 멀고 좋은 디자이너는 예상하지 못했던 아이디어를 가지고 있기 때문입니다 (결국 그것은 작업)

말했다!.

이 가 어떻게보기/템플릿 코드 (예 : HTML)를 작성해야 가능한 가능한 미래 디자이너의 작업을 쉽게하려면?

가능한 한 깨끗하게 만드십시오. 사용자의 의도에 맞게 구부러지기보다는 HTML 태그를 원래 의도 한 대로만 사용하십시오 (예 : 표 형식의 데이터에만 테이블 사용). HTML 태그에 "style"속성을 사용하지 마십시오. 올바른 스타일 시트 사용을 방해 할 수 있습니다. 또한 생성 된 HTML 출력을 깔끔하게 정리하고 인간이 파싱하기 쉽도록 만듭니다.

div 태그를 사용해야합니까?

예, 페이지의 논리적 구분으로 구성된 출력 부분에만 적용됩니다.

콘텐츠 이름을 으로 지정해야합니까? 내가 일부 의미있는 클래스 이름을 선언하거나 요소를 포함하는 요소를 에 포함시켜야합니까? 아니면 디자이너에게 맡겨야합니까?

예 - 위에서 언급했듯이 디자이너와의 대화 결과로 나중에 변경해야 할 가능성이 높으므로 - 간단하지 않거나 쉬운 작업을 수행하십시오. 분명히 유용 할 것입니다.

CSS를 실제로 이해하지 않고도 "디자인" 을 수행 할 수 있습니까?

하지만 최소한 CSS의 기본 사항을 알고 있으면 도움이 될 것입니다. 아마도 한 시간 정도 시간을 들여 튜토리얼을 작성해야 할 것입니다. 대략사이에 커다란 차이가 있습니다. CSS가 어떻게 작동하는지 대략 알고 있고, bautiful 페이지를 만들 수 있습니다!

스타일링없이 일반 HTML을 사용하고 "분류"하는 방법은 무엇입니까?

그것은 확실히 나쁜 시작은 아니지만, 나는 보통 몇 가지 클래스 + CSS 소량의 기본 HTML 가고 싶어 - 페이지가 "끔찍한하지"모양 만들기에 충분 - 다음 몇 가지를 기대 th가 자신의 일을 성공적으로 수행 할 수 있도록 변경해야하는 사항에 대해 논의합니다.

Answer 5

댓글을 달았지만 너무 길어질 것입니다.

다른 사람 등

권리, 깨끗한 HTML 그러나 당신은 당신의 페이지 내에서 기능 점수를 떠날 알고 충분히 CSS 이해해야합니다. DIV를 사용하여 페이지에서 논리적 블록을 만들면 ID로 식별 할 수도 있습니다.

한 링크가 다른 링크와 다른 이유가있는 경우 (문체적인 이유로) 해당 링크를 별도로 분류해야합니다.

"3 열 레이아웃에서 DIV를 배치하는 방법"에 대해 걱정하지 마십시오. 전적으로 레이아웃을 위해 여분의 div (거의)에 대해 걱정하고 있습니다. 그러나 이것이 블록이 무엇인지에 대한 개념으로 태그 된 섹션의 상당 부분을 가져서는 안된다는 것을 의미하지는 않습니다.

실제 디자이너가 "못생긴"마크 업 위에 평범한 CSS로 얼마나 많은 일을 할 수 있는지에 놀랐지 만 페이지 전체에 일부 ID와 클래스가 표시된 경우 작업이 훨씬 쉽습니다. 생성 된 HTML을 디자이너에게 넘기면 마지막 페이지에 구조적 변경을 거의하지 않을 수 있으며 나머지는 CSS에 포함됩니다.