Bygg en slank porteføljeside fra grunnen av

Det er ingenting som å bygge et helt nettsted for å vise deg en god oversikt over hvordan en CSS-layout skal fungere. Over på PSDTUTS har vi en opplæring hvor du designer opp et slank, høykvalitets webdesign. I denne opplæringen skal vi ta den PSD-filen og bygge den med noen fine, rene HTML og CSS.

Demo og Kildekode

Trinn 1

Så her er designet vi skal bygge. Som nevnt kan du følge opplæringen på PSDTUTS for å bygge denne designen fra bunnen av. I denne opplæringen skal vi bare bygge denne hjemmesiden, men ved å bruke det som en base ville du kunne bygge innvendige sider etter samme layout.

Steg 2

Det første du må gjøre er å bestemme hvordan vi skal strukturere vår bygg. Denne prosessen blir lettere over tid mens du lærer hvordan CSS-layouter kan fungere. For dette designet tror jeg vi kan komme seg unna med en veldig enkel konstruksjon som bruker ganske mye av absolutt posisjonering og et stort bakgrunnsbilde.

Hva er absolutt posisjonering?
Når du legger et HTML-element på en side (for eksempel a

og så videre) den har en naturlig posisjon som er bestemt av det som kom før det. Så for eksempel hvis du legger ned med litt tekst i den, og så legger du et annet, vil det naturligvis vises like under det første

. Det vil bare flyte i forhold til det siste elementet.

Absolutt posisjonering er annerledes ved at du spesifiserer en eksakt plassering for en gjenstand og tar den ut av den vanlige strømmen av elementer. Så hvis du hadde din første like før, men for din neste du ga den en absolutt posisjon til venstre: 500px; top: 500px; Da virker det nettopp på den plasseringen uansett tidligere

Du setter den absolutte posisjonen til noe slikt:

 .klassenavn posisjon: absolutt; top: 0px; venstre: 0px;

Ulemper til absolutt posisjonering
Hovedproblemet med å bruke absolutt posisjonering er at elementene dine ikke egentlig er knyttet til hverandre. Så hvis du for eksempel har en blokk med tekst nær toppen av siden din, og en annen blokk med tekst litt lenger nede, kan det se bra ut når hver tekstblokk er kort. Men hvis toppblokken skulle ha et stort essay i det, så vil det bare gå over toppen, i stedet for å skyve neste blokk med tekst ned. Dette skyldes at du tar elementene ut av den naturlige strømmen av siden.

Så absolutt posisjonering er bare veldig nyttig for objekter som du vet vil alltid være en viss størrelse, og som egentlig ikke trenger å samhandle med andre elementer.

Hvorfor det er nyttig for oss i dag
Det gode ved Absolutt posisjonering, er at det er veldig, veldig enkelt! Du forteller nettleseren hvor du skal sette noe og det er der det ser ut! Til toppen er det langt færre problemer med nettleserkompatibilitet når du plasserer ting helt. Tross alt 100px er 100px enten du er i Firefox, Internet Explorer eller Safari.

SOOO vår layout
Så måten vi skal lage vår nettside på er:

Har et stort bakgrunnsbilde
Plasser helt enkelt logoen, menyene og overskriften nøyaktig hvor de er ment å vises
Har alt vårt innhold dukker opp i en vanlig
tag, men gi det så mye padding-top at innholdet skyves helt ned til der det er ment å være
Ha vår fotfot sitte under

Hvis det ikke gir mye mening enda, ikke bekymre deg, det vil som du ser at nettstedet tar form!

Trinn 3

Nå når det gjelder bakgrunnsbilder, trenger vi to. En kommer til å være gigantisk, og faktisk etter at jeg lagret den som en JPG, er den omtrent 56kb i størrelse. Det pleide å være en tid der det ville vært litt for stort, men i disse dager er det ikke en stor sak.

Så det er hovedområdet, da trenger vi et andre bakgrunnsbilde som blir et tynt stykke. Denne snittet gjentar om og om igjen til høyre, slik at når nettleservinduet blir trukket, åpner det det fliser ut.

(Merk at logoen ikke skal vises nedenfor i bakgrunnsbildet, det var bare noen skjulte skjermbilder, beklager!)

Du kan se de to bildene jeg har laget her og her.

Trinn 4

OK så nå, la oss starte vår HTML. Først legger vi ut noen grunnleggende:

    PSD vs NET       
 
    Laget for en PSDTUTS og NETTUTS opplæring av Collis! Se Photoshop-opplæringen, se webveiledningen

Som alltid er det best å jobbe fra utsiden med vårt layout. Så det jeg har gjort her er sted tre store

'S. De to første er outside_container / container og den andre er bunntekst. Dette krever litt å forklare:

Jeg har laget outside_container og container fordi jeg trenger et dobbelt bakgrunnsbilde. Det er jeg trenger et flisebakgrunnsbilde, og på toppen av det trenger jeg det store bakgrunnsbildet. Så i outside_container Jeg legger bakgrunnsplaten, deretter på container
som vil dukke opp på utsiden av beholderen, har jeg den store hovedbakgrunnen.
Bunnteksten må være utenfor beholderne fordi hvis nettleservinduet ble strukket i lengderetningen, bør bunnteksten fortsette og fortsette. Siden den har sin egen bakgrunn, kan den ikke ligge i beholderne - hvis det var og du strukket på et tidspunkt, ville du se beholderbakgrunnen og ikke bunnteksten!

Også du vil se at jeg har lagt til noe innhold inne i bunnteksten, det er bare mini-logoen og teksten. Jeg har pakket teksten i en tag slik at jeg kan manipulere den. Det er ingen grunn til å gi merk et id eller en klasse, fordi vi bare kan si #footer img og siden det er det eneste bildet der inne, kan vi kalle det på den måten. Dette holder vår HTML litt enklere.

Trinn 5

Nå CSS for vår kode så langt:

 kropp margin: 0px; padding: 0 px; background-color: # 11090a; font-familie: Arial, Helvetica, sans-serif;  #outside_container bakgrunn: url (images / background_slice.jpg) repeat-x # 000000;  #container background: url (images / background_main.jpg) no-repeat; min-høyde: 800 ganger;  #footer border-top: 1px solid # 3f2324; polstring: 30px 50px 80px 50px;

Så går gjennom en om gangen:

Først er vi omdefinere kropp stikkord. Dette er nesten alltid det første jeg gjør. Vi blir kvitt standardmargin og polstring, angi en bakgrunnsfarge og en skriftfamilie for siden. Legg merke til at bakgrunnsfargen faktisk er bunntekst bakgrunnsfarge. Som nevnt tidligere er dette slik at hvis du strekker nettleservinduet vertikalt, vil du fortsette å se bunntekst.
Neste har vi outside_container stikkord. Jeg har gitt den den snittbakgrunnen, den skal bare gjenta langs x-aksen (dvs. fra venstre til høyre) og hvor det ikke er noe bakgrunnsbilde, ser vi rett svart (# 000000). Så i utgangspunktet som siden blir lengre vil flisene ikke fortsette fordi vi sa å bare gjenta venstre til høyre, i stedet får vi den svarte bakgrunnen. Dette er perfekt fordi vårt flisebilde fades til svart!
Neste har vi container. Her har vi det gigantiske bakgrunnsbildet sett til å ikke gjenta - så det vises bare en gang. Legg merke til at vi ikke angav en bakgrunnsfarge, hvis vi hadde det ville ha dekket vår outsidecontainer over. Det er fordi dette
tag er inne i den forrige, og vil automatisk strekke seg ut for å fylle den opp helt. Så vårt bakgrunnsbilde vises øverst, og deretter utenfor det området kan du se bakgrunnen utenfor_containeren som vises.
Jeg har også gitt containeren en minimumshøyde, dette er bare slik at når vi ser på HTML-siden på dette punktet, kan du se omtrent hvordan det ser ut når det er innhold. Senere vil innholdet våre produsere minimumshøyden uansett.
Foten er i utgangspunktet bare en enkelt linje grense og litt polstring. Det er ikke nødvendig å gi det en bakgrunnsfarge, fordi vi setter det i Tidligere. Husk med polstringsdefinisjonene det går slik: polstring: øverst til høyre nederst til venstre (med urviseren!)

Her er hvor vi er opp til nå ...

Se siden så langt

Trinn 6

Deretter avslutter vi den bunnteksten ved å legge til noen ekstra ekstra stiler som dette:

 / * Footer * / #footer border-top: 1px solid # 3f2324; polstring: 30px 50px 80px 50px; color: # 674f5d; font-size: 9px; linje-høyde: 14 piksler;  #footer img float: left; margin-right: 10px;  #footer span display: block; float: venstre; bredde: 250px;  #footer en color: # 9e8292; text-decoration: none;  #footer a: hover color: #ffffff;

Så her har jeg lagt til noen biter i vår #footer-klasse og laget noen flere klasser. La oss gå gjennom det ett stykke av gangen:

Først av alt biter mellom / * og * / er CSS kommentarer. Det er hyggelig å ha kommentarer i CSS-filen din, da den virkelig ødelegger den og hjelper med å holde ting forståelig. Faktisk på større prosjekter finner jeg CSS-filer kan bli ganske ute av kontroll hvis du ikke er forsiktig. Så det er veldig bra å prøve å komme inn i gode vaner tidlig: navn selgerne dine vel, legg til kommentarer, hold sammen ting, brøt inn i flere CSS-filer for større prosjekter og så videre.
I #footer Jeg har lagt til en skriftfarge, skriftstørrelse og linjehøyde til vår forrige definisjon. Linjehøyde er en veldig nyttig tekstattributt som hjelper deg med å plassere teksten din. Uten god linjehøyde kan teksten sees opp og vanskeligere å lese. For mye linjehøyde og teksten vil være så spredt ut at det ser rart ut. Så du vil kanskje eksperimentere for å finne de rette høyder for forskjellige skrifttyper og størrelser. Her virket 14px som en god passform.
Deretter har jeg satt #footer img og #footer span til begge flyter: venstre. Fordi de begge er satt til å flyte til venstre, kommer de til ende i kolonner ved siden av hverandre. Jeg snakker mer om flytende og kolonner senere i denne opplæringen.
Til slutt forteller vi nettleseren hva du skal gjøre med koder (dvs. koblinger) som vises i bunnteksten. Nemlig at de ikke skal understrekes, og bør endre farge når du svinger over med en mus.

Så med tillegg av bunnteksten er det her opp til:

Se siden så langt

Trinn 7

Nå med bunnteksten ut av veien, la oss legge til litt mer innhold på siden inne i hovedbeholderområdene. Først trenger vi to nye bilder som vi lager ut av vår PSD-fil:

Legg merke til at jeg har brukt et bilde for den store tekstblokken. Generelt er det best å bruke tekst for disse tingene, siden det gjør siden mye mer søkbar og god praksis. Men det ville vært mye vanskeligere å gjøre som vi måtte bruke litt av Flash og SIFr for å oppnå denne effekten. Så siden dette er en ganske enkel opplæring, har jeg valgt å bare bruke et stort bilde :-)

Her er en utdrag av vår HTML-kode - bare beholderbitene:

     retusjering
 Digitale effekter
 Webarbeid
 
  Handle om
 Ta kontakt med

Så inne i containerområdet har vi lagt til fem ting:

Vår logo: Den er koblet, så å klikke på den skal ta deg til hjemmesiden, og har
Hovedmeny: Dette er bare en uordnet liste med
Høyre side menyen: Dette er det samme som den andre menyen, bare forskjellig
Stort tekstpanelbilde: Dette er vår hovedteksttekst som er lagret som et bilde,
Innhold Div: Og det er her vi skal legge inn alt vårt sideinnhold senere. Jeg har forlatt den tom nå, bortsett fra en HTML-kommentar.

Så før vi begynner å utforme den, er det verdt å se hvordan siden ser ut med alt som dumpes på slik:

Som du kan se, må vi gjøre noe seriøst skiftende for å få alt på plass. Som du vil huske skal vi bruke Absolutt posisjonering for å gjøre dette raskt og enkelt.

Trinn 8

Her er CSS vi legger til for at elementene våre begynner å passe på plass:

 #container background: url (images / background_main.jpg) no-repeat; min-høyde: 800 ganger; bredde: 1000 piksler; stilling: i forhold;  / * Logo / Meny / Panelposisjonering / /logo posisjon: absolutt; top: 58px; venstre: 51px;  #panel posisjon: absolutt; top: 165px; venstre: 51px;  ul # meny margin: 0px; padding: 0 px; stilling: absolutt; top: 145px; venstre: 75px;  ul # right_menu margin: 0px; padding: 0 px; stilling: absolutt; top: 145px; høyre: 75px;

Så igjen, la oss gå gjennom hvert stykke for hverandre:

Først av alt, vil du se en gammel del av vår kode - the container. Jeg har vist dette som jeg har lagt til to linjer til det nå. Den har nå a bredde: 1000 piksler og stilling: relativ. Dette er viktig fordi når du setter stilling for å være relativ, er alt som er helt plassert inne, gjort så slektning til den beholdermerket. Så det betyr at jeg kan plassere ting i denne boksen, ved å bruke det faktum at jeg vet at den er 1000px bred. Nemlig vil jeg bruke det for right_menu.
Neste fordi dette er et nytt sett med CSS, har jeg delt det med en kommentar
Med logo og panel Jeg har gitt begge en absolutt posisjon på siden. Hvordan vet jeg hvilke tall du skal bruke? Enkelt gå tilbake til det opprinnelige Photoshop-dokumentet og måle hvor de er ment å være! Du kan se at det er en veldig enkel klassedepartement, og derfor er absolutt posisjonering så lett.
Neste med de to menyene er disse også helt posisjonert, men her har jeg også gitt dem margin: 0 px; padding: 0 px; definisjoner for å sikre at vi fjerner eventuelle standardmarginer og polstring som uordnede lister har.
Neste merk det som på right_menu når jeg har angitt den absolutte posisjonen å være høyre: 75px. Dette betyr at det vil vises 75 px bort fra høyre side av beholderen. Vanligvis ville det være nettleservinduet, men fordi du husker tidligere, satte jeg container å ha stilling: relativ det betyr at det vil være 75px unna danner høyre side av
.
Nå kan du tenke, vel, hva er poenget, kan jeg ikke bare plassere ting ved hjelp av venstre bare? Vel, du kan, men med menyen, hvis du skulle legge til ekstra menyelementer, må du plassere den igjen og igjen slik at den fortsatt var 75 px unna høyre side. Mens ved å bruke Ikke sant De ekstra menypunktene flyter igjen når du legger til dem. Prøv det og se!

Så her er hvor vi er på:

Trinn 9

Som du ser i forrige bilde, ser logoen og overskriftelementet ut som om de er i riktig posisjon. Men menyene ser litt rart ut. Før vi stiler dem, et raskt ord på logoen / bildepanelet. Du lurer kanskje på om de er begge bildene, hvorfor ikke gjøre dem til en del av bakgrunnsbildet?

Svaret er at logoen vi vil lage koblingsbar, slik at klikkingen vil ta deg tilbake til hjemmesiden (gjør nettstedet mer brukbart), og hovedtekstpanelet, vel det vil trolig endres fra side til side. Så ved å ha det et enkelt bilde, kan vi ha mange HTML-sider ved hjelp av det samme CSS-stilarket, men bare å plassere et annet bilde der med forskjellig tekst.

La oss nå stilere de to menyene og få vår side til å begynne å ta form. For å gjøre det trenger vi følgende CSS:

 ul # meny margin: 0px; padding: 0 px; stilling: absolutt; top: 138px; venstre: 75px;  ul # right_menu margin: 0px; padding: 0 px; stilling: absolutt; top: 138px; høyre: 110px;  ul # meny li, ul # right_menu li margin: 0px; padding: 0 px; list-style: none; margin-right: 10px; font-size: 9px; text-transform: store bokstaver; display: inline;  ul # meny li a, ul # right_menu li a text-decoration: none; color: # bd92b2;  ul # meny li a: svever, ul # right_menu li a: svever tekst-dekorasjon: ingen; color: # ffffff;

De to første bitene i denne koden er de samme som før (selv om jeg justerte stillingene litt for å få dem til å se etter styling). Legg merke til at disse to definisjonene er adskilte ettersom de har forskjellige posisjoner, men etter at vi har kombinert de to i samme klassdefinisjoner som menypunktene selv burde se det samme. Formatet for å definere to klasser sammen er:

.myClass, .myClass2 ...

Dette er svært forskjellig fra denne definisjonen:

.myClass .myClass2 ...

Fordi den andre definisjonen sier, alle elementene med innsiden et element med.

Uansett så tilbake til våre stiler, la oss gå gjennom noen viktige punkter:

Vi har satt
- elementer inne i dem
  - Den neste definisjonen sier at for koblingskoder som vises i en
  - tag som er inne

Og med det ser vår side nå ganske bra ut!

Se siden så langt

Trinn 10

Neste er det på tide å legge til noe innhold! Først la oss legge til litt dummy tekst, sett opp slik at vi kan lage kolonner. Her er HTML:

retusjering
Digitale effekter
Webarbeid

Handle om
Ta kontakt med

en slank design
Dummy Text: Dette designet ble produsert for en tutorial for photoshop og webutvikling. Du kan se den første delen opp på PSDTUTS.com hvor du lærer å lage en vakker, men enkel design med en abstrakt bakgrunn og type.
Den andre delen av opplæringen er tilgjengelig via NETTUTS.com der vi gjør en rask bygge av PSD til et brukbart, fungerende HTML / CSS-nettsted.
Denne utformingen ble produsert for en Photoshop og webutviklingstutorial. Du kan se den første delen opp på PSDTUTS.com hvor du lærer å lage en vakker, men enkel design med en abstrakt bakgrunn og type.
Den andre delen av opplæringen er tilgjengelig via NETTUTS.com der vi gjør en rask bygge av PSD til et brukbart, fungerende HTML / CSS-nettsted.

tutorials
Dummy Text: Dette designet ble produsert for en tutorial for photoshop og webutvikling. Du kan se den første delen opp på PSDTUTS.com hvor du lærer å lage en vakker, men enkel design med en abstrakt bakgrunn og type.
Den andre delen av opplæringen er tilgjengelig via NETTUTS.com der vi gjør en rask bygge av PSD til et brukbart, fungerende HTML / CSS-nettsted.
Denne utformingen ble produsert for en Photoshop og webutviklingstutorial. Du kan se den første delen opp på PSDTUTS.com hvor du lærer å lage en vakker, men enkel design med en abstrakt bakgrunn og type.
Den andre delen av opplæringen er tilgjengelig via NETTUTS.com der vi gjør en rask bygge av PSD til et brukbart, fungerende HTML / CSS-nettsted.

nylig arbeid
Dummy Text: Dette designet ble produsert for en tutorial for photoshop og webutvikling. Du kan se den første delen opp på PSDTUTS.com hvor du lærer å lage en vakker, men enkel design med en abstrakt bakgrunn og type.
Den andre delen av opplæringen er tilgjengelig via NETTUTS.com der vi gjør en rask bygge av PSD til et brukbart, fungerende HTML / CSS-nettsted.
Denne utformingen ble produsert for en Photoshop og webutviklingstutorial. Du kan se den første delen opp på PSDTUTS.com hvor du lærer å lage en vakker, men enkel design med en abstrakt bakgrunn og type.
Den andre delen av opplæringen er tilgjengelig via NETTUTS.com der vi gjør en rask bygge av PSD til et brukbart, fungerende HTML / CSS-nettsted.

OK, så i dette utsnittet, kan du se jeg har lagt til 3 nye

er inne i innholdsområdet. Hver har en

tittel element og dem litt tekst. De har klassenavn kolonne1, kolonne2 og kolonne3. Grunnen til at jeg har lagt til all ekstra tekst, er å vise deg noe om å lage kolonner.

Først la oss legge til noen CSS for å få dem til å vises som kolonner:

 / * Innhold * / #content padding-top: 435px; padding-left: 85px; bredde: 815px; color: # 674f5d; font-size: 13 piksler; linje-høyde: 20 piksler;  .column1 float: left; bredde: 230px; margin-right: 30px;  .column2 float: left; bredde: 230px; margin-right: 30px;  .column3 float: left; bredde: 270px;

Som vanlig har jeg delte av vår nye bit av CSS med en kommentar. Da har jeg satt noen stiler for #innhold. Legg merke til hvor mye polstring det er ... 435px! Dette er å skape plass til alle de absolutt posisjonerte elementene tidligere. I motsetning til disse elementene er dette innholdsområdet i den normale strømmen av siden.

Det må være i vanlig strøm fordi fordi du legger til mer innhold på den, bør den skyve bunnteksten ned. Hvis dette var helt posisjonert, ville det bare gå over toppen av bunnen.

Nå tre kolonne klasser, legg merke til at de er satt med bredde og med float: left. Dette forteller dem at de skal drive til venstre for siden justert ved siden av andre venstre flytende elementer. Jeg har gitt de to første rett margin, så de ikke står fast i hverandre.

Flytende et element gjør det til å svinge til venstre eller høyre, og forteller alt annet å vikle rundt det. Når de andre elementene også flyter, danner de seg i kolonner. Vanligvis når du ser et kolonnearrangement, bruker det flyter.

Dessverre er det et merkelig problem med flyter. Nemlig at de har et problem med sine containere. I stedet for å skyve de neste elementene ned, går de bare over toppen. Måten å løse dette problemet er å ha et element som kommer etter dem som har eiendommen klar: begge.

Den klare egenskapen sier å stoppe innpakning av ting rundt flytende

'S. Det er litt vanskelig å forklare, så la oss se på hva som skjer med og uten clearing.

Uten Clearing
Slik ser layoutet ut som det er:

Se hvordan kolonnene har dyttet over toppen av bunnteksten, og selve bunnteksten har begynt å pakke rundt dem. Det er ikke riktig!!

Med Clearing
Løsningen er rimelig enkel, vi må legge til en

etter de tre kolonnene slik:

en slank design
Denne utformingen ble produsert for en Photoshop og webutviklingstutorial. Du kan se den første delen opp på PSDTUTS.com hvor du lærer å lage en vakker, men enkel design med en abstrakt bakgrunn og type.
Den andre delen av opplæringen er tilgjengelig via NETTUTS.com der vi gjør en rask bygge av PSD til et brukbart, fungerende HTML / CSS-nettsted.
Denne utformingen ble produsert for en Photoshop og webutviklingstutorial. Du kan se den første delen opp på PSDTUTS.com hvor du lærer å lage en vakker, men enkel design med en abstrakt bakgrunn og type.
Den andre delen av opplæringen er tilgjengelig via NETTUTS.com der vi gjør en rask bygge av PSD til et brukbart, fungerende HTML / CSS-nettsted.

tutorials
Denne utformingen ble produsert for en Photoshop og webutviklingstutorial. Du kan se den første delen opp på PSDTUTS.com hvor du lærer å lage en vakker, men enkel design med en abstrakt bakgrunn og type.
Den andre delen av opplæringen er tilgjengelig via NETTUTS.com der vi gjør en rask bygge av PSD til et brukbart, fungerende HTML / CSS-nettsted.
Denne utformingen ble produsert for en Photoshop og webutviklingstutorial. Du kan se den første delen opp på PSDTUTS.com hvor du lærer å lage en vakker, men enkel design med en abstrakt bakgrunn og type.
Den andre delen av opplæringen er tilgjengelig via NETTUTS.com der vi gjør en rask bygge av PSD til et brukbart, fungerende HTML / CSS-nettsted.

nylig arbeid
Denne utformingen ble produsert for en Photoshop og webutviklingstutorial. Du kan se den første delen opp på PSDTUTS.com hvor du lærer å lage en vakker, men enkel design med en abstrakt bakgrunn og type.
Den andre delen av opplæringen er tilgjengelig via NETTUTS.com der vi gjør en rask bygge av PSD til et brukbart, fungerende HTML / CSS-nettsted.
Denne utformingen ble produsert for en Photoshop og webutviklingstutorial. Du kan se den første delen opp på PSDTUTS.com hvor du lærer å lage en vakker, men enkel design med en abstrakt bakgrunn og type.
Den andre delen av opplæringen er tilgjengelig via NETTUTS.com der vi gjør en rask bygge av PSD til et brukbart, fungerende HTML / CSS-nettsted.

nede i bunnen? Det er bare tomt

som sier å fjerne de tre kolonnene. Og det løser problemet vårt,

Se siden her.

Noen få ord på flyter og rydder dem
Du lurer kanskje på hvorfor jeg ikke plasserte "clear: both" i

definisjon, men dessverre fungerer det ikke på grunn av bakgrunnen vi bruker ... her er et skjermbilde:

Tilsynelatende er det en løsning som ikke innebærer å sette inn en ubrukelig

tag, og du kan lese om det på QuirksMode. Personlig har jeg brukt denne metoden en stund, og det fungerer bra og konsekvent så jeg fortsetter å gjøre det.

Trinn 11

OK, nesten der nå! Hovedoppsettet er sortert, alt vi trenger å gjøre er å legge til og stil inn innholdet vårt. Her er HTML for det:

   en slank design
 Denne utformingen ble produsert for en Photoshop og webutviklingstutorial. Du kan se den første delen opp på PSDTUTS.com hvor du lærer å lage en vakker, men enkel design med en abstrakt bakgrunn og type.
 Den andre delen av opplæringen er tilgjengelig via NETTUTS.com der vi gjør en rask bygge av PSD til et brukbart, fungerende HTML / CSS-nettsted.
 
  tutorials
 Psdtuts og nettutdelinger gir opplæring om følgende emner (sorta):
  
  nylig arbeid
     Arbeider innenfor begrensninger for å oppnå flotte design
 Sean Hodge  
    Opprett et område med slick tabbed content ved hjelp av jQuery
 Collis Ta'eed  
    Opprette en PayPal-betalingsformular
 Collis Ta'eed

Det er i utgangspunktet den samme strukturen som tidligere, bortsett fra i den tredje kolonnen jeg har opprettet en

element for å inneholde det siste arbeidet. Legg merke til at i dette

element jeg har satt opp slik at det er en lenke

tag pakke opp bildet, overskriften og teksten. Så hele greia blir en blokkkobling. Det betyr at hvis du ruller over bildet, vil teksten som er knyttet til det, fortsatt endre farge.

Så her er CSS for innholdet vårt:

 #content h2 font-family: Georgia, "Times New Roman", Times, serif; color: # dbaa70; margin: 0px 0px 20px 0px; font-vekt: normal;  ul.work margin: 0px; padding: 0 px;  ul.work li listestil: none; margin: 0 px; padding: 0 px; klar: begge;  ul.work li a color: # e0b882; display: block; polstring: 5px 10px 5px 10px; text-decoration: none; font-size: 10px;  ul.work li a img float: left; margin-right: 20px; margin-bottom: 20 piksler;  ul.work li a h4 color: # 674f5d; margin: 0 px; font-vekt: normal; font-size: 13 piksler;  ul.work li a: svever, ul.work li a: svever h4 color: #ffffff;

La oss gå gjennom klassene en etter en:

Først er vi redefinere hva

Det er som ser ut inni
ser ut som. Vi kunne nettopp omdefinere alt
s, men du vet aldri når vi kan ha en
som vises et annet sted, så det er god praksis å være rimelig spesifikk. Alt jeg har gjort her er å endre farge, skrift, vekt og marginer for å få det til å se ut som jeg trenger.

Da har vi

Og det er det! Vi er ferdige!

ferdig!

Og dermed er nettstedets hjemmeside komplett. Du kan laste ned en ZIP av nettstedene for å se gjennom - den inneholder HTML for ulike stadier av denne opplæringen. Og selvfølgelig kan du se det endelige HTML-dokumentet:

Se siste side her

Internet Explorer

Nå bør du alltid gjøre kryss-nettlesertesting. Alas Jeg har nettopp byttet fra Windows til en fin ny Mac og har ikke en Parallels / Win-installasjon ennå, så jeg kan ikke! Jeg gjorde en rask sjekk via BrowserShots.org, og kan se at det for det meste fungerer fint i IE6 / 7, men det er et problem med de tre kolonnene som tvinger fotfoten mye lenger ned enn de burde. Uansett bør det være en enkel løsning, men til neste uke når jeg har installert Windows, er IE-brukere du alene :-)

Jeg vil oppdatere her når jeg har hatt en sjanse til å stryke ut krøllen, men jeg ville ikke holde ut med å publisere til da!

Kode

Bygg en Slider Microsite med GreenSocks Timeline Lite

Bygg en enkel nettsidemal med SWFAddress

Bygg en slank porteføljeside fra grunnen av

Demo og Kildekode

Trinn 1

Steg 2

Trinn 3

Trinn 4

Trinn 5

Se siden så langt

Trinn 6

Se siden så langt

Trinn 7

Trinn 8

Trinn 9

Se siden så langt

Trinn 10

en slank design

tutorials

nylig arbeid

en slank design

tutorials

nylig arbeid

Se siden her.

Trinn 11

en slank design

tutorials

nylig arbeid

Arbeider innenfor begrensninger for å oppnå flotte design

Opprett et område med slick tabbed content ved hjelp av jQuery

Opprette en PayPal-betalingsformular

Det er som ser ut inni ser ut som. Vi kunne nettopp omdefinere alt s, men du vet aldri når vi kan ha en som vises et annet sted, så det er god praksis å være rimelig spesifikk. Alt jeg har gjort her er å endre farge, skrift, vekt og marginer for å få det til å se ut som jeg trenger.

s, men du vet aldri når vi kan ha en

som vises et annet sted, så det er god praksis å være rimelig spesifikk. Alt jeg har gjort her er å endre farge, skrift, vekt og marginer for å få det til å se ut som jeg trenger.

bits.

ferdig!

Se siste side her

Internet Explorer

Det er som ser ut inni
ser ut som. Vi kunne nettopp omdefinere alt
s, men du vet aldri når vi kan ha en
som vises et annet sted, så det er god praksis å være rimelig spesifikk. Alt jeg har gjort her er å endre farge, skrift, vekt og marginer for å få det til å se ut som jeg trenger.