Помощничек
Главная | Обратная связь


Археология
Архитектура
Астрономия
Аудит
Биология
Ботаника
Бухгалтерский учёт
Войное дело
Генетика
География
Геология
Дизайн
Искусство
История
Кино
Кулинария
Культура
Литература
Математика
Медицина
Металлургия
Мифология
Музыка
Психология
Религия
Спорт
Строительство
Техника
Транспорт
Туризм
Усадьба
Физика
Фотография
Химия
Экология
Электричество
Электроника
Энергетика

q Выбор шрифта (языка) для правильного отображения информации.



 

2 Элементы пользовательского интерфейса

Окно браузера содержит систему меню, панель кнопок, адресную строку, панель ссылок, область просмотра документа, строку состояния.

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

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

Кнопка "Остановить" вызывает приостановку текущей операции, например, загрузки документа из WWW (дублирует одноименную команду из меню "Вид").

Кнопка "Обновить" приводит к перезагрузке текущего документа в случае, например, если в него внесены изменения или загрузка застопорилась (дублирует одноименную команду из меню "Вид").

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

Кнопка "Поиск" вызывает обращение к документу, расположенному на сервере Microsoft, позволяющему обращаться к поисковым серверам Internet. Можно настроить на свой любимый поисковый сервер. Дублирует команду "Поиск в Web" из меню "Переход".

Кнопка "Избранное" позволяет включить выбранный элемент в список избранных (команда "Добавить в папку..."), реорганизовать порядок ссылок ярлыков в папках, осуществляя перемещение, переименование и удаление элементов (команда "Упорядочить избранное..."), подписаться на Web-узлы (команда "Управление подпиской...") с целью получения обновлений ваших любимых Web-узлов по заданному вами графику. Вы также можете выбрать уведомление об обновлениях или получение обновлений автоматически на ваш жесткий диск (например, ночью или когда компьютер не занят), и просматривать полученные страницы в ваше свободное время. Подписка не обязательно означает выплату денег поставщику услуг. Вы можете установить ежедневную, еженедельную или ежемесячную проверку обновлений на всех или на одном из узлов. Настроив систему подписки, вы сможете просматривать ваши любимые Web-узлы в режиме автономной работы. Каналы — это другая форма подписки. Каналы — это Web-узлы, которые автоматически обновляются на вашем компьютере согласно графику, определенному вашим поставщиком услуг. Каналы можно просматривать в обозревателе, как и любые другие Web-страницы, в окне на весь экран или на рабочем столе. Некоторые каналы разработаны для использования в качестве экранной заставки.

Кнопка "Журнал" предназначена для просмотра списка посещенных Internet-узлов.

Кнопка "Каналы" позволяет осуществлять просмотр и переключение каналов подписки.

Кнопка "Во весь экран" дает возможность полноэкранного режима работы. Для управления работой можно пользоваться стандартной панелью инструментов и полосами прокрутки.

Кнопка "Почта" позволяет осуществлять чтение почты и новостей, создавать сообщения, отправлять ссылку по электронной почте или по факсу.

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

Кнопка "Печать" осуществляет печать текущего документа или его фрагментов.

Кнопка "Изменить" дает возможность создавать и модифицировать документы без явного использования средств HTML. Редактирование HTML-страницы осуществляется с помощью специализированных программ: MS Word 97, MS FrontPage.

Имеется панель ссылок на различные документы, расположенные (по умолчанию) на сервере Microsoft: "Бесплатная почта HotMail", "Знакомство с Интернетом", "Лучшая страница", "Настройка ссылок", "Путеводитель по каналам", "Microsoft", "Windows Update". Имеется возможность настроить как адреса этих ссылок, так и их названия, щелкнув правой кнопкой мыши по ссылке и выбрав соответственно команду "Свойства" или "Переименовать".

Для загрузки Web-страницы в адресной строке наберите URL-адрес документа и нажмите клавишу <Enter> либо воспользуйтесь командой "Открыть из меню "Файл".

Чтобы организовать параллельную работу с несколькими документами следует вызвать команду "Создать окно" из меню "Файл". В каждом окне нужно открыть собственную Web-страницу. Для каждой страницы запускается отдельный сеанс работы браузера. Переключение между сеансами производится с помощью панели задач.

Найти требуемый фрагмент текста на текущей странице можно с помощью команды "Найти на этой странице..." из меню "Правка".

Сохранить загруженную Web-страницу на локальном диске позволяет команда "Сохранить как..." из меню "Файл". Поле со списком "Тип файла" дает возможность сохранить документ как текстовый файл или как гипертекстовую страницу.

Чтобы сохранить на диске отдельное графическое изображение необходимо щелкнуть по нему правой кнопкой мыши и выбрать из контекстного меню команду "Сохранить рисунок как...".

Команда "В виде HTML" из меню "Вид" позволяет просмотреть текущую страницу в виде тэгов языка HTML. Для просмотра автоматически запускается програма "Блокнот".

 

3 Настройка Internet Explorer

Осуществить настройку браузера можно с помощью команды "Свойства обозревателя..." из меню "Вид".

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

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

Вкладка "Соединение" осуществляет настройка подключения к Internet через модем или с использованием локальной сети.

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

Вкладка "Безопасность" позволяет настроить уровни защиты для различных зон безопасности. При этом пользователь управляет приходом уведомлений о потенциальной угрозе безопасности со стороны Web-узла. Можно определить, какому активному содержимому разрешено загружаться и выполняться на вашем ПК.

Вкладка "Содержание" позволяет ограничить доступ несовершеннолетних членов семьи к нежелательной информации (секс, насилие, ненормативная лексика). Технология оценок своего содержимого должна поддерживаться узлами Internet. Можно запретить доступ к серверам, не имеющим таких оценок.

Сертификация позволяет просмотреть документы, подтверждающие подлинность узлов Internet.

Личные сведения определяют персональные данные, предоставляемые Web-узлам при запросах.

Вкладка "Дополнительно" управляет рядом дополнительных настроек браузера.

Можно, например, включить выдачу предупреждений:

q При переходе от безопасного к обычным серверам. Безопасными называются узлы, имеющие специальные средства для предотвращения несанкционированного просмотра критических данных, отправляемых на эти узлы или с этих узлов.

q О недопустимых сертификациях узла.

q Перед приемом файлов "cookies". Файлы "cookies" предназначены для несанкционированного сбора информации с вашего компьютера. Содержат информацию об индивидуальных предпочтениях клиентов. Позволяют аутентифицировать Вас при повторном подключении к какому либо узлу.

 

Группа переключателей выполняет следующие функции:

q Показывать краткие ссылки. Сброшенный флажок дает возможность отображать полный URL-адрес документа Internet.

q Использовать плавную прокрутку. Позволяет выполнять плавную прокрутку с заданной скоростью.

q Включить компилятор Java JIT. Программа на языке Java выполняется, как правило, построчно: строка текста программы транслируется в язык машинных кодов, а затем выполняется. Компилятор Java предполагает дополнительную трансляцию и оптимизация Java-апплетов перед выполнением. Это позволяет сократить время выполнения программных модулей.

q Включить журнал Java — создание и ведение журнала активности всех Java-программ.

q Для ускорения загрузки документа можно отключить загрузку графики, звукозаписи и видеозаписи, сбросив соответствующие флажки в группе "Мультимедиа". Картинки при этом отображаются в виде стандартных значков. Щелкнув по любому правой кнопкой мыши и выбрав "Показать рисунок", можно просмотреть изображение.

 

4 Элементы Web-документа

q Фон. Может быть задан цветом или произвольным графическим изображением. По умолчанию серый. Он может быть изменен автором документа или при настройке браузера.

q Текст. Практически любой документ Всемирной паутины содержит текст. Цвет текста может быть изменен автором документа или при настройке браузера. Графические образы могут часто включать текст.

q Ссылки. Это указатели на другой документ. Могут быть представлены в виде текста или графики. При проходе над ссылкой курсор меняет свою форму на ладонь с указательным пальцем, а адрес документа, на который указывает ссылка, отображается в строке статуса. Щелчок мыши по ссылке приводит к переходу по ссылке.

q Изображения. Перегрузка документа графикой может привести к тому, что загрузка его на ПК может потребовать несколько минут даже при постоянном подключении к Internet.

 

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

q ссылка на документ некорректна. В Internet все быстро меняется, и автор документа мог не отследить изменение адреса документа, который мог быть удален, переименован или перемещен в другое место.

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

 

5 Порядок выполнения работы

1. Загрузить указанный файл в MS Internet Explorer.

2. Произвести поиск заданного фрагмента текста.

3. Изменить цвет фона, цвет текста. Восстановить прежние цвета.

4. Продемонстрировать изменение размера шрифта.

5. Изменить кодовую страницу на "Греческую (Зап. Европу)". Восстановить кодировку кириллицы.

6. Определить загруженный файл как основную страницу. Восстановить прежний URL-адрес.

7. Загрузить другой HTML-файл. Продемонстрировать переключение между задачами.

8. Добавить один из файлов в список избранных. Завершить сеанс работы с браузером. Загрузить MS Internet Explorer заново. Открыть Web-страницу с помощью созданной закладки. Удалить созданную закладку.

9. Сохранить один из файлов в виде текста на диске.

10. Сохранить рисунок в виде отдельного файла.

11. Переименовать ссылку "Лучшая страница" на "Любимая". Настроить эту ссылку на URL-адрес любого документа.

12. Восстановить прежние имя и URL-адрес.

13. Открыть страницу указанного Web-каталога. Перемещаясь по ссылкам, найти заданную информацию.

14. Вернуться на начальную страницу каталога. Найти некоторую информацию по ключевым словам.

15. Провести аналогичный поиск с помощью других поисковых систем.

16. Осуществить поиск указанных групп новостей, файлов, адресов электронной почты.

 

 

6 Контрольные вопросы

1. Понятие об URL.

2. Понятие браузера. Виды браузеров.

3. Основные возможности браузера MS Internet Explorer.

4. Элементы пользовательского интерфейса MS Internet Explorer.

5. Настройка MS Internet Explorer.

Лабораторная работа №27 Создание простейших Web-страниц. Форматирование текста средствами языка HTML

 

Цель работы: 1 приобрести начальные навыки создания простейших Web-документов;

2 научиться выполнять форматирование созданных Web-страниц.

 

Объем работы 2 часа

 

Методические указания

1 Общие положения языка HTML

 

Язык HTML (HyperText Markup Language, язык разметки гипертекста) — это язык, на котором создаются Web-страницы. HTML-документы могут просматриваться различными типами Web-браузеров. Когда документ создан с использованием HTML, Web-браузер может интерпретировать HTML для выделения различных элементов документа и первичной их обработки. Использование HTML позволяет форматировать документы для их представления с использованием шрифтов, линий и других графических элементов на любой системе, их просматривающей.

Web-страницы могут быть созданы с помощью

1) обычного текстового редактора;

2) редактора, способного сохранять в формате HTML;

3) специализированного редактора;

4) специализированной системы.

 

HTML-документы сохраняются на диске как обычные текстовые документы в формате ASCII. Для распознавания Web-страниц по их именам общепринято обозначать такие файлы использованием расширений .HTM (для Windows 3.1) или .HTML (для Windows 95/98/NT, Macintosh и Unix).

Кроме полезного текста в HTML-документах используются специальные управляющие последовательности символов — тэги.

Структура тэга имеет следующий вид:

<ТЭГ параметр1=значение1...>

текст

другие конструкции

</ТЭГ>

или

<ТЭГ параметр1=значение1...>

текст

другие конструкции

 

Чаще всего тэги используются попарно, окружая размеченные фрагменты текста. Такие тэги называются контейнерами. Закрывающийся тэг отличается на начального только присутствием символа "/" добавляемого перед именем тэга. При интерпретации тэгов браузер не делает различия между строчными и прописными буквами. Поэтому сами тэги можно набирать на любом регистре. Зачастую параметр (атрибут) является необязательной величиной и его можно пропускать.

 

1. Структура HTML-документа

 

Когда Web-браузер получает документ, он определяет, как документ должен быть интерпретирован. Самый первый тэг, который встречается в документе, должен быть тэгом <HTML>. Данный тэг сообщает Web-браузеру, что ваш документ написан с использованием HTML. Минимальный HTML-документ будет выглядеть так:

<HTML> ...тело документа... </HTML>

 

В общем виде Web-документ имеет следующую структуру:

<HTML>

<HEAD>

<TITLE>

… заголовок

</TITLE>

</HEAD>

<BODY>

… тело документа

</BODY>

</HTML>

 

Тэги <HTML> и </HTML> заключают внутри себя все элементы HTML-кода, указывая, что используется язык HTML.

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

Тэги <BODY> и </BODY> обрамляют оставшуюся часть документа (тело). Здесь размещается основная смысловая текстовая и графическая информация.

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

Внутри контейнера <HEAD> может использоваться тэг <TITLE>, как показано выше. Большинство Web-браузеров отображают содержимое этого тэга в заголовке окна, содержащего документ и в файле закладок, если он поддерживается WEB-браузером. Заголовок документа не появляется при отображении самого документа в окне.

Как любой язык, HTML позволяет вставлять в тело документа пояснительный текст (комментарии), который сохраняется при передаче документа по сети, но не отображается браузером. Синтаксис комментария следующий:

<!-- Это комментарий -->

 

Комментарии могут встречаться в документе где угодно и в любом количестве.

 

2. Форматирование текста

 

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

 

3.1. Цвета в HTML-документе

 

Язык HTML определяет следующие типы цветов: BGCOLOR (цвет фона для тела документа), TEXT (цвет, используемый при выводе на экран текста из данного документа), LINK (цвет, который будет использоваться при выводе на экран текста из еще не выбранных вами гипертекстовых связей), VLINK (цвет, который будет использоваться при выводе на экран текста из уже проверенных вами гипертекстовых связей), ALINK (цвет, которым будут выделяться в тексте гипертекстовые связки в тот момент, когда пользователь щелкает по ним клавишей мыши).

Существует две формы задания цвета: символьная (указывается название одного из предопределенных цветов) и цифровая (комбинация RGB: #RRGGBB).

Символьные идентификаторы основных цветов и их RGB-комбинации приведены ниже: BLACK (#000000) — черный, SILVER (#C0C0C0) — серебряный, GRAY (#808080) — серый, WHITE (#FFFFFF) — белый, MAROON (#800000) — темно-красный, RED (#FF0000) — красный, PURPLE (#800080) — томно-сиреневый, FUCHSIA (#FF00FF) — сиреневый, GREEN (#008000) — зеленый, LIME (00FF00) — ярко-зеленый, OLIVE (#808000) — оливковый, YELLOW (#FFFF00) — желтый, NAVY (#000080) — темно-синий, BLUE (#0000FF) — голубой, TEAL (#008080) — сине-зеленый, AQUA (#00FFFF) — ярко-голубой.

Атрибут, указывающий на цвет, может использоваться в тэгах <BODY>, <FONT>, <HR>, <MARQUEE>, <TABLE>.

 

3.2. Элементы форматирования на уровне блоков

 

Тэг абзаца (параграфа)

<P ALIGN=LEFT|CENTER|RIGHT|JUSTIFY NOWRAP> текст </P>

разделяет два абзаца пустой строкой. Может не иметь пары </P>. Параметр ALIGN задает выравнивание информации. Применение параметра NOWRAP дает возможность писать текст без переноса слов. Для центрирования текста или графики можно использовать также контейнер <CENTER>.

Тэги заголовков

<H1|H2|H3|H4|H5|H6 align=...> текст </H1|H2|H3|H4|H5|H6>

используются для выделения структурных частей текста. Каждый стиль заголовка имеет свой размер. Тэг <H1> имеет наибольший размер.

Тэг горизонтальной линейки

<hr align=... size=... width=... noshade>

предназначен для вычерчивания горизонтальной линии. Атрибут SIZE задает толщину линии в пикселах, WIDTH — ее ширину в пикселах или процентах от ширины окна браузера. Атрибут NOSHADE позволяет представить линию без тени в виде простой темной полоски.

Тэг конца строки

<br>

вызывает переход не новую строчку без разрыва абзаца.

Тэг <WBR> — определяет место возможного (рекомендуемого) переноса (разрыва) строки.

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

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

Контейнер <BLOCKQUOTE> предназначен для обозначения в документе цитаты из другого источника. Текст, обозначенный этим тэгом , отступает от левого края документа на 8 пробелов.

 

3.3. Элементы, задающие шрифт

 

<TT> — телетайпный текст (моноширинный).

<I> — стиль с наклонным шрифтом (курсив).

<B> — стиль с жирным шрифтом.

<U> — стиль с подчеркиванием текста.

<BIG> — печать текста шрифтом увеличенного размера (большего, чем окружающий текст).

<SMALL> — печать текста шрифтом уменьшенного размера (меньшего, чем окружающий текст).

<SUB> — печать текста со сдвигом вниз (нижний индекс или подстрочный).

<SUP> — печать текста со сдвигом вверх (верхний индекс или надстрочный).

<STRIKE> или <S> — стиль с перечеркиванием текста.

<FONT size=… color=... face=...> текст </FONT>

size — устанавливает размер шрифта, который будет использоваться текстом, содержащимся в пределах элемента font. Вы можете задать абсолютный размер шрифта, указав какое-либо целое число от 1 до 7. Для шрифта можно также указывать относительный размер, сообщая атрибуту целое число со знаком (например, это может быть size="+1" или size="-2").

color — указывает цвет, которым будет выделен данный кусок текста. Цвета задаются в виде RGB-значения с шестнадцатеричной нотацией, либо выбирается один из стандартных цветов.

face — задает гарнитуру шрифта.

 

3. Специальные тэги HTML

 

Тэг <ADDRESS> используется для выделения автора документа и его адреса (например, e-mail). Синтаксис:

<ADDRESS> Адрес-автора </ADDRESS>

 

Некоторые символы являются управляющими символами в HTML и не могут напрямую использоваться в документе:

· левая угловая скобка "<"

· правая угловая скобка ">"

· амперсанд "&"

· двойные кавычки """

 

Чтобы использовать данные символы в документе, необходимо заменить их escape-последовательностями: < — &lt; > — &gt; & — &amp; " — &quot;.

Существует большое количество escape-последовательностей для обозначения специальных символов, например "&copy;" для обозначения знака Ó и "&reg;" для значка Ò. Одной из особенностей является замена символов во 2-ой части символьной таблицы (после 127-ого символа) на escape-последовательности для передачи текстовых файлов с национальными языками по 7-битным каналам.

Escape-последовательности чувствительны к регистру: НЕЛЬЗЯ использовать &LT; вместо &lt;.

 

Порядок выполнения работы

1. Создать с помощью программы "Блокнот" гипертекстовый файл. Имя файла — ваша фамилия на английском языке. Файл разместить на указанном диске в папке с номером вашей группы.

2. Задать заголовок, отображаемый в строке заголовка окна браузера. Текст заголовка — ваша фамилия на русском языке.

3. Установить заданные цвета для фона и текста документа. Написать произвольный абзац текста самым крупным шрифтом.

4. Осуществить выравнивание абзаца (отцентрировать, прижать вправо, влево, выровнять по ширине).

5. Написать определение трех любых понятий курса различными цветами и гарнитурами (Arial, Times, моноширинный шрифт). Сам термин должен быть выведен полужирным курсивом с подчеркиванием.

6. Написать формулу

(a+b)2=a2+2ab+b2;

cij=aij+bij

7. Отделить формулу от основного текста горизонтальной линией заданной ширины, толщины и цвета.

 

Контрольные вопросы

1. Общие положения языка HTML.

2. Структура HTML-документа.

3. Использование цвета в HTML-документах.

4. Элементы форматирования текста средствами языка HTML на уровне блоков.

5. Элементы языка HTML, задающие шрифт.

6. Специальные тэги языка HTML.


Лабораторная работа №28 Вставка графики и анимации в internet-документы

Цель работы: научиться использовать статические и динамические графические изображения в WWW-документах.

 

Объем работы 2 часа

 

Методические указания

1 Графика в HTML

Одним из способов использования графики в HTML является внедрение графических образов в документ, что позволяет пользователю непосредственно увидеть изображения. Такая техника проектирования документов называется "inline image".

Синтаксис тэга:

<IMG SRC="URL" ALT="text" HEIGHT=n1 WIDTH=n2 ALIGN=top|middle|bottom| texttop|absmiddle|baseline|absbottom|left|right BORDER=n VSPACE=m1 HSPACE=m2 ISMAP>

 

где URL — адрес, указывающий браузеру, где находится рисунок. Рисунок должен храниться в графическом формате, поддерживаемом браузером. На сегодняшний день большинством браузеров поддерживаются форматы GIF и JPG (JPEG). GIF лучше воспроизводит детали изображения. Используется для хранения черно-белых рисунков, рисунков с ограниченным количеством цветов, графики с текстом. JPG занимает меньше места. Используется для хранения отсканированных фотографий, изображений со сложной цветовой палитрой и числом цветов, большим 256.

ALT="text" задает текст, который будет отображен браузером, не поддерживающим отображение графики или с отключенной подкачкой изображений. Обычно, это короткое описание изображения, которое пользователь мог бы увидеть на экране. Если данный параметр отсутствует, то на месте рисунка большинство браузеров выводит пиктограмму (иконку), активизировав которую, пользователь может увидеть изображение. Тэг ALT рекомендуется, если ваши пользователи используют браузер, не поддерживающий графический режим, например Lynx.

HEIGTH=n1 используется для указания высоты рисунка в пикселах. Если данный параметр не указан, то используется оригинальная высота рисунка. Это параметр позволяет сжимать или растягивать изображения по вертикали, что позволяет более четко определять внешний вид документа. Однако, некоторые браузеры не поддерживают данный параметр. С другой стороны, экранное разрешение у вашего клиента может отличаться от вашего, поэтому будьте внимательны при задании абсолютной величины графического объекта.

WIDTH=n2 позволяет задать абсолютную ширину рисунка в пикселах.

ALIGN используется, чтобы сообщить браузеру, куда поместить следующий блок текста. Это позволяет более строго задать расположение элементов на экране. Если данный параметр не используется, то большинство браузеров располагает изображение в левой части экрана, а текст справа от него.

BORDER=n позволяет автору определить ширину рамки вокруг рисунка (n=0..9).

VSPACE=m1 позволяет установить размер в пикселах пустого пространства над и под рисунком, чтобы текст не наезжал на рисунок. Особенно это важно для динамически формируемых изображений, когда нельзя заранее увидеть документ.

HSPACE=m2 выполняет то же самое, что и VSPACE, но только по горизантали.

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

 

Большинство браузеров позволяет включать в документ фоновый рисунок. Некоторые пользователи любят фоновую графику, некоторые нет. Ненавязчивый полупрозрачный рисунок (обои) обычно хорошо выглядит в качестве фона для большинства документов.

Описание фонового рисунка включается в тэг BODY и выглядит следующим образом:

<BODY BACKGROUND="picture.gif">

 

Тэг <EMBED> аналогичен <IMG>, но позволяет включать в Web-страницу файлы произвольного типа. Для них требуется подключение дополнительных модулей (plug-in). Примеры файлов: Live 3D, AVI-файлы и др.

 

2 Динамические изображения и анимация

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

Бегущая строка. Синтаксис тэга

<MARQUEE BEHAVIOR=alternate|slide GCOLOR=...

WIDTH=... HEIGHT=...> текст </MARQUEE>

 

Подключение видеоизображений (AVI- и MPG-файлы).

<IMG DYNSRC="URL" START=MOUSEOVER WIDTH=... HEIGHT=...>

 

3 Порядок выполнения работы

1. Создать с помощью программы "Блокнот" гипертекстовый файл. Имя файла — ваша фамилия. Файл разместить на указанном диске в папке с номером вашей группы.

2. Вставить в документ произвольное графическое изображение.

3. Вставить с новой строки тот же графический файл, но вдвое меньшего размера.

4. Вставить с новой строки анимационный GIF-файл.

5. Включить в документ файл видеозаписи.

6. Задать указанный рисунок в виде фонового.

7. Вставить в документ бегущую строку шириной в пол-экрана. На синем фоне белыми буквами перемещается название факультета.

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

 

3 Контрольные вопросы

1. Форматы графических файлов, используемых в Internet-документах.

2. Вставка графических объектов в HTML-файлы.

3. Использование динамических изображений и видеозаписей.

4. Вставка бегущей строки.


Лабораторная работа №29 Практическое использование ссылок и пользовательских списков на Web-страницах

 

Цель работы: 1 приобрести опыт создания списочных структур различных типов;

2 научиться реализовывать связи между гипертекстовыми файлами и ссылки на точки внутри HTML-документа.

 

Объем работы 2 часа

 

Методические указания

1 Списки

Существует три основных вида списков в HTML-документе: нуменрованный, ненуменрованный, список определений.

Вы можете создавать вложенные списки, используя различные тэги списков или повторяя одни внутри других. Для этого просто необходимо разместить одну пару тэгов (стартовый и завершающий) внутри другой. Будут ли элементы вложенного списка иметь те же маркеры, обозначающие элемент списка — зависит от браузера.

Для создания заголовка списка используется контейнер <LH>.

В нумерованном списке браузер автоматически вставляет номера элементов по порядку. Если вы удалите произвольное количество элементов нумерованного списка, то остальные номера автоматически будут пересчитаны.

Нумерованный список заключается в контейнер <OL>. Каждый элемент списка начинается с тэга <LI>. Например:

<OL>

<LI> Первый пункт списка

<LI> Второй пункт списка

<LI> ...

</OL>

 

Тэг <OL> может иметь параметры:

<OL TYPE=A|a|I|i|1 START=n>

 

где TYPE — вид счетчика: A — большие латинские буквы (A,B,C...); a — маленькие латинские буквы (a,b,c...); I — большие римские цифры (I,II,III...); i — маленькие римские цифры (i,ii,iii...); 1 — обычные цифры (1,2,3...). Используется по умолчанию.

START=n — число, с которого начинается отсчет.

 

Для ненумерованных списков браузер обычно использует маркеры для пометки элемента списка. Вид маркера, как правило, настраивает пользователь браузера.

Ненумерованный список заключается в контейнер <UL>. Как и в случае нумерованного списка каждый элемент начинается с тэга <LI>. Например:

<UL>

<LI> Первый пункт списка

<LI> Второй пункт списка

<LI> ...

</UL>

 

Тэг <UL> может иметь параметр:

<UL TYPE=disc|circle|square>

 

Тип тэга <UL> определяет внешний вид маркера как вид по умолчанию (disc), круглый (circle) или квадратный (square).

Список определений заключается в контейнер <DL>. Список состоит из двух частей: термина и его описания. Каждый термин начинается тэгом <DT> , а описание — тэгом <DD>. Например:

<DL>

<DT> Отдел маркетинга

<DD> Данный отдел занимается продвижением продуктов и услуг

<DT> Финансовый отдел

<DD> Данный отдел занимается всеми финансовыми операциями

<DT> Отдел кадров

<DD> Данный отдел занимается учетом и набором новых сотрудников фирмы, распределением отпусков, отслеживанием больничных листов и т.д.

</DL>

 

2 Гипертекстовые ссылки

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

Ссылки могут указывать на другой документ, специальное место данного документа или выполнять другие функции, например запрашивать файл по FTP-протоколу для отображения его браузером. URL может указывать на специальное место по абсолютному пути доступа, или указывать на документ в текущем пути доступа, что часто используется при организации больших структурированных WEB-сайтов. В URL после имени файла через диез может указываться специальный маркер. Данный элемент является ссылкой на строку (точку) внутри HTML-документа.

Синтаксис тэга, позволяющий задать ссылку в HTML-документе, следующий:

<A HREF="URL"> текст-ссылка </A>

 

Тэг <A HREF="URL">открывает описание ссылки, а тэг </A> — закрывает его. Любой текст, находящийся между данными двумя тэгами подсвечивается специальным образом Web-браузером. Обычно этот текст отображается подчеркнутым и выделенным синим (или другим заданным пользователем) цветом. Текст, обозначающий URL, не отображается браузером, а используется только для выполнения предписанных им действий при активизации ссылки (обычно при щелчке мыши на подсвеченном или подчеркнутом тексте).

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

Для создания такой ссылки необходимо выполнить следующие шаги:

1. Создайте маркер раздела:

<A NAME="named_anchor"> Текст, к которому идет переход </A>

2. Создайте ссылку на данный маркер:

<A HREF="#named_anchor"> текст-ссылка </A>

 

3 Порядок выполнения работы

1. Создать с помощью программы "Блокнот" гипертекстовый файл. Имя файла — ваша фамилия. Файл разместить на указанном диске в папке с номером вашей группы.

2. Вставить в документ текстовую ссылку на произвольный графический файл.

3. Вставить с новой строки графическую ссылку на произвольный гипертекстовый файл.

4. Создать список (нумерованный, ненумерованный) студентов вашей группы (3 человека). Заголовок списка — "Группа 105ххх". Цвета заголовка и элементов списка должны отличаться друг от друга.

5. Определить новые цвета для выделения использованных и неиспользованных ссылок.

6. Изменить нумерацию элементов списка.

7. Создать список определений для двух понятий курса.

8. Произвольный элемент списка оформить как ссылку на гипертекстовый файл.

9. В конце документа разместить ссылку на начало (первую строку) гипертекстового файла.

 

4 Контрольные вопросы

1. Создание списков различных видов средствами языка HTML.

2. Гипертекстовые связи между HTML-документами.

3. Ссылки на точки внутри документа.


Лабораторная работа №30. Таблицы в Web-документах

 

Цель работы: 1 изучить возможности использования таблиц в языке HTML

2 научиться создавать многоколоночные документы.

 

Объем работы 2 часа

 

 

1 Методическиеуказания

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

Синтаксис определения таблицы в общем виде:

<TABLE BORDER=... WIDTH=... >

<TR>

<TD параметры=… > 1-я ячейка (клетка) 1-ой строки </TD>

<TD параметры=... > 2-я ячейка (клетка) 1-ой строки </TD>

</TR>

<TR>

<TD> 1-я клетка 2-ой строки </TD>

...

</TR>

...

</TABLE>

 

Основные тэги таблицы представлены ниже.

Таблица <TABLE>...</TABLE>. Это основные тэги, описыва­ющие таблицу. Все элементы таблицы должны находиться внутри этих двух тэгов. По умолчанию таблица не имеет обрамления и разделителей. Обрамление добавляется атрибутом BORDER.

Строка таблицы: <TR>...</TR>. Количество строк таблицы определяется количеством встречающихся пар тэгов <TR>..</TR>. Строки могут иметь атрибуты ALIGN и VALIGN, которые описывают визуальное положение содержимого строк в таблице.

Ячейка таблицы: <TD>...</TD>. Описывает стандартную ячейку таблицы. Ячейка таблицы может быть описана только внутри строки таблицы. Каждая ячейка должна быть пронумерована номером колонки, для которой она описывается. Если в строке отсутствует одна или несколько ячеек для некоторых колонок, то браузер отображает пустую ячейку. Расположение данных в ячейке по умолчанию определяется атрибутами ALIGN=left и VALIGN=middle. Данное расположение может быть исправлено как на уровне описания строки, так и на уровне описания ячейки.

Заголовок таблицы: <TH>...</TH>. Ячейка заголовка таблицы имеет ширину всей таблицы; текст в данной ячейке имеет атрибут BOLD и ALIGN=center.

Подпись: <CAPTION>...</CAPTION>. Данный тэг описывает название таблицы (подпись). Тэг <CAPTION> должен присутствовать внутри <TABLE>...</TABLE>, но снаружи описания какой-либо строки или ячейки. По умолчанию <CAPTION> имеет атрибут ALIGN=top, но может быть явно установлен в ALIGN=bottom. ALIGN определяет, где будет поставлена подпись (сверху или снизу таблицы). Подпись всегда центрирована в рамках ширины таблицы.

 

Основные атрибуты таблицы приведены ниже.

BORDER — используется в тэге TABLE. Если данный атрибут присутствует, граница таблицы прорисовывается для всех ячеек и для таблицы в целом. BORDER может принимать числовое значение, определяющее ширину границы, например BORDER=3.

ALIGN. Если атрибут ALIGN присутствует внутри тэгов <CAPTION> и </CAPTION>, то он определяет положение подписи для таблицы (сверху или снизу). По умолчанию ALIGN=top. Если атрибут ALIGN встречается внутри <TR>, <TH> или <TD>, он управляет положением данных в ячейках по горизонтали. Может принимать значения left (слева), right (справа) или center (по центру).

VALIGN — встречается внутри тэгов <TR>, <TH> и <TD>. Он определяет вертикальное размещение данных в ячейках. Может принимать значения top (вверху), bottom (внизу), middle (по середине) и baseline (все ячейки строки прижаты кверху).

NOWRAP — говорит о том, что данные в ячейке не могут логически разбиваться на несколько строк и должны быть представлены одной строкой.

COLSPAN — указывает, какое количество ячеек будет объединено по горизонтали для указанной ячейки. По умолчанию — 1.

ROWSPAN — указывает, какое количество ячеек будет объединено по вертикали для указанной ячейки. По умолчанию — 1.

COLSPEC — позволяет задавать фиксированную ширину колонок либо в символах, либо в процентах, например COLSPEC="20%".

CELLSPACING — задает расстояние между ячейками таблицы (по умолчанию 2 пикс.).

CELLPADDING — определяет растояние между рамкой ячейки и ее содержимым (по умолчанию 1 пикс.).

WIDTH — задает ширину таблицы либо в абсолютных единицах, либо в процентах относительно размера экрана. Используя внутри тэга <TD>, можно указывать ширину ячейки.

HEIGHT — то же, что и WIDTH, но определяет высоту таблицы.

FRAME — позволяет описывать внешние рамки таблицы. Может принимать следующие значения:

· VOID — нет рамки;

· ABOVE — отображает внешнюю часть рамки;

· BELOW — отображает нижнюю часть рамки;

· HSIDES — отображает верхнюю и нижнюю части рамки;

· LHS — отображает левую часть рамки;

· RHS — отображает правую часть рамки;

· VSIDES — отображает левую и правую части рамки;

· BOX или BORDER — отображает все части рамки.

 

RULES — описывает рамки внутри таблицы. Может принимать следующие значения:

· NONE — нет рамок;

· GROUPS — отображает горизонтальные части рамки между группами таблицы;

· ROWS — отображает горизонтальные части рамки внутри таблицы;

· COLS — отображает вертикальные части рамки внутри таблицы;

· ALL — отображает все части рамки внутри таблицы.

 

BGCOLOR — задает цвет фона таблицы.

BORDERCOLOR — задает цвет рамки.

BORDERCOLORLIGHT — задает цвет светлой части трехмерной рамки.

BORDERCOLORDARK — задает цвет темной части трехмерной рамки.

 

Верхние и нижние колонтитулы таблицы задаются контейнерами <THEAD>, <TFOOT>.

Иногда требуется поместить в таблицу пустые ячейки. Это можно сделать, поместив в ячейку пробел (&#32), неразрывный пробел (&nbsp) или тэг <br>.

 

 

Пример таблицы

<TABLE BORDER=5>

<CAPTION ALIGN=bottom> Таблица №1 /CAPTION>

<TR>

<TD ROWSPAN=2></TD>

<TH COLSPAN=2>Среднее значение</TH>

</TR>

<TR>

<TH>Рост</TH>

<TH>Вес</TH>

</TR>

<TR>

<TD>Мужчины</TD>

<TD ALIGN=center>174</TD>

<TD ALIGN=center>78</TD>

</TR>

<TR>

<TD>Женщины</TD>

<TD ALIGN=center>165</TD>

<TD ALIGN=center>56</TD>

</TR>

</TABLE>

 

  Среднее значение
Рост Вес
Мужчины
Женщины

 

Таблица №1

 

2 Порядок выполнения работы

2.1 Создать с помощью программы "Блокнот" гипертекстовый файл. Имя файла — ваша фамилия. Файл разместить на указанном диске в папке с номером вашей группы.

2.2 Создать таблицу вида

 

Параметр Температура, °С
А1
А2

 

2.3 Создать таблицу вида

 
 


Текст, написанный гарнитурой Arial синим цветом   Текст, написанный гарнитурой Times красным цветом

 

Изображение импортировать из библиотеки рисунков MS WORD.

 

2.4 Создать таблицу вида

 

Файл 1 Файл 3
Файл 2 Файл 4
Изображение

 

Надписи в таблице являются ссылками на файлы 1-4 соответственно, изображение — ссылкой на графический файл.

 

2.5 Написать три произвольных абзаца текста, размещенного в трех колонках.

 

3 Контрольные вопросы

1. Структура таблицы в HTML-документе.

2. Основные атрибуты таблицы.

3. Вычнрчивание рамок и управление размером и цветом ячеек таблицы.


Лабораторная работа №31. Фреймы и скриптовые процедуры

 

Цель работы: 1 приобрести опыт создания фреймовой структуры документа;

2 изучить возможности использования процедур на языках JavaScript и VBScript в HTML-документах.

 

Объем работы 2 часа

 

Методические указания

1 Фреймы

Фреймы — достаточно мощный механизм представления информации на Web-страницах. С помощью фреймов экран разделяется на несколько прокручиваемых областей, в каждой из которых отображается содержимое отдельной страницы и даже отдельного Web-узла. Каждый фрейм, может иметь следующие свойства:

· Каждый фрейм имеет свой URL, что позволяет загружать его независимо от других фреймов.

· Каждый фрейм имеет собственное имя (параметр NAME), позволяющее переходить к нему из другого фрейма.

· Размер фрейма может быть изменен пользователем прямо на экране при помощи мыши (если это не запрещено указанием специального параметра).

 

Данные свойства фреймов позволяют создавать продвинутые интерфейсные решения, такие как:

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

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

· Создавать окна результатов запросов, когда в одном фрейме находится собственно запрос, а в другом результаты запроса.

· Создавать формы типа "мастер-деталь" для Web-приложений, обслуживающих базы данных.

 

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

<HTML>

<HEAD>...</HEAD>

<FRAMESET>...</FRAMESET>

</HTML>

 

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

Общий синтаксис фрэймов:

<FRAMESET COLS="value" | ROWS="value">

<FRAME SRC="URL1">

<FRAME SRC="URL2">

...

</FRAMESET>

 

Общий контейнер FRAMESET описывает все фреймы, на которые делится экран. Вы можете разделить экран на несколько вертикальных или горизонтальных фреймов. Внутри контейнера могут находиться только тэг <FRAME>, вложенные контейнеры <FRAMESET> и <NOFRAME>, который позволяет строить двойные документы для браузеров, поддерживающих и не поддерживающих фреймы.

Данный тэг имеет два взаимоисключающих параметра: ROWS и COLS.

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

COLS="список-определений-вертикальных-подокон". То же самое, что и ROWS, но делит окно по вертикали, а не по горизонтали.

В качестве списка определений могут выступать:

1. Простое числовое значение определяет фиксированный размер подокна в пикселах. Это не самый лучший способ определения размера подокна, т.к. различные браузеры имеют различный размер рабочего поля, не говоря уже о различных экранных разрешениях у пользователя. Если вы, все же, используете данный способ описания размера, то настоятельно рекомендуется сочетать его с каким-либо другим, чтобы в результате вы точно получили 100%-ное заполнение окна браузера.

2. Значение величины подокна в процентах от 1 до 100. Если общая сумма процентов описываемых подокон меньше или превышает 100, то размеры всех фреймов пропорционально увеличиваются или уменьшаются до суммы 100%.

3. Число со звездочкой. Вообще говоря, числовое значение в данном описании является необязательным. Символ "*" указывает на то, что все оставшееся место будет принадлежать данному фрейму. Если указывается два или более фрейма с описанием "*" (например "*,*"), то оставшееся пространство делится поровну между этими фреймами. Если перед звездочкой стоит цифра, то она указывает пропорцию для данного фрейма (во сколько раз он будет больше аналогично описанного чистой звездочкой). Например, описание "3*,*,*", говорит, что будет создано три фрейма с размерами 3/5 свободного пространства для первого фрейма и по 1/5 для двух других.

Примеры:

<FRAMESET COLS="50,*,50"> — описывает три фрейма, два по 50 точек справа и слева, и один внутри этих полосок.

<FRAMESET ROWS="20%,3*,*"> — описывает три фрейма, первый из которых занимает 20% площади сверху экрана, второй 3/4 оставшегося от первого фрейма места (60% всей площади окна), а последний 1/4 (20% всей площади окна).

<FRAMESET ROWS="*,60%,*"> — аналогично предыдущему примеру.

 

Тэги <FRAMESET> могут быть вложенными, т.е. например:

<FRAMESET ROWS="50%,50%">

<FRAMESET COLS="*,*"

</FRAMESET>

</FRAMESET>

 

Тэг FRAME описывает каждый фрейм в отдельности. Рассмотрим более детально каждый компонент.

<FRAME SRC="URL" NAME="frame_name" MARGINWIDTH="n1" MARGINHEIGHT="n2" SCROLLING=yes|no|auto NORESIZE>

 

SRC="URL" — описывает URL документа, который будет отображен внутри данного фрейма. Если он отсутствует, то будет отображен пустой фрейм. В качестве URL допустимо использование не только HTML-, но и GIF- или JPEG-файла.

NAME="frame_name" — описывает имя фрейма. Имя фрейма может быть использовано для определения действия с данным фреймом из другого HTML-документа или фрейма (как правило, из соседнего фрейма этого же документа). Имя обязательно должно начинаться с символа. Содержимое поименованных фреймов может быть задействовано из других документов при помощи специального атрибута TARGET, описываемого ниже.

MARGINWIDTH="n1" или MARGINHEIGHT="n2" — используются, если автор документа хочет указать величину вертикальных или горизонтальных разделительных полос между фреймами сбоку. Значения n1 и n2 указываются в пикселах и не могут быть меньше единицы.

SCROLLING="yes | no | auto" — позволяет задавать наличие полос прокрутки у фрейма. Параметр yes указывает на обязательное присутствие у фрейма полос прокрутки, параметр no — на отсутствие, auto — определяет наличие полос прокрутки только при их необходимости (значение по умолчанию).

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

BORDER — управляет толщиной рамки.

BORDERCOLOR — задает цвет рамки.

FRAMEBORDER=no — отключает отображение рамки.

 

Контейнер NOFRAMES используется в случае, если вы создаете документ, который может просматриваться браузерами, как поддерживающими, так и не поддерживающими фреймы. Данный тэг помещается внутри контейнера FRAMESET, а все, что находится внутри тэгов <NOFRAMES> и </NOFRAMES> игнорируется браузерами, поддерживающими фреймы.

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

 

Link1 Link2
Link3 Link4 Link5
       

 

<FRAMESET ROWS="*,*">

<NOFRAMES>

<H1>Ваша версия WEB-браузера не поддерживает фреймы!</H1>

</NOFRAMES>

<FRAMESET COLS="65%,35%">

<FRAME SRC="link1.html">

<FRAME SRC="link2.html">

</FRAMESET>

<FRAMESET COLS="*,40%,*">

<FRAME SRC="link3.html">

<FRAME SRC="link4.html">

<FRAME SRC="link5.html">

</FRAMESET>

</FRAMESET>

 

С появлением фреймов сразу возникает вопрос: "А как сделать так, чтобы нажимая на ссылку в одном фрейме инициировать появление информации в другом?"

Ответом на данный вопрос является планирование взаимодействия фреймов. Каждый фрейм может иметь собственное имя, определяемое параметром NAME при описании данного фрейма. Существует, также, специальный атрибут — TARGET, позволяющий определять, к какому фрейму относится та или иная операция. Формат данного атрибута следующий:

TARGET="windows_name"

 

Данный атрибут может встречаться внутри различных тэгов:

TARGET в тэге A. Это самое прямое использование TARGET. Обычно, при активизации пользователем ссылки соответствующий документ появляется в том же окне (или фрейме), что и исходный, в котором была ссылка. Добавление атрибута TARGET позволяет произвести вывод документа в другой фрейм. Например:

<A HREF="mydoc.html" TARGET="Frame1"> Переход во фрейм №1 </A>

 

TARGET в тэге BASE. Размещение TARGET в тэге BASE позволит вам не указывать при описании каждой ссылки фрейм-приемник документов, вызываемых по ссылкам. Это очень удобно, если в одном фрейме у вас находится меню, а в другой выводится информация. Например:

Документ №1.

<FRAMESET ROWS="20,*">

<FRAME SRC="doc2.htm" NAME="Frame1">

<FRAME SRC="doc3.htm" NAME="Frame2">

</FRAMESET>

 

Документ №2 (doc2.htm).

<HTML>

<HEAD>

<BASE TARGET="Frame2">

</HEAD>

<BODY>

<A HREF="url1"> Первая часть</A> |

<A HREF="url2"> Вторая часть</A>

</BODY>

</HTML>

 

TARGET в тэге AREA. Также можно включать тэг TARGET в описание ссылки при создании карты изображения. Например:

<AREA SHAPE="circle" COORDS="100,100,50" HREF="http://www.softexpress.com" TARGET="Frame1">

 

TARGET в тэге FORM. Относится к определению формы. В данном случае, после обработки переданных параметров формы результирующий документ появится в указанном фрейме.

<FORM ACTION="url" TARGET="window_name">

 

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

TARGET="_blank". Данное значение определяет, что документ, полученный по ссылке, будет отображаться в новом окне браузера.

TARGET="_self". Данное значение определяет, что документ, полученный по ссылке, будет отображаться в том же фрейме, в котором находится ссылка. Это имя удобно для переопределения окна назначения, указанного ранее в тэге BASE.

TARGET="_parent". Данное значение определяет, что документ, полученный по ссылке, будет отображаться в родительском окне, вне зависимости от параметров FRAMESET. Если родительского окна нет, то данное имя аналогично "_self".

TARGET="_top". Данное значение определяет, что документ, полученный по ссылке, будет отображаться на всей поверхности окна, вне зависимости от наличия фреймов. Использование данного параметра удобно в случае вложенных фреймов.

 

Microsoft Internet Explorer поддерживает и так называемые плавающие фреймы. Они могут появляться в любом месте экрана. Текст, расположенный на главной странице, обтекает этот фрейм.

<IFRAME ALIGN=RIGHT WIDTH=50% HEIGHT=300 SRC="FILE.HTM">

</IFRAME>

 

   
 

 

2 Скриптовые программы

Для написания небольших программ, которые будем называть скриптами, часто используются языки VBScript (Visual Basic Scripting Edition) и JavaScript.

Для вставки скриптовых программ внутрь HTML-документа используется конструкция:

<SCRIPT LANGUAGE="VBScript|JavaScript">

<!--

...

-->

</SCRIPT>

 

Сам текст программы располагается в тэгах комментариях, что позволяет скрыть текст программы от браузеров, которые не поддерживают тэга <SCRIPT>.

Пример программы на языке JavaScript, реализующей часы реального времени:

<html>

<head>

<SCRIPT LANGUAGE="JavaScript">

<!-- Start of JavaScript

function SetClock(){

theTime=new Date();

hours=theTime.getHours();

if(hours<10)hours="0"+hours;

minutes=theTime.getMinutes();

if(minutes<10)minutes="0"+minutes;

seconds=theTime.getSeconds();

if(seconds<10)seconds="0"+seconds;

document.inputClock.fieldClock.value=hours+":"

+minutes+":"+seconds;

setTimeout("SetClock()",1000);

}

//End of JavaScript -->

</SCRIPT>

</head>

<body onLoad="SetClock()">

<form name="inputClock">

<input type="text" name="fieldClock" size=8>

</form>

</body>

</html>

 

3 Порядок выполнения работы

1. Создать с помощью программы "Блокнот" гипертекстовый файл. Имя файла — ваша фамилия. Файл разместить на указанном диске в папке с номером вашей группы.

2. Создать фреймовую структуру

 

Фрейм 1 Фрейм 2   Фрейм 1 Фрейм 2
Фрейм 3 Фрейм 3

 

3. Набрать скриптовую программу-часы, приведенную в методических указаниях к выполнению данной лабораторной работы.

 

4 Контрольные вопросы

1. Фреймы. Их назначение.

2. Синтаксис фреймов.

3. Планирование фреймов и взаимодействие между фреймами.

4. Зарезервированные имена фреймов.

5. Плавающие фреймы.

6. Скриптовые программы в HTML-документах.


Лабораторная работа № 32. Построение графических элементов для Web в среде программы Photoshop

 

Цель работы: 1) Изучение инструментов программы Photoshop;

2) Изучение технологии построения графических элементов для Web в среде программы Photoshop;

3) Создание и отладка простейших графических элементов для Web в среде программы Photoshop.

 

Объем работы 2 часа

 

1.Методические указания

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

После загрузки программы Photoshop в ее окне присутствуют следующие элементы:

 

 




Поиск по сайту:

©2015-2020 studopedya.ru Все права принадлежат авторам размещенных материалов.