Файл: Конспект лекций для студентов специальности i 53 01 07 Информационные технологии и управление в технических системах.pdf

10
имеющие большой опыт работы с Visual Basic, то применение VB Script вместо
JavaScript сокращает сроки разработки.
Аплеты Java. Подмножество приложений Java, называемых аплетами
Java, используют наряду с клиентскими сценариями для организации активности на стороне клиента. Аплеты Java могут применяться для получения визуальных и звуковых эффектов, организации ввода и предварительной обработки данных перед отправкой их на сервер, а также для представления полученных от сервера данных в графическом, табличном или ином виде.
Создание аплетов во многом упрощается благодаря наличию обширных библиотек классов Java. В этих библиотеках есть мощные и удобные средства для организации пользовательского интерфейса, работы с графическими изображениями, передачи данных по сети и др. Это позволяет больше внимания уделить логике работы аплета, а не реализации типовых задач программирования вроде организации динамических массивов или загрузки графических изображений. Аплеты выполняются под управлением браузера и не имеют доступа к ресурсам компьютера.
Элементы управления ActiveX. Элементы управления ActiveX (ActiveX
control) основаны на модели компонентных объектов (Component Object Model,
СОМ), их применяют для решения тех же задач, что и аплеты Java, однако предоставляют полный доступ к ресурсам компьютера. Это сокращает привлекательность элементов ActiveX для оформления страниц серверов Web,
так как загрузка на компьютер неизвестных программ небезопасна. Элементы управления ActiveX можно использовать как на стороне сервера, так и на стороне клиента. Чтобы убедить пользователей в том, что предлагаемый для загрузки элемент ActiveX безопасен, используется технология цифровых сертификатов. Чтобы получить цифровой сертификат и подписать свой элемент управления ActiveX, разработчик должен внести единовременный денежный взнос, а затем производить ежегодную плату.
Заметим, что при разработке элементов управления ActiveX для Web- сервера их можно не подписывать, так как они не загружаются клиентами, а выполняются непосредственно на сервере.
2 Средства просмотра гипертекста
При создании гипертекстовых страниц необходимо учитывать многообразие браузеров и платформ, каждая из которых по-разному поддерживает HTML и сценарии. Большая часть используемых современных браузеров – это Internet Explorer. Он интегрирован в операционную систему,
поэтому пользователи Windows используют его умолчанию. Альтернативой IE
является Opera, которая за короткое время превратилась из небольшой и простой программы, созданной норвежской компанией Opera Software в серьёзного конкурента IE. Этот браузер имеет исключительно малым временем загрузки и минимальными требованиями к объему диска. Достоинством Opera является полное соответствие стандартам HTML.

11
2.1 Отображение страницы в окне браузера
Одним из неприятных аспектов разработки гипертекстовых страниц является зависимость их внешнего представления от конфигурации программного и аппаратного обеспечения каждого отдельного пользователя.
Страница, которая правильно выглядит на одной машине, может совершенно иначе выглядеть на экране другого пользователя. Это зависит как от возможностей браузера, так и предпочтений пользователя (размер шрифта, цвета и т. д.).
При разработке страницы следует учитывать рабочее пространство в окне браузера, поскольку операционная система и сам браузер занимают на экране некоторое пространствою При проектировании страницы следует фиксировать горизонтальный размер рабочей области окна (правилом хорошего тона является отсутствие горизонтальной полосы прокрутки). На практике размеры окна браузера варьируются. Рабочее пространство в Internet Explorer 4.0
распределяется следующим образом (рис. 2):
Рис. 2. Рабочее пространство в Internet Explorer
По умолчанию Web-страницы гибкие. При этом текст и элементы HTML- файла попадают в окно браузера, заполняя всё доступное пространство, вне зависимости от размеров монитора. Если размер окна браузера изменяется,
элементы повторно выводятся, чтобы настроиться на новые размеры. Проблема состоит в непредсказуемости места появления элементов. Такие страницы хорошо отображаются на мониторах с разным разрешением, заполненяя всё
пространство монитора. Однако на больших разрешениях длина строки может оказаться чрезмерной, а длинные строки неудобны для чтения с экрана. Кроме того на больших мониторах элементы расположены гармонично, а на маленьких – они скучены.
Для структурирования гибкого документа используются таблицы и

12
фреймы. При использовании процентных значений размеров для таблиц или фреймов, размер будет изменяться в соответствии с окном браузера. К примеру,
два столбца с шириной по 25 и 75 % от размера окна браузера всегда сохраняют эти пропорции, независимо от разрешения
Страница фиксированного размера останется постоянной, независимо от размеров окна, – это её достоинство, также обеспечивается лучшее управление длинами строк. Чтобы строки не становились слишком длинными при просмотре на больших мониторах, используют таблицы. Главный недостаток, – если размер окна меньше сетки страницы, её части не будут видны и потребуется горизонтальная прокрутка, что воспринимается как помеха. Для создания фиксированной Web-страницы необходимо помесить её содержимое в структурную таблицу с абсолютными размерами, заданными в пикселах.
3 Графика и текст в Web
3.1 Графика в Web
Важным элементом при создании Web страницы является её графическое наполнение, которое может быть передано цветовой палитрой и изображениями.
Для задания цвета используются числовые RGB-значения в диапазоне от 0 до
255. Например, значения RGB для темно-оранжевого цвета равны R:198, G:83,
B:52. Существуют три системы для задания цветов. Шестнадцатеричная
(3333FF); проценты (процентный эквивалент 51-51-255 равен 20-20-100 %);
десятичная, в диапазоне от 0 до 255 (51-51-255, что означает значение красного –
51, зеленого – 51, голубого – 255).
Большинсво изображений, существующих в Web, представлены в трёх растровых форматах: GIF, JPEG и PNG.
Формат GIF (Grafic Interchange Format) был первым форматом файлов,
который поддерживался Web-браузерами, и по сей день продолжает оставаться основным. GIF представляет собой файлы индексированных 8-разрядных цветов,
что определяет максимум 256 цветов. Поскольку этот формат сжимает информацию о цветах по строкам пикселов, GIF-файлы лучше всего подходят для графики, которая содержит области равномерного цвета. Другим достоинством этого формата является возможность анимации графических изображений, состоящих из нескольких сменяющих друг друга кадров.
Формат JPEG. Вторым наиболее популярным графическим форматом в
Web является JPEG (Joint Photographic Experts Group). Он содержит 24- разрядную информацию о цвете. Это миллионы цветов в отличие от 256 цветов формата GIF. В JPEG используется так называемое сжатие с потерями. Это означает, что часть информации об изображении в процессе сжатия теряется, но в большинстве случаев ухудшение качества не заметно. В этом формате лучше всего сохранять фотографии или любые изображения с плавными градациями цветов, так как он предлагает более высокое качество изображения в файле меньшего объема. Однако JPEG не является лучшим решением для графических

13
изображений с одноцветными областями, поскольку этот формат имеет тенденцию изменять цвета и конечный файл, будет несколько больше, чем GIF- файл для того же изображения.
Формат PNG. Третий графический формат – это PNG (Portable Network
Graphic), который постепенно становится очень популярным в Web. PNG может поддерживать 8-разрядные индексированные цвета, 16-разрядные полутона или
24-разрядные полноцветные изображения, используя схему сжатия без потерь.
Это обеспечивает более высокое качество изображений, а иногда и меньший объем файлов по сравнению с форматом GIF за счёт использования различных алгоритмов сжатия (Selective (Селективный), Adaptive (Адаптивный) и др.)
Кроме того, файлы PNG имеют функции, позволяющие показывать рисунок фона сквозь отбрасываемые мягкие тени.
3.2 Текст в Web. Два комплекта шрифтов
При создании Web страницы зарание неизвестно, как именно будет выглядеть текст на экране, поэтому используются два комплекта шрифтов:
• пропорциональный шрифт (иначе «шрифт переменной ширины») для каждого символа выделяет разное количество места в зависимости от его начертания. Например, в пропорциональном шрифте заглавная «W»
занимает больше места в строке по горизонтали, чем прописная «I», Times,
Helvetica и Arial являются примерами пропорциональных шрифтов.
Большие отрывки текста удобнее читать, когда они напечатаны пропорциональными шрифтами. С большой вероятностью текст на странице будет отображен пропорциональным шрифтом Times.
• шрифт с фиксированной шириной (также известный, как шрифт
«постоянная ширина» или «равноширииный») предоставляет одинаковое место для всех символов шрифта. Заглавная «W» занимает столько же места, что и прописная «I», Примерами шрифтов фиксированной ширины являются Courier и Monaco.
Другим надёжным способом представления текстовой информации является его оформление в виде графического изображения. При этом страница состоит из множества графических элементов, содержащих заголовки,
подзаголовки и объявления. Многие Web-страницы представлены исключительно в графике, которая содержит внутри себя весь текст страницы.
При этом страница одинакова при выводе во всех графических браузерах.
Однако следует учитывать, что при этом изображения загружаеются дольше, чем текст, а в неграфических браузерах содержание утрачивается.
4 Концепция HTML
4.1 Структура HTML страницы
По современным представлениям электронный документ – это некоторая информационная сущность, у которой можно выделить четыре аспекта:

14
содержание, структуру, стиль, поведение. Содержание определяет информационное наполнение документа, его ценность как источника информации. Структура определяет элементы содержания (абзац, список,
таблица, раздел, картинка, объект) и связи между ними (предок - потомок,
целое - часть). Стиль задаёт внешнее оформление документа (цвет, гарнитуру и размер шрифта, графические эффекты, выравнивание абзацев). Поведение определяет реакцию документа на события, инициируемые пользователем
(нажатие клавиш клавиатуры и мыши, наведение мыши, перемещение фокуса ввода) и программой просмотра (начало или окончание загрузки документа,
переход к другому документу).
Так, структура и содержание документа описываются средствами HTML.
Стиль документа описывается средствами языка CSS, а поведение – средствами скриптов, фрагментов кода (например JavaScript). Использование CSS позволяет облегчить сопровождение документа, сделав его менее громоздким и более структурированным.
Структура HTML-документа описывается с помощью тегов, имеющих имя, которыми они идентифицируется. Тег (tag) – это элемент разметки, который представляет собой текст, заключенный в угловые скобки < >. Теги управляют отображением информации но при этом сами не выводятся на экран. Теги бывают одиночными, открывающими и закрывающими:
<имя_элемента> отображаемое содержимое имя_элемента>
Пара из открывающего и закрывающего тега называется контейнером.
Тег может описывать сложный фрагмент структуры, и для определения его параметров используются атрибуты, имеющие имя и значение, в виде строки в кавычках:
<имя_элемента имя_атрибута = "значение атрибута">
У некоторых атрибутов значение отсутствует.
Корневым элементом любого HTML-документа является контйнер HTML,
в котором размещается всё содержимое документа
Оно включает две обязательные частей:
Head
(заголовк) и
Body
(тело), следующих в указанном порядке.

17
фрагментов документа на экране. Таблица оформляется контейнером
Table и
содержит группы строк трёх видов: заголовка (
THead
), тела (
TBody
) и подвала
(
TFoot
). Первая и последняя – необязательны, тело – обязательно. Строки оформляются элементом
Tr и содержат ячейки двух видов: заголовка (
Th
), и ячейки данных (
Td
). Например, таблица с заголовком, подвалом и подписью имеет следующий вид:

Сведения о продажах на 08.11.2006

Наименование продукции	Количество	Стоимость
Процессор Intel Pentium IV 1500	1,000	80,000.00
Процессор AMD Athlon 1400	1,300	84,500.00
Итого		164,500.00

Для контейнера
Table определены следующие необязательные атрибуты: