Dreamweaver — создайте свою мечту
Уже достаточно долгое время компания Macromedia является признанным лидером в области создания программного обеспечения для редактирования страниц Internet. И хотя продукты этой компании не так известны в нашей стране, тем не менее, на них стоит обратить внимание любому порядочному web-мастеру — Web требует отдельного внимания — и не всегда продукты от Microsoft действительно являются лучшими. Dreamweaver является профессиональным средством написания и редактирования Web-страниц. С его помощью можно создавать кросс-платформенные и кросс-браузерные страницы.
(c) Компьютерная газета
Для Dreamweaver также возможно создание кода в Dynamic HTML (включая анимационные подложки и простейший java-script) без того, чтобы копаться самому в исходном коде.
Создавая свой собственный (равно как и корпоративный) сайт, следует иметь в виду, что простота — не всегда хуже воровства. Зачем создавать нечто особенно выдающееся, если половина серферов выключает графику, другая половина пользуется устаревшими браузерами и все равно ничего не оценит? Если информация интересна, — следуйте простым решениям. Посмотрите на другие сайты — простота отличает их все. Возьмем, к примеру, Amzon.com и Barnes & Noble. Выглядят они практически одинаково. Любой поисковый портал Internet тоже в значительной степени напоминает другой. Их всех отличает исключительный прагматизм. И его громадные конгломераты используют простой дизайн — может вам тоже стоит?
Кроме того, планируя сайт не забывайте, что если сайт на русском — значит он предназначен для русскоязычной публики. А RuNet — не самый быстрый. Счастливы те, у кого модемы по скорости выше 28,8 Kbps. У многих — ниже. Исходя из этого, среднее загрузочное время не должно быть больше 15 секунд (после того, естественно, как соединились с хостом) — иначе серферу просто станет скучно и он уйдет на другой сайт.
Еще в общих советах хотелось бы указать, что проверять созданную страничку желательно во всех возможных браузерах. Очевидно, что список включает в себя Netscape Communicator и Internet Explorer. Не много людей пользуются чем-то другим (хотя Opera и NeoPlanet уже начинают завоевывать свою популярность), но кто знает? И не обязательно тесты проводить на последних версиях, которыми сами пользуетесь. Несколько крупнейших сайтов при обновлении тестируются на Netscape Navigator 2.0 (понятное дело, что на IE 2.0 тестировать любят только самые извращенные мазохисты).
Самое начало работы
Если у вас уже установлен Dreamweave, то вы сразу можете начинать работу. Вообще, его можно скачать из Internet'a ( http://www.macromedia.com — 12 Mb) или купить на Ждановичах. В последнем случае вам дадут на компакте еще парочку продуктов от Macromedia (включая Director, Flash 4, Fireworks, Shockwave).
Интерфейс Dreamweaver достаточно интуитивен. Сразу при запуске включается окно документа, Launcher (Панель запуска), Object Palette (Палитра объектов) и Propriety Manager (Менеджер свойств). Launcher и Propriety Manager являются самыми революционными нововведениями в области редактирования Web-страниц. Согласитесь, легко и удобно генерировать код из Word'а. Но кто знает, как это все будет выглядеть в окне браузера? А окошко Dreamweaver позволяет даже в процессе редактирования достаточно точно отображать будущее состояние документа в браузере. (Кстати, там снизу есть окошко, в котором отображается размер документа и среднее время загрузки, причем все это можно настраивать). Launcher содержит всего шесть кнопок (которые продублированы в Mini Launcher, который находится в нижней части окна документа) — Site (Сайт), Library (Библиотека), Style (Стиль), Behavior (Поведение), Time Line, HTML. Кнопка Site отображает текущий сайт (local site), который вы редактируете. Очень полезно и удобно, если у вас много страничек на сайте, а также большое количество графики. Кроме того, в окне Site есть возможность дозагрузки сайта на ftp адрес — правда, сия опция не всегда хорошо работает. Единственное, что для начала работы желательно определить, — этот самый сайт (File>New Site).
Определив таким образов ваш будущий сайт (в диалоге желательно указать всю необходимую информацию; работать будет и без этого, но зато потом легче выравнивать окончательный html код), у вас окажется редактируемой первая страница сайта.
Существует множество способов сделать первую страницу (index.html) сайта. Самый популярный (особенное, если есть и другие страницы, а также множественность рассматриваемых тем) — это разбиение страницы на рамки (frame). Ни в одном из редакторов это не делалось так просто, как в Dreamwever'е. Данный способ означает, что страница разделена на две части, в одной находится навигационное меню и ее загрузка происходит один раз, а в другой — выводятся подчиненные страницы. Меню Modify>Frameset дает вам возможность разделить текущий фрейм на два. Причем оба из них могут быть навигаторами по отношению друг к другу. Но об этом позже.
Второй способ предполагает наличие навигационной строки в каждой странице — вверху и внизу (обычно). Таким образом, упрощается восприятие информации и экономится большое место. Но необходимо учесть, что делается это в ущерб размеру самой странички.
Третий способ (отсутствие какой-либо навигации принципиально) мы рассматривать не будем по объективным причинам.
Четвертый способ предлагает навигацию путем размещения видимых и невидимых слоев (layers). Тут о размере страницы просто глупо говорить, поскольку львиную долю кода будет занимать script определения этих самых слоев — однако эффектность такого выбора может быть просто поразительна.
Перед созданием сайта обязательно решите, который из способов максимально подходит для выбранной вами темы (ведь всю информацию можно разместить и на одной единственной странице).
Перед созданием любых других элементов страницы хочется особенно указать на то, что содержание заголовков (HEAD) страницы также немаловажно. Причем это возможно сделать и без прямого редактирования html кода. В меню Object Palette>Head выберите необходимые вам элемента. Помните, что если сайт (или страница) будет на русском языке, вам необходимо выбирать между кодировкой Win1251 и KOI-8 (или вообще использовать UTF-8).
Поскольку поисковые роботы регулярно осматривают адреса в Web, стоит воспользоваться ключами HEAD. В любом случае когда-нибудь ваша страница попадет на поисковой робот и кто-нибудь ее найдет. Самыми важными в этом случае будут для робота поля KEYWORDS (вводить через запятую) и DESCRIPTION (описание, можно много-много-много символов). Для любителей пообманывать баннерные системы можно вставлять метки REFRESH. Но если об этом узнают, у вас могут быть проблемы (считается хорошим тоном не обновлять страницу, раз она уже загрузилась. Или хотя бы только один раз — после того, как она загрузилась).
BASE HREF — это базовый адрес, по отношению к которому будут рассматриваться все относительные ссылки. В основном используется, если сервер не поддерживает относительные ссылки (URL) типа whatever.html. Если ваша базовая ссылка <BASE HREF="http://www.angelfire.con/ne/kirionis">, то в таком случае whatever.html браузер будет искать именно в каталоге BASE HREF.
Определив таким образом заголовок страницы, перейдем к непосредственному созданию раскладки.
Взяв за пример первый вариант (frames), в меню Modify>Frameset следует выбрать, как будет расположена навигационная строка (или столбец) — слева, справа, сверху или снизу. Стандартно, ее располагают слева, следовательно, следует выбирать Split Left. Окно документа будет разделено на две части — и сами рамки будут выделены. Теперь их можно перетаскивать с помощью мышки, чтобы подобрать максимально удобный размер, либо воспользоваться для этого Proprieties Manager. В нем возможно изменение таких параметров frameset, как ширина границы (или ее отсутствие), цвет границы, определение размеров. Если навигационный фрейм состоит из кнопочек, то его ширину лучше указать в пикселях, а остальное — в 100%. Таким образом, ширина навигационного фрейма будет неизменной вне зависимости от ширины окна браузера.
В любой момент параметры фреймов можно изменить, если нажать на внешнюю границу возле левого края окна документа.
Необходимо сохранить весь frameset, включая отдельные фреймы (File>Save All). При сохранении будет выделен именно тот фрейм, который в данный момент сохраняется (хотя первым будет запрошено сохранение именно для главной страницы).
Далее необходимо определить имена фреймов — использование имен в значительной степени облегчает программирование ссылок. Для этого необходимо выделить весь frameset и включить редактор HTML.
В строке определения фрейма внутри метки <frame src="..."> необходимо добавить Name="Nav", где Nav — это название фрейма. Определив таким образом фрейм # 0 — left_up, 1 — left, 2 — nav и 3 — main, продолжим создание сайта.
Создание взаимозависимых фреймов.
Часто возникает надобность разбиения страницы на несколько фреймов. В таком случае при выборе определенной ссылки необходимо, чтобы данные в нескольких фреймах обновлялись одновременно.
Учитывая, что в предыдущем примере фреймы названы nav (навигатор сверху страницы), left_up (логотип слева вверху), left, (внутренний навигатор слева) и main (основной фрейм), создадим в редакторе кода следующий JavaScript между метками <HEAD>...</HEAD>:
<SCRIPT LANGUAGE="JavaScript">
<!-
function frame_update()
{
parent.frames[1].location="logo_2.htm";
parent.frames[2].location="nav_left_2.htm";
}
// —>
</SCRIPT>
В данном примере загружаются в определенные фреймы определенные документы. Фреймы нумеруются самим браузером, начиная с нуля, из верхнего левого угла экрана, спускаясь вниз. В нашем примере — nav.html — фрейм # 0, left_up.html — # 1, left.html — # 2, main.html — # 3. Но одного скрипта будет мало — необходимо, чтобы он срабатывал в момент выбора определенной ссылки, обновляя данные в определенных фреймах.
<A HREF="main2.html" target="Main" OnClick="frame_update()">Новые проекты</A>
Таким образом, обновятся данные во фрейме main — (target="Main"), left_up и left — последние два через скрипт.
Такую же функцию можно написать на VisualBasicScript:
<SCRIPT LANGUAGE="VBScript">
<!-
function frame_update()
parent.frames(1).location="logo_2.htm"
parent.frames(2).location="nav_left_2.htm"
end function
// ->
</SCRIPT>
VBScript использует вместо [квадратных скобок] (круглые) и, кроме того, не требует точки с запятой в конце каждой строки, а также не требует {фигурных скобок} для отграничения функций.
Ссылка будет выглядеть аналогично:
<A HREF="main2.html" target="Main" OnClick="frame_update()">Новые проекты</A>
(VBScript будет работать только на Internet Explorer — в отличие от jS, который будет работать везде).
Оба примера позволяют загружать документы с фиксированными именами. Очевидно, что если ссылок много и они ведут к разным страницам, — приведенный выше jS неэффективен, поскольку jS необходим для каждой ссылки. Гораздо лучше использовать параметральные скрипты.
<SCRIPT LANGUAGE="JavaScript">
<!-
function frame_update(URL1,URL2)
{
parent.frames[2].location=URL1;
parent.frames[3].location=URL2;
}
// ->
</SCRIPT>
Данный скрипт позволяет передавать скрипту URL's, как параметры. В данном случае ссылка будет выглядеть следующим образом:
<A HREF="main2.html " OnClick="frame_update('logo_2.html', 'nav_left_2.html')">новые проекты</A>
Аналог jS в VBScript будет выглядеть следующим образом:
<SCRIPT LANGUAGE="VBScript">
<!-
function frame_update(URL1,URL2)
parent.frames(2).location=URL1
parent.frames(3).location=URL2
end function
// ->
</SCRIPT>
<A HREF="main2.html " OnClick="call frame_update('logo_2.html', 'nav_left_2.html')">новые проекты</A>
Обратите внимание, что в последнем примере используется ключевое слово call для вызова данной функции.
Возможно использование имен фреймов, которые определены внутри метки <FRAME> NAME="...". В частности, следующим образом:
<SCRIPT LANGUAGE="JavaScript">
<!—
function frame_update(frame1, frame2, URL1,URL2)
{
parent.frames[frame1].location=URL1;
parent.frames[frame2].location=URL2;
}
// ->
</SCRIPT>
<A HREF="main2.html " OnClick="frame_update('left_up', 'left','logo_2.html', 'nav_left_2.html')">Новые проекты</A>
Таким же образом можно устроить кнопку Назад прямо на странице.
Возможен второй вариант — когда возврат делается через отдельный jS, но это действует только в двухфреймовых и безфреймовых документах. Вот пример такого jS:
<SCRIPT LANGUAGE="JavaScript">
<!—
function retrace()
{
history.back()
}
// ->
</SCRIPT>
Если вы хотите, то можете сделать текстовый линк:
<A HREF="#back" OnClick="retrace()">Go back</A>
картинку
<a href="#" onclick="retrace()"><img src="button.gif" width="75" height="30" border="0"></a>kg93610b.br> или красивую кнопочку
<FORM>
<INPUT TYPE="BUTTON" NAME="GOBACK" VALUE="Вернуться" OnCLick="retrace()">
</FORM> Преимущество такого скрипта в том, что он обращается к документам, находящимся в кэше вашего браузера (что существенно повлияет на скорость загрузки): так что если динамичных данных на странице нет — можете смело применять эту функцию.
Мы рассмотрели вариант в разбиением сайта на фреймы. Существует, как уже указывалось, способ с навигационной строкой вверху и внизу сайта.
Данный вариант позволяет использовать такую возможность браузера, как использование библиотечных объектов.
Для этого на нашей основной странице создадим список ссылок просто в ряд, желательно мелкими буквами (это будет дополнительная навигационная строка, которую мы поместим снизу страницы). Выделив все, что должно повторяться на каждой странице, включите окно Library — кнопка Create будет подсвечена (Modify>Library>Add Object to Library). Далее необходимо дать объекту название — и теперь его можно использовать напрямую (т.е. не создавать заново весь код вручную, а делать просто ссылки на имя_этого_файла.lbi).
Если проверить исходный код в HTML, то внутри будет метка <!- #BeginLibraryItem "/Library/Navpage.lbi" ->, которая означает наличие инструкций по вставке другого файла. Таким же образом (если вы не уверены в таком файле) можно вставить в исходный текст одной страницы текст другого документа (который также можно менять). Единственное, о чем необходимо позаботиться, — это о наличии поддержки SSI+ (Server-Side Instructions+), т.к. исходный код обращается именно к серверу. Возможности SSI+ очень широки — и обычно то, для чего потребовался бы CGI скрипт, можно сделать и без такового.
Если вы хотите вставить HTML документ в текст другого документа, можно воспользоваться командой —
<!-#include virtual="another.html"->
Текст документа не отражается в исходнике, а загружается непосредственно с сервера. Очевидно, что возможности SSI+ очень широки.
У каждого способа есть свои преимущества и недостатки, однако их объединяет одно качество. Если у вас динамичный сайт, особенно, если он новый или регулярно обновляемый свежей информацией, разбитой на много страниц, — такой способ безусловно привлекателен. Если вы используете такой файл как навигатор, то никаких проблем не возникает с редактированием все увеличивающегося числа страниц — просто изменяется навигатор (либо navpage.lbi либо another.html). Различие в том, что HTML документ, если вы собираетесь использовать его именно так, не должен содержать обязательных для всех других документов меток <HTML>, <HEAD> и так далее — там должен быть чистый код без границ.
Продолжение следует
Кирилл "Sedai" КАЛИТА
(c) Компьютерная газета
Для Dreamweaver также возможно создание кода в Dynamic HTML (включая анимационные подложки и простейший java-script) без того, чтобы копаться самому в исходном коде.
Создавая свой собственный (равно как и корпоративный) сайт, следует иметь в виду, что простота — не всегда хуже воровства. Зачем создавать нечто особенно выдающееся, если половина серферов выключает графику, другая половина пользуется устаревшими браузерами и все равно ничего не оценит? Если информация интересна, — следуйте простым решениям. Посмотрите на другие сайты — простота отличает их все. Возьмем, к примеру, Amzon.com и Barnes & Noble. Выглядят они практически одинаково. Любой поисковый портал Internet тоже в значительной степени напоминает другой. Их всех отличает исключительный прагматизм. И его громадные конгломераты используют простой дизайн — может вам тоже стоит?
Кроме того, планируя сайт не забывайте, что если сайт на русском — значит он предназначен для русскоязычной публики. А RuNet — не самый быстрый. Счастливы те, у кого модемы по скорости выше 28,8 Kbps. У многих — ниже. Исходя из этого, среднее загрузочное время не должно быть больше 15 секунд (после того, естественно, как соединились с хостом) — иначе серферу просто станет скучно и он уйдет на другой сайт.
Еще в общих советах хотелось бы указать, что проверять созданную страничку желательно во всех возможных браузерах. Очевидно, что список включает в себя Netscape Communicator и Internet Explorer. Не много людей пользуются чем-то другим (хотя Opera и NeoPlanet уже начинают завоевывать свою популярность), но кто знает? И не обязательно тесты проводить на последних версиях, которыми сами пользуетесь. Несколько крупнейших сайтов при обновлении тестируются на Netscape Navigator 2.0 (понятное дело, что на IE 2.0 тестировать любят только самые извращенные мазохисты).
Самое начало работы
Если у вас уже установлен Dreamweave, то вы сразу можете начинать работу. Вообще, его можно скачать из Internet'a ( http://www.macromedia.com — 12 Mb) или купить на Ждановичах. В последнем случае вам дадут на компакте еще парочку продуктов от Macromedia (включая Director, Flash 4, Fireworks, Shockwave).
Интерфейс Dreamweaver достаточно интуитивен. Сразу при запуске включается окно документа, Launcher (Панель запуска), Object Palette (Палитра объектов) и Propriety Manager (Менеджер свойств). Launcher и Propriety Manager являются самыми революционными нововведениями в области редактирования Web-страниц. Согласитесь, легко и удобно генерировать код из Word'а. Но кто знает, как это все будет выглядеть в окне браузера? А окошко Dreamweaver позволяет даже в процессе редактирования достаточно точно отображать будущее состояние документа в браузере. (Кстати, там снизу есть окошко, в котором отображается размер документа и среднее время загрузки, причем все это можно настраивать). Launcher содержит всего шесть кнопок (которые продублированы в Mini Launcher, который находится в нижней части окна документа) — Site (Сайт), Library (Библиотека), Style (Стиль), Behavior (Поведение), Time Line, HTML. Кнопка Site отображает текущий сайт (local site), который вы редактируете. Очень полезно и удобно, если у вас много страничек на сайте, а также большое количество графики. Кроме того, в окне Site есть возможность дозагрузки сайта на ftp адрес — правда, сия опция не всегда хорошо работает. Единственное, что для начала работы желательно определить, — этот самый сайт (File>New Site).
Определив таким образов ваш будущий сайт (в диалоге желательно указать всю необходимую информацию; работать будет и без этого, но зато потом легче выравнивать окончательный html код), у вас окажется редактируемой первая страница сайта.
Существует множество способов сделать первую страницу (index.html) сайта. Самый популярный (особенное, если есть и другие страницы, а также множественность рассматриваемых тем) — это разбиение страницы на рамки (frame). Ни в одном из редакторов это не делалось так просто, как в Dreamwever'е. Данный способ означает, что страница разделена на две части, в одной находится навигационное меню и ее загрузка происходит один раз, а в другой — выводятся подчиненные страницы. Меню Modify>Frameset дает вам возможность разделить текущий фрейм на два. Причем оба из них могут быть навигаторами по отношению друг к другу. Но об этом позже.
Второй способ предполагает наличие навигационной строки в каждой странице — вверху и внизу (обычно). Таким образом, упрощается восприятие информации и экономится большое место. Но необходимо учесть, что делается это в ущерб размеру самой странички.
Третий способ (отсутствие какой-либо навигации принципиально) мы рассматривать не будем по объективным причинам.
Четвертый способ предлагает навигацию путем размещения видимых и невидимых слоев (layers). Тут о размере страницы просто глупо говорить, поскольку львиную долю кода будет занимать script определения этих самых слоев — однако эффектность такого выбора может быть просто поразительна.
Перед созданием сайта обязательно решите, который из способов максимально подходит для выбранной вами темы (ведь всю информацию можно разместить и на одной единственной странице).
Перед созданием любых других элементов страницы хочется особенно указать на то, что содержание заголовков (HEAD) страницы также немаловажно. Причем это возможно сделать и без прямого редактирования html кода. В меню Object Palette>Head выберите необходимые вам элемента. Помните, что если сайт (или страница) будет на русском языке, вам необходимо выбирать между кодировкой Win1251 и KOI-8 (или вообще использовать UTF-8).
Поскольку поисковые роботы регулярно осматривают адреса в Web, стоит воспользоваться ключами HEAD. В любом случае когда-нибудь ваша страница попадет на поисковой робот и кто-нибудь ее найдет. Самыми важными в этом случае будут для робота поля KEYWORDS (вводить через запятую) и DESCRIPTION (описание, можно много-много-много символов). Для любителей пообманывать баннерные системы можно вставлять метки REFRESH. Но если об этом узнают, у вас могут быть проблемы (считается хорошим тоном не обновлять страницу, раз она уже загрузилась. Или хотя бы только один раз — после того, как она загрузилась).
BASE HREF — это базовый адрес, по отношению к которому будут рассматриваться все относительные ссылки. В основном используется, если сервер не поддерживает относительные ссылки (URL) типа whatever.html. Если ваша базовая ссылка <BASE HREF="http://www.angelfire.con/ne/kirionis">, то в таком случае whatever.html браузер будет искать именно в каталоге BASE HREF.
Определив таким образом заголовок страницы, перейдем к непосредственному созданию раскладки.
Взяв за пример первый вариант (frames), в меню Modify>Frameset следует выбрать, как будет расположена навигационная строка (или столбец) — слева, справа, сверху или снизу. Стандартно, ее располагают слева, следовательно, следует выбирать Split Left. Окно документа будет разделено на две части — и сами рамки будут выделены. Теперь их можно перетаскивать с помощью мышки, чтобы подобрать максимально удобный размер, либо воспользоваться для этого Proprieties Manager. В нем возможно изменение таких параметров frameset, как ширина границы (или ее отсутствие), цвет границы, определение размеров. Если навигационный фрейм состоит из кнопочек, то его ширину лучше указать в пикселях, а остальное — в 100%. Таким образом, ширина навигационного фрейма будет неизменной вне зависимости от ширины окна браузера.
В любой момент параметры фреймов можно изменить, если нажать на внешнюю границу возле левого края окна документа.
Необходимо сохранить весь frameset, включая отдельные фреймы (File>Save All). При сохранении будет выделен именно тот фрейм, который в данный момент сохраняется (хотя первым будет запрошено сохранение именно для главной страницы).
Далее необходимо определить имена фреймов — использование имен в значительной степени облегчает программирование ссылок. Для этого необходимо выделить весь frameset и включить редактор HTML.
В строке определения фрейма внутри метки <frame src="..."> необходимо добавить Name="Nav", где Nav — это название фрейма. Определив таким образом фрейм # 0 — left_up, 1 — left, 2 — nav и 3 — main, продолжим создание сайта.
Создание взаимозависимых фреймов.
Часто возникает надобность разбиения страницы на несколько фреймов. В таком случае при выборе определенной ссылки необходимо, чтобы данные в нескольких фреймах обновлялись одновременно.
Учитывая, что в предыдущем примере фреймы названы nav (навигатор сверху страницы), left_up (логотип слева вверху), left, (внутренний навигатор слева) и main (основной фрейм), создадим в редакторе кода следующий JavaScript между метками <HEAD>...</HEAD>:
<SCRIPT LANGUAGE="JavaScript">
<!-
function frame_update()
{
parent.frames[1].location="logo_2.htm";
parent.frames[2].location="nav_left_2.htm";
}
// —>
</SCRIPT>
В данном примере загружаются в определенные фреймы определенные документы. Фреймы нумеруются самим браузером, начиная с нуля, из верхнего левого угла экрана, спускаясь вниз. В нашем примере — nav.html — фрейм # 0, left_up.html — # 1, left.html — # 2, main.html — # 3. Но одного скрипта будет мало — необходимо, чтобы он срабатывал в момент выбора определенной ссылки, обновляя данные в определенных фреймах.
<A HREF="main2.html" target="Main" OnClick="frame_update()">Новые проекты</A>
Таким образом, обновятся данные во фрейме main — (target="Main"), left_up и left — последние два через скрипт.
Такую же функцию можно написать на VisualBasicScript:
<SCRIPT LANGUAGE="VBScript">
<!-
function frame_update()
parent.frames(1).location="logo_2.htm"
parent.frames(2).location="nav_left_2.htm"
end function
// ->
</SCRIPT>
VBScript использует вместо [квадратных скобок] (круглые) и, кроме того, не требует точки с запятой в конце каждой строки, а также не требует {фигурных скобок} для отграничения функций.
Ссылка будет выглядеть аналогично:
<A HREF="main2.html" target="Main" OnClick="frame_update()">Новые проекты</A>
(VBScript будет работать только на Internet Explorer — в отличие от jS, который будет работать везде).
Оба примера позволяют загружать документы с фиксированными именами. Очевидно, что если ссылок много и они ведут к разным страницам, — приведенный выше jS неэффективен, поскольку jS необходим для каждой ссылки. Гораздо лучше использовать параметральные скрипты.
<SCRIPT LANGUAGE="JavaScript">
<!-
function frame_update(URL1,URL2)
{
parent.frames[2].location=URL1;
parent.frames[3].location=URL2;
}
// ->
</SCRIPT>
Данный скрипт позволяет передавать скрипту URL's, как параметры. В данном случае ссылка будет выглядеть следующим образом:
<A HREF="main2.html " OnClick="frame_update('logo_2.html', 'nav_left_2.html')">новые проекты</A>
Аналог jS в VBScript будет выглядеть следующим образом:
<SCRIPT LANGUAGE="VBScript">
<!-
function frame_update(URL1,URL2)
parent.frames(2).location=URL1
parent.frames(3).location=URL2
end function
// ->
</SCRIPT>
<A HREF="main2.html " OnClick="call frame_update('logo_2.html', 'nav_left_2.html')">новые проекты</A>
Обратите внимание, что в последнем примере используется ключевое слово call для вызова данной функции.
Возможно использование имен фреймов, которые определены внутри метки <FRAME> NAME="...". В частности, следующим образом:
<SCRIPT LANGUAGE="JavaScript">
<!—
function frame_update(frame1, frame2, URL1,URL2)
{
parent.frames[frame1].location=URL1;
parent.frames[frame2].location=URL2;
}
// ->
</SCRIPT>
<A HREF="main2.html " OnClick="frame_update('left_up', 'left','logo_2.html', 'nav_left_2.html')">Новые проекты</A>
Таким же образом можно устроить кнопку Назад прямо на странице.
Возможен второй вариант — когда возврат делается через отдельный jS, но это действует только в двухфреймовых и безфреймовых документах. Вот пример такого jS:
<SCRIPT LANGUAGE="JavaScript">
<!—
function retrace()
{
history.back()
}
// ->
</SCRIPT>
Если вы хотите, то можете сделать текстовый линк:
<A HREF="#back" OnClick="retrace()">Go back</A>
картинку
<a href="#" onclick="retrace()"><img src="button.gif" width="75" height="30" border="0"></a>kg93610b.br> или красивую кнопочку
<FORM>
<INPUT TYPE="BUTTON" NAME="GOBACK" VALUE="Вернуться" OnCLick="retrace()">
</FORM> Преимущество такого скрипта в том, что он обращается к документам, находящимся в кэше вашего браузера (что существенно повлияет на скорость загрузки): так что если динамичных данных на странице нет — можете смело применять эту функцию.
Мы рассмотрели вариант в разбиением сайта на фреймы. Существует, как уже указывалось, способ с навигационной строкой вверху и внизу сайта.
Данный вариант позволяет использовать такую возможность браузера, как использование библиотечных объектов.
Для этого на нашей основной странице создадим список ссылок просто в ряд, желательно мелкими буквами (это будет дополнительная навигационная строка, которую мы поместим снизу страницы). Выделив все, что должно повторяться на каждой странице, включите окно Library — кнопка Create будет подсвечена (Modify>Library>Add Object to Library). Далее необходимо дать объекту название — и теперь его можно использовать напрямую (т.е. не создавать заново весь код вручную, а делать просто ссылки на имя_этого_файла.lbi).
Если проверить исходный код в HTML, то внутри будет метка <!- #BeginLibraryItem "/Library/Navpage.lbi" ->, которая означает наличие инструкций по вставке другого файла. Таким же образом (если вы не уверены в таком файле) можно вставить в исходный текст одной страницы текст другого документа (который также можно менять). Единственное, о чем необходимо позаботиться, — это о наличии поддержки SSI+ (Server-Side Instructions+), т.к. исходный код обращается именно к серверу. Возможности SSI+ очень широки — и обычно то, для чего потребовался бы CGI скрипт, можно сделать и без такового.
Если вы хотите вставить HTML документ в текст другого документа, можно воспользоваться командой —
<!-#include virtual="another.html"->
Текст документа не отражается в исходнике, а загружается непосредственно с сервера. Очевидно, что возможности SSI+ очень широки.
У каждого способа есть свои преимущества и недостатки, однако их объединяет одно качество. Если у вас динамичный сайт, особенно, если он новый или регулярно обновляемый свежей информацией, разбитой на много страниц, — такой способ безусловно привлекателен. Если вы используете такой файл как навигатор, то никаких проблем не возникает с редактированием все увеличивающегося числа страниц — просто изменяется навигатор (либо navpage.lbi либо another.html). Различие в том, что HTML документ, если вы собираетесь использовать его именно так, не должен содержать обязательных для всех других документов меток <HTML>, <HEAD> и так далее — там должен быть чистый код без границ.
Продолжение следует
Кирилл "Sedai" КАЛИТА
Компьютерная газета. Статья была опубликована в номере 36 за 1999 год в рубрике soft :: интернет
