Kuidas veebisaiti kodeerida

Kuidas veebisaiti kodeeridaKas soovite teada saada, kuidas HTML-i ja CSS-iga veebisaiti luua?


Oled õiges kohas. Selles juhendis näitame teile kõiki samme tühjalt ekraanilt töötavale veebisaidile jõudmiseks, mis on samal ajal optimeeritud ja üsna hea välimusega.

Kuid kõigepealt, mis on HTML ja CSS?

Noh, võite lihtsalt otsida mõlemaid termineid Vikipeedias, kuid need määratlused pole eriti lugejasõbralikud. Lihtsustagem asju natuke:

  • HTML (Hüperteksti märgistuskeel) määratleb veebilehe struktuuri ja sisu – kus asjad lähevad, kuidas need on paigutatud ja mis on lehel
  • CSS (Cascading Style Sheets) määratleb stiil / esitlus veebilehe ja sellel olevate elementide kohta

Ühtegi teist ilma teiseta ei saa – need kaks töötavad koos, et moodustada lõplik veebileht, selle kujundus ja sellel olev sisu.

Märge; kui me ütleme „veebileht”, peame silmas ühte HTML-dokumenti – ühte lehte, mis on teie veebisaidi osa. Arvestades, et veebisait on täielik asi – kogu teie sait koos kõigi oma üksikute veebilehtedega.

Kuidas veebisaiti HTML-i ja CSS-i abil luua (sisukord):

  1. Õppige HTML-i põhitõdesid
  2. HTML-dokumentide ülesehituse mõistmine
  3. Tutvuge CSS-i valijatega
  4. Pange CSS-i stiilileht kokku
  5. Hankige Bootstrap
  6. Valige kujundus
  7. Kohandage oma veebisaiti HTML-i ja CSS-iga
  8. Lisage sisu ja pilte
  9. Värvide ja fondide peenhäälestamine
  10. Looge täiendavaid lehti

Veebisaidi loomise koguaeg: 4-5 tundi
Oskuste tase: Vahepealne

Kui arvate, et see on liiga keeruline, soovitame luua veebisaidi WordPressi abil või valida mõni veebisaidi koostajatest. Samuti saate vaadata veebiarenduseks valitud parimate IDE-de loendit. 

Contents

Enne alustamist koguge oma ressursid:

Niisiis, esimene asi, mida vajate juba enne HTML-i ja CSS-iga veebisaidi loomist, on veebiserver (hostimine). Ärge siiski muretsege; te ei pea oma masinat ostma. Paljud veebimajutusettevõtted müüvad teile nende masinates lihtsat hostimisteenust. Lihtsalt googletage veebimajutuse jaoks ja valige midagi, mis pole liiga kallis.

Kui server on sorteeritud, on järgmine asi, mida vajate, domeeninimi. Domeeninimi on see, mida veebisait veebis tuvastab. Näiteks on selle saidi domeeninimi veebilehedetup.org.

Kui teil on nii domeeninimi kui ka server, saate need kaks omavahel ühendada.

Täielik avalikustamine: Teenime vahendustasu, kui ostate Bluehost meie juhendis toodud meie linkide kaudu. See aitab meil veebisaidi seadistust pidevalt ajakohasena hoida. Tänan toetuse eest.

Et see oleks lahendatud nii, et teil poleks valu, soovitame registreeruda sellises ettevõttes nagu Sinine vaim.

Nad tegelevad kõigi seadistustega teie eest. Tähendades, et nad: a) looge teile hostimiskonto, (b) registreerige oma nimel domeeninimi, c) konfigureerida kõik koos töötama ja (d) annab teile juurdepääsu hõlpsasti kasutatavale armatuurlauale.

Minge edasi ja registreeruge Sinine vaim, me ootame. Kui olete tagasi ja kui teie veebiserver on konfigureeritud ja töövalmis, liikuge järgmisele juhisele.

P.S. Kui soovite lihtsalt oma arvutis HTML-veebisaidiga katsetada, ja te ei kavatse seda avalikustada, kasutage kohaliku veebiserveri tarkvara. Üks, mida soovitame ja mida meile meeldib kasutada, on nn XAMPP. Sellel on nii Maci kui ka PC jaoks mõeldud versioonid ja seda on lihtne kasutada. Siin on giid kuidas seda arvutisse installida.

1. Õppige HTML-i põhitõdesid

HTML-i struktuuri põhielement on HTML silt.

Näiteks silt näeb välja selline:

MIDAGI

Siin on tegemist a silt. See saab julge tekstiosa, mis asub avatava sildi vahel () ja lõppsilt (). Sel juhul see tekst on MIDAGI.

Kuid on ka teisi silte, kui nimetada vaid mõnda:

  • ... kaldutakse ava- ja sulgemissiltide vahel teksti kaldkirjas
  • ... toonitan seda
  • ...

    on teksti lõik


  • ...

    on lehe peamine päis

Peale nende lihtsate siltide on ka keerulisemaid silte. Näiteks kui soovite luua järgmise loendi:

  • 1. punkt
  • Punkt 2
  • Punkt 3

… saate seda teha järgmise HTML-koodiga:

  • 1. punkt
  • Punkt 2
  • Punkt 3

Või kui soovite lisada lingi teisele lehele, näiteks see:

See on link meie kodulehele

… saate seda teha selle kooditüki abil:

See on link minu kodulehele

Lugege seda, et saada täielik HTML-siltide loend. See on kasulik, kui loote HTML-i ja CSS-iga veebisaiti.

2. Saage aru HTML-i dokumendistruktuurist

Mõelge oma HTML-lehele nii, nagu see oleks üles ehitatud Legosest. Paned erinevad tellised üksteise peale, et saada etteantud suurem struktuur.

Kuid Lego telliste asemel saate HTML-silte …

Siin on lihtsaim HTML-dokumendi struktuur:





Tere, Maailm!


Tere, Maailm!

Minu esimene veebileht.

Võite võtta ülaltoodud koodi, kopeerida ja kleepida uude faili, salvestada dokumendi nimega register.html, ja see saab olema täiesti kehtiv HTML-leht.

Selgitame selle koodi üksikuid osi:

  • – dokumendi esialgne deklaratsioon
  • – veel üks deklaratsioon; ütleb, et mis edasi saab, on inglise keeles kirjutatud HTML-dokument
  • – tähistab programmi algust pea sektsioon; pea jaotises on kõik lehe põhiparameetrid; enamikku neist ei kuvata ekraanil; nad lihtsalt määratlevad, mis kapoti all toimub
  • – määratleb, millist märgistikku kasutatakse dokumendi kirjutamiseks; selleks pole vaja kulutada liiga palju aega; kasutage seda deklaratsiooni just sellisena nagu see on
  • Tere, Maailm! – lehe pealkiri; seda näevad inimesed oma brauserite tiitliribal, nt:

HTML-i ja CSS-iga veebisaidi loomisel veebibrauseris pealkiri

  • – tähistab programmi algust keha sektsioon; siia läheb kogu lehe sisu; see on HTML-dokumendi põhiosa; lubage meil seda rõhutada, selles jaotises peate sisaldama kogu sisu, mis on mõeldud sellel lehel kuvamiseks

  • Tere, Maailm!

    – lehe peamine päis

  • Minu esimene veebileht.

    – teksti lihtne lõik

  • – kogu HTML-dokumendi lõppsilt

Oluline märkus siin. HTML-failiga töötamine põhitekstirakenduses või keerulises tekstiprotsessoris, näiteks MS Word, pole hea kogemus. Enda jaoks lihtsamaks muutmiseks installige tööriist nimega Ülev tekst. Sellel on nii Maci kui ka arvuti jaoks mõeldud versioonid ja see on tasuta.

Miks on parem? Muu hulgas värvib see HTML-faili süntaksi. Tähendab, see eristab teie HTML-silte visuaalselt teksti sisust, sildi parameetritest ja muudest väärtustest. Põhimõtteliselt muutuvad kõik loetavaks. Meie lihtne HTML-struktuur näeb sublime tekstis välja järgmine:

ülev süntaks on HTML-i ja CSS-iga veebisaidi loomisel suurepärane

Olgu, tagasi teema juurde. Võite võtta selle uue register.html oma faili, kopeerige see sinna, kus asub teie veebiserveri peakataloog, ja siis näete seda lehte, sirvides sellele veebibrauseri kaudu. Ärge siiski ärge liiga põnevil; see leht on üsna kole (vt allpool).

see leht on kole

Olgu, nii et leht on kole, kuidas muuta see mitte nii?

3. Tutvuge CSS-i valijatega

Nii nagu HTML-il on oma sildid, on ka CSS-l valijad.

Valijad kirjeldavad, kuidas antud element peaks käituma välimuselt. Siin on CSS-i valija näide:

p {
kirjasuurus: 18 pikslit;
}

See valija näitab, et kogu HTML

dokumendi siltide kirjasuurus on 18 pikslit.

CSS-selektorite kasutamise praktilisem viis ei ole siiski piirata kõiki antud tüüpi silte teatud stiiliga, vaid luua hoopis erinevad „klassid“ ja määrata need siltidele ükshaaval.

Näiteks CSS-i klassi valija näeb välja selline:

.normaaltekst {
kirjasuurus: 18 pikslit;
}

Pange tähele punkti (.) klassi nime ees (normaaltekst). Määratletud klassiga „tavaline tekst” saame nüüd selle klassi määrata neile konkreetsetele HTML-siltidele, mille suuruseks tahame 18 pikslit.

Näiteks:

See tekst saab olema 18 pikslit.

Võtame veel ühe minuti, et selgitada ülaltoodud CSS-koodi kõigi elementide elemente:

  • .normaaltekst – klassi määratlus; kõik klassi nime järel ning ava- ja sulgudes vahel {} määratleb, millised sellele klassile määratud elemendid välja näevad
  • kirjasuurus – CSS-i omaduse näide
  • 18 pikslit – varale antud väärtus

Lisaks ülaltoodule on veel üks hulk CSS-i atribuute kirjasuurus. Siin on täielik nimekiri kui teil on uudishimu.

4. Pange kokku CSS-i stiilileht

HTML-dokument on väga struktuurne – igal elemendil on oma koht ja elementide järjekord on kõnealuse veebilehe lõpliku ülesehituse ja väljanägemise jaoks ülioluline. CSS-i dokumenti on palju vähem.

CSS-dokumentidele viidatakse sageli kui stiililehed. Põhimõtteliselt on CSS-i stiilileht kõigi klasside määratluste loetelu, mida kasutatakse vastavas HTML-dokumendis. Klassimääratluste järjekord pole enamasti nii oluline (vähemalt lihtsate kujunduste puhul).

CSS-i stiililehe koostamise viis on määratleda klassid ükshaaval ja seejärel testida, kas teie lehe kujundus annab soovitud tulemuse.

See kõlab nagu tüütu töö ja nii see on.

Kuid teeme asja teie jaoks lihtsamaks, mitte ei sunni teid HTML-i ja CSS-i kujundamist käsitsi õppima. Selle asemel, et teile kõike nullist õpetada, võtame elusorganismi ja lahkame selle elemendid.

Siin tuleb mängu asi, mida nimetatakse Bootstrapiks.

5. Laadige alla / installige alglaadimissüsteem

Bootstrap on avatud lähtekoodiga tööriistakomplekt HTML-i ja CSS-iga veebisaidi loomiseks.

Lihtsas inglise keeles hoolitseb Bootstrap teie eest HTML-dokumendi ja CSS-stiililehe põhistruktuuri eest. See pakub raamistikku, mis tagab, et teie veebilehe peamised tellingud on valmis ja optimeeritud edasiseks arendamiseks.

Põhimõtteliselt laseb Bootstrap teil mitte nullist alustada, selle asemel minna otse lõbusasse ossa. Sellega ei pea te HTML-i ja CSS-iga veebisaidi loomise sageli igavate algstaadiumite nimel tööd tegema.

Võite käia kahel viisil:

  • Võimalus a): õppige Bootstrap – minge Bootstrap kodulehele, laadige alla Bootstrap’i peamine pakett ja alustage selle peal ehitamist.
  • Võimalus (b): võtke otsetee – hankige Bootstrapi alguse pakett, millel on nägus kujundus ja juba loodud demoveebileht.

Võimalus a) võib-olla on alguses mõni õppekõver, kuid see pole kuidagi halvem viis HTML-i ja CSS-iga veebisaidi loomiseks. Kui olete alglaadimissüsteemi põhistruktuuri omandanud, võib teil olla lihtsam luua uusi lehti ja panna need välja nägema täpselt sellised, nagu soovite. Alglaaduri dokumentatsioon on suurepärane koht selle tee alustamiseks.

Me läheme Optsiooni juurde (b) selle juhendi jaoks. Me teeme seda paaril põhjusel, nende pealik:

Valmis struktuuriga alustades säästab HTML-dokumendi põhivajaduste proovimisel palju valu. See võimaldab teil keskenduda huvitavale kraamile – näiteks sisu kujundamisele ja hea väljanägemisele.

Ühesõnaga, asjade sel viisil õppimine annab teile kiiremini parema välimuse, mis on meie arvates just see, mida soovite.

6. Valige kujundus

HTML-i ja CSS-iga veebisaiti luues saate vabalt kasutada mis tahes Bootstrap-malli, mis teile meeldib. Nad peaksid kõik töötama piisavalt sarnaselt.

Selle juhendi jaoks kasutame siiski ühte mallist Käivitage alglaadimine. Neil on kena valik tasuta malle, mis on optimeeritud, töötavad probleemideta ja on ka väga hästi disainitud.

Teema, mida me kasutame, on nn Loominguline. Lõpptulemus, mida me taotleme, näeb välja umbes selline:

lõplik koduleht pärast HTML-i ja CSS-iga veebisaidi loomist

Alustuseks klõpsake loomingulisel mallil nuppu Tasuta allalaadimine nuppu paremal (sisse sellel lehel) ja salvestage zip-pakett töölauale.

Paki pakett lahti ja teisaldage selle sisu kohaliku veebiserveri või veebimajutuskonto peakataloogi.

Nüüd avage see asukoht oma veebibrauseri kaudu. Näete malli aktsiaversiooni:

käivitage alglaadimismall

See on juba üsna nägus, kuid nüüd on aeg õppida kasutama HTML-i ja CSS-i, et muuta see täpselt selliseks, nagu soovite.

7. Kohandage oma veebisaiti HTML-i ja CSS-iga

Töötame kõigepealt kujunduse kodulehel. See näitab meile, kuidas asendada graafika, tekstid ja häälestada kõike üldiselt.

Oleme rääkinud lühidalt ülaltoodud HTML-dokumendi peatükist. Vaatame seda siin põhjalikumalt.

Kui avate register.html oma Bootstrap-saidi faili alamtekstina, näete seda pealkirja jaotist (selguse huvides eemaldasime koodist kõik ebaolulised asjad *):






Loominguline - käivitage alglaadimisteema





* Lisaks ülaltoodule leidus lehel kuvatavate piltide jaoks ka kood Google Fontide, Font Awesome ikoonide ja valguskasti mooduli laadimiseks.

Enamikku siinsetest deklaratsioonidest me juba teame, kuid on ka paar uut:

  • Esiteks, kõik vahel sulud on HTML-kommentaar. Seda ei kuvata viimasel lehel.
  • – see on üks Bootstrapi enda deklaratsiooni silte. See määratleb veebisaidi vaateakna suuruse.
  • – see rida laadib loomuliku malli CSS-i stiililehe ja sisaldab ka Bootstrapi vaikimisi stiililehte.

Muutagem seda viimast deklaratsiooni – CSS-i laadiv rida -, et hiljem oleks lihtsam töötada.

Muutke see rida järgmiseks:


See on vaid väike erinevus – see laadib sama CSS-lehe lühendatud versiooni. Seda versiooni on lihtsalt lihtsam muuta.

Nüüd kerige allapoole register.html faili. Järgmisi ridu näete vahetult enne sulgemist keha silt:

        

Nad vastutavad JavaScripti failide laadimise eest, mis käsitlevad disaini visuaalsemat interaktsiooni. Näiteks kui klõpsate nuppu Umbes ülamenüü linki, suunatakse teid sujuvalt samal lehel olevasse umbes blokki – seda tehakse muu hulgas JavaScripti kaudu. Me ei pea praegu selle koodi mõistmisega vaeva nägema. Jätame selle teiseks korraks.

Selle asemel töötagem selle nimel, et lehele oma sisu lisada:

8. Lisage sisu ja pildid

Esimese asjana peate lehe pealkirja muutma.

1. Muutke pealkirja

Leidke pealkiri sildistage peasektsioonis ja asendage tekst siltide vahel enda omaga:

Minu HTML-sait

2. Kohandage kangelasekstsiooni

Kangelaseks nimetatakse seda blokki:

kangelaseks

Oleks lahe, kui selles oleks oma sisu. Selle bloki muutmiseks minge tagasi oma saidile register.html faili ja leidke see jaotis:

...


...

Leia rohkem

Kogu see koodiplokk kontrollib seda, mis kangelase jaotises on.

Siin on mõned uued sildid:


  • – see on silt, mis määratleb, et kogu see jaotis on lehe päis; sellel sildil on paar venda ja õde
    silt ja
    silt
  • – on üldine CSS-silt, mis näitab, et järgnev on eraldi sektsioon (aka jagunemine) HTML-dokumendis; selle abil on lehe üksikuid jaotisi visuaalselt lihtsam eristada

Samuti märkate, et mõned muud sildid (mida me juba teame) näivad olevat pisut keerukamad ja neile on määratud mitu CSS-i klassi. Näiteks:

...

Klassidele määratud klassid

silt siin on tekst suurtähtedega tekst valge-font-rasvases kirjas.

Need klassid on loonud Bootstrap ja loovteema arendaja. Hea uudis on see, et ka teie saate neid HTML-i ja CSS-iga veebisaidi loomisel vabalt kasutada.

Ausalt öeldes saate kohandada kõiki oma lehe struktuurile lisatud silte, määrates sellele suvalise arvu klasse.

Kui soovite näha saadaolevate klasside täielikku loetelu, võite avada peamise loominguline.css fail, mis asub css loovteema alamkataloog.

Kõigist nendest klassidest aru saamine võib alguses tunduda hirmutav, kuid see on tegelikult palju lihtsam kui tundub.

Näiteks üks klass, mis on määratud mõnele meie lõigule register.html fail on font-weight-light. Kui hüppate sisse loominguline.css toimik ja ctrl + f otsides seda klassi nime, näete, et see määrab lihtsalt klassi kirjasuurus parameeter nagu näiteks:

.font-weight-light {
kirjasuurus: 300;
}

Vaiketekstide muutmine register.html fail on väga lihtne. Lihtsalt leidke silt, mida soovite redigeerida, ja muutke ava- ja sulgemissiltide vahel.

Näiteks pealkirja muutmiseks lihtsalt muutke seda.

Sinu lemmik ...

Midagi järgmist:

Imetlen minu HTML-i veebisaiti!

Sama saate teha kõigi lehe lõikude ja muude siltidega.

Oluline on see, et saate ka uusi lõike vabalt lisada. Näiteks võime võtta lõigu, mis on juba lehel, teha sellest koopia ja kleepida kohe algse lõigu alla; meeldib nii:

Käivitage Bootstrap can ...

Lõige 2

Asendame nüüd hoolitsetud tekstide abil taustal oleva pildi.

Seda on natuke keerulisem teha, kuna see nõuab, et me läheksime CSS-i stiilitabeli faili ja teeksime seal muudatused. Nagu näete veebisaidi HTML-koodis Masthead jaotises, ei näita ükski silt mingil viisil lehele pildi lisamist. Seda kõike tehakse CSS-i kaudu.

Kui vaatate veelkord kogu koodiplokki, mis haldab Masthead jaotist, näete, et see on määratud klassile, mille nimi on mastipea. See koodirida tegeleb klassi määramisega:

mastipea klass on see, mis asetab pildi kogu ploki taustale.

Avame loominguline.css uuesti esitada ja otsida klass „masthead“:

header.masthead {
polsterdus: 10rem;
polster-põhi: kalts (10rem - 72px);
taust: lineaargradient (põhja, rgba (92, 77, 66, 0,8) 0%, rgba (92, 77, 66, 0,8) 100%), URL ("../img / bg-masthead.jpg" );
taust-positsioon: kese;
taust kordama: ei korda;
taust-manus: kerige;
tausta suurus: kaas;
}

See kood teeb meie pildile igasuguseid väljamõeldud asju (näiteks ülekatte lisamine, varjutamine jne), kuid oluline osa on see: URL ("../img / bg-masthead.jpg"). See on joon, mis näitab, kust taustapilti leida. See saab olema img alamkataloog.

Selle taustpildi muutmiseks tehke oma pilt, kopeerige see kausta img alamkataloogi ning seejärel kopeerige ja kleepige selle nimi originaali asemele bg-masthead.jpg faili. Lühidalt, muutke seda: URL ("../img / bg-masthead.jpg") sellele: URL ("../img / YOURFILE.jpg").

3. Kohandage lehel muid blokeeringuid

Kui läbite register.html faili, siis märkate, et sellel lehel on juba palju erinevaid jaotisi. Meil on sektsioon navigeerimine, ja umbes plokk, mõni teenused, a portfell, a üleskutse tegevusele, a kontakt blokeerida ja a jalus.

Kuigi kõigis nendes jaotistes on erinev sisu, on jaotised ise ülesehituselt sarnased. Neil kõigil on umbes sama HTML-siltide komplekt – neile on määratud ainult erinevad CSS-klassid.

Parim viis lehe kohandamiseks oma vajadustele on klotside ükshaaval läbimine ja katsetamine, muutes asju ümber.

Lisaks tekstide muutmisele saate liikuda ka tervete osade vahel (osad teksti vahel)

sildid). Tõsi, peate seda tegema käsitsi (lõigates ja kleepides seejärel elemendid oma kohale), seda on siiski lihtne teha.

Sellegipoolest on kaks üsna põhilist modifikatsiooni, millest me pole veel rääkinud. Vaatame järgmist:

9. Peenhäälestatud värvid ja fondid

Värvide või fontide muutmine on HTML-is ja CSS-is väga lihtne. Lihtsaim asi, mida saate teha, on HTML-märgendile mõne rea stiili määramine. Näiteks:

Punane tekst

HTML-is tähistatakse värve nende heksaväärtustega; „# FF0000” on punane. Siin on kõigi teiste tabel standardvärvid.

Parem viis värvide määramiseks on seda teha CSS-i stiililehe kaudu. Näiteks, et saada sama efekt kui ülaltoodud koodil, võiksime selle lisada oma CSS-i stiililehele:

p.red {
värv: # FF0000;
}

Seejärel kasutage põhidokumendis järgmist HTML-koodi tükki:

Punane tekst

See teine ​​meetod on põhimõtteliselt see, kuidas Bootstrapis asju tehakse.

Lehekülje mis tahes teksti värvi muutmiseks leidke esmalt selle teksti kujundamise eest vastutav silt ja minge seejärel laadilehele ja muutke vastavat klassi või looge uus klass.

Siin on näide; ütleme, et soovite muuta päise värvi, öeldes „Teie teenistuses”. Praegu on see must ja seda käsitseb see kood:

Teie teenistuses

Selle värvi muutmiseks on parim viis luua uus klass, mille nimi on, .tekst-oranž ja määrake seal värviväärtus, näiteks nii:

.tekstioranž {
värv: # f4623a! oluline;
}

* !oluline veenduge, et see värvisäte kirjutaks üle kõik muud värviseadistused, mis sellele eelnesid.

Nüüd saame naasta oma päisesse ja muuta selle koodi järgmiselt:

Teie teenistuses

Nende muudatustega muutub päis nüüd oranžiks:

oranž h2

Fondi ja selle suuruse muutmiseks võite teha midagi väga sarnast. Kuid kõigepealt näide sellest, kuidas fondi määratlusplokk CSS-is välja näeb:

.SOMECLASS {
fondiperekond: "Merriweather", Roboto, sans-serif;
kirjasuurus: 18 pikslit;
}
  • laadige fonte Merriweather, Roboto, ja süsteemi vaikeseade sans-serif font (lugege seda veebiturvaliste fondide kohta lisateabe saamiseks)
  • määrake fondi suuruseks 18 pikslit

Seda tüüpi määratlust saab paigutada igasse CSS-i klassi, täpselt nagu värvi määratlust. Tegelikult leidub fondi- ja värvimääratlusi sageli samades klassideklaratsioonides.

Tulles tagasi meie eelmise näite juurde, et muuta selle päise fondi suurust, mille pealkiri on “Teie teenistuses”, võiksime kõigepealt luua sellise klassi:

.text-xxl {
kirjasuurus: 50 pikslit;
}

Ja määrake see klass päisesse:

Teie teenistuses

�� Kui muudate Bootstrap-i valmistatud malli värve või fonte, siis tutvuge kõigepealt CSS-i stiililehega klasside kohta, mis võivad teile juba pakkuda alternatiivseid suurusi või värve. Kasutage neid, kui need on saadaval.

10. Looge täiendavaid lehti

Nüüd, kui olete avalehe kohandanud, on aeg hakata tegelema mõne lisalehega ja seejärel linkida need avalehega.

HTML-i ja CSS-iga veebisaidi loomisel saate luua suvalise arvu alamlehti ja seejärel linkida need kõik omavahel.

Siin on mõned tavalised lehed, mida enamik veebisaite vajab:

  • lehe kohta
  • kontakt
  • portfell
  • tooted / teenused
  • meeskond
  • eeskirjad (privaatsuseeskirjad, tingimused jne)

1. Alustage paigutusega

Uue veebisaidi ehitamisel peate kõigepealt tegema otsuse, milline peaks olema kujundus.

HTML-i ja CSS-iga veebisaidi loomisel ei takista miski teid meisterdamast mida iganes soovitud paigutus. Ainus raskus on selle kokku panemine.

Tühjalt ekraanilt alustades võib HTML-i ja CSS-iga olla keeruline tegeleda, seega hakkame siin kasutama ka Bootstrap-i. Esiteks näitame teile mõned küljenduse kujundamise põhimõtted ja seejärel demonstreerime, kuidas seda Bootstrapiga teha.

Oma veebilehe paigutusele mõeldes peate seda pidama üksikute plokkide jadana – üksteise peal. Midagi sellist (pange tähele nelja eraldiseisvat plokki):

paigutus HTML-i ja CSS-iga veebisaidi loomisel

Bootstrapi suurepärane asi on see, et see haldab teie jaoks peamisi paigutuspõhimõtteid ja välimuse üksikasju, nii et saate keskenduda lihtsalt nende plokkide õigesse kohta paigutamisele.

Selles juhendi jaotises loome uue lehe “umbes”.

Alustuseks loome paigutuse väga lihtsa projekti. Midagi ülaltoodut.

  • ülaosas on navigeerimismenüü,
  • menüü all olev laiuse pealkirjaplokk,
  • peamine sisu osa keskel, kastiga ekraani keskele (mitte kogu laiusega),
  • ja jalus.

Ehitagem nüüd see paigutus HTML-i.

2. Looge uus leht

Lihtsaim viis uue lehe kallale asumiseks on olemasoleva lehe kopeerimine ja selle mallina kasutamine. Seda me kavatsemegi teha.

Looge koopia register.html faili ja nimetage see ümber umbes.html.

Uuesti redigeerige lihtsalt selleks, et selles varases staadiumis oleks lehti hõlpsam eristada umbes.html faili ja muutke </code> silt. Näiteks, <code><title>Minust.

Nüüd lähme läbi failiridade kaupa ja otsustame, mis me jätame ja mille eemaldame:

  • navigeerimine menüü (allpool ). Tõenäoliselt soovite seda jaotist puutumata jätta, lihtsalt selleks, et navigeerimise kogemus oleks kõigil lehtedel ühtlane.
  • peakangelane jaotis (allpool ). Seda pole meil oma küljendusprojekti järgi vaja. Võite minna edasi ja kustutada terve osa.
  • umbes jaotis (allpool ). Me hakkame seda jaotist uuesti oma peamiseks pealkirjaplokkiks kasutama.
  • teenused sektsiooni, portfell sektsiooni, üleskutse tegevusele sektsiooni ja kontakt jaotis (kõik vahel ja ). Me ei vaja neid jaotisi üldse. Võite neid edasi kustutada.
  • jalus jaotis ja kõik selle all (allpool) ). Seda peame hoidma.

See teeb meie praeguse koodi üsna lihtsaks. Põhimõtteliselt on see lihtsalt see:



























Asi, mis meil siin puudu on, on see põhisisu sektsiooni. Selle ehitamiseks hakkame uuesti kasutama umbes jaotist.

Minge edasi ja tehke sellest umbes koopia. See:

...


...

Nüüd muutke kaks esimest rida selliseks:

Kuna me ei vaja seda

päis seal ja

eemaldage need lihtsalt. Ainus, mis kogu selle ploki sees jääb, on tekstiosa. Meeldib nii:

Teksti lõik.

Kui salvestate faili ja sirvite selle juurde oma brauseri kaudu, näete, et teil on põhimõtteliselt kaks väga sarnast plokki üksteise all, sama värvi taustaga:

umbes lehe pea

Parem oleks, kui põhisisuosas oleks valge taust. Selle muutmiseks peame ainult eemaldama bg-primaarne klass peaosast

silt. Teisisõnu, tehke silt sellesse:

See on parem:

umbes lehepea 2 kohta

Lisame lehele mõned näiva lõike, et seda veel natuke asustada, ja võib-olla ka alapealkiri:

Lorem ipsum dolor sit amet, consectetur adipiscing elit...

Proin fermentum, felis tempor pharetra lobortis, magna quam hendrerit dolor...

Alapealkiri

Lorem ipsum dolor sit amet, consectetur adipiscing elit...

See näeb välja järgmine:

umbes ver 1

Kui teile ei meeldi, et tekst oleks tsentreeritud, eemaldage see lihtsalt tekstikeskus klass ühest

sildid.

umbes 2. ver

Kui soovite nendele tekstiplokkidele veidi rohkem pilku lisada, saate luua uued CSS-klassid (nagu enne) ja määrata need ploki lõikudele. Või võite vaadata praegust stiililehte ja vaadata, millised klassid sellel eesmärgil juba olemas on. Siin on need, mille me määrame

ja

sildid:

Lorem ipsum dolor sit amet...

Proin fermentum, felis tempor pharetra lobortis, magna quam hendrerit dolor...

Alapealkiri

Ja siin on efekt:

umbes 3. ver

Veel üks asi, mida me siin teeme, on pildi lisamine kuhugi lehele.

HTML-i näitesiltide näidis näeb välja järgmine:


Üsna lihtne, eks? Ainus parameeter seal on tee pildifaili. Asjade kenasti korraldamiseks võite oma pildi panna img uuesti kataloog (nagu ka selle taustal mõni aeg tagasi). Sel juhul on pildisilt järgmine:


Sellegipoolest on kujutise silt selles konkreetses konfiguratsioonis üsna piiratud. Selle pisut rafineeritumaks määrame sellele mõned Bootstrap-i klassid. Eriti:


Need kaks klassi annavad teie pildile ümardatud nurgad ja tagavad ühtlasi, et pildi suurus ei ületaks selle ploki suurust, kus see asub.

Nüüd saate niimoodi sildi lisada kusagil oma lehe põhisisu jaotises. Näiteks siin:

Lorem ipsum dolor sit amet...

Proin fermentum, felis tempor pharetra lobortis, magna quam hendrerit dolor...

Alapealkiri

Ja siin on lehe lõplik efekt:

umbes 4. ver

Siin on meie leht kogu selle hiilguses:

umbes leht valmis

3. Link uuele lehele

Kui uus leht on valmis, siis lingime selle nüüd kodulehelt ( register.html fail). Parim koht selle lingi lisamiseks on loomulikult navigatsioonimenüü (allpool) ).

Eriti otsige seda rida:

Umbes

Muudame selle järgmiseks:

Umbes

See on asi, millest me pole veel rääkinud, kuid tag on HTML-i lingisilt. Selle abil saate linkida mis tahes veebilehe, sisestades selle lehe aadressi href parameeter. Lingi tekst – lingi klõpsatav osa – on avamise ja sulgemise vaheline tekst sildid.

Kui värskendate avalehte nüüd, näete oma uut linki, mis osutab umbes lehele.

Lisalugemist:

Selles etapis olete põhimõtteliselt loonud endale lihtsa, kahest lehest koosneva veebisaidi – a koduleht ja umbes lehel.

Nüüd peaksite loputama ja kordama, luues uusi lehti, häälestades neid, lisades neile sisu ja sidudes seejärel kõik navigeerimismenüüst.

Nende toimingute läbimisel tasub veel õppida HTML-i ja CSS-i põhimõtteid, läbida kontrollnimekiri ning õppida ka Bootstrap-i ja selle struktuure ning klasse. Mõned ressursid selleks:

  • HTML5 petmisleht
  • CSS-i petuleht
  • Javascripti petmise leht
  • HTML-i õpetus
  • Bootstrap-i õpetus
  • Bootstrap-i petuleht

Mastering Bootstrap, tõenäoliselt praegu parim viis optimeeritud ja ilusate veebisaitide loomiseks HTML-i ja CSS-iga.

Kui teil on küsimusi veebisaidi loomise kohta HTML-i ja CSS-iga, siis ärge kõhelge, kui lisate neid kommentaarides.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me

    Like this post? Please share to your friends:
    Adblock
    detector
    map