Голова или головная боль

Автор: Topol Понедельник, Апрель 16th, 2012 Нет комментариев

Рубрика: Сайтостроение

Заголовок (иногда его называют «головой») — это та часть страницы, которая заключена между тегами <head> </head> и не отображается в окне браузера, но передается ему при запросе страницы (что и понятно).

Из чего состоит заголовок страницы? Во-первых, — название, которое затем отображается в заголовке браузера название. Заголовок страницы имеет существенное значение, поскольку он отображается не только в заголовке окна браузера, но и в избранном. Следовательно, необходимо сделать название не только привлекательным, но и информативным, так чтобы пользователь, перебирая ссылки в «избранном» (favorites), мог моментально оценить содержание и полезность для него вашей страницы. При этом желательно уложить основную часть названия в первые 10-12 букв, чтобы они сразу бросались в глаза при просмотре ссылок. Начните название не со слов «этот сайт посвящен…», а непосредственно с вашей тематики: «Реклама в интернет. Доступно и полезно» — получается более динамично и гораздо информативнее. Если у вас есть имя, которое у всех на слуху, или имеет шансы таковым в скором времени стать, то имеет смысл начать с него: «Библиотека Мастера. Все о вебмастеринге», в этом случае, человек сразу будет знать, куда он попадет, когда ткнет на ссылку в избранном. Кстати, эти же заголовки высвечиваются зачастую в результатах поиска на поисковых порталах.

Следом размещаются мета-теги, о которых я рассказывал в предыдущей главе. Кстати сказать, мета-теги не исчерпываются описанием и ключевыми словами, — есть также такие полезные конструкции, как refresh, которая позволяет пересылать пользователя на заранее определенную страницу, author, где можно указать издателя или автора, robots, где можно указать управляющие директивы для поискового робота, который индексирует ваш сайт и пр. Для интересующихся — посмотрите полную спецификацию на английском.

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

Кроме необходимых атрибутов: мета-тегов и названия, заголовок страницы может содержать также описания стилей (CSS), которые используются на странице. На самом деле, ни заголовок, ни название страницы не являются обязательными, но, если подумать, то и текст на странице и вообще любое ее содержание также не являются необходимыми элементами страницы.

Стили обрамляются тегами <style> </style>и неплохо бы их также заключить в тег комментариев, так как браузеры старых версий, коих осталось немного, но, все же, есть, могут не понять, что же вы им понаписали, и вывалить все это на экран недоумевающему пользователю. С помощью Каскадных таблиц стилей (CSS) можно описывать все, что угодно, начиная от оформления текста и заканчивая внешним видом страницы в целом. Впрочем, это тема для совершенно другой статьи, тем более что она ну совсем не маленькая. Выглядит это примерно следующим образом:

<style>
	H1 {font-size: 30}
	H2 {font-size: 24}
	H3 {font-size: 20}
	.list {text-indent:-14px; margin-left:14px}
	.black {color: black}
	.smallest {font-size: 8pt}
	.small {font-size: 9pt}
	.default {font-size: 12pt}
	.big {font-size: 16pt}
	.title {font-size: 18pt}
	a {text-decoration:none}
	a.line:hover {text-decoration: underline; color:#cc0000;}
	a:hover {text-decoration:underline}
	.list {text-indent:-14px; margin-left:14px}
	.auc {color: black}
	.auc:hover {text-decoration:none}
	.blue {color: #005ce6}
	</style>

Здесь с помощью CSS задается все основное оформление страницы
(Сайт «Молоток»)

Или значительно проще:

<style>
	A:link {text-decoration: none}
	A:visited {text-decoration: none}
	</style>

Здесь с помощью CSS задается только внешний вид ссылок
(Сайт «Библиотека Мастера»)

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

<link rel="STYLESHEET" type="text/css" href="styles.css">

(Сайт Награда.ру)

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

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

Источник: webcorp.ru

Оставить комментарий

Чтобы оставлять комментарии Вы должны быть авторизованы.

Похожие посты