Как да създадете уебсайт за минути с помощта на HTML5 Boilerplate

Как да създадете уебсайт за минути с помощта на HTML5 Boilerplate

Когато изграждате нов уебсайт, тези дни ще искате той да е съвместим с HTML5. Но също така не искате да прекарвате излишно време в изучаване на тънкостите на HTML5 от нулата, нали?





За щастие, HTML5 шаблон за бойлер мога да помогна. Това е прост преден шаблон, който можете да използвате за създаване на HTML5 уебсайт само за няколко минути. Но също така е достатъчно мощен, че можете да го използвате като основа на сложен, пълнофункционален сайт.



как да гледаме филм заедно онлайн

Този урок за HTML5 Boilerplate ще разгледа какво идва в шаблона, основите, които трябва да знаете за това как да го използвате, и някои ресурси за по -нататъшно обучение. Ще ви покажа и как използвах шаблона за създаване на много основен сайт само с няколко реда HTML.





Шаблонът HTML5 Boilerplate

Когато изтеглите шаблона от HTML5 Boilerplate, получавате редица папки и файлове. Ето съдържанието на ZIP файла:

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

Тук няма да разглеждаме всеки елемент в шаблона, а само основите. За да сме сигурни, че имате ресурси да използвате всички файлове, ще започнем с помощните документи.



Помощна документация за HTML5 бойлер

Boilerplate има колекция от помощни документи, хоствани в GitHub . Това е голяма помощ, когато имате технически въпроси или се чудите защо нещо е проектирано така, както е било.

Почти всичко в документацията също е включено в папката doc на шаблона. Ще видите редица Markdown (.md) файлове, които са от голяма помощ при измислянето как да изградите вашия Boilerplate сайт.



Ако искате да прочетете всичко, започнете с TOC.md и следвайте връзките от там към други Markdown файлове. Ако търсите помощ по конкретен въпрос, намерете файла, който звучи сякаш е свързан; use.md е добро начало.

Започвайки с CSS на HTML5 Boilerplate

Шаблонът HTML5 Boilerplate идва с два CSS файла: main.css и normalize.css.



Вторият файл, normalize.css, помага на различните браузъри да изобразяват елементи по последователни начини. За да научите повече за това как работи, разгледайте normalize.css проект в GitHub .

Междувременно main.css е мястото, където ще поставите всеки код, който ви е необходим форматирайте вашия сайт с CSS . Стандартният CSS, включен в шаблона, е резултат от проучване, проведено от разработчиците и общността на HTML5 Boilerplate. Той е четим и се показва добре в различни браузъри.

Ако искате да добавите свой собствен CSS, можете да го добавите в раздела Персонализирани стилове на автора. Ще добавя малко стил на връзки за нашата примерна страница:

В базовия CSS са включени и редица полезни помощни класове. Някои от тях скриват елементи от стандартните браузъри и екранни четци (или някаква комбинация).

Също така в main.css ще намерите поддръжка за отзивчив дизайн и полезни настройки за печат.

Всички тези елементи са ясно обяснени с коментари в CSS:

Като цяло можете да започнете с базовия CSS.

Добавяне на собствен HTML към шаблона

Boilerplate включва два HTML файла: 404.html и index.html.

Индексната страница е мястото, където ще създадете началната си страница (или единствената си страница, ако използвате обикновен пейджър).

Ако отворите индексната страница в браузър, ще видите един ред текст. Но разглеждането на HTML разкрива много повече криене в кода. Единственото нещо, за което наистина трябва да се притеснявате за промяната, е кодът на Google Анализ (намерете текста „UA-XXXXX-Y“ и го заменете със свой собствен проследяващ код).

Останалата част от HTML на индексната страница включва информация за уеб приложения, известия за стари браузъри и полезни JavaScripts. Когато започвате, не е нужно да се забърквате с нищо от това.

Наличието им вече предварително попълнени обаче е добър начин да се уверите, че вашият сайт е подготвен да извлече максимума от HTML5.

За да създадете своя страница, вмъкнете своя HTML между маркерите във файла. Ето някои основни данни, които ще добавя за себе си:

Искате ли да създадете повече страници? Създайте копия на този файл и ги преименувайте, за да не се налага да копирате и поставяте целия HTML. След това добавете вашето съдържание.

Ако искате да персонализирате вашата 404 страница, просто променете HTML файла. Не сте сигурни какво да поставите на страницата си 404? Вижте тези страхотни примери за дизайн на 404 страници.

Добавяне на Favicon (и други икони)

Искате ли да замените своя фавикон? Тогава favicon.ico е файлът, който ще трябва да замените.

Ако все още нямате такъв, ще трябва да го създадете. Можете да използвате онлайн генератор на фавикони или да проектирате свой собствен. Просто се уверете, че е 16 x 16 пиксела и има тип .ico файл.

безплатно изтегляне на microsoft office 2016 64 бита

Добра идея е да помислите малко върху своя фаворит. Използвайте тези известни икони, за да насочите мозъчната ви атака. Уверете се, че когато добавяте новия фавикон, той се нарича favicon.ico.

Може да забележите, че в главната директория на вашия сайт има още три изображения: icon.png, tile.png и tile-wide.png. За какво са тези?

  • icon.png се използва за икони на Apple touch. Ако създавате уеб приложение, тази икона ще се използва, когато потребител на iPhone или iPad добави приложението към началния си екран.
  • tile.png и tile-wide.png са за 'pin' функционалност на Windows и ще се показват в Windows 10.

Добра идея е да предоставите икони за всички тези случаи --- но ако не създавате уеб приложение, това може да е с по-нисък приоритет.

Добавяне на повече функционалност

След като добавите своя HTML и фавикон (както и всеки CSS, който може да искате да включите), вашият сайт е готов за публикуване. Ето колко лесно е да използвате HTML5 Boilerplate. Качете го на вашия сървър и сте готови!

Ето как изглежда нашата страница:

Както можете да видите, само няколко реда текст създадоха напълно функционален (макар и малко мек) уебсайт. Не е много, но отне само няколко минути. И е много разширяем с HTML5. Това е силата на шаблона Boilerplate.

Но ако желаете, можете да направите още много с шаблона Boilerplate. Ако търсите нещо конкретно, има голям шанс да го намерите в помощната документация.

Ако не сте сигурни какво можете да правите с HTML5, но искате да разберете, има много уроци по уеб дизайн, които да ви помогнат.

Дял Дял Туит електронна поща Добре ли е да инсталирате Windows 11 на несъвместим компютър?

Вече можете да инсталирате Windows 11 на по -стари компютри с официалния ISO файл ... но дали е добра идея да го направите?

Прочетете Напред Свързани теми
  • Програмиране
  • HTML5
  • Уроци по кодиране
За автора Тогава Олбрайт(506 статии са публикувани)

Дан е консултант по стратегия за съдържание и маркетинг, който помага на компаниите да генерират търсене и потенциални клиенти. Той също така блогове за стратегия и маркетинг на съдържанието на dannalbright.com.

Още от Дан Олбрайт

Абонирайте се за нашия бюлетин

Присъединете се към нашия бюлетин за технически съвети, рецензии, безплатни електронни книги и изключителни оферти!

Щракнете тук, за да се абонирате