Каскадные таблицы стилей

Размещено на http://www.allbest.ru/

Министерство науки и образования Республики Казахстан

Карагандинский государственный университет им. Е. А. Букетова

Каскадные таблицы стилей

Караганды

2016



Содержание

Введение

1. ИКТ в образовании

2. Назначение и применение JavaScript, общие сведения

2.1 Понятие объектной модели применительно к JavaScript

2.2 Cвойства

2.2 URL-схема JavaScript

3. Каскадная таблица стилей

3.1 Определение правил CSS

Заключение

Список использованной литературы



Введение

JavaScript - самый популярный язык написания клиентских сценариев. Это основополагающая технология для создания всевозможных анимаций и переходов. Без JavaScript практически невозможно обойтись, если требуется добиться современной функциональности на стороне клиента. Единственная проблема с JavaScript - он не прощает неуклюжего программирования. Экосистема Node помогает значительно повысить качество приложений - предоставляет Фреймворки, библиотеки и утилиты, ускоряющие разработку и поощряющие написание хорошего кода. Каскадные (многоуровневые) таблицы стилей - cascading style sheets (CSS) - это мощный стандарт на основе текстового формата, определяющий представление данных в браузере. Если формат HTML предоставляет информацию о составе документа, то таблицы стилей сообщают, как он должен выглядеть. Таким образом, каскадные таблицы стилей дают возможность хранить содержимое отдельно от его представления.

Стиль включает все типы элементов дизайна: шрифт, фон, текст, цвета ссылок, поля и расположение объектов на странице. CSS разрабатывались так, чтобы обеспечить больший уровень контроля над размещением текста и графики.

Каскадные таблицы стилей обеспечивают должный уровень единства оформления, организации и контроля во время разработки узла, который является недостижимым с помощью одного только HTML.

CSS предполагает 3 типа таблиц стилей - встроенные, внедренные (внутренние) и связанные (внешние).



1. ИКТ в образовании

"ICT в образовании" это информационно-коммуникационные технологии (ИКТ) используемые в образовании.

ИКТ - Информационно-коммуникативные технологии, совокупность массовых способов и приемов накопления, передачи и обработки информации с использованием современных технических и программных средств, с возможностью представления информации коммуникативного направленности.

Многочисленные исследования по всему миру показали, что ИКТ может улучшить результаты обучения учеников и качество преподавания учителей. Доклад, сделанный Национальным институтом Мультимедии Образования в Японии, доказал, что ИКТ в области образования, при помощи программы интеграции, оказывает положительное влияние на успеваемость учащихся, особенно в области "Знание · понимание" и "Практические и презентационные навыки" по таким предметам как математика, а так же по научным и социальным исследованиям.

В Казахстане применение информационно-коммуникационных технологий (ИКТ) в системе образования, в том числе в вузах осуществляется в рамках государственной политики информатизации общества и образования.

Информатизация общества закреплена как важнейший механизм формирования конкурентоспособности национальной экономики в Послании Президента Республики Казахстан Н.А.Назарбаева "Стратегия вхождения Казахстана в число 50-ти наиболее конкурентоспособных стран мира. Казахстан на пороге нового рывка в своем развитии".

Информатизация общества осуществляется в русле концепции Национальной информационной инфраструктуры, направленной на создание электронного правительства; построение открытых инфокоммуникационных систем; стандартизацию и сертификацию средств и систем информатизации; обеспечение доступа к ресурсам локальных и глобальной сетей; расширение сферы применения государственного языка в цифровом поле; обеспечение безопасности и защиту государственных ресурсов.

Важным направлением государственной политики информатизации общества и образования является Программа снижения информационного неравенства, направленная на формирование компьютерной грамотности широких слоев населения и профессиональных сообществ.

Конкретные направления информатизации образования, в том числе вузовского, закреплены в "Государственной программе развития образования Республики Казахстан в период с 2005 по 2010 годы":

1. Разработка и совершенствование нормативно-правового обеспечения;

2. Развитие инфокоммуникационной инфраструктуры организаций образования;

3. Технологическая и техническая поддержка инфраструктуры;

4. Создание системы открытого дистанционного обучения;

5. Создание отечественных цифровых образовательных ресурсов;

6. Внедрение информационной системы управления образованием (ИСУО);

7. Подготовка педагогических и управленческих кадров.

Разработка и совершенствование нормативно-правового обеспечения применения ИКТ в высшем образовании осуществляется как в целом по процессу информатизации, так и в соответствии со всеми вышеперечисленными его направлениями.

В настоящее время в Казахстане функционируют 144 высших учебных заведения, из них 9 национальных; 1 международный, 13 негражданских, 32 государственных, 75 частных, 14 акционированных. В вузах обучается 633 тысяч 814 человек.

С 1 сентября 2008 года на кредитную технологию обучения перешли все вузы республики. Великую Хартию университетов подписали 18 вузов Казахстана. В режиме эксперимента подписано 50 меморандумов на двудипломное образование в Евразийском национальном университете имени Л.Н.Гумилева, Казахстанско-Немецком университете, Казахском гуманитарно-юридическом университете.

Вместе с тем, в указанном выше стратегическом плане МОН РК констатируется низкое качество предоставления услуг по подготовке конкурентоспособных кадров с высшим образованием, отмечается слабая связь вузов с наукой и производством. Ни один из казахстанских вузов не имеет международную институциональную аккредитацию и не участвует в международных академических рейтингах университетов. По показателю ГИК "Охват высшим образованием" Казахстан занимает 36 место из 134. Всего 10 % выпускников организаций образования могут претендовать на обучение по госзаказу, что снижает доступность получения бесплатного высшего образования. Объем госзаказа только на 50 % обеспечивает потребности отраслей экономики. В последние годы приоритет составляют специальности технического профиля, 33 % от общего количества грантов.

Среди приоритетных направлений в стратегическом плане МОН РК на 2009-2011 годы в разделе 5 "Развитие информационно-коммуникационных технологий отстает от мировых стандартов" особое место отводится развитию информационно-коммуникационной инфраструктуры МОН РК. Планируется ежегодное обновление компьютерной техники с учетом ее физического и морального износа и оснащение вузов научными лабораториями, основанных на ИКТ. Важным остается подключение всех вузов к широкополосной сети Интернет. Особое место отводится разработке 2380 электронных учебников и обучающих программ для системы высшего образования. Самостоятельным направление является подготовка профессорско-педагогических кадров к системному использованию ИКТ в вузовском учебном процессе, в том числе их обучение технологии использования продукции "Спутникового канала дистанционного обучения (СКДО)".

Реализация государственной политики в области информатизации высшего образования на основе ИКТ также разрабатывается на вузовском уровне.

Все вузы имеют свои программы информатизации образования, направленные на развитие инфокоммуникационной инфраструктуры вузов; концепции непрерывной подготовки специалистов в условиях открытого дистанционного обучения; концепции создания вузовской информационно-образовательной среды и развития цифровых образовательных ресурсов. Утвержденные Учеными советами вузов Концепции информатизации вузовского образования на основе современных ИКТ конкретизируются в Программах информатизации образования и Планах мероприятий по их реализации.

Вузы также создают условия для обучения студентов с ограниченными физическими возможностями. Например, в Казахском государственном женском педагогическом университете обучаются 13 человек, в Казахском университете международных отношений и мировых языков им.Абылай хана - 10, в Казахской Национальной Академии Искусств им. Т. Жургенова - 7, в Университете "Туран" - 5, в Таразском государственном педагогическом институте - 4 и др. Все вузы при этом используют электронные способы доставки учебной информации и цифровые образовательные ресурсы в кейсовых технологиях.

Технологическая поддержка создаваемой в вузах инфраструктуры базируется как на идеологии, принципах, средствах открытых систем мирового сообщества Open Source Community, так и на коммерческих системах мировых лидеров-брендов.

Среди открытых программных систем наибольшее распространение в вузах Казахстана получили: RedHat Linux,FreeBSD, Gentoo Linux, OpenOffice, Incskape, Toad, Gimp, Moodle, Java, JQuery, Apache ,Sendmail, MySQL,

Squid, Postfix.

Большой популярностью в вузах пользуются программные системы признанных мировых лидеров:

- Операционные системы: семейства Microsoft Windows Server 2003/XP/Vista, UNIX;

- Утилиты: Winrar, Nero, WinZip;

- Антивирусное ПО: DrWeb, Kaspersky, , Norton Antivirus, Panda, Nod 32, Dr Web;

- Языки программирования и базы данных: My SQL, Пролог, Visual Basic, Borland Delphi, Borland Pascal, C++, C++ Builder, JavaScript, HTML, Macromedia Flash, PHP, MSDN;

- Графическое и мультимедиа ПО: BS Player, Adobe PhotoShop, CorelDraw, Maya, Toonboom, Corel Drow GRAFICS SUITE X4, AutoCad, Windows Media Player, Adobe PhotoShopCS3;

- Офисное ПО: MS Office, Deform, Abbyy, Adobe Reader, Fine Reader;

- VoIP приложения, программы мгновенного обмена сообщениями, браузеры: Internet Explorer, Skype, Opera;

- Словари и переводчики: Izet, Тілмаш, Promt

- Система документооборота: 1C Бухгалтерия, Lotus, SAP и др.

Качественно новым уровнем используемого в вузах программного обеспечения являются сетевые технологии, предназначенные для совместного и многократного использования ресурсов через Интернет и локальные сети. В Казахстане широкое распространение получили такие сетевые технологии, как:

- система управления аудиторией (CRMS); Microsoft Netmeeting;

- система управления обучением (LMS);

- система управления контентом (CMS);

- система проектирования интерактивной образовательной среды (LENS);

- система проектирования ресурсов (ERP), менеджмент взаимодействия (CRM),

- система менеджмента планирования (PMS), система тестирования (TMS) и другие.



2. Назначение и применение JavaScript, общие сведения

Гипертекстовая информационная система состоит из множества информационных узлов, множества гипертекстовых связей, определенных на этих узлах и инструментах манипулирования узлами и связями. Технология World Wide Web - это технология ведения гипертекстовых распределенных систем в Internet, и, следовательно, она должна соответствовать общему определению таких систем. Это означает, что все перечисленные выше компоненты гипертекстовой системы должны быть и в Web.

Web, как гипертекстовую систему, можно рассматривать с двух точек зрения. Во-первых, как совокупность отображаемых страниц, связанных гипертекстовыми переходами (ссылками - контейнер ANCHOR). Во-вторых, как множество элементарных информационных объектов, составляющих отображаемые страницы (текст, графика, мобильный код и т.п.). В последнем случае множество гипертекстовых переходов страницы - это такой же информационный фрагмент, как и встроенная в текст картинка.

При втором подходе гипертекстовая сеть определяется на множестве элементарных информационных объектов самими HTML-страницами, которые и играют роль гипертекстовых связей. Этот подход более продуктивен с точки зрения построения отображаемых страниц "на лету" из готовых компонентов.

При генерации страниц в Web возникает дилемма, связанная с архитектурой "клиент-сервер". Страницы можно генерировать как на стороне клиента, так и на стороне сервера. В 1995 году специалисты компании Netscape создали механизм управления страницами на клиентской стороне, разработав язык программирования JavaScript.

Таким образом, JavaScript - это язык управления сценариями просмотра гипертекстовых страниц Web на стороне клиента. Если быть более точным, то JavaScript - это не только язык программирования на стороне клиента. Liveware, прародитель JavaScript, является средством подстановок на стороне сервера Netscape. Однако наибольшую популярность JavaScript обеспечило программирование на стороне клиента.

Основная идея JavaScript состоит в возможности изменения значений атрибутов HTML-контейнеров и свойств среды отображения в процессе просмотра HTML-страницы пользователем. При этом перезагрузки страницы не происходит.

На практике это выражается в том, что можно, например, изменить цвет фона страницы или интегрированную в документ картинку, открыть новое окно или выдать предупреждение.

Название "JavaScript" является собственностью Netscape. Реализация языка, осуществленная разработчиками Microsoft, официально называется Jscript. Версии JScript совместимы (если быть совсем точным, то не до конца) с соответствующими версиями JavaScript, т.е. JavaScript является подмножеством языка JScript.

JavaScript стандартизован ECMA (European Computer Manufacturers Association - Ассоциация европейских производителей компьютеров). Соответствующие стандарты носят названия ECMA-262 и ISO-16262. Этими стандартами определяется язык ECMAScript, который примерно эквивалентен JavaScript 1.1. Отметим, что не все реализации JavaScript на сегодня полностью соответствуют стандарту ECMA. В рамках данного курса мы во всех случаях будем использовать название JavaScript.

2.1 Понятие объектной модели применительно к JavaScript

Для создания механизма управления страницами на клиентской стороне было предложено использовать объектную модель документа. Суть модели в том, что каждый HTML-контейнер - это объект, который характеризуется тройкой:

свойства;

методы;

события.

Объектную модель можно представить как способ связи между страницами и браузером. Объектная модель - это представление объектов, методов, свойств и событий, которые присутствуют и происходят в программном обеспечении браузера, в виде, удобном для работы с ними кода HTML и исходного текста сценария на странице. Мы можем с ее помощью сообщать наши пожелания браузеру и далее - посетителю страницы. Браузер выполнит наши команды и соответственно изменит страницу на экране.

Объекты с одинаковым набором свойств, методов и событий объединяются в классы однотипных объектов. Классы - это описания возможных объектов. Сами объекты появляются только после загрузки документа браузером или как результат работы программы. Об этом нужно всегда помнить, чтобы не обратиться к объекту, которого нет.

2.2 Cвойства

Многие HTML-контейнеры имеют атрибуты. Например, контейнер якоря <A ...>...</A> имеет атрибут HREF, который превращает его в гипертекстовую ссылку:

<A HREF=intuit.htm>intuit</A>

Если рассматривать контейнер якоря <A ...>...</A> как объект, то атрибут HREF будет задавать свойство объекта "якорь". Программист может изменить значение атрибута и, следовательно, свойство объекта:

document.links[0].href="intuit.htm";

Не у всех атрибутов можно изменять значения. Например, высота и ширина графической картинки определяются по первой загруженной в момент отображения страницы картинке. Все последующие картинки, которые заменяют начальную, масштабируются до нее. Справедливости ради следует заметить, что в Microsoft Internet Explorer размер картинки может меняться.

Для общности картины свойствами в JavaScript наделены объекты, которые не имеют аналогов в HTML-разметке. Например, среда исполнения, называемая объектом Navigator, или окно браузера, которое является вообще самым старшим объектом JavaScript.

В терминологии JavaScript методы объекта определяют функции изменения его свойств. Например, с объектом "документ" связаны методы open(), write(), close(). Эти методы позволяют сгенерировать или изменить содержание документа. Приведем простой пример:

function hello()

{

id=window.open("","example","width=400, height=150");

id.focus(); id.document.open();

id.document.write("<H1>Привет!</H1>");

id.document.write("<HR><FORM>");

id.document.write("<INPUT TYPE=button VALUE='Закрыть окно' ");

id.document.write("onClick='window.opener.focus();

window.close();'>");

id.document.close();

}

В этом примере метод open() открывает поток записи в документ, метод write() осуществляет эту запись, метод close() закрывает поток записи в документ. Все происходит так же, как и при записи в обычный файл. Если у окна есть поле статуса (обычно в нем отображается уровень загрузки документа), то при незакрытом потоке записи в документ в нем будет "метаться" прямоугольник продолжения записи, как это происходит при загрузке документа.

Кроме методов и свойств объекты характеризуются событиями. Собственно, суть программирования на JavaScript заключается в написании обработчиков этих событий. Например, с объектом типа button (контейнер INPUT типа button - "Кнопка") может происходить событие click, т.е. пользователь может нажать на кнопку. Для этого атрибуты контейнера INPUT расширены атрибутом обработки события click - onClick. В качестве значения этого атрибута указывается программа обработки события, которую должен написать на JavaScript автор HTML-документа:

<INPUT TYPE=button VALUE="Нажать" onClick=

"window.alert('Пожалуйста, нажмите еще раз');">

Обработчики событий указываются в тех контейнерах, с которыми эти события связаны. Например, контейнер BODY определяет свойства всего документа, поэтому обработчик события завершения загрузки всего документа указывается в этом контейнере как значение атрибута onLoad.

Примечание. Строго говоря, каждый браузер, будь то Internet Explorer, Netscape Navigator или Opera, имеет свою объектную модель. Объектные модели разных браузеров (и даже разные версии одного) отличаются друг от друга, но имеют принципиально одинаковую структуру. Поэтому нет смысла останавливаться на каждой из них по отдельности. Мы будем рассматривать общий подход применительно ко всем браузерам, иногда, конечно, заостряя внимание на различиях между ними.

2.2 URL-схема JavaScript

Схема URL (Uniform Resource Locator) - это один из основных элементов Web-технологии. Каждый информационный ресурс в Web имеет свой уникальный URL. URL указывают в атрибуте HREF контейнера A, в атрибте SRC контейнера IMG, в атрибуте ACTION контейнера FORM и т.п. Все URL подразделяются на схемы доступа, которые зависят от протокола доступа к ресурсу, например, для доступа к FTP-архиву применяется схема ftp, для доступа к Gopher-архиву - схема gopher, для отправки электронной почты - схема smtp. Тип схемы определяется по первому компоненту URL: http://intuit.ru/directory/page.html .В данном случае URL начинается с http - это и есть определение схемы доступа (схема http).

Основной задачей языка программирования гипертекстовой системы является программирование гипертекстовых переходов. Это означает, что при выборе той или иной гипертекстовой ссылки вызывается программа реализации гипертекстового перехода. В Web-технологии стандартной программой является программа загрузки страницы. JavaScript позволяет поменять стандартную программу на программу пользователя. Для того чтобы отличить стандартный переход по протоколу HTTP от перехода, программируемого на JavaScript, разработчики языка ввели новую схему URL - JavaScript:

<A HREF="JavaScript:JavaScript_код">...</A>

<IMG SRC="JavaScript:JavaScript_код">

В данном случае текст "JavaScript_код" обозначает программы-обработчики на JavaScript, которые вызываются при выборе гипертекстовой ссылки в первом случае и при загрузке картинки - во втором. Например, при нажатии на гипертекстовую ссылку Внимание!!! можно получить окно предупреждения:

<A HREF="JavaScript:alert('Внимание!!!');"> Внимание!!!</A>4

Рис. 1.1.

А при нажатии на кнопку типа submit в форме можно заполнить текстовое поле этой же формы:

<FORM NAME=f METHOD=post

ACTION="JavaScript:window.document.f.i.VALUE=

'Нажали кнопку Click';void(0);">

<TABLE BORDER=0>

<TR>

<TD><INPUT NAME=i></TD>

<TD><INPUT TYPE=submit VALUE=Click></TD>

<TD><INPUT TYPE=reset VALUE=Reset></TD>

</TABLE>

</FORM>

В URL можно размещать сложные программы и вызовы функций. Следует только помнить, что схема JavaScript работает не во всех браузерах, а только в версиях Netscape Navigator и Internet Explorer, начиная с четвертой.

Таким образом, при программировании гипертекстового перехода интерпретатор получает управление после того, как пользователь "кликнул" по гипертекстовой ссылке.

Такие программы, как обработчики событий (handler), указываются в атрибутах контейнеров, с которыми эти события связаны. Например, при нажатии на кнопку происходит событие click:

<FORM><INPUT TYPE=button VALUE="Кнопка" onсlick=

"window.alert('intuit');"></FORM>

Подстановка (entity) встречается на Web-страницах довольно редко. Тем не менее это достаточно мощный инструмент генерации HTML-страницы на стороне браузера. Подстановки используются в качестве значений атрибутов HTML-контейнеров. Например, как значение по умолчанию поля формы, определяющего домашнюю страницу пользователя, будет указан URL текущей страницы:

<SCRIPT>

function l()

{

str = window.location.href;

return(str.length);

}

</SCRIPT>

<FORM><INPUT VALUE="&{window.location.href};" SIZE="&{l()};">

</FORM>

<SCRIPT>

<!-- Это комментарий ...JavaScript-код...// -->

</SCRIPT>

<BODY>

... Тело документа ...

</BODY>

</HTML>

HTML-комментарии здесь вставлены для защиты от интерпретации данного фрагмента страницы HTML-парсером в старых браузерах (у высокого начальства еще встречаются). В свою очередь, конец HTML-комментария защищен от интерпретации JavaScript-интерпретатором (// в начале строки). Кроме того, в качестве значения атрибута LANGUAGE у тега начала контейнера указано значение "JavaScript". VBScript, который является альтернативой JavaScript - это скорее экзотика, чем общепринятая практика, поэтому данный атрибут можно опустить - значение "JavaScript" принимается по умолчанию.

Очевидно, что размещать в заголовке документа генерацию текста страницы бессмысленно - он не будет отображен браузером. Поэтому в заголовок помещают декларации общих переменных и функций, которые будут затем использоваться в теле документа. При этом браузер Netscape Navigator более требовательный, чем Internet Explorer. Если не разместить описание функции в заголовке, то при ее вызове в теле документа можно получить сообщение о том, что данная функция не определена. Приведем пример размещения и использования функции:

<HTML>

<HEAD>

<SCRIPT>

function time_scroll()

{

var d = new Date();

window.status = d.getHours() +":"+d.getMinutes() +":"+

d.getSeconds();

setTimeout('time_scroll();',500);

}

</SCRIPT>

</HEAD>

<BODY onLoad=time_scroll()>

<CENTER>

<H1>Часы в строке статуса</H1>

В Internet Explorer 4.0 подстановки не поддерживаются, поэтому пользоваться ими следует аккуратно. Прежде чем выдать браузеру страницу с подстановками, нужно проверить тип этого браузера.

В случае подстановки интерпретатор получает управление в момент разбора браузером (компонент парсер) HTML-документа. Как только парсер встречает конструкцию &{..} у атрибута контейнера, он передает управление интерпретатору JavaScript, который, в свою очередь, после исполнения кода это управление возвращает парсеру. Таким образом данная операция аналогична подкачке графики на HTML-страницу.

Контейнер SCRIPT - это развитие подстановок до возможности генерации текста документа JavaScript-кодом. В этом смысле применение SCRIPT аналогично Server Side Includes, т.е. генерации страниц документов на стороне сервера. Однако здесь мы забежали чуть вперед. При разборе документа HTML-парсер передает управление интерпретатору после того, как встретит тег начала контейнера SCRIPT. Интерпретатор получает на исполнение весь фрагмент кода внутри контейнера SCRIPT и возвращает управление HTML-парсеру для обработки текста страницы после тега конца контейнера SCRIPT.

Контейнер SCRIPT выполняет две основные функции:

размещение кода внутри HTML-документа;

условная генерация HTML-разметки на стороне браузера.

Первая функция аналогична декларированию переменных и функций, которые потом можно будет использовать в качестве программ переходов, обработчиков событий и подстановок. Вторая - это подстановка результатов исполнения JavaScript-кода в момент загрузки или перезагрузки документа.

Собственно, особенного разнообразия здесь нет. Код можно разместить либо в заголовке документа, внутри контейнера HEAD, либо внутри BODY. Последний способ и его особенности будут рассмотрены в разделе "Условная генерация HTML-разметки на стороне браузера". Поэтому обратимся к заголовку документа.

Код в заголовке размещается внутри контейнера SCRIPT:

<HTML>

<HEAD>

<SCRIPT>

function time_scroll()

{

d = new Date();

window.status = d.getHours() +":"+d.getMinutes() +":"

+d.getSeconds();

setTimeout('time_scroll();',500);

}

</SCRIPT>

</HEAD>

<BODY onLoad=time_scroll()>

<CENTER>

<H1>Часы в строке статуса</H1>

<FORM>

<INPUT TYPE=button VALUE="Закрыть окно" onClick=window.close()>

</FORM>

</CENTER>

</BODY>

</HTML>

В этом примере мы декларировали функцию time_scroll() в заголовке документа, а потом вызвали ее как обработчик события load в теге начала контейнера BODY (onLoad=time_scroll()) .

В качестве примера декларации переменной рассмотрим изменение статуса окна-потомка из окна-предка: cоздадим дочернее окно с помощью следующей функции, продекларировав ее, а затем и вызвав:

function sel()

{

id = window.open("","example","width=500,height=200,status,menu");

id.focus();

id.document.open();

id.document.write("<HTML><HEAD>");

id.document.write("<BODY>");

id.document.write("<CENTER>");

id.document.write("<H1>Change text into child window.</H1>");

id.document.write("<FORM NAME=f>");

id.document.write("<INPUT TYPE=text NAME=t SIZE=20

MAXLENGTH=20 VALUE='This is the test'>");

id.document.write("<INPUT TYPE=button VALUE='Close the window'

onClick=window.close()></FORM>");

id.document.write("</CENTER>");

id.document.write("</BODY></HTML>");

id.document.close();

}

<INPUT TYPE=button VALUE="Изменить поле статуса в окне примера"

onClick="id.defaultStatus='Привет'; id.focus();">

Открывая окно-потомок, мы поместили в переменную id указатель на объект окно id=window.open(). Теперь мы можем использовать ее как идентификатор объекта класса Window. Использование id.focus() в нашем случае обязательно. При нажатии на кнопку "Изменить поле статуса в окне примера" происходит передача фокуса в родительское окно. Оно может иметь размер экрана. При этом изменения будут происходить в окне-потомке, которое будет скрыто родительским окном. Для того чтобы увидеть изменения, надо передать фокус. Переменная id должна быть определена за пределами каких-либо функций, что и сделано. В этом случае она становится свойством окна. Если мы поместим ее внутри функции открытия дочернего окна, то не сможем к ней обратиться из обработчика события click.

Всегда приятно получать с сервера страницу, подстроенную под возможности нашего браузера или, более того, под пользователя. Существует только две возможности генерации таких страниц: на стороне сервера или непосредственно у клиента. JavaScript-код исполняется на стороне клиента (на самом деле, серверы компании Netscape способны исполнять JavaScript-код и на стороне сервера, только в этом случае он носит название LiveWire-код; не путать с LiveConnect), поэтому рассмотрим только генерацию на стороне клиента.

Для генерации HTML-разметки контейнер SCRIPT размещают в теле документа. Простой пример - встраивание в страницу локального времени:

<BODY>

...

<SCRIPT>

d = new Date();

document.write("<BR>");

document.write("Момент загрузки страницы:

"+d.getHours()+":"+d.getMinutes()+":"+d.getSeconds());

document.write("<BR>");

</SCRIPT>

...

</BODY>



3. Каскадная таблица стилей

Каскадные таблицы стилей CSS появились гораздо позже HTML - только в 1997 году. Несмотря на то, что CSS работает с HTML, это не HTML. Более того, CSS представляет собой отдельный код, который расширяет возможности HTML, позволяя переопределять уже существующие HTML-теги.

Связано это с тем, что WWW была создана как средство для обмена текстовыми документами, а HTML был языком, с помощью которого создавались эти документы. Для военных и ученых главным было содержимое документ, а не его оформление. Поэтому первые версии HTML не включали даже средств для размещения на веб-страницах графических изображений, тем более для сложного форматирования текста. Но со временем в интернет пришли остальные люди и потребовали, чтобы им "сделали красиво".

Так возникли каскадные таблицы стилей, созданные для облегчения работы веб-дизайнеров. В настоящее время приняты CSS1 и CSS2. CSS третьего уровня (CSS3) еще находится в стадии разработки. Но даже после ее выпуска браузеры только через несколько лет начнут ее поддерживать. Самым важным отличием CSS3 от предыдущих версий станет масштабируемая векторная графика. То есть все преимущества векторной графики будут доступны теперь и в интернете.

Но даже таблицы стилей первого уровня (CSS1) предлагают удивительные возможности. Куда там HTML с его примитивным форматированием!

Каскадные (многоуровневые) таблицы стилей - cascading style sheets (CSS) - это мощный стандарт на основе текстового формата, определяющий представление данных в броузере.

Если формат HTML предоставляет информацию о составе документа, то таблицы стилей сообщают как он должен выглядеть. Таким образом каскадные таблицы стилей дают возможность хранить содержимое отдельно от его представления.

Стиль включает все типы элементов дизайна: шрифт, фон, текст, цвета ссылок, поля и расположение объектов на странице.

CSS разрабатывались так, чтобы обеспечить больший уровень контроля над размещением текста и графики.

Каскадные таблицы стилей обеспечивают должный уровень единства оформления, организации и контроля во время разработки узла, который является недостижимым с помощью одного только HTML.

CSS предполагает 3 типа таблиц стилей - встроенные, внедренные (внутренние) и связанные (внешние).

Впервые идея форматирования HTML-документов с помощью CSS была рекомендована Консорциумом W3C в 1996 году. Эта рекомендация, которая была обновлена в 1998 году, используется Web-разработчиками и по сей день.

Термин "каскадный" означает, что в одной странице HTML могут использоваться разные стили. Броузер, поддерживающий таблицы стилей, будет следовать их порядку (как по каскаду), интерпретируя информацию стилей. Это означает, что вы можете использовать все три типа стилей, и броузер будет интерпретировать сначала связанные, затем внедренные и, наконец, встроенные стили. Даже если ко всему узлу будут применены образцы стилей, можно будет управлять отдельными аспектами страниц с помощью внедренных стилей, а отдельными областями внутри этих страниц - с помощью встроенных стилей.

Другой аспект каскадирования - наследование (inheritance). Наследование означает, что если не указано иное, то конкретный стиль будет унаследован другими элементами страницы HTML. Например, если вы примените определенный цвет текста в теге <р>, то все теги внутри этого абзаца наследуют этот цвет, если не оговорено иное.



3.1 Определение правил CSS

Итак, какскадная таблица стилей - это набор правил форматирования тегов HTML. Например, для того, чтобы цвет фона Web-страницы сделать черным, необходимо объявить следующее правило форматирования:

body {background:black}

Будьте внимательны! По умолчанию цвет шрифта - черный! Не следует претендовать на лавры Малевича! Ваш "Черный квадрат" Эрмитаж не купит!

Свойства CSS должны находиться в фигурных скобках.

Для каждого тега HTML можно указать не одно, а несколько свойств стиля.

Изменим с помощью CSS не только цвет фона Web-страницы, но и цвет шрифта (на белый).

body {background:black; color:white}

Формат самого правила не имеет значения, главное - правило должно читаться удобно и легко. Например, вышеприведенное правило можно записать и так:

body {

background:black;

color:white}

Одно и то же правило стиля можно применить сразу к нескольким различным тегам HTML-страницы. Например:

body, td, h1 {

background:black;

color:white}

Встроенный стиль

Встроенный стиль применяется к любому тегу HTML с помощью атрибута style следующим образом:

<P style= "font: 12pt Courier New"> The text in this line will

display as 12 point text using the Courier New font.

</P>

Или:

<p style= "font: 12pt Arial">

The text in this line will display as 18 point text using the

Arial font.

</p>

Посмотрим на результат:

The text in this line will display as 12 point text using the Courier New font.

The text in this line will display as 18 point text using the Arial font.

Можно добавлять встроенный стиль в любой тег HTML, в котором эта операция будет иметь смысл. Среди таких тегов можно назвать абзацы, заголовки, горизонтальные линии, якоря и ячейки таблиц. Ко всем этим элементам логично применять встроенные стили.

Существуют два тега, которые помогают применять встроенные стили к разделам страницы. Это теги <div> (division - раздел) и <span> (промежуток). Эти теги определяют диапазон текста, так что все, находящееся между ними, будет оформлено с помощью нужного стиля. Единственное различие между <div> и <span> состоит в том, что <div> создает принудительный разрыв строки, a <span> - нет.

Следовательно, нужно использовать <span> для изменения стиля любой части текста, меньшей абзаца.

Вот пример работы тега <div>:

<div style="font-family: Garamond; font-size: 18 pt;>"AII of the

text within this section is 18 point Garamond.

AII of the text within this section is 18 point Garamond.

и тега <span>:

<span style= "color:#ff3300;"> This text appears in the color red,

with no line break after the closing span tag </span> and the rest of

the text.

This text appears in the color red, with no line break after the closing span tag and the rest of the text.

Внедренные стили используют тег <style>, расположенный между тегами </head> и <bodу> в стандартном документе HTML.

Рассмотрим пример внедренного стиля:

<html>

<head>

<title>Embedded Style Sheet Example </title>

</head>

<style>

BODY {

background: #FFFFFF;

color: #000000;

}

H1 {

font: 14pt verdana; color: #CCCCCC;}

P {font: 12pt times;}

A {color: #FFOOOO; text-decoration: none}

</style>

Как видно из примера, приведенного выше, таблица стилей теперь отличается от кода стандартной страницы HTML, но все же логику проследить нетрудно. В нашем случае для основной части страницы (body) указаны цвет фона, цвет текста и верхнее, левое и правое поля в дюймах.

Для заголовка первого уровня (HI) указывается шрифт (название шрифта и размер в пунктах). В этом и состоит удобство каскадных таблиц стилей - вы можете задавать размеры не только в пунктах, но и пикселях (рх), процентах (75%) и сантиметрах (cm).

Существует и несколько новых единиц измерения, самой примечательной из которых является m.

В отличие от пунктов или пикселов, представляющих абсолютные размеры различных объектов, 1m - ширина строчной буквы m в том шрифте о котором идет речь. Правда, большинство броузеров об этом не догадываются и поэтому определяют 1m просто как размер, заданный по умолчанию. Например, в Internet Explorer 4.0 и выше для гарнитуры Verdana размер 1m соответствует 12 пунктам. Точнее сказать "соответсвует значению, которое пользователь установил в качестве размера шрифта по умолчанию. Таким образом, если установить в броузере размер шрифта по умолчанию 16 пунктам, то и 1m тоже станет равна 16 пунктам, и все остальные размеры будут соответственно увеличены.

Другой интересный момент этой таблицы стилей - различие стилей шрифтов заголовка и абзаца. Они отличаются цветом, отступом и гарнитурой. утилита javascript sheets коммуникационный

В теге якоря (А) можно увидеть еще один очень удобный элемент синтаксиса. Строка text-decoration: none удаляет подчеркивание ссылок, так что результат выглядит чисто и привлекательно.

Связанные (linked), или внешние (external), таблицы стилей являются расширением понятия внедренных стилей. Используется тот же самый код, что и для внедренной таблицы стилей, но он помещается в отдельный документ (файл с расширением.css). После этого с этим документом (файлом) связываются все страницы, к которым необходимо применить данный стиль.

Вот как выглядит пример связанной таблицы стилей:

<style>

BODY {

background: #ffffcc;

color: #000000;

}

P {

font-family: sans-serif;

font-style: italic;

font-size: 16pt;

color: #006633;

}

H1 {

font-family: Arial, Helvetica, sans-serif;

font-size: 24pt;

color: #996633;

}

</style>

Теперь сохраним этот документ как отдельный файл. Назовем его style-l.css и поместим в папку таблиц стилей с именем style.

С этим документом любое количество страниц HTML. Для этого нужно использовать между тегами </title> и </head> следующую конструкцию:

<link rel=stylesheet href= "style-1.css" type= "text/css">

Любая страница, содержащая такую связь, будет оформлена в соответствии со стилями, указанными в файле style_1.css.



Заключение

Завершая работу над рефератом можно прийти к выводу, что использование ИКТ в общеобразовательных предметах основной школы ведет к повышению качества образования.

Практика показывает, что дети с большим успехом, чем взрослые, осваивают компьютер и технологии.

Более значимой становится роль ИКТ в плане интеллектуального и эстетического развития подростков и взрослых.

Усиление социальной, гуманистической направленности процессов информатизации в школе, расширение и конкретизация духовного, социального, культурного контекста применения ИКТ, формирование информационной культуры призваны преодолеть существующий "технократизм" образования по информатике, сделать его более гуманным

Javascript - скриптовый язык, предназначенный для создания интерактивных веб-страниц.

Javascript не требуется компилировать, он подключается к HTML-странице и работает "как есть".

Javascript - НЕ java, а совсем другой язык. Он похоже называется, но не более того. У javascript есть свой стандарт: ECMAScript, спецификация которого находится на сайте в разделе стандарт языка.

Язык программирования JavaScript был разработан фирмой

Netscape в сотрудничестве с Sun Microsystems и анансирован в

1995 году. JavaScript предназначен для создания интерактивных

html-документов. Основные области использования JavaScript:

*Создание динамических страниц, т.е. страниц, содержимое

которых может меняться после загрузки.

*Проверка правильности заполнения пользовательских форм.

Решение "локальных" задач с помощью сценариев.

*JavaScript-код - основа большинства Ajax-приложений.

Makhmazaiitov Kufliddin.

CSS используется создателями веб-страниц для задания цветов, шрифтов, расположения и других аспектов представления документа.

Основной целью разработки CSS являлось разделение содержимого (написанного на HTML или другом языке разметки) и представления документа (написанного на CSS).

Это разделение может увеличить доступность документа, предоставить большую гибкость и возможность управления его представлением, а также уменьшить сложность и повторяемость в структурном содержимом. Кроме того, CSS позволяет представлять один и тот же документ в различных стилях или методах вывода, таких как экранное представление, печать, чтение голосом (специальным голосовым браузером или программой чтения с экрана), или при выводе устройствами, использующими Шрифт Брайля.

Стандарт CSS определяет приоритеты, в порядке которых применяются правила стилей, если для какого-то элемента подходят несколько правил одновременно.

Это называется "каскадом", в котором для правил рассчитываются приоритеты или "веса", что делает результаты предсказуемыми.CSS (англ. Cascading Style Sheets - каскадные таблицы стилей) - формальный язык описания внешнего вида документа, написанного с использованием языка разметки.

Преимущественно используется как средство описания, оформления внешнего вида веб-страниц, написанных с помощью языков разметки HTML и XHTML, но может также применяться к любым XML-документам, например, к SVG или XUL.

CSS используется создателями веб-страниц для задания цветов, шрифтов, расположения отдельных блоков и других аспектов представления внешнего вида этих веб-страниц. Основной целью разработки CSS являлось разделение описания логической структуры веб-страницы (которое производится с помощью HTML или других языков разметки) от описания внешнего вида этой веб-страницы (которое теперь производится с помощью формального языка CSS). Такое разделение может увеличить доступность документа, предоставить большую гибкость и возможность управления его представлением, а также уменьшить сложность и повторяемость в структурном содержимом. Кроме того, CSS позволяет представлять один и тот же документ в различных стилях или методах вывода, таких как экранное представление, печатное представление, чтение голосом (специальным голосовым браузером или программой чтения с экрана), или при выводе устройствами, использующими шрифт Брайля.

Основным понятием CSS является стиль - т.е. набор правил оформления и форматирования, который может быть применен к различным элементам страницы. В стандартном HTML для присвоения какому-либо элементу определенных свойств (таких, как цвет, размер, положение на странице и т.п.) приходилось каждый раз описывать эти свойства, даже если на одной страничке должны располагаться 10 или 110 таких элементов, ничуть не отличающихся один от другого. Вы должны были десять или сто десять раз вставить один и тот же кусок HTMLкода в страничку, увеличивая размер файла и время загрузки на компьютер просматривающего ее пользователя.

CSS действует другим, более удобным и экономичным способом. Для присвоения какому-либо элементу определенных характеристик вы должны один раз описать этот элемент и определить это описание как стиль, а в дальнейшем просто указывать, что элемент, который вы хотите оформить соответствующим образом, должен принять свойства стиля, описанного вами. Удобно, не правда ли?

Кроме того, CSS позволяет работать со шрифтовым оформлением страниц на гораздо более высоком уровне, чем стандартный HTML, избегая излишнего утяжеления страниц графикой.



Список использованной литературы

1. Эд Титтел, Джефф Ноубл. HTML, XHTML и CSS для чайников, 7-е издание = HTML, XHTML & CSS For Dummies, 7th Edition. -- М.: "Диалектика", 2011. -- 400 с. -- ISBN 978-5-8459-1752-2.

2. Стивен Шафер. HTML, XHTML и CSS. Библия пользователя, 5-е издание = HTML, XHTML, and CSS Bible, 5th Edition. -- М.: "Диалектика", 2011. -- 656 с. -- ISBN 978-5-8459-1676-1.

3. Энди Бадд, Камерон Молл, Саймон Коллизон. CSS: профессиональное применение Web-стандартов = CSS Mastery: Advanced Web Standards Solutions. -- М.: "Вильямс", 2008. -- 272 с. -- ISBN 978-5-8459-1199-5.

4. Кристофер Шмитт. CSS. Рецепты программирования = CSS. Cookbook. -- СПб.: БХВ-Петербург, 2007. -- 592 с. -- ISBN 978-5-9775-0075-3.

5. Эрик А. Мейер. CSS-каскадные таблицы стилей: подробное руководство = Cascading Style Sheets: The definitive Guide. -- М.: Символ, 2006. -- 576 с. -- ISBN 5-93286-075-8.

Размещено на Allbest.ru

...