design og udvikle et komplet websted (en tuts + miniserie, pt. 1, her er en del af en serie kaldet iconify: en komplet websted. design og udvikle et komplet websted (en tuts + miniserie, pt 2),,,, du vil finde en masse web - design og udvikling tutorials på nettet...men meget få tuts at tage dig fra start til slut.masser af tutorials er kun for design, og andre er kun for kodning.i dag starter vi en ny række, når vi skal udforme og udvikle en komplet hjemmeside fra bunden, vi tager dem fra den oprindelige trådnet til hele stedet design (herunder 5 sider).så vil vi være kodning design (i nettuts naturligvis) og endelig at omsætte dette fuldstændig xhtml tema til en wordpress tema!,,, projektets mål.vores mål er at udvikle en enkelt lokalitet udformning med en moderne indretning, der er befordrende for cms systemer, som wordpress.vi kan ikke anvende en uregerlig stil virkninger i vores udformning (punkt her er, at holde det enkelt), men vi skal klare det hele processen, fra start til slut, som en undersøgelse i udformning og en korrekt anvendelse af marginer og polstring. vi vil være ved hjælp af 960 elnettet fra start til slut, så hvis du nogensinde har tænkt over, hvordan det er at bruge systemet nu er et godt tidspunkt at lære.vi skal lave nogle afvigelser fra normen, men for det meste, vi vil bruge 960gs i udformningen og kodning faser. når du drenge, piger er færdig, er du velkommen til at vælge, design, alt hvad du vil med dit eget skrifttyper, farver, metoder og strukturer.husk, det er bare en gang - du er velkommen til at gå så tosset, som du vil, når det gælder den personlighed af din egen version af design, en kort kursus skitse. kan vi ødelægge det anderledes, når vi når kodning fase, men dette vil give dig en god idé hvis vi tager med denne serie:,,, projekteringsfasen, samling 1: fundamentet og udforme den hjemmeside, gruppe 2: udformning af støtte sider (til rådighed næste uge), kodning, s. 3. fase, udskæring og xthml kodning (udkommer snart), samling 4: omdanne til en wordpress tema (udkommer snart), midler til dette projekt, kan du bruge deres egne midler, hvis du vil, men her er den fuldstændige liste over de billeder, billeder, som jeg har brugt itutor:,, billeder, - - rhody dan, flickr glædelig jul (billede) - fra psdtuts flickr - gruppe, sociale ikoner - wefunction, twitter fugl - webtreats, anvende disse værdier for tekst farver - pos. farve:, 0f5193,; tekst farve:, 7c7c7c,; forbindelse farve:, eaa000,,,, - er i gang: første dag i projekteringsfasen, så uden yderligere forsinkelse, lad os starte med projekteringsfasen.denne idefasen er opdelt i to dele.i dag vil vi udforme trådnet med 960gs system, og vi vil udforme hjemmeside.i anden del (i næste uge), bygger vi den anden støtte sider. den vigtigste ting du vil have til at holde styr på i dag, er, hvordan vi vil bruge to forskellige variationer af 960gs (a 12 kolonne layout og 16, kolonne indretning) sammen i samme sag.jeg forklarer senere, men holde styr på, når vi bruger hver anden indretning, som det vil spille en stor rolle i den kodning fase senere.i dag er fire underafdelinger, er:,,,, del a, om det sted, trådnet, del b, at designe dokumenthovedet, del c, udformning af det vigtigste indhold område, del d, udarbejdelse af fod, del a: om det sted, trådnet, skridt a1: at skabe en ny dokument med 960gs, som vi skal arbejde med 960 forsyningsnettet, værsgo og tag 960 forsyningsnettet herfra (eller tag det fra 960.gs, hvis denne forbindelse går ned).i de vigtigste folder (, hvad du lige har hentet fra http: //960. g), gå til "- modeller -> photoshop" åbne "960_grid_16_col. psd" i photoshop.kalde det fil "indeks. psd" og gem det i en ny mappe, i vælger, jf. billede, et - 1a,.,, nu, hvor vi har 16, kolonne fil opstilling, vil vi også importere de vejledende lag fra 12. kolonne fil. luk "960_grid_, 12, _col. psd" i photoshop (fra den samme mappe, du har åbnet den "960_grid_16_col. psd" fil.nu åbne "12 kol grid - lag og holdning, og så trække det til vores nye, index.psd, fil som vist i det billede, et - 1b, og en - 1c.også åbne lag og placering af "grid_16_col.", kan du spørge dig selv: "hvorfor skal jeg bruge to forskellige net filer,"?som grid_16 kan ikke give os tre lige store kolonner, vi er nødt til at bruge grid_12 så godt.den 960gs system er bygget til at anvendes på denne måde, så vil det ikke skabe konflikter ned.vi skal også bruge disse to net i xhtml omstillingsfase. vælg "grid_12_col" og "grid_16_col" lag, så vælg "tilpasse øverste kanter" og "tilpasse horisontale centre" fra muligheder panel som vist i billede, et - 1d, mens udvælgelsen af disse muligheder, vær sikker på du også har aktiveret, flytte værktøj (v)).og din endelige resultat bør ligne billede, et - 1d,.,, skridt a2: fastsættelse af retningslinjer, ledere og enheder, det er tid til at sætte vores retningslinjer og ledere til at let holdning, vores elementer.gå til "klippe -> præferencer -> enheder & herskere" eller tryk ctrl + k "at kalde den, præferencer dialog kasse.så vælg "enheder & herskere" regning.i "enheder & herskere" pane er enheder, underpunkt, "pixels" for "ledere" og "type" muligheder, jf. billede, et - 2a,.,, nu vælge "vejledninger, nettet & skiver" regning og i dets, nettet, afsnit, sæt værdi "100" og enhed "pixels" til "gridline hver" løsning.- og "10" til "underinddelinger" område, jf. billede, et - 2b,.,, skridt a3: (re) dimensionering af det dokument, så tryk på "ctrl + alat + c" eller "image -> lærred størrelse" at kalde, lærred størrelse, dialog, kasse og ændre miljøer som vist i det billede, et - 3,.,, som vi har forøget vores lærred højde, nu er vi nødt til at udvælge og udvide vores net i henhold til højden af vores dokument.vælg både net lag og tryk ctrl + t "eller" klippe -> frit ændre "så slæber de net, som vist i billede, et - 3b.lås begge net lag og skjule "grid_12_col lag", jf. billede, et - 3c.ved misligholdelse, vi har placeret de retningslinjer, grid_16_col, som vi gik ud fra, grid_16_col.psd, fil.vi har ikke retningslinjer for grid_12_col, men vi har ikke brug for dem, som vi vil kun i sjældne tilfælde grid_12_col.,, du også kan se dit nummer er net og retningslinjer ved at trykke på "ctrl + « (betragtning -> -> - nettet)" og "ctrl + (betragtning -> viser -> vejledninger)" til henholdsvis som angivet i billede, et - 3d,.,, skridt a4: oprettelse af trådnet, vores dokument bredde er 1020px; ved hjælp af 960 forsyningsnettet, vi skal bruge 940px for vores indhold bredde.vi kommer til at afvige lidt fra 960 model ved hjælp af en 20px venstre og højre polstring (40px samlede) for dets indhold kolonne.så vores samlede indhold bredde skal være 980px.vælg den baggrund lag og tryk ctrl + backspace "eller" ctrl + f5 "eller" klippe -> fylde "at kalde, udfylde rubrik, dialog, så vælg" farve... "mulighed" brug ".og den værdi, der skal "e7e7e7", jf. billede, et - 4a,,,,, hvis du har problemer med at gøre dette i ældre versioner af photoshop, som cs4, første "rasterize", baggrund, så gælder den baggrund ved hjælp af ovennævnte lag skridt. nu vælge den "afrundet rektangel redskab" "radius" til "10 px" i, optioner, panel og "forgrundsprocesser" hvid "f1f1f1".trække en afrundet rektangel i artboard måling af størrelse, 980 x 150px,.navn det lag, header bg, og denne lag i en lag - gruppen og navn, som gruppe, header.og organisere deres lag palet, jf. billede, et - 4b.og altid holde nettet lag over alle de lag på lag palet. at oprette en gruppe, kun udvælge lag (s), vil de, der er fastsat i en gruppe (med de ctrl eller skift centrale) og tryk ctrl + g "eller" lag -> gruppe lag ".og at ændre en gruppe eller lag navn kun double click på dens misligholdelse navn, så vil det blive en redigerbar textfield som vist i billede, et - 4b,.,, udvælge, ændre punkt værktøj, fra værktøj palet, pen værktøj, gruppe.så "ctrl + klik", header bg, rektangel og klik på fire øverste hjørner som vist i billede, et - 4c.og slette meget øvre to punkter ved hjælp af slette anker punkt værktøj, fra pen værktøj, gruppe som vist i billede, et - 4d,.,, nu vores, header bg, rektangel skal have en højde på 140px, som vi har slettet de øverste to punkter.vælg, header, lag - gruppen og baggrund lag vælge mellem øverste kanter og tilpasse horisontale områder, muligheder, palet, jf. billede, et - 4e,.,, anvende en lag stil i, header bg, lag med indstillinger, jf. billede, et - 4f,.skub det lag 1px toppen for at skjule den øverste glød.,, nu igen vælge afrundet rektangel redskab, og trække indholdet - regionen (måling af 980 x 1400px).navn, bg, og placere det i et lag - gruppen ved navn, indhold og anvende de samme lag styles, header bg,.tegn en rektangel (måling af 980 x 570px) hedder det, at ophjælpe bg, og placere det i et lag - gruppen ved navn, fod, og også anvende de samme lag styles.det nederste to punkter af fod bg, rektangel med den samme metode, header bg,.hold 20px afstand mellem hver afdeling (f.eks. header, indhold, fod).sted alt som vist i billede, et - 4g,.,,, tråd og alt så at tilføje faktiske indhold ville spise vores dyrebare tid.så vi er nødt til at gå direkte til at tilføje nogle virkelige indhold for denne model i næste afsnit.,,, del b: udarbejdelse af hovedet, trin b1: i den øverste del af hovedet, udvælge, værktøj, så trække en linje med 1px vægt og 940px længde (presse og vent. "vagt" nøgle under arbejdet for perfekt linje).det, som er vist i image, b - 1a.navn det lag, hr, fylde dens baggrund med farve, cdcdcd og et lag stil som vist i image, b - 1a,.,, nu vælge, rektangel redskab, og drage en 200 x 24px rektangel, anvende lag styles, og det, som er vist i image, b - 1b.dets baggrund farve, 000000 og reducere sin fylde røgtæthed, 10%,.,, type nogle hurtige forbindelse tekst på venstre side af vores søgen område.vælg, tekst, værktøj, fra, stk, rude, og udvælge, ikke bringe tekst.så type nogle menu navne og adskille dem med en "