Этот урок рекомендуется тем, кто только начинает осваивать премудрости создания сайтов. В нем даны основные понятия о HTML и CSS . Пошагово выполняя инструкции данного урока, вы уже через несколько минут сверстаете шаблон для своего сайта.
Шаблон вебсайта мы будем делать с помощью блочной верстки , использую тег - «DIV ».
Шаг 1 - Разметка веб страницы с помощью тегов HTML
Прежде всего необходимо разметить нашу веб страницу используя HTML теги. Только после этого можно переходить к оформлению сайта с помощью каскадных таблиц стиля CSS.
HTML - это язык разметки гипертекста . С его помощью создается структура веб страницы. Для этих целей используются теги HTML. Они заключаются в скобки "".
Теги, как правило следуют в паре - открывающий и закрывающий. Последний отличается тем, что имеет после первой скобки знак "/". (Например: ). С помощью тегов вы определяете, что будет располагаться на вашей веб странице.
Каскадные таблицы стилей CSS применяются позже. Они необходимы для того, чтобы разместить содержимое тегов в определенных местах страницы, а также придать этому содержимому желаемый вид.
Простейшие теги веб страницы это:
Впоследствии, именно между тегами вы будете размещать другие теги для разметки элементов веб страницы.
Важным тегом для структурирования страницы является тег . Используя его, вы можете делить свою страницу на блоки.
Внутри данного тега вы сможете разместить другие HTML теги, которые вам потребуются для создания содержимого вашего сайта (ссылки, текст, изображения и тд.). Все эти элементы впоследствии обретут свой стиль с помощью каскадных таблиц стиля CSS.
Теперь, используя графический редактор (Photoshop например) нарисуем блоки нашей веб страницы:
Код HTML этой страницы будет выглядеть, как показано ниже. Это пример использования тега div :
Как видите, каждому тегу div мы дали определенный селектор ID . То есть каждому отдельному блоку нашей страницы мы дали свое название. Это необходимо для того, чтобы позже, задавая стиль блокам в файле CSS, мы могли отличать один блок от другого.
Существует два вида селекторов . ID - используется для уникальных блоков, таких, которые больше нигде на странице не повторяются. В то время как селектор CLASS - применятся для обозначения повторяющихся блоков.
Также, мы заключили все блоки внутрь блока "container ". Это сделано для того, чтобы впоследствии можно было поместить нашу страницу целиком так, как мы хотим.
Шаг 2 - прикрепление таблицы стилей CSS
Как уже было сказано, CSS таблица стилей определяет дизайн элементов веб страницы. Вы можете разместить ее как внутри своего html документа, так и прикрепить внешний файл. В этом уроке мы будем использовать последний вариант.
Если вы уже открыли свою веб страницу в браузере, то ничего там не обнаружили. Это потому, что вы не наполнили свои блоки ни каким-либо содержимым, ни придали им какой-либо формы и цвета. Контент для блоков вы можете добавить между соответствующими тегами. А вот форму, расположение цвет и другие внешние проявления блоков мы зададим с помощью файла CSS.
Но для начала вы должны создать его. Назовем его style.css и разместим в той же папке, что и документ html. После этого в html файле, между тегами необходимо добавить следующую строчку:
Таким образом мы связываем эти два файла вместе. Теперь при отображении веб страницы браузер будет использовать соответствующий файл стилей.
Шаг 3 - задаем стиль
Синтаксис CSS состоит из селектора, свойства и значения. Селектор - это тег, для которого вы хотите определить внешний вид придавая ему разнообразные свойства. Свойство задается с помощью различных атрибутов, которые в свою очередь могут принимать разные значения.
Для записи селекторов, кроме тега body , используются знаки "# " либо ". ". они следуют перед именем селектора. Первый применяется, чтобы указать на селектор ID , второй, соответственно на селктор CLASS . Селектор может иметь любое количество свойств. Которые заключаются в фигурные скобки "{} ".
#selector {
property:value;
property:value;
property:value;
}
.selector {
property:value;
property:value;
property:value;
}
У нас имеются следующие селекторы:
body
container
header
navigation
menu
content
footer
Свойства и возможные значения CSS:
Фон (background ) может быть задан изображением или цветом, либо и тем и другим одновременно. Чтобы отобразилось изображение, необходимо прописать путь к нему. Если фон задан цветом, то используется шестнадцатеричная система (#ffffff для белого цвета и тд.).
Свойство color используется для определения цвета текста.
font-family
- это свойство определяет семейство шрифтов, которыми будет отображаться текст. Как правило задается сразу три типа шрифтов. Поэтому, если браузер не смог отобразить первый, ему есть из чего выбирать (Trebuchet MS, Arial, Times New Roman).
font-size - размер текста, задается в различных системах измерения, здесь мы будем использовать пиксели.
margin - определяет местоположение блока. За точку отсчета при этом может выступать как окно браузера, так и границы других элементов веб страницы. Так как мы хотим разместить свою страницы посредине окна браузера, то запишем такие значения для данного свойства: 0px auto 0px auto. Запись может выглядеть проще 0px auto. Отсчет в случае задания данных значений идет по часовой стрелке: верх - право- низ - лево. Поскольку верх - низ, право - лево у нас совпадают, то дублировать их нет потребности.
width - ширина блока.
height - высота.
float - свойство, которое позволяет нам позиционировать элементы селектора, главным образом по левую или по правую сторону.
Теперь добавим код в наш файл стилей style.css (ведь вы его уже создали, да?):
body {
background: #f3f2f3;
color: #000000;
font-family: Trebuchet MS, Arial, Times New Roman;
font-size: 12px;
}
#container {
background: #FFFFFF;
margin: 30px auto;
width: 900px;
height: 1000px;
}
#header {
background: #838283;
height: 200px;
width: 900px;
}
#navigation {
background: #a2a2a2;
width: 900px;
height: 20px;
}
#menu {
background: #333333;
float: left;
width: 200px;
height: 600px;
}
#content {
background: #d2d0d2;
float: right;
width: 700px;
height: 600px;
}
#footer {
background: #838283;
height: 180px;
width: 900px;
}
Примечание
На момент написания статьи не все браузеры корректно отображали созданную веб страницу. Для устранения этого недостатка можно использовать дополнительный блок, который следует разместить сразу за блоком content .
Вот его код HTML:
#clear {
clear:both;
}
А между тегами head записать, какую кодировку необходимо использовать браузеру, если вы вдруг попробуете добавить русский текст в свои блоки:
Финальный код HTML:
Основы HTML и CSS
Шапка сайта
Блок навигации
Меню
Контент
Подвал сайта
body {
background: #f3f2f3;
color: #000000;
font-family: Trebuchet MS, Arial, Times New Roman;
font-size: 12px;
}
#container {
background: #FFFFFF;
margin: 30px auto;
width: 900px;
height: 1000px;
}
#header {
background: #838283;
height: 200px;
width: 900px;
}
#navigation {
background: #a2a2a2;
width: 900px;
height: 20px;
}
#menu {
background: #333333;
float: left;
width: 200px;
height: 600px;
}
#content {
background: #d2d0d2;
float: right;
width: 700px;
height: 600px;
}
#clear {
clear:both;
}
#footer {
background: #838283;
height: 180px;
width: 900px;
}
Надеемся, данный урок позволил вам понять основы работы с HTML и CSS .
Вот как это выглядит в браузере:
Приветствую дорогие читатели, в этом выпуске речь пойдет о разновидностях верстки. Все вы, наверное, слышали о блочной верстке и табличной
, сегодня я бы хотел поговорить об этих двух разных подходах к верстке сайта. В предыдущей статье я описывал, как защитить электронный , немного раньше мы рассматривали конкретный пример магазина на современном компоненте virtuemart для бесплатной CMS joomla.
Эта статья будет полезна начинающим вебразработчикам, которые только становятся на тернистый путь "сайтостроителей" и хотят самостоятельно делать сайты
. Вебразработчики со стажем тоже смогут что-то почерпнуть для себя, в частности в статье сравниваются достоинства и недостатки табличной и блочной верстки
.
Пожалуй, нужно начать с того, что такое верстка сайта? Верстальщик получает от дизайнера макет будущего сайта, как правило, макеты предоставляются в формате photoshop. Макет это по сути рисунок, только более детализированный, в нем отдельные элементы (меню, шапка сайты...) разнесены по слоям, это получается естественным путем когда дизайнер рисует макет, кроме того это очень удобно, можно легко скопировать рисунок с нужно слоя, посмотреть параметры шрифта и т.д. Так вот суть верстки в трансформации макета в html документ и составления набора CSS правил.
Следует отметить, что верстка это процесс творческий, не такой конечно как отрисовка макета в фотошоп но, тем не менее, доля творчества в этом есть особенно на начальном этапе, далее с ростом опыта процесс верстки можно механизировать. Качество верстки оценивается по тому, насколько сверстанный сайт отличается от макета.
Виды верстки Как заявлено в названии верстка бывает блочная или табличная . В блочной верстке элементы сайта структурируются с помощью блоков (div ), в табличной верстке обходятся таблицами (table ). Табличная версткаТабличная верстка использовалась на заре сайтостроения, она была популярна среди начинающих вебразработчиков. Следует заметить, что многие вебмастера и сейчас достаточно эффективно обходятся версткой таблицами, как говориться - дело мастера боится. Лично я предпочитаю блочную верстку табличной верстке, но мы сейчас не о вкусах. В основу идеи положено представление сайта в виде таблицы. Как известно подавляющее большинство сайтов имеют типовую структуру, которую можно детализировать под конкретную задачу. Рассмотрим для примера типовой вариант сайта
который содержит шапку, область контента, правый сайдбар и футер, такова не хитрая структура моего блога. Реализуем данную структуру таблицей
| шапка | |
| контент | сайдбар |
| футер | |
таблице следует задавать конкретную фиксированную ширину, если макет имеет фиксированную ширину или 100%, если макет резиновый, в этом случае таблица будет растягиваться по ширине экрана в зависимости от разрешения монитора.
Достоинства и недостатки табличной верстки:
- Проста в понимании, не требует более глубоких знаний HTML и CSS (+ )
- Интуитивно понятна при построении, минимум CSS правил (+ )
- Трудно разбираться в HTML коде при более сложной структуре сайта (- )
- Пока вся таблица не загрузиться она не будет показана на экране (- )
- Сложный дизайн с перекрытием элементов не реализуем (- )
- Много лишнего кода (- )
Остановимся поподробнее на 4-ом пункте. Дело в том, что HTML таблицы устроены таким образом, что браузер не может знать заранее как рисовать таблицу с ее содержимым, пока оно незагружено, до тех пор, пока последний рисунок, находящийся в таблице не будет загружен, таблица не будет показана на экране браузера, что может стать причиной ухода пользователей с сайта не дождавшись отображения страницы, поскольку посетитель не видит ничего на экране некоторое время. Создается впечатление будто сайт тормозит, на самом деле браузер ждет пока все элементы таблицы будут загружены.
блочная верстка Блочная верстка базируется на том, что блочные элементы HTML, как правило, располагаются по вертикали, сверху вниз друг за другом в том порядке, в котором они встречаются в HTML коде. Кроме этого блокам можно задавать свойство плавучести (float:left | right | none | inherit ). Если блоку указать свойство float:left , то он будет выровнен по левому краю, а все остальные блоки будут игнорировать его, как будто этого блока нет, за исключение текста, остальные блоки, которым задано это же свойство будут обтекать его справа, на сколько это позволяет ширина экрана или элемента внутри которого они находятся. Следует заметить, что любой элемент можно сделать блочным, заданием ему свойства display:block , изначально только элементы div по умолчанию считаются блочными элементами, для не блочных элементов (span, p ) свойство float игнорируется и такие элементы располагаются как обычно последовательно сверху вниз. Чтобы свойство float не игнорировалось необходимо задать элементы свойство display:block .float:right выровнит блок по правому краю, а все остальные блоки будут игнорировать его, либо обтекать, если им задано это же свойство и если в коде идут подряд два или несколько блоков с указанным свойством, то первым вправо встанет тот блок, который идет первым в коде, остальные обтекают его слева.
Свойство float:none отменяет эффект плавучести для блока, но это не значит что блок будет располагаться как обычно сверху вниз, если выше расположен блок с эффектом плавучести, то нижний блок будет игнорировать верхний и встанет под него, чтобы этого не было нужно задать этому блоку свойство clear:both . Ух, сложно да? Это только, кажется, на первый взгляд, на самом деле все логично и просто, надо только потренироваться.
float:inherit - задает свойство плавучести, такое же, как у родительского блока (блока в который вложен данный дочерний блок).
Нужны конкретные примеры, чувствую не убедительно, получается. Давайте создадим простой пример, для начала основу, красный блок с шириной 400 пикс. высотой 350 пикс. и выровним его посередине экрана.
теперь нужно добавить в этот блок еще пару блоков, зеленый и серый с высотой и шириной 100 пикс, у серого блока высота 120 пикс.
Видно, что блоки располагаются в общем потоке снизу вверх, в том порядке, в котором они встречаются в коде, сначала зеленый затем серый в конце голубой. Давайте зеленому блоку зададим свойство float:left , чтобы серый и голубой блоки игнорировали его.
как видно серый блок проигнорировал зеленый блок и встал под него, зеленый блок, как бы сам по себе, голубой блок выстроился за серым. Зададим обтекание всем блокам.
Видно, что блоки выстроились один за другим в том порядке, в котором они идут в коде. Давайте попробуем расположить два блока друг за другом, а третий как обычно ниже. Для этого нужно убрать у третьего блока свойство float:left , но этого недостаточно, так как он залезет под первые два блока, в чем мы убедились раньше. Чтобы этого не произошло нужно задать третьему блоку свойство clear:both ;
header контент сайдбар foter
Вот такая структура получилась, при задании ширины блокам учитывался тот факт, что рамка 1 пикс. увеличивает размеры блока, поэтому размер хедера задан 398 пикс. а не 400 пикс.
Достоинства и недостатки блочной верстки:
- Меньший вес страницы за счет меньшего кода (+ )
- Реализация сложного дизайна с перекрывающимися блоками (+ )
- Трудно освоить, табличная верстка проще (- )
- Чаще приходится решать вопросы кроссбраузерности. блоки могут перекрываться при изменении разрешения экрана, масштабировании (- )
Лично я начинал с табличной верстки сейчас пользуюсь блочной, освоил ее достаточно давно, это было легко, хотя она и имеет ряд недостатков мне привычнее и проще пользоваться именно блочной версткой.
На этом все дорогие читатели, заходите по-чаще.
Изначально веб-страницы представляли из себя просто набор тегов. Элементы отображались в том порядке, в котором они записывались в HTML коде. Визуально, информацию разделяли с помощью горизонтальных линий либо отступов.
Вторым этапом построения сайтов стало построение на основе таблицы. Сайт представлял собой таблицу в ячейки которой вставлялась информация. Это позволяло реализовывать колонки и отдельные блоки, однако удобство работы с версткой на основе таблицы довольно низкое, не обладает гибкостью. Также, табличная верстка не пригодна для построения адаптивных сайтов.
Третий, наиболее современный подход, к верстке сайтов заключается в построении сайта с помощью блоков, или блочной верстке . В англоязычных источниках такой подход называют Layouts. Блоки при таком подходе располагаются один под другим, либо меняют их порядок отображения с помощью позиционирования в CSS
Блочная верстка — это подход, при котором сайт строят на основе блоков, в качестве блоков выступают теги div. Теги div имеют некоторые свойства:
- div — блочный элемент, поэтому, если не задана ширина, растягивается на всю ширину окна браузера;
- div — высота блока, если она не задана, равна содержимому. Пустой блок div имеет высоту — 0 px, поэтому не отображается на странице;
- div не имеет оформления. Чтобы его увидеть нужно задать ему стили в CSS.
- div не несет смысловой нагрузки, это просто способ структурировать сайт
- div — может содержать любое количество вложенных элементов. Так в div можно вкладывать другие блоки div, заголовки, параграфы, изображения и многие другие элементы
В HTML блок div записывается
Пример
При подставлении полных параметров:
border: 2px solid red;
т.е. можно задать оформление конкретной границе.
Уважаемый читатель, этой статьей я открываю цикл статей, посвященных вёрстке.
В первой части будет описано, как это сделать с помощью стандартных средств на чистом HTML и CSS. В последующих частях рассмотрим как сделать тоже самое, но с помощью современных фреймворков и CMS.
Итак, давайте приступим. В качестве нашего подопытного мы возьмем бесплатный psd шаблон Corporate Blue от студии Pcklaboratory.
- Создаем папку с названием нашего проекта, например Whitesquare.
- В ней создаем пустой файл index.html.
- В папке проекта создаем папку css с пустым файлом styles.css.
- В папке проекта создаем пустую папку images.
- Как будут нарезаться изображения?
- Какими будут основные стили?
- Какой макет у нас получится?
Только после того, как вы мысленно себе ответите на эти вопросы, можно переходить к нарезке изображений и написанию кода. Давайте рассмотрим эти вопросы по-порядку.
Общие изображения На данном этапе нужно нарезать и сохранить только общие изображения, которые будут на всех страницах сайта и не относятся к контенту. В нашем случае это будет светло-серый фон страницы, фон заголовка, пустое изображение, два логотипа и кнопки социальных сетей.Сохраним логотипы следующим образом:
/images/logo.png
/images/footer-logo.png
В качестве пустых картинок из макета будем использовать однопиксельное серое изображение, которое будем растягивать по необходимости
/images/ sample.png
Повторяющиеся фоновые изображения необходимо вырезать минимальным кусочком достаточным для образования полного изображения повторением по вертикали и горизонтали.
/images/bg.png
/images/h1-bg.png
Иконки социальных сетей с одинаковыми размерами удобно сохранить в один файл и использовать как спрайты для более быстрой загрузки. Для этого можно склеить картинки вручную в Photoshop, а можно сначала нарезать по одной, а затем склеить с помощью специально сервиса, например http://ru.spritegen.website-performance.org . В итоге получится два файла:
/images/social.png
/images/social-small.png
Общее правило при именовании изображений заключается в том, что мелкие и простые картинки, такие, как иконки, логотипы и т.д. сохраняются в формате png, а фотографии в формате jpg.
Основные стили И только теперь можно начинать писать код. Но начнем мы это делать не с привычного HTML, а с переноса правил в CSS.На данном этапе желательно перенести все визуальные стили из дизайна в CSS, которые будут применяться по умолчанию для каждого тега.
Основной цвет фона примерно соответствует цвету #f8f8f8. Он будет показан в случае, если фоновая картинка не загрузится. Наверху страницы находится серая дизайнерская полоска. Применим ее через свойство border для body.
Основным шрифтом является тот шрифт, которым написан текст в области контента. Чтобы узнать его стили нужно выделить его в Photoshop’е и посмотреть свойства шрифта. В данном случае это Tahoma 12px с цветом #8f8f8f. Так же в этом макете параграфы имеют увеличенные отступы.
Прописываем все эти стили в styles.css:
Body { color: #8f8f8f; font: 12px Tahoma, sans-serif; background-color: #f8f8f8; border-top: 5px solid #7e7e7e; margin: 0; } input { background-color: #f3f3f3; border: 1px solid #e7e7e7; height: 30px; color: #b2b2b2; padding: 0 10px; vertical-align: top; } button { color: #fff; background-color: #29c5e6; border: none; height: 32px; font-family: "Oswald", sans-serif; } p { margin: 20px 0; }
В дальнейшем мы все стили будем писать в этот же файл, поэтому будем называть его просто «стили».
Каркас HTML И вот, наконец, мы можем попрактиковаться в написании HTML кода. Запишем в index.html следующее:Whitesquare
Здесь мы указываем, что используем разметку HTML5, кодировку utf-8, страница называется Whitesquare. Также подключаем наш файл стилей и внешний файл со стилями шрифтов.
В последнем блоке в секции head мы подключаем специальный скрипт, который позволяет поддерживать Html5 теги в браузерах Internet Explorer меньше 9 версии. Мета-тег X-UA-Compatible сообщает, что в случае использования браузера Internet Explorer, он должен отразить сайт самым современным способом.
Весь html код в дальнейшем будет относиться к этому же файлу, поэтому специально указывать куда прописывать html код автор больше не будет.
Макет В данном случае, мы видим, что сайт состоит из двух колонок: основного контента и сайдбара. Над ними находится шапка (header), в которой располагаются три горизонтальных блока: логотип с поиском, меню и название страницы. В самом низу под колонками располагается серый горизонтальный блок футера (footer).
Опишем это в теге body:
Wrapper используется для объединения блоков и их выравнивания по центру страницы.
Затем укажем стили блоков:
Логотип
Вставляем логотип в тег header:
Дополнительных стилей не требуется.
ПоискВставляем форму поиска в тег header:
… GO
И стили выравнивания по правому краю для нее:
Form { float: right; }
МенюДля отображения меню необходимо создать список со ссылками внутри тега nav:
CSS стили для него будут следующие:
Nav a { text-decoration: none; } nav ul { margin: 0; padding: 0; } nav li { list-style-position: inside; font: 14px "Oswald", sans-serif; padding: 10px; } .top-menu li { display: inline-block; padding: 10px 30px; margin: 0; } .top-menu li.active { background: #29c5e6; color: #fff; } .top-menu a { color: #b2b2b2; }
Здесь мы указали, что для всех навигаций ссылки не будут иметь подчеркивания, убрали стандартные отступы для элементов списка, отобразили список горизонтально и указали нужные цвета и шрифт.
Заголовок страницыЗаголовок страницы помещается в div с идентификатором heading
ABOUT US
Заголовок имеет следующие стили:
#heading { background: transparent url(../images/h1-bg.png); margin: 30px 0; padding-left: 20px; } h1 { display: inline-block; color: #7e7e7e; font: 40px/40px "Oswald", sans-serif; background: url(../images/bg.png); margin: 0; padding: 0 10px; }
Рисуем серую полоску фоном на div’e, и в нее вкладываем инлайновый h1 с нужным шрифтом и фоном цвета страницы, чтобы создалось впечатление прозрачного фона для h1.
Колонки Для того, чтобы создать колонки страницы нужно прописать следующие стили:Aside { float: left; width: 250px; } section { margin-left: 280px; padding-bottom: 50px; }
Здесь мы задали фиксированную ширину 250 пикселей для сайдбара, прибили его к левому краю и отодвинули колонку с контентом вправо на 280 пикселей от левого края. Также добавили отступ у контента снизу.
Подменю
Подменю создаем аналогично главному меню. Для этого в теге aside прописываем следующее:
И применяем к подменю следующие стили:
Aside-menu li { font-weight: 300; list-style-type: square; border-top: 1px solid #e7e7e7; } .aside-menu li:first-child { border: none; } .aside-menu li.active { color: #29c5e6; } .aside-menu a { color: #8f8f8f; }
Для подменю применяется более тонкий шрифт и квадратные маркеры. Для отображения разделителей рисуем верхнюю границу у каждого элемента списка, кроме первого.
Контент сайдбара В контенте сайдбара помимо подменю в макете располагается также изображение с расположением офисов.
В html это выглядит так:
OUR OFFICES
В стилях укажем шрифты, цвета и отступы:
Aside > h2 { background: #29c5e6; font: 14px "Oswald", sans-serif; color: #fff; padding: 10px; margin: 30px 0 0 0; } aside > p { background: #f3f3f3; border: 1px solid #e7e7e7; padding: 10px; margin: 0; }
Данные стили применяются только к заголовкам и параграфам, лежащим непосредственно внутри сайдбара, но не глубже.
Цитата Вёрстку контента начнём с добавления цитаты.
Добавим код цитаты в раздел section
“QUISQUE IN ENIM VELIT, AT DIGNISSIM EST. NULLA UL CORPER, DOLOR AC PELLENTESQUE PLACERAT, JUSTO TELLUS GRAVIDA ERAT, VEL PORTTITOR LIBERO ERAT.”
John Doe, Lorem IpsumИ применим для него стили:
Blockquote { margin: 0; background: #29c5e6; padding: 10px 20px; font-family: "Oswald", sans-serif; font-weight: 300; } blockquote p { color: #fff; font-style: italic; font-size: 33px; margin: 0; } blockquote cite { display: block; font-size: 20px; font-style: normal; color: #1d8ea6; margin: 0; text-align: right; }
Здесь нет ничего нового, так же - шрифты, фоны и отступы.
Контент
Lorem ipsum dolor sit amet…
Donec vel nisl nibh…
Donec vel nisl nibh…
Следующим шагом нужно добавить два изображения, которые находятся в конце текста контента. Делается это с помощью тега:
Которому зададим следующие стили:
Figure { display: inline-block; margin: 0; font-family: "Oswald", sans-serif; font-weight: 300; } figure img { display: block; border: 1px solid #fff; outline: 1px solid #c9c9c9; } figure figcaption { font-size: 16px; font-weight: 300; margin-top: 5px; } figure figcaption span { display: block; font-size: 14px; color: #29c5e6; } section > figure + figure { margin-left: 28px; }
Здесь мы убрали стандартные отсупы у figure, отобразили его как инлайновый блок и применили нужный шрифт. Изображение отображаем как блочный элемент с белой рамкой. Вторую серую рамку можно сделать через css-свойство outline. Самое интересное находится в последнем правиле, которое задает левый отступ у всех figure кроме первого внутри тега section.
Блок «Our team»
При верстке этого блока добавим сначала заголовок:
OUR TEAM
Со стилем:
Section > h2 { background: #29c5e6; font: 30px "Oswald", sans-serif; font-weight: 300; color: #fff; padding: 0 10px; margin: 30px 0 0 0; }
А затем два блока-строки с карточками сотрудников
John Doeceo
Saundra Pittsleyteam leader
…
Ericka Nobrigaart director
Cody Roussellesenior ui designer
…
Таким образом, карточка (figure) состоит из фотографии (img), подписи (figcaption) с именем сотрудника и его должностью (div). Карточки будут иметь следующие стили:
Figure figcaption { font-size: 16px; font-weight: 300; margin-top: 5px; } figure div { font-size: 14px; color: #29c5e6; } .team-row figure { margin-top: 20px; } .team-row figure + figure { margin-left: 43px; }
Здесь мы задали шрифт и отступ для подписи, размер и цвет должности, добавили верхний отступ для карточек и указали, что для всех карточек в строке, кроме первой, должен быть отступ слева.
Футер Футер состоит из четырёх больших блоков: ленты Твиттера, карты сайта, социальных ссылок и логотипа с копирайтом.Для начала создадим контейнер футера с этим блоками:
И применим к нему оформление:
Footer { background: #7e7e7e; color: #dbdbdb; font-size: 11px; } #footer { max-width: 960px; margin: auto; padding: 10px 0; height: 90px; }
Контейнер с id=”footer” находится внутри тега footer, это даёт нам возможность через тег footer задать серую область по всей ширине экрана, а через внутренний div отцентрировать с максимальной шириной 960 пикселей. Также этот div задает обоим блокам высоту 90 пикселей.
Лента Твиттера Верстаем содержимое ленты Твиттера:
TWITTER FEED 23 oct
In ultricies pellentesque massa a porta. Aliquam ipsum enim, hendrerit ut porta nec, ullamcorper et nulla. In eget mi dui, sit amet scelerisque nunc. Aenean aug
Footer h3 { font: 14px "Oswald", sans-serif; color: #fff; border-bottom: 1px solid #919191; margin: 0 0 10px 0; } #twitter time a { color: #b4aeae; } footer p { margin: 5px 0; } #twitter { float: left; width: 300px; } #twitter p { padding-right: 15px; }
Из интересных моментов здесь следующее: подчеркивание у заголовка мы сделали через нижнюю границу, а сам блок твиттера, как и последующие блоки выровняем по левому краю и задаём ширину.
Карта сайта Карта сайта представляет собой два блока со ссылками:
SITEMAP Home About Services Partners Support Contact
Footer a { color: #dbdbdb; } #sitemap { width: 150px; float: left; margin-left: 20px; padding-right: 15px; } #sitemap div { display: inline-block; } #sitemap div + div { margin-left: 40px; } #sitemap a { display: block; text-decoration: none; font-size: 12px; margin-bottom: 5px; } #sitemap a:hover { text-decoration: underline; }
Социальные ссылки
Вставляем набор ссылок в контейнер
SOCIAL NETWORKS
И стилизуем их:
#social { float: left; margin-left: 20px; width: 130px; } .social-icon { width: 30px; height: 30px; background: url(../images/social.png) no-repeat; display: inline-block; margin-right: 10px; } .social-icon-small { width: 16px; height: 16px; background: url(../images/social-small.png) no-repeat; display: inline-block; margin: 5px 6px 0 0; } .twitter { background-position: 0 0; } .facebook { background-position: -30px 0; } .google-plus { background-position: -60px 0; } .vimeo { background-position: 0 0; } .youtube { background-position: -16px 0; } .flickr { background-position: -32px 0; } .instagram { background-position: -48px 0; } .rss { background-position: -64px 0; }
Здесь мы применили технику спрайтов – когда один файл с изображением применяется для разных картинок. Все ссылки разделились на большие иконки (.social-icon) и маленькие (.social-icon-small). Мы задали этим классом отображение в виде инлайнового блока с фиксированными размерами и одинаковым фоном. А затем с помощью css сдвинули этот фон так, чтобы на каждой ссылке отобразилось соответствующее изображение.
Копирайт
Блок с копирайтом и логотипом – это картинка со ссылкой и параграф с текстом под ним.
Copyright 2012 Whitesquare. A pcklab creation
Стили делают аналогично предыдущим блокам с той лишь разницей, что блок прибивается к правому краю и выравнивание внутри него так же по правому краю:
#footer-logo { float: right; margin-top: 20px; font-size: 10px; text-align: right; }
На этом наши работы закончены. Готовый проект можно скачать
В этой статье разберём, как сделать страницу из отдельных блоков для сообщений, анонсов, картинок, а затем посмотрим, как такую разбивку сделать в WordPress.
Что-то типа такого:
Рис. 1 Четыре блока с закруглёнными углами и тенью.
Можно вот так:
Или даже так:
В общем-то, вариантов разбивки очень много. Думаю, что разобрав эти 4, Вы уже сами дальше сможете комбинировать блоки.
Итак смотрим код варианта показанного на Рис. 1.
Документ без названия
#glaw
{
margin
:auto
;
width
:880px
;
}
.blok1, .blok2, .blok3, .blok4
{
float
:left
;
margin
:3px 3px 3px 5px
;
width
:200px
;
height
:200px
;
padding
: 5px
;
text-align
: center
;
border-radius
: 4px
;
}
Добрый день!
src
="http://сайт/wp-content/uploads/2013/03/i-5.jpg
"
align
="left
" width
="50
" height
="80
" />
Всем привет! Желаю творческих успехов
Блок 2
Блок 3
Блок 4
Что здесь можно подкорректировать?
Во первых — это конечно width и height (ширина и высота) блоков.
Во вторых, можно изменить цвет блоков background , изменить радиус углов border-radius , и можно придать блокам тень box-shadow .
Как вставить в блок картинку и текст, я показал на примере только первого блока. Точно так же можно заполнять и остальные блоки.
Чтобы сделать вариант Рис. 2, нужно просто весь селектор блоков повторить ещё раз, и добавить дивы в тело тега body.
Документ без названия
#glaw
{
display
:inline
;
width
:880px
;
}
float
:left
;
margin
:3px 3px 3px 5px
;
background
: #F0FCE8
;
width
:200px
;
height
:200px
;
padding
: 5px
;
text-align
: center
;
border-radius
: 4px
;
box-shadow
: rgba(0,0,0,1.2) 0px 1px 3px
;
}
.blok5, .blok6, .blok7, .blok8
{
float
:left
;
margin
:3px 3px 3px 3px
;
background
: #F0FCE8
;
width
:200px
;
height
:200px
;
padding
: 5px
;
text-align
: center
;
border-radius
: 4px;
box-shadow
: rgba(0,0,0,1.2) 0px 1px 3px
;
}
Как разбить страницу на отдельные блоки
Добрый день!
alignright size-full wp-image-533
"
src
=""
align
="left
" width
="50
" height
="80
" />
Всем привет! Желаю творческих успехов!
Блок 2
Блок 3
Блок 4
Блок 5
Блок 6
Блок 7
Блок 8
Точно таким образом можно нашлёпать таких блоков хоть сотню. Менять можно число блоков в строке и их размер.
Вариант Рис. 3 делается немного по другому. Блоки не собираются в один селектор, а прописываются друг за другом.
Документ без названия
#glaw
{
display
:inline
;
width
:880px
;
}
.blok1, .blok2, .blok3, .blok4
{
border-radius
: 4px;
box-shadow
: rgba(0,0,0,1.2) 0px 1px 3px
;
}
.blok1
{
margin
:6px 3px 3px 3px
;
background
: #F0FCE8
;
width
:400px
;
height
:150px
;
padding
: 5px
;
text-align
: center
;
}
.blok2
{
margin
:6px 3px 3px 3px
;
background
: #F0FCE8
;
width
:400px
;
height
:150px
;
padding
: 5px
;
text-align
: center
;
}
.blok3
{
margin
:6px 3px 3px 3px
;
background
: #F0FCE8
;
width
:400px
;
height
:150px
;
padding
: 5px
;
text-align
: center
;
}
.blok4
{
float
:left
;
margin-top
:-495px
;
margin-left
:420px
;
background
: #F0FCE8
;
width
:250px
;
height
:480px
;
padding
: 5px
;
text-align
: center
;
}
Добрый день!
alignright size-full wp-image-533
"
src
="https://сайт/wp-content/uploads/2013/03/i-5.jpg
"
align
="left
" width
="50
" height
="80
" />
Всем привет! желаю творческих успехов!
Блок 2
Блок 3
Блок 4
Этот вариант хорош тем, что тут можно изменять параметры каждого блока в отдельности, то есть можно сделать их разноцветными и разно-размерными.
Можно убрать из группового селектора все свойства border-radius и box-shadow, а вместо них прописать рамку:
border :2px solid #E0251B ;
Тогда страница приобретёт такой вид:
Вариант Рис. 4:
Документ без названия
#wrapper
{
background
:#cd7f32
;
width
: 900px
;
height
: 600px
;
margin
: auto
;
position
: relative
;
}
div
{
background
: #f5f5dc
;
width
: 200px
;
height
: 150px
;
padding
: 20px
;
}
.one, .two, .three, .four
{
position
: absolute
;
border-radius
: 5px
;
box-shadow
: rgba(0,0,0,1.2) 0px 1px 3px
;
}
.one
{
top
: 50px
;
left
: 60px
;
z-index
: 10
;
}
.two
{
top
: 50px
;
left
: 180px
;
z-index
: 100
;
}
.three
{
top
: 100px
;
left
: 380px
;
z-index
: 150
;
}
.four
{
top
: 150px
;
left
: 580px
;
z-index
: 300
;
}
Как видите, размещать блоки можно и по оси Z. И такой метод предоставляет большие возможности для дизайна.
Представьте, что вместо блоков У Вас изображения. Убрав у них тень, можно одно изображение накладывать на другое (блоки у меня ведь накладываются друг на друга), и таким образом создать оригинальную картинку.
Так как шаблонов у этой CMS очень много, то я покажу общий принцип создания блоков, а уж подгонять их расположение при помощи margin, Вам придётся исходя из настроек темы.
На этом блоге установлена стандартная, идущая в WordPress по умолчанию, тема — TwentyTen.
А сделаем мы примерно вот так: (Это не картинка. Это html + css)
Количество блоков в строке, а так-же их размер — на Ваше усмотрение.
Сначала, прямо в редакторе, в том месте где Вы хотите сделать блоки, пишем нижеприведённый код, подгоняем в нём размеры и количество блоков, короче доводим так, как хочется. В редакторе это делать удобно.
Блок 1
Блок 2
Блок 3
Блок 4
Блок 5
Блок 6
После того как все размеры, отступы, и оформление подогнаны, нужно перенести все стили в файл style.css шаблона.
Для этого в имеющихся блочных элементах (в нашем случае это div и p , вместо атрибута style , с значениями, прописываем class , с произвольным названием.
class ="okno "
Потом идём в файл style.css шаблона, и вписываем этот класс.
Затем копируем все значения атрибута style , и вставляем их в созданный класс в файле. Сам атрибут и его значения, из блочного элемента удаляются, остаётся только класс
В тексте остаётся только такой html код:
Блок 1
Блок 2
Блок 3
Блок 4
Блок 5
Блок 6
А в файле style.css — такой:
Okno {
display: inline;
width: 600px;
}
Okno1 {
float: left;
font-family: Verdana;
padding: 10px;
font-size: 14px;
margin: 3px 3px 3px 5px;
width: 170px;
height: 200px;
border-radius: 5px;
box-shadow: rgba(0,0,0,5.2) 0px 1px 3px;
}
Затем обновляется страница, и проверяется, корректно ли отображаются созданные Вами блоки. Бывали случаи, когда приходилось повторно обновлять страницу, чтоб всё встало на свои места.
Но это уже зависит от особенностей темы.
Желаю творческих успехов.
Классный руководитель:
— Ну, как вы трудились дома?
— Дома я трудился над тарелкой с пирожками, а потом над компотом.
