Faceți-vă o pagină de pornire personalizată și minimalistă !: 10 pași

2024 Autor: John Day | [email protected]. Modificat ultima dată: 2024-01-30 11:41

A trebuit să treci la cea mai mare parte a lucrărilor la distanță de când COVID-19 a devenit un lucru? La fel!

Lucrul de acasă cu computerele noastre și prin internet înseamnă adesea că trebuie să ținem evidența multor site-uri web pentru serviciu, pentru școală sau chiar … pentru distracție!

Marcajele nu sunt întotdeauna la înălțimea sarcinii, așa că ce-ar fi să ne facem o pagină de pornire personalizată, adaptată doar pentru dvs., cu toate linkurile de care aveți nevoie și care se deschide în browserul dvs. Web de fiecare dată când aveți nevoie de ea?

Iată de ce veți avea nevoie:

• Un computer (al nostru rulează Windows, dar orice computer modern va funcționa).
• O conexiune la Internet.
• O nouă instalare a editorului de text Notepad ++.

Când sunteți gata, să începem să folosiți propriul nostru șablon de pagină de start … Sau să creați propriul dvs. de la zero!

Pasul 1: Creați o pagină de start SAU descărcați șablonul nostru personalizat

În acest moment aveți două opțiuni:

1. Descărcați șablonul nostru personalizat (instrucțiunile urmează puțin mai târziu în acest pas) sau,
2. Urmați acest ghid de bază al paginii de pornire; vă va conduce prin elementele de bază ale unei pagini de pornire simple pas cu pas - și acesta este ghidul pe care l-am urmat pentru a construi această pagină de pornire personalizată!

De ce să recomandăm un tutorial … într-un tutorial? Munca noastră ca facilitatori MakerSpace nu este doar pentru a vă arăta cum să faceți lucrurile: este, de asemenea, pentru a vă conecta la cultura Maker și la resursele disponibile acolo. Acest ghid este unul dintre locurile în care încep mulți designeri de pagini de start, așa că a avut sens să-l împărtășești cu tine!

Dacă aveți timp, continuați cu opțiunea # 2, dar dacă nu aveți, puteți consulta întotdeauna ghidul de bază pentru pagina de pornire mai târziu! Pentru acest tutorial, vom presupune că descărcați șablonul nostru personalizat! Pentru a-l descărca:

1. Deschideți depozitul nostru DIY_startpage pe Github.
2. Faceți clic pe butonul mare de cod verde pentru a deschide un meniu derulant.
3. Faceți clic pe Descărcați ZIP pentru a descărca toate fișierele proiectului.
4. Extrageți toate fișierele din fișierul ZIP pe care tocmai l-ați descărcat într-o locație la alegere.

GitHub este un site web unde programatorii și designerii din toată lumea își împărtășesc codul și creațiile cu alții: vă permite, de asemenea, să colaborați cu alții la proiecte de tot felul. Concluzia este că este un instrument excelent pe care fiecare Maker ar trebui să îl știe!

Acum porniți browserul ales: îmi place foarte mult Firefox, dar șablonul nostru ar trebui să funcționeze pe aproape orice browser web recent, așa că nu ezitați să utilizați Edge, Chrome sau Safari!

În cele din urmă, deschideți fișierul „DIY_startpage.html” în browser-ul ȘI în Notepad ++ și să începem să îl personalizăm!

Pasul 2: enumerați-vă favoritele

Să ai o pagină de start este minunat. A avea o pagină de pornire utilă este chiar mai bun și chiar acum, al nostru arată puțin gol!

Care sunt lucrurile pe care le verificați în mod regulat și de care trebuie să urmăriți? Ce webcomics citiți dimineața? Ce site de știri doriți să verificați? Acestea sunt lucrurile care ar trebui să apară pe pagina dvs. de pornire.

Pentru acest tutorial, voi folosi doar câteva dintre preferatele mele. Avertisment spoiler, multe link-uri din bibliotecă! Dar, de asemenea, unii dintre producătorii mei preferați pentru inspirație și unele dintre divertismentele mele preferate. Puteți găsi toate aceste elemente mai jos cu un link, ca exemplu!

Știri și lectură

• Ziare digitale
• Cărți digitale
• Reviste digitale

Învăţare

• Școli W3C
• Udemy
• Limbi Mango

Muzică

• Ascultați Local
• Song Exploder
• Jamendo Music Radio

Cultura Maker

• Core77
• Lumecluster
• Melapropisme

Am ales trei dintre preferatele mele pentru fiecare categorie, dar ar trebui să puteți alege mai mult sau mai puțin de atât fără probleme - aspectul paginii dvs. de start se va adapta automat la numărul sau la resursele!

Odată ce ați listat toate favoritele, să le lăsăm deoparte pentru un minut și să lucrăm la transformarea șablonului nostru generic de pagină de start un pic mai mult.

Pasul 3: Personalizați-vă fontul

Porniți Notepad ++, faceți clic pe Fișier> Deschideți pentru a deschide fișierul „DIY_startpage.html”. Ceea ce căutați arată foarte diferit de pagina din browserul dvs., nu-i așa? Este codul paginii dvs., iar browserele interpretează codul respectiv pentru a face să arate puțin mai ușor și să facă toate lucrurile de care avem nevoie.

Codul pentru proiectul nostru de pagină de început este scris în două limbi conexe: HTML și CSS. HTML este de obicei responsabil de conținutul unei pagini, iar CSS de aspectul unei pagini.

Căutați această primă secțiune pentru a vă personaliza pagina de start:

html {

align-items: centru; culoare: # 313131; display: flex; font: 22px "Courier New", Courier, monospace; înălțime: 100%; justify-content: centru; marja: 0; }

Această secțiune a paginii noastre de început se concentrează pe aspectul general al articolelor de pe pagina noastră. Linia:

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

este în mod specific despre fontul pe care îl folosim pe pagina de pornire și are doi parametri care definesc cum va arăta textul din pagina dvs.: dimensiunea și familia de fonturi.

• dimensiune - Asta este acel „22px”. Dimensiunea textului dvs. de pe ecran este definită în „px”, scurt pentru pixeli.
• familie de fonturi - Aici listăm fonturile pe care am dori să le folosim. De obicei, este o idee bună să enumerați mai multe, din fontul pe care doriți cu adevărat să utilizați cea mai generică familie. Aceste fonturi se bazează pe browserul pe care îl utilizați, deci dacă cel mai special nu este disponibil, browserul va încerca următorul și așa mai departe.

Pagina CSS Web Safe Fonts de la w3schools are o listă excelentă de combinații de fonturi care arată minunat, ținând stilul pe care îl căutați și va funcționa pe majoritatea browserelor moderne.

De exemplu, puteți înlocui:

„Curier nou”, Curier, monospațial;

cu:

„Linotip Palatino”, „Book Antiqua”, Palatino, serif;

sau:

„Comic Sans MS”, cursiv, sans-serif;

Salvați fișierul și reîmprospătați pagina din browser pentru a vedea modificările! Nu-ți place? Nici o problemă! Jucați-vă cu fonturile CSS Web Safe până găsiți o combinație care vă place.

Pasul 4: Personalizați-vă oferta de titlu

Căutați această secțiune în fișierul dvs. HTML:

Aceasta este pagina ta de start! Bucurați-vă

Alegeți o ofertă care vă place și înlocuiți codul! Pentru al meu, am ales

Încă o dată pe breșă

Aspectul paginii dvs. de pornire ar trebui să se adapteze din timp pentru a se potrivi cu oferta dvs. imediat ce reîncărcați pagina din browser: în Firefox, aceasta înseamnă apăsarea CTRL + R de pe tastatură sau clic pe pictograma Reîncărcare. Alegeți o ofertă care vă place acum (sau alegeți ceva mai târziu!) Și să începem să lucrăm personalizând secțiunile paginii dvs. de pornire!

Pasul 5: Personalizați-vă secțiunile

Acum că ați găsit o combinație de fonturi care vă place și aveți o ofertă excelentă pentru a vă inspira, să continuăm și să vă personalizăm secțiunile.

Dacă ați descărcat pagina noastră de pornire de pe Github, aveți 6 secțiuni disponibile pentru personalizare: ghidul original are doar 4, dar din moment ce tot mai multe aspecte ale vieții noastre s-au mutat online recent, am continuat și am adăugat mai multe pentru orice eventualitate.

Găsiți prima secțiune și introduceți doar ceea ce avem nevoie. Ca reamintire, prima mea secțiune este „Știri și lectură”:

Cu fișierul încă deschis în Notepad ++, găsiți următoarea linie de cod:

Sectiunea 1

și înlocuiți-l cu categoria din lista dvs. pe care credeți că o veți folosi cel mai mult.

Întrucât mulți dintre noi suntem obișnuiți să începem să citim documente din partea stângă sus, acolo ar putea să se îndrepte ochii dvs. în mod natural - deci profitați de acest lucru și păstrați-ne acolo cel mai important lucru! Dar dacă provii dintr-o cultură cu o altă direcție de lectură sau dacă lucrezi diferit, personalizează-o pentru tine. La urma urmei, este pagina ta de început: știi ce este mai bine pentru tine!

Un titlu de secțiune în jos, mai sunt cinci! Căutați linia de cod care spune:

Sectiunea 2

Schimbați-l, apoi continuați să căutați titlurile secțiunilor și să le schimbați până ajungeți la sfârșitul listei. Dacă nu utilizați toate secțiunile, lăsați-le să fie! Vom face o mică curățare și la sfârșitul acestui tutorial.

După ce ați terminat de personalizat secțiunile, trebuie doar să salvați modificările din Notepad ++ și să reîncărcați pagina din browser. Toate titlurile secțiunii ar trebui să apară unde le-ați plasat: acum putem personaliza linkurile din fiecare secțiune!

Pasul 6: Personalizați-vă linkurile

Personalizarea linkurilor din fiecare secțiune este puțin mai implicată, dar cu siguranță nu mult mai dificilă!

De data aceasta nu schimbăm doar numele linkurilor, ci schimbăm și ce puteți face cu ele! Fiecare articol din fiecare secțiune va deveni clicabil, link către un alt site web. Bonus, puteți decide, de asemenea, dacă doriți să se deschidă într-o fereastră nouă sau nu!

Mai întâi, căutați o linie care să arate ca:

link_one_name

Selectați acel bit „link_one_name” și înlocuiți-l cu propriul text. De exemplu, primul link din prima secțiune bazat pe lista mea de la pasul X este „Ziare digitale”, așa că primim:

Ziare digitale

Apoi, să lucrăm să personalizăm linkul! Înlocuiți bitul „link.one” cu primul dvs. link. Pentru mine, acesta va fi linkul către ziarele noastre digitale, așa că va arăta astfel:

Ziare digitale

Salvați-vă munca în editorul de text și reîncărcați pagina din browser

Acum ar trebui să puteți da clic pe primul link pe care l-ați personalizat. Dacă nu a durat, este în regulă! Începeți din nou sau refaceți pașii până când linkul se deschide când faceți clic pe el.

Odată ce ați început primul link de lucru … Ei bine, tot ce trebuie să faceți este să repetați acești pași pentru fiecare link din fiecare secțiune, până când ați personalizat toate numele și linkurile de pe pagina dvs. de start! Există însă o singură captură: șansele sunt atunci când faceți clic pe un link, pagina dvs. de start dispare doar pe măsură ce noul link se deschide în aceeași filă sau fereastră.

Nu este foarte comod … Deci, ce zici de schimbarea modului în care se deschid linkurile? Să folosim primul nostru link ca exemplu! Probabil că vă amintiți că în acest caz îi spunem browserului dvs. să deschidă un link atunci când faceți clic pe el:

Ziare digitale

Dar ghiciți ce - acolo decidem și cum se va deschide linkul! Schimbați-l în:

Ziare digitale

Acum salvați-vă munca și reîncărcați pagina în browserul dvs.: linkul se va deschide acum într-o filă nouă când faceți clic pe ea! În acest fel, vă puteți menține pagina de pornire deschisă atunci când aveți nevoie de ea.

Pasul 7: Adăugați o imagine în pagina dvs. de pornire

Acum că toate linkurile noastre sunt configurate, este timpul să ne decorăm pagina de start! Acest șablon are loc pentru o imagine personalizată în partea dreaptă a ecranului. Acum, înapoi în Notepad ++, căutați această linie:

până la sfârșitul șablonului. Alegeți o imagine care vă place, mutați-o în același folder cu fișierul paginii de pornire și înlocuiți „library_picture.jpg” cu numele de fișier al imaginii dvs. De exemplu, dacă numele fișierului meu este „imaginea_ dumneavoastră.jpg”, linia devine:

Salvați modificările și, din nou, reîncărcați pagina de start în browser.

Deoarece codul paginii de pornire și fișierele dvs. imagine se află în același dosar, imaginea ar trebui să se încarce automat atunci când actualizați pagina. În caz contrar, verificați numele fișierului dvs. - de obicei acolo greșesc!

Imaginile de fundal pentru smartphone-uri se potrivesc excelent pentru acel proiect. În general, orice imagine verticală (sau așa cum spun oamenii fantezie „imagine orientată pe portret” cu un raport de 16: 9) pentru asta! Dar aspectul paginii noastre de pornire se va adapta indiferent de ceea ce aruncați asupra ei.

Dacă poza ta apare, felicitări, ai terminat!

Pasul 8: Curățarea unui bit

Dacă aveți secțiuni suplimentare pe care nu le utilizați în acel moment, nu ezitați să le ștergeți! De exemplu, să presupunem că nu utilizați secțiunea 6. Găsiți:

• Secțiunea 6
• Punctul 1
• Punctul 2
• Punctul 3

Selectați și ștergeți aceste linii, salvați fișierul și reîmprospătați fișierul în browser pentru a vă asigura că totul a dispărut.

Acesta este, de obicei, pasul în care rup totul pentru că merg prea repede, deci dacă ceva brusc nu funcționează, amintiți-vă: respirați adânc și anulați ceea ce tocmai ați făcut cu combinația de taste CTRL + Z de pe tastatură!

Pasul 9: transformarea acesteia într-o pagină de pornire reală

Acum că pagina de pornire deschide toate linkurile pe care le dorim și arată așa cum vrem să arate, este timpul să o deschidem când porniți browserul!

În acel moment, îmi place să țin totul departe de desktopul computerelor mele, tăind și lipind folderul paginii de pornire în folderul Documente Windows. Deci, dacă ați terminat de lucrat pe pagina dvs. de început, faceți asta!

În continuare: cel mai probabil browserul dvs. se deschide cu motorul dvs. de căutare preferat sau poate chiar cu o pagină goală.

Mai jos puteți găsi instrucțiuni pentru a personaliza Firefox, precum și alte browsere:

• Instrucțiuni Firefox
• Instrucțiuni Google Chrome
• Instrucțiuni Safari
• Instrucțiuni Microsoft Edge

După ce ați terminat instrucțiunile pentru browser, închideți totul și redeschideți-l. Dacă pagina dvs. de pornire apare pe măsură ce se lansează browserul dvs., ați reușit!

Dacă nu a fost nevoie, parcurgeți din nou instrucțiunile browserului și asigurați-vă că nu ați pierdut nimic. Mai rău vine în rău, apoi reporniți computerul după ce ați salvat toată munca. De 9 ori din 10, asta rezolvă totul!

Pasul 10: Toate gata! Și, ai vrea să știi mai multe?

Felicitări pentru că v-ați terminat pagina de start! S-ar putea să nu arate prea mult, dar tocmai ați învățat să codificați unul dintre cele mai importante elemente de construcție ale unui site web așa cum am făcut-o … Acum aproximativ 20 de ani!

Dacă ți-a plăcut acest lucru și ai vrea să afli mai multe despre paginile de început, este o gaură adâncă de iepure de urmat! Iată o mică selecție pentru a vă ajuta în călătoria pe pagina de pornire:

• Ați încercat ghidul de bază pentru pagina de pornire? Vești bune, sunt mai multe de unde provin! Consultați celelalte ghiduri de / stpg / pentru mai multă inspirație și caracteristici avansate!
• Consultați catalogul Johnson County Library pentru cărți pe HTML și CSS - și cu cardul dvs. de bibliotecă sau e-card aveți acces și la cărți electronice!
• Cardul dvs. de bibliotecă vă oferă, de asemenea, acces la Udemy și are câteva clase foarte complete de HTML, CSS și design web.

Dacă sunteți super mândru de creația dvs., de ce nu o capturați și o împărtășiți cu noi prin Twitter sau Instagram cu hashtagul #jocomakes? Suntem întotdeauna bucuroși să vedem cu ce vin patronii noștri!