<< Пред. стр.

стр. 10
(общее количество: 51)

ОГЛАВЛЕНИЕ

След. стр. >>

мотреть на то, как этот материал можно разместить. Для кода на языке JavaScript и
таблиц CSS есть два варианта: внедрение и присоединение. Внедрение материала оз-
начает его размещение в том же документе, где находится HTML-код, а присоедине-
ние заключается в создании отдельного файла, содержащего скрипты или CSS-код. и
последующем связывании HTML-кода с этим файлом.



Внедрение ckpunmoO
Программа-браузер является глупой в том смысле, что считает все кодом на языке
HTML. Подайте ему Web-страницу, и все будет в порядке. Однако если подать браузе-
ру текстовый документ или JavaScript-код, он попытается интерпретировать этот до-
кумент, как код на языке HTML, и мы получим нечто похожее на то, что изображено
на рисунке 12.1. Вместо выполнения внедренного скрипта, браузер посчитал его
HTML-кодом и отобразил код на странице.
Чтобы избежать такой проблемы, необходимо сказать браузеру, где точно начинается
и заканчивается скрипт. ДДя этого и необходим тег s c r i p t . Поместите скрипт между
парой тегов s c r i p t , как показано в следующем примере:
<script language="JavaScript">
function doAlert() {
a l e r t ( " 1 am a s c r i p t . " ) ;


</script>
ГЛАВА 12. Работа со скриптами и таблицами стилей 93

В этом случае, когда браузер транслирует HTML-код, он знает, что нужно пропустить
все, что находится между тегами s c r i p t .




Рис. 12.1. Если внедрить скрипт, не заключив его в теги script,
браузер предположит, что это HTML-код, и отобразит его на странице

Это первый шаг для внедрения скрипта. Второй шаг заключается в определении, где
разместить внедренный скрипт в HTML-коде. Ответ зависит от того, к какому типу
принадлежит скрипт. Скрипты с повторяющимися или интерактивными функциями
(функции, которые могут вызываться на странице более чем один раз, или функции,
изменяющие внешний вид страницы после того, как браузер сгенерировал ее) нахо-
дятся вверху HTML-кода, между тегами head и после тега t i t l e :
<html>
<head>
<title>Page Title</title>
<script language="JavaScript">
/* JavaScript-код размещается здесь. */
</script>
</head>
<body>
/* Содержимое страницы размещается здесь. */
</body>
</html>
Скрипты для ролловерных изображений и открывающихся меню попадают в эту кате-
горию, как и скрипты, выполняющие проверку введенных данных.
Строим Web-сайты
94

Однако если у вас есть скрипт, который выполняется только раз, когда браузер перво-
начально генерирует страницу, как в случае со специальным текстом или временно й
меткой, внедрите скрипт прямо там, где хотите отобразить результаты:
<html>
<head>
<title>Page T i t l e < / t i t l e >
</head>
<body>
<!— Вставка строки с датой вверху страницы. —>
<script language="JavaScript">
/* Здесь размещается скрипт, вставляющий строку с датой. */
</script>
<!— Здесь размещается оставшаяся часть страницы. —>
</body>
</html>



Внедрение таблиц стилей
Как и в случае с кодом на языке JavaScript, браузер интерпретирует таблицы CSS, как
HTML-код, если ему не указать иной способ. Теги s t y l e делают для таблиц CSS то же,
что и теги s c r i p t для JavaScript-кода. Они говорят браузеру рассматривать все, что
находится между ними, как CSS-код, а не HTML:
<html>
<head>
<title>Page T i t l e < / t i t l e >
< s t y l e type="text/css"> .
/* CSS-код размещается здесь. */
</style>
</head>
<body>
/* Содержимое страницы размещается здесь. */
</body>
</h'tml> •

Как и в случае с JavaScript-кодом, размещайте внедренные таблицы стилей в разделе
HTML-кода head.
ГЛАВА 12. Работа со скриптами и таблицами стилей 95


Совет
Некоторые старые браузеры не понимают теги script и style. Та-
кие браузеры рассматривают все, что находится между данными те-
гами, как текст. Хотя трудно представить посетителя, получающего
хоть какое-то удовольствие при посещении современных Web-сайтов
с использованием такого антиквариата, возможно, вы захотите по-
местить теги комментариев языка HTML до и после тегов script или
s tyl e, как показано ниже:
<script language="JavaScript">




</script>
Добавление тегов комментариев предотвращает отображение ста-
рыми браузерами скриптов или кода в виде HTML-кода.




Присоединение скриптов
Альтернативой внедрению является присоединение, когда JavaScript-код размещается
в отдельном файле. Однако чтобы на Web-странице можно было использовать внеш-
ний скрипт, необходимо сказать браузеру, где его искать.
Для этого используется атрибут s r c тега s c r i p t , подобным образом:
<html>
<head>
•<title>Page T i t l e < / t i t l e >
< s c r i p t language="JavaScript" src="../script/myscript.js">
</script>
</head>
<body>
< ! - Содержимое страницы размещается здесь. ->
</body>
</html>
Атрибут s r c задает путь от текущей страницы к файлу со скриптами, который вы же-
лаете присоединить, наподобие гиперссылки.
Строим Web-сайты
96


Присоединение таблиц стилей
Здесь есть маленькая хитрость. У тега s t y l e нет атрибута src, поэтому нельзя ис-
пользовать тег s t y l e для присоединения внешней таблицы стилей. Вместо этого ис-
пользуется тег link:
<html>
<head>
<title>Page T i t l e < / t i t l e >
<link href="css/mystyles.ess' rel="stylesheet" type=
"text/css">
</head>
<body>
<!— Содержимое страницы размещается здесь. —>
</body>
</html>



Совет
Другой альтернативой является импортирование внешней таблицы
стилей. За дополнительной информацией обратитесь к главе 42.



Обратите внимание на пару вопросов, касающихся тега link. У этого тега также нет
атрибута src, однако есть атрибут hre f, который работает точно так же. В нем указы-
вается путь от текущей страницы к внешней таблице стилей. Значение атрибута r e l
описывает отношение связанного документа, а значение атрибута type сообщает тип
таблицы стилей, находящейся в присоединенном документе. Последние два атрибута
не являются критически важными, т.к. для присоединения таблицы стилей на самом
деле необходим только атрибут href, однако эти атрибуты могут быть полезны для
программного или аппаратного обеспечения, читающего Web-страницу, поэтому сле-
дует попытаться включить и их.



Совет
Тег link всегда должен размещаться в разделе head документа
HTML Его невозможно разместить в каком-либо другом месте.


Важно отметить, что для тега l i n k не требуется закрывающая версия, </link>. Тег
l i n k является самодостаточным, а тег s c r i p t - нет. Это означает, что после откры-
тия тега s c r i p t его всегда необходимо стараться закрывать, даже если между тегами
не размещен никакой JavaScript-код. А с тегом l i n k такой проблемы не возникает.
ГЛАВА 12. Работа со скриптами и таблицами стилей , 97^


Дневник: Внедрение или присоединение?
В нашем распоряжении есть два метода: внедрение и присоединение. Какой из них
лучше?
Ответ - присоединение. Несомненно.
Мне нравится присоединять скрипты и таблицы стилей. Этот подход позволяет ис-
пользовать один и тот же файл со скриптами или таблицей стилей в любом желаемом
количестве Web-страниц, что бесценно для часто используемых функций, например,
ролловеров и всплывающих меню, и стилей, используемых по всему сайту. Если бы я
попытался внедрить их, мне бы пришлось копировать и вставлять одни и те же блоки
кода снова и снова в каждую страницу, где требуются данные скрипты или таблица
стилей. Мне это кажется пустой тратой времени, если не сказать больше. Браузер по-
сетителя вынужден загружать внедренный код снова и снова в то время, когда присо-
единенные файлы браузер кэширует.
И что даже более важно, если в процессе разработки я захочу изменить что-либо, мне
придется поправить это только в одном месте - в присоединяемом скрипте или табли-
це стилей. Если бы код был внедрен, необходимо было бы проходить по всем экземп-
лярам кода и вносить одинаковые исправления снова и снова. Еще одна пустая трата
времени.
Более того, для тех, кто стремится к стандартизации, консорциум W3C рекомендует
присоединять код, а не внедрять.
Вывод: внедрение отлично подходит для простых одноразовых функций и стилей.
Для всего остального, что, возможно, будет использовано повторно, присоединение
является единственным разумным способом.




4-191
ГЛАВА 13.
Запуск скриптов при помощи ссылок
В старые добрые времена простая гиперссылка выполняла строго определенную зада-
чу: навигацию. Посетитель щелкнул на ссылке и перешел куда-то. Это было так просто.
Даже сегодня навигация остается основным назначением гиперссылок. Однако в Ин-
тернете посетители желают делать больше, чем просто переходить от одной страни-
цы к другой. Они хотят видеть функциональность. Они хотят скрипты и другие ин-
терактивные штучки. Они хотят программные мини-решения.
Когда вы приметесь разрабатывать такие типы интерфейсов, то вскоре поймете,
что что-то на странице должно запускать все эти заказные функции. Логическим вы-
бором является что-либо, на чем можно щелкнуть. Вариантом являются кнопки
HTML-формы. Также подходят и изображения, похожие на кнопки. Подходят также
и гиперссылки. Когда вы бродите по Интернету, щелчок на том, что похоже на гипе-
рссылку, может не иметь ничего общего с навигацией. Вместо этого может быть за-
пущен скрипт.

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

С точки зрения удобства использования, запуск скриптов при помощи гиперссылок
является рискованным делом из-за потенциальных проблем, возникающих на практи-
ке. Если вы не решите, как отличать гиперссылки для запуска скриптов от гиперссьг
лок для навигации, это может очень просто сбить с толку ваших посетителей и рас
строить их надежды относительно того, что произойдет после щелчка на ссылке.
С другой стороны, текстовые гиперссылки являются более привлекательными и
скромными, чем большинство графических кнопок, и они ни капли не похожи на гру-
бые и отталкивающие кнопки HTML-формы. Если использовать гиперссылки, запус-
кающие скрипты, в правильном контексте, они улучшат общий вид и впечатление от
вашего интерфейса, который никогда не будет плохим. Одним из способов запуска
скрипта является создание ссылки, ведущей в никуда, и присвоение результата собы-
тию ссылки onClick, наподобие следующего кода:
<а hrefj="#" onClick="doScript();">Launch the'script</a>
Ну хорошо, с технической точки зрения эта ссылка ведет куда-то. Знак нумерации,
формирующий значение атрибута href, ссылается на текущую страницу, поэтому
щелчок на этой ссылке аналогичен щелчку на кнопке Refresh (Обновить) браузера.
Зачем нужна самоотносящаяся ссылка? Обычный HTML-текст не реагирует на собы-
тие onClick, а гиперссылка - реагирует. Посетителю необходимо предоставить
ГЛАВА 13. Запуск скриптов при помощи ссылок . 99_

что-нибудь, на чем можно щелкнуть* поэтому указывается ссылка, однако мы не хо-
тим, чтобы гиперссылка вела куда-либо. Ссылка, которая, по существу, обновляет стра-
ницу, выглядит, как безобидный компромисс.
Такая стратегия работает достаточно хорошо, однако она может доставить неудоб-
ства, особенно если посетитель вынужден пролистывать страницу, чтобы найти ссыл-
ку. Щелчок на самоотносящейся гиперссылке заставляет браузер перепрыгнуть обрат-
но наверх страницы, так что посетители теряют текущее место в тексте.
Лучшей альтернативой является указание скрипта в значении самого атрибута h r e f ,
наподобие следующего кода:
<а h r e f = " j a v a s c r i p t : d o S c r i p t ( ) ; " > L a u n c h the script</a>
Выполнив это, вы избавитесь от самоотносящейся ссылки, поэтому браузер не будет
перепрыгивать по странице, когда посетитель щелкнет на этой ссылке. Этот способ
лучше для всех. Просто не забывайте указывать фразу j a v a s c r i p t : перед JavaScript-
кодом в значении атрибута h r e f . В противном случае браузер предположит, что зна-
чение атрибута h r e f является путем к странице.




Дневник: JavaScript-ссылки
иди ondick-ссылки?
JavaScript-ссылки, или ссылки со словом j a v a s c r i p t в значении атрибута h r e f , вы-
зывают проблемы у посетителей, которые либо отключили поддержку языка
JavaScript в своем браузере, либо совсем ее не имеют. Боюсь показаться бесчувствен-
ным, но почти во всех случаях количество таких посетителей мало.
В качестве компромисса всегда можно использовать самоотносящиеся ссылки, реаги-
рующие на события onC l i c k . Такие ссылки проще обрабатывать браузерам, не имею-
щим поддержки языка JavaScript, но у вас появится проблема с перескакиванием бра-
узера обратно наверх страницы. Это будет мешать большей части ваших посетителей,
а не помогать.
Если вы действительно хотите оказать внимание пуристам языка HTML, не исполь-
зуйте язык JavaScript на своем сайте. Однако если вы хотите иметь или вам необходи-
ма дополнительная функциональность, JavaScript-ссылки для большинства посетите-
лей работают лучше, чем onClick-ссылки.
ЧАСТЬ 2.
Вопросы, касающиеся макетов

Создание макетов с фиксированной шириной
при помощи таблиц
Дневник: для создания макета использовать
HTML-или CSS-код?
Создание макетов с фиксированной шириной
при помощи таблиц CSS
Центрирование CSS-макетов
с фиксированной шириной
Создание текучих макетов при помощи таблиц
Создание текучих макетов при помощи таблиц CSS
Разделение изображений на срезы
для макетных таблиц
Создание многоколонных макетов
при помощи таблиц
Создание многоколонных макетов
при помощи таблиц CSS
Предотвращение разрыва навигационной панели
Раскрашивание ячеек таблицы
Раскрашивание и форматирование CSS-разделов
Управление пространством дизайна в языке HTML
Управление пространством дизайна
при помощи таблиц CSS
Глава 14.
Создание макетов с фиксированной
шириной при помощи таблиц
В макетах с фиксированной шириной используются абсолютные размеры в пикселах
для определения ширины страницы. Противоположностью макетам с фиксирован-
ной шириной являются текучие макеты и автоматически изменяющиеся макеты,
которые автоматически изменяют свой размер, чтобы умещаться по ширине окна
браузера посетителя. •



Определение
Макеты с фиксированной шириной используют абсолютные размеры
в пикселах для определения ширины страницы.



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


Часто задаваемые вопросы
Где я могу найти сайты, использующие макеты с фиксированной
шириной?
К известным сайтам, использующим макеты с фиксированной шири-
ной, относятся nytim0s.com и yahoo.com. Оба сайта укладывают ог-
ромное количество информации в тщательно разработанные макеты,
требующие точности фиксированной ширины.

Разработка всех хороших макетов для Интернета начинается с эскиза, похожего на
представленный на рисунке 14.3, на котором размечаются основные области страни-
цы. Не создавайте слишком ухищренный дизайн. Атрибуты c o l span и rowspan язы-
ка HTML позволяют строить чрезвычайно сложные таблицы, однако делайте все воз-
можное, чтобы избегать их. Объединения столбцов и строк отлично подходят для таб-
лиц данных или таблиц, представляющих строки и столбцы данных в соответствии со
спецификацией языка HTML. Таблицы макета, которые вы создаете здесь, не соотве-
тствуют спецификации, и браузеры стремятся выполнить враждебные действия по
отношению к дизайну, использующему объединение столбцов и строк.
Строим Web-сайты
102


?t* Bew Favorites loots




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




; * * Randy's
New & Used Planets


Content goes here Content goes here Content floes пега.




Рис. 14.2. Выравнивание макета с фиксированной шириной
по центру улучшает положение вещей
103
ГЛАВА 14. Создание макетов при помощи таблиц



Logo




Рис. 14.3. Начните с создания эскиза макета,
который вы желаете построить, и пометьте области


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

<< Пред. стр.

стр. 10
(общее количество: 51)

ОГЛАВЛЕНИЕ

След. стр. >>