Kā kodēt vietni

Kā kodēt vietniVēlaties uzzināt, kā izveidot vietni ar HTML un CSS?


Jūs esat pareizajā vietā. Šajā ceļvedī mēs parādīsim visas darbības, kā nokļūt no tukša ekrāna līdz funkcionējošai vietnei, kas vienlaikus ir optimizēta un diezgan izskatīga..

Bet vispirms – kas ir HTML un CSS?

Varētu vienkārši meklēt abus terminus Vikipēdijā, taču šīs definīcijas nav ļoti draudzīgas lasītājiem. Mazliet vienkāršosim lietas:

  • HTML (Hiperteksta iezīmēšanas valoda) nosaka Web lapas struktūru un saturu – kur lietas iet, tie ir izkārtoti, un kas ir lapā
  • CSS (Kaskādes stila lapas) definē stils / prezentācija no tīmekļa lapas un tajā esošajiem elementiem

Nevarētu būt, ka viens bez otra – abi kopā strādā, lai izveidotu galīgo tīmekļa lapu, tās noformējumu un tajā esošo saturu.

Piezīme; kad mēs sakām “tīmekļa lapa”, mēs domājam vienu HTML dokumentu – vienu lapu, kas ir jūsu vietnes daļa. Tā kā “vietne” ir pilnīga lieta – visa jūsu vietne ar visām tās atsevišķajām tīmekļa lapām.

Vietnes izveidošana, izmantojot HTML un CSS (satura rādītājs):

  1. Uzziniet HTML pamatus
  2. Izprast HTML dokumentu struktūru
  3. Iepazīstiet CSS atlasītājus
  4. Salieciet CSS stila lapu
  5. Iegūstiet Bootstrap
  6. Izvēlieties dizainu
  7. Pielāgojiet savu vietni, izmantojot HTML un CSS
  8. Pievienojiet saturu un attēlus
  9. Precizējiet krāsas un fontus
  10. Izveidojiet papildu lapas

Kopējais vietnes izveidošanas laiks: 4-5 stundas
Zināšanu līmenis: Starpposms

Ja uzskatāt, ka tas ir pārāk sarežģīti, mēs iesakām izveidot vietni, izmantojot WordPress, vai izvēlēties kādu no vietnes veidotājiem. Varat arī apskatīt atlasīto labāko IDE sarakstu tīmekļa izstrādei. 

Contents

Pirms darba sākšanas apkopojiet savus resursus:

Tātad, pirmā lieta, kas jums nepieciešama pat pirms vietnes izveidošanas ar HTML un CSS, ir tīmekļa serveris (mitināšana). Tomēr neuztraucieties; jums nav jāpērk sava mašīna. Daudzi tīmekļa mitināšanas uzņēmumi jums pārdos vienkāršu mitināšanas pakalpojumu savās mašīnās. Vienkārši google meklējiet “tīmekļa mitināšana” un izvēlieties kaut ko tādu, kas nav pārāk dārgs.

Kad serveris ir sakārtots, nākamā jums nepieciešamā lieta ir domēna nosaukums. Vietne tīmeklī tiek identificēta ar domēna vārdu. Piemēram, šīs vietnes domēna nosaukums ir vietnesetup.org.

Ja jums ir gan domēna vārds, gan serveris, varat tos savienot kopā.

Pilnīga izpaušana: Mēs nopelnām komisiju, ja jūs nolemjat iegādāties Bluehost, izmantojot mūsu novirzīšanas saites šajā rokasgrāmatā. Tas mums palīdz uzturēt vietņu iestatīšanu un darbību, kā arī atjaunināšanu. Paldies par atbalstu.

Lai tas būtu sakārtots bez sāpēm, iesakām reģistrēties pie tāda uzņēmuma kā Bluehost.

Viņi veiks visu iestatīšanu jūsu vietā. Nozīmē, ka viņi: (a) izveidojiet jums hostinga kontu, (b) reģistrējiet domēna vārdu jūsu vārdā, c) konfigurēt visu, lai tas darbotos kopā, un (d) dod jums piekļuvi ērti lietojamam informācijas panelim.

Iet uz priekšu un reģistrējies Bluehost, mēs gaidīsim. Kad esat atgriezies un Web serveris ir konfigurēts un gatavs darbam, ritiniet līdz nākamajai darbībai.

P.S. Ja vēlaties tikai eksperimentēt ar HTML vietni savā datorā, un neplānojat to publiskot, izmantojiet vietējā tīmekļa servera programmatūru. Tiek saukts viens, kuru mēs iesakām un patīk izmantot XAMPP. Tam ir gan Mac, gan PC versijas, un tas ir ērti lietojams. Lūk ceļvedis par to, kā to instalēt datorā.

1. Uzziniet HTML pamatus

HTML struktūras galvenais elements ir HTML birka.

Piemēram, tags izskatās šādi:

DAUDZ

Šeit mēs risinām a birka. Šis būs treknrakstā teksta gabals, kas atrodas starp sākuma tagu () un noslēdzošo tagu (). Šajā gadījumā šis teksts ir DAUDZ.

Bet ir arī citi tagi, lai tikai nosauktu dažus:

  • ... kursīvā būs teksts starp sākuma un aizvēršanas tagiem
  • ... to pasvītros
  • ...

    ir teksta rindkopa


  • ...

    ir galvenā galvene lapā

Papildus šiem vienkāršajiem tagiem ir arī sarežģītāki tagi. Piemēram, ja vēlaties izveidot šādu sarakstu:

  • 1. postenis
  • 2. postenis
  • 3. postenis

… to var izdarīt ar šādu HTML kodu:

  • 1. postenis
  • 2. postenis
  • 3. postenis

Vai arī, ja vēlaties pievienot saiti citai lapai, piemēram, šai:

Šī ir saite uz mūsu mājas lapu

… to var izdarīt ar šo koda daļu:

Šī ir saite uz manu mājas lapu

Izlasiet šo, lai iegūtu pilns HTML tagu saraksts. Tas būs noderīgi, ja veidojat vietni ar HTML un CSS.

2. Izprast HTML dokumentu struktūru

Padomājiet par savu HTML lapu tā, it kā tā būtu veidota no Legos. Jūs uzliekat dažādus ķieģeļus viens otram virsū, lai iegūtu noteikto lielāku struktūru.

Bet Lego ķieģeļu vietā jūs saņemat HTML tagus …

Šeit ir vienkāršākā HTML dokumentu struktūra:





Sveika pasaule!


Sveika pasaule!

Mana pirmā tīmekļa lapa.

Jūs varat paņemt iepriekš norādīto kodu, nokopēt un ielīmēt to jaunā failā, saglabāt dokumentu kā indekss.html, un tā būs pilnīgi derīga HTML lapa.

Paskaidrosim šī koda atsevišķās daļas:

  • – dokumenta sākotnējā deklarācija
  • – vēl viena deklarācija; saka, ka nākamais ir HTML dokuments, kas uzrakstīts angļu valodā
  • – iezīmē galva sadaļa; galva sadaļā ir visi galvenie lapas parametri; lielāko daļu no tiem neparādīs uz ekrāna; viņi tikai definē, kas notiek zem pārsega
  • – definē, kāda rakstzīmju kopa tiek izmantota dokumenta rakstīšanai; nevajag tam veltīt pārāk daudz laika; izmantojiet tikai šo deklarāciju
  • Sveika pasaule! – lapas nosaukums; to cilvēki redzēs savu pārlūkprogrammu virsrakstjoslā, piemēram:

nosaukums tīmekļa pārlūkprogrammā, veidojot vietni ar HTML un CSS

  • – iezīmē ķermenis sadaļa; šajā vietā nonāk viss lapas saturs; tā ir HTML dokumenta galvenā daļa; ļaujiet mums to uzsvērt, šajā sadaļā jūs iekļausit visu saturu, kas paredzēts parādīšanai lapā

  • Sveika pasaule!

    – galvenā galvene lapā

  • Mana pirmā tīmekļa lapa.

    – vienkārša teksta rindkopa

  • – visa HTML dokumenta noslēdzošā atzīme

Svarīga piezīme šeit. Darbs ar HTML failu pamata teksta lietotnē vai sarežģītā teksta procesorā, piemēram, MS Word, nav laba pieredze. Lai padarītu sevi vienkāršāku, instalējiet rīku ar nosaukumu Cildens teksts. Tam ir gan Mac, gan PC versijas, un tas ir bez maksas.

Kāpēc tas ir labāk? Cita starpā tas krāsos HTML faila sintakse. Nozīme: tas HTML tagus vizuāli atšķirs no teksta satura, tagu parametriem un citām vērtībām. Būtībā tas viss būs salasāms. Lūk, kā izskatās vienkāršā HTML struktūra cilnē Sublime Text:

cildens sintakse ir lieliska, veidojot vietni ar HTML un CSS

Labi, atpakaļ pie tēmas. Jūs varat uzņemt šo jauno indekss.html savu failu, nokopējiet to tur, kur atrodas galvenā tīmekļa servera direktorija, un pēc tam apskatiet šo lapu, pārejot uz to caur tīmekļa pārlūku. Neuztraucieties pārāk; šī lapa būs diezgan neglīta (skat. zemāk).

šī lapa ir neglīta

Labi, ka lapa ir neglīta, kā padarīt to ne tik?

3. Iepazīstiet CSS atlasītājus

Tāpat kā HTML ir savi tagi, arī CSS atlasītāji.

Atlasītāji apraksta, kā dotajam elementam vajadzētu izturēties pēc izskata. Šis ir CSS atlasītāja piemērs:

p {
fonta lielums: 18 pikseļi;
}

Šis atlasītājs norāda, ka viss HTML

tagu dokumentā fonta lielums būs 18 pikseļi.

Tomēr praktiskāks CSS atlasītāju izmantošanas veids nav ierobežot visus noteiktā tipa tagus ar noteiktu stilu, bet gan izveidot dažādas “klases” un piešķirt tiem tagus pa vienam.

Piemēram, klases atlasītājs CSS izskatās šādi:

.parasts teksts {
fonta lielums: 18 pikseļi;
}

Ievērojiet punktu (.) pirms klases nosaukuma (normāls teksts). Tā kā ir definēta “normāla teksta” klase, tagad mēs varam šo klasi piešķirt tiem konkrētajiem HTML tagiem, kurus vēlamies izveidot 18 pikseļu lielumā.

Piemēram:

Šis teksts būs 18 pikseļi.

Pieņemsim vēl vienu minūti, lai izskaidrotu visus šī CSS koda elementus iepriekš:

  • .normāls teksts – klases definīcija; viss pēc klases nosaukuma un starp atvēršanas un aizvēršanas iekavām {} definē, kā izskatīsies šai klasei piešķirtie elementi
  • fonta izmērs – CSS īpašuma piemērs
  • 18 pikseļi – īpašumam piešķirta vērtība

Neatkarīgi no iepriekšminētajiem ir daudz CSS rekvizītu fonta izmērs. Lūk, pilns saraksts ja esat ziņkārīgs.

4. Salieciet CSS stila lapu

HTML dokuments ir ļoti strukturāls – katram elementam ir sava vieta, un elementu secībai ir izšķiroša nozīme attiecīgās tīmekļa lapas galīgajā uzbūvē un izskatā. CSS dokuments ir daudz mazāks.

CSS dokumentus bieži sauc par stilu lapas. Pamatā CSS stila lapa ir saraksts ar visām klases definīcijām, kuras tiek izmantotas attiecīgajā HTML dokumentā. Klases definīciju secība lielāko daļu laika nav tik būtiska (vismaz vienkāršiem dizainparaugiem)..

Veids, kā jūs saliecat CSS stila lapu, ir definēt katru klasi pa vienam un pēc tam pārbaudīt, vai jūsu lapas dizaina rezultāts ir tāds, kādu jūs vēlējāties..

Tas izklausās pēc garlaicīga darba, un tā arī ir.

Bet mēs atvieglosim lietas, nevis piespiedīsim jūs ar roku apgūt HTML un CSS dizainu. Tā vietā, lai iemācītu jums visu no nulles, mēs ņemsim dzīvu organismu un sadalīsim tā elementus.

Šeit tiek spēlēta lieta ar Bootstrap.

5. Lejupielādējiet / instalējiet sāknēšanas programmu

Bootstrap ir atvērtā koda rīkkopa vietnes izveidošanai ar HTML un CSS.

Vienkāršā angļu valodā Bootstrap rūpējas par HTML dokumenta un CSS stila lapas pamata struktūru. Tas nodrošina sistēmu, kas nodrošina, ka galvenās jūsu mājas lapas sastatnes ir sagatavotas un optimizētas turpmākai attīstībai.

Būtībā Bootstrap ļauj jums nesākt no nulles, tā vietā dodieties tieši uz jautro daļu. Ar to jums nav jāstrādā bieži vien garlaicīgajos sākumposmos, izveidojot vietni ar HTML un CSS.

Var izvēlēties divus ceļus:

  • Iespēja (a): iemācieties Bootstrap – dodieties uz Bootstrap mājas lapu, lejupielādējiet galveno Bootstrap pakotni un sāciet veidot to.
  • Iespēja (b): veiciet saīsni – iegūstiet sāknēšanas pakotni Bootstrap ar glītu dizainu un jau izveidotu demonstrācijas vietni.

Iespēja (a) sākumā varētu būt kāda mācīšanās līkne, taču tas nekādā ziņā nav sliktākais veids, kā tuvināties vietnes izveidošanai ar HTML un CSS. Kad esat apguvis galveno sāknēšanas struktūru, jums varētu būt vieglāk izveidot jaunas lapas un likt tām izskatīties tieši tā, kā vēlaties. Bootstrap dokumentācija ir lieliska vieta, kur sākt šo ceļu.

Mēs iesim ar opciju (b) šai rokasgrāmatai. Mēs to darām vairāku iemeslu dēļ, galvenais no tiem:

Sākums ar gatavu struktūru ietaupa daudz sāpju, mēģinot izdomāt HTML dokumenta pamatvajadzības. Tas ļauj jums koncentrēties uz interesantām lietām, piemēram, satura izkārtošanu un tā izskatu.

Īsāk sakot, iemācoties lietas šādā veidā, jūs ātrāk iegūsit labāku izskatu, kas, mūsuprāt, ir tas, ko vēlaties.

6. Izvēlieties dizainu

Veidojot vietni ar HTML un CSS, jūs varat brīvi izmantot jebkuru sev vēlamo Bootstrap veidni. Viņiem visiem vajadzētu darboties pietiekami līdzīgi.

Tomēr šai rokasgrāmatai mēs izmantosim vienu no veidnēm Sāciet Bootstrap. Viņiem ir jauks bezmaksas veidņu klāsts, kas ir optimizēti, darbojas bez traucējumiem un ir arī ļoti labi izstrādāti.

Tiek saukta tēma, kuru mēs izmantosim Radošs. Galīgais efekts, uz kuru mēs tiecamies, izskatīsies apmēram šādi:

pēdējā mājas lapa pēc vietnes izveidošanas ar HTML un CSS

Lai sāktu ar radošo veidni, noklikšķiniet uz Bezmaksas lejupielāde poga, kas atrodas labajā pusē (ieslēgta šī lapa) un saglabājiet zip pakotni savā darbvirsmā.

Izņemiet pakotni un pārvietojiet tās saturu uz vietējā tīmekļa servera vai tīmekļa mitināšanas konta galveno direktoriju.

Tagad atveriet šo atrašanās vietu, izmantojot savu tīmekļa pārlūku. Jūs redzēsit veidnes krājuma versiju:

sākt sāknēšanas paraugu

Tas jau ir diezgan izskatīgs, bet tagad ir pienācis laiks iemācīties izmantot HTML un CSS, lai padarītu to tieši tādu, kādu vēlaties.

7. Pielāgojiet savu vietni, izmantojot HTML un CSS

Vispirms darbosimies ar dizaina mājas lapu. Tas mums parādīs, kā nomainīt grafiku, tekstus un visu sakārtot.

Iepriekš mēs īsi runājām par HTML dokumenta sadaļu. Padziļināti izpētīsim to šeit.

Atverot indekss.html jūsu Bootstrap vietnes failā Sublime Text, tiks parādīta šāda sadaļa (skaidrības labad no šī koda tika noņemtas visas nebūtiskās lietas *):






Creative - Start Bootstrap tēma





* Papildus iepriekš minētajam, bija arī kods, lai ielādētu Google fontus, Font Awesome ikonas un gaismas kastes moduli attēliem, kas tiek parādīti lapā.

Lielāko daļu deklarāciju mēs jau zinām, bet ir arī daži jauni:

  • Vispirms viss starp iekavās ir HTML komentārs. Tas neparādās pēdējā lapā.
  • – tas ir viens no Bootstrap pašas deklarācijas tagiem. Tas nosaka vietnes skatloga lielumu.
  • – šī rinda ielādē CSS radošās veidnes stila lapu un tajā arī atrodas Bootstrap noklusējuma stilu lapa.

Modificēsim šo pēdējo deklarāciju – līniju, kurā tiek ievietota CSS, lai vēlāk būtu vieglāk strādāt.

Mainiet šo līniju uz:


Tā ir tikai maza atšķirība – tajā tiks ielādēta tās pašas CSS lapas nesaīsinātā versija. Šo versiju ir vienkārši vieglāk modificēt.

Tagad ritiniet uz leju līdz indekss.html failu. Tieši pirms slēgšanas redzēsit šādas līnijas ķermenis tags:

        

Viņi ir atbildīgi par JavaScript failu ielādi, kas apstrādā dažas no vizuālākajām dizaina mijiedarbībām. Piemēram, kad jūs noklikšķiniet uz Par , kas atrodas augšējā izvēlnē, jūs vienmērīgi nokļūsit apmēram blokā tajā pašā lapā – tas, cita starpā, tiek veikts, izmantojot JavaScript. Mums šobrīd nav jāraizējas par šī koda izpratni. Atstāsim to uz citu laiku.

Tā vietā strādājam pie sava satura pievienošanas lapai:

8. Pievienojiet saturu un attēlus

Pirmais, ko jūs vēlaties darīt, ir mainīt lapas virsrakstu.

1. Mainiet virsrakstu

Atrodi nosaukums tagu galvas sadaļā un aizvieto tekstu starp tagiem uz kaut ko savu:

Mana HTML vietne

2. Pielāgojiet sadaļu Varonis

Varoņu sadaļa ir tā, ko mēs saucam par šo bloku:

varoņu sadaļa

Būtu forši, ja tajā būtu mūsu pašu saturs. Lai modificētu šo bloku, atgriezieties pie sava indekss.html failu un atrodiet šo sadaļu:

...


...

Uzzināt vairāk

Šis viss koda bloks kontrolē varoņu sadaļu.

Šeit ir daži jauni tagi:


  • – tas ir tags, kas nosaka, ka visa šī sadaļa ir lapas galvene; šai birkai ir pāris brāļu un māsu
    birka un
    birka
  • Ir vispārīgs CSS tags, kas norāda, ka sekojošā ir atsevišķa sadaļa (aka dalīšana) HTML dokumentā; to izmantojot, ir vieglāk vizuāli atšķirt atsevišķas lapas sadaļas

Jūs arī pamanīsit, ka daži citi tagi (kurus mēs jau zinām) izskatās nedaudz sarežģītāki, un tiem ir piešķirtas vairākas CSS klases. Piemēram:

...

Klases, kas piešķirtas

tag šeit ir teksts ar lielajiem burtiem, teksts balts, ar burtu, treknrakstā.

Šīs nodarbības ir izveidojis Bootstrap un radošās tēmas izstrādātājs. Labā ziņa ir tā, ka arī jūs tos varat brīvi izmantot, veidojot vietni ar HTML un CSS.

Pavisam atklāti sakot, jūs varat pielāgot jebkuru tagu, ko pievienojat savas lapas struktūrai, tai piešķirot neierobežotu skaitu klašu..

Ja vēlaties redzēt visu pieejamo nodarbību sarakstu, varat atvērt galveno radošs.css fails, kas atrodas css radošās tēmas apakšdirektorijs.

Ieskatīšanās visu šo nodarbību sākumā var šķist iebiedējoša, taču patiesībā tas ir daudz vienkāršāk, nekā izskatās.

Piemēram, viena no klasēm, kas piešķirta dažiem no mūsu rindkopām indekss.html fails ir font-light-light. Kad jūs ielēkt radošs.css failu un ctrl + f meklējot klases nosaukumu, jūs redzēsit, ka tas vienkārši nosaka burtu svars tāds parametrs kā:

.font-weight-light {
burtu svars: 300;
}

Noklusējuma tekstu mainīšana indekss.html fails ir ļoti vienkāršs. Vienkārši atrodiet tagu, kuru vēlaties rediģēt, un mainiet to, kas atrodas starp sākuma un aizvēršanas tagiem.

Piemēram, lai mainītu galveno virsrakstu, vienkārši mainiet to:

Tavs mīļākais ...

Kaut kam līdzīgam:

Apbrīnoju manu HTML vietni!

To pašu var darīt visiem rindkopām un citiem tagiem lapā.

Svarīgi ir tas, ka jūs varat arī brīvi pievienot jaunas rindkopas. Piemēram, mēs varam ņemt rindkopu, kas jau atrodas lapā, izveidot tās kopiju un ielīmēt to tieši zem sākotnējās rindkopas; piemēram, tā:

Start Bootstrap var ...

2. punkts

Tagad, rūpējoties par tekstiem, nomainīsim attēlu, kas atrodas fonā.

Tas ir nedaudz sarežģītāk, jo tas prasa mums iedziļināties CSS stila failā un veikt tajā modifikācijas. Kā jūs varat redzēt Mastgalva sadaļa, neviens tags neliecina par attēla iekļaušanu lapā. Tas viss tiek darīts, izmantojot CSS.

Pārvērtējot visu koda bloku, kas apstrādā Mastgalva sadaļā redzēsit, ka tā ir piešķirta klasei ar nosaukumu masta galviņa. Šī koda līnija apstrādā klases piešķiršanu:

masta galviņa klase ir tā, kas attēlu ieliek visa bloka fonā.

Atvērsim radošs.css atkal iesniedziet failu un meklējiet “masthead” klasi:

header.masthead {
polsterējuma augšdaļa: 10rem;
polsterējuma dibens: calc (10rem - 72px);
fons: lineārais gradients (uz leju, rgba (92, 77, 66, 0,8) 0%, rgba (92, 77, 66, 0,8) 100%), url ("../ img / bg-masthead.jpg" );
fona stāvoklis: centrs;
fonu atkārtot: neatkārtot;
fona pielikums: ritiniet;
fona izmērs: vāks;
}

Šis kods mūsu attēlam dara visu veidu fantastiskas lietas (piemēram, pārklājuma pievienošanu, ēnojumu utt.), Taču svarīga ir šī: vietrādis URL ("../ img / bg-masthead.jpg"). Šī ir līnija, kas norāda, kur atrast fona attēlu. Tas notiks img apakšdirektorija.

Lai mainītu šo fona attēlu, uzņemiet jebkuru savu attēlu, nokopējiet to uz img apakšdirektorijā un pēc tam oriģināla vietā nokopējiet un ielīmējiet tā nosaukumu bg-masthead.jpg failu. Īsi sakot, mainiet šo: vietrādis URL ("../ img / bg-masthead.jpg") uz šo: URL ("../ img / YOURFILE.jpg").

3. Pielāgojiet citus blokus lapā

Kā jums iet caur indekss.html failu, pamanīsit, ka lapā jau ir daudz dažādu sadaļu. Mums ir sadaļa navigācija, un par bloks, daži pakalpojumi, a portfelis, a aicinājums uz rīcību, a kontakts bloķēt, un a kājene.

Lai gan visās šajās sadaļās ir atšķirīgs saturs, pašas sadaļas ir līdzīgas struktūras. Viņiem visiem ir aptuveni vienāds HTML tagu komplekts – tikai viņiem piešķirtas dažādas CSS klases.

Labākais veids, kā modificēt lapu, lai tā atbilstu jūsu vajadzībām, ir iet pa blokiem pa vienam un eksperimentēt, mainot lietas apkārt.

Papildus tekstu modificēšanai jūs varat arī pārvietot veselas sadaļas (daļas starp

tagi). Piešķirts, ka tas jādara ar rokām (sagriežot un pēc tam ielīmējot elementus vietā), tas joprojām ir vienkārši darāms.

Ņemot to vērā, ir divas diezgan pamata modifikācijas, par kurām mēs vēl neesam runājuši. Apskatīsim šos nākamos:

9. Precizētas krāsas un fonti

Krāsu vai fontu maiņa ir ļoti viegli izdarāma HTML un CSS. Vienkāršākā lieta, ko jūs varat darīt, ir HTML tagai piešķirt kādu tiešo stilu. Piemēram:

Sarkans teksts

HTML formātā krāsas tiek attēlotas ar heksa vērtību; “# FF0000” ir sarkanā krāsā. Šeit ir visu pārējo tabula standarta krāsas.

Labāks veids, kā piešķirt krāsas, ir to izdarīt, izmantojot CSS stila lapu. Piemēram, lai iegūtu tādu pašu efektu kā iepriekš minētais kods, to varētu ievietot mūsu CSS stila lapā:

p.red {
krāsa: # FF0000;
}

Pēc tam galvenajā dokumentā izmantojiet šo HTML koda daļu:

Sarkans teksts

Šī otrā metode būtībā ir tas, kā lietas tiek darītas Bootstrap.

Lai mainītu jebkura lapas teksta krāsu, vispirms atrodiet tagu, kas atbild par šī teksta veidošanu, un pēc tam dodieties uz stila lapu un modificējiet atbilstošo klasi vai izveidojiet jaunu klasi..

Šis ir piemērs; sakiet, ka vēlaties mainīt galvenes krāsu, sakot “Jūsu rīcībā”. Pašlaik tas ir melns, un tas ir kods, kas to apstrādā:

Jūsu rīcībā

Lai mainītu tā krāsu, labākais veids ir izveidot jaunu, teiksim, klasi, .teksts oranžs un tur iestatiet krāsas vērtību, piemēram:

.teksts oranžs {
krāsa: # f4623a! svarīgi;
}

* !svarīgs pārliecinieties, ka šis krāsu iestatījums pārrakstīs visus citus krāsu iestatījumus, kas bija pirms tā.

Tagad mēs varam atgriezties pie galvenes un mainīt tās kodu uz:

Jūsu rīcībā

Ar šīm izmaiņām galvene tagad būs oranža:

oranža h2

Lai mainītu fontu un tā lielumu, jūs varat darīt kaut ko ļoti līdzīgu. Bet vispirms piemērs tam, kā fonta definēšanas bloks izskatās CSS:

.SOMECLASS {
fontu saime: "Merriweather", Roboto, sans-serif;
fonta lielums: 18 pikseļi;
}
  • ielādēt fontus Merriweather, Roboto, un sistēmas noklusējums sans serif fonts (izlasiet šo, lai uzzinātu par tīmeklī drošiem fontiem)
  • iestatiet fonta lielumu uz 18 pikseļiem

Šāda veida definīciju var ievietot jebkurā CSS klasē, tāpat kā krāsu definīciju. Faktiski fontu un krāsu definīcijas bieži atrodamas vienas un tās pašas klases deklarācijās.

Atgriežoties pie mūsu iepriekšējā piemēra, lai mainītu tās galvenes fonta lielumu, kura nosaukums ir “Jūsu rīcībā”, mēs vispirms varētu izveidot šādu klasi:

.text-xxl {
fonta lielums: 50 pikseļi;
}

Un pēc tam piešķiriet šai klasei galveni:

Jūsu rīcībā

�� Mainot krāsas vai fontus Bootstrap veidotajā veidnē, vispirms apskatiet CSS stilu lapu klasēm, kuras, iespējams, jau piedāvā jums alternatīvus izmērus vai krāsas. Izmantojiet tos, kur tie ir pieejami.

10. Izveidojiet papildu lapas

Tagad, kad mājas lapa ir pielāgota, ir pienācis laiks sākt strādāt ar dažām papildu lapām un pēc tam tās saistīt ar sākumlapu..

Veidojot vietni ar HTML un CSS, varat izveidot neierobežotu skaitu apakšlapu un pēc tam tās visas saistīt.

Šeit ir dažas no izplatītākajām lapām, kas nepieciešamas lielākajai daļai vietņu:

  • par lapu
  • kontakts
  • portfelis
  • produkti / pakalpojumi
  • komanda
  • politikas (privātuma politika, noteikumi utt.)

1. Sāciet ar izkārtojumu

Veidojot jaunu tīmekļa lapu, pirmais lēmums, kas jums jāpieņem, ir tāds, kāds ir izkārtojums.

Veidojot vietni ar HTML un CSS, nekas jūs neattur no amatniecības lai kā būtu vēlamo izkārtojumu. Vienīgās grūtības patiesībā ir tā salikšana.

Sākot ar tukšu ekrānu, HTML un CSS var būt grūti tikt galā, tāpēc arī mēs šeit izmantosim Bootstrap. Vispirms mēs parādīsim dažus izkārtojuma izstrādāšanas principus un tad parādīsim, kā to izdarīt ar Bootstrap.

Veids, kā jūs varat domāt par savas tīmekļa lapas izkārtojumu, ir jāuzskata par atsevišķu bloku secību – vienu virs otra. Kaut kas līdzīgs šim (ievērojiet četrus atšķirīgus blokus):

izkārtojums, veidojot vietni ar HTML un CSS

Lieliska Bootstrap lieta ir tā, ka tā apstrādā galvenos izkārtojuma principus un informāciju par jums, lai jūs varētu koncentrēties tikai uz šo bloku ievietošanu pareizajās vietās.

Šajā ceļveža sadaļā mēs izveidosim jaunu lapu “par”.

Sākumā mēs izveidosim ļoti vienkāršu izkārtojuma projektu. Kaut kas tāds kā iepriekš.

  • augšpusē ir navigācijas izvēlne,
  • pilna platuma virsrakstu bloks zem izvēlnes,
  • galvenā satura sadaļa vidū, kaste ekrāna centrā (nav pilna platuma),
  • un kājene.

Tagad izveidosim šo izkārtojumu HTML formātā.

2. Izveidojiet jaunu lapu

Vienkāršākais veids, kā sākt strādāt pie jaunas lapas, ir esošās lapas kopēšana un jāizmanto kā veidne. To mēs darīsim.

Izveidojiet indekss.html failu un pārdēvēt to about.html.

Rediģējiet jauno tikai tāpēc, lai šajā agrīnā posmā būtu vieglāk atšķirt lapas about.html failu un mainiet to, kas ir </code> birka. Piemēram, <code><title>Par mani.

Tagad apskatīsim failu pa rindām un izlemsim, ko atstāsim un ko noņemsim:

  • navigācija izvēlne (zemāk ). Jūs, iespējams, vēlaties saglabāt šo sadaļu neskartu, tikai tāpēc, lai navigācijas pieredze būtu vienāda visās lapās.
  • galvenā varone sadaļa (zemāk ). Šis saskaņā ar mūsu izkārtojuma projektu mums nebūs vajadzīgs. Varat iet uz priekšu un izdzēst visu sadaļu.
  • par sadaļa (zemāk ). Mēs šo sadaļu atkārtoti izmantosim kā galveno virsrakstu bloku.
  • pakalpojumi sadaļa, portfelis sadaļa, aicinājums uz rīcību sadaļu un kontakts sadaļa (viss starp un ). Šīs sadaļas mums vispār nav vajadzīgas. Jūs varat iet uz priekšu un izdzēst tos.
  • kājene sadaļa un viss zem tā (zemāk ). Tas mums būs jāsaglabā.

Tas padara mūsu pašreizējo kodu diezgan vienkāršu. Tas būtībā ir tikai šāds:



























Lieta, kas mums šeit pietrūkst, ir galvenais saturs sadaļa. Lai to izveidotu, mēs atkārtoti izmantosim sadaļu par.

Dodieties uz priekšu un izveidojiet sadaļas par kopiju. Šis:

...


...

Tagad nomainiet pirmās divas līnijas uz šo:

Tā kā mums tas nav vajadzīgs

galvenes tur un

noņemsim tos vienkārši. Vienīgais, kas paliks visā blokā, būs teksta rindkopa. Patīk:

Teksta rindkopa.

Saglabājot failu un pārejot uz to, izmantojot pārlūkprogrammu, jūs redzēsit, ka jums principā ir divi ļoti līdzīgi bloki viens virs otra ar vienas krāsas fonu:

par lapas galvu

Būtu labāk, ja galvenajā satura sadaļā būtu balts fons. Lai to mainītu, vienīgais, kas mums jādara, ir noņemt bg-primārā klase no galvenā

birka. Citiem vārdiem sakot, izveidojiet tagu šādā formā:

Tā ir labāk:

par lapas 2. galvu

Pievienosim lapai dažas nederīgas rindkopas, lai to vēl aizpildītu, kā arī varbūt apakšvirsrakstu:

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

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

Apakšvirsma

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

Lūk, kā tas izskatās šajā lapā:

par 1. ver

Ja jums nepatīk, ka teksts ir centrēts, vienkārši noņemiet teksta centrs klase no viena no

tagi.

par 2. ver

Ja vēlaties vēl vairāk izjust šos teksta blokus, varat izveidot jaunas CSS klases (tāpat kā iepriekš) un piešķirt tām bloka rindkopas. Vai arī jūs varat ielūkoties pašreizējā stila lapā un redzēt, kādas klases šim mērķim jau ir izveidotas. Šie ir tie, kuriem mēs esam piešķīruši

un

tagi:

Lorem ipsum dolor sit amet...

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

Apakšvirsma

Un šeit ir šāda ietekme:

par 3. ver

Vēl viena lieta, ko mēs šeit darīsim, ir pievienot attēlu kaut kur lapai.

Tālāk parādīts, kā HTML attēla tags tiek parādīts:


Diezgan vienkārši, vai ne? Vienīgais parametrs tur ir ceļš uz attēla failu. Lai lietas būtu labi sakārtotas, varat ievietot savu attēlu img direktorija atkal (tāpat kā jūs pirms kāda laika to darījāt). Šādā gadījumā attēla tags būs:


Jāsaka, attēla tags šajā konkrētajā konfigurācijā ir diezgan ierobežots. Lai to padarītu nedaudz izsmalcinātu, norīkosim tai dažas Bootstrap nodarbības. Īpaši:


Šīs divas klases piešķirs jūsu attēlam noapaļotus stūrus un arī pārliecināsies, ka attēla lielums nepārsniedz tā bloka izmēru, kurā tas atrodas.

Tagad jūs varat pievienot šādu tagu kaut kur savas lapas galvenajā satura sadaļā. Piemēram, šeit:

Lorem ipsum dolor sit amet...

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

Apakšvirsma

Un šeit ir redzams lapas pēdējais efekts:

par 4. ver

Šī ir mūsu lapa visā krāšņumā:

par lapu pabeigta

3. Saite uz jauno lapu

Kad jaunā lapa būs pabeigta, tagad to saistīsim no sākumlapas ( indekss.html fails). Protams, labākā vieta, kur pievienot šo saiti, ir navigācijas izvēlne (zemāk ).

Jo īpaši meklējiet šo līniju:

Par

Mēs to mainīsim uz šo:

Par

Par to mēs vēl neesam runājuši, bet gan tags ir saites tags HTML. Izmantojot to, jūs varat izveidot saiti uz jebkuru Web lapu, norādot šīs lapas adresi href parametrs. Saites teksts – saites noklikšķināmā daļa – būs teksts starp atvēršanu un aizvēršanu tagi.

Kad tagad atsvaidzināsit sākumlapu, jūs redzēsit jauno saiti, kas norāda uz lapu par.

Papildu lasījums:

Šajā posmā jūs pats esat izveidojis vienkāršu vietni, kas sastāv no divām lapām – a mājas lapa un par lappuse.

Tas, kas jums tagad būtu jādara, ir skalot un atkārtot, izveidojot jaunas lapas, noregulējot tās, pievienojot tām saturu un pēc tam saistot visu no navigācijas izvēlnes.

Citas lietas, kuras vērts darīt, veicot šīs darbības, ir HTML un CSS principu turpmāka apguve, kontrolsaraksta caurskatīšana, kā arī Bootstrap un tā struktūru un nodarbību apguve. Daži resursi tam:

  • HTML5 apkrāptu lapa
  • CSS apkrāptu lapa
  • Javascript apkrāpšanas lapa
  • HTML apmācība
  • Bootstrap apmācība
  • Bootstrap krāpšanās lapa

Apgūstot sāknēšanas programmu, ļoti iespējams, šobrīd labākais ceļš optimizētu un skaistu vietņu izveidošanai ar HTML un CSS.

Ja jums ir kādi jautājumi par vietnes izveidi ar HTML un CSS, nevilcinieties tos iesniegt komentāros.

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

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