Strumenti per il refactoring di layout HTML basati su tabella in CSS?

StackOverflow https://stackoverflow.com/questions/151369

Domanda

Data una pagina HTML che ha un layout complesso basato su tabella e molti tag duplicati e dispendiosi, ad es .: 

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

Ci sono strumenti per aiutare il compito di refactoring della pagina in una forma più compatta? Ad esempio, uno strumento che genera automaticamente stili e selettori CSS? Che converte le tabelle in layout div?

Giusto per dare un'idea dell'ordine del problema, la pagina che sto guardando è & 8000 linee di HTML e JavaScript, che è 500em non contando immagini!

Aggiornamento: in ri. " rinunciare e ricominciare da zero " Commenti. Cosa significa questo, nel mondo reale? Stampare la pagina, scansionarla, impostarla come immagine di sfondo in Dreamweaver e iniziare con quella? Sul serio? Sarebbe davvero più efficiente del refactoring?

Aggiornamento: non sto denigrando " rintraccio da zero " né intendevo implicare che Dreamweaver fosse in alcun modo il mio strumento preferito. Sono solo molto sorpreso che il refactoring di un layout sia considerato un problema irrisolvibile.

È stato utile?

Soluzione

Sono d'accordo con TimB in che gli strumenti automatizzati avranno difficoltà a farlo, in particolare facendo i salti relazionali per combinare e astrarre CSS nel modo più efficiente.

Se si presentano dati tabulari, potrebbe essere ragionevole tentare di convertire il CSS incorporato in classi riutilizzabili.

Se disponi di molte tabelle simili con stili incorporati, puoi gradualmente riformattare il CSS con una semplice ricerca e sostituzione. Questo ti darà molte classi che corrispondono a un sottoinsieme di tabelle simili e molte classi in qualche modo simili. Suddividerlo nel layout e nella presentazione sarebbe un buon inizio, quindi sostituirli con classi specifiche per ciascun tema o elemento semanticamente correlato.

Consiglierei ancora ricominciare da capo , probabilmente sarà più veloce e puoi ricreare solo ciò di cui hai bisogno per presentare la pagina e riutilizzare elementi o raccolte di elementi in un secondo momento .

Il tempo speso pagherà anche in modo significativo se la pagina dovesse mai essere modificata di nuovo.

Ma questo è per niente è probabile? : D

Altri suggerimenti

Non sono a conoscenza di strumenti specifici, solo quelli generici di caffeina e Firebug , che chiunque fa CSS il lavoro dovrebbe essere a conoscenza.

Penso che il problema sia sufficientemente difficile che gli strumenti automatizzati avrebbero difficoltà a produrre markup e CSS validi e sostenibili.

Sembra che tu stia cercando mezzi più automatizzati per ricodificare un vecchio layout basato su tabella secondo gli standard CSS. Tuttavia, concordo con alcuni degli altri commenti su "iniziare da zero".

Ciò che significa per te è che dovresti provare a ricostruire (usando CSS) l'aspetto che è stato ottenuto usando una tabella HTML. Se questo concetto ti sfugge, allora suggerirei di cercare su Google alcuni tutorial CSS per principianti, forse anche alcuni focalizzati sull'insegnamento del concetto di layout CSS Table- > ..

Un altro strumento da considerare (che potrebbe aiutarti ulteriormente) potrebbe essere una sorta di CSS "framework". Consiglio Blueprint CSS , poiché aiuta nella creazione di una griglia / simile a una tabella layout con il minimo sforzo. Un altro buono è Yet-Another-Multicolumn-Layout , che ha un < generatore di layout a più colonne .

Non limitarti a lanciarlo in Dreamweaver o in qualsiasi altro strumento di scelta e taglialo. Scrivi prima l'HTML, in stile puramente semantico. ad esempio, un layout molto comune finirebbe per essere: 

<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>

Esegui l'HTML in modo sensato con i tuoi contenuti. Dovrebbe essere utilizzabile se non hai affatto CSS. Successivamente, aggiungi il CSS per farlo apparire come desideri. Con lo stato dei browser / CSS ora, probabilmente devi ancora aggiungere alcuni decoratori all'HTML - ad esempio, avvolgere alcune cose in ulteriori div, solo per essere in grado di ottenere il contenuto nel modo desiderato.

Una volta terminato, avrai un layout molto flessibile che può essere modificato facilmente con CSS e avrai una pagina accessibile, sia per i disabili che per i motori di ricerca.

Ci vuole un po 'di apprendimento prima che tu ne abbia il talento, ma ne vale la pena. Resistere alla tentazione di arrendersi e tornare ai layout basati su tabella e procedere fino in fondo. Tutto può essere fatto con HTML e CSS semantici.

Denigrerai questo approccio nella tua domanda, ma ti consiglio di prendere una schermata della tua pagina nel browser il cui rendering ti piace di più, dichiararlo come riferimento e iniziare a provare a ricrearlo. È più facile di quanto pensi. Ho dovuto prendere i vecchi layout skanky basati su tabella e trasformarli in modelli CMS realizzati con tecniche moderne e non è un lavoro così male.

Al momento sto affrontando un problema simile, non così disordinato come sembra, ma il prodotto di moduli Web asp.net davvero pessimi, stato di visualizzazione eccessivo e controlli del server profondamente nidificati che formattano i risultati di ricerca da un database . Il risultato è ~ 300 - 400K di markup per 50 righe DB - yeek.

Non ho trovato nessuno strumento automatizzato che possa fare un lavoro ragionevole a metà strada del refactoring.

Iniziare con uno strumento come Visual Studio che è possibile utilizzare per riformattare il codice in modo coerente aiuta. È quindi possibile utilizzare combinazioni di regex e selezione rettangolare per iniziare a eliminare la spazzatura e rimuovere il markup ridondante, per iniziare a risolvere ciò che è importante e ciò che non lo è, e quindi iniziare a definire, a mano, un modello efficiente da presentare l'informazione.

Il trucco è dividere pezzi gestibili e costruirlo da lì.

Se disponi di molti dati tabulari effettivi " per formattare, ed è solo una volta fuori, ho scoperto che Excel è il mio salvatore in alcune occasioni, incolla i dati in un foglio, quindi usa una combinazione di concatenare e riempire per generare il markup per i dati tabulari.

Iniziare da zero significa tornare al tavolo da disegno. Se hai bisogno di riformattare una tale mostruosità, allora per tutto il tempo che passerai a migliorarla, potresti anche aver fatto una riprogettazione completa.

Se vuoi allontanarti da tag duplicati e dispendiosi, devi scappare da Dreamewaver. Un buon editor di testo (jedit, emacs, vim, eclipse, ecc.) È davvero tutto ciò di cui hai bisogno. Se personalizzi correttamente l'editor, non perderai nemmeno Dreamweaver. (Emacs con nXhtml e yasnippets è il mio preferito.)

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top