Kaip koduoti svetainę

Kaip koduoti svetainęNorite sužinoti, kaip sukurti svetainę naudojant HTML ir CSS?


Esate tinkamoje vietoje. Šiame vadove mes parodysime visus veiksmus, kaip pereiti iš tuščio ekrano į veikiančią svetainę, kuri tuo pačiu yra optimizuota ir gana graži..

Bet pirmiausia, kas yra HTML ir CSS?

Na, jūs galite tiesiog ieškoti abiejų terminų Vikipedijoje, tačiau šie apibrėžimai nėra labai pritaikyti skaitytojams. Šiek tiek supaprastinkime dalykus:

  • HTML (Hiperteksto žymėjimo kalba) nusako tinklalapio struktūrą ir turinį – kur viskas eina, kaip jie yra išdėstyti ir kas yra puslapyje
  • CSS (Kaskadiniai stiliaus lapai) apibrėžia stilius / pristatymas tinklalapio ir jame esančių elementų

Vieno be kito tikrai negalite turėti – abu kartu sukuria galutinį tinklalapį, jo dizainą ir jame esantį turinį.

Pastaba; kai sakome „internetinis puslapis“, mes turime omenyje vieną HTML dokumentą – vieną puslapį, kuris yra jūsų svetainės dalis. Tuo tarpu „svetainė“ yra visas dalykas – visa jūsų svetainė su visais atskirais tinklalapiais.

Kaip sukurti svetainę naudojant HTML ir CSS (turinio lentelė):

  1. Sužinokite HTML pagrindus
  2. Suprasti HTML dokumento struktūrą
  3. Susipažinkite su CSS parinkikliais
  4. Sudėkite CSS stiliaus lentelę
  5. Gaukite „Bootstrap“
  6. Pasirinkite dizainą
  7. Tinkinkite savo svetainę naudodami HTML ir CSS
  8. Pridėkite turinį ir vaizdus
  9. Tiksliai suderinkite spalvas ir šriftus
  10. Sukurkite papildomų puslapių

Visas laikas sukurti svetainę: 4-5 valandas
Įgūdžių lygis: Tarpinis

Jei manote, kad tai yra per daug sudėtinga, mes rekomenduojame sukurti svetainę naudojant „WordPress“ arba pasirinkti vieną iš svetainių kūrėjų. Taip pat galite peržiūrėti atrinktų geriausių IDE sąrašą, skirtą interneto plėtrai. 

Contents

Prieš pradėdami, surinkite savo išteklius:

Taigi, pirmas dalykas, kurio jums reikia net prieš kuriant svetainę su HTML ir CSS, yra žiniatinklio serveris (talpinimas). Vis dėlto nesijaudinkite; jums nereikia pirkti savo mašinos. Daugelis žiniatinklio prieglobos įmonių parduos jums paprastą prieglobos paslaugą jų kompiuteriuose. Tiesiog „Google“ ieškokite „interneto prieglobos“ ir išsirinkite tai, kas nėra per brangu.

Rūšiavus serverį, kitas dalykas, kurio jums reikia, yra domeno vardas. Domeno vardas yra tai, ką svetainė identifikuoja internete. Pvz., Šios svetainės domeno vardas yra websitesetup.org.

Kai turite ir domeno vardą, ir serverį, galite juos sujungti.

Visiškas atskleidimas: Mes uždirbame komisinį atlyginimą, jei galų gale įsigysite „Bluehost“ naudodamiesi mūsų nuorodomis šiame vadove. Tai padeda mums nuolat atnaujinti ir atnaujinti „WebsiteSetup“. Ačiū už tavo pagalbą.

Norėdami tai išspręsti be jokio skausmo, rekomenduojame užsiregistruoti tokioje įmonėje kaip „Bluehost“.

Jie atliks visą sąranką už jus. Reiškia, kad jie: (a) susikurkite jums prieglobos paskyrą, (b) užregistruokite savo vardu domeno vardą, c) sukonfigūruoti viską veikti kartu ir (d) suteiks jums prieigą prie lengvai naudojamo prietaisų skydelio.

Eik į priekį ir užsiregistruok „Bluehost“, lauksime. Kai grįšite ir sukonfigūruosite savo žiniatinklio serverį ir būsite pasirengę eiti, pereikite prie kito veiksmo.

P.S. Jei norite tiesiog eksperimentuoti su HTML svetaine savo kompiuteryje, ir neketinate jo viešinti, naudokite vietinio žiniatinklio serverio programinę įrangą. Tas, kurį mes rekomenduojame ir mėgstame naudoti, yra vadinamas XAMPP. Jis turi versijas, skirtas „Mac“ ir asmeniniams kompiuteriams, ir ja lengva naudotis. Štai vadovas kaip ją įdiegti į savo kompiuterį.

1. Sužinokite HTML pagrindus

Pagrindinis HTML struktūros elementas yra HTML žyma.

Pvz., Žyma atrodo taip:

KAŽKAS

Čia kalbame apie: žyma. Tai bus drąsus teksto fragmentas, esantis tarp pradinės žymos () ir uždarymo žyma (). Tokiu atveju tas tekstas yra KAŽKAS.

Tačiau yra ir kitų etikečių, kurias reikia paminėti tik keletą:

  • ... kursyvuos tekstą tarp atidarymo ir uždarymo žymų
  • ... paryškins
  • ...

    yra teksto pastraipa


  • ...

    yra pagrindinė puslapio antraštė

Be šių paprastų žymų, yra ir sudėtingesnių žymų. Pvz., Jei norite sudaryti tokį sąrašą:

  • 1 punktas
  • 2 punktas
  • 3 punktas

… tai galite padaryti naudodami šį HTML kodą:

  • 1 punktas
  • 2 punktas
  • 3 punktas

Arba, jei norite pridėti nuorodą į kitą puslapį, pvz., Šį:

Tai yra nuoroda į mūsų pagrindinį puslapį

… tai galite padaryti naudodami šį kodo fragmentą:

Tai yra nuoroda į mano pagrindinį puslapį

Perskaitykite tai, kad gautumėte visas HTML žymų sąrašas. Tai bus naudinga, kai kuriate svetainę su HTML ir CSS.

2. Suprasti HTML dokumento struktūrą

Pagalvokite apie savo HTML puslapį taip, tarsi jis būtų pastatytas iš „Legos“. Jūs dedate skirtingas plytas vienas ant kito, kad gautumėte didesnę struktūrą.

Bet vietoj „Lego“ plytų gaunate HTML žymas …

Čia yra paprasčiausia HTML dokumento struktūra:





Labas pasauli!


Labas pasauli!

Mano pirmasis internetinis puslapis.

Galite paimti aukščiau esantį kodą, nukopijuoti ir įklijuoti jį į naują failą, išsaugoti dokumentą kaip rodyklė.html, ir tai bus visiškai tinkamas HTML puslapis.

Paaiškinsime atskiras šio kodo dalis:

  • – pradinė dokumento deklaracija
  • – dar viena deklaracija; sako, kad tai bus HTML dokumentas, parašytas anglų kalba
  • Žymi pradžią galva skyrius; galva skyrius, kuriame eina visi pagrindiniai puslapio parametrai; dauguma jų nebus rodomi ekrane; jie tiesiog nusako, kas vyksta po gaubtu
  • – nusako, koks simbolių rinkinys naudojamas dokumentui rašyti; nereikia tam skirti per daug laiko; tiesiog naudokis šia deklaracija
  • Labas pasauli! – puslapio pavadinimas; tai žmonės matys savo naršyklių pavadinimų juostoje, pvz .:

Pavadinimas žiniatinklio naršyklėje kuriant svetainę su HTML ir CSS

  • Žymi pradžią kūnas skyrius; štai kur eina visas puslapio turinys; tai yra pagrindinė HTML dokumento dalis; leiskite mums tai pabrėžti, šioje skiltyje jūs pateiksite visą turinį, kurį ketinama rodyti puslapyje

  • Labas pasauli!

    – pagrindinė puslapio antraštė

  • Mano pirmasis internetinis puslapis.

    – paprasta teksto pastraipa

  • – viso HTML dokumento uždarymo žyma

Čia svarbi pastaba. Darbas su HTML failu pagrindinėje teksto programoje arba sudėtingame teksto procesoriuje, tokiame kaip „MS Word“, nėra gera patirtis. Norėdami, kad viskas būtų lengviau, įdiekite įrankį pavadinimu Sublimas tekstas. Joje yra versijų, skirtų „Mac“ ir PC, ir ji yra nemokama.

Kodėl tai geriau? Be kita ko, tai nuspalvins HTML failo sintaksę. Reiškia, ji vizualiai atskirtų HTML žymas nuo teksto turinio, žymų parametrų ir kitų verčių. Iš esmės viskas taps skaitoma. Štai kaip atrodo „Sublime Text“ paprasta HTML struktūra:

sublime sintaksė yra puiki kuriant svetainę su HTML ir CSS

Gerai, grįžk į temą. Galite pasiimti tą naują rodyklė.html savo failą, nukopijuokite jį ten, kur yra pagrindinis jūsų žiniatinklio serverio katalogas, tada peržiūrėkite tą puslapį naršydami į jį per interneto naršyklę. Vis dėlto nesijaudinkite; šis puslapis bus gana bjaurus (žr. žemiau).

šis puslapis yra negražus

Gerai, kad puslapis negražus, kaip padaryti jį ne tokį?

3. Susipažinkite su CSS parinkikliais

Kaip ir HTML turi savo žymas, CSS turi selektoriai.

Parinkėjai apibūdina, kaip tam tikras elementas turėtų elgtis išvaizdingai. Čia pateiktas CSS parinkiklio pavyzdys:

p {
šrifto dydis: 18 pikselių;
}

Šis parinkiklis nurodo, kad visi HTML

žymų dokumente šriftas bus 18 pikselių.

Tačiau praktiškesnis CSS selektorių naudojimo būdas nėra apriboti visas tam tikro tipo žymas tam tikru stiliumi, bet greičiau sukurti skirtingas „klases“ ir priskirti jas žymėms po vieną..

Pvz., CSS klasės parinkiklis atrodo taip:

.normalus tekstas {
šrifto dydis: 18 pikselių;
}

Pastebėkite tašką (.) prieš klasės pavadinimą (normalus tekstas). Apibrėžę „normalaus teksto“ klasę, dabar galime priskirti tą klasę toms specifinėms HTML žymoms, kurias norime padaryti 18 pikselių dydžio..

Pavyzdžiui:

Šis tekstas bus 18 pikselių.

Pabandykime dar vieną minutę paaiškinti visus to CSS kodo elementus, pateiktus aukščiau:

  • .normalus tekstas – klasės apibrėžimas; viskas po klasės pavadinimo ir tarp atidarymo ir uždarymo skliaustų {} nusako, kaip atrodys šiai klasei priskirti elementai
  • šrifto dydis – CSS nuosavybės pavyzdys
  • 18 taškų – turtui priskirta vertė

Be to, kas paminėta, yra daugybė CSS ypatybių šrifto dydis. Štai pilnas sąrašas jei tau įdomu.

4. Sudėkite CSS stilių lentelę

HTML dokumentas yra labai struktūrinis – kiekvienas elementas turi savo vietą, o elementų tvarka turi lemiamą reikšmę galutiniam aptariamo tinklalapio kūrimui ir išvaizdai. CSS dokumentas yra daug mažesnis.

CSS dokumentai dažnai vadinami stilių lentelės. Iš esmės CSS stiliaus lentelė yra visų klasių apibrėžimų, kurie naudojami atitinkamame HTML dokumente, sąrašas. Klasių apibrėžimų eiliškumas dažniausiai nėra toks svarbus (bent jau paprastiems projektams)..

CSS stiliaus lentelę galite sudėti apibrėždami kiekvieną klasę po vieną ir išbandydami, ar jūsų puslapio dizainas baigėsi taip, kaip norėjote..

Tai skamba kaip nuobodus darbas, ir yra.

Bet mes palengvinsime jūsų darbą, o ne priversime jus mokytis HTML ir CSS dizaino rankomis. Užuot išmokę jus nuo nulio, mes paimsime gyvą organizmą ir išpjaustysime jo elementus.

Čia žaidžia daiktas, vadinamas „Bootstrap“.

5. Atsisiųskite / įdiekite „Bootstrap“

„Bootstrap“ yra atvirojo kodo įrankių rinkinys, skirtas sukurti svetainę su HTML ir CSS.

Paprasta anglų kalba, „Bootstrap“ rūpinasi pagrindine HTML dokumento ir CSS stiliaus lentelės struktūra. Tai pateikia sistemą, užtikrinančią, kad pagrindiniai pastoliai jūsų tinklalapyje yra paruošti ir optimizuoti tolimesniam tobulinimui.

Iš esmės „Bootstrap“ leidžia jums nepradėti nuo nulio, o vietoj to pereiti tiesiai į linksmąją dalį. Naudodamiesi tuo, jums nereikia dirbti dažnai nuobodžiais ankstyvaisiais tinklalapio su HTML ir CSS kūrimo etapais.

Yra du keliai, kuriais galite eiti:

  • Pasirinkimas (a): išmokite „Bootstrap“ – eikite į „Bootstrap“ pagrindinį puslapį, atsisiųskite pagrindinį „Bootstrap“ paketą ir pradėkite kurti ant jo.
  • Pasirinkimas (b): pasiimkite nuorodą – įsigykite „Bootstrap“ pradinį paketą su gražia forma ir jau sukurtu demonstraciniu interneto puslapiu.

Pasirinkimas (a) pradžioje gali būti tam tikra mokymosi kreivė, tačiau tai jokiu būdu nėra blogesnis būdas kurti svetainę su HTML ir CSS. Įvaldę pagrindinę „Bootstrap“ struktūrą, jums gali būti lengviau kurti naujus puslapius ir priversti juos atrodyti tiksliai taip, kaip norite. „Bootstrap“ dokumentacija yra puiki vieta pradėti šį kelią.

Mes eisime su „Option“ (b) šiam vadovui. Mes tai darome dėl kelių priežasčių, pagrindinės iš jų:

Pradėjimas nuo paruoštos struktūros sutaupo daug skausmo bandant išsiaiškinti pagrindinius HTML dokumento poreikius. Tai leidžia sutelkti dėmesį į įdomius dalykus, pavyzdžiui, išdėstyti turinį ir padaryti jį gerą.

Trumpai tariant, išmokdami dalykus tokiu būdu greičiau pasieksite geriau atrodantį rezultatą, kuris, mūsų manymu, yra tai, ko norite.

6. Pasirinkite dizainą

Kurdami svetainę su HTML ir CSS, galite laisvai naudoti bet kurį jums patinkantį „Bootstrap“ šabloną. Jie visi turėtų veikti pakankamai panašiai.

Tačiau šiame vadove mes naudosime vieną iš šablonų Paleiskite „Bootstrap“. Jie turi puikų nemokamų šablonų pasirinkimą, kurie yra optimizuoti, be problemų, be to, yra labai gerai sukurti.

Tema, kurią naudosime, vadinasi Kūrybingi. Galutinis efektas, kurio laukiame, atrodys maždaug taip:

galutinis pagrindinis puslapis sukūrus svetainę su HTML ir CSS

Norėdami pradėti su „Creative“ šablonu, spustelėkite Nemokamas atsisiuntimas mygtuką, esantį dešinėje (įjungta šitas puslapis) ir išsaugokite pašto paketą darbalaukyje.

Išpakuokite paketą ir perkelkite jo turinį į pagrindinį vietinio žiniatinklio serverio arba žiniatinklio prieglobos abonemento katalogą.

Dabar atidarykite tą vietą per savo interneto naršyklę. Pamatysite pradinę šablono versiją:

pradėti įkrovos šabloną

Tai jau atrodo gana gerai, bet dabar laikas išmokti naudoti HTML ir CSS, kad jis taptų būtent tokiu, kokio norite..

7. Tinkinkite savo svetainę naudodami HTML ir CSS

Pirmiausia dirbkime pagrindiniame dizaino puslapyje. Tai parodys mums, kaip pakeisti grafiką, tekstus ir viską suderinti.

Aukščiau trumpai kalbėjome apie HTML dokumento skyrių. Pažvelkime į tai giliau.

Kai atidarote rodyklė.html jūsų „Bootstrap“ svetainės failą „Sublime Text“, pamatysite tokią skiltį antraštėje (aiškumo dėlei mes pašalinome visus neesminius dalykus iš šio kodo *):






Kūryba - paleiskite „Bootstrap“ temą





* Be aukščiau pateikto, dar buvo kodas „Google“ šriftų, „Font Awesome“ piktogramų įkėlimui ir puslapyje rodomų vaizdų „lightbox“ moduliui..

Daugelį deklaracijų mes jau žinome, tačiau yra keletas naujų:

  • Pirmiausia viskas tarp skliausteliuose yra HTML komentaras. Tai nerodomi paskutiniame puslapyje.
  • – tai yra viena iš „Bootstrap“ deklaracijos žymų. Tai apibrėžia svetainės peržiūros srities dydį.
  • – ši eilutė įkelia CSS kūrybos šablono stiliaus lentelę ir joje yra numatytasis „Bootstrap“ stiliaus lapas.

Pataisykime paskutinę deklaraciją – eilutę, įkeliančią CSS – kad vėliau būtų lengviau dirbti.

Pakeiskite šią eilutę į:


Tai tik nedidelis skirtumas – bus įkelta nesutrumpinta to paties CSS lapo versija. Šią versiją tiesiog lengviau modifikuoti.

Dabar slinkite žemyn iki pačios rodyklė.html byla. Šias eilutes pamatysite prieš pat uždarymą kūnas žyma:

        

Jie yra atsakingi už „JavaScript“ failų, kuriuose tvarkomos tam tikros vizualios dizaino sąveikos, įkėlimą. Pavyzdžiui, kai jūs spustelite Apie , esančią tame pačiame puslapyje, sklandžiai pateksite į maždaug bloką – tai, be kita ko, daroma naudojant „JavaScript“. Šiuo metu nereikia patiems suvokti šio kodo. Palikime tai kitam kartui.

Vietoj to, dirbkime pridėdami savo turinį prie puslapio:

8. Pridėti turinį ir vaizdus

Pirmas dalykas, kurį norėsite padaryti, yra pakeisti puslapio pavadinimą.

1. Pakeiskite pavadinimą

Surask pavadinimas pažymėkite skiltį galvos dalyje ir pakeiskite tekstą tarp žymų į ką nors savo:

Mano HTML svetainė

2. Tinkinkite herojaus skyrių

Didvyrių skyrius yra tai, ką mes vadiname šia bloku:

herojaus skyrius

Būtų šaunu, jei jo viduje būtų savas turinys. Norėdami pakeisti šį bloką, grįžkite į savo rodyklė.html failą ir raskite šį skyrių:

...


...

Sužinoti daugiau

Šis visas kodų blokas kontroliuoja, kas yra herojaus skiltyje.

Čia yra keletas naujų žymų:


  • – tai yra žyma, apibrėžianti, kad visa ši dalis yra puslapio antraštė; šią etiketę turi pora brolių ir seserų
    žyma ir
    žyma
  • Yra bendroji CSS žyma, nurodanti, kad tai yra atskiras skyrius (dar žinomas kaip padalijimas) HTML dokumente; jį naudojant lengviau vizualiai atskirti atskiras puslapio skiltis

Taip pat pastebėsite, kad kai kurios kitos žymės (kurias jau žinome) atrodo šiek tiek sudėtingesnės, joms priskirtos kelios CSS klasės. Pavyzdžiui:

...

Klasės, priskirtos

žyma čia yra tekstas didžiosiomis raidėmis, tekstas baltas, šriftas, paryškintas.

Šias klases sukūrė „Bootstrap“ ir „Kūrybinės temos“ kūrėjas. Geros žinios yra tai, kad ir jūs galite jais laisvai naudotis kurdami svetainę su HTML ir CSS.

Atvirai kalbant, galite tinkinti bet kurią žymą, kurią pridedate prie savo puslapio struktūros, priskirdami jai bet kokį klasių skaičių..

Jei norite pamatyti visą galimų klasių sąrašą, galite atidaryti pagrindinį kūrybinis.css failą, kuris yra css Kūrybos temos pakatalogis.

Iš pradžių suvokti visas šias klases gali atrodyti bauginantis, tačiau iš tikrųjų tai yra daug lengviau, nei atrodo.

Pavyzdžiui, viena iš klasių, priskiriamų kai kurioms mūsų pastraipoms rodyklė.html failas yra šriftas-svoris-šviesa. Kai įšoki į kūrybinis.css byla ir „Ctrl“ + f ieškodami to klasės pavadinimo, pamatysite, kad jis tiesiog nustato šrifto svoris toks parametras:

.font-weight-light {
šrifto svoris: 300;
}

Numatytųjų tekstų modifikavimas rodyklė.html failas yra labai paprastas. Tiesiog raskite norimą redaguoti žymą ir pakeiskite tai, kas yra tarp atidarymo ir uždarymo žymų.

Pvz., Norėdami pakeisti pagrindinę antraštę, tiesiog pakeiskite tai:

Tavo megstamiausias ...

Į ką nors tokio:

Pasigrožėkite mano HTML svetaine!

Tą patį galite padaryti su visomis puslapio pastraipomis ir kitomis žymėmis.

Svarbu ir tai, kad laisvai galite pridėti naujų pastraipų. Pvz., Galime paimti pastraipą, kuri jau yra puslapyje, pasidaryti jos kopiją ir įklijuoti tiesiai po pradine pastraipa; patinka taip:

Start Bootstrap can ...

2 dalis

Dabar, pasirūpinę tekstais, pakeiskime fone esantį vaizdą.

Tai padaryti yra šiek tiek sudėtingiau, nes mums reikia eiti į CSS stiliaus lentelės failą ir ten jį modifikuoti. Kaip matote HTML kodą Stiebas skiltyje jokia žyma jokiu būdu nereikštų, kad vaizdas būtų įtrauktas į puslapį. Visa tai atliekama per CSS.

Kai dar kartą pažvelgsite į visą kodą, tvarkantį Stiebas pamatysite, kad jis priskirtas klasei, vadinamai stiebo galva. Ši kodo eilutė tvarko klasės priskyrimą:

stiebo galva klasė sukuria vaizdą viso bloko fone.

Atidarykime kūrybinis.css vėl paduokite failą ir suraskite „masthead“ klasę:

header.masthead {
padding-top: 10rem;
paminkštinimas-dugnas: skaičiuojamas (10rem - 72px);
fonas: linijinis gradientas (į apačią, rgba (92, 77, 66, 0,8) 0%, rgba (92, 77, 66, 0,8) 100%), URL („../ img / bg-masthead.jpg“ );
fono padėtis: centras;
foninis pakartojimas: nekartoti;
fonas-priedas: slinkite;
fono dydis: viršelis;
}

Šis kodas daro įvairius įmantrius dalykus mūsų atvaizdui (pvz., Prideda perdengimą, užtemimą ir pan.), Tačiau svarbi dalis yra ši: URL („../ img / bg-masthead.jpg“). Tai yra eilutė, nurodanti, kur rasti fono paveikslėlį. Tai įvyks img pakatalogis.

Norėdami pakeisti šį fono paveikslėlį, padarykite bet kurį savo vaizdą, nukopijuokite jį į img pakatalogį, tada nukopijuokite ir įklijuokite jo pavadinimą vietoje originalo bg-masthead.jpg byla. Trumpai tariant, pakeiskite tai: URL („../ img / bg-masthead.jpg“) šiam: URL („../ img / YOURFILE.jpg“).

3. Tinkinkite kitus tinklalapio blokus

Kaip jūs einate per rodyklė.html failą, pastebėsite, kad puslapyje yra daugybė skirtingų skyrių. Mes turime skyrių navigacija, ir apie blokas, kai kurie paslaugos, a portfelis, a raginimas veikti, a kontaktas blokas, ir a poraštė.

Visose šiose skiltyse yra skirtingo turinio, tačiau jų dalys yra panašios. Jie visi turi maždaug tą patį HTML žymų rinkinį – tik skirtingas jiems skirtas CSS klases.

Geriausias būdas modifikuoti puslapį, kad jis atitiktų jūsų poreikius, yra pereiti blokus po vieną ir eksperimentuoti keičiant dalykus.

Be tekstų modifikavimo, taip pat galite perkelti ištisas dalis (dalis tarp

žymės). Suprantama, jūs turite tai padaryti rankomis (pjaustydami ir įklijuodami elementus į vietą), vis tiek tai padaryti paprasta.

Atsižvelgiant į tai, yra dvi gana pagrindinės modifikacijos, apie kurias dar nekalbėjome. Apžvelkime šiuos dalykus:

9. Tikslios spalvos ir šriftai

Keisti spalvas ar šriftus labai lengva HTML ir CSS. Paprasčiausias dalykas, kurį galite padaryti, yra HTML žymą priskirti tam tikram tiesioginiam stiliui. Pavyzdžiui:

Raudonas tekstas

HTML kalba spalvos nurodomos jų šešioliktainėmis reikšmėmis; „# FF0000“ yra raudona. Čia yra visų kitų lentelė standartinės spalvos.

Geriau priskirti spalvas yra tai padaryti naudojant CSS stiliaus lentelę. Pvz., Norėdami gauti tokį patį efektą, kaip ir aukščiau pateiktame kode, galėtume tai įdėti į savo CSS stiliaus lentelę:

p.red {
spalva: # FF0000;
}

Tada pagrindiniame dokumente naudokite šį HTML kodo fragmentą:

Raudonas tekstas

Antrasis metodas iš esmės yra tai, kaip viskas daroma „Bootstrap“.

Norėdami pakeisti bet kurio puslapio teksto spalvą, pirmiausia suraskite žymą, atsakingą už to teksto stilių, tada eikite į stiliaus lentelę ir pakeiskite atitinkamą klasę arba sukurkite naują klasę..

Štai pavyzdys; pasakyti, kad norite pakeisti antraštės, sakančios „Jūsų paslaugoms“, spalvą Šiuo metu juoda spalva, ir ją tvarko kodas:

Jūsų paslaugoms

Geriausias būdas pakeisti jos spalvą yra sukurti naują, tarkime, klasę, .tekstas oranžinis ir ten nustatykite spalvos reikšmę:

.tekstas oranžinis {
spalva: # f4623a! svarbu;
}

* !svarbu įsitikinsite, kad šis spalvų nustatymas pakeis visus kitus spalvų parametrus, buvusius prieš jį.

Dabar galime grįžti prie antraštės ir pakeisti jos kodą į:

Jūsų paslaugoms

Su šiais pakeitimais antraštė dabar bus oranžinė:

oranžinis h2

Norėdami pakeisti šriftą ir jo dydį, galite padaryti kažką labai panašaus. Bet pirmiausia pavyzdys, kaip šrifto apibrėžimo blokas atrodo CSS:

.SOMECLASS {
šriftų šeima: „Merriweather“, „Roboto“, „sans-serif“;
šrifto dydis: 18 pikselių;
}
  • įkelti šriftus Merriweather, Robotas, ir numatytoji sistema sans-serifas šriftas (perskaitykite tai, jei norite sužinoti apie saugius šriftus internete)
  • nustatykite šrifto dydį į 18 pikselių

Tokį apibrėžimą galima priskirti bet kuriai CSS klasei, kaip ir spalvos apibrėžimui. Tiesą sakant, šrifto ir spalvos apibrėžimai dažnai būna tų pačių klasių deklaracijose.

Grįždami prie ankstesnio pavyzdžio, norėdami pakeisti antraštės, kurioje parašyta „Jūsų paslaugoms“, šrifto dydį, pirmiausia galėtume sukurti tokią klasę:

.text-xxl {
šrifto dydis: 50 pikselių;
}

Tada priskirkite šią klasę antraštėms:

Jūsų paslaugoms

�� Keisdami „Bootstrap“ sukurto šablono spalvas ar šriftus, pirmiausia peržvelkite CSS stiliaus lentelę klasėms, kurios jums jau gali pasiūlyti alternatyvius dydžius ar spalvas. Naudokite tuos, kur yra.

10. Sukurkite papildomus puslapius

Dabar, kai tinkinote pagrindinį puslapį, laikas pradėti dirbti su kai kuriais papildomais puslapiais ir susieti juos su pagrindiniu puslapiu..

Kurdami svetainę su HTML ir CSS, galite sukurti bet kokį antrinių puslapių skaičių ir susieti juos visus kartu.

Čia yra keli įprasti puslapiai, kurių reikia daugumai svetainių:

  • apie puslapį
  • kontaktas
  • portfelis
  • produktai / paslaugos
  • komanda
  • politika (privatumo politika, sąlygos ir kt.)

1. Pradėkite nuo maketo

Kurdami naują tinklalapį pirmiausia turite nuspręsti, koks yra išdėstymas.

Kurdami svetainę su HTML ir CSS, niekas netrukdo jums kurti meistrų Nesvarbu norimas išdėstymas. Vienintelis sunkumas iš tikrųjų yra jo sudėjimas.

Pradėjus nuo tuščio ekrano, HTML ir CSS gali būti sunku, todėl čia taip pat naudosime „Bootstrap“. Pirmiausia parodysime keletą maketavimo principų ir parodysime, kaip tai padaryti naudojant „Bootstrap“..

Kaip galvojate apie savo tinklalapio išdėstymą, laikykite jį atskirų blokų seka – vienas ant kito. Kažkas panašaus (atkreipkite dėmesį į keturis skirtingus blokus):

išdėstymas kuriant svetainę su HTML ir CSS

Puikus „Bootstrap“ dalykas yra tas, kad jis tvarko pagrindinius išdėstymo principus ir išsamią išvaizdos informaciją jums, kad galėtumėte tiesiog susikoncentruoti tiesdami tuos blokus tinkamose vietose..

Šiame vadovo skyriuje mes sukursime naują „apie“ puslapį.

Norėdami pradėti, mes sukursime tik labai pagrindinį išdėstymo projektą. Kažkas panašaus į aukščiau.

  • viršuje yra naršymo meniu,
  • viso meniu antraštės blokas žemiau meniu,
  • pagrindinė turinio dalis viduryje, pažymėta ekrano centre (ne visu pločiu),
  • ir poraštė.

Dabar sukurkime šį HTML išdėstymą.

2. Sukurkite naują puslapį

Paprasčiausias būdas pradėti dirbti su nauju puslapiu – kopijuoti esamą puslapį ir naudoti jį kaip šabloną. Tai mes ketiname daryti.

Sukurkite rodyklė.html failą ir pervardyti apie.html.

Redaguokite naujus, kad puslapius būtų lengviau atskirti šiame ankstyvame etape apie.html failą ir pakeiskite tai, kas yra </code> žyma. Pavyzdžiui, <code><title>Apie mane.

Dabar eikime per bylą eilute po eilės ir nuspręskime, ką paliksime, o ką pašalinsime:

  • navigacija meniu (žemiau ). Tikriausiai norite, kad šis skyrius nepažeistas, tik tam, kad navigacijos patirtis būtų vienoda visuose puslapiuose.
  • pagrindinis herojus skyrius (žemiau ). Pagal mūsų išdėstymo projektą šio mums nereikia. Galite eiti į priekį ir ištrinti visą skyrių.
  • apie skyrius (žemiau ). Mes vėl naudosime šią skiltį kaip pagrindinę antraštės dalį.
  • paslaugos skyrius, portfelis skyrius, raginimas veikti skyrių ir kontaktas skyrius (viskas tarp ir ). Šių skyrių mums visai nereikia. Galite eiti į priekį ir juos ištrinti.
  • poraštė skyrius ir viskas po juo (žemiau ). Tai turėsime išlaikyti.

Dėl to dabartinis kodas yra gana paprastas. Iš esmės tai tik ši:



























Tai, ko mums čia trūksta, yra Pagrindinis turinys skyrius. Norėdami jį sukurti, mes vėl naudosime skyrių apie.

Eik į priekį ir pasidaryk maždaug skyriaus skiltį. Šitas:

...


...

Dabar pakeiskite pirmąsias dvi eilutes į šias:

Kadangi mums to nereikia

antraštė ten ir

elementą, tiesiog pašalinkime juos. Vienintelis dalykas, likęs šiame bloke, bus teksto pastraipa. Patinka taip:

Teksto pastraipa.

Išsaugodami failą ir naršydami jį naršyklėje pamatysite, kad iš esmės turite du labai panašius blokus, esančius vienas po kitu, su tokios pačios spalvos fone:

apie puslapio galvą

Geriau, jei pagrindiniame turinio skyriuje būtų baltas fonas. Norėdami jį pakeisti, vienintelis dalykas, kurį turime padaryti, yra pašalinti bg-pirminis klasė iš pagrindinės

žyma. Kitaip tariant, padarykite žymą tokiu:

Taip geriau:

apie 2 puslapio galvutę

Pridėkime keletą nepriekaištingų pastraipų į puslapį, kad jį dar šiek tiek užpildytume, ir galbūt antraštę:

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

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

Paantraštė

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

Štai kaip tai atrodo puslapyje:

apie 1 ver

Jei jums nepatinka, kad tekstas būtų sutelktas, tada tiesiog pašalinkite teksto centras klasė iš vienos iš

žymės.

apie 2 ver

Jei norite šiek tiek labiau pabrėžti šiuos teksto blokus, galite sukurti naujas CSS klases (kaip ir anksčiau) ir priskirti jas bloko pastraipoms. Arba galite pasižvalgyti į dabartinį stilių ir pamatyti, kokios klasės jau yra šiuo tikslu. Štai tie, kuriuos priskyrėme

ir

žymės:

Lorem ipsum dolor sit amet...

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

Paantraštė

Štai toks poveikis:

apie 3 ver

Dar vienas dalykas, kurį mes čia padarysime, yra paveikslėlio pridėjimas kažkur puslapyje.

Štai kaip atrodo HTML paveikslėlio žymos pavyzdys:


Gana paprasta, tiesa? Vienintelis parametras yra kelias į vaizdo failą. Jei norite, kad viskas būtų gerai organizuota, galite įdėti savo atvaizdą į img dar kartą katalogą (kaip ir prieš tai darydami su tuo fonu). Tokiu atveju vaizdo žyma bus:


Atsižvelgiant į tai, vaizdo žymė šioje konkrečioje konfigūracijoje yra gana ribota. Norėdami ją šiek tiek patobulinti, priskirkime jai keletą „Bootstrap“ klasių. Ypač:


Šios dvi klasės suteiks jūsų atvaizdui užapvalintus kampus, taip pat įsitikins, kad vaizdas neviršija bloko, kuriame jis stovi, dydžio.

Dabar galite pridėti tokią žymę kažkur pagrindiniame turinio skiltyje jūsų puslapyje. Pavyzdžiui, čia:

Lorem ipsum dolor sit amet...

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

Paantraštė

Štai paskutinis puslapio poveikis:

apie ver 4

Štai visas mūsų šlovės puslapis apie:

apie puslapį baigtas

3. Nuoroda į naują puslapį

Sukūrę naują puslapį, susiesime jį iš pagrindinio puslapio ( rodyklė.html byla). Natūralu, kad geriausia šią nuorodą pridėti yra naršymo meniu (žemiau ).

Visų pirma ieškokite šios eilutės:

Apie

Pakeisime tai į šį:

Apie

Apie tai mes dar nekalbėjome, bet žyma yra nuorodos žyma HTML. Naudodamiesi ja galite susieti bet kurį tinklalapį, nurodydami to puslapio adresą href parametras. Nuorodos tekstas – spustelimama nuorodos dalis – bus tekstas tarp atidarymo ir uždarymo žymės.

Kai dabar atnaujinsite pagrindinį puslapį, pamatysite naują nuorodą, nukreipiančią į apie puslapį.

Papildoma literatūra:

Šiame etape jūs iš esmės sukūrėte paprastą svetainę, susidedančią iš dviejų puslapių – a pagrindinis puslapis ir apie puslapis.

Tai, ką turėtumėte padaryti, yra skalauti ir pakartoti, sukurdami naujus puslapius, juos sureguliuodami, pridėdami prie jų turinį ir susiedami viską iš naršymo meniu..

Kiti veiksmai, kuriuos verta atlikti atliekant šiuos veiksmus, yra tolesnis HTML ir CSS principų mokymasis, kontrolinio sąrašo mokymasis, taip pat „Bootstrap“, jo struktūrų ir klasių mokymasis. Tam tikri ištekliai:

  • HTML5 apgauti lapas
  • CSS apgauti lapas
  • „Javascript“ žaidimų lapas
  • HTML pamoka
  • „Bootstrap“ pamoka
  • „Bootstrap“ apgaviko lapas

Įsisavinimas „Bootstrap“, greičiausiai geriausias šiuo metu pasiekiamas kelias kuriant optimizuotas ir gražias svetaines su HTML ir CSS.

Jei turite klausimų apie tinklalapio su HTML ir CSS kūrimą, nedvejodami pateikite juos komentaruose.

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

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