Készíts egy egyedi, minimalista kezdőlapot !: 10 lépés

2024 Szerző: John Day | [email protected]. Utoljára módosítva: 2024-01-30 09:39

Váltania kellett többnyire távmunkára, mióta a COVID-19 dologgá vált? Azonos!

Ha otthonról dolgozunk számítógépeinkkel és az interneten keresztül, gyakran azt kell jelentenünk, hogy sok webhelyet kell nyomon követnünk munka, iskola vagy akár … szórakozás céljából!

A könyvjelzők nem mindig felelnek meg a feladatnak, tehát mi lenne, ha személyre szabott kezdőlapot készítenénk Önnek, az összes szükséges linkkel, és ez minden alkalommal megnyílik a webböngészőben, amikor szüksége van rá?

Íme, amire szüksége lesz:

• Számítógép (nálunk Windows operációs rendszer fut, de minden modern számítógép megteszi).
• Internetkapcsolat.
• A Notepad ++ szövegszerkesztő friss telepítése.

Ha készen áll, kezdjük a saját kezdőlap sablonunk használatával … Vagy hozzon létre sajátot a semmiből!

1. lépés: Hozzon létre kezdőlapot VAGY töltse le személyre szabott sablonunkat

Ezen a ponton két lehetősége van:

1. Töltse le személyre szabott sablonunkat (az utasításokat ebben a lépésben egy kicsit később követi), vagy
2. Kövesse ezt az alapvető kezdőlap útmutatót; lépésről lépésre végigvezeti Önt egy egyszerű kezdőlap építőkövein - és ezt az útmutatót követtük ennek az egyéni kezdőlapnak az elkészítéséhez!

Miért ajánl egy oktatóanyagot… egy oktatóanyagban? A MakerSpace segítőjeként végzett munkánk nem csupán megmutatja, hogyan kell csinálni a dolgokat, hanem azt is, hogy összeköttetésben álljon a Maker kultúrájával és a rendelkezésre álló erőforrásokkal. Ez az útmutató egyike azoknak a helyeknek, ahol sok kezdőoldal -tervező elindul, ezért logikus volt megosztani veletek!

Ha van ideje, folytassa a 2. opcióval, de ha nem, akkor később bármikor hivatkozhat az alapvető kezdőlapra! Ebben az oktatóanyagban csak feltételezzük, hogy letölti az egyéni sablonunkat! Letöltéséhez:

1. Nyissa meg DIY_startpage tárhelyünket a Githubon.
2. Kattintson a nagy zöld Kód gombra a legördülő menü megnyitásához.
3. Kattintson a Letöltés ZIP gombra a projekt összes fájljának letöltéséhez.
4. Bontsa ki az összes fájlt az éppen letöltött ZIP fájlból az Ön által választott helyre.

A GitHub egy olyan webhely, ahol a programozók és a tervezők a világ minden tájáról megosztják másokkal kódjaikat és alkotásaikat: lehetővé teszi, hogy másokkal is együttműködhessenek mindenféle projektben. A lényeg az, hogy ez egy nagyszerű eszköz, amelyet minden készítőnek tudnia kell!

Most indítsa el a választott böngészőt: Nagyon szeretem a Firefoxot, de a sablonunknak szinte minden friss webböngészőn működnie kell, ezért bátran használja az Edge -t, a Chrome -ot vagy a Safarit!

Végül nyissa meg a "DIY_startpage.html" fájlt a böngészőben ÉS a Notepad ++ alkalmazásban, és kezdjük el a testreszabást!

Lépés: Sorolja fel kedvenceit

A kezdőoldal nagyszerű. A hasznos kezdőlap még jobb, és most a miénk kicsit üresnek tűnik!

Melyek azok a dolgok, amelyeket rendszeresen megnéz, és amelyeket figyelemmel kell kísérnie? Milyen webes képregényeket olvas reggel? Melyik hírportált nézed szívesen? Ezek azok a dolgok, amelyeknek a kezdőlapon kell megjelenniük.

Ehhez az oktatóanyaghoz csak néhány kedvencemet használom. Spoiler figyelmeztetés, sok link a könyvtárból! De néhány kedvenc készítőm is inspirációként, és néhány kedvenc szórakozásom. Mindezeket az alábbi linken példaként megtalálhatja!

Hírek és olvasás

• Digitális újságok
• Digitális könyvek
• Digitális magazinok

Tanulás

• W3C iskolák
• Udemy
• Mangó nyelvek

Zene

• Hallgassa meg a Helyi lehetőséget
• Song Exploder
• Jamendo Music rádiók

Maker kultúra

• Core77
• Lumecluster
• Melapropizmusok

Három kedvencemet választottam ki minden kategóriában, de ennél többet vagy kevesebbet gond nélkül ki kell választania - a kezdőlap elrendezése automatikusan igazodik a számhoz vagy az erőforrásokhoz!

Miután minden kedvencedet felsoroltuk, tegyük félre őket egy percre, és dolgozzunk azon, hogy az általános kezdőlap sablonunk egy kicsit több legyen.

3. lépés: A betűtípus testreszabása

Indítsa el a Notepad ++ programot, kattintson a Fájl> Megnyitás lehetőségre a "DIY_startpage.html" fájl megnyitásához. Amit nézel, az teljesen más, mint a böngésző oldala, nem? Ez az oldalad kódja, és a böngészők értelmezik ezt a kódot, hogy kissé barátságosabbnak tűnjenek, és mindent megtesznek, amire szükségünk van.

A kezdőlap projektünk kódja két kapcsolódó nyelven íródott: HTML és CSS. A HTML általában felelős az oldal tartalmáért, a CSS pedig az oldal kinézetéért.

Keresse meg ezt az első részt a kezdőlap testreszabásához:

html {

align-items: center; szín: #313131; kijelző: flex; betűtípus: 22px "Courier New", Courier, monospace; magasság: 100%; igazolni-tartalom: center; margó: 0; }

Kezdőoldalunk ezen része az oldalunk elemeinek általános megjelenésére összpontosít. A vonal:

betűtípus: 22px "Courier New", Courier, monospace;

kifejezetten a kezdőlapon használt betűtípusról szól, és két paraméterrel rendelkezik, amelyek meghatározzák, hogy milyen lesz az oldal szövege: méret és betűcsalád.

• méret - Ez az a "22px". A képernyőn megjelenő szöveg mérete "px", a pixelek rövidítése.
• betűtípuscsalád - Itt soroljuk fel a használni kívánt betűtípusokat. Általában jó ötlet felsorolni néhányat, abból a betűtípusból, amelyet valóban a legáltalánosabb családhoz szeretne használni. Ezek a betűtípusok az Ön által használt böngészőre támaszkodnak, így ha a legkülönlegesebb nem érhető el, a böngésző megpróbálja a következőt, és így tovább.

A w3schools CSS Web Safe Fonts oldala nagyszerű betűkészlet -listát tartalmaz, amelyek jól néznek ki, tartják a keresett stílust és működnek a legtöbb modern böngészőben.

Például lecserélheti:

"Courier New", Courier, monospace;

val vel:

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

vagy:

"Comic Sans MS", kurzív, sans-serif;

Mentse el a fájlt, és frissítse az oldalt a böngészőben, hogy láthassa a változásokat! Nem tetszik? Nincs mit! Játsszon a CSS Web Safe betűtípusokkal, amíg meg nem találja a kívánt kombinációt.

4. lépés: Testreszabhatja a cím idézetét

Keresse meg ezt a részt a HTML -fájlban:

Ez a kezdőlapod! Élvezd

Válasszon egy árajánlatot, és cserélje ki a kódot! A magam számára választottam

Még egyszer a törésről

A kezdőlap elrendezésének menet közben hozzá kell igazodnia az ajánlatához, amint újra betölti az oldalt a böngészőjében: a Firefoxban ez azt jelenti, hogy le kell nyomni a CTRL+R billentyűkombinációt a billentyűzeten, vagy kattintson az Újratöltés ikonra. Válasszon egy most tetsző árajánlatot (vagy válasszon valamit később!), És kezdjük a kezdőlap szakaszainak testreszabásával!

5. lépés: Testreszabhatja a szakaszokat

Most, hogy megtalálta a kívánt betűtípus -kombinációt, és van egy remek idézete, amely inspirál, folytassuk és testreszabjuk a szakaszokat.

Ha a Github -ról letöltötte kezdőlapunkat, akkor 6 testreszabható rész áll rendelkezésére: az eredeti útmutatóban csak 4 van, de mivel az életünk egyre több aspektusa költözött online a közelmúltban, ezért minden esetre továbbmentem.

Keresse meg az első részt, és írja be, amire szükségünk van. Emlékeztetőül, az első részem a "Hírek és olvasás":

Ha a fájlja továbbra is nyitva van a Notepad ++ alkalmazásban, keresse meg a következő kódsort:

1. szakasz

és cserélje ki azt a kategóriát a listájában, amelyről úgy gondolja, hogy a legtöbbet fogja használni.

Mivel sokunk hozzászokott ahhoz, hogy a dokumentumokat a bal felső sarokból kezdje el olvasni, a szeme természetesen odafordulhat - használja ezt ki, és tartsa meg a legfontosabb oda vezető utat! De ha más olvasási irányú kultúrából származik, vagy csak máshogy dolgozik, szabja ezt személyre. Végül is ez a kezdőoldalad: tudod, mi a legjobb neked!

Egy szakasz címe lejjebb, öten mennek! Keresse meg a kód sorát, amely ezt mondja:

2. szakasz

Változtassa meg, majd folytassa a szakaszcímek keresését és módosítását, amíg el nem éri a lista végét. Ha nem használja az összes részt, hagyja őket! Az oktatóanyag végén egy kis tisztítást is végezünk.

Miután befejezte a szakaszok testreszabását, mentse el a módosításokat a Notepad ++ programba, és töltse be újra az oldalt a böngészőben. Minden szakaszcímnek ott kell megjelennie, ahová tette: most személyre szabhatjuk az egyes szakaszokban található linkeket!

6. lépés: A linkek testreszabása

Az egyes szakaszok linkjeinek testreszabása egy kicsit több, de természetesen nem sokkal nehezebb!

Ezúttal nem csak a linkek nevét változtatjuk meg, hanem azt is, hogy mit tehet velük! Az egyes szakaszok minden eleme kattinthatóvá válik, és egy másik webhelyre mutat. Bónusz, azt is eldöntheti, hogy új ablakban szeretné megnyitni vagy sem!

Először keressen egy sort, amely így néz ki:

link_one_name

Válassza ki azt a "link_one_name" bitet, és cserélje le saját szövegére. Például az első szakasz első linkje az X lépésből származó listám alapján a "Digitális újságok", így kapjuk:

Digitális újságok

Ezután dolgozzunk a link testreszabásán! Cserélje le a "link.one" bitet az első hivatkozással. Számomra ez lesz a link a digitális újságokhoz, így a következőképpen fog kinézni:

Digitális újságok

Mentse el munkáját a szövegszerkesztőben, és töltse be újra az oldalt a böngészőben

Most már képesnek kell lennie arra, hogy kattintson az első személyre szabott linkre. Ha nem kellett, nem baj! Kezdje elölről, vagy kövesse újra a lépéseket, amíg a link megnyílik, amikor rákattint.

Miután az első link működőképessé vált … Nos, mindössze annyit kell tennie, hogy megismétli ezeket a lépéseket minden egyes linkhez minden szakaszban, amíg a kezdőoldal összes nevét és linkjét személyre nem szabja! Ennek ellenére csak egy fogás van: nagy valószínűséggel, ha rákattint egy linkre, a kezdőlap csak eltűnik, amint az új link megnyílik ugyanazon a lapon vagy ablakban.

Ez nem túl kényelmes… Mi lenne, ha megváltoztatná a linkek megnyílásának módját? Vegyük példaként az első linkünket! Valószínűleg emlékszik arra, hogy itt azt mondjuk a böngészőjének, hogy nyisson meg egy linket, amikor rákattint:

Digitális újságok

De találd ki - mi is eldöntjük, hogyan fog megnyílni a link! Változtassa meg:

Digitális újságok

Most mentse el munkáját, és töltse be újra az oldalt a böngészőjében: a link most új lapon nyílik meg, amikor rákattint! Így nyitva tarthatja kezdőlapját, amikor szüksége van rá.

7. lépés: Kép hozzáadása a kezdőlaphoz

Most, hogy minden linkünk fel van állítva, ideje díszíteni a kezdőlapunkat! Ebben a sablonban lehetőség van egy egyedi kép megjelenítésére a képernyő jobb oldalán. Most a Notepad ++ alkalmazásban keresse meg ezt a sort:

egészen a sablon végén. Válasszon egy tetszőleges képet, helyezze át ugyanabba a mappába, mint a kezdőlapfájl, és cserélje le a "library_picture.jpg" fájlt a kép fájlnevével. Például, ha a fájlom neve "your_picture.jpg", akkor a sor a következő lesz:

Mentse el a módosításokat, és töltse be újra a kezdőlapot a böngészőjében.

Mivel a kezdőlap kódja és a képfájlok ugyanabban a mappában vannak, a kép automatikusan betöltődik az oldal frissítésekor. Ha nem, ellenőrizze a fájl nevét - általában ott tévedek!

Az okostelefon háttérképek nagyszerűen illeszkednek ehhez a projekthez. Általánosságban elmondható, hogy bármilyen függőleges kép (vagy ahogy a képzeletbeli emberek azt mondják: "álló tájolású kép" 16: 9 arányban)! A kezdőlapunk elrendezése azonban alkalmazkodik ahhoz, hogy mit dob.

Ha megjelenik a képe, gratulálok, nagyjából kész!

8. lépés: Tisztítsa meg egy kicsit

Ha vannak olyan további részei, amelyeket akkor nem használ, bátran törölje őket! Tegyük fel például, hogy nem használja a 6. szakaszt. Keresse meg:

• 6. szakasz
• 1. tétel
• 2. tétel
• 3. tétel

Válassza ki és törölje ezeket a sorokat, mentse el a fájlt, és frissítse a fájlt a böngészőben, hogy megbizonyosodjon arról, hogy minden eltűnt.

Általában ez az a lépés, amikor mindent tönkreteszek, mert túl gyorsan megyek, ezért ha valami hirtelen nem működik, ne feledje: vegyen mély lélegzetet, és vonja vissza az imént tettet a billentyűzet CTRL+Z billentyűkombinációjával!

9. lépés: Tedd tényleges kezdőoldalgá

Most, hogy a kezdőlap megnyitja az összes kívánt linket, és úgy néz ki, ahogyan szeretnénk, ideje megnyitni a böngésző indításakor!

Ezen a ponton szeretek mindent távol tartani a számítógépeim asztalától, ha kivágom és beillesztem a kezdőlap mappámat a Windows Dokumentumok mappájába. Tehát ha befejezte a kezdőlapon való munkát, tegye ezt!

Következő: valószínűleg a böngészője nyílik meg a kedvenc keresőmotorjával, vagy akár egy üres oldallal.

Az alábbiakban utasításokat talál a Firefox és más böngészők testreszabásához:

• Firefox utasítások
• Google Chrome utasítások
• Safari utasítások
• Microsoft Edge utasítások

Miután befejezte a böngésző utasításait, zárja be az egészet, és nyissa meg újra. Ha a kezdőlap megjelenik a böngésző indításakor, akkor sikerült!

Ha nem tart, nézze át újra a böngésző utasításait, és győződjön meg arról, hogy nem hagyott ki semmit. A rosszabb helyzet a legrosszabb, majd az összes munka mentése után indítsa újra a számítógépet. 10 -ből 9 -szer ez mindent megold!

10. lépés: Minden kész! És, szeretne többet tudni?

Gratulálunk a kezdőlap befejezéséhez! Lehet, hogy nem tűnik soknak, de most megtanulta kódolni a webhely egyik legfontosabb építőkockáját, ahogy én … Körülbelül 20 évvel ezelőtt!

Ha tetszett ez, és szeretne többet megtudni a kezdőoldalakról, akkor ez egy mély nyúllyuk, amelyet követni kell! Íme egy kis válogatás, amely segíthet a kezdőlap útján:

• Próbálta az alapvető kezdőlap útmutatót? Jó hír, van még, ahonnan származik! Tekintse meg a / stpg / többi útmutatóját további inspirációkért és fejlett funkciókért!
• Tekintse meg a Johnson megyei könyvtár katalógusát HTML és CSS nyelvű könyvekről - és könyvtári kártyájával vagy e -kártyájával hozzáférhet az e -könyvekhez is!
• A könyvtári kártyája hozzáférést biztosít az Udemy -hez, és tartalmaz néhány nagyon komplett osztályt a HTML -ről, a CSS -ről és a webdesignról.

Ha nagyon büszke vagy a teremtésedre, miért nem csinálsz képernyőképet, és nem osztod meg velünk a Twitteren vagy az Instagramon a #jocomakes hashtaggel? Mindig örömmel látjuk, hogy a védnökeink mit találnak ki!