Поддержка сайта

Высокие позиции в поисковой системе, на прямую зависят от развития вашего сайта.

Продвижение сайтов

Эффективность стратегий продвижения подтверждается сотрудничеством с крупными клиентами и отзывами о нашей работе.

Создание сайтов

Мы делаем сайты быстро, недорого и профессионально. От работы с нами, у вас останутся только положительные эмоции.

Именование изображений

.

Возьмите любую газету, пролистайте ее, и вы убедитесь, что все фотографии там снабжены подписями. Это стандартная практика, и сейчас я собираюсь показать вам, как можно добавить подписи к изображениям на нашем сайте. Сначала подумаем, какая информация должна появиться под фотографиями. Наверное, это должно быть описание снимка, включающее место съемки и имя фотографа. Все эти элементы нужно единообразно отформатировать, для чего я собираюсь использовать два новых стиля.

1. В файле gallery. html удалите открывающий и закрывающий теги абзацев, которые заключают в себя картинку черепахи, и замените их тегами div class=galleryphoto и /div.

2. Затем добавьте абзац после изображения (внутри контейнера div).

3. Добавьте элемент span вокруг имени фотографа, чтобы оформить его отдельно.

4. Сохраните файл gallery. html и проверьте результат в браузере. Страница должна быть такой, как показано на рис. 5.11. Вы можете не увидеть особых перемен в стиле, но важно посмотреть на страницу, чтобы оценить изменения. Вы поймете, почему я рекомендовал их.

Рис. 5.11. У снимка появилась подпись, но она еще не оформлена

Общее правило для подписей картинок — их шрифт должен отличаться от основного текста документа. Это касается в том числе насыщенности и размера шрифта. Кроме того, пространство между текстом и фотографией слишком велико, и я сейчас покажу вам, как исправить это с помощью свойства margin. И наконец, я собираюсь немного изменить фон подписи, что поможет нам, когда придет время добавить больше фотографий в галерею.

1. Откройте файл stylе.ess и добавьте следующее правило.

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

2. Теперь добавьте новое правило для класса photocredit.

Это правило применится лишь к тексту, находящемуся внутри элемента span.

3. Сохраните CSS-файл, обновите страницу еще раз и полюбуйтесь на свою работу. Страница должна выглядеть, как показано на рис. 5.12.

Рис. 5.12. Подпись — теперь в новом стиле

Сейчас вспомним о том, что наша прекрасная белая рамка для фотографий галереи применяется ко всем изображениям на сайте. Эту проблему очень легко решить. Тег img для снимков галереи сейчас размещается внутри элемента div, у которого есть класс galleryphoto.

Можно использовать это имя класса в селекторе правила, которое применяется к рамке:

chapter5\websitefiles\05_styledcaptionAstylel.ess (фрагмент)

.galleryphoto

img {

border: 15px solid white;

}

Если вы внесете это изменение в разметку, то белой рамкой будут обведены только фотографии галереи. Проблема решена! Разве CSS не удивительная штука?

В заключение добавим несколько стилевых объявлений в правило . galleryphoto. Внесем изменения в код элемента div, который содержит изображения и подписи к ним.

Этот класс поможет нам отделить друг от друга много разных фотографий, которые будут загружены на страницу.

1. Добавьте следующий код в файл stylel. ess.

2. Сохраните файл и обновите страницу в браузере. Она должна выглядеть, как показано на рис. 5.13.

Рис. 5.13. Отдельный элемент создает разделительную черту между фотографиями



.

Читайте так же:
Not found