Bëjeni veten një Fillestare të personalizuar, minimaliste !: 10 hapa

2024 Autor: John Day | [email protected]. E modifikuara e fundit: 2024-01-30 12:10

A ju është dashur të kaloni në punë kryesisht në distancë që kur COVID-19 u bë një gjë? Njësoj!

Të punosh nga shtëpia me kompjuterët tanë dhe përmes internetit shpesh do të thotë që ne duhet të mbajmë shënim shumë faqe në internet për punë, për shkollë apo edhe … për argëtim!

Faqeshënuesit nuk janë gjithmonë në lartësinë e detyrës, kështu që si ta bëni veten një faqe fillestare të personalizuar të përshtatur vetëm për ju, me të gjitha lidhjet që ju nevojiten, dhe kjo hapet në shfletuesin tuaj të internetit sa herë që ju nevojitet?

Ja çfarë do t'ju duhet:

• Një kompjuter (i yni ka Windows, por çdo kompjuter modern do ta bëjë).
• Një lidhje me internetin.
• Një instalim i ri i redaktuesit të tekstit Notepad ++.

Kur të jeni gati, le t’ju fillojmë me përdorimin e modelit tonë fillestar… Ose duke krijuar tuajin nga e para!

Hapi 1: Krijoni një faqe fillestare OSE Shkarkoni modelin tonë të personalizuar

Në këtë pikë ju keni dy mundësi:

1. Shkarkoni modelin tonë të personalizuar (udhëzimet ndiqni pak më vonë në këtë hap) ose,
2. Ndiqni këtë udhëzues bazë të faqes fillestare; do t’ju ecë nëpër blloqet e ndërtimit të një faqeje të thjeshtë fillestare hap pas hapi - dhe ky është udhëzuesi që ndoqëm për të ndërtuar këtë faqe fillestare të personalizuar!

Pse rekomandoni një mësim… në një mësim? Puna jonë si lehtësues i MakerSpace nuk është vetëm t'ju tregojë se si t'i bëni gjërat: është gjithashtu t'ju lidhë me kulturën dhe burimet e Krijuesit në dispozicion atje. Ky udhëzues është një nga vendet ku fillojnë shumë stilistë të faqeve fillestare, kështu që kishte kuptim ta ndante me ju!

Nëse keni kohë, vazhdoni me opsionin #2, por nëse nuk keni, gjithmonë mund t'i referoheni udhëzuesit bazë të faqes fillestare më vonë! Për këtë tutorial, ne thjesht do të supozojmë se po shkarkoni modelin tonë të personalizuar! Për ta shkarkuar:

1. Hapni depon tonë DIY_startpage në Github.
2. Klikoni në butonin e madh të gjelbër të Kodit për të hapur një menu zbritëse.
3. Klikoni në Shkarkoni ZIP për të shkarkuar të gjithë skedarët për projektin.
4. Nxirrni të gjithë skedarët nga skedari ZIP që sapo shkarkuat në një vendndodhje të zgjedhur nga ju.

GitHub është një faqe në internet ku programuesit dhe projektuesit në të gjithë botën ndajnë kodin dhe krijimet e tyre me të tjerët: gjithashtu ju lejon të bashkëpunoni me të tjerët në projekte të të gjitha llojeve. Në fund të fundit, është një mjet i shkëlqyeshëm që çdo Krijues duhet të dijë!

Tani filloni shfletuesin tuaj të zgjedhur: më pëlqen shumë Firefox, por modeli ynë duhet të funksionojë pothuajse në çdo shfletues të fundit të internetit, kështu që mos ngurroni të përdorni Edge, Chrome ose Safari!

Së fundi, hapni skedarin "DIY_startpage.html" në shfletuesin tuaj DHE në Notepad ++, dhe le të fillojmë ta personalizoni atë!

Hapi 2: Listoni të preferuarat tuaja

Të kesh një faqe fillestare është e mrekullueshme. Të kesh një faqe fillestare të dobishme është edhe më mirë dhe tani, e jona duket pak bosh!

Cilat janë gjërat që kontrolloni rregullisht dhe keni nevojë të mbani shënim? Cilat uebfaqe lexoni në mëngjes? Cilin faqe lajmesh ju pëlqen të kontrolloni? Këto janë gjërat që duhet të dalin në faqen tuaj fillestare.

Për këtë tutorial, unë do të përdor vetëm disa nga të preferuarat e mia. Paralajmërim Spoiler, shumë lidhje nga biblioteka! Por edhe disa nga Krijuesit e mi të preferuar për frymëzim, dhe disa nga argëtimet e mia të preferuara. Ju mund t'i gjeni të gjitha këto artikuj më poshtë me një lidhje, si shembull!

Lajme dhe Lexim

• Gazetat Dixhitale
• Libra dixhitalë
• Revista dixhitale

Të mësuarit

• Shkollat W3C
• Udemy
• Gjuhët Mango

Muzikë

• Dëgjoni Local
• Kënga Shpërthyese
• Radiot e Muzikës Jamendo

Kulturë krijuese

• Core77
• Lumecluster
• Melapropizmat

Zgjodha tre nga të preferuarat e mia për secilën kategori, por ju duhet të jeni në gjendje të zgjidhni më shumë ose më pak se kaq pa probleme - paraqitja e faqes tuaj fillestare do të përshtatet automatikisht me numrin ose burimet!

Pasi të keni listuar të gjitha të preferuarat tuaja, le t'i lëmë mënjanë për një minutë dhe të punojmë për ta bërë modelin tonë të përgjithshëm të faqes fillestare pak më shumë për ju.

Hapi 3: Personalizoni fontin tuaj

Filloni Notepad ++, klikoni në Skedar> Hap për të hapur skedarin tuaj "DIY_startpage.html". Ajo që po shikoni duket shumë ndryshe nga faqja në shfletuesin tuaj, apo jo? It'sshtë kodi i faqes tuaj, dhe shfletuesit e interpretojnë atë kod për ta bërë atë të duket pak më miqësor ndaj syve dhe të bëjë të gjitha gjërat që na duhen për të bërë.

Kodi për projektin e faqes fillestare është shkruar në dy gjuhë të lidhura: HTML dhe CSS. HTML zakonisht është përgjegjës për përmbajtjen e një faqe, dhe CSS përgjegjës për pamjen e një faqe.

Shikoni për këtë seksion të parë për të personalizuar faqen tuaj fillestare:

html {

align-items: qendra; ngjyra: #313131; ekran: fleksibël; font: 22px "Courier New", Courier, monospace; lartësia: 100%; justifiko-përmbajtjen: qendra; diferenca: 0; }

Ky seksion i faqes sonë fillestare fokusohet në pamjen e përgjithshme të artikujve në faqen tonë. Linja:

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

ka të bëjë veçanërisht me fontin që ne përdorim në faqen fillestare dhe ka dy parametra që përcaktojnë se si do të duket teksti në faqen tuaj: madhësia dhe familja e shkronjave.

• madhësia - Kjo është ajo që është "22px". Madhësia e tekstit tuaj në ekran përcaktohet në "px", e shkurtër për piksele.
• familja e shkronjave - Aty ne listojmë fontet që do të donim të përdornim. Zakonisht është një ide e mirë të rendisni disa, nga fonti që vërtet dëshironi të përdorni familjen më të përgjithshme. Këto shkronja mbështeten në shfletuesin që po përdorni, kështu që nëse ai më i veçanti nuk është i disponueshëm, shfletuesi do të provojë tjetrin, e kështu me radhë.

Faqja CSS Web Safe Fonts nga w3schools ka një listë të shkëlqyeshme të kombinimeve të shkronjave që duken të shkëlqyera, mbajnë stilin që po kërkoni dhe do të funksionojnë në shumicën e shfletuesve modernë.

Për shembull, mund të zëvendësoni:

"Courier New", Courier, monospace;

me:

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

ose:

"Comic Sans MS", kursiv, sans-serif;

Ruani skedarin tuaj dhe rifreskoni faqen në shfletuesin tuaj për të parë ndryshimet! Nuk të pëlqen? Nuk ka problem! Luani me shkronjat e sigurta të uebit CSS derisa të gjeni një kombinim që ju pëlqen.

Hapi 4: Rregulloni Kuotën tuaj të Titullit

Kërkoni këtë seksion në skedarin tuaj HTML:

Kjo është faqja juaj fillestare! Shijoni

Zgjidhni një citat që ju pëlqen dhe zëvendësoni kodin! Për timen, unë zgjodha

Edhe një herë mbi shkeljen

Paraqitja e faqes tuaj fillestare duhet të përshtatet në fluturim që të përputhet me kuotën tuaj sapo të ringarkoni faqen në shfletuesin tuaj: në Firefox, kjo do të thotë të shtypni CTRL+R në tastierën tuaj, ose të klikoni në ikonën Ringarko. Zgjidhni një citat që ju pëlqen tani (ose zgjidhni diçka më vonë!) Dhe le të fillojmë të punojmë duke personalizuar pjesët e faqes tuaj fillestare!

Hapi 5: Rregulloni seksionet tuaja

Tani që keni gjetur një kombinim fontesh që ju pëlqen dhe keni një kuotë të mrekullueshme për t'ju frymëzuar, le të vazhdojmë dhe rregullojmë seksionet tuaja.

Nëse e keni shkarkuar faqen tonë fillestare nga Github, keni 6 seksione në dispozicion për tu personalizuar: udhëzuesi origjinal ka vetëm 4, por meqenëse gjithnjë e më shumë aspekte të jetës sonë janë lëvizur në internet kohët e fundit, unë shkova përpara dhe shtova më shumë për çdo rast.

Gjeni pjesën e parë dhe thjesht shkruani atë që na nevojitet. Si kujtesë, pjesa ime e parë është "Lajme dhe Lexim":

Me skedarin tuaj ende të hapur në Notepad ++, gjeni linjën e mëposhtme të kodit:

Seksioni 1

dhe zëvendësojeni atë me kategorinë në listën tuaj që mendoni se do të përdorni më së shumti.

Meqenëse shumë prej nesh jemi mësuar të fillojmë të lexojmë dokumente nga lart majtas, aty mund të shkojnë sytë tuaj natyrisht - kështu që përfitoni nga kjo dhe mbajeni udhëtimin tonë më të rëndësishëm atje! Por nëse vini nga një kulturë me një drejtim leximi të ndryshëm, ose nëse punoni ndryshe, përshtateni këtë për veten tuaj. Në fund të fundit është faqja juaj fillestare: ju e dini se çfarë është më e mira për ju!

Një titull poshtë, pesë për të shkuar! Shikoni linjën e kodit që thotë:

Seksioni 2

Ndryshojeni atë, pastaj vazhdoni të kërkoni titujt e seksioneve dhe ndryshoni ato derisa të arrini në fund të listës tuaj. Nëse nuk i përdorni të gjitha pjesët, lërini të jenë! Ne do të bëjmë një pastrim të vogël në fund të këtij tutoriali gjithashtu.

Pasi të keni mbaruar personalizimin e seksioneve, thjesht ruani ndryshimet tuaja në Notepad ++ dhe ringarkoni faqen në shfletuesin tuaj. Të gjithë titujt e seksioneve duhet të shfaqen aty ku i vendosni: tani ne mund të personalizojmë lidhjet në secilin seksion!

Hapi 6: Rregulloni lidhjet tuaja

Përshtatja e lidhjeve në secilin seksion është pak më e përfshirë, por sigurisht jo shumë më e vështirë!

Këtë herë ne nuk po ndryshojmë vetëm emrin e lidhjeve, ne po ndryshojmë gjithashtu atë që mund të bëni me to! Çdo artikull në secilin seksion do të bëhet i klikueshëm, lidhja me një faqe në internet të ndryshme. Bonus, gjithashtu mund të vendosni nëse doni që ajo të hapet në një dritare të re apo jo!

Së pari, kërkoni një rresht që duket si:

link_one_name

Zgjidhni atë bit "link_one_name" dhe zëvendësojeni atë me tekstin tuaj. Për shembull, lidhja e parë në seksionin e parë bazuar në listën time nga hapi X është "Gazeta dixhitale" kështu që marrim:

Gazetat Dixhitale

Tjetra, le të punojmë për të personalizuar lidhjen! Zëvendësoni bitin "link.one" me lidhjen tuaj të parë. Për mua, kjo do të jetë lidhja me gazetat tona dixhitale, kështu që do të duket si:

Gazetat Dixhitale

Ruani punën tuaj në redaktuesin e tekstit dhe ringarkoni faqen në shfletuesin tuaj

Tani duhet të jeni në gjendje të klikoni në lidhjen e parë që keni përshtatur. Nëse nuk u desh, është në rregull! Filloni përsëri ose përsëritni hapat tuaj derisa lidhja të hapet kur ta klikoni.

Pasi të keni funksionuar lidhjen tuaj të parë … Epo, gjithçka që duhet të bëni është të përsërisni këto hapa për secilën lidhje në secilin seksion, derisa të keni përshtatur të gjithë emrat dhe lidhjet në faqen tuaj fillestare! Ka vetëm një kapje megjithatë: shanset janë kur klikoni një lidhje, faqja juaj fillestare thjesht zhduket pasi lidhja e re hapet në të njëjtën skedë ose dritare.

Nuk është shumë i përshtatshëm… Pra, si të ndryshoni mënyrën e hapjes së lidhjeve? Le të përdorim lidhjen tonë të parë si shembull! Me siguri ju kujtohet se këtu i themi shfletuesit tuaj që të hapë një lidhje kur e klikoni:

Gazetat Dixhitale

Por merreni me mend - këtu vendosim gjithashtu se si do të hapet lidhja! Ndryshoje në:

Gazetat Dixhitale

Tani ruani punën tuaj dhe ringarkoni faqen në shfletuesin tuaj: lidhja tani do të hapet në një skedë të re kur ta klikoni! Në këtë mënyrë ju mund ta mbani faqen tuaj fillestare të hapur kur të keni nevojë.

Hapi 7: Shtoni një fotografi në faqen tuaj fillestare

Tani që të gjitha lidhjet tona janë vendosur, është koha për të dekoruar faqen tonë fillestare! Ky model ka vend për një fotografi të personalizuar në anën e djathtë të ekranit. Tani përsëri në Notepad ++, kërkoni këtë linjë:

gjatë gjithë rrugës në fund të shabllonit. Zgjidhni një fotografi që ju pëlqen, zhvendoseni në të njëjtën dosje me skedarin tuaj fillestar dhe zëvendësoni "library_picture.jpg" me emrin e skedarit të figurës tuaj. Për shembull, nëse emri i skedarit tim është "your_picture.jpg" rreshti bëhet:

Ruani ndryshimet tuaja dhe, përsëri, ringarkoni faqen fillestare në shfletuesin tuaj.

Meqenëse kodi fillestar dhe skedarët tuaj të figurës janë në të njëjtën dosje, fotografia duhet të ngarkohet automatikisht kur të rifreskoni faqen. Nëse jo, kontrolloni emrin e skedarit tuaj - kjo është zakonisht aty ku e kam gabim!

Wallpapers të smartphone janë të përshtatshëm për atë projekt. Në përgjithësi, çdo fotografi vertikale (ose siç thonë njerëzit e zbukuruar "foto me orientim portreti" me një raport 16: 9) për këtë çështje! Por paraqitja e faqes sonë fillestare do të përshtatet pa marrë parasysh se çfarë hedh në të.

Nëse fotografia juaj shfaqet, urime, ju jeni gati gati!

Hapi 8: Pastroni pak

Nëse keni seksione shtesë që nuk po përdorni në atë pikë, mos ngurroni t'i fshini ato! Për shembull, le të themi se nuk po përdorni Seksionin 6. Gjeni:

• Seksioni 6
• Pika 1
• Pika 2
• Pika 3

Zgjidhni dhe fshini këto rreshta, ruani skedarin tuaj dhe rifreskoni skedarin në shfletuesin tuaj për t'u siguruar që gjithçka është zhdukur.

Ky është zakonisht hapi ku thyej gjithçka sepse shkoj shumë shpejt, kështu që nëse diçka papritmas nuk funksionon mbani mend: merrni frymë thellë dhe zhbëni atë që sapo bëtë me kombinimin e tastit CTRL+Z në tastierën tuaj!

Hapi 9: Duke e bërë atë një faqe fillestare aktuale

Tani që faqja fillestare hap të gjitha lidhjet që duam dhe duket ashtu siç duam të duket, koha për ta hapur atë kur filloni shfletuesin tuaj!

Në atë pikë, më pëlqen të mbaj gjithçka larg Desktopit të kompjuterëve të mi duke prerë dhe ngjitur dosjen time fillestare në dosjen Dokumentet e Windows. Pra, nëse keni mbaruar së punuari në faqen tuaj fillestare, bëjeni atë!

Tjetra: me shumë mundësi shfletuesi juaj hapet me motorin tuaj të preferuar të kërkimit, ose ndoshta edhe një faqe bosh.

Më poshtë mund të gjeni udhëzime për të personalizuar Firefox -in, si dhe shfletuesit e tjerë:

• Udhëzimet e Firefox -it
• Udhëzimet e Google Chrome
• Udhëzimet Safari
• Udhëzimet e Microsoft Edge

Pasi të keni mbaruar duke ndjekur udhëzimet për shfletuesin tuaj, mbyllini të gjitha dhe rihapeni. Nëse faqja juaj fillestare shfaqet ndërsa shfletuesi juaj po fillon, ju e keni arritur atë!

Nëse nuk u desh, kaloni përsëri udhëzimet për shfletuesin tuaj dhe sigurohuni që të mos keni humbur asgjë. Më keq vjen më keq, pastaj rinisni kompjuterin pasi të keni kursyer të gjithë punën tuaj. 9 herë nga 10, kjo zgjidh gjithçka!

Hapi 10: Gjithçka është bërë! Dhe, Dëshironi të dini më shumë?

Urime për përfundimin e faqes tuaj fillestare! Mund të mos duket shumë, por ju sapo keni mësuar të kodoni një nga blloqet më të rëndësishme të ndërtimit të një faqe në internet ashtu siç bëra unë … Rreth 20 vjet më parë!

Nëse ju pëlqeu kjo dhe dëshironi të mësoni më shumë rreth faqeve fillestare, është një vrimë e thellë lepuri për t'u ndjekur! Këtu keni një përzgjedhje të vogël për t'ju ndihmuar në udhëtimin tuaj në faqen fillestare:

• A e keni provuar udhëzuesin bazë të faqes fillestare? Lajm i mirë, nga vjen më shumë! Shikoni udhëzuesit e tjerë nga / stpg / për më shumë frymëzim dhe veçori të përparuara!
• Shikoni katalogun e Bibliotekës së Qarkut Johnson për libra në HTML dhe CSS - dhe me kartën tuaj të bibliotekës ose kartën elektronike keni qasje edhe në libra elektronikë!
• Karta juaj e bibliotekës gjithashtu ju jep qasje në Udemy, dhe ka disa klasa shumë të plota në HTML, CSS dhe dizajnimin e uebit gjithashtu.

Nëse jeni super krenarë për krijimin tuaj, pse nuk e bëni screenshot dhe mos e ndani me ne në Twitter ose Instagram me hashtagun #jocomakes? Ne jemi gjithmonë të lumtur të shohim se çfarë vijnë me klientët tanë!