Как сделать стену на сайте html
Добавил пользователь Дмитрий К. Обновлено: 18.09.2024
Раньше на просторах Интернета был широко распространён табличный тип вёрстки, которому посвящена отдельная статья. Однако со временем этот подход к созданию структуры сайта устарел, и на смену ему пришла блочная вёрстка.
Отличия блочной вёрстки от табличной
Если табличная вёрстка подразумевает, что содержимое страницы находятся внутри тега , то концепция блочной вёрстки основана на активном использовании универсальных тегов
Блочная вёрстка лишена недостатков табличной — поисковыми системами она индексируется лучше, её код не такой развесистый, да и блоки
Суть блочной вёрстки
В графическом редакторе создаётся макет сайта: размечается, где какая область страницы (шапка, низ, боковая панель, основной контент) будет находиться и сколько места занимать, готовятся картинки, фоны.
Каждая часть страницы помещается в свой блок
: верх сайта — в первый, меню — во второй, контент — в третий и т. д. Каждый блок наполняется содержимым средствами HTML, а также позиционируется и оформляется с помощью CSS-разметки.
Конечный HTML-документ представляет собой набор блоков
с контентом внутри. Оформление зачастую находится в отдельном CSS-файле, подключенном к странице тегом , или как минимум в контейнере секции .
Принципы блочной вёрстки
Первый — конечно же, повсеместное использование тега
, который можно назвать базовым элементом блочной структуры, но об этом было сказано уже достаточно много.
Второе правило — принцип разделения кода, согласно которому содержимое от оформления нужно отделять. Говоря проще и ближе к нашему случаю: HTML — отдельно, CSS — отдельно (желательно в разные файлы). Такой подход делает структуру понятней. Программисту не нужно открывать CSS, дизайнеру — HTML. Все смотрят свой код и не мешают друг другу. Идеально.
Третий принцип — таблицы нужно использовать не везде, а по необходимости, при этом полностью отказываться от них так же странно, как и применять не к месту.
Пример блочной вёрстки
Но, сколько не теоретизируй, а понимать всё проще на примере.
Итак, у нас есть макет (рисунок ниже). Условный, конечно — просто разметка, ведь цель примера — как можно наглядней объяснить принцип создания блочной вёрстки. Зная базу, навести красоту и усложнить макет вы сможете и сами, а я лучше не буду перегружать пример.
Сначала создадим HTML-страницу: обозначим структуру, разметим её. HTML-код будет таким:
Разберём некоторые моменты.
— это блок-родитель, внутри которого расположились все остальные блоки. Как ячейки таблицы внутри . Назначение дочерних контейнеров должно быть понятно, за исключением разве что блока
Если открыть HTML-файл в браузере, не подключая таблицу стилей, страница будет выглядеть так.
Теперь добавим файл CSS, код которого приведён ниже.
С помощью стилей мы последовательно оформляем содержимое тега и всех находящихся внутри контейнеров с помощью ранее изученных правил.
CSS творит чудеса, и с ним наша HTML-страница примет уже совсем другой вид.
Вот и весь смысл блочной структуры. Дальше можно только наполнять сайт содержимым и усложнять оформление, но делаться это будет всё равно по изложенному выше принципу. Также посмотрите статью про вёрстку сайта из PSD макета, там эти принципы показаны более наглядно.
Сайты тоже имеют свой скелет. Но о его особенностях спрашивать врачей бесполезно. Да и ветеринары тоже не в курсе строения сайта. Об этом ведомо лишь верстальщикам. Именно от них зависит строение скелета будущего ресурса. А главным способом создания костей его скелета является блочная верстка.
Верстка сайта – ремесло для посвященных
Есть в верстке сайта что-то таинственное. Но это до тех пор, пока не познакомишься с этим ремеслом поближе. Начинаем наше посвящение:
Следующим этапом разработки сайта после создания его макета является верстка. Задача верстальщика перенести с помощью html кода и таблиц css скелет будущего сайта в виртуальный мир. Проще говоря, перенести размеры и пропорции ресурса в форму, понятную для браузера.
Различают несколько видов верстки:
Также к основным недостаткам табличного кода относится его долгая загрузка и плохая индексация содержимого поисковыми системами.
Содержимое страницы, сверстанной на основе таблиц, не будет отображено до тех пор, пока не загрузятся все данные. Блочная верстка позволяет отображать каждый загруженный элемент отдельно.
Плохая индексация табличных страниц объясняется большими промежутками между блоками текста, расположенного в разных ячейках таблицы.
Теперь табличная верста редко используется в качестве основного метода создания сайтов. Сейчас ее применяют лишь для структурирования табличных данных и расположения графических изображений.
II. Блочная – в данный момент является основным способом верстки. В отличие от табличной блочная верстка обладает рядом преимуществ:
- Отделение стиля элементов от кода html ;
- Возможность наложения одного слоя на другой – такая возможность во многом облегчает позиционирование элементов.
- Лучшая индексация поисковиками;
- Высокая скорость загрузки страницы, состоящей от взаимно независимых элементов;
- Легкость создания визуальных эффектов ( выпадающих меню, списков, всплывающих подсказок ).
Действие хака является узкоспециализированным и решает проблему некорректного отображения лишь в одном браузере.
Основным элементом, применяемым в блочной верстке, является тег
. Участок кода, отделенный этим тегом, называется слоем. Все стилевые решения вынесены за границы кода html в каскадные таблицы стилей. Доступ к ним осуществляется через идентификаторы или классы css :
Как происходит блочная верстка?
Перед началом верстки готовый psd макет сайта в графическом редакторе разрезают на блоки ( слои ). В отдельную папку помещают вырезанные фоновые картинки, которые будут прикрепляться отдельно к каждому слою:
Для примера возьмем вот такой макет сайта, созданный в Photoshop . Сначала в текстовом редакторе с помощью div задаем структуру будущего ресурса и присваиваем каждому слою свой селектор id . Получается такая структура:
Полный код примера index.html :
Содержимое файла style.css :
Вот так наш пример блочной верстки сайта выглядит в окне браузера:
Конечно, этот пример является лишь наглядным пособием для демонстрации того, как происходит блочная верстка. Настоящая верстка происходит с использование фоновых изображений и логотипов, подключаемых в css . А также с включением в html и css кода хаков для оптимизации отображения во всех браузерах.
Свое роднее!
Здравствуйте, дорогие любители айтишной тематики. Сегодня основной способ создания красивых многостраничных сайтов основывается на блочной верстке при помощи тега div.
Особенности блочных элементов
Блоки – это прямоугольные элементы, которые занимают всю доступную ширину страницы, всегда начинаются с новой строки и по умолчанию автоматически рассчитывают высоту в зависимости от содержимого.
Все блочные элементы состоят из 4 свойств, которые на подобие рамок окружают содержимое объекта.
Главным в блоке выступает контент.
Вокруг него расположены поля, которые называются padding. Поля отвечают за расстояние между контентом объекта и его внутренним краем границ.
После идут сами границы, которые именуются английским словом border.
И, наконец, последней рамкой вокруг всего перечисленного выступает margin –отступы от внешнего края border-а до границ страницы или других элементов. Стоит отметить, что задавать эти свойства не обязательно.
В качестве примера запрограммируем 2 html блока и заполним созданные элементы текстом.
Подпишись на наш телеграм-канал TechRocks WEB-разработка?
1. Вертикальное выравнивание при помощи flex
Flexible Box Layout Model (или просто Flexbox) со времени своего появления приобрел большую популярность. И это неудивительно, ведь данный подход существенно облегчает позиционирование и выравнивание элементов. Применение flex (свойство flexbox) сделало вертикальное выравнивание быстрым и легким. Давайте рассмотрим пример кода для вертикального позиционирования при помощи flex.
Как видите, чтобы наш элемент-потомок оказался точно в центре родительского элемента, мы использовали свойства display: flex и align-items: center, justify-content: center.
2. Режимы наложения (смешивания)
При помощи CSS можно делать много интересных вещей, в частности, применять режимы наложения слоев. Дли применения режимов наложения есть два свойства: mix-blend-mode (определяет смешивание элементов, находящихся друг за другом) и background-blend-mode (определяет смешивание фоновых изображений). Давайте посмотрим, как это работает:
В этом примере мы задаем изображение и заголовок в виде текста. Текст это тот элемент, который смешивается с изображением. Мы использовали значение overlay (режим перекрытия), но есть еще 15 других значений, которыми можно воспользоваться (попробовать можно здесь).
А теперь давайте посмотрим пример с применением background-blend-mode:
В этом варианте мы видим, как фоновое изображение смешивается с цветом. Первое изображение — исходное, а второе — после применения режима смешивания.
3. Параллакс-скроллинг
Параллакс (Parallax) это очень распространенная вещь в современном веб-дизайне. Эффект основан на том, что скорость прокрутки фонового изображения отличается от скорости прокрутки контента. Давайте посмотрим, как этого можно достигнуть при помощи CSS:
В этом примере вы видите, что наш текст и фоновое изображение движутся по-разному. Мы использовали transformZ для ускорения одного элемента и замедления другого. Круто выглядит, правда?
4. Shape outside (придание элементу непрямоугольной формы)
Еще одна прекрасная фича, имеющаяся в CSS, но мало используемая, — свойство shape-outside. Давайте посмотрим, как это работает:
В этом примере вы видите, как текст обтекает круг. Мы установили значение свойства shape-outside как circle 50%, но можно также поставить треугольник, квадрат (базовые фигуры) или какое-то изображение. Обратите внимание на это свойство — оно стоит того, чтобы познакомиться с ним поближе!
5. Обрезка строки
Вы видите, как CSS обрезает строку и ставит на месте обрезки троеточие. Для обрезки использовались свойства overflow: hidden, white-space: nowrap, а для троеточия — text-overflow: ellipsis.
6. Обрезка изображения при помощи clip path
Бывает, дизайнер подходит к делу чересчур креативно, и вам приходится изыскивать способы вписать изображение в заданную геометрическую форму, например, в треугольник. Для этого можно воспользоваться свойством clip-path:
В этом примере мы создали круг, обрезанный круг и многоугольник.
7. Полная высота и ширина
Если мы хотим, чтобы наше приложение или сайт подгонялись под размер зоны просмотра, на помощь приходят единицы измерения vh и vw. Vh означает 100% высоты зоны просмотра, а vw — 100% ширины зоны просмотра. Давайте посмотрим это на примере:
Здесь мы для нашего элемента (синего блока) установили ширину в 50vw, а высоту в 50vh. Это означает, что он должен занимать в ширину 50% от ширины и 50% от высоты зоны просмотра. Если вы попробуете изменить зону просмотра, вы увидите, как будут меняться размеры нашего элемента.
8. Фильтры изображений
Если поработать с изображениями, можно достичь очень интересных эффектов. CSS позволяет использовать большое количество фильтров, чтобы разработчики могли работать с графикой, не прибегая к Photoshop. Ну, например:
Здесь мы для одного изображения использовали 7 разных фильтров.
9. CSS-анимации
Анимации на сайте привлекают внимание пользователя, именно поэтому они так часто используются в веб-дизайне. Давайте посмотрим, как создавать их при помощи CSS:
В этом примере мы создали маленькую точку, которая меняет свою позицию и непрозрачность: при каждом перемещении непрозрачность снижается на 25%, пока не достигнет 100%. Затем процесс повторяется. Разумеется, можно также менять цвет и другие свойства элементов.
10. Вращение элементов
Еще один вид анимации, который можно сделать при помощи CSS, это вращение. Это прекрасный способ немного оживить элемент-загрузчик, логотип или изображение в галерее. Вот как это может выглядеть:
11. Маска
Если вам случалось заниматься графическим дизайном, вы должны знать, насколько полезными бывают маски. А ведь их можно применять не только в графическом редакторе, но и в CSS. Давайте посмотрим, как сделать маску изображения:
В этом примере мы создали маску в форме круга с градиентной заливкой. Также можно в качестве маски использовать SVG-графику, для этого нужно указать путь к файлу (URL).
12. Приближение при наведении курсора
При создании галерей изображений часто возникает необходимость как-то выделять изображения, на которые наведен курсор. Отличная идея — добавить эффект приближения. Вот как это работает:
В этом примере мы создали маленькую галерею изображений и добавили значение scale для наведения, чтобы изображение увеличивалось по сравнению с другими, когда на него попадает курсор.
Заключение
Всем нам хочется, чтобы наши сайты и приложения были красивыми и привлекали внимание пользователя. Но порой нам кажется, что создание анимации или маски для изображения займет много времени и окажется сложной задачей. Как видно из нашей статьи, это совсем не так уж трудно и даже удобнее, чем при работе в графическом редакторе.
Читайте также: