Чертёж последний Позаботимся о тех, у кого «нестандартный» браузер
Мы уже не раз упоминали о том, что, к сожалению, ныне здравствующие браузеры не совсем одинаково, а то и совсем неодинаково отображают странички, на которых используются CSS и Java Script. Сегодня мы попробуем свести к минимуму тот «психологический удар», который может «хватить» нашего посетителя в некоторых случаях.
1. В первую очередь позаботимся о тех, чьи браузеры «не понимают» JS либо в них отключена возможность отображения сценариев JS. Для таких случаев предусмотрен тег <NOSCRIPT>. Открой файл glav.htm и добавь строки:
<BODY>
<NOSCRIPT>
<P style="font-size:1cm; color:#ff0000;">
</NOSCRIPT>
2. Теперь вспомним о счастливых владельцах Opera7 – браузера, который понимает теги <OBJECT> и <EMBED>, но не поддерживает прозрачность, в результате чего наша вазочка с цветами закрывает главное содержимое основной странички. Для них сделаем следующее:
//метод 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:[email protected]
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 – самый крупный)
указание, внутри или вне тела списка расположен маркер (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)
видимость элемента (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
расстояние слева (расстояние от левой границы контейнера до левого края элемента)
В столбце «т» отмечен тип: о – объект, м – метод, с – свойство.
свойства, методы
т
описание
стр.
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
Нам важно ваше мнение! Был ли полезен опубликованный материал? Да | Нет
studopedia.su - Студопедия (2013 - 2024) год. Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав!Последнее добавление