Хакер №024. Спецвыпуск


024-106-1, TIPS OF THE WEB



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. Делаем кнопки "Вперед", "Назад" и "Стоп". Подготовь нужные картинки для этих кнопок и вставь на нужные места (можешь воспользоваться таблицей).

Кнопку "Назад" вставляем так:

Содержание  Вперед на стр. 024-106-2


 



Начало    Вперед



Книжный магазин