, bygning af et websted med en gradvis forbedring,,,,, 308,,,,,,,, 17,,,,,,,,,, det cyber - mandag envato tuts + kurser vil blive reduceret til $3.- og' t miss. denne post er en del af en serie kaldet teori og praksis for en gradvis forbedring. teorien bag progressive forøgelse, ved bygning af et websted, har du nogle måder at tilgang gør det. du kan starte ved at skabe de mest avancerede version af webstedet med alle de manuskripter, styles, og så videre, og så er det, at i ældre browsere via yndefuld nedbrydning, kan de vælge at ignorere ældre browsere, eller du kan begynde med en grundlæggende side og tilføje manuskripter og styles, således at det bliver mere funktionelle via en gradvis forbedring.,, i denne serie, vi tager en se på dette, når vi nu har omfattet teorien om en gradvis forbedring, kan vi skabe en enkelt side for at illustrere den tilgang.det sted, vi vil skabe, vil være en simpel information sted: en få forbindelser, en tekst, billeder og en kontakt form.,, vi vil bruge de anvendte f layout (hvis du ikke ved, hvad det er, se på denne artikel på web - design, tuts +: forståelse af den f-layout i web - design).,,, trin 1: grundlæggende:, begynde med at skabe,., fil med denne kode: http: //,, <!doctype html > < html > < head > < afsnit > eksempel websted < /afsnit > < /head > < krop > < /organ > < http: /////////>,,, trin 2: position og menu,, lad os skabe en vej til vores hjemmeside.for at overholde de regler, vi vil bruge, < h1 >, mærke til det:,, < h1 > stikprøven under pos. < /h1 >,, efter det, kan vi skabe menuen.Usually, you would use the ,<ul>, tag for it, but since the page has to look decent without CSS, we will use the ,<nav>, tag and place anchors in it:,,<nav> <a href="index.html">Home</a> <a href="about.html">About</a> <a href="offer.html">Offer</a> <a href="contact.html">Contact</a> </nav> ,,Note that even if you don't use indentation in your code (and you should to make it more readable), you have to do it here, because without CSS, the spaces between the links are the only thing that will separate them when viewing the page. selvfølgelig vil du ikke det da browser har en misligholdelse css for dem. og her er, hvordan vores side bør se:,,,,, trin 3: f.eks. indhold og fod, for at få en prøve tekst, kan du gå til http://www.lipsum.com/og skabe et par stykker.kan du huske reglerne. vi vil ikke sætte indholdet i en særlig beholder, < div >,.det skal være en semantisk, så vi vil bruge html5 , < vigtigste > element.sætte teksten i, < p >, mærker lige under menu.,, < vigtigste > < p > lorem ipsum dolor sidde amet...< /p > < p > vietnam aliquet midlertidigt turpis...< /p > < /main >, nu tilføje fod med, < fod >, tag:,, < fod > ophavsret & kopi; 2014 somenonexistent selskab.alle rettigheder forbeholdt. < /fod >,, side bør nu ser sådan ud:,,,,, du kan skabe, og tilbyde sider på samme måde, som de ikke vil have noget særligt i dem (du kan tilføje deres navne som < h2 >, mærkater lige over indholdet).,,, trin 4: kontakt form, den sidste ting at gøre i html er kontakt side.Copy the contents of your ,index.html, to ,contact.html, and remove the contents of the ,<main>, element.,,Now add the heading for the form (into the ,<main>, tag):,,<h2>Contact Us</h2> ,,After that, we can add a ,<form>, element with appropriate fields for the user to fill (since the server side of things stays pretty much the same I will not cover it here, so if you want to test your form you will have to write the back-end yourself):,,<form method="POST"> <p> \t <label for="name">Your name:</label> \t\t<input id="name" name="name"> \t</p> \t<p> \t\t<label for="email">Your email:</label> \t\t<input id="email" name="email"> \t</p> < p > < etiket til = "budskab" > deres budskab: < /etiketten > < textarea id = "budskab" > < /textarea > < /p > < knap type = "stille" værdi = "send" > sende < /knap > < knap type = "nulstilling" værdi = "nulstilling" > nulstille < /knap > < /form >,,, < p >, mærker ikke bryde semanticity regel for etiketten og input, combo er faktisk et stykke.kontakt side burde se sådan,,,,, css, nu, at vores side arbejder, kan vi begynde at gøre det en smule bedre.skabe en fil og navn, stil. css,.Now add this line to the ,<head>, section of your document:,,<link rel="stylesheet" href="style.css"> ,,,Step 5: Base Styles,,The first thing to do would be to change the fonts and overall shape of the page:,,* { font-family: Calibri, sans-serif; } body { width: 900px; margin: auto; } ,,Two lines of CSS and you can see that the page looks a bit better as it's no longer using the default fonts.,,,,,,Step 6: The Header,,Now let's add some looks to the header: space it a bit, change the font size, and add the background:,,h1 { padding: 100px 10px 20px; margin: 0; background: #dfdfdf; font-weight: normal; font-size: 3em; } ,,Notice how we changed the font size — we used ,em, instead of any other enhed.det er på grund af den sidste af de regler, der er angivet i den første del af denne serie: brugere kan ændre basen størrelse af skrifttype, og hvis vi f.eks. havde anvendt varer, deres forhold ikke ville blive respekteret af vores stylesheet.,,, trin 7: menuen, efter fastsættelse af hovedet op, kan vi komme videre med menuen.vi vil også ændre skriftstørrelse af ankre, fjerne deres understrege, og tilføje en baggrund, når de er svævede over eller, hvis de har en aktiv, klasse:,, nav (baggrund:&#aed8ff} nav en (tekst): ingen; skriftstørrelsen: 1.3em; farve:ō og polstring: 15px 25px; display: i overensstemmelse med blok;} nav a: svæv, nav a.active {baggrund:&#dfdfdf; farve:ʚ}, nu tilføje, aktiv, klasse til passende ankre i deres papirer, så de kan anføres "forarbejdet", når den side er ladt:,, < en href = "index.html" klasse = "aktive" > hjem < /a >,, her er hvordan det ser ud nu,,,,,,, trin 8: indhold, vi her skal tage sigte bare forbedre læsbarheden af stigende linje højde (glem ikke brugernes indstillinger vi kan ændre størrelsen of rent visuelle elementer som rør og knapper, men brugerne har sat deres misligholdelse skriftstørrelse for en grund.vi vil også ændre skrifttype og tilføje nogle polstring:,, p {skrifttype familie: helvetica, ariel, uden serif; linjehøjde: 1.6; tekst tilpasse: retfærdiggøre; polstring: 10px;}, og her er resultatet.bemærk, hvordan læsbarheden bedre med sådan en lille ændring:,,,,,, trin 9: fod, vil dette også være bare en lille kosmetiske ændring: baggrund, polstring og koncentreret tekst:,, fod (polstring: 10px; baggrund:&#dfdfdf; tekst tilpasse: center;}, her er hvordan fod - nu:,,,,,, trin 10: den form, den sidste ting at gøre, er at fastsætte udseende af kontakt form.lad os først fjerne polstringen og margen for, < p > elementer:,, formular p {margen: 0; polstring: 0;}, lad os sætte bredde, < input >, elementer, og textarea &< gt, være den samme.- satte vi også udvise: block, på linje med dem pænt:, udgør input, form textarea (bredde: 300px; display: blok), og, endelig, vi ændrer, < knap >, er at tage halvdelen af form er bredde:, udgør knap {margen: 10px 0; polstring: 5px; bredde: 148px;}, er dette endelige resultat:,,,,, konklusion i den næste artikel, vil vi bruge lidt javascript (specielt jquery) til at tilføje nogle interaktive elementer til vores hjemmeside,.,, for dem af jer, der er mere avancerede udviklere, du kan finder, at denne forelæsning ikke lære noget, du ikke ved om html eller ccs.nu vi skal arbejde denne strategi i lyset af en begynder at kunne forventes. , alternative, se på det sådan her: vi har skabt en konstruktion, der er baseret på indholdet og ikke baseret på en eksisterende konstruktion.selvfølgelig, det er enkelt og ligetil, men det hjælper at demonstrere uden, herunder en stor mængde css og andre aktiver på side.,, hvis du fjerner stylesheet i dokumentet, du skulle se det, som vi prøver at demonstrere: side er layout, forbliver det samme, og du kan stadig bruger side uden spørgsmål.,, før den næste artikel, læg jeres spørgsmål, kommentarer og feedback i form nedenfor.
