Сервис для
сео - оптимизаторов

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

4 Различных HTML / CSS макета для создания сайта

  1. Почему это так важно?
  2. Первый день твоей новой жизни
  3. Пути творения
  4. таблицы
  5. терка
  6. CSS рамки
  7. Flexbox
  8. Какой выбрать?
  9. Завершающий штрих. Украшать сеть
  10. об авторе

В этой статье я хочу сосредоточиться на четырех разных способах создания многоколоночных макетов. У каждого способа есть свои плюсы и минусы. Чтобы продемонстрировать, как эти макеты ведут себя и выглядят, я создал простой веб-сайт, который использует HTML-таблицы, CSS-свойство float, CSS-фреймворк и flexbox. Поскольку для разных частей сайта использовались разные подходы, можно сказать, что он был сшит из разных частей. Вот почему я назвал это «сайтом Франкенштейна». Жуткий...

Почему это так важно?

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

Первый день твоей новой жизни

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

  • Таблицы : что в них хорошего? Использование таблиц для создания макета интуитивно понятно . Вы можете увидеть их почти везде! Вам даже не нужно использовать отдельную таблицу стилей CSS при использовании таблиц. И, что более важно, они не ломаются. Вы когда-нибудь видели сломанный стол? Нет? И я нет. Звучит здорово. Мы будем использовать один из них для нашего сайта позже.
  • Float : мы говорим о свойстве CSS здесь. Обычной практикой является использование float на вашей веб-странице для создания макета. И в этом случае вам нужно будет использовать отдельную таблицу стилей. Два файла, а? Звучит не очень удобно по сравнению с использованием таблиц. Однако использование float является своего рода стандартом. Единственный способ использовать ваш HTML-файл - это определить содержание вашей веб-страницы. Если вы хотите выровнять свой контент каким-то странным способом, вы должны использовать файл CSS. Только!
  • Фреймворки CSS : они работают так же, как фреймворки JavaScript. Просто добавьте исходный файл в свой заголовок (например, используя <link rel = "stylesheet" type = "text / css" href = "stylesheets / framework_file.css">), и он готов к работе! Там нет необходимости писать свои собственные свойства. Просто используйте классы, которые разработчики фреймворков подготовили для вас. Звучит здорово. Но как это работает? Посмотрим.
  • Flexbox : Flexbox - это краткое название Модуль CSS Flexible Box Layout , И это нечто новое по сравнению со свойством float, например. Основная идея flexbox - дать контейнеру возможность изменять ширину, высоту и порядок своих элементов. Вам следует использовать его, если вы хотите заполнить доступное пространство наилучшим образом. Например, для размещения на всех видах устройств отображения и размеров экрана. Гибкий контейнер расширит свои элементы, чтобы заполнить экран.

Думаю, для начинающих достаточно четырех приемов. И теперь пришло время попробовать их.

Пути творения

Это мой дизайн сайта:
Это мой дизайн сайта:

Это какой-то кинематографический блог. Итак, начнем с шапки.

таблицы

Для всех поклонников LEGO там

Использование таблиц для разметки похоже на игру в конструкторе LEGO. Создать таблицу. Добавьте блоки контента. Готово! Я сделал свой оригинальный заголовок в основном используя position: относительное свойство. Давайте попробуем сделать это с нуля, используя таблицы. Вот мой HTML-код:

<table height = "230px" background = "images / header1.jpg"> <tr> <td colspan = "3"> </ td> <td colspan = "3" style = "font-size: 4em; font- weight: bold "valign =" bottom "> Cinematron </ td> </ tr> <tr> <td colspan =" 2 "> </ td> <td colspan =" 4 "style =" font-size: 1.3em ; font-weight: bold; " valign = "top"> Все, что вам нужно знать о фильмах </ td> </ tr> <tr> <td width = "400px"> </ td> <td width = "70px"> <a href = "#"> HOME </a> </ td> <td width = "120px"> <a href="#"> PREMIERES </a> </ td> <td width = "120px"> <a href = "#"> BOX-OFFICE </a> </ td> <td width = "80px"> <a href="#"> ФОТО </a> </ td> <td> <input type = "search "placeholder =" search "> </ td> </ tr> </ table>

И вот что у меня есть:

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

таблица, т. д. {граница-коллапс: коллапс; граница: 1px сплошной красный; }

И вы увидите, как выглядит ваш макет прямо сейчас:

Это может помочь, когда вы застряли.
Теперь плохие новости. Посмотрите на HTML-код еще раз. Это свалка! Моя таблица проста, но представьте, как она будет выглядеть с десятками ячеек. Вы можете сравнить его с моим исходным кодом:

<div id = "header"> <h2> Cinematron </ h2> <p> Все, что вам нужно знать о фильмах </ p> <ul id = "menu"> <li> home </ li> < li> премьеры </ li> <li> касса </ li> <li> фотографии </ li> <li> <input type = "search" placeholder = "search"> </ li> </ ul> < / DIV>

И файл CSS:

#header {height: 230px; background-image: url (../ images / header1.jpg); повторение фона: без повтора; семейство шрифтов: «Shift», без засечек; } #header h2 {font-size: 4em; положение: относительное; верх: 30 пикселей; слева: 550 пикселей; дисплей: встроенный; } #header p {font-size: 1.3em; вес шрифта: полужирный; положение: относительное; верх: 50 пикселей; слева: 60 ​​пикселей; display: inline} # menu {позиция: относительная; верх: 100px; слева: 340 пикселей; дисплей: встроенный блок; } #menu li {font-weight: bold; дисплей: встроенный; преобразование текста: заглавные буквы; Поля справа: 14px; } #menu input {font-size: 0.7em; преобразование текста: строчные буквы; выравнивание текста: справа; положение: относительное; верх: -4px; }

Вам нужно использовать файл CSS в этом случае, но оно того стоит.

Когда вы используете что-то подобное:

div {position: относительный; верх: 100px; слева: 100 пикселей; }

Вы говорите своему <div> переместить 100 пикселей вниз и 100 пикселей вправо относительно его исходного положения. Это свойство позволяет легко перемещать текст по странице. Вы можете переместить его из одного угла в другой, чтобы решить, какая позиция вам подходит. Лучше, чем таблицы. Определенно!

терка

Плавающие лодки и твердые камни. Как работает Float Property

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

<! DOCTYPE html> <html> <head> <link rel = "stylesheet" type = "text / css" href = "style.css"> </ head> <body> <div id = "green"> </ div> <div id = "red"> </ div> <div id = "blue"> </ div> </ body> </ html>

В нем есть три цветных элемента <div>. Зеленый - для основных статей, красный - для новостных статей, а синий - для нижнего колонтитула.

И вот файл CSS:

# зеленый {ширина: 200 пикселей; высота: 200 пикселей; граница: 1px сплошной зеленый; плыть налево; поле: 5px; } #red {width: 100px; высота: 200 пикселей; граница: 1px сплошной красный; поле: 5px; плыть налево; } #blue {width: 310px; высота: 100 пикселей; граница: 1px сплошной синий; поле: 5px; ясно: оба; }

Вот что у нас есть:

Вот что у нас есть:

Как видите, создать простой макет с помощью float не так сложно. Вы просто говорите своему <div>, что хотите, чтобы он плавал, используя свойство float. Тогда вы должны дать ему правильное направление. Обычно это float: left или float: right. Когда вы говорите своему <div> плавать влево, он будет делать это до тех пор, пока свободное пространство не закончится. Следующий плавающий элемент будет плавать, пока не достигнет первого, и так далее. Так же, как лодки в реке! Элементы после плавающего обтекают его, как вода! Но если вы не хотите превращать все свои объекты в «воду», вы можете использовать свойство clear. Свойство clear определяет, какие стороны элемента не допускаются для перемещения других плавающих элементов. Это превратит ваш объект в твердую скалу.

Вот как я сделал свой макет для основной части:

<div id = "main-content"> <div class = "article"> <h2> Первый заголовок статьи </ h2> <img src = "images / star_wars.jpg"> <p> Тело первой статьи <a href = "#"> Читать дальше </a> </ p> </ div> <div class = "article"> <h2> Второй заголовок статьи </ h2> <img src = "images / Interstellar.jpg"> <p > Второй текст статьи <a href="#"> Подробнее </a> </ p> </ div> </ div> <div id = "news"> <div class = "news-article"> <h3 > Заголовок первой новостной статьи </ h3> <p> Тело первой новостной статьи </ p> </ div> <div class = "news-article"> <h3> Заголовок второй новостной статьи </ h3> <p> Вторые новости тело статьи </ p> </ div> </ div>

Теперь давайте сделаем это плавающим:

# main-content {width: 780px; плыть налево; } #news {margin-left: 20px; плыть налево; ширина: 180 пикселей; }

Добавьте немного стиля к нему, и вы получите что-то вроде этого:

У нас есть большой элемент для статей и немного для новостей. Некоторые из вас уже могли догадаться, что мы использовали свойство float: left и для изображений. Обратите внимание, как они передаются по содержимому тега <p> </ p>. Без сомнения, этот макет выглядит как ваш любимый журнал.

CSS рамки

Если тебе лень

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

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

Вот пример:

<div class = "row"> <div class = "col-md-6"> <! - некоторое содержимое -> </ div> <div class = "col-md-6"> <! - некоторое больше контента -> </ div> </ div>

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

Теперь мы создадим раздел «Скоро в продаже». Он будет содержать четыре постера фильма. Моя математика достаточно хороша, и я уже рассчитал, что нам нужно охватить три столбца для каждого из них.

Вот HTML-код:

<div id = "ближайшие-скоро"> <h2> скоро будет: </ h2> <div class = "row"> <div class = "col-md-3"> <div class = "thumbnail"> <img src = "images / soon_01.jpg"> </ div> </ div> <div class = "col-md-3"> <div class = "thumbnail"> <img src = "images / soon_02.jpg"> </ div> </ div> <div class = "col-md-3"> <div class = "thumbnail"> <img src = "images / soon_03.jpg"> </ div> </ div> <div class = "col-md-3"> <div class = "thumbnail"> <img src = "images / soon_04.jpg"> </ div> </ div> </ div> </ div>

Я также добавил класс миниатюр, чтобы сделать его красивее. Это тоже часть Bootstrap. Вот результат:

Выглядит хорошо. И вам даже не нужно менять свой CSS-файл. Это действительно легко использовать. Тем не менее, вы не знаете, что происходит внутри него. Если вы хотите контролировать почти все, что можете, вы должны попробовать ...

Flexbox

Классика завтрашнего дня

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

Мы будем использовать flexbox для создания раздела «Касса» для нашего веб-сайта. Вот HTML-код:

<div id = "boxoffice"> <ul class = "flex-container"> <li class = "item first"> Золушка: 67,9 млн. долларов </ li> <li class = "item second"> «Всю ночь»: 11,0 млн. долларов </ li> <li class = "item third"> Корольщик: Секретная служба: 6,2 млн долларов </ li> <li class = "item"> Фокус: 5,7 млн ​​долларов </ li> <li class = "item"> Чаппи : $ 5,7 млн. </ Li> <li class = "item"> МакФарланд, США: 3,6 млн. Долл. США </ li> <li class = "item"> Прибыль: 2,9 млн. Долл. США </ li> <li class = "item"> американец Снайпер: $ 2,8 млн. </ Li> </ ul> </ div>

Вот CSS для контейнера "boxoffice":

#boxoffice {width: 780px; высота: 500 пикселей; background-image: url (../ images / box_office_cropped.jpg); повторение фона: обложка; радиус границы: 5 пикселей; отступы: 20 пикселей; }

Теперь пришло время сделать гибкий контейнер. Для этого нам нужно установить свойство display в flex. Все элементы flexbox расположены вдоль главной оси и поперечной оси:

Все элементы flexbox расположены вдоль главной оси и поперечной оси:

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

По умолчанию главная ось горизонтальна, поэтому элементы будут располагаться в ряд. Для управления главной осью мы можем использовать свойство flex-direction. Доступны следующие значения: строка, обратный ряд, столбец и обратный столбец. Мы будем использовать опцию столбца. Давайте также добавим свойство высоты. Позже вы поймете, зачем нам это нужно.

flex-container {height: 300px; дисплей: гибкий; flex-direction: столбец; }

Вот наш маленький график:

Мы использовали свойство height, потому что мы не хотим, чтобы наш контейнер flexbox перекрывал изображение стрелки в нижней части фона.

Более того, Flexbox также дает вам возможность изменять содержимое без изменения вашего HTML-файла. Например, если вы хотите перевернуть элементы вверх дном, вы можете изменить значение flex-direction на столбцы-reverse. Он перевернет ваш флексбокс, и вам нужно будет обратить внимание на то, как flexbox упорядочивает ваши элементы внутри него. Мы будем использовать свойство justify-content для этой цели. Доступны следующие значения: flex-start, flex-end, center, space -ween и space-around. Вы можете поиграть со значениями позже, но теперь нам нужно установить значение justify-content равным flex-end.

Вот код:

.flex-container {height: 300px; дисплей: гибкий; направление изгиба: обратный столбец; justify-content: flex-end; }

Изменения следующие:

Вы также можете перемещать свои предметы вдоль поперечной оси. Для этого вы можете использовать свойство align-items. Вы можете изменить его на flex-start, flex-end, center, baseline или stretch.

Чтобы использовать его, просто добавьте свойство в ваш селектор flexbox:

.flex-container {align-items: flex-end; }

И ваши предметы переместятся вправо:

И ваши предметы переместятся вправо:

Еще одна хорошая вещь о flexbox - это свойство flex-wrap. Представьте, что ваш график быстро растет. Что будет, если он станет больше вашего контейнера? Ничего плохого, если вы используете свойство flex-wrap.

Проверь это:

.flex-container {height: 300px; дисплей: гибкий; flex-direction: столбец; flex-wrap: обертывание; }

И вот результат:

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

Есть много полезных свойств, которые позволяет использовать flexbox. С его помощью вы можете изменить поведение каждого элемента flexbox. Например, свойство order позволяет изменять порядок элементов без изменения HTML-кода. Проверь это руководство Больше подробностей.

Какой выбрать?

Столы Не используйте таблицы для макета вашей страницы! Они внесут беспорядок в ваш код. Они не так удобны, как вы думаете. И представьте, как тяжело будет изменить дизайн вашего сайта через пару месяцев. Если вы все еще спрашиваете себя «Должен ли я использовать таблицы для макета моей страницы?», Это сайт может помочь вам.

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

Плавать Поплавки хороши, если вы не много просите. Это простой способ сделать ваш сайт более привлекательным. Использование поплавка с изображениями - признак хорошего вкуса, как по мне. И это легко учиться! Вам просто нужно помнить, как работают свойства float и clear. Этого достаточно для первых шагов.

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

CSS фреймворки . Если вы хотите быстро создать свой макет, вы можете использовать фреймворки. Есть много из них доступны. Просто выбери.

Flexbox . Вам нужно потратить некоторое время, чтобы узнать, как они работают. Но вскоре после этого вы будете непобедимы! Я полагаю, вы поняли, насколько они удобны, если вы хотите манипулировать коробками. Проведите выходные с flexbox, и он вам понравится. Я могу гарантировать это!

Но, как я уже говорил, это что-то новое, если сравнивать это с другими функциями CSS. Итак, вы должны помнить о поддержка браузера (не забудьте проверить раздел «Известные проблемы»). Если ваш целевой браузер не поддерживается, не расстраивайтесь. Ты можешь использовать Flexie , например.

И это не без его ошибок. Вот коллекция ошибок Я обнаружил. Обходные пути включены.

Завершающий штрих. Украшать сеть

В качестве бонуса я хочу показать вам, как вы можете превратить свою простую веб-страницу в великолепную. Вы можете использовать генераторы кода CSS для этой цели. Например, EnjoyCSS может помочь вам создать кросс-браузерный CSS с минимальными усилиями. Градиенты, тени, 2D и 3D эффекты и многое другое. Просто назовите это! Галерея образцов также доступна. Попытайся сейчас ,

Ну, на сегодня хватит. Надеюсь, вам понравилось. До встречи!

об авторе

Ленни Витман - внештатный веб-разработчик, работающий полный рабочий день, с 4-летним опытом работы в PHP, Javascript, MySQL, HTML и CSS. Он увлечен тем, чтобы сделать Интернет лучше с помощью лучшего кода и пользовательского опыта.

Почему это так важно?
Почему это так важно?
С чего начать?
Вы когда-нибудь видели сломанный стол?
Нет?
Два файла, а?
Но как это работает?
Что будет, если он станет больше вашего контейнера?
Какой выбрать?
Если вы все еще спрашиваете себя «Должен ли я использовать таблицы для макета моей страницы?