Создание простейшего макета. HTML Макеты Css макет страницы
В издательском деле многостолбцовый вывод контента известен уже много лет — узкие столбцы упрощают чтение текста. С переходом на широкоэкранные дисплеи веб-разработчики начали искать способы сохранения комфортной ширины столбцов в своих блогах и сайтах. За последнее десятилетие появился ряд довольно остроумных решений в дизайне многих вебстраниц по созданию многоколоночных макетов. Существуют различные способы создания макетов в HTML.
Макеты на основе таблиц
В недалеком прошлом таблицы были самым простым и самым популярным способом создания многоколоночных макетов в HTML. Вся веб-страница помещалась внутри большой таблицы ( Макет на основе таблицы
В течение долгого времени веб-дизайнеры используют элементы Ниже приведена визуализация макета с использованием тегов
Основной контент... Спецификация HTML5 предоставляет новые семантические теги, описывающие содержащийся в них контент. Так как современные сайты включают в свои страницы боковые панели, заголовки и секции, в спецификацию HTML5 были включены новые теги, предназначенные для деления страницы на логические области. Семантическая разметка предназначена для описания контента. Семантическая разметка упрощает понимание смысла и контекста информации, размещенной на странице — как для поисковиков, так и для разработчиков. Теперь программы экранного доступа могут позволить пользователям проигнорировать заголовки и нижние колонтитулы и сразу перейти к основному контенту. Кроме того, поисковые машины могут придать большее значение содержимому элементов Ниже приведена визуализация макета с использованием тегов HTML5 для раметки страницы. В данной статье речь пойдёт о сайтах, которые разработчики создают вручную, т. е. верстают. Статья предназначена для пользователей, знакомых с HTML
и CSS
. Также желательно знать хотя бы основы Adobe Photoshop
Одним из этапов создания реального сайта, является создание PSD шаблона. Можно ещё встретить такие названия как макет, дизайн или исходник. Шаблон заказывается дизайнеру. Дизайнер рисует макет в программе Adobe Photoshop и сохраняет его в формате PSD. Что такое PSD формат?
Для лучшего понимания можно привести простой жизненный пример. В детстве все клеили аппликации. Вырезали из бумаги домик – наклеили. Вырезали ёлочку – наклеили. И так до тех пор, пока работа не готова. А теперь можно представить ситуацию, при которой фигурки вырезали, разложили на листе в нужных местах, но ещё не приклеили. Так вот PSD формат файлов, можно сравнить с аппликацией, на которую ещё не приклеили фигурки, но расположили их в нужном порядке. Благодаря этому каждую такую «фигурку», а точнее каждый отдельный фрагмент шаблона можно сохранять как отдельную картинку, которую потом можно использовать на сайте. Вот макет страницы, которая будет создана. После того как у нас есть готовый шаблон в форматеPSD можно перейти непосредственно к вёрстке Здесь необходимо обратить внимание на кнопку «Слои». На рисунке она выделена красным овалом. Это кнопка включает и выключает окошко со слоями. Слои – это и есть те самые не склеенные детали аппликации. Слои для удобства распределены по папкам, которые можно сворачивать и разворачивать. Принцип работы почти тот же что и в проводнике Windows. Первым делом все папки лучше свернуть. Разворачивать по мере необходимости.
Теперь можно начать «вытаскивать» картинки
Первым делом нужно выбрать инструмент рамка . Затем выделить только ту часть, которая ограничивает логотип сайта После этого нажать клавишу Enter. Всё кроме выделенной области будет отрезано. Теперь можно убрать фон. Для этого нужно отключить слой с фоном. С целью быстрого поиска нужных слоёв можно выполнить следующие действия: Здесь слой назван «Фигура 2». Щелчком по изображению глаза слой становится невидимым. Однако остаётся ещё два слоя, которые также необходимо отключить. Действия аналогичные. Теперь можно сохранять. Для этого необходимо выполнить следующие действия Выбрать из 4 предложенных вариантов, а из предложенных второй. Расширение выбрать gif. Имя файла logo.gif
. Файл сохранить в папку img
. Туда следует сохранять и остальные изображения. Можно следовать таким принципам: Для того, чтобы вернуть первоначальный вариант до обрезки, нужно открыть окно история Выполнить щелчок по названию файла и установить подходящий масштаб. Аналогичным образом сохраняются другие изображения. То же самое касается изображения лапы, которое появляется при наведении на пункт меню Остальные изображения – по желанию. Можно на белом, можно на прозрачном. Здесь следует выбирать вариант сохранения очень аккуратно, потому, сто в psd исходниках нередки изображения с плохо обработанными краями. Вот пример: Изображение было сохранено на прозрачном фоне. Однако при просмотре его на чёрном – видны плохо обработанные края. Но при использовании светлого фона – этот дефект может быть незаметен. Для фона нужно будет вырезать маленькую картинку, которая заполнит страницу как кафельная плитка. Однако в этом примере фон не является повторяющимся. Поэтому лучше найти похожую картинку. А можно попробовать подобрать, вырезая из фона различные фрагменты. Вёрстка будет рассмотрена с использованием HTML5 и CSS3. В папке своего сайта нужно создать HTML файл. Например index.html.
В папке css
создать файл style.css
. Кроме этого, в папке css
необходимо поместить файл reset.css
со следующим кодом
/*
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
Дело в том, что разные браузеры для одного и того же тега могут иметь различные настройки. Для обеспечения кроссбраузерности их необходимо сбросить. Предложенный выше код разработан Эриком Майером. Сначала в index.html
следует написать основные теги.
Для тега в стилях Как уже говорилось, фон здесь не повторяющийся. Поэтому рациональнее будет подобрать любой похожий. Body{
background-image: url(../img/bg.gif);
}
Теперь нужно создать обёртку сайта – блок в котором будет помещаться всё содержимое.
Рядом с закрывающим Также внутри блока находится слово wrapper. Оно там находится временно. Цель – во время вёрстки видеть блок и отличать его от остальных. По этой же причине в стилях блоку будет временно дан какой-нибудь светлый фон. Для установки стилей необходимо знать его ширину и отступы сверху и снизу. Для измерения можно в Adobe Photoshop
инструментом «Прямоугольная область» выделить изображение сайта от правого до левого края. Высота не важна. Ширину можно увидеть в окне «Инфо» Получилось 964px. Аналогичным образом, только уже важна высота выделенной области, а не ширина, измеряются отступы сверху и снизу. Получилось 100px сверху и 85px снизу. Таким способом определяются любые расстояния в исходнике.
#wrapper {
width: 964px;
margin-top: 100px;
margin-right: auto;
margin-bottom: 85px;
margin-left: auto;
background-color: #FF9;
}
Справа и слева установлены отступы auto. Благодаря этому блок выравнивается по центру. Страница: Мы уже можем сделать простенький сайт, применив HTML+CSS. В этой статье я представлю Вам код блочного шаблона сайта, и подробно расскажу, и покажу, что и как в нём изменить, чтоб сделать из него свой сайт, и выложить его в интернет. Итак, давайте посмотрим, как выглядит код (и что в нём можно менять), такого вот сайта. Тему грузоперевозок я взял для примера потому, что чаще всего именно люди работающие в этой сфере, обращаются ко мне за помощью. Но Вы, прочитав статью, сможете сделать всё по своей тематике, и со своей конструкцией каркаса сайта. Времени это займёт столько, сколько потребуется на внимательное прочтение статьи, и материалов по ссылкам, и последовательное выполнение моих инструкций. /* Стилевое оформление */ 234-49-50 Здравствуйте уважаемые будущие веб-мастера! Мне 55 лет и я рад приветствовать Вас на своём сайте. За те 3 месяца, пока А мне, учитывая Здесь Уверен, у Вас получится еще лучше и уж точно, в Это код статичного сайта, а это значит, что на экранах с разным расширением, он будет оставаться в неизменных размерах. То есть на мобилах у него появится полоса горизонтальной прокрутки, которой придётся пользоваться, чтоб просмотреть сайт целиком. А теперь вернёмся к нашему коду. Прежде чем начать работать с кодом, нужно создать место где будет располагаться сайт до вывода его в интернет. Для редактирования этого кода, потребуется HTML редактор. У кого он есть, очень хорошо, у кого нет, предлагаю . Как начать в нём работу, то есть создать файл, прочитайте . Когда редактор будет установлен, откройте его, скопируйте из представленного выше кода строки 1 — 6, и вставьте в поле редактора, а затем строки 118 — 153, и так же вставьте в редактор. Таким образом мы выбрали HTML часть кода, из которой создадим HTML файл. Удалите мою нумерацию строк, создайте файл, назовите его index.html, и сохраните в директорию сайта. Директория должна приобрести такой вид: Следующим шагом создаём файл style.css, в котором будет расположена таблица стилей. Вот тут внимание! Файл style.css, в дальнейшем, будет подключаться ко всем страницам сайта, поэтому в нём нужно собрать стили, формирующие основу страницы. А это все стили из выше приведённого кода, кроме селекторов .left
и .right
, относящихся непосредственно к тексту статьи. В дальнейшем, если Вам захочется внести какие-то изменения в конструкцию сайта, достаточно будет внести их в файл style.css, и они отобразятся на всех страницах. Итак, в директории сайта создаём ещё одну папку, и называем её css. Затем возвращаемся в редактор, открываем новый документ (первая иконка панели), копируем и вставляем в него строки 8 — 80 и 90 — 116. Пропускаем только стили оформляющие картинки в тексте, так как они предназначены только для одной страницы. Убираем мою нумерацию, и сохраняем этот новый документ во вновь созданную папку css, под названием style.css. Делается это следующим образом: в теге Сохраните файл. Все эти теги мы уже давно изучили и в пояснении они не нуждаются. Кодом выше мы создали основу HTML-страницы, теперь нужно разделить её на блоки - указать структуру документа, что за чем в нём будет идти. Блоков у нас 7, перечислим их по идентификатору (значению атрибута id
): 1. content
- блок, внутри которого будут храниться остальные блоки. 2. header
- блок шапки, внутри которого будут: 2.1. menu
- верхняя навигация. 2.2. logo
- картинка с текстом. 3. right
- основная часть страницы. 4. left
- панель слева. 5. footer
- низ сайта. Так и запишем (в контейнер
вставьте следующий код): В браузере страница будет по-прежнему пустой, но структуру документа уже можно понять, она готова. Теперь перейдём к CSS-оформлению, чтобы задать документу начальное оформление. Откройте style.css
и добавьте туда строки кода, которые встретите ниже. Убираем отступы и поля на странице по умолчанию: *
{
margin: 0px;
padding: 0px;
} Устанавливаем цвета ссылок в зависимости от поведения пользователя (навёл курсор, не навёл, посетил) и убираем подчёркивание у ссылок, над которыми находится указатель мыши: A:link {
color: #D72020;
}
a:hover {
text-decoration: none;
color: #FF0000;
}
a:visited {
color: #D72020;
} Настраиваем основное оформление страницы: прописываем фоновый цвет и изображение-подложку (картинке задаём горизонтальное заполнение), устанавливаем цвет, стиль и размер шрифта: Body {
background: #FFD723 url(images/back_all.jpg) repeat-x;
font: 13px Tahoma, Verdana, Arial, Helvetica, sans-serif;
color: #333333;
} Определение блока content: #content {
margin: 0 auto;
background: #ffffff;
width: 786px;
text-align: left;
} Вот теперь можно обновить страницу. Она заполнена рисунком-подложкой. Пока единственное видимое изменение, за которое отвечает свойство background
класса body
. Начало есть, и теперь можно приступать к вёрстке уже непосредственно основных блоков. Начнём, конечно, с шапки. Которая, в свою очередь, состоит из блоков горизонтального меню и логотипа. Сначала зададим общее оформление обоих элементов шапки: выравнивание текста по левому краю, белый фон и высоту 306px: #header {
background: #ffffff;
height: 306px;
text-align: left;
} Так мы получили своего рода пространство шапки: белый прямоугольник, на котором будут располагаться её элементы. Логично было бы прямо сейчас заняться горизонтальным меню. Так мы и поступим, но только прежде, чем вставлять его в HTML, нужно подготовить правила CSS, иначе смотреться в браузере это будет ужасно. Внесём первые коррективы: зададим левую границу в 2 пикселя толщиной, ширину и высоту нашего меню, а также повторяющийся по оси X фоновый рисунок: #menu
{
border-left: 2px solid #ffffff;
width: 779px;
height: 80px;
background: url(images/header_top.gif) repeat-x;
} Страница в обозревателе тут же преобразится и будет выглядеть так. Теперь можно добавить и само меню в файл index.html
: Обновив страницу можно увидеть, что оно действительно появилось. Только вот вид ссылок оставляет желать лучшего. Установим для них свои правила (выравнивание, ширину, цвет, жирность и т. д.), а ссылкам при наведении зададим смену цвета и вернём убранное по всему шаблону подчёркивание: #menu a {
float: left;
width: 99px;
height: 46px;
display: block;
text-align: center;
text-decoration: none;
color: #ffffff;
font-weight: bold;
font-size: 14px;
padding-top: 35px;
}
#menu a:hover {
color: #D72020;
text-decoration: underline;
} Теперь форматирование меню можно сопоставить с PSD-шаблоном. Обратите внимание, как меняется оформление пункта, если подвести к нему указатель (за это отвечают правила #menu a:hover
). Логотип у нас уже есть и лежит в папке, остаётся добавить его на страницу и отформатировать правилами. И то, и другое можно сделать средствами CSS, чем мы и не преминем заняться. #logo {
background: #ffffff url(images/big_pic.jpg) no-repeat;
width: 738px;
height: 146px;
text-align: left;
padding-top: 80px;
padding-left: 40px;
border-left: 4px solid #ffffff;
} Логотип вставлен ровно по размеру. Единственное, чего ему не хватает, так это текста. Вставим недостающее в блок logo
файла index.html
, чтобы получилось: Текст появился, но его тоже нужно оформлять. Исходя из того, что логотип почти всегда бывает ссылкой, зададим оформление соответствующим классам. #logo a {
text-decoration: none;
text-transform: lowercase;
font-style: italic;
font-size: 36px;
color: #FFFFFF;
}
#logo h2 a
{
font-size: 24px;
} Пояснять здесь ничего не нужно, со всеми свойствами вы знакомы ещё из уроков CSS. Однако внешний вид текста изменился, и в целом шапка теперь выглядит даже лучше, чем на PSD-макете. Далее настраиваем самый большой блок, на котором будет размещён весь уникальный контент. Он будет занимать 500px и располагаться в правой части сайта. Установим правила позиционирования, оформления заголовков, абзацев и ссылок (обо всех свойствах мы уже говорили в статьях по CSS). #right
{
float: right;
width: 500px;
padding-right: 10px;
}
#right h4
{
margin: 0;
padding: 0px;
font-size: 12px;
color: #D72020;
}
#right a
{
color: #D72020;
text-decoration: none;
}
#right p {
margin: 0;
padding: 0;
padding-bottom: 10px;
}
#right h2 {
margin: 0;
padding: 0;
padding-top: 10px;
color: #D72020;
} Так как мы зафиксировали только ширину блока, видимых изменений наблюдаться не будет до тех пор, пока мы не наполним его контентом - высота страницы будет меняться в зависимости от содержимого. Заполним контейнер right
. Изображения поместим в простую таблицу. Контент получил разметку, но ему явно не хватает белого фона, полноценно который появится ещё не скоро. Во время вёрстки, но уже после отрисовки макета, выяснилось, что боковое меню ещё будет иметь подпункты, причём они должны появляться при наведении на главный пункт и исчезать, когда указателя на нём нет. Ситуации, когда приходится дорабатывать оформление «на ходу», встречаются довольно часто. Расстояние между меню и основным содержимым позволяет нам вставить подпункты, однако интересен фокус с исчезновением и появлением подменю. В файл CSS впишите следующий код. #left
{
padding: 10px;
width: 237px;
padding-right: 1em;
}
#left h3
{
width: 225px;
height: 25px;
font-size: 14px;
font-weight: bold;
padding-left: 15px;
padding-top: 15px;
text-transform: uppercase;
color: #ffffff;
background: url(images/title.gif) no-repeat
}
#left ul {
margin: 0;
padding: 10px;
list-style: none;
width: 100px;
font-size: 18px;
}
#left li ul {
position: absolute;
left: 90px;
top: 0;
display: none;
}
#left ul li {
position: relative;
margin-bottom:20px;
}
#left ul li a {
display: block;
text-decoration: none;
color: #ffffcc;
background: #ff9900;
padding: 5px;
border: 1px solid gold;
border-bottom: 0;
}
#left li:hover ul {
display: block;
}
#left li li {
margin-bottom:0px;
width: 150px;
}
#left p
{
padding: 10px;
border-bottom: 1px solid #D72020;
border-left: 1px solid #D72020;
border-right: 1px solid #D72020;
} Обратите внимание на правила классов ul
и li
- секрет исчезновения меню находится там, раскройте его самостоятельно. В контейнер left HTML-документа добавим сначала информационный блок без меню. Мы предлагаем Вам праздничные скидки. Далее... Белый фон распространился ещё ниже по странице. Теперь самое время вставить в HTML-файл код меню левой панели. Оно, в отличие от верхней навигации, реализовано списками, что можно было заметить ещё из CSS-правил. В этой статье я хочу рассказать о четырех различных способах создания макетов с несколькими столбцами. Каждый способ имеет свои плюсы и минусы. Чтобы продемонстрировать, как эти макеты работают и выглядят, я создал простой сайт, на котором используются HTML-таблицы
, свойство CSS float
, CSS-фреймворк
и флексбокс. В этой статье мы используем четыре различных способа верстки сайта: Теперь пора попробовать каждый из них. Это дизайн моего сайта: Для создания шапки сайта я использовал свойство position: relative
. Давайте попробуем сделать это с нуля, используя табличную верстку. Вот мой HTML-код
: И вот, что я получил: table, td {
border-collapse: collapse;
border: 1px solid red;
} И вы увидите, что макет стал выглядеть так: Теперь плохая новость. Еще раз посмотрите на HTML-код
. Это простая таблица, но представьте, как она будет выглядеть с десятками ячеек. Вот какой исходный код у меня: All the stuff you need to know about the movies И файл CSS
: #header {
height: 230px;
background-image: url(../images/header1.jpg);
background-repeat: no-repeat;
font-family: "Shift", sans-serif;
}
#header h2 {
font-size: 4em;
position: relative;
top: 30px;
left: 550px;
display: inline;
}
#header p {
font-size: 1.3em;
font-weight: bold;
position: relative;
top: 50px;
left: 60px;
display: inline
}
#menu {
position: relative;
top: 100px;
left: 340px;
display: inline-block;
}
#menu li{
font-weight: bold;
display: inline;
text-transform: uppercase;
margin-right: 14px;
}
#menu input {
font-size: 0.7em;
text-transform: lowercase;
text-align: right;
position: relative;
top: -4px;
} В этом случае вам нужно использовать блочную верстку сайта с помощью CSS
. Применив что-то наподобие этого: div {
position: relative;
top: 100px;
left: 100px;
} Вы указываете переместить Свойство float
широко применяется при блочной верстке сайта. Мы будем использовать это свойство для вывода основной области размещения контента. Небольшой пример поможет вам лучше понять, как это работает:
В нем есть три разноцветных элемента А вот файл CSS
: #green {
width: 200px;
height: 200px;
border: 1px solid green;
float: left;
margin: 5px;
}
#red {
width: 100px;
height: 200px;
border: 1px solid red;
margin: 5px;
float: left;
}
#blue {
width: 310px;
height: 100px;
border: 1px solid blue;
margin: 5px;
clear: both;
} И вот, что у нас получилось: Следующий плавающей элемент будет смещаться, пока не встретит первый, и так далее. Следующий за плавающим элемент будет обтекать его как вода! Но если вы не хотите спускать все свои объекты «на воду
«, можно использовать свойство clear
. Оно определяет, какие стороны элемента не должны обтекать плавающие элементы. Вот как выглядит часть моего макета для основного контента: First article bodyRead more Second article bodyRead more First news article body Second news article body Теперь давайте сделаем ее плавающей: #main-content {
width: 780px;
float: left;
}
#news {
margin-left: 20px;
float: left;
width: 180px;
} Если у вас нет времени возиться с кодом при CSS верстке
, можно использовать один из CSS-фреймворков
. В нашем примере мы используем Bootstrap
. Для этого нужно скачать его и подключить в HTML-файле
. Bootstrap
содержит сетку, которая состоит из 12 равных по размеру столбцов. HTML-элементы
упорядочиваются так, чтобы охватывать различное количество столбцов. Таким образом, создаются пользовательские макеты. Каждая часть контента выравнивается относительно этой сетки через указанное количество столбцов, на которые они растягиваются. Вот пример: В этом примере мы создали строку. После этого поместили в нее два равных по размеру столбца. Каждый из них охватывает шесть из двенадцати доступных столбцов. HTML-код
: И вот, что я получил: Мы будем использовать флексбокс, чтобы создать раздел сайта «Бокс-офис
«. Вот HTML-код
: Вот CSS-код
для контейнера “boxoffice
”: #boxoffice {
width: 780px;
height: 500px;
background-image: url(../images/box_office_cropped.jpg);
background-repeat: cover;
border-radius: 5px;
padding: 20px;
} Теперь пришло время создать гибкий контейнер. Для этого нужно задать для элемента display: flex
. Согласно правилам верстки, все элементы флексбокса располагаются вдоль главной и поперечной осей: По умолчанию, главная ось горизонтальная, поэтому элементы будут растягиваться в ряд. Для изменения основной оси мы можем использовать свойство flex-direction
. Оно может принимать следующие значения: row
, row-reverse
, column
и column-reverse
. Мы будем использовать значение column
. Давайте также добавим свойство height
. Для чего это нужно, вы поймете чуть позже: flex-container {
height: 300px;
display: flex;
flex-direction: column;
} Вот как выглядит наш небольшой бокс-офис: Флексбокс также дает возможность вносить изменения в содержимое без изменения HTML-файла
. Например, если вы хотите поменять расположение элементов на противоположное, вы можете изменить значение flex-direction
на columns-reverse
. Это изменит направление флексбокса на противоположное. Но вам нужно будет также изменить порядок расположения элементов внутри контейнера. Для этого мы используем свойство justify-content
. Доступные для него значения: flex-start
, flex-end
, center
, space-between
и space-around
. Для него нужно установить значение justify-content
, которое эквивалентно flex-end
. Вот наш код: Flex-container {
height: 300px;
display: flex;
flex-direction: column-reverse;
justify-content: flex-end;
} И вот каким образом отразились эти изменения: Чтобы использовать его, добавьте свойство в селектор флексбокса: Flex-container {
align-items: flex-end;
} Все элементы сместятся к правому краю: Попробуйте добавить следующий код.
). Однако элемент
разработан не для создания макетов страниц, его цель — отображение табличных данных.
Следующий макет создается с помощью таблицы, состоящей из 3-х строк и 2 столбцов, где строки содержащие контент заголовка и футера охватывают обе колонки, используя атрибут colspan
:
Пример: Макет на основе таблицы
Шапка сайта
Главное меню
Основной контент...
Copyright © 2017 сайт
Макеты на основе DIV-элементов
Пример: Макет на основе DIV-элементов
Шапка сайта
Новые элементы макета в HTML5
Начало вёрстки. Обёртка. Шапка сайта.
Грузоперевозки
+7 900 650 33 45
http://trueimages.ru/img/cf/26/9116df15.png
">
На нашем сайте
Наши сотрудники
http://trueimages.ru/img/99/91/dea39f15.png
" width
="10
" height
="10
">Наша техника
http://trueimages.ru/img/99/91/dea39f15.png
" width
="10
" height
="10
">Прайс
Другая информация
http://trueimages.ru/img/81/90/b1718f15.png
">
Наша работа
Этот сайт первый, который я разработал самостоятельно,
а до этого умел только входить в интернет.
Почему я решил его сделать?
разбирался в сайтостроении и создавал этот ресурс
обнаружилось, что авторы руководств по созданию
сайтов считают многие нюансы само собой разумеющимися
и не обращают на них внимание.
возраст и «опыт», было не просто понять как раз эти
нюансы, они отнимали больше всего времени. И я решил
написать свой материал, так что-бы другим было легче
сориентироваться в потоке новой информации.
http://trueimages.ru/img/0d/64/07a18f15.png
">
«разжеваны» все мелочи сопровождающие создание сайта,
мимо которых обычно проскакивают другие авторы.
Если вам что-то будет непонятно, спрашивайте, для
меня нет «глупых» вопросов.
Читайе и создавайте свой сайт самостоятельно, каким
бы ни был Ваш возраст и стаж работы на компьютере.
несколько раз быстрее, чем у меня.
Устанавливаем базовое форматирование
Оформляем горизонтальное меню
Главная
Галерея
Договор
Прайс
Образцы
Контакты
Настраиваем логотип
Имя сайта
Слоган сайта
Верстаем основную часть страницы
Галерея
Кухни
Создание левой панели
Информация
Меню
Первый день новой жизни
Способы создания
Таблицы
Cinematron
HOME
PREMIERES
BOX-OFFICE
PHOTOS
Как видите, это не та же самая шапка. Она выглядит знакомо, но ее расположение немного изменилось. И вот почему. Вы знаете, что таблицы отлично подходят для симметричного позиционирования. Но для других целей они подходят не так хорошо. Также обратите внимание на громоздкость кода. Но у таблиц есть одна полезная особенность. Вот какую хитрость мы можем сделать:
Таким образом, можно легко определить, что где находится, если запутались.
Cinematron
Float
При верстке слоями вы указываете через свойство float
, что хотите, чтобы ваш элемент First article header
Second article header
First news article header
Second news article header
У нас есть большой блок для статей и блок поменьше для новостей. Мы использовали свойство float: left
и для изображений. Обратите внимание, как они обтекаются тегом . Этот макет выглядит, как ваш любимый журнал.
CSS-фреймворки
Если вы немного ленивы
Coming Soon:
Выглядит неплохо. И при верстке сайта из PSD
вам даже не нужно редактировать файл CSS
. Но вы не видите, что происходит внутри.
Флексбокс
Классика завтрашнего дня
Для флексбокса задаются два типа свойств. Первый используется для управления гибким контейнером, второй — для заполнения гибких элементов. Рассмотрим подробно первый тип.
Мы использовали свойство height
, потому что не хотим, чтобы контейнер флексбокса перекрывал изображение стрелки в нижней части фона.
Также можно перемещать элементы вдоль поперечной оси. Для этого используется свойство align-items. Вы можете задать для него следующие значения: flex-start
, flex-end
, center
, baseline
или stretch
.
Есть еще одно полезное свойство — flex-wrap
. Представьте, что бокс-офис быстро увеличивается. Что произойдет, если он станет больше, чем контейнер? Ничего плохого, если вы используете свойство flex-wrap
.