Статьи по Web-дизайну
Аппаратная конфигурация компьютера
Mike Melnikov (cherry-design@mail.ru)Web-studio "Cherry-Design"
То, что описано ниже, предполагает, что Вы хотите сделать красивый и стильный сайт полностью своими руками, т.е. сами рисуете все графические элементы, сами пишете странички, сами сканируете и доводите фотографии...
Итак, какова же аппаратная оснащенность web-дизайнера? Для начала нужно сразу сказать, что Вам потребуется не самый слабый компьютер. Он должен поддерживать разрешение от 800x600 точек при глубине цвета TrueColor, иметь как минимум 32-64M памяти, быть оснащенным CD-ROMом, очень желательно, чтобы были также сканер и звуковая карта. А теперь по порядку: зачем все это нужно.
Автоматическое перенаправление
Все мы рано или поздно сталкиваемся с тем, что сайт меняет хостинг. И в этом случае к нему уже нельзя обратиться по старому адресу. Но ведь нам не хочется терять своих посетителей? Поэтому обычно на старом месте размещают одну страничку с информацией о новом адресе сайта. Но куда более логичным будет сделать так, чтобы в дополнение к информации броузер бы сам перешел по новому адресу. И это нетрудно сделать благодаря META-тегу с параметром "refresh". Вот пример кода:В данном примере мы передали броузеру указание, чтобы он автоматически перешел на страничку по адресу http://www.newaddress.com/ после 3-х секундной задержки. Задержка нужна, чтобы пользователь успел прочитать информацию.
Бегающий указатель
Чем отличаются варианты RollOver с "подсвечиванием пунктов меню" и "бегающим указателем"? Только тем, что во втором случае у нас есть всего две картинки, используемые для всех пунктов меню - пустая и с изображением указателя. Пример использования данного эффекта, можно посмотреть вот здесьВ этом варианте RollOver нам придется слегка изменить HTML-код, описывающий меню, т.к. перед каждым пунктом меню мы добавляем изображение пустого указателя:
Обратите внимание на несколько особенностей. Во-первых, вместо одной функции смены изображения нам понадобятся две, т.к. действия, производимые при попадании курсора в область пункта меню, и покидании ее слегка отличаются. Мы назовем эти функции соответственно over() и out(). Во-вторых, заметьте, что атрибут name, тега
Число параметров, передаваемых функциям можно сократить - достаточно ограничиться именем картинки (атрибут name), т.к. ссылки на изображения, формирующие указатель, нам известны заранее. Код, осуществляющий необходимые действия, теперь выглядит так:
function over(img) { if (browser_ok == 'true') { document.images[img].src = "pic/pointer-on.gif"; } } function out(img) { if (browser_ok == 'true') { document.images[img].src = "pic/pointer.gif"; } }
Осталось разобраться с отличиями, которые присущи третьему варианту эффекта, а именно...
Бойцы невидимого фронта
Mike Melnikov (cherry-design@mail.ru)Web-studio "Cherry-Design"
Если Вы еще не догадались, то я имею в виду META-теги. Их роль не заметна при отображении странички. Это лишь команды для web-сервера или броузера, но команды важные, и правильное использование META-тегов дает нам некоторые преимущества.
Запомните! Все META-теги не несут визуальной информации и должны располагаться в секции документа. В любом другом месте они будут проигнорированы.
Удобнее всего будет, пожалуй, рассказать о МЕТА-тегах на примере повседневных задач, возникающих при верстке. Да и полезней это будет, чем чистая теория.
Броузеры, которые мы выбираем
Mike Melnikov (cherry-design@mail.ru)Web-studio "Cherry-Design"
Теперь давайте поговорим о броузерах. А что о них говорить, скажете Вы, и так все ясно - это программа, при помощи которой мы смотрим Web-странички. Ну что же, это правильно, основное их предназначение заключается в этом - просмотре Web-страничек. Но почему же в мире тогда так много броузеров? И почему они показывают странички по-разному?
Давайте вспомним. Что лежит в основе Web-страничек? Верно, язык HTML, и определятся он как текст в формате ASCII со вставкой специальных разметочных кодов (или тэгов). И когда броузер отображает страничку, то он находит эти коды и выполняет соответствующие им действия (например, встречая тэг начинает вывод последующего текста полужирным шрифтом, а встречая - прекращает это делать). Полный набор таких тэгов называется спецификацией и поддерживается WWW-консорциумом, в который входят все основные компании, разрабатывающие программное обеспечение для Internet (в том числе, и Microsoft с Netscape). В идеале, все броузеры должны удовлетворять данным спецификациям, но, к сожалению, реальная жизнь и конкуренция между ведущими производителями броузеров вносят свои коррективы.
Напомню, что первоначально HTML позиционировался как язык логической разметки текста, независимый от устройства вывода. То есть тэги воспринимались как указание к выделению части текста некоторым образом. Отсюда в языке имеется множество т.н. логических тэгов типа , , : , к сожалению, редко применяющихся. Фраза "независимый от устройства вывода" обозначает, что результат интерпретации HTML-кода может быть выведен не только на экран, но и, к примеру, на звуковую карту (когда компьютер сам будет читать Вам содержимое HTML-странички) или на специальное устройство, воспроизводящее содержимое странички кодом Брайля. Но получилось так, что язык HTML, в конце концов, превратился в язык описания страниц на экране компьютера.
В настоящий момент имеются два броузера, особенности которых должен учитывать web-дизайнер при изготовлении страничек. Это "Netscape Navigator" и "Microsoft Internet Explorer" (а вдруг кто не знает :) На самом деле броузеров гораздо больше, но они все вместе занимают всего около 1% рынка и, как правило, стремятся к совместимости с одним из двух лидеров. Между собой лидирующие броузеры делят рынок в соотношении примерно 75/25 (на данный момент лидирует Internet Explorer). Так что, в дальнейшем будут рассматриваться только эти программы.
CD-ROM
для работы Вам понадобится использовать клипарты и профессиональные фотографии, а они, в основном, распространяются на компакт-дисках. Кроме этого, он пригодится и в том случае, если Вы захотите использовать на своих страничках звук.Что особенного в графике, применяемой на web-страничках?
А то, что она имеет свои определенные ограничения, с которыми мы должны считаться и извлекать из этого выгоду.Для использования в Web применяется два основных формата файлов - GIF и JPG. Сейчас продвигается новый формат для web-графики под названием PNG (произносится "пинг"), но он пока еще мало распространен, и не все броузеры его понимают, поэтому с этим форматом мы пока разбираться не будем.
Итак, приступим к разбору форматов GIF и JPG, опишем их основные свойства и особенности.
Что собой представляет информация?
On-line публикацию статьи или статистические данные, полемику по горячему вопросу или интервью со звездой?Давайте начнем с публикации в Internet книги. Книги рассчитаны на чтение от начала до конца (исключая справочники и словари) - мы к этому привыкли, поэтому и в Internet мы должны поместить ее таким образом, чтобы ее можно было читать от начала и до конца. Гипертекст позволяет организовать оглавление в виде удобных гиперссылок и перейти сразу к нужному разделу; но если человек читает все подряд, то в конце каждого раздела мы должны сделать ссылку на следующий, не заставляя человека пробираться назад в поисках оглавления. Кроме этого, в отличие от обычной книги, в которой то и дело появляются сноски, в HTML-документе такую сноску можно и должно оформить как переход к глоссарию или отдельной страничке, на которой эта сноска объясняется.
В случае опубликования какой-нибудь научной статьи или горячего материала появляются, как правило, отклики и рецензии. Их нужно оформлять как отдельные документы, но в конце рецензируемого документа нужно сделать ссылку на рецензию - это позволит читателю ознакомиться со всеми "за и против".
Теперь рассмотрим случай, когда у нас статистические данные. Как представляется статистика? Правильно - в виде таблиц. А теперь вопрос: Вы любите длиннющие таблицы, в которых можно найти все что угодно через каких-нибудь полчаса после начала исследования? Я - нет. Поэтому надо позаботиться о пользователе и дать ему ту информацию, которая ему интересна (и не обязательно публиковать в Internet всю базу данных). В случае, если информация не помещается в окне броузера и требует скроллирования по горизонтали (О ужас! Они сами смотрят на свои таблицы?), разделите одну большую таблицу на несколько маленьких и легко понятных, а затем свяжите их перекрестными ссылками (на то он и гипертекст :). А если у Вас все же получается длинная таблица, то визуально отделяйте, допустим, каждую пятую строку при помощи изменения цвета ячейки (все современные броузеры это поддерживают).
И в случае, если Ваша статья или таблица занимает больше пяти экранов, разместите в начале краткий список подразделов и от них локальные ссылки в пределах статьи.
Назад | Содержание | Вперед
Что такое объектная модель?
Давным-давно, когда броузеры еще имели номер версии равный единице, ничего подобного не было и в помине. Информация просто выводилась на дисплей по мере поступления, не подвергаясь никаким изменениям. Все было просто, и даже глюков совместимости еще не было :)Сейчас же путь странички до дисплея гораздо дольше. Давайте поэтапно проследим ее путь:
и т.д.) размещаются во временной базе данных соответственно структуре объектной модели.
Разумеется, содержимое базы может быть изменено до вывода на экран, что и позволяет работать DHTML. Но объектная модель остается работать даже после того, как страничка показана на экране дисплея. Это дает нам возможность в небольших пределах (а в последних версиях HTML 4.0 практически полностью) менять содержимое странички после загрузки.
Что такое стильный web-сайт?
Mike Melnikov (cherry-design@mail.ru)Web-studio "Cherry-Design"
Стильный web-сайт - это когда каждая страничка Вашей публикации имеет ярко выраженную принадлежность ко всему web-сайту. Когда легко ориентироваться и поиск информации не сопряжен с опасностью заблудиться и потерять время. Когда странички загружаются менее, чем за минуту. Когда...
Стильность web-сайта достигается несколькими приемами. Можно выделить следующие элементы, участвующие в создании стиля:
Цветовая схема должна повторяться на всех страничках публикации, это создаст у посетителя ощущение связности сайта. Цвета ссылок старайтесь выбирать таким образом, чтобы, с одной стороны, читатель видел, что это ссылка, а с другой стороны, она бы не мешала ему читать основной текст. По поводу ссылок есть два полезных замечания: первое - как бы Вам не хотелось сделать цвета ссылок и посещенных ссылок одинаковыми (без веских на то причин), постарайтесь перебороть себя и придать им немного различия, для этого просто сделайте цвета уже посещенных ссылок чуть темнее; и второе - так уж получилось, что подчеркнутый текст в Web символизирует ссылку, поэтому поборите искушение использовать подчеркнутый текст в публикации, воспользуйтесь другим способом выделения. Вы ведь знаете, что очень неприятно, если, допустим, Ваша рука потянулась к ссылке с целью прочитать подробности, а мышка на нее ноль внимания :(.
Возможно, я упустил некоторые элементы, участвующие в создании стиля, но основные перечислил. Соблюдение этих нехитрых правил позволит придать Вашим страничкам профессиональный вид и сделать информацию на Вашем сайте легкодоступной и быстронаходимой :).
Назад | Содержание | Вперед
Цветные подложки под текст
Вы наверняка видели на сайтах, что некоторые фрагменты текста располагаются на фоне, отличном от основного. Обычно это делается для "врезки" цитат или для выделения части текста, чтобы акцентировать на нем внимание. Такой эффект достигается за счет таблицы с одной ячейкой:| Здесь располагается фрагмент текста. |
Цвет подложки мы можем задавать, используя атрибут bgcolor для таблицы. А чтобы текст на подложке не "прилипал" к границам, мы установим зазор при помощи атрибута cellpadding. Вот, в общем-то, и все, что требуется. И результат будет выглядеть вот так:
| Предположим, что этот текст является цитатой или некой полезной информацией. Обратите внимание, как он выделяется на общем фоне страницы, акцентируя на себе внимание. |
Дата модификации документа
Некоторые web-дизайнеры находят полезным отображать внизу странички дату последней модификации документа. Это делается для того, чтобы посетитель мог определить, насколько часто обновляется сайт. Правда это же накладывает и определенные обязательства по поддержке сайта. Согласитесь, что наблюдать прошлогоднюю дату доставляет мало удовольствия. Но если Вы все же решились использовать этот прием, то следующий скрипт Вам пригодится.Есть два способа добиться нужного нам результата. Первый заключается в том, что строчку с датой вы корректируете вручную, а второй, и он более привлекательный, заключается в использовании свойства lastModified объекта document. Для этого в нужном месте странички достаточно вставить следующую конструкцию:
Для чего это нужно?
Механизм баннеров позволяет оживить страничку и зрительно создать впечатление, что сайт все время меняется. Наиболее полезна эта функция будет для контент-сайтов - очень удобно создавать баннеры для конкретных статей и размещать их в локальной баннерной системе. Лучше всего, конечно, механизм прокрутки баннеров организовать на стороне сервера с применением Perl, PHP или ASP, но не у всех, к сожалению, есть доступ к CGI-скриптам. И, в этом случае, для решения задачи мы можем воспользоваться встроенными скриптовыми языками.Несмотря на то, что я буду объяснять как написать небольшую баннерную систему с использованием JavaScript, изложенные принципы вполне применимы и для любых других языков.
Для чего разрезают изображения?
Ведь проще сразу поместить картинку на страничку! Для этого есть несколько важных причин:Первый - использовать карту изображений. В этом случае где-то в коде мы описываем области изображения, соответствующие ссылкам, и непосредственно сами ссылки. Но эта простота, к сожалению, содержит несколько неприятных особенностей. Во-первых, мы не можем сделать для каждой ссылки свою всплывающую подсказку (ибо она будет общей для всей картинки), и, во вторых, владельцы текстовых броузеров и любители отключать графику не смогут вообще увидеть ссылки, и их придется дублировать где-нибудь при помощи чисто текстовых ссылок.
И вот тогда мы можем воспользоваться вторым, более сложным способом, свободным от всех этих недостатков. Мы разрезаем картинку таким образом, чтобы области, при нажатии на которые будет осуществлен переход, были бы представлены в виде отдельной картинки (или нескольких картинок).
Добавление странички в "Избранное"
Подобно предыдущему скрипту, этот прием также работает лишь под Internet Explorer, но уже начиная с 4-ой версии. И точно такие же замечания по поводу его уместности.Размещая на видном месте ссылку на этот скрипт, мы позволяем пользователю при помощи одного щелчка добавить наш сайт в папку "Избранное". А сам скрипт выглядит следующим образом:
Добавить сайт в Избранное
Другие полезные META-теги
Кроме описанных выше тегов есть еще несколько, которые часто встречаются на web-страничках.К примеру, META-тег с параметром "author" служит для указания автора странички и учитывается некоторыми поисковыми системами. И вообще у каждой странички должен быть автор, так что имеет смысл пользоваться этим тегом.
Похожий META-тег с параметром "generator" автоматически проставляется различными HTML-редакторами и содержит информацию о программе, в которой была сделана страничка. Хотя смысла от этого тега, IMHO, немного. Некоторые авторы в его описании дублируют информацию META-тега "author".
Еще одно частое использование META-тега - это указание языка, на котором написана страничка. Например, для того, чтобы сказать броузеру, что наша страничка русская и содержит текст в кодировке Win-1251, мы должны написать следующий код:
Но пользоваться этой возможностью следует очень осторожно, так как она порождает определенные проблемы, которые могут привести к тому, что текст на страничке станет нечитаемым. Более подробно об этом в следующей статье.
Конечно, здесь описаны далеко не все META-теги, я постарался описать лишь самые употребляемые и полезные. Оставшиеся используются гораздо реже и если они Вам понадобятся, то Вы всегда сможете прочитать о них в любом хорошем HTML-справочнике.
Назад | Содержание | Вперед
_Footer.shtml
Как видите, основной документ предельно упрощен и состоит из директив, устанавливающих значения переменных title, keywords и description, которые и будут подставлены в код странички при обработке SSI-вставок, определяющих код для верхней и нижней частей странички. Реальный код SSI-вставок обычно гораздо сложнее и может включать в себя большее количество определяемых переменных и сложных условий, формирующих окончательный вид странички.
Первое преимущество SSI с точки зрения дизайнера заключается в том, что при таком подходе web-мастеру, занимающимуся поддержкой сайта, можно не бояться случайно испортить дизайн. Элементы сложной верстки скрыты за счет использования SSI, и поддержка содержимого страничек становится гораздо более легким и приятным делом.
Второе, не менее важное преимущество, - это возможность мгновенной замены дизайна сайта, не требующая переделывания страничек с информационным содержанием сайта. Для смены дизайна достаточно переписать SSI-вставки, формирующие внешний вид сайта. В нашем случае это файлы _header.shtml и _footer.shtml.
Вот, вкратце то, что можно рассказать о SSI. Если Вас это заинтересовало, то возможно Вам будет интересно прочитать статью на сайте web-клуба, где об этом написано более подробно и приведен полный список SSI-директив с примерами.
Назад | Содержание | Вперед
Формат GIF
А теперь немножко разъяснений - к чему эти свойства могут привести. Как Вы прочитали, GIF поддерживает не больше 256 цветов, а это значит, что все изображения, которые мы сохраняем в GIF-формате, явно или неявно уменьшают количество цветов, чтобы уложиться в этот лимит (разные программы с разным успехом). А отсюда вывод - если у Вас красивая фотография с плавными переходами и едва уловимыми оттенками цвета, то после преобразования все будет гораздо хуже - оттенки перестанут быть неуловимыми, и вся фотография приобретет неестественный, нереалистичный вид. Поэтому, если Вы хотите все-таки сохранить фотографию в формате GIF и передать все оттенки, то приходится идти на хитрости. Например, к фотографии можно применить какой-нибудь художественный фильтр и превратить ее в рисунок или применить тонирование. Зато нет никаких проблем с сохранением рисунков и чертежей в этом формате, они, как правило, хорошо сжимаются и не содержат много цветов.
А теперь рассмотрим свойства и особенности второго популярнейшего формата в сети.
Формат JPEG
Пожалуй, это все преимущества формата JPG, и основное его предназначение - хранение изображений фотографического качества.
Всю работу по обработке графики делайте в промежуточном формате
Ну вот, с форматами разобрались, теперь рассмотрим некоторые особенности работы с графикой. Несмотря на то, что мы сохраняем изображения в GIF-файле с поддержкой 256 цветов или в JPG-файле с 16,7 млн. цветов, работать с изображением нужно в каком-нибудь промежуточном формате, который позволяет сохранять картинку без искажений и без потери глубины цвета (например, TIFF и внутренние форматы редакторов типа PSD). Дело в том, что в процессе работы Вам понадобится многократно изменять или искажать изображение, что, в конце концов, приводит к многократной перезаписи файла. Многократная запись в формате GIF приведет к тому, что потеряются оттенки изображения, а в формате JPG - каждая новая перезапись файла будет вносить новые искажения, и через некоторое время фотография будет выглядеть ужасно. Поэтому всю работу по обработке графики делайте в промежуточном формате (и не смущайтесь огромными размерами файла) и только на самом последнем этапе преобразуйте изображение в нужный формат (часто - одновременно с оптимизацией размера файла).
Фрагментарная оптимизация
Фрагментарная оптимизация применяется в случае, если у нас есть некоторое большое изображение, содержащее сильно отличающиеся по количеству цветов области. В этом случае изображение можно разрезать на фрагменты и поместить их в таблицу, тогда в броузере оно будет выглядеть как единое целое. Теперь каждый фрагмент исходного рисунка мы оптимизируем отдельно. Для фрагментов, содержащих мало цветов, вполне может хватить палитры в 8 или 16 цветов, а для богатых цветами фрагментов можно использовать полную палитру в 256 цветов или сохранить в формате JPG. Этот способ позволяет уменьшить объем, занимаемый исходным файлом, примерно раза в 2-3 (в зависимости от конкретного изображения); кроме того, изображение будет загружаться более равномерно, т.к. все фрагменты будут качаться параллельно. Хотя, если количество фрагментов превысит 10, то возможного выигрыша и не получится, т.к. каждый фрагмент должен будет хранить свою копию палитры и служебной информации.Функция проверки формы перед отправкой
А теперь перейдем к главному - к написанию той самой функции, что будет непосредственно осуществлять проверку формы. Давайте подумаем, что нам от нее требуется? Ну, во-первых, проверить, что нужные поля заполнены, а во-вторых, отослать форму. В случае же, если несколько из обязательных полей пусты, нам нужно сформировать об этом сообщение пользователю и переместить курсор на соответствующий элемент.Для начала напишем общую обвязку функции:
Примененный нами способ вызова функции через событие onSubmit в качестве результата работы функции требует возврата одного из логических значений: true или false. И, в зависимости от этого значения, форма либо будет отправлена, либо нет.
Теперь попробуем написать проверочную функцию, привязанную к данной конретной форме. Как Вы помните, необходимых для заполнения полей у нас всего два: имя посетителя и его электронный адрес. Самое простое - это проверить содержимое каждого из обязательных полей на отсутствие текста:
Свойство href объекта location содержит адрес текущей страницы, который, кстати, можно в любой момент прочитать. И если мы при помощи скрипта поместим в эту переменную адрес какой-либо другой странички, то броузер немедленно осуществит переход.
Второй прием - это передача скрипту параметров при помощи адресной строки (так называемый метод GET). Осуществляется это добавлением к адресу странички знака '?' (вопрос) и перечислением после него всех необходимых переменных и их значений. Если переменных несколько, то они отделяются друг от друга при помощи знака '&' (амперсанд). Вот несколько примеров передачи параметров посредством метода GET:
http://www.domain.com/page.htm?name=John&id=1986321
search.php?keyword=design&area=title&type=full
guestbook.asp?page=2
Вы наверняка видели подобные конструкции на сайтах интернет-магазинов и при запросах поисковых систем.
Для нашего случая этот прием обозначает следующее - мы можем передать главной страничке, которая формирует фреймы - адрес странички, на которую попал пользователь. А уж на страничке-контейнере обработать этот адрес и создать нужные фреймы.
Код, который приведен ниже, должен быть размещен в начале каждой внутренней страницы, которая выводится во фрейме:
Заметьте, что конструкция несколько сложнее, чем я описал выше. В качестве параметра адреса я использовал свойство pathname объекта location, которое содержит полный путь текущей странички от корня сайта (для любопытных - location.href - содержит абсолютный адрес странички, включая название протокола и имя домена).
Если мы немного подумаем, то поймем, что перед автоматическим редиректом на новую страничку необходимо проверить - а не открыта ли страничка во фрейме? Иначе мы получим эффект бесконечного редиректа, когда странички будут все время открываться, пока компьютер не зависнет ввиду недостатка ресурсов. Окончательный код должен выглядеть вот так:
Т.е. мы читаем количество фреймов на родительской страничке и если это значение равно нулю (т.е. родителя нет), то мы осуществляем переход. В противном случае страничка загружена во фрейме и необходимости в редиректе нет.
Хорошо, мы передали главной страничке-контейнеру адрес странички, на которую попал пользователь, теперь необходимо создать нужную фреймовую структуру. Так как мы заранее не знаем, какая страничка будет во внутреннем фрейме, то мы не можем написать код для организации фреймов непосредственно. Это придется делать при помощи команд JavaScript:
Сейчас мы слегка модифицируем этот скрипт, чтобы в основной фрейм грузилась не страничка по умолчанию (content.htm), а наша внутренняя страничка. Но сначала придется из адресной строки узнать, какую же страничку грузить.
Для обработки переменных, передаваемых в адресной строке, JavaScript нам предоставляет свойство search объекта location (право, очень удобный объект - без его помощи мы не смогли бы сделать то, что делаем :). Данное свойство хранит в себе адрес строки запроса, которая располагается сразу после знака '?'. Т.е. оно содержит адрес нашей внутренней странички (!). Но использовать это значение пока рано, т.к. строка запроса содержит и начальный знак вопроса. Поэтому для начала нам необходимо его отрезать:
var string = location.search;
var current_page=string.substring (1, string.length);
А теперь я приведу полный, модифицированный вариант скрипта:
Кроме формирования фрейма, в который будет грузиться наша страничка, что обеспечивается следующим фрагментом:
document.write('');
мы также отслеживаем случай загрузки индексного файла, когда ему не передан адрес внутренней странички (например, пользователь сразу набрал главный адрес сайта), и в этом случае грузим обычную страничку по умолчанию (content.htm).
Вот, в общем-то, и все - мы справились с проблемой внутренних страниц. Осталось только сделать несколько замечаний и пояснений.
Применение метода GET для передачи адреса внутренней странички затрудняет использование других переменных, которые мы также хотим передать методом GET. Для реализации такого эффекта скрипт еще более усложнится, т.к. придется отслеживать все переменные, которые мы передаем, и, соответственно, формировать более сложную строчку для редиректа. Кроме того, если эти переменные предназначаются внутренней страничке, то подобный механизм передачи значений переменных придется реализовать и в индексном файле при формировании фреймов.
Внимательный читатель может заметить, что я использую не классическую форму передачи параметров (т.е. value=param), а сокращенную - сразу передавая нужное значение. Это возможно в простых скриптах и несколько облегчает их написание. Тем не менее, такой способ не позволяет нам передавать более одной переменной.
Основной индексный файл мы формируем при помощи конструкций JavaScript. А что будет, если на сайт зайдет человек с броузером, который не поддерживает JavaScript? В этом случае мы вообще ничего не увидим, ведь сформировать фреймы будет некому. Так что для разрешения этой проблемы мы воспользуемся тегами , внутри которых разместим обычное описание фреймов.
Позволь, дорогой читатель, я еще раз полностью приведу код индексной странички, в которой учтены все эти необходимые мелочи и особенности:
Как поставить ссылку на внутреннюю страничку?
Осталось только одна проблема. Та самая, что указана в заголовке. Механизм формирования фреймовой структуры при ссылке на внутреннюю страничку мы уже разобрали, так что проблем со ссылкой на внутреннюю страницу не будет. А вот как пользователю сделать закладку на нужной страничке?
Самый простой, но достаточно эффективный способ - размещать в начале или в конце странички ссылку на страничку без фреймов. Разумеется, это можно делать не на всех страничках, а лишь на тех, что представляют самостоятельный интерес - например, статьи. Кстати, можно совместить ссылку с версией странички для печати - будет очень удачно.
А второй способ - опять же использование JavaScript, но он, к сожалению, ограничен только версиями Internet Explorer выше 5.0. По крайней мере, пока. Данный способ добавления странички в избранное я описывал раньше, поэтому не буду здесь повторяться. Те, кого это заинтересовало, могут прочитать об этом вот здесь.
Как видите, преодоление недостатков фреймов процесс достаточно хлопотный и неинтуитивный. Так что решайте сами - использовать Вам фреймы или поискать другие, более удобные способы, которые решат Ваши проблемы.
Архив с примерами скриптов, рассмотренных в данной статье, можно взять отсюда.
Назад | Содержание | Вперед