Gör dig själv till en anpassad, minimalistisk startsida !: 10 steg

2024 Författare: John Day | [email protected]. Senast ändrad: 2024-01-30 12:37

Har du fått byta till mestadels distansarbete sedan COVID-19 blev en grej? Samma!

Att arbeta hemifrån med våra datorer och över Internet innebär ofta att vi måste hålla reda på många webbplatser för arbete, för skolan eller till och med … för skojs skull!

Bokmärken klarar inte alltid uppgiften, så vad sägs om att göra oss till en anpassad startsida som är skräddarsydd just för dig, med alla länkar du behöver, och som öppnas i din webbläsare varje gång du behöver den?

Här är vad du behöver:

• En dator (vår kör Windows, men alla moderna datorer gör det).
• En anslutning till Internet.
• En ny installation av textredigerare Anteckningar ++.

När du är klar, låt oss komma igång med att använda vår egen startsida -mall … Eller skapa din egen från början!

Steg 1: Skapa en startsida ELLER ladda ner vår anpassade mall

Vid denna tidpunkt har du två alternativ:

1. Ladda ner vår anpassade mall (instruktioner följer lite senare i det här steget) eller,
2. Följ denna grundläggande startsida guide; det kommer att leda dig genom byggstenarna på en enkel startsida steg för steg - och det är guiden vi följde för att bygga denna anpassade startsida!

Varför rekommendera en tutorial … i en tutorial? Vårt arbete som MakerSpace -facilitatorer är inte bara att visa dig hur du gör saker: det är också att ansluta dig till Maker -kulturen och de resurser som finns tillgängliga. Den här guiden är en av de platser där många startsidesdesigners kommer igång, så det var vettigt att dela den med dig!

Om du har tid, fortsätt med alternativ #2 men om du inte har det kan du alltid hänvisa till den grundläggande startsidan guide senare! För denna handledning antar vi bara att du laddar ner vår anpassade mall! För att ladda ner den:

1. Öppna vårt DIY_startpage -arkiv på Github.
2. Klicka på den stora gröna kodknappen för att öppna en rullgardinsmeny.
3. Klicka på Ladda ner ZIP för att ladda ner alla filer för projektet.
4. Extrahera alla filer från ZIP -filen som du just laddat ner till en plats du väljer.

GitHub är en webbplats där programmerare och designers över hela världen delar sin kod och skapelser med andra: den låter dig också samarbeta med andra om projekt av alla slag. Slutsatsen är, det är ett bra verktyg som alla Maker borde veta!

Starta nu din valda webbläsare: Jag gillar verkligen Firefox, men vår mall borde fungera på nästan alla nya webbläsare så använd gärna Edge, Chrome eller Safari!

Slutligen, öppna filen "DIY_startpage.html" i din webbläsare OCH i Anteckningar ++, och låt oss börja anpassa den!

Steg 2: Lista dina favoriter

Att ha en startsida är bra. Att ha en användbar startsida är ännu bättre och just nu ser vår lite tom ut!

Vilka är de saker du regelbundet checkar ut och behöver hålla koll på? Vilka webbkomiker läser du på morgonen? Vilken nyhetswebbplats gillar du att kolla? Det här är de saker som borde landa på din startsida.

För denna handledning använder jag bara några av mina favoriter. Spoiler varning, massor av länkar från biblioteket! Men också några av mina favoritmakare för inspiration och några av mina favoritunderhållningar. Du kan hitta alla dessa objekt nedan med en länk, som ett exempel!

Nyheter och läsning

• Digitala tidningar
• Digitala böcker
• Digitala tidskrifter

Inlärning

• W3C skolor
• Udemy
• Mangospråk

musik

• Lyssna lokalt
• Song Exploder
• Jamendo musikradioer

Skaparkultur

• Core77
• Lumecluster
• Melapropismer

Jag valde tre av mina favoriter för varje kategori, men du borde kunna välja mer eller mindre än så utan problem - layouten på din startsida anpassas automatiskt till antalet eller resurserna!

När du har listat alla dina favoriter, låt oss lägga dem åt sidan i en minut och arbeta med att göra vår generiska startsida -mall lite mer du.

Steg 3: Anpassa ditt teckensnitt

Starta Anteckningar ++, klicka på Arkiv> Öppna för att öppna din "DIY_startpage.html" -fil. Det du tittar på ser väldigt annorlunda ut än sidan i din webbläsare, eller hur? Det är koden för din sida, och webbläsare tolkar den koden för att få den att se lite mer ögonvänlig ut och göra allt vi behöver göra.

Koden för vårt startsida -projekt är skriven på två relaterade språk: HTML och CSS. HTML är vanligtvis ansvarig för innehållet på en sida och CSS ansvarar för utseendet på en sida.

Leta efter det första avsnittet för att anpassa din startsida:

html {

align-items: center; färg: #313131; display: flex; typsnitt: 22px "Courier New", Courier, monospace; höjd: 100%; justify-content: center; marginal: 0; }

Det här avsnittet på vår startsida fokuserar på det allmänna utseendet på artiklar på vår sida. Linjen:

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

handlar specifikt om det teckensnitt vi använder på startsidan och har två parametrar som definierar hur texten på din sida kommer att se ut: storlek och typsnittsfamilj.

• storlek - Det är vad den "22px" är. Storleken på din text på skärmen är definierad i "px", kort för pixlar.
• font family - Det är där vi listar de teckensnitt vi skulle vilja använda. Det är vanligtvis en bra idé att lista flera, från teckensnittet du verkligen vill använda den mest generiska familjen. Dessa teckensnitt är beroende av webbläsaren du använder, så om den mest specifika inte är tillgänglig kommer webbläsaren att prova nästa, och så vidare.

CSS Web Safe Fonts -sidan från w3schools har en bra lista med teckensnittskombinationer som ser bra ut, håller den stil du letar efter och fungerar på de flesta moderna webbläsare.

Du kan till exempel ersätta:

"Courier New", Courier, monospace;

med:

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

eller:

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

Spara din fil och uppdatera sidan i din webbläsare för att se ändringarna! Gillar du inte det? Inga problem! Lek med CSS Web Safe Fonts tills du hittar en kombination som du gillar.

Steg 4: Anpassa ditt titelcitat

Leta efter det här avsnittet i din HTML -fil:

Detta är din startsida! Njut av

Välj en offert du gillar och ersätt koden! För min egen valde jag

Ännu en gång till brottet

Layouten på din startsida bör anpassas direkt för att matcha ditt citat så snart du laddar om sidan i din webbläsare: i Firefox betyder det att du trycker på CTRL+R på tangentbordet eller klickar på ikonen Ladda om. Välj en offert som du gillar nu (eller välj något senare!) Och låt oss börja arbeta med att anpassa sektionerna på din startsida!

Steg 5: Anpassa dina sektioner

Nu när du har hittat en teckensnittskombination du gillar och du har ett bra citat som inspirerar dig, låt oss fortsätta och anpassa dina avsnitt.

Om du laddade ner vår startsida från Github har du 6 avsnitt att anpassa: den ursprungliga guiden har bara 4, men eftersom fler och fler aspekter av våra liv har flyttat online nyligen, gick jag vidare och lade till fler för säkerhets skull.

Hitta det första avsnittet och skriv bara in det vi behöver. Som en påminnelse är mitt första avsnitt "Nyheter och läsning":

Med din fil fortfarande öppen i Anteckningar ++ hittar du följande kodrad:

Sektion 1

och ersätt den med kategorin i din lista som du tror att du kommer att använda mest.

Eftersom många av oss är vana vid att börja läsa dokument uppe till vänster, kan det vara där dina ögon naturligtvis går - så dra nytta av det och behåll vår viktigaste go -to där! Men om du kommer från en kultur med en annan läsriktning, eller om du bara arbetar annorlunda, anpassa det här själv. Det är trots allt din startsida: du vet vad som är bäst för dig!

En sektionstitel nere, fem kvar! Leta efter kodraden som säger:

Sektion 2

Ändra det, fortsätt leta efter sektionstitlar och ändra dem tills du kommer till slutet av din lista. Om du inte använder alla sektioner, låt dem vara! Vi kommer också att göra en liten rengöring i slutet av denna handledning.

När du är klar med att anpassa avsnitt, spara bara dina ändringar i Anteckningar ++ och ladda om sidan i din webbläsare. Alla sektionstitlar borde dyka upp där du lägger dem: nu kan vi anpassa länkarna i varje avsnitt!

Steg 6: Anpassa dina länkar

Att anpassa länkarna i varje avsnitt är lite mer involverat men absolut inte mycket svårare!

Den här gången ändrar vi inte bara namnet på länkarna, vi ändrar också vad du kan göra med dem! Varje objekt i varje avsnitt kommer att bli klickbart, länka till en annan webbplats. Bonus, du kan också bestämma om du vill att den ska öppnas i ett nytt fönster eller inte!

Leta först efter en linje som ser ut som:

link_one_name

Välj den "link_one_name" -biten och ersätt den med din egen text. Till exempel är den första länken i det första avsnittet baserat på min lista från steg X "Digitala tidningar" så vi får:

Digitala tidningar

Låt oss sedan arbeta med att anpassa länken! Ersätt "link.one" -biten med din första länk. För mig är det länken till våra digitala tidningar, så det kommer att se ut så här:

Digitala tidningar

Spara ditt arbete i textredigeraren och ladda om sidan i din webbläsare

Du bör nu kunna klicka på den första länken du anpassade. Om det inte tog det är det OK! Börja om igen eller spåra dina steg tills länken öppnas när du klickar på den.

När du väl fått din första länk att fungera … Tja, allt du behöver göra är att upprepa dessa steg för varje länk i varje avsnitt tills du har anpassat alla namn och länkar på din startsida! Det finns dock bara en fångst: chansen är stor att när du klickar på en länk försvinner din startsida bara när den nya länken öppnas i samma flik eller fönster.

Det är inte särskilt bekvämt … Så vad sägs om att ändra hur länkar öppnas? Låt oss använda vår första länk som ett exempel! Du kommer säkert ihåg att det är här vi säger åt din webbläsare att öppna en länk när du klickar på den:

Digitala tidningar

Men gissa vad - det är också där vi bestämmer hur länken ska öppnas! Ändra det till:

Digitala tidningar

Spara nu ditt arbete och ladda om sidan i din webbläsare: länken öppnas nu på en ny flik när du klickar på den! På så sätt kan du hålla din startsida öppen när du behöver det.

Steg 7: Lägg till en bild på din startsida

Nu när alla våra länkar är konfigurerade är det dags att dekorera vår startsida! Denna mall har plats för en anpassad bild på skärmens högra sida. Nu tillbaka i Anteckningar ++, leta efter den här raden:

hela vägen i slutet av mallen. Välj en bild du gillar, flytta den till samma mapp som din startsida -fil och ersätt "library_picture.jpg" med filnamnet på din bild. Till exempel, om min fil heter "your_picture.jpg" blir raden:

Spara dina ändringar och ladda igen startsidan i din webbläsare.

Eftersom startsidans kod och dina bildfiler finns i samma mapp, bör bilden laddas automatiskt när du uppdaterar sidan. Om den inte gjorde det, kolla namnet på din fil - det är vanligtvis där jag får fel!

Smartphone tapeter passar bra för det projektet. I allmänhet, vilken vertikal bild som helst (eller som snygga människor säger "porträttorienterad bild" med ett 16: 9-förhållande) för den delen! Men layouten på vår startsida kommer att anpassas oavsett vad du kastar på den.

Om din bild dyker upp, grattis, du är ganska klar!

Steg 8: Rensa upp lite

Om du har extra avsnitt som du inte använder vid den tidpunkten, ta bort dem! Låt oss till exempel säga att du inte använder avsnitt 6. Hitta:

• Avsnitt 6
• Artikel 1
• Punkt 2
• Punkt 3

Välj och ta bort dessa rader, spara din fil och uppdatera filen i din webbläsare för att se till att allt är borta.

Detta är vanligtvis steget där jag bryter allt eftersom jag går för fort, så om något plötsligt inte fungerar kom ihåg: ta ett djupt andetag och ångra det du just gjorde med tangentkombinationen CTRL+Z på tangentbordet!

Steg 9: Gör det till en verklig startsida

Nu när startsidan öppnar alla länkar vi vill ha och ser ut som vi vill att den ska se ut, är det dags att öppna den när du startar din webbläsare!

Vid den tiden gillar jag att hålla allt borta från datorns skrivbord genom att klippa och klistra in min startsida -mapp i Windows 'Dokumentmapp. Så om du är klar med din startsida, gör det!

Nästa: troligtvis öppnas din webbläsare med din favorit sökmotor, eller kanske till och med en tom sida.

Du hittar instruktioner för att anpassa Firefox såväl som andra webbläsare nedan:

• Firefox instruktioner
• Google Chrome instruktioner
• Safari instruktioner
• Microsoft Edge -instruktioner

När du har följt instruktionerna för din webbläsare stänger du allt och öppnar det igen. Om det är din startsida som visas när din webbläsare startar, klarade du det!

Om det inte tog det, gå igenom instruktionerna för din webbläsare igen och se till att du inte missade något. Det värsta kommer till det värsta, starta sedan om datorn efter att ha sparat allt arbete. 9 gånger av 10, det löser allt!

Steg 10: Allt klart! Och vill du veta mer?

Grattis till avslutad startsida! Det kanske inte ser ut som mycket, men du har precis lärt dig att koda en av de viktigaste byggstenarna på en webbplats på samma sätt som jag gjorde … För cirka 20 år sedan!

Om du tyckte om detta och vill lära dig mer om startsidor är det ett djupt kaninhål att följa! Här är ett litet urval för att hjälpa dig på din startsida resa:

• Har du provat Grundläggande startsida guide? Goda nyheter, det är mer varifrån det kommer! Kolla in de andra guiderna av / stpg / för mer inspiration och avancerade funktioner!
• Kolla in Johnson County Library -katalogen för böcker om HTML och CSS - och med ditt bibliotekskort eller e -kort har du också tillgång till e -böcker!
• Ditt bibliotekskort ger dig också tillgång till Udemy, och det har några mycket kompletta klasser om HTML, CSS och webbdesign också.

Om du är superstolt över din skapelse, varför inte skärmdumpa och dela den med oss via Twitter eller Instagram med hashtaggen #jocomakes? Vi är alltid glada att se vad våra beskyddare hittar på!