[img]http://99lime.com/content/img/logo.png[/img]
HMTL KickStart
by Joshua Gatcke
http://www.99lime.com
Version: 0.92Что же это вообще такое и зачем нужно?HTML-KickStart - это набор
HTML5,
CSS, и
jQuery (
javascript) файлов и элементов разработанных с целью сокращения времени на разработку веб-проектов. Тут есть всё для быстрого старта - слайдшоу, меню, гибкие сетки, оформление изображений, кнопки и ещё много всяких вкусностей.
Итак перейдем к непосредственной верстке главной страницы сайта с помощью фреймворка
HTML-KickStart.Сначала скачаем архив по ссылке
http://99lime.com/downloads/:И извлечем его в какое-нибудь место на жестком диске - там и будем работать.
Внутри две папки
css и
js (со стилями и скриптами)
Также в корне папки два файла с примерами
elements.html (примеры веб элементов) и
example.html (пример страницы).
Пользовательский файл стилей
style.css - в него можно добавлять свои стили.
И пустой файл
blank.html - который мы сразу переименуем в
index.html и с ним будем работать.
Шаг 1.Но для начала нарисуем эскиз нашей странички, хотя бы примерно, как она должна выглядеть.
У меня получился вот такой макет для блога. Цветовая гамма будет сине-серая.
[img]http://ipic.su/img/img5/tn/sketch.1335198956.png[/img]кликабельноНачнем реализовывать его используя фреймворк.
Шаг 2.Откроем
index.html в текстовом редакторе с подсветкой синтаксиса (я использую
notepad++) и слегка подправим под наши требования для сайта:
- Сменим название <title> (напишем Блог Вектора)
- Сменим кодировку на windows-1251 (для этого не только изменим название, но и выполним такую опреацию в notepad++ -> CTRL+A -> CTRL+C -> Кодировки -> Character sets -> Cirillic -> windows-1251 -> CTRL+A -> CTRL+V)
- Добавим описание: "блог вебмастера"
- Сменим версию jQuery на более новую, на данный момент это 1.7.2
И удалим то, что нам не нужно, в итоге получим такой шаблон:
<!DOCTYPE html>
<html>
<head>
<title>Блог Вектора</title>
<meta charset="windows-1251">
<meta name="description" content="блог вебмастера" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<script type="text/javascript" src="js/prettify.js"></script> <!-- подсветка кода -->
<script type="text/javascript" src="js/kickstart.js"></script> <!-- скрипты фреймворка -->
<link rel="stylesheet" type="text/css" href="css/kickstart.css" media="all" /> <!-- стили фреймворка -->
<link rel="stylesheet" type="text/css" href="style.css" media="all" /> <!-- пользовательские стили -->
</head>
<body>
<a id="top-of-page"></a> <!-- Необходимо для прокрутки вверх -->
<div id="wrap" class="clearfix">
<!-- ===================================== END HEADER ===================================== -->
<!-- ===================================== START FOOTER ===================================== -->
</div><!-- END WRAP -->
</body>
</html>
Участок кода
<a id="top-of-page"></a>
необходим для скрипта прокрутки вверх страницы, при нажатии на кнопку в футере. Смотрите это более подробно в
Шаге 10.Шаг 3. Ширина сайта и фон.Ширину сайта оставим по умолчанию
960px (
#wrap {width:960px;} в файле
style.css)
Предлагаю сразу сменить
фон, в интернете я нашел такой вот серенький вариант.
[img]http://ipic.su/img/img5/fs/grid.1335199162.png[/img]
Для смены фона откроем файл
style.css и найдем
body:
body{
margin:0;
padding:0;
color:#000;
background:#efefef url(css/img/grid.png) repeat center top;
font:normal 0.9em/150% 'Arimo', "Trebuchet MS", arial, verdana, sans-serif;
text-shadow: 0px 0px 1px transparent; /* google font pixelation fix */
}
Путь до фона по умолчанию такой:
css/img/grid.png - чтобы его не менять, просто переименуем новую фоновую картинку в
grid.png и скопируем с заменой в папку
css/img/.Шаг 4. МенюНачнем сверху вниз. Смотрим на эскиз и видим, что сначала идет меню.
Вот теперь и наступает очередь самого фреймворка, который будет экономить наше время.
Открываем файл
elements.html и ищем в нём меню с выпадающими пунктами.
[img]http://ipic.su/img/img5/fs/horizontal_menu.1335199246.png[/img]
Меню у нас горизонтальное -
horizontal вот и жмем на соответсвующую вкладку, чтобы увидеть
HTML такого меню. Таким образом добавим этот код:
<!-- Menu Horizontal -->
<ul class="menu">
<li class="current"><a href="">Item 1</a></li>
<li><a href="">Item 2</a></li>
<li><a href=""><span class="icon" data-icon="R"></span>Item 3</a>
<ul>
<li><a href=""><span class="icon" data-icon="G"></span>Sub Item</a></li>
<li><a href=""><span class="icon" data-icon="A"></span>Sub Item</a>
<ul>
<li><a href=""><span class="icon" data-icon="Z"></span>Sub Item</a></li>
<li><a href=""><span class="icon" data-icon="k"></span>Sub Item</a></li>
<li><a href=""><span class="icon" data-icon="J"></span>Sub Item</a></li>
<li><a href=""><span class="icon" data-icon="="></span>Sub Item</a></li>
</ul>
</li>
<li class="divider"><a href=""><span class="icon" data-icon="T"></span>li.divider</a></li>
</ul>
</li>
<li><a href="">Item 4</a></li>
</ul>
в наш
index.html после строчки:
<div id="wrap" class="clearfix">
то есть внутрь оболочки.
Шаг 5. Основной контент.Далее после меню и до футера у нас будет располагаться основной контент страницы.
Чтобы контент не плотно прилегал к границам.
[img]http://ipic.su/img/img5/fs/main_content_1.1335199353.png[/img]
Мы поместим контент в
DIV:
<div class="col_12"> КОНТЕНТ </div>
представляющий из себя одну строку во всю ширину страницы, опять же находим в файле
elements.html[img]http://ipic.su/img/img5/fs/grid_main_content.1335199387.png[/img]
Чтобы в итоге наш контент имел отступы:
[img]http://ipic.su/img/img5/fs/main_content_2.1335199408.png[/img]
Шаг 6. Логотип и баннер 468х60.Лого я сделал в
photoshop, ничего оригинального, просто текст -
Блог Вектора (для статьи пойдет).
[img]http://ipic.su/img/img5/fs/logo.1335199439.png[/img]
Для баннера пока будем использовать заглушку - изображение
468x60.png.
[img]http://ipic.su/img/img5/fs/468x60.1335199460.png[/img]
Можете пользоваться в дальнейшем моей заглушкой, я так же сделал её в
photoshop.
Итак имеем два элемента - два изображения, реализуем их, как две колонки в одну строку.
Подходящий вариант найдем в файле
elements.html[img]http://ipic.su/img/img5/fs/grid_columns.1335199495.png[/img]
Запись будет выглядеть так:
<div class="col_5">col_5</div><div class="col_7">col_7</div>
Заглушку баннера и логотип скопируем в папку
css/img/<div class="col_5">
<img src="css/img/logo.png" alt="Блог Вектора">
</div>
<div class="col_7">
<img src="css/img/468x60.png" alt="баннер">
</div>
На данный момент мы имеем следующее:
[img]http://ipic.su/img/img5/fs/page_1.1335199521.png[/img]
Шаг 7. "Хлебные крошки".Далее сделаем "
Хлебные крошки", найдем подходящий вариант опять же в
elements.html[img]http://ipic.su/img/img5/fs/breadcrumbs.1335199555.png[/img]
Заполним для примера так:
<!-- Breadcrumbs -->
<ul class="breadcrumbs">
<li><a href="">Главная</a></li>
<li><a href="">Скрипты</a></li>
<li><a href="">JavaScript</a></li>
<li><a href="">jQuery</a></li>
</ul>
Шаг 8. Краткая новость и панель вкладок.Далее по эскизу две колонки в одной строке:
<div class="col_8">col_8</div><div class="col_4">col_4</div>
Шаг 8.1 Левый блок - краткая новостьВ первой у нас будет картинка
600х300px с текстом - размер примерный, исходя из того, что вся ширина нашего макета
960px. (опять же используется заглушка)
[img]http://ipic.su/img/img5/fs/600x300.1335199594.png[/img]
Оформим эту картинку по симпатичнее. Смотрим файл
elements.html с примерами оформления картинок.
[img]http://ipic.su/img/img5/fs/images.1335199616.png[/img]
Выберем:
<!-- Style1 -->
<img class="style1" src="" width="180" height="150">
<!-- Full Width -->
<img class="full-width" src="">
Получаем в итоге
<img class="style1 full-width" width="600" height="300" src="css/img/600x300.png" alt="изображение">
Под изображением неплохо бы сделать
заголовок статьи (кликабельный) и краткое её
содержание с кнопкой "
Подробнее".
Смотрим, как оформляются параграф, заголовок и кнопка:
[img]http://ipic.su/img/img5/fs/paragraphs_heading.1335199670.png[/img]
Для заголовка:<h3>Heading 3</h3>
Для параграфа:<p>Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt...</p>
Для кнопки (без иконки, только текст):
[img]http://ipic.su/img/img5/fs/buttons.1335199699.png[/img]
Выберем такое начертание:
A.button blue square small (анкор синию квадратную маленькую)
Получим такой итог:
<a class="button blue small" href="">Подробнее</a>
Окончательно левая колонка примет такой вид:
<div class="col_8">
<img class="style1 full-width" width="600" height="300" src="css/img/600x300.png" alt="изображение">
<h3><a href="#">Заголовок статьи</a></h3>
<p>Краткое содержание статьи. Должно заинтересовать посетителя и просто вынудить нажать на кнопку подробнее.</p>
<a class="button blue small" href="#">Подробнее</a>
</div>
Шаг 8.2 Правый блок - вкладкиТеперь правая колонка, у нас будет содержать три
Вкладки (tabs), например:
ТОП 10, Архивы, Календарь.Ищем в
elements.html, как оформляются вкладки:
Выберем
Tabs.center[img]http://ipic.su/img/img5/fs/tabs.1335199745.png[/img]
Содержимое вкладки ТОП 10У нас будет ввиде списка ссылок в столбик:
[img]http://ipic.su/img/img5/fs/lists.1335199770.png[/img]
Содержимое вкладки
Архивы, тоже список из ссылок на архивные статьи, но стиль списка будет обычным.
А вкладку
Календарь, как календарь и оформим:
[img]http://ipic.su/img/img5/fs/calendar.1335199800.png[/img]
Окончательно правая колонка имеет такой вид:<div class="col_4">
<!-- Tabs Center -->
<ul class="tabs center">
<li><a href="#tabc1">ТОП 10</a></li>
<li><a href="#tabc2">Архивы</a></li>
<li><a href="#tabc3">Календарь</a></li>
</ul>
<div id="tabc1" class="tab-content">
<!-- List Alternative Style -->
<ul class="alt">
<li><a href="#">Заголовок статьи 1</a></li>
<li><a href="#">Заголовок статьи 2</a></li>
<li><a href="#">Заголовок статьи 3</a></li>
<li><a href="#">Заголовок статьи 4</a></li>
<li><a href="#">Заголовок статьи 5</a></li>
<li><a href="#">Заголовок статьи 6</a></li>
<li><a href="#">Заголовок статьи 7</a></li>
<li><a href="#">Заголовок статьи 8</a></li>
</ul>
</div>
<div id="tabc2" class="tab-content">
<ul>
<li><a href="#">Апрель 2012 (7)</a></li>
<li><a href="#">Март 2012 (22)</a></li>
<li><a href="#">Февраль 2012 (23)</a></li>
<li><a href="#">Январь 2012 (28)</a></li>
<li><a href="#">Декабрь 2011 (24)</a></li>
<li><a href="#">Ноябрь 2011 (36)</a></li>
<li><a href="#">Октябрь 2011 (32)</a></li>
<li><a href="#">Сентябрь 2011 (23)</a></li>
</ul>
</div>
<div id="tabc3" class="tab-content">
<!-- Calendar -->
<div class="calendar" data-month="3" data-year="2012"></div>
</div>
</div>
Теперь у нас получилось вот что:
[img]http://ipic.su/img/img5/fs/page_2.1335199821.png[/img]
Уже довольно симпатично и при этом мы даже не прикасались к
CSS стилям!
Шаг 9. Горизонтальная черта и блок похожих новостей.Основное у нас есть, теперь отделим его горизонтальной линией от блока в котором будут находится четыре "
похожих" новости.
Ищем в
elements.html линию:
[img]http://ipic.su/img/img5/fs/hr.1335199864.png[/img]
<hr class="alt1">
Теперь сделаем
четыре колонки с
картинкой,
заголовком,
текстом и
ссылкой - блок "похожих" новостей.
[img]http://ipic.su/img/img5/fs/four_columns.1335199911.png[/img]
<!-- FOURTHS -->
<div class="col_3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</div>
<div class="col_3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</div>
<div class="col_3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</div>
<div class="col_3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</div>
Картиночки будут у нас размером
200х100px - опять же примерно, у вас могут быть свои размеры.
И по аналогии оформления краткой новости, оформим четыре "похожих" мини новости.
<!-- ====== Похожие статьи или другие статьи ====== -->
<div class="col_3">
<img class="style1 full-width" width="200" height="100" src="css/img/200x100.png" alt="миниатюра">
<h6><a href="#">Заголовок 1</a></h6>
<p>Краткое описание статьи.</p>
<a href="#">Читать далее</a>
</div>
<div class="col_3">
<img class="style1 full-width" width="200" height="100" src="css/img/200x100.png" alt="миниатюра">
<h6><a href="#">Заголовок 2</a></h6>
<p>Краткое описание статьи.</p>
<a href="#">Читать далее</a>
</div>
<div class="col_3">
<img class="style1 full-width" width="200" height="100" src="css/img/200x100.png" alt="миниатюра">
<h6><a href="#">Заголовок 3</a></h6>
<p>Краткое описание статьи.</p>
<a href="#">Читать далее</a>
</div>
<div class="col_3">
<img class="style1 full-width" width="200" height="100" src="css/img/200x100.png" alt="миниатюра">
<h6><a href="#">Заголовок 4</a></h6>
<p>Краткое описание статьи.</p>
<a href="#">Читать далее</a>
</div>
<!-- ====== /Похожие статьи или другие статьи ====== -->
Весь наш основной контент завершен, поэтому закрываем
</div> нашего начала
<div class="col_12">.
В готовом исходнике
index.html будет по понятней, так как все элементы имеют комментарии.
Шаг 10. Футер.Футера конечно, как такового нет в
elements.html, мы просто возьмем его из файла
example.html<div class="clear"></div>
<div id="footer">
© Copyright 2011–2012 All Rights Reserved. This website was built with
<a href="http://www.99lime.com">HTML KickStart</a>
<a id="link-top" href="#top-of-page">Top</a>
</div>
Чуток подправим содержание и получим:
<!-- ===================================== START FOOTER ===================================== -->
<div class="clear"></div>
<div id="footer">
© Copyright 2011–2012 All Rights Reserved. Сайт работает на <a href="http://www.99lime.com">HTML KickStart</a>
<a href="#top-of-page" id="link-top">Вверх</a> <!-- ======== Кнопка вверх ======== -->
</div>
<!-- ===================================== /END FOOTER ===================================== -->
И закрываем тег
</div> принадлежащий оболочке
WRAP -
<div id="wrap" class="clearfix">Всё мы с вами сверстали макет страницы блога, используя фреймворк
HTML-KickStart.В итоге получилась такая страница:[img]http://ipic.su/img/img5/fs/page_3.1335200023.png[/img]
А вот сами исходники нашего макета:
http://rghost.ru/37733164оригинал фреймворка с добавленным файлом
index.html и несколькими изображениями
Рекомендую посмотреть исходный код получившегося index.html - там все блоки имеют комментарии.
[img]https://masterwebs.ru/sp/admitad-konkurs.jpg[/img]
Admitad.com - агрегатор партнерских программ с оплатой за действие пользователя. Выбор множества выгодных предложений для вашего трафика.
Обсудить на форуме.
[img]https://masterwebs.ru/sp/maxtrust-konkurs.jpg[/img]
Maxtrust.ru - сеть по продаже VIP-товаров. Высокий заработок для качественного трафика - от 270$ за 1000 посетителей
Обсудить на форуме.</div>