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

2024 Autor: John Day | [email protected]. Zadnja izmjena: 2024-01-30 08:04

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

Rad od kuće s našim računarima i putem interneta često znači da moramo pratiti mnogo web stranica za posao, školu ili čak … radi zabave!

Oznake nisu uvijek na visini zadatka, pa kako bi bilo da sami 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 šta će vam trebati:

• Računar (naš ima Windows, ali bilo koji savremeni računar će to učiniti).
• Veza sa Internetom.
• Nova instalacija uređivača teksta Notepad ++.

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

Korak 1: Kreirajte 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 vodič … u vodiču? Naš posao kao facilitatora MakerSpace -a nije samo da vam pokažemo kako da radite: to je i da vas poveže sa Maker kulturom i resursima koji su tamo dostupni. Ovaj vodič jedno je od mjesta na kojem počinju mnogi dizajneri početnih stranica, pa je imalo smisla podijeliti ga 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 veliko zeleno dugme za otvaranje padajućeg izbornika.
3. Kliknite na Preuzmi ZIP za preuzimanje svih datoteka projekta.
4. Izvucite sve datoteke iz ZIP datoteke koju ste upravo preuzeli na lokaciju po vašem izboru.

GitHub je web stranica na kojoj programeri i dizajneri širom 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 sjajan alat koji svaki proizvođač treba znati!

Sada pokrenite svoj pretraživač po izboru: Zaista mi se sviđa Firefox, ali naš predložak trebao bi raditi na gotovo svakom novijem web pregledniku 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 odlično. Imati korisnu početnu stranicu još je bolje i trenutno naša izgleda pomalo prazno!

Koje stvari redovno 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č ću koristiti samo neke od svojih omiljenih. Upozorenje o spojleru, puno linkova iz biblioteke! Ali i neki od mojih omiljenih kreatora za inspiraciju, i neki od mojih omiljenih zabavnih sadržaja. 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
• Mango Languages

Music

• Slušajte lokalno
• Song Exploder
• Jamendo muzički radio

Proizvođač kulture

• Core77
• 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 sve vaše favorite budu navedene, ostavimo ih na trenutak i poradimo na tome da naš opći 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.

Kod 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 za izgled stranice.

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

html {

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

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

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 porodica fontova.

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

Stranica CSS Web Safe Fontovi iz w3schools ima odličan popis kombinacija fontova koji izgledaju sjajno, drže se stila koji tražite i funkcionirat će na većini modernih preglednika.

Na primjer, možete zamijeniti:

"Courier New", Courier, monospace;

sa:

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

ili:

"Comic Sans MS", kurziv, bez serifa;

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

Korak 4: Prilagodite naslovnu ponudu

Potražite ovaj odjeljak u vašoj HTML datoteci:

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

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 svom 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, imate 6 odjeljaka za prilagođavanje: originalni 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 Notepad ++, pronađite sljedeću liniju koda:

Odeljak 1

i zamijenite je kategorijom sa svoje liste za koju mislite da ćete je najviše koristiti.

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

Jedan naslov dolje, još pet! Potražite red koda koji kaže:

Odeljak 2

Promijenite je, 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 ćemo također malo očistiti.

Kada završite s prilagođavanjem odjeljaka, samo spremite promjene u Notepad ++ i ponovo 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 je malo 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, povezivati na drugu web stranicu. Bonus, takođe možete odlučiti želite li da se otvori u novom prozoru ili ne!

Prvo potražite liniju koja izgleda ovako:

link_one_name

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

Digitalne novine

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

Digitalne novine

Sačuvajte svoj rad u uređivaču teksta i ponovo učitajte stranicu u svom pregledaču

Sada biste trebali moći kliknuti onu prvu vezu koju ste prilagodili. Ako nije trajalo, u redu je! Počnite ponovo 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 kvaka: velike su šanse da kada kliknete na vezu, vaša početna stranica jednostavno nestane kad se nova veza otvori na istoj kartici ili prozoru.

Nije baš zgodno … Pa kako bi bilo promijeniti način otvaranja veza? Upotrijebimo našu prvu vezu kao primjer! Vjerojatno se sjećate da ovo gdje 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 ponovo učitajte stranicu u svom pregledniku: veza će se sada otvoriti na novoj kartici kada kliknete na nju! 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

Sada kada su sve naše veze postavljene, vrijeme je da ukrasimo našu početnu stranicu! Ovaj predložak ima mjesta za prilagođenu sliku na desnoj strani ekrana. Sada se vratite u Notepad ++, potražite ovu liniju:

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

Sačuvajte promjene i još jednom ponovo učitajte početnu stranicu u svom 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 pametnih telefona 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! Ali 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 čišćenje

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

• Odeljak 6
• Stavka 1
• Stavka 2
• Stavka 3

Odaberite i izbrišite ove redove, 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 tastaturi!

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 kada pokrenete preglednik!

U tom trenutku volim držati sve dalje od radne površine računara izrezivanjem i lijepljenjem mape početne stranice u mapu Dokumenti u sistemu 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 prilagođavanje Firefoxa, kao i drugih preglednika:

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

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

Ako se to nije dogodilo, ponovo prođite kroz upute za svoj preglednik i provjerite da niste ništa propustili. Još gore dolazi do najgoreg stanja, a zatim ponovo pokrenite računar nakon što sačuvate 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 vaše 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 ste uživali u ovome i željeli biste saznati više o početnim stranicama, ovo je duboka zečija rupa koju morate slijediti! Evo malog izbora 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 naprednih funkcija pogledajte ostale vodiče od / stpg /!
• U katalogu biblioteke Johnson County Library potražite knjige o HTML -u i CSS -u - a uz vašu bibliotečku karticu ili e -karticu imate pristup i e -knjigama!
• Kartica vaše biblioteke 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 ne snimite zaslon i ne podijelite je s nama putem Twittera ili Instagrama s hashtagom #jocomakes? Uvijek nam je drago vidjeti šta naši pokrovitelji smisle!