TIPS OF THE WEB
Спецвыпуск Xakep, номер #024, стр. 024-106-1
Vadias (painter@gameland.ru, www.freehand.str.ru)
Эй, приятель! Мы говорили о многих фичах дизайна страниц, но почти не касались браузера - а ведь его внешний вид тоже можно менять, и нехило! Благодаря нижеследующим типсам юзер сможет оценить силищу твоего дизайна, даже уйдя с твоей мегапаги. Рецепты были проверены на последних версиях модных браузеров: IE, Netscape, Opera и Mozilla. За более ранние версии ручаться не буду :(. Чтобы посмотреть готовый пример, набери URL: www.freehand.str.ru/test.
1. Для начала нам следует расчистить место для новой навигации, убрав с экрана старую. Для этого придется открывать новое окно с соответствующими параметрами. Итак, файл index.htm будет отсылать нас (и их тоже) к новой странице, его код будет таким:
<html>
<head>
<title>Untitled Document</title>
<script>
window.open("index2.htm","name","status, menubar, scrollbars=yes, resizable")
</script>
</head>
</html>
Таким образом, мы открываем новый файл - index2.htm - в новом окне, где присутствуют скроллбар, статус-строка и командное меню.
2. Также не забудь изменить цвета скроллера так, чтобы он подходил к твоему дизигну. Как это делается, мы писали в предыдущих типсах.
Конечно, часть стандартного интерфейса браузера все равно останется, хотя ты можешь воспользоваться следующим вариантом сотворения родительской форточки:
window.open('index2.htm', 'popup', 'fullscreen')
Но в этом случае безвозвратно потеряются такие юзабельные элементы управления, как "избранное", поиск и настройки. ИМХО, слишком жирная жертва прекрасному.
3. В файле index2.htm, который и будет у нас основным, мы расположим два фрейма. Обычно их критикуют, но в данном случае они вполне уместны.
<html>
<head>
<title>Untitled Document</title>
<script>
window.opener.close();
</script>
</head>
<frameset rows="72px,*" frameborder="no">
<frame name="nav" src="nav.htm" noresize scrolling="no">
<frame name="down" src="index3.htm" scrolling="yes">
</frameset><noframes></noframes>
</html>
Первое, что делает страница при загрузке, - закрывает ставшее ненужным окно файла index.htm. Далее мы задаем параметры фреймов. Rows означает, что они расположены один над другим, через запятую записаны их высота (первый - 72 пикселя, второй - *, это значит "все остальное"). Запись "frameborder=no" убирает перегородки между фреймами. Следующий шаг - настройка фреймов. Первый фрейм - nav.htm, это и есть файл с навигацией, он не должен менять высоту (noresize) и не скроллится (scrolling="no"). У нижнего скроллинг присутствует всегда. Не забудь поименовать фреймы (атрибут name).
4. Настраиваем файл с навигацией. Чтобы изменялось содержимое только нижнего фрейма, как и положено, между тегами <head> и </head> вписываем:
<base target="down">
5. Делаем кнопки "Вперед", "Назад" и "Стоп". Подготовь нужные картинки для этих кнопок и вставь на нужные места (можешь воспользоваться таблицей).
Кнопку "Назад" вставляем так: