Padariet sev pielāgotu, minimālistisku sākumlapu!: 10 soļi

2024 Autors: John Day | [email protected]. Pēdējoreiz modificēts: 2024-01-30 10:51

Vai jums ir nācies pārslēgties galvenokārt uz attālinātu darbu, kopš Covid-19 kļuva par lietu? Tas pats!

Darbs no mājām ar mūsu datoriem un internetā bieži nozīmē, ka mums ir jāseko daudzām tīmekļa vietnēm, lai strādātu, mācītos skolā vai pat … izklaides nolūkos!

Grāmatzīmes ne vienmēr atbilst uzdevumam, tad kā būtu izveidot sev pielāgotu sākumlapu, kas pielāgota tieši jums, ar visām nepieciešamajām saitēm, un tā tiek atvērta jūsu tīmekļa pārlūkprogrammā katru reizi, kad tā nepieciešama?

Lūk, kas jums būs nepieciešams:

• Dators (pie mums darbojas sistēma Windows, bet derēs jebkurš mūsdienu dators).
• Savienojums ar internetu.
• Jauna teksta redaktora Notepad ++ instalācija.

Kad esat gatavs, sāksim darbu, izmantojot mūsu sākumlapas veidni … Vai arī izveidojiet savu no sākuma!

1. darbība: izveidojiet sākuma lapu VAI lejupielādējiet mūsu pielāgoto veidni

Šajā brīdī jums ir divas iespējas:

1. Lejupielādējiet mūsu pielāgoto veidni (norādījumi tiek sniegti nedaudz vēlāk šajā solī) vai,
2. Izpildiet šo sākuma rokasgrāmatu; tas soli pa solim iepazīstinās jūs ar vienkāršas sākuma lapas pamatelementiem - un tas ir ceļvedis, kuru mēs ievērojām, lai izveidotu šo pielāgoto sākumlapu!

Kāpēc ieteiktu pamācību… apmācībā? Mūsu kā MakerSpace koordinatoru darbs nav tikai, lai parādītu jums, kā rīkoties, bet arī lai jūs savienotu ar Maker kultūru un pieejamajiem resursiem. Šī rokasgrāmata ir viena no vietām, kur sāk darbu daudzi sākuma lapu dizaineri, tāpēc bija jēga to kopīgot ar jums!

Ja jums ir laiks, turpiniet ar 2. iespēju, bet, ja jums tā nav, jūs vienmēr varat atsaukties uz sākumlapas pamata ceļvedi vēlāk! Šajā apmācībā mēs tikai pieņemsim, ka lejupielādējat mūsu pielāgoto veidni! Lai to lejupielādētu:

1. Atveriet mūsu DIY_startpage krātuvi vietnē Github.
2. Noklikšķiniet uz lielās zaļās koda pogas, lai atvērtu nolaižamo izvēlni.
3. Noklikšķiniet uz Lejupielādēt ZIP, lai lejupielādētu visus projekta failus.
4. Izvelciet visus failus no tikko lejupielādētā ZIP faila uz jūsu izvēlēto vietu.

GitHub ir vietne, kurā programmētāji un dizaineri visā pasaulē dalās ar saviem kodiem un radītajiem citiem: tā arī ļauj sadarboties ar citiem visu veidu projektos. Galvenais ir tas, ka tas ir lielisks rīks, kas jāzina ikvienam veidotājam!

Tagad sāciet izvēlēto pārlūkprogrammu: man ļoti patīk Firefox, taču mūsu veidnei vajadzētu darboties gandrīz jebkurā nesenā tīmekļa pārlūkprogrammā, tāpēc droši izmantojiet Edge, Chrome vai Safari!

Visbeidzot, atveriet failu "DIY_startpage.html" savā pārlūkprogrammā UN Notepad ++, un sāksim to pielāgot!

2. solis: uzskaitiet savus izlasi

Ir lieliska sākuma lapa. Ar noderīgu sākumlapu ir vēl labāk, un šobrīd mūsējā izskatās mazliet tukša!

Kādas lietas jūs regulāri pārbaudāt un kurām ir jāseko? Kādus tīmekļa komiksus jūs lasāt no rīta? Kādu ziņu vietni tev patīk pārbaudīt? Šīs ir lietas, kurām vajadzētu nonākt jūsu sākumlapā.

Šajā apmācībā es izmantošu tikai dažus no maniem favorītiem. Brīdinājums par spoileri, daudz saišu no bibliotēkas! Bet arī daži no maniem iecienītākajiem veidotājiem iedvesmai un dažas no manām iecienītākajām izklaidēm. Visus šos vienumus varat atrast zemāk ar saiti, piemēram!

Ziņas un lasīšana

• Digitālie laikraksti
• Digitālās grāmatas
• Digitālie žurnāli

Mācīšanās

• W3C skolas
• Ūdemijs
• Mango valodas

Mūzika

• Klausieties Local
• Dziesmu eksplodētājs
• Jamendo mūzikas radio

Veidotāju kultūra

• Core77
• Lumecluster
• Melapropisms

Katrai kategorijai es izvēlējos trīs savus favorītus, bet jums vajadzētu būt iespējai bez problēmām izvēlēties vairāk vai mazāk - jūsu sākuma lapas izkārtojums automātiski pielāgosies skaitlim vai resursiem!

Kad būsit uzskaitījis visus savus iecienītākos, atstāsim tos uz minūti un strādāsim pie tā, lai padarītu mūsu vispārējo sākuma lapas veidni nedaudz vairāk par jums.

3. darbība: pielāgojiet fontu

Palaidiet Notepad ++, noklikšķiniet uz Fails> Atvērt, lai atvērtu failu "DIY_startpage.html". Tas, ko jūs skatāties, izskatās ļoti atšķirīgi no jūsu pārlūkprogrammas lapas, vai ne? Tas ir jūsu lapas kods, un pārlūkprogrammas interpretē šo kodu, lai tas izskatītos mazliet draudzīgāks acīm un veiktu visas nepieciešamās darbības.

Mūsu sākuma lapas projekta kods ir uzrakstīts divās saistītās valodās: HTML un CSS. HTML parasti ir atbildīgs par lapas saturu, bet CSS - par lapas izskatu.

Lai pielāgotu sākuma lapu, meklējiet šo pirmo sadaļu:

html {

align-items: centrs; krāsa: #313131; displejs: elastīgs; fonts: 22px "Courier New", Courier, monospace; augstums: 100%; attaisnot saturu: centrs; rezerve: 0; }

Šī mūsu sākuma lapas sadaļa ir vērsta uz mūsu lapas vienumu vispārējo izskatu. Līnija:

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

īpaši attiecas uz fontu, ko izmantojam sākuma lapā, un tam ir divi parametri, kas nosaka jūsu lapas teksta lielumu un fontu saimi.

• izmērs - tas ir tas, kas ir "22 pikseļi". Ekrānā redzamā teksta lielums ir noteikts pikseļos, kas ir pikseļi.
• fontu saime - tur mēs uzskaitām fontus, kurus mēs vēlētos izmantot. Parasti ir ieteicams uzskaitīt vairākus, sākot ar fontu, kuru patiešām vēlaties izmantot vispopulārākajai saimei. Šie fonti ir atkarīgi no jūsu izmantotās pārlūkprogrammas, tādēļ, ja konkrētā nav pieejama, pārlūkprogramma izmēģinās nākamo utt.

CSS Web Safe Fonts lapā no w3schools ir lielisks fontu kombināciju saraksts, kas izskatās lieliski, saglabā meklēto stilu un darbosies lielākajā daļā mūsdienu pārlūkprogrammu.

Piemēram, varat nomainīt:

"Kurjers Jauns", Kurjers, monospace;

ar:

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

vai:

"Comic Sans MS", kursīvs, bez serifa;

Saglabājiet failu un atsvaidziniet lapu savā pārlūkprogrammā, lai redzētu izmaiņas! Nepatīk? Nekādu problēmu! Spēlējiet ar CSS Web Safe Fonts, līdz atrodat sev tīkamu kombināciju.

4. solis: pielāgojiet savu virsraksta citātu

Meklējiet šo sadaļu savā HTML failā:

Šī ir jūsu sākumlapa! Izbaudi

Izvēlieties citātu, kas jums patīk, un nomainiet kodu! Savējiem es izvēlējos

Vēlreiz par pārkāpumu

Sākumlapas izkārtojumam ir jāpielāgojas, lai tas atbilstu jūsu citātam, tiklīdz pārlādējat lapu pārlūkprogrammā: pārlūkprogrammā Firefox tas nozīmē, ka tastatūrā jānospiež CTRL+R vai jānoklikšķina uz ikonas Pārlādēt. Izvēlieties citātu, kas jums patīk tagad (vai izvēlieties kaut ko vēlāk!), Un sāksim darbu, pielāgojot jūsu sākuma lapas sadaļas!

5. darbība: pielāgojiet sadaļas

Tagad, kad esat atradis fontu kombināciju, kas jums patīk, un jums ir lielisks citāts, kas jūs iedvesmo, turpināsim un pielāgosim jūsu sadaļas.

Ja lejupielādējāt mūsu sākumlapu no vietnes Github, jums ir pieejamas 6 sadaļas, ko pielāgot: sākotnējā rokasgrāmatā ir tikai 4, bet, tā kā pēdējā laikā arvien vairāk mūsu dzīves aspektu ir pārvietoti tiešsaistē, es turpināju un pievienoju vēl vairāk.

Atrodiet pirmo sadaļu un vienkārši ierakstiet to, kas mums nepieciešams. Atgādinu, ka mana pirmā sadaļa ir "Ziņas un lasīšana":

Kad jūsu fails joprojām ir atvērts Notepad ++, atrodiet šādu koda rindu:

1. iedaļa

un aizstājiet to ar kategoriju savā sarakstā, kuru, jūsuprāt, izmantosit visvairāk.

Tā kā daudzi no mums ir pieraduši sākt dokumentu lasīšanu no augšējā kreisā stūra, tad jūsu acis, protams, var aiziet - tāpēc izmantojiet to un turpiniet mūsu vissvarīgāko apmeklējumu! Bet, ja jūs nākat no kultūras ar citu lasīšanas virzienu vai vienkārši strādājat citādi, pielāgojiet to sev. Galu galā tā ir jūsu sākuma lapa: jūs zināt, kas jums ir vislabākais!

Viens sadaļas nosaukums uz leju, vēl pieci! Meklējiet koda rindiņu, kurā teikts:

2. iedaļa

Mainiet to, tad turpiniet meklēt sadaļu nosaukumus un mainiet tos, līdz sasniedzat saraksta beigas. Ja neizmantojat visas sadaļas, vienkārši atstājiet tās! Arī šīs apmācības beigās mēs veiksim nelielu tīrīšanu.

Kad esat pabeidzis sadaļu pielāgošanu, vienkārši saglabājiet izmaiņas Notepad ++ un atkārtoti ielādējiet lapu savā pārlūkprogrammā. Visiem sadaļu nosaukumiem vajadzētu parādīties vietā, kur tos ievietojāt: tagad mēs varam pielāgot saites katrā sadaļā!

6. darbība: pielāgojiet savas saites

Saites pielāgošana katrā sadaļā ir nedaudz vairāk iesaistīta, bet noteikti ne daudz grūtāk!

Šoreiz mēs mainām ne tikai saišu nosaukumu, bet arī to, ko jūs varat darīt ar tām! Katrs vienums katrā sadaļā kļūs noklikšķināms, novirzot uz citu vietni. Bonuss, jūs varat arī izlemt, vai vēlaties to atvērt jaunā logā vai nē!

Vispirms meklējiet līniju, kas izskatās šādi:

link_one_name

Atlasiet bitu "saites_viena_nosaukums" un aizstājiet to ar savu tekstu. Piemēram, pirmā saite pirmajā sadaļā, pamatojoties uz manu X posma sarakstu, ir "Digitālie laikraksti", tāpēc mēs iegūstam:

Digitālie laikraksti

Tālāk strādāsim, lai pielāgotu saiti! Nomainiet bitu "link.one" ar savu pirmo saiti. Man tā būs saite uz mūsu digitālajiem laikrakstiem, tāpēc tā izskatīsies šādi:

Digitālie laikraksti

Saglabājiet savu darbu teksta redaktorā un atkārtoti ielādējiet lapu savā pārlūkprogrammā

Tagad jums vajadzētu būt iespējai noklikšķināt uz pirmās pielāgotās saites. Ja tas nebija vajadzīgs, tas ir labi! Sāciet no jauna vai izsekojiet soļiem, līdz saite tiek atvērta, noklikšķinot uz tās.

Kad pirmā saite darbojas … Nu, viss, kas jums jādara, ir atkārtot šīs darbības katrai saitei katrā sadaļā, līdz esat pielāgojis visus nosaukumus un saites savā sākuma lapā! Tomēr ir tikai viena nianse: iespējams, noklikšķinot uz saites, sākuma lapa vienkārši pazūd, jo jaunā saite tiek atvērta tajā pašā cilnē vai logā.

Tas nav ļoti ērti … Tātad, kā mainīt saišu atvēršanas veidu? Izmantosim mūsu pirmo saiti kā piemēru! Jūs droši vien atceraties, ka šeit mēs liekam jūsu pārlūkprogrammai atvērt saiti, kad uz tās noklikšķināt:

Digitālie laikraksti

Bet uzmini nu - arī tur mēs izlemjam, kā saite tiks atvērta! Mainiet to uz:

Digitālie laikraksti

Tagad saglabājiet savu darbu un pārlādējiet lapu pārlūkprogrammā: saite tagad tiks atvērta jaunā cilnē, kad uz tās noklikšķināsit! Tādā veidā jūs varat saglabāt savu sākumlapu atvērtu, kad tas ir nepieciešams.

7. darbība: pievienojiet attēlu savai sākumlapai

Tagad, kad visas mūsu saites ir iestatītas, ir pienācis laiks izrotāt mūsu sākumlapu! Šajā veidnē ekrāna labajā pusē ir vieta pielāgotam attēlam. Tagad atpakaļ pie Notepad ++, meklējiet šo rindu:

līdz veidnes beigām. Izvēlieties attēlu, kas jums patīk, pārvietojiet to tajā pašā mapē, kurā atrodas sākumlapas fails, un aizstājiet “library_picture.jpg” ar attēla faila nosaukumu. Piemēram, ja mana faila nosaukums ir "your_picture.jpg", rindiņa kļūst šāda:

Saglabājiet izmaiņas un vēlreiz pārlādējiet sākuma lapu pārlūkprogrammā.

Tā kā jūsu sākumlapas kods un attēlu faili atrodas vienā mapē, attēls jāielādē automātiski, atsvaidzinot lapu. Ja tā nenotika, pārbaudiet sava faila nosaukumu - tur parasti es kļūdos!

Viedtālruņa tapetes ir lieliski piemērotas šim projektam. Kopumā jebkurš vertikāls attēls (vai, kā izdomāti cilvēki saka "portreta orientācijas attēls" ar 16: 9 attiecību) šajā jautājumā! Bet mūsu sākumlapas izkārtojums tiks pielāgots neatkarīgi no tā, ko jūs tam metat.

Ja parādās jūsu attēls, apsveicam, jūs esat gandrīz paveicis!

8. solis: mazliet iztīriet

Ja jums ir papildu sadaļas, kuras tajā brīdī neizmantojat, lūdzu, izdzēsiet tās! Piemēram, pieņemsim, ka neizmantojat 6. sadaļu. Atrodiet:

• 6. iedaļa
• 1. punkts
• 2. punkts
• 3. punkts

Atlasiet un izdzēsiet šīs rindiņas, saglabājiet failu un atsvaidziniet failu pārlūkprogrammā, lai pārliecinātos, ka viss ir pazudis.

Parasti tas ir solis, kurā es visu salauzu, jo eju pārāk ātri, tādēļ, ja pēkšņi kaut kas nedarbojas, atcerieties: ievelciet dziļu elpu un atceliet to, ko tikko izdarījāt, izmantojot tastatūras taustiņu kombināciju CTRL+Z!

9. darbība. Padariet to par faktisko sākuma lapu

Tagad, kad sākumlapa atver visas vēlamās saites un izskatās tā, kā mēs to vēlamies, ir pienācis laiks to atvērt, kad sākat pārlūkprogrammu!

Tajā brīdī man patīk turēt visu prom no sava datora darbvirsmas, izgriežot un ielīmējot sākuma lapas mapi Windows mapē Dokumenti. Tātad, ja esat pabeidzis darbu pie sākuma lapas, dariet to!

Nākamais: visticamāk, jūsu pārlūkprogramma tiek atvērta ar jūsu iecienītāko meklētājprogrammu vai varbūt pat tukšu lapu.

Tālāk varat atrast norādījumus par Firefox, kā arī citu pārlūkprogrammu pielāgošanu:

• Firefox instrukcijas
• Google Chrome instrukcijas
• Safari instrukcijas
• Microsoft Edge instrukcijas

Kad esat izpildījis pārlūkprogrammā sniegtos norādījumus, aizveriet to un atveriet to vēlreiz. Ja jūsu sākumlapa tiek parādīta pārlūkprogrammas palaišanas laikā, jūs to izdarījāt!

Ja tas nenotika, vēlreiz izlasiet pārlūkprogrammas norādījumus un pārliecinieties, ka neko nepalaidāt garām. Sliktākajā gadījumā vissliktāk, pēc tam pēc visa darba saglabāšanas restartējiet datoru. 9 reizes no 10, tas atrisina visu!

10. solis: viss ir paveikts! Un, vai vēlaties uzzināt vairāk?

Apsveicam ar sākuma lapas pabeigšanu! Tas varētu neizskatīties daudz, bet jūs tikko esat iemācījušies kodēt vienu no vissvarīgākajiem vietnes blokiem tā, kā es to darīju … Apmēram pirms 20 gadiem!

Ja jums tas patika un vēlaties uzzināt vairāk par sākuma lapām, ir jāievēro dziļa trušu bedre! Šeit ir neliela izvēle, kas jums palīdzēs ceļojumā pa sākumlapu:

• Vai jūs izmēģinājāt pamata sākumlapu? Labas ziņas, no kurienes tas nāk! Lai iegūtu vairāk iedvesmas un papildu funkcijas, skatiet citus ceļvežus no / stpg /!
• Iepazīstieties ar Džonsona apgabala bibliotēkas katalogu, kurā atrodamas grāmatas par HTML un CSS, un, izmantojot savu bibliotēkas karti vai e -karti, varat piekļūt arī e -grāmatām!
• Jūsu bibliotēkas karte arī nodrošina piekļuvi Udemy, un tajā ir arī dažas ļoti pilnīgas HTML, CSS un tīmekļa dizaina nodarbības.

Ja jūs esat ļoti lepns par savu radīto, kāpēc jūs nevarat parādīt ekrānuzņēmumu un kopīgot to ar mums vietnē Twitter vai Instagram, izmantojot hashtag #jocomakes? Mēs vienmēr esam priecīgi redzēt, ko mūsu patrons izdomā!