Home-theater-designers
Amikor új webhelyet épít, manapság azt szeretné, ha HTML5-kompatibilis lenne. De ugye nem is akarsz felesleges időt tölteni a HTML5 bonyolultságainak elsajátításával?
Szerencsére a HTML5 Boilerplate sablon tud segíteni. Ez egy egyszerű kezelőfelület-sablon, amellyel néhány perc alatt létrehozhat egy HTML5-webhelyet. De elég erős ahhoz, hogy egy összetett, teljes funkcionalitású webhely alapjául is használhassa.
hogyan lehet csatlakoztatni a ps2 vezérlőt a számítógéphez
Ez a HTML5 Boilerplate oktatóanyag áttekinti a sablon tartalmát, az alapvető tudnivalókat a használatáról, valamint néhány forrást a további tanuláshoz. Azt is megmutatom, hogyan használtam a sablont egy nagyon egyszerű webhely létrehozásához, mindössze néhány sor HTML -sel.
A HTML5 kazánlemez sablon
Amikor letölti a sablont a HTML5 Boilerplate -ből, számos mappát és fájlt kap. Íme a ZIP fájl tartalma:
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.pngItt nem fogjuk áttekinteni a sablon minden elemét, csak az alapokat. Annak érdekében azonban, hogy meggyőződjünk arról, hogy rendelkezik -e erőforrásokkal az összes fájl használatához, kezdjük a súgó dokumentumokkal.
HTML5 Boilerplate Súgó Dokumentáció
A Boilerplate gyűjteménye súgó dokumentumok a GitHub -ban . Ez nagy segítség, ha technikai kérdései vannak, vagy kíváncsi, miért tervezték meg valamit úgy, ahogy volt.
A dokumentáció szinte minden része megtalálható a sablon doc mappájában is. Számos Markdown (.md) fájlt fog látni, amelyek nagy segítséget jelentenek a Boilerplate webhely felépítésében.
Ha mindent el szeretne olvasni, kezdje a TOC.md -vel, és kövesse az onnan származó linkeket a többi Markdown fájlhoz. Ha segítséget szeretne keresni egy adott problémával kapcsolatban, keresse meg a kapcsolódó fájlokat; A use.md jó kiindulópont.
Kezdve a HTML5 Boilerplate CSS -jével
A HTML5 Boilerplate sablon két CSS -fájlt tartalmaz: main.css és normalize.css.
A második fájl, a normalize.css segíti a különböző böngészőket az elemek következetes megjelenítésében. Ha többet szeretne megtudni a működéséről, nézze meg a normalize.css projekt a GitHub -on .
Eközben a main.css minden olyan kódot megad, amire szüksége van formázza webhelyét CSS segítségével . A sablonhoz mellékelt szabványos CSS a fejlesztők és a HTML5 Boilerplate közösség által végzett kutatás eredménye. Olvasható és szépen jelenik meg különböző böngészőkben.
Ha saját CSS -t szeretne hozzáadni, hozzáadhatja a Szerző egyéni stílusok szakaszához. Hozzáteszek egy linklinket a példaoldalunkhoz:
Az alap CSS számos hasznos segítő osztályt is tartalmaz. Néhányuk elrejti az elemeket a szabványos böngészők és képernyőolvasók (vagy valamilyen kombináció) elől.
A main.css -ben is támogatást kap a reszponzív tervezéshez és a hasznos nyomtatási beállításokhoz.
Mindezeket egyértelműen magyarázzák a CSS megjegyzései:
Általában el lehet kezdeni az alap CSS használatával.
Saját HTML hozzáadása a sablonhoz
A Boilerplate két HTML -fájlt tartalmaz: 404.html és index.html.
Az indexoldalon hozhatja létre kezdőlapját (vagy az egyetlen oldalát, ha egyszerű személyhívót keres).
Ha böngészőben megnyitja az indexoldalt, egyetlen sornyi szöveget lát. A HTML -be nézve azonban sokkal több rejtőzik a kódban. Az egyetlen dolog, amellyel valóban aggódnia kell a Google Analytics-kód miatt (keresse meg az „UA-XXXXX-Y” szöveget, és cserélje le saját követőkódjára).
Az indexoldalon található többi HTML tartalmazza a webalkalmazásokra vonatkozó információkat, a régi böngészők értesítéseit és a hasznos JavaScripteket. Amikor elkezded, nem kell ezzel foglalkoznod.
Ha azonban már előre betöltötte őket, jó módszer annak biztosítására, hogy webhelye készen áll arra, hogy a legtöbbet hozza ki a HTML5-ből.
Az oldal létrehozásához illessze be HTML -kódját a fájl címkéi közé. Íme néhány alapvető információ, amelyet hozzáadok magamról:
Szeretne több oldalt létrehozni? Hozzon létre másolatokat erről a fájlról, és nevezze át őket, hogy ne kelljen az összes HTML -t másolni és beilleszteni. Ezután adja hozzá tartalmát.
Ha személyre szeretné szabni a 404 -es oldalt, módosítsa a HTML -fájlt. Nem tudja, mit tegyen a 404 -es oldalára? Nézze meg ezeket a remek 404 oldalas tervezési példákat.
Favicon (és más ikonok) hozzáadása
Szeretné lecserélni a kedvencét? Ezután a favicon.ico az a fájl, amelyet le kell cserélnie.
Ha még nincs, akkor létre kell hoznia egyet. Használhat online favicon generátort, vagy tervezhet sajátot. Csak győződjön meg arról, hogy 16 x 16 képpont méretű és .ico fájltípussal rendelkezik.
figyelmeztetés, hogy csak egy nagyszerű alkalmazást kell telepítenie
Érdemes elgondolkodni a faviconon. Használja ezeket a híres faviconokat az ötleteléséhez. Győződjön meg arról, hogy az új favicon hozzáadásakor a favicon.ico nevet viseli.
Észreveheti, hogy a webhely gyökérkönyvtárában további három kép található: icon.png, tile.png és tile-wide.png. Mire valók ezek?
- Az icon.png az Apple érintőképernyős ikonjaihoz használható. Ha webes alkalmazást készít, ezt az ikont fogja használni, amikor egy iPhone vagy iPad felhasználó hozzáadja az alkalmazást a kezdőképernyőjéhez.
- tile.png és tile-wide.png a Windows 'pin' funkcióihoz használhatók, és megjelennek a Windows 10 rendszerben.
Jó ötlet, ha ezekhez az esetekhez ikonokat is megad---- de ha nem webes alkalmazást épít, akkor az alacsonyabb prioritású lehet.
További funkcionalitás hozzáadása
Miután hozzáadta a HTML -kódot és a favicont (valamint minden olyan CSS -t, amelyet esetleg fel szeretne venni), webhelye készen áll a közzétételre. Ilyen egyszerű a HTML5 Boilerplate használata. Töltsd fel a szerverre, és kész!
Így néz ki az oldalunk:
Amint láthatja, néhány sornyi szöveg létrehozott egy teljesen működőképes (ha kissé unalmas) webhelyet. Nem sok, de csak néhány percet vett igénybe. És HTML5 -tel nagyon bővíthető. Ez a Boilerplate sablon ereje.
De a Boilerplate sablonnal még sok minden mást tehet, ha szeretné. Ha valami konkrétat keres, jó eséllyel megtalálja a súgó dokumentációjában.
Ha nem biztos abban, hogy mit tehet a HTML5 segítségével, de szeretné megtudni, akkor rengeteg webdesign -oktatóanyag áll rendelkezésére.
Részvény Részvény Csipog Email Rendben van a Windows 11 telepítése nem kompatibilis számítógépre?Most már telepítheti a Windows 11 -et a régebbi számítógépekre a hivatalos ISO fájllal ... de jó ötlet ezt megtenni?
Olvassa tovább Kapcsolódó témák- Programozás
- HTML5
- Kódolási oktatóanyagok
Dann tartalomstratégiai és marketing tanácsadó, aki segít a vállalatoknak keresletet és potenciális ügyfeleket generálni. Stratégiáról és tartalommarketingről is blogol a dannalbright.com oldalon.
Továbbiak Dann Albright -tólIratkozzon fel hírlevelünkre
Csatlakozz hírlevelünkhöz, ahol technikai tippeket, értékeléseket, ingyenes e -könyveket és exkluzív ajánlatokat találsz!
Feliratkozáshoz kattintson ide