Java Script, либо такая возможность отключена.

Извините, но ваш браузер не поддерживает

Чертёж последний Позаботимся о тех, у кого «нестандартный» браузер

Мы уже не раз упоминали о том, что, к сожалению, ныне здравствующие браузеры не совсем одинаково, а то и совсем неодинаково отображают странички, на которых используются CSS и Java Script. Сегодня мы попробуем свести к минимуму тот «психологический удар», который может «хватить» нашего посетителя в некоторых случаях.

1. В первую очередь позаботимся о тех, чьи браузеры «не понимают» JS либо в них отключена возможность отображения сценариев JS. Для таких случаев предусмотрен тег <NOSCRIPT>. Открой файл glav.htm и добавь строки:

<BODY>

<NOSCRIPT>

<P style="font-size:1cm; color:#ff0000;">

</NOSCRIPT>

2. Теперь вспомним о счастливых владельцах Opera7 – браузера, который понимает теги <OBJECT> и <EMBED>, но не поддерживает прозрачность, в результате чего наша вазочка с цветами закрывает главное содержимое основной странички. Для них сделаем следующее:

c дадим имя объекту <OBJECT>:

<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"

codebase="http://download.macromedia.com/pub/shockwave/

cabs/flash/swflash.cab#version=5,0,0,0"

width=900 height=230" id=flash>

. . .

c запустим при загрузке страницы функцию brows():

c и, конечно же, создадим саму эту функцию:

//в переменной brt будем хранить имя браузера

var brt;

function brows()

//объект navigator хранит информацию о браузере

//его свойство appName выдаёт название браузера

//метод toLowerCase() переводит все символы в нижний регистр

{ var br_type=navigator.appName.toLowerCase();

//метод indexOf('mosilla') возвращает позицию, с которой

// его аргумент входит в строку br_type,

//и если она >=0, значит браузер Netscape Navigator

if (br_type.indexOf('mosilla')>=0) {brt="nn"}

//в противном случае ищется строка explorer

else { if (br_type.indexOf('explorer')>=0)

{brt="ie"}

//а если и это не сработало, получаем opera

else {if (br_type.indexOf('opera')>=0)

{brt="opera"}

}

//если браузер оказался opera, делаем объект flash скрытым

if (brt=="opera") {flash.style.visibility="hidden"}

}

</SCRIPT>

c но, прежде чем проверить работу этого скрипта в Opera, открой в нём меню Быстрые настройки и выбери пункт Представляться как Opera, иначе этот браузер «обманет» нашу функцию, представившись Internet Explorer, и все усилия пойдут насмарку.

Заключение

А теперь – последнее задание. Странички нашего сайта получились разномастными, да это и неудивительно, ведь создавали мы их на разных стадиях обучения, имея различный «багаж» за плечами. И теперь перед тобой стоит, пожалуй, самая трудная задача – решить, а как же всё-таки должен выглядеть твой сайт в целом. Решай и приводи странички к единому стилю.

Ну вот мы и завершили экскурсию в мастерскую web-мастера, где довольно основательно познакомились с HTML и CSS, и слегка затронули web-программирование в лице Java Script. Всего этого должно быть достаточно, чтобы создавать сложные, «навороченные» или простые web-странички. Но если тебе показалось мало того, что мы узнали про JS, придётся найти пособие по этому языку и взяться за серьёзное его изучение.

В любом случае удачи тебе в необъятных просторах Интернет.

Приложения

Приложение 1
Теги HTML

В столбце «/» отмечается наличие парного (закрывающего) тега: + (необходим), -- (отсутствует), ± (имеется, но необязателен)

тег	/	описание	стр.
		служебные
<HEAD>	+	«голова» html-документа, здесь располагается служебная информация
<BODY>	+	«тело» документа c link – цвет гиперссылки c alink – цвет активной гиперссылки c vlink – цвет посещённой гиперссылки c text – цвет текста c bgcolor – цвет фона c background – адрес графического файла, содержащего фоновое изображение c bgproperties=fixed – фон не будет прокручиваться
<TITLE>	+	заголовок странички
<META>	–	информация о документе для браузера, поисковых серверов и др. c name – имя тега (keywords – ключевые слова, description – краткое описание) c content – содержимое тега
		абзац
<P>	±	начало абзаца c align – выравнивание (left, right, center, justify)
<DIV>	+	раздел документа
<CENTER>	+	выравнивание содержимого по центру
<BR>	–	разрыв строки
<H1>..<H6>	+	заголовки от 1 до 6 уровней c align – выравнивание c title – текст-подсказка
		текст
<FONT>	+	размер и цвет шрифта c color – цвет c face – имя или список имён шрифтов через запятую c size – размер c title – текст-подсказка
<B>	+	полужирное начертание
<I>	+	курсивное начертание
<U>	+	подчёркнутый текст
<S>	+	зачёркнутый текст
<SUP>	+	верхний индекс
<SUB>	+	нижний индекс
<TT>	+	моноширинный шрифт
<SPAN>	+	выделение фрагмента документа для применения стиля или задания идентификатора
<MARQUEE>	+	бегущая строка c behavior – тип движения (alternate, scroll, slide) c bgcolor – цвет фона c direction – направление движения (left, right, up, down) c height – высота строки при вертикальном движении c loop – число повторений c scrollamount – скорость в пикселях на движение c title – строка-подсказка c width – ширина строки при гориз. движении
		список
<UL>	+	маркированный список c type – тип маркера (disk, circle, square) c title
<OL>	+	нумерованный список c type – тип нумерации (1, a, A, i, I) c start – начальное значение нумерации c title
<LI>	±	элемент списка c type – тип нумерации c value – начальный номер c title
		таблица
<TABLE>	+	таблица c align – выравнивание таблицы c background – адрес фонового изображения c bgcolor – цвет фона c border – толщина рамки c bordercolordark – цвет тени рамки c bordercolorlight – цвет подсветки рамки c cellpadding – поля внутри ячейки c cellspacing – поля между ячейками c rules – отображение внутренних разделительных линий (none, rows, cols, all) c title c width и height
<TR>	+	строка таблицы
<TD>	+	ячейка таблицы
<CAPTION>	+	заголовок таблицы c valign – вертикальное выравнивание (top, bottom, center)
		рамки, управляющие элементы
<FIELDSET>	+	рамка
<LEGEND>	+	заголовок рамки c align – выравнивание (top, bottom, left, right)
<FORM>	+	форма c action – адрес для отправки формы по сети c enctype – кодирование передаваемых по сети данных (text/plain) c method – способ передачи формы (get, post) Пример: отправка формы по e-mail <FORM action=mailto:my_adr@mail.ru enctype=text/plain method=post>
<INPUT>	–	управляющий элемент c align – выравнивание текста, расположенного у элемента (top, middle, bottom) c disabled –недостижим для пользователя c readonly – только для чтения c size – размер текстового поля в символах c title – текст-подсказка c value – значение элемента c type – тип элемента ü button – кнопка, атрибут value задаёт текст на кнопке ü checkbox – флажок, атрибут value задаёт состояние флажка: on – установлен, off – снят, атрибут checked – переключатель установлен по умолчанию ü hidden – скрытое значение ü password – поле ввода пароля ü image – рисунок ü radio – переключатель, value – состояние переключателя (on, off), checked – переключатель установлен по умолчанию ü reset – кнопка, устанавливающая во всех управляющих элементах значения, используемые по умолчанию ü submit – кнопка, отправляющая содержимое формы на сервер ü text – текстовое поле
<SELECT>	+	список выбора, внутри разрешён только тег <OPTION> c disabled – элемент недоступен c multiple – разрешён множественный выбор c size – количество отображаемых строк, если этот атрибут не указан, список отображается раскрывающимся
<OPTION>	+	элемент списка выбора c selected – элемент выбран c value – значение элемента
<TEXTAREA>	+	многострочное поле ввода c cols и rows – ширина и высота поля в символах c disabled – элемент недоступен c wrap – признак переноса слов (off – не переносить, physical – слова переносятся как на экране, так и при передаче данных серверу, virtual – слова переносятся только на экране)
		изображение или видеоклип
<IMG>	–	вставка изображения или видеоклипа c align – выравнивание изображения в окружающем тексте (absbottom, absmiddle, baseline, bottom, left, middle, right, texttop, top) c alt – замещающий текст c border – толщина рамки c dynsrc – адрес видеоклипа c width и height – ширина и высота изображения c hspace и vspace – горизонтальные и вертикальные поля вокруг изображения c src – адрес изображения c usemap – ссылка на имя карты
<MAP>	+	описание карты c name – имя карты
<AREA>	–	описание области на карте c shape – форма области (rect, circle, poly) c cords – координаты c href – ссылка c alt – альтернативный текст
		гиперссылка, закладка
<A>	±	гиперссылка или закладка c href – адрес c name – имя метки c target – место загрузки документа: ü _blank – новое окно ü _parent – родительский фрейм ü _self – текущее окно или фрейм ü _top – во всё окно браузера c title – текст-подсказка
		фрейм
<FRAMESET>	+	расстановка кадров c border – толщина рамки c framespacing – поля кадров c cols и rows – количество частей по вертикали и горизонтали c title – текст-подсказка
<FRAME>	±	кадр c name – имя кадра c src – адрес странички, размещаемой в кадре c noresize – изменение размеров кадров пользователем (noresize – запрещено, resize – разрешено) c scrolling – отображение полос прокрутки (auto, no, yes) c title
<NOFRAMES>	+	информация для пользователей браузеров, не поддерживающих фреймы
		CSS
<STYLE>	+	описание пользовательского стиля
<LINK>	–	привязка стилевого файла
		объекты Flash
<OBJECT>	+	контейнер для объекта (ролик Flash и др.) в IE
<PARAM>	+	параметры настройки свойств объекта
<EMBED>	+	контейнер для объекта в NN
		скрипты
<SCRIPT>	+	описание скрипта c language – язык скрипта c type – язык скрипта (альтернатива language) c src – адрес файла со скриптами
<NOSCRIPT>	+	информация для пользователей браузеров, не поддерживающих скрипты

Приложение 2
Свойства CSS

свойство	описание	стр.
	шрифт
font-family	имя гарнитуры шрифта или её тип (serif – засечная, sans-serif – рубленая, monospace – моноширинная, cursive – рукописная, fantasy – фантазийная)
font-size	размер (xx-small – самый мелкий, x-small, small, medium – базовый, large, x-large, xx-large – самый крупный)
font-style	курсивное начертание (normal, italic, oblique)
font-variant	регистр букв (normal, small-caps)
font-weight	полужирное начертание (normal, bold, bolder, lighter)
color	цвет шрифта
	текст
letter-spacing	разрядка
line-height	высота строки
text-align	выравнивание (left, right, center, justify)
text-decoration	под(над-,пере-)чёркивание (none, overline, underline, line-through)
text-indent	отступ первой строки
text-transform	управление регистром (capitalize, uppercase, lowercase)
vertical-align	вертикальное выравнивание (baseline, sub, super, top, middle, bottom)
list-style-image	адрес изображения – маркера списка
list-style-position	указание, внутри или вне тела списка расположен маркер (outside, inside)
	фон
background	цвет фона или фоновая картинка (transparent, цвет, url(адрес)) c fixed – фоновая картинка не прокручивается c repeat-x, repeat-y – фоновая картинка повторяется только по горизонтали, по вертикали c no-repeat – фоновая картинка не повторяется c center, top, bottom, right, left – фоновая картинка располагается в центре, сверху, снизу, справа, слева
	поля
margin	величина полей вокруг блока
margin-top	верхнее поле
margin-bottom	нижнее поле
margin-right	правое поле
margin-left	левое поле
padding	величина внутренних полей блока
padding-top	верхнее
padding-bottom	нижнее
padding-right	правое
padding-left	левое
	рамки
border-color	цвет рамки
border-style	стиль рамки (none, solid, double, groove, ridge, inset, outset)
border-width	толщина рамки (thin, medium, thick, число)
	видимость, размеры
display	присутствие элемента (none – элемент не виден и место под него не отведено)
float	обтекание элемента другими элементами (none, left, right)
clear	отмена указанного обтекания (none, both, left, right)
overflow	управление прокруткой содержимого (scroll)
visibility	видимость элемента (visible, hidden, inherit – зависит от видимости родительского элемента)
width	ширина
height	высота
	фильтры
Alpha	прозрачность c opacity, finishOpacity – начальный и конечный уровень прозрачности в % c style – градиент непрозрачности (0 – равномерный, 1 – линейный, 2 – радиальный, 3 – прямоугольный) c startX, startY, finishX, finishY – координаты области элемента, для которой задаётся прозрачность
Blur	размытый образ, создающий эффект движения с большой скоростью c add – указывает, надо ли отображать первоначальное изображение (0 – не отображается) c direction – направление движения (0, 45, 90, 135, 180, 225, 270, 315) c strength – величина размытия в пикселях
Chroma	делает указанный цвет прозрачным c color – цвет
DropShadow	тень c color – цвет тени c offX, offY – смещение тени c positive – режим отображения тени (1 – для любого непрозрачного пикселя, 0 – только для прозрачных пикселей)
FlipH, FlipV	горизонтальный и вертикальный зеркальный образ
Glow	ореол c color – цвет ореола c strength – размер ореола
Invert	инвертирование цвета
Wave	волнообразное искажение c add – отображение первоначального изображения (0 – не отображается, 1 – отображается) c freq – число волн c phase – начальная фаза волны (целое число от 0 до 100) c lightStrength, strength – интенсивность волны
XRay	чёрно-белый рентгеновский образ
	позиционирование
position	тип позиционирования (absolute, relative, static)
left	расстояние слева (расстояние от левой границы контейнера до левого края элемента)
top	расстояние сверху
right	расстояние справа
bottom	расстояние снизу
z-index	порядок расположения (перекрытия) элементов
	курсор
cursor	вид курсора мыши (auto, crosshair, default, hand, move, e-resize, ne-resize, nw-resize, n-resize, se-resize, s-resize, sw-resize, w-resize, text, wait, help)

Приложение 3
Объекты JavaScript

В столбце «т» отмечен тип: о – объект, м – метод, с – свойство.

свойства, методы	т	описание	стр.
Array	о	массив
var a=new Array(); var b=new Array(1,13,4);		создание экземпляра объекта
concat()	м	соединяет элементы массивов b.concat(a);
reverse()	м	изменяет порядок следования элементов массива на противоположный b=a.reverse();
slice()	м	возвращает часть массива, начиная с позиции, указанной первым параметром, и заканчивая позицией, указанной вторым параметром b=a.slice(3,5);
sort()	м	сортирует элементы массива b=a.sort()
length	с	число элементов массива a.length
Math	o	математические функции и константы
abs()	м	абсолютное значение a=Math.abs(b);
ceil()	м	наименьшее целое число, большее или равное данному (округление с избытком)
floor()	м	наибольшее целое число, меньшее или равное данному (округление с недостатком)
round()	м	округление до ближайшего целого
cos()	м	косинус
sin()	м	синус
tan()	м	тангенс
exp()	м	экспонента
pow()	м	возведение первого аргумента в степень, указанную вторым аргументом a=Math.pow(b,4);
log()	м	натуральный логарифм
sqrt()	м	квадратный корень
max()	м	максимальное из двух чисел
min()	м	минимальное из двух чисел
random()	м	случайное число из диапазона от 0 до 1
E	c	основание натурального логарифма
PI	с	число p
String	o	строка
var s=new String(); var st=”Привет!”		создание экземпляра объекта
charAt()	м	возвращает символ строки, расположенный по указанному индексу (нумерация начинается с нуля) s=st.charAt(3);
charCodeAt()	м	возвращает код символа строки, расположенного по указанному индексу
fromCharCode()	м	создаёт строку на основе указанных кодов символов var s=String.fromCharCode(65,108,105,99)
indexOf()	м	возвращает позицию первого вхождения строки a в строку b, начиная с позиции i num=b.indexOf(a,i);
replace()	м	выполняет поиск выражения r и замену его на строку s a=b.replace(r,s);
slice()	м	возвращает часть строки между позициями, заданными первым и вторым параметрами
split()	м	разбивает строку в массив (в качестве разделителя используется значение параметра) var st=”Маша ела кашу”; var a=new Array(); a=st.split(“ “);
substr()	м	возвращает подстроку длиной n, начиная с позиции i a=b.substr(i,n);
substring()	м	возвращает подстроку, ограниченную позициями start и end a=b.substring(start,end);
toLowerCase()	м	преобразует символы строки в нижний регистр
toUpperCase()	м	преобразует символы строки в верхний регистр
length	с	длина строки
Date	o	дата и время
var d=new Date();		создание экземпляра объекта
getDate()	м	возвращает день месяца (от 1 до 31)
getDay()	м	возвращает день недели (от 0 для воскресенья до 6 для субботы)
getMonth()	м	возвращает месяц (от 0 для января до 11 для декабря)
getFullYear()	м	возвращает полный год var s=”Сегодня ”; var d=new Date(); s+=getDate()+”.”; s+=(d.getMonth()+1)+”.”; s+=d.getFullYear();
getHours()	м	возвращает час суток (от 0 до 23)
getMinutes()	м	возвращает минуты (от 0 до 59)
getSeconds()	м	возвращает секунды (от 0 до 59) var s=”Сейчас ”; var d=new Date(); s+=d.getHours()+”:”; s+=d.getMinutes()+”:”; s+=d.getSeconds()”:”;
Global	o
eval()	м	преобразует выражение в объект или значение var t=eval(”25-9”); var i=5; var f=eval(”form”+i);
parseFloat()	м	выполняет преобразование строкового выражения в вещественное число
parseInt()	м	выполняет преобразование строкового выражения в целое число
window	o	объект самого верхнего уровня, сам браузер
alert()	м	окно с сообщением и кнопкой Ok alert(”сообщение”);
confirm()	м	окно подтверждения (сообщение и кнопки Ok и Cancel)
prompt()	м	диалоговое окно со строкой подсказки, полем ввода и кнопками Ok и Cancel prompt(”подсказка”,”текст в поле ввода по умолчанию”);
open()	м	открывает новое окно браузера open(url,name) c url – адрес загружаемого документа c name – имя окна
scrollBy()	м	вызывает прокрутку окна на указанные расстояния по горизонтали и вертикали scrollBy(0,20);
scrollTo()	м	прокрутка окна до определённой точки
setInterval()	м	создаёт таймер, многократно выполняющий указанную функцию через заданный промежуток времени var t=setInterval(”my_function”,1000);
clearInterval()	м	прекращает работу таймера
defaultStatus	c	сообщение, выводимое по умолчанию в статусной строке
status	с	сообщение, отображаемое в статусной строке window.status=”сообщение”;
history	o	информация о посещавшихся до настоящего момента сайтах
back()	м	переход к предыдущему URL
forward()	м	переход к следующему URL
go()	м	переход на указанное число шагов history.go(-2);
lenght	c	число URL, содержащихся в объекте
style	o	стиль элемента
posHeight	с	высота элемента в пикселях (в виде числа)
posWidth	с	ширина элемента в пикселях (в виде числа)
posLeft	с	горизонтальная координата элемента (в виде числа)
posTop	с	вертикальная координата элемента (в виде числа)
listStyleImage	с	свойство list-style-image каскадных таблиц
		названия остальных свойств получаются аналогично
document	o	документ, находящийся в окне браузера
elementFromPoint()	м	возвращает элемент документа, находящийся в точке с указанными координатами
all	c	семейство всех элементов документа alert(document.all(4).id) – возвращает значение атрибута id четвёртого тега документа alert(document.all(”my”).tagName) – возвращает имя тега элемента с идентификатором my
anchors, forms, images, links, tags	с	семейства закладок, форм, изображений, ссылок, тегов документа
bgColor	с	цвет фона документа
fgColor	с	цвет текста документа
title	с	название документа, отображаемое в заголовке браузера
body	с	объект BODY документа c scrollTop, scrollLeft – координаты клиентской части документа c clientWidth, clientHeight – ширина и высота окна браузера
элементы документа
scrollIntoView()	м	прокручивает документ в окне браузера так, что если значение параметра true, то элемент оказывается в верхней части окна, а если false – в нижней form1.scrollIntoView(true);
innerText	с	изменяет текст, расположенный между парными тегами
innerHTML	с	изменяет HTML-код, расположенный между парными тегами
navigator	o	навигатор
appName	c	название браузера
appVersion	с	версия браузера
appMinorVersion	с	вторая цифра в номере версии браузера
userLanguage	с	язык пользователя

Приложение 4
События

Обозначение объектов и элементов: w – window, d – document, I – <INPUT>

событие	объект, элемент	описание	стр.
onbeforeunload	w	перед закрытием окна браузера
onblur	w, I	потеря окном фокуса
onerror	w	ошибка
onfocus	w, I	получение окном фокуса
onhelp	w, d, I	нажатие клавиши F1
onload	w	открытие окна браузера
onresize	w, I	изменение размеров окна
onscroll	w	прокручивание документа
onunload	w	закрытие окна браузера
onclick	d, I	щелчок мышью
ondblclick	d, I	двойной щелчок мышью
onmousedown	d, I	нажатие кнопки мыши
onmousemove	d, I	движение указателя мыши
onmouseout	d, I	выход указателя мыши за пределы объекта
onmouseover	d, I	наведение указателя мышки на объект
onmouseup	d, I	отпускание кнопки мыши
onchange	I	изменение содержимого объекта
onselect	I	изменение текущего выбора

Литература

c Вагнер Р., Вайк А. Java Script, Энциклопедия пользователя – К.: ООО "ТИД "ДС", 2001

c Гарнаев А., Гарнаев С. WEB-программирование на Java и JavaScript – СПб.: БХВ-Петербург, 2002

c Дуванов А.А. DHTML-конструирование – г. Информатика, № 27-28, 2002

c Дуванов А.А. JavaScript-конструирование – г. Информатика, № 21, 25, 29, 31, 2001

c Левин А. Самоучитель полезных программ – М.: Издательский торговый дом «КноРус», 2001

c Сенокосов А.И. Лабораторные работы по JavaScript – г. Информатика, № 23, 2003

Оглавление

Введение..................................................................................................................... 1

Чертёж первый Голова, тело, заголовок….......................................................... 3

Чертёж второй Цвета и атрибуты......................................................................... 7

Чертёж третий Картинки и бегущие строки..................................................... 10

Чертёж четвёртый Гиперссылки........................................................................ 13

Чертёж пятый Таблицы....................................................................................... 16

Чертёж шестой Списки и отступы..................................................................... 20

Чертёж седьмой Фреймы..................................................................................... 21

Чертёж восьмой Карта ссылок............................................................................ 26

Чертёж девятый CSS или каскадные таблицы стилей, половина первая....... 28

Чертёж девятый CSS, оформление блока, половина вторая............................ 35

Чертёж десятый Размещение Flash-объектов на страничке............................ 41

Чертёж одиннадцатый Знакомство с Java Script, половина первая................ 45

Чертёж одиннадцатый Некоторые объекты JS, половина вторая................... 53

Чертёж одиннадцатый Операторы JS, «половина» третья.............................. 60

Чертёж одиннадцатый JS, ещё немного, «половина» четвёртая..................... 70

Чертёж последний Позаботимся о тех, у кого «нестандартный» браузер..... 71

Заключение.............................................................................................................. 73

Приложения............................................................................................................. 74

Приложение 1 Теги HTML............................................................................ 74

Приложение 2 Свойства CSS........................................................................ 79

Приложение 3 Объекты JavaScript............................................................... 83

Приложение 4 События................................................................................. 88

Литература............................................................................................................... 89

5rik.ru

Материалы для учебы и работы

Java Script, либо такая возможность отключена.