X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> Быстрая верстка страниц сайта с помощью HTML-KickStart
pcvector
pcvector
Topic Starter сообщение 23.4.2012, 20:55; Ответить: pcvector
Сообщение #1


[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]

Выберем:
  • 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="изображение">


Под изображением неплохо бы сделать заголовок статьи (кликабельный) и краткое её содержание с кнопкой "Подробнее".

Смотрим, как оформляются параграф, заголовок и кнопка:
[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>
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
SeoCospi
SeoCospi
сообщение 23.4.2012, 21:28; Ответить: SeoCospi
Сообщение #2


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


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
sosnovskij
sosnovskij
сообщение 23.4.2012, 21:50; Ответить: sosnovskij
Сообщение #3


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


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
timeandway
timeandway
сообщение 4.5.2012, 10:46; Ответить: timeandway
Сообщение #4


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

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

Пару решний в верстке сайтов вынес и для себя.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
MihaPog
MihaPog
сообщение 1.4.2013, 17:30; Ответить: MihaPog
Сообщение #5


Молодец! Долго искал нормальные примеры о "99......" :mellow:
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Гость_0_* Гость_0_*
сообщение 19.7.2014, 17:24; Ответить: Гость_0_*
Сообщение #6


хма, а как это запустить все?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Maksimov1989
Maksimov1989
сообщение 24.7.2014, 10:13; Ответить: Maksimov1989
Сообщение #7


вы такими темпами дизайн-студии разорите :D :D :D
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
alex1simfi
alex1simfi
сообщение 13.4.2015, 23:25; Ответить: alex1simfi
Сообщение #8


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


Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
2 чел. читают эту тему (гостей: 2, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыБыстрая индексация страниц сайта и обратных ссылок - 2Index
32 2Index 5483 Вчера, 16:33
автор: 2Index
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыВерстка/Натяжка/Оптимизация/Увеличение функционала шаблонов на WP
Разработка на профессиональном уровне
144 Gerga 91397 11.3.2024, 19:59
автор: anchous
Открытая тема (нет новых ответов) Перенос сайта на CMS Wordpress
8 freeax 4792 10.3.2024, 14:58
автор: freeax
Открытая тема (нет новых ответов) Какой % отказов нормален для сайта?
9 Aloof 2360 8.3.2024, 20:41
автор: ZerKuS
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыСколько времени нужно для раскачки нового сайта?
29 metvekot 7762 8.3.2024, 15:41
автор: malamut


 



RSS Текстовая версия Сейчас: 19.3.2024, 10:36
Дизайн