Как создать блочный сайт


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

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

Отличия блочной вёрстки от табличной

Если табличная вёрстка подразумевает, что содержимое страницы находятся внутри тега <table>, то концепция блочной вёрстки основана на активном использовании универсальных тегов <div>, внутрь которых помещается содержимое, включая другие теги.

Блочная вёрстка лишена недостатков табличной — поисковыми системами она индексируется лучше, её код не такой развесистый, да и блоки <div>, которые так любят называть «слоями», изначально задумывались универсальными, то есть «для всего», тогда как <table> — это таблица, которую нужно использовать для отображения табличных данных и не более того.

Единственный ощутимый минус блочной вёрстки — сделанные на ней сайты могут по-разному отображаться в обозревателях. Чтобы этого избежать, нужно делать вёрстку «кроссбраузерной», то есть одинаково отображаемой любым обозревателем.

Суть блочной вёрстки

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

Каждая часть страницы помещается в свой блок <div>: верх сайта — в первый, меню — во второй, контент — в третий и т. д. Каждый блок наполняется содержимым средствами HTML, а также позиционируется и оформляется с помощью CSS-разметки.

Конечный HTML-документ представляет собой набор блоков <div> с контентом внутри. Оформление зачастую находится в отдельном CSS-файле, подключенном к странице тегом <link>, или как минимум в контейнере <style> секции <head>.

Принципы блочной вёрстки

Первый — конечно же, повсеместное использование тега <div>, который можно назвать базовым элементом блочной структуры, но об этом было сказано уже достаточно много.

Второе правило — принцип разделения кода, согласно которому содержимое от оформления нужно отделять. Говоря проще и ближе к нашему случаю: HTML — отдельно, CSS — отдельно (желательно в разные файлы). Такой подход делает структуру понятней. Программисту не нужно открывать CSS, дизайнеру — HTML. Все смотрят свой код и не мешают друг другу. Идеально.

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

Пример блочной вёрстки

Но, сколько не теоретизируй, а понимать всё проще на примере.

Итак, у нас есть макет (рисунок ниже). Условный, конечно — просто разметка, ведь цель примера — как можно наглядней объяснить принцип создания блочной вёрстки. Зная базу, навести красоту и усложнить макет вы сможете и сами, а я лучше не буду перегружать пример.

Согласно макету, страница сайта будет содержать пять блоков: «шапку», навигационное меню, боковую панель, основной блок с контентом и «ноги».

Сначала создадим HTML-страницу: обозначим структуру, разметим её. HTML-код будет таким:

<!DOCTYPE html> <html> <head> <title>Блочная вёрстка</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div> <div> <h3>header (шапка сайта)</h3> </div> <div> <h3>Блок навигации</h3> </div> <div> <h3>Левая панель</h3> </div> <div> <h3>Основной контент страницы</h3> </div> <div> </div> <div> <h3>footer (низ сайта)</h3> </div> </div> </body> </html>

Разберём некоторые моменты.

<div> — это блок-родитель, внутри которого расположились все остальные блоки. Как ячейки таблицы внутри <table>. Назначение дочерних контейнеров должно быть понятно, за исключением разве что блока <div>. Это вспомогательный слой, его смысл будет понятен, когда вы увидите код CSS.

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

Теперь добавим файл CSS, код которого приведён ниже.

body { background: #FFF; color: #000; font-family: Arial, sans-serif; font-size: 14px; } #header { background: #F5DEB3; width: 100%; height: 55px; } #container { background: #FFD700; margin: auto auto; text-align: center; width: 80%; height: 400px; } #navigation { background: #FE9798; width: 100%; height: 25px; } #sidebar { background: #40E0D0; float: left; width: 20%; height: 280px; } #content { background: #DCDCDC; float: right; width: 80%; height: 280px; } #clear { clear: both; } #footer { background: #00BFFF; width: 100%; height: 40px; }

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

#clear { clear:both; } запрещает обтекание элемента слева и справа. Если убрать это правило, вёрстка «поедет» и низ сайта перестанет корректно отображаться.

CSS творит чудеса, и с ним наша HTML-страница примет уже совсем другой вид.

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

Полезные ссылки:

Как заблокировать веб-сайты на компьютере с Windows 10

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

Если вы используете компьютер с Windows 10 совместно с детьми, рекомендуется заблокировать доступ к определенным веб-сайтам на вашем компьютере.

Хотя существуют десятки бесплатных и коммерческих программ для блокировки веб-сайтов на ПК, вы можете использовать встроенный файл hosts для блокировки URL-адресов на вашем ПК с Windows.Просто добавив URL-адреса веб-сайта в файл хоста, вы можете заблокировать этот веб-сайт на своем ПК. Ни один из браузеров, установленных на вашем компьютере, не сможет открыть эти заблокированные веб-сайты.

Вот два простых способа заблокировать веб-сайты на ПК с Windows 10, отредактировав файл hosts.

Блокировать веб-сайты, вручную отредактировав файл hosts в Windows 10

Как уже говорилось, вы можете блокировать веб-сайты на своем ПК с Windows 10 без установки какого-либо дополнительного программного обеспечения. Все, что вам нужно сделать, это отредактировать файл hosts.Вот как это сделать.

Шаг 1: Откройте программу «Блокнот» от имени администратора. Для этого введите «Блокнот» в поле поиска «Пуск» / на панели задач, чтобы увидеть программу «Блокнот» в результатах поиска, щелкните правой кнопкой мыши запись «Блокнот» и выберите «Запуск от имени администратора».

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

Шаг 2: В окне программы «Блокнот» щелкните меню Файл , щелкните Открыть , измените тип файла с Текстовые документы на Все файлы (см. Рисунок ниже).Перейдите к C: \ Windows \ System32 \ drivers \ etc (где «C» - это буква вашего установочного диска Windows 10) и выберите файл hosts .

Нажмите кнопку Открыть , чтобы открыть файл с помощью Блокнота.

Шаг 3: После открытия файла hosts в Блокноте добавьте URL-адреса веб-сайтов, доступ к которым вы хотите заблокировать на своем компьютере, следующим образом:

127.0.0.1 www .bing.com

127.0.0.1 www.google.com

Шаг 4: Наконец, щелкните меню Файл , а затем щелкните Сохранить (Ctrl + S), чтобы сохранить изменения. Это оно!

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

Чтобы снова разблокировать веб-сайты, следуйте приведенным выше инструкциям и удалите записи веб-сайтов из файла hosts.Сохраните файл.

Использование блокировщика URL-адресов для блокировки веб-сайтов в Windows 10

Если вам неудобно вручную редактировать файл hosts, вы можете использовать эту крошечную утилиту блокировки URL-адресов для блокировки веб-сайтов на своем ПК с Windows 10. Блокировщик URL-адресов позволяет редактировать файл hosts, не открывая файл hosts. Вот как использовать блокировщик URL-адресов для блокировки веб-сайтов в Windows 10.

Шаг 1: Получите блокировщик URL-адресов с этой страницы.

Шаг 2: Запустите блокировщик URL, дважды щелкнув его исполняемый файл, так как он не требует установки.Если Windows 10 предупреждает вас не запускать эту программу, запустите ее, игнорируя предупреждение.

Шаг 3: Щелкните поле, введите URL-адрес веб-сайта, который вы хотите заблокировать на своем ПК, а затем нажмите кнопку «Добавить». Вы можете добавить столько сайтов, сколько захотите.

После этого нажмите кнопку Применить . Вам будет предложено выйти и снова войти в систему. Сделайте это, чтобы заблокировать все добавленные веб-сайты. Удачи!

Чтобы разблокировать веб-сайты, снова запустите Блокировщик URL, выберите веб-сайты, которые вы хотите разблокировать, нажмите кнопку «Удалить» и, наконец, нажмите «Применить».Выйдите из системы и войдите снова.

.

Как создать сайт


Узнайте, как создать адаптивный веб-сайт, который будет работать на всех устройствах, ПК, ноутбук, планшет и телефон.


Создание веб-сайта с нуля


A «Эскизный план»

Перед созданием веб-сайта может быть целесообразно нарисовать черновик макета страницы:

Панель навигации

Боковое содержание

Какой-то текст какой-то текст ..

Основное содержание

Какой-то текст какой-то текст..

Какой-то текст какой-то текст ..

Какой-то текст какой-то текст ..

Нижний колонтитул


Первый шаг - базовая HTML-страница

HTML - это стандартный язык разметки для создания веб-сайтов, а CSS - это язык, описывающий стиль HTML-документа. Мы объединим HTML и CSS, чтобы создать простую веб-страницу.

Пример




Название страницы



кузов {
семейство шрифтов: Arial, Helvetica, sans-serif;
}

Мой веб-сайт


Веб-сайт, созданный мной.


Попробуй сам "

Объяснение примера