, design og kode din første websted i let at forstå skridt,,,,, 98,,,,,,,, 41,,,,,,, det cyber - mandag envato tuts + kurser vil blive reduceret til $3.- og' t miss.,, i denne forelæsning, vi skal til design og kode vores første websted på enkel, let skridt.denne forelæsning blev skrevet for begyndere og håber, at den vil give dem redskaber til at skrive din egen standarder overensstemmende websteder. ,, hvis du leder efter en hurtig måde at komme i gang, se gennem vores samling af   html modeller for en professionel, fleksible løsning, som er klar til at skræddersy deres næste projekt.ellers er det en helt ny uge. måske er det tid til at lære nye færdigheder.,,, trin 1 - hvad vi gør, skal vi udforme og kode dette meget enkelt websted.imponerende konstruktion, er det ikke, men det vil være meget effektivt for at lære grundlæggende kodningsteknikker.,,,, trin 2 - klar, hvad du har brug for denne forelæsning blev skrevet ud fra, at du aldrig har mærket et websted, eller kun har gjort det et par gange.ikke desto mindre, at afslutte denne forelæsning, får du brug for følgende:,,, photoshop eller et lignende billede redaktør, en kode redaktør (mere om det senere), grundlæggende forståelse af, hvordan i arbejder, grundlæggende syntaks og hundetegn.at komme op i omdrejninger, tjek offentlig ressource på w3 skoler, hvor du kan lære alt det grundlæggende behov for denne forelæsning.,, det samme gælder for ccs, du må forstå, hvor politiske arbejde og være bekendt med de grundlæggende egenskaber.igen, de bedste ressource er w3 skoler, en browser, naturligvis.jeg bruger firefox, og hvis du vil have din lokalitet til at ligne min screenshots i hvert trin, du skal også,,, layout, vi laver et meget enkelt websted, med fire grundlæggende elementer: header, indhold, samråd og fod, kommer til at se sådan noget. det er en god idé at blokere udformningen af deres design, før du starter, enten på papir eller i photoshop, at strømline deres arbejdsgang og organisere deres ideer.,,, trin 3 - begyndt, åbner en skinnende photoshop dokument, sige, 1000px af 1200px.vi kan altid afgrøde det senere.jeg gør det meget snævre, fordi jeg arbejder på en bærbar computer, men de er fri til at gå videre, hvis du ønsker mere plads til at arbejde.,, jeg vil ikke gå ind i debatten om skærmopløsninger og optimal websted bredde.alt, du behøver at vide er, at indholdet af vores side vil være 800px bredt, og at det er okay.så, i vores 1000px omfattende dokument, vi skal trække i vejledninger på 100 og 900px mærker til bredden.vores design er en aftale, og jeg har besluttet at gøre det til et tredje bredden af den side.to tredjedele af 800 er ca. 530, så lad os få en vejledning i 630px.vi skal også fastsætte en fin baggrund, farve&#ebe8e8.,,,, trin 4 - header, tag fat i rektangel, værktøj og gøre en stor blå boks øverst på dokumentet, min ved 170px højt og farve erb6eb.næste træk en tynd mørkegrå bar i toppen af side, jeg plejeded5a5a,,,, trin 5 - fremhæve, er vi nu nødt til at tilføje lidt lys virkning på den blå header område.skabe et udklip maske over det blå lag, så tag en stor blød børste (400px bredt), og vælg en farve lidt lettere end den blå baggrund.,, nu let tryk spidsen af krattet lige under bar omkring midten af dokumentet.vær diskret, og prøv ikke at lade den lyse farve til kanten af side (dette vil være klar senere).og sæt blanding tilstand til skærmen.,,,, trin 6 - navigation bar, er vi nu nødt til at tilføje en ny bar på bunden af den blå, kan vi gøre det grå, men vi er nødt til at tilføje en gradient - overlay - så det betyder ikke noget. i lag styles panel tilsæt en stigning fra&#e2e3e4 til&#bebdbd på 90degrees.,,,, trin 7 - fod, lad os drage en grå kasse på bunden af siden, har jeg valgt en farve lidt mørkere end den grå fra bar øverst.,,,, trin 8 - logo, baggrund, for dem, vi skal trække en rektangel og tilføje et anker i slutningen, så få det ud til siden.To get rid of the rounding, option-click on the point., , ,Next, add some layer styles: a gradient overlay and a 1px stroke: Gradient from #aec457 to&#cdf399, , , , ,Text, ,Now for the text: big and bold., , ,Font: Myriad Pro, ,Style: Bold, ,Size: 60px, ,Color: #36809a, , ,To give it some depth, add an inner shadow:, , , , ,Step 9 - Tagline, ,Next I just added in a short tagline:, , ,Font: Arial, ,Style: Bold, ,Size: 30pt, ,Color: #e4dfdf, , , , ,Step 10 - Navigation, ,Write in the navigation links nice and big, spread them out and space them about evenly., , ,Font: Arial, ,Style: Bold, ,Size: 30pt, ,Color: #676666, , , , ,Step 11 - Main Content, ,Time to paste in some dummy content. jeg brugte en del kampe, som vil være h2 og mindre vil være h3 link til html ipsum.,, gør teksten kasser ved bredden af de første to tredjedele af side.tekst styles:,, h2 - header:,,, ariel skrifttype:,, stil: dristig, størrelse: 36pt, farve:�e5d7a, h3 overskrift:,,, ariel skrifttype:,, stil: dristig, størrelse: 24pt, farve:񬠜, stk. skrifttypen arial,,,, - stil: normal størrelse: 14pt, farve:򑞒,,,,, at de datoer, under "seneste opdateringer" skal være pakket i en lille brik, skrifttype, er den samme som den i punkt, men 12pt.jeg har kopieret den nyhed, to gange, fordi jeg er doven.,,,, trin 12 - aftale, forbindelser, næste drage en tynd rektangel vores gruppemøde region, farve&#d4d6d3 med 1 px slag&#bebdbd, fylde aftale med flere dumme indhold, kan du blive fri ikoner jeg her.de fonte:,, h3 headers:,,, ariel skrifttype:,, stil: normal størrelse: 24pt, farve:갗,,,,,,,,, liste over emner: skrifttype: arial, stil: normal størrelse: 18 /14pt, farve:񛏩,,,,, nu vil vi tilføje en "- holdet" knap under bidragydere forbindelser.den knap er bare et rektangel med samme stigning som logo og et 1px slagtilfælde farve c7c7c7.teksten er:,,, ariel skrifttype:,, stil: normal størrelse: 24pt, farve:񪂧,,,,, trin 13 - fod, for at afslutte model, bare tilføje lidt uvirksom ophavsret tekst, eller hvad du vil, til fods.fonden er:,,, ariel skrifttype:,, stil: normal størrelse: 14pt, farve:&#e0e2e2,,,, og det er det til side design, det er ikke noget særligt, men dets enkelhed, vil gøre det lettere for dem at følge resten af processen.,,, udskæring psd, nu, hvor vi har vores dejlige afsluttet psd, det er tid til at hugge den op, vi kan bruge.der er her tale om at bruge så få billeder som muligt, og for at gøre dem så lille som muligt.okay, så lad os starte med hovedet.vi ønsker, at den strækker sig ud over hele skærm, uanset hvor omfattende den er.for at gøre det, skal vi tage et lille stykke af hovedet, og det gentager hen over skærmen igen og igen, uanset hvor lang.,,, punkt 14 - stykke værktøj, så du har nok ikke haft brug for det stykke værktøj, men det er meget enkelt.det lader dig bare skære din fil i bittesmå stykker, der kan eksporteres til nettet.,, header,, så lad os gå videre og få en lille bid af vores mission.klik ikke at skabe skive, ligesom det rektangulære markise værktøj.vær forsigtig med det stykke fra den side af billedet, så du ikke får nogen af fremhæve.,,,,,,, at vi nu har denne lille stribe, vi kan gentage det med x - aksen.den markerede område, er imidlertid ikke gentage, så vi er nødt til at skære det hele.bid den del af kampe mellem de to retningslinjer, som angiver vores 800px bredde.,,, fod, bruger vi den samme proces for at skære den fod, tag en lille bid af fod.,,, alt det andet, vi skal bare bruge et par billeder: "enig" og "ikoner holdet" knappen.,, fordi ikonerne og logo er uregelmæssige, vi redder dem som gennemsigtig. men heller ikke dér er menneskene sikre filer, så vi er nødt til at komme tilbage og tage dem særskilt.,, så at skære den knap, kan vi bruge den samme teknik som overskrift og fod. men denne gang, vi behøver kun en skive.når du får det stykke, må ikke omfatte 1px slagtilfælde (vi er nødt til at tilføje, at der i senere), du måske har brug for at komme helt tæt på, for det her.,,,, trin 15 - eksport til nettet, nu, hvor vi har vores billeder alle skåret op, lad os redde dem optimeret jpegs og anbringe dem et nyttigt.,, at file /redde til web - og udstyr.i pop - up - vindue, holde vagt og klik til at udvælge de skiver (igen, vil du zoome ind) kontrollere, at "forindstillede" menu er fastsat til jpeg ud, uncheck "omregning til srgb" klik "redde", i det næste, der dukker op, - navn og beliggenhed for dine billeder, jeg vil bare redde til desktop - for nu, for at sørge for, at den er sat til at "billeder", "standardindstilling" og "udvalgte stykker.",,, tjek det sted, du reddede dine filer.i stedet for at se de billeder, du må bare finde en mappe med "billeder", hvor alle dine billeder er beliggende.computeren giver hvert billede, et antal, der er ikke meget nyttigt.kontrollere, at du har den rigtige billeder, så nævn dem på passende vis.,, og nu tilbage til de forbistrede ikoner og logo.sørg for at skjule alle baggrund lag, så tag det stykke værktøj igen og skære lille rubrik omkring hver ikon og logo.,,,, så vi går igennem den samme proces for at eksportere til nettet, som vi gjorde med jpegs, men denne gang være sikker på at vælge png-24 fra "forindstillede" dropdown menu, og at "gennemsigtighed" i rubrik er checkmarked.omdøbe de filer, og dine billeder mappe ser sådan noget, så er det godt, vi er færdig med at skære vores psd, og vi har alle de billeder, vi har brug for.luk ikke photoshop endnu, men vi er stadig nødt til at vælge farver, skrifttyper, mål osv.,,, del 3 -: trin 16 - til at begynde, okay, tid til at dykke ned i en html.den første ting, du har brug for, er en kode redaktør af en slags.dette er ofte et område af personlige præferencer, men jeg anbefaler, startende med gratis.for mac og pc, jeg anbefaler komodo edit som en kode, redaktør.det har mange elementer, som er ideel for begyndere og avancerede brugere. en af de bedste elementer er syntaks brik, der er den her på tekstbehandlingsanlæg, som skal identificere og forklare lidt fejl. for pc 'er, der er mange flere muligheder, og intet af det, jeg er meget bekendt med, men se andrew burgess' artikel 22, ren kode redaktører for vinduer, i denne forelæsning, vi skal bruge komodo edit, men princippet er det samme i hver redaktør.,,, skridt 17 - oprettelse af vores foldere, første ting først, er vi nødt til at oprette et sted at holde alle dokumenter i forbindelse med vores hjemmeside.skabe en mappe på din hjemmeside, min er "mysite" i denne mappe, skabe en mappe med de billeder, vi har lige skåret. navn denne folder "billeder".nu er vi åbne vores kode redaktør, denne del vil være lidt forskelligt, afhængig af hvad du bruger: software, hvis du følger med i komodo, udvælge "skabe nye projekt" og redde /flytte. kpf fil til "mysite" mappe.når du åbner den fil, fil - ved siden af komodo viser indholdet af mappen. næste right-click på dokumenterne, og kør tilbage til "tilføjes" og vælge nye fil ".i vinduet, der dukker op, udvælge "http: //(xhtml) og navn filen" index.html ".,,,, hvis du bruger en redaktør, den skal være ens, men det væsentlige er de samme: du har brug for at skabe en index.html fil, og det skal være i "mysite" folder sammen med billeder mappe.,,, gå 18 - oprettelse af vores index.html fil, den første ting, vi skal gøre, er at erklære dok type tegnsæt, og skabe < html > hundetegn.mange redaktører vil gøre det for dig, men hvis ikke, det skal se sådan her:,, <?xml - version = "0" kodning = "utf - 8"?> <!doctype offentlige "- http: ////////////dtd w3c xhtml 1,0 strenge //en" http: //www.w3.org /tr /xhtml1 /dtd /xhtml1 strenge. dtd "> < http: //xmlns =" http://www.w3.org/1999/xhtml "xml: lang =", en "lang = en >"; < /html >,, mellem html hundetegn, vi har brug for en "hoved", som indeholder alle mulige vigtige oplysninger om de anlæg, som ikke er anbragt inden for lokaliteten. for os på dette punkt, det kommer til at indeholde, er titlen på side sådan her:,, < head > < afsnit > mysite < /afsnit > < /head >,, under hoved, logisk, tilføjer vi liget, indeholdt også på < html > hundetegn.okay, så nu har vi:,, <?xml - version = "0" kodning = "utf - 8"?> <!doctype offentlige "- http: ////////////dtd w3c xhtml 1,0 strenge //en" http: //www.w3.org /tr /xhtml1 /dtd /xhtml1 strenge. dtd "> < http: //xmlns =" http://www.w3.org/1999/xhtml "xml: lang =", en "lang = en >"; < head > < afsnit > mysite < /afsnit > < /head > < krop > <!- indhold går her... > < /organ > < /html >, er dette en grundlæggende side fælde, du måske ønsker at redde dette klip et eller andet sted for den fremtidige anvendelse, kan du huske, da vi sagde, at vi ville have hovedet, indhold, samråd og fod dele?godt, nu hver af disse vil være inden for sine egne < div > og vil få en passende id, < organ > < div id = "hoved" > < /div > <!- stopper header - > < div id = "indhold" > < /div > <!- stopper indhold - > < div id = "aftale" > < /div > <!- ende aftale - > < div id = "lille" > < /div > <!- stopper fod... > < /organ >,, note: det er en god idé, især når du begynder, at tilføje bemærkninger på < /div >, så du kan holde styr på hierarkiet af divs.,, så lad os tage endnu et kig på vores psd - huske, hvordan vi ønsker, at den fod og header skiver gentage på ubestemt tid ud til siderne?vi får brug for en måde at lade disse elementer op, men samtidig har vi brug for de vigtigste indhold ("indhold" "aftale"), der skal være indeholdt i et bestemt bredde på skærmens centrum., at klare det, vi har brug for en stor virksomhed i forbindelse med fast ejendom med vores voksende elementer og en div til at indeholde de vigtigste indhold. vi skal også bemærke, at den fod tekst er midtpunktet for, så vi er nødt til at gentage den samme proces til fods. for at gøre dette skal vi afslutte nogle divs omkring dem vi har allerede.vi har to grundlæggende dele, den vigtigste del, og den lille del. alle vil være indeholdt i en stor, uregerlige div med ubestemt bredde, og indholdet af hver enkelt vil være pakket i individuelle divs at specificere bredde og koncentrerer.,, vi ønsker at anvende de samme regler for de vigtigste og fod indhold, så i stedet for (eller ud over specifikke id, vil de have bestemte klasser, hvilket betyder, at man kan skabe et regelsæt for at definere alle div er i samme klasse.,, så de væsentligste indhold vil være indpakket i en virksomhed i forbindelse med fast ejendom med id "store" og vores fod skal være pakket i div med id "fod." hvis det hjælper til at visualisere struktur, her er et diagram:,,, og tillægget ser sådan ud:,, < lig > < div id = "primære" > < div id = "hoved" > < /div > <!- stopper header - > < div id = "indhold" > < /div > <!- stopper indhold - > < div id = "aftale" > < /div > <!- ende aftale - > < /div > <!- stopper vigtigste - > < div id = "lille" > < /div > <!- stopper fod... > < /organ >,, vi pakker hvert afsnit i indeholder div., med klasse "container.", < div id = "primære" > < div klasse = "containere" > < div id = "hoved" > < /div > <!- stopper header - > < div id = "indhold" > < /div > <!- stopper indhold - > < div id = "aftale" > < /div > <!- ende aftale - > < /div > <!- stopper vigtigste container - > < /div > <!- stopper vigtigste - > < div id = "lille" > < div klasse = "containere" > < /div > <!- stopper fods container - > < /div > <!- stopper fod... >,, jeg kender alle disse indpakning divs synes overflødigt, men de bliver relevante, når vi ser den side.,,, skridt 19 - tilføje indhold, at strukturen i vores side er klar, kan vi begynde at tilføje indhold, fra top til bund.her er en oversigt over de html elementer, der vil gøre os side:,,, hoved, på toppen, vi har vores kampe, og inden for de personer, vi har tre hovedelementer: et logo, et tema, og navigation menu, så lad os skabe en div til vores kampe, og hold det rent, vil vi sætte logo og tema i deres eget divs.,, < div id = "hoved" > < div id = "logo" > < /div > < div id = "tema" > < /div > < /div > <!- stopper header - >,, fordi det er det mest vigtige position i den side, logo er inde i en < h1 > tag.vi har flere muligheder for den ide, afhængigt af, hvor relevant det er til din hjemmeside.i dette tilfælde, jeg bruger en < h3 > tag., ,For the navigation, standard practice is to place menu items within an unordered list, with each list item containing an anchor tag., So we have: , ,<div id="header"> <div id="logo"> \t <h1>Logo</h1> </div> <div id="tagline"> \t<h3>And a little tagline, too.</h3> </div> <ul id="menu"> \t<li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Contact</a></li> </ul> </div><!- stopper header - >,, note: "href" værdi i anchor mærker normalt ville angive, hvor forbindelsen røg, men i dette tilfælde, pund symbol betyder "link til toppen af side.", vigtigste indhold, og se på vores vigtigste område, vi har 4 forskellige stilarter type: en stor position på toppen, en mindre, og en endnu mindre en budgetpost for den nyhed, titler, plus nogle stykker, og de små datoer på nyheder. vi er nødt til at ringe til disse < h2 >, < h3 > og lt; h4 >, < p > og < små > hhv.nu er det bare et spørgsmål om indsætning i deres indhold, og det er ikke så sjovt, men det er ret let.,, < div id = "indhold" > < h2 > lorem ipsum, dolor sidde < /h2 > < h3 > nullam vulputate felis id odio interdum nec malesuada mi pretium.< /h3 > < p > praesent luctus egestas nisl, vitae vehicula eros rhoncus vel.phasellus consequat arcu eu neque convallis eu vulputate produktionen vehicula.i eget venenatis nisl.vestibulum id nulla eu sapien pellentesque malesuada pharetra ac lacus.curabitur et ultricies quam.aenean pretium aliquet velit, gravida vulputate urna tempus vel.< /p > < p > proin midlertidigt erat sidde amet nisl porta nec vulputate arcu imperdiet.praesent luctus egestas nisl, vitae vehicula eros rhoncus vel.phasellus consequat arcu eu neque convallis eu vulputate produktionen vehicula.i eget venenatis nisl.vestibulum id nulla eu sapien pellentesque malesuada pharetra ac lacus.curabitur et ultricies quam.aenean pretium aliquet velit, gravida vulputate urna tempus vel.proin midlertidigt erat sidde amet nisl porta nec vulputate arcu imperdiet.< /p > < div id = "nyheder" > < h3 > seneste opdateringer < /h3 > < h4 > vestibulum id nulla eu sapien pellentesque < /h4 > < små > og 1. juni 2009 < /små > < p > men vel turpis en orci pulvinar tincidunt.mauris id purus turpis.aliquam metus arcu, facilisis quis pellentesque curriculum vitae, dapibus ikke nulla.nulla suscipit sagittis sodales.etiam laoreet ante i purus laoreet id malesuada advokat pretium. < en href = "#" > læs mere < /a > < /p > < h4 > vestibulum id nulla eu sapien pellentesque < /h4 > < - små > 1. juni 2009 < /små > < p > men vel turpis en orci pulvinar tincidunt.mauris id purus turpis.aliquam metus arcu, facilisis quis pellentesque curriculum vitae, dapibus ikke nulla.nulla suscipit sagittis sodales.etiam laoreet ante i purus laoreet id malesuada advokat pretium. < en href = "#" > læs mere < /a > < /p > < /div > <!- sidste nyheder... > < /div > <!- stopper indhold - >,, jeg har tilføjet anker mærkater med værdien "læse" ved udgangen af hvert nyt punkt.,, tager på til gruppemøde nu.denne aftale indeholder tre elementer, som vil blive viklet ind i sit eget. hver div vil indeholde en < h3 > header, og en unordered liste, og hver liste punkt på dagsordenen igen vil indeholde et anker,., så gå videre og kopi og sæt din tekst, og det skal se noget. sådan her:,, < div id = "aftale" > < div id = "enig" > < h3 > ind!</h3> <ul> <li><a href="#">Subscribe via RSS</a></li> <li><a href="#">Get Email Updates</a></li> <li><a href="#">Follow us on Twitter</a></li> </ul> </div> <div id="popular"> <h3>Popular Items</h3> <ul> <li><a href="#">Lorem ipsum dolor site amet</a></li> <li><a href="#">Ulvinar tincidunt, Mauris id</a></li> <li><a href="#">Lorem ipsum dolor site amet</a></li> <li><a href="#">Proin tempor erat sit tene</a></li> </ul> </div> <div id="contributors"> <h3>Contributors</h3> <ul> <li><a href="#">John Smith, freelance writer</a></li> <li><a href="#">Jack McCoy, designer</a></li> <li><a href="#">Lenny Briscoe, editor</a></li> <li><a href="#">John Smith, martketing</a> < /li > < /ul > < en href = "#" > holdet < /a > < /div > < /div > <!- ende aftale - >,, fod, kan vi lige så godt få den fod, inden kontrollen i browseren, det tager kun et øjeblik. værd at bemærke, er, at alle symboler, du ønsker at bruge i deres tekst har særlige koder i html, f.eks. ophavsret symbol kodes som ©,, < div id = "lille" > < div klasse = "containere" > < p > ophavsret © 2009 mysite < br /> alle rettigheder forbeholdt < /p > < /div > <!- stopper fods container - > < /div > <!- stopper fod... >,, og det er, om det i tillægget, lad os se:,,, det ser godt ud, ikke?- nej, ikke endnu.men den indeholder alle de oplysninger, vi har brug for, og er klar til klipning.,,, del 4 - css, gå 20 - tilføje css, nu, det er her magien sker., skabe en ny fil på vores hjemmeside mappe, og kalder det "stil. css." nu er vi nødt til at sige, at denne sag om css tilhører vores index.html fil så vi forbindelse til det med "link href" tag.denne linje kode ind i din < head > afsnit, under titlen.,, < forbindelse href = "stil. css" rel = "stylesheet" type = "tekst /css" media = screen "/>,, nu vores html fil kan få adgang til vores css fil, så de ændringer, vi giver til css vil påvirke html fil.,,, gå 21 - grundlæggende op, er der et par grimme ting om vores område, at vi kan ordne med det samme, nemlig at vi ønsker at ændre standard skrifttype, ønsker vi, at 800px bred og - indhold, og vi vil for at slippe af med alle disse områder mellem de elementer, vi skal til at vælge en skrifttype til hele teksten i liget af den side, der skal fremlægges, medmindre andet er angivet:,, organ {skrifttype familie: arial, helvetica, uden serif;}, næste, lad os definere bredde ogi forbindelse med vores "containere" klasse divs.,,. container (bredde: 800px; margen: 0 auto.}, den margen: 0 - ejendom er stenografi, hvilket betyder, at der ikke er plads i toppen, og at det vil automatisk blive centreret vandret. lad os tage et kig.,,, meget bedre.det næste skridt er at gøre tingene værre, men hold dig til mig, css nulstille alle browsere brug misligholdelse, polstring og margen værdier for hvert element, som gør unstyled sider ser godt ud, men for os er de bare komme i vejen for vores egne typografier.,, at slippe af med alle disse rodet margener, vi skal bruge en meget enkel css nulstille, der er kun en regel, der fjerner den misligholdelse, polstring og margener på de elementer, vi bruger.læg det på toppen af din css fil:, "organ, div., h1, h2, h3, h4, h5, h6, p, ul img {margen: 0px; polstring: 0px;}, lad os se:,,,, skridt 22 - hoved, - alt er sat op og klar til at manipulere.nu kommer vi til at begynde med vores egen stil igen, fra top til bund. lad os få den vanskelige del af vejen først: fastsættelse af baggrundsmotiverne i hovedet, vil vi star med at skære, vi tog i hovedet.den gentager image bliver inden for den "primære" div., som har et ikke nærmere defineret bredde.vi har brug for at lade browser ved, hvor det er, og hvad vi skal gøre med det (gentager, ingen gentager) at fastsætte en baggrund image, vi bruger ejendom "baggrund" og angive placeringen af image eller url: i vores tilfælde er billedet i vores billeder mappe, så vi præcisere det sted, som dette:,, url (billeder /header_slice jpg), og præcisere, at vi ønsker at gentage med x - aksen:,,&#vigtigste {baggrund: url (billeder /header_slice jpg) repeat-x;}, tjek det ud:,,, fedt, ikke?prøv strækker sig ud af din browser, det bliver bare ved og ved, og...men vi mangler stadig at fremhæve den blå bar, og eftersom vi skære en 800px del af vores mission, kan vi sætte det ind i vores "containere". problemet er, at vi har to af dem (en for de vigtigste div., ét til fods), så vi er nødt til at præcisere, at vi vil have div. med klasse "containere", der ligger inden for lufttransport med id "primære", som er det billede, på samme måde som før, men denne gang er vi nødt til at angive "gentag":,,&#vigtigste. container (baggrund: url (billeder /header. jpg) nr.:), en se:,,, fantastisk!højdepunktet er sidder lige, hvor vi vil have det, og faldet til at gentage sider.,,, gå 23 - logo image, udskiftning, vores logo er temmelig kompliceret, ikke?vi bruger et billede baggrund og en ikke - html skrifttype med en indre skygge.vi kan ikke gøre det i forskning, så vi er nødt til at erstatte teksten med et billede. "hvorfor ikke bare få det billede i stedet for < h1 >?"du kan spørge.- på internettet, < h1 > hovedet er stort set "navn" på din side, og vigtige, magtfulde robotter (google) scanning af denne ejendom, når de søger efter nøgleord.hvis du ikke har en < h1 > header, din hjemmeside kan kaldes kalamazoo, men det ville ikke dukker op i en søgen efter det nøjagtige ord. der er forskellige andre teknikker, der har deres fordele i forhold til den (se her, især teknik), men det er det enkleste og den mest hensigtsmæssige metode for denne situation, for at løse det problem, vi bruger en lusket lille metode, der hedder "image udskiftning" til det billede, som vi ønsker, samtidig med at den < h1 > høster i vores oveni.først, lad os sige det image, som baggrund for den&#logo.,,&#logo (baggrund: url (billeder /logo. men heller ikke dér er menneskene sikre ikke gentages;},, hvis du ser på din browser, vil du se, at vores logo er blevet skåret i halve.det er fordi, vi har ikke fået den plads, vi kan løse det her, med angivelse af dimensioner af image:,,&#logo (baggrund: url (billeder /logo. men heller ikke dér er menneskene sikre nr. gentager, højde: 84px; bredde: 235px;}, bedre, men vi har stadig den oprindelige < h1 > tekst i vores vej, men vi kan ordne det!det eneste vi gør, er at sætte teksten led værdi for noget latterligt som - 9999px, væk fra den side, så ingen vil nogensinde se det, undtagen søgemaskine robotter.,,&#logo h1 {tekst led: - 9999px;}, nu tage et kig, og vores logo image er lykkeligt møde, hvor vores < h1 > tekst plejede at være.men det ser slemt ud, alle trange op på toppen.når vi ønsker at flytte et punkt fra sin oprindelige holdning til den side, kan vi bruge begge polstringen og margen ejendomme.vi skal forsøge både at se forskellen, lad os prøve at tilføje en margen til toppen af h1 - tag.vi kan finde ud af, hvor stor til at gøre det med linealen redskab i photoshop.,,&#logo h1 {tekst led: - 9999px; margen top: 40px;}... ups!det lykkedes os at få logo, men det tog hele den side med det!lad os prøve at tilpasse polstringen i stedet:,,&#logo h1 {tekst led: - 9999px; polstring top: 40px;}, kig nu, og det tog tilbage til der, hvor det begyndte.det er, fordi margenen ejendom bevæger hele element, men polstringen bevæger sig kun indholdet af det element, idet den situation, hvor det er.så hvis vores skærm, sige, 19999px bredt, ville vi se vores udstødt < h1 > hovedet ned 40px, men det er ikke det, vi er ude efter.,, så at flytte baggrund billede af logoet, er vi nødt til at flytte div over det, fordi hele logo div er "indhold" af hovedet. lad os prøve:,,&#logo h1 {tekst led: - 9999px;}&#header (polstring top: 40px;},,, meget bedre.nu er vores logo, ligner det ikke i vores psd, på rette sted.hvis bare vi kunne ordne det tema.,,, skridt 24 - flydende temaet,, så nu er vi nødt til at finde en måde at få det tema ud ved siden af logoet.problemet er, at html elementer naturligvis stak vertikalt, skubber hinanden op og ned af siden. vi har nogle muligheder for at ordne det her, men jeg vil bruge vogne, som er en smule indviklet, men virkelig nyttige, når du får ud af dem.,, hvad er så en flyder?tja, det er kompliceret.grundlæggende, når du fortæller et element til at flyde, det stikker det til side af en side eller element, og også tager det ud af den normale "flow" på siden.forvirret?lad mig vise dig det.,,&#logo (baggrund: url (billeder /logo. men heller ikke dér er menneskene sikre nr. gentager, højde: 84px; bredde: 235px; flyde: venstre},,, - som du kan se, er det lykkedes os at få vores tema ud til siden, men det tog sejlads menu med det, jeg tror. på den her måde: en normal bestanddel (f.eks. en virksomhed i forbindelse med fast ejendom eller en h1 header, eller et billede), selv om det er meget små, usynlig bebor hele rummet til side, som en stor, lang horisontale bar.,,, det er derfor, at alle de øvrige elementer blive under det. i stedet for at indynde sig ved siden af.når du svæver et element, man fjerner alle de ekstra plads til side, og begrænse det til kun den plads, der direkte er, at andre elementer til at rulle rundt om det. nu ved du, hvordan flyder arbejde, hvordan kan vi løse vores nuværende situation?vi har for det første til at isolere den ide til en flyder med sine egne, så det også ligger uden for den normale "flow" på side:,,&#slaglinje {flyde: venstre}, tag et kig i browseren, og se på, at vi har gjort det værre.nu menuen poster er omkring vores ide.det, vi har brug for her, er at genoprette den normale afvikling af dokumentet efter floate