Сайт

Html блоки для сайта: Красивое оформление блоков на сайте

25.05.2021

Содержание

Блочная верстка или основы анатомии скелета сайтов

Сайты тоже имеют свой скелет. Но о его особенностях спрашивать врачей бесполезно. Да и ветеринары тоже не в курсе строения сайта. Об этом ведомо лишь верстальщикам. Именно от них зависит строение скелета будущего ресурса. А главным способом создания костей его скелета является блочная верстка.

Есть в верстке сайта что-то таинственное. Но это до тех пор, пока не познакомишься с этим ремеслом поближе. Начинаем наше посвящение:


Следующим этапом разработки сайта после создания его макета является верстка. Задача верстальщика перенести с помощью html кода и таблиц css скелет будущего сайта в виртуальный мир. Проще говоря, перенести размеры и пропорции ресурса в форму, понятную для браузера.

В процессе верстки кодом html происходит разбивка «скелета» сайта на части. А с помощью css (каскадных таблиц стилей) задаются размеры его «костей», цвет и расположение.

Различают несколько видов верстки:

I. Табличная – ранее была основным способом верстки.

В табличной верстке для задания структуры сайта используется тег <table> и его дочерние теги. Верстка с помощью таблиц позволяет наиболее пропорционально расположить все элементы дизайна относительно друг друга. Но в тоже время такой код получается слишком объемным:


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

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

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


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

II. Блочная – в данный момент является основным способом верстки. В отличие от табличной блочная верстка обладает рядом преимуществ:

  • Отделение стиля элементов от кода html;
  • Возможность наложения одного слоя на другой – такая возможность во многом облегчает позиционирование элементов.
  • Лучшая индексация поисковиками;
  • Высокая скорость загрузки страницы, состоящей от взаимно независимых элементов;
  • Легкость создания визуальных эффектов (выпадающих меню, списков, всплывающих подсказок).

Основным недостатком блочной верстки является некая «двусмысленность» понимания ее кода различными браузерами. Поэтому часто html страницы приходится «доводить» путем использования специальных хаков.

С появлением блочной верстки родилось такое понятие, как «кроссбраузерность». Из-за различия отображения одного и того же элемента в разных браузерах верстальщикам приходится вставлять в основной html целые куски кода (хаки).

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


Основным элементом, применяемым в блочной верстке, является тег <div>. Участок кода, отделенный этим тегом, называется слоем. Все стилевые решения вынесены за границы кода html в каскадные таблицы стилей. Доступ к ним осуществляется через идентификаторы или классы css:

Перед началом верстки готовый psd макет сайта в графическом редакторе разрезают на блоки (слои). В отдельную папку помещают вырезанные фоновые картинки, которые будут прикрепляться отдельно к каждому слою:


Для примера возьмем вот такой макет сайта, созданный в Photoshop. Сначала в текстовом редакторе с помощью div задаем структуру будущего ресурса и присваиваем каждому слою свой селектор id. Получается такая структура:

Затем к готовой структуре сайта на html строкой <link rel=»stylesheet» type=»text/css» href=»style.css» /> прикрепляем файл css. После чего добавляем в него стилевое описание каждого слоя, позиционирование относительно других элементов и его размеры.

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


Полный код примера index.html:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>Пример блочной верстки</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
 
<body>
 
<div>
	<div>
	<h3>Шапка</h3>
	</div>
		 
	<div>
	<h3>Блок навигации</h3>
	</div>
		 
	<div>
	<h3>Меню</h3>
	</div>
		 
	<div>
	<h3>Контент</h3>
	</div>
		 
	<div>
		 
	</div>
							   
	<div>
	<h3>Подвал сайта</h3>
	</div>
</div>
		 
</body>
</html>

Содержимое файла style.css:

body {
            background: #f3f2f3;
            color: #000000;
            font-family: Trebuchet MS, Arial, Times New Roman;
            font-size: 12px;
}
 
#container {
            background:#99CC99;
            margin: 30px auto;
            width: 900px;
            height: 600px;
}
 
#header {
            background: #66CCCC;
            height: 100px;
            width: 900px;
}
 
#navigation {
            background: #FF9999;
            width: 900px;
            height: 20px;
}
 
#menu {
            background: #99CC99;
            float: left;
            width: 200px;
            height: 400px;
}
 
#content {
            background: #d2d0d2;
            float: right;
 
            width: 700px;
            height: 400px;
}
 
#clear {
            clear:both;
}
 
#footer {
            background: #0066FF;
            height: 80px;
            width: 900px;
}

Вот так наш пример блочной верстки сайта выглядит в окне браузера:


Конечно, этот пример является лишь наглядным пособием для демонстрации того, как происходит блочная верстка. Настоящая верстка происходит с использование фоновых изображений и логотипов, подключаемых в css. А также с включением в html и css кода хаков для оптимизации отображения во всех браузерах.

Для редактирования кода страниц сайта используются специальные редакторы html. Многие из них способны автоматически генерировать код визуальных элементов, создаваемых в них пользователем в режиме «дизайн». Но такой код не является валидным, и чаще всего нуждается в «ручной» доводке:

С помощью рассмотренных здесь основ блочной верстки можно легко сверстать свой сайт самостоятельно. Тогда будущий ресурс будет более родным и знакомым. Ведь в его скелете все косточки вы «перемоете» собственными руками.

ReadyScript: Конструктор сайта

В разделе «Конструктор сайта» задаются правила отображения каждой страницы интернет-магазина. Список страниц в системе предопределен установленными модулями. Например, страницами считаются: главная страница, страница со списком товаров, страница с карточкой товара, страница сравнения товаров, страница пункта меню, страница со списком статей, страница просмотра статьи и т.

д.

Если для страницы уже заданы правила отображения, то она будет присутствовать в списке страниц. В случае, если страницы нет в списке, для ее отображения будут использоваться параметры страницы «по умолчанию». Чтобы добавить персональное отображение для страницы, нажмите на кнопку Добавить страницу.

Конструктор сайта. Список страниц.

Конструктор сайта позволяет:

  • Связать страницу с шаблоном отображения Smarty. В этом случае верстка и вставка необходимых блоков должны быть реализованы в шаблоне.
  • Настроить страницу по сеточной модели. Этот вариант предусматривает сборку страницы, основываясь на трех понятиях:
    Контейнер    , Секция, Блок.

В случае сборки сайта по сеточной модели страница делится на 12 или 16 колонок равной ширины (это происходит внутри Контейнера). Стандартной шириной рабочей области (в которой располагается весь контент) считается 960 px, однако это значение может быть и другим. Внутри рабочей области могут располагаться Секции, ширина которых измеряется количеством колонок, занимаемых секцией. Внутри секций можно расположить Блоки.

Контейнер — это корневой элемент для секций, создает рабочую область. Имеет настройки:

  • Ширина — указывает какое количество колонок должно быть на странице. Возможные варианты 12 или 16 колонок.
  • CSS класс — CSS класс, который будет приписан HTML-элементу данного контейнера.
  • Название — любое название, характеризующее содержимое контейнера.
  • CSS класс оборачивающего блока — CSS класс HTML-элемента, располагающегося на уровень выше.
  • Внешний элемент — HTML-тег, оборачивающий элемент с контейнером.
  • Внешний шаблон — произвольный шаблон, выводящий HTML контейнера через переменную $wrapped_content. Вокруг этой переменной можно добавить любой HTML-код.
  • Внутренний шаблон — произвольный шаблон, выводящий HTML секций через переменную $wrapped_content. Вокруг этой переменной можно добавить любой HTML-код.

Параметры контейнера

Чтобы добавить секцию в контейнер или настроить параметры контейнера, необходимо воспользоваться меню контейнера.

Меню контейнера

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

Секция — область внутри контейнера, имеющая определенную ширину. Основное предназначение секции — это удерживание содержимого в пределах своей области. Имеет настройки:

  • Название секции для автоматической вставки модулей — возможные значения: «Не указано», «Левая колонка», «Правая колонка», «Центральная колонка», «Другое». Используется во время установки новых модулей, для автоматического размещения Блоков.
  • Ширина — ширина секции, указывается в количестве колонок, которое должна занимать секция.
  • Внутреннее выравнивание — возможные значения: на всю ширину, слева, справа. Устанавливает, как должны горизонтально выравниваться Блоки внутри секции.
  • Префикс — отступ слева внутри секции (padding-left). Задается в количестве колонок. Увеличивает ширину секции.
  • Суффикс — отступ справа внутри секции (padding-right). Задается в количестве колонок. Увеличивает ширину секции.
  • Сдвиг влево — сдвигает секцию влево, при этом секция может накладываться на другую (position:relative; left:-n).
  • Сдвиг вправо — сдвигает секцию вправо, при этом секция может накладываться на другую (position:relative; left:+n).
  • Пользовательский CSS класс — CSS класс, который будет присвоен HTML-элементу секции.
  • Внутренний шаблон — произвольный шаблон, выводящий HTML блоков через переменную $wrapped_content. Вокруг этой переменной можно добавить любой HTML-код.

Параметры префикс (prefix), суффикс (suffix), сдвиг влево (pull), сдвиг вправо (push) полностью соответствуют понятиям, принятым в CSS-фреймворке GS960.

Параметры секции

Каждая секция имеет собственное меню, действия которого описаны в изображении ниже.

Меню секции

Если внутри секции размещен хотя бы один блок, то создать вложенную секцию уже невозможно.

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

Блок — видимая часть модуля, в которой отображается определенная информация. Блок размещается внутри секции. Каждый модуль может иметь неограниченное число блоков. Например, модуль «Каталог» содержит в себе следующие блоки: «Последние просмотренные товары», «Список категорий», «Рекомендуемые товары».

Чтобы добавить блок, в меню требуемой секции следует нажать на иконку «Добавить модуль». Откроется окно со списком доступных блоков, распределенных по модулям.

Диалог выбора блока

В случае, если блок имеет обязательные настройки, после выбора блока откроется диалог установки параметров блока. Например, блок «Список категорий» имеет две настройки:

  • Шаблон, который используется для отображения блока;
  • Корневая директория, с помощью которой можно ограничить список отображаемых категорий.

Настройки блока

Отдельно стоит сказать про блок Главное содержимое страницы. Он принадлежит Системному модулю. Этот блок содержит основной HTML, который был подготовлен фронт-контроллером для открытой пользователем страницы. То есть данный блок должен присутствовать на каждой странице. Исключением может быть главная страница, фронт-контроллер которой ничего не возвращает.

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

Наследование контейнеров

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

Секции и блоки можно перемещать, используя технологию drag&drop (то есть с помощью мыши).

Перемещение блоков

Темы оформления, использующие адаптивные (отзывчивые) к различным устройствам технологии, иногда не поддерживают перемещение секций и блоков из-за того, что разработчиками темы заложен жесткий порядок элементов. Не рекомендуется перемещать местами секции в идущей в комплекте с коробочными версиями ReadyScript теме оформления.

В верхней части «Конструктора сайта» располагаются кнопки для быстрого импорта/экспорта структуры блоков через xml-файл:

  • Сохранить эталон темы — позволяет сохранить все сведения о страницах в файле blocks.xml темы оформления.
  • Экспорт — позволяет скачать xml-файл со всеми сведениями о страницах.
  • Импорт — позволяет загрузить сведения о страницах из xml-файла.

Кнопки конструктора сайта

Адаптивные встроенные блоки HTML + CSS

Это встроенный блок для сайтов, которые идут в адаптивной верстке и созданы на чистом CSS и HTML, где отлично смотрится для вывода информации. Давайте изначально кратко про блоки, которые вы вероятно встречали, так как они идут в разном дизайне. Здесь он отлично выстроен, где в левом верхнем углу, вы как веб-разработчик можете поставить шрифтовую иконку, которая соответствует материалу, что находится в блоке. А по сути там идет только стилистика с изображением, которое можно красиво оформить под свой сайт.

Здесь выставил картинки из фильма «Зелена стрела», что пришлось под эту гамму цвета всю основу, вплоть до фона выставлять. Хотя на светлом сайте не исключаю увидеть тени и разные элементы. И так, вообще на сайте такие блоки, так как их можно разместить под шапкой, и уже самостоятельно в них поместить картинки с переходом, что в большинстве можно видеть на официальных ресурсах, что предлагают услуги.

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

Как пример, просто изменил фон, что сразу ярче стали смотреться:

Приступаем к установке:

HTML

Код

<div>
   
<div>
   
  <div>
  <div>
  <img src=»http://zornet.ru/_fr/81/3056119.jpg» alt=»ZorNet.Ru — сайт для вебмастера»>
  <div>1</div>
  </div>
  <p>ZorNet.Ru — первый</p>
  </div>
   
  <div>
  <div>
  <img src=»http://zornet.ru/_fr/81/1935177.jpg» alt=»Интересные решения для сайта»>
  <div>2</div>
  </div>
  <p>Актуальный материал</p>
  </div>
   
  <div>
  <div>
  <img src=»http://zornet.ru/_fr/81/8179981.jpg» alt=»Стили CSS»>
  <div>3</div>
  </div>
  <p>Здесь идет заголовок</p>  
  </div>
   
  <div>
  <div>
  <img src=»http://zornet. ru/_fr/81/0041951.jpg» alt=»ZorNet.Ru — интернет портал»>
  <div>4</div>
  </div>
  <p>Здесь ключевое слово</p>
  </div>
   
  </div>
   
</div>


CSS

Код

.kacagainsuvod {
  max-width: 1085px;
  margin: 0 auto;
  padding: 50px 0;
}

.kedaunbaes-ugasonug {
  text-align: center;
}

.ganvesem-atekacuvos {
  display: inline-block;
  vertical-align: top;
  margin: 0 30px 0 0;
  width: 217px;
  line-height: 1.4;
  letter-spacing: normal;
  color: #eae2e2;
  font-size: 14px;
  font-weight: bold;
}

.ganvesem-atekacuvos:last-child {
  margin: 0;
}

.ganvesem-atekacuvos .kasted-kuvam {
  margin: 0 auto 17px;
  max-width: 100%;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  overflow: hidden;
  position: relative;
  height: 321px;
  border: 2px solid #bbafaf;
}

. ganvesem-atekacuvos img {
  display: block;
  height: 321px;
}

.ganvesem-atekacuvos .vadekin {
  width: 50px;
  height: 50px;
  -webkit-border-radius: 0 0 10px 0;
  -moz-border-radius: 0 0 10px 0;
  border-radius: 0 0 10px 0;
  background-color: #dc6e3c;
  font-weight: 700;
  font-size: 25px;
  line-height: 50px;
  color: #efecec;
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
  text-shadow: 0 1px 0 #4e4747;
}
@media screen and (max-width: 991px) {
  .ganvesem-atekacuvos {
  margin: 0 30px 30px;
  }
  .ganvesem-atekacuvos:last-child {
  margin: 0 30px 0;
  }
}


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

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

Демонстрация

Фиксированный блок в css

Фиксированные блоки используется на сайте для того контента, который должен быть всегда виден на экране.

Основные примеры использования:

  • Кнопка «Наверха»
  • Верхнее меню при прокрутке страницы
  • Сайдбары
  • Различные рекламные баннеры

Создание фиксированного блока

Для создания таких блоков, мы будем использовать свойство «position fixed».

Создадим простую разметку блока:



	Фиксированый блок
    
Текст фиксированного блока на CSS

И добавим следующие стили:


#fixblock{
	width: 300px;
	height: 100px;
	border: 1px solid #000;
	position: fixed;
	bottom: 0px;
	right: 0px;
}

Для работы фиксированного блока важно указать:

  • position: fixed — Фиксированное позиционирование
  • bottom — Положение по вертикали (или top)
  • right — Положение по горизонтали (или left)

Примеры использования

Рассмотрим стили для конкретных примеров:

Верхнее меню


#topmenu{
	width: 100%;
	position: fixed;
    top: 0px;
}

Так как мы указали ширину в 100%, положение по горизонтали не обязательно.

Кнопка «Наверх»


#ToUp{
	width: 50px;
	height: 50px;
	position: fixed;
    right: 10px;
    bottom: 10px;
}

Правый сайдбар во всю высоту


#rightsidebar{
	width: 300px;
	height: 100%;
	position: fixed;
	right: 0px;
	top: 0px;
}

🤑 Как сделать тизерную рекламу на сайте самому или учимся верстке + советы по AdBlock

В данной статье я научу вас делать «тизерную» рекламу самостоятельно на своем сайте, что поможет вам увеличить доход и с 99% вероятности обойти с ней блокировку AdBlock.

Вы можете просто скопировать код и подменить данные на свои (картинки, ссылки, тексты). Все будет работать на любом сайте (не важно какая CMS или шаблон), в том числе при адаптивной верстке.

В данных тизерах вы можете рекламировать какой-то товар партнерок (чай, крема, гаджеты, игры и прочее). Вставлять подобные рекламные блоки на сайт удобно при помощи AdsPlace’r Pro или прямо в код шаблона. Можно использовать во всплывающих окнах Sociale’r. На ваш выбор.

Что именно мы создаем

Ниже будут примеры с пояснениями. Делать мы будем 2 вида тизеров:

  • Горизонтальный — отлично подойдет для тела статьи (в начале, в середине или конце статьи).
  • Вертикальный — обычно используют в сайдбаре, но иногда и в теле статьи.

Горизонтальный блок в ряд

Можете потягать за край браузера и посмотреть как блок меняется исходя из разрешения. Либо зайдите в статью с мобильника.

Это тизерный блок, где у нас:

  • 3 картинки, у каждой есть подпись.
  • Каждый тизер (картинка+подпись) являются ссылкой на какую-то страницу (обернуты в ссылку).

Вот код HTML-разметки этого блока:

<div> <a href=»https://wp-r.ru/» title=»Название ссылки»><img src=»https://wp-r.ru/wp-content/uploads/2016/10/adsplacer.png» alt=»Картинка 1″ />Какой-то заголовок рекламы №1</a> <a href=»https://wp-r.ru/» title=»Название ссылки»><img src=»https://wp-r.ru/wp-content/uploads/2016/10/Screenshot_1.png» alt=»Картинка 2″ />Какой-то заголовок рекламы №2</a> <a href=»https://wp-r.ru/» title=»Название ссылки»><img src=»https://wp-r.ru/wp-content/uploads/2016/10/Screenshot_2.png» alt=»Картинка 3″ />Какой-то заголовок рекламы №3</a> </div>

 

<div>

<a href=»https://wp-r.ru/» title=»Название ссылки»><img src=»https://wp-r.ru/wp-content/uploads/2016/10/adsplacer. png» alt=»Картинка 1″ />Какой-то заголовок рекламы №1</a>

<a href=»https://wp-r.ru/» title=»Название ссылки»><img src=»https://wp-r.ru/wp-content/uploads/2016/10/Screenshot_1.png» alt=»Картинка 2″ />Какой-то заголовок рекламы №2</a>

<a href=»https://wp-r.ru/» title=»Название ссылки»><img src=»https://wp-r.ru/wp-content/uploads/2016/10/Screenshot_2.png» alt=»Картинка 3″ />Какой-то заголовок рекламы №3</a>

</div>

 

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

А теперь магия CSS (визуальное оформление). Здесь все сугубо индивидуально для каждого дизайна сайта. Но я вам дам все нужные параметры, которые могут пригодиться. Напротив каждого параметра есть пояснение, чтобы вы могли скорректировать дизайн под себя даже не обладая навыками в верстке.

У вас в шаблоне есть файл стилей style.css (точно есть в корне шаблона или в папке css). Так же в некоторых шаблонах предусмотрена возможность вставлять параметры css в специальное поле настроек этого шаблона. Владельцы плагина Sociale’r так же найдут в нем подобное поле.

.tizery-hr { border: 1px solid #c4c4c4; /* Рамка всего блока. Стоит ширина 1px, solid — непрерывная, #c4c4c4 — это ее цвет. Если рамка не нужна — просто удалите эту строку */ margin: 10px 0 10px 0; /* Внешний отступ всего блока с тизерами от контента страницы. Стоит сверху и снизу по 10px, а слева и справа 0px */ padding: 10px 5px 5px 5px; /* Внутренний отступ внутри блока. Чтобы не сливались с краями рамки тизеры. Соответственно: сверху 10 px, справа 5px, снизу 5px, слева 5px */ text-align: center; /* Выравнивание текста во всем блоке по центру */ } .tizery-hr img { width: 150px; /* Установили принудительно ширину картинки в 150px, на случай если у вас будут все разного размера */ height: 150px; /* Установили высоту картинки в 150px, аналогично как с шириной случай */ display: block; /* Позволяет перенести текст под картинку в нашем случае. Оставляем так */ margin: 0 auto 10px; /* Внешний отступ картинки. Сверху 0px, слева и справа auto, чтобы она была ровно по центру своего блока тизера. Снизу 10px, чтобы не сливалось с текстом */ } .tizery-hr a { color: #000 !important; /* Цвет ссылки, если требуется сменить стандартный цвет ссылок шаблона. Попробуйте удалить ее и посмотреть как у вас настроено по-умолчанию в шаблоне */ display: inline-block; /* Этим параметром мы говорим, чтобы блоки становились в одну строку и при низком разрешении красиво выстраивались друг под другом */ font-weight: bold; /* Делаем текст жирным. Если не нужно — просто удалите строку */ font-size: 16px !important; /* Размер шрифта у текста. Поэкспериментируйте с размером */ margin: 5px 0 5px 0; /* Задаем внешний отступ каждому блоку с тизером, чтобы при низком разрешении они не налазили друг на друга снизу и сверху. Соответственно по 5px сверху и снизу */ padding: 5px; /* Задаем внутренний отступ для каждого блока с тизером, чтобы тот же текст не прилипал к краям блока, если вы добавите ему рамку */ width: 200px; /* Задаем ширину блока каждого. Здесь можно сделать и 150px по ширине картинки, чтобы текст ровно под ней был. На ваше усмотрение */ vertical-align: top; /* Данный параметр выравнивает все тизеры по верхнему краю. Пригодится в случае, если у вас какой-то текст будет больше на 1-2 строки, чем остальные */ }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

 

.tizery-hr {

    border: 1px solid #c4c4c4; /* Рамка всего блока. Стоит ширина 1px, solid — непрерывная, #c4c4c4 — это ее цвет. Если рамка не нужна — просто удалите эту строку */

    margin: 10px 0 10px 0; /* Внешний отступ всего блока с тизерами от контента страницы. Стоит сверху и снизу по 10px, а слева и справа 0px */

    padding: 10px 5px 5px 5px; /* Внутренний отступ внутри блока. Чтобы не сливались с краями рамки тизеры. Соответственно: сверху 10 px, справа 5px, снизу 5px, слева 5px */

    text-align: center; /* Выравнивание текста во всем блоке по центру */

 

}

.tizery-hr img {

    width: 150px; /* Установили принудительно ширину картинки в 150px, на случай если у вас будут все разного размера */

    height: 150px; /* Установили высоту картинки в 150px, аналогично как с шириной случай */

    display: block; /* Позволяет перенести текст под картинку в нашем случае. Оставляем так */

    margin: 0 auto 10px; /* Внешний отступ картинки. Сверху 0px, слева и справа auto, чтобы она была ровно по центру своего блока тизера. Снизу 10px, чтобы не сливалось с текстом */

}

.tizery-hr a {

    color: #000 !important; /* Цвет ссылки, если требуется сменить стандартный цвет ссылок шаблона. Попробуйте удалить ее и посмотреть как у вас настроено по-умолчанию в шаблоне */

    display: inline-block; /* Этим параметром мы говорим, чтобы блоки становились в одну строку и при низком разрешении красиво выстраивались друг под другом */

    font-weight: bold; /* Делаем текст жирным. Если не нужно — просто удалите строку */

    font-size: 16px !important; /* Размер шрифта у текста. Поэкспериментируйте с размером */

    margin: 5px 0 5px 0; /* Задаем внешний отступ каждому блоку с тизером, чтобы при низком разрешении они не налазили друг на друга снизу и сверху. Соответственно по 5px сверху и снизу */

    padding: 5px; /* Задаем внутренний отступ для каждого блока с тизером, чтобы тот же текст не прилипал к краям блока, если вы добавите ему рамку */

    width: 200px; /* Задаем ширину блока каждого. Здесь можно сделать и 150px по ширине картинки, чтобы текст ровно под ней был. На ваше усмотрение */

    vertical-align: top; /* Данный параметр выравнивает все тизеры по верхнему краю. Пригодится в случае, если у вас какой-то текст будет больше на 1-2 строки, чем остальные */

}

 

Есть еще вариант добавить эффектов при наведении курсора мышки на тизеры. Если требуется подобное решение, то пишите в комментариях чтобы дополнил статью.

Вертикальный блок (друг под другом)

Как уже писал выше — подобный блок удобно вставлять в сайдбар. Но делал клиентам и для тела статьи, когда требовались большие картинки и в горизонтальный ряд не смотрелось.

В данном случае разметка HTML немного изменилась: class для всего блока стал tizery-vr, чтобы отличался от горизонтального. Остальное идентично.

<div> <a href=»https://wp-r.ru/» title=»Название ссылки»><img src=»https://wp-r.ru/wp-content/uploads/2016/10/adsplacer.png» alt=»Картинка 1″ />Какой-то заголовок рекламы №1</a> <a href=»https://wp-r.ru/» title=»Название ссылки»><img src=»https://wp-r.ru/wp-content/uploads/2016/10/Screenshot_1.png» alt=»Картинка 2″ />Какой-то заголовок рекламы №2</a> <a href=»https://wp-r.ru/» title=»Название ссылки»><img src=»https://wp-r.ru/wp-content/uploads/2016/10/Screenshot_2.png» alt=»Картинка 3″ />Какой-то заголовок рекламы №3</a> </div>

 

<div>

<a href=»https://wp-r.ru/» title=»Название ссылки»><img src=»https://wp-r.ru/wp-content/uploads/2016/10/adsplacer.png» alt=»Картинка 1″ />Какой-то заголовок рекламы №1</a>

<a href=»https://wp-r.ru/» title=»Название ссылки»><img src=»https://wp-r.ru/wp-content/uploads/2016/10/Screenshot_1.png» alt=»Картинка 2″ />Какой-то заголовок рекламы №2</a>

<a href=»https://wp-r.ru/» title=»Название ссылки»><img src=»https://wp-r.ru/wp-content/uploads/2016/10/Screenshot_2.png» alt=»Картинка 3″ />Какой-то заголовок рекламы №3</a>

</div>

 

А теперь магия CSS.

.tizery-vr { padding: 5px; /* Внутренний отступ со всех сторон от края сайдбара (виджета). Если не требуется — удаляем строку */ } .tizery-vr img { height: 100px; /* Установили принудительно высоту картинки в 100px, на случай если у вас будут все разного размера */ margin: 0 10px 0 0; /* Внешний отступ картинки. Сверху 0px, справа 10 px (чтобы не сливалось с текстом), снизу и слева 0 */ padding: 5px 0 0 0; /* Внутренний отступ картинки. Сделали сверху 5px, чтобы стало ровно по верхней границе с текстом (не было лесенки) */ width: 100px; /* Установили принудительно ширину картинки в 100px, на случай если у вас будут все разного размера */ } .tizery-vr a { display: flex; /* Позиционирование каждого блока с тизером. Оставляем как есть */ margin: 10px 0; /* Внешний отступ каждого тизера сверзу и снизу по 10px */ }

 

.tizery-vr {

padding: 5px; /* Внутренний отступ со всех сторон от края сайдбара (виджета). Если не требуется — удаляем строку */

}

.tizery-vr img {

height: 100px; /* Установили принудительно высоту картинки в 100px, на случай если у вас будут все разного размера */

margin: 0 10px 0 0; /* Внешний отступ картинки. Сверху 0px, справа 10 px (чтобы не сливалось с текстом), снизу и слева 0 */

padding: 5px 0 0 0; /* Внутренний отступ картинки. Сделали сверху 5px, чтобы стало ровно по верхней границе с текстом (не было лесенки) */

width: 100px; /* Установили принудительно ширину картинки в 100px, на случай если у вас будут все разного размера */

}

.tizery-vr a {

display: flex; /* Позиционирование каждого блока с тизером. Оставляем как есть */

margin: 10px 0; /* Внешний отступ каждого тизера сверзу и снизу по 10px */

}

 

Остальные необязательные параметры вы можете взять с горизонтального блока и подставить. Пробуйте, экспериментируйте!

Касательно AdBlock

Чтобы наверняка он не заблочил вашу рекламу, подмените названия class для каждого блока. Это на случай, если все будут использовать одинаковое название блоков из статьи. Не используйте в этих названиях слово связанных с рекламой (из головы придумайте, хоть тот же набор букв). И, конечно же, название должно быть на латинице, без пробелов.

Обратите внимание, что это название меняется в HTML-разметке, а так же потом используется в css.

Сами картинки обязательно закачивайте к себе на сайт и потом размещайте в блоках. Чтобы их путь начинался с вашего домена.

Итог

Теперь вы умеете самостоятельно верстать тизерные блоки рекламы у себя на сайте и при этом не нужно платить фрилансерам.

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

Безусловно, можно еще более стилизовать блоки. Но это уже будет индивидуально под каждый сайт и здесь всех вариантов предусмотреть не возможно.

Есть вопросы? Задавайте их в комментариях.

Facebook

Twitter

Вконтакте

Внедрение информационных блоков с других сайтов

В сайт можно внедрять блоки, содержащие информацию с других сайтов. Одним из способов, является внедрение в собственный сайт определённого html-кода. На многих сайтах существуют собственные готовые коды, которые они рекомендуют размещать на сайте. Нередко их называют «виджетами».

Перед интеграцией такого кода в сайт, рекомендуется проверять его содержимое на безопасность. При проверке, следует обратить внимание на скрипты и ссылок внутри кода. Иногда html-вставки с содержимом другого сайта затормаживают работу сайта, по причине скорости работы сайта-источника. Причиной некорректного отображения сторонней информаций на сайте, является несовместимость скриптов. Если информация с другого сайта не отображается, то возможно, не работает сервис сайта-источника.

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

Вставка карты в сайт

Яндекс.Карты

Выбирается определённая область на карте или находится в поиске соответствующий адрес.
В правом верхнем углу расположена кнопка «Ссылка на карту». Удобнее будет воспользоваться конструктором схем проезда

.

Google Карты

Выделяется область отображения или водится соответствующий адрес.
В правом верхнем углу расположена кнопка «Ссылка на карту».

Внедрение видео

YouTube

Под видеороликом расположена кнопка «Отправить».
В раскрывающемся меню находится кнопка «Встроить».

Блоки из социальных сетей

Виджеты Вконтакте

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

Facebook Social Plugins

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

Блок «Поделиться» от Яндекса

Блок позволяет посетителям размещать ссылку на страницу сайта в социальных сетях или блогах.

Пример работы блока «Поделиться» для этой страницы:

DiV верстка — Создаем блоки для двухколоночного макета в HTML, определяем их размеры и задаем позиционирование в CSS

Главная / Как устроены сайты / Создаем сайт с нуля

9 января 2021

  1. Создаем макет сайта в 2 колонки на основе DIV верстки
  2. Начинаем верстать макет сайта в 2 колонки на дивах
  3. Прописываем нужный набор блоков в index.html
  4. Прописываем CSS свойства для блоков
  5. Выравниваем двухколоночный макет по центру
  6. Подсвечиваем блоки для наглядности
  7. Задаем обтекание блока левой колонки через Float

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

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

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

Создаем макет сайта в 2 колонки на основе DIV верстки

Итак, в предыдущей статье мы создали на своем хостинге (хотя для этих целей вполне подойдет и локальный сервер Denver тут см. обзор его возможностей) папку TEST, в которую положили два основных файла нашего будущего макета: Index.html и Style.css. Собственно, они и будут составлять наш простейший вариант каркаса.

Опять, наверное, придется немного отвлечься от непосредственной верстки, т.к. не всем может быть понятно, как создать папку TEST в корневом каталоге, расположенного на реальном хостинге. А так же, что это такое — корень сайта и где его искать при доступе по ФТП. А ведь действительно, вопрос не тривиальный для пользователя, впервые столкнувшегося с хостингом.

Так вот, вам нужно будет сначала подключиться по протоколу FTP. Данные для подключения по FTP вам должен был сообщить вам хостинг провайдер (читайте тут про то, что это такое за hosting вообще, а здесь про его покупку).

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

Но этот каталог не будет являться корневой папкой. В корне должен лежать файл Index.php, а так же и все остальные файлы и папки используемого вами движка.

Для этой цели используется отдельная директория, правда, ее название, в зависимости от конкретного хостинга, может отличаться. Структура внутренних папок в основном каталоге (открывающемся при подключении к сайту по FTP) так же может отличаться, но суть остается прежней.

Например, можете увидеть следующую картину:

Файлы движка вы должны копировать не в эту самую верхнюю директорию, доступную вам по FTP, а в так называемую, корневую папку. Как узнать, какая из присутствующих там директорий является корневой?

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

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

Как создать каталог с помощью программы FileZilla? Да, очень просто. Вам достаточно будет открыть в правой части программы коневую директорию и щелкнуть по пустому месту правой кнопкой мыши, а из контекстного меню выбрать пункт «Создать каталог».

Уф, создали папку TEST в коревом каталоге сайта. И на том спасибо. В общем-то, можно было с этим и не заморачиваться. Как так? А вот так. Директорию TEST можно было бы создать и в какой-нибудь внутренней папке вебсайта, но проще все же будет в корне.

Для локального сервера Денвер вам нужно будет создать директорию TEST в следующем каталоге:

c:\server\home\localhost\www\

Вместо диска «С» нужно указать диск на вашем компьютере, где установлен локальный сервер. Тогда, для просмотра создаваемого нами на основе Div верстки макета в 2 колонки, нужно набрать следующий путь в адресной строке браузера:

http://localhost/test/

Блин, если все так подробно рассказывать, то получится небольшая книга по блочной верстке, причем, бОльшая ее часть будет посвящена основам вебмастеринга, но я уже по другому писать не могу, привык разбирать все нюансы по полочкам. Не взыщите, достаточно подкованные вебмастера, которым все это уже далеко не в новинку.

Продолжим разговор о макете. В файле Index.html мы будем задавать сами DIV-контейнеры, на которых и будет строиться наш каркас, а в файле Style.css — описывать положение и внешний вид этих DIV-контейнеров. Это в двух словах, а как оно будет на деле, вы увидите немного погодя.

Для того, чтобы наблюдать в браузере результаты наших трудов, мы будем периодически обращаться из адресной строки браузера к папке TEST, расположенной на вашем хостинге или же на локальном сервере. В случае реального хоста, в адресной строке браузера вам нужно будет набрать что-то вроде этого:

https://ktonanovenkogo.ru/test

Но тут есть два «но». Во-первых, вместо https://ktonanovenkogo.ru/ вам нужно ввести свой Урл, а во-вторых, обратите внимание на регистр латинских букв, которые составляют название вашей директории TEST.

Если вы написали название папки заглавными буквами, то и в адресной строке нужно набирать название папки заглавными (я написал здесь TEST в верхнем регистре, только лишь с целью его выделения на фоне остального текста).

Дело в том, что на реальном хостинге в большинстве случаев сервера работают под управлением UNIX подобной операционной системы, в которой заглавные и строчные буквы различаются (в отличии, от Windows, работать с которой мы привыкли).

Начинаем верстать макет сайта в 2 колонки на дивах

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

Все элементы поместим в один большой Div-контейнер для того, чтобы можно менять размеры и выравнивание всего макета через свойства этого контейнера. Внутри основного Div будут находиться контейнеры, отвечающие за формирование отдельных блоков (шапки, левой колонки, области для контента, футера).

Мы зададим им размеры и настроим позиционирование на странице с помощью CSS. Итак, приступим.

Начнем с Index.html. Откройте его на редактирование в удобном для вас редакторе (я пользуюсь для этой цели лучшим из бесплатных текстовых редакторов Нотепад++ — тут его можно скачать и настроить).

Для того, чтобы привыкать к правильному оформлению HTML документов, давайте сразу пропишем стандартную часть (на этом я как раз останавливался в предыдущей статье. Там будет DOCTYPE (здесь читайте про доктайп и комментарии в Html) и все остальные верхние теги, которые браузер в случае их отсутствия может добавить и сам (умны они стали — жуть):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Заголовок документа</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
 </body>
</html>

Значение всех строк в этом коде я подробно объяснял в предыдущей статье (см. ссылку в самом начале этой публикации), поэтому сейчас остановлюсь лишь на строке:

<link href="style.css" rel="stylesheet" type="text/css">

Эта строка говорит браузеру, где ему искать и как называется файл каскадных таблиц стилей (он имеет расширение CSS), который нужен браузеру для корректного отображения задуманного нами оформления шаблона будущего сайта. В нашем случае он называется Style.css (здесь читайте про Style и Link подробнее), а искать его нужно в той же папке, где лежит Index.html (собственно, в котором и прописана эта строчка).

Почему именно в этой же папке? Потому, что если вы не прописываете никакого пути до файла (указываете только его название), то браузер будет его искать в той же директории, где лежит исполняемый сейчас (в нашем случае это Index.html). Т.е. отсутствие пути будет равносильно тому, как если бы я прописал путь до Style.css в виде:

<link href="https://ktonanovenkogo.ru/test/style.css" rel="stylesheet" type="text/css">

Но первый вариант записи короче и более универсальный, т.к. там напрямую не указывается путь до папки с файлами, а значит можно будет поместить файлы Index.html и Style.css в другую директорию, обратиться к Index.html из адресной строки и все равно будет подгружен Style.css. Подробнее про относительные и абсолютные ссылки тут написано, а заодно и про URL (универсальный идентификатор ресурса).

В связи с этим хочу заметить, что вы вообще можете не заморачиваться с хостингом или же с локальным сервером. Просто создайте на своем компьютере любую папку и поместите в нее наши Index.html и Style.css. Пропишите в первом из них путь до файла Style.css в виде:

<link href="style.css" rel="stylesheet" type="text/css">

И все. Теперь вы сможете открыть Index.html (двойной щелчок мышью по нему) в браузере, назначенном по умолчанию для открывания файлов с расширением HTML у вас на компьютере, и при этом будет автоматически подгружен Style.css.

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

Прописываем нужный набор блоков в index.html

Теперь нам нужно будет создать четыре DIV контейнера для всех частей нашего 2 колоночного макета (шапки, левой колонки, области для контента, футера) и заключить их в один большой Div.

Внутрь Div контейнеров для частей макета можно будет заключить для наглядности названия этих блоков. Все это мы будем писать между открывающим и закрывающим Html тегами Body. Получится примерно такой код в Index.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Блочная верстка - дубль 2</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div>

<div>Шапка </div>
<div>Левая колонка</div>
<div>Содержимое страницы</div>
<div>Подвал</div>
</div>
 </body>
</html>

Т.е. сразу за открывающим тегом Body мы прописали открывающий тег основного Div контейнера макета:

<div>

В котором задали ID (в нашем случае id="maket"). В последствии для этого ID (читайте подробнее про CSS селекторы тега, класса (class), Id и универсальный селектор), в файле каскадных таблиц стилей Style.css, мы допишем CSS свойства, позволяющие определить размер и выравнивание основного Div.

После открывающего тега основного Div мы прописали код четырех контейнеров, которые станут элементами макета.

<div>Шапка </div>
<div>Левая колонка</div>
<div>Содержимое страницы</div>
<div>Подвал</div>

Всем этим четырем Div мы назначили свои индивидуальные ID, для которых затем в Style.css мы пропишем CSS свойства, помогающие настроить размер и взаимное размещение (позиционирование) этих контейнеров. Для наглядности, внутри них я прописал их назначения. Ну, и перед закрывающим тегом Body мы поставили закрывающий тег основного Div для всего макета:

</div>

Теперь, если открыть созданный нами Index.html в браузере, мы увидим просто перечисление в столбик названий частей 2 колоночного макета. Если вы откроете Index.html в браузере FireFox с установленным плагином Web Developer и выберите из меню этого плагина пункты «Контуры» — «Контур элементов уровня блоков», то увидите примерно следующую картину:

Т.е. все получилось именно так, как мы и хотели — четыре Div заключены в одном основном контейнере. Но почему же тогда все выглядит не так, как мы наметили на структурной схеме макета на основе блочной верстки? Просто мы еще ничего не написали в наш Style.css, который поможет чудесным образом (с помощью свойств CSS) расставить все дивы по своим местам.

Прописываем CSS свойства для блоков

Открываем в удобном для вас редакторе Style.css и прописываем стили CSS для только что созданных контейнеров. Сначала в Style.css стоит прописать правило для тегов Body и Html, которое позволит сбросить отступы макета сайта от внутренних и внешних границ экрана (для соблюдения кроссбраузерности):

body, html {
margin:0px;
padding:0px;
}

Вы, наверное, уже слышали или видели, что макеты бывают фиксированной ширины (например, 800px), а могут быть, или же бывают, резиновые — ширина его подстраивается под разрешение экрана посетителя.

Второй вариант (резиновый) довольно часто используется на форумах, а для сайтов чаще всего применяют макет фиксированной ширины. Особенно это актуально сейчас, с появление широкоформатных мониторов с большим разрешением экрана (резиновый будет смотреться на таком мониторе не очень здорово).

Поэтому мы пропишем для нашего основного Div ряд CSS свойств в Style.css, которые позволят создать макет фиксированной ширины (например, 800px) и выровнять его по центру относительно краев экрана (в Index.html для основного контейнера мы прописали ID под названием maket) :

#maket {
width:800px;
margin:0 auto;
}

Итак, давайте разберем эту запись. Вы, наверное, уже поняли, что #MAKET (называется это селектором) говорит о том, что данная запись в CSS файле будет применена только к Div, в котором прописан. В фигурных скобках записываются свойства CSS со своими значениями. Общий синтаксис конструкции записи в CSS файле выглядит так:

Селектор { свойство1: значение; свойство2: значение; ... }

Что примечательно, код CSS будет одинаково хорошо работать вне зависимости от регистра символов, добавления или не добавления между элементами его кода переноса строк, пробелов или табуляции — в общем пишите так, как вам будет удобнее.

Но об этом я планирую подробно рассказать в серии статей, посвященной работе со стилями для начинающих вебмастеров. Давайте рассмотрим каждое свойство отдельно.

Первое CSS свойство двухколоночного макета:

width:800px;

задает ширину (тутпро Height и width читайте ) для основного Div контейнера (фактически ширину для всего макета), а второе CSS свойство:

margin:0 auto;

позволяет выровнять основной Div посередине относительно левого и правого края экрана. Само свойство Margin предназначено для задания отступов от внешних границ контейнера до соседних элементов страницы.

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

Первое значение, прописанное в Margin, равно нулю — это означает, что основной Div (фактически сам макет) будет вплотную прижат к верхнему и нижнему краю экрана (отступы сверху и снизу равны нулю).

Второе значение в Margin прописано как Auto — это означает, что отступ от левой и правой границы основного контейнера будет равномерно распределен, в результате чего он (а фактически сам макет) будет выровнен по центру относительно левого и правого края экрана. Такие вот пироги.

Две строчки CSS кода, а сколько текста нужно написать для подробного объяснения их значения (кошмар).

Пропишите данные свойства в ваш Style.css

body, html {
margin:0px;
padding:0px;
}
#maket {
width:800px;
margin:0 auto;
}

Сохраните изменения и откройте в браузере Index.html. Вы увидите, что теперь ширина двухколоночного макета перестала быть равной ширине экрана и уменьшилась до 800px. При этом он еще и выровнялся по центру:

Выравниваем двухколоночный макет по центру

Все хорошо, но есть одно «но». В браузере Internet Explorer 5 (тут читайте про историю IE, а 5 это очень старая версия, но может встречаться у посетителей до сих пор) выравнивание макета на основе блочной верстки по центру описанным выше способом не сработает.

Не понимает он этого, поэтому персонально для него (Internet Explorer 5) нужно будет дописать для Body следующее CSS свойство:

text-align:center;

text-align (здесь про него, а заодно и про text-decoration, vertical-align и text-indent читайте) поможет выровнять наш макет по центру в старых версиях браузеров. Но это S свойство, прописанное для Body, задает выравнивание по центру для всего текста на странице, а это нам вовсе не нужно.

Поэтому мы допишем новое свойство для нашего основного Div, которое задаст выравнивание текста во всем макете по левому краю (это значение используется по умолчанию, но т.к. мы прописали иное, то приходится указывать выравнивание по левому краю в явном виде):

text-align:left;

Такой вот финт ушами, нужный для того, чтобы подстроиться под старые версии браузеров. Код в нашем Style.css после этого будет выглядеть следующим образом:

body, html {
margin:0px;
padding:0px;
text-align:center;
}
#maket {
width:800px;
margin:0 auto;
text-align:left;
}

Подсвечиваем блоки для наглядности

Теперь я предлагаю заняться внутренними блоками макета. Для большей наглядности предлагаю вам подкрасить эти Div разными цветами при задании фонового цвета для них, с помощью специально предназначенного для этого (свойства CSS — Background-color.

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

Итак, пропишем для всех названий ID наших внутренних Div свойство Background-color с разными значениями фонового цвета, например, так:

#header{
background-color:#C0C000;
}
#left{
background-color:#00C0C0;
}
#content{
background-color:#8080FF;
}
#footer{
background-color:#FFC0FF;
}

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

Теперь для того, чтобы увидеть границы отдельных контейнеров, нам не нужно будет прибегать к услугам плагина Web Developer (см. ссылку выше).

Блок Header, судя по структурной схеме приведенной в начале статьи, должен у нас занимать всю ширину макета, но блок Left должен иметь ограниченную ширину. Задать это можно с помощью уже известного нам CSS свойства Width, например, так:

#left{
background-color:#00C0C0;
width:200px;
}

В результате наш макет примет вид:

Задаем обтекание блока левой колонки другими блоками через Float

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

Добиться этого не сложно, благо имеется свойство CSS под названием Float, позволяющее прижать любой блочный элемент к нужной стороне экрана и задать его обтекание с другой стороны, расположенным следом за ним (в HTML коде) элементами.

Немного не понятно? Не беда, сейчас рассмотрим все на примере. Добавим свойство для блока Left, позволяющее прижать его к левому краю и задать обтекание его справа контейнерами, расположенными ниже в коде. Выглядеть это будет так:

#left{
background-color:#00C0C0;
width:200px;
float:left;
}

Т.е. добавилось всего лишь одно единственное свойство Float со значением Left, предназначенное для блока Left. Весь код в Style.css, созданный нами на данный момент, будет иметь вид:

body, html {
margin:0px;
padding:0px;
}
#maket {
width:800px;
margin:0 auto;
}
#header{
background-color:#C0C000;
}
#left{
background-color:#00C0C0;
width:200px;
float:left;
}
#content{
background-color:#8080FF;
}
#footer{
background-color:#FFC0FF;
}

А наш макет на Div верстке теперь будет выглядеть так:

Класс! Почти то, что нужно, но опять же есть маленькая неувязочка. Блок Footer (подвал) не должен обтекать левую колонку справа, он должен располагаться в самом низу макета и занимать всю его ширину.

Как же решить эту проблему? Да, в общем-то довольно просто, но об этом я расскажу уже в следующей статье данного цикла, посвященного основам блочной верстки.

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

Использую для заработка

Элементы уровня блока — HTML: язык разметки гипертекста

Элементы HTML ( язык разметки гипертекста ) исторически классифицировались как элементы «уровня блока» или элементы «встроенного уровня». Поскольку это презентационная характеристика, в настоящее время она определяется CSS в макете потока. Элемент уровня блока занимает все горизонтальное пространство своего родительского элемента (контейнера) и вертикальное пространство, равное высоте его содержимого, тем самым создавая «блок». В этой статье мы рассмотрим элементы уровня блока HTML и их отличие от элементов встроенного уровня.

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

Элемент уровня блока всегда начинается с новой строки и занимает всю доступную ширину (растягивается влево и вправо, насколько это возможно).

Следующий пример демонстрирует влияние элемента уровня блока:

HTML 

  
 Этот абзац является элементом уровня блока; его фон окрашен для отображения родительского элемента абзаца.

CSS 

  p {background-color: # 8ABB55; }
  • Элементы уровня блока могут появляться только внутри элемента .

Есть несколько ключевых отличий между элементами уровня блока и встроенными элементами:

Модель содержимого
Как правило, элементы уровня блока могут содержать встроенные элементы и (иногда) другие элементы уровня блока. Этому структурному различию присуща идея, что блочные элементы создают «большие» структуры, чем встроенные элементы.
Форматирование по умолчанию
По умолчанию элементы уровня блока начинаются с новой строки, но встроенные элементы могут начинаться в любом месте строки.

Различие между блочными и строчными элементами использовалось в спецификациях HTML до 4.01. В HTML5 это двоичное различие заменено более сложным набором категорий контента. В то время как «встроенная» категория примерно соответствует категории фразового содержимого, «блочная» категория не соответствует напрямую ни одной категории содержимого HTML5, но «блочных» и «встроенных» элементов, объединенных вместе, соответствуют содержимое потока в HTML5.Есть также дополнительные категории, например интерактивный контент.

Ниже приводится полный список всех элементов HTML «блочного уровня» (хотя «блочный уровень» технически не определен для новых в HTML5 элементов).

блоков | Учебное пособие по HTML от Wideskills

В HTML элементы группируются с помощью тегов

и . Обычно мы группируем элементы для создания разделов или подразделов на нашей веб-странице.

Используя эти два тега, мы можем группировать элементы в HTML.

В предыдущих главах мы обсуждали примыкающие элементы уровня блока и встроенные элементы. Небольшая краткая информация о них,

Элементы уровня блока

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

Примеры этих элементов:

,
    ,

Это некоторый текст перед тегом DIV

Пример для элемента DIV

Это некоторый текст внутри элемента DIV

Это некоторый текст за пределами тега DIV

Атрибуты, поддерживаемые тегом

:

Глобальные атрибуты :

Тег

поддерживает все глобальные атрибуты HTML.

Атрибуты событий:

Тег

поддерживает все атрибуты событий HTML.

Разница между HTML 4.01 и HTML5

Атрибут align не поддерживается в HTML5.

Элемент
  • Span похож на div, за исключением того, что он работает на более тонком уровне.
  • Мы можем даже отформатировать один символ с помощью Span.
  • Этот элемент используется только для группировки встроенных элементов.
  • Используется для форматирования части текста.(Например, применение цвета к слову в предложении)
  • Мы можем стилизовать текст или управлять им с помощью элемента .
  • Этот тег поддерживается во всех основных браузерах.

Мы не можем просто использовать Span для выделения текста, потому что у нас есть другие теги, которые предназначены для этого.

Пример для элемента 
 
  
   <стиль>
    .applyspan
    {
     красный цвет;
     семейство шрифтов: arial;
     размер шрифта: 20 пикселей;
    }
   
  
  
    
 Span не является элементом  уровня блока
Результатом приведенного выше кода будет

Span не уровень блока элемент

Атрибуты, поддерживаемые тегом :

Global Attributes

Тег поддерживает все глобальные атрибуты HTML.

Атрибуты событий:

Тег поддерживает все атрибуты событий HTML.

Разница между HTML 4.01 и HTML5

Нет никакой разницы.

Это все о HTML-блоках. В следующей главе мы узнаем о HTML-макете.

Добавить блок HTML

В этом руководстве описывается блок HTML, который можно добавить в правый столбец пространства Moodle или в центральный и правый столбцы на панели инструментов.Примеры используются для иллюстрации того, как блоки HTML используются в Warwick.