Wat is die beste manier om te gaan van 'n Photoshop mockup om semantiese HTML en CSS?

Question

Ek gebruik gewoonlik 'n handleiding proses:

1. Kyk na die bladsy, uit te vind die semantiese elemente, en die bou van die HTML
2. Sny die beelde wat ek dink ek sal moet
3. Begin skryf CSS
4. Tweak en herhaal verskillende stappe wat nodig

Het jy 'n beter benadering, of 'n instrument?

Answer 1

Ek het 'n redelik natuurlike manier van kodering. Die sleutel is om die bladsy te behandel soos 'n dokument of 'n artikel. As jy dink van dit so die volgende word logies duidelik:

1. Die bladsy titel is 'n opskrif bokant vlak

   • Of jy maak die terrein titel of werklike bladsytitel die H1 is aan jou -. Persoonlik sou ek maak oor ons die H1 eerder as Stack Overflow

2. Die navigasie is 'n inhoudsopgawe, en dus 'n geordende lys -. Jy kan net sowel gebruik 'n ol oor 'n ul

3. Artikel kop is H2, afdelings binne daardie artikels is h3s ens Stapel hulle grootgemaak het.

4. Gebruik block quotes en aanhalings waar moontlik. Moet nie net omring dit met ".

5. Moenie b en i. Gebruik sterk en em. Dit is omdat HTML is strukturele eerder as presentatie opmaak. Sterk en em enorme waarde tags moet gebruik word waar jy die klem op die woord wil sit.

6. <label> jou vorm elemente.

7. Gebruik <acronym>s en <abbr>s waar moontlik, maar slegs in die eerste plek.

8. Die maklikste:. Altyd, altyd gee jou beelde 'n paar alternatiewe teks

9. Daar is baie van die HTML tags wat jy kan gebruik wat jy waarskynlik nie - adres vir posadresse, skerm-kode uitset. Het jy 'n blik op HTML Dog vir 'n paar, dit is my gunsteling verwysing.

Dit is net 'n paar wenke, ek is seker ek kon dink meer.

O ja, en as jy wil 'n uitdaging skryf jou XHTML eerste, skryf dan die CSS. Wanneer CSS-ing jy word nie toegelaat om die HTML raak. Dit is eintlik moeiliker as wat jy dink (maar ek het gevind dit het my laat vinniger).

Answer 2

Wel, toe ek 'n webwerf te bou Ek is geneig om te probeer en vergeet van die ontwerp heeltemal terwyl die skryf van die HTML. Ek het dit so ek sal nie eindig met 'n ontwerp-spesifieke opmaak en sodat ek kan konsentreer op die semantiese betekenis van die elemente.

Sommige wenke hoe om dinge Seisoen

• menu - gebruik die UL (On-geordende lys) element, want dit is presies wat 'n spyskaart is. 'n On-geordende lys van keuses. Byvoorbeeld:

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

  As jy wil 'n horisontale menu wat jy kan doen:

  #menu li {
      display: block;
      float: left;
  }
  

• Logo - gebruik 'n H1 (pos) element vir die logo in plaas van 'n image.Example:

  <div id="header">
      <h1>My website</h1>
  </div>
  

  En die CSS (dieselfde tegniek toegepas kan word om die spyskaart hierbo as jy wil graag 'n spyskaart met grafiese items):

  #header h1 {
      display: block;
      text-indent: -9999em;
      width: 200px;
      height: 100px;
      background: transparent url(images/logo.png) no-repeat;
  }
  

• ID's en klasse - gebruik ID's aan elemente wat jy net een geval van te identifiseer. Gebruik klas vir die identifisering van elemente wat jy het 'n paar gevalle van.

• Gebruik 'n teks leser (byvoorbeeld, lynx). As dit sin maak om te navigeer in hierdie manier, het jy 'n goeie gedoen word wanneer dit kom by die toeganklikheid.

Ek hoop dit help:)

Answer 3

Ek wese doen dieselfde ding Jon doen, maar hier is 'n paar ander idees:

1. Gebruik Guides in Photoshop (en sluit aan hulle). Uit te vind al jou dimensies vir elke vak / streek voor die tyd.

2. versamel al van jou afmetings en kleur hex waardes in 'n info lêer (Ek gebruik 'n txt lêer) wat jy maklik kan verwys. Dit sal jou alt-blad belasting en kies kleure in Photoshop verskeie kere verminder.

3. Na al my Guides is in plek, ek sny uit die hele webwerf in my gids beelde, wat begin met foto's en gegroepeer elemente, en eindig met die verskillende agtergrond teëls / beelde, moet hulle bestaan. (Wenk: Gebruik Ctrl -Kliek op die laag voorskou oor na inhoud se dat laag kies).

Notes oor die gebruik van Photoshop:

• Gebruik Guides of die rooster.
• Gebruik die funksie Notes vir enige relevante inligting
• Gebruik altyd Layer Groepe vir soortgelyke elemente. Ons moet in staat wees om die hele streek afskakel in een klik. Sit al 'header' inhoud in een laag Groep.
• noem altyd jou lae.
• Jy kan elke bladsy sjabloon sit in een PSD lêer en gebruik geneste Layer groepe om hulle te organiseer. Op hierdie manier het ons nie vir die opstel van al ons gidse en notas vir elke bladsy sjabloon op 'n site.

Answer 4

Geen kortpaaie :) maar almal werk effens anders.

Hierdie handleiding wat inloer in my feed reader gister toon die proses van begin tot einde en kan help om mense wat dit nooit gedoen het voor, maar as jy 'n ou hand is dit net oor die vaartbelyning van jou eie metodes.

EDIT: Die listapart skakel is beslis meer outomatiese vir 'pap' ontwerpe waar beide Ready en vuurwerke redelik goed ondersteuning van dag een gehad het en dit is beter en meer semantiese met elke release het, maar as jy 'n meer komplekse ontwerp dis die twiddly stukkies wat die maak ontwerp wat dit is en dit moet gedoen word met die hand.

Answer 5

Ek het net gedink dit was die moeite werd daarop te wys dat bykomend tot die uitstekende raad wat jy tot dusver gehad het ek wil aanbeveel om 'n gedrukte weergawe van die ontwerp, met behulp van 'n rooi pen te merk al die blok elemente op die ontwerp jy dink jy kan raaksien en sit met die ontwerper vir 'n halfuur en praat deur middel van hoe hulle hul ontwerp in die vooruitsig gestel wat vir die gebruik gevalle wat nie pas by die statiese ontwerp.

• Wat gebeur wanneer meer teks in die navigasie gestel?
• Is dit wydte vaste of vloeibare?
• Is dit venster inhoud aan die reg vaste hoogte of vloeistof? As dit vloeistof hoekom het jy 'n agtergrond op dit wat nie kan herhaal word?
• Jy het 'n grens strek af op die bladsy wat twee anders verbind elemente breek. Visueel maak dit sin, maar semanties Ek kan nie nie net gebruik 'n li aan beide hierdie elemente te huisves. Wat dink jy is meer belangrik?

Dit sal ook help om potensiële probleme wat jy dalk anders nie besef het die kol op pad was na kwessies tot jou elmboog diep in css wees.

Nie net het dit jou werk makliker te maak na 'n paar keer om dit te doen jou ontwerper sal 'n baie sterker gevoel van wat betrokke is in die nasien van hul werk te kry - 'n paar ontwerpers het moeilikheid begryp waarom iets wat hulle dink lyk visueel baie eenvoudig wil neem 'n paar dae van css opstel om werk te maak.

Answer 6

Van die ontwerpers ek weet, gebruik gewoonlik Illustrator om die ontwerpelemente te maak.

Answer 7

Hierdie wys hoe om dit te doen 'n bietjie meer outomatiese.

Answer 8

Ook, ken die "laag Comps" funksie. Ek gebruik dit vir die verandering van die knoppie state.

1. Skep laag comps vir normale, hover, en aktief is.
2. In elk van hierdie, die opstel van die gevolge / kleur overlays en sigbare lae wat hoort by daardie toestand.
3. 'Hou vir web:. Gaan na 'n ander gids vir elke staat, tensy dit is makliker om elke sny hernoem (anders jou hover knoppie snye sal oorskryf jou gereelde snye)