Урок 4. Вставляем логотип. Цвет фона и фоновое изображение
Для того, чтобы наполнить нашу таблицу содержимым, будем последовательно вставлять картинки, ссылки и текст в ячейки таблиц.
1. Логотип.
Первая таблица, в которой будут стоять логотип и ссылки (её код мы уже писали во втором уроке):
Внимание! Не забывайте важный момент (я хочу о нём напомнить, потому что такая ошибка встречается): одинарные (‘) и двойные («) кавычки в html и прочих языках программирования имеют разное значение. Две одинарные кавычки не заменят одну двойную. В данном случае, во всех кодах, которые я привожу, кавычки должны быть двойные.
1.1. Для начала нам нужна картинка, которую мы станем использовать, как логотип. Эту картинку нужно сделать определённого размера и загрузить либо на Радикал.ру, либо в корневую папку нашего сайта. Лучше в корневую папку, потому что тогда вы не будете зависеть от неполадок на сервисе изображений Радикал.ру, которые иногда случаются.
Загружаем картинку нужного нам размера в корневую папку. Логотип нужно делать с учётом разрешения монитора. Вы должны учитывать, как ваш логотип будет смотреться на мониторах с разным разрешением: не будет ли он растягивать экран при разрешении меньше, чем ваше, не потеряется ли где-то в углу, отделённый от ячейки с ссылками огромным пустым пространством, на мониторе у которого разрешение больше, чем у вас. Учитывая, что мы поставили вторую ячейку таблицы, предназначенную для ссылок — 200 px, 600+200=800рх. При разрешении монитора 800 на 600 рх логотип и ссылки будут располагаться вплотную друг к другу.
Нужно учитывать, что при любом разрешении, какое бы оно ни было у пользователей, на ваших страницах может появиться горизонтальная полоса прокрутки. Это можно счесть ошибкой в дизайне. Горизонтальной полосы прокрутки на странице с качественным дизайном быть НЕ ДОЛЖНО.
Так же нежелательное явление — большой вес логотипа. Чем меньше весит логотип — тем лучше. Ваша страница будет грузиться быстро и пользователи не будут выражать недовольство по поводу потраченного траффика. Если ваш логотип будет весить меньше 15-ти Кb — будет очень хорошо.
Про масштабирующиеся логотипы поговорим отдельно, а сейчас продолжим про обычный логотип.
1.2. Итак, мы загрузили нужную нам картинку в корневую папку нашего сайта, назвав её к примеру «logo».
Далее мы вставляем картинку в соответствующие теги, как мы это делали, вставляя изображение в баннер:
logo.jpg » border=»0″>
Красным цветом обозначена картинка. Не забывайте ставить формат, в котором выполнена картинка. Это в данном случае jpg, но может быть картинка, сохранённая в формате gif или каком-либо другом.
1.3. Теперь всю эту ссылку необходимо вставить в HTML-код нашей таблицы, на то место, где у нас написано слово «Логотип». Чтобы логотип встал с выравниванием по левому краю, добавим в ячейку атрибут выравнивания align=»left»
Подставляем теперь эту таблицу в нашу страницу, на которой у нас сделаны все таблицы для нашего сайта и весь код будет выглядеть так:
1.4. Загрузим всю эту конструкцию на нашу страницу. Получится вот что:
Наша первая страница
2. Цвет фона и фоновое изображение (bgcolor и background)
2.1. Для того, чтобы наша страница была определённого цвета, необходимо задать цвет фона. Поскольку цвет прописывается для всей страницы, то есть для её «тела», необходимо прописать атрибут цвета внутрь тега Цвет фона задаётся атрибутом bgcolor, которому присваивается значение того цвета, какой вам нужен. Например, мы хотим, чтобы фон страницы был светло-серый. Мы находим в таблице цветов, или в фотошопе соответствующий цвет #c0c0c0 — который отвечает именно за светло-серый, и прописываем атрибут с его значением, так же, как мы прописывали значения других атрибутов: bgcolor=»#c0c0c0″. А теперь этот атрибут помещаем внутрь тега Вставляем данный изменённый тег в нашу страницу и получается вот что:
Наша первая страница, фон серый
Нужный вам цвет можно найти вот в этих таблицах:
2.2. Теперь зададим другое значение — background. Этот атрибут и означает фоновую картинку.
Вставим в фон вот такую картинку:
Я поясню, почему она такая маленькая.
При желании можно поставить фоновым изображением картинку, которая будет занимать весь экран. Но учтите, что это изображение в фоне имеет несколько присущих ему качеств:
Предположим, у нас есть какая-то очень красивая картинка, например какой-нибудь зимний пейзаж. Картинка размером 1024х768. И если на неё смотреть монитора, разрешение которого 1024 на 768 — всё будет выглядеть прекрасно. Но если на наш сайт посмотрит пользователь у которого разрешение монитора 1280х1024, он увидит, что сама картинка отъехала в верхний левый угол, а свободные места снизу и справа от неё заполнились кусками этой же картинки, совершенно не состыкованными с первоначальным изображением. В общем, наш фон окажется на таком разрешении изуродованным.
Если же вдруг у пользователя разрешение монитора меньше, чем 1024х768 он увидит только кусочек вашего фона, точнее, его левый верхний угол.
Нам это не подходит.
Вторая сложность: чем больше картинка размером, тем больше её вес, тем дольше она будет грузиться и тем больше тратить трафика пользователя.
Третья сложность: на ярком, красочном фоне ничего не возможно прочитать. Буквы будут просто теряться среди ярких красок.
Поэтому пожертвуем пейзажами и картинами и поставим что-нибудь поскромнее, полегче весом, масштабирующееся под любое разрешение монитора и не мешающее читать текст.
Итак, суммируем: вес фоновой картинки прибавляется к общему весу страницы, поэтому не грузите сильно тяжёлые картинки, экономьте трафик.
Фоновое изображение может по каким-то причинам не открываться сразу, особенно если вы захотите загрузить его не на свой сайт, а для экономии места воспользуетесь чьим-нибудь сервисом картинок. К примеру, тем же Радикалом. И если на Радикале произойдёт сбой, ваше изображение может не загрузиться вовсе.
Нужно учитывать так же, что если у вас текст набран чёрными буквами, а вы положили под фоновое изображение чёрный фон — если фоновое изображение не откроется, чёрный текст на чёрном фоне прочитать будет невозможно и гость будет очень удивлён, увидев сплошное чёрное пятно вместо вашей страницы.
Иными словами, подбирая фоновое изображение, вы должны учитывать контрастность текста по отношению к фоновому изображению и фону под ним. Чтобы ваш текст ВСЕГДА был ХОРОШО ЧИТАЕМ!
Для фона я в данном случае взяла очень маленькую картинку, 30 на 28 пикселов, которая весит очень мало, около 51 байта. И вес всей страницы будет считаться только по одной картинке, которая просто размножается в фоне бесчисленное множество раз. Теперь давайте посмотрим, как поставить фоновое изображение.
2.3. Допустим, мы загрузили в нашу папку, где лежат все наши страницы, фоновую картинку и присвоили ей имя «f3.gif» (формат может быть и jpg).
Поскольку фон стоит для всей страницы, то и прописать его нужно в «тело» страницы, то есть всё в тот же Выглядеть это будет так: Наша первая страница, фон серый + фоновая картинка
Фоновое изображение можно прописать не только для всей страницы. Его можно прописать в ячейку таблицы или в какую-то определённую таблицу. Фоновое изображение в отличие от вставленной картинки, всегда масштабируется и поверх него можно вставлять текст. А картинка не масштабируется, имеет строго определённый размер и поверх неё ничего написать нельзя.
Урок окончен.
Логотип по стандартам HTML5 или Как поставить векторную картинку на веб-страницу
25 февраля 1993 года Марк Андрессен (Marc Andreessen) написал:
Предлагаю новый опциональный HTML-тег: IMG
При нем должен обязательно указываться аргумент SRC=«url».
Тег отсылает к файлу растрового изображения (bitmap или pixmap). Браузер будет запрашивать этот файл в Сети, распознавать как изображение и вставлять в текст сообразно месту тега в коде страницы .
Допустим, вы нарисовали в Corel Draw! логотип компании и собираетесь разместить его на сайте не как-нибудь, а формате HTML5. И, соответственно, размещать картинку не в растровом формате, а в .SVG
Зачем мне картинка в SVG?
Что это дает, понятно – при любом масштабировании на планшете или любом другом гаджете мы имеем идеально точно отрисованную картинку, насколько детализированной она бы ни была.
По умолчанию экспорт из Corel Draw! в SVG формат даже при галочке «Только выделенные объекты» дает в результате картинку такого размера, как наш рабочий лист. То есть картинка будет на A4, если рабочий лист такого формата. Приходится делать отдельный лист точно такого размера в пикселах, какой нам нужен, делать наш логотип именно такого размера, центровать, а потом уже экспортировать.
А теперь вставляем на страницу
При вставке на страницу тега
мы видим сразу волшебный результат в браузерах под Android 4 и на ipad’ах, но ничего не видим на компьютере в обычных браузерах. Firefox 13, IE 8, Opera 12, Chrome (версия 24)- все дружно предлагают скачать и сохранить SVG файл вместо того, чтобы просто показать его.
Попробуем другой способ вставки SVG —
— показывает совершенно аналогичный результат, Опера, правда, выдает «Нет плагина. Ознакомиться?».
Третий способ вставки SVG – с помощью тега
Вижу опять ту же картину – все мои браузеры не показывают SVG.
По таблице совместимости – все мои браузеры кроме IE8 просто обязаны показывать правильно. К тому же, напомню, планшеты под Android и IPad IOS отображают мою страницу верно.
MIME-Type
Оказывается, дело в том, что мой сервер (IBM Lotus Domino) не умеет корректно отдавать MIME-Type для SVG. И файл, лежащий в File Resources базы, не может быть корректно отдан! Прописываю строчку image/svg+xml в свойствах ресурса. И, о чудо! – все браузеры (кроме IE8) показывают все три варианта (img, embed, object) вставки картинки. Отлично, это меня устраивает, «костыли» для IE будут в gif. Еще раз удивляюсь тому факту, что даже без mime-type на планшетах все показывалось правильно.
Взглянем на логотип поближе
А теперь я пробую увеличить масштаб страницы, чтобы посмотреть на свой логотип, а, точнее, сравнить, как отображается один и тот же файл, вставленный тремя разными тегами. Оказывается, при увеличении масштаба страницы в Firefox, контур того варианта, который был вставлен тегом IMG, то расплывается, то снова становится четким.
А как насчет защиты от несанкционированного копирования и воспроизведения?
Я не претендую на звание специалиста в этой области, наоборот, хотела бы задать вопрос. Просто не нашла ничьего мнения по данному вопросу. У SVG формата нет watermarks, равно как и других защитных атрибутов.
Обычно фирмы владеют файлами в векторах как исходниками. Делая брендбук, дизайн-студии отдают вектор, а везде используется уже растр.
А SVG, вообще-то, текстовый формат, точнее, XML-ный. И, будучи вставленным в любую программу для паблишинга, он будет воспроизведен без потери качества. Это надо учитывать, т.к. редактировать ваши файлы будет гораздо проще и, возможно, потом будет нечем доказать, что вы являетесь законным правообладателем.
- Веб-разработка
- Обработка изображений
Логотип в шапке: решение
Вот фрагмент кода с нашим вариантом разметки логотипа:
Почему код именно такой? Разберём вопросы из предыдущего задания.
Контентное это изображение или декоративное?
Контентное, так как это логотип, он выполняет фукцию «распознавания бренда» и важен клиенту. То есть размечаем тегом img .
Если контентное, то нужно ли его оборачивать в ссылку?
Да, нужно. Логотип-ссылка — это уже устоявшийся элемент сайтов, к которому привыкли множество пользователей. Некоторые используют его для перехода на главную, некоторые просто для перезагрузки страницы.
Если это ссылка, то включать его в основную навигацию или нет?
Мы считаем, что да. Это важный элемент навигации. Его включают в тег nav , но не включают в перечень ссылок на другие страницы, так как он отличается от них. Ведь логотип выполняет не только навигационную, но и «рекламную» функцию.
Что касается технических решений.
Мы не знаем, какой адрес будет у ссылки, поэтому используем адрес-заглушку с решёткой. Картинки мы пока не вырезали, поэтому используем картинку-заглушку и размеры ей задаём «на глаз». А в качестве альтернативного текста задаём строку «Логотип студии пилатеса».
Класс задаём только для ссылки.
Перейти к заданию
- index.html Сплит-режим
+7 918 365 07 07
Студия пилатеса
Твоё здоровое тело через 10 занятий Смотреть расписание
Пилатес соединяет элементы растяжки с элементами силовой тренировки Комплекс упражнений укрепляет мышцы пресса и спины, улучшает гибкость мышц и связок, подвижность суставов и избавляет от дискомфорта в позвоночнике Подробнее
Уровень Новичок 150 руб. / занятие Записаться Уровень Профи 200 руб. / занятие Записаться Уровень Мастер 350 руб. / занятие Записаться
Вероника Кулешова 25 лет Хожу на пилатес уже пять месяцев. После десяти занятий уже увидела результат: тело подтянулось, улучшилась осанка, появился пресс. И самое главное, пропал сильный изгиб поясничного отдела, который меня очень беспокоил. Надежда Петрова 23 года Начала заниматься пилатесом по достаточно банальной причине – хотелось поддерживать хорошую форму, и не ездить на занятия далеко от дома. занятие пилатесом с инвентарем Зал пилатеса был буквально через дорогу, поэтому и записалась туда. Оксана Тодоренко 19 лет У меня был печальный опыт занятий пилатесом, связанный с некомпетентностью инструктора, который проводил тренировки. Я занималась пилатесом 2 месяца, а потом забросила.