HTML Макеты. Осваиваем CSS: макет страницы
С чего обычно начинается процесс верстки? Начинается он с изучения макета или макетов будущего сайта. Чаще всего эти макеты создаются в программе Adobe Photoshop, поэтому вы, как верстальщик, должны уметь пользоваться этой программой, а именно уметь вырезать изображения из макета, измерять отступы между элементами, вычислять размеры и параметры различных компонентов будущей веб-страницы и т.д. Первым делом давайте произведем настройку рабочего пространства в программе Adobe Photoshop для удобства работы.
Все примеры будут показаны в программе Adobe Photoshop CS5 , с интерфейсом на английском языке.
Открыв программу Adobe Photoshop, вы увидите примерно следующее:
- Строка главного меню;
- Панель параметров;
- Панель инструментов;
- Дополнительные панели.
Нам нужно настроить набор дополнительных панелей. Для начала зайдите в меню Window – New Workspace :
Введите имя для нового рабочего пространства, например, my workspace , и нажмите Save . Теперь нам нужно выбрать необходимые панели для работы. Заходим в Window и ставим галочки напротив History , Info , Layers , Navigator , Options , Tools . С остальных панелей можете снять галочки, если они установлены.
Теперь нам нужно эти панели закрепить. Для этого кликнете по верхней части панели, и перетащите ее в нужное место, чтобы в итоге ваше рабочее пространство выглядело таким образом:
При появлении голубой прозрачной полоски, отпустите курсор, чтобы закрепить панель в этом месте:
Чтобы закрыть ненужные вкладки, кликнете по иконке в правом верхнем углу вкладки, и в выпадающем меню выберите пункт Close :
Первый макет, который мы будем с вами верстать называется simple_text.psd , находится он в папке templates . Откройте его в программе Adobe Photoshop, для этого зажмите клавиши Ctrl+O (или через меню File – Open ), и выберите файл.
Включите линейку при помощи горячих клавиш Ctrl+R или через меню View – Rulers :
Теперь кликните два раза по линейке и откройте вкладку Units & Rulers , чтобы настроить единицы измерения. Выберите в блоке Units для Rulers и Type единицы измерения пиксели:
Теперь все готово, можно начинать верстать макет.
Создание структуры веб-страницы
Создайте на рабочем столе папку и назовите ее simple text . В этой папке создайте два файла index.html и style.css .
Как вы помните структуру веб-страницы мы создаем на языке HTML. Поэтому сначала открываем файл index.html , и записываем в нем первоначальный код:
Теперь между тегами
создайте блок при помощи тега :
Тег
Пропишем в этом блоке элементы, которые присутствуют на макете, а именно заголовок и абзацы:
Самостоятельно добавьте текст между этими тегами.
Теперь в контейнере
пропишите путь к файлу со стилями:
Стилизация веб-страницы
Если вы откроете index.html в браузере, то увидите веб-страницу, написанную на чистом HTML. Она очень отличается от той, что изображена на макете. Это мы исправим при помощи каскадных таблиц стилей.
Откройте файл style.css и сбросьте все отступы при помощи универсального селектора звездочки:
* { margin: 0; padding: 0; }
Теперь давайте запишем свойства для тега
:Body { background-color: #e35b5b; font-size: 16px; line-height: 24px; color: white; font-family: Arial; }
Как узнать цвет фона веб-страницы в программе Adobe Photoshop? Для этого нужно кликнуть по одному из двух квадратиков с цветом:
Затем кликнуть пипеткой по фону макета, и скопировать шестнадцатеричный код, представленный в окне Color Picker :
Как узнать размер, межстрочный интервал, начертание, семейство шрифтов и цвет текста? Для этого нужно выбрать слой с текстом, затем открыть панель Character . На этой панели будут отображены следующие параметры:
Обратите внимание, что для цвета текста вместо шестнадцатеричного кода мы записали имя оттенка: color: white; . Имена оттенков удобно применять для черного black и белого цвета white , так как имя записать гораздо быстрее, чем шестнадцатеричный код. Все имена оттенков цветов можно посмотреть в этой таблице .
Свойства для блока
Для этого блока мы укажем ширину, а также отступы сверху, слева и справа:
У многих свойств вы будете видеть запись значений в следующих вариантах:
- margin:
значение1 значение2 значение3 значение4
;
- margin:
значение1 значение2 значение3
;
- margin:
значение1 значение2
;
- margin:
значение1
;
В первом случае
мы указываем значения для каждой из четырех сторон, например, margin: 10px 12px 20px 15px; : 10px – отступ сверху, 12px – отступ справа, 20px – отступ снизу, 15px – отступ слева. Такую запись обычно используют когда отступы с каждой стороны разные.
Во втором случае
записано три значения, например, margin: 10px 12px 20px; : 10px – отступ сверху, отступ справа и слева по 12px, 20px – отступ снизу. Такую запись удобно применять, когда значения справа и слева равны, а значения сверху и снизу различны. Значение auto используют, когда нужно, чтобы браузер автоматически расчитал отступы слева и справа.
В третьем случае
используется два значения, например, margin: 10px 12px; : отступ сверху и снизу по 10px, отступ справа и слева по 12px. Если отступы сверху и снизу равны, и равны друг другу отступы справа и слева, то удобно записывать только два значения, как и в нашем примере.
В четвертом случае
записано одно значение, например, margin: 10px; : отступ с каждой стороны равен 10px. Когда параметры со всех сторон равны, то удобно использовать именно такую запись.
Как измерить ширину или высоту элемента в программе Adobe Photoshop? Рассмотрим один из способов: берем инструмент Rectangular Marquee Tool (горячая клавиша M)
:
Затем выделяем область, например, нам нужно узнать отступ от верхнего края макета до начала содержимого, выделяем ее:
В панеле Info
смотрим значения высоты H
, или значение ширины W
, если вам нужно узнать ширину элемента:
Переходим к заголовку
Здесь нам нужно указать размер, межстрочный интервал, тень и отступ снизу. Как прописывать первые два свойства вы уже знаете.
Для указания тени нам потребуется свойство text-shadow
:
- Здесь 0
– отступ по оси X;
- 1px
– отступ по оси Y;
- 0
– радиус размытия тени;
- rgba(0,0,0,0.3)
– цвет тени. В данном случае мы используем формат RGBA, включающий альфа-канал, который задает прозрачность элементу. В скобках первые три значения отвечают за цвет в формате rgb
, а последнее значение отвечает за прозрачность. Это значение записывается в диапазоне от 0 до 1, где 0 соответствует полной прозрачности, а 1 – непрозрачности.
Как узнать параметры тени в программе Adobe Photoshop? Выбираем нужный слой в панели слоев, и кликаем по иконке ƒx
:
Открывается окно Layer Style
. В нем нужно выбрать вкладку Drop Shadow
:
Здесь параметр Opacity
отвечает за прозрачность, параметр Distance
отвечает за отступ по оси Y, параметр Size
отвечает за размытие, и параметр Angle
отвечает за отступ по оси X. Так как наша тень падает под прямым углом, значит отступ по оси X будет равен нулю. Цвет тени можно узнать в квадратике напротив параметра Blend Mode
:
Значение цвета в RGB формате и с альфа-каналом в данном случае будет выглядеть таким образом:
Text-shadow: 0 1px 0 rgba(0,0,0,0.3);
Осталось записать отступ снизу.
Если вам нужно записать значение для одной из четырех сторон, то используйте такую запись:
- margin-top
– отступ сверху;
- margin-right
– отступ справа;
- margin-bottom
– отступ снизу;
- margin-left
– отступ слева.
Так как нам нужно указать отступ снизу, то запишем margin-bottom: 30px;
В итоге получим такой код в файле style.css
:
* {
margin: 0;
padding: 0;
}
body {
background-color: #e35b5b;
font-size: 16px;
line-height: 24px;
color: white;
font-family: Arial;
}
div {
width: 724px;
margin: 43px auto 0;
}
h1 {
font-size: 60px;
line-height: 62px;
text-shadow: 0 1px 0 rgba(0,0,0,0.3);
margin-bottom: 30px;
}
Первый абзац. Соседние селекторы
Запишем свойства для первого абзаца:
P {
font-size: 24px;
line-height: 30px;
color: #a42727;
text-shadow: 0 1px 0 rgba(255,255,255,0.35);
margin-bottom: 42px;
}
Теперь, если вы сохраните изменения и откроете файл index.html
в браузере, то увидите, что данные свойства применились ко всем абзацам на странице. Так как нам нужно записать эти свойства только для первого абзаца, то в данном случае можно воспользоваться соседними селекторами
. Что это такое? В шаблоне html, теги
и
(берем именно первый абзац) идут друг за другом, а значит являются соседними тегами, в css соседние селекторы записываются таким образом:
H1+p {
font-size: 24px;
line-height: 30px;
color: #a42727;
text-shadow: 0 1px 0 rgba(255,255,255,0.35);
margin-bottom: 42px;
}
Теперь, данные свойства будут применяться только к первому абзацу.
Последний абзац. Классы в CSS
Теперь давайте перейдем к последнему абзацу. Так как он тоже отличается от основного текста, то для него мы зададим класс. В html-шаблоне запишите для последнего абзаца атрибут class со значением last-p . Название класса, также как и идентификатора должно начинаться с букв латинского алфавита:
В CSS классы записываются таким образом:
P.last-p {
color: #ffbfbf;
text-align: right;
text-shadow: 0 1px 0 rgba(0,0,0,0.3);
}
Эти свойства будут работать только для последнего абзаца в нашем шаблоне.
В отличии от идентификаторов, класс с определенным значением вы можете использовать на странице сколько угодно раз.
Свойство text-align со значением right применяется в том случае, когда нужно выровнять текст по правому краю. Также можно использовать и другие значения, например, text-align: center; в этом случае текст будет выравниваться по центру блока.
Остальные абзацы
Для остальных абзацев запишем следующее свойство:
P {
margin-bottom: 30px;
}
Остальные свойства: цвет, семейство шрифтов, размер, межстрочный интервал данный тег будет наследовать от родительского элемента, т.е. тега
.
Если мы уменьшим окно браузера, то увидим, что содержимое прибито по бокам к краям окна. Чтобы это исправить, добавим для селектора div внутренние отступы:
Группирование селекторов
Если несколько элементов веб-страницы содержат одинаковые свойства с одинаковыми значениями, например, как в нашем примере, заголовок и последний абзац имеют общее свойство – это тень, то вы можете сгруппировать эти селекторы, записав их через запятую:
H1,p.last-p {
text-shadow: 0 1px 0 rgba(0,0,0,0.3);
}
Не забудьте удалить свойства у отдельно взятых элементов, в нашем случае нужно удалить тень у селекторов h1 и p.last-p .
Видео к уроку
Часть 1
Фреймворк Bootstrap:
быстрая адаптивная вёрстка
Пошаговый видеокурс по основам адаптивной верстки в фреймворке Bootstrap.
Научитесь верстать просто, быстро и качественно, используя мощный и практичный инструмент.
Верстайте на заказ и получайте деньги.
Бесплатный курс
"Сайт на WordPress"
Хотите освоить CMS WordPress?
Получите уроки по дизайну и верстке сайта на WordPress.
Научитесь работать с темами и нарезать макет.
Бесплатный видеокурс по рисованию дизайна сайта, его верстке и установке на CMS WordPress!
*Наведите курсор мыши для приостановки прокрутки.
Назад
Вперед
Осваиваем CSS: макет страницы
Одно из главных преимуществ CSS - возможность контролировать внешний вид страницы без использования тэгов оформления HTML. Однако, создание CSS-шаблонов незаслуженно получило репутацию чего-то сложного, особенно среди тех разработчиков, кто еще только осваивает данную технологию. Отчасти это связано с тем, что не все браузеры одинаково интерпретируют CSS, но еще больше - с тем фактом, что сейчас существует просто огромное количество разных техник создания макетов средствами таблиц стилей.
Кажется, будто каждый веб-разработчик имеет свои собственные приемы и техники верстки CSS-шаблонов, и начинающие вебмастера зачастую используют какую-то технику даже не понимая, как она работает. Такой подход по типу "черного ящика" к использованию CSS помогает, конечно, получить результат быстро, но, в конечном счете мешает росту понимания языка разработчиком.
Однако все эти различные техники имеют в своей основе три основных концепции: позиционирование, обтекание, манипулирование внешними отступами. Различные техники при ближайшем рассмотрении оказываются не такими уж и различными, и, если вы освоите основным понятия и концепции, то вам будет относительно легко создать ваш собственный CSS-шаблон страницы.
Центрирование дизайна
Длинные строки текста читать очень неудобно или даже трудно. По мере того, как мониторы и их разрешения продолжают расти, проблема удобочитаемости текста с экрана встает все острее. Один из способов справиться с данным вопросом - отцентровать содержание страницы. Вместо того, чтобы растягивать контент на всю ширину экрана, центрированные дизайны занимают только часть экрана, благодаря чему строки приобретает удобную для чтения длину.
Страницы с центрацией контента сейчас широко распространены, поэтому изучение способов создания центрированного дизайна с помощью CSS - одна из первых вещей, которую хотят освоить начинающие веб-разработчики. Существует два основных способа центрации дизайна: в одном случае используются автоматические внешние отступы, в другом - позиционирование и отрицательные отступы.
Центрирование с использованием автоматических внешних отступов
Предположим, перед вами стоит типичная задача отцентровать по горизонтали контейнер div с id wrapper
("обертка").
Для осуществления этого на практике нужно просто задать ширину div wrapper
и установить горизонтальные внешние отступы в значение auto
.
В данном примере ширина установлена в пикселях. Но, разумеется, с таким же успехом можно указать ее в процентах от ширины тела документа body, либо использовать размер в "em" относительно размера текста.
Такой способ работает во всех современных браузерах, но не в IE 6. К счастью, IE неправильно интерпретирует свойство text-align: center
, выравнивая по центру все, а не только текст. Вы можете использовать это себе во благо, центрируя все, что находится в тэге body
, включая и div wrapper
, переназначая затем выравнивание на left
для содержимого блока wrapper
.
Body {
text-align: center;
}
#wrapper {
width: 720px;
margin: 0 auto;
text-align: left;
}
Использование свойства text-align
подобным образом является по сути хаком, но он совсем безобиден и не окажет неблагоприятного воздействия на ваш код. Сейчас наш блок wrapper
отцентрирован и в IE 6, точно так же, как и в других браузерах, которые лучше дружат со спецификацией.
Центрирование дизайна с использованием позиционирования и отрицательных отступов
Метод с использованием автоматических внешних отступов - наиболее популярный подход, но при его использовании приходится прибегать к хаку. Также он требует стилевого оформления двух элементов вместо одного. Именно по этой причине многие предпочитаю использовать позиционирование и отрицательные отступы.
Начинаем, как и в предыдущем примере - с установки ширины wrapper
. Затем устанавливаем свойство position
для wrapper
в значение relative
и свойство left
в значение 50%
. Это позволяет нам разместить левый край блока wrapper
в центре страницы.
#wrapper {
width: 720px;
position: relative;
left: 50%;
}
Нам, однако, нужно немного другое - мы хотим видеть в центре страницы центр блока wrapper
. Добиться этого можно, применив отрицательный отступ с левой стороны блока wrapper
равный половине ширины этого блока. Это сдвинет блок wrapper
на половину его ширины влево, перемещая его в центр экрана:
Ваш выбор способа центрации зависит только от вашего вкуса. Однако, всегда полезно знать несколько способов и техник, так как нельзя угадать, что может вам пригодиться.
Шаблоны на основе обтекания
Существует несколько способов создания шаблонов средствами CSS, включая абсолютное позиционирование и отрицательные отступы. Я считаю наиболее простым в использовании метод, основанный на обтекании одних элементов другими. Как ясно из названия, в такого типа шаблонах вы просто устанавливаете ширину позиционируемых элементов, а затем задаете им обтекание слева или справа.
Поскольку такие "обтекаемые" элементы больше не занимают никакого места в потоке документа, они не оказывают никакого влияния на окружающие их блочные элементы. Чтобы обойти такое поведение, вам нужно будет отменить обтекание на различных опорных точках вашего шаблона. Вместо того, чтобы последовательно применять обтекание и его отмену, удобнее использовать несколько другой подход: применять обтекание практически ко всему а затем отменять его один или два раза в "стратегических" точках документа, вроде футера.
Двухколоночный шаблон с использованием обтекания
Для создания простого двухколоночного шаблона с использованием обтекания, начнем с базовой структуры (X)HTML. В нашем примере (X)HTML-каркас состоит из зон: branding, content, зоны для навигации и футера. Вся данная структура заключена в "обертку" - wrapper
, который будет выровнен по горизонтали одним из описанных выше способов.
...
...
Главная навигация будет слева, а контент - с правой стороны. Однако в структуре страницы я поместил зону контента выше зоны навигации. Основная причина этого заключается в том, что содержание страницы наиболее важно и должно быть помещено в документе как можно выше, ближе к его началу.
Обычно, когда люди создают шаблоны и использованием обтекания, они придают свойству float
значение left
для обеих колонок, после чего создают "поле" между колонками, используя свойства margin или padding. При использовании такого подхода колонки плотно прижаты в доступном им пространстве - так, что "не продохнуть". Обычно это не вызывает проблем, но некоторые браузеры разрушают такой "плотный" дизайн, при этом колонки выстраиваются в столбик - одна под другой.
Это может происходить в IE, потому что в IE за основу берется "размер" контента, а не содержащего контент элемента. В браузерах, придерживающихся стандартов, если контент не помещается в блоке, он просто выходит за его пределы. В IE, однако, если контент не помещается в содержащем его элементе, то он "растягивает" элемент, увеличивая его в размере. Если подобная вещь происходит в плотном, зажатом дизайне, то у элементов больше не остается места, чтобы оставаться рядом друг с другом, и один из них как бы "проваливается", опускается ниже другого.
Чтобы избежать подобного развития событий, старайтесь не переполнять блок, содержащий ваш дизайн с обтеканием. Вместо использования горизонтальных внешних и внутренних отступов, (margin, padding) вы можете создать "виртуальные поля" придавая одному блоку float:left
, а другому - float:right
.
Сейчас, если один из элементов незначительно (в пределах нескольких пикселей) увеличится в размерах, вместо того, чтобы разрушить весь дизайн, вытеснив один из блоков ниже другого, произойдет "наплывание" блока на территорию "виртуального поля".
Код CSS для достижения данной цели самоочевиден. Мы просто устанавливаем желаемую ширину для каждой из колонок, после чего указываем для навигации float:left
, а для контента - float:right
.
#content {
width: 520px;
float: right;
}
#mainNav {
width: 180px;
float: left;
}
Затем, для того, чтобы корректно позиционировать футер под навигацией и контентом, для него нужно отменить обтекание.
#footer {
clear: both;
}
Базовый вариант готов. Добавим еще пару штрихов. Внутренние отступы сверху и снизу для всего блока навигации и внутренние отступы слева и справа для списка пунктов в навигационном меню.
#mainNav {
padding-top: 20px;
padding-bottom: 20px;
}
#mainNav li {
padding-left: 20px;
padding-right: 20px;
}
Проставим также отступ справа в зоне контента:
#content h1, h2, p {
padding-right: 20px;
}
Вот и все, теперь у нас готов простой двухколоночный макет на CSS.
Трехколоночный шаблон с использованием обтекания
HTML-каркас для построения трехколоночного шаблона очень похож на тот, что мы использовали с двухколоночным с той лишь разницей, что в нем появляются два дополнительных блока div: один для основного контента и еще один - для дополнительного.
…
…
Используя те же самые правила CSS, что и в случае двухколоночного шаблона, мы можем придать блоку основного контента float:left
, а блоку дополнительного - float:right
. Все это будет происходить внутри уже правильно спозиционированного основного блока content. Таким образом мы разделяем вторую колонку content на две, получая трехколоночный макет.
Как и раньше, CSS-код очень прост. Нужно просто указать желаемую ширину для каждого из блоков и задать каждому свое обтекание.
#mainContent {
width: 320px;
float: left;
}
#secondaryContent {
width: 180px;
float: right;
}
Можно немного подчистить шаблон, удалив внутренний отступ из блока content
, применив его непосредственно к контенту блока secondaryContent
:
#secondaryContent h1, h2, p {
padding-left: 20px;
padding-right: 20px;
}
Таким образом, мы получаем с вами вот такой симпатичный трехколоночный макет.
Andy Budd, Cameron Moll и Simon Collison: "CSS Mastery: Advanced Web Standards Solutions"
webreference.com
Перевод - Дмитрий Науменко
P.S.
Хотите больше материалов по прикладной верстке? Посмотрите бесплатные курсы ниже. Это серия видео по резиновой верстке сайта и бесплатный курс по основам адаптивной верстки. Они помогут вам быстрее получить необходимые навыки:
Понравился материал и хотите отблагодарить?
Просто поделитесь с друзьями и коллегами!
В данном уроке мы будем создавать макет страницы для веб - сайта.
Шаг 1.
Создание полного макета веб - сайта начинается с создания его начального расположения, и, только после этого, можно приступать к проектированию индивидуальных элементов страницы.
Результат - современная и новая веб - страница - раскладка, готовая к кодированию.
Шаг
2
. Черпая вдохновение из различных современных проектов веб - сайтов, мы и создадим это новую страницу - раскладку для веб - сайта.
Ключевые особенности нашей веб - страницы будут заключаться в горизонтальных полосах, так называемых «группах»: они нам нужны для того, чтобы разместить содержание нашей веб - странички в определенных областях: красочная область заголовка - шапка страницы, будет представлять один участок; дружественное приветственное обращение с примерами работ - другую часть; и, основная часть и ресурс, заполнят нижний колонтитул (нижнюю сноску).
Шаг
3.
Работа над любым проектом должна начинаться с эскиза на бумаге.
При помощи карандаша можно приблизительно или детально создать план будущего расположения частей веб - странички на бумаге.
Шаг
4.
Планирование каркаса будущей веб - страницы помогает развить иерархию и дает понять, как лучше расположить ключевые моменты проекта.
Шаг
5.
Создайте новый документ. Будет лучше, если Вы сделаете новый документ размером, соответствующим размеру широкоэкранного монитора, чтобы лучше представить, как будет выглядеть Ваша веб - страничка на широком экране. Например, создайте новый документ шириной - 1680 пикс.,
высотой - 1050 пикс
.
Шаг
6.
Воспользуйтесь инструментом Guides
«Направляющие»
и разместите эти направляющие линии в центре Вашего нового документа. Ширина направляющих составляет приблизительно 960 пикс
. С помощью этих направляющих, мы создадим основную сетку, для того, чтобы впоследствии нам было удобнее зрительно расположить основные пункты нашей веб - страницы.
Шаг
7.
Начните работу с создания полосы заголовка: создайте новый слой, выберите инструмент Rectangular
Marquee
Tool
«Прямоугольное выделение»
, на новом слое нарисуйте выделение, похожее на то, что приведено на рисунке ниже и залейте созданное выделение белым цветом.
Далее, войдите в палитру Layer Style
«Стили слоя»
, и добавьте стиль слоя Gradient Overlay
«Наложение градиента»
, цвет градиента выберите от основного к фоновому (от черного к белому) и отрегулируйтеOpacity
«Непрозрачность»
на Ваше усмотрение, чтобы эффект градиента получился не очень темным. После всех манипуляций нажмите «Да»
, чтобы применить эффект Gradient Overlay
«Наложение градиента»
. Градиент рисуйте линейного типа.
Шаг
8.
Теперь снова создайте новый слой и инструментом Rectangular
Marquee
Tool
«Прямоугольное
выделение»
нарисуйте область выделения, чуть больше предыдущей: здесь будет располагаться изображаемое содержимое, и в палитре Layer Style
«Стили слоя»
добавьте эффект Gradient Overlay
«Наложение градиента»
. Цвет градиента выберите двух ярких цветов (на Ваше усмотрение); тип градиента: Linear «Линейный»
. Для того, чтобы добавить немного глубины этому новому слою, в эффектах Layer Style
«Стили
слоя»
войдите в графу Inner Shadow
«Внутренняя тень»
и на Ваше усмотрение установите параметры тени.
Шаг
9.
По желанию:
легкая текстура может слегка освежить наш проект веб - страницы. После того, как к нарисованной прямоугольной области Вы применили эффект Gradient Overlay
«Наложение градиента»
из стилей слоя, Вы можете к этому прямоугольнику применить фильтр: Filter> Noise>
Add Noise
(Фильтр - Шум
- Добавить шум)
и режим наложения поставьте Multiply
«Умножение»
.
(если после применения данного фильтра «шума» не видно, попробуйте отключить видимость эффекта Gradient Overlay
«Наложение градиента»
в палитре Layer
«Слои»
).
Шаг
10.
Добавьте логотип (фирменный знак) компании в той позиции на экране, согласно Grid
«Сетке» - «Направляющим»
, затем добавьте к данному фирменному знаку стиль Gradient Overlay
«Наложение градиента»
и Inner Shadow
«Внутреннюю тень»
из команды Layer Style
«Стили слоя»
. Внутреннюю тень сделайте очень мягкой.
Шаг 11.
Используйте инструмент Type
«Текст»
для того, чтобы создать надпись для главной навигации. Установите курсор инструментаType
«Текст»
в середине серой полосы с градиентом и напишите необходимый Вам текст более темным цветом, чем цвет фона-градиента полоски, на которой пишите.
Шаг
12.
Особенность заголовка заключается в том, что он занимает большее место на веб - странице. Он является основным центром для пользователя.
Используйте вторую двуцветную градиентную полоску для того, чтобы разместить на ней вводный заголовок, написанный другим шрифтом.
Шаг
13.
Продолжайте к заголовку добавлять детальные пояснения, но, на этот раз, используя шрифты Arial
или Helvetica
.
Шаг
14.
Разместите необходимую Вам иллюстрацию (в нашем случае это будет иллюстрация портативного компьютера). Также, на экране нашего портативного компьютера мы можем разместить примеры работ. Некоторые примеры Вы можете найти на этой ссылке: range of examples can be found here
Шаг
15.
Теперь, для того, чтобы акцентировать внимание на нашей иллюстрации (портативном компьютере), и зрительно выделить ее, мы создадим новый слой, установим его позади слоя с иллюстрацией и, гармонирующим с синим фоном цветом, добавим прямо в центре радиальный градиент. Яркость его и непрозрачность отрегулируйте на Ваше усмотрение.
Шаг
16.
Создайте новый слой и на нем, под двуцветной центральной частью с иллюстрацией снова нарисуйте небольшую прямоугольную область и заполните ее серо-белым градиентом.
Шаг
17.
Разделите среднюю часть страницы на две колонки инструментом Guides
«Направляющие»
относительно линий сетки. В левой части будет размещен основной текст, а в правой части - дополнительная информация, касающаяся Вашей веб - страницы. Используйте инструмент Type
«Текст»
, чтобы создать надпись в этих двух колонках. Размер и тип шрифта (кегль и гарнитуру) выберите таким образом, чтобы текст был легко читаем.
Шаг
18.
Ниже этой самой главной части Вашей страницы можно разместить последние новости или блоги. Разделите столбец на два дополнительных столбца и сделайте ссылку на эти блоги. По желанию, можно сделать так, что, проходя по этой ссылке, ее текст будет менять свой цвет.
Шаг
19.
Создайте новый слой. На нем инструментом Rounded
Rectangle
Tool
«Прямоугольник со
скругленными углами»
нарисуйте именно такой прямоугольник - со скругленными углами. Рисуем в режиме «Выполнить
заливку пикселов»
на панели свойств, удерживая при рисовании клавишу <
Shiht>
для того, чтобы прямоугольник получился пропорциональным. Цвет прямоугольнику задаем серый.
Шаг
20.
После того, как наш прямоугольник нарисован, нам нужно добавить к нему линейный серо-белый градиент, тонкую серую обводку и мягкую внутреннюю тень. Все это мы делаем при помощи команды Layer Style
«Стили слоя»
, которая расположена в нижней части палитрыLayer
«Слои»
.
Шаг
21.
Используйте нарисованный и залитый серо-белым градиентом прямоугольник - виртуальную панель, для того, чтобы разместить в ней небольшой скриншот и необходимый текст, относящиеся к основной тематике создаваемой веб - странице.
Шаг
22.
В нижней части серого прямоугольника на новом слое нарисуйте другой прямоугольник со скругленными углами: он будет выполнять роль «кнопки» на Вашей веб - странице. К этому прямоугольнику добавьте такие Layer Style
«Стили слоя»
, как: наложение градиента и обводку серого цвета. Эти Layer Style
«Стили слоя»
мы добавляем для того, чтобы наша «кнопка» выглядела эффектно и стилизованно.
Шаг
23.
Напишите на «кнопке» необходимый Вам текст (метку), который будет подсказывать пользователям, каким образом можно дальше продолжать просматривать через веб - страницу очередные проекты.
Шаг
24.
Обозначьте конец содержимого на экране областью нижнего колонтитула. Это сделайте при помощи новой прямоугольной области, которую создайте на новом слое и залейте светло-серым цветом.
Шаг
25.
Инструментом Elliptical Marquee Tool
«Овальное выделение»
на новом слое нарисуйте длинный и узкий эллипс и заполните это выделение радиальной градиентной заливкой цветом от черного к прозрачному. При активном слое с нарисованным эллипсом, нажмите комбинацию клавиш <
Ctrl+
T>
, либо:
Edit>
Transform> Scale
(Редактирование - Трансформирование - Масштабирование
) для того, чтобы созданный эллипс масштабировать в длинный и тонкий эллипс, похожий на тень.
Шаг
26.
Разместите эллипс - тень на экране по центру, затем удалите лишнюю область выше нижнего колонтитула. В результате, у Вас должна получиться тонкая тень, которая добавит небольшой объем деталям.
Шаг
27.
Область нижнего колонтитула содержит достаточно свободного места для размещения вторичных элементов страницы. Одним из таких элементов может стать «Область клиентского логина»
. Для того,чтобы создать данную область, активизируйте инструмент Type
«Текст»
, создайте два (или несколько) текстовых рамок, внутри которых и разместите Ваш текст: логин; пароль.
Созданным текстовым рамкам можно придать небольшую мягкую тень, используя функцию: Layer Style
«Стили слоя»
.
Шаг
28.
Используйте центральную область нижнего колонтитула для того, чтобы разместить информацию о компании. Создайте текст, используя легко читаемый шрифт.
Шаг
29.
Теперь, добавьте контактную информацию крупным читаемым шрифтом.
Шаг
30.
В итоге, после всей проделанной работы, у нас получилась интересная веб - страничка. Все элементы четко расположены на странице, все удобочитаемо и красиво!
Создание макета веб страницы
служит для
упорядочивания элементов на сайте. Чтобы текст, картинки, видео
размещались на сайте красиво и аккуратно, необходимо создать
структуру страницы.
Для этого вначале рисуется таблица, а в ней ячейки. Таблица,
разбитая на ячейки, позволяет четко задавать положение каждого
элемента сайта.
Рисуем макетную таблицу
1
. На панели инструментов программы
frontpage
жмем "
Таблица"
и выбираем "
Макетные таблицы и ячейки"
Как создать макет веб страницы в программе
frontpage
2. Справа появится инструментальная панель. Нажимаем кнопку
"
Нарисовать макетную таблицу"
.
Курсор станет в виде карандаша. Теперь рисуем произвольный
прямоугольник. Далее на панели справа задаем размеры:
Ширина
- 850, Высота
- 150, Выравнивание
-
посередине.
Наша первая таблица готова! Здесь будет располагаться шапка
сайта. Теперь нам надо нарисовать вторую таблицу под тело сайта. В
ней будет располагаться основная информация сайта.
3. Для этого проделайте точно такие же действия, как для рисования
первой таблицы. Не забудьте СОХРАНИТЬ! В результате у Вас должно
получиться две одинаковые таблицы:
Рисуем макетные ячейки для веб
страницы
Теперь в верхнюю таблицу вставим ячейку и напишем название нашего
сайта.
4
. Для этого выделяем таблицу № 1. Чтобы понять, что таблица
выделилась, ее границы должны стать зелеными, в углах должны
появиться маркеры, а по бокам цифры с размерами таблицы.
Рисуем в программе
Frontpage
ячейки в таблицах
5. На панели инструментов справа нажимаем кнопку
"
Нарисовать макетную ячейку"
.
Курсор станет в виде карандаша. Ставим его в угол таблицы и рисуем
прямоугольник точно таких же размеров
, как и таблица.
Обратите внимание, что в отличии от таблицы, границы ячейки выделяются синим цветом
.
Создание макета веб-страницы - рисуем ячейку в
программе
Frontpage
После того, как Вы нарисовали ячейку для верхней таблицы,
проделайте такие же действия
и нарисуйте ячейку для
таблицы №2
. В ней будет располагаться тело нашего сайта. Не забудьте сохранить!
После того, как Вы в программе Frontpage
создали макет веб страницы
, переходим
к следующему шагу по созданию сайта. Это создание шапки для сайта.
В этом подразделе описаны популярные макеты сайтов, которые чаще всего используются в верстке, а также несколько приемов, придающих им более привлекательный вид. Макеты сделаны с помощью , поэтому от вас потребуется знание этих языков, чтобы в полной мере понимать принцип верстки. Если же вы их знаете, то значит вам известно, что в HTML и CSS одного и того же результата можно добиться совершенно разными путями. Здесь показаны только некоторые возможные способы.
Макеты делятся на три основных типа:
- Фиксированные
- это макеты с фиксированной шириной (CSS ), оптимизированной под размер большинства современных мониторов пользователей или с «плавающей» шириной, которая имеет ограничения по максимальной (CSS ) и минимальной (CSS ) ширине страницы. Обычно содержимое в таких случаях располагается по центру, однако некоторые вебмастеры предпочитают прижимать страницы сайтов к одной из сторон окна браузера.
- Резиновые
- макеты, которые имеют изменяемые размеры, подстраиваясь под окно браузера и занимая всю его доступную ширину. Однако им, как и фиксированным, также часто дополнительно задают максимальную и/или минимальную ширину. Одним из вариантов для достижения этого эффекта может быть обрамление блоков HTML-страницы в дополнительный оберточный блок (если он еще отсутствует в макете), на манер фиксированных макетов, к которому затем и применяются свойства регулировки ширины. Это необходимо, чтобы при уменьшении окна браузера колонки не накладывались друг на друга или не сползали вниз.
- С контентом впереди
- это резиновые или фиксированные макеты, у которых колонка с основным содержимым страницы (контентом) идет выше в HTML-коде, чем большинство других элементов. Это делается для того, чтобы в браузерах с отключенным CSS пользователи могли видеть сначала то, за чем пришли, а уже потом навигацию и остальные второстепенные элементы HTML-страницы. Однако верстка подобных макетов несколько сложнее в реализации и требует от верстальщика определенного уровня навыков и знаний, необходимых для одинакового отображения сайта в разных браузерах.
Кроме колонок в макетах присутствует верхняя часть (хедер) и нижняя (футер), так как они уже давно являются привычной и неотъемлемой частью практически всех сайтов в интернете. По этой же причине здесь вы найдете примеры, позволяющие прижать футер
к низу страницы и сделать колонки одинаковой высоты
.
Обратите внимание, что практически во всех макетах вы можете поменять некоторые колонки местами, не изменяя HTML-код страниц. Поэтому, во-первых, на основе этих макетов вы можете создать какие-то свои варианты, а во-вторых, если получится так, что вы уже
Для этого блока мы укажем ширину, а также отступы сверху, слева и справа:
У многих свойств вы будете видеть запись значений в следующих вариантах:
- margin: значение1 значение2 значение3 значение4 ;
- margin: значение1 значение2 значение3 ;
- margin: значение1 значение2 ;
- margin: значение1 ;
В первом случае мы указываем значения для каждой из четырех сторон, например, margin: 10px 12px 20px 15px; : 10px – отступ сверху, 12px – отступ справа, 20px – отступ снизу, 15px – отступ слева. Такую запись обычно используют когда отступы с каждой стороны разные.
Во втором случае записано три значения, например, margin: 10px 12px 20px; : 10px – отступ сверху, отступ справа и слева по 12px, 20px – отступ снизу. Такую запись удобно применять, когда значения справа и слева равны, а значения сверху и снизу различны. Значение auto используют, когда нужно, чтобы браузер автоматически расчитал отступы слева и справа.
В третьем случае используется два значения, например, margin: 10px 12px; : отступ сверху и снизу по 10px, отступ справа и слева по 12px. Если отступы сверху и снизу равны, и равны друг другу отступы справа и слева, то удобно записывать только два значения, как и в нашем примере.
В четвертом случае записано одно значение, например, margin: 10px; : отступ с каждой стороны равен 10px. Когда параметры со всех сторон равны, то удобно использовать именно такую запись.
Как измерить ширину или высоту элемента в программе Adobe Photoshop? Рассмотрим один из способов: берем инструмент Rectangular Marquee Tool (горячая клавиша M) :
Затем выделяем область, например, нам нужно узнать отступ от верхнего края макета до начала содержимого, выделяем ее:
В панеле Info смотрим значения высоты H , или значение ширины W , если вам нужно узнать ширину элемента:
Переходим к заголовку
Здесь нам нужно указать размер, межстрочный интервал, тень и отступ снизу. Как прописывать первые два свойства вы уже знаете.
Для указания тени нам потребуется свойство text-shadow :
- Здесь 0 – отступ по оси X;
- 1px – отступ по оси Y;
- 0 – радиус размытия тени;
- rgba(0,0,0,0.3) – цвет тени. В данном случае мы используем формат RGBA, включающий альфа-канал, который задает прозрачность элементу. В скобках первые три значения отвечают за цвет в формате rgb , а последнее значение отвечает за прозрачность. Это значение записывается в диапазоне от 0 до 1, где 0 соответствует полной прозрачности, а 1 – непрозрачности.
Как узнать параметры тени в программе Adobe Photoshop? Выбираем нужный слой в панели слоев, и кликаем по иконке ƒx :
Открывается окно Layer Style . В нем нужно выбрать вкладку Drop Shadow :
Здесь параметр Opacity отвечает за прозрачность, параметр Distance отвечает за отступ по оси Y, параметр Size отвечает за размытие, и параметр Angle отвечает за отступ по оси X. Так как наша тень падает под прямым углом, значит отступ по оси X будет равен нулю. Цвет тени можно узнать в квадратике напротив параметра Blend Mode :
Значение цвета в RGB формате и с альфа-каналом в данном случае будет выглядеть таким образом:
Text-shadow: 0 1px 0 rgba(0,0,0,0.3);
Осталось записать отступ снизу.
Если вам нужно записать значение для одной из четырех сторон, то используйте такую запись:
- margin-top – отступ сверху;
- margin-right – отступ справа;
- margin-bottom – отступ снизу;
- margin-left – отступ слева.
Так как нам нужно указать отступ снизу, то запишем margin-bottom: 30px;
В итоге получим такой код в файле style.css :
* { margin: 0; padding: 0; } body { background-color: #e35b5b; font-size: 16px; line-height: 24px; color: white; font-family: Arial; } div { width: 724px; margin: 43px auto 0; } h1 { font-size: 60px; line-height: 62px; text-shadow: 0 1px 0 rgba(0,0,0,0.3); margin-bottom: 30px; }
Первый абзац. Соседние селекторы
Запишем свойства для первого абзаца:
P { font-size: 24px; line-height: 30px; color: #a42727; text-shadow: 0 1px 0 rgba(255,255,255,0.35); margin-bottom: 42px; }
Теперь, если вы сохраните изменения и откроете файл index.html в браузере, то увидите, что данные свойства применились ко всем абзацам на странице. Так как нам нужно записать эти свойства только для первого абзаца, то в данном случае можно воспользоваться соседними селекторами . Что это такое? В шаблоне html, теги
и
(берем именно первый абзац) идут друг за другом, а значит являются соседними тегами, в css соседние селекторы записываются таким образом:
H1+p { font-size: 24px; line-height: 30px; color: #a42727; text-shadow: 0 1px 0 rgba(255,255,255,0.35); margin-bottom: 42px; }
Теперь, данные свойства будут применяться только к первому абзацу.
Последний абзац. Классы в CSS
Теперь давайте перейдем к последнему абзацу. Так как он тоже отличается от основного текста, то для него мы зададим класс. В html-шаблоне запишите для последнего абзаца атрибут class со значением last-p . Название класса, также как и идентификатора должно начинаться с букв латинского алфавита:
В CSS классы записываются таким образом:
P.last-p { color: #ffbfbf; text-align: right; text-shadow: 0 1px 0 rgba(0,0,0,0.3); }
Эти свойства будут работать только для последнего абзаца в нашем шаблоне.
В отличии от идентификаторов, класс с определенным значением вы можете использовать на странице сколько угодно раз.
Свойство text-align со значением right применяется в том случае, когда нужно выровнять текст по правому краю. Также можно использовать и другие значения, например, text-align: center; в этом случае текст будет выравниваться по центру блока.
Остальные абзацы
Для остальных абзацев запишем следующее свойство:
P { margin-bottom: 30px; }
Остальные свойства: цвет, семейство шрифтов, размер, межстрочный интервал данный тег будет наследовать от родительского элемента, т.е. тега
.Если мы уменьшим окно браузера, то увидим, что содержимое прибито по бокам к краям окна. Чтобы это исправить, добавим для селектора div внутренние отступы:
Группирование селекторов
Если несколько элементов веб-страницы содержат одинаковые свойства с одинаковыми значениями, например, как в нашем примере, заголовок и последний абзац имеют общее свойство – это тень, то вы можете сгруппировать эти селекторы, записав их через запятую:
H1,p.last-p { text-shadow: 0 1px 0 rgba(0,0,0,0.3); }
Не забудьте удалить свойства у отдельно взятых элементов, в нашем случае нужно удалить тень у селекторов h1 и p.last-p .
Видео к уроку
Часть 1
Фреймворк Bootstrap: быстрая адаптивная вёрстка
Пошаговый видеокурс по основам адаптивной верстки в фреймворке Bootstrap.
Научитесь верстать просто, быстро и качественно, используя мощный и практичный инструмент.
Верстайте на заказ и получайте деньги.
Бесплатный курс "Сайт на WordPress"
Хотите освоить CMS WordPress?
Получите уроки по дизайну и верстке сайта на WordPress.
Научитесь работать с темами и нарезать макет.
Бесплатный видеокурс по рисованию дизайна сайта, его верстке и установке на CMS WordPress!
*Наведите курсор мыши для приостановки прокрутки.
Назад Вперед
Осваиваем CSS: макет страницы
Одно из главных преимуществ CSS - возможность контролировать внешний вид страницы без использования тэгов оформления HTML. Однако, создание CSS-шаблонов незаслуженно получило репутацию чего-то сложного, особенно среди тех разработчиков, кто еще только осваивает данную технологию. Отчасти это связано с тем, что не все браузеры одинаково интерпретируют CSS, но еще больше - с тем фактом, что сейчас существует просто огромное количество разных техник создания макетов средствами таблиц стилей.
Кажется, будто каждый веб-разработчик имеет свои собственные приемы и техники верстки CSS-шаблонов, и начинающие вебмастера зачастую используют какую-то технику даже не понимая, как она работает. Такой подход по типу "черного ящика" к использованию CSS помогает, конечно, получить результат быстро, но, в конечном счете мешает росту понимания языка разработчиком.
Однако все эти различные техники имеют в своей основе три основных концепции: позиционирование, обтекание, манипулирование внешними отступами. Различные техники при ближайшем рассмотрении оказываются не такими уж и различными, и, если вы освоите основным понятия и концепции, то вам будет относительно легко создать ваш собственный CSS-шаблон страницы.
Центрирование дизайна
Длинные строки текста читать очень неудобно или даже трудно. По мере того, как мониторы и их разрешения продолжают расти, проблема удобочитаемости текста с экрана встает все острее. Один из способов справиться с данным вопросом - отцентровать содержание страницы. Вместо того, чтобы растягивать контент на всю ширину экрана, центрированные дизайны занимают только часть экрана, благодаря чему строки приобретает удобную для чтения длину.
Страницы с центрацией контента сейчас широко распространены, поэтому изучение способов создания центрированного дизайна с помощью CSS - одна из первых вещей, которую хотят освоить начинающие веб-разработчики. Существует два основных способа центрации дизайна: в одном случае используются автоматические внешние отступы, в другом - позиционирование и отрицательные отступы.
Центрирование с использованием автоматических внешних отступов
Предположим, перед вами стоит типичная задача отцентровать по горизонтали контейнер div с id wrapper ("обертка").
Для осуществления этого на практике нужно просто задать ширину div wrapper и установить горизонтальные внешние отступы в значение auto .
В данном примере ширина установлена в пикселях. Но, разумеется, с таким же успехом можно указать ее в процентах от ширины тела документа body, либо использовать размер в "em" относительно размера текста.
Такой способ работает во всех современных браузерах, но не в IE 6. К счастью, IE неправильно интерпретирует свойство text-align: center , выравнивая по центру все, а не только текст. Вы можете использовать это себе во благо, центрируя все, что находится в тэге body , включая и div wrapper , переназначая затем выравнивание на left для содержимого блока wrapper .
Body { text-align: center; } #wrapper { width: 720px; margin: 0 auto; text-align: left; }
Использование свойства text-align подобным образом является по сути хаком, но он совсем безобиден и не окажет неблагоприятного воздействия на ваш код. Сейчас наш блок wrapper отцентрирован и в IE 6, точно так же, как и в других браузерах, которые лучше дружат со спецификацией.
Центрирование дизайна с использованием позиционирования и отрицательных отступов
Метод с использованием автоматических внешних отступов - наиболее популярный подход, но при его использовании приходится прибегать к хаку. Также он требует стилевого оформления двух элементов вместо одного. Именно по этой причине многие предпочитаю использовать позиционирование и отрицательные отступы.
Начинаем, как и в предыдущем примере - с установки ширины wrapper . Затем устанавливаем свойство position для wrapper в значение relative и свойство left в значение 50% . Это позволяет нам разместить левый край блока wrapper в центре страницы.
#wrapper { width: 720px; position: relative; left: 50%; }
Нам, однако, нужно немного другое - мы хотим видеть в центре страницы центр блока wrapper . Добиться этого можно, применив отрицательный отступ с левой стороны блока wrapper равный половине ширины этого блока. Это сдвинет блок wrapper на половину его ширины влево, перемещая его в центр экрана:
Ваш выбор способа центрации зависит только от вашего вкуса. Однако, всегда полезно знать несколько способов и техник, так как нельзя угадать, что может вам пригодиться.
Шаблоны на основе обтекания
Существует несколько способов создания шаблонов средствами CSS, включая абсолютное позиционирование и отрицательные отступы. Я считаю наиболее простым в использовании метод, основанный на обтекании одних элементов другими. Как ясно из названия, в такого типа шаблонах вы просто устанавливаете ширину позиционируемых элементов, а затем задаете им обтекание слева или справа.
Поскольку такие "обтекаемые" элементы больше не занимают никакого места в потоке документа, они не оказывают никакого влияния на окружающие их блочные элементы. Чтобы обойти такое поведение, вам нужно будет отменить обтекание на различных опорных точках вашего шаблона. Вместо того, чтобы последовательно применять обтекание и его отмену, удобнее использовать несколько другой подход: применять обтекание практически ко всему а затем отменять его один или два раза в "стратегических" точках документа, вроде футера.
Двухколоночный шаблон с использованием обтекания
Для создания простого двухколоночного шаблона с использованием обтекания, начнем с базовой структуры (X)HTML. В нашем примере (X)HTML-каркас состоит из зон: branding, content, зоны для навигации и футера. Вся данная структура заключена в "обертку" - wrapper , который будет выровнен по горизонтали одним из описанных выше способов.
Главная навигация будет слева, а контент - с правой стороны. Однако в структуре страницы я поместил зону контента выше зоны навигации. Основная причина этого заключается в том, что содержание страницы наиболее важно и должно быть помещено в документе как можно выше, ближе к его началу.
Обычно, когда люди создают шаблоны и использованием обтекания, они придают свойству float значение left для обеих колонок, после чего создают "поле" между колонками, используя свойства margin или padding. При использовании такого подхода колонки плотно прижаты в доступном им пространстве - так, что "не продохнуть". Обычно это не вызывает проблем, но некоторые браузеры разрушают такой "плотный" дизайн, при этом колонки выстраиваются в столбик - одна под другой.
Это может происходить в IE, потому что в IE за основу берется "размер" контента, а не содержащего контент элемента. В браузерах, придерживающихся стандартов, если контент не помещается в блоке, он просто выходит за его пределы. В IE, однако, если контент не помещается в содержащем его элементе, то он "растягивает" элемент, увеличивая его в размере. Если подобная вещь происходит в плотном, зажатом дизайне, то у элементов больше не остается места, чтобы оставаться рядом друг с другом, и один из них как бы "проваливается", опускается ниже другого.
Чтобы избежать подобного развития событий, старайтесь не переполнять блок, содержащий ваш дизайн с обтеканием. Вместо использования горизонтальных внешних и внутренних отступов, (margin, padding) вы можете создать "виртуальные поля" придавая одному блоку float:left , а другому - float:right .
Сейчас, если один из элементов незначительно (в пределах нескольких пикселей) увеличится в размерах, вместо того, чтобы разрушить весь дизайн, вытеснив один из блоков ниже другого, произойдет "наплывание" блока на территорию "виртуального поля".
Код CSS для достижения данной цели самоочевиден. Мы просто устанавливаем желаемую ширину для каждой из колонок, после чего указываем для навигации float:left , а для контента - float:right .
#content { width: 520px; float: right; } #mainNav { width: 180px; float: left; }
Затем, для того, чтобы корректно позиционировать футер под навигацией и контентом, для него нужно отменить обтекание.
#footer { clear: both; }
Базовый вариант готов. Добавим еще пару штрихов. Внутренние отступы сверху и снизу для всего блока навигации и внутренние отступы слева и справа для списка пунктов в навигационном меню.
#mainNav { padding-top: 20px; padding-bottom: 20px; } #mainNav li { padding-left: 20px; padding-right: 20px; }
Проставим также отступ справа в зоне контента:
#content h1, h2, p { padding-right: 20px; }
Вот и все, теперь у нас готов простой двухколоночный макет на CSS.
Трехколоночный шаблон с использованием обтекания
HTML-каркас для построения трехколоночного шаблона очень похож на тот, что мы использовали с двухколоночным с той лишь разницей, что в нем появляются два дополнительных блока div: один для основного контента и еще один - для дополнительного.
Используя те же самые правила CSS, что и в случае двухколоночного шаблона, мы можем придать блоку основного контента float:left , а блоку дополнительного - float:right . Все это будет происходить внутри уже правильно спозиционированного основного блока content. Таким образом мы разделяем вторую колонку content на две, получая трехколоночный макет.
Как и раньше, CSS-код очень прост. Нужно просто указать желаемую ширину для каждого из блоков и задать каждому свое обтекание.
#mainContent { width: 320px; float: left; } #secondaryContent { width: 180px; float: right; }
Можно немного подчистить шаблон, удалив внутренний отступ из блока content , применив его непосредственно к контенту блока secondaryContent :
#secondaryContent h1, h2, p { padding-left: 20px; padding-right: 20px; }
Таким образом, мы получаем с вами вот такой симпатичный трехколоночный макет.
Andy Budd, Cameron Moll и Simon Collison: "CSS Mastery: Advanced Web Standards Solutions"
webreference.com
Перевод - Дмитрий Науменко
P.S. Хотите больше материалов по прикладной верстке? Посмотрите бесплатные курсы ниже. Это серия видео по резиновой верстке сайта и бесплатный курс по основам адаптивной верстки. Они помогут вам быстрее получить необходимые навыки:
Понравился материал и хотите отблагодарить?
Просто поделитесь с друзьями и коллегами!
В данном уроке мы будем создавать макет страницы для веб - сайта.
Шаг 1.
Создание полного макета веб - сайта начинается с создания его начального расположения, и, только после этого, можно приступать к проектированию индивидуальных элементов страницы.
Результат - современная и новая веб - страница - раскладка, готовая к кодированию.
Шаг
2
. Черпая вдохновение из различных современных проектов веб - сайтов, мы и создадим это новую страницу - раскладку для веб - сайта.
Ключевые особенности нашей веб - страницы будут заключаться в горизонтальных полосах, так называемых «группах»: они нам нужны для того, чтобы разместить содержание нашей веб - странички в определенных областях: красочная область заголовка - шапка страницы, будет представлять один участок; дружественное приветственное обращение с примерами работ - другую часть; и, основная часть и ресурс, заполнят нижний колонтитул (нижнюю сноску).
Шаг
3.
Работа над любым проектом должна начинаться с эскиза на бумаге.
При помощи карандаша можно приблизительно или детально создать план будущего расположения частей веб - странички на бумаге.
Шаг 4. Планирование каркаса будущей веб - страницы помогает развить иерархию и дает понять, как лучше расположить ключевые моменты проекта.
Шаг 5. Создайте новый документ. Будет лучше, если Вы сделаете новый документ размером, соответствующим размеру широкоэкранного монитора, чтобы лучше представить, как будет выглядеть Ваша веб - страничка на широком экране. Например, создайте новый документ шириной - 1680 пикс., высотой - 1050 пикс .
Шаг 6. Воспользуйтесь инструментом Guides «Направляющие» и разместите эти направляющие линии в центре Вашего нового документа. Ширина направляющих составляет приблизительно 960 пикс . С помощью этих направляющих, мы создадим основную сетку, для того, чтобы впоследствии нам было удобнее зрительно расположить основные пункты нашей веб - страницы.
Шаг 7. Начните работу с создания полосы заголовка: создайте новый слой, выберите инструмент Rectangular Marquee Tool «Прямоугольное выделение» , на новом слое нарисуйте выделение, похожее на то, что приведено на рисунке ниже и залейте созданное выделение белым цветом.
Далее, войдите в палитру Layer Style «Стили слоя» , и добавьте стиль слоя Gradient Overlay «Наложение градиента» , цвет градиента выберите от основного к фоновому (от черного к белому) и отрегулируйтеOpacity «Непрозрачность» на Ваше усмотрение, чтобы эффект градиента получился не очень темным. После всех манипуляций нажмите «Да» , чтобы применить эффект Gradient Overlay «Наложение градиента» . Градиент рисуйте линейного типа.
Шаг 8. Теперь снова создайте новый слой и инструментом Rectangular Marquee Tool «Прямоугольное выделение» нарисуйте область выделения, чуть больше предыдущей: здесь будет располагаться изображаемое содержимое, и в палитре Layer Style «Стили слоя» добавьте эффект Gradient Overlay «Наложение градиента» . Цвет градиента выберите двух ярких цветов (на Ваше усмотрение); тип градиента: Linear «Линейный» . Для того, чтобы добавить немного глубины этому новому слою, в эффектах Layer Style «Стили слоя» войдите в графу Inner Shadow «Внутренняя тень» и на Ваше усмотрение установите параметры тени.
Шаг
9.
По желанию:
легкая текстура может слегка освежить наш проект веб - страницы. После того, как к нарисованной прямоугольной области Вы применили эффект Gradient Overlay
«Наложение градиента»
из стилей слоя, Вы можете к этому прямоугольнику применить фильтр: Filter> Noise>
Add Noise
(Фильтр - Шум
- Добавить шум)
и режим наложения поставьте Multiply
«Умножение»
.
(если после применения данного фильтра «шума» не видно, попробуйте отключить видимость эффекта Gradient Overlay
«Наложение градиента»
в палитре Layer
«Слои»
).
Шаг 10. Добавьте логотип (фирменный знак) компании в той позиции на экране, согласно Grid «Сетке» - «Направляющим» , затем добавьте к данному фирменному знаку стиль Gradient Overlay «Наложение градиента» и Inner Shadow «Внутреннюю тень» из команды Layer Style «Стили слоя» . Внутреннюю тень сделайте очень мягкой.
Шаг 11. Используйте инструмент Type «Текст» для того, чтобы создать надпись для главной навигации. Установите курсор инструментаType «Текст» в середине серой полосы с градиентом и напишите необходимый Вам текст более темным цветом, чем цвет фона-градиента полоски, на которой пишите.
Шаг
12.
Особенность заголовка заключается в том, что он занимает большее место на веб - странице. Он является основным центром для пользователя.
Используйте вторую двуцветную градиентную полоску для того, чтобы разместить на ней вводный заголовок, написанный другим шрифтом.
Шаг 13. Продолжайте к заголовку добавлять детальные пояснения, но, на этот раз, используя шрифты Arial или Helvetica .
Шаг 14. Разместите необходимую Вам иллюстрацию (в нашем случае это будет иллюстрация портативного компьютера). Также, на экране нашего портативного компьютера мы можем разместить примеры работ. Некоторые примеры Вы можете найти на этой ссылке: range of examples can be found here
Шаг 15. Теперь, для того, чтобы акцентировать внимание на нашей иллюстрации (портативном компьютере), и зрительно выделить ее, мы создадим новый слой, установим его позади слоя с иллюстрацией и, гармонирующим с синим фоном цветом, добавим прямо в центре радиальный градиент. Яркость его и непрозрачность отрегулируйте на Ваше усмотрение.
Шаг 16. Создайте новый слой и на нем, под двуцветной центральной частью с иллюстрацией снова нарисуйте небольшую прямоугольную область и заполните ее серо-белым градиентом.
Шаг 17. Разделите среднюю часть страницы на две колонки инструментом Guides «Направляющие» относительно линий сетки. В левой части будет размещен основной текст, а в правой части - дополнительная информация, касающаяся Вашей веб - страницы. Используйте инструмент Type «Текст» , чтобы создать надпись в этих двух колонках. Размер и тип шрифта (кегль и гарнитуру) выберите таким образом, чтобы текст был легко читаем.
Шаг 18. Ниже этой самой главной части Вашей страницы можно разместить последние новости или блоги. Разделите столбец на два дополнительных столбца и сделайте ссылку на эти блоги. По желанию, можно сделать так, что, проходя по этой ссылке, ее текст будет менять свой цвет.
Шаг 19. Создайте новый слой. На нем инструментом Rounded Rectangle Tool «Прямоугольник со скругленными углами» нарисуйте именно такой прямоугольник - со скругленными углами. Рисуем в режиме «Выполнить заливку пикселов» на панели свойств, удерживая при рисовании клавишу < Shiht> для того, чтобы прямоугольник получился пропорциональным. Цвет прямоугольнику задаем серый.
Шаг 20. После того, как наш прямоугольник нарисован, нам нужно добавить к нему линейный серо-белый градиент, тонкую серую обводку и мягкую внутреннюю тень. Все это мы делаем при помощи команды Layer Style «Стили слоя» , которая расположена в нижней части палитрыLayer «Слои» .
Шаг 21. Используйте нарисованный и залитый серо-белым градиентом прямоугольник - виртуальную панель, для того, чтобы разместить в ней небольшой скриншот и необходимый текст, относящиеся к основной тематике создаваемой веб - странице.
Шаг 22. В нижней части серого прямоугольника на новом слое нарисуйте другой прямоугольник со скругленными углами: он будет выполнять роль «кнопки» на Вашей веб - странице. К этому прямоугольнику добавьте такие Layer Style «Стили слоя» , как: наложение градиента и обводку серого цвета. Эти Layer Style «Стили слоя» мы добавляем для того, чтобы наша «кнопка» выглядела эффектно и стилизованно.
Шаг 23. Напишите на «кнопке» необходимый Вам текст (метку), который будет подсказывать пользователям, каким образом можно дальше продолжать просматривать через веб - страницу очередные проекты.
Шаг 24. Обозначьте конец содержимого на экране областью нижнего колонтитула. Это сделайте при помощи новой прямоугольной области, которую создайте на новом слое и залейте светло-серым цветом.
Шаг 25. Инструментом Elliptical Marquee Tool «Овальное выделение» на новом слое нарисуйте длинный и узкий эллипс и заполните это выделение радиальной градиентной заливкой цветом от черного к прозрачному. При активном слое с нарисованным эллипсом, нажмите комбинацию клавиш < Ctrl+ T> , либо: Edit> Transform> Scale (Редактирование - Трансформирование - Масштабирование ) для того, чтобы созданный эллипс масштабировать в длинный и тонкий эллипс, похожий на тень.
Шаг 26. Разместите эллипс - тень на экране по центру, затем удалите лишнюю область выше нижнего колонтитула. В результате, у Вас должна получиться тонкая тень, которая добавит небольшой объем деталям.
Шаг
27.
Область нижнего колонтитула содержит достаточно свободного места для размещения вторичных элементов страницы. Одним из таких элементов может стать «Область клиентского логина»
. Для того,чтобы создать данную область, активизируйте инструмент Type
«Текст»
, создайте два (или несколько) текстовых рамок, внутри которых и разместите Ваш текст: логин; пароль.
Созданным текстовым рамкам можно придать небольшую мягкую тень, используя функцию: Layer Style
«Стили слоя»
.
Шаг 28. Используйте центральную область нижнего колонтитула для того, чтобы разместить информацию о компании. Создайте текст, используя легко читаемый шрифт.
Шаг 29. Теперь, добавьте контактную информацию крупным читаемым шрифтом.
Шаг 30. В итоге, после всей проделанной работы, у нас получилась интересная веб - страничка. Все элементы четко расположены на странице, все удобочитаемо и красиво!
Создание макета веб страницы служит для упорядочивания элементов на сайте. Чтобы текст, картинки, видео размещались на сайте красиво и аккуратно, необходимо создать структуру страницы.
Для этого вначале рисуется таблица, а в ней ячейки. Таблица, разбитая на ячейки, позволяет четко задавать положение каждого элемента сайта.
Рисуем макетную таблицу
1 . На панели инструментов программы frontpage жмем " Таблица" и выбираем " Макетные таблицы и ячейки"
Как создать макет веб страницы в программе frontpage
2. Справа появится инструментальная панель. Нажимаем кнопку " Нарисовать макетную таблицу" . Курсор станет в виде карандаша. Теперь рисуем произвольный прямоугольник. Далее на панели справа задаем размеры: Ширина - 850, Высота - 150, Выравнивание - посередине.
Наша первая таблица готова! Здесь будет располагаться шапка сайта. Теперь нам надо нарисовать вторую таблицу под тело сайта. В ней будет располагаться основная информация сайта.
3. Для этого проделайте точно такие же действия, как для рисования первой таблицы. Не забудьте СОХРАНИТЬ! В результате у Вас должно получиться две одинаковые таблицы:
Рисуем макетные ячейки для веб страницы
Теперь в верхнюю таблицу вставим ячейку и напишем название нашего сайта.
4 . Для этого выделяем таблицу № 1. Чтобы понять, что таблица выделилась, ее границы должны стать зелеными, в углах должны появиться маркеры, а по бокам цифры с размерами таблицы.
Рисуем в программе Frontpage ячейки в таблицах
5. На панели инструментов справа нажимаем кнопку " Нарисовать макетную ячейку" . Курсор станет в виде карандаша. Ставим его в угол таблицы и рисуем прямоугольник точно таких же размеров , как и таблица. Обратите внимание, что в отличии от таблицы, границы ячейки выделяются синим цветом .
Создание макета веб-страницы - рисуем ячейку в программе Frontpage
После того, как Вы нарисовали ячейку для верхней таблицы, проделайте такие же действия и нарисуйте ячейку для таблицы №2 . В ней будет располагаться тело нашего сайта. Не забудьте сохранить!
После того, как Вы в программе Frontpage создали макет веб страницы , переходим к следующему шагу по созданию сайта. Это создание шапки для сайта.
В этом подразделе описаны популярные макеты сайтов, которые чаще всего используются в верстке, а также несколько приемов, придающих им более привлекательный вид. Макеты сделаны с помощью , поэтому от вас потребуется знание этих языков, чтобы в полной мере понимать принцип верстки. Если же вы их знаете, то значит вам известно, что в HTML и CSS одного и того же результата можно добиться совершенно разными путями. Здесь показаны только некоторые возможные способы.
Макеты делятся на три основных типа:
- Фиксированные - это макеты с фиксированной шириной (CSS ), оптимизированной под размер большинства современных мониторов пользователей или с «плавающей» шириной, которая имеет ограничения по максимальной (CSS ) и минимальной (CSS ) ширине страницы. Обычно содержимое в таких случаях располагается по центру, однако некоторые вебмастеры предпочитают прижимать страницы сайтов к одной из сторон окна браузера.
- Резиновые - макеты, которые имеют изменяемые размеры, подстраиваясь под окно браузера и занимая всю его доступную ширину. Однако им, как и фиксированным, также часто дополнительно задают максимальную и/или минимальную ширину. Одним из вариантов для достижения этого эффекта может быть обрамление блоков HTML-страницы в дополнительный оберточный блок (если он еще отсутствует в макете), на манер фиксированных макетов, к которому затем и применяются свойства регулировки ширины. Это необходимо, чтобы при уменьшении окна браузера колонки не накладывались друг на друга или не сползали вниз.
- С контентом впереди - это резиновые или фиксированные макеты, у которых колонка с основным содержимым страницы (контентом) идет выше в HTML-коде, чем большинство других элементов. Это делается для того, чтобы в браузерах с отключенным CSS пользователи могли видеть сначала то, за чем пришли, а уже потом навигацию и остальные второстепенные элементы HTML-страницы. Однако верстка подобных макетов несколько сложнее в реализации и требует от верстальщика определенного уровня навыков и знаний, необходимых для одинакового отображения сайта в разных браузерах.
Кроме колонок в макетах присутствует верхняя часть (хедер) и нижняя (футер), так как они уже давно являются привычной и неотъемлемой частью практически всех сайтов в интернете. По этой же причине здесь вы найдете примеры, позволяющие прижать футер к низу страницы и сделать колонки одинаковой высоты .
Обратите внимание, что практически во всех макетах вы можете поменять некоторые колонки местами, не изменяя HTML-код страниц. Поэтому, во-первых, на основе этих макетов вы можете создать какие-то свои варианты, а во-вторых, если получится так, что вы уже
