Trinn 1 - Kutte opp bilder

Ser på designet i Photoshop, det er klart at det er en mengde bilder jeg skal trenge. Hvis dette var en mer komplisert design, ville jeg bruke Photoshop's Slice-verktøy, men det er ganske enkelt, så jeg skal bare beskjære filen og lage en haug med bilder - en for bordet, en for alle titlene, en for "følg meg" boble, en for nettets bilde og en for bildet av min gigantiske panne! Her er bildene jeg laget:

Merk Jeg har bare vist en tittel, men selvfølgelig lagde jeg faktisk mange av dem.

Trinn 2 - Planlegg HTML

Neste planlegger vi HTML-oppsettet. Svært bevisst vil dette nettstedet være ekstremt enkelt å bygge. Det er bare en sekvens av blokker. Tidligere har jeg skrevet om hvordan vi skal Absolutt posisjonering for å lage et layout, denne gangen skal vi bruke super enkelt Relativ posisjonering.

Som du vil huske når du legger elementer på en side, har de et naturlig sted de går til, i forhold til elementer som kom før. Fordi vi ikke bruker kolonner eller egentlig noe fancy i dette designet, kommer det til å være perfekt for å bruke denne vanlige postingen.

Som en generell regel, når du vil gjøre livet ditt enkelt i HTML, er det best å gjøre ting i blokker lagt ut horisontalt. Dette er den enkleste måten å jobbe med CSS og krever ikke mye fiddling for nettleserkompatibilitet. Så snart du begynner å sette inn kolonneoppsett, blir det litt vanskeligere. Så vi lagrer det for en annen opplæring, på et annet prosjekt.

Så uansett vil layoutet vi bruker, være noe slikt:

Hovedtekst Seksjon Overskrift Div Innholdsseksjon Seksjon Overskrift Div Innholdsavsnitt Seksjon Overskrift Div Innholdsbok ... og så videre ... 

Det beste med denne planen er at senere hvis vi plutselig går "hei jeg skulle ønske jeg hadde min ekstra blokk for favorittbilder", er det som ingen problem! Bare slipp den inn, bruk samme CSS klasser og alt. Dette er virkelig det enkleste oppsettet rundt, og med en fin design kan det se veldig kul likevel!

Trinn 3 - Legge ut den opprinnelige HTML

OK Opprett en index.html-fil, og her er min første stab på HTML, den er ikke perfekt og mangler Twitter-biten, men det er et godt utgangspunkt, og vi kan gjøre noen få justeringer senere når vi går:

Ting å merke seg:

• Jeg har koblet til en fil som heter "style.css". Det er her vi skal plassere våre stiler senere, så fortsett og lag en fil med det navnet.
• Hele greia er inne i a
  . Jeg gjorde dette delvis for vane å være ærlig, men jeg skal bruke

  å plassere mitt bakgrunnsbilde. og for å forsikre meg om at jeg ikke kjører ut av 1000px bredden som jeg trenger å holde inne for folk på 1024px x 768px skjermer.
• Overskriften "logo" er inne i a
  . Da bruker vi del for å gjøre teksten usynlig og gi den et bakgrunnsbilde slik at det ser ut som designet. Dette har fordeler for SEO, og var et forslag fra kommentarene til en tidligere NETTUTS opplæring (takk kommentator hvis navn jeg har glemt, men hvis forslag jeg har tatt for å bruke!)
• Hver seksjon er en tittel og deretter a
  . Jeg har fylt dem i det meste med innhold, bortsett fra Twitter-boksen som vi vil bekymre oss om i neste trinn.

Trinn 4 - Legg til litt CSS

Nå legger vi til en liten bit av CSS for å få siden til å se litt mer ut som hvor den kommer til å ende opp. Lag din style.css-fil og legg disse to definisjonene i:

kropp bakgrunnsfarge: # 191e25; margin: 0; padding: 0; color: # 5f6874; font-familie: "Lucida Grande", "Lucida Sans Unicode", Arial, Sans-serif; font-size: 13 piksler; linje-høyde: 21px;  #container width: 900px; padding: 50 piksler; padding-top: 30px; background-image: url (images / Computer.jpg); background-repeat: no-repeat; bakgrunnsposisjon: øverst til høyre; 

Et par ting å merke seg:

• Jeg har satt en skriftfamilie som bruker et litt uvanlig sett med skrifter. Lucida Grande er på de fleste, om ikke alle Mac, og Lucida Sans Unicode er på de fleste PC-er, så de fleste bør se en fin Lucida-skrifttype. Hvis ikke, vil de fortsatt se Arial eller noen standard sans-serif. Uansett hvordan Lucida ser kult ut, og det er det jeg får se :-)
• Jeg har brukt min
• Den 50 px polstring vi har satt i beholderen, vil effektivt gjøre det meste av vår posisjonering for oss på siden.

Og her er hvordan vår side ser nå ut:

Trinn 5 - La oss nå ta Twitter

Nå legger vi til innholdet fra Twitter. Dette er en fin måte å få siden til å føle seg veldig dynamisk fordi jeg oppdaterer min Twitter-feed de fleste dager. Også det vil være en måte å få folk til å legge meg til Twitter-nettverkene sine, og i fremtiden når jeg starter nye nettsteder, kan jeg kjøre trafikk til nye steder. Så egentlig er det hele en del av min ikke-spesielt-uklarhet.

Så Twitter har tatt tak i deres mat veldig enkelt for oss, gjør bare følgende:

1. Logg inn på din Twitter-konto
2. Klikk den gule boksen i høyre boks som sier "Legg oppdateringene på nettstedet ditt!"
3. Når du blir bedt om MySpace, Blogger, etc, velg "Annen"
4. Velg HTML / JS alternativet slik at vi kan tilpasse det til CSS senere
5. Sett deretter inn Antall oppdateringer (Jeg satte min til 3) og kopierte + lim inn koden.

Her er prosessen i bilder!

Og her er koden som Twitter gir oss:

Merk jeg slettet

litt som Twitter legger inn, fordi vi ikke trenger en ekstra tittel, har vi allerede fått en. Da er det også verdt å ta Twitters råd og flytte de to Javascript-linjene til bunnen av siden like før . På den måten laster den i siste. Fordi Twitter er beryktet for nedetid, vil dette stoppe dem fra å drepe nettstedet vårt ved et uhell!

Så ved å se på HTML-en som de har gitt oss, kan vi gjette at Javascript formentlig kommer til å fylle ut det

med våre tweets inne i
• s det vil plassere der. Og det er akkurat det det gjør ...

  ---

  Trinn 6 - Legg til Google Analytics

  Nå vil jeg også legge til noen JavaScript for å koble nettstedet mitt opp med Google Analytics. Jeg tror de fleste webutviklere har hørt om Analytics, men hvis du ved en tilfeldighet har bodd under en stein, anbefaler jeg virkelig å prøve det ut. Det er gratis, og det er en kraftig måte å overvåke trafikken på. Når du har fått en konto, er du enkel Lag en ny nettside profil, skriv inn et domenenavn, og du vil få noen JavaScript-kode til å lime inn i HTML-dokumentene dine. Lett peasy!

  

  ---

  Trinn 7 - Mer CSS

  Deretter legger vi til et par flere stilarter som får oss enda nærmere sluttproduktet. De er:

  a img border: 0 a color: # cc5630; text-decoration: none;  a: svever farge: #ffffff;  .content_box width: 590px; margin-top: 15px; margin-bottom: 30px; 

  Her fjerner vi grenser for koblede bilder (det vil si linken til NETTUTS og bildet av meg som vil koble til en større versjon), vi stiller også fargene på våre lenker på siden generelt. Til slutt med content_box-stilen setter vi en bredde for våre innholdsblokker og bruker topp- og bunnmargener å skille dem opp på siden. Slik ser vår side nå ut:

  

  Den neste tingen å gjøre er å få litt tekstinnpakning rundt våre to bilder. Det første du må gjøre er å legge til en klasse i bildene vi vil pakke inn (bildet og nettbildet). Jeg trodde ikke å gjøre dette tidligere, men kan se jeg trenger nå. Så vi endrer bildene til å ha:

  Da legger vi til en rask stil for å gjøre floaten til venstre med litt margin, slik:

  img.photo float: left; margin-right: 20px; 

  Dessverre, mens det er pent og enkelt, gjør denne løsningen ikke helt karakteren fordi tekstblokken min er for lang, så det er innpakning ... booo! Ikke tankene, lett løst. Vi legger den teksten i sin egen blokk og gjør det flytende også.

  

  Så vi justerer denne content_box slik at HTML-koden nå er:

   
    
   
  Etter å ha jobbet som webdesigner - både ansatt og freelance - startet jeg sammen med noen venner i 2006. Vårt firma, Eden, har siden vokst, og jeg har hatt hell til å jobbe med mange spennende og interessante prosjekter, alt fra FlashDen til Blog Action Day. 
   
  Takket være den briljante naturen på nettet bor jeg for tiden og jobber ut av Hong Kong og reiser verden. Du kan finne meg online på Twitter der jeg legger til tilfeldige tanker, eller du kan sende meg en epost fra skjemaet nederst på denne siden. Takk for at du stoppet forbi!
   
   
   

  Så du kan se at jeg har pakket teksten i en

  og deretter lagt til en
  på bunnen. Dette ekstra
  vil bli brukt til å rydde flåtene, ellers ville de flytende lagene komme opp over toppen av innholdet lenger ned på siden. Så her er den ekstra CSS-koden for å gjøre dette arbeidet:

  .about_text float: left; bredde: 380px;  .clear clear: both;

  Vi må gi vår about_text-blokk en bredde slik at den flyter ved siden av bildet. Nå løser problemet vårt pent. Men hvis du ser på bildet som vises nedenfor, ser det ut til at det er et merkelig gap som vises mellom toppen av tekstblokken og bildet.

  

  Rare hull er det verst å komme over, fordi det kan være veldig vanskelig å finne ut hva som forårsaker dem. I vårt tilfelle her skjønt jeg husker at den

  tag har en standard toppmargin som hvis vi blir kvitt vil trolig løse problemet vårt. Her er koden for å fikse dette:

   p margin: 0px; margin-bottom: 20 piksler; 

  Så nå vil hvert avsnitt ikke ha noen margin unntatt 20px under den (avstand ut neste avsnitt).

  ---

  Trinn 8 - Erstatt vårt overskrift

  Som nevnt tidligere skal vi bruke litt CSS til å erstatte vår

  tag øverst med det mye bedre bilde så vi får seo fordeler og fin tittel tittel. Hvis jeg var samvittighetsfull, ville jeg gjøre denne teknikken med alle disse underposisjonene også ... men det er jeg ikke!

  Så alt vi skal gjøre er å bruke tag som vi så smart plassert tidligere for å sette tekstvisningen til ingen - gjør den skjult. Da skal vi gi

  en høyde slik at bakgrunnsbildet ikke blir avskåret, og til slutt vil vi sette bildet til å vises. Her er CSS-koden vi trenger for å få dette til å skje:

  h1 bakgrunnsbilde: url (bilder / title_main.jpg); background-repeat: no-repeat; høyde: 60 px; margin-bottom: 50 piksler;  h1 span display: none; 

  

  ---

  Trinn 9 - Stil Twitter-området

  Deretter skal vi stile vår twitter-boks. Men før vi gjorde, skjønte jeg at jeg hadde glemt å plassere bildet mitt "Follow Me on Twitter" på siden (dumme Collis!) Uansett, jeg legger til det nå, her er den resulterende HTML-koden for området vi jobber med:

  Legg merke til at bildet vises innsiden twitter_div. Vi skal bruke en av de store fordelene ved CSS styling for å plassere den slik at den sitter utenfor boksen. Nå hvis dette var gamle dager, og jeg gjorde dette oppsettet med en

  , Jeg vil ende opp med å bruke SOO mye mer kode her, sette grenser og masse bakgrunnsbilder og ting. Tusen takk for CSS. Her er vår CSS-kode:

  #twitter_div border: 1px solid # 222830; background-color: # 101318; stilling: i forhold; min-høyde: 40px; padding: 40px;  #twitter_div img posisjon: absolutt; bottom: -22px; høyre: -14px; 

  Denne koden gjør vår twitter_div-boks til en fin mørk boks og plasserer deretter innsiden. Legg merke til at jeg har gitt den ytre twitter_div a slektning stilling. Så på innsiden har jeg satt bildet til en absolutte stilling. Absolutt posisjonering posisjonerer alltid etter den siste beholderen med en relativ posisjon. Hvis det ikke er inneholdt i noen andre HTML-elementer, eller ingen av elementene har en relativ posisjon, blir den standard tilbake til hele nettleservinduet.

  Fordi vår twitter_div er relativt posisjonert, vil den absolutte posisjonen være i forhold til det

  . Så med andre ord toppen: 0px, venstre: 0px, ville være øverst til venstre for twitter_div-beholderen. På samme måte, nederst: -22px og høyre: -14px, måles fra nederst til høyre for twitter_div. I dette tilfellet fordi vi har lagt til minus tall, plasserer vi faktisk det utenfor div.

  Dette er den enkleste måten å plassere bilder som er ment å overlappe en boks, kantlinje, linje, uansett.

  Posisjonering kan være litt fiddly for å finne akkurat det riktige antall piksler, men du kan raskt trene det med en sofistikert teknikk jeg kaller "prøve og feil" :-)

  

  ---

  Trinn 10 - Stil Twitter FEED

  

  Så det ser ganske bra ut nå, men egentlig ikke helt det vi hadde i tankene. Faktisk det jeg opprinnelig ønsket var datoen / klokken til å være på venstre side, hvor kulepunktene er. Og selvfølgelig trenger hele greia bedre avstand.

  Nå fordi innholdet kommer fra noen JavaScript som vi ikke har noen kontroll over, er det vi trenger å finne ut en måte å jobbe med med det vi har. Her er det vi vet:

  • Hver tweet er i en element.
  • Dato / klokkeslett er en lenke, så den må pakkes inn i en element.
  • Og vi vet at linken er siste ting i hver tweet.
  • Og vi vet at koblinger inne i tweets ikke er koblet sammen. (Jeg vet dette fordi jeg prøvde å skyve gjennom en faktisk lenke, og det virket ikke koblet til). Så med andre ord vet vi at dato / klokkeslett er BARE element innpakket i en .

  Så å bruke denne informasjonen kan vi søke stil på

  og elementer for å formatere det slik vi ønsker. Slik gjør vi det:

  #twitter_div ul margin: 0px; padding: 0 px;  #twitter_div ul li listestil: none; margin-bottom: 5 px; margin-left: 90 piksler; font-size: 12 piksler;  #twitter_div ul li a width: 70px; display: block; stilling: i forhold; top: -43px; venstre: -90px; linje-høyde: 19px; text-transform: store bokstaver; 

  Noen ting å legge merke til om de to første definisjonene:

  1. Den første definisjonen blir bare kvitt standardmarginer og polstring på
     element
     • Neste blir vi kvitt kulepoengene (listestil: ingen). Da skiller vi fra
     • elementer med bunnmargin
     • Da forteller vi også
     • elementer for å ha en enorm venstre margin på 90px. Dette vil gi oss nok plass til å flytte våre dato / tidskoblinger inn i gapet.

  Den siste definisjonen gjelder for noen elementer i listen, og derfor var det viktig å sjekke at disse dato / tidskoblingene var de eneste koblingene. Først forteller vi linken for å vise: blokkere. Ved å sette koblingen til å være et blokknivåelement, stopper vi det fra å sitte i linje med resten av teksten og flytte den som standard til å sitte under teksten som en blokk.

  Nå fordi det som standard er et blokkelement som vår lenke nå, vil justere til venstre, kan vi med sikkerhet si hvor koblingen vil bli plassert. Dvs. at den vil ligge under vår tekst og justeres til venstre. Hvis du vil se hva jeg mener, bare slett alt etter visning: blokkere og se på resultatet.

  Med denne kunnskapen kan vi bruke relativ posisjonering for å flytte den slektning til hvor det er nå. Så vi sier at linken skal være 43px høyere enn den er for øyeblikket, og 90px til venstre. Og så legger du linken der vi ønsket det! Prøv det og se!

  

  ---

  Fullfør HTML og CSS

  OK! Vi er ferdige med vår HTML og CSS! Du kan laste ned filene - bilder, CSS, HTML - ved hjelp av linken nedenfor:

  Last ned bilder / HTML / CSS

  ---

  Trinn 11 - Testing for skjermstørrelse

  Nå er vi ferdige med vår HTML, det er på tide å gjøre noen test. Den første tingen er hvordan den skal se på en 1024x768 skjerm. Jeg bruker et Firefox-plugin for å gjøre dette kalt Firesizer, som bare er så praktisk. Den vises i statuslinjen, som vist, og du velger skjermstørrelsen og Bam!

  Uansett viste alt ut OK, så ingen endringer her!

  

  ---

  Trinn 12 - Testing for IE6

  Deretter tester vi IE6. Fordi jeg er på en Mac, bruker jeg en virkelig skarp IE6-løsning med noe som heter Darwine. På en PC kan du få en frittstående installasjon av IE6 som ikke tukler med din IE7 installasjon.

  Hvis du er en webutvikler og du bruker IE6 som standard, må du stoppe umiddelbart! hehe. Vel, jeg antar at det ville være tilfeller der det ville være en god ide - f.eks. hvis du utviklet for et stort IE6 publikum. Likevel, det ville vært ganske rart. Jeg anbefaler Firefox selv, men Opera, Safari, IE8 Beta, selv IE7 ville være bra. For ikke å nevne alle de mer obskure nettleserne ...

  (Merk at det er en IE7-løsning via Darwine også, men så langt jeg kan fortelle det er dementert ... som virkelig gal og ubrukelig)

  

  ---

  Trinn 13 - Testing for IE7

  Nå tester vi på IE7 fordi selv om det er mye bedre enn IE6, kan det fortsatt gjøre crazies nå og igjen. For dette må jeg kjøre min nylig installerte kopi av Parallels.

  Guttens nettlesertesting er arbeidskrevende!

  Likevel er det ikke nesten like arbeidskraftig som om jeg skulle løse problemer! Heldigvis sjekket alt ut OK.

  

  ---

  Trinn 14 - Bekreft vårt merke

  Og til slutt fordi noen kommentatorer her er NETTUTS foreslo at jeg virkelig bør validere min oppsummering, vil vi få det til å presse gjennom W3C-validatoren

  Nå vet jeg det utseende som jeg har mange problemer der, men faktisk kommer de alle fra Twitter Javascript - tsk, tsk, tsk, for skam! hehe. Så det er ok, jeg er ute av kroken!

  

  ---

  Trinn 15 - HTML er ferdig! Nå for å laste opp ...

  Og nå er det på tide å laste opp. Jeg kommer ut av min trofaste FileZilla og hekker opp, og opp går på nettstedet!

  Med det gjort ... kan vi vende oss til CushyCMS!

  

  ---

  Trinn 16 - CushyCMS - Introduksjon

  Nå var formålet med denne opplæringen å vise deg hvordan du bruker CushyCMS. I hvert fall var det før jeg skjønte at dette er ganske dumt enkelt å bruke og egentlig ikke verdt en opplæring (jeg lærte å bruke den fra den videoen de har på deres nettsted!)

  Så allikevel er tjenesten helt gratis og fungerer av FTPing til serveren din og endrer filene du forteller at den skal modifisere. Det er veldig enkelt å bruke som du vil se, ikke enormt omtalt, men det gjør det som gjør det bra. Fra deres hjemmeside ser det ut til at det blir flere ting i fremtiden som de skal lades for.

  Jeg anbefaler å prøve det som det kan være en fin løsning for mange små klientwebsteder, eller selvfølgelig for et nettsted som min! Så uansett, vi går til CushyCMS og registrerer deg.

  

  ---

  Trinn 17 - Oppsett CushyCMS for det nye nettstedet

  Når du er logget inn, er det en to-trinns prosess for å få oppsett:

  1. Det første du må gjøre er Legg til et nettsted. Dette innebærer i utgangspunktet bare å gi dem FTP-detaljene
  2. Da vi Tilordne side (r), for oss er det bare ett, så det er et enkelt valg

  

  ---

  Trinn 18 - Legge til CushyCMS-klassen

  Nå for at CushyCMS skal kunne vite hvilke elementer som skal redigeres, må vi spesifisere dem i HTML på siden ved hjelp av en spesiell klasses Definisjon. Så vi må gå tilbake til vår HTML og legge til noen class = "cushycms" bits.

  Nå er brikkene vi ønsker å være redigerbare, de

  områder. Men de har allerede en klasse = definisjon. Men det er ok! Du kan tilordne flere klasser til et enkelt element ved å skille dem med et mellomrom som dette:

  . Så den resulterende HTML-koden er:

         
   
  Hei jeg er Collis, entreprenør, blogger og designer.
    
    
   
  Etter å ha jobbet som webdesigner - både ansatt og freelance - startet jeg sammen med noen venner i 2006. Vårt firma, Eden, har siden vokst, og jeg har hatt hell til å jobbe med mange spennende og interessante prosjekter, alt fra FlashDen til Blog Action Day. 
   
  Takket være den briljante naturen på nettet bor jeg for tiden og jobber ut av Hong Kong og reiser verden. Du kan finne meg online på Twitter der jeg legger til tilfeldige tanker, eller du kan sende meg en epost fra skjemaet nederst på denne siden. Takk for at du stoppet forbi!
   
   
   
    
   
   
    
   
    
   
    NETTUTS 
  I april lanserte Eden en søsterside til PSDTUTS som jeg har jobbet med. Nettstedet er vert for webutvikling og designopplæringer.
   
   
    
   
  Noen lenker til nettsteder som jeg har en hånd på:
   
   
  FlashDen - vårt viktigste Eden-prosjekt
   
  Hvordan være en Rockstar Freelancer - En bok jeg cowrote med min vakre kone
   
  FreelanceSwitch - Den svært vellykkede bloggen på freelancing
   
  PSDTUTS - Den beste photoshop bloggen rundt!
   
  Blog Action Day - En ideell, årlig begivenhet
   
   
    
   
  Jeg er den første til å innrømme at jeg ikke er veldig god til å svare på alle mine e-postmeldinger, men jeg gjør mitt beste, og hvis du har behov, kan du sende meg en epost.
   
   
        

  Nå går vi tilbake til CushyCMS og vår side er fullt redigerbar!

  En ting jeg bør påpeke er at når jeg prøvde å gjøre mitt Twitter-område redigerbart, fjernet CushyCMS-systemet bare min tomme

  element, noe som gjør Twitter ting ubrukelig. Dessverre virker det som redaktøren er litt for smart for sin egen godhet. Likevel bortsett fra den lille irritasjonen, var systemet egentlig ikke så ille i det hele tatt. Jeg pleier å bytte til Kilde se når du redigerer, men jeg kan se at klienter synes det er ganske enkelt å bruke. Jeg er interessert i å se hvilke ting de legger til i den kommende betalte versjonen.

  Som et godt alternativ til denne typen super lett, ingen koding kreves, slags CMS, kan du også sjekke ut Light CMS som jeg har prøvd og ganske likte også - selv om det virker litt annerledes.

  

  ---

  Konklusjon!

  Så håper du likte opplæringen. Pass på å besøke min twitter feed og gi CMS en virvel.

  Hvis du kjenner til andre lignende CMS-produkter (som Cushy eller Light), vennligst legg igjen en kommentar, da det ville være bra å gjøre en innpakning av dem her en gang.

  Kode

  Hvordan bygge en nyhetsnettstedlayout med Flexbox

  Hvordan bygge et lavt budsjett Darkroom

  

  ×