Баннеры |
Наверняка вы слышали о таком способе раскрутки сайта, как баннерные обмен. Суть его состоит в обмене баннерами между владельцами веб-ресурсов с целью привлечения посетителей. Поскольку баннер является графическим элементом в формате GIF для размещения его на страницах сайта создается специальный код. В результате, нажав на приглянувшийся баннер, пользователь переходит на сайт рекламодателя. Главный параметром, на который ориентируются при создании баннера – это CTR (показатель эффективности баннера), вычисляемый по формуле: отношение числа пользователей, перешедших по нему, к общему числу посетителей видевших страницу с данным баннером.
CTR зависит от нескольких факторов:
| |||
Фирменный стиль |
|
|
|
|
Великие и не очень мастера прошлого украшали свои творения фирменным рисунком – таким, который сразу говорил о принадлежности изделия руке конкретного автора. Один век сменял другой, и вот уже ни одна компания, претендующая на звание «респектабельной», не может обойтись без узнаваемой символики. На создание «товарного» знака брошены все силы: тратятся огромные суммы, разработка логотипа поручается лучшим из лучших, а «лучшие из худших» штудируют фирменный стиль конкурентов, чтобы на их ошибках построить светлое будущее своей компании. Хорошо, если организация имеет трудовые и финансовые ресурсы для обеспечения подобной работы. А если речь идет о маленьком, но очень амбициозном бизнесе, которому не дает покоя слава корпораций-гигантов? В этом – не таком уж и редком – случае придется взять в руки учебник по психологии рекламы и пособие по работе в «фотошопе»: именно эта немудреная программа – Ваш пропуск в мир большого бизнеса. Итак, с чего начать «чайнику»? Прежде всего, определиться с тем, что именно должен отражать логотип. Правила просты: картинка должна выделяться, быть простой для восприятия и иметь не более трех цветов. Вспомните бородатый анекдот про «круглую лошадь в вакууме»: самое простое – нарисовать знак правильно круглой формы (по крайней мере, потренироваться можно именно на нем). Итак, набросок будущего товарного знака готов: вот он, нарисованный на белом листе бумаги, лежит перед хозяином и обещает указать путь к Эльдорадо… Следующий шаг - открываем Photoshop (без его помощи разработка фирменного стиля застопорится) и, постигая азы, пытаемся придать пока еще плоской картинке глянцевый блеск и объем. Для этого делаем в программе «заготовку» - создаем изображение размером 300*300 пикселей. С помощью команды Ctrl+Shift+N получаем новый слой. Далее требуется воспользоваться выделительным инструментарием - Marquee Tool. Чтобы круг сохранил правильную форму, не забудьте зажать клавишу Shift. Заготовка получена. Цветовую гамму, глубину и тени на картинке помогут подобрать редакторы Bevel and Emboss, Inner/ Drop Shadow, Satin. После экспериментов с цветом переходим к основной части рисунка: на сферическую заготовку помещаем объект с помощью операторов выделения Eleptical marquee tool и заливки Bucket Tool. Картинка стала объемной: самое время поместить внутрь полученного «блина» имя компании с помощью одного из предложенных программой шрифтов. Теперь обратимся к «спецэффектам» - все те же редакторы выделения и заливки могут установить различный уровень прозрачности полученного рисунка. И вот экран монитора, переливаясь всеми цветами радуги, демонстрирует красивый логотип, задача которого гордо нести в массы душу фирмы и приносить невероятный доход! Сложно? Долго? Тогда оставьте изучение умного графического софта до лучших времен и отправляйтесь к профессионалам. Поверьте, на этом свете немало «самородков», готовых воплотить мечту в жизнь – быстро, качественно и недорого. | |||
Web-дизайн и кодировки |
|
|
Кодировкой веб-страницы называется способ кодирования текстовой информации для передачи в сети Интернет. Определяющим параметром при кодировании данных считается количество битов, с помощью которых передается один символ (значение). Например, одним битом можно закодировать два значения, двумя битами – четыре значения, а три бита кодируют восемь значений. Добавление одного бита удваивает количество значений, которое можно закодировать. Поэтому при 8 битах кодировке поддаются 256 последовательностей двоичных значений, причем каждая из этих последовательностей сама способна передать один символ текстовой информации. Кроме 8-битовой кодировки, существуют также 16 и 32-битовые кодировки, обрабатывающие 65536 и 4294967296 символов текста. Это небольшое введение в основы программирования в дальнейшем поможет понять, на основе каких параметров выбирается кодировка веб-страницы. Если вы откроете веб-браузер Internet Explorer, входящий в комплект поставки операционной системы Windows, и выберите пункт меню Вид – Кодировка, то увидите довольно внушительный список кодировок, с которыми работает данный веб-браузер. Существует шесть основных кодировок, поддерживающих русский язык (кириллицу): Windows-1251 (получила наибольшее распространение), KOI-8R, KOI-8U, ISO-8859-5, UTF-8 и русскоязычная Mac-кодировка. Для корректного отображения информации на веб-странице сервер и веб-браузер должны обмениваться служебной информацией, содержащей сведения о методе кодирования текста. С помощью протокола HTTP веб-браузер отправляет на сервер сообщение с данными кодировки. Затем сервер находит страницу и перекодирует ее в нужный формат. Если по какой-то причине документ (веб-страница) на сервере не обнаружен, придется вручную выбирать подходящую кодировку. Чтобы добиться правильного воспроизведения информации на сайте, еще на стадии разработки необходимо указывать кодовый набор символов на той или иной странице. В противном случае велика вероятность того, что пользователь, загрузив страницу вашего ресурса, вместо текста увидит там непонятную «абракадабру». Вряд ли посетители сайта захотят тратить время на выяснение кодировки страницы. Они просто уйдут к вашим конкурентам. Понятно, что сайт с такими недоработками дизайна не сможет претендовать на высокие позиции в рейтинге поисковых систем. Во избежание подобных ошибок проверьте, содержит ли html-код страниц следующую строку: <meta http-equiv="content-type" content="text/html; charset=windows-1251">. Вместо windows-1251 введите свой формат кодирования. Обратите внимание на способ записи кода, для атрибутов content и charset используется всего одна пара кавычек, а разделены они точкой с запятой. Если вы используете текстовый html-редактор, код придется добавлять вручную. Визуальные редакторы сделают это за вас, стоит только в меню «Page properties» выбрать кодировку (title/encoding) | |||
Favicon - иконки Вашего сайта |
|
|
Favicon ("изображение, значок", этот термин образован от слова "Favorites", обозначающего меню избранных ссылок в Internet Explorer) - это миниатюрные изображения, характеризующие сайт, их можно сравнить с аватарами. Если таковое изображение у сайта есть, оно отображается слева от URL сайта. На сегодня иконки поддерживают все современные браузеры и даже поисковые системы, которые отображают иконки в результате выдаче запросов. Актуальность иконок для сайтов на сегодняшний день обуславливается и тем, что Яндекс начал их показывать в результатах поиска, для этого выделен специальный сервер, и поисковый робот, который сначала отыскивает иконки, потом перебивает на них формат в PNG и записывает на собственный сервер, чтобы иконка занимала меньше места. Также, иконка часто отображается в закладках браузера. Иными словами, она выступает визуальным воплощением Вашего сайта. Современные браузеры без каких-либо запросов автоматически пытаются получить с сайта файл favicon.ico, что хорошо видно из логов доступа к сайту: 62.212.234.18 - - [10/Oct/2007:00:32:17 -0400] "GET /favicon.ico HTTP/1.1" 200 1406 "-" "Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.7) Gecko/20070914 Firefox/2.0.0.7" Однако, является хорошим тоном прописать в мета-тегах сайта (внутри блока <HEAD>) путь к файлу: <link rel="icon" href="/favicon.ico" type="image/x-icon"> <link rel="shortcut icon" href="http://info-pages.com.ua/favicon.ico" type="image/x-icon"> В этом случае иконка будет взята не из стандартного размещения, а по указанному пути в "shortcut icon", даже если она размещается на другом сайте. Это позволяет, в частности, иметь одну иконку для нескольких сайтов. Для того, чтобы создать иконку для Вашего сайта, нужно найти подходящее изображение, которое было бы различимо при небольшом размере. И разместить ее в ввиде файла "favicon.ico" в корневом каталоге сайта, так как исторически сложилось, что там его ищет Internet Explorer. Обычно используется изображение размера 16?16 пикселов формата ICO. Для обеспечения совместимости (например, была замечена проблема с браузером Opera) нужно использовать размеры изображения 16 на 16, с числом цветов 16 или 256. Конечно же, формат Windows Icon, в которое мы преобразуем получившееся изображение, предусматривает и лучшие характеристики иконки. Путь к файлу, его формат и размеры изображения могут быть любыми, допустимыми для WWW (за исключением Internet Explorer, который допускает для значка только формат ICO, «лежащего» в корне сервера). Все современные браузеры понимают явное указание положения значка в HTML-коде и могут использовать вместо формата ICO формат PNG, GIF, BMP и других. При добавлении картинок в иконку следует помнить, что большая иконка может тормозить загрузку сайта, потому что иконка загружается одной из первых. Значок может быть не только отображением какого-либо определенного логотипа. Значок — это прежде всего обширная идея, которую надо засунуть в рисунок размером 16?16 пикселей. | |||
Справочные данные по HTML |
HTML-документ – это файл с расширением *.html или *.htm, созданный с применением языка разметки гипертекста. Для форматирования документа (установки его параметров) служат теги – команды языка HTML. Общий вид записи тега выглядит так: <Тег>...текст</Тег>,где <Тег> является «открывающим» тегом (обозначает начало действия определенной команды в документе), а </Тег> - «закрывающий» тег (определяет место окончания действия). Пара тегов – закрывающий и открывающий – образуют элемент под названием «контейнер». Главная информационная роль отводится атрибутам тегов. Атрибут является набором символов, значение которых соответствует значению определенного английского слова. У одного тега может быть несколько атрибутов. Разберем конкретный пример. Тег <font> применяется для форматирования текста. Однако он не способен указать подробные параметры форматирования (размер текста, шрифт и его начертание, цвет и другие). Зато это по силам атрибутам face (гарнитура шрифта), color (цвет), dir и lang (направление чтения текста и информация о языке), size (размер текста). HTML-код: <font face="Verbana, Arial, Helvetica, sans-serif">, причем font – тег, face – атрибут, Verdana, Arial... – значение атрибута. Теперь, обладая знаниями, достаточными на первое время, создадим наш первый html-документ. Для этого откройте любой текстовый или визуальный html-редактор (в последнем случае придется перейти в режим отображения кода). Начинающим веб-мастерам довольно часто советуют создавать первые веб-страницы с помощью обыкновенного текстового редактора (например, Блокнота в Windows). Трудно сказать, чем обусловлены подобные рекомендации, но для написания кода разумнее воспользоваться специализированными программными продуктами (EmEditor, Dreamweaver, HomeSite). Конечно, в начале будет трудно. Однако вскоре вы привыкните к выбранной программе, разберетесь в ее особенностях. А такие полезные функции как подсветка синтаксиса, сообщения об ошибках, встроенный браузер для наглядной демонстрации результатов, окупят все мучения. Но мы немного отвлеклись. Итак, запустив html-редактор, введите следующий код: <html> <head> <title>Моя страничка</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> </head> <body> Мой первый документ </body> </html> Рассмотрим форму записи кода. Любой документ начинается и заканчивается парой <html> и </html>. Хотя в данном случае теги набирались маленькими буквами, никакой ошибки не будет, если ввести теги заглавными буквами. Каждый тег располагается в отдельной строке. Это не правило, просто так комфортнее читать текст. Пара тегов <head> и </head> обозначает начало и конец заголовка документа. Метка <title> содержит служебную информацию о названии документа. Начало и конец тела документа - <body> и </body>. Причем в теле документа находится его основное содержимое. Подведем итоги: Сегодня вы научились создавать простейшие html-документы и сделали первые шаги на пути к изучению профессиональной верстки веб-страниц. | |||
Структура HTML-документа |
Проведем анализ написанного нами в прошлый раз HTML файла test.html. Любой HTML документ, как отмечалось, начинается с тега <html> и заканчивается </html> Все, что расположено между этими двумя тэгами <html>... </html> представляет собой содержимое HTML-документа. Следующий тэг <head> и закрывающий </head> Все что находится между ними <head>... </head> представляет собой заголовок документа. Если сравнить HTML-документ с книгой, то любая книга имеет обложку с названием (заголовком). Применительно к HTML-документу названием является то, что расположено между тэгами <title>... </title> Как мы уже заметили, название входит в заголовок, т.е. располагается между тэгами <head>... </head> Важна последовательность записи тэгов, но не их расположение в документе. Описанную ранее страничку test.html может быть записана и как: <html> <head><title>Пример простейшей HTML странички.<title> </head> <body> <p>Простейшая HTML страничка</p> </body> </html> или в каком-либо другом виде. Броузер все равно правильно отобразит страницу. Все, что располагается между <body>... </body> представляет собой "тело" документа (от англ. body - тело). Т.е., применительно к книге, это то, что расположено внутри обложки книги, составляя ее содержимое. Содержимое же в нашем случае задается с помощью пары тэгов <p>... </p>. Символ "p" - это первая буква английского слова paragraph, означающего " абзац ". Таким образом абзацы текста книги, т.е. нашего HTML-документа задаются парой тэгов <p>... </p>. Разумеется не трудно сделать вывод о том, что пар тэгов: <p>... </p> может быть сколь угодно много, но "тело" <body>... </body> может быть только одно. Равно как и <head>... </head>, <title>... </title> и <html>... </html> - в одном экземпляре на HTML-документ. По материалам сайта: http://web-brodilka.ru/ | |||
Основные теги |
<BASE>...</BASE>
Задает базовый адрес, который может быть использован для формирования полной формы URL из неполной.
Задается в HTML-заголовке страницы (внутни тега <HEAD>) перед всеми гиперссылками.
Синтаксис:
<BASE href="Базовый адрес" id="Имя" target="Имя окна или фрейма|_blank|_parent|_search|_top">
Обязательный параметр: href, который задает интернет-адрес
Одинарный тег. Поддерживается IE начиная с 3.0 и NN начиная с 1.0. В NN отсутствует атрибут ID.
<HEAD>... <BASE HREF="http://spravkaweb.ru/">... </HEAD> и тогда гиперссылка вида
<A HREF="/img/10.gif"> будет расширена до <A HREF="http://spravkaweb.ru/img/10.gif"> Также тег <BASE> применяется в описании фреймов.
<BODY>...</BODY>
Задает начало и конец тела HTML-документа.
Блочный парный тег. Обязательных атрибутов не имеет.
Атрибуты тега <BODY> в IE и NN:
Дата добавления: 2015-06-27; Просмотров: 437; Нарушение авторских прав?; Мы поможем в написании вашей работы! Нам важно ваше мнение! Был ли полезен опубликованный материал? Да | Нет |