Visual Studio 2005가 테이블과 이미지를 올바르게 표시하는 방법은 무엇입니까?

Question

Photoshop CS2의 "Save for Web"기능을 사용하여 사이트 레이아웃에 대한 이미지 테이블을 작성했습니다.

이 HTML은 웹 브라우저에서 잘 보이지만 Visual Studio로 가져 와서 사이트 디자이너에서 볼 때 메트릭은 잘못되었으며 이미지 사이에 수평 간격이 있습니다 (표 셀).

Photoshop의 출력은 스타일 시트를 참조하지 않습니다.
테이블 속성은 테두리, 셀 패딩 및 셀 스페이스를 0으로 설정합니다.

디자이너의 모습은 다음과 같습니다.

그리고 여기 브라우저에서 어떻게 보이는지가 있습니다.

테이블과 이미지의 레이아웃에 대해 Visual Studio가 까다 롭습니까? 이것은 Visual Studio 2005의 버그입니까?

Answer 1

개인적으로 나는 Visual Studio에서 디자인보기를 거의 신뢰하지 않고 거의 모든 페이지의 코드보기로 설정하도록합니다. IE와 Firefox에서 작동 버전의 파일을 계속 열어 두는 경향이있어 레이아웃을 볼 수 있지만 멀티 단계 양식을 보려고 할 때 문제가 발생할 수 있습니다. 각 단계를 거치지 않고 테스트하기 위해 각 단계를 거치지 않고보고 싶은 상태 / 단계를 선택합니다.

vs에서 프로젝트 탐색기에서 파일을 마우스 오른쪽 버튼으로 클릭하고 웹 브라우저에서 볼 수 있도록 선택할 수 있습니다. 또한 파일을 볼 수있는 브라우저를 선택할 수 있도록 다양한 브라우저를 대 환경 설정에 추가 할 수 있습니다.

나는 이것이 Anwser가 아니라는 것을 알고 있지만 그것이 유용하기를 바랍니다.

Answer 2

"Web for Web"기능을 사용한 적이 없지만 테이블 마크 업 및 이미지를 제외한 출력 HTML에는 전체 페이지의 디스플레이 동작을 정의하는 CSS 스타일도 포함되어야한다고 확신합니다.

따라서 HTML을 VS로 가져 오면 관련 스타일도 전송되어 있는지 확인하십시오.

또한 HTML의 유효성을 잊지 말고 HTML 유효성을 보장합니다. 웹 앱의 적합 레벨을 web.config 또는 프로젝트 속성 (또는 HTML 편집기에서 - 대상 스키마를 XHTML로 설정하면 Photoshop에서 얻은 HTML은 올바르게 검증됩니다.

Answer 3

Visual Studio 2005의 디자이너는 특정 HTML 컨텐츠를 렌더링하는 데 어려움을 겪고있는 것 같습니다. Toby가 말했듯이, 문제를 해결하는 가장 좋은 방법은 디자이너와의 작업과는 대조적으로 웹 브라우저의 페이지를 미리보기하는 것입니다.

물론 다른 대안은 Visual Studio 2008을 사용하는 것입니다. Expression Web에서 사용되는 것과 동일한 웹 디자이너 구성 요소를 사용합니다. 나는 웹 프로젝트에 아직 Visual Studio 2008을 광범위하게 사용하지 않았지만 내가 본 것에서 매우 인상적입니다! Visual Studio 2008은 또한 "분할"보기 옵션이있어 HTML을 편집하는 동안 디자이너를 볼 수 있습니다 (소스와 디자인보기 사이를 더 이상 전환하지 않고 몇 분이 걸리지 않아 몇 분이 걸리지 않습니다!)