Design og utvikle en komplett nettside (A Tuts + Mini Series, Pt 2)
Dette innlegget er en del av en serie som heter Iconify: En komplett Website.Design og utvikle En komplett nettside (A Tuts + Mini Series, Pt 1) design og utvikle en komplett nettside (A Tuts + Mini Series, Pt 3)

i dag, i del 2 av denne massive opplæringen, vi fortsetter denne sesjonen med den andre dagen av design. Vi har allerede laget hjemmesiden - så nå vi skal utforme de fire støttesidene som danner resten av hele området design (Portfolio, for blogger, Blogginnlegg, og kontaktskjema Page). La oss dykke i skal vi?

Om Mini Series

Du vil finne massevis av web design og utvikling tutorials ute på nettet ... men svært få tuts som tar deg fra start til slutt. Masse tutorials er bare for design, og andre er bare for koding. I dag starter vi en ny serie der vi skal designe og utvikle en komplett nettside fra bunnen av; Vi tar deg fra første trådramme til full site design (inkludert 5 sider). Da vil vi være koding av design (i Nettuts selvfølgelig) og til slutt konvertere denne komplette XHTML tema til en fungerende WordPress tema!

Sjekk ut hele prosessen når det skjer på vår Session siden!
< h2> prosjekt~~POS=TRUNC mål

La oss kort gjennomgå våre prosjektmål at vi satt opp på dag én!

Vårt mål er å designe og utvikle en enkel site design med en moderne utforming som er bidrar til CMS systemer som WordPress. Vi vil ikke bruke noen ville og gale stil effekter i vår design (poenget her er å holde det enkelt), men vi kommer til å nærme seg hele prosessen, fra start til slutt, som en studie i layout og riktig bruk av marginer og padding

Vi skal bruke 960 bæresystem fra start til slutt -.. og dette vil ikke være annerledes for vår dag to utformingen sesjon

En kort Course Outline . Vi kan bryte opp dette på en annen måte når vi treffer koding fase, men dette burde gi deg en god ide om hvor vi er på vei med denne serien:

prosjekteringsfasen

Session 1: Legging av grunn og designe hjemmeside

sesjon 2: Utforme støttesidene (! Du leser nå)

koding fasen

sesjon 3: Kutting og xhtml Coding (snart tilgjengelig)

sesjon 4: Konverter til en Wordpress Theme (snart tilgjengelig)

La oss fortsette! Dag to av designfasen

La oss begynne med å ta en titt på hva vi skal opprette:

Hjemmeside [Done]

Portefølje [I dag]

for blogger Page [i dag]

Blogginnlegg Page [i dag]

Kontakt [i dag]

Dagens designfasen er også delt i fire deler og vi vil designe alle de andre sidene av Iconify i denne sesjonen. Som vi designet på hjemmesiden allerede har vår primære oppgave er fullført - så vi trenger bare å fylle ut feltene for resten av sitemap.

Dette er et viktig skritt som ofte blir oversett i mange designprosjekter, men å designe noen spesifikasjoner for disse støttesidene er noe du ikke ønsker å hoppe. Husk, en nettside design er ikke fullstendig etter bare å sette opp hjemmesiden -. I det minste du trenger et par ekstra maler som er designet for de andre sidene som utgjør et nettsted

Som vår layout er ganske rett frem, vi vil bare være å bytte ut hovedinnholdet område for hver side. De universelle språk elementer (Header, Navigasjon, bunntekst) vil alle bo i samme fra en side til den neste. Dette er viktig for å holde en konsekvent grunnlag for området, slik at brukerne alltid vet hvor de er på

Del E:. Utførelse portefølje Page

Portfolio Side er første støtte side at vi vil designe. Husk at vi bruker 960 Grid System for hele området design, så vi skal bruke de samme grunnleggende layout og kolonnestruktur som vi oppsett på hjemmesiden design

Trinn E1. Basic Setup For Portfolio Page

Lag en kopi av index.psd filen og endre navnet til portfolio.psd. Åpne den opp med Photoshop. Slett alt innenfra innhold laggruppe unntatt bg laget.

Nå skaper de "brødsmuler" og "notater" lag for porteføljen siden. For "notater" bakgrunn form, bruker de samme lagstiler som vi gjorde det for siste prosjektet bar rektangel. Bruk bilde E -.. 1a som en retningslinje

Neste, vi kommer til å bruke en enkel teknikk for å jobbe i en håndfull forskjellige kolonne variasjoner innenfor denne ene siden for våre portefølje elementer

Trinn E2: lage portefølje~~POS=TRUNC elementer

Bruk bilde etableringen teknikk fra dag én (trinn C3) for å lage to kolonne portefølje elementer som vist på bilde E - 2a. Hvis du husker, er vi rett og slett trekke i rektangler som passer kolonne guider de, påføre et lag stil, og deretter beskjæring i bilder for å skape en subtil kant effekt.

Nå gjentar den samme teknikken for tre kolonner og fire kolonne portefølje elementer. Bruk bilde E - 2b og E - 2c som en retningslinje. Legg merke til at vi sitter og blar mellom de ulike 12_column og 16_column guide lag for å få dette perfekt. Til slutt, organisere lag som vist på bilde E - 2d

Del F:. Design Blog List Page

Log liste er ment å være det stedet hvor "utdrag" av hver blogg post vises. Disse "utdrag" er også kalt "loop" elementer -. Og vanligvis består av en tittel, miniatyrbilde, en kort forhåndsvisning tekst og noen metainformasjon (som dato, forfatter, tags, etc.)

Trinn F1: Opprette Blop "Loop" Elements

Akkurat som vi gjorde med den siste siden, vil vi begynne med å lage en kopi av portfolio.psd siden og døpe den til blogs.psd. Inne i blogs.psd fil, slette alt inne innholdsmappen unntatt bg, brødsmuler, og sider lag. Nå har vi en tomme blogger fil, kan vi begynne å fylle den med noe innhold.

For første gang vi kommer til å bruke en standard to kolonner blogg layout - ett for innhold og en annen for sidepanelet. Bruk bilde F - 1a som veileder i utforming bloggen og sidebar innhold - varsel om at vi har plassert den vertikale skillelinjen mellom to av kolonne lag de så det er perfekt avstand.

Selve utformingen her er ganske enkelt slik at vi ikke kommer til å gå i for mye detalj - bare følg sett regler for den type lag (den røde teksten på eksempler), og bruke alle stiler at vi allerede har oppsett i våre andre sider. Vær spesielt oppmerksom om avstanden mellom elementene (også markert med rød tekst) som det kommer til å fortelle deg nøyaktig hvor du skal plassere alt.

Når du er ferdig, organisere lag som vist på bilde F - 1b
Klikk for å se større størrelse
Del G:. Design Blog enkelt innlegg Mal

nå som vi har vår blogg Liste oppsett, trenger vi en mal for hvert fulle blogginnlegg. Dette er en ganske heftig side når det gjelder innhold, fordi vi trenger også å planlegge for et kommentarsystem og mange andre små detaljer. Vær spesielt oppmerksom på eksempelbilder i denne delen

Trinn G1: Opprette Blog Posts Page

Nok en gang, start ved resaving den blogs.psd fil med et navn på blogg-post.psd . Inne blogg-post.psd, slette alle blogglisten innholdet slik at vi kan starte friskt. I innholds delen, grip din tekst verktøyet og begynne å fylle med litt tekst og bilde som vist på bilde G - 1a
Klikk for å se større størrelse
Trinn G2. Design populære blogginnlegg Box

Tegn et rektangel og bruke de samme lagstiler av nyere prosjektets bar fra index.psd fil. Fylle den med innhold og posisjon som vist på bilde G - 2a. For den horisontale linjalen stiler sjekk bilde G - 2b

Trinn G3. Design kommentarfeltet

Tegn et rektangel med 630 piksler bredde og enhver høyde for nå. Name it bg og plassere den i et lag gruppe som heter kommentarer. Kopier lagstiler fra populære postkassen sin bg, deretter lime til dette laget. Bruk bilde G -. 3a som en retningslinje

For kommentar bokser 'piler, tegne en trekant inne i kommentarboksen (aktivere Legg til forme området mens tegning) måle 10X10px rotere pilen og plasser dem som vist på bilde G - 3b og bruke lagstiler som vist på bilde G -. 3b

Vi forlater en 40px venstre marg for andre kommentar for å vise at dette er et svar. Ved å bruke den samme teknikken, kan vi gå enda mer dyp - viser en tredje, fjerde eller femte svar dybde ved bare å rykke inn en annen 40px for hvert nivå. Vi vil gjøre det samme i vår XHTML-versjonen, så husk disse grunnleggende stil regler

Trinn G4. Design Kommentar Form

Tegn en firkant med samme stil som kommentarer menn bg lag og navn dette laget bg. Plasser den inne et lag gruppe som heter kommentar form. Bruk bilde G - 4a som en retningslinje

Del H: Design Kontaktside

Når mer tid, kopiere blogs.psd og lime den med et navn contact.psd.. Åpne den i Photoshop. Slett alt unntatt brødsmuler og sidefelt fra innholdslag gruppe. Kopier kommentarskjemaet og lim den inn som vist på bilde H - 1a. Nok en gang, skriv i innholdet som vises i bildet

Du vil merke at mye av dette er repetisjon nå -. Vi bare kopiere /lime inn innhold, passer den til guider som vi ønsker å bruke, og med de samme typografi og lagstiler fra de foregående sidene.
Klikk for å se større størrelse

Ting skal flytte ganske raskt etter den tid du er ferdig med denne siden. Du kan gjenta den samme grunnleggende prosessen for så mange sider som du trenger for å mockup - bare holde seg til kolonne guider de og bruker de samme grunnleggende typografiske og lag-stil regler for hver ny design og bør være i stand til å banke noen flere av disse som du trenger veldig raskt.

End of Day 2

Dette konkluderer den andre delen av vår massive tutorial! Nå har vi lykkes utviklet våre nettsider. I neste sesjon (kommer snart over på Nettuts), vi kommer til å starte kodingen prosessen, så sjekk innom her (og på Nettuts) som vi legger ut nye deler av denne opplæringen!