- •Глава 1. Введение 174
- •Часть 1. Дизайн для Всемирной паутины Глава 1. Пройдемся по «понятиям»
- •Глава 2. «Вид» дизайна
- •Глава 3. Критические ошибки
- •Глава 4. Структура оптимизированных страниц
- •Глава 5. «Непрошеные» окна
- •Глава 6. Студия web-дизайна
- •Глава 7. «Это» — плохо!
- •Глава 8. Дизайн без «дизайна»
- •Глава 9. Гипертекстовый документ
- •Глава 10. Универсальный локатор ресурса
- •Часть 2. Основы создания гипертекстового документа Глава 1. Введение
- •Глава 2. Этикет в «паутине»
- •Глава 3. Структура
- •Глава 4. Внутри документа
- •Глава 5. Тестируйте свой документ
- •Глава 6. Таблица или фреймы
- •Глава 7. Перекодировщики кириллицы
- •Часть 3.Описание языка гипертекстовых документов Глава 1. Гипертекстовый язык
- •Глава 2.Термины гипертекста
- •Глава 3. Использование звуков
- •Глава 4. Создание графического меню
- •Глава 5. Текстовые стили
- •Глава 6. Общий интерфейс и формы языка
- •Глава 7. Фреймы
- •Глава 8.Планирование и взаимодействие фреймов
- •Глава 9.Зарезервированные имена фреймов
- •Глава 10.Создание документа html
- •Глава 11. Формы в html документах
- •Глава 12. Html 4.0
- •Глава 13. Тэги
- •Глава 15. Создание документов в формате html 4.0
- •Глава 16. Sgml и html
- •Глава 17. Как читать html dtd
- •Глава 18. Представление документа в формате html
- •Глава 19. Глобальная структура документа
- •Глава 20. Тело документа
- •Глава 21. Списки
- •Глава 22. Таблицы стилей
- •Часть 4. Редакторы web-страниц Глава 1. Основные требования
- •Глава 2. Adobe ImageReady
- •Глава 3. Corel Xara
- •Глава 4. Macromedia Fireworks
- •Глава 5. Macromedia Dreamweaver
- •Глава 6. Metacreation Headline Studio
- •Глава 7. HomeSite
- •Глава 8. Microsoft FrontPage Express
- •Часть 5. Создание Интернет-портала Глава 1. Что такое портал?
- •Глава 2. Что такое современный корпоративный портал?
- •Глава 3. Для чего нужен корпоративный портал?
- •Глава 4. Использование пакета Cold Fusion
- •Глава 5. Использование пакета Web-Oracle-Web (wow)
- •Часть 6. Cgi, php, Perl, MySql и cms системы Глава 1. Cgi
- •Глава 2. Выбор cms
- •Глава 3. Серверные скрипты
- •Глава 4. Вступление в php и MySql
- •Глава 5. Написание Гостевой книги на рнр
- •Глава 6. Гостевая книга на php — еще один вариант
- •Глава 7. Графический счетчик на php
- •Часть 7. Life Site cms — система создания и развития сайтов Глава 1. Введение
- •Глава 2. Что такое cms?
- •Глава 3. Функциональность системы
- •Глава 4. Часто задаваемые вопросы
- •Часть 8. «Раскрутка» сайта Глава 1.Выгодность хорошей «раскрутки»
- •Глава 2. Как создать вирусный трафик с помощью бесплатных электронных книг
- •Глава 3.Правильная раскрутка проекта и привлечение нужных посетителей
- •Глава 4. Экономика проекта
- •Глава 5. Стратегия эффективной работы с партнерскими программами
- •Глава 6. Преимущества использования Интернета в сетевом маркетинге
- •Глава 7. Как получить более 20 000 посетителей в день на свой сайт?
- •Глава 8. Банерная реклама
- •Часть 9. Заработок при помощи своего сайта Глава 1. Бесплатное место под ваш сайт
- •Глава 2. Как заработать на своем сайте
- •Глава 3. Банер и оплата его размещения
- •Глава 4. Влияние местоположения банера на его эффективность
- •Глава 5. Банерокрутилка на JavaScript
- •Глава 6. Бесплатное размещение web-страницы на сервере www.Geocities.Com
- •Часть 10. Уроки мастерства Глава 1. Выбираем и настраиваем домашний Web-сервер
- •Глава 2. Выводим иллюстрации в отдельном окне
- •Глава 3. Добавляем страницу в Избранное
- •Глава 4. «Откат назад» с помощью JavaScript
- •Глава 5. Индикатор состояния icq
- •Глава 6. Как поменять цвет скролл-бара
- •Глава 7. Как «обмануть» фреймы
- •Глава 8. Свойства тэга mailto
- •Глава 9. Пример практического создания сайта
- •Часть 11. Тонкости и секреты Глава 1. Фреймы
- •Глава 2. Ускоряем загрузку графики
- •Глава 3. Создаем систему быстрой навигации
- •Глава 4. Защитим страницу паролем
- •Глава 5. Устанавливаем счетчик
- •Глава 6. Десять советов web-дизайнеру
- •Глава 7. Каскадные таблицы стилей — css
- •Вопросы и ответы
- •Приложения Арсенал web-строителя
- •Тэги html
- •Meta-тэги
- •Хостинг
- •Бесплатная регистрация в поисковиках
- •Лучшие русскоязычные хостинг-серверы
- •Каталог бесплатного хостинга
- •Краткий словарь Интернета
- •Список использованных материалов
Глава 2. Выводим иллюстрации в отдельном окне
Иногда необходимо организовать вывод графических изображений в отдельном окне, но вам хотелось бы, чтобы новое окно браузера не содержало кнопок навигации, адресной строки, полос прокрутки и чтобы его заданный первоначально физический размер был фиксированным. Как этого добиться? Достаточно просто: следует использовать несложный сценарий JavaScript, запрещающий изменение пользователем размеров окна и удаляющий из него все ненужные вам компоненты.
Скрипт, написанный на языке Java, интегрируется в web-страни-цу при помощи тэга <SCRIPT> с атрибутом LANGUAGE, который помещается в начало кода html-документа, либо между тэгами <HEAD> и </HEAD>, или же сразу после директивы <BODY>. Сам текст сценария не отображается в окне браузера при загрузке документа, он исполняется подобно подпрограмме в случае определенного действия пользователя, например, открытия или закрытия окна. Встроенные в web-страницу сценарии JavaScript интерпретируются браузером вместе с кодом разметки гипертекста и вызываются на исполнение из тела html-документа специальными директивами.
Итак, для того чтобы организовать вывод графического изображения в отдельном окне фиксированного размера без кнопок навигации и полос прокрутки, в тело html-документа необходимо поместить следующий код:
<BODY>
<SCRIPT LANGUAGE="JavaScript">
function picture( ){
window.open("URL. определяющий адрес расположения картинки",
"newwindow", config=''width-ширина картинки, height-высота
картинки, toolbar=0, location=0, directories=0, status=1,
menubar=0, scrollbars=0, resizable=0");
}
</SCRIPT>
Тело html-документа
</BODY>
Записываемый в коде сценария JavaScript адрес картинки лучше всего приводить в абсолютном виде, с указанием протокола передачи данных и имени целевого графического файла, например, http://www. myserver.ru/images/picture.jpg. Атрибут config определяет конфигурацию создаваемого окна. Значения параметров width и height, устанавливающих ширину и высоту картинки в пикселах, следует увеличить на 10-15 точек, поскольку в новом окне изображение будет иметь отступы сверху и снизу, а значит, определенная его часть может оказаться скрытой за границей окна. Остальные параметры атрибута config принимают одно из двух возможных значений: 0 — определяемый параметром элемент не отображается на экране и 1 — определяемый параметром объект отображается вместе с другим содержимым. Так, параметр toolbar выводит на экран (или не выводит) панель инструментов с функциональными кнопками, параметр location — адресную строку, directories — список директорий, status — строку состояния в нижней части окна, menubar — системную панель, содержащую меню Файл, Правка, Вид и т.д., параметр scrollbars — полосы прокрутки, и, наконец, параметр resizable разрешает или запрещает произвольное изменение размеров окна пользователем.
Определитель picture( ), записанный правее директивы function, является уникальным именем данной функции JavaScript, которое будет использовано в дальнейшем для вызова этой функции на исполнение. Если вы планируете выводить на экран подобным образом несколько разных графических файлов, для каждого из них придется написать отдельную функцию, отличающуюся от предложенной выше лишь именем, адресом расположения целевого файла и значениями размеров картинки.
Для того чтобы активизировать созданный сценарий JavaScript, в теле html-документа необходимо разместить соответствующую гиперссылку, включающую ряд необходимых параметров. Для подготовки такой ссылки можно использовать графическую миниатюру рисунка, отображаемого браузером в отдельном динамически появляющемся окне. Код гиперссылки в этом случае будет выглядеть следующим образом:
<A HREF="javascript:picture()"><IMG SRC="URL миниатюры картинки" WDTH="ширина миниатюры" НЕIGHT="высота миниатюры" BORDER="0"АLT="Альтернативный текст"></А>
где picture() — уникальное имя функции, вызываемой при активизации гиперссылки.
Для контроля всех перечисленных параметров используются возможности JavaScript, а конкретно метод open объекта window. Вот его все возможные параметры:
window.open('http://www.mysite.ru','namewin','top, left, menubar, toolbar, location, directories, status, scrollbars, resizable, width, height')
Здесь 3 группы параметров.
Рассмотрим эти параметры:
http://www.mysite.ru — это адрес сайта,который открывается в новом окне браузера,
namewin — это имя, которое будет присвоено открываемому окну.
top — отступ открываемого окна от верхней части экрана. Значение задается в пикселах, например, top=100
left — отступ открываемого окна от левой части экрана. Значение задается в пикселах, например, left=150
menubar — определяет показывать строку меню браузера в открываемом окне или нет. Значениями являются yes или no, вы также можете использовать в виде значений соответственно 1 и 0.
toolbar — определяет показывать в открываемом окне панель Обычные кнопки (назад, вперед) или нет. Например, toolbar=no.
location — определяет показывать панель Адресная строка или нет. Например, location=0.
directories — определяет показывать Ссылки, или нет. Например, directories=yes.
status — определяет показывать строку состояния или нет. Например, status=1.
scrollbars — определяет можно ли при необходимости, когда содержимое страницы не помещается на экране показывать панели прокрутки или нет. Например, scrollbars=yes.
resizable — определяет возможность пользователя изменять размеры открываемого окна. Если задано значение resizable=0, то в открываемом окне недоступной становится кнопка «Развернуть» (при доступных «Свернуть» и «Закрыть»), а в Netscape 6 вообще не отображаются никакие кнопки, кроме доступной «Закрыть».
width — ширина открываемого окна. Значение задается в пикселах, например, width=640
height — высота открываемого окна. Значение задается в пикселах, например, height=480
Для использования метода open объекта window его сопоставляют с обработчиком события, рассмотрим это на примерах:
<form>
<input
onclick="window.open('http://www.mysite.ru','Window','top=20,
left=30, menubar=0, toolbar=0, location=0, directories=0,
status=0, scrollbars=1, resizable=0, width=800, height=600')"
type=button value="Жми тут ">
</form>
Мы создали форму с единственной кнопкой. Если пользователь нажмет на нее, то будет открыто новое окно браузера без каких-либо панелей. Рассмотрим создание текстовых ссылок, использовав вызов заранее созданной функции JavaScript, которая выполняет открытие нового окна:
<head>
<SCRIPT LANGUAGE="JavaScript"> <!--
function new_window() {
window.open('http://www.mysite.ru','Brouserwindow','top=25, left=40, menubar=0, toolbar=0, location=0, directories=0, sta-tus=0, scrollbars=0, resizable=0, width=600, height=400'); }
// --> </SCRIPT> </head>
<a href="javascript: new_window()">Mysite.ru</a> Непосредственно при нажатии на ссылку выполняется соответствующая функция JavaScript.