Методические указания к лабораторным работам. Для студентов специальностей 0924, 092401, 092402 Составитель - davaiknam.ru o_O
Главная
Поиск по ключевым словам:
страница 1
Похожие работы
Название работы Кол-во страниц Размер
Методические указания к лабораторным работам для студентов всех специальностей... 1 232.02kb.
Методические указания к лабораторным работам №1,2,3,4 для студентов... 2 504.35kb.
Основы геотехники 3 424.75kb.
Методические указания к лабораторным работам Красноярск сфу 2011 1 88.3kb.
Методические указания к лабораторным работам Волгоград 2008 (07) 1 290.06kb.
Методические указания к лабораторным работам и домашним заданиям... 6 327.14kb.
Методические указания к контрольным работам по дисциплине «немецкий... 2 247.99kb.
Методические указания и задания к выполнению лабораторных работ для... 4 915.49kb.
Методические указания к лабораторным работам и курсовому проекту... 14 1099.47kb.
Методические указания к лабораторным занятиям Красноярск сфу 2013 6 605.62kb.
Методические указания для студентов 1 курса заочного обучения (07) 5 383.37kb.
Лабораторная работа №22 измерение сопротивлений проводников мостовыми... 1 57.65kb.
Направления изучения представлений о справедливости 1 202.17kb.

Методические указания к лабораторным работам. Для студентов специальностей 0924, - страница №1/1



Национальный технический университет Украины

"Киевский политехнический институт"

Информационные телекоммуникационные

платформы и стандарты Интернет

Методические указания к лабораторным работам.

Для студентов специальностей 6.0924, 7.092401, 7.092402




Составитель
АЛЕКСЕЕВ Николай Александрович

Киев 2006



Содержание

Введение 7

1 Основы проектирования для World Wide Web 14

2 Использование тэгов форматирования текста 20

3 Свойства элементов HTML - страниц 23

4 Проектирование таблиц 28

5 Использование фреймов 30

6 Применение Закладок и гиперссылок 32

7 Вставка рисунков и элементов мультимедиа 34

8 Проектирование форм и элементов управления 38

9 Изменение стандартных стилей и применение таблиц стилей 41

10 Использование событий и методов 46

11 Программное изменение страниц 54

12 Использование фильтров 58

13 Управление содержанием страницы 64

14 Диалоговые окна и формы 69

Приложение 2 76

Приложение 3 77




Введение


Среда проектирования

Для создания и редактирования HTML-страниц может быть использован любой текстовый редактор, например редактор «Блокнот». Однако более эффективным будет проектирование с помощью специализированных редакторов. В настоящее время на рынке программных продуктов имеется значительное число таких редакторов, и одним из лучших среди них является редактор сценариев «Microsoft development environment».

Ниже дается краткое описание среды проектирования и основных правил работы с редакторами «Блокнот» и «Microsoft development environment».

Текстовый редактор «Блокнот»

Текстовый редактор «Блокнот» - это относительно простой редактор, используемый для создания, просмотра и редактирования текстовых файлов. Кроме того, его часто используют для проектирования HTML-страниц.

Редактор «Блокнот» входит в состав стандартной поставки всех версий операционной системы Windows и обычно устанавливается при ее инсталляции. Чтобы запустить редактор на исполнение, используют меню кнопки «Пуск» (команда «Программы» - «Стандартные» - «Блокнот»).

С
реда проектирования редактора имеет текстовую область, предназначенную для создания текста, и командное меню, через которое можно обратиться к командам редактора (рисунок 1).



Рисунок 1- Текстовый редактор «Блокнот»

Текст набирается с помощью алфавитно-цифровых клавиш клавиатуры. Для набора текста, состоящего только из прописных букв, необходимо один раз нажать клавишу «Caps Look». Чтобы снова вернуться в режим набора строчных букв, клавишу «Caps Look» нажимают повторно. Кратковременный переход между режимами набора символов осуществляется нажатием клавиши «Shift».

При наборе текста каждый символ вставляется в то место текстовой области, которое отмечено положением курсора. Этим можно воспользоваться для выполнения простейшего редактирования текста – вставки пропущенных символов. Для вставки символа в уже набранный текст необходимо переместить курсор в выбранное место и набрать на клавиатуре требуемый символ (курсор перемещается мышкой или клавишами управления курсором - «Home», «End», «Page Up», «Page Down», стрелками вверх, вниз, влево, вправо. Для ускоренного перемещения курсора следует одновременно нажать одну из этих клавиш и клавишу «Ctrl»).

Другим простейшим способом редактирования текста является удаление символа. Для удаления символа достаточно нажать клавишу «Delete» (удаляется символ справа от курсора) или «Backspace» (удаляется символ слева от курсора).

Чтобы редактировать сразу несколько символов, их нужно предварительно выделить в блок. Блок выделяют одним из двух способов: 1) удерживая нажатой клавишу «Shift», перемещают курсор от начала блока к концу блока с помощью клавиш управления курсором или 2) перемещают курсор мышкой (при нажатой левой клавише мышки). Текст, выделенный в блок, можно: а) удалить (командой «Правка» - «Удалить»); б) запомнить и удалить (командой «Правка» - «Вырезать»; в) просто запомнить (командой «Правка» - «Копировать»). Если текст запомнен, то его можно вставить в место, указанное курсором, командой «Правка» - «Вставить». При этом текст, предназначенный для вставки, может быть предварительно запомнен не только в текущей странице редактора «Блокнот», но и во многих других приложениях, предназначенных для работы с текстами.

Названные команды, как и большинство других команд редактора, можно выполнить из командного меню или с помощью «горячих клавиш», т.е. клавиш, нажатие которых на клавиатуре приводит к выполнению соответствующей команды (команда «Удалить» - клавиша «Delete», «Вырезать» - одновременное нажатие клавиш «Ctrl» и «X», «Копировать» - «Ctrl» и «C», «Вставить» - «Ctrl» и «V»). Назначение «горячих клавиш» обычно указано в командном меню рядом с именем команды.

Помимо перечисленных команд командное меню содержит следующие основные команды, используемые при создании HTML-страниц:


  • «Правка» - «Отменить». Отменяет последнюю команду редактирования.

  • «Правка» - «Найти». Позволяет найти фрагмент текста по шаблону, задаваемому в диалоговом окне команды.

  • «Правка» - «Заменить». Дает возможность заменить один или несколько одинаковых фрагментов текста по всей странице в соответствии с шаблонами для поиска и замены, которые заданы в диалоговом окне команды.

  • «Файл – «Создать». Создает новую страницу. При этом если в редакторе уже создана и редактируется страница, то выполнение команды прервет работу над ней и будет предложено принять решение – продолжить работу с текущей страницей или создать новую, предварительно сохранив редактируемую или отказавшись от сохранения.

  • «Файл» - «Открыть». Открывает существующую страницу для редактирования. Для открытия HTML-страницы следует в диалоговом окне команды указать тип файлов – «Все файлы» (если этого не сделать, то в диалоговом окне будут отображаться имена только текстовых файлов).

  • «Файл» - «Сохранить». Сохраняет результаты редактирования страницы в файл. При написании имени файла в соответствующем поле диалогового окна команды лучше использовать только цифры и строчные буквы латинского алфавита. При создании HTML-страницы, кроме собственно имени файла, необходимо указать и его расширение (после имени файла набрать точку и три символа htm).

  • «Файл» - «Сохранить как…». Действие команды аналогично команде «Файл» - «Сохранить», и, кроме того, имеется возможность сохранить страницу в файле с новым именем.

Редактор сценариев «Microsoft development environment»

Редактор сценариев «Microsoft development environment» входит в интегрированный пакет «Microsoft Office» (начиная с версии 2000 года) и обычно устанавливается вместе с ним. Однако в связи с тем, что при инсталляции пакета команда для запуска редактора сценариев не отображается в меню команд кнопки «Пуск», ее необходимо внести туда самостоятельно. После этого редактор сценариев запускается обычным способом. Иначе редактор сценариев можно запустить из среды офисных приложений («Word», «Excel» и др.) с помощью команды «Сервис» - «Макрос» - «Редактор сценариев» из меню команд приложения.

На рисунке 2 показан один из наиболее часто настраиваемых вариантов среды проектирования редактора сценариев. Из рисунка видно, что с помощью вкладок режимов среда проектирования редактора сценариев может быть настроена таким образом, чтобы область проектирования являлась текстовой областью. При такой настройке возможности для работы с текстами в обоих редакторах почти полностью совпадают и при необходимости о них можно прочитать в предыдущем разделе.





Рисунок 2 – Редактор сценариев

Помимо работы в текстовом режиме (для перехода в него используется вкладка режимов «Source») редактор сценариев позволяет работать в режиме быстрого просмотра (вкладка режимов «Quick View») и визуального проектирования (вкладка режимов «Design»).

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

Проектируют внешний вид HTML-страницы обычно в режиме «Design». Здесь можно написать и отформатировать тексты, внедрить и изменить размеры элементов управления, внедрить и отобразить рисунки, помещаемые на страницу, и т.п. При этом многие действия выполняются значительно быстрее, если использовать соответствующие команды среды проектирования.

Командное меню редактора содержит следующие группы команд:


  • File – группа стандартных команд приложений Microsoft Windows, предназначенных для работы с файлами – создания файла новой страницы, открытия существующего файла, сохранения результатов проектирования и т.д.

  • Edit – команды редактирования, позволяющие удалять, копировать, вставлять, находить и замещать отдельные разделы страницы, получать информацию об элементах, расположенных на странице, отменять и возвращать выполненные действия.

  • View - команды для управления внешним видом и содержанием окон и панелей инструментов среды редактора сценариев. Основные из них:

    - Project Explorer. Открывает/закрывает окно проводника проекта (окно отображает названия загруженных в редактор страниц и может быть использовано для перехода между ними).

    - Properties Window. Открывает/закрывает окно свойств (окно используется для отображения и изменения свойств элементов, расположенных на странице).

    - Toolbox. Открывает/закрывает панель инструментов Toolbox (панель используется для вставки в страницу тэгов встроенных элементов управления).

    - Toolbars. Открывает/закрывает и позволяет настроить панели инструментов Debug, Design, HTML, Standard, Window UI, каждая из которых содержит пиктограммы наиболее часто используемых команд.


  • Debug – команды отладки сценариев страницы, предназначенные для пошагового исполнения программного кода, управления точками прерывания вычислительного процесса, просмотра результатов промежуточных вычислений и др.

  • HTML – команды, позволяющие вставлять в страницу стандартные тэги.

  • Table – команды создания и изменения свойств таблиц.

  • Format – команды форматирования текстовых разделов страницы.

  • Tools – группа команд для включения в проект динамических библиотек, элементов управления и других компонентов внешних приложений, а также для настройки редактора сценариев.

  • Window – команды управления расположением окон открытых страниц в области проектирования редактора сценариев.

  • Help – команды обращения к справочной системе редактора сценариев.


Лабораторные работы

Целью выполнения работ является освоение методики применения стандарта HTML 4.0 для WEB-проектирования.

В основе WEB-проектирования на базе HTML 4.0 лежит понятие о HTML-странице – текстовом файле с расширениями .htm или .html, имеющем регламентированную структуру и разделенном на заголовок, который включает служебную информацию и содержательную часть, отображаемую на экране монитора в соответствии с помещенными в нее инструкциями и программным кодом. В связи с этим и изучение методики проектирования начинается с рассмотрения основ создания HTML-страниц:


  • формирования обязательных структурных элементов и задания их в текстовом файле (работа 1 – «Основы проектирования для WORLD WIDE WEB»);

  • использования основных тэгов, определяющих формат текстов из содержательной части страницы (работа 2 – «Использование тэгов форматирования текста»; работа 3 –«Свойства элементов HTML-страниц»);

  • применения тэгов для включения в содержательную часть страницы элементов оформления и управления (работа 4 – «Проектирование таблиц»; работа 5 – «Использование фреймов»; работа 6 – «Применение закладок и гиперссылок»; работа 7 – «Вставка рисунков и элементов мультимедиа»; работа 8 – «Проектирование форм и элементов управления»).

Понимание основ HTML является необходимым для дальнейшего изучения Dynamic HTML-проектирования – технологии проектирования, дополняющей стандарт HTML 4.0 возможностями динамического изменения содержания страницы (работа 9 - «Изменение стандартных стилей и применение таблиц стилей»; работа 10 – «Использование событий и методов»; работа 11 – «Программное изменение страниц»; работа 12 – «Использование фильтров»; работа 13 – «Управление содержанием страницы») и средствами создания и ведения диалога (работа 14 – «Диалоговые окна и формы»).

1Основы проектирования для World Wide Web

1.1Цель работы


Изучение структуры HTML - страницы и основ проектирования для World Wide Web.

1.2Содержание работы


Структура HTML - страницы

HTML - страница - это обычный текстовой файл, который содержит набор инструкций для интерпретации внутри специально предназначенных программ - браузеров типа Internet Explorer, Netscape Navigator и др. (см. п. 3.7 «Работа в сети Интернет»). После прочтения с сервера HTML - страницы браузер, установленный на компьютере пользователя, получает содержащиеся в инструкциях указания по форматированию текста, отображению графических элементов, элементов управления, других элементов, включенных в страницу, и приводит в соответствии с ними страницу к тому виду, который в конечном счете и отображается на экране монитора. Кроме того, HTML – страница содержит исходные тексты специальных программ, записанных на языках программирования Java или Visual Basic, которые также могут выполняться с помощью браузера.



Тэги

Для того чтобы отличить инструкцию браузера от обычного текста, она заключается в угловые кавычки. Такая, заключенная в кавычки часть HTML - страницы называется тэгом. Тэги обычно записываются попарно: первый тэг определяет начало текста, с которого должны действовать содержащиеся в нем инструкции, и затем второй тэг, который указывает на окончание действия соответствующих инструкций. Внутри каждого из парных тэгов записывается имя, по которому он отождествляется, и чтобы отличить конечный тэг от начального, в нем записывается знак «/» (слэш), например:



ЗАНЯТИЕ 1

- отобразить текст «ЗАНЯТИЕ 1», заключенный в парные тэги H1, как заголовок первого уровня.

Кроме того, начальный тэг может содержать описание дополнительных свойств, уточняющих действие инструкций. Если свойств несколько, то они отделяются друг от друга пробелом. Чтобы указать свойство, сначала записывается его полное имя (иногда сокращенное), а затем после знака равно значение, которое оно должно принять. Тип значения является символьным и поэтому лучше указывать его в одинарных (’) или двойных (”) кавычках (в некоторых случаях требуется записывать две открывающие и две закрывающие кавычки и тогда можно использовать совместно одинарные и двойные кавычки). Но не будет и ошибки, если при записи значения свойства, содержащего только символы английского алфавита, цифры или знак дефиса «-», кавычки будут опущены.

Примеры:

align=”center”>ЗАНЯТИЕ 1

- расположить заголовок первого уровня по центру страницы;

color=red size=5>Тема лекции - отобразить слова «Тема лекции» шрифтом красного цвета и размером 5.

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



Тема лекции ,

приведут к тому, что текст отобразится полужирными и подчеркнутыми буквами (Тема лекции).

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

ЗАНЯТИЕ 1



ЗАНЯТИЕ

1



ЗАНЯТИЕ 1



Скрипты

Скрипты представляет собой разновидность кода компьютерной программы, используемой для придания динамики HTML-страницам. Такая программа обычно записывается в виде исходного текста с использованием соответствующих диалектов языков Visual Basic (VB-скрипты) или Java (Java-скрипты). Браузер воспринимает текст такой программы, интерпретирует его в команды компьютеру и позволяет таким образом реализовать различные сценарии работы со страницей.

Для включения скриптов в HTML-страницу предназначен специальный тэг

Содержание страницы

Минимальная структура HTML - страницы включает следующие обязательные тэги (если они отсутствуют, то браузер подставляет их автоматически):












Содержательная часть






Величие нации вовсе не измеряется ее численностью, как величие человека не измеряется его ростом. Виктор Гюго
ещё >>