Kā izveidot vietni minūtēs, izmantojot HTML5 katlu plāksni

Kā izveidot vietni minūtēs, izmantojot HTML5 katlu plāksni

Veidojot jaunu vietni, mūsdienās vēlaties, lai tā būtu saderīga ar HTML5. Bet jūs arī nevēlaties tērēt nevajadzīgu laiku, lai no nulles apgūtu HTML5 smalkumus, vai ne?





Par laimi, HTML5 katla plāksnes veidne var palīdzēt. Tā ir vienkārša priekšgala veidne, kuru varat izmantot, lai dažu minūšu laikā izveidotu HTML5 vietni. Bet tas ir arī pietiekami spēcīgs, lai to varētu izmantot kā sarežģītas, pilnībā piedāvātas vietnes pamatu.



operētājsistēmas Windows 7 nav atrastas

Šajā HTML5 katalogā iekļautajā apmācībā tiks apskatīts veidnē iekļautais, pamatinformācija par tās izmantošanu un daži resursi turpmākai mācībai. Es arī parādīšu, kā es izmantoju veidni, lai izveidotu ļoti vienkāršu vietni ar tikai dažām HTML rindām.





HTML5 katla plāksnes veidne

Lejupielādējot veidni no HTML5 Boilerplate, tiek parādītas vairākas mapes un faili. Šeit ir ZIP faila saturs:

css
---main.css
---normalize.css
doc
img
js
---main.js
---plugins.js
---vendor
---jquery.min.js
---modernizr.min.js
.editorconfig
.htaccess
404.html
browserconfig.xml
favicon.ico
humans.txt
icon.png
index.html
robots.txt
site.webmanifest
tile.png
tile-wide.png

Šeit mēs neizskatīsim visus veidnes elementus, tikai pamatus. Lai pārliecinātos, ka jums ir resursi visu failu izmantošanai, mēs sāksim ar palīdzības dokumentiem.



HTML5 katla plāksnes palīdzības dokumentācija

Boilerplate ir kolekcija palīdzības dokumenti, kas tiek mitināti vietnē GitHub . Tas ir liels palīgs, ja jums ir tehniski jautājumi vai rodas jautājums, kāpēc kaut kas tika izstrādāts tā, kā tas bija.

Gandrīz viss dokumentācijā iekļautais ir iekļauts arī veidnes doku mapē. Jūs redzēsit vairākus Markdown (.md) failus, kas ir ļoti noderīgi, lai saprastu, kā izveidot vietni Boilerplate.



Ja vēlaties visu izlasīt, sāciet ar TOC.md un sekojiet saitēm uz citiem Markdown failiem. Ja meklējat palīdzību konkrētā jautājumā, atrodiet failu, kas, šķiet, varētu būt saistīts; use.md ir laba vieta, kur sākt.

Sākot ar HTML5 Boilerplate CSS

Veidnei HTML5 Boilerplate ir divi CSS faili: main.css un normalize.css.



Otrais fails normalize.css palīdz dažādām pārlūkprogrammām konsekventi atveidot elementus. Lai uzzinātu vairāk par to, kā tas darbojas, apskatiet normalize.css projekts vietnē GitHub .

Tikmēr main.css ir vieta, kur jūs ievadīsit jebkuru nepieciešamo kodu formatējiet savu vietni, izmantojot CSS . Veidnē iekļautā standarta CSS ir izstrādātāju un HTML5 Boilerplate kopienas veikto pētījumu rezultāts. Tas ir lasāms un labi parādās dažādās pārlūkprogrammās.

Ja vēlaties pievienot savu CSS, varat to pievienot sadaļai Autora pielāgotie stili. Es pievienošu mazliet saišu stilu mūsu piemēra lapai:

Bāzes CSS ir iekļautas arī vairākas noderīgas palīgu klases. Daži no tiem slēpj vienumus no standarta pārlūkprogrammām un ekrāna lasītājiem (vai kādu kombināciju).

Arī main.css jūs atradīsit atbalstu atsaucīgam dizainam un noderīgiem drukas iestatījumiem.

Visas šīs lietas ir skaidri izskaidrotas ar CSS komentāriem:

Kopumā jūs varat sākt ar pamata CSS.

Pašu HTML pievienošana veidnei

Boilerplate ietver divus HTML failus: 404.html un index.html.

Indeksa lapa ir vieta, kur jūs izveidosit savu mājas lapu (vai vienīgo lapu, ja meklējat vienkāršu peidžeri).

Atverot indeksa lapu pārlūkprogrammā, redzēsit vienu teksta rindiņu. Bet, ieskatoties HTML, atklājas daudz vairāk slēpšanās kodā. Vienīgais, par ko jāuztraucas, ir Google Analytics kods (atrodiet tekstu “UA-XXXXX-Y” un nomainiet to ar savu izsekošanas kodu).

Pārējā HTML indeksa lapā ir informācija par tīmekļa lietotnēm, paziņojumi par vecām pārlūkprogrammām un noderīgi JavaScripti. Kad sākat darbu, jums nevajadzētu sajaukt ar šo visu.

Tomēr, ja tie jau ir iepriekš aizpildīti, tas ir labs veids, kā pārliecināties, ka jūsu vietne ir gatava maksimāli izmantot HTML5.

Lai izveidotu savu lapu, ievietojiet HTML savā failā starp tagiem. Šeit ir pamatinformācija, ko es pievienošu par sevi:

Vai vēlaties izveidot vairāk lapu? Izveidojiet šī faila kopijas un pārdēvējiet tās, lai jums nebūtu jākopē un jāielīmē viss HTML. Pēc tam pievienojiet savu saturu.

Ja vēlaties pielāgot savu 404 lapu, vienkārši mainiet HTML failu. Vai neesat pārliecināts, ko ievietot savā 404 lapā? Apskatiet šos lieliskos 404 lappušu dizaina piemērus.

Favicon (un citu ikonu) pievienošana

Vai vēlaties nomainīt savu favikonu? Tad favicon.ico ir fails, kas jums jāaizstāj.

Ja jums tāda vēl nav, jums tas ir jāizveido. Jūs varat izmantot tiešsaistes favicon ģeneratoru vai izveidot savu. Vienkārši pārliecinieties, vai tas ir 16 x 16 pikseļi un vai tam ir .ico faila tips.

kā nosūtīt grupas tekstu

Ieteicams savā favikonā nedaudz padomāt. Izmantojiet šos slavenos favorītus, lai vadītu savu prāta vētru. Pārliecinieties, ka, pievienojot jauno favicon, to sauc par favicon.ico.

Iespējams, pamanīsit, ka jūsu vietnes saknes direktorijā ir trīs citi attēli: icon.png, tile.png un tile-wide.png. Kam šie paredzēti?

  • icon.png tiek izmantots Apple pieskārienu ikonām. Ja veidojat tīmekļa lietotni, šī ikona tiks izmantota, kad iPhone vai iPad lietotājs pievieno lietotni savam sākuma ekrānam.
  • tile.png un tile-wide.png ir paredzēti Windows 'pin' funkcionalitātei un tiks parādīti sistēmā Windows 10.

Visiem šiem gadījumiem ir ieteicams nodrošināt ikonas, bet, ja jūs neveidojat tīmekļa lietotni, tā var būt zemāka prioritāte.

Papildu funkcionalitātes pievienošana

Kad esat pievienojis savu HTML un iecienīto simbolu (kā arī jebkuru CSS, kuru vēlaties iekļaut), jūsu vietne ir gatava publicēšanai. Tik vienkārši ir izmantot HTML5 katlu plāksni. Augšupielādējiet to savā serverī, un esat pabeidzis!

Lūk, kā izskatās mūsu lapa:

Kā redzat, tikai dažas teksta rindiņas ir izveidojušas pilnībā funkcionālu (ja mazliet mīlīgu) vietni. Tas nav daudz, bet tas aizņēma tikai dažas minūtes. Un tas ir ļoti paplašināms, izmantojot HTML5. Tas ir Boilerplate veidnes spēks.

Bet, ja vēlaties, ar Boilerplate veidni var paveikt vēl daudz ko citu. Ja meklējat kaut ko īpašu, pastāv liela iespēja, ka to atradīsit palīdzības dokumentācijā.

Ja neesat pārliecināts, ko varat darīt ar HTML5, bet vēlaties to uzzināt, ir daudz tīmekļa dizaina pamācību, kas jums palīdzēs.

Kopīgot Kopīgot Čivināt E -pasts Vai ir labi instalēt Windows 11 nesaderīgā datorā?

Tagad jūs varat instalēt Windows 11 vecākos datoros, izmantojot oficiālo ISO failu ... bet vai tā ir laba ideja?

Lasīt Tālāk Saistītās tēmas
  • Programmēšana
  • HTML5
  • Kodēšanas apmācības
Par autoru Tad Olbraita(Publicēti 506 raksti)

Dann ir satura stratēģijas un mārketinga konsultants, kurš palīdz uzņēmumiem radīt pieprasījumu un potenciālos pirkumus. Viņš arī raksta emuārus par stratēģiju un satura mārketingu vietnē dannalbright.com.

Vairāk no Danna Olbraita

Abonējiet mūsu biļetenu

Pievienojieties mūsu informatīvajam izdevumam, lai iegūtu tehniskus padomus, pārskatus, bezmaksas e -grāmatas un ekskluzīvus piedāvājumus!

Noklikšķiniet šeit, lai abonētu