Si të bëni një faqe në internet të hijshme dhe të thjeshtë me hapat 4: 7

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

Qëllimi i këtij udhëzuesi është t'u japë atyre që janë të njohur me programimin - HTML ose ndryshe - një hyrje të thjeshtë për të bërë një portofol në internet me Bootstrap 4. Unë do t'ju tregoj përmes konfigurimit fillestar të faqes në internet, si të krijoni disa blloqe të ndryshme të përmbajtjes, dhe disa probleme që mund të hasni.

Portofoli është i ndarë në një numër hapash më të vegjël për ta bërë atë më të menaxhueshëm: kornizë HTML, kornizë CSS, kornizë Javascript, shirit navigimi dhe faqen kryesore (me blloqe përmbajtjeje).

Nëse shpjegimet e mia për diçka ende ju lënë të hutuar, mos ngurroni të lini një koment me pyetjet, sugjerimet tuaja, ose google për elementin për të cilin jeni konfuz. Ka shumë burime në dispozicion për programimin e faqeve të internetit dhe Bootstrap.

Shënim: Ky udhëzues nuk është gjithëpërfshirës dhe nuk duhet të përdoret si zëvendësim për të mësuar se si të programoni në HTML, CSS ose Javascript.

Burimet e kërkuara

• Bootstrap 4
• jQuery 3.3.1

Burimet Opsionale

• FontAwesome
• Fontet e Google
• nxjerr në pah.js

Nëse dëshironi të kaloni në shembullin e plotë ose të hidhni një sy në depo:

• Shembull i plotë
• Depo

Shënim: Unë do të përdor Sublime në fotografi për shembujt e mi nëse dëshironi të ndiqni së bashku me të njëjtin redaktues teksti.

Hapi 1: Konfigurimi

Konfigurimi i dosjes

1. Krijoni një dosje diku ku mund të ruani gjithçka që do të shkarkojmë. Ky do të jetë drejtoria juaj kryesore për portofolin.
2. Krijoni një dosje brenda asaj të quajtur "bootstrap"
3. Krijoni një dosje tjetër brenda dosjes tuaj të portofolit rrënjë që quhet "jquery"

Dosja e Portofolit

| ----- bootstrap | ----- jquery

Bootstrap 4

1. Vizitoni faqen e tyre të internetit dhe klikoni butonin "Shkarkim" poshtë seksionit "Përpiluar CSS dhe JS".
2. Ruani skedarin.zip në dosjen tuaj "Shkarkime" ose në një vend tjetër të përshtatshëm.
3. Hapni skedarin.zip dhe nxirrni dosjet "css" dhe "js" në dosjen "bootstrap" që keni bërë më herët.

jQuery

1. Vizitoni faqen e tyre të internetit dhe shkarkoni "jQuery të pakompresuar, të zhvillimit 3.3.1"
2. Ruani atë skedar brenda dosjes "jquery" që keni bërë më herët.

Të gjitha kornizat tani janë gati për fillimin e punës në portofolin aktual.

Hapi 2: Korniza HTML (index.html)

Emri juaj

Ky kuadër nuk është asgjë tepër komplekse, por unë dua të shpjegoj qëllimet e përgjithshme të konfigurimit.

Bootstrap JS Pas jQuery

Duket se ka një lloj mbivendosjeje midis skedarit Javascript të Bootstrap dhe jQuery. Unë nuk testova për të parë se sa i gjerë është ky mbivendosje, por një shembull është funksionaliteti i zbritjes që përdor në shiritin e navigimit. Nëse ngarkoni së pari në Bootstrap, butoni zbritës nuk funksionon.

FontAwesome

Nëse keni bërë ndonjë zhvillim në internet, ka shumë mundësi që e dini se çfarë është FontAwesome. Sidoqoftë, nëse nuk është kështu, është një grup ikonash që përfshin një grup mjetesh për personalizim shtesë. Incredshtë tepër e dobishme nëse jeni si unë dhe nuk keni absolutisht asnjë talent artistik.

hightlight.js

Ky kuadër lejon nxjerrjen në pah të kodit dinamik në faqet e internetit. Mund ta importoni si pjesën tjetër të kornizave që përdor nëse përdorni vetëm gjuhë të zakonshme programimi, por ekziston gjithashtu një mundësi për të shkarkuar një grup të personalizuar gjuhësh. Zgjodha opsionin e fundit për shkak të disa gjuhëve makro dhe ini, por varet plotësisht nga ju.

Shënim: Jini të vetëdijshëm për vendet ku unë përdor lidhje të koduara me skedarë si dy ikonat dhe highlight.js. Gjithashtu, meqenëse kërkohen vetëm Bootstrap dhe jQuery, mos ngurroni të shtoni ose hiqni çdo kornizë tjetër. Nëse hiqni ndonjë, mos harroni të hiqni linjat e kodit që korrespondojnë më vonë.

Hapi 3: CSS Frame (style.css)

/ * * Shpresojmë se zbutja e ngjyrës bg në gri dhe ndryshimi i stilit të shkronjave e bën uebfaqen më të lehtë për t’u konsumuar */ body {sfondi: gri; font-family: 'Open Sans', sans-serif; }

/*

* Kjo siguron që shiriti nav të jetë mbi gjithçka */ nav {z-index: 9999; }

/*

* Kjo duhet ta bëjë tekstin e paragrafit më të lexueshëm */ p {font-size: 18px; margjina-krye: 5px; margjina-poshtë: 5px; }

/*

* Kjo siguron që të gjitha blloqet e mia të kodit të jenë të formatuara saktë */ code {text-align: left; }

/*

* Nuk dua që listat të kenë plumba */ li {lista-style-type: asnjë; }

/*

* Lidhjet janë blu si parazgjedhje, dhe unë dua që ata të përputhen me stilin e Bootstrap */ li a, a {ngjyra: e bardhë; }

/*

* Unë lidh një etiketë të klasës në një div që përmban shiritin e navigacionit për t'u siguruar që përmbajtja të mos mbivendoset */.navFix {padding-bottom: 70px; }

/*

* Rritja e madhësisë shtrihet navbar */.social-media {font-size: 1.3em; }

/*

* Ngjyra e paracaktuar e theksimit për lidhjet zbritëse është e bardhë */.dropdown-menu a: hover {background-color: #212529; }

/*

* Ndarjet e forcave që tregojnë pdf në një lartësi të caktuar */.pdfFill {lartësia: 45rem; }

/*

* Shtoni një distancë midis butonave dhe blloqeve të kodit */.codeStyle {padding-top: 30px; }

Kam përfshirë elementët CSS të bazuar në përmbajtje në këtë kornizë për t'u përpjekur t'ju kursej pak kohë më vonë. Ato janë të gjitha shumë të thjeshta dhe janë kryesisht ndryshime të cilësisë së jetës që e bëjnë ndërveprimin me portofolin më të lehtë për lexuesit.

nav-z indeksi

Unë kam një sasi shumë të kufizuar të përvojës së zhvillimit të uebit, kështu që nuk jam i sigurt nëse ky është një problem i zakonshëm gjatë zbatimit të shiritit të lundrimit të Bootstrap, por pa ndonjë specifikim orientimi ballë-mbrapa, shiriti i navigimit në të vërtetë do të shfaqet nën përmbajtje të tjera si Kartat e Bootstrap. Kjo është më e dukshme me shiritin e palosshëm, por gjithsesi për sigurinë kam përfshirë ndryshimin e indeksit.

përafrimi i kodit

Meqenëse zakonisht përdor klasat e "justifikimit të përmbajtjes" dhe "qendrës së tekstit" të Bootstrap për të lidhur elementët, nuk dua që kodi im të trashëgojë atë natyrë të rreshtuar në qendër. Kjo rregullohet lehtësisht duke mbishkruar çdo ndryshim të shtrirjes dhe duke bërë etiketat e kodit të rreshtuara në të majtë: kjo ruan ndarjen e skedave në kod.

mbushje navFix

Kur shiriti i lundrimit i Bootstrap është ngjitur në krye të faqes, përmbajtja do të ngarkohet nën të. Unë besoj se kjo ndodh sepse shiriti i navigimit në fakt është ngjitur në krye të portës së shikimit në vend të vetë faqes. Pavarësisht se kjo rregullohet duke rritur hapësirën midis navbar dhe pjesës tjetër të përmbajtjes.

lartësia e pdf

Lartësia e paracaktuar e skedarëve pdf është tepër e vogël. Essentialshtë në thelb e palexueshme, kështu që ndryshova lartësinë për të provuar dhe për të dhënë hapësirë të mjaftueshme për afërsisht një faqe në të njëjtën kohë.

Hapi 4: Javascript Frame (javascript.js)

/ * * Kjo kërkon për çdo element me klasën 'ndërro' dhe ose e fsheh ose e fsheh atë */ funksioni toggleSection (id, toggleID) {if (document.getElementById (id)) {var divID = document.getElementById (id); var divArray = document.getElementsByClassName (toggleID);

për (var i = 0; i <divArray.length; i ++) {divArray .style.display = "asnjë"; }

divID.style.display = "bllok";

}

kthehu i rremë;

}

/*

* Kodi që duhet të ekzekutohet në një mënyrë të caktuar */ $ (dokument). Tashmë (funksion () {/ * * Ngarkoni përmbajtje nga skedarët */

/*

* Detyroni një vonesë të vogël për të ngarkuar në të dhënat */ setTimeout (funksioni () {/ * * Theksoni të gjithë kodin që është ngarkuar në */ $ ('kodi paraprak'). Secili (funksioni (i, blloku) { hljs.highlightBlock (bllok);});}, 1000); });

Për ta bërë këtë portofol të lehtë për tu modifikuar dhe menaxhuar, vendosa të përdor një format me një faqe. Ajo mban gjithçka lokale në pjesën më të madhe dhe e bën përmbajtjen të ngarkohet më shpejt.

ndryshimSeksioni

Kam përdorur vlerat e klasës për të menaxhuar se çfarë përmbajtje duhet të shfaqet ose fshihet sepse shumicën e kohës unë jam duke përdorur divs për të ndarë dhe grupuar elemente të shumta së bashku. Ju mund ta përdorni këtë për të grupuar së bashku butonat individualë, por kërkon një kontroll shtesë para se të vendosni ekranin "bllok" për të lejuar që të mos shfaqet asnjë përmbajtje.

ngarkimi i dokumentit

Unë e përfshiva këtë sepse në përgjithësi është e çrregullt të përfshish një bandë kodesh të pavarur programimi në skedarë të rregullt HTML. Ne mund ta përdorim këtë metodë të theksimit dinamik për të detyruar që procesi të zhvillohet pasi të ngarkojmë përmbajtjen nga skedarët e tjerë.

$ ('#mq2-hyrje'). load ("files/tutorials/mq2/mq2-intro/content.html");

Ky është një shembull se si do të ngarkojmë përmbajtjen.

Hapi 5: Shiriti i navigimit

Inicialet

• Në shtëpi
• Rreth meje
• Projekte Tutorials
• Me kontakto

Shiriti i navigimit është elementi më kompleks nga gjithçka në portofol. Kombinimi i plotë i klasave e bën atë si një enigmë që kërkon që ju të shikoni vazhdimisht librin e rregullave.

Funksionaliteti i Bootstrap

Bootstrap funksionon në thelb përmes vlerave të ndryshme të klasës. Duke parë vetë elementin "nav", nuk është shumë e vështirë të përcaktosh qëllimin e secilës klasë:

"Navbar" ynë është opsioni "md" (i mesëm), i aftë për "zgjerim", "i errët". Dhe ne e "fiksuam" atë në "majë". Duket konfuze sepse është një përzierje identifikuesish, por nëse i shikoni si mbiemra për elementin, bëhet shumë më e lehtë të kuptoni se çfarë po ndodh.

Markë

Marka është logoja dhe emri tipik që shihni në çdo faqe në internet lart majtas. It'sshtë një element i provuar dhe i vërtetë i projektimit që çdo përdorues pret në këtë pikë.

Shënim: Etiketat "i" janë në të vërtetë ikonat FontAwesome dhe ju i merrni këto etiketa nga faqja e çdo ikone.

Toggler/Butoni i palosshëm (celular)

Ky buton shfaqet vetëm në pajisjet mobile. Por meqenëse ne kemi përfshirë në deklaratën "nav" që shiriti i navigimit duhet të jetë i zgjerueshëm, këto elementë lidhen me njëri-tjetrin përmes ID-ve të tyre dhe identifikuesve të "ndryshimit të të dhënave".

Lidhjet e shiritit (në anën e majtë)

Këto lidhje varen plotësisht nga ato kategori që ju nevojiten për portofolin tuaj. Kam përfshirë disa nga shembujt tipikë si pikënisje, por askush nuk është i njëjtë. Ju mund të mos keni nevojë për një seksion "Mësime" sepse përqendroheni në krijimin e skulpturave të artit. Çdo artikull "li" mund të kopjohet dhe ngjitet, kështu që sapo të kuptoni se çfarë ju nevojitet, është e lehtë të vendosni navigimin.

Shënim: Ju mund të krijoni teknikisht menutë zbritëse brenda menyve të tjera zbritëse, por unë nuk do ta rekomandoja nëse nuk jeni të gatshëm të shtoni më shumë CSS dhe Javascript për ta bërë ndërfaqen të duket e pastër.

Lidhjet e shiritit (në anën e djathtë)

Duke dhënë listën e duhur të lidhjeve të klasës "ml-auto", Bootstrap ndan në mënyrë të barabartë të dy listat në mënyrë të barabartë. Kjo krijon ndarjen e pastër të anës së majtë dhe të djathtë. Vendosa ta përdor këtë hapësirë për lidhjet e mediave sociale sepse është një metodë shumë e zakonshme dhe e popullarizuar për të rritur praninë tuaj. Nëse kjo nuk është e rëndësishme, mund t'i hiqni këto lidhje për një shirit kërkimi, informacion hyrjeje, etj. Por vetëm mos harroni se është hapësirë e rëndësishme për t'u përdorur. Dhe ngjashëm me lidhjet navbar në anën e majtë, ju gjithashtu mund t'i kopjoni dhe ngjisni këto.

Shënim: Nëse planifikoni të përdorni lidhjet që kam krijuar tashmë, ndryshoni "emrin e përdoruesit" në vetë lidhjet "href".

Hapi 6: Faqja kryesore

Emri juaj

Programues Writer Gamer

Ky seksion, dhe faqet tuaja të mëvonshme të përmbajtjes, do të varen nga ajo që dëshironi të vendosni në portofolin tuaj. Padyshim që nuk mund t'i drejtohem çdo lloji të vetëm të përmbajtjes, por u përpoqa të përfshija imazhe, pdf, video, blloqe kodesh, disa nga përfshirjet tipike.

Formati i tabelës

Faqja kryesore është krijuar për të vepruar si një tryezë. Unë nuk do të mbështetesha në aftësitë e mia të mahnitshme të projektimit për të krijuar produktin tuaj përfundimtar, por shtova variacionet e ndryshme të kombinimeve të rreshtave dhe kolonave për të treguar se është shumë dinamik dhe fleksibël. Ju mund të krijoni 3 rreshta dhe 2 kolona për të pasur butona në të majtë dhe përmbajtje në të djathtë, ose mund të bëni diçka krejtësisht të ndryshme. Duhet vetëm një eksperimentim i vogël.

Butonat

Këto funksionojnë në thelb si butonat e zakonshëm. I vetmi integrim i vërtetë i Bootstrap këtu rrjedh nga stili që përputhet me pjesën tjetër të temës. Përndryshe, krijoni sa më shumë ose aq butona të vegjël që ju nevojiten për të shfaqur përmbajtjen tuaj dhe më pas sigurohuni që të përputheni me lidhjet href me ID -të për div -et.

Përmbajtja e Kodit të Programimit

Etiketat "kod" janë etiketat e paracaktuara që highlight.js përdor për të menaxhuar të gjithë theksimin. Nëse ju kujtohet nga skedari javascript.js, ka një seksion për të ngarkuar në përmbajtje nga skedarët e tjerë.

$ ('#home-programmer-macro'). load ("files/home/watchLoot.mac");

• Pjesa e parë e kësaj kërkon "id" të elementit në të cilin dëshironi të futni përmbajtjen.
• Pjesa e dytë është vendndodhja e skedarit në të cilin dëshironi të ngarkoni.

Shënim: Përmbajtja në të vërtetë nuk do të ngarkohet plotësisht sepse ka një shans të mirë që ta redaktoni këtë faqe në vend në vend të një serveri. Kjo mund të trajtohet nga një numër mënyrash të ndryshme të cilat do t'i trajtoj në fund të Instructable.

Video në YouTube

"Iframe" e ngulitur në të vërtetë vjen nga vetë YouTube. Unë nuk do të shpjegoj gjerësisht se si t'i merrni ato, por kur shkoni te "Share" një video, ekziston një opsion "Embed" që do t'ju ndihmojë të gjeneroni kodin e nevojshëm për të shfaqur videon tuaj në faqen e internetit.

Hapi 7: Duke parë përpara

Ekziston një shans shumë i mirë që unë të mos mbuloj ndonjë element ose lloj përmbajtje që dëshironi të përfshini në faqen tuaj të internetit. Fatmirësisht ka shumë mundësi të mira për ju që të bëni vetë hapat e ardhshëm.

Dokumentacioni i Bootstrap

Dokumentacioni i Bootstrap është një vend i shkëlqyeshëm për të filluar nëse jeni duke kërkuar elementë të para-programuar dhe kanë shembuj me të cilët mund të kopjoni dhe ngjisni në portofolin tuaj për të eksperimentuar. Unë nuk preka Kartat, Karuselët ose Formularët. Unë rekomandoj shumë që të shikoni seksionin "Përbërësit" për të parë opsionet.

W3Shkolla

W3Schools është një uebfaqe e mrekullueshme ku mund të mësoni pothuajse gjithçka që lidhet me programimin dhe zhvillimin e uebit. Ata janë shumë më të zgjuar se unë dhe mbulojnë pothuajse çdo funksionalitet HTML, CSS dhe Javascript që mund të mendoni.

Pritja e Portofolit Tuaj

Ky Instructable ju mëson se si të strehoni faqen tuaj në disa platforma të ndryshme. Këto janë hapat që duhet të ndërmerrni nëse doni të jeni në gjendje t'i tregoni portofolit tuaj njerëzve, rekrutuesve, etj.

Eksperimentoni dhe argëtohuni

E vetmja mënyrë për të bërë një portofol të shkëlqyeshëm është duke eksperimentuar dhe provuar gjithçka dhe gjithçka që duket interesante. Shumë portofole të dizajnit të zbukuruar dhe uebfaqe përdorin efekte të shkëlqyera tranzicioni ose prejardhje dinamike, por asnjëri prej tyre nuk u bë i paracaktuar.