Napravite sebi prilagođenu, minimalističku početnu stranicu!: 10 koraka

2024 Autor: John Day | [email protected]. Zadnja promjena: 2024-01-30 09:32

Jeste li morali preći na uglavnom posao na daljinu otkad je COVID-19 postao stvar? Isti!

Rad od kuće s računalima i putem Interneta često znači da moramo pratiti mnogo web stranica za posao, školu ili čak … za zabavu!

Oznake nisu uvijek na visini zadatka, pa kako bi bilo da si napravimo prilagođenu početnu stranicu prilagođenu samo vama, sa svim potrebnim vezama, koja se otvara u vašem web pregledniku svaki put kad vam zatreba?

Evo što će vam trebati:

• Računalo (na našem je sustav Windows, ali bilo koje moderno računalo će to učiniti).
• Veza s internetom.
• Svježa instalacija uređivača teksta Notepad ++.

Kad budete spremni, započnimo s korištenjem vlastitog predloška početne stranice … Ili stvaranjem vlastitog od nule!

Korak 1: Izradite početnu stranicu ILI preuzmite naš prilagođeni predložak

U ovom trenutku imate dvije mogućnosti:

1. Preuzmite naš prilagođeni predložak (upute slijede malo kasnije u ovom koraku) ili,
2. Slijedite ovaj osnovni vodič za početnu stranicu; provest će vas korak po korak kroz gradivne elemente jednostavne početne stranice - i to je vodič koji smo slijedili za izradu ove prilagođene početne stranice!

Zašto preporučiti tutorial … u tutorialu? Naš posao kao facilitatora MakerSpacea nije samo da vam pokažemo kako se radi: već i da vas poveže s Maker kulturom i resursima koji su tamo dostupni. Ovaj vodič jedno je od mjesta na kojem počinju mnogi dizajneri početnih stranica pa ga je imalo smisla podijeliti s vama!

Ako imate vremena, nastavite s opcijom #2, ali ako nemate, uvijek se kasnije možete obratiti osnovnom vodiču za početnu stranicu! Za ovaj vodič ćemo samo pretpostaviti da preuzimate naš prilagođeni predložak! Da biste ga preuzeli:

1. Otvorite naše spremište DIY_startpage na Githubu.
2. Pritisnite veliki zeleni gumb za otvaranje padajućeg izbornika.
3. Pritisnite Preuzmi ZIP za preuzimanje svih datoteka projekta.
4. Izvucite sve datoteke iz ZIP datoteke koju ste upravo preuzeli na mjesto po vašem izboru.

GitHub je web stranica na kojoj programeri i dizajneri diljem svijeta dijele svoj kôd i kreacije s drugima: također vam omogućuje suradnju s drugima na projektima svih vrsta. Zaključak je da je to izvrstan alat koji bi svaki proizvođač trebao znati!

Sada pokrenite svoj preglednik po izboru: jako mi se sviđa Firefox, ali naš bi predložak trebao raditi na gotovo svim novijim web preglednicima pa slobodno upotrijebite Edge, Chrome ili Safari!

Na kraju, otvorite datoteku "DIY_startpage.html" u svom pregledniku I u Notepadu ++, i počnimo je prilagođavati!

Korak 2: Navedite svoje favorite

Imati početnu stranicu je super. Imati korisnu početnu stranicu još je bolje i trenutno naša izgleda pomalo prazno!

Koje stvari redovito provjeravate i morate pratiti? Koje web -stripove čitate ujutro? Koju web stranicu s vijestima volite provjeravati? Ovo su stvari koje bi trebale pasti na vašu početnu stranicu.

Za ovaj vodič upotrijebit ću samo neke od svojih omiljenih. Upozorenje o spojleru, puno linkova iz knjižnice! Ali i neki od mojih omiljenih Tvorca za inspiraciju, a neki i od moje omiljene zabave. Sve ove stavke možete pronaći ispod s vezom, kao primjer!

Vijesti i čitanje

• Digitalne novine
• Digitalne knjige
• Digitalni časopisi

Učenje

• W3C škole
• Udemy
• Jezici manga

glazba, muzika

• Slušajte lokalno
• Eksploder pjesama
• Jamendo glazbeni radio

Proizvođač kulture

• Jezgra77
• Lumecluster
• Melapropizmi

Odabrao sam tri svoje favorite za svaku kategoriju, ali trebali biste moći izabrati više ili manje od toga bez problema - izgled vaše početne stranice automatski će se prilagoditi broju ili resursima!

Nakon što na popisu ostavite sve svoje favorite, ostavimo ih na trenutak i poradimo na tome da naš generički predložak početne stranice učini više vama.

Korak 3: Prilagodite font

Pokrenite Notepad ++, kliknite Datoteka> Otvori da biste otvorili datoteku "DIY_startpage.html". Ono što gledate izgleda vrlo različito od stranice u vašem pregledniku, zar ne? To je kôd vaše stranice, a preglednici tumače taj kôd kako bi izgledao malo ugodnije za oči i učinili sve ono što nam je potrebno.

Kôd za naš projekt početne stranice napisan je na dva povezana jezika: HTML i CSS. HTML je obično zadužen za sadržaj stranice, a CSS zadužen za izgled stranice.

Potražite ovaj prvi odjeljak za prilagodbu početne stranice:

html {

align-items: centar; boja: #313131; zaslon: savitljiv; font: 22px "Courier New", Courier, jednoprostor; visina: 100%; justify-content: centar; marža: 0; }

Ovaj odjeljak naše početne stranice fokusira se na opći izgled stavki na našoj stranici. Crta:

font: 22px "Courier New", Courier, jednoprostor;

odnosi se na font koji koristimo na početnoj stranici i ima dva parametra koji definiraju kako će tekst na vašoj stranici izgledati: veličina i obitelj fontova.

• veličina - To je ono što je "22px". Veličina vašeg teksta na ekranu definirana je u "px", skraćeno od piksela.
• obitelj fontova - Tu navodimo fontove koje bismo željeli koristiti. Obično je dobra ideja navesti nekoliko, od fontova za koje zaista želite koristiti najobičniju obitelj. Ti se fontovi oslanjaju na preglednik koji koristite, pa ako onaj najjeftiniji nije dostupan, preglednik će isprobati sljedeći itd.

Stranica CSS web sigurni fontovi w3schools ima sjajan popis kombinacija fontova koji izgledaju sjajno, drže se stila koji tražite i koji će raditi na većini modernih preglednika.

Na primjer, možete zamijeniti:

"Courier New", Courier, monospace;

s:

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

ili:

"Comic Sans MS", kurziv, bez serifa;

Spremite datoteku i osvježite stranicu u svom pregledniku da vidite promjene! Ne sviđa vam se? Nema problema! Igrajte se sa CSS web sigurnim fontovima dok ne pronađete kombinaciju koja vam se sviđa.

Korak 4: Prilagodite naslovnu ponudu

Potražite ovaj odjeljak u svojoj HTML datoteci:

Ovo je vaša početna stranica! Uživati

Odaberite ponudu koja vam se sviđa i zamijenite je! Za svoje sam odabrao

Još jednom na proboj

Izgled vaše početne stranice trebao bi se u hodu prilagoditi vašem citatu čim ponovo učitate stranicu u pregledniku: u Firefoxu to znači pritiskanje CTRL+R na tipkovnici ili klik na ikonu Ponovno učitaj. Odaberite citat koji vam se sada sviđa (ili odaberite nešto kasnije!) I krenimo s prilagođavanjem odjeljaka vaše početne stranice!

Korak 5: Prilagodite odjeljke

Sada kada ste pronašli kombinaciju fontova koja vam se sviđa i imate odličan citat koji vas inspirira, nastavimo i prilagodimo vaše odjeljke.

Ako ste našu početnu stranicu preuzeli s Githuba, na raspolaganju vam je 6 odjeljaka za prilagodbu: izvorni vodič ima samo 4, ali budući da se sve više aspekata naših života nedavno preselilo na internet, ja sam za svaki slučaj dodao još.

Pronađite prvi odjeljak i samo upišite ono što nam treba. Podsjećanja radi, moj prvi odjeljak je "Vijesti i čitanje":

Dok je vaša datoteka još uvijek otvorena u Notepadu ++, pronađite sljedeći redak koda:

Odjeljak 1

i zamijenite je kategorijom na popisu za koju mislite da ćete je najviše koristiti.

Budući da smo mnogi od nas navikli čitati dokumente s gornje lijeve strane, vaše oči mogu prirodno otići - zato iskoristite to i zadržite naš najvažniji pristup! Ali ako dolazite iz kulture s drugačijim smjerom čitanja ili samo radite drugačije, prilagodite to sebi. To je ipak vaša početna stranica: znate što je najbolje za vas!

Jedan naslov dolje, pet do kraja! Potražite redak koda koji kaže:

Odjeljak 2

Promijenite ga, a zatim nastavite tražiti naslove odjeljaka i mijenjati ih dok ne dođete do kraja popisa. Ako ne koristite sve odjeljke, ostavite ih na miru! Na kraju ovog vodiča također ćemo napraviti malo čišćenja.

Kad završite s prilagođavanjem odjeljaka, samo spremite promjene u Notepad ++ i ponovno učitajte stranicu u svom pregledniku. Svi naslovi odjeljaka trebali bi se prikazivati tamo gdje ste ih stavili: sada možemo prilagoditi veze u svakom odjeljku!

Korak 6: Prilagodite svoje veze

Prilagođavanje veza u svakom odjeljku malo je složenije, ali svakako nije mnogo teže!

Ovaj put ne mijenjamo samo naziv veza, već i ono što možete učiniti s njima! Svaka stavka u svakom odjeljku postat će dostupna za klik, povezivanje na drugu web stranicu. Bonus, također možete odlučiti želite li da se otvori u novom prozoru ili ne!

Prvo potražite redak koji izgleda ovako:

link_name_name

Odaberite taj bit "link_one_name" i zamijenite ga vlastitim tekstom. Na primjer, prva veza u prvom odjeljku na temelju mog popisa iz koraka X je "Digitalne novine" pa dobivamo:

Digitalne novine

Dalje, poradimo na prilagodbi veze! Zamijenite bit "link.one" svojom prvom vezom. Za mene će to biti veza do naših digitalnih novina pa će izgledati ovako:

Digitalne novine

Spremite svoj rad u uređivač teksta i ponovo učitajte stranicu u pregledniku

Sada biste trebali moći kliknuti tu prvu vezu koju ste prilagodili. Ako nije trajalo, u redu je! Počnite iznova ili ponovite korake sve dok se veza ne otvori kada kliknete na nju.

Kad vam prva veza počne funkcionirati … Pa, sve što trebate učiniti je ponoviti ove korake za svaku vezu u svakom odjeljku, dok ne prilagodite sva imena i veze na početnoj stranici! Ipak, postoji samo jedna zamka: kada kliknete vezu, početna stranica jednostavno nestane kad se nova veza otvori na istoj kartici ili prozoru.

Nije baš zgodno … Pa što kažete na promjenu načina otvaranja veza? Upotrijebimo našu prvu vezu kao primjer! Vjerojatno se sjećate da ovdje vašem pregledniku kažemo da otvori vezu kada kliknete na nju:

Digitalne novine

Ali pogodite što - tu također odlučujemo kako će se veza otvoriti! Promijenite u:

Digitalne novine

Sada spremite svoj rad i ponovno učitajte stranicu u svom pregledniku: veza će se sada otvoriti na novoj kartici kada je kliknete! Na taj način svoju početnu stranicu možete držati otvorenom kada vam zatreba.

Korak 7: Dodajte sliku na svoju početnu stranicu

Sad kad su sve naše veze postavljene, vrijeme je da ukrasimo našu početnu stranicu! Ovaj predložak ima mjesta za prilagođenu sliku s desne strane zaslona. Sada se vratite u Notepad ++, potražite ovaj redak:

skroz na kraju predloška. Odaberite sliku koja vam se sviđa, premjestite je u istu mapu s datotekom početne stranice i zamijenite "library_picture.jpg" imenom datoteke svoje slike. Na primjer, ako je naziv moje datoteke "your_picture.jpg" redak postaje:

Spremite promjene i još jednom učitajte početnu stranicu u pregledniku.

Budući da se kôd vaše početne stranice i datoteke sa slikama nalaze u istoj mapi, slika bi se trebala automatski učitati kada osvježite stranicu. Ako nije, provjerite naziv svoje datoteke - tu obično griješim!

Pozadine za pametne telefone odlično pristaju tom projektu. Općenito, bilo koja okomita slika (ili kako maštoviti ljudi kažu "portretno orijentirana slika" s omjerom 16: 9) što se toga tiče! No, izgled naše početne stranice prilagodit će se bez obzira na to što na nju bacite.

Ako se vaša slika pojavi, čestitamo, gotovo ste gotovi!

Korak 8: Malo očistite

Ako u tom trenutku imate dodatne odjeljke koje ne koristite, slobodno ih izbrišite! Na primjer, recimo da ne koristite odjeljak 6. Pronađite:

• Odjeljak 6
• Stavka 1
• Stavka 2
• Stavka 3

Odaberite i izbrišite ove retke, spremite datoteku i osvježite datoteku u svom pregledniku kako biste bili sigurni da je sve nestalo.

Ovo je obično korak u kojem sve razbijam jer idem prebrzo, pa ako nešto odjednom ne uspije, sjetite se: duboko udahnite i poništite ono što ste upravo učinili kombinacijom tipki CTRL+Z na tipkovnici!

Korak 9: Pretvorite ga u stvarnu početnu stranicu

Sada kada početna stranica otvara sve veze koje želimo i izgleda onako kako želimo da izgleda, vrijeme je da je otvorite pri pokretanju preglednika!

U tom trenutku volim držati sve dalje od radne površine računala izrezivanjem i lijepljenjem mape početne stranice u mapu Dokumenti sustava Windows. Dakle, ako ste završili s radom na početnoj stranici, učinite to!

Sljedeće: najvjerojatnije će se vaš preglednik otvoriti vašom omiljenom tražilicom, ili možda čak i praznom stranicom.

U nastavku možete pronaći upute za prilagodbu Firefoxa, kao i drugih preglednika:

• Upute za Firefox
• Upute za Google Chrome
• Safari upute
• Upute za Microsoft Edge

Kad završite s uputama za preglednik, zatvorite sve i ponovno ga otvorite. Ako se vaša početna stranica pojavi pri pokretanju preglednika, uspjeli ste!

Ako se to nije dogodilo, ponovno prođite kroz upute za svoj preglednik i provjerite niste li ništa propustili. Što je još gore, onda ponovno pokrenite računalo nakon što spremite sav svoj rad. 9 puta od 10, to rješava sve!

Korak 10: Sve je gotovo! I, želite li znati više?

Čestitamo na završetku početne stranice! Možda ne izgleda puno, ali upravo ste naučili kodirati jedan od najvažnijih gradivnih blokova web stranice na način na koji sam ja to učinio … Prije otprilike 20 godina!

Ako vam se ovo svidjelo i želite saznati više o početnim stranicama, ovo je duboka zečija rupa koju morate slijediti! Evo kratkog odabira koji će vam pomoći na putovanju na početnoj stranici:

• Jeste li isprobali osnovni vodič za početnu stranicu? Dobre vijesti, ima još toga odakle dolaze! Za više inspiracije i napredne značajke pogledajte ostale vodiče po / stpg /!
• U katalogu knjižnice Johnson County Library potražite knjige o HTML -u i CSS -u - a uz vašu knjižničnu karticu ili e -karticu imate pristup i e -knjigama!
• Vaša knjižnična kartica također vam daje pristup Udemyju, a ima i neke vrlo potpune klase o HTML -u, CSS -u i web dizajnu.

Ako ste jako ponosni na svoju kreaciju, zašto je ne snimite i ne podijelite s nama putem Twittera ili Instagrama s hashtagom #jocomakes? Uvijek nam je drago vidjeti što naši pokrovitelji smisle!