Создание простейшего макета. HTML Макеты Разметка подвала страницы
С чего обычно начинается процесс верстки? Начинается он с изучения макета или макетов будущего сайта. Чаще всего эти макеты создаются в программе 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 , и записываем в нем первоначальный код:
Simple text
Теперь между тегами создайте блок при помощи тега :
Simple text
Тег является универсальным блочным элементом, и задает на веб-странице блок.
Пропишем в этом блоке элементы, которые присутствуют на макете, а именно заголовок и абзацы:
Simple text
Самостоятельно добавьте текст между этими тегами.
Теперь в контейнере пропишите путь к файлу со стилями:
Стилизация веб-страницы
Если вы откроете 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: 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-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Мы уже можем сделать простенький сайт, применив HTML+CSS.
В этой статье я представлю Вам код блочного шаблона сайта, и подробно расскажу, и покажу, что и как в нём изменить, чтоб сделать из него свой сайт, и выложить его в интернет.
Итак, давайте посмотрим, как выглядит код (и что в нём можно менять), такого вот сайта.
Тему грузоперевозок я взял для примера потому, что чаще всего именно люди работающие в этой сфере, обращаются ко мне за помощью.
Но Вы, прочитав статью, сможете сделать всё по своей тематике, и со своей конструкцией каркаса сайта.
Времени это займёт столько, сколько потребуется на внимательное прочтение статьи, и материалов по ссылкам, и последовательное выполнение моих инструкций.
Код блочного сайта
/* Стилевое оформление */
body
{
background
:#c0c0c0
; /* Меняется фон экрана, выбирается */
}
#wrapper
{ /* Оболочка страницы сайта */
width
: 900px
; /* Меняется ширина страницы */
margin
: 0 auto
;
background
:#f2e8c9
; /* Меняется задний фон страницы */
}
/* Шапка сайта */
#header
{
position
:relative
; /* Задаём блоку относительное позиционирование для того, чтобы затем размещать, в нём другие элементы и позиционировать относительно его границ поверх фоновой картинки и заголовка */
height
: 250px
; /* Высота шапки */
background-color
: #ffffff
; /* Фон шапки */
margin-bottom
: 5px
; /* Нижний отступ шапки от остального контента */
border-radius
: 5px
; /* Закругляются углы блока */
box-shadow
: rgba(0,0,0,0.5) 0px 1px 3px
; /* Тень. Визуально приподнимает блок над оболочкой */
}
img
{ /* Фоновая картинка в шапке */
float
: left
; /* Разрешаем наплывание других элементов на картинку */
margin
: -40px 0 0 0
;} /* Размещаем картинку в блоке header. 1-я и 3-я цифры - двигаем вверх-вниз, 2-я и 4-я цифры - двигаем вправо-влево */
h1
{ /* Заголовок сайта */
margin
:0 0 10px 40px
; /* Заголовок двигается верх-вправо-вниз-влево. */
color
:#464451
; /* Цвет заголовка */
}
.nomer
{ /*Подзаголовок (номер телефона)*/
position
:absolute
; /* Позиционируем абсолютно подзаголовок, относительно границ блока header. Также можно разместить в шапке сайта ещё другие картинки и абзацы поверх фоновой картинки и заголовка */
top
:5px
; /* Двигается вверх-вниз */
left
:680px
; /* Двигается вправо-влево */
font-size
: 25px
; /* Размер букв подзаголовка */
font-style
:italic
; /* Курсив */
font-weight
:bold
; /* Жирный */
color
:#464451
; /* Цвет букв подзаголовка */
}
/* Сайдбар (колонка справа) */
#sidebar
{ /* Блок сайдбара */
background-color
: #ffffff; /* Фон блока */
width
: 180px; /* Ширина блока */
padding
: 10px; /* Отступ текста от краёв */
float
: right; /* Размещаем блок справа от других элементов, наплывание или обтекание справа). Если делать сайдбар слева, то значение right меняем на left */
border-radius
: 5px
; /* Закругляем углы блока */
box-shadow
: rgba(0,0,0,0.5) 0px 1px 3px
; /* Задаём блоку тень */
}
.marcer
{ /* Галочки маркеры меню */
float
: left
; /* Размещаем слева от текста */
margin
: 5px 5px 0 0
; /* Двигаются вверх-вправо-вниз-влево */
}
/* Контент (статья) */
#content
{ /* Блок контента */
margin-bottom
: 5px
; /* Отступ блока статьи от блока подвала */
width
: 676px
; /* Ширина статьи */
padding
: 10px
; /* Отступ текста от краёв блока */
background
: #ffffff
; /* Фон статьи */
border-radius
: 5px
;
box-shadow
: rgba(0,0,0,0.5) 0px 1px 3px
;
}
.left
{ /* Картинка в тексте слева */
float
: left
;
margin
: 30px 7px 7px 7px
;
}
.right
{ /* Картинка в тексте справа */
float
: right
;
margin
: 7px 0 7px 7px
;
}
/* Подвал */
#footer
{ /* Блок подвала */
height:80px; /* Высота блока подвала */
background-color
: #ffffff
; /* Фон блока подвала */
margin-bottom
: 10px
; /* Отступ снизу */
border-radius
: 5px
; /* Закруглённые углы */
box-shadow
: rgba(0,0,0,0.5) 0px 1px 3px
; /* Тень блока */
}
.clear
{ /* Запрет наплывания. Устанавливается для того, чтобы блок контента, при заполнении текстом и изображениями не наплывал на подвал */
clear
: both
;
}
.fon
{ /* Номер телефона */
float
:left
; /* Разрешаем другим элементам обтекать абзац справа */
margin
:20px 0 0 20px
;
}
.fax
{ /* Номер факса */
float
:left
;
margin
:20px 0 0 60px
;
}
.mail
{ /* Адрес E-mail */
float
:left
;
margin
:20px 0 0 60px
;
}
Грузоперевозки
234-49-50
+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 ">
Наша работа
Здравствуйте уважаемые будущие веб-мастера!
Мне 55 лет и я рад приветствовать Вас на своём сайте.
Этот сайт первый, который я разработал самостоятельно,
а до этого умел только входить в интернет.
Почему я решил его сделать?
За те 3 месяца, пока
разбирался в сайтостроении и создавал этот ресурс
обнаружилось, что авторы руководств по созданию
сайтов считают многие нюансы само собой разумеющимися
и не обращают на них внимание.
А мне, учитывая
возраст и «опыт», было не просто понять как раз эти
нюансы, они отнимали больше всего времени. И я решил
написать свой материал, так что-бы другим было легче
сориентироваться в потоке новой информации.
http://trueimages.ru/img/0d/64/07a18f15.png ">
Здесь
«разжеваны» все мелочи сопровождающие создание сайта,
мимо которых обычно проскакивают другие авторы.
Если вам что-то будет непонятно, спрашивайте, для
меня нет «глупых» вопросов.
Читайе и создавайте свой сайт самостоятельно, каким
бы ни был Ваш возраст и стаж работы на компьютере.
Уверен, у Вас получится еще лучше и уж точно, в
несколько раз быстрее, чем у меня.
Телефон:
265-48-76
Факс:
265-85-97
E-mail
[email protected]
Это код статичного сайта, а это значит, что на экранах с разным расширением, он будет оставаться в неизменных размерах.
То есть на мобилах у него появится полоса горизонтальной прокрутки, которой придётся пользоваться, чтоб просмотреть сайт целиком.
А теперь вернёмся к нашему коду.
Прежде чем начать работать с кодом, нужно создать место где будет располагаться сайт до вывода его в интернет.
Для редактирования этого кода, потребуется 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.
Делается это следующим образом: в теге , можно между тегами и , вставляется тег , с атрибутами определяющими местоположение и назначение css.
После тега , подключим стили, оформляющие картинки расположенные в тексте статьи. (строки 81 — 88). Убираем мою нумерацию и комментарии, так как в файле html комментарии css не работают, и даже наоборот, могут всё испортить.