Урок 11. Установка логотипа через CSS
Добавим несколько полезных вещей, с помощью которых можно облегчить себе жизнь, работая над сайтом. Прежде всего, решим вопрос установки логотипа через документ стилей CSS, который мы уже прописывали, говоря о ссылках, заголовках и тексте.
Для того, чтобы установить логотип через CSS, а не устанавливать его на каждой странице сайта вручную, нужно прописать этот самый логотип в нашем документе CSS. Делаем это так:
Открываем наш документ CSS и вписываем в него такую строчку:
div#logo < width:599; height:98px; background:url('http://dugward.ru/LM311.jpg'); top left no-repeat;>
— «div» -, как вы уже знаете, коробочный тег, который отграничивает элемент от соседних;
— слово «logo» — это собственное наименование нашей картинки логотипа.
— атрибуты «width:599; height:98px;» — это, как вы уже знаете, ширина и высота картинки (в данном случае, ширина и высота логотипа, который мы устанавливали в соответствующем уроке);
— «background:url(‘http://dugward.ru/LM311.jpg’);» — адрес картинки, который записывается именно таким образом (никаких вариаций не допускается, одинарные кавычки должны быть на своих местах);
— «top left no-repeat;» — картинка будет стоять слева, не размножаться.
Вы можете задать свои параметры для изображения и установить его справа, либо по центру. Так, как нужно вам.
Далее, в html-код вашей страницы, в то место, на котором вы намерены установить картинку, вместо адреса картинки вы вписываете такой тег, адресующий к вашему документу CSS:
Если мы разместим в нашем документе этот фрагмент, то код страницы будет выглядеть так:
Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине.Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине.
Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. А здесь вы поставите свои баннеры, если захотите
Красным зачёркнутым я обозначила тот фрагмент, который вы убираете и на его место ставите новый фрагмент, который выделен синим цветом.
В готовом виде ничего не изменится, ваш логотип будет стоять там же. где ему и положено стоять на странице.
Таким образом можно вставлять картинки в любое место страницы вашего сайта. Вы задаёте картинке название и прописываете её в документа стилей CSS, а потом вставляете соответствующий фрагмент в страницу сайта. Например, вы ставите картинку под названием «sw». В документе CSS это будет выглядеть так:
Зачем это нужно? Какая разница, ствить на страницу Но представьте: вы создали в фотошопе новый, более красивый логотип и хотите поставить его на сайт. А у вас на сайте 20, 40, 80 или более страниц. Поменять логотип вручную на каждой из ста страниц. На это же уйдёт уйма времени!
А так — вам достаточно поменять картинку в CSS и она автоматически поменяется на всех страницах.
Примечание: Помните, что стили CSS не допускают неточностей, документ стилей гораздо более «капризный», чем html. Поэтому старайтесь не допускать никаких собственных интерпретаций и если у вас что-то не пошло, внимательно посмотрите, не пропустили ли вы где-нибудь непарную кавычку, или поставили вместо непарной кавычки — парную.
Так же помните, что классы рисунков обозначаются только словами, а не цифрами, как в случае с заголовками. Нужно писать наименование класса прописываемого в CSS рисунка «logo» или «sw», или «net», а не «1», «2», или «3».
Урок окончен.
Техника позиционирования логотипа внутри шапки сайта (header).
На многих сайтах уже принято, как стандарт, в шапке сайта размещать логотип, который является ссылкой на главную страницу.
Как правило, такой логотип размещается с левой стороны и рядом с ним находится меню сайта.
В этому уроке хочу рассмотреть технику верстки, которая позволяет добиться такого эффекта.
На самом деле, ничего сложного здесь нет.
Для примера, давайте возьмем следующую структуру документа:
Заголовок.
ПLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
Если мы просто вставим логотип внутрь header, без всяких стилей:
То, можно будет увидеть следующую картину:
Место для меню сместилось на уровень ниже и теперь отображается не правильно.
Чтобы избежать этой ситуации, к логотипу нужно добавить следующие стили CSS.
Для ссылки, которая содержит логотип мы используем обтекание слева float:left, и с помощью margin-ов задаем точную позицию логотипа.
Теперь все отображается так, как надо:
Больше моих уроков по HTML, CSS и верстке сайтов здесь.
Как установить кликабельный логотип в шапку
Логотип это стилизованное изображение, несущее в себе информацию о компании, группе, сообществе и т.п. Часто логотип выполнен в стиле минимализма с целью лучшего восприятия и запоминаемости. Одной из основных задач логотипа является указание на род деятельности владельца и визуальная идентификация принадлежности. Кроме изображения в логотипе может присутствовать наименование или же часть наименования владельца. Разработка логотипа достаточно сложный процесс и желательно заказывать создание у специалистов. Но сегодня не об этом, это лишь вступление.
Сайты в интернете не исключение и практически всегда имеют свой собственный логотип, который принято размещать в headere (шапке) страницы. Логотип практически всегда делают кликабельным, и как правило ссылка с лого ведет на главную страницу проекта. Вот именно размещением логотипа ссылкой в шапке, мы и будем сегодня заниматься.
Для начала необходимо подготовить изображение логотипа, желательно в формате .PNG, который поддерживает прозрачности и полупрозрачности. Я подготовил для этого урока простое несложное изображение, которое использую для установки в шапке шаблона одного из сайтов созданных на okis.ru. Выглядит моя заготовка вот так:
У заготовки нет фона и она имеет размеры 350 пикс. на 100 пикс. В вашем случае размеры будут вероятнее всего другие.
Итак для того что бы установить логотип в шапку нужно с помощью html привязать к изображению ссылку, добавить описание для поисковых систем и пользователей у которых отключен просмотр изображений на сайтах и назначить при необходимости атрибуты ссылки. Кажется сложным? Не беда, ведь у вас под рукой визуальный редактор с помощью которого можно сделать все это быстро.
- Загрузите изображение через «Загрузку файлов» и скопируйте ссылку
- Начните создание страницы (никакие поля заполнять не нужно)
- Вставьте изображение на страницу с помощью «Добавить/Изменить изображение, не забыв прописать описание.
- С помощью кнопки «Добавить/Изменить ссылку» привяжите к картинке ссылку.
- Отключите визуальный редактор и скопируйте готовый html код.
- Просто уйдите со страницы не закрепляя результат.
Полученный код выглядит вот так:
Можете просто скопировать его и заменить ссылки и значения на свои.
Далее перейдите на вкладку размещения рекламы и вставьте код логотипа во второе поле, (Нижеследующий код будет отображаться под меню сайта), нажмите кнопку «Обновить» что бы закрепить результат. Перейдите на сайт и посмотрите результат. Изображение логотипа будет кликабельно и расположено под меню. Остается изменить положение логотипа что бы установить его ссылкой в шапке.
Для этого вставленный ранее код нужно заключить в DIV контейнер и присвоить ему идентификатор. 🙂 Пожалуй проще будет показать чем объяснить. Результат:
Итак div имеется и нужно с помощью css указать ему положение на странице. Для этого в редактор css добавляем следующий код:
Свойство position указывает на то как элемент будет расположен на странице. В нашем случае элемент будет абсолютно позиционирован, и остальные элементы не будут взаимодействовать с ним.
Закрепите изменения кнопкой «Обновить» css редактора и перейдите на сайт посмотреть результат. Если вы все сделали правильно, логотип сместится вверх и немного вправо.
Собственно цель достигнута, и мой логотип на месте. Скорее всего у вас другой шаблон и вам нужно поэкспериментировать со значениями что бы поставить логотип со ссылкой на место.
Спасибо за внимание, если все таки что то не понятно спрашивайте в комментариях. Обязательно постараюсь ответить.
Как вставить логотип на шапку сайта?
Результат
Отслеживать
задан 11 ноя 2016 в 9:40
652 1 1 золотой знак 7 7 серебряных знаков 21 21 бронзовый знак
А где у вас 1) таки расположена, по вашему мнению шапка и 2)какое из изображений логотип?
11 ноя 2016 в 9:47
Может вы имеете ввиду иконку в title слева?
11 ноя 2016 в 9:48
Они должны быть размещены на шапке. Отступы уже сделаны, нужно просто наложить их на картинку
11 ноя 2016 в 9:48
Установите style=position:absolute;left:0px;top;0px; на картинке логотипа и располагайтесь left top как вам нравится
11 ноя 2016 в 9:50
Это для шапки установить такие значения?
11 ноя 2016 в 9:52
3 ответа 3
Сортировка: Сброс на вариант по умолчанию
Мне кажется, что так будет проще:
#header < background: url(img/header.jpg) no-repeat; >
Отслеживать
15.9k 8 8 золотых знаков 52 52 серебряных знака 100 100 бронзовых знаков
ответ дан 30 дек 2016 в 10:25
129 6 6 бронзовых знаков
если по быстрому то
но это большое зло так делать нельзя нужно не картинки использовать а background
Отслеживать
ответ дан 11 ноя 2016 в 19:01
Artem Molotko Artem Molotko
82 4 4 бронзовых знака
так ответь как надо, а не показывай костыли!
11 ноя 2016 в 19:04
Нужно изменить порядок блоков
Отслеживать
ответ дан 9 мар 2017 в 8:24
Sergey Vikhristyuk Sergey Vikhristyuk
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.1.3.2953
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.