Магазин
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.
Но для начала нарисуем эскиз нашей странички, хотя бы примерно, как она должна выглядеть.
У меня получился вот такой макет для блога. Цветовая гамма будет сине-серая.
кликабельно
Начнем реализовывать его используя фреймворк.
Шаг 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)
Предлагаю сразу сменить фон, в интернете я нашел такой вот серенький вариант.
Для смены фона откроем файл 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 и ищем в нём меню с выпадающими пунктами.
Меню у нас горизонтальное - 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. Основной контент.
Далее после меню и до футера у нас будет располагаться основной контент страницы.
Чтобы контент не плотно прилегал к границам.
Мы поместим контент в DIV:
<div class="col_12"> КОНТЕНТ </div>представляющий из себя одну строку во всю ширину страницы, опять же находим в файле elements.html
Чтобы в итоге наш контент имел отступы:
Шаг 6. Логотип и баннер 468х60.
Лого я сделал в photoshop, ничего оригинального, просто текст - Блог Вектора (для статьи пойдет).
Для баннера пока будем использовать заглушку - изображение 468x60.png.
Можете пользоваться в дальнейшем моей заглушкой, я так же сделал её в photoshop.
Итак имеем два элемента - два изображения, реализуем их, как две колонки в одну строку.
Подходящий вариант найдем в файле elements.html
Запись будет выглядеть так:
<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>
На данный момент мы имеем следующее:
Шаг 7. "Хлебные крошки".
Далее сделаем "Хлебные крошки", найдем подходящий вариант опять же в elements.html
Заполним для примера так:
<!-- 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. (опять же используется заглушка)
Оформим эту картинку по симпатичнее. Смотрим файл elements.html с примерами оформления картинок.
Выберем:
- IMG.style1
- IMG.full-width
<!-- 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="изображение">
Под изображением неплохо бы сделать заголовок статьи (кликабельный) и краткое её содержание с кнопкой "Подробнее".
Смотрим, как оформляются параграф, заголовок и кнопка:
Для заголовка:
<h3>Heading 3</h3>
Для параграфа:
<p>Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt...</p>
Для кнопки (без иконки, только текст):
Выберем такое начертание:
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
Содержимое вкладки ТОП 10
У нас будет ввиде списка ссылок в столбик:
Содержимое вкладки Архивы, тоже список из ссылок на архивные статьи, но стиль списка будет обычным.
А вкладку Календарь, как календарь и оформим:
Окончательно правая колонка имеет такой вид:
<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>
Теперь у нас получилось вот что:
Уже довольно симпатично и при этом мы даже не прикасались к CSS стилям!
Шаг 9. Горизонтальная черта и блок похожих новостей.
Основное у нас есть, теперь отделим его горизонтальной линией от блока в котором будут находится четыре "похожих" новости.
Ищем в elements.html линию:
<hr class="alt1">
Теперь сделаем четыре колонки с картинкой, заголовком, текстом и ссылкой - блок "похожих" новостей.
<!-- 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.
В итоге получилась такая страница:
А вот сами исходники нашего макета:
http://rghost.ru/37733164
оригинал фреймворка с добавленным файлом index.html и несколькими изображениями
Рекомендую посмотреть исходный код получившегося index.html - там все блоки имеют комментарии.
Admitad.com - агрегатор партнерских программ с оплатой за действие пользователя. Выбор множества выгодных предложений для вашего трафика. Обсудить на форуме.
Maxtrust.ru - сеть по продаже VIP-товаров. Высокий заработок для качественного трафика - от 270$ за 1000 посетителей Обсудить на форуме.</div>
