Naredite si prilagojeno, minimalistično začetno stran!: 10 korakov

2024 Avtor: John Day | [email protected]. Nazadnje spremenjeno: 2024-01-30 12:02

Ali ste morali preiti na delo na daljavo, odkar je bolezen COVID-19 postala stvar? Enako!

Delo od doma z računalniki in po internetu pogosto pomeni, da moramo spremljati veliko spletnih mest za delo, šolo ali celo … za zabavo!

Zaznamki niso vedno kos nalogi, kaj pa, če bi si ustvarili prilagojeno začetno stran, prilagojeno samo vam, z vsemi potrebnimi povezavami, ki se odprejo v vašem spletnem brskalniku vsakič, ko jo potrebujete?

Tukaj boste potrebovali:

• Računalnik (naš ima operacijski sistem Windows, vendar bo to naredil vsak sodoben računalnik).
• Povezava z internetom.
• Sveža namestitev urejevalnika besedil Notepad ++.

Ko boste pripravljeni, začnimo z uporabo lastne predloge za začetno stran … Ali pa ustvarite svojo iz nič!

1. korak: Ustvarite začetno stran ALI prenesite našo prilagojeno predlogo

Na tej točki imate dve možnosti:

1. Prenesite našo prilagojeno predlogo (navodila sledijo kasneje v tem koraku) ali,
2. Sledite temu osnovnemu priročniku za začetno stran; korak za korakom vas bo vodil skozi gradnike preproste začetne strani - in to je vodnik, ki smo mu sledili pri izdelavi te začetne strani po meri!

Zakaj priporočati vadnico … v vadnici? Naše delo moderatorjev MakerSpacea ni le, da vam pokažemo, kako se stvari izvaja, ampak tudi, da vas poveže s kulturo in viri, ki so na voljo tam. Ta priročnik je eno od mest, kjer začnejo številni oblikovalci začetnikov, zato ga je smiselno deliti z vami!

Če imate čas, nadaljujte z možnostjo 2, če pa nimate, se lahko pozneje vedno obrnete na osnovni vodič za začetno stran! Za to vadnico bomo samo domnevali, da prenašate našo predlogo po meri! Če ga želite prenesti:

1. Odprite naše skladišče DIY_startpage na Githubu.
2. Kliknite na velik zeleni gumb Koda, da odprete spustni meni.
3. Kliknite Prenesi ZIP, če želite prenesti vse datoteke za projekt.
4. Izvlecite vse datoteke iz datoteke ZIP, ki ste jo pravkar prenesli, na izbrano mesto.

GitHub je spletno mesto, na katerem programerji in oblikovalci po vsem svetu delijo svojo kodo in kreacije z drugimi: omogoča vam tudi sodelovanje z drugimi pri vseh vrstah projektov. Na koncu je, da je to odlično orodje, ki bi ga moral poznati vsak izdelovalec!

Zdaj zaženite izbran brskalnik: zelo mi je všeč Firefox, vendar bi morala naša predloga delovati na skoraj vsakem novejšem spletnem brskalniku, zato lahko uporabite Edge, Chrome ali Safari!

Nazadnje odprite datoteko "DIY_startpage.html" v brskalniku IN v Notepadu ++ in začnimo jo prilagajati!

2. korak: Navedite svoje priljubljene

Začetna stran je super. Koristna začetna stran je še boljša in trenutno je naša videti nekoliko prazna!

Katere stvari redno preverjate in jih morate spremljati? Katere spletne stripe berete zjutraj? Katero spletno mesto z novicami najraje preverite? To so stvari, ki bi morale priti na vašo začetno stran.

Za to vadnico bom uporabil nekaj svojih najljubših. Opozorilo o spojlerju, veliko povezav iz knjižnice! Toda tudi nekaj mojih najljubših ustvarjalcev za navdih in nekaj moje najljubše zabave. Vse te elemente najdete spodaj s povezavo, kot primer!

Novice in branje

• Digitalni časopisi
• Digitalne knjige
• Digitalne revije

Učenje

• Šole W3C
• Udemy
• Mango jeziki

Glasba

• Poslušajte lokalno
• Raziskovalec pesmi
• Glasbeni radijski sprejemniki Jamendo

Ustvarjalna kultura

• Jedro77
• Lumecluster
• Melapropizmi

Za vsako kategorijo sem izbral tri svoje najljubše, vendar bi morali brez težav izbrati več ali manj - postavitev vaše začetne strani se bo samodejno prilagodila številu ali virom!

Ko naštete vse svoje priljubljene, jih za minuto odstavimo in se potrudimo, da bo naša splošna predloga začetne strani nekoliko bolj za vas.

3. korak: prilagodite pisavo

Zaženite Notepad ++, kliknite Datoteka> Odpri, da odprete datoteko »DIY_startpage.html«. Kar gledate, se zelo razlikuje od strani v vašem brskalniku, kajne? To je koda vaše strani, brskalniki pa to kodo razlagajo tako, da je videti nekoliko bolj prijazna do oči in narediti vse, kar potrebujemo.

Koda za naš projekt začetne strani je napisana v dveh povezanih jezikih: HTML in CSS. HTML je običajno zadolžen za vsebino strani, CSS pa za videz strani.

Če želite prilagoditi svojo začetno stran, poiščite ta prvi razdelek:

html {

align-items: center; barva: #313131; zaslon: flex; pisava: 22px "Courier New", Courier, enoprostor; višina: 100%; justify-content: center; rob: 0; }

Ta del naše začetne strani se osredotoča na splošen videz elementov na naši strani. Linija:

pisava: 22px "Courier New", Courier, enoprostor;

gre predvsem za pisavo, ki jo uporabljamo na začetni strani, in ima dva parametra, ki določata, kako bo besedilo na vaši strani videti: velikost in družina pisav.

• velikost - to je tisto "22px". Velikost vašega besedila na zaslonu je določena v "px", kratki za slikovne pike.
• družina pisav - Tu naštejemo pisave, ki bi jih radi uporabili. Običajno je dobro navesti več, od pisave, ki jo resnično želite uporabiti do najbolj splošne družine. Te pisave se opirajo na brskalnik, ki ga uporabljate, zato, če najbolj poseben ni na voljo, bo brskalnik poskusil naslednjega itd.

Stran CSS Web Safe Fonts iz w3schools ima odličen seznam kombinacij pisav, ki izgledajo odlično, držijo se sloga, ki ga iščete, in bodo delovale v večini sodobnih brskalnikov.

Na primer, lahko zamenjate:

"Courier New", Courier, monospace;

z:

"Palatino Linotype", "Book Antiqua", Palatino, serif;

ali:

"Comic Sans MS", kurziv, brez serifov;

Shranite datoteko in osvežite stran v brskalniku, da si ogledate spremembe! Vam ni všeč? Ni problema! Igrajte se s spletnimi varnimi pisavami CSS, dokler ne najdete kombinacije, ki vam je všeč.

4. korak: prilagodite naslovno ponudbo

V datoteki HTML poiščite ta razdelek:

To je vaša začetna stran! Uživajte

Izberite ponudbo, ki vam je všeč, in zamenjajte kodo! Za svoje sem izbral

Še enkrat o kršitvi

Postavitev vaše začetne strani bi se morala prilagoditi vaši ponudbi, takoj ko znova naložite stran v brskalnik: v Firefoxu to pomeni, da pritisnete CTRL+R na tipkovnici ali kliknete ikono za ponovno nalaganje. Izberite ponudbo, ki vam je zdaj všeč (ali izberite kaj kasneje!), In začnimo s prilagajanjem razdelkov vaše začetne strani!

5. korak: prilagodite svoje odseke

Zdaj, ko ste našli kombinacijo pisav, ki vam je všeč, in imate odlično ponudbo, ki vas navdihuje, nadaljujmo in prilagodimo vaše razdelke.

Če ste našo začetno stran prenesli iz Github -a, imate na voljo 6 razdelkov za prilagajanje: prvotni vodnik ima samo 4, a ker se je v zadnjem času vse več vidikov našega življenja preselilo na splet, sem za vsak slučaj nadaljeval.

Poiščite prvi razdelek in vnesite samo tisto, kar potrebujemo. Naj vas spomnim, da je moj prvi razdelek »Novice in branje«:

Ko je datoteka še odprta v Notepadu ++, poiščite naslednjo vrstico kode:

Oddelek 1

in ga nadomestite s kategorijo na svojem seznamu, za katero mislite, da jo boste največ uporabljali.

Ker smo mnogi navajeni, da začnemo brati dokumente od zgoraj levo, bi tja lahko naravnost šle vaše oči - zato to izkoristite in obdržite naš najpomembnejši naslov! Če pa prihajate iz kulture z drugačno smerjo branja ali če samo delate drugače, si to prilagodite. Konec koncev je to vaša začetna stran: veste, kaj je za vas najboljše!

En naslov naslova navzdol, še pet! Poiščite vrstico kode, ki pravi:

Oddelek 2

Spremenite ga, nato pa še naprej iščite naslove razdelkov in jih spreminjajte, dokler ne pridete do konca seznama. Če ne uporabljate vseh razdelkov, jih pustite pri miru! Na koncu te vadnice bomo tudi nekoliko očistili.

Ko končate s prilagajanjem razdelkov, shranite spremembe v Notepad ++ in znova naložite stran v brskalnik. Vsi naslovi razdelkov bi morali biti prikazani tam, kjer ste jih postavili: zdaj lahko prilagodimo povezave v vsakem razdelku!

6. korak: Prilagodite svoje povezave

Prilagajanje povezav v vsakem razdelku je nekoliko bolj zapleteno, vsekakor pa ni veliko težje!

Tokrat ne spreminjamo samo imena povezav, spreminjamo tudi, kaj lahko storite z njimi! Vsak element v vsakem razdelku bo postal klikan, povezava do drugega spletnega mesta. Bonus, lahko se tudi odločite, ali želite, da se odpre v novem oknu ali ne!

Najprej poiščite vrstico, ki izgleda tako:

link_one_name

Izberite ta bit "link_one_name" in ga nadomestite z lastnim besedilom. Na primer, prva povezava v prvem razdelku, ki temelji na mojem seznamu iz koraka X, je "Digitalni časopisi", tako da dobimo:

Digitalni časopisi

Nato se lotimo prilagajanja povezave! Zamenjajte bit "link.one" s svojo prvo povezavo. Zame bo to povezava do naših digitalnih časopisov, zato bo videti tako:

Digitalni časopisi

Shranite svoje delo v urejevalnik besedil in znova naložite stran v brskalnik

Zdaj bi morali klikniti prvo povezavo, ki ste jo prilagodili. Če ni šlo, je v redu! Začnite znova ali sledite korakom, dokler se povezava ne odpre, ko jo kliknete.

Ko prva povezava začne delovati … No, vse, kar morate storiti, je, da ponovite te korake za vsako povezavo v vsakem razdelku, dokler ne prilagodite vseh imen in povezav na začetni strani! Obstaja samo en ulov: ko kliknete povezavo, vaša začetna stran izgine, ko se nova povezava odpre na istem zavihku ali oknu.

Ni zelo priročno … Kako bi bilo torej spremeniti način odpiranja povezav? Za primer uporabimo našo prvo povezavo! Verjetno se spomnite, da brskalniku povemo, da odpre povezavo, ko kliknete nanj:

Digitalni časopisi

Ampak uganite kaj - tudi tam se odločimo, kako se bo povezava odprla! Spremenite ga v:

Digitalni časopisi

Zdaj shranite svoje delo in znova naložite stran v brskalniku: povezava se bo zdaj odprla na novem zavihku, ko jo kliknete! Tako lahko svojo začetno stran odprete, ko jo potrebujete.

7. korak: Dodajte sliko na svojo začetno stran

Zdaj, ko so vse naše povezave nastavljene, je čas, da okrasimo našo začetno stran! Ta predloga ima prostor za sliko po meri na desni strani zaslona. Zdaj nazaj v Notepad ++ poiščite to vrstico:

vse do konca predloge. Izberite sliko, ki vam je všeč, jo premaknite v isto mapo kot datoteka začetne strani in "library_picture.jpg" zamenjajte z imenom datoteke vaše slike. Na primer, če je ime moje datoteke "your_picture.jpg" vrstica postane:

Shranite spremembe in znova naložite začetno stran v brskalniku.

Ker sta koda vaše začetne strani in datoteke s slikami v isti mapi, se mora slika samodejno naložiti, ko osvežite stran. Če ni, preverite ime svoje datoteke - ponavadi se motim!

Ozadja za pametne telefone se odlično prilegajo temu projektu. Na splošno je katera koli navpična slika (ali kot pravijo ljudje "portretno usmerjena slika" z razmerjem 16: 9)! Toda postavitev naše začetne strani se bo prilagodila, ne glede na to, kaj nanjo vržete.

Če se prikaže vaša slika, čestitke, skoraj ste končali!

8. korak: Malo očistite

Če imate na tem mestu dodatne razdelke, jih izbrišite! Recimo, da ne uporabljate oddelka 6. Poiščite:

• Oddelek 6
• Postavka 1
• 2. točka
• Točka 3

Izberite in izbrišite te vrstice, shranite datoteko in osvežite datoteko v brskalniku, da se prepričate, da je vse izginilo.

To je ponavadi korak, kjer vse prekinem, ker grem prehitro, zato, če kaj nenadoma ne deluje, se spomnite: globoko vdihnite in razveljavite, kar ste pravkar naredili s kombinacijo tipk CTRL+Z na tipkovnici!

9. korak: Ustvarjanje dejanske začetne strani

Zdaj, ko začetna stran odpre vse povezave, ki jih želimo, in izgleda tako, kot si želimo, je čas, da se odpre, ko zaženete brskalnik!

Na tej točki mi je všeč, da je vse, kar je daleč stran od namizja mojih računalnikov, tako da svojo mapo začetne strani izreže in prilepi v mapo Dokumenti sistema Windows. Torej, če ste končali z delom na svoji začetni strani, to storite!

Naprej: najverjetneje se brskalnik odpre z vašim najljubšim iskalnikom ali morda celo prazno stranjo.

Navodila za prilagoditev Firefoxa in drugih brskalnikov najdete spodaj:

• Navodila za Firefox
• Navodila za Google Chrome
• Navodila za Safari
• Navodila za Microsoft Edge

Ko sledite navodilom za brskalnik, vse zaprite in znova odprite. Če se vaša začetna stran prikaže ob zagonu brskalnika, ste uspeli!

Če se to ni zgodilo, znova preglejte navodila za brskalnik in se prepričajte, da niste ničesar zamudili. Najslabše je, nato znova zaženite računalnik, potem ko shranite vse svoje delo. 9 krat od 10, to reši vse!

10. korak: Vse končano! In, bi radi izvedeli več?

Čestitamo za dokončanje začetne strani! Morda ne bo videti veliko, vendar ste se pravkar naučili kodirati enega najpomembnejših gradnikov spletnega mesta, tako kot sem jaz … Pred približno 20 leti!

Če ste uživali v tem in bi radi izvedeli več o začetnih straneh, je to globoka zajčja luknja! Tu je majhen izbor, ki vam bo pomagal na poti na začetno stran:

• Ste poskusili osnovni vodič za začetno stran? Dobra novica, od kod prihaja še več! Za več navdiha in naprednih funkcij si oglejte druge vodnike po / stpg /!
• Knjige o HTML in CSS si oglejte v knjižnici knjižnice Johnson County Library - s knjižnično kartico ali e -kartico pa imate dostop tudi do e -knjig!
• Vaša knjižnična kartica omogoča tudi dostop do Udemyja in ima tudi nekaj zelo popolnih razredov o HTML, CSS in spletnem oblikovanju.

Če ste zelo ponosni na svojo stvaritev, zakaj je ne posnamete in ne delite z nami prek Twitterja ali Instagrama s hashtagom #jocomakes? Vedno smo veseli, ko vidimo, kaj si naši pokrovitelji izmislijo!