Перейти к содержимому


Партнерская программа Kredov

Быстрая верстка страниц сайта с помощью HTML-KickStart

#1 Vector

Vector
  • Пользователь
  • 43 сообщений
  • Репутация: 9
12

Отправлено 23 Апрель 2012 - 19:55

Изображение


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>

 

 

  • 3

#2 Dicim

Dicim
  • Пользователь
  • 28 сообщений
  • Репутация: 7

Отправлено 23 Апрель 2012 - 20:28

Пост хороший конечно, одназначно +
  • 0

#3 Sosnovskij

Sosnovskij
  • Администратор
  • 3 883 сообщений
  • Репутация: 565

Отправлено 23 Апрель 2012 - 20:50

Здорово! Отличная работа :unsure:
  • 0

Не стесняйтесь ставить оценки темам :) Правила форума. Мой блог http://sosnovskij.ru/.



#4 timeandway

timeandway
  • Пользователь
  • 27 сообщений
  • Репутация: 0

Отправлено 04 Май 2012 - 09:46

Автору молодец написал отлчно для новичка клад.

Хорошие советы даете. Автор, поддержу, твои труды пригодятся особенно новичкам.

Пару решний в верстке сайтов вынес и для себя.
  • 0

#5 MihaPog

MihaPog
  • Пользователь
  • 1 сообщений
  • Репутация: 0

Отправлено 01 Апрель 2013 - 16:30

Молодец! Долго искал нормальные примеры о "99......" :mellow:
  • 0

#6 Гость_Гость_*

Гость_Гость_*
  • Гости

Отправлено 19 Июль 2014 - 16:24

хма, а как это запустить все?


  • 0

#7 maksimov1989

maksimov1989
  • Пользователь
  • 856 сообщений
  • Репутация: 95

Отправлено 24 Июль 2014 - 09:13

вы такими темпами дизайн-студии разорите :D :D :D


  • 0

Продам место в подписи или обменяю по средствам бартера, в личке договоримя.



#8 alex1simfi

alex1simfi
  • Пользователь
  • 19 сообщений
  • Репутация: 0

Отправлено 13 Апрель 2015 - 22:25

Есть еще вариант. Если нет знакомых дизайнеров и не очень хочется платить сторонним людям за диз сайта.. или просто денег нет(

Просто тупа идешь в зарубежный инет там тыришь диз сайта(просто делаешь сохранить как-- веб страницу полностью) и с помощью Дримвивере чистиш код и редактируешь под себя. Для продажников самое то...


  • 0

robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85


Оформление форума – IPBSkins.ru