CSS에 대한 테이블 기반 HTML 레이아웃을 리팩토링하기위한 도구?

https://stackoverflow.com/questions/151369

02-07-2019
|

문제

복잡한 테이블 기반 레이아웃과 복제되고 낭비되는 많은 태그가있는 HTML 페이지가 주어집니다.

td align="left" class="tableformat" width="65%" style="border-bottom:1px solid #ff9600; border-right:1px solid #ff9600; background-color:#FDD69E" nowrap etc.

페이지를보다 컴팩트 한 형태로 리팩토링하는 작업을 보조하는 도구가 있습니까? 예를 들어, CSS 스타일과 선택기를 자동으로 생성하는 도구는? 그것은 테이블을 div 레이아웃으로 변환합니까?

문제의 순서를 이해하기 위해 내가보고있는 페이지는> 8000 줄의 HTML 및 JavaScript입니다. 계산하지 않습니다 이미지!

업데이트 : re. "포기하고 처음부터 시작하십시오"댓글. 현실 세계에서 그게 무슨 뜻입니까? 페이지를 인쇄하고 스캔하고 DreamWeaver의 배경 이미지로 설정 한 다음 시작 하시겠습니까? 진지하게? 그것이 리팩토링보다 더 효율적일까요?

업데이트 : 나는 "처음부터 그것을 추적"하는 것을 거부하지 않고 Dreamweaver가 나의 선택 도구라는 것을 의미하지는 않았다. 레이아웃 리팩토링이 다루기 어려운 문제로 간주된다는 것에 매우 놀랐습니다.

해결책

나는 동의한다 TIMB 자동화 된 도구는이 작업을 수행하는 데 어려움을 겪게 될 것입니다. 특히 가장 효율적인 방식으로 CSS를 결합하고 추상화하기 위해 관계형 점프를합니다.

Tabular 데이터를 제시하는 경우 5월 인라인 CSS를 재사용 가능한 클래스로 리팩터링하려고 시도하는 것이 합리적입니다.

인라인 스타일이있는 유사한 테이블이 많으면 간단한 검색 및 교체로 CSS를 점차적으로 리팩터링 할 수 있습니다. 이것은 유사한 테이블의 하위 집합과 다소 유사한 클래스의 하위 집합과 일치하는 많은 클래스를 제공합니다. 이것을 레이아웃과 프리젠 테이션으로 나누는 것은 좋은 시작이 될 것입니다. 그런 다음 각 테마 또는 의미 적으로 관련된 항목에 대한 특정 클래스로 이들을 우선합니다.

나는 여전히 추천합니다 처음부터 시작합니다, 아마도 더 빨라질 것입니다. 페이지를 제시하는 데 필요한 것만 재현 할 수 있으며 나중에 요소 또는 요소 모음을 재사용 할 수 있습니다.

소비 된 시간도 돈을 지불 할 것입니다 중요하게 페이지를 다시 수정 해야하는 경우.

그러나 그게 그게 전혀 아마도? :디

다른 팁

나는 특정 도구에 대해 알지 못하고 카페인의 일반적인 도구 만 개똥 벌레, CSS 작업을 수행하는 사람은 누구나 알고 있어야합니다.

자동화 된 도구가 양호하고 관리 가능한 마크 업 및 CSS를 생산하기 위해 어려움을 겪을만큼 문제가 충분히 어렵다고 생각합니다.

마치 CSS 표준에 대한 오래된 테이블 기반 레이아웃을 다시 요약하는 더 자동화 된 수단을 찾고있는 것처럼 보입니다. 그러나 나는 "처음부터 시작"에 대한 다른 의견에 동의합니다.

이것이 당신에게 의미하는 바는 HTML 테이블을 사용하여 달성 된 모양을 (CSS를 사용하여) 재건하려고 시도해야한다는 것입니다. 이 개념이 당신을 탈출한다면, 나는 초보자 CSS 튜토리얼에 대한 인터넷 검색을 제안 할 것입니다. 아마도 테이블> CSS 레이아웃의 개념을 가르치는 데 중점을 두는 것도 ..

고려해야 할 또 다른 도구 (더 많은 도움이 될 수 있음)는 일종의 CSS "프레임 워크"일 것입니다. 추천합니다 청사진 CSS 이를 위해, 그것은 최소한의 노력으로 그리드/테이블과 같은 레이아웃 생성에 도움이되므로. 또 다른 좋은 것은입니다 아직도 모르 티 컬럼 층, 정말 깔끔합니다 멀티 컬럼 레이아웃 빌더.

DreamWeaver 나 선택한 도구에 넣지 말고 슬라이스하지 마십시오. 순수한 의미 스타일로 HTML을 먼저 작성하십시오. 예를 들어, 매우 일반적인 레이아웃은 다음과 같습니다.

<body>
  <div id="header">
    <img id="logo"/>
    <h1 id="title">
      My Site
    </h1>
    <div id="subtitle">Playing with css</div>
  </div>
  <div id="content">
    <h2>Page 1</h2>
    <p>Blah blah blah..</p>
  </div>
  <div id="menu">
    <ul>
      <li><a>Some link</a></li>
      ...
    </ul>
  </div>
</body>

컨텐츠와 관련하여 HTML을 수행하십시오. CS가 전혀 없으면 사용할 수 있어야합니다. 그 후 CSS를 추가하여 원하는 방식으로 보이게하십시오. 현재 브라우저/CSS 상태를 사용하면 여전히 HTML에 데코레이터를 추가해야 할 것입니다.

일단 완료되면 CSS로 쉽게 수정할 수있는 매우 유연한 레이아웃이 있으며, 장애인과 검색 엔진 모두에 액세스 할 수있는 페이지가 있습니다.

당신이 그것의 요점을 얻기 전에 약간의 학습이 필요하지만, 가치가 있습니다. 포기하고 테이블 기반 레이아웃으로 돌아가는 유혹에 저항하고 그냥 길을 가십시오. Semantic HTML 및 CSS로 모든 것을 수행 할 수 있습니다.

귀하는 귀하의 질문 에서이 접근 방식을 거부하지만, 브라우저에서 페이지의 스크린 샷을 가장 좋아하는 것을 좋아하는 브라우저에서 스크린 샷을 가져 가서 참조를 선언하고 재현하려고 노력하는 것이 좋습니다. 생각보다 쉽습니다. 나는 skanky 오래된 테이블 기반 레이아웃을 가져 와서 현대적인 기술로 수행 한 CMS 템플릿으로 바꿔야했으며 그렇게 나쁜 일이 아닙니다.

나는 현재 비슷한 문제를 해결하고 있습니다.이 소리만큼 지저분한 것이 아니라 실제로 나쁜 ASP.NET 웹 양식, 과도한 뷰 상태 및 데이터베이스에서 검색 결과를 형성하는 깊은 중첩 서버 컨트롤의 제품입니다. 50 dB 행 -Yek의 ~ 300-400K의 마크 업이 발생했습니다.

나는 그것을 리팩토링하는 합리적인 작업을 수행 할 자동화 된 도구를 찾지 못했습니다.

코드를 일관된 방식으로 재구성하는 데 사용할 수있는 Visual Studio와 같은 도구부터 시작하여 도움이됩니다. 그런 다음 레지스와 직사각형 선택의 조합을 사용하여 쓰레기를 잡초를 시작하고 중복 마크 업을 제거하여 중요한 것과 그렇지 않은 것을 정리하고 손으로 제시 할 효율적인 패턴을 정의하기 시작할 수 있습니다. 정보.

요령은 관리 가능한 덩어리로 나누고 거기에서 쌓는 것입니다.

형식에 대한 실제 "표 형 데이터"가 많고 한 번만 꺼져 있다면 몇 번이나 구세주가 된 것을 발견하고 데이터를 시트에 붙여 넣은 다음 연결 및 채우기의 조합을 사용했습니다. 테이블 데이터에 대한 마크 업을 생성합니다.

처음부터 시작한다는 것은 디자인 드로잉 보드로 돌아가는 것을 의미합니다. 그러한 괴물을 리팩터링해야한다면, 항상 더 나은 것을 지출하는 데 소비 할 것입니다.

복제되고 낭비적인 태그에서 벗어나려면 Dreamewaver를 피해야합니다. 좋은 텍스트 편집기 (Jedit, Emacs, VIM, Eclipse 등) 만 있으면됩니다. 편집자를 올바르게 사용자 정의하면 DreamWeaver를 놓치지 않을 것입니다. (NXHTML과 Yasnippets가있는 EMACS는 제가 가장 좋아합니다.)

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

제휴하지 않습니다 StackOverflow