Kako kodirati spletno mesto

Kako kodirati spletno mestoŽelite izvedeti, kako ustvariti spletno mesto s HTML in CSS?


Na pravem ste mestu. V tem priročniku vam prikazujemo vse korake za prehod s praznega zaslona na delujoče spletno mesto, ki je optimizirano in hkrati dobro videti..

Najprej, kaj sta HTML in CSS?

No, lahko bi poiskali oba izraza v Wikipediji, vendar te opredelitve niso zelo prijazne za bralce. Poenostavimo stvari:

  • HTML (Hypertext Markup Language) določa strukturo in vsebino spletne strani – kje stvari gredo, kako so položeni in kaj je na strani
  • CSS (Cascading Style Sheets) definira stajling / predstavitev spletne strani in njenih elementov

Eno brez drugega ne morete imeti – oba delata skupaj, da sestavljata končno spletno stran, njen dizajn in vsebino, ki je na njej.

Opomba; ko rečemo “spletna stran”, mislimo na en dokument HTML – eno stran, ki je del vašega spletnega mesta. Ker je “spletno mesto” popolna stvar – vaše celotno spletno mesto z vsemi njegovimi posameznimi spletnimi stranmi.

Kako ustvariti spletno mesto z uporabo HTML in CSS (kazalo):

  1. Naučite se osnov HTML
  2. Razumevanje strukture dokumenta HTML
  3. Spoznajte izbirnike CSS
  4. Sestavite tabelo slogi CSS
  5. Pridobite Bootstrap
  6. Izberite dizajn
  7. Prilagodite svoje spletno mesto s HTML in CSS
  8. Dodajte vsebino in slike
  9. Natančno prilagodite barve in pisave
  10. Ustvarite dodatne strani

Skupni čas za izdelavo spletnega mesta: 4-5 ur
Raven spretnosti: Vmesni

Če menite, da je to preveč zapleteno, priporočamo, da ustvarite spletno mesto z WordPressom ali izberete enega od ustvarjalcev spletnih strani. Ogledate si lahko tudi seznam izbranih najboljših IDE za razvoj spleta. 

Contents

Preden začnete, zberite svoje vire:

Prva stvar, ki jo potrebujete še preden ustvarite spletno mesto s HTML in CSS, je spletni strežnik (gostovanje). Vseeno ne skrbite; vam ni treba kupiti svojega stroja. Številna podjetja za gostovanje vam bodo na svojih strojih prodala enostavno storitev gostovanja. Samo google za “spletno gostovanje” in izberite nekaj, kar ni predrago.

Ko je strežnik razvrščen, je naslednja stvar, ki jo potrebujete, ime domene. Ime domene je tisto, kar je spletno mesto določeno v spletu. Na primer, ime domene tega spletnega mesta je websitesetup.org.

Ko imate tako ime domene kot strežnik, ju lahko povežete skupaj.

Popolno razkritje: Provizijo zaslužimo, če končate z nakupom Bluehosta prek referenčnih povezav v tem priročniku. To nam pomaga, da spletna stran nastavimo in sproti posodabljamo. Hvala za tvojo podporo.

Če želite to rešiti brez bolečin na koncu, priporočamo, da se prijavite v podobno podjetje Bluehost.

Izvedli bodo vse nastavitve za vas. Pomeni, da bodo: (a) za vas nastavite račun za gostovanje, (b) v svojem imenu registrirajte ime domene, (c) konfigurirajte vse za skupno delovanje in (d) omogoči dostop do enostavne nadzorne plošče.

Pojdi naprej in se prijavi Bluehost, počakali bomo Ko se vrnete in konfigurirate svoj spletni strežnik, se pomaknite na naslednji korak.

P.S. Če želite samo eksperimentirati s spletnim mestom HTML v računalniku, uporabljajte lokalno programsko opremo za spletni strežnik in je ne nameravate javno objaviti. Tisti, ki ga priporočamo in rad uporabljamo, se imenuje XAMPP. Ima različice za Mac in PC ter je enostaven za uporabo. Tukaj je vodnik o tem, kako ga namestiti v računalnik.

1. Spoznajte osnove HTML

Glavni element strukture HTML je HTML oznaka.

Oznaka, na primer, izgleda tako:

NEKAJ

Tukaj imamo opravka z oznaka. Ta bo krepko del besedila med uvodno oznako () in zaključno oznako (). V tem primeru je to besedilo NEKAJ.

Obstajajo pa tudi druge oznake, če jih naštejemo le nekaj:

  • ... bo besedilo poševno označilo med začetnimi in zapiralnimi oznakami
  • ... jo bo poudaril
  • ...

    je odstavek besedila


  • ...

    je glavna glava na strani

Poleg teh preprostih oznak obstajajo tudi bolj zapletene oznake. Na primer, če želite sestaviti seznam, kot je naslednji:

  • 1. točka
  • 2. točka
  • 3. točka

… To lahko storite z naslednjo kodo HTML:

  • 1. točka
  • 2. točka
  • 3. točka

Ali če želite povezavo dodati na drugo stran, kot je ta:

To je povezava do naše domače strani

… To lahko storite s tem delom kode:

To je povezava do moje domače strani

Preberite to, da dobite celoten seznam oznak HTML. Uporabil bo med ustvarjanjem spletnega mesta s HTML in CSS.

2. Razumevanje strukture dokumenta HTML

Zamislite svojo stran HTML, kot da je bila zgrajena iz Legosa. Različne opeke postavljate drug na drugega, da dobite dano večjo strukturo.

Toda namesto Lego opek, dobite oznake HTML…

Tu je najpreprostejša struktura dokumenta HTML:





Pozdravljen, svet!


Pozdravljen, svet!

Moja prva spletna stran.

Kodo lahko vzamete zgoraj, jo kopirate in prilepite v novo datoteko, dokument shranite kot index.html, in to bo popolnoma veljavna stran HTML.

Pojasnimo posamezne dele te kode:

  • – prvotno izjavo dokumenta
  • – drugo izjavo; pravi, da je naslednji dokument HTML, napisan v angleščini
  • – pomeni začetek glava odsek; the glava v razdelku so vsi osnovni parametri strani; večina teh ne bo prikazana na zaslonu; samo opredelijo, kaj se dogaja pod pokrovom
  • – določa, kateri nabor znakov se uporablja za pisanje dokumenta; za to ni treba porabiti preveč časa; samo uporabite to izjavo, kot je
  • Pozdravljen, svet! – naslov strani; to bodo ljudje videli v naslovni vrstici svojih brskalnikov, npr .:

naslov v spletnem brskalniku pri ustvarjanju spletnega mesta s HTML in CSS

  • – pomeni začetek telo odsek; tu gre vsa vsebina strani; je glavni del dokumenta HTML; poudarimo to, v tem razdelku boste vključevali vso vsebino, ki naj bi se prikazala na strani

  • Pozdravljen, svet!

    – glavno glavo na strani

  • Moja prva spletna stran.

    – preprost odstavek besedila

  • – zaključna oznaka celotnega dokumenta HTML

Tu je pomembna opomba. Delo z datoteko HTML v osnovni aplikaciji za besedilo ali zapletenem procesorju besedila, kot je MS Word, ni dobra izkušnja. Če želite olajšati stvari, namestite orodje, imenovano Vzvišeno besedilo. Ima različice tako za Mac kot za računalnik in je brezplačna.

Zakaj je bolje? Med drugim bo obarvala skladnjo datoteke HTML. Pomeni, da bodo vaše HTML oznake vizualno razlikovale od besedilne vsebine, parametrov oznake in drugih vrednosti. V bistvu bodo vsi postali berljivi. Takole izgleda naša preprosta struktura HTML v Sublime Text:

sublime sintaksa je odlična pri ustvarjanju spletnega mesta s HTML in CSS

Ok, nazaj na temo. Lahko vzamete tisto novo index.html datoteko, kopirajte v glavni imenik vašega spletnega strežnika in si oglejte to stran tako, da se pomikate do nje po spletnem brskalniku. Ne bodite preveč navdušeni; ta stran bo precej grda (glej spodaj).

ta stran je grda

Ok, torej stran je grda, kako ne bi bilo tako?

3. Spoznajte izbirnike CSS

Tako kot ima HTML tudi svoje oznake, ima tudi CSS izbirniki.

Izbirniki opisujejo, kako naj se določen element obnaša na videz. Tu je primer izbirnika CSS:

p {
velikost pisave: 18px;
}

Ta izbirnik označuje vse HTML

oznake v dokumentu bodo imele velikost pisave 18 pik.

Vendar bolj praktičen način uporabe izbirnikov CSS ni omejevanje vseh oznak določene vrste na določen slog, temveč ustvarjanje različnih “razredov” in dodeljevanje oznak eno za drugo..

Na primer, izbirnik razredov v CSS izgleda tako:

.normal-text {
velikost pisave: 18px;
}

Opazite piko (.) pred imenom razreda (normalno besedilo). Z definiranim razredom »normalnega besedila« lahko zdaj dodelimo ta razred tistim določenim oznakam HTML, za katere želimo, da so velikosti 18 pik.

Na primer:

To besedilo bo 18 slikovnih pik.

Še nekaj minut, da razložimo vse elemente tega dela kode CSS:

  • .normalno besedilo – opredelitev razreda; vse po imenu razreda in med odprtinami zapiranja in zapiranja {} določa, kako bodo izgledali elementi, dodeljeni temu razredu
  • velikost pisave – primer lastnost CSS
  • 18 slikovnih pik – vrednost, dodeljena znamki

Poleg naštetih lastnosti CSS ni naštetih velikost pisave. Tukaj je popoln seznam če ste radovedni.

4. Sestavite tabelo CSS

Dokument HTML je zelo strukturni – vsak element ima svoje mesto, vrstni red elementov pa je ključen za končno izdelavo in videz zadevne spletne strani. Dokument CSS je veliko manj.

CSS dokumenti so pogosto omenjeni kot tabele. V bistvu je tabela slogi CSS seznam vseh definicij razreda, ki se uporabljajo v ustreznem dokumentu HTML. Vrstni red definicij razreda ni večino odločilnega pomena (vsaj za preproste zasnove).

Način, kako sestavite tabelo slogi CSS, je tako, da določite vsak razred enega po enega in nato preizkusite, ali je rezultat pri oblikovanju vaše strani tisto, kar ste želeli.

To se sliši kot dolgočasno delo in je.

Toda olajšali vam bomo stvari in vas ne bomo prisilili, da se HTML in CSS oblikujete ročno. Namesto da vas vse naučimo iz nič, bomo vzeli živi organizem in razstavili njegove elemente.

Tu nastopi stvar, imenovana Bootstrap.

5. Prenesite / namestite zagonsko plast

Bootstrap je odprtokodni priročnik za ustvarjanje spletnega mesta s HTML in CSS.

V običajnem angleškem jeziku Bootstrap skrbi za osnovno strukturo dokumenta HTML in tabele slogi CSS. Ponuja okvir, ki zagotavlja, da so glavne odri vaše spletne strani pripravljene in optimizirane za nadaljnji razvoj.

V bistvu vam Bootstrap omogoča, da ne začnete iz nič, in namesto da greste desno v zabavni del. Z njim vam ni treba delati na pogosto dolgočasnih zgodnjih fazah ustvarjanja spletnega mesta s HTML in CSS.

Po dve poti se lahko podate:

  • Možnost (a): naučite se Bootstrap – pojdite na domačo stran Bootstrap, prenesite glavni paket Bootstrap in začnite graditi na vrhu.
  • Možnost (b): vzemite bližnjico – dobite starter paket za Bootstrap z lepim dizajnom in že izdelano demo spletno stranjo.

Možnost (a) morda ima nekaj krivulje učenja na začetku, vendar nikakor ne gre za slabši način, da pristopite k ustvarjanju spletnega mesta s HTML in CSS. Ko boste obvladali jedro Bootstrap strukture, boste morda lažje sestavili nove strani in jih naredili tako, kot jih želite. The Dokumentacija za začetno uporabo je odličen kraj za začetek te poti.

Šli bomo z možnostjo (b) za ta vodnik. To počnemo iz več razlogov, glavni od njih:

Začetek s pripravljeno strukturo prihrani veliko bolečine pri poskusu ugotovitve osnovnih potreb dokumenta HTML. To vam omogoča, da se osredotočite na zanimive stvari – na primer postavitev vsebine in lepše videz.

Skratka, s tem, da se stvari naučite na ta način, boste hitreje dosegli boljši rezultat, za kar ugibamo, da si želite.

6. Izberite oblikovanje

Ko ustvarjate spletno mesto s HTML in CSS, lahko uporabljate katero koli predlogo Bootstrap, ki vam je všeč. Vsi bi morali delovati dovolj podobno.

Vendar bomo v tem priročniku uporabili eno od predlogov do Začnite Bootstrap. Imajo lepo izbiro brezplačnih predlog, ki so optimizirane, delujejo brez težav in so tudi zelo dobro zasnovane.

Tema, ki jo bomo uporabljali, se imenuje Ustvarjalni. Končni učinek, ki ga bomo šli, bo izgledal nekako takole:

končna domača stran po izdelavi spletnega mesta s HTML in CSS

Za začetek predlogo Creative, kliknite na Brezplačen prenos gumb, ki je na desni (vklopljeno) ta stran) in shranite paket zip na namizje.

Odpakirajte paket in ga premaknite v glavni imenik lokalnega spletnega strežnika ali na račun spletnega gostovanja.

Zdaj odprite to lokacijo prek spletnega brskalnika. Videli boste različico zaloge predloge:

začnite predlogo za zagon

To je že zelo dobro videti, zdaj pa je čas, da se naučite, kako uporabljati HTML in CSS, da bosta postala natanko takšna, kot si želite..

7. Prilagodite svoje spletno mesto s HTML in CSS

Najprej pojdimo na domačo stran zasnove. To nam bo pokazalo, kako nadomestiti grafiko, besedila in prilagoditi vse na splošno.

Na kratko smo govorili o glavnem delu dokumenta HTML. Poglejmo tukaj podrobneje.

Ko odprete index.html datoteka vašega spletnega mesta Bootstrap v Sublime Text, bo prikazan takšen razdelek glave (iz te kode smo za jasnost odstranili vse nepomembne stvari *):






Ustvarjalno - Zaženite zagonsko temo





* Poleg zgoraj naštetega so bili na voljo tudi koda za nalaganje Googlovih pisav, ikone pisave Super in modul svetlobne plošče za slike, prikazane na strani.

Večino deklaracij tukaj že poznamo, obstaja pa nekaj novih:

  • Najprej vse med oklepaji je komentar HTML. Ne prikazuje se na končni strani.
  • – je ena od lastnih deklaracijskih oznak Bootstrap. Določa velikost ogledanega mesta spletnega mesta.
  • – ta vrstica naloži tabelo stilov CSS predloge Creative in vsebuje tudi privzeto tabelo stilov Bootstrap.

Spremenimo to zadnjo izjavo – vrstico, ki nalaga CSS -, da bomo kasneje lažje delali.

Spremenite to vrstico v:


To je le majhna razlika – naložila bo neskrajšano različico istega lista CSS. To različico je preprosto lažje spremeniti.

Zdaj se pomaknite navzdol do samega dna index.html mapa. Naslednje vrstice boste videli tik pred zaključkom telo oznaka:

        

Odgovorni so za nalaganje datotek JavaScript, ki obravnavajo nekatere bolj vizualne interakcije zasnove. Na primer, ko kliknete na O tem Povezava v zgornjem meniju vas bo nemoteno preusmerila do bloka približno na isti strani – to med drugim poteka prek JavaScript. Zdaj nam ni treba delati težav z razumevanjem te kode. Pustimo to še kdaj.

Namesto tega delajmo na dodajanju lastne vsebine na stran:

8. Dodajte vsebino in slike

Prvo, kar boste želeli narediti, je sprememba naslova strani.

1. Spremenite naslov

Poišči naslov označite v razdelku glave in besedilo med oznakami zamenjajte za nekaj po svoje:

Moje spletno mesto HTML

2. Prilagodite razdelek Hero

Oddelek o junakih je tisto, čemur pravimo ta blok:

oddelek za junake

Kul bi bilo, če bi imeli v sebi svojo vsebino. Če želite spremeniti ta blok, se vrnite na svoj index.html datoteko in poiščite ta razdelek:

...


...

Izvedi več

Celoten blok kode nadzoruje, kaj je v poglavju heroj.

Tu je nekaj novih oznak:


  • – to je oznaka, ki določa, da je celoten odsek naslov strani; ta oznaka ima nekaj bratov in sester v obliki
    oznaka in
    oznaka
  • – je splošna oznaka CSS, ki označuje, da je v nadaljevanju ločen razdelek (aka delitev) v dokumentu HTML; z njegovo uporabo je lažje razlikovati posamezne odseke na strani

Opazili boste tudi, da so nekatere druge oznake (ki jih že poznamo) videti nekoliko bolj zapletene, saj jim je dodeljenih več razredov CSS. Na primer:

...

Razredi, dodeljeni

oznaka je tukaj Besedilo z velikimi črkami-belo, pisavo-krepko pisavo.

Te razrede je ustvaril Bootstrap in razvijalec Creative teme. Dobra novica je, da jih tudi vi lahko prosto uporabljate pri ustvarjanju spletnega mesta s HTML in CSS.

Iskreno odkrito, lahko poljubno oznako, ki jo dodate v strukturo strani, prilagodite tako, da ji dodelite poljubno število razredov.

Če želite videti celoten seznam razpoložljivih razredov, lahko odprete glavnega kreativni.css datoteko, ki je v css podimenik ustvarjalne teme.

Razumevanje vseh teh razredov se lahko na začetku zdi zastrašujoče, vendar je v resnici precej lažje, kot je videti.

Na primer, eden od razredov, dodeljen nekaterim odstavkom v našem index.html datoteka je pisava-teža-lahka. Ko skočite v kreativni.css datoteko in ctrl + f če iščete ime tega razreda, boste videli, da preprosto nastavi pisava takšen parameter:

.pisava-teža-svetloba {
teža pisave: 300;
}

Spreminjanje privzetih besedil v index.html datoteka je zelo preprosta. Samo poiščite oznako, ki jo želite urediti, in spremenite, kaj je med začetnimi in zaključnimi oznakami.

Na primer, če želite spremeniti glavni naslov, samo spremenite to:

Vaša najljubša ...

Na nekaj takega:

Občudujem moje spletno mesto HTML!

Enako lahko storite z vsemi odstavki in drugimi oznakami na strani.

Pomembno je, da lahko prosto dodajate tudi nove odstavke. Na primer, lahko vzamemo odstavek, ki je že na strani, ga naredimo kopijo in ga prilepimo pod izvirnik; tako:

Start Bootstrap lahko ...

Odstavek 2

Z besedami, za katera smo poskrbeli, zamenjajmo sliko v ozadju.

To je nekoliko bolj zapleteno storiti, saj od nas zahteva, da gremo v datoteko tabel sloga CSS in tam spremenimo. Kot lahko vidite v kodi HTML za Masthead V nobenem primeru ne bo nobena oznaka vključevala sliko na stran. Vse to poteka prek CSS-ja.

Ko še enkrat pogledate celoten sklop ravnanja s kodo Masthead Videli boste, da je dodeljen razredu, ki se imenuje masthead. Ta vrstica kode obravnava dodelitev razreda:

The masthead razred je tisti, ki postavi sliko v ozadje celotnega bloka.

Odprimo kreativni.css znova datoteko in poiščite razred “masthead”:

header.masthead {
oblazinjeni vrh: 10rem;
oblazinjenje: calc (10rem - 72px);
ozadje: linearni gradient (na dno, rgba (92, 77, 66, 0,8) 0%, rgba (92, 77, 66, 0,8) 100%), url ("../ img / bg-masthead.jpg" );
ozadje-položaj: sredina;
ozadje-ponovite: brez ponovitve;
priloga v ozadju: pomikanje;
velikost ozadja: platnica;
}

Ta koda na našo sliko naredi vse vrste domišljijskih stvari (na primer dodajanje prekrivanja, senčenja itd.), Vendar je pomemben del: url ("../ img / bg-masthead.jpg"). To je vrstica, ki kaže, kje najti sliko ozadja. To bo v img poddirektor.

Če želite spremeniti to sliko v ozadju, vzemite katero koli svojo sliko, jo kopirajte v img podimenik, nato pa kopirajte in prilepite njegovo ime namesto izvirnika bg-masthead.jpg mapa. Skratka, spremenite to: url ("../ img / bg-masthead.jpg") za to: url ("../ img / YOURFILE.jpg").

3. Prilagodite ostale bloke na strani

Ko greš skozi index.html datoteke, opazili boste, da je na strani že veliko različnih razdelkov. Za oddelek imamo oddelek navigacija, in približno blok, nekaj storitve, a portfelj, a poziv k dejanju, a stik blok in a noga.

Čeprav je v vseh teh razdelkih različna vsebina, so sami odseki po strukturi podobni. Vsi imajo približno enak nabor oznak HTML – le različni razredi CSS, ki so jim bili dodeljeni.

Najboljši način, da stran spremenite tako, da ustreza vašim potrebam, je, da grete skozi bloke drug za drugim in eksperimentirate s spreminjanjem stvari.

Poleg spreminjanja besedil lahko premikate tudi cele odseke naokoli (dele med

oznake). Pod pogojem, to morate storiti ročno (z rezanjem in lepljenjem elementov na svoje mesto), še vedno je enostavno..

Glede na to sta dve povsem osnovni modifikaciji, o katerih še nismo govorili. Poglejmo naslednje:

9. Fine-Tune Barve in pisave

Spreminjanje barv ali pisav je v HTML in CSS zelo enostavno. Najpreprostejša stvar je, da oznaki HTML dodelite nekaj linijskega stila. Na primer:

Rdeče besedilo

V HTML-ju so barve predstavljene s šestkotnimi vrednostmi; “# FF0000” je rdeče barve. Tukaj je tabela vseh ostalih standardne barve.

Boljši način za dodelitev barv je, da to storite preko tabele stilov CSS. Na primer, da dobimo enak učinek kot zgornja koda, lahko to vstavimo v naš preglednik stilov CSS:

p.red {
barva: # FF0000;
}

Nato uporabite glavni del kode HTML v glavnem dokumentu:

Rdeče besedilo

Druga metoda je v bistvu, kako se stvari izvajajo v Bootstrapu.

Če želite spremeniti barvo katerega koli besedila na strani, najprej poiščite oznako, ki je odgovorna za oblikovanje tega besedila, nato pa pojdite v tabelo slogi in spremenite ustrezni razred ali ustvarite nov razred.

Tu je primer; recimo, da želite spremeniti barvo glave z besedami “Pri vaši storitvi.” Trenutno je črna in s tem ravna koda:

Vam na voljo

Če želite spremeniti svojo barvo, je najboljši način ustvariti nov razred, imenovan recimo, .besedilo oranžno in tam nastavite vrednost barve, tako:

.oranžno besedilo {
barva: # f4623a! pomembno;
}

* The !pomembno bo poskrbel, da bo ta barvna nastavitev prepisala vse druge barvne nastavitve, ki so bile pred njo.

Zdaj se lahko vrnemo v svojo glavo in spremenimo njeno kodo v:

Vam na voljo

S temi spremembami bo naslov zdaj oranžen:

oranžna h2

Če želite spremeniti pisavo in njeno velikost, lahko naredite nekaj zelo podobnega. Najprej primer, kako izgleda blok za določanje pisave v CSS:

.SOMECLASS {
družina pisav: "Merriweather", Roboto, sans-serif;
velikost pisave: 18px;
}
  • naloži pisave Merriweather, Roboto, in sistemski privzeti sans-serif pisave (preberite to, če želite izvedeti več o spletnih varnih pisavah)
  • nastavite velikost pisave na 18 pik

Tovrstno definicijo lahko umestite v kateri koli razred CSS, tako kot definicijo barv. Definicije pisav in barv pogosto najdemo v deklaracijah istega razreda.

Če se vrnemo na prejšnji primer, da spremenimo velikost pisave za tisto glavo, ki piše “Pri vaši storitvi”, bi lahko najprej ustvarili takšen razred:

.text-xxl {
velikost pisave: 50px;
}

In temu razredu dodelite glavo:

Vam na voljo

�� Ko spreminjate barve ali pisave v predlogi, izdelani v programu Bootstrap, najprej poglejte v tabelo stilov CSS za razrede, ki vam morda že ponujajo alternativne velikosti ali barve. Uporabite tiste, kjer so na voljo.

10. Ustvarite dodatne strani

Zdaj, ko ste domačo stran prilagodili, je čas, da začnete delati na nekaterih dodatnih straneh in jih nato povezati do domače strani.

Pri ustvarjanju spletnega mesta z HTML in CSS lahko sestavite poljubno število podstrani in jih nato povežete.

Tu je nekaj skupnih strani, ki jih večina spletnih mest potrebuje:

  • o strani
  • stik
  • portfelj
  • izdelki / storitve
  • ekipa
  • politike (politika zasebnosti, pogoji itd.)

1. Začnite s postavitvijo

Pri izdelavi nove spletne strani je prva odločitev, ki jo želite narediti.

Pri ustvarjanju spletnega mesta z HTML in CSS vas nič ne ustavi pri obrtu karkoli postavitev, ki jo želite. Edina težava je pravzaprav to, da jo sestavimo skupaj.

HTML in CSS je težko obravnavati, ko začnete s praznega zaslona, ​​zato bomo tukaj uporabljali tudi Bootstrap. Najprej vam bomo pokazali nekaj načel izdelave postavitve in nato pokazali, kako to storiti z Bootstrapom.

Način, kako si lahko zamislite postavitev svoje spletne strani, je, da jo upoštevate kot zaporedje posameznih blokov – enega na drugem. Nekaj ​​takega (opazite štiri različne sklope):

postavitev pri ustvarjanju spletnega mesta s HTML in CSS

Odlična stvar programa Bootstrap je, da ta obravnava osnovna načela postavitve in podrobnosti o videzu, tako da se lahko osredotočite na to, da te bloke postavite na prava mesta.

V tem razdelku vodnika bomo ustvarili novo stran »približno«.

Za začetek bomo ustvarili le zelo osnovni projekt postavitve. Nekaj ​​takega kot zgoraj.

  • na vrhu je navigacijski meni,
  • blok naslova celotne širine pod menijem,
  • glavni del vsebine na sredini, v sredini zaslona (ne polne širine),
  • in noga.

Zdaj pa zgradimo to postavitev v HTML-ju.

2. Zgradite novo stran

Najlažji način za začetek dela na novi strani je podvajanje obstoječe strani in uporaba kot predloga. To bomo storili.

Ustvari kopijo index.html datoteko in jo preimenovati about.html.

Samo za lažje razlikovanje strani v tej zgodnji fazi uredite novo about.html datoteko in spremenite, kaj je v </code> oznaka. Na primer, <code><title>O meni.

Zdaj pojdimo skozi datoteko po vrstico in se odločimo, kaj bomo pustili in kaj bomo odstranili:

  • The navigacija meni (spodaj) ). Verjetno želite ta razdelek ohraniti nedotaknjen, samo zato, da bo navigacijska izkušnja na vseh straneh enotna.
  • The glavni junak oddelek (spodaj) ). Tega ne bomo potrebovali glede na naš projekt postavitve. Lahko nadaljujete in izbrišete celoten odsek.
  • The približno oddelek (spodaj) ). Ta razdelek bomo ponovno uporabili kot naš glavni naslov.
  • The storitve odsek, portfelj odsek, poziv k dejanju odsek in stik odsek (vse med in ). Teh oddelkov sploh ne potrebujemo. Lahko greš naprej in jih izbrišeš.
  • The noga odsek in vse pod njim (spodaj) ). To bomo morali obdržati.

Zaradi tega je naša trenutna koda precej preprosta. V bistvu je samo to:



























Manjka nam tukaj stvar glavna vsebina odsek. Če ga želite sestaviti, bomo ponovno uporabili približno razdelek.

Pojdite naprej in naredite kopijo razdelka o približno. Tale:

...


...

Sedaj spremenite prvi dve vrstici k temu:

Ker tega ne potrebujemo

glavo tam in

element, odstranimo jih. Edino, kar je ostalo v tem celotnem bloku, je odstavek besedila. Takole:

Odstavek besedila.

Ko shranite datoteko in jo poiščete prek brskalnika, boste videli, da imate v bistvu dva zelo podobna bloka drug pod drugim z istim barvnim ozadjem:

o glavi strani

Bolje je imeti belo ozadje v glavnem razdelku z vsebino. Če ga želite spremeniti, moramo samo odstraniti bg-primarni razred iz glavnega

oznaka. Z drugimi besedami, vstavite oznako v to:

To je bolje:

o strani strani 2

Na stran dodajmo nekaj navideznih odstavkov, da jo še malo napolnimo, in morda podnaslov:

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

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

Podnaslov

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

Evo, kako to izgleda na strani:

o ver 1

Če vam ni všeč, da je besedilo v središču, ga preprosto odstranite besedilno središče razreda enega od

oznake.

o ver 2

Če želite na te bloke besedila dodati nekaj občutka, lahko ustvarite nove razrede CSS (kot prej) in jih dodelite odstavkom v bloku. Lahko pa pokukate v trenutno tabelo slogov in si ogledate, kateri razredi so že v ta namen. Tu je seznam, ki smo ga dodelili

in

oznake:

Lorem ipsum dolor sit amet...

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

Podnaslov

In tu je učinek:

o ver 3

Še nekaj, kar bomo storili tukaj, je dodajanje slike nekje na strani.

Evo, kako izgleda primer slikovne oznake v HTML-ju:


Dokaj preprosto, kajne? Edini parameter je pot do slikovne datoteke. Da bodo stvari lepo urejene, lahko svojo sliko postavite v img znova imenik (tako kot pred časom). V takem primeru bo slikovna oznaka:


Glede na to je slikovna oznaka v tej določeni konfiguraciji dokaj omejena. Da bo nekoliko bolj izpopolnjen, mu dodelimo nekaj razredov Bootstrap. Zlasti:


Ta dva razreda bosta vaši sliki dala zaobljene vogale in tudi zagotovila, da velikost slike ne presega velikosti bloka, v katerem sedi.

Zdaj lahko takšno oznako dodate nekje v razdelek z vsebino strani o vaši strani. Na primer tukaj:

Lorem ipsum dolor sit amet...

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

Podnaslov

In tu je končni učinek na strani:

o ver 4

Tukaj je naša stran o vsem v svojem sijaju:

o strani popolna

3. Povezava do nove strani

Z dokončano novo stranjo jo povežemo z domače strani ( index.html mapa). Seveda je najboljše mesto za dodajanje te povezave v navigacijski meni (spodaj) ).

Poglejte predvsem to vrstico:

O tem

To bomo spremenili v to:

O tem

O tem še nismo govorili, toda tag je oznaka povezave v HTML. Z njim se lahko povežete s katero koli spletno stranjo tako, da v naslovu navedete njen naslov href parameter. Besedilo povezave – del, na katerega je mogoče klikniti – bo besedilo med odprtjem in zaključkom oznake.

Ko zdaj osvežite domačo stran, boste videli novo povezavo, ki kaže na približno stran.

Nadaljnje branje:

Na tej stopnji ste si v bistvu ustvarili preprosto spletno mesto, sestavljeno iz dveh strani – a domača stran in an približno stran.

Zdaj izperite in ponovite tako, da ustvarite nove strani, jih prilagodite, dodate vsebino in nato povežete vse iz navigacijskega menija..

Druge stvari, ki jih je vredno izvesti med tem korakom, je nadaljnje učenje načel HTML in CSS, prehod skozi kontrolni seznam in tudi učenje Bootstrapa ter njegovih struktur in razredov. Nekaj ​​virov za to:

  • Goljufija HTML5
  • CSS varalica
  • Javat varalica
  • Vadnica za HTML
  • Vadnica za zagonsko pot
  • Cheot sheet Bootstrap

Obvladovanje Bootstrapa, zelo verjetno najboljša trenutno dostopna pot za izdelavo optimiziranih in lepih spletnih mest s HTML in CSS.

Če imate kakršna koli vprašanja o ustvarjanju spletnega mesta s HTML in CSS, jih ne odlašajte in jih pošljite v komentarje.

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

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