Изображение в качестве ссылки

Кроме текста, в качестве ссылок можно использовать и рисунки. Изображение в этом случае надо поместить между тегами и , как показано в примере 1.

Пример 1. Создание рисунка-ссылки

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

Чтобы убрать рамку, следует у тега установить атрибут border=»0″ (пример 2).

Пример 2. Удаление рамки вокруг изображения

Можно также воспользоваться CSS, чтобы убрать рамку для всех изображений, которые являются ссылками. Для этого применяется стилевое свойство border cо значением none (пример 3).

Пример 3. Использование CSS

     A IMG  

Конструкция A IMG определяет контекст применения стилей — только для тега , который находится внутри контейнера . Поэтому изображения в дальнейшем можно использовать как обычно.

Логотип и ссылки в строку

Хочу чтобы логотип и ссылки были в одну строку. Я хочу это сделать с помощью флексов или гридов. как это сделать на моем примере?

html,body < min-height: 5026px; padding: 0; margin: 0; >*, *::before, *::after < box-sizing: border-box; >.container < width: 1060px; margin: 0 auto; >header < >nav li < >nav ul < margin: 0; list-style: none; padding: 0; display: flex; justify-content: flex-end; >.main-navigation a < font-family: 'Playfair Display', serif; text-transform: uppercase; color: #626262; text-decoration: none; font-size: 14px; padding-right: 20px; >#logo

minimø

как должно выглядеть флоаты и инлайн блоки больше не юзаю

Отслеживать

задан 14 апр 2019 в 16:30

183 1 1 серебряный знак 12 12 бронзовых знаков

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

li < list-style: none; >header < position: absolute; height: 15vh; z-index: 10; display: flex; justify-content: space-between; align-items: center; width: 80vw; left: 10%; background-color: #00a550; >nav.hMenu < display: flex; justify-content: center; >nav.hMenu a < padding: 7px 1vw; font-size: 16px; color: #fff; >nav.hMenu a:hover < box-shadow: 0 0 0 1px #fff; border-radius: 15px; >span.logo

Отслеживать

ответ дан 14 апр 2019 в 18:31

53 6 6 бронзовых знаков

Прокачав свои скилы решил ответить на свой вопрос сам.

.container < display: flex; justify-content: space-evenly; align-items: center; >.logo < display: flex; align-items: center; >.menu < display: flex; padding: 0; >li

Logo

  
home
  
about
  
contact
  
Call

Как установить кликабельный логотип в шапку

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

Сайты в интернете не исключение и практически всегда имеют свой собственный логотип, который принято размещать в headere (шапке) страницы. Логотип практически всегда делают кликабельным, и как правило ссылка с лого ведет на главную страницу проекта. Вот именно размещением логотипа ссылкой в шапке, мы и будем сегодня заниматься.

Для начала необходимо подготовить изображение логотипа, желательно в формате .PNG, который поддерживает прозрачности и полупрозрачности. Я подготовил для этого урока простое несложное изображение, которое использую для установки в шапке шаблона одного из сайтов созданных на okis.ru. Выглядит моя заготовка вот так:

У заготовки нет фона и она имеет размеры 350 пикс. на 100 пикс. В вашем случае размеры будут вероятнее всего другие.

Итак для того что бы установить логотип в шапку нужно с помощью html привязать к изображению ссылку, добавить описание для поисковых систем и пользователей у которых отключен просмотр изображений на сайтах и назначить при необходимости атрибуты ссылки. Кажется сложным? Не беда, ведь у вас под рукой визуальный редактор с помощью которого можно сделать все это быстро.

1. Загрузите изображение через «Загрузку файлов» и скопируйте ссылку
2. Начните создание страницы (никакие поля заполнять не нужно)
3. Вставьте изображение на страницу с помощью «Добавить/Изменить изображение, не забыв прописать описание.
4. С помощью кнопки «Добавить/Изменить ссылку» привяжите к картинке ссылку.
5. Отключите визуальный редактор и скопируйте готовый html код.
6. Просто уйдите со страницы не закрепляя результат.

Полученный код выглядит вот так:

Можете просто скопировать его и заменить ссылки и значения на свои.

Далее перейдите на вкладку размещения рекламы и вставьте код логотипа во второе поле, (Нижеследующий код будет отображаться под меню сайта), нажмите кнопку «Обновить» что бы закрепить результат. Перейдите на сайт и посмотрите результат. Изображение логотипа будет кликабельно и расположено под меню. Остается изменить положение логотипа что бы установить его ссылкой в шапке.

Для этого вставленный ранее код нужно заключить в DIV контейнер и присвоить ему идентификатор. 🙂 Пожалуй проще будет показать чем объяснить. Результат:

Итак div имеется и нужно с помощью css указать ему положение на странице. Для этого в редактор css добавляем следующий код:

Свойство position указывает на то как элемент будет расположен на странице. В нашем случае элемент будет абсолютно позиционирован, и остальные элементы не будут взаимодействовать с ним.

Закрепите изменения кнопкой «Обновить» css редактора и перейдите на сайт посмотреть результат. Если вы все сделали правильно, логотип сместится вверх и немного вправо.

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

Спасибо за внимание, если все таки что то не понятно спрашивайте в комментариях. Обязательно постараюсь ответить.

Лучшие практики: как возвращать пользователя на главную

Коротко: Логотипа, обернутого в ссылку на главную страницу сайта, не достаточно. Дизайн и расположение логотипа, так же, как и наличие текстовой ссылки на главную, улучшают навигацию по сайту.

Прямая во всех смыслах ссылка на главную страницу является обязательной для любого веб-сайта. Вот несколько причин для этого:

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

Как представить ссылку на главную страницу

Существует два способа размещения ссылки на главную: неявный, при помощи логотипа, и явный, при помощи текстовой ссылки «Домой» или «Главная». Вы должны использовать оба этих типа. Ниже вы найдете рекомендации по их уместному применению.

Неявные ссылки

1. Логотип на сайте должен вести на главную.

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

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

2. Стандартное расположение логотипа: верхний левый угол.

Такое расположение наиболее привычно пользователю, и именно туда смотрит посетитель сайта в поисках логотипа. Ожидание увидеть логотип именно в этом месте настолько сильное, что нарушение этого паттерна может нанести значительный вред.

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

3. Логотип должен визуально отличаться от остального текста на странице

Если логотип выглядит как пункт меню или как остальные заголовки на странице, то это затрудняет ориентирование пользователя. Помогите посетителям проще находить логотип, визуально отделив его от остального контента страницы.

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

Явные ссылки

1. Разместите в меню ссылку «Главная»

Для уменьшения ошибок в попытке перейти на главную предоставляйте пользователю как интерактивный логотип, так и текстовую ссылку. Текстовая ссылка может быть расположена в основном меню сайта или в хлебных крошках. Расположение текстовой ссылки слева вверху (над контентом) облегчит ее поиски. Размещение ссылки где-то в другом месте приведет к тому, что пользователь ее потеряет, особенно если ваш сайт визуально перегружен.

2. Начинайте хлебные крошки с главной

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

3. Если на сайте есть хлебные крошки, не показывайте «Главную» в основном меню

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

4. Не показывайте активную ссылку «Главная» на главной

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

5. Четко поделите ссылку на главную страницу подсайта и ссылку на главную страницу основного сайта

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

В большинстве случаев помогает создание различных ярлыков для разных главных (основного сайта и подсайта). Как и в случаях с прочими ссылками, дайте пользователю столько информации, чтобы он не, сомневался на какую ссылку ему нажимать. В некоторых случаях части URL будет достаточно (например, “site.com”). В то время, как в других ситуациях может потребоваться дополнительное пояснение.

Заключение

Очень круто, если на вашем сайте логотип является способом в один клик добраться до главной. Но не останавливайтесь на этом. Хотя многие пользователи уже привыкли кликать на логотип, еще остались те, что по прежнему ищет явную ссылку «Главная».