Создание двух страниц в html, улучшения дизайна с помощью фонового изображения и галереи

Продолжаем наше обучение верстки, в сегодняшнем уроке мы научимся вставлять фотографии, в страницу придавая им человеческий красивый вид, создавать фотогаллерею, придадим внешний вид нашей прошлой странице созданной в уроке 4, изменим фоновое изображение в css.

 

Также в конце нашего урока я прикреплю архив со страницами, мы создадим 2 страницы: первую уже создали в прошлом уроке, а вторую создадим с фотогаллерей.
Для начала под редактируем нашу первую страницу вставим фотографию, изменим фоновое изображение страницы.
Допустим мы хотим поместить фотографию в первый абзац, после закрытого тега h1 пишем вот такое правило:
<img src=»images/dandelion.jpg» alt=»Название фото» width=»200″ height=»200″> все эти значения нам уже известны из нашего словаря css, разбирать их не будем. К нашей внутренней таблице стилей css дописываем еще один класс:
img.foto {
float: left;
margin-right: 10px;
margin-bottom: 5px;
border: 1px solid #666;
padding: 8px;
}

Выравнивание по левому краю от текста, 10 пикселов отступа от фотографии к тексту, снизу 5 пикселов, рамка в 1 пиксель, внутренние отступы рамки от фотографии 8 пикселов.
Сохраняем и смотрим, что у нас получилось.
Теперь кардинально изменим наш дизайн в лучшую сторону. Сделаем фон немного другим, с плавным переходом сверху вниз, добавим фоновое изображение. Я нашел интересное фото, такой эффект как будто нашу страницу держит рука, должно получится оригинально.

К тегу html дописываем вот такие правила
background-image: url(images/bg_page.png);
background-repeat:repeat-x;

Добавляем фоновое изображение на всю страницу и повторяем его по горизонтали вниз.
Идем дальше, удаляем наш баннер, полностью весь тег div с баннером, и в тег body вставляем следующие строки:
background-image: url(images/bg_main.jpg);
background-position: top left;
background-repeat: no-repeat;

В нашей области контента появляется новое фоновое изображение, вверху слева, без повторений. В этом же свойстве сделаем рамку в 1 пиксель и цвет черный.
Так получилось, что у нас заголовок заезжает на наше изображение, мы его немного подвинем вниз, в теге h1 в свойстве margin ставим первое значение примерно 160 пикселов.
Сохраняем и смотрим, что у нас получилось.
Отлично! Идем дальше.
Теперь создадим галерею для фотографий и немного оформим их покрасившей, это будет у нас вторая страница, получается у нас есть свой мини сайт из html.
Создадим новый документ html, как создавать страницы html мы уже рассматривали, не будем на этом зацикливаться.
Страницу внешне оформлять я не стал, у нас задача сделать фотогаллерею сделаем на нее основной акцент. После создания страницы и оформления ее более менее в человеческий вид, в прошлом уроке мы делали страницу приятной для восприятия, также ее можно и оформить.

Все изображения заключим в тег-контейнер div с идентификатором gallery.
Каждое изображение заключаем в тег div должно получится вот так:
<div>
<div> <img src=»images/carpet.jpg» alt=»Carpet Grass» width=»200″ height=»200″ /></div>
<p>Подпись 1: любой текст </p>
</div>

Прописываем первому тегу div класс fiqure, второму тегу div класс photo, в который заключено наше изображение.
.photo img {
border: 1px solid #666;
background-color: #FFF;
padding: 4px;
position: relative;
top: -5px;
left: -5px;
}
.figure p {
font: 1.1em/normal Arial, Helvetica, sans-serif;
text-align: center;
margin: 10px 0 0 0;
height: 5em;
}

Эти два стиля добавляют границы-рамки ко всем изображениям галереи и устанавливают шрифт, выравнивание и поля для подписей изображений. Отрицательные значения смещают фотографию вверх и влево на 5 пикселов, это нужно для фонового изображения.
Теперь сделаем расположение фотографий на странице:
.figure {
display: inline-block;
vertical-align: top;
width: 210px;
margin: 0 10px 10px 10px;
}

Каждая пара изображений будет обрабатываться как блок (имеющая высоту и ширину), а также в качестве встроенного элемента (поэтому блоки смогут располагаться бок о бок). Используя свойство vertical-align: top будет выровнять рисунок вертикально.
Теперь сохраняем и смотрим, что у нас получилось.
Добавим фоновое изображение к нашему рисунку, прописываем новый класс:
.photo {
background: url(drop_shadow.gif) right bottom no-repeat;
}

Добавляется фоновое изображение к галереи, помните, где мы прописали отрицательные значения, теперь нашу тень видно отлично и делать с ней ничего не надо.
Заключительные штрихи, внизу первой страницы создадим ссылку на вторую, пишем, тег <a href=»gal.html»>фотогаллерея > и закрываем соответственно его.
В следующем уроке мы рассмотрим навигацию по сайту, создадим красивое меню и прикрутим его к нашим страницам.
Во всех этих уроках мы проходим тока базовые навыки верстальщика. Можно сказать это самые азы верстальщика, но с ними можно создать неплохой дизайн, если у Вас есть желание и фантазия.

About: neadmin


Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Перейти к верхней панели