<MyRusakov.ru />

Создание крупного проекта на Java с нуля

Создание крупного проекта на Java с нуля

Данный курс научит Вас создавать крупные проекты на Java грамотно и быстро. В курсе Вы увидите создание большой и сложной программы на Java абсолютно с нуля.

В начале курса у нас будет только идея, а в конце готовый продукт, который можно использовать в практических целях.

В рамках упражнений курса Вы параллельно со мной будете создавать свою большую программу на Java, что даст Вам необходимую практику, после которой для Вас уже не будет разницы, какого размера создавать программы.

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Верстка сайта с нуля. Трехколоночный макет. Часть 4

Верстка сайта с нуля. Трехколоночный макет. Часть 4

Мы продолжаем серию уроков по верстке сайта с нуля с плоским дизайном. На первом уроке была сверстана шапка макета. На втором уроке - блок с большой картинкой. На третьем - галерея с иконками портфолио. Сегодня нам предстоит сверстать трехколоночный макет.

На картинке ниже вы видите тот самый блок, состоящий из трех секций. Принцип верстки этих трех секций – универсален и хорошо подходит для верстки других трехколоночных макетов.

Верстка сайта с нуля. Трехколоночный макет.

Следуя рекомендациям W3C по использованию HTML5, каждая колонка была сгруппирована в теге: article. Поскольку содержимое каждой из трех колонок можно легко объединить в три похожих по смыслу группы.

Появление новых смысловых блочных тегов, облегчает работу вебмастерам. До появления HTML5, исходник с HTML-кодом был весь "забит" div-ами. Разбираться в таком коде было крайне тяжело, приходилось ставить много комментариев. В современной блочной верстке применять тег div следует только там, где не подходят другие.

Итак, давайте приступим к верстке трехколоночного макета. Для начала создадим секцию section с коричневым фоном, куда поместим три белых блока. В обычном потоке данные блоки встали бы друг под другом. Но мы меняем им данное свойство по умолчанию, прописав в стилях у всех трех блоков float:left; Таким образом, поставив их в один ряд. После этого, не забываем делать отмену обтекания, прописав пустой блок div.

<div class="clear"></div>

и соответственно в стилях будет:

.clear{clear:both;} /* отмена float */

Кусок кода верстаемого блока на HTML-странице:

<section class="about">
<div class="wrap_about">
<h2>Обо мне</h2>
<p>Я умный, милый, обаятельный и в меру упитанный мопс.</p>
<article class="grid">
  <img src="images/img1.jpg" width="220px" height="228px" alt="картинка мопса">
   <h3>Мой загадочный друг</h3>
    <p>Мы с Каспером лучшие друзья. Он конечно внешне не такой милый как
я, но мне нравиться с ним играть. Он загадочный и похож на инопланетянина.</p>
</article>
<article class="grid">
  <img src="images/img2.jpg" width="220px" height="228px" alt="картинка мопса">
   <h3>Мое главное занятие</h3>
    <p>Я могу спать везде и всегда - дома на подоконнике, на всех
кроватях и диванах, а особенно в машине у мамы на ручках. Меня дома называют "спящая красавица"</p>
</article>
<article class="grid">
  <img src="images/img3.jpg" width="220px" height="228px" alt="картинка мопса">
   <h3>Мои хобби</h3>
    <p>Я собака-компаньон. Что это значит на деле? На самом деле долгие
прогулки с хозяином - это не про меня. А вот красиво лежать на диване - здесь нет мне равных.</p>
</article>
<div class="clear"></div>
</div>
</section>

Обратите внимание на то, что такой лаконичный и легкий для восприятия HTML-код, нравиться не только верстальщикам и программистам, но и поисковым машинам. Индексировать ваш сайт им будет легко и приятно.

Содержимое CSS3 файла стилей предназначено только для браузеров. Оттуда они узнают, как надо отображать дизайн сайта.

.about{
  color:#fff;
  background-color: #a87a7a; /* коричневый фон секции "Обо мне" */
  text-align:center; /* позиционирование текста */
  padding: 5em 0em; /* отступы для текста */
 }
.wrap_about{
  width: 90%; /* занимаемая ширина блоков по отношению к браузеру */
  margin: 0 auto; /* расположение секций по центру */
 }
.about h2{
  font-size:2em;
  padding-bottom: 0.5em; /* отступ снизу для заголовка */
 }
.about p{
  font-size:1em;
  padding-bottom: 4em; /* отступ снизу для параграфа */
 }
.grid{
  width: 30%; /* ширина белого блока */
  float: left; /* выстраивание в ряд трех белых блоков */
  background-color: #fff; /* цвет блока */
  margin: 0 1.5% 0 1.5%; /* отступы для белых блоков */
  border: 1px solid black;
  min-height: 508px; /* минимальная высота белых блоков */
 }
.grid h3{ /* цвет,размер и верхний отступ для заголовка белого блока */
  color: #292828;
  font-size: 1.4em;
  margin-top: 15px;
 }
.grid p { /* значения свойств для параграфа белого блока */
  color: #444444;
  font-size: 1.02em;
  text-align: left;
  padding: 1em 1em 2em 1em;
  line-height: 1.9em;
 }
.clear{clear:both;} /* отмена float */

Посмотреть на готовый результат Вы можете на jsfiddle

Дорогие друзья! Вы наверное согласитесь со мной, что верстать сайт с нуля, увлекательный и творческий процесс. Не говоря о том, что такие умения востребованы на рынке труда и хорошо оплачиваются. Однако, работая в одиночку, вы рано или поздно упретесь в потолок, в плане доходности этого бизнеса. Мой новый курс "Своя Web-студия за 55 дней" поможет Вам открыть успешную Web-студию в разы увеличить Ваш доход, просто повторяя за мной все действия.

Продолжение следует..

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (2):

lettlefox lettlefox 09.11.2017 01:44:00

Привет всем, хочу представить миру новый редактор кода HTML, JavaScript и jQuery, прошу оценить http://ciberfox.ru Я думаю что это очень хороший инструмент для вебмастеров желающих сэкономить свое время на создании сайта.

Ответить

akape1a akape1a 15.01.2018 12:53:41

А бывает при редактировании просто всё слетает в нуль. А так лучше при работе и написания каких либо гиперссылок, лучше всего сохраняться старый вариант

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.